\r\n * \r\n * Left Nav!\r\n * \r\n *\r\n * \r\n * Center Content\r\n * \r\n * Open Left Menu\r\n * \r\n * \r\n *\r\n * \r\n * \r\n * \r\n *
\r\n * \r\n **/\r\n function MdAutofocusDirective() {\r\n return {\r\n restrict: \"A\",\r\n\r\n link: postLink\r\n };\r\n }\r\n\r\n function postLink(scope, element, attrs) {\r\n var attr = attrs.mdAutoFocus || attrs.mdAutofocus || attrs.mdSidenavFocus;\r\n\r\n // Setup a watcher on the proper attribute to update a class we can check for in $mdUtil\r\n scope.$watch(attr, function(canAutofocus) {\r\n element.toggleClass(\"md-autofocus\", canAutofocus);\r\n });\r\n }\r\n })();\r\n (function() {\r\n \"use strict\";\r\n\r\n /**\r\n * @ngdoc module\r\n * @name material.core.colorUtil\r\n * @description\r\n * Color Util\r\n */\r\n angular.module(\"material.core\").factory(\"$mdColorUtil\", ColorUtilFactory);\r\n\r\n function ColorUtilFactory() {\r\n /**\r\n * Converts hex value to RGBA string\r\n * @param color {string}\r\n * @returns {string}\r\n */\r\n function hexToRgba(color) {\r\n var hex = color[0] === \"#\" ? color.substr(1) : color,\r\n dig = hex.length / 3,\r\n red = hex.substr(0, dig),\r\n green = hex.substr(dig, dig),\r\n blue = hex.substr(dig * 2);\r\n if (dig === 1) {\r\n red += red;\r\n green += green;\r\n blue += blue;\r\n }\r\n return (\r\n \"rgba(\" +\r\n parseInt(red, 16) +\r\n \",\" +\r\n parseInt(green, 16) +\r\n \",\" +\r\n parseInt(blue, 16) +\r\n \",0.1)\"\r\n );\r\n }\r\n\r\n /**\r\n * Converts rgba value to hex string\r\n * @param color {string}\r\n * @returns {string}\r\n */\r\n function rgbaToHex(color) {\r\n color = color.match(\r\n /^rgba?[\\s+]?\\([\\s+]?(\\d+)[\\s+]?,[\\s+]?(\\d+)[\\s+]?,[\\s+]?(\\d+)[\\s+]?/i\r\n );\r\n\r\n var hex =\r\n color && color.length === 4\r\n ? \"#\" +\r\n (\"0\" + parseInt(color[1], 10).toString(16)).slice(-2) +\r\n (\"0\" + parseInt(color[2], 10).toString(16)).slice(-2) +\r\n (\"0\" + parseInt(color[3], 10).toString(16)).slice(-2)\r\n : \"\";\r\n\r\n return hex.toUpperCase();\r\n }\r\n\r\n /**\r\n * Converts an RGB color to RGBA\r\n * @param color {string}\r\n * @returns {string}\r\n */\r\n function rgbToRgba(color) {\r\n return color.replace(\")\", \", 0.1)\").replace(\"(\", \"a(\");\r\n }\r\n\r\n /**\r\n * Converts an RGBA color to RGB\r\n * @param color {string}\r\n * @returns {string}\r\n */\r\n function rgbaToRgb(color) {\r\n return color\r\n ? color.replace(\"rgba\", \"rgb\").replace(/,[^\\),]+\\)/, \")\")\r\n : \"rgb(0,0,0)\";\r\n }\r\n\r\n return {\r\n rgbaToHex: rgbaToHex,\r\n hexToRgba: hexToRgba,\r\n rgbToRgba: rgbToRgba,\r\n rgbaToRgb: rgbaToRgb\r\n };\r\n }\r\n })();\r\n (function() {\r\n \"use strict\";\r\n\r\n MdConstantFactory.$inject = [\"$sniffer\", \"$window\", \"$document\"];\r\n angular.module(\"material.core\").factory(\"$mdConstant\", MdConstantFactory);\r\n\r\n /**\r\n * Factory function that creates the grab-bag $mdConstant service.\r\n * @ngInject\r\n */\r\n function MdConstantFactory($sniffer, $window, $document) {\r\n var vendorPrefix = $sniffer.vendorPrefix;\r\n var isWebkit = /webkit/i.test(vendorPrefix);\r\n var SPECIAL_CHARS_REGEXP = /([:\\-_]+(.))/g;\r\n var prefixTestEl = document.createElement(\"div\");\r\n\r\n function vendorProperty(name) {\r\n // Add a dash between the prefix and name, to be able to transform the string into camelcase.\r\n var prefixedName = vendorPrefix + \"-\" + name;\r\n var ucPrefix = camelCase(prefixedName);\r\n var lcPrefix = ucPrefix.charAt(0).toLowerCase() + ucPrefix.substring(1);\r\n\r\n return hasStyleProperty(name)\r\n ? name // The current browser supports the un-prefixed property\r\n : hasStyleProperty(ucPrefix)\r\n ? ucPrefix // The current browser only supports the prefixed property.\r\n : hasStyleProperty(lcPrefix)\r\n ? lcPrefix\r\n : name; // Some browsers are only supporting the prefix in lowercase.\r\n }\r\n\r\n function hasStyleProperty(property) {\r\n return angular.isDefined(prefixTestEl.style[property]);\r\n }\r\n\r\n function camelCase(input) {\r\n return input.replace(SPECIAL_CHARS_REGEXP, function(\r\n matches,\r\n separator,\r\n letter,\r\n offset\r\n ) {\r\n return offset ? letter.toUpperCase() : letter;\r\n });\r\n }\r\n\r\n var self = {\r\n isInputKey: function(e) {\r\n return e.keyCode >= 31 && e.keyCode <= 90;\r\n },\r\n isNumPadKey: function(e) {\r\n return 3 === e.location && e.keyCode >= 97 && e.keyCode <= 105;\r\n },\r\n isNavigationKey: function(e) {\r\n var kc = self.KEY_CODE,\r\n NAVIGATION_KEYS = [kc.SPACE, kc.ENTER, kc.UP_ARROW, kc.DOWN_ARROW];\r\n return NAVIGATION_KEYS.indexOf(e.keyCode) != -1;\r\n },\r\n\r\n KEY_CODE: {\r\n COMMA: 188,\r\n SEMICOLON: 186,\r\n ENTER: 13,\r\n ESCAPE: 27,\r\n SPACE: 32,\r\n PAGE_UP: 33,\r\n PAGE_DOWN: 34,\r\n END: 35,\r\n HOME: 36,\r\n LEFT_ARROW: 37,\r\n UP_ARROW: 38,\r\n RIGHT_ARROW: 39,\r\n DOWN_ARROW: 40,\r\n TAB: 9,\r\n BACKSPACE: 8,\r\n DELETE: 46\r\n },\r\n CSS: {\r\n /* Constants */\r\n TRANSITIONEND:\r\n \"transitionend\" + (isWebkit ? \" webkitTransitionEnd\" : \"\"),\r\n ANIMATIONEND:\r\n \"animationend\" + (isWebkit ? \" webkitAnimationEnd\" : \"\"),\r\n\r\n TRANSFORM: vendorProperty(\"transform\"),\r\n TRANSFORM_ORIGIN: vendorProperty(\"transformOrigin\"),\r\n TRANSITION: vendorProperty(\"transition\"),\r\n TRANSITION_DURATION: vendorProperty(\"transitionDuration\"),\r\n ANIMATION_PLAY_STATE: vendorProperty(\"animationPlayState\"),\r\n ANIMATION_DURATION: vendorProperty(\"animationDuration\"),\r\n ANIMATION_NAME: vendorProperty(\"animationName\"),\r\n ANIMATION_TIMING: vendorProperty(\"animationTimingFunction\"),\r\n ANIMATION_DIRECTION: vendorProperty(\"animationDirection\")\r\n },\r\n /**\r\n * As defined in core/style/variables.scss\r\n *\r\n * $layout-breakpoint-xs: 600px !default;\r\n * $layout-breakpoint-sm: 960px !default;\r\n * $layout-breakpoint-md: 1280px !default;\r\n * $layout-breakpoint-lg: 1920px !default;\r\n *\r\n */\r\n MEDIA: {\r\n xs: \"(max-width: 599px)\",\r\n \"gt-xs\": \"(min-width: 600px)\",\r\n sm: \"(min-width: 600px) and (max-width: 959px)\",\r\n \"gt-sm\": \"(min-width: 960px)\",\r\n md: \"(min-width: 960px) and (max-width: 1279px)\",\r\n \"gt-md\": \"(min-width: 1280px)\",\r\n lg: \"(min-width: 1280px) and (max-width: 1919px)\",\r\n \"gt-lg\": \"(min-width: 1920px)\",\r\n xl: \"(min-width: 1920px)\",\r\n landscape: \"(orientation: landscape)\",\r\n portrait: \"(orientation: portrait)\",\r\n print: \"print\"\r\n },\r\n MEDIA_PRIORITY: [\r\n \"xl\",\r\n \"gt-lg\",\r\n \"lg\",\r\n \"gt-md\",\r\n \"md\",\r\n \"gt-sm\",\r\n \"sm\",\r\n \"gt-xs\",\r\n \"xs\",\r\n \"landscape\",\r\n \"portrait\",\r\n \"print\"\r\n ]\r\n };\r\n\r\n return self;\r\n }\r\n })();\r\n (function() {\r\n \"use strict\";\r\n\r\n angular.module(\"material.core\").config([\r\n \"$provide\",\r\n function($provide) {\r\n $provide.decorator(\"$mdUtil\", [\r\n \"$delegate\",\r\n function($delegate) {\r\n /**\r\n * Inject the iterator facade to easily support iteration and accessors\r\n * @see iterator below\r\n */\r\n $delegate.iterator = MdIterator;\r\n\r\n return $delegate;\r\n }\r\n ]);\r\n }\r\n ]);\r\n\r\n /**\r\n * iterator is a list facade to easily support iteration and accessors\r\n *\r\n * @param items Array list which this iterator will enumerate\r\n * @param reloop Boolean enables iterator to consider the list as an endless reloop\r\n */\r\n function MdIterator(items, reloop) {\r\n var trueFn = function() {\r\n return true;\r\n };\r\n\r\n if (items && !angular.isArray(items)) {\r\n items = Array.prototype.slice.call(items);\r\n }\r\n\r\n reloop = !!reloop;\r\n var _items = items || [];\r\n\r\n // Published API\r\n return {\r\n items: getItems,\r\n count: count,\r\n\r\n inRange: inRange,\r\n contains: contains,\r\n indexOf: indexOf,\r\n itemAt: itemAt,\r\n\r\n findBy: findBy,\r\n\r\n add: add,\r\n remove: remove,\r\n\r\n first: first,\r\n last: last,\r\n next: angular.bind(null, findSubsequentItem, false),\r\n previous: angular.bind(null, findSubsequentItem, true),\r\n\r\n hasPrevious: hasPrevious,\r\n hasNext: hasNext\r\n };\r\n\r\n /**\r\n * Publish copy of the enumerable set\r\n * @returns {Array|*}\r\n */\r\n function getItems() {\r\n return [].concat(_items);\r\n }\r\n\r\n /**\r\n * Determine length of the list\r\n * @returns {Array.length|*|number}\r\n */\r\n function count() {\r\n return _items.length;\r\n }\r\n\r\n /**\r\n * Is the index specified valid\r\n * @param index\r\n * @returns {Array.length|*|number|boolean}\r\n */\r\n function inRange(index) {\r\n return _items.length && index > -1 && index < _items.length;\r\n }\r\n\r\n /**\r\n * Can the iterator proceed to the next item in the list; relative to\r\n * the specified item.\r\n *\r\n * @param item\r\n * @returns {Array.length|*|number|boolean}\r\n */\r\n function hasNext(item) {\r\n return item ? inRange(indexOf(item) + 1) : false;\r\n }\r\n\r\n /**\r\n * Can the iterator proceed to the previous item in the list; relative to\r\n * the specified item.\r\n *\r\n * @param item\r\n * @returns {Array.length|*|number|boolean}\r\n */\r\n function hasPrevious(item) {\r\n return item ? inRange(indexOf(item) - 1) : false;\r\n }\r\n\r\n /**\r\n * Get item at specified index/position\r\n * @param index\r\n * @returns {*}\r\n */\r\n function itemAt(index) {\r\n return inRange(index) ? _items[index] : null;\r\n }\r\n\r\n /**\r\n * Find all elements matching the key/value pair\r\n * otherwise return null\r\n *\r\n * @param val\r\n * @param key\r\n *\r\n * @return array\r\n */\r\n function findBy(key, val) {\r\n return _items.filter(function(item) {\r\n return item[key] === val;\r\n });\r\n }\r\n\r\n /**\r\n * Add item to list\r\n * @param item\r\n * @param index\r\n * @returns {*}\r\n */\r\n function add(item, index) {\r\n if (!item) return -1;\r\n\r\n if (!angular.isNumber(index)) {\r\n index = _items.length;\r\n }\r\n\r\n _items.splice(index, 0, item);\r\n\r\n return indexOf(item);\r\n }\r\n\r\n /**\r\n * Remove item from list...\r\n * @param item\r\n */\r\n function remove(item) {\r\n if (contains(item)) {\r\n _items.splice(indexOf(item), 1);\r\n }\r\n }\r\n\r\n /**\r\n * Get the zero-based index of the target item\r\n * @param item\r\n * @returns {*}\r\n */\r\n function indexOf(item) {\r\n return _items.indexOf(item);\r\n }\r\n\r\n /**\r\n * Boolean existence check\r\n * @param item\r\n * @returns {boolean}\r\n */\r\n function contains(item) {\r\n return item && indexOf(item) > -1;\r\n }\r\n\r\n /**\r\n * Return first item in the list\r\n * @returns {*}\r\n */\r\n function first() {\r\n return _items.length ? _items[0] : null;\r\n }\r\n\r\n /**\r\n * Return last item in the list...\r\n * @returns {*}\r\n */\r\n function last() {\r\n return _items.length ? _items[_items.length - 1] : null;\r\n }\r\n\r\n /**\r\n * Find the next item. If reloop is true and at the end of the list, it will go back to the\r\n * first item. If given, the `validate` callback will be used to determine whether the next item\r\n * is valid. If not valid, it will try to find the next item again.\r\n *\r\n * @param {boolean} backwards Specifies the direction of searching (forwards/backwards)\r\n * @param {*} item The item whose subsequent item we are looking for\r\n * @param {Function=} validate The `validate` function\r\n * @param {integer=} limit The recursion limit\r\n *\r\n * @returns {*} The subsequent item or null\r\n */\r\n function findSubsequentItem(backwards, item, validate, limit) {\r\n validate = validate || trueFn;\r\n\r\n var curIndex = indexOf(item);\r\n while (true) {\r\n if (!inRange(curIndex)) return null;\r\n\r\n var nextIndex = curIndex + (backwards ? -1 : 1);\r\n var foundItem = null;\r\n if (inRange(nextIndex)) {\r\n foundItem = _items[nextIndex];\r\n } else if (reloop) {\r\n foundItem = backwards ? last() : first();\r\n nextIndex = indexOf(foundItem);\r\n }\r\n\r\n if (foundItem === null || nextIndex === limit) return null;\r\n if (validate(foundItem)) return foundItem;\r\n\r\n if (angular.isUndefined(limit)) limit = nextIndex;\r\n\r\n curIndex = nextIndex;\r\n }\r\n }\r\n }\r\n })();\r\n (function() {\r\n \"use strict\";\r\n\r\n mdMediaFactory.$inject = [\"$mdConstant\", \"$rootScope\", \"$window\"];\r\n angular.module(\"material.core\").factory(\"$mdMedia\", mdMediaFactory);\r\n\r\n /**\r\n * @ngdoc service\r\n * @name $mdMedia\r\n * @module material.core\r\n *\r\n * @description\r\n * `$mdMedia` is used to evaluate whether a given media query is true or false given the\r\n * current device's screen / window size. The media query will be re-evaluated on resize, allowing\r\n * you to register a watch.\r\n *\r\n * `$mdMedia` also has pre-programmed support for media queries that match the layout breakpoints:\r\n *\r\n *
\r\n * \r\n *
\r\n *
Breakpoint
\r\n *
mediaQuery
\r\n *
\r\n * \r\n * \r\n *
\r\n *
xs
\r\n *
(max-width: 599px)
\r\n *
\r\n *
\r\n *
gt-xs
\r\n *
(min-width: 600px)
\r\n *
\r\n *
\r\n *
sm
\r\n *
(min-width: 600px) and (max-width: 959px)
\r\n *
\r\n *
\r\n *
gt-sm
\r\n *
(min-width: 960px)
\r\n *
\r\n *
\r\n *
md
\r\n *
(min-width: 960px) and (max-width: 1279px)
\r\n *
\r\n *
\r\n *
gt-md
\r\n *
(min-width: 1280px)
\r\n *
\r\n *
\r\n *
lg
\r\n *
(min-width: 1280px) and (max-width: 1919px)
\r\n *
\r\n *
\r\n *
gt-lg
\r\n *
(min-width: 1920px)
\r\n *
\r\n *
\r\n *
xl
\r\n *
(min-width: 1920px)
\r\n *
\r\n *
\r\n *
landscape
\r\n *
landscape
\r\n *
\r\n *
\r\n *
portrait
\r\n *
portrait
\r\n *
\r\n *
\r\n *
print
\r\n *
print
\r\n *
\r\n * \r\n *
\r\n *\r\n * See Material Design's Layout - Adaptive UI for more details.\r\n *\r\n * \r\n * \r\n * \r\n *\r\n * @returns {boolean} a boolean representing whether or not the given media query is true or false.\r\n *\r\n * @usage\r\n * \r\n * app.controller('MyController', function($mdMedia, $scope) {\r\n * $scope.$watch(function() { return $mdMedia('lg'); }, function(big) {\r\n * $scope.bigScreen = big;\r\n * });\r\n *\r\n * $scope.screenIsSmall = $mdMedia('sm');\r\n * $scope.customQuery = $mdMedia('(min-width: 1234px)');\r\n * $scope.anotherCustom = $mdMedia('max-width: 300px');\r\n * });\r\n * \r\n */\r\n\r\n /* @ngInject */\r\n function mdMediaFactory($mdConstant, $rootScope, $window) {\r\n var queries = {};\r\n var mqls = {};\r\n var results = {};\r\n var normalizeCache = {};\r\n\r\n $mdMedia.getResponsiveAttribute = getResponsiveAttribute;\r\n $mdMedia.getQuery = getQuery;\r\n $mdMedia.watchResponsiveAttributes = watchResponsiveAttributes;\r\n\r\n return $mdMedia;\r\n\r\n function $mdMedia(query) {\r\n var validated = queries[query];\r\n if (angular.isUndefined(validated)) {\r\n validated = queries[query] = validate(query);\r\n }\r\n\r\n var result = results[validated];\r\n if (angular.isUndefined(result)) {\r\n result = add(validated);\r\n }\r\n\r\n return result;\r\n }\r\n\r\n function validate(query) {\r\n return (\r\n $mdConstant.MEDIA[query] ||\r\n (query.charAt(0) !== \"(\" ? \"(\" + query + \")\" : query)\r\n );\r\n }\r\n\r\n function add(query) {\r\n var result = mqls[query];\r\n if (!result) {\r\n result = mqls[query] = $window.matchMedia(query);\r\n }\r\n\r\n result.addListener(onQueryChange);\r\n return (results[result.media] = !!result.matches);\r\n }\r\n\r\n function onQueryChange(query) {\r\n $rootScope.$evalAsync(function() {\r\n results[query.media] = !!query.matches;\r\n });\r\n }\r\n\r\n function getQuery(name) {\r\n return mqls[name];\r\n }\r\n\r\n function getResponsiveAttribute(attrs, attrName) {\r\n for (var i = 0; i < $mdConstant.MEDIA_PRIORITY.length; i++) {\r\n var mediaName = $mdConstant.MEDIA_PRIORITY[i];\r\n if (!mqls[queries[mediaName]].matches) {\r\n continue;\r\n }\r\n\r\n var normalizedName = getNormalizedName(\r\n attrs,\r\n attrName + \"-\" + mediaName\r\n );\r\n if (attrs[normalizedName]) {\r\n return attrs[normalizedName];\r\n }\r\n }\r\n\r\n // fallback on unprefixed\r\n return attrs[getNormalizedName(attrs, attrName)];\r\n }\r\n\r\n function watchResponsiveAttributes(attrNames, attrs, watchFn) {\r\n var unwatchFns = [];\r\n attrNames.forEach(function(attrName) {\r\n var normalizedName = getNormalizedName(attrs, attrName);\r\n if (angular.isDefined(attrs[normalizedName])) {\r\n unwatchFns.push(\r\n attrs.$observe(\r\n normalizedName,\r\n angular.bind(void 0, watchFn, null)\r\n )\r\n );\r\n }\r\n\r\n for (var mediaName in $mdConstant.MEDIA) {\r\n normalizedName = getNormalizedName(\r\n attrs,\r\n attrName + \"-\" + mediaName\r\n );\r\n if (angular.isDefined(attrs[normalizedName])) {\r\n unwatchFns.push(\r\n attrs.$observe(\r\n normalizedName,\r\n angular.bind(void 0, watchFn, mediaName)\r\n )\r\n );\r\n }\r\n }\r\n });\r\n\r\n return function unwatch() {\r\n unwatchFns.forEach(function(fn) {\r\n fn();\r\n });\r\n };\r\n }\r\n\r\n // Improves performance dramatically\r\n function getNormalizedName(attrs, attrName) {\r\n return (\r\n normalizeCache[attrName] ||\r\n (normalizeCache[attrName] = attrs.$normalize(attrName))\r\n );\r\n }\r\n }\r\n })();\r\n (function() {\r\n \"use strict\";\r\n\r\n angular.module(\"material.core\").config([\r\n \"$provide\",\r\n function($provide) {\r\n $provide.decorator(\"$mdUtil\", [\r\n \"$delegate\",\r\n function($delegate) {\r\n // Inject the prefixer into our original $mdUtil service.\r\n $delegate.prefixer = MdPrefixer;\r\n\r\n return $delegate;\r\n }\r\n ]);\r\n }\r\n ]);\r\n\r\n function MdPrefixer(initialAttributes, buildSelector) {\r\n var PREFIXES = [\"data\", \"x\"];\r\n\r\n if (initialAttributes) {\r\n // The prefixer also accepts attributes as a parameter, and immediately builds a list or selector for\r\n // the specified attributes.\r\n return buildSelector\r\n ? _buildSelector(initialAttributes)\r\n : _buildList(initialAttributes);\r\n }\r\n\r\n return {\r\n buildList: _buildList,\r\n buildSelector: _buildSelector,\r\n hasAttribute: _hasAttribute,\r\n removeAttribute: _removeAttribute\r\n };\r\n\r\n function _buildList(attributes) {\r\n attributes = angular.isArray(attributes) ? attributes : [attributes];\r\n\r\n attributes.forEach(function(item) {\r\n PREFIXES.forEach(function(prefix) {\r\n attributes.push(prefix + \"-\" + item);\r\n });\r\n });\r\n\r\n return attributes;\r\n }\r\n\r\n function _buildSelector(attributes) {\r\n attributes = angular.isArray(attributes) ? attributes : [attributes];\r\n\r\n return _buildList(attributes)\r\n .map(function(item) {\r\n return \"[\" + item + \"]\";\r\n })\r\n .join(\",\");\r\n }\r\n\r\n function _hasAttribute(element, attribute) {\r\n element = _getNativeElement(element);\r\n\r\n if (!element) {\r\n return false;\r\n }\r\n\r\n var prefixedAttrs = _buildList(attribute);\r\n\r\n for (var i = 0; i < prefixedAttrs.length; i++) {\r\n if (element.hasAttribute(prefixedAttrs[i])) {\r\n return true;\r\n }\r\n }\r\n\r\n return false;\r\n }\r\n\r\n function _removeAttribute(element, attribute) {\r\n element = _getNativeElement(element);\r\n\r\n if (!element) {\r\n return;\r\n }\r\n\r\n _buildList(attribute).forEach(function(prefixedAttribute) {\r\n element.removeAttribute(prefixedAttribute);\r\n });\r\n }\r\n\r\n /**\r\n * Transforms a jqLite or DOM element into a HTML element.\r\n * This is useful when supporting jqLite elements and DOM elements at\r\n * same time.\r\n * @param element {JQLite|Element} Element to be parsed\r\n * @returns {HTMLElement} Parsed HTMLElement\r\n */\r\n function _getNativeElement(element) {\r\n element = element[0] || element;\r\n\r\n if (element.nodeType) {\r\n return element;\r\n }\r\n }\r\n }\r\n })();\r\n (function() {\r\n \"use strict\";\r\n\r\n /*\r\n * This var has to be outside the angular factory, otherwise when\r\n * there are multiple material apps on the same page, each app\r\n * will create its own instance of this array and the app's IDs\r\n * will not be unique.\r\n */\r\n UtilFactory.$inject = [\r\n \"$document\",\r\n \"$timeout\",\r\n \"$compile\",\r\n \"$rootScope\",\r\n \"$$mdAnimate\",\r\n \"$interpolate\",\r\n \"$log\",\r\n \"$rootElement\",\r\n \"$window\",\r\n \"$$rAF\"\r\n ];\r\n var nextUniqueId = 0;\r\n\r\n /**\r\n * @ngdoc module\r\n * @name material.core.util\r\n * @description\r\n * Util\r\n */\r\n angular.module(\"material.core\").factory(\"$mdUtil\", UtilFactory);\r\n\r\n /**\r\n * @ngInject\r\n */\r\n function UtilFactory(\r\n $document,\r\n $timeout,\r\n $compile,\r\n $rootScope,\r\n $$mdAnimate,\r\n $interpolate,\r\n $log,\r\n $rootElement,\r\n $window,\r\n $$rAF\r\n ) {\r\n // Setup some core variables for the processTemplate method\r\n var startSymbol = $interpolate.startSymbol(),\r\n endSymbol = $interpolate.endSymbol(),\r\n usesStandardSymbols = startSymbol === \"{{\" && endSymbol === \"}}\";\r\n\r\n /**\r\n * Checks if the target element has the requested style by key\r\n * @param {DOMElement|JQLite} target Target element\r\n * @param {string} key Style key\r\n * @param {string=} expectedVal Optional expected value\r\n * @returns {boolean} Whether the target element has the style or not\r\n */\r\n var hasComputedStyle = function(target, key, expectedVal) {\r\n var hasValue = false;\r\n\r\n if (target && target.length) {\r\n var computedStyles = $window.getComputedStyle(target[0]);\r\n hasValue =\r\n angular.isDefined(computedStyles[key]) &&\r\n (expectedVal ? computedStyles[key] == expectedVal : true);\r\n }\r\n\r\n return hasValue;\r\n };\r\n\r\n function validateCssValue(value) {\r\n return !value\r\n ? \"0\"\r\n : hasPx(value) || hasPercent(value)\r\n ? value\r\n : value + \"px\";\r\n }\r\n\r\n function hasPx(value) {\r\n return String(value).indexOf(\"px\") > -1;\r\n }\r\n\r\n function hasPercent(value) {\r\n return String(value).indexOf(\"%\") > -1;\r\n }\r\n\r\n var $mdUtil = {\r\n dom: {},\r\n now: window.performance\r\n ? angular.bind(window.performance, window.performance.now)\r\n : Date.now ||\r\n function() {\r\n return new Date().getTime();\r\n },\r\n\r\n /**\r\n * Bi-directional accessor/mutator used to easily update an element's\r\n * property based on the current 'dir'ectional value.\r\n */\r\n bidi: function(element, property, lValue, rValue) {\r\n var ltr = !(\r\n $document[0].dir == \"rtl\" || $document[0].body.dir == \"rtl\"\r\n );\r\n\r\n // If accessor\r\n if (arguments.length == 0) return ltr ? \"ltr\" : \"rtl\";\r\n\r\n // If mutator\r\n var elem = angular.element(element);\r\n\r\n if (ltr && angular.isDefined(lValue)) {\r\n elem.css(property, validateCssValue(lValue));\r\n } else if (!ltr && angular.isDefined(rValue)) {\r\n elem.css(property, validateCssValue(rValue));\r\n }\r\n },\r\n\r\n bidiProperty: function(element, lProperty, rProperty, value) {\r\n var ltr = !(\r\n $document[0].dir == \"rtl\" || $document[0].body.dir == \"rtl\"\r\n );\r\n\r\n var elem = angular.element(element);\r\n\r\n if (ltr && angular.isDefined(lProperty)) {\r\n elem.css(lProperty, validateCssValue(value));\r\n elem.css(rProperty, \"\");\r\n } else if (!ltr && angular.isDefined(rProperty)) {\r\n elem.css(rProperty, validateCssValue(value));\r\n elem.css(lProperty, \"\");\r\n }\r\n },\r\n\r\n clientRect: function(element, offsetParent, isOffsetRect) {\r\n var node = getNode(element);\r\n offsetParent = getNode(\r\n offsetParent || node.offsetParent || document.body\r\n );\r\n var nodeRect = node.getBoundingClientRect();\r\n\r\n // The user can ask for an offsetRect: a rect relative to the offsetParent,\r\n // or a clientRect: a rect relative to the page\r\n var offsetRect = isOffsetRect\r\n ? offsetParent.getBoundingClientRect()\r\n : { left: 0, top: 0, width: 0, height: 0 };\r\n return {\r\n left: nodeRect.left - offsetRect.left,\r\n top: nodeRect.top - offsetRect.top,\r\n width: nodeRect.width,\r\n height: nodeRect.height\r\n };\r\n },\r\n offsetRect: function(element, offsetParent) {\r\n return $mdUtil.clientRect(element, offsetParent, true);\r\n },\r\n\r\n // Annoying method to copy nodes to an array, thanks to IE\r\n nodesToArray: function(nodes) {\r\n nodes = nodes || [];\r\n\r\n var results = [];\r\n for (var i = 0; i < nodes.length; ++i) {\r\n results.push(nodes.item(i));\r\n }\r\n return results;\r\n },\r\n\r\n /**\r\n * Calculate the positive scroll offset\r\n * TODO: Check with pinch-zoom in IE/Chrome;\r\n * https://code.google.com/p/chromium/issues/detail?id=496285\r\n */\r\n scrollTop: function(element) {\r\n element = angular.element(element || $document[0].body);\r\n\r\n var body =\r\n element[0] == $document[0].body ? $document[0].body : undefined;\r\n var scrollTop = body\r\n ? body.scrollTop + body.parentElement.scrollTop\r\n : 0;\r\n\r\n // Calculate the positive scroll offset\r\n return scrollTop || Math.abs(element[0].getBoundingClientRect().top);\r\n },\r\n\r\n /**\r\n * Finds the proper focus target by searching the DOM.\r\n *\r\n * @param containerEl\r\n * @param attributeVal\r\n * @returns {*}\r\n */\r\n findFocusTarget: function(containerEl, attributeVal) {\r\n var AUTO_FOCUS = this.prefixer(\"md-autofocus\", true);\r\n var elToFocus;\r\n\r\n elToFocus = scanForFocusable(containerEl, attributeVal || AUTO_FOCUS);\r\n\r\n if (!elToFocus && attributeVal != AUTO_FOCUS) {\r\n // Scan for deprecated attribute\r\n elToFocus = scanForFocusable(\r\n containerEl,\r\n this.prefixer(\"md-auto-focus\", true)\r\n );\r\n\r\n if (!elToFocus) {\r\n // Scan for fallback to 'universal' API\r\n elToFocus = scanForFocusable(containerEl, AUTO_FOCUS);\r\n }\r\n }\r\n\r\n return elToFocus;\r\n\r\n /**\r\n * Can target and nested children for specified Selector (attribute)\r\n * whose value may be an expression that evaluates to True/False.\r\n */\r\n function scanForFocusable(target, selector) {\r\n var elFound,\r\n items = target[0].querySelectorAll(selector);\r\n\r\n // Find the last child element with the focus attribute\r\n if (items && items.length) {\r\n items.length &&\r\n angular.forEach(items, function(it) {\r\n it = angular.element(it);\r\n\r\n // Check the element for the md-autofocus class to ensure any associated expression\r\n // evaluated to true.\r\n var isFocusable = it.hasClass(\"md-autofocus\");\r\n if (isFocusable) elFound = it;\r\n });\r\n }\r\n return elFound;\r\n }\r\n },\r\n\r\n /**\r\n * Disables scroll around the passed parent element.\r\n * @param element Unused\r\n * @param {!Element|!angular.JQLite} parent Element to disable scrolling within.\r\n * Defaults to body if none supplied.\r\n * @param options Object of options to modify functionality\r\n * - disableScrollMask Boolean of whether or not to create a scroll mask element or\r\n * use the passed parent element.\r\n */\r\n disableScrollAround: function(element, parent, options) {\r\n $mdUtil.disableScrollAround._count =\r\n $mdUtil.disableScrollAround._count || 0;\r\n ++$mdUtil.disableScrollAround._count;\r\n if ($mdUtil.disableScrollAround._enableScrolling)\r\n return $mdUtil.disableScrollAround._enableScrolling;\r\n var body = $document[0].body,\r\n restoreBody = disableBodyScroll(),\r\n restoreElement = disableElementScroll(parent);\r\n\r\n return ($mdUtil.disableScrollAround._enableScrolling = function() {\r\n if (!--$mdUtil.disableScrollAround._count) {\r\n restoreBody();\r\n restoreElement();\r\n delete $mdUtil.disableScrollAround._enableScrolling;\r\n }\r\n });\r\n\r\n // Creates a virtual scrolling mask to absorb touchmove, keyboard, scrollbar clicking, and wheel events\r\n function disableElementScroll(element) {\r\n element = angular.element(element || body);\r\n var scrollMask;\r\n if (options && options.disableScrollMask) {\r\n scrollMask = element;\r\n } else {\r\n element = element[0];\r\n scrollMask = angular.element(\r\n '
' +\r\n ' ' +\r\n \"
\"\r\n );\r\n element.appendChild(scrollMask[0]);\r\n }\r\n\r\n scrollMask.on(\"wheel\", preventDefault);\r\n scrollMask.on(\"touchmove\", preventDefault);\r\n\r\n return function restoreScroll() {\r\n scrollMask.off(\"wheel\");\r\n scrollMask.off(\"touchmove\");\r\n scrollMask[0].parentNode.removeChild(scrollMask[0]);\r\n delete $mdUtil.disableScrollAround._enableScrolling;\r\n };\r\n\r\n function preventDefault(e) {\r\n e.preventDefault();\r\n }\r\n }\r\n\r\n // Converts the body to a position fixed block and translate it to the proper scroll position\r\n function disableBodyScroll() {\r\n var htmlNode = body.parentNode;\r\n var restoreHtmlStyle = htmlNode.style.cssText || \"\";\r\n var restoreBodyStyle = body.style.cssText || \"\";\r\n var scrollOffset = $mdUtil.scrollTop(body);\r\n var clientWidth = body.clientWidth;\r\n\r\n if (body.scrollHeight > body.clientHeight + 1) {\r\n applyStyles(body, {\r\n position: \"fixed\",\r\n width: \"100%\",\r\n top: -scrollOffset + \"px\"\r\n });\r\n\r\n htmlNode.style.overflowY = \"scroll\";\r\n }\r\n\r\n if (body.clientWidth < clientWidth)\r\n applyStyles(body, { overflow: \"hidden\" });\r\n\r\n return function restoreScroll() {\r\n body.style.cssText = restoreBodyStyle;\r\n htmlNode.style.cssText = restoreHtmlStyle;\r\n body.scrollTop = scrollOffset;\r\n htmlNode.scrollTop = scrollOffset;\r\n };\r\n }\r\n\r\n function applyStyles(el, styles) {\r\n for (var key in styles) {\r\n el.style[key] = styles[key];\r\n }\r\n }\r\n },\r\n enableScrolling: function() {\r\n var method = this.disableScrollAround._enableScrolling;\r\n method && method();\r\n },\r\n floatingScrollbars: function() {\r\n if (this.floatingScrollbars.cached === undefined) {\r\n var tempNode = angular.element(\"
\").css({\r\n width: \"100%\",\r\n \"z-index\": -1,\r\n position: \"absolute\",\r\n height: \"35px\",\r\n \"overflow-y\": \"scroll\"\r\n });\r\n tempNode.children().css(\"height\", \"60px\");\r\n\r\n $document[0].body.appendChild(tempNode[0]);\r\n this.floatingScrollbars.cached =\r\n tempNode[0].offsetWidth == tempNode[0].childNodes[0].offsetWidth;\r\n tempNode.remove();\r\n }\r\n return this.floatingScrollbars.cached;\r\n },\r\n\r\n // Mobile safari only allows you to set focus in click event listeners...\r\n forceFocus: function(element) {\r\n var node = element[0] || element;\r\n\r\n document.addEventListener(\r\n \"click\",\r\n function focusOnClick(ev) {\r\n if (ev.target === node && ev.$focus) {\r\n node.focus();\r\n ev.stopImmediatePropagation();\r\n ev.preventDefault();\r\n node.removeEventListener(\"click\", focusOnClick);\r\n }\r\n },\r\n true\r\n );\r\n\r\n var newEvent = document.createEvent(\"MouseEvents\");\r\n newEvent.initMouseEvent(\r\n \"click\",\r\n false,\r\n true,\r\n window,\r\n {},\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n false,\r\n false,\r\n false,\r\n false,\r\n 0,\r\n null\r\n );\r\n newEvent.$material = true;\r\n newEvent.$focus = true;\r\n node.dispatchEvent(newEvent);\r\n },\r\n\r\n /**\r\n * facade to build md-backdrop element with desired styles\r\n * NOTE: Use $compile to trigger backdrop postLink function\r\n */\r\n createBackdrop: function(scope, addClass) {\r\n return $compile(\r\n $mdUtil.supplant('', [addClass])\r\n )(scope);\r\n },\r\n\r\n /**\r\n * supplant() method from Crockford's `Remedial Javascript`\r\n * Equivalent to use of $interpolate; without dependency on\r\n * interpolation symbols and scope. Note: the '{}' can\r\n * be property names, property chains, or array indices.\r\n */\r\n supplant: function(template, values, pattern) {\r\n pattern = pattern || /\\{([^\\{\\}]*)\\}/g;\r\n return template.replace(pattern, function(a, b) {\r\n var p = b.split(\".\"),\r\n r = values;\r\n try {\r\n for (var s in p) {\r\n if (p.hasOwnProperty(s)) {\r\n r = r[p[s]];\r\n }\r\n }\r\n } catch (e) {\r\n r = a;\r\n }\r\n return typeof r === \"string\" || typeof r === \"number\" ? r : a;\r\n });\r\n },\r\n\r\n fakeNgModel: function() {\r\n return {\r\n $fake: true,\r\n $setTouched: angular.noop,\r\n $setViewValue: function(value) {\r\n this.$viewValue = value;\r\n this.$render(value);\r\n this.$viewChangeListeners.forEach(function(cb) {\r\n cb();\r\n });\r\n },\r\n $isEmpty: function(value) {\r\n return (\"\" + value).length === 0;\r\n },\r\n $parsers: [],\r\n $formatters: [],\r\n $viewChangeListeners: [],\r\n $render: angular.noop\r\n };\r\n },\r\n\r\n // Returns a function, that, as long as it continues to be invoked, will not\r\n // be triggered. The function will be called after it stops being called for\r\n // N milliseconds.\r\n // @param wait Integer value of msecs to delay (since last debounce reset); default value 10 msecs\r\n // @param invokeApply should the $timeout trigger $digest() dirty checking\r\n debounce: function(func, wait, scope, invokeApply) {\r\n var timer;\r\n\r\n return function debounced() {\r\n var context = scope,\r\n args = Array.prototype.slice.call(arguments);\r\n\r\n $timeout.cancel(timer);\r\n timer = $timeout(\r\n function() {\r\n timer = undefined;\r\n func.apply(context, args);\r\n },\r\n wait || 10,\r\n invokeApply\r\n );\r\n };\r\n },\r\n\r\n // Returns a function that can only be triggered every `delay` milliseconds.\r\n // In other words, the function will not be called unless it has been more\r\n // than `delay` milliseconds since the last call.\r\n throttle: function throttle(func, delay) {\r\n var recent;\r\n return function throttled() {\r\n var context = this;\r\n var args = arguments;\r\n var now = $mdUtil.now();\r\n\r\n if (!recent || now - recent > delay) {\r\n func.apply(context, args);\r\n recent = now;\r\n }\r\n };\r\n },\r\n\r\n /**\r\n * Measures the number of milliseconds taken to run the provided callback\r\n * function. Uses a high-precision timer if available.\r\n */\r\n time: function time(cb) {\r\n var start = $mdUtil.now();\r\n cb();\r\n return $mdUtil.now() - start;\r\n },\r\n\r\n /**\r\n * Create an implicit getter that caches its `getter()`\r\n * lookup value\r\n */\r\n valueOnUse: function(scope, key, getter) {\r\n var value = null,\r\n args = Array.prototype.slice.call(arguments);\r\n var params = args.length > 3 ? args.slice(3) : [];\r\n\r\n Object.defineProperty(scope, key, {\r\n get: function() {\r\n if (value === null) value = getter.apply(scope, params);\r\n return value;\r\n }\r\n });\r\n },\r\n\r\n /**\r\n * Get a unique ID.\r\n *\r\n * @returns {string} an unique numeric string\r\n */\r\n nextUid: function() {\r\n return \"\" + nextUniqueId++;\r\n },\r\n\r\n // Stop watchers and events from firing on a scope without destroying it,\r\n // by disconnecting it from its parent and its siblings' linked lists.\r\n disconnectScope: function disconnectScope(scope) {\r\n if (!scope) return;\r\n\r\n // we can't destroy the root scope or a scope that has been already destroyed\r\n if (scope.$root === scope) return;\r\n if (scope.$$destroyed) return;\r\n\r\n var parent = scope.$parent;\r\n scope.$$disconnected = true;\r\n\r\n // See Scope.$destroy\r\n if (parent.$$childHead === scope)\r\n parent.$$childHead = scope.$$nextSibling;\r\n if (parent.$$childTail === scope)\r\n parent.$$childTail = scope.$$prevSibling;\r\n if (scope.$$prevSibling)\r\n scope.$$prevSibling.$$nextSibling = scope.$$nextSibling;\r\n if (scope.$$nextSibling)\r\n scope.$$nextSibling.$$prevSibling = scope.$$prevSibling;\r\n\r\n scope.$$nextSibling = scope.$$prevSibling = null;\r\n },\r\n\r\n // Undo the effects of disconnectScope above.\r\n reconnectScope: function reconnectScope(scope) {\r\n if (!scope) return;\r\n\r\n // we can't disconnect the root node or scope already disconnected\r\n if (scope.$root === scope) return;\r\n if (!scope.$$disconnected) return;\r\n\r\n var child = scope;\r\n\r\n var parent = child.$parent;\r\n child.$$disconnected = false;\r\n // See Scope.$new for this logic...\r\n child.$$prevSibling = parent.$$childTail;\r\n if (parent.$$childHead) {\r\n parent.$$childTail.$$nextSibling = child;\r\n parent.$$childTail = child;\r\n } else {\r\n parent.$$childHead = parent.$$childTail = child;\r\n }\r\n },\r\n\r\n /*\r\n * getClosest replicates jQuery.closest() to walk up the DOM tree until it finds a matching nodeName\r\n *\r\n * @param el Element to start walking the DOM from\r\n * @param check Either a string or a function. If a string is passed, it will be evaluated against\r\n * each of the parent nodes' tag name. If a function is passed, the loop will call it with each of\r\n * the parents and will use the return value to determine whether the node is a match.\r\n * @param onlyParent Only start checking from the parent element, not `el`.\r\n */\r\n getClosest: function getClosest(el, validateWith, onlyParent) {\r\n if (angular.isString(validateWith)) {\r\n var tagName = validateWith.toUpperCase();\r\n validateWith = function(el) {\r\n return el.nodeName === tagName;\r\n };\r\n }\r\n\r\n if (el instanceof angular.element) el = el[0];\r\n if (onlyParent) el = el.parentNode;\r\n if (!el) return null;\r\n\r\n do {\r\n if (validateWith(el)) {\r\n return el;\r\n }\r\n } while ((el = el.parentNode));\r\n\r\n return null;\r\n },\r\n\r\n /**\r\n * Build polyfill for the Node.contains feature (if needed)\r\n */\r\n elementContains: function(node, child) {\r\n var hasContains =\r\n window.Node && window.Node.prototype && Node.prototype.contains;\r\n var findFn = hasContains\r\n ? angular.bind(node, node.contains)\r\n : angular.bind(node, function(arg) {\r\n // compares the positions of two nodes and returns a bitmask\r\n return (\r\n node === child || !!(this.compareDocumentPosition(arg) & 16)\r\n );\r\n });\r\n\r\n return findFn(child);\r\n },\r\n\r\n /**\r\n * Functional equivalent for $element.filter(‘md-bottom-sheet’)\r\n * useful with interimElements where the element and its container are important...\r\n *\r\n * @param {[]} elements to scan\r\n * @param {string} name of node to find (e.g. 'md-dialog')\r\n * @param {boolean=} optional flag to allow deep scans; defaults to 'false'.\r\n * @param {boolean=} optional flag to enable log warnings; defaults to false\r\n */\r\n extractElementByName: function(\r\n element,\r\n nodeName,\r\n scanDeep,\r\n warnNotFound\r\n ) {\r\n var found = scanTree(element);\r\n if (!found && !!warnNotFound) {\r\n $log.warn(\r\n $mdUtil.supplant(\"Unable to find node '{0}' in element '{1}'.\", [\r\n nodeName,\r\n element[0].outerHTML\r\n ])\r\n );\r\n }\r\n\r\n return angular.element(found || element);\r\n\r\n /**\r\n * Breadth-First tree scan for element with matching `nodeName`\r\n */\r\n function scanTree(element) {\r\n return (\r\n scanLevel(element) || (!!scanDeep ? scanChildren(element) : null)\r\n );\r\n }\r\n\r\n /**\r\n * Case-insensitive scan of current elements only (do not descend).\r\n */\r\n function scanLevel(element) {\r\n if (element) {\r\n for (var i = 0, len = element.length; i < len; i++) {\r\n if (element[i].nodeName.toLowerCase() === nodeName) {\r\n return element[i];\r\n }\r\n }\r\n }\r\n return null;\r\n }\r\n\r\n /**\r\n * Scan children of specified node\r\n */\r\n function scanChildren(element) {\r\n var found;\r\n if (element) {\r\n for (var i = 0, len = element.length; i < len; i++) {\r\n var target = element[i];\r\n if (!found) {\r\n for (\r\n var j = 0, numChild = target.childNodes.length;\r\n j < numChild;\r\n j++\r\n ) {\r\n found = found || scanTree([target.childNodes[j]]);\r\n }\r\n }\r\n }\r\n }\r\n return found;\r\n }\r\n },\r\n\r\n /**\r\n * Give optional properties with no value a boolean true if attr provided or false otherwise\r\n */\r\n initOptionalProperties: function(scope, attr, defaults) {\r\n defaults = defaults || {};\r\n angular.forEach(scope.$$isolateBindings, function(binding, key) {\r\n if (binding.optional && angular.isUndefined(scope[key])) {\r\n var attrIsDefined = angular.isDefined(attr[binding.attrName]);\r\n scope[key] = angular.isDefined(defaults[key])\r\n ? defaults[key]\r\n : attrIsDefined;\r\n }\r\n });\r\n },\r\n\r\n /**\r\n * Alternative to $timeout calls with 0 delay.\r\n * nextTick() coalesces all calls within a single frame\r\n * to minimize $digest thrashing\r\n *\r\n * @param callback\r\n * @param digest\r\n * @returns {*}\r\n */\r\n nextTick: function(callback, digest, scope) {\r\n //-- grab function reference for storing state details\r\n var nextTick = $mdUtil.nextTick;\r\n var timeout = nextTick.timeout;\r\n var queue = nextTick.queue || [];\r\n\r\n //-- add callback to the queue\r\n queue.push({ scope: scope, callback: callback });\r\n\r\n //-- set default value for digest\r\n if (digest == null) digest = true;\r\n\r\n //-- store updated digest/queue values\r\n nextTick.digest = nextTick.digest || digest;\r\n nextTick.queue = queue;\r\n\r\n //-- either return existing timeout or create a new one\r\n return (\r\n timeout || (nextTick.timeout = $timeout(processQueue, 0, false))\r\n );\r\n\r\n /**\r\n * Grab a copy of the current queue\r\n * Clear the queue for future use\r\n * Process the existing queue\r\n * Trigger digest if necessary\r\n */\r\n function processQueue() {\r\n var queue = nextTick.queue;\r\n var digest = nextTick.digest;\r\n\r\n nextTick.queue = [];\r\n nextTick.timeout = null;\r\n nextTick.digest = false;\r\n\r\n queue.forEach(function(queueItem) {\r\n var skip = queueItem.scope && queueItem.scope.$$destroyed;\r\n if (!skip) {\r\n queueItem.callback();\r\n }\r\n });\r\n\r\n if (digest) $rootScope.$digest();\r\n }\r\n },\r\n\r\n /**\r\n * Processes a template and replaces the start/end symbols if the application has\r\n * overriden them.\r\n *\r\n * @param template The template to process whose start/end tags may be replaced.\r\n * @returns {*}\r\n */\r\n processTemplate: function(template) {\r\n if (usesStandardSymbols) {\r\n return template;\r\n } else {\r\n if (!template || !angular.isString(template)) return template;\r\n return template\r\n .replace(/\\{\\{/g, startSymbol)\r\n .replace(/}}/g, endSymbol);\r\n }\r\n },\r\n\r\n /**\r\n * Scan up dom hierarchy for enabled parent;\r\n */\r\n getParentWithPointerEvents: function(element) {\r\n var parent = element.parent();\r\n\r\n // jqLite might return a non-null, but still empty, parent; so check for parent and length\r\n while (hasComputedStyle(parent, \"pointer-events\", \"none\")) {\r\n parent = parent.parent();\r\n }\r\n\r\n return parent;\r\n },\r\n\r\n getNearestContentElement: function(element) {\r\n var current = element.parent()[0];\r\n // Look for the nearest parent md-content, stopping at the rootElement.\r\n while (\r\n current &&\r\n current !== $rootElement[0] &&\r\n current !== document.body &&\r\n current.nodeName.toUpperCase() !== \"MD-CONTENT\"\r\n ) {\r\n current = current.parentNode;\r\n }\r\n return current;\r\n },\r\n\r\n /**\r\n * Checks if the current browser is natively supporting the `sticky` position.\r\n * @returns {string} supported sticky property name\r\n */\r\n checkStickySupport: function() {\r\n var stickyProp;\r\n var testEl = angular.element(\"
\");\r\n $document[0].body.appendChild(testEl[0]);\r\n\r\n var stickyProps = [\"sticky\", \"-webkit-sticky\"];\r\n for (var i = 0; i < stickyProps.length; ++i) {\r\n testEl.css({\r\n position: stickyProps[i],\r\n top: 0,\r\n \"z-index\": 2\r\n });\r\n\r\n if (testEl.css(\"position\") == stickyProps[i]) {\r\n stickyProp = stickyProps[i];\r\n break;\r\n }\r\n }\r\n\r\n testEl.remove();\r\n\r\n return stickyProp;\r\n },\r\n\r\n /**\r\n * Parses an attribute value, mostly a string.\r\n * By default checks for negated values and returns `false´ if present.\r\n * Negated values are: (native falsy) and negative strings like:\r\n * `false` or `0`.\r\n * @param value Attribute value which should be parsed.\r\n * @param negatedCheck When set to false, won't check for negated values.\r\n * @returns {boolean}\r\n */\r\n parseAttributeBoolean: function(value, negatedCheck) {\r\n return (\r\n value === \"\" ||\r\n (!!value &&\r\n (negatedCheck === false || (value !== \"false\" && value !== \"0\")))\r\n );\r\n },\r\n\r\n hasComputedStyle: hasComputedStyle,\r\n\r\n /**\r\n * Returns true if the parent form of the element has been submitted.\r\n *\r\n * @param element An Angular or HTML5 element.\r\n *\r\n * @returns {boolean}\r\n */\r\n isParentFormSubmitted: function(element) {\r\n var parent = $mdUtil.getClosest(element, \"form\");\r\n var form = parent ? angular.element(parent).controller(\"form\") : null;\r\n\r\n return form ? form.$submitted : false;\r\n },\r\n\r\n /**\r\n * Animate the requested element's scrollTop to the requested scrollPosition with basic easing.\r\n *\r\n * @param element The element to scroll.\r\n * @param scrollEnd The new/final scroll position.\r\n */\r\n animateScrollTo: function(element, scrollEnd) {\r\n var scrollStart = element.scrollTop;\r\n var scrollChange = scrollEnd - scrollStart;\r\n var scrollingDown = scrollStart < scrollEnd;\r\n var startTime = $mdUtil.now();\r\n\r\n $$rAF(scrollChunk);\r\n\r\n function scrollChunk() {\r\n var newPosition = calculateNewPosition();\r\n\r\n element.scrollTop = newPosition;\r\n\r\n if (\r\n scrollingDown ? newPosition < scrollEnd : newPosition > scrollEnd\r\n ) {\r\n $$rAF(scrollChunk);\r\n }\r\n }\r\n\r\n function calculateNewPosition() {\r\n var duration = 1000;\r\n var currentTime = $mdUtil.now() - startTime;\r\n\r\n return ease(currentTime, scrollStart, scrollChange, duration);\r\n }\r\n\r\n function ease(currentTime, start, change, duration) {\r\n // If the duration has passed (which can occur if our app loses focus due to $$rAF), jump\r\n // straight to the proper position\r\n if (currentTime > duration) {\r\n return start + change;\r\n }\r\n\r\n var ts = (currentTime /= duration) * currentTime;\r\n var tc = ts * currentTime;\r\n\r\n return start + change * (-2 * tc + 3 * ts);\r\n }\r\n }\r\n };\r\n\r\n // Instantiate other namespace utility methods\r\n\r\n $mdUtil.dom.animator = $$mdAnimate($mdUtil);\r\n\r\n return $mdUtil;\r\n\r\n function getNode(el) {\r\n return el[0] || el;\r\n }\r\n }\r\n\r\n /*\r\n * Since removing jQuery from the demos, some code that uses `element.focus()` is broken.\r\n * We need to add `element.focus()`, because it's testable unlike `element[0].focus`.\r\n */\r\n\r\n angular.element.prototype.focus =\r\n angular.element.prototype.focus ||\r\n function() {\r\n if (this.length) {\r\n this[0].focus();\r\n }\r\n return this;\r\n };\r\n angular.element.prototype.blur =\r\n angular.element.prototype.blur ||\r\n function() {\r\n if (this.length) {\r\n this[0].blur();\r\n }\r\n return this;\r\n };\r\n })();\r\n (function() {\r\n \"use strict\";\r\n\r\n /**\r\n * @ngdoc module\r\n * @name material.core.aria\r\n * @description\r\n * Aria Expectations for ngMaterial components.\r\n */\r\n MdAriaService.$inject = [\"$$rAF\", \"$log\", \"$window\", \"$interpolate\"];\r\n angular.module(\"material.core\").provider(\"$mdAria\", MdAriaProvider);\r\n\r\n /**\r\n * @ngdoc service\r\n * @name $mdAriaProvider\r\n * @module material.core.aria\r\n *\r\n * @description\r\n *\r\n * Modify options of the `$mdAria` service, which will be used by most of the Angular Material\r\n * components.\r\n *\r\n * You are able to disable `$mdAria` warnings, by using the following markup.\r\n *\r\n * \r\n * app.config(function($mdAriaProvider) {\r\n * // Globally disables all ARIA warnings.\r\n * $mdAriaProvider.disableWarnings();\r\n * });\r\n * \r\n *\r\n */\r\n function MdAriaProvider() {\r\n var self = this;\r\n\r\n /**\r\n * Whether we should show ARIA warnings in the console, if labels are missing on the element\r\n * By default the warnings are enabled\r\n */\r\n self.showWarnings = true;\r\n\r\n return {\r\n disableWarnings: disableWarnings,\r\n $get: [\r\n \"$$rAF\",\r\n \"$log\",\r\n \"$window\",\r\n \"$interpolate\",\r\n function($$rAF, $log, $window, $interpolate) {\r\n return MdAriaService.apply(self, arguments);\r\n }\r\n ]\r\n };\r\n\r\n /**\r\n * @ngdoc method\r\n * @name $mdAriaProvider#disableWarnings\r\n * @description Disables all ARIA warnings generated by Angular Material.\r\n */\r\n function disableWarnings() {\r\n self.showWarnings = false;\r\n }\r\n }\r\n\r\n /*\r\n * @ngInject\r\n */\r\n function MdAriaService($$rAF, $log, $window, $interpolate) {\r\n // Load the showWarnings option from the current context and store it inside of a scope variable,\r\n // because the context will be probably lost in some function calls.\r\n var showWarnings = this.showWarnings;\r\n\r\n return {\r\n expect: expect,\r\n expectAsync: expectAsync,\r\n expectWithText: expectWithText,\r\n expectWithoutText: expectWithoutText\r\n };\r\n\r\n /**\r\n * Check if expected attribute has been specified on the target element or child\r\n * @param element\r\n * @param attrName\r\n * @param {optional} defaultValue What to set the attr to if no value is found\r\n */\r\n function expect(element, attrName, defaultValue) {\r\n var node = angular.element(element)[0] || element;\r\n\r\n // if node exists and neither it nor its children have the attribute\r\n if (\r\n node &&\r\n ((!node.hasAttribute(attrName) ||\r\n node.getAttribute(attrName).length === 0) &&\r\n !childHasAttribute(node, attrName))\r\n ) {\r\n defaultValue = angular.isString(defaultValue)\r\n ? defaultValue.trim()\r\n : \"\";\r\n if (defaultValue.length) {\r\n element.attr(attrName, defaultValue);\r\n } else if (showWarnings) {\r\n $log.warn(\r\n 'ARIA: Attribute \"',\r\n attrName,\r\n '\", required for accessibility, is missing on node:',\r\n node\r\n );\r\n }\r\n }\r\n }\r\n\r\n function expectAsync(element, attrName, defaultValueGetter) {\r\n // Problem: when retrieving the element's contents synchronously to find the label,\r\n // the text may not be defined yet in the case of a binding.\r\n // There is a higher chance that a binding will be defined if we wait one frame.\r\n $$rAF(function() {\r\n expect(element, attrName, defaultValueGetter());\r\n });\r\n }\r\n\r\n function expectWithText(element, attrName) {\r\n var content = getText(element) || \"\";\r\n var hasBinding = content.indexOf($interpolate.startSymbol()) > -1;\r\n\r\n if (hasBinding) {\r\n expectAsync(element, attrName, function() {\r\n return getText(element);\r\n });\r\n } else {\r\n expect(element, attrName, content);\r\n }\r\n }\r\n\r\n function expectWithoutText(element, attrName) {\r\n var content = getText(element);\r\n var hasBinding = content.indexOf($interpolate.startSymbol()) > -1;\r\n\r\n if (!hasBinding && !content) {\r\n expect(element, attrName, content);\r\n }\r\n }\r\n\r\n function getText(element) {\r\n element = element[0] || element;\r\n var walker = document.createTreeWalker(\r\n element,\r\n NodeFilter.SHOW_TEXT,\r\n null,\r\n false\r\n );\r\n var text = \"\";\r\n\r\n var node;\r\n while ((node = walker.nextNode())) {\r\n if (!isAriaHiddenNode(node)) {\r\n text += node.textContent;\r\n }\r\n }\r\n\r\n return text.trim() || \"\";\r\n\r\n function isAriaHiddenNode(node) {\r\n while (node.parentNode && (node = node.parentNode) !== element) {\r\n if (\r\n node.getAttribute &&\r\n node.getAttribute(\"aria-hidden\") === \"true\"\r\n ) {\r\n return true;\r\n }\r\n }\r\n }\r\n }\r\n\r\n function childHasAttribute(node, attrName) {\r\n var hasChildren = node.hasChildNodes(),\r\n hasAttr = false;\r\n\r\n function isHidden(el) {\r\n var style = el.currentStyle\r\n ? el.currentStyle\r\n : $window.getComputedStyle(el);\r\n return style.display === \"none\";\r\n }\r\n\r\n if (hasChildren) {\r\n var children = node.childNodes;\r\n for (var i = 0; i < children.length; i++) {\r\n var child = children[i];\r\n if (child.nodeType === 1 && child.hasAttribute(attrName)) {\r\n if (!isHidden(child)) {\r\n hasAttr = true;\r\n }\r\n }\r\n }\r\n }\r\n\r\n return hasAttr;\r\n }\r\n }\r\n })();\r\n (function() {\r\n \"use strict\";\r\n\r\n mdCompilerService.$inject = [\r\n \"$q\",\r\n \"$templateRequest\",\r\n \"$injector\",\r\n \"$compile\",\r\n \"$controller\"\r\n ];\r\n angular.module(\"material.core\").service(\"$mdCompiler\", mdCompilerService);\r\n\r\n function mdCompilerService(\r\n $q,\r\n $templateRequest,\r\n $injector,\r\n $compile,\r\n $controller\r\n ) {\r\n /* jshint validthis: true */\r\n\r\n /*\r\n * @ngdoc service\r\n * @name $mdCompiler\r\n * @module material.core\r\n * @description\r\n * The $mdCompiler service is an abstraction of angular's compiler, that allows the developer\r\n * to easily compile an element with a templateUrl, controller, and locals.\r\n *\r\n * @usage\r\n * \r\n * $mdCompiler.compile({\r\n * templateUrl: 'modal.html',\r\n * controller: 'ModalCtrl',\r\n * locals: {\r\n * modal: myModalInstance;\r\n * }\r\n * }).then(function(compileData) {\r\n * compileData.element; // modal.html's template in an element\r\n * compileData.link(myScope); //attach controller & scope to element\r\n * });\r\n * \r\n */\r\n\r\n /*\r\n * @ngdoc method\r\n * @name $mdCompiler#compile\r\n * @description A helper to compile an HTML template/templateUrl with a given controller,\r\n * locals, and scope.\r\n * @param {object} options An options object, with the following properties:\r\n *\r\n * - `controller` - `{(string=|function()=}` Controller fn that should be associated with\r\n * newly created scope or the name of a registered controller if passed as a string.\r\n * - `controllerAs` - `{string=}` A controller alias name. If present the controller will be\r\n * published to scope under the `controllerAs` name.\r\n * - `template` - `{string=}` An html template as a string.\r\n * - `templateUrl` - `{string=}` A path to an html template.\r\n * - `transformTemplate` - `{function(template)=}` A function which transforms the template after\r\n * it is loaded. It will be given the template string as a parameter, and should\r\n * return a a new string representing the transformed template.\r\n * - `resolve` - `{Object.=}` - An optional map of dependencies which should\r\n * be injected into the controller. If any of these dependencies are promises, the compiler\r\n * will wait for them all to be resolved, or if one is rejected before the controller is\r\n * instantiated `compile()` will fail..\r\n * * `key` - `{string}`: a name of a dependency to be injected into the controller.\r\n * * `factory` - `{string|function}`: If `string` then it is an alias for a service.\r\n * Otherwise if function, then it is injected and the return value is treated as the\r\n * dependency. If the result is a promise, it is resolved before its value is\r\n * injected into the controller.\r\n *\r\n * @returns {object=} promise A promise, which will be resolved with a `compileData` object.\r\n * `compileData` has the following properties:\r\n *\r\n * - `element` - `{element}`: an uncompiled element matching the provided template.\r\n * - `link` - `{function(scope)}`: A link function, which, when called, will compile\r\n * the element and instantiate the provided controller (if given).\r\n * - `locals` - `{object}`: The locals which will be passed into the controller once `link` is\r\n * called. If `bindToController` is true, they will be coppied to the ctrl instead\r\n * - `bindToController` - `bool`: bind the locals to the controller, instead of passing them in.\r\n */\r\n this.compile = function(options) {\r\n var templateUrl = options.templateUrl;\r\n var template = options.template || \"\";\r\n var controller = options.controller;\r\n var controllerAs = options.controllerAs;\r\n var resolve = angular.extend({}, options.resolve || {});\r\n var locals = angular.extend({}, options.locals || {});\r\n var transformTemplate = options.transformTemplate || angular.identity;\r\n var bindToController = options.bindToController;\r\n\r\n // Take resolve values and invoke them.\r\n // Resolves can either be a string (value: 'MyRegisteredAngularConst'),\r\n // or an invokable 'factory' of sorts: (value: function ValueGetter($dependency) {})\r\n angular.forEach(resolve, function(value, key) {\r\n if (angular.isString(value)) {\r\n resolve[key] = $injector.get(value);\r\n } else {\r\n resolve[key] = $injector.invoke(value);\r\n }\r\n });\r\n //Add the locals, which are just straight values to inject\r\n //eg locals: { three: 3 }, will inject three into the controller\r\n angular.extend(resolve, locals);\r\n\r\n if (templateUrl) {\r\n resolve.$template = $templateRequest(templateUrl).then(function(\r\n response\r\n ) {\r\n return response;\r\n });\r\n } else {\r\n resolve.$template = $q.when(template);\r\n }\r\n\r\n // Wait for all the resolves to finish if they are promises\r\n return $q.all(resolve).then(function(locals) {\r\n var compiledData;\r\n var template = transformTemplate(locals.$template, options);\r\n var element =\r\n options.element ||\r\n angular\r\n .element(\"
\")\r\n .html(template.trim())\r\n .contents();\r\n var linkFn = $compile(element);\r\n\r\n // Return a linking function that can be used later when the element is ready\r\n return (compiledData = {\r\n locals: locals,\r\n element: element,\r\n link: function link(scope) {\r\n locals.$scope = scope;\r\n\r\n //Instantiate controller if it exists, because we have scope\r\n if (controller) {\r\n var invokeCtrl = $controller(\r\n controller,\r\n locals,\r\n true,\r\n controllerAs\r\n );\r\n if (bindToController) {\r\n angular.extend(invokeCtrl.instance, locals);\r\n }\r\n var ctrl = invokeCtrl();\r\n //See angular-route source for this logic\r\n element.data(\"$ngControllerController\", ctrl);\r\n element.children().data(\"$ngControllerController\", ctrl);\r\n\r\n // Publish reference to this controller\r\n compiledData.controller = ctrl;\r\n }\r\n return linkFn(scope);\r\n }\r\n });\r\n });\r\n };\r\n }\r\n })();\r\n (function() {\r\n \"use strict\";\r\n\r\n MdGesture.$inject = [\"$$MdGestureHandler\", \"$$rAF\", \"$timeout\"];\r\n attachToDocument.$inject = [\"$mdGesture\", \"$$MdGestureHandler\"];\r\n var HANDLERS = {};\r\n\r\n /* The state of the current 'pointer'\r\n * The pointer represents the state of the current touch.\r\n * It contains normalized x and y coordinates from DOM events,\r\n * as well as other information abstracted from the DOM.\r\n */\r\n\r\n var pointer,\r\n lastPointer,\r\n forceSkipClickHijack = false;\r\n\r\n /**\r\n * The position of the most recent click if that click was on a label element.\r\n * @type {{x: number, y: number}?}\r\n */\r\n var lastLabelClickPos = null;\r\n\r\n // Used to attach event listeners once when multiple ng-apps are running.\r\n var isInitialized = false;\r\n\r\n angular\r\n .module(\"material.core.gestures\", [])\r\n .provider(\"$mdGesture\", MdGestureProvider)\r\n .factory(\"$$MdGestureHandler\", MdGestureHandler)\r\n .run(attachToDocument);\r\n\r\n /**\r\n * @ngdoc service\r\n * @name $mdGestureProvider\r\n * @module material.core.gestures\r\n *\r\n * @description\r\n * In some scenarios on Mobile devices (without jQuery), the click events should NOT be hijacked.\r\n * `$mdGestureProvider` is used to configure the Gesture module to ignore or skip click hijacking on mobile\r\n * devices.\r\n *\r\n * \r\n * app.config(function($mdGestureProvider) {\r\n *\r\n * // For mobile devices without jQuery loaded, do not\r\n * // intercept click events during the capture phase.\r\n * $mdGestureProvider.skipClickHijack();\r\n *\r\n * });\r\n * \r\n *\r\n */\r\n function MdGestureProvider() {}\r\n\r\n MdGestureProvider.prototype = {\r\n // Publish access to setter to configure a variable BEFORE the\r\n // $mdGesture service is instantiated...\r\n skipClickHijack: function() {\r\n return (forceSkipClickHijack = true);\r\n },\r\n\r\n /**\r\n * $get is used to build an instance of $mdGesture\r\n * @ngInject\r\n */\r\n $get: [\r\n \"$$MdGestureHandler\",\r\n \"$$rAF\",\r\n \"$timeout\",\r\n function($$MdGestureHandler, $$rAF, $timeout) {\r\n return new MdGesture($$MdGestureHandler, $$rAF, $timeout);\r\n }\r\n ]\r\n };\r\n\r\n /**\r\n * MdGesture factory construction function\r\n * @ngInject\r\n */\r\n function MdGesture($$MdGestureHandler, $$rAF, $timeout) {\r\n var userAgent = navigator.userAgent || navigator.vendor || window.opera;\r\n var isIos = userAgent.match(/ipad|iphone|ipod/i);\r\n var isAndroid = userAgent.match(/android/i);\r\n var touchActionProperty = getTouchAction();\r\n var hasJQuery =\r\n typeof window.jQuery !== \"undefined\" &&\r\n angular.element === window.jQuery;\r\n\r\n var self = {\r\n handler: addHandler,\r\n register: register,\r\n isIos: isIos,\r\n isAndroid: isAndroid,\r\n // On mobile w/out jQuery, we normally intercept clicks. Should we skip that?\r\n isHijackingClicks:\r\n (isIos || isAndroid) && !hasJQuery && !forceSkipClickHijack\r\n };\r\n\r\n if (self.isHijackingClicks) {\r\n var maxClickDistance = 6;\r\n self.handler(\"click\", {\r\n options: {\r\n maxDistance: maxClickDistance\r\n },\r\n onEnd: checkDistanceAndEmit(\"click\")\r\n });\r\n\r\n self.handler(\"focus\", {\r\n options: {\r\n maxDistance: maxClickDistance\r\n },\r\n onEnd: function(ev, pointer) {\r\n if (pointer.distance < this.state.options.maxDistance) {\r\n if (canFocus(ev.target)) {\r\n this.dispatchEvent(ev, \"focus\", pointer);\r\n ev.target.focus();\r\n }\r\n }\r\n\r\n function canFocus(element) {\r\n var focusableElements = [\r\n \"INPUT\",\r\n \"SELECT\",\r\n \"BUTTON\",\r\n \"TEXTAREA\",\r\n \"VIDEO\",\r\n \"AUDIO\"\r\n ];\r\n\r\n return (\r\n element.getAttribute(\"tabindex\") != \"-1\" &&\r\n !element.hasAttribute(\"DISABLED\") &&\r\n (element.hasAttribute(\"tabindex\") ||\r\n element.hasAttribute(\"href\") ||\r\n element.isContentEditable ||\r\n focusableElements.indexOf(element.nodeName) != -1)\r\n );\r\n }\r\n }\r\n });\r\n\r\n self.handler(\"mouseup\", {\r\n options: {\r\n maxDistance: maxClickDistance\r\n },\r\n onEnd: checkDistanceAndEmit(\"mouseup\")\r\n });\r\n\r\n self.handler(\"mousedown\", {\r\n onStart: function(ev) {\r\n this.dispatchEvent(ev, \"mousedown\");\r\n }\r\n });\r\n }\r\n\r\n function checkDistanceAndEmit(eventName) {\r\n return function(ev, pointer) {\r\n if (pointer.distance < this.state.options.maxDistance) {\r\n this.dispatchEvent(ev, eventName, pointer);\r\n }\r\n };\r\n }\r\n\r\n /*\r\n * Register an element to listen for a handler.\r\n * This allows an element to override the default options for a handler.\r\n * Additionally, some handlers like drag and hold only dispatch events if\r\n * the domEvent happens inside an element that's registered to listen for these events.\r\n *\r\n * @see GestureHandler for how overriding of default options works.\r\n * @example $mdGesture.register(myElement, 'drag', { minDistance: 20, horziontal: false })\r\n */\r\n function register(element, handlerName, options) {\r\n var handler = HANDLERS[handlerName.replace(/^\\$md./, \"\")];\r\n if (!handler) {\r\n throw new Error(\r\n \"Failed to register element with handler \" +\r\n handlerName +\r\n \". \" +\r\n \"Available handlers: \" +\r\n Object.keys(HANDLERS).join(\", \")\r\n );\r\n }\r\n return handler.registerElement(element, options);\r\n }\r\n\r\n /*\r\n * add a handler to $mdGesture. see below.\r\n */\r\n function addHandler(name, definition) {\r\n var handler = new $$MdGestureHandler(name);\r\n angular.extend(handler, definition);\r\n HANDLERS[name] = handler;\r\n\r\n return self;\r\n }\r\n\r\n /*\r\n * Register handlers. These listen to touch/start/move events, interpret them,\r\n * and dispatch gesture events depending on options & conditions. These are all\r\n * instances of GestureHandler.\r\n * @see GestureHandler\r\n */\r\n return (\r\n self\r\n /*\r\n * The press handler dispatches an event on touchdown/touchend.\r\n * It's a simple abstraction of touch/mouse/pointer start and end.\r\n */\r\n .handler(\"press\", {\r\n onStart: function(ev, pointer) {\r\n this.dispatchEvent(ev, \"$md.pressdown\");\r\n },\r\n onEnd: function(ev, pointer) {\r\n this.dispatchEvent(ev, \"$md.pressup\");\r\n }\r\n })\r\n\r\n /*\r\n * The hold handler dispatches an event if the user keeps their finger within\r\n * the same area for ms.\r\n * The hold handler will only run if a parent of the touch target is registered\r\n * to listen for hold events through $mdGesture.register()\r\n */\r\n .handler(\"hold\", {\r\n options: {\r\n maxDistance: 6,\r\n delay: 500\r\n },\r\n onCancel: function() {\r\n $timeout.cancel(this.state.timeout);\r\n },\r\n onStart: function(ev, pointer) {\r\n // For hold, require a parent to be registered with $mdGesture.register()\r\n // Because we prevent scroll events, this is necessary.\r\n if (!this.state.registeredParent) return this.cancel();\r\n\r\n this.state.pos = { x: pointer.x, y: pointer.y };\r\n this.state.timeout = $timeout(\r\n angular.bind(this, function holdDelayFn() {\r\n this.dispatchEvent(ev, \"$md.hold\");\r\n this.cancel(); //we're done!\r\n }),\r\n this.state.options.delay,\r\n false\r\n );\r\n },\r\n onMove: function(ev, pointer) {\r\n // Don't scroll while waiting for hold.\r\n // If we don't preventDefault touchmove events here, Android will assume we don't\r\n // want to listen to anymore touch events. It will start scrolling and stop sending\r\n // touchmove events.\r\n if (!touchActionProperty && ev.type === \"touchmove\")\r\n ev.preventDefault();\r\n\r\n // If the user moves greater than pixels, stop the hold timer\r\n // set in onStart\r\n var dx = this.state.pos.x - pointer.x;\r\n var dy = this.state.pos.y - pointer.y;\r\n if (Math.sqrt(dx * dx + dy * dy) > this.options.maxDistance) {\r\n this.cancel();\r\n }\r\n },\r\n onEnd: function() {\r\n this.onCancel();\r\n }\r\n })\r\n\r\n /*\r\n * The drag handler dispatches a drag event if the user holds and moves his finger greater than\r\n * px in the x or y direction, depending on options.horizontal.\r\n * The drag will be cancelled if the user moves his finger greater than * in\r\n * the perpendicular direction. Eg if the drag is horizontal and the user moves his finger *\r\n * pixels vertically, this handler won't consider the move part of a drag.\r\n */\r\n .handler(\"drag\", {\r\n options: {\r\n minDistance: 6,\r\n horizontal: true,\r\n cancelMultiplier: 1.5\r\n },\r\n onSetup: function(element, options) {\r\n if (touchActionProperty) {\r\n // We check for horizontal to be false, because otherwise we would overwrite the default opts.\r\n this.oldTouchAction = element[0].style[touchActionProperty];\r\n element[0].style[touchActionProperty] =\r\n options.horizontal === false ? \"pan-y\" : \"pan-x\";\r\n }\r\n },\r\n onCleanup: function(element) {\r\n if (this.oldTouchAction) {\r\n element[0].style[touchActionProperty] = this.oldTouchAction;\r\n }\r\n },\r\n onStart: function(ev) {\r\n // For drag, require a parent to be registered with $mdGesture.register()\r\n if (!this.state.registeredParent) this.cancel();\r\n },\r\n onMove: function(ev, pointer) {\r\n var shouldStartDrag, shouldCancel;\r\n // Don't scroll while deciding if this touchmove qualifies as a drag event.\r\n // If we don't preventDefault touchmove events here, Android will assume we don't\r\n // want to listen to anymore touch events. It will start scrolling and stop sending\r\n // touchmove events.\r\n if (!touchActionProperty && ev.type === \"touchmove\")\r\n ev.preventDefault();\r\n\r\n if (!this.state.dragPointer) {\r\n if (this.state.options.horizontal) {\r\n shouldStartDrag =\r\n Math.abs(pointer.distanceX) >\r\n this.state.options.minDistance;\r\n shouldCancel =\r\n Math.abs(pointer.distanceY) >\r\n this.state.options.minDistance *\r\n this.state.options.cancelMultiplier;\r\n } else {\r\n shouldStartDrag =\r\n Math.abs(pointer.distanceY) >\r\n this.state.options.minDistance;\r\n shouldCancel =\r\n Math.abs(pointer.distanceX) >\r\n this.state.options.minDistance *\r\n this.state.options.cancelMultiplier;\r\n }\r\n\r\n if (shouldStartDrag) {\r\n // Create a new pointer representing this drag, starting at this point where the drag started.\r\n this.state.dragPointer = makeStartPointer(ev);\r\n updatePointerState(ev, this.state.dragPointer);\r\n this.dispatchEvent(\r\n ev,\r\n \"$md.dragstart\",\r\n this.state.dragPointer\r\n );\r\n } else if (shouldCancel) {\r\n this.cancel();\r\n }\r\n } else {\r\n this.dispatchDragMove(ev);\r\n }\r\n },\r\n // Only dispatch dragmove events every frame; any more is unnecessary\r\n dispatchDragMove: $$rAF.throttle(function(ev) {\r\n // Make sure the drag didn't stop while waiting for the next frame\r\n if (this.state.isRunning) {\r\n updatePointerState(ev, this.state.dragPointer);\r\n this.dispatchEvent(ev, \"$md.drag\", this.state.dragPointer);\r\n }\r\n }),\r\n onEnd: function(ev, pointer) {\r\n if (this.state.dragPointer) {\r\n updatePointerState(ev, this.state.dragPointer);\r\n this.dispatchEvent(ev, \"$md.dragend\", this.state.dragPointer);\r\n }\r\n }\r\n })\r\n\r\n /*\r\n * The swipe handler will dispatch a swipe event if, on the end of a touch,\r\n * the velocity and distance were high enough.\r\n */\r\n .handler(\"swipe\", {\r\n options: {\r\n minVelocity: 0.65,\r\n minDistance: 10\r\n },\r\n onEnd: function(ev, pointer) {\r\n var eventType;\r\n\r\n if (\r\n Math.abs(pointer.velocityX) > this.state.options.minVelocity &&\r\n Math.abs(pointer.distanceX) > this.state.options.minDistance\r\n ) {\r\n eventType =\r\n pointer.directionX == \"left\"\r\n ? \"$md.swipeleft\"\r\n : \"$md.swiperight\";\r\n this.dispatchEvent(ev, eventType);\r\n } else if (\r\n Math.abs(pointer.velocityY) > this.state.options.minVelocity &&\r\n Math.abs(pointer.distanceY) > this.state.options.minDistance\r\n ) {\r\n eventType =\r\n pointer.directionY == \"up\" ? \"$md.swipeup\" : \"$md.swipedown\";\r\n this.dispatchEvent(ev, eventType);\r\n }\r\n }\r\n })\r\n );\r\n\r\n function getTouchAction() {\r\n var testEl = document.createElement(\"div\");\r\n var vendorPrefixes = [\"\", \"webkit\", \"Moz\", \"MS\", \"ms\", \"o\"];\r\n\r\n for (var i = 0; i < vendorPrefixes.length; i++) {\r\n var prefix = vendorPrefixes[i];\r\n var property = prefix ? prefix + \"TouchAction\" : \"touchAction\";\r\n if (angular.isDefined(testEl.style[property])) {\r\n return property;\r\n }\r\n }\r\n }\r\n }\r\n\r\n /**\r\n * MdGestureHandler\r\n * A GestureHandler is an object which is able to dispatch custom dom events\r\n * based on native dom {touch,pointer,mouse}{start,move,end} events.\r\n *\r\n * A gesture will manage its lifecycle through the start,move,end, and cancel\r\n * functions, which are called by native dom events.\r\n *\r\n * A gesture has the concept of 'options' (eg a swipe's required velocity), which can be\r\n * overridden by elements registering through $mdGesture.register()\r\n */\r\n function GestureHandler(name) {\r\n this.name = name;\r\n this.state = {};\r\n }\r\n\r\n function MdGestureHandler() {\r\n var hasJQuery =\r\n typeof window.jQuery !== \"undefined\" &&\r\n angular.element === window.jQuery;\r\n\r\n GestureHandler.prototype = {\r\n options: {},\r\n // jQuery listeners don't work with custom DOMEvents, so we have to dispatch events\r\n // differently when jQuery is loaded\r\n dispatchEvent: hasJQuery ? jQueryDispatchEvent : nativeDispatchEvent,\r\n\r\n // These are overridden by the registered handler\r\n onSetup: angular.noop,\r\n onCleanup: angular.noop,\r\n onStart: angular.noop,\r\n onMove: angular.noop,\r\n onEnd: angular.noop,\r\n onCancel: angular.noop,\r\n\r\n // onStart sets up a new state for the handler, which includes options from the\r\n // nearest registered parent element of ev.target.\r\n start: function(ev, pointer) {\r\n if (this.state.isRunning) return;\r\n var parentTarget = this.getNearestParent(ev.target);\r\n // Get the options from the nearest registered parent\r\n var parentTargetOptions =\r\n (parentTarget && parentTarget.$mdGesture[this.name]) || {};\r\n\r\n this.state = {\r\n isRunning: true,\r\n // Override the default options with the nearest registered parent's options\r\n options: angular.extend({}, this.options, parentTargetOptions),\r\n // Pass in the registered parent node to the state so the onStart listener can use\r\n registeredParent: parentTarget\r\n };\r\n this.onStart(ev, pointer);\r\n },\r\n move: function(ev, pointer) {\r\n if (!this.state.isRunning) return;\r\n this.onMove(ev, pointer);\r\n },\r\n end: function(ev, pointer) {\r\n if (!this.state.isRunning) return;\r\n this.onEnd(ev, pointer);\r\n this.state.isRunning = false;\r\n },\r\n cancel: function(ev, pointer) {\r\n this.onCancel(ev, pointer);\r\n this.state = {};\r\n },\r\n\r\n // Find and return the nearest parent element that has been registered to\r\n // listen for this handler via $mdGesture.register(element, 'handlerName').\r\n getNearestParent: function(node) {\r\n var current = node;\r\n while (current) {\r\n if ((current.$mdGesture || {})[this.name]) {\r\n return current;\r\n }\r\n current = current.parentNode;\r\n }\r\n return null;\r\n },\r\n\r\n // Called from $mdGesture.register when an element registers itself with a handler.\r\n // Store the options the user gave on the DOMElement itself. These options will\r\n // be retrieved with getNearestParent when the handler starts.\r\n registerElement: function(element, options) {\r\n var self = this;\r\n element[0].$mdGesture = element[0].$mdGesture || {};\r\n element[0].$mdGesture[this.name] = options || {};\r\n element.on(\"$destroy\", onDestroy);\r\n\r\n self.onSetup(element, options || {});\r\n\r\n return onDestroy;\r\n\r\n function onDestroy() {\r\n delete element[0].$mdGesture[self.name];\r\n element.off(\"$destroy\", onDestroy);\r\n\r\n self.onCleanup(element, options || {});\r\n }\r\n }\r\n };\r\n\r\n return GestureHandler;\r\n\r\n /*\r\n * Dispatch an event with jQuery\r\n * TODO: Make sure this sends bubbling events\r\n *\r\n * @param srcEvent the original DOM touch event that started this.\r\n * @param eventType the name of the custom event to send (eg 'click' or '$md.drag')\r\n * @param eventPointer the pointer object that matches this event.\r\n */\r\n function jQueryDispatchEvent(srcEvent, eventType, eventPointer) {\r\n eventPointer = eventPointer || pointer;\r\n var eventObj = new angular.element.Event(eventType);\r\n\r\n eventObj.$material = true;\r\n eventObj.pointer = eventPointer;\r\n eventObj.srcEvent = srcEvent;\r\n\r\n angular.extend(eventObj, {\r\n clientX: eventPointer.x,\r\n clientY: eventPointer.y,\r\n screenX: eventPointer.x,\r\n screenY: eventPointer.y,\r\n pageX: eventPointer.x,\r\n pageY: eventPointer.y,\r\n ctrlKey: srcEvent.ctrlKey,\r\n altKey: srcEvent.altKey,\r\n shiftKey: srcEvent.shiftKey,\r\n metaKey: srcEvent.metaKey\r\n });\r\n angular.element(eventPointer.target).trigger(eventObj);\r\n }\r\n\r\n /*\r\n * NOTE: nativeDispatchEvent is very performance sensitive.\r\n * @param srcEvent the original DOM touch event that started this.\r\n * @param eventType the name of the custom event to send (eg 'click' or '$md.drag')\r\n * @param eventPointer the pointer object that matches this event.\r\n */\r\n function nativeDispatchEvent(srcEvent, eventType, eventPointer) {\r\n eventPointer = eventPointer || pointer;\r\n var eventObj;\r\n\r\n if (\r\n eventType === \"click\" ||\r\n eventType == \"mouseup\" ||\r\n eventType == \"mousedown\"\r\n ) {\r\n eventObj = document.createEvent(\"MouseEvents\");\r\n eventObj.initMouseEvent(\r\n eventType,\r\n true,\r\n true,\r\n window,\r\n srcEvent.detail,\r\n eventPointer.x,\r\n eventPointer.y,\r\n eventPointer.x,\r\n eventPointer.y,\r\n srcEvent.ctrlKey,\r\n srcEvent.altKey,\r\n srcEvent.shiftKey,\r\n srcEvent.metaKey,\r\n srcEvent.button,\r\n srcEvent.relatedTarget || null\r\n );\r\n } else {\r\n eventObj = document.createEvent(\"CustomEvent\");\r\n eventObj.initCustomEvent(eventType, true, true, {});\r\n }\r\n eventObj.$material = true;\r\n eventObj.pointer = eventPointer;\r\n eventObj.srcEvent = srcEvent;\r\n eventPointer.target.dispatchEvent(eventObj);\r\n }\r\n }\r\n\r\n /**\r\n * Attach Gestures: hook document and check shouldHijack clicks\r\n * @ngInject\r\n */\r\n function attachToDocument($mdGesture, $$MdGestureHandler) {\r\n // Polyfill document.contains for IE11.\r\n // TODO: move to util\r\n document.contains ||\r\n (document.contains = function(node) {\r\n return document.body.contains(node);\r\n });\r\n\r\n if (!isInitialized && $mdGesture.isHijackingClicks) {\r\n /*\r\n * If hijack clicks is true, we preventDefault any click that wasn't\r\n * sent by ngMaterial. This is because on older Android & iOS, a false, or 'ghost',\r\n * click event will be sent ~400ms after a touchend event happens.\r\n * The only way to know if this click is real is to prevent any normal\r\n * click events, and add a flag to events sent by material so we know not to prevent those.\r\n *\r\n * Two exceptions to click events that should be prevented are:\r\n * - click events sent by the keyboard (eg form submit)\r\n * - events that originate from an Ionic app\r\n */\r\n document.addEventListener(\"click\", clickHijacker, true);\r\n document.addEventListener(\"mouseup\", mouseInputHijacker, true);\r\n document.addEventListener(\"mousedown\", mouseInputHijacker, true);\r\n document.addEventListener(\"focus\", mouseInputHijacker, true);\r\n\r\n isInitialized = true;\r\n }\r\n\r\n function mouseInputHijacker(ev) {\r\n var isKeyClick = !ev.clientX && !ev.clientY;\r\n if (\r\n !isKeyClick &&\r\n !ev.$material &&\r\n !ev.isIonicTap &&\r\n !isInputEventFromLabelClick(ev)\r\n ) {\r\n ev.preventDefault();\r\n ev.stopPropagation();\r\n }\r\n }\r\n\r\n function clickHijacker(ev) {\r\n var isKeyClick = ev.clientX === 0 && ev.clientY === 0;\r\n if (\r\n !isKeyClick &&\r\n !ev.$material &&\r\n !ev.isIonicTap &&\r\n !isInputEventFromLabelClick(ev)\r\n ) {\r\n ev.preventDefault();\r\n ev.stopPropagation();\r\n lastLabelClickPos = null;\r\n } else {\r\n lastLabelClickPos = null;\r\n if (ev.target.tagName.toLowerCase() == \"label\") {\r\n lastLabelClickPos = { x: ev.x, y: ev.y };\r\n }\r\n }\r\n }\r\n\r\n // Listen to all events to cover all platforms.\r\n var START_EVENTS = \"touchstart\";\r\n var MOVE_EVENTS = \"touchmove\";\r\n var END_EVENTS = \"touchend touchcancel\";\r\n\r\n angular\r\n .element(document)\r\n .on(START_EVENTS, gestureStart)\r\n .on(MOVE_EVENTS, gestureMove)\r\n .on(END_EVENTS, gestureEnd)\r\n // For testing\r\n .on(\"$$mdGestureReset\", function gestureClearCache() {\r\n lastPointer = pointer = null;\r\n });\r\n\r\n /*\r\n * When a DOM event happens, run all registered gesture handlers' lifecycle\r\n * methods which match the DOM event.\r\n * Eg when a 'touchstart' event happens, runHandlers('start') will call and\r\n * run `handler.cancel()` and `handler.start()` on all registered handlers.\r\n */\r\n function runHandlers(handlerEvent, event) {\r\n var handler;\r\n for (var name in HANDLERS) {\r\n handler = HANDLERS[name];\r\n if (handler instanceof $$MdGestureHandler) {\r\n if (handlerEvent === \"start\") {\r\n // Run cancel to reset any handlers' state\r\n handler.cancel();\r\n }\r\n handler[handlerEvent](event, pointer);\r\n }\r\n }\r\n }\r\n\r\n /*\r\n * gestureStart vets if a start event is legitimate (and not part of a 'ghost click' from iOS/Android)\r\n * If it is legitimate, we initiate the pointer state and mark the current pointer's type\r\n * For example, for a touchstart event, mark the current pointer as a 'touch' pointer, so mouse events\r\n * won't effect it.\r\n */\r\n function gestureStart(ev) {\r\n // If we're already touched down, abort\r\n if (pointer) return;\r\n\r\n var now = +Date.now();\r\n\r\n // iOS & old android bug: after a touch event, a click event is sent 350 ms later.\r\n // If <400ms have passed, don't allow an event of a different type than the previous event\r\n if (\r\n lastPointer &&\r\n !typesMatch(ev, lastPointer) &&\r\n now - lastPointer.endTime < 1500\r\n ) {\r\n return;\r\n }\r\n\r\n pointer = makeStartPointer(ev);\r\n\r\n runHandlers(\"start\", ev);\r\n }\r\n /*\r\n * If a move event happens of the right type, update the pointer and run all the move handlers.\r\n * \"of the right type\": if a mousemove happens but our pointer started with a touch event, do nothing.\r\n */\r\n function gestureMove(ev) {\r\n if (!pointer || !typesMatch(ev, pointer)) return;\r\n\r\n updatePointerState(ev, pointer);\r\n runHandlers(\"move\", ev);\r\n }\r\n /*\r\n * If an end event happens of the right type, update the pointer, run endHandlers, and save the pointer as 'lastPointer'\r\n */\r\n function gestureEnd(ev) {\r\n if (!pointer || !typesMatch(ev, pointer)) return;\r\n\r\n updatePointerState(ev, pointer);\r\n pointer.endTime = +Date.now();\r\n\r\n runHandlers(\"end\", ev);\r\n\r\n lastPointer = pointer;\r\n pointer = null;\r\n }\r\n }\r\n\r\n // ********************\r\n // Module Functions\r\n // ********************\r\n\r\n /*\r\n * Initiate the pointer. x, y, and the pointer's type.\r\n */\r\n function makeStartPointer(ev) {\r\n var point = getEventPoint(ev);\r\n var startPointer = {\r\n startTime: +Date.now(),\r\n target: ev.target,\r\n // 'p' for pointer events, 'm' for mouse, 't' for touch\r\n type: ev.type.charAt(0)\r\n };\r\n startPointer.startX = startPointer.x = point.pageX;\r\n startPointer.startY = startPointer.y = point.pageY;\r\n return startPointer;\r\n }\r\n\r\n /*\r\n * return whether the pointer's type matches the event's type.\r\n * Eg if a touch event happens but the pointer has a mouse type, return false.\r\n */\r\n function typesMatch(ev, pointer) {\r\n return ev && pointer && ev.type.charAt(0) === pointer.type;\r\n }\r\n\r\n /**\r\n * Gets whether the given event is an input event that was caused by clicking on an\r\n * associated label element.\r\n *\r\n * This is necessary because the browser will, upon clicking on a label element, fire an\r\n * *extra* click event on its associated input (if any). mdGesture is able to flag the label\r\n * click as with `$material` correctly, but not the second input click.\r\n *\r\n * In order to determine whether an input event is from a label click, we compare the (x, y) for\r\n * the event to the (x, y) for the most recent label click (which is cleared whenever a non-label\r\n * click occurs). Unfortunately, there are no event properties that tie the input and the label\r\n * together (such as relatedTarget).\r\n *\r\n * @param {MouseEvent} event\r\n * @returns {boolean}\r\n */\r\n function isInputEventFromLabelClick(event) {\r\n return (\r\n lastLabelClickPos &&\r\n lastLabelClickPos.x == event.x &&\r\n lastLabelClickPos.y == event.y\r\n );\r\n }\r\n\r\n /*\r\n * Update the given pointer based upon the given DOMEvent.\r\n * Distance, velocity, direction, duration, etc\r\n */\r\n function updatePointerState(ev, pointer) {\r\n var point = getEventPoint(ev);\r\n var x = (pointer.x = point.pageX);\r\n var y = (pointer.y = point.pageY);\r\n\r\n pointer.distanceX = x - pointer.startX;\r\n pointer.distanceY = y - pointer.startY;\r\n pointer.distance = Math.sqrt(\r\n pointer.distanceX * pointer.distanceX +\r\n pointer.distanceY * pointer.distanceY\r\n );\r\n\r\n pointer.directionX =\r\n pointer.distanceX > 0 ? \"right\" : pointer.distanceX < 0 ? \"left\" : \"\";\r\n pointer.directionY =\r\n pointer.distanceY > 0 ? \"down\" : pointer.distanceY < 0 ? \"up\" : \"\";\r\n\r\n pointer.duration = +Date.now() - pointer.startTime;\r\n pointer.velocityX = pointer.distanceX / pointer.duration;\r\n pointer.velocityY = pointer.distanceY / pointer.duration;\r\n }\r\n\r\n /*\r\n * Normalize the point where the DOM event happened whether it's touch or mouse.\r\n * @returns point event obj with pageX and pageY on it.\r\n */\r\n function getEventPoint(ev) {\r\n ev = ev.originalEvent || ev; // support jQuery events\r\n return (\r\n (ev.touches && ev.touches[0]) ||\r\n (ev.changedTouches && ev.changedTouches[0]) ||\r\n ev\r\n );\r\n }\r\n })();\r\n (function() {\r\n \"use strict\";\r\n\r\n angular\r\n .module(\"material.core\")\r\n .provider(\"$$interimElement\", InterimElementProvider);\r\n\r\n /*\r\n * @ngdoc service\r\n * @name $$interimElement\r\n * @module material.core\r\n *\r\n * @description\r\n *\r\n * Factory that contructs `$$interimElement.$service` services.\r\n * Used internally in material design for elements that appear on screen temporarily.\r\n * The service provides a promise-like API for interacting with the temporary\r\n * elements.\r\n *\r\n * ```js\r\n * app.service('$mdToast', function($$interimElement) {\r\n * var $mdToast = $$interimElement(toastDefaultOptions);\r\n * return $mdToast;\r\n * });\r\n * ```\r\n * @param {object=} defaultOptions Options used by default for the `show` method on the service.\r\n *\r\n * @returns {$$interimElement.$service}\r\n *\r\n */\r\n\r\n function InterimElementProvider() {\r\n InterimElementFactory.$inject = [\r\n \"$document\",\r\n \"$q\",\r\n \"$$q\",\r\n \"$rootScope\",\r\n \"$timeout\",\r\n \"$rootElement\",\r\n \"$animate\",\r\n \"$mdUtil\",\r\n \"$mdCompiler\",\r\n \"$mdTheming\",\r\n \"$injector\"\r\n ];\r\n createInterimElementProvider.$get = InterimElementFactory;\r\n return createInterimElementProvider;\r\n\r\n /**\r\n * Returns a new provider which allows configuration of a new interimElement\r\n * service. Allows configuration of default options & methods for options,\r\n * as well as configuration of 'preset' methods (eg dialog.basic(): basic is a preset method)\r\n */\r\n function createInterimElementProvider(interimFactoryName) {\r\n factory.$inject = [\"$$interimElement\", \"$injector\"];\r\n var EXPOSED_METHODS = [\"onHide\", \"onShow\", \"onRemove\"];\r\n\r\n var customMethods = {};\r\n var providerConfig = {\r\n presets: {}\r\n };\r\n\r\n var provider = {\r\n setDefaults: setDefaults,\r\n addPreset: addPreset,\r\n addMethod: addMethod,\r\n $get: factory\r\n };\r\n\r\n /**\r\n * all interim elements will come with the 'build' preset\r\n */\r\n provider.addPreset(\"build\", {\r\n methods: [\r\n \"controller\",\r\n \"controllerAs\",\r\n \"resolve\",\r\n \"template\",\r\n \"templateUrl\",\r\n \"themable\",\r\n \"transformTemplate\",\r\n \"parent\"\r\n ]\r\n });\r\n\r\n return provider;\r\n\r\n /**\r\n * Save the configured defaults to be used when the factory is instantiated\r\n */\r\n function setDefaults(definition) {\r\n providerConfig.optionsFactory = definition.options;\r\n providerConfig.methods = (definition.methods || []).concat(\r\n EXPOSED_METHODS\r\n );\r\n return provider;\r\n }\r\n\r\n /**\r\n * Add a method to the factory that isn't specific to any interim element operations\r\n */\r\n\r\n function addMethod(name, fn) {\r\n customMethods[name] = fn;\r\n return provider;\r\n }\r\n\r\n /**\r\n * Save the configured preset to be used when the factory is instantiated\r\n */\r\n function addPreset(name, definition) {\r\n definition = definition || {};\r\n definition.methods = definition.methods || [];\r\n definition.options =\r\n definition.options ||\r\n function() {\r\n return {};\r\n };\r\n\r\n if (/^cancel|hide|show$/.test(name)) {\r\n throw new Error(\r\n \"Preset '\" + name + \"' in \" + interimFactoryName + \" is reserved!\"\r\n );\r\n }\r\n if (definition.methods.indexOf(\"_options\") > -1) {\r\n throw new Error(\r\n \"Method '_options' in \" + interimFactoryName + \" is reserved!\"\r\n );\r\n }\r\n providerConfig.presets[name] = {\r\n methods: definition.methods.concat(EXPOSED_METHODS),\r\n optionsFactory: definition.options,\r\n argOption: definition.argOption\r\n };\r\n return provider;\r\n }\r\n\r\n function addPresetMethod(presetName, methodName, method) {\r\n providerConfig.presets[presetName][methodName] = method;\r\n }\r\n\r\n /**\r\n * Create a factory that has the given methods & defaults implementing interimElement\r\n */\r\n /* @ngInject */\r\n function factory($$interimElement, $injector) {\r\n var defaultMethods;\r\n var defaultOptions;\r\n var interimElementService = $$interimElement();\r\n\r\n /*\r\n * publicService is what the developer will be using.\r\n * It has methods hide(), cancel(), show(), build(), and any other\r\n * presets which were set during the config phase.\r\n */\r\n var publicService = {\r\n hide: interimElementService.hide,\r\n cancel: interimElementService.cancel,\r\n show: showInterimElement,\r\n\r\n // Special internal method to destroy an interim element without animations\r\n // used when navigation changes causes a $scope.$destroy() action\r\n destroy: destroyInterimElement\r\n };\r\n\r\n defaultMethods = providerConfig.methods || [];\r\n // This must be invoked after the publicService is initialized\r\n defaultOptions = invokeFactory(providerConfig.optionsFactory, {});\r\n\r\n // Copy over the simple custom methods\r\n angular.forEach(customMethods, function(fn, name) {\r\n publicService[name] = fn;\r\n });\r\n\r\n angular.forEach(providerConfig.presets, function(definition, name) {\r\n var presetDefaults = invokeFactory(definition.optionsFactory, {});\r\n var presetMethods = (definition.methods || []).concat(\r\n defaultMethods\r\n );\r\n\r\n // Every interimElement built with a preset has a field called `$type`,\r\n // which matches the name of the preset.\r\n // Eg in preset 'confirm', options.$type === 'confirm'\r\n angular.extend(presetDefaults, { $type: name });\r\n\r\n // This creates a preset class which has setter methods for every\r\n // method given in the `.addPreset()` function, as well as every\r\n // method given in the `.setDefaults()` function.\r\n //\r\n // @example\r\n // .setDefaults({\r\n // methods: ['hasBackdrop', 'clickOutsideToClose', 'escapeToClose', 'targetEvent'],\r\n // options: dialogDefaultOptions\r\n // })\r\n // .addPreset('alert', {\r\n // methods: ['title', 'ok'],\r\n // options: alertDialogOptions\r\n // })\r\n //\r\n // Set values will be passed to the options when interimElement.show() is called.\r\n function Preset(opts) {\r\n this._options = angular.extend({}, presetDefaults, opts);\r\n }\r\n angular.forEach(presetMethods, function(name) {\r\n Preset.prototype[name] = function(value) {\r\n this._options[name] = value;\r\n return this;\r\n };\r\n });\r\n\r\n // Create shortcut method for one-linear methods\r\n if (definition.argOption) {\r\n var methodName =\r\n \"show\" + name.charAt(0).toUpperCase() + name.slice(1);\r\n publicService[methodName] = function(arg) {\r\n var config = publicService[name](arg);\r\n return publicService.show(config);\r\n };\r\n }\r\n\r\n // eg $mdDialog.alert() will return a new alert preset\r\n publicService[name] = function(arg) {\r\n // If argOption is supplied, eg `argOption: 'content'`, then we assume\r\n // if the argument is not an options object then it is the `argOption` option.\r\n //\r\n // @example `$mdToast.simple('hello')` // sets options.content to hello\r\n // // because argOption === 'content'\r\n if (\r\n arguments.length &&\r\n definition.argOption &&\r\n !angular.isObject(arg) &&\r\n !angular.isArray(arg)\r\n ) {\r\n return new Preset()[definition.argOption](arg);\r\n } else {\r\n return new Preset(arg);\r\n }\r\n };\r\n });\r\n\r\n return publicService;\r\n\r\n /**\r\n *\r\n */\r\n function showInterimElement(opts) {\r\n // opts is either a preset which stores its options on an _options field,\r\n // or just an object made up of options\r\n opts = opts || {};\r\n if (opts._options) opts = opts._options;\r\n\r\n return interimElementService.show(\r\n angular.extend({}, defaultOptions, opts)\r\n );\r\n }\r\n\r\n /**\r\n * Special method to hide and destroy an interimElement WITHOUT\r\n * any 'leave` or hide animations ( an immediate force hide/remove )\r\n *\r\n * NOTE: This calls the onRemove() subclass method for each component...\r\n * which must have code to respond to `options.$destroy == true`\r\n */\r\n function destroyInterimElement(opts) {\r\n return interimElementService.destroy(opts);\r\n }\r\n\r\n /**\r\n * Helper to call $injector.invoke with a local of the factory name for\r\n * this provider.\r\n * If an $mdDialog is providing options for a dialog and tries to inject\r\n * $mdDialog, a circular dependency error will happen.\r\n * We get around that by manually injecting $mdDialog as a local.\r\n */\r\n function invokeFactory(factory, defaultVal) {\r\n var locals = {};\r\n locals[interimFactoryName] = publicService;\r\n return $injector.invoke(\r\n factory ||\r\n function() {\r\n return defaultVal;\r\n },\r\n {},\r\n locals\r\n );\r\n }\r\n }\r\n }\r\n\r\n /* @ngInject */\r\n function InterimElementFactory(\r\n $document,\r\n $q,\r\n $$q,\r\n $rootScope,\r\n $timeout,\r\n $rootElement,\r\n $animate,\r\n $mdUtil,\r\n $mdCompiler,\r\n $mdTheming,\r\n $injector\r\n ) {\r\n return function createInterimElementService() {\r\n var SHOW_CANCELLED = false;\r\n\r\n /*\r\n * @ngdoc service\r\n * @name $$interimElement.$service\r\n *\r\n * @description\r\n * A service used to control inserting and removing an element into the DOM.\r\n *\r\n */\r\n var service,\r\n stack = [];\r\n\r\n // Publish instance $$interimElement service;\r\n // ... used as $mdDialog, $mdToast, $mdMenu, and $mdSelect\r\n\r\n return (service = {\r\n show: show,\r\n hide: hide,\r\n cancel: cancel,\r\n destroy: destroy,\r\n $injector_: $injector\r\n });\r\n\r\n /*\r\n * @ngdoc method\r\n * @name $$interimElement.$service#show\r\n * @kind function\r\n *\r\n * @description\r\n * Adds the `$interimElement` to the DOM and returns a special promise that will be resolved or rejected\r\n * with hide or cancel, respectively. To external cancel/hide, developers should use the\r\n *\r\n * @param {*} options is hashMap of settings\r\n * @returns a Promise\r\n *\r\n */\r\n function show(options) {\r\n options = options || {};\r\n var interimElement = new InterimElement(options || {});\r\n // When an interim element is currently showing, we have to cancel it.\r\n // Just hiding it, will resolve the InterimElement's promise, the promise should be\r\n // rejected instead.\r\n var hideExisting =\r\n !options.skipHide && stack.length\r\n ? service.cancel()\r\n : $q.when(true);\r\n\r\n // This hide()s only the current interim element before showing the next, new one\r\n // NOTE: this is not reversible (e.g. interim elements are not stackable)\r\n\r\n hideExisting.finally(function() {\r\n stack.push(interimElement);\r\n interimElement.show().catch(function(reason) {\r\n //$log.error(\"InterimElement.show() error: \" + reason );\r\n return reason;\r\n });\r\n });\r\n\r\n // Return a promise that will be resolved when the interim\r\n // element is hidden or cancelled...\r\n\r\n return interimElement.deferred.promise;\r\n }\r\n\r\n /*\r\n * @ngdoc method\r\n * @name $$interimElement.$service#hide\r\n * @kind function\r\n *\r\n * @description\r\n * Removes the `$interimElement` from the DOM and resolves the promise returned from `show`\r\n *\r\n * @param {*} resolveParam Data to resolve the promise with\r\n * @returns a Promise that will be resolved after the element has been removed.\r\n *\r\n */\r\n function hide(reason, options) {\r\n if (!stack.length) return $q.when(reason);\r\n options = options || {};\r\n\r\n if (options.closeAll) {\r\n var promise = $q.all(stack.reverse().map(closeElement));\r\n stack = [];\r\n return promise;\r\n } else if (options.closeTo !== undefined) {\r\n return $q.all(stack.splice(options.closeTo).map(closeElement));\r\n } else {\r\n var interim = stack.pop();\r\n return closeElement(interim);\r\n }\r\n\r\n function closeElement(interim) {\r\n interim\r\n .remove(reason, false, options || {})\r\n .catch(function(reason) {\r\n //$log.error(\"InterimElement.hide() error: \" + reason );\r\n return reason;\r\n });\r\n return interim.deferred.promise;\r\n }\r\n }\r\n\r\n /*\r\n * @ngdoc method\r\n * @name $$interimElement.$service#cancel\r\n * @kind function\r\n *\r\n * @description\r\n * Removes the `$interimElement` from the DOM and rejects the promise returned from `show`\r\n *\r\n * @param {*} reason Data to reject the promise with\r\n * @returns Promise that will be resolved after the element has been removed.\r\n *\r\n */\r\n function cancel(reason, options) {\r\n var interim = stack.pop();\r\n if (!interim) return $q.when(reason);\r\n\r\n interim.remove(reason, true, options || {}).catch(function(reason) {\r\n //$log.error(\"InterimElement.cancel() error: \" + reason );\r\n return reason;\r\n });\r\n\r\n // Since Angular 1.6.7, promises will be logged to $exceptionHandler when the promise\r\n // is not handling the rejection. We create a pseudo catch handler, which will prevent the\r\n // promise from being logged to the $exceptionHandler.\r\n return interim.deferred.promise.catch(angular.noop);\r\n }\r\n\r\n /*\r\n * Special method to quick-remove the interim element without animations\r\n * Note: interim elements are in \"interim containers\"\r\n */\r\n function destroy(target) {\r\n var interim = !target ? stack.shift() : null;\r\n var cntr = angular.element(target).length\r\n ? angular.element(target)[0].parentNode\r\n : null;\r\n\r\n if (cntr) {\r\n // Try to find the interim element in the stack which corresponds to the supplied DOM element.\r\n var filtered = stack.filter(function(entry) {\r\n var currNode = entry.options.element[0];\r\n return currNode === cntr;\r\n });\r\n\r\n // Note: this function might be called when the element already has been removed, in which\r\n // case we won't find any matches. That's ok.\r\n if (filtered.length > 0) {\r\n interim = filtered[0];\r\n stack.splice(stack.indexOf(interim), 1);\r\n }\r\n }\r\n\r\n return interim\r\n ? interim.remove(SHOW_CANCELLED, false, { $destroy: true })\r\n : $q.when(SHOW_CANCELLED);\r\n }\r\n\r\n /*\r\n * Internal Interim Element Object\r\n * Used internally to manage the DOM element and related data\r\n */\r\n function InterimElement(options) {\r\n var self,\r\n element,\r\n showAction = $q.when(true);\r\n\r\n options = configureScopeAndTransitions(options);\r\n\r\n return (self = {\r\n options: options,\r\n deferred: $q.defer(),\r\n show: createAndTransitionIn,\r\n remove: transitionOutAndRemove\r\n });\r\n\r\n /**\r\n * Compile, link, and show this interim element\r\n * Use optional autoHided and transition-in effects\r\n */\r\n function createAndTransitionIn() {\r\n return $q(function(resolve, reject) {\r\n // Trigger onCompiling callback before the compilation starts.\r\n // This is useful, when modifying options, which can be influenced by developers.\r\n options.onCompiling && options.onCompiling(options);\r\n\r\n compileElement(options).then(function(compiledData) {\r\n element = linkElement(compiledData, options);\r\n\r\n showAction = showElement(\r\n element,\r\n options,\r\n compiledData.controller\r\n ).then(resolve, rejectAll);\r\n }, rejectAll);\r\n\r\n function rejectAll(fault) {\r\n // Force the '$md.show()' promise to reject\r\n self.deferred.reject(fault);\r\n\r\n // Continue rejection propagation\r\n reject(fault);\r\n }\r\n });\r\n }\r\n\r\n /**\r\n * After the show process has finished/rejected:\r\n * - announce 'removing',\r\n * - perform the transition-out, and\r\n * - perform optional clean up scope.\r\n */\r\n function transitionOutAndRemove(response, isCancelled, opts) {\r\n // abort if the show() and compile failed\r\n if (!element) return $q.when(false);\r\n\r\n options = angular.extend(options || {}, opts || {});\r\n options.cancelAutoHide && options.cancelAutoHide();\r\n options.element.triggerHandler(\"$mdInterimElementRemove\");\r\n\r\n if (options.$destroy === true) {\r\n return hideElement(options.element, options).then(function() {\r\n (isCancelled && rejectAll(response)) || resolveAll(response);\r\n });\r\n } else {\r\n $q.when(showAction).finally(function() {\r\n hideElement(options.element, options).then(function() {\r\n (isCancelled && rejectAll(response)) ||\r\n resolveAll(response);\r\n }, rejectAll);\r\n });\r\n\r\n return self.deferred.promise;\r\n }\r\n\r\n /**\r\n * The `show()` returns a promise that will be resolved when the interim\r\n * element is hidden or cancelled...\r\n */\r\n function resolveAll(response) {\r\n self.deferred.resolve(response);\r\n }\r\n\r\n /**\r\n * Force the '$md.show()' promise to reject\r\n */\r\n function rejectAll(fault) {\r\n self.deferred.reject(fault);\r\n }\r\n }\r\n\r\n /**\r\n * Prepare optional isolated scope and prepare $animate with default enter and leave\r\n * transitions for the new element instance.\r\n */\r\n function configureScopeAndTransitions(options) {\r\n options = options || {};\r\n if (options.template) {\r\n options.template = $mdUtil.processTemplate(options.template);\r\n }\r\n\r\n return angular.extend(\r\n {\r\n preserveScope: false,\r\n cancelAutoHide: angular.noop,\r\n scope: options.scope || $rootScope.$new(options.isolateScope),\r\n\r\n /**\r\n * Default usage to enable $animate to transition-in; can be easily overridden via 'options'\r\n */\r\n onShow: function transitionIn(scope, element, options) {\r\n return $animate.enter(element, options.parent);\r\n },\r\n\r\n /**\r\n * Default usage to enable $animate to transition-out; can be easily overridden via 'options'\r\n */\r\n onRemove: function transitionOut(scope, element) {\r\n // Element could be undefined if a new element is shown before\r\n // the old one finishes compiling.\r\n return (element && $animate.leave(element)) || $q.when();\r\n }\r\n },\r\n options\r\n );\r\n }\r\n\r\n /**\r\n * Compile an element with a templateUrl, controller, and locals\r\n */\r\n function compileElement(options) {\r\n var compiled = !options.skipCompile\r\n ? $mdCompiler.compile(options)\r\n : null;\r\n\r\n return (\r\n compiled ||\r\n $q(function(resolve) {\r\n resolve({\r\n locals: {},\r\n link: function() {\r\n return options.element;\r\n }\r\n });\r\n })\r\n );\r\n }\r\n\r\n /**\r\n * Link an element with compiled configuration\r\n */\r\n function linkElement(compileData, options) {\r\n angular.extend(compileData.locals, options);\r\n\r\n var element = compileData.link(options.scope);\r\n\r\n // Search for parent at insertion time, if not specified\r\n options.element = element;\r\n options.parent = findParent(element, options);\r\n if (options.themable) $mdTheming(element);\r\n\r\n return element;\r\n }\r\n\r\n /**\r\n * Search for parent at insertion time, if not specified\r\n */\r\n function findParent(element, options) {\r\n var parent = options.parent;\r\n\r\n // Search for parent at insertion time, if not specified\r\n if (angular.isFunction(parent)) {\r\n parent = parent(options.scope, element, options);\r\n } else if (angular.isString(parent)) {\r\n parent = angular.element($document[0].querySelector(parent));\r\n } else {\r\n parent = angular.element(parent);\r\n }\r\n\r\n // If parent querySelector/getter function fails, or it's just null,\r\n // find a default.\r\n if (!(parent || {}).length) {\r\n var el;\r\n if ($rootElement[0] && $rootElement[0].querySelector) {\r\n el = $rootElement[0].querySelector(\":not(svg) > body\");\r\n }\r\n if (!el) el = $rootElement[0];\r\n if (el.nodeName == \"#comment\") {\r\n el = $document[0].body;\r\n }\r\n return angular.element(el);\r\n }\r\n\r\n return parent;\r\n }\r\n\r\n /**\r\n * If auto-hide is enabled, start timer and prepare cancel function\r\n */\r\n function startAutoHide() {\r\n var autoHideTimer,\r\n cancelAutoHide = angular.noop;\r\n\r\n if (options.hideDelay) {\r\n autoHideTimer = $timeout(service.hide, options.hideDelay);\r\n cancelAutoHide = function() {\r\n $timeout.cancel(autoHideTimer);\r\n };\r\n }\r\n\r\n // Cache for subsequent use\r\n options.cancelAutoHide = function() {\r\n cancelAutoHide();\r\n options.cancelAutoHide = undefined;\r\n };\r\n }\r\n\r\n /**\r\n * Show the element ( with transitions), notify complete and start\r\n * optional auto-Hide\r\n */\r\n function showElement(element, options, controller) {\r\n // Trigger onShowing callback before the `show()` starts\r\n var notifyShowing = options.onShowing || angular.noop;\r\n // Trigger onComplete callback when the `show()` finishes\r\n var notifyComplete = options.onComplete || angular.noop;\r\n\r\n notifyShowing(options.scope, element, options, controller);\r\n\r\n return $q(function(resolve, reject) {\r\n try {\r\n // Start transitionIn\r\n $q.when(\r\n options.onShow(options.scope, element, options, controller)\r\n ).then(function() {\r\n notifyComplete(options.scope, element, options);\r\n startAutoHide();\r\n\r\n resolve(element);\r\n }, reject);\r\n } catch (e) {\r\n reject(e.message);\r\n }\r\n });\r\n }\r\n\r\n function hideElement(element, options) {\r\n var announceRemoving = options.onRemoving || angular.noop;\r\n\r\n return $$q(function(resolve, reject) {\r\n try {\r\n // Start transitionIn\r\n var action = $$q.when(\r\n options.onRemove(options.scope, element, options) || true\r\n );\r\n\r\n // Trigger callback *before* the remove operation starts\r\n announceRemoving(element, action);\r\n\r\n if (options.$destroy == true) {\r\n // For $destroy, onRemove should be synchronous\r\n resolve(element);\r\n } else {\r\n // Wait until transition-out is done\r\n action.then(function() {\r\n if (!options.preserveScope && options.scope) {\r\n options.scope.$destroy();\r\n }\r\n\r\n resolve(element);\r\n }, reject);\r\n }\r\n } catch (e) {\r\n reject(e);\r\n }\r\n });\r\n }\r\n }\r\n };\r\n }\r\n }\r\n })();\r\n (function() {\r\n \"use strict\";\r\n\r\n (function() {\r\n \"use strict\";\r\n\r\n var $mdUtil, $interpolate, $log;\r\n\r\n var SUFFIXES = /(-gt)?-(sm|md|lg|print)/g;\r\n var WHITESPACE = /\\s+/g;\r\n\r\n var FLEX_OPTIONS = [\r\n \"grow\",\r\n \"initial\",\r\n \"auto\",\r\n \"none\",\r\n \"noshrink\",\r\n \"nogrow\"\r\n ];\r\n var LAYOUT_OPTIONS = [\"row\", \"column\"];\r\n var ALIGNMENT_MAIN_AXIS = [\r\n \"\",\r\n \"start\",\r\n \"center\",\r\n \"end\",\r\n \"stretch\",\r\n \"space-around\",\r\n \"space-between\"\r\n ];\r\n var ALIGNMENT_CROSS_AXIS = [\"\", \"start\", \"center\", \"end\", \"stretch\"];\r\n\r\n var config = {\r\n /**\r\n * Enable directive attribute-to-class conversions\r\n * Developers can use `` to quickly\r\n * disable the Layout directives and prohibit the injection of Layout classNames\r\n */\r\n enabled: true,\r\n\r\n /**\r\n * List of mediaQuery breakpoints and associated suffixes\r\n *\r\n * [\r\n * { suffix: \"sm\", mediaQuery: \"screen and (max-width: 599px)\" },\r\n * { suffix: \"md\", mediaQuery: \"screen and (min-width: 600px) and (max-width: 959px)\" }\r\n * ]\r\n */\r\n breakpoints: []\r\n };\r\n\r\n registerLayoutAPI(angular.module(\"material.core.layout\", [\"ng\"]));\r\n\r\n /**\r\n * registerLayoutAPI()\r\n *\r\n * The original ngMaterial Layout solution used attribute selectors and CSS.\r\n *\r\n * ```html\r\n *
My Content
\r\n * ```\r\n *\r\n * ```css\r\n * [layout] {\r\n * box-sizing: border-box;\r\n * display:flex;\r\n * }\r\n * [layout=column] {\r\n * flex-direction : column\r\n * }\r\n * ```\r\n *\r\n * Use of attribute selectors creates significant performance impacts in some\r\n * browsers... mainly IE.\r\n *\r\n * This module registers directives that allow the same layout attributes to be\r\n * interpreted and converted to class selectors. The directive will add equivalent classes to each element that\r\n * contains a Layout directive.\r\n *\r\n * ```html\r\n *
My Content
\r\n *```\r\n *\r\n * ```css\r\n * .layout {\r\n * box-sizing: border-box;\r\n * display:flex;\r\n * }\r\n * .layout-column {\r\n * flex-direction : column\r\n * }\r\n * ```\r\n */\r\n function registerLayoutAPI(module) {\r\n var PREFIX_REGEXP = /^((?:x|data)[\\:\\-_])/i;\r\n var SPECIAL_CHARS_REGEXP = /([\\:\\-\\_]+(.))/g;\r\n\r\n // NOTE: these are also defined in constants::MEDIA_PRIORITY and constants::MEDIA\r\n var BREAKPOINTS = [\r\n \"\",\r\n \"xs\",\r\n \"gt-xs\",\r\n \"sm\",\r\n \"gt-sm\",\r\n \"md\",\r\n \"gt-md\",\r\n \"lg\",\r\n \"gt-lg\",\r\n \"xl\",\r\n \"print\"\r\n ];\r\n var API_WITH_VALUES = [\r\n \"layout\",\r\n \"flex\",\r\n \"flex-order\",\r\n \"flex-offset\",\r\n \"layout-align\"\r\n ];\r\n var API_NO_VALUES = [\"show\", \"hide\", \"layout-padding\", \"layout-margin\"];\r\n\r\n // Build directive registration functions for the standard Layout API... for all breakpoints.\r\n angular.forEach(BREAKPOINTS, function(mqb) {\r\n // Attribute directives with expected, observable value(s)\r\n angular.forEach(API_WITH_VALUES, function(name) {\r\n var fullName = mqb ? name + \"-\" + mqb : name;\r\n module.directive(\r\n directiveNormalize(fullName),\r\n attributeWithObserve(fullName)\r\n );\r\n });\r\n\r\n // Attribute directives with no expected value(s)\r\n angular.forEach(API_NO_VALUES, function(name) {\r\n var fullName = mqb ? name + \"-\" + mqb : name;\r\n module.directive(\r\n directiveNormalize(fullName),\r\n attributeWithoutValue(fullName)\r\n );\r\n });\r\n });\r\n\r\n // Register other, special directive functions for the Layout features:\r\n module\r\n\r\n .provider(\"$$mdLayout\", function() {\r\n // Publish internal service for Layouts\r\n return {\r\n $get: angular.noop,\r\n validateAttributeValue: validateAttributeValue,\r\n validateAttributeUsage: validateAttributeUsage,\r\n /**\r\n * Easy way to disable/enable the Layout API.\r\n * When disabled, this stops all attribute-to-classname generations\r\n */\r\n disableLayouts: function(isDisabled) {\r\n config.enabled = isDisabled !== true;\r\n }\r\n };\r\n })\r\n\r\n .directive(\"mdLayoutCss\", disableLayoutDirective)\r\n .directive(\"ngCloak\", buildCloakInterceptor(\"ng-cloak\"))\r\n\r\n .directive(\"layoutWrap\", attributeWithoutValue(\"layout-wrap\"))\r\n .directive(\"layoutNowrap\", attributeWithoutValue(\"layout-nowrap\"))\r\n .directive(\"layoutNoWrap\", attributeWithoutValue(\"layout-no-wrap\"))\r\n .directive(\"layoutFill\", attributeWithoutValue(\"layout-fill\"))\r\n\r\n // !! Deprecated attributes: use the `-lt` (aka less-than) notations\r\n\r\n .directive(\"layoutLtMd\", warnAttrNotSupported(\"layout-lt-md\", true))\r\n .directive(\"layoutLtLg\", warnAttrNotSupported(\"layout-lt-lg\", true))\r\n .directive(\"flexLtMd\", warnAttrNotSupported(\"flex-lt-md\", true))\r\n .directive(\"flexLtLg\", warnAttrNotSupported(\"flex-lt-lg\", true))\r\n\r\n .directive(\r\n \"layoutAlignLtMd\",\r\n warnAttrNotSupported(\"layout-align-lt-md\")\r\n )\r\n .directive(\r\n \"layoutAlignLtLg\",\r\n warnAttrNotSupported(\"layout-align-lt-lg\")\r\n )\r\n .directive(\"flexOrderLtMd\", warnAttrNotSupported(\"flex-order-lt-md\"))\r\n .directive(\"flexOrderLtLg\", warnAttrNotSupported(\"flex-order-lt-lg\"))\r\n .directive(\"offsetLtMd\", warnAttrNotSupported(\"flex-offset-lt-md\"))\r\n .directive(\"offsetLtLg\", warnAttrNotSupported(\"flex-offset-lt-lg\"))\r\n\r\n .directive(\"hideLtMd\", warnAttrNotSupported(\"hide-lt-md\"))\r\n .directive(\"hideLtLg\", warnAttrNotSupported(\"hide-lt-lg\"))\r\n .directive(\"showLtMd\", warnAttrNotSupported(\"show-lt-md\"))\r\n .directive(\"showLtLg\", warnAttrNotSupported(\"show-lt-lg\"))\r\n\r\n // Determine if\r\n .config(detectDisabledLayouts);\r\n\r\n /**\r\n * Converts snake_case to camelCase.\r\n * Also there is special case for Moz prefix starting with upper case letter.\r\n * @param name Name to normalize\r\n */\r\n function directiveNormalize(name) {\r\n return name\r\n .replace(PREFIX_REGEXP, \"\")\r\n .replace(SPECIAL_CHARS_REGEXP, function(\r\n _,\r\n separator,\r\n letter,\r\n offset\r\n ) {\r\n return offset ? letter.toUpperCase() : letter;\r\n });\r\n }\r\n }\r\n\r\n /**\r\n * Detect if any of the HTML tags has a [md-layouts-disabled] attribute;\r\n * If yes, then immediately disable all layout API features\r\n *\r\n * Note: this attribute should be specified on either the HTML or BODY tags\r\n */\r\n /**\r\n * @ngInject\r\n */\r\n function detectDisabledLayouts() {\r\n var isDisabled = !!document.querySelector(\"[md-layouts-disabled]\");\r\n config.enabled = !isDisabled;\r\n }\r\n\r\n /**\r\n * Special directive that will disable ALL Layout conversions of layout\r\n * attribute(s) to classname(s).\r\n *\r\n * \r\n * \r\n *\r\n * \r\n * ...\r\n * \r\n *\r\n * Note: Using md-layout-css directive requires the developer to load the Material\r\n * Layout Attribute stylesheet (which only uses attribute selectors):\r\n *\r\n * `angular-material.layout.css`\r\n *\r\n * Another option is to use the LayoutProvider to configure and disable the attribute\r\n * conversions; this would obviate the use of the `md-layout-css` directive\r\n *\r\n */\r\n function disableLayoutDirective() {\r\n // Return a 1x-only, first-match attribute directive\r\n config.enabled = false;\r\n\r\n return {\r\n restrict: \"A\",\r\n priority: \"900\"\r\n };\r\n }\r\n\r\n /**\r\n * Tail-hook ngCloak to delay the uncloaking while Layout transformers\r\n * finish processing. Eliminates flicker with Material.Layouts\r\n */\r\n function buildCloakInterceptor(className) {\r\n return [\r\n \"$timeout\",\r\n function($timeout) {\r\n return {\r\n restrict: \"A\",\r\n priority: -10, // run after normal ng-cloak\r\n compile: function(element) {\r\n if (!config.enabled) return angular.noop;\r\n\r\n // Re-add the cloak\r\n element.addClass(className);\r\n\r\n return function(scope, element) {\r\n // Wait while layout injectors configure, then uncloak\r\n // NOTE: $rAF does not delay enough... and this is a 1x-only event,\r\n // $timeout is acceptable.\r\n $timeout(\r\n function() {\r\n element.removeClass(className);\r\n },\r\n 10,\r\n false\r\n );\r\n };\r\n }\r\n };\r\n }\r\n ];\r\n }\r\n\r\n // *********************************************************************************\r\n //\r\n // These functions create registration functions for ngMaterial Layout attribute directives\r\n // This provides easy translation to switch ngMaterial attribute selectors to\r\n // CLASS selectors and directives; which has huge performance implications\r\n // for IE Browsers\r\n //\r\n // *********************************************************************************\r\n\r\n /**\r\n * Creates a directive registration function where a possible dynamic attribute\r\n * value will be observed/watched.\r\n * @param {string} className attribute name; eg `layout-gt-md` with value =\"row\"\r\n */\r\n function attributeWithObserve(className) {\r\n return [\r\n \"$mdUtil\",\r\n \"$interpolate\",\r\n \"$log\",\r\n function(_$mdUtil_, _$interpolate_, _$log_) {\r\n $mdUtil = _$mdUtil_;\r\n $interpolate = _$interpolate_;\r\n $log = _$log_;\r\n\r\n return {\r\n restrict: \"A\",\r\n compile: function(element, attr) {\r\n var linkFn;\r\n if (config.enabled) {\r\n // immediately replace static (non-interpolated) invalid values...\r\n\r\n validateAttributeUsage(className, attr, element, $log);\r\n\r\n validateAttributeValue(\r\n className,\r\n getNormalizedAttrValue(className, attr, \"\"),\r\n buildUpdateFn(element, className, attr)\r\n );\r\n\r\n linkFn = translateWithValueToCssClass;\r\n }\r\n\r\n // Use for postLink to account for transforms after ng-transclude.\r\n return linkFn || angular.noop;\r\n }\r\n };\r\n }\r\n ];\r\n\r\n /**\r\n * Add as transformed class selector(s), then\r\n * remove the deprecated attribute selector\r\n */\r\n function translateWithValueToCssClass(scope, element, attrs) {\r\n var updateFn = updateClassWithValue(element, className, attrs);\r\n var unwatch = attrs.$observe(attrs.$normalize(className), updateFn);\r\n\r\n updateFn(getNormalizedAttrValue(className, attrs, \"\"));\r\n scope.$on(\"$destroy\", function() {\r\n unwatch();\r\n });\r\n }\r\n }\r\n\r\n /**\r\n * Creates a registration function for ngMaterial Layout attribute directive.\r\n * This is a `simple` transpose of attribute usage to class usage; where we ignore\r\n * any attribute value\r\n */\r\n function attributeWithoutValue(className) {\r\n return [\r\n \"$mdUtil\",\r\n \"$interpolate\",\r\n \"$log\",\r\n function(_$mdUtil_, _$interpolate_, _$log_) {\r\n $mdUtil = _$mdUtil_;\r\n $interpolate = _$interpolate_;\r\n $log = _$log_;\r\n\r\n return {\r\n restrict: \"A\",\r\n compile: function(element, attr) {\r\n var linkFn;\r\n if (config.enabled) {\r\n // immediately replace static (non-interpolated) invalid values...\r\n\r\n validateAttributeValue(\r\n className,\r\n getNormalizedAttrValue(className, attr, \"\"),\r\n buildUpdateFn(element, className, attr)\r\n );\r\n\r\n translateToCssClass(null, element);\r\n\r\n // Use for postLink to account for transforms after ng-transclude.\r\n linkFn = translateToCssClass;\r\n }\r\n\r\n return linkFn || angular.noop;\r\n }\r\n };\r\n }\r\n ];\r\n\r\n /**\r\n * Add as transformed class selector, then\r\n * remove the deprecated attribute selector\r\n */\r\n function translateToCssClass(scope, element) {\r\n element.addClass(className);\r\n }\r\n }\r\n\r\n /**\r\n * After link-phase, do NOT remove deprecated layout attribute selector.\r\n * Instead watch the attribute so interpolated data-bindings to layout\r\n * selectors will continue to be supported.\r\n *\r\n * $observe() the className and update with new class (after removing the last one)\r\n *\r\n * e.g. `layout=\"{{layoutDemo.direction}}\"` will update...\r\n *\r\n * NOTE: The value must match one of the specified styles in the CSS.\r\n * For example `flex-gt-md=\"{{size}}` where `scope.size == 47` will NOT work since\r\n * only breakpoints for 0, 5, 10, 15... 100, 33, 34, 66, 67 are defined.\r\n *\r\n */\r\n function updateClassWithValue(element, className) {\r\n var lastClass;\r\n\r\n return function updateClassFn(newValue) {\r\n var value = validateAttributeValue(className, newValue || \"\");\r\n if (angular.isDefined(value)) {\r\n if (lastClass) element.removeClass(lastClass);\r\n lastClass = !value\r\n ? className\r\n : className + \"-\" + value.replace(WHITESPACE, \"-\");\r\n element.addClass(lastClass);\r\n }\r\n };\r\n }\r\n\r\n /**\r\n * Provide console warning that this layout attribute has been deprecated\r\n *\r\n */\r\n function warnAttrNotSupported(className) {\r\n var parts = className.split(\"-\");\r\n return [\r\n \"$log\",\r\n function($log) {\r\n $log.warn(\r\n className +\r\n \"has been deprecated. Please use a `\" +\r\n parts[0] +\r\n \"-gt-` variant.\"\r\n );\r\n return angular.noop;\r\n }\r\n ];\r\n }\r\n\r\n /**\r\n * Centralize warnings for known flexbox issues (especially IE-related issues)\r\n */\r\n function validateAttributeUsage(className, attr, element, $log) {\r\n var message, usage, url;\r\n var nodeName = element[0].nodeName.toLowerCase();\r\n\r\n switch (className.replace(SUFFIXES, \"\")) {\r\n case \"flex\":\r\n if (nodeName == \"md-button\" || nodeName == \"fieldset\") {\r\n // @see https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers\r\n // Use
wrapper inside (preferred) or outside\r\n\r\n usage = \"<\" + nodeName + \" \" + className + \">\";\r\n url =\r\n \"https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers\";\r\n message =\r\n \"Markup '{0}' may not work as expected in IE Browsers. Consult '{1}' for details.\";\r\n\r\n $log.warn($mdUtil.supplant(message, [usage, url]));\r\n }\r\n }\r\n }\r\n\r\n /**\r\n * For the Layout attribute value, validate or replace with default\r\n * fallback value\r\n */\r\n function validateAttributeValue(className, value, updateFn) {\r\n var origValue = value;\r\n\r\n if (!needsInterpolation(value)) {\r\n switch (className.replace(SUFFIXES, \"\")) {\r\n case \"layout\":\r\n if (!findIn(value, LAYOUT_OPTIONS)) {\r\n value = LAYOUT_OPTIONS[0]; // 'row';\r\n }\r\n break;\r\n\r\n case \"flex\":\r\n if (!findIn(value, FLEX_OPTIONS)) {\r\n if (isNaN(value)) {\r\n value = \"\";\r\n }\r\n }\r\n break;\r\n\r\n case \"flex-offset\":\r\n case \"flex-order\":\r\n if (!value || isNaN(+value)) {\r\n value = \"0\";\r\n }\r\n break;\r\n\r\n case \"layout-align\":\r\n var axis = extractAlignAxis(value);\r\n value = $mdUtil.supplant(\"{main}-{cross}\", axis);\r\n break;\r\n\r\n case \"layout-padding\":\r\n case \"layout-margin\":\r\n case \"layout-fill\":\r\n case \"layout-wrap\":\r\n case \"layout-nowrap\":\r\n case \"layout-nowrap\":\r\n value = \"\";\r\n break;\r\n }\r\n\r\n if (value != origValue) {\r\n (updateFn || angular.noop)(value);\r\n }\r\n }\r\n\r\n return value;\r\n }\r\n\r\n /**\r\n * Replace current attribute value with fallback value\r\n */\r\n function buildUpdateFn(element, className, attrs) {\r\n return function updateAttrValue(fallback) {\r\n if (!needsInterpolation(fallback)) {\r\n // Do not modify the element's attribute value; so\r\n // uses '' will not\r\n // be affected. Just update the attrs value.\r\n attrs[attrs.$normalize(className)] = fallback;\r\n }\r\n };\r\n }\r\n\r\n /**\r\n * See if the original value has interpolation symbols:\r\n * e.g. flex-gt-md=\"{{triggerPoint}}\"\r\n */\r\n function needsInterpolation(value) {\r\n return (value || \"\").indexOf($interpolate.startSymbol()) > -1;\r\n }\r\n\r\n function getNormalizedAttrValue(className, attrs, defaultVal) {\r\n var normalizedAttr = attrs.$normalize(className);\r\n return attrs[normalizedAttr]\r\n ? attrs[normalizedAttr].replace(WHITESPACE, \"-\")\r\n : defaultVal || null;\r\n }\r\n\r\n function findIn(item, list, replaceWith) {\r\n item =\r\n replaceWith && item ? item.replace(WHITESPACE, replaceWith) : item;\r\n\r\n var found = false;\r\n if (item) {\r\n list.forEach(function(it) {\r\n it = replaceWith ? it.replace(WHITESPACE, replaceWith) : it;\r\n found = found || it === item;\r\n });\r\n }\r\n return found;\r\n }\r\n\r\n function extractAlignAxis(attrValue) {\r\n var axis = {\r\n main: \"start\",\r\n cross: \"stretch\"\r\n },\r\n values;\r\n\r\n attrValue = attrValue || \"\";\r\n\r\n if (attrValue.indexOf(\"-\") === 0 || attrValue.indexOf(\" \") === 0) {\r\n // For missing main-axis values\r\n attrValue = \"none\" + attrValue;\r\n }\r\n\r\n values = attrValue\r\n .toLowerCase()\r\n .trim()\r\n .replace(WHITESPACE, \"-\")\r\n .split(\"-\");\r\n if (values.length && values[0] === \"space\") {\r\n // for main-axis values of \"space-around\" or \"space-between\"\r\n values = [values[0] + \"-\" + values[1], values[2]];\r\n }\r\n\r\n if (values.length > 0) axis.main = values[0] || axis.main;\r\n if (values.length > 1) axis.cross = values[1] || axis.cross;\r\n\r\n if (ALIGNMENT_MAIN_AXIS.indexOf(axis.main) < 0) axis.main = \"start\";\r\n if (ALIGNMENT_CROSS_AXIS.indexOf(axis.cross) < 0)\r\n axis.cross = \"stretch\";\r\n\r\n return axis;\r\n }\r\n })();\r\n })();\r\n (function() {\r\n \"use strict\";\r\n\r\n /**\r\n * @ngdoc service\r\n * @name $$mdMeta\r\n * @module material.core.meta\r\n *\r\n * @description\r\n *\r\n * A provider and a service that simplifies meta tags access\r\n *\r\n * Note: This is intended only for use with dynamic meta tags such as browser color and title.\r\n * Tags that are only processed when the page is rendered (such as `charset`, and `http-equiv`)\r\n * will not work since `$$mdMeta` adds the tags after the page has already been loaded.\r\n *\r\n * ```js\r\n * app.config(function($$mdMetaProvider) {\r\n * var removeMeta = $$mdMetaProvider.setMeta('meta-name', 'content');\r\n * var metaValue = $$mdMetaProvider.getMeta('meta-name'); // -> 'content'\r\n *\r\n * removeMeta();\r\n * });\r\n *\r\n * app.controller('myController', function($$mdMeta) {\r\n * var removeMeta = $$mdMeta.setMeta('meta-name', 'content');\r\n * var metaValue = $$mdMeta.getMeta('meta-name'); // -> 'content'\r\n *\r\n * removeMeta();\r\n * });\r\n * ```\r\n *\r\n * @returns {$$mdMeta.$service}\r\n *\r\n */\r\n angular.module(\"material.core.meta\", []).provider(\"$$mdMeta\", function() {\r\n var head = angular.element(document.head);\r\n var metaElements = {};\r\n\r\n /**\r\n * Checks if the requested element was written manually and maps it\r\n *\r\n * @param {string} name meta tag 'name' attribute value\r\n * @returns {boolean} returns true if there is an element with the requested name\r\n */\r\n function mapExistingElement(name) {\r\n if (metaElements[name]) {\r\n return true;\r\n }\r\n\r\n var element = document.getElementsByName(name)[0];\r\n\r\n if (!element) {\r\n return false;\r\n }\r\n\r\n metaElements[name] = angular.element(element);\r\n\r\n return true;\r\n }\r\n\r\n /**\r\n * @ngdoc method\r\n * @name $$mdMeta#setMeta\r\n *\r\n * @description\r\n * Creates meta element with the 'name' and 'content' attributes,\r\n * if the meta tag is already created than we replace the 'content' value\r\n *\r\n * @param {string} name meta tag 'name' attribute value\r\n * @param {string} content meta tag 'content' attribute value\r\n * @returns {function} remove function\r\n *\r\n */\r\n function setMeta(name, content) {\r\n mapExistingElement(name);\r\n\r\n if (!metaElements[name]) {\r\n var newMeta = angular.element(\r\n ''\r\n );\r\n head.append(newMeta);\r\n metaElements[name] = newMeta;\r\n } else {\r\n metaElements[name].attr(\"content\", content);\r\n }\r\n\r\n return function() {\r\n metaElements[name].attr(\"content\", \"\");\r\n metaElements[name].remove();\r\n delete metaElements[name];\r\n };\r\n }\r\n\r\n /**\r\n * @ngdoc method\r\n * @name $$mdMeta#getMeta\r\n *\r\n * @description\r\n * Gets the 'content' attribute value of the wanted meta element\r\n *\r\n * @param {string} name meta tag 'name' attribute value\r\n * @returns {string} content attribute value\r\n */\r\n function getMeta(name) {\r\n if (!mapExistingElement(name)) {\r\n throw Error(\r\n \"$$mdMeta: could not find a meta tag with the name '\" + name + \"'\"\r\n );\r\n }\r\n\r\n return metaElements[name].attr(\"content\");\r\n }\r\n\r\n var module = {\r\n setMeta: setMeta,\r\n getMeta: getMeta\r\n };\r\n\r\n return angular.extend({}, module, {\r\n $get: function() {\r\n return module;\r\n }\r\n });\r\n });\r\n })();\r\n (function() {\r\n \"use strict\";\r\n\r\n /**\r\n * @ngdoc module\r\n * @name material.core.componentRegistry\r\n *\r\n * @description\r\n * A component instance registration service.\r\n * Note: currently this as a private service in the SideNav component.\r\n */\r\n ComponentRegistry.$inject = [\"$log\", \"$q\"];\r\n angular\r\n .module(\"material.core\")\r\n .factory(\"$mdComponentRegistry\", ComponentRegistry);\r\n\r\n /*\r\n * @private\r\n * @ngdoc factory\r\n * @name ComponentRegistry\r\n * @module material.core.componentRegistry\r\n *\r\n */\r\n function ComponentRegistry($log, $q) {\r\n var self;\r\n var instances = [];\r\n var pendings = {};\r\n\r\n return (self = {\r\n /**\r\n * Used to print an error when an instance for a handle isn't found.\r\n */\r\n notFoundError: function(handle, msgContext) {\r\n $log.error(\r\n (msgContext || \"\") + \"No instance found for handle\",\r\n handle\r\n );\r\n },\r\n /**\r\n * Return all registered instances as an array.\r\n */\r\n getInstances: function() {\r\n return instances;\r\n },\r\n\r\n /**\r\n * Get a registered instance.\r\n * @param handle the String handle to look up for a registered instance.\r\n */\r\n get: function(handle) {\r\n if (!isValidID(handle)) return null;\r\n\r\n var i, j, instance;\r\n for (i = 0, j = instances.length; i < j; i++) {\r\n instance = instances[i];\r\n if (instance.$$mdHandle === handle) {\r\n return instance;\r\n }\r\n }\r\n return null;\r\n },\r\n\r\n /**\r\n * Register an instance.\r\n * @param instance the instance to register\r\n * @param handle the handle to identify the instance under.\r\n */\r\n register: function(instance, handle) {\r\n if (!handle) return angular.noop;\r\n\r\n instance.$$mdHandle = handle;\r\n instances.push(instance);\r\n resolveWhen();\r\n\r\n return deregister;\r\n\r\n /**\r\n * Remove registration for an instance\r\n */\r\n function deregister() {\r\n var index = instances.indexOf(instance);\r\n if (index !== -1) {\r\n instances.splice(index, 1);\r\n }\r\n }\r\n\r\n /**\r\n * Resolve any pending promises for this instance\r\n */\r\n function resolveWhen() {\r\n var dfd = pendings[handle];\r\n if (dfd) {\r\n dfd.forEach(function(promise) {\r\n promise.resolve(instance);\r\n });\r\n delete pendings[handle];\r\n }\r\n }\r\n },\r\n\r\n /**\r\n * Async accessor to registered component instance\r\n * If not available then a promise is created to notify\r\n * all listeners when the instance is registered.\r\n */\r\n when: function(handle) {\r\n if (isValidID(handle)) {\r\n var deferred = $q.defer();\r\n var instance = self.get(handle);\r\n\r\n if (instance) {\r\n deferred.resolve(instance);\r\n } else {\r\n if (pendings[handle] === undefined) {\r\n pendings[handle] = [];\r\n }\r\n pendings[handle].push(deferred);\r\n }\r\n\r\n return deferred.promise;\r\n }\r\n return $q.reject(\"Invalid `md-component-id` value.\");\r\n }\r\n });\r\n\r\n function isValidID(handle) {\r\n return handle && handle !== \"\";\r\n }\r\n }\r\n })();\r\n (function() {\r\n \"use strict\";\r\n\r\n (function() {\r\n \"use strict\";\r\n\r\n /**\r\n * @ngdoc service\r\n * @name $mdButtonInkRipple\r\n * @module material.core\r\n *\r\n * @description\r\n * Provides ripple effects for md-button. See $mdInkRipple service for all possible configuration options.\r\n *\r\n * @param {object=} scope Scope within the current context\r\n * @param {object=} element The element the ripple effect should be applied to\r\n * @param {object=} options (Optional) Configuration options to override the default ripple configuration\r\n */\r\n\r\n MdButtonInkRipple.$inject = [\"$mdInkRipple\"];\r\n angular\r\n .module(\"material.core\")\r\n .factory(\"$mdButtonInkRipple\", MdButtonInkRipple);\r\n\r\n function MdButtonInkRipple($mdInkRipple) {\r\n return {\r\n attach: function attachRipple(scope, element, options) {\r\n options = angular.extend(optionsForElement(element), options);\r\n\r\n return $mdInkRipple.attach(scope, element, options);\r\n }\r\n };\r\n\r\n function optionsForElement(element) {\r\n if (element.hasClass(\"md-icon-button\")) {\r\n return {\r\n isMenuItem: element.hasClass(\"md-menu-item\"),\r\n fitRipple: true,\r\n center: true\r\n };\r\n } else {\r\n return {\r\n isMenuItem: element.hasClass(\"md-menu-item\"),\r\n dimBackground: true\r\n };\r\n }\r\n }\r\n }\r\n })();\r\n })();\r\n (function() {\r\n \"use strict\";\r\n\r\n (function() {\r\n \"use strict\";\r\n\r\n /**\r\n * @ngdoc service\r\n * @name $mdCheckboxInkRipple\r\n * @module material.core\r\n *\r\n * @description\r\n * Provides ripple effects for md-checkbox. See $mdInkRipple service for all possible configuration options.\r\n *\r\n * @param {object=} scope Scope within the current context\r\n * @param {object=} element The element the ripple effect should be applied to\r\n * @param {object=} options (Optional) Configuration options to override the defaultripple configuration\r\n */\r\n\r\n MdCheckboxInkRipple.$inject = [\"$mdInkRipple\"];\r\n angular\r\n .module(\"material.core\")\r\n .factory(\"$mdCheckboxInkRipple\", MdCheckboxInkRipple);\r\n\r\n function MdCheckboxInkRipple($mdInkRipple) {\r\n return {\r\n attach: attach\r\n };\r\n\r\n function attach(scope, element, options) {\r\n return $mdInkRipple.attach(\r\n scope,\r\n element,\r\n angular.extend(\r\n {\r\n center: true,\r\n dimBackground: false,\r\n fitRipple: true\r\n },\r\n options\r\n )\r\n );\r\n }\r\n }\r\n })();\r\n })();\r\n (function() {\r\n \"use strict\";\r\n\r\n (function() {\r\n \"use strict\";\r\n\r\n /**\r\n * @ngdoc service\r\n * @name $mdListInkRipple\r\n * @module material.core\r\n *\r\n * @description\r\n * Provides ripple effects for md-list. See $mdInkRipple service for all possible configuration options.\r\n *\r\n * @param {object=} scope Scope within the current context\r\n * @param {object=} element The element the ripple effect should be applied to\r\n * @param {object=} options (Optional) Configuration options to override the defaultripple configuration\r\n */\r\n\r\n MdListInkRipple.$inject = [\"$mdInkRipple\"];\r\n angular\r\n .module(\"material.core\")\r\n .factory(\"$mdListInkRipple\", MdListInkRipple);\r\n\r\n function MdListInkRipple($mdInkRipple) {\r\n return {\r\n attach: attach\r\n };\r\n\r\n function attach(scope, element, options) {\r\n return $mdInkRipple.attach(\r\n scope,\r\n element,\r\n angular.extend(\r\n {\r\n center: false,\r\n dimBackground: true,\r\n outline: false,\r\n rippleSize: \"full\"\r\n },\r\n options\r\n )\r\n );\r\n }\r\n }\r\n })();\r\n })();\r\n (function() {\r\n \"use strict\";\r\n\r\n /**\r\n * @ngdoc module\r\n * @name material.core.ripple\r\n * @description\r\n * Ripple\r\n */\r\n InkRippleCtrl.$inject = [\r\n \"$scope\",\r\n \"$element\",\r\n \"rippleOptions\",\r\n \"$window\",\r\n \"$timeout\",\r\n \"$mdUtil\",\r\n \"$mdColorUtil\"\r\n ];\r\n InkRippleDirective.$inject = [\"$mdButtonInkRipple\", \"$mdCheckboxInkRipple\"];\r\n angular\r\n .module(\"material.core\")\r\n .provider(\"$mdInkRipple\", InkRippleProvider)\r\n .directive(\"mdInkRipple\", InkRippleDirective)\r\n .directive(\"mdNoInk\", attrNoDirective)\r\n .directive(\"mdNoBar\", attrNoDirective)\r\n .directive(\"mdNoStretch\", attrNoDirective);\r\n\r\n var DURATION = 450;\r\n\r\n /**\r\n * @ngdoc directive\r\n * @name mdInkRipple\r\n * @module material.core.ripple\r\n *\r\n * @description\r\n * The `md-ink-ripple` directive allows you to specify the ripple color or id a ripple is allowed.\r\n *\r\n * @param {string|boolean} md-ink-ripple A color string `#FF0000` or boolean (`false` or `0`) for preventing ripple\r\n *\r\n * @usage\r\n * ### String values\r\n * \r\n * \r\n * Ripples in red\r\n * \r\n *\r\n * \r\n * Not rippling\r\n * \r\n * \r\n *\r\n * ### Interpolated values\r\n * \r\n * \r\n * Ripples with the return value of 'randomColor' function\r\n * \r\n *\r\n * \r\n * Ripples if 'canRipple' function return value is not 'false' or '0'\r\n * \r\n * \r\n */\r\n function InkRippleDirective($mdButtonInkRipple, $mdCheckboxInkRipple) {\r\n return {\r\n controller: angular.noop,\r\n link: function(scope, element, attr) {\r\n attr.hasOwnProperty(\"mdInkRippleCheckbox\")\r\n ? $mdCheckboxInkRipple.attach(scope, element)\r\n : $mdButtonInkRipple.attach(scope, element);\r\n }\r\n };\r\n }\r\n\r\n /**\r\n * @ngdoc service\r\n * @name $mdInkRipple\r\n * @module material.core.ripple\r\n *\r\n * @description\r\n * `$mdInkRipple` is a service for adding ripples to any element\r\n *\r\n * @usage\r\n * \r\n * app.factory('$myElementInkRipple', function($mdInkRipple) {\r\n * return {\r\n * attach: function (scope, element, options) {\r\n * return $mdInkRipple.attach(scope, element, angular.extend({\r\n * center: false,\r\n * dimBackground: true\r\n * }, options));\r\n * }\r\n * };\r\n * });\r\n *\r\n * app.controller('myController', function ($scope, $element, $myElementInkRipple) {\r\n * $scope.onClick = function (ev) {\r\n * $myElementInkRipple.attach($scope, angular.element(ev.target), { center: true });\r\n * }\r\n * });\r\n * \r\n *\r\n * ### Disabling ripples globally\r\n * If you want to disable ink ripples globally, for all components, you can call the\r\n * `disableInkRipple` method in your app's config.\r\n *\r\n * \r\n * app.config(function ($mdInkRippleProvider) {\r\n * $mdInkRippleProvider.disableInkRipple();\r\n * });\r\n */\r\n\r\n function InkRippleProvider() {\r\n var isDisabledGlobally = false;\r\n\r\n return {\r\n disableInkRipple: disableInkRipple,\r\n $get: [\r\n \"$injector\",\r\n function($injector) {\r\n return { attach: attach };\r\n\r\n /**\r\n * @ngdoc method\r\n * @name $mdInkRipple#attach\r\n *\r\n * @description\r\n * Attaching given scope, element and options to inkRipple controller\r\n *\r\n * @param {object=} scope Scope within the current context\r\n * @param {object=} element The element the ripple effect should be applied to\r\n * @param {object=} options (Optional) Configuration options to override the defaultRipple configuration\r\n * * `center` - Whether the ripple should start from the center of the container element\r\n * * `dimBackground` - Whether the background should be dimmed with the ripple color\r\n * * `colorElement` - The element the ripple should take its color from, defined by css property `color`\r\n * * `fitRipple` - Whether the ripple should fill the element\r\n */\r\n function attach(scope, element, options) {\r\n if (isDisabledGlobally || element.controller(\"mdNoInk\"))\r\n return angular.noop;\r\n return $injector.instantiate(InkRippleCtrl, {\r\n $scope: scope,\r\n $element: element,\r\n rippleOptions: options\r\n });\r\n }\r\n }\r\n ]\r\n };\r\n\r\n /**\r\n * @ngdoc method\r\n * @name $mdInkRipple#disableInkRipple\r\n *\r\n * @description\r\n * A config-time method that, when called, disables ripples globally.\r\n */\r\n function disableInkRipple() {\r\n isDisabledGlobally = true;\r\n }\r\n }\r\n\r\n /**\r\n * Controller used by the ripple service in order to apply ripples\r\n * @ngInject\r\n */\r\n function InkRippleCtrl(\r\n $scope,\r\n $element,\r\n rippleOptions,\r\n $window,\r\n $timeout,\r\n $mdUtil,\r\n $mdColorUtil\r\n ) {\r\n this.$window = $window;\r\n this.$timeout = $timeout;\r\n this.$mdUtil = $mdUtil;\r\n this.$mdColorUtil = $mdColorUtil;\r\n this.$scope = $scope;\r\n this.$element = $element;\r\n this.options = rippleOptions;\r\n this.mousedown = false;\r\n this.ripples = [];\r\n this.timeout = null; // Stores a reference to the most-recent ripple timeout\r\n this.lastRipple = null;\r\n\r\n $mdUtil.valueOnUse(this, \"container\", this.createContainer);\r\n\r\n this.$element.addClass(\"md-ink-ripple\");\r\n\r\n // attach method for unit tests\r\n ($element.controller(\"mdInkRipple\") || {}).createRipple = angular.bind(\r\n this,\r\n this.createRipple\r\n );\r\n ($element.controller(\"mdInkRipple\") || {}).setColor = angular.bind(\r\n this,\r\n this.color\r\n );\r\n\r\n this.bindEvents();\r\n }\r\n\r\n /**\r\n * Either remove or unlock any remaining ripples when the user mouses off of the element (either by\r\n * mouseup or mouseleave event)\r\n */\r\n function autoCleanup(self, cleanupFn) {\r\n if (self.mousedown || self.lastRipple) {\r\n self.mousedown = false;\r\n self.$mdUtil.nextTick(angular.bind(self, cleanupFn), false);\r\n }\r\n }\r\n\r\n /**\r\n * Returns the color that the ripple should be (either based on CSS or hard-coded)\r\n * @returns {string}\r\n */\r\n InkRippleCtrl.prototype.color = function(value) {\r\n var self = this;\r\n\r\n // If assigning a color value, apply it to background and the ripple color\r\n if (angular.isDefined(value)) {\r\n self._color = self._parseColor(value);\r\n }\r\n\r\n // If color lookup, use assigned, defined, or inherited\r\n return (\r\n self._color ||\r\n self._parseColor(self.inkRipple()) ||\r\n self._parseColor(getElementColor())\r\n );\r\n\r\n /**\r\n * Finds the color element and returns its text color for use as default ripple color\r\n * @returns {string}\r\n */\r\n function getElementColor() {\r\n var items =\r\n self.options && self.options.colorElement\r\n ? self.options.colorElement\r\n : [];\r\n var elem = items.length ? items[0] : self.$element[0];\r\n\r\n return elem ? self.$window.getComputedStyle(elem).color : \"rgb(0,0,0)\";\r\n }\r\n };\r\n\r\n /**\r\n * Updating the ripple colors based on the current inkRipple value\r\n * or the element's computed style color\r\n */\r\n InkRippleCtrl.prototype.calculateColor = function() {\r\n return this.color();\r\n };\r\n\r\n /**\r\n * Takes a string color and converts it to RGBA format\r\n * @param color {string}\r\n * @param [multiplier] {int}\r\n * @returns {string}\r\n */\r\n\r\n InkRippleCtrl.prototype._parseColor = function parseColor(\r\n color,\r\n multiplier\r\n ) {\r\n multiplier = multiplier || 1;\r\n var colorUtil = this.$mdColorUtil;\r\n\r\n if (!color) return;\r\n if (color.indexOf(\"rgba\") === 0)\r\n return color.replace(\r\n /\\d?\\.?\\d*\\s*\\)\\s*$/,\r\n (0.1 * multiplier).toString() + \")\"\r\n );\r\n if (color.indexOf(\"rgb\") === 0) return colorUtil.rgbToRgba(color);\r\n if (color.indexOf(\"#\") === 0) return colorUtil.hexToRgba(color);\r\n };\r\n\r\n /**\r\n * Binds events to the root element for\r\n */\r\n InkRippleCtrl.prototype.bindEvents = function() {\r\n this.$element.on(\"mousedown\", angular.bind(this, this.handleMousedown));\r\n this.$element.on(\r\n \"mouseup touchend\",\r\n angular.bind(this, this.handleMouseup)\r\n );\r\n this.$element.on(\"mouseleave\", angular.bind(this, this.handleMouseup));\r\n this.$element.on(\"touchmove\", angular.bind(this, this.handleTouchmove));\r\n };\r\n\r\n /**\r\n * Create a new ripple on every mousedown event from the root element\r\n * @param event {MouseEvent}\r\n */\r\n InkRippleCtrl.prototype.handleMousedown = function(event) {\r\n if (this.mousedown) return;\r\n\r\n // When jQuery is loaded, we have to get the original event\r\n if (event.hasOwnProperty(\"originalEvent\")) event = event.originalEvent;\r\n this.mousedown = true;\r\n if (this.options.center) {\r\n this.createRipple(\r\n this.container.prop(\"clientWidth\") / 2,\r\n this.container.prop(\"clientWidth\") / 2\r\n );\r\n } else {\r\n // We need to calculate the relative coordinates if the target is a sublayer of the ripple element\r\n if (event.srcElement !== this.$element[0]) {\r\n var layerRect = this.$element[0].getBoundingClientRect();\r\n var layerX = event.clientX - layerRect.left;\r\n var layerY = event.clientY - layerRect.top;\r\n\r\n this.createRipple(layerX, layerY);\r\n } else {\r\n this.createRipple(event.offsetX, event.offsetY);\r\n }\r\n }\r\n };\r\n\r\n /**\r\n * Either remove or unlock any remaining ripples when the user mouses off of the element (either by\r\n * mouseup, touchend or mouseleave event)\r\n */\r\n InkRippleCtrl.prototype.handleMouseup = function() {\r\n autoCleanup(this, this.clearRipples);\r\n };\r\n\r\n /**\r\n * Either remove or unlock any remaining ripples when the user mouses off of the element (by\r\n * touchmove)\r\n */\r\n InkRippleCtrl.prototype.handleTouchmove = function() {\r\n autoCleanup(this, this.deleteRipples);\r\n };\r\n\r\n /**\r\n * Cycles through all ripples and attempts to remove them.\r\n */\r\n InkRippleCtrl.prototype.deleteRipples = function() {\r\n for (var i = 0; i < this.ripples.length; i++) {\r\n this.ripples[i].remove();\r\n }\r\n };\r\n\r\n /**\r\n * Cycles through all ripples and attempts to remove them with fade.\r\n * Depending on logic within `fadeInComplete`, some removals will be postponed.\r\n */\r\n InkRippleCtrl.prototype.clearRipples = function() {\r\n for (var i = 0; i < this.ripples.length; i++) {\r\n this.fadeInComplete(this.ripples[i]);\r\n }\r\n };\r\n\r\n /**\r\n * Creates the ripple container element\r\n * @returns {*}\r\n */\r\n InkRippleCtrl.prototype.createContainer = function() {\r\n var container = angular.element(\r\n ''\r\n );\r\n this.$element.append(container);\r\n return container;\r\n };\r\n\r\n InkRippleCtrl.prototype.clearTimeout = function() {\r\n if (this.timeout) {\r\n this.$timeout.cancel(this.timeout);\r\n this.timeout = null;\r\n }\r\n };\r\n\r\n InkRippleCtrl.prototype.isRippleAllowed = function() {\r\n var element = this.$element[0];\r\n do {\r\n if (!element.tagName || element.tagName === \"BODY\") break;\r\n\r\n if (element && angular.isFunction(element.hasAttribute)) {\r\n if (element.hasAttribute(\"disabled\")) return false;\r\n if (this.inkRipple() === \"false\" || this.inkRipple() === \"0\")\r\n return false;\r\n }\r\n } while ((element = element.parentNode));\r\n return true;\r\n };\r\n\r\n /**\r\n * The attribute `md-ink-ripple` may be a static or interpolated\r\n * color value OR a boolean indicator (used to disable ripples)\r\n */\r\n InkRippleCtrl.prototype.inkRipple = function() {\r\n return this.$element.attr(\"md-ink-ripple\");\r\n };\r\n\r\n /**\r\n * Creates a new ripple and adds it to the container. Also tracks ripple in `this.ripples`.\r\n * @param left\r\n * @param top\r\n */\r\n InkRippleCtrl.prototype.createRipple = function(left, top) {\r\n if (!this.isRippleAllowed()) return;\r\n\r\n var ctrl = this;\r\n var colorUtil = ctrl.$mdColorUtil;\r\n var ripple = angular.element('');\r\n var width = this.$element.prop(\"clientWidth\");\r\n var height = this.$element.prop(\"clientHeight\");\r\n var x = Math.max(Math.abs(width - left), left) * 2;\r\n var y = Math.max(Math.abs(height - top), top) * 2;\r\n var size = getSize(this.options.fitRipple, x, y);\r\n var color = this.calculateColor();\r\n\r\n ripple.css({\r\n left: left + \"px\",\r\n top: top + \"px\",\r\n background: \"black\",\r\n width: size + \"px\",\r\n height: size + \"px\",\r\n backgroundColor: colorUtil.rgbaToRgb(color),\r\n borderColor: colorUtil.rgbaToRgb(color)\r\n });\r\n this.lastRipple = ripple;\r\n\r\n // we only want one timeout to be running at a time\r\n this.clearTimeout();\r\n this.timeout = this.$timeout(\r\n function() {\r\n ctrl.clearTimeout();\r\n if (!ctrl.mousedown) ctrl.fadeInComplete(ripple);\r\n },\r\n DURATION * 0.35,\r\n false\r\n );\r\n\r\n if (this.options.dimBackground)\r\n this.container.css({ backgroundColor: color });\r\n this.container.append(ripple);\r\n this.ripples.push(ripple);\r\n ripple.addClass(\"md-ripple-placed\");\r\n\r\n this.$mdUtil.nextTick(function() {\r\n ripple.addClass(\"md-ripple-scaled md-ripple-active\");\r\n ctrl.$timeout(\r\n function() {\r\n ctrl.clearRipples();\r\n },\r\n DURATION,\r\n false\r\n );\r\n }, false);\r\n\r\n function getSize(fit, x, y) {\r\n return fit\r\n ? Math.max(x, y)\r\n : Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));\r\n }\r\n };\r\n\r\n /**\r\n * After fadeIn finishes, either kicks off the fade-out animation or queues the element for removal on mouseup\r\n * @param ripple\r\n */\r\n InkRippleCtrl.prototype.fadeInComplete = function(ripple) {\r\n if (this.lastRipple === ripple) {\r\n if (!this.timeout && !this.mousedown) {\r\n this.removeRipple(ripple);\r\n }\r\n } else {\r\n this.removeRipple(ripple);\r\n }\r\n };\r\n\r\n /**\r\n * Kicks off the animation for removing a ripple\r\n * @param ripple {Element}\r\n */\r\n InkRippleCtrl.prototype.removeRipple = function(ripple) {\r\n var ctrl = this;\r\n var index = this.ripples.indexOf(ripple);\r\n if (index < 0) return;\r\n this.ripples.splice(this.ripples.indexOf(ripple), 1);\r\n ripple.removeClass(\"md-ripple-active\");\r\n ripple.addClass(\"md-ripple-remove\");\r\n if (this.ripples.length === 0)\r\n this.container.css({ backgroundColor: \"\" });\r\n // use a 2-second timeout in order to allow for the animation to finish\r\n // we don't actually care how long the animation takes\r\n this.$timeout(\r\n function() {\r\n ctrl.fadeOutComplete(ripple);\r\n },\r\n DURATION,\r\n false\r\n );\r\n };\r\n\r\n /**\r\n * Removes the provided ripple from the DOM\r\n * @param ripple\r\n */\r\n InkRippleCtrl.prototype.fadeOutComplete = function(ripple) {\r\n ripple.remove();\r\n this.lastRipple = null;\r\n };\r\n\r\n /**\r\n * Used to create an empty directive. This is used to track flag-directives whose children may have\r\n * functionality based on them.\r\n *\r\n * Example: `md-no-ink` will potentially be used by all child directives.\r\n */\r\n function attrNoDirective() {\r\n return { controller: angular.noop };\r\n }\r\n })();\r\n (function() {\r\n \"use strict\";\r\n\r\n (function() {\r\n \"use strict\";\r\n\r\n /**\r\n * @ngdoc service\r\n * @name $mdTabInkRipple\r\n * @module material.core\r\n *\r\n * @description\r\n * Provides ripple effects for md-tabs. See $mdInkRipple service for all possible configuration options.\r\n *\r\n * @param {object=} scope Scope within the current context\r\n * @param {object=} element The element the ripple effect should be applied to\r\n * @param {object=} options (Optional) Configuration options to override the defaultripple configuration\r\n */\r\n\r\n MdTabInkRipple.$inject = [\"$mdInkRipple\"];\r\n angular\r\n .module(\"material.core\")\r\n .factory(\"$mdTabInkRipple\", MdTabInkRipple);\r\n\r\n function MdTabInkRipple($mdInkRipple) {\r\n return {\r\n attach: attach\r\n };\r\n\r\n function attach(scope, element, options) {\r\n return $mdInkRipple.attach(\r\n scope,\r\n element,\r\n angular.extend(\r\n {\r\n center: false,\r\n dimBackground: true,\r\n outline: false,\r\n rippleSize: \"full\"\r\n },\r\n options\r\n )\r\n );\r\n }\r\n }\r\n })();\r\n })();\r\n (function() {\r\n \"use strict\";\r\n\r\n angular\r\n .module(\"material.core.theming.palette\", [])\r\n .constant(\"$mdColorPalette\", {\r\n red: {\r\n \"50\": \"#ffebee\",\r\n \"100\": \"#ffcdd2\",\r\n \"200\": \"#ef9a9a\",\r\n \"300\": \"#e57373\",\r\n \"400\": \"#ef5350\",\r\n \"500\": \"#f44336\",\r\n \"600\": \"#e53935\",\r\n \"700\": \"#d32f2f\",\r\n \"800\": \"#c62828\",\r\n \"900\": \"#b71c1c\",\r\n A100: \"#ff8a80\",\r\n A200: \"#ff5252\",\r\n A400: \"#ff1744\",\r\n A700: \"#d50000\",\r\n contrastDefaultColor: \"light\",\r\n contrastDarkColors: \"50 100 200 300 A100\",\r\n contrastStrongLightColors: \"400 500 600 700 A200 A400 A700\"\r\n },\r\n pink: {\r\n \"50\": \"#fce4ec\",\r\n \"100\": \"#f8bbd0\",\r\n \"200\": \"#f48fb1\",\r\n \"300\": \"#f06292\",\r\n \"400\": \"#ec407a\",\r\n \"500\": \"#e91e63\",\r\n \"600\": \"#d81b60\",\r\n \"700\": \"#c2185b\",\r\n \"800\": \"#ad1457\",\r\n \"900\": \"#880e4f\",\r\n A100: \"#ff80ab\",\r\n A200: \"#ff4081\",\r\n A400: \"#f50057\",\r\n A700: \"#c51162\",\r\n contrastDefaultColor: \"light\",\r\n contrastDarkColors: \"50 100 200 A100\",\r\n contrastStrongLightColors: \"500 600 A200 A400 A700\"\r\n },\r\n purple: {\r\n \"50\": \"#f3e5f5\",\r\n \"100\": \"#e1bee7\",\r\n \"200\": \"#ce93d8\",\r\n \"300\": \"#ba68c8\",\r\n \"400\": \"#ab47bc\",\r\n \"500\": \"#9c27b0\",\r\n \"600\": \"#8e24aa\",\r\n \"700\": \"#7b1fa2\",\r\n \"800\": \"#6a1b9a\",\r\n \"900\": \"#4a148c\",\r\n A100: \"#ea80fc\",\r\n A200: \"#e040fb\",\r\n A400: \"#d500f9\",\r\n A700: \"#aa00ff\",\r\n contrastDefaultColor: \"light\",\r\n contrastDarkColors: \"50 100 200 A100\",\r\n contrastStrongLightColors: \"300 400 A200 A400 A700\"\r\n },\r\n \"deep-purple\": {\r\n \"50\": \"#ede7f6\",\r\n \"100\": \"#d1c4e9\",\r\n \"200\": \"#b39ddb\",\r\n \"300\": \"#9575cd\",\r\n \"400\": \"#7e57c2\",\r\n \"500\": \"#673ab7\",\r\n \"600\": \"#5e35b1\",\r\n \"700\": \"#512da8\",\r\n \"800\": \"#4527a0\",\r\n \"900\": \"#311b92\",\r\n A100: \"#b388ff\",\r\n A200: \"#7c4dff\",\r\n A400: \"#651fff\",\r\n A700: \"#6200ea\",\r\n contrastDefaultColor: \"light\",\r\n contrastDarkColors: \"50 100 200 A100\",\r\n contrastStrongLightColors: \"300 400 A200\"\r\n },\r\n indigo: {\r\n \"50\": \"#e8eaf6\",\r\n \"100\": \"#c5cae9\",\r\n \"200\": \"#9fa8da\",\r\n \"300\": \"#7986cb\",\r\n \"400\": \"#5c6bc0\",\r\n \"500\": \"#3f51b5\",\r\n \"600\": \"#3949ab\",\r\n \"700\": \"#303f9f\",\r\n \"800\": \"#283593\",\r\n \"900\": \"#1a237e\",\r\n A100: \"#8c9eff\",\r\n A200: \"#536dfe\",\r\n A400: \"#3d5afe\",\r\n A700: \"#304ffe\",\r\n contrastDefaultColor: \"light\",\r\n contrastDarkColors: \"50 100 200 A100\",\r\n contrastStrongLightColors: \"300 400 A200 A400\"\r\n },\r\n blue: {\r\n \"50\": \"#e3f2fd\",\r\n \"100\": \"#bbdefb\",\r\n \"200\": \"#90caf9\",\r\n \"300\": \"#64b5f6\",\r\n \"400\": \"#42a5f5\",\r\n \"500\": \"#2196f3\",\r\n \"600\": \"#1e88e5\",\r\n \"700\": \"#1976d2\",\r\n \"800\": \"#1565c0\",\r\n \"900\": \"#0d47a1\",\r\n A100: \"#82b1ff\",\r\n A200: \"#448aff\",\r\n A400: \"#2979ff\",\r\n A700: \"#2962ff\",\r\n contrastDefaultColor: \"light\",\r\n contrastDarkColors: \"50 100 200 300 400 A100\",\r\n contrastStrongLightColors: \"500 600 700 A200 A400 A700\"\r\n },\r\n \"light-blue\": {\r\n \"50\": \"#e1f5fe\",\r\n \"100\": \"#b3e5fc\",\r\n \"200\": \"#81d4fa\",\r\n \"300\": \"#4fc3f7\",\r\n \"400\": \"#29b6f6\",\r\n \"500\": \"#03a9f4\",\r\n \"600\": \"#039be5\",\r\n \"700\": \"#0288d1\",\r\n \"800\": \"#0277bd\",\r\n \"900\": \"#01579b\",\r\n A100: \"#80d8ff\",\r\n A200: \"#40c4ff\",\r\n A400: \"#00b0ff\",\r\n A700: \"#0091ea\",\r\n contrastDefaultColor: \"dark\",\r\n contrastLightColors: \"600 700 800 900 A700\",\r\n contrastStrongLightColors: \"600 700 800 A700\"\r\n },\r\n cyan: {\r\n \"50\": \"#e0f7fa\",\r\n \"100\": \"#b2ebf2\",\r\n \"200\": \"#80deea\",\r\n \"300\": \"#4dd0e1\",\r\n \"400\": \"#26c6da\",\r\n \"500\": \"#00bcd4\",\r\n \"600\": \"#00acc1\",\r\n \"700\": \"#0097a7\",\r\n \"800\": \"#00838f\",\r\n \"900\": \"#006064\",\r\n A100: \"#84ffff\",\r\n A200: \"#18ffff\",\r\n A400: \"#00e5ff\",\r\n A700: \"#00b8d4\",\r\n contrastDefaultColor: \"dark\",\r\n contrastLightColors: \"700 800 900\",\r\n contrastStrongLightColors: \"700 800 900\"\r\n },\r\n teal: {\r\n \"50\": \"#e0f2f1\",\r\n \"100\": \"#b2dfdb\",\r\n \"200\": \"#80cbc4\",\r\n \"300\": \"#4db6ac\",\r\n \"400\": \"#26a69a\",\r\n \"500\": \"#009688\",\r\n \"600\": \"#00897b\",\r\n \"700\": \"#00796b\",\r\n \"800\": \"#00695c\",\r\n \"900\": \"#004d40\",\r\n A100: \"#a7ffeb\",\r\n A200: \"#64ffda\",\r\n A400: \"#1de9b6\",\r\n A700: \"#00bfa5\",\r\n contrastDefaultColor: \"dark\",\r\n contrastLightColors: \"500 600 700 800 900\",\r\n contrastStrongLightColors: \"500 600 700\"\r\n },\r\n green: {\r\n \"50\": \"#e8f5e9\",\r\n \"100\": \"#c8e6c9\",\r\n \"200\": \"#a5d6a7\",\r\n \"300\": \"#81c784\",\r\n \"400\": \"#66bb6a\",\r\n \"500\": \"#4caf50\",\r\n \"600\": \"#43a047\",\r\n \"700\": \"#388e3c\",\r\n \"800\": \"#2e7d32\",\r\n \"900\": \"#1b5e20\",\r\n A100: \"#b9f6ca\",\r\n A200: \"#69f0ae\",\r\n A400: \"#00e676\",\r\n A700: \"#00c853\",\r\n contrastDefaultColor: \"dark\",\r\n contrastLightColors: \"500 600 700 800 900\",\r\n contrastStrongLightColors: \"500 600 700\"\r\n },\r\n \"light-green\": {\r\n \"50\": \"#f1f8e9\",\r\n \"100\": \"#dcedc8\",\r\n \"200\": \"#c5e1a5\",\r\n \"300\": \"#aed581\",\r\n \"400\": \"#9ccc65\",\r\n \"500\": \"#8bc34a\",\r\n \"600\": \"#7cb342\",\r\n \"700\": \"#689f38\",\r\n \"800\": \"#558b2f\",\r\n \"900\": \"#33691e\",\r\n A100: \"#ccff90\",\r\n A200: \"#b2ff59\",\r\n A400: \"#76ff03\",\r\n A700: \"#64dd17\",\r\n contrastDefaultColor: \"dark\",\r\n contrastLightColors: \"700 800 900\",\r\n contrastStrongLightColors: \"700 800 900\"\r\n },\r\n lime: {\r\n \"50\": \"#f9fbe7\",\r\n \"100\": \"#f0f4c3\",\r\n \"200\": \"#e6ee9c\",\r\n \"300\": \"#dce775\",\r\n \"400\": \"#d4e157\",\r\n \"500\": \"#cddc39\",\r\n \"600\": \"#c0ca33\",\r\n \"700\": \"#afb42b\",\r\n \"800\": \"#9e9d24\",\r\n \"900\": \"#827717\",\r\n A100: \"#f4ff81\",\r\n A200: \"#eeff41\",\r\n A400: \"#c6ff00\",\r\n A700: \"#aeea00\",\r\n contrastDefaultColor: \"dark\",\r\n contrastLightColors: \"900\",\r\n contrastStrongLightColors: \"900\"\r\n },\r\n yellow: {\r\n \"50\": \"#fffde7\",\r\n \"100\": \"#fff9c4\",\r\n \"200\": \"#fff59d\",\r\n \"300\": \"#fff176\",\r\n \"400\": \"#ffee58\",\r\n \"500\": \"#ffeb3b\",\r\n \"600\": \"#fdd835\",\r\n \"700\": \"#fbc02d\",\r\n \"800\": \"#f9a825\",\r\n \"900\": \"#f57f17\",\r\n A100: \"#ffff8d\",\r\n A200: \"#ffff00\",\r\n A400: \"#ffea00\",\r\n A700: \"#ffd600\",\r\n contrastDefaultColor: \"dark\"\r\n },\r\n amber: {\r\n \"50\": \"#fff8e1\",\r\n \"100\": \"#ffecb3\",\r\n \"200\": \"#ffe082\",\r\n \"300\": \"#ffd54f\",\r\n \"400\": \"#ffca28\",\r\n \"500\": \"#ffc107\",\r\n \"600\": \"#ffb300\",\r\n \"700\": \"#ffa000\",\r\n \"800\": \"#ff8f00\",\r\n \"900\": \"#ff6f00\",\r\n A100: \"#ffe57f\",\r\n A200: \"#ffd740\",\r\n A400: \"#ffc400\",\r\n A700: \"#ffab00\",\r\n contrastDefaultColor: \"dark\"\r\n },\r\n orange: {\r\n \"50\": \"#fff3e0\",\r\n \"100\": \"#ffe0b2\",\r\n \"200\": \"#ffcc80\",\r\n \"300\": \"#ffb74d\",\r\n \"400\": \"#ffa726\",\r\n \"500\": \"#ff9800\",\r\n \"600\": \"#fb8c00\",\r\n \"700\": \"#f57c00\",\r\n \"800\": \"#ef6c00\",\r\n \"900\": \"#e65100\",\r\n A100: \"#ffd180\",\r\n A200: \"#ffab40\",\r\n A400: \"#ff9100\",\r\n A700: \"#ff6d00\",\r\n contrastDefaultColor: \"dark\",\r\n contrastLightColors: \"800 900\",\r\n contrastStrongLightColors: \"800 900\"\r\n },\r\n \"deep-orange\": {\r\n \"50\": \"#fbe9e7\",\r\n \"100\": \"#ffccbc\",\r\n \"200\": \"#ffab91\",\r\n \"300\": \"#ff8a65\",\r\n \"400\": \"#ff7043\",\r\n \"500\": \"#ff5722\",\r\n \"600\": \"#f4511e\",\r\n \"700\": \"#e64a19\",\r\n \"800\": \"#d84315\",\r\n \"900\": \"#bf360c\",\r\n A100: \"#ff9e80\",\r\n A200: \"#ff6e40\",\r\n A400: \"#ff3d00\",\r\n A700: \"#dd2c00\",\r\n contrastDefaultColor: \"light\",\r\n contrastDarkColors: \"50 100 200 300 400 A100 A200\",\r\n contrastStrongLightColors: \"500 600 700 800 900 A400 A700\"\r\n },\r\n brown: {\r\n \"50\": \"#efebe9\",\r\n \"100\": \"#d7ccc8\",\r\n \"200\": \"#bcaaa4\",\r\n \"300\": \"#a1887f\",\r\n \"400\": \"#8d6e63\",\r\n \"500\": \"#795548\",\r\n \"600\": \"#6d4c41\",\r\n \"700\": \"#5d4037\",\r\n \"800\": \"#4e342e\",\r\n \"900\": \"#3e2723\",\r\n A100: \"#d7ccc8\",\r\n A200: \"#bcaaa4\",\r\n A400: \"#8d6e63\",\r\n A700: \"#5d4037\",\r\n contrastDefaultColor: \"light\",\r\n contrastDarkColors: \"50 100 200 A100 A200\",\r\n contrastStrongLightColors: \"300 400\"\r\n },\r\n grey: {\r\n \"50\": \"#fafafa\",\r\n \"100\": \"#f5f5f5\",\r\n \"200\": \"#eeeeee\",\r\n \"300\": \"#e0e0e0\",\r\n \"400\": \"#bdbdbd\",\r\n \"500\": \"#9e9e9e\",\r\n \"600\": \"#757575\",\r\n \"700\": \"#616161\",\r\n \"800\": \"#424242\",\r\n \"900\": \"#212121\",\r\n A100: \"#ffffff\",\r\n A200: \"#000000\",\r\n A400: \"#303030\",\r\n A700: \"#616161\",\r\n contrastDefaultColor: \"dark\",\r\n contrastLightColors: \"600 700 800 900 A200 A400 A700\"\r\n },\r\n \"blue-grey\": {\r\n \"50\": \"#eceff1\",\r\n \"100\": \"#cfd8dc\",\r\n \"200\": \"#b0bec5\",\r\n \"300\": \"#90a4ae\",\r\n \"400\": \"#78909c\",\r\n \"500\": \"#607d8b\",\r\n \"600\": \"#546e7a\",\r\n \"700\": \"#455a64\",\r\n \"800\": \"#37474f\",\r\n \"900\": \"#263238\",\r\n A100: \"#cfd8dc\",\r\n A200: \"#b0bec5\",\r\n A400: \"#78909c\",\r\n A700: \"#455a64\",\r\n contrastDefaultColor: \"light\",\r\n contrastDarkColors: \"50 100 200 300 A100 A200\",\r\n contrastStrongLightColors: \"400 500 700\"\r\n }\r\n });\r\n })();\r\n (function() {\r\n \"use strict\";\r\n\r\n (function(angular) {\r\n \"use strict\";\r\n /**\r\n * @ngdoc module\r\n * @name material.core.theming\r\n * @description\r\n * Theming\r\n */\r\n detectDisabledThemes.$inject = [\"$mdThemingProvider\"];\r\n ThemingDirective.$inject = [\"$mdTheming\", \"$interpolate\", \"$log\"];\r\n ThemableDirective.$inject = [\"$mdTheming\"];\r\n ThemingProvider.$inject = [\"$mdColorPalette\", \"$$mdMetaProvider\"];\r\n generateAllThemes.$inject = [\"$injector\", \"$mdTheming\"];\r\n angular\r\n .module(\"material.core.theming\", [\r\n \"material.core.theming.palette\",\r\n \"material.core.meta\"\r\n ])\r\n .directive(\"mdTheme\", ThemingDirective)\r\n .directive(\"mdThemable\", ThemableDirective)\r\n .directive(\"mdThemesDisabled\", disableThemesDirective)\r\n .provider(\"$mdTheming\", ThemingProvider)\r\n .config(detectDisabledThemes)\r\n .run(generateAllThemes);\r\n\r\n /**\r\n * Detect if the HTML or the BODY tags has a [md-themes-disabled] attribute\r\n * If yes, then immediately disable all theme stylesheet generation and DOM injection\r\n */\r\n /**\r\n * @ngInject\r\n */\r\n function detectDisabledThemes($mdThemingProvider) {\r\n var isDisabled = !!document.querySelector(\"[md-themes-disabled]\");\r\n $mdThemingProvider.disableTheming(isDisabled);\r\n }\r\n\r\n /**\r\n * @ngdoc service\r\n * @name $mdThemingProvider\r\n * @module material.core.theming\r\n *\r\n * @description Provider to configure the `$mdTheming` service.\r\n *\r\n * ### Default Theme\r\n * The `$mdThemingProvider` uses by default the following theme configuration:\r\n *\r\n * - Primary Palette: `Primary`\r\n * - Accent Palette: `Pink`\r\n * - Warn Palette: `Deep-Orange`\r\n * - Background Palette: `Grey`\r\n *\r\n * If you don't want to use the `md-theme` directive on the elements itself, you may want to overwrite\r\n * the default theme. \r\n * This can be done by using the following markup.\r\n *\r\n * \r\n * myAppModule.config(function($mdThemingProvider) {\r\n * $mdThemingProvider\r\n * .theme('default')\r\n * .primaryPalette('blue')\r\n * .accentPalette('teal')\r\n * .warnPalette('red')\r\n * .backgroundPalette('grey');\r\n * });\r\n * \r\n *\r\n\r\n * ### Dynamic Themes\r\n *\r\n * By default, if you change a theme at runtime, the `$mdTheming` service will not detect those changes. \r\n * If you have an application, which changes its theme on runtime, you have to enable theme watching.\r\n *\r\n * \r\n * myAppModule.config(function($mdThemingProvider) {\r\n * // Enable theme watching.\r\n * $mdThemingProvider.alwaysWatchTheme(true);\r\n * });\r\n * \r\n *\r\n * ### Custom Theme Styles\r\n *\r\n * Sometimes you may want to use your own theme styles for some custom components. \r\n * You are able to register your own styles by using the following markup.\r\n *\r\n * \r\n * myAppModule.config(function($mdThemingProvider) {\r\n * // Register our custom stylesheet into the theming provider.\r\n * $mdThemingProvider.registerStyles(STYLESHEET);\r\n * });\r\n * \r\n *\r\n * The `registerStyles` method only accepts strings as value, so you're actually not able to load an external\r\n * stylesheet file into the `$mdThemingProvider`.\r\n *\r\n * If it's necessary to load an external stylesheet, we suggest using a bundler, which supports including raw content,\r\n * like [raw-loader](https://github.com/webpack/raw-loader) for `webpack`.\r\n *\r\n * \r\n * myAppModule.config(function($mdThemingProvider) {\r\n * // Register your custom stylesheet into the theming provider.\r\n * $mdThemingProvider.registerStyles(require('../styles/my-component.theme.css'));\r\n * });\r\n * \r\n *\r\n * ### Browser color\r\n *\r\n * Enables browser header coloring\r\n * for more info please visit:\r\n * https://developers.google.com/web/fundamentals/design-and-ui/browser-customization/theme-color\r\n *\r\n * Options parameter: \r\n * `theme` - A defined theme via `$mdThemeProvider` to use the palettes from. Default is `default` theme. \r\n * `palette` - Can be any one of the basic material design palettes, extended defined palettes and 'primary',\r\n * 'accent', 'background' and 'warn'. Default is `primary`. \r\n * `hue` - The hue from the selected palette. Default is `800` \r\n *\r\n * \r\n * myAppModule.config(function($mdThemingProvider) {\r\n * // Enable browser color\r\n * $mdThemingProvider.enableBrowserColor({\r\n * theme: 'myTheme', // Default is 'default'\r\n * palette: 'accent', // Default is 'primary', any basic material palette and extended palettes are available\r\n * hue: '200' // Default is '800'\r\n * });\r\n * });\r\n * \r\n */\r\n\r\n /**\r\n * @ngdoc method\r\n * @name $mdThemingProvider#registerStyles\r\n * @param {string} styles The styles to be appended to Angular Material's built in theme css.\r\n */\r\n /**\r\n * @ngdoc method\r\n * @name $mdThemingProvider#setNonce\r\n * @param {string} nonceValue The nonce to be added as an attribute to the theme style tags.\r\n * Setting a value allows the use of CSP policy without using the unsafe-inline directive.\r\n */\r\n\r\n /**\r\n * @ngdoc method\r\n * @name $mdThemingProvider#setDefaultTheme\r\n * @param {string} themeName Default theme name to be applied to elements. Default value is `default`.\r\n */\r\n\r\n /**\r\n * @ngdoc method\r\n * @name $mdThemingProvider#alwaysWatchTheme\r\n * @param {boolean} watch Whether or not to always watch themes for changes and re-apply\r\n * classes when they change. Default is `false`. Enabling can reduce performance.\r\n */\r\n\r\n /**\r\n * @ngdoc method\r\n * @name $mdThemingProvider#enableBrowserColor\r\n * @param {Object=} options Options object for the browser color \r\n * `theme` - A defined theme via `$mdThemeProvider` to use the palettes from. Default is `default` theme. \r\n * `palette` - Can be any one of the basic material design palettes, extended defined palettes and 'primary',\r\n * 'accent', 'background' and 'warn'. Default is `primary`. \r\n * `hue` - The hue from the selected palette. Default is `800` \r\n * @returns {Function} remove function of the browser color\r\n */\r\n\r\n /* Some Example Valid Theming Expressions\r\n * =======================================\r\n *\r\n * Intention group expansion: (valid for primary, accent, warn, background)\r\n *\r\n * {{primary-100}} - grab shade 100 from the primary palette\r\n * {{primary-100-0.7}} - grab shade 100, apply opacity of 0.7\r\n * {{primary-100-contrast}} - grab shade 100's contrast color\r\n * {{primary-hue-1}} - grab the shade assigned to hue-1 from the primary palette\r\n * {{primary-hue-1-0.7}} - apply 0.7 opacity to primary-hue-1\r\n * {{primary-color}} - Generates .md-hue-1, .md-hue-2, .md-hue-3 with configured shades set for each hue\r\n * {{primary-color-0.7}} - Apply 0.7 opacity to each of the above rules\r\n * {{primary-contrast}} - Generates .md-hue-1, .md-hue-2, .md-hue-3 with configured contrast (ie. text) color shades set for each hue\r\n * {{primary-contrast-0.7}} - Apply 0.7 opacity to each of the above rules\r\n *\r\n * Foreground expansion: Applies rgba to black/white foreground text\r\n *\r\n * {{foreground-1}} - used for primary text\r\n * {{foreground-2}} - used for secondary text/divider\r\n * {{foreground-3}} - used for disabled text\r\n * {{foreground-4}} - used for dividers\r\n *\r\n */\r\n\r\n // In memory generated CSS rules; registered by theme.name\r\n var GENERATED = {};\r\n\r\n // In memory storage of defined themes and color palettes (both loaded by CSS, and user specified)\r\n var PALETTES;\r\n\r\n // Text Colors on light and dark backgrounds\r\n // @see https://www.google.com/design/spec/style/color.html#color-text-background-colors\r\n var DARK_FOREGROUND = {\r\n name: \"dark\",\r\n \"1\": \"rgba(0,0,0,0.87)\",\r\n \"2\": \"rgba(0,0,0,0.54)\",\r\n \"3\": \"rgba(0,0,0,0.38)\",\r\n \"4\": \"rgba(0,0,0,0.12)\"\r\n };\r\n var LIGHT_FOREGROUND = {\r\n name: \"light\",\r\n \"1\": \"rgba(255,255,255,1.0)\",\r\n \"2\": \"rgba(255,255,255,0.7)\",\r\n \"3\": \"rgba(255,255,255,0.5)\",\r\n \"4\": \"rgba(255,255,255,0.12)\"\r\n };\r\n\r\n var DARK_SHADOW =\r\n \"1px 1px 0px rgba(0,0,0,0.4), -1px -1px 0px rgba(0,0,0,0.4)\";\r\n var LIGHT_SHADOW = \"\";\r\n\r\n var DARK_CONTRAST_COLOR = colorToRgbaArray(\"rgba(0,0,0,0.87)\");\r\n var LIGHT_CONTRAST_COLOR = colorToRgbaArray(\"rgba(255,255,255,0.87)\");\r\n var STRONG_LIGHT_CONTRAST_COLOR = colorToRgbaArray(\"rgb(255,255,255)\");\r\n\r\n var THEME_COLOR_TYPES = [\"primary\", \"accent\", \"warn\", \"background\"];\r\n var DEFAULT_COLOR_TYPE = \"primary\";\r\n\r\n // A color in a theme will use these hues by default, if not specified by user.\r\n var LIGHT_DEFAULT_HUES = {\r\n accent: {\r\n default: \"A200\",\r\n \"hue-1\": \"A100\",\r\n \"hue-2\": \"A400\",\r\n \"hue-3\": \"A700\"\r\n },\r\n background: {\r\n default: \"50\",\r\n \"hue-1\": \"A100\",\r\n \"hue-2\": \"100\",\r\n \"hue-3\": \"300\"\r\n }\r\n };\r\n\r\n var DARK_DEFAULT_HUES = {\r\n background: {\r\n default: \"A400\",\r\n \"hue-1\": \"800\",\r\n \"hue-2\": \"900\",\r\n \"hue-3\": \"A200\"\r\n }\r\n };\r\n THEME_COLOR_TYPES.forEach(function(colorType) {\r\n // Color types with unspecified default hues will use these default hue values\r\n var defaultDefaultHues = {\r\n default: \"500\",\r\n \"hue-1\": \"300\",\r\n \"hue-2\": \"800\",\r\n \"hue-3\": \"A100\"\r\n };\r\n if (!LIGHT_DEFAULT_HUES[colorType])\r\n LIGHT_DEFAULT_HUES[colorType] = defaultDefaultHues;\r\n if (!DARK_DEFAULT_HUES[colorType])\r\n DARK_DEFAULT_HUES[colorType] = defaultDefaultHues;\r\n });\r\n\r\n var VALID_HUE_VALUES = [\r\n \"50\",\r\n \"100\",\r\n \"200\",\r\n \"300\",\r\n \"400\",\r\n \"500\",\r\n \"600\",\r\n \"700\",\r\n \"800\",\r\n \"900\",\r\n \"A100\",\r\n \"A200\",\r\n \"A400\",\r\n \"A700\"\r\n ];\r\n\r\n var themeConfig = {\r\n disableTheming: false, // Generate our themes at run time; also disable stylesheet DOM injection\r\n generateOnDemand: false, // Whether or not themes are to be generated on-demand (vs. eagerly).\r\n registeredStyles: [], // Custom styles registered to be used in the theming of custom components.\r\n nonce: null // Nonce to be added as an attribute to the generated themes style tags.\r\n };\r\n\r\n /**\r\n *\r\n */\r\n function ThemingProvider($mdColorPalette, $$mdMetaProvider) {\r\n ThemingService.$inject = [\"$rootScope\", \"$log\"];\r\n PALETTES = {};\r\n var THEMES = {};\r\n\r\n var themingProvider;\r\n\r\n var alwaysWatchTheme = false;\r\n var defaultTheme = \"default\";\r\n\r\n // Load JS Defined Palettes\r\n angular.extend(PALETTES, $mdColorPalette);\r\n\r\n // Default theme defined in core.js\r\n\r\n /**\r\n * Adds `theme-color` and `msapplication-navbutton-color` meta tags with the color parameter\r\n * @param {string} color Hex value of the wanted browser color\r\n * @returns {Function} Remove function of the meta tags\r\n */\r\n var setBrowserColor = function(color) {\r\n // Chrome, Firefox OS and Opera\r\n var removeChrome = $$mdMetaProvider.setMeta(\"theme-color\", color);\r\n // Windows Phone\r\n var removeWindows = $$mdMetaProvider.setMeta(\r\n \"msapplication-navbutton-color\",\r\n color\r\n );\r\n\r\n return function() {\r\n removeChrome();\r\n removeWindows();\r\n };\r\n };\r\n\r\n /**\r\n * Enables browser header coloring\r\n * for more info please visit:\r\n * https://developers.google.com/web/fundamentals/design-and-ui/browser-customization/theme-color\r\n *\r\n * The default color is `800` from `primary` palette of the `default` theme\r\n *\r\n * options are:\r\n * `theme` - A defined theme via `$mdThemeProvider` to use the palettes from. Default is `default` theme\r\n * `palette` - Can be any one of the basic material design palettes, extended defined palettes and 'primary',\r\n * 'accent', 'background' and 'warn'. Default is `primary`\r\n * `hue` - The hue from the selected palette. Default is `800`\r\n *\r\n * @param {Object=} options Options object for the browser color\r\n * @returns {Function} remove function of the browser color\r\n */\r\n var enableBrowserColor = function(options) {\r\n options = angular.isObject(options) ? options : {};\r\n\r\n var theme = options.theme || \"default\";\r\n var hue = options.hue || \"800\";\r\n\r\n var palette =\r\n PALETTES[options.palette] ||\r\n PALETTES[THEMES[theme].colors[options.palette || \"primary\"].name];\r\n\r\n var color = angular.isObject(palette[hue])\r\n ? palette[hue].hex\r\n : palette[hue];\r\n\r\n return setBrowserColor(color);\r\n };\r\n\r\n return (themingProvider = {\r\n definePalette: definePalette,\r\n extendPalette: extendPalette,\r\n theme: registerTheme,\r\n\r\n /**\r\n * return a read-only clone of the current theme configuration\r\n */\r\n configuration: function() {\r\n return angular.extend({}, themeConfig, {\r\n defaultTheme: defaultTheme,\r\n alwaysWatchTheme: alwaysWatchTheme,\r\n registeredStyles: [].concat(themeConfig.registeredStyles)\r\n });\r\n },\r\n\r\n /**\r\n * Easy way to disable theming without having to use\r\n * `.constant(\"$MD_THEME_CSS\",\"\");` This disables\r\n * all dynamic theme style sheet generations and injections...\r\n */\r\n disableTheming: function(isDisabled) {\r\n themeConfig.disableTheming =\r\n angular.isUndefined(isDisabled) || !!isDisabled;\r\n },\r\n\r\n registerStyles: function(styles) {\r\n themeConfig.registeredStyles.push(styles);\r\n },\r\n\r\n setNonce: function(nonceValue) {\r\n themeConfig.nonce = nonceValue;\r\n },\r\n\r\n generateThemesOnDemand: function(onDemand) {\r\n themeConfig.generateOnDemand = onDemand;\r\n },\r\n\r\n setDefaultTheme: function(theme) {\r\n defaultTheme = theme;\r\n },\r\n\r\n alwaysWatchTheme: function(alwaysWatch) {\r\n alwaysWatchTheme = alwaysWatch;\r\n },\r\n\r\n enableBrowserColor: enableBrowserColor,\r\n\r\n $get: ThemingService,\r\n _LIGHT_DEFAULT_HUES: LIGHT_DEFAULT_HUES,\r\n _DARK_DEFAULT_HUES: DARK_DEFAULT_HUES,\r\n _PALETTES: PALETTES,\r\n _THEMES: THEMES,\r\n _parseRules: parseRules,\r\n _rgba: rgba\r\n });\r\n\r\n // Example: $mdThemingProvider.definePalette('neonRed', { 50: '#f5fafa', ... });\r\n function definePalette(name, map) {\r\n map = map || {};\r\n PALETTES[name] = checkPaletteValid(name, map);\r\n return themingProvider;\r\n }\r\n\r\n // Returns an new object which is a copy of a given palette `name` with variables from\r\n // `map` overwritten\r\n // Example: var neonRedMap = $mdThemingProvider.extendPalette('red', { 50: '#f5fafafa' });\r\n function extendPalette(name, map) {\r\n return checkPaletteValid(\r\n name,\r\n angular.extend({}, PALETTES[name] || {}, map)\r\n );\r\n }\r\n\r\n // Make sure that palette has all required hues\r\n function checkPaletteValid(name, map) {\r\n var missingColors = VALID_HUE_VALUES.filter(function(field) {\r\n return !map[field];\r\n });\r\n if (missingColors.length) {\r\n throw new Error(\r\n \"Missing colors %1 in palette %2!\"\r\n .replace(\"%1\", missingColors.join(\", \"))\r\n .replace(\"%2\", name)\r\n );\r\n }\r\n\r\n return map;\r\n }\r\n\r\n // Register a theme (which is a collection of color palettes to use with various states\r\n // ie. warn, accent, primary )\r\n // Optionally inherit from an existing theme\r\n // $mdThemingProvider.theme('custom-theme').primaryPalette('red');\r\n function registerTheme(name, inheritFrom) {\r\n if (THEMES[name]) return THEMES[name];\r\n\r\n inheritFrom = inheritFrom || \"default\";\r\n\r\n var parentTheme =\r\n typeof inheritFrom === \"string\" ? THEMES[inheritFrom] : inheritFrom;\r\n var theme = new Theme(name);\r\n\r\n if (parentTheme) {\r\n angular.forEach(parentTheme.colors, function(color, colorType) {\r\n theme.colors[colorType] = {\r\n name: color.name,\r\n // Make sure a COPY of the hues is given to the child color,\r\n // not the same reference.\r\n hues: angular.extend({}, color.hues)\r\n };\r\n });\r\n }\r\n THEMES[name] = theme;\r\n\r\n return theme;\r\n }\r\n\r\n function Theme(name) {\r\n var self = this;\r\n self.name = name;\r\n self.colors = {};\r\n\r\n self.dark = setDark;\r\n setDark(false);\r\n\r\n function setDark(isDark) {\r\n isDark = arguments.length === 0 ? true : !!isDark;\r\n\r\n // If no change, abort\r\n if (isDark === self.isDark) return;\r\n\r\n self.isDark = isDark;\r\n\r\n self.foregroundPalette = self.isDark\r\n ? LIGHT_FOREGROUND\r\n : DARK_FOREGROUND;\r\n self.foregroundShadow = self.isDark ? DARK_SHADOW : LIGHT_SHADOW;\r\n\r\n // Light and dark themes have different default hues.\r\n // Go through each existing color type for this theme, and for every\r\n // hue value that is still the default hue value from the previous light/dark setting,\r\n // set it to the default hue value from the new light/dark setting.\r\n var newDefaultHues = self.isDark\r\n ? DARK_DEFAULT_HUES\r\n : LIGHT_DEFAULT_HUES;\r\n var oldDefaultHues = self.isDark\r\n ? LIGHT_DEFAULT_HUES\r\n : DARK_DEFAULT_HUES;\r\n angular.forEach(newDefaultHues, function(newDefaults, colorType) {\r\n var color = self.colors[colorType];\r\n var oldDefaults = oldDefaultHues[colorType];\r\n if (color) {\r\n for (var hueName in color.hues) {\r\n if (color.hues[hueName] === oldDefaults[hueName]) {\r\n color.hues[hueName] = newDefaults[hueName];\r\n }\r\n }\r\n }\r\n });\r\n\r\n return self;\r\n }\r\n\r\n THEME_COLOR_TYPES.forEach(function(colorType) {\r\n var defaultHues = (self.isDark\r\n ? DARK_DEFAULT_HUES\r\n : LIGHT_DEFAULT_HUES)[colorType];\r\n self[colorType + \"Palette\"] = function setPaletteType(\r\n paletteName,\r\n hues\r\n ) {\r\n var color = (self.colors[colorType] = {\r\n name: paletteName,\r\n hues: angular.extend({}, defaultHues, hues)\r\n });\r\n\r\n Object.keys(color.hues).forEach(function(name) {\r\n if (!defaultHues[name]) {\r\n throw new Error(\r\n \"Invalid hue name '%1' in theme %2's %3 color %4. Available hue names: %4\"\r\n .replace(\"%1\", name)\r\n .replace(\"%2\", self.name)\r\n .replace(\"%3\", paletteName)\r\n .replace(\"%4\", Object.keys(defaultHues).join(\", \"))\r\n );\r\n }\r\n });\r\n Object.keys(color.hues)\r\n .map(function(key) {\r\n return color.hues[key];\r\n })\r\n .forEach(function(hueValue) {\r\n if (VALID_HUE_VALUES.indexOf(hueValue) == -1) {\r\n throw new Error(\r\n \"Invalid hue value '%1' in theme %2's %3 color %4. Available hue values: %5\"\r\n .replace(\"%1\", hueValue)\r\n .replace(\"%2\", self.name)\r\n .replace(\"%3\", colorType)\r\n .replace(\"%4\", paletteName)\r\n .replace(\"%5\", VALID_HUE_VALUES.join(\", \"))\r\n );\r\n }\r\n });\r\n return self;\r\n };\r\n\r\n self[colorType + \"Color\"] = function() {\r\n var args = Array.prototype.slice.call(arguments);\r\n console.warn(\r\n \"$mdThemingProviderTheme.\" +\r\n colorType +\r\n \"Color() has been deprecated. \" +\r\n \"Use $mdThemingProviderTheme.\" +\r\n colorType +\r\n \"Palette() instead.\"\r\n );\r\n return self[colorType + \"Palette\"].apply(self, args);\r\n };\r\n });\r\n }\r\n\r\n /**\r\n * @ngdoc service\r\n * @name $mdTheming\r\n *\r\n * @description\r\n *\r\n * Service that makes an element apply theming related classes to itself.\r\n *\r\n * ```js\r\n * app.directive('myFancyDirective', function($mdTheming) {\r\n * return {\r\n * restrict: 'e',\r\n * link: function(scope, el, attrs) {\r\n * $mdTheming(el);\r\n * }\r\n * };\r\n * });\r\n * ```\r\n * @param {el=} element to apply theming to\r\n */\r\n /* @ngInject */\r\n function ThemingService($rootScope, $log) {\r\n // Allow us to be invoked via a linking function signature.\r\n var applyTheme = function(scope, el) {\r\n if (el === undefined) {\r\n el = scope;\r\n scope = undefined;\r\n }\r\n if (scope === undefined) {\r\n scope = $rootScope;\r\n }\r\n applyTheme.inherit(el, el);\r\n };\r\n\r\n applyTheme.THEMES = angular.extend({}, THEMES);\r\n applyTheme.PALETTES = angular.extend({}, PALETTES);\r\n applyTheme.inherit = inheritTheme;\r\n applyTheme.registered = registered;\r\n applyTheme.defaultTheme = function() {\r\n return defaultTheme;\r\n };\r\n applyTheme.generateTheme = function(name) {\r\n generateTheme(THEMES[name], name, themeConfig.nonce);\r\n };\r\n applyTheme.setBrowserColor = enableBrowserColor;\r\n\r\n return applyTheme;\r\n\r\n /**\r\n * Determine is specified theme name is a valid, registered theme\r\n */\r\n function registered(themeName) {\r\n if (themeName === undefined || themeName === \"\") return true;\r\n return applyTheme.THEMES[themeName] !== undefined;\r\n }\r\n\r\n /**\r\n * Get theme name for the element, then update with Theme CSS class\r\n */\r\n function inheritTheme(el, parent) {\r\n var ctrl = parent.controller(\"mdTheme\");\r\n var attrThemeValue = el.attr(\"md-theme-watch\");\r\n var watchTheme =\r\n (alwaysWatchTheme || angular.isDefined(attrThemeValue)) &&\r\n attrThemeValue != \"false\";\r\n\r\n updateThemeClass(lookupThemeName());\r\n\r\n if (\r\n (alwaysWatchTheme && !registerChangeCallback()) ||\r\n (!alwaysWatchTheme && watchTheme)\r\n ) {\r\n el.on(\r\n \"$destroy\",\r\n $rootScope.$watch(lookupThemeName, updateThemeClass)\r\n );\r\n }\r\n\r\n /**\r\n * Find the theme name from the parent controller or element data\r\n */\r\n function lookupThemeName() {\r\n // As a few components (dialog) add their controllers later, we should also watch for a controller init.\r\n ctrl =\r\n parent.controller(\"mdTheme\") || el.data(\"$mdThemeController\");\r\n return (\r\n (ctrl && ctrl.$mdTheme) ||\r\n (defaultTheme == \"default\" ? \"\" : defaultTheme)\r\n );\r\n }\r\n\r\n /**\r\n * Remove old theme class and apply a new one\r\n * NOTE: if not a valid theme name, then the current name is not changed\r\n */\r\n function updateThemeClass(theme) {\r\n if (!theme) return;\r\n if (!registered(theme)) {\r\n $log.warn(\r\n \"Attempted to use unregistered theme '\" +\r\n theme +\r\n \"'. \" +\r\n \"Register it with $mdThemingProvider.theme().\"\r\n );\r\n }\r\n\r\n var oldTheme = el.data(\"$mdThemeName\");\r\n if (oldTheme) el.removeClass(\"md-\" + oldTheme + \"-theme\");\r\n el.addClass(\"md-\" + theme + \"-theme\");\r\n el.data(\"$mdThemeName\", theme);\r\n if (ctrl) {\r\n el.data(\"$mdThemeController\", ctrl);\r\n }\r\n }\r\n\r\n /**\r\n * Register change callback with parent mdTheme controller\r\n */\r\n function registerChangeCallback() {\r\n var parentController = parent.controller(\"mdTheme\");\r\n if (!parentController) return false;\r\n el.on(\r\n \"$destroy\",\r\n parentController.registerChanges(function() {\r\n updateThemeClass(lookupThemeName());\r\n })\r\n );\r\n return true;\r\n }\r\n }\r\n }\r\n }\r\n\r\n function ThemingDirective($mdTheming, $interpolate, $log) {\r\n return {\r\n priority: 100,\r\n link: {\r\n pre: function(scope, el, attrs) {\r\n var registeredCallbacks = [];\r\n var ctrl = {\r\n registerChanges: function(cb, context) {\r\n if (context) {\r\n cb = angular.bind(context, cb);\r\n }\r\n\r\n registeredCallbacks.push(cb);\r\n\r\n return function() {\r\n var index = registeredCallbacks.indexOf(cb);\r\n\r\n if (index > -1) {\r\n registeredCallbacks.splice(index, 1);\r\n }\r\n };\r\n },\r\n $setTheme: function(theme) {\r\n if (!$mdTheming.registered(theme)) {\r\n $log.warn(\r\n \"attempted to use unregistered theme '\" + theme + \"'\"\r\n );\r\n }\r\n ctrl.$mdTheme = theme;\r\n\r\n registeredCallbacks.forEach(function(cb) {\r\n cb();\r\n });\r\n }\r\n };\r\n el.data(\"$mdThemeController\", ctrl);\r\n ctrl.$setTheme($interpolate(attrs.mdTheme)(scope));\r\n attrs.$observe(\"mdTheme\", ctrl.$setTheme);\r\n }\r\n }\r\n };\r\n }\r\n\r\n /**\r\n * Special directive that will disable ALL runtime Theme style generation and DOM injection\r\n *\r\n * \r\n * \r\n *\r\n * \r\n * ...\r\n * \r\n *\r\n * Note: Using md-themes-css directive requires the developer to load external\r\n * theme stylesheets; e.g. custom themes from Material-Tools:\r\n *\r\n * `angular-material.themes.css`\r\n *\r\n * Another option is to use the ThemingProvider to configure and disable the attribute\r\n * conversions; this would obviate the use of the `md-themes-css` directive\r\n *\r\n */\r\n function disableThemesDirective() {\r\n themeConfig.disableTheming = true;\r\n\r\n // Return a 1x-only, first-match attribute directive\r\n return {\r\n restrict: \"A\",\r\n priority: \"900\"\r\n };\r\n }\r\n\r\n function ThemableDirective($mdTheming) {\r\n return $mdTheming;\r\n }\r\n\r\n function parseRules(theme, colorType, rules) {\r\n checkValidPalette(theme, colorType);\r\n\r\n rules = rules.replace(/THEME_NAME/g, theme.name);\r\n var generatedRules = [];\r\n var color = theme.colors[colorType];\r\n\r\n var themeNameRegex = new RegExp(\"\\\\.md-\" + theme.name + \"-theme\", \"g\");\r\n // Matches '{{ primary-color }}', etc\r\n var hueRegex = new RegExp(\r\n \"('|\\\")?{{\\\\s*(\" +\r\n colorType +\r\n \")-(color|contrast)-?(\\\\d\\\\.?\\\\d*)?\\\\s*}}(\\\"|')?\",\r\n \"g\"\r\n );\r\n var simpleVariableRegex = /'?\"?\\{\\{\\s*([a-zA-Z]+)-(A?\\d+|hue\\-[0-3]|shadow|default)-?(\\d\\.?\\d*)?(contrast)?\\s*\\}\\}'?\"?/g;\r\n var palette = PALETTES[color.name];\r\n\r\n // find and replace simple variables where we use a specific hue, not an entire palette\r\n // eg. \"{{primary-100}}\"\r\n //\\(' + THEME_COLOR_TYPES.join('\\|') + '\\)'\r\n rules = rules.replace(simpleVariableRegex, function(\r\n match,\r\n colorType,\r\n hue,\r\n opacity,\r\n contrast\r\n ) {\r\n if (colorType === \"foreground\") {\r\n if (hue == \"shadow\") {\r\n return theme.foregroundShadow;\r\n } else {\r\n return (\r\n theme.foregroundPalette[hue] || theme.foregroundPalette[\"1\"]\r\n );\r\n }\r\n }\r\n\r\n // `default` is also accepted as a hue-value, because the background palettes are\r\n // using it as a name for the default hue.\r\n if (hue.indexOf(\"hue\") === 0 || hue === \"default\") {\r\n hue = theme.colors[colorType].hues[hue];\r\n }\r\n\r\n return rgba(\r\n (PALETTES[theme.colors[colorType].name][hue] || \"\")[\r\n contrast ? \"contrast\" : \"value\"\r\n ],\r\n opacity\r\n );\r\n });\r\n\r\n // For each type, generate rules for each hue (ie. default, md-hue-1, md-hue-2, md-hue-3)\r\n angular.forEach(color.hues, function(hueValue, hueName) {\r\n var newRule = rules.replace(hueRegex, function(\r\n match,\r\n _,\r\n colorType,\r\n hueType,\r\n opacity\r\n ) {\r\n return rgba(\r\n palette[hueValue][hueType === \"color\" ? \"value\" : \"contrast\"],\r\n opacity\r\n );\r\n });\r\n if (hueName !== \"default\") {\r\n newRule = newRule.replace(\r\n themeNameRegex,\r\n \".md-\" + theme.name + \"-theme.md-\" + hueName\r\n );\r\n }\r\n\r\n // Don't apply a selector rule to the default theme, making it easier to override\r\n // styles of the base-component\r\n if (theme.name == \"default\") {\r\n var themeRuleRegex = /((?:(?:(?: |>|\\.|\\w|-|:|\\(|\\)|\\[|\\]|\"|'|=)+) )?)((?:(?:\\w|\\.|-)+)?)\\.md-default-theme((?: |>|\\.|\\w|-|:|\\(|\\)|\\[|\\]|\"|'|=)*)/g;\r\n newRule = newRule.replace(themeRuleRegex, function(\r\n match,\r\n prefix,\r\n target,\r\n suffix\r\n ) {\r\n return match + \", \" + prefix + target + suffix;\r\n });\r\n }\r\n generatedRules.push(newRule);\r\n });\r\n\r\n return generatedRules;\r\n }\r\n\r\n var rulesByType = {};\r\n\r\n // Generate our themes at run time given the state of THEMES and PALETTES\r\n function generateAllThemes($injector, $mdTheming) {\r\n var head = document.head;\r\n var firstChild = head ? head.firstElementChild : null;\r\n var themeCss =\r\n !themeConfig.disableTheming && $injector.has(\"$MD_THEME_CSS\")\r\n ? $injector.get(\"$MD_THEME_CSS\")\r\n : \"\";\r\n\r\n // Append our custom registered styles to the theme stylesheet.\r\n themeCss += themeConfig.registeredStyles.join(\"\");\r\n\r\n if (!firstChild) return;\r\n if (themeCss.length === 0) return; // no rules, so no point in running this expensive task\r\n\r\n // Expose contrast colors for palettes to ensure that text is always readable\r\n angular.forEach(PALETTES, sanitizePalette);\r\n\r\n // MD_THEME_CSS is a string generated by the build process that includes all the themable\r\n // components as templates\r\n\r\n // Break the CSS into individual rules\r\n var rules = themeCss\r\n .split(/\\}(?!(\\}|'|\"|;))/)\r\n .filter(function(rule) {\r\n return rule && rule.trim().length;\r\n })\r\n .map(function(rule) {\r\n return rule.trim() + \"}\";\r\n });\r\n\r\n var ruleMatchRegex = new RegExp(\r\n \"md-(\" + THEME_COLOR_TYPES.join(\"|\") + \")\",\r\n \"g\"\r\n );\r\n\r\n THEME_COLOR_TYPES.forEach(function(type) {\r\n rulesByType[type] = \"\";\r\n });\r\n\r\n // Sort the rules based on type, allowing us to do color substitution on a per-type basis\r\n rules.forEach(function(rule) {\r\n var match = rule.match(ruleMatchRegex);\r\n // First: test that if the rule has '.md-accent', it goes into the accent set of rules\r\n for (var i = 0, type; (type = THEME_COLOR_TYPES[i]); i++) {\r\n if (rule.indexOf(\".md-\" + type) > -1) {\r\n return (rulesByType[type] += rule);\r\n }\r\n }\r\n\r\n // If no eg 'md-accent' class is found, try to just find 'accent' in the rule and guess from\r\n // there\r\n for (i = 0; (type = THEME_COLOR_TYPES[i]); i++) {\r\n if (rule.indexOf(type) > -1) {\r\n return (rulesByType[type] += rule);\r\n }\r\n }\r\n\r\n // Default to the primary array\r\n return (rulesByType[DEFAULT_COLOR_TYPE] += rule);\r\n });\r\n\r\n // If themes are being generated on-demand, quit here. The user will later manually\r\n // call generateTheme to do this on a theme-by-theme basis.\r\n if (themeConfig.generateOnDemand) return;\r\n\r\n angular.forEach($mdTheming.THEMES, function(theme) {\r\n if (\r\n !GENERATED[theme.name] &&\r\n !(\r\n $mdTheming.defaultTheme() !== \"default\" &&\r\n theme.name === \"default\"\r\n )\r\n ) {\r\n generateTheme(theme, theme.name, themeConfig.nonce);\r\n }\r\n });\r\n\r\n // *************************\r\n // Internal functions\r\n // *************************\r\n\r\n // The user specifies a 'default' contrast color as either light or dark,\r\n // then explicitly lists which hues are the opposite contrast (eg. A100 has dark, A200 has light)\r\n function sanitizePalette(palette, name) {\r\n var defaultContrast = palette.contrastDefaultColor;\r\n var lightColors = palette.contrastLightColors || [];\r\n var strongLightColors = palette.contrastStrongLightColors || [];\r\n var darkColors = palette.contrastDarkColors || [];\r\n\r\n // These colors are provided as space-separated lists\r\n if (typeof lightColors === \"string\")\r\n lightColors = lightColors.split(\" \");\r\n if (typeof strongLightColors === \"string\")\r\n strongLightColors = strongLightColors.split(\" \");\r\n if (typeof darkColors === \"string\")\r\n darkColors = darkColors.split(\" \");\r\n\r\n // Cleanup after ourselves\r\n delete palette.contrastDefaultColor;\r\n delete palette.contrastLightColors;\r\n delete palette.contrastStrongLightColors;\r\n delete palette.contrastDarkColors;\r\n\r\n // Change { 'A100': '#fffeee' } to { 'A100': { value: '#fffeee', contrast:DARK_CONTRAST_COLOR }\r\n angular.forEach(palette, function(hueValue, hueName) {\r\n if (angular.isObject(hueValue)) return; // Already converted\r\n // Map everything to rgb colors\r\n var rgbValue = colorToRgbaArray(hueValue);\r\n if (!rgbValue) {\r\n throw new Error(\r\n \"Color %1, in palette %2's hue %3, is invalid. Hex or rgb(a) color expected.\"\r\n .replace(\"%1\", hueValue)\r\n .replace(\"%2\", palette.name)\r\n .replace(\"%3\", hueName)\r\n );\r\n }\r\n\r\n palette[hueName] = {\r\n hex: palette[hueName],\r\n value: rgbValue,\r\n contrast: getContrastColor()\r\n };\r\n function getContrastColor() {\r\n if (defaultContrast === \"light\") {\r\n if (darkColors.indexOf(hueName) > -1) {\r\n return DARK_CONTRAST_COLOR;\r\n } else {\r\n return strongLightColors.indexOf(hueName) > -1\r\n ? STRONG_LIGHT_CONTRAST_COLOR\r\n : LIGHT_CONTRAST_COLOR;\r\n }\r\n } else {\r\n if (lightColors.indexOf(hueName) > -1) {\r\n return strongLightColors.indexOf(hueName) > -1\r\n ? STRONG_LIGHT_CONTRAST_COLOR\r\n : LIGHT_CONTRAST_COLOR;\r\n } else {\r\n return DARK_CONTRAST_COLOR;\r\n }\r\n }\r\n }\r\n });\r\n }\r\n }\r\n\r\n function generateTheme(theme, name, nonce) {\r\n var head = document.head;\r\n var firstChild = head ? head.firstElementChild : null;\r\n\r\n if (!GENERATED[name]) {\r\n // For each theme, use the color palettes specified for\r\n // `primary`, `warn` and `accent` to generate CSS rules.\r\n THEME_COLOR_TYPES.forEach(function(colorType) {\r\n var styleStrings = parseRules(\r\n theme,\r\n colorType,\r\n rulesByType[colorType]\r\n );\r\n while (styleStrings.length) {\r\n var styleContent = styleStrings.shift();\r\n if (styleContent) {\r\n var style = document.createElement(\"style\");\r\n style.setAttribute(\"md-theme-style\", \"\");\r\n if (nonce) {\r\n style.setAttribute(\"nonce\", nonce);\r\n }\r\n style.appendChild(document.createTextNode(styleContent));\r\n head.insertBefore(style, firstChild);\r\n }\r\n }\r\n });\r\n\r\n GENERATED[theme.name] = true;\r\n }\r\n }\r\n\r\n function checkValidPalette(theme, colorType) {\r\n // If theme attempts to use a palette that doesnt exist, throw error\r\n if (!PALETTES[(theme.colors[colorType] || {}).name]) {\r\n throw new Error(\r\n \"You supplied an invalid color palette for theme %1's %2 palette. Available palettes: %3\"\r\n .replace(\"%1\", theme.name)\r\n .replace(\"%2\", colorType)\r\n .replace(\"%3\", Object.keys(PALETTES).join(\", \"))\r\n );\r\n }\r\n }\r\n\r\n function colorToRgbaArray(clr) {\r\n if (angular.isArray(clr) && clr.length == 3) return clr;\r\n if (/^rgb/.test(clr)) {\r\n return clr\r\n .replace(/(^\\s*rgba?\\(|\\)\\s*$)/g, \"\")\r\n .split(\",\")\r\n .map(function(value, i) {\r\n return i == 3 ? parseFloat(value, 10) : parseInt(value, 10);\r\n });\r\n }\r\n if (clr.charAt(0) == \"#\") clr = clr.substring(1);\r\n if (!/^([a-fA-F0-9]{3}){1,2}$/g.test(clr)) return;\r\n\r\n var dig = clr.length / 3;\r\n var red = clr.substr(0, dig);\r\n var grn = clr.substr(dig, dig);\r\n var blu = clr.substr(dig * 2);\r\n if (dig === 1) {\r\n red += red;\r\n grn += grn;\r\n blu += blu;\r\n }\r\n return [parseInt(red, 16), parseInt(grn, 16), parseInt(blu, 16)];\r\n }\r\n\r\n function rgba(rgbArray, opacity) {\r\n if (!rgbArray) return \"rgb('0,0,0')\";\r\n\r\n if (rgbArray.length == 4) {\r\n rgbArray = angular.copy(rgbArray);\r\n opacity ? rgbArray.pop() : (opacity = rgbArray.pop());\r\n }\r\n return opacity &&\r\n (typeof opacity == \"number\" ||\r\n (typeof opacity == \"string\" && opacity.length))\r\n ? \"rgba(\" + rgbArray.join(\",\") + \",\" + opacity + \")\"\r\n : \"rgb(\" + rgbArray.join(\",\") + \")\";\r\n }\r\n })(window.angular);\r\n })();\r\n (function() {\r\n \"use strict\";\r\n\r\n // Polyfill angular < 1.4 (provide $animateCss)\r\n angular.module(\"material.core\").factory(\"$$mdAnimate\", [\r\n \"$q\",\r\n \"$timeout\",\r\n \"$mdConstant\",\r\n \"$animateCss\",\r\n function($q, $timeout, $mdConstant, $animateCss) {\r\n // Since $$mdAnimate is injected into $mdUtil... use a wrapper function\r\n // to subsequently inject $mdUtil as an argument to the AnimateDomUtils\r\n\r\n return function($mdUtil) {\r\n return AnimateDomUtils(\r\n $mdUtil,\r\n $q,\r\n $timeout,\r\n $mdConstant,\r\n $animateCss\r\n );\r\n };\r\n }\r\n ]);\r\n\r\n /**\r\n * Factory function that requires special injections\r\n */\r\n function AnimateDomUtils($mdUtil, $q, $timeout, $mdConstant, $animateCss) {\r\n var self;\r\n return (self = {\r\n /**\r\n *\r\n */\r\n translate3d: function(target, from, to, options) {\r\n return $animateCss(target, {\r\n from: from,\r\n to: to,\r\n addClass: options.transitionInClass,\r\n removeClass: options.transitionOutClass\r\n })\r\n .start()\r\n .then(function() {\r\n // Resolve with reverser function...\r\n return reverseTranslate;\r\n });\r\n\r\n /**\r\n * Specific reversal of the request translate animation above...\r\n */\r\n function reverseTranslate(newFrom) {\r\n return $animateCss(target, {\r\n to: newFrom || from,\r\n addClass: options.transitionOutClass,\r\n removeClass: options.transitionInClass\r\n }).start();\r\n }\r\n },\r\n\r\n /**\r\n * Listen for transitionEnd event (with optional timeout)\r\n * Announce completion or failure via promise handlers\r\n */\r\n waitTransitionEnd: function(element, opts) {\r\n var TIMEOUT = 3000; // fallback is 3 secs\r\n\r\n return $q(function(resolve, reject) {\r\n opts = opts || {};\r\n\r\n // If there is no transition is found, resolve immediately\r\n //\r\n // NOTE: using $mdUtil.nextTick() causes delays/issues\r\n if (noTransitionFound(opts.cachedTransitionStyles)) {\r\n TIMEOUT = 0;\r\n }\r\n\r\n var timer = $timeout(finished, opts.timeout || TIMEOUT);\r\n element.on($mdConstant.CSS.TRANSITIONEND, finished);\r\n\r\n /**\r\n * Upon timeout or transitionEnd, reject or resolve (respectively) this promise.\r\n * NOTE: Make sure this transitionEnd didn't bubble up from a child\r\n */\r\n function finished(ev) {\r\n if (ev && ev.target !== element[0]) return;\r\n\r\n if (ev) $timeout.cancel(timer);\r\n element.off($mdConstant.CSS.TRANSITIONEND, finished);\r\n\r\n // Never reject since ngAnimate may cause timeouts due missed transitionEnd events\r\n resolve();\r\n }\r\n\r\n /**\r\n * Checks whether or not there is a transition.\r\n *\r\n * @param styles The cached styles to use for the calculation. If null, getComputedStyle()\r\n * will be used.\r\n *\r\n * @returns {boolean} True if there is no transition/duration; false otherwise.\r\n */\r\n function noTransitionFound(styles) {\r\n styles = styles || window.getComputedStyle(element[0]);\r\n\r\n return (\r\n styles.transitionDuration == \"0s\" ||\r\n (!styles.transition && !styles.transitionProperty)\r\n );\r\n }\r\n });\r\n },\r\n\r\n calculateTransformValues: function(element, originator) {\r\n var origin = originator.element;\r\n var bounds = originator.bounds;\r\n\r\n if (origin || bounds) {\r\n var originBnds = origin\r\n ? self.clientRect(origin) || currentBounds()\r\n : self.copyRect(bounds);\r\n var dialogRect = self.copyRect(element[0].getBoundingClientRect());\r\n var dialogCenterPt = self.centerPointFor(dialogRect);\r\n var originCenterPt = self.centerPointFor(originBnds);\r\n\r\n return {\r\n centerX: originCenterPt.x - dialogCenterPt.x,\r\n centerY: originCenterPt.y - dialogCenterPt.y,\r\n scaleX:\r\n Math.round(\r\n 100 * Math.min(0.5, originBnds.width / dialogRect.width)\r\n ) / 100,\r\n scaleY:\r\n Math.round(\r\n 100 * Math.min(0.5, originBnds.height / dialogRect.height)\r\n ) / 100\r\n };\r\n }\r\n return { centerX: 0, centerY: 0, scaleX: 0.5, scaleY: 0.5 };\r\n\r\n /**\r\n * This is a fallback if the origin information is no longer valid, then the\r\n * origin bounds simply becomes the current bounds for the dialogContainer's parent\r\n */\r\n function currentBounds() {\r\n var cntr = element ? element.parent() : null;\r\n var parent = cntr ? cntr.parent() : null;\r\n\r\n return parent ? self.clientRect(parent) : null;\r\n }\r\n },\r\n\r\n /**\r\n * Calculate the zoom transform from dialog to origin.\r\n *\r\n * We use this to set the dialog position immediately;\r\n * then the md-transition-in actually translates back to\r\n * `translate3d(0,0,0) scale(1.0)`...\r\n *\r\n * NOTE: all values are rounded to the nearest integer\r\n */\r\n calculateZoomToOrigin: function(element, originator) {\r\n var zoomTemplate =\r\n \"translate3d( {centerX}px, {centerY}px, 0 ) scale( {scaleX}, {scaleY} )\";\r\n var buildZoom = angular.bind(null, $mdUtil.supplant, zoomTemplate);\r\n\r\n return buildZoom(self.calculateTransformValues(element, originator));\r\n },\r\n\r\n /**\r\n * Calculate the slide transform from panel to origin.\r\n * NOTE: all values are rounded to the nearest integer\r\n */\r\n calculateSlideToOrigin: function(element, originator) {\r\n var slideTemplate = \"translate3d( {centerX}px, {centerY}px, 0 )\";\r\n var buildSlide = angular.bind(null, $mdUtil.supplant, slideTemplate);\r\n\r\n return buildSlide(self.calculateTransformValues(element, originator));\r\n },\r\n\r\n /**\r\n * Enhance raw values to represent valid css stylings...\r\n */\r\n toCss: function(raw) {\r\n var css = {};\r\n var lookups =\r\n \"left top right bottom width height x y min-width min-height max-width max-height\";\r\n\r\n angular.forEach(raw, function(value, key) {\r\n if (angular.isUndefined(value)) return;\r\n\r\n if (lookups.indexOf(key) >= 0) {\r\n css[key] = value + \"px\";\r\n } else {\r\n switch (key) {\r\n case \"transition\":\r\n convertToVendor(key, $mdConstant.CSS.TRANSITION, value);\r\n break;\r\n case \"transform\":\r\n convertToVendor(key, $mdConstant.CSS.TRANSFORM, value);\r\n break;\r\n case \"transformOrigin\":\r\n convertToVendor(key, $mdConstant.CSS.TRANSFORM_ORIGIN, value);\r\n break;\r\n case \"font-size\":\r\n css[\"font-size\"] = value; // font sizes aren't always in px\r\n break;\r\n }\r\n }\r\n });\r\n\r\n return css;\r\n\r\n function convertToVendor(key, vendor, value) {\r\n angular.forEach(vendor.split(\" \"), function(key) {\r\n css[key] = value;\r\n });\r\n }\r\n },\r\n\r\n /**\r\n * Convert the translate CSS value to key/value pair(s).\r\n */\r\n toTransformCss: function(transform, addTransition, transition) {\r\n var css = {};\r\n angular.forEach($mdConstant.CSS.TRANSFORM.split(\" \"), function(key) {\r\n css[key] = transform;\r\n });\r\n\r\n if (addTransition) {\r\n transition =\r\n transition ||\r\n \"all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important\";\r\n css.transition = transition;\r\n }\r\n\r\n return css;\r\n },\r\n\r\n /**\r\n * Clone the Rect and calculate the height/width if needed\r\n */\r\n copyRect: function(source, destination) {\r\n if (!source) return null;\r\n\r\n destination = destination || {};\r\n\r\n angular.forEach(\r\n \"left top right bottom width height\".split(\" \"),\r\n function(key) {\r\n destination[key] = Math.round(source[key]);\r\n }\r\n );\r\n\r\n destination.width =\r\n destination.width || destination.right - destination.left;\r\n destination.height =\r\n destination.height || destination.bottom - destination.top;\r\n\r\n return destination;\r\n },\r\n\r\n /**\r\n * Calculate ClientRect of element; return null if hidden or zero size\r\n */\r\n clientRect: function(element) {\r\n var bounds = angular.element(element)[0].getBoundingClientRect();\r\n var isPositiveSizeClientRect = function(rect) {\r\n return rect && rect.width > 0 && rect.height > 0;\r\n };\r\n\r\n // If the event origin element has zero size, it has probably been hidden.\r\n return isPositiveSizeClientRect(bounds)\r\n ? self.copyRect(bounds)\r\n : null;\r\n },\r\n\r\n /**\r\n * Calculate 'rounded' center point of Rect\r\n */\r\n centerPointFor: function(targetRect) {\r\n return targetRect\r\n ? {\r\n x: Math.round(targetRect.left + targetRect.width / 2),\r\n y: Math.round(targetRect.top + targetRect.height / 2)\r\n }\r\n : { x: 0, y: 0 };\r\n }\r\n });\r\n }\r\n })();\r\n (function() {\r\n \"use strict\";\r\n\r\n \"use strict\";\r\n\r\n if (angular.version.minor >= 4) {\r\n angular.module(\"material.core.animate\", []);\r\n } else {\r\n (function() {\r\n var forEach = angular.forEach;\r\n\r\n var WEBKIT = angular.isDefined(\r\n document.documentElement.style.WebkitAppearance\r\n );\r\n var TRANSITION_PROP = WEBKIT ? \"WebkitTransition\" : \"transition\";\r\n var ANIMATION_PROP = WEBKIT ? \"WebkitAnimation\" : \"animation\";\r\n var PREFIX = WEBKIT ? \"-webkit-\" : \"\";\r\n\r\n var TRANSITION_EVENTS =\r\n (WEBKIT ? \"webkitTransitionEnd \" : \"\") + \"transitionend\";\r\n var ANIMATION_EVENTS =\r\n (WEBKIT ? \"webkitAnimationEnd \" : \"\") + \"animationend\";\r\n\r\n var $$ForceReflowFactory = [\r\n \"$document\",\r\n function($document) {\r\n return function() {\r\n return $document[0].body.clientWidth + 1;\r\n };\r\n }\r\n ];\r\n\r\n var $$rAFMutexFactory = [\r\n \"$$rAF\",\r\n function($$rAF) {\r\n return function() {\r\n var passed = false;\r\n $$rAF(function() {\r\n passed = true;\r\n });\r\n return function(fn) {\r\n passed ? fn() : $$rAF(fn);\r\n };\r\n };\r\n }\r\n ];\r\n\r\n var $$AnimateRunnerFactory = [\r\n \"$q\",\r\n \"$$rAFMutex\",\r\n function($q, $$rAFMutex) {\r\n var INITIAL_STATE = 0;\r\n var DONE_PENDING_STATE = 1;\r\n var DONE_COMPLETE_STATE = 2;\r\n\r\n function AnimateRunner(host) {\r\n this.setHost(host);\r\n\r\n this._doneCallbacks = [];\r\n this._runInAnimationFrame = $$rAFMutex();\r\n this._state = 0;\r\n }\r\n\r\n AnimateRunner.prototype = {\r\n setHost: function(host) {\r\n this.host = host || {};\r\n },\r\n\r\n done: function(fn) {\r\n if (this._state === DONE_COMPLETE_STATE) {\r\n fn();\r\n } else {\r\n this._doneCallbacks.push(fn);\r\n }\r\n },\r\n\r\n progress: angular.noop,\r\n\r\n getPromise: function() {\r\n if (!this.promise) {\r\n var self = this;\r\n this.promise = $q(function(resolve, reject) {\r\n self.done(function(status) {\r\n status === false ? reject() : resolve();\r\n });\r\n });\r\n }\r\n return this.promise;\r\n },\r\n\r\n then: function(resolveHandler, rejectHandler) {\r\n return this.getPromise().then(resolveHandler, rejectHandler);\r\n },\r\n\r\n catch: function(handler) {\r\n return this.getPromise()[\"catch\"](handler);\r\n },\r\n\r\n finally: function(handler) {\r\n return this.getPromise()[\"finally\"](handler);\r\n },\r\n\r\n pause: function() {\r\n if (this.host.pause) {\r\n this.host.pause();\r\n }\r\n },\r\n\r\n resume: function() {\r\n if (this.host.resume) {\r\n this.host.resume();\r\n }\r\n },\r\n\r\n end: function() {\r\n if (this.host.end) {\r\n this.host.end();\r\n }\r\n this._resolve(true);\r\n },\r\n\r\n cancel: function() {\r\n if (this.host.cancel) {\r\n this.host.cancel();\r\n }\r\n this._resolve(false);\r\n },\r\n\r\n complete: function(response) {\r\n var self = this;\r\n if (self._state === INITIAL_STATE) {\r\n self._state = DONE_PENDING_STATE;\r\n self._runInAnimationFrame(function() {\r\n self._resolve(response);\r\n });\r\n }\r\n },\r\n\r\n _resolve: function(response) {\r\n if (this._state !== DONE_COMPLETE_STATE) {\r\n forEach(this._doneCallbacks, function(fn) {\r\n fn(response);\r\n });\r\n this._doneCallbacks.length = 0;\r\n this._state = DONE_COMPLETE_STATE;\r\n }\r\n }\r\n };\r\n\r\n // Polyfill AnimateRunner.all which is used by input animations\r\n AnimateRunner.all = function(runners, callback) {\r\n var count = 0;\r\n var status = true;\r\n forEach(runners, function(runner) {\r\n runner.done(onProgress);\r\n });\r\n\r\n function onProgress(response) {\r\n status = status && response;\r\n if (++count === runners.length) {\r\n callback(status);\r\n }\r\n }\r\n };\r\n\r\n return AnimateRunner;\r\n }\r\n ];\r\n\r\n angular\r\n .module(\"material.core.animate\", [])\r\n .factory(\"$$forceReflow\", $$ForceReflowFactory)\r\n .factory(\"$$AnimateRunner\", $$AnimateRunnerFactory)\r\n .factory(\"$$rAFMutex\", $$rAFMutexFactory)\r\n .factory(\"$animateCss\", [\r\n \"$window\",\r\n \"$$rAF\",\r\n \"$$AnimateRunner\",\r\n \"$$forceReflow\",\r\n \"$$jqLite\",\r\n \"$timeout\",\r\n \"$animate\",\r\n function(\r\n $window,\r\n $$rAF,\r\n $$AnimateRunner,\r\n $$forceReflow,\r\n $$jqLite,\r\n $timeout,\r\n $animate\r\n ) {\r\n function init(element, options) {\r\n var temporaryStyles = [];\r\n var node = getDomNode(element);\r\n var areAnimationsAllowed = node && $animate.enabled();\r\n\r\n var hasCompleteStyles = false;\r\n var hasCompleteClasses = false;\r\n\r\n if (areAnimationsAllowed) {\r\n if (options.transitionStyle) {\r\n temporaryStyles.push([\r\n PREFIX + \"transition\",\r\n options.transitionStyle\r\n ]);\r\n }\r\n\r\n if (options.keyframeStyle) {\r\n temporaryStyles.push([\r\n PREFIX + \"animation\",\r\n options.keyframeStyle\r\n ]);\r\n }\r\n\r\n if (options.delay) {\r\n temporaryStyles.push([\r\n PREFIX + \"transition-delay\",\r\n options.delay + \"s\"\r\n ]);\r\n }\r\n\r\n if (options.duration) {\r\n temporaryStyles.push([\r\n PREFIX + \"transition-duration\",\r\n options.duration + \"s\"\r\n ]);\r\n }\r\n\r\n hasCompleteStyles =\r\n options.keyframeStyle ||\r\n (options.to &&\r\n (options.duration > 0 || options.transitionStyle));\r\n hasCompleteClasses =\r\n !!options.addClass || !!options.removeClass;\r\n\r\n blockTransition(element, true);\r\n }\r\n\r\n var hasCompleteAnimation =\r\n areAnimationsAllowed &&\r\n (hasCompleteStyles || hasCompleteClasses);\r\n\r\n applyAnimationFromStyles(element, options);\r\n\r\n var animationClosed = false;\r\n var events, eventFn;\r\n\r\n return {\r\n close: $window.close,\r\n start: function() {\r\n var runner = new $$AnimateRunner();\r\n waitUntilQuiet(function() {\r\n blockTransition(element, false);\r\n if (!hasCompleteAnimation) {\r\n return close();\r\n }\r\n\r\n forEach(temporaryStyles, function(entry) {\r\n var key = entry[0];\r\n var value = entry[1];\r\n node.style[camelCase(key)] = value;\r\n });\r\n\r\n applyClasses(element, options);\r\n\r\n var timings = computeTimings(element);\r\n if (timings.duration === 0) {\r\n return close();\r\n }\r\n\r\n var moreStyles = [];\r\n\r\n if (options.easing) {\r\n if (timings.transitionDuration) {\r\n moreStyles.push([\r\n PREFIX + \"transition-timing-function\",\r\n options.easing\r\n ]);\r\n }\r\n if (timings.animationDuration) {\r\n moreStyles.push([\r\n PREFIX + \"animation-timing-function\",\r\n options.easing\r\n ]);\r\n }\r\n }\r\n\r\n if (options.delay && timings.animationDelay) {\r\n moreStyles.push([\r\n PREFIX + \"animation-delay\",\r\n options.delay + \"s\"\r\n ]);\r\n }\r\n\r\n if (options.duration && timings.animationDuration) {\r\n moreStyles.push([\r\n PREFIX + \"animation-duration\",\r\n options.duration + \"s\"\r\n ]);\r\n }\r\n\r\n forEach(moreStyles, function(entry) {\r\n var key = entry[0];\r\n var value = entry[1];\r\n node.style[camelCase(key)] = value;\r\n temporaryStyles.push(entry);\r\n });\r\n\r\n var maxDelay = timings.delay;\r\n var maxDelayTime = maxDelay * 1000;\r\n var maxDuration = timings.duration;\r\n var maxDurationTime = maxDuration * 1000;\r\n var startTime = Date.now();\r\n\r\n events = [];\r\n if (timings.transitionDuration) {\r\n events.push(TRANSITION_EVENTS);\r\n }\r\n if (timings.animationDuration) {\r\n events.push(ANIMATION_EVENTS);\r\n }\r\n events = events.join(\" \");\r\n eventFn = function(event) {\r\n event.stopPropagation();\r\n var ev = event.originalEvent || event;\r\n var timeStamp = ev.timeStamp || Date.now();\r\n var elapsedTime = parseFloat(ev.elapsedTime.toFixed(3));\r\n if (\r\n Math.max(timeStamp - startTime, 0) >= maxDelayTime &&\r\n elapsedTime >= maxDuration\r\n ) {\r\n close();\r\n }\r\n };\r\n element.on(events, eventFn);\r\n\r\n applyAnimationToStyles(element, options);\r\n\r\n $timeout(\r\n close,\r\n maxDelayTime + maxDurationTime * 1.5,\r\n false\r\n );\r\n });\r\n\r\n return runner;\r\n\r\n function close() {\r\n if (animationClosed) return;\r\n animationClosed = true;\r\n\r\n if (events && eventFn) {\r\n element.off(events, eventFn);\r\n }\r\n applyClasses(element, options);\r\n applyAnimationStyles(element, options);\r\n forEach(temporaryStyles, function(entry) {\r\n node.style[camelCase(entry[0])] = \"\";\r\n });\r\n runner.complete(true);\r\n return runner;\r\n }\r\n }\r\n };\r\n }\r\n\r\n function applyClasses(element, options) {\r\n if (options.addClass) {\r\n $$jqLite.addClass(element, options.addClass);\r\n options.addClass = null;\r\n }\r\n if (options.removeClass) {\r\n $$jqLite.removeClass(element, options.removeClass);\r\n options.removeClass = null;\r\n }\r\n }\r\n\r\n function computeTimings(element) {\r\n var node = getDomNode(element);\r\n var cs = $window.getComputedStyle(node);\r\n var tdr = parseMaxTime(cs[prop(\"transitionDuration\")]);\r\n var adr = parseMaxTime(cs[prop(\"animationDuration\")]);\r\n var tdy = parseMaxTime(cs[prop(\"transitionDelay\")]);\r\n var ady = parseMaxTime(cs[prop(\"animationDelay\")]);\r\n\r\n adr *= parseInt(cs[prop(\"animationIterationCount\")], 10) || 1;\r\n var duration = Math.max(adr, tdr);\r\n var delay = Math.max(ady, tdy);\r\n\r\n return {\r\n duration: duration,\r\n delay: delay,\r\n animationDuration: adr,\r\n transitionDuration: tdr,\r\n animationDelay: ady,\r\n transitionDelay: tdy\r\n };\r\n\r\n function prop(key) {\r\n return WEBKIT\r\n ? \"Webkit\" + key.charAt(0).toUpperCase() + key.substr(1)\r\n : key;\r\n }\r\n }\r\n\r\n function parseMaxTime(str) {\r\n var maxValue = 0;\r\n var values = (str || \"\").split(/\\s*,\\s*/);\r\n forEach(values, function(value) {\r\n // it's always safe to consider only second values and omit `ms` values since\r\n // getComputedStyle will always handle the conversion for us\r\n if (value.charAt(value.length - 1) == \"s\") {\r\n value = value.substring(0, value.length - 1);\r\n }\r\n value = parseFloat(value) || 0;\r\n maxValue = maxValue ? Math.max(value, maxValue) : value;\r\n });\r\n return maxValue;\r\n }\r\n\r\n var cancelLastRAFRequest;\r\n var rafWaitQueue = [];\r\n function waitUntilQuiet(callback) {\r\n if (cancelLastRAFRequest) {\r\n cancelLastRAFRequest(); //cancels the request\r\n }\r\n rafWaitQueue.push(callback);\r\n cancelLastRAFRequest = $$rAF(function() {\r\n cancelLastRAFRequest = null;\r\n\r\n // DO NOT REMOVE THIS LINE OR REFACTOR OUT THE `pageWidth` variable.\r\n // PLEASE EXAMINE THE `$$forceReflow` service to understand why.\r\n var pageWidth = $$forceReflow();\r\n\r\n // we use a for loop to ensure that if the queue is changed\r\n // during this looping then it will consider new requests\r\n for (var i = 0; i < rafWaitQueue.length; i++) {\r\n rafWaitQueue[i](pageWidth);\r\n }\r\n rafWaitQueue.length = 0;\r\n });\r\n }\r\n\r\n function applyAnimationStyles(element, options) {\r\n applyAnimationFromStyles(element, options);\r\n applyAnimationToStyles(element, options);\r\n }\r\n\r\n function applyAnimationFromStyles(element, options) {\r\n if (options.from) {\r\n element.css(options.from);\r\n options.from = null;\r\n }\r\n }\r\n\r\n function applyAnimationToStyles(element, options) {\r\n if (options.to) {\r\n element.css(options.to);\r\n options.to = null;\r\n }\r\n }\r\n\r\n function getDomNode(element) {\r\n for (var i = 0; i < element.length; i++) {\r\n if (element[i].nodeType === 1) return element[i];\r\n }\r\n }\r\n\r\n function blockTransition(element, bool) {\r\n var node = getDomNode(element);\r\n var key = camelCase(PREFIX + \"transition-delay\");\r\n node.style[key] = bool ? \"-9999s\" : \"\";\r\n }\r\n\r\n return init;\r\n }\r\n ]);\r\n\r\n /**\r\n * Older browsers [FF31] expect camelCase\r\n * property keys.\r\n * e.g.\r\n * animation-duration --> animationDuration\r\n */\r\n function camelCase(str) {\r\n return str.replace(/-[a-z]/g, function(str) {\r\n return str.charAt(1).toUpperCase();\r\n });\r\n }\r\n })();\r\n }\r\n })();\r\n (function() {\r\n \"use strict\";\r\n\r\n /**\r\n * @ngdoc module\r\n * @name material.components.autocomplete\r\n */\r\n /*\r\n * @see js folder for autocomplete implementation\r\n */\r\n angular.module(\"material.components.autocomplete\", [\r\n \"material.core\",\r\n \"material.components.icon\",\r\n \"material.components.virtualRepeat\"\r\n ]);\r\n })();\r\n (function() {\r\n \"use strict\";\r\n\r\n /*\r\n * @ngdoc module\r\n * @name material.components.backdrop\r\n * @description Backdrop\r\n */\r\n\r\n /**\r\n * @ngdoc directive\r\n * @name mdBackdrop\r\n * @module material.components.backdrop\r\n *\r\n * @restrict E\r\n *\r\n * @description\r\n * `` is a backdrop element used by other components, such as dialog and bottom sheet.\r\n * Apply class `opaque` to make the backdrop use the theme backdrop color.\r\n *\r\n */\r\n\r\n angular\r\n .module(\"material.components.backdrop\", [\"material.core\"])\r\n .directive(\"mdBackdrop\", [\r\n \"$mdTheming\",\r\n \"$mdUtil\",\r\n \"$animate\",\r\n \"$rootElement\",\r\n \"$window\",\r\n \"$log\",\r\n \"$$rAF\",\r\n \"$document\",\r\n function BackdropDirective(\r\n $mdTheming,\r\n $mdUtil,\r\n $animate,\r\n $rootElement,\r\n $window,\r\n $log,\r\n $$rAF,\r\n $document\r\n ) {\r\n var ERROR_CSS_POSITION =\r\n \" may not work properly in a scrolled, static-positioned parent container.\";\r\n\r\n return {\r\n restrict: \"E\",\r\n link: postLink\r\n };\r\n\r\n function postLink(scope, element, attrs) {\r\n // backdrop may be outside the $rootElement, tell ngAnimate to animate regardless\r\n if ($animate.pin) $animate.pin(element, $rootElement);\r\n\r\n var bodyStyles;\r\n\r\n $$rAF(function() {\r\n // If body scrolling has been disabled using mdUtil.disableBodyScroll(),\r\n // adjust the 'backdrop' height to account for the fixed 'body' top offset.\r\n // Note that this can be pretty expensive and is better done inside the $$rAF.\r\n bodyStyles = $window.getComputedStyle($document[0].body);\r\n\r\n if (bodyStyles.position === \"fixed\") {\r\n var resizeHandler = $mdUtil.debounce(\r\n function() {\r\n bodyStyles = $window.getComputedStyle($document[0].body);\r\n resize();\r\n },\r\n 60,\r\n null,\r\n false\r\n );\r\n\r\n resize();\r\n angular.element($window).on(\"resize\", resizeHandler);\r\n\r\n scope.$on(\"$destroy\", function() {\r\n angular.element($window).off(\"resize\", resizeHandler);\r\n });\r\n }\r\n\r\n // Often $animate.enter() is used to append the backDrop element\r\n // so let's wait until $animate is done...\r\n var parent = element.parent();\r\n\r\n if (parent.length) {\r\n if (parent[0].nodeName === \"BODY\") {\r\n element.css(\"position\", \"fixed\");\r\n }\r\n\r\n var styles = $window.getComputedStyle(parent[0]);\r\n\r\n if (styles.position === \"static\") {\r\n // backdrop uses position:absolute and will not work properly with parent position:static (default)\r\n $log.warn(ERROR_CSS_POSITION);\r\n }\r\n\r\n // Only inherit the parent if the backdrop has a parent.\r\n $mdTheming.inherit(element, parent);\r\n }\r\n });\r\n\r\n function resize() {\r\n var viewportHeight =\r\n parseInt(bodyStyles.height, 10) +\r\n Math.abs(parseInt(bodyStyles.top, 10));\r\n element.css(\"height\", viewportHeight + \"px\");\r\n }\r\n }\r\n }\r\n ]);\r\n })();\r\n (function() {\r\n \"use strict\";\r\n\r\n /**\r\n * @ngdoc module\r\n * @name material.components.bottomSheet\r\n * @description\r\n * BottomSheet\r\n */\r\n MdBottomSheetDirective.$inject = [\"$mdBottomSheet\"];\r\n MdBottomSheetProvider.$inject = [\"$$interimElementProvider\"];\r\n angular\r\n .module(\"material.components.bottomSheet\", [\r\n \"material.core\",\r\n \"material.components.backdrop\"\r\n ])\r\n .directive(\"mdBottomSheet\", MdBottomSheetDirective)\r\n .provider(\"$mdBottomSheet\", MdBottomSheetProvider);\r\n\r\n /* @ngInject */\r\n function MdBottomSheetDirective($mdBottomSheet) {\r\n return {\r\n restrict: \"E\",\r\n link: function postLink(scope, element) {\r\n element.addClass(\"_md\"); // private md component indicator for styling\r\n\r\n // When navigation force destroys an interimElement, then\r\n // listen and $destroy() that interim instance...\r\n scope.$on(\"$destroy\", function() {\r\n $mdBottomSheet.destroy();\r\n });\r\n }\r\n };\r\n }\r\n\r\n /**\r\n * @ngdoc service\r\n * @name $mdBottomSheet\r\n * @module material.components.bottomSheet\r\n *\r\n * @description\r\n * `$mdBottomSheet` opens a bottom sheet over the app and provides a simple promise API.\r\n *\r\n * ## Restrictions\r\n *\r\n * - The bottom sheet's template must have an outer `` element.\r\n * - Add the `md-grid` class to the bottom sheet for a grid layout.\r\n * - Add the `md-list` class to the bottom sheet for a list layout.\r\n *\r\n * @usage\r\n * \r\n *
\r\n * \r\n * Open a Bottom Sheet!\r\n * \r\n *
\r\n * \r\n * \r\n * var app = angular.module('app', ['ngMaterial']);\r\n * app.controller('MyController', function($scope, $mdBottomSheet) {\r\n * $scope.openBottomSheet = function() {\r\n * $mdBottomSheet.show({\r\n * template: 'Hello!'\r\n * });\r\n * };\r\n * });\r\n * \r\n */\r\n\r\n /**\r\n * @ngdoc method\r\n * @name $mdBottomSheet#show\r\n *\r\n * @description\r\n * Show a bottom sheet with the specified options.\r\n *\r\n * @param {object} options An options object, with the following properties:\r\n *\r\n * - `templateUrl` - `{string=}`: The url of an html template file that will\r\n * be used as the content of the bottom sheet. Restrictions: the template must\r\n * have an outer `md-bottom-sheet` element.\r\n * - `template` - `{string=}`: Same as templateUrl, except this is an actual\r\n * template string.\r\n * - `scope` - `{object=}`: the scope to link the template / controller to. If none is specified, it will create a new child scope.\r\n * This scope will be destroyed when the bottom sheet is removed unless `preserveScope` is set to true.\r\n * - `preserveScope` - `{boolean=}`: whether to preserve the scope when the element is removed. Default is false\r\n * - `controller` - `{string=}`: The controller to associate with this bottom sheet.\r\n * - `locals` - `{string=}`: An object containing key/value pairs. The keys will\r\n * be used as names of values to inject into the controller. For example,\r\n * `locals: {three: 3}` would inject `three` into the controller with the value\r\n * of 3.\r\n * - `clickOutsideToClose` - `{boolean=}`: Whether the user can click outside the bottom sheet to\r\n * close it. Default true.\r\n * - `disableBackdrop` - `{boolean=}`: When set to true, the bottomsheet will not show a backdrop.\r\n * - `escapeToClose` - `{boolean=}`: Whether the user can press escape to close the bottom sheet.\r\n * Default true.\r\n * - `resolve` - `{object=}`: Similar to locals, except it takes promises as values\r\n * and the bottom sheet will not open until the promises resolve.\r\n * - `controllerAs` - `{string=}`: An alias to assign the controller to on the scope.\r\n * - `parent` - `{element=}`: The element to append the bottom sheet to. The `parent` may be a `function`, `string`,\r\n * `object`, or null. Defaults to appending to the body of the root element (or the root element) of the application.\r\n * e.g. angular.element(document.getElementById('content')) or \"#content\"\r\n * - `disableParentScroll` - `{boolean=}`: Whether to disable scrolling while the bottom sheet is open.\r\n * Default true.\r\n *\r\n * @returns {promise} A promise that can be resolved with `$mdBottomSheet.hide()` or\r\n * rejected with `$mdBottomSheet.cancel()`.\r\n */\r\n\r\n /**\r\n * @ngdoc method\r\n * @name $mdBottomSheet#hide\r\n *\r\n * @description\r\n * Hide the existing bottom sheet and resolve the promise returned from\r\n * `$mdBottomSheet.show()`. This call will close the most recently opened/current bottomsheet (if any).\r\n *\r\n * @param {*=} response An argument for the resolved promise.\r\n *\r\n */\r\n\r\n /**\r\n * @ngdoc method\r\n * @name $mdBottomSheet#cancel\r\n *\r\n * @description\r\n * Hide the existing bottom sheet and reject the promise returned from\r\n * `$mdBottomSheet.show()`.\r\n *\r\n * @param {*=} response An argument for the rejected promise.\r\n *\r\n */\r\n\r\n function MdBottomSheetProvider($$interimElementProvider) {\r\n // how fast we need to flick down to close the sheet, pixels/ms\r\n bottomSheetDefaults.$inject = [\r\n \"$animate\",\r\n \"$mdConstant\",\r\n \"$mdUtil\",\r\n \"$mdTheming\",\r\n \"$mdBottomSheet\",\r\n \"$rootElement\",\r\n \"$mdGesture\",\r\n \"$log\"\r\n ];\r\n var CLOSING_VELOCITY = 0.5;\r\n var PADDING = 80; // same as css\r\n\r\n return $$interimElementProvider(\"$mdBottomSheet\").setDefaults({\r\n methods: [\r\n \"disableParentScroll\",\r\n \"escapeToClose\",\r\n \"clickOutsideToClose\"\r\n ],\r\n options: bottomSheetDefaults\r\n });\r\n\r\n /* @ngInject */\r\n function bottomSheetDefaults(\r\n $animate,\r\n $mdConstant,\r\n $mdUtil,\r\n $mdTheming,\r\n $mdBottomSheet,\r\n $rootElement,\r\n $mdGesture,\r\n $log\r\n ) {\r\n var backdrop;\r\n\r\n return {\r\n themable: true,\r\n onShow: onShow,\r\n onRemove: onRemove,\r\n disableBackdrop: false,\r\n escapeToClose: true,\r\n clickOutsideToClose: true,\r\n disableParentScroll: true\r\n };\r\n\r\n function onShow(scope, element, options, controller) {\r\n element = $mdUtil.extractElementByName(element, \"md-bottom-sheet\");\r\n\r\n // prevent tab focus or click focus on the bottom-sheet container\r\n element.attr(\"tabindex\", \"-1\");\r\n\r\n // Once the md-bottom-sheet has `ng-cloak` applied on his template the opening animation will not work properly.\r\n // This is a very common problem, so we have to notify the developer about this.\r\n if (element.hasClass(\"ng-cloak\")) {\r\n var message =\r\n \"$mdBottomSheet: using `` will affect the bottom-sheet opening animations.\";\r\n $log.warn(message, element[0]);\r\n }\r\n\r\n if (!options.disableBackdrop) {\r\n // Add a backdrop that will close on click\r\n backdrop = $mdUtil.createBackdrop(\r\n scope,\r\n \"md-bottom-sheet-backdrop md-opaque\"\r\n );\r\n\r\n // Prevent mouse focus on backdrop; ONLY programatic focus allowed.\r\n // This allows clicks on backdrop to propogate to the $rootElement and\r\n // ESC key events to be detected properly.\r\n\r\n backdrop[0].tabIndex = -1;\r\n\r\n if (options.clickOutsideToClose) {\r\n backdrop.on(\"click\", function() {\r\n $mdUtil.nextTick($mdBottomSheet.cancel, true);\r\n });\r\n }\r\n\r\n $mdTheming.inherit(backdrop, options.parent);\r\n\r\n $animate.enter(backdrop, options.parent, null);\r\n }\r\n\r\n var bottomSheet = new BottomSheet(element, options.parent);\r\n options.bottomSheet = bottomSheet;\r\n\r\n $mdTheming.inherit(bottomSheet.element, options.parent);\r\n\r\n if (options.disableParentScroll) {\r\n options.restoreScroll = $mdUtil.disableScrollAround(\r\n bottomSheet.element,\r\n options.parent\r\n );\r\n }\r\n\r\n return $animate\r\n .enter(bottomSheet.element, options.parent, backdrop)\r\n .then(function() {\r\n var focusable =\r\n $mdUtil.findFocusTarget(element) ||\r\n angular.element(\r\n element[0].querySelector(\"button\") ||\r\n element[0].querySelector(\"a\") ||\r\n element[0].querySelector($mdUtil.prefixer(\"ng-click\", true))\r\n ) ||\r\n backdrop;\r\n\r\n if (options.escapeToClose) {\r\n options.rootElementKeyupCallback = function(e) {\r\n if (e.keyCode === $mdConstant.KEY_CODE.ESCAPE) {\r\n $mdUtil.nextTick($mdBottomSheet.cancel, true);\r\n }\r\n };\r\n\r\n $rootElement.on(\"keyup\", options.rootElementKeyupCallback);\r\n focusable && focusable.focus();\r\n }\r\n });\r\n }\r\n\r\n function onRemove(scope, element, options) {\r\n var bottomSheet = options.bottomSheet;\r\n\r\n if (!options.disableBackdrop) $animate.leave(backdrop);\r\n return $animate.leave(bottomSheet.element).then(function() {\r\n if (options.disableParentScroll) {\r\n options.restoreScroll();\r\n delete options.restoreScroll;\r\n }\r\n\r\n bottomSheet.cleanup();\r\n });\r\n }\r\n\r\n /**\r\n * BottomSheet class to apply bottom-sheet behavior to an element\r\n */\r\n function BottomSheet(element, parent) {\r\n var deregister = $mdGesture.register(parent, \"drag\", {\r\n horizontal: false\r\n });\r\n parent\r\n .on(\"$md.dragstart\", onDragStart)\r\n .on(\"$md.drag\", onDrag)\r\n .on(\"$md.dragend\", onDragEnd);\r\n\r\n return {\r\n element: element,\r\n cleanup: function cleanup() {\r\n deregister();\r\n parent.off(\"$md.dragstart\", onDragStart);\r\n parent.off(\"$md.drag\", onDrag);\r\n parent.off(\"$md.dragend\", onDragEnd);\r\n }\r\n };\r\n\r\n function onDragStart(ev) {\r\n // Disable transitions on transform so that it feels fast\r\n element.css($mdConstant.CSS.TRANSITION_DURATION, \"0ms\");\r\n }\r\n\r\n function onDrag(ev) {\r\n var transform = ev.pointer.distanceY;\r\n if (transform < 5) {\r\n // Slow down drag when trying to drag up, and stop after PADDING\r\n transform = Math.max(-PADDING, transform / 2);\r\n }\r\n element.css(\r\n $mdConstant.CSS.TRANSFORM,\r\n \"translate3d(0,\" + (PADDING + transform) + \"px,0)\"\r\n );\r\n }\r\n\r\n function onDragEnd(ev) {\r\n if (\r\n ev.pointer.distanceY > 0 &&\r\n (ev.pointer.distanceY > 20 ||\r\n Math.abs(ev.pointer.velocityY) > CLOSING_VELOCITY)\r\n ) {\r\n var distanceRemaining =\r\n element.prop(\"offsetHeight\") - ev.pointer.distanceY;\r\n var transitionDuration = Math.min(\r\n (distanceRemaining / ev.pointer.velocityY) * 0.75,\r\n 500\r\n );\r\n element.css(\r\n $mdConstant.CSS.TRANSITION_DURATION,\r\n transitionDuration + \"ms\"\r\n );\r\n $mdUtil.nextTick($mdBottomSheet.cancel, true);\r\n } else {\r\n element.css($mdConstant.CSS.TRANSITION_DURATION, \"\");\r\n element.css($mdConstant.CSS.TRANSFORM, \"\");\r\n }\r\n }\r\n }\r\n }\r\n }\r\n })();\r\n (function() {\r\n \"use strict\";\r\n\r\n /**\r\n * @ngdoc module\r\n * @name material.components.button\r\n * @description\r\n *\r\n * Button\r\n */\r\n MdButtonDirective.$inject = [\r\n \"$mdButtonInkRipple\",\r\n \"$mdTheming\",\r\n \"$mdAria\",\r\n \"$timeout\"\r\n ];\r\n MdAnchorDirective.$inject = [\"$mdTheming\"];\r\n angular\r\n .module(\"material.components.button\", [\"material.core\"])\r\n .directive(\"mdButton\", MdButtonDirective)\r\n .directive(\"a\", MdAnchorDirective);\r\n\r\n /**\r\n * @private\r\n * @restrict E\r\n *\r\n * @description\r\n * `a` is an anchor directive used to inherit theme colors for md-primary, md-accent, etc.\r\n *\r\n * @usage\r\n *\r\n * \r\n * \r\n * \r\n * \r\n * \r\n */\r\n function MdAnchorDirective($mdTheming) {\r\n return {\r\n restrict: \"E\",\r\n link: function postLink(scope, element) {\r\n // Make sure to inherit theme so stand-alone anchors\r\n // support theme colors for md-primary, md-accent, etc.\r\n $mdTheming(element);\r\n }\r\n };\r\n }\r\n\r\n /**\r\n * @ngdoc directive\r\n * @name mdButton\r\n * @module material.components.button\r\n *\r\n * @restrict E\r\n *\r\n * @description\r\n * `` is a button directive with optional ink ripples (default enabled).\r\n *\r\n * If you supply a `href` or `ng-href` attribute, it will become an `` element. Otherwise, it\r\n * will become a `
![](\"https://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B8olV15J7abPSGFxemFiQVRtb1k/layout_adaptive_breakpoints_01.png\")
\r\n *