\n *
\n * \n * {{ number }}\n *
\n * \n * Fade me in out\n *
\n * \n * \n * ```\n *\n * Notice the CSS class **fade**? We can now create the CSS transition code that references this class:\n *\n * ```css\n * /* The starting CSS styles for the enter animation */\n * .fade.ng-enter {\n * transition:0.5s linear all;\n * opacity:0;\n * }\n *\n * /* The finishing CSS styles for the enter animation */\n * .fade.ng-enter.ng-enter-active {\n * opacity:1;\n * }\n * ```\n *\n * The key thing to remember here is that, depending on the animation event (which each of the directives above trigger depending on what's going on) two\n * generated CSS classes will be applied to the element; in the example above we have `.ng-enter` and `.ng-enter-active`. For CSS transitions, the transition\n * code **must** be defined within the starting CSS class (in this case `.ng-enter`). The destination class is what the transition will animate towards.\n *\n * If for example we wanted to create animations for `leave` and `move` (ngRepeat triggers move) then we can do so using the same CSS naming conventions:\n *\n * ```css\n * /* now the element will fade out before it is removed from the DOM */\n * .fade.ng-leave {\n * transition:0.5s linear all;\n * opacity:1;\n * }\n * .fade.ng-leave.ng-leave-active {\n * opacity:0;\n * }\n * ```\n *\n * We can also make use of **CSS Keyframes** by referencing the keyframe animation within the starting CSS class:\n *\n * ```css\n * /* there is no need to define anything inside of the destination\n * CSS class since the keyframe will take charge of the animation */\n * .fade.ng-leave {\n * animation: my_fade_animation 0.5s linear;\n * -webkit-animation: my_fade_animation 0.5s linear;\n * }\n *\n * @keyframes my_fade_animation {\n * from { opacity:1; }\n * to { opacity:0; }\n * }\n *\n * @-webkit-keyframes my_fade_animation {\n * from { opacity:1; }\n * to { opacity:0; }\n * }\n * ```\n *\n * Feel free also mix transitions and keyframes together as well as any other CSS classes on the same element.\n *\n * ### CSS Class-based Animations\n *\n * Class-based animations (animations that are triggered via `ngClass`, `ngShow`, `ngHide` and some other directives) have a slightly different\n * naming convention. Class-based animations are basic enough that a standard transition or keyframe can be referenced on the class being added\n * and removed.\n *\n * For example if we wanted to do a CSS animation for `ngHide` then we place an animation on the `.ng-hide` CSS class:\n *\n * ```html\n * \n * Show and hide me\n *
\n * \n *\n * \n * ```\n *\n * All that is going on here with ngShow/ngHide behind the scenes is the `.ng-hide` class is added/removed (when the hidden state is valid). Since\n * ngShow and ngHide are animation aware then we can match up a transition and ngAnimate handles the rest.\n *\n * In addition the addition and removal of the CSS class, ngAnimate also provides two helper methods that we can use to further decorate the animation\n * with CSS styles.\n *\n * ```html\n * \n * Highlight this box\n *
\n * \n *\n * \n * ```\n *\n * We can also make use of CSS keyframes by placing them within the CSS classes.\n *\n *\n * ### CSS Staggering Animations\n * A Staggering animation is a collection of animations that are issued with a slight delay in between each successive operation resulting in a\n * curtain-like effect. The ngAnimate module (versions >=1.2) supports staggering animations and the stagger effect can be\n * performed by creating a **ng-EVENT-stagger** CSS class and attaching that class to the base CSS class used for\n * the animation. The style property expected within the stagger class can either be a **transition-delay** or an\n * **animation-delay** property (or both if your animation contains both transitions and keyframe animations).\n *\n * ```css\n * .my-animation.ng-enter {\n * /* standard transition code */\n * transition: 1s linear all;\n * opacity:0;\n * }\n * .my-animation.ng-enter-stagger {\n * /* this will have a 100ms delay between each successive leave animation */\n * transition-delay: 0.1s;\n *\n * /* As of 1.4.4, this must always be set: it signals ngAnimate\n * to not accidentally inherit a delay property from another CSS class */\n * transition-duration: 0s;\n *\n * /* if you are using animations instead of transitions you should configure as follows:\n * animation-delay: 0.1s;\n * animation-duration: 0s; */\n * }\n * .my-animation.ng-enter.ng-enter-active {\n * /* standard transition styles */\n * opacity:1;\n * }\n * ```\n *\n * Staggering animations work by default in ngRepeat (so long as the CSS class is defined). Outside of ngRepeat, to use staggering animations\n * on your own, they can be triggered by firing multiple calls to the same event on $animate. However, the restrictions surrounding this\n * are that each of the elements must have the same CSS className value as well as the same parent element. A stagger operation\n * will also be reset if one or more animation frames have passed since the multiple calls to `$animate` were fired.\n *\n * The following code will issue the **ng-leave-stagger** event on the element provided:\n *\n * ```js\n * var kids = parent.children();\n *\n * $animate.leave(kids[0]); //stagger index=0\n * $animate.leave(kids[1]); //stagger index=1\n * $animate.leave(kids[2]); //stagger index=2\n * $animate.leave(kids[3]); //stagger index=3\n * $animate.leave(kids[4]); //stagger index=4\n *\n * window.requestAnimationFrame(function() {\n * //stagger has reset itself\n * $animate.leave(kids[5]); //stagger index=0\n * $animate.leave(kids[6]); //stagger index=1\n *\n * $scope.$digest();\n * });\n * ```\n *\n * Stagger animations are currently only supported within CSS-defined animations.\n *\n * ### The `ng-animate` CSS class\n *\n * When ngAnimate is animating an element it will apply the `ng-animate` CSS class to the element for the duration of the animation.\n * This is a temporary CSS class and it will be removed once the animation is over (for both JavaScript and CSS-based animations).\n *\n * Therefore, animations can be applied to an element using this temporary class directly via CSS.\n *\n * ```css\n * .zipper.ng-animate {\n * transition:0.5s linear all;\n * }\n * .zipper.ng-enter {\n * opacity:0;\n * }\n * .zipper.ng-enter.ng-enter-active {\n * opacity:1;\n * }\n * .zipper.ng-leave {\n * opacity:1;\n * }\n * .zipper.ng-leave.ng-leave-active {\n * opacity:0;\n * }\n * ```\n *\n * (Note that the `ng-animate` CSS class is reserved and it cannot be applied on an element directly since ngAnimate will always remove\n * the CSS class once an animation has completed.)\n *\n *\n * ### The `ng-[event]-prepare` class\n *\n * This is a special class that can be used to prevent unwanted flickering / flash of content before\n * the actual animation starts. The class is added as soon as an animation is initialized, but removed\n * before the actual animation starts (after waiting for a $digest).\n * It is also only added for *structural* animations (`enter`, `move`, and `leave`).\n *\n * In practice, flickering can appear when nesting elements with structural animations such as `ngIf`\n * into elements that have class-based animations such as `ngClass`.\n *\n * ```html\n * \n *
\n * ```\n *\n * It is possible that during the `enter` animation, the `.message` div will be briefly visible before it starts animating.\n * In that case, you can add styles to the CSS that make sure the element stays hidden before the animation starts:\n *\n * ```css\n * .message.ng-enter-prepare {\n * opacity: 0;\n * }\n * ```\n *\n * ### Animating between value changes\n *\n * Sometimes you need to animate between different expression states, whose values\n * don't necessary need to be known or referenced in CSS styles.\n * Unless possible with another {@link ngAnimate#directive-support \"animation aware\" directive},\n * that specific use case can always be covered with {@link ngAnimate.directive:ngAnimateSwap} as\n * can be seen in {@link ngAnimate.directive:ngAnimateSwap#examples this example}.\n *\n * Note that {@link ngAnimate.directive:ngAnimateSwap} is a *structural directive*, which means it\n * creates a new instance of the element (including any other/child directives it may have) and\n * links it to a new scope every time *swap* happens. In some cases this might not be desirable\n * (e.g. for performance reasons, or when you wish to retain internal state on the original\n * element instance).\n *\n * ## JavaScript-based Animations\n *\n * ngAnimate also allows for animations to be consumed by JavaScript code. The approach is similar to CSS-based animations (where there is a shared\n * CSS class that is referenced in our HTML code) but in addition we need to register the JavaScript animation on the module. By making use of the\n * `module.animation()` module function we can register the animation.\n *\n * Let's see an example of a enter/leave animation using `ngRepeat`:\n *\n * ```html\n * \n * ```\n *\n * See the **slide** CSS class? Let's use that class to define an animation that we'll structure in our module code by using `module.animation`:\n *\n * ```js\n * myModule.animation('.slide', [function() {\n * return {\n * // make note that other events (like addClass/removeClass)\n * // have different function input parameters\n * enter: function(element, doneFn) {\n * jQuery(element).fadeIn(1000, doneFn);\n *\n * // remember to call doneFn so that AngularJS\n * // knows that the animation has concluded\n * },\n *\n * move: function(element, doneFn) {\n * jQuery(element).fadeIn(1000, doneFn);\n * },\n *\n * leave: function(element, doneFn) {\n * jQuery(element).fadeOut(1000, doneFn);\n * }\n * }\n * }]);\n * ```\n *\n * The nice thing about JS-based animations is that we can inject other services and make use of advanced animation libraries such as\n * greensock.js and velocity.js.\n *\n * If our animation code class-based (meaning that something like `ngClass`, `ngHide` and `ngShow` triggers it) then we can still define\n * our animations inside of the same registered animation, however, the function input arguments are a bit different:\n *\n * ```html\n * \n * \n *
\n * \n * this box is moody\n *
\n * \n * \n * \n * ```\n *\n * ```js\n * myModule.animation('.colorful', [function() {\n * return {\n * addClass: function(element, className, doneFn) {\n * // do some cool animation and call the doneFn\n * },\n * removeClass: function(element, className, doneFn) {\n * // do some cool animation and call the doneFn\n * },\n * setClass: function(element, addedClass, removedClass, doneFn) {\n * // do some cool animation and call the doneFn\n * }\n * }\n * }]);\n * ```\n *\n * ## CSS + JS Animations Together\n *\n * AngularJS 1.4 and higher has taken steps to make the amalgamation of CSS and JS animations more flexible. However, unlike earlier versions of AngularJS,\n * defining CSS and JS animations to work off of the same CSS class will not work anymore. Therefore the example below will only result in **JS animations taking\n * charge of the animation**:\n *\n * ```html\n * \n * ```\n *\n * ```js\n * myModule.animation('.slide', [function() {\n * return {\n * enter: function(element, doneFn) {\n * jQuery(element).slideIn(1000, doneFn);\n * }\n * }\n * }]);\n * ```\n *\n * ```css\n * .slide.ng-enter {\n * transition:0.5s linear all;\n * transform:translateY(-100px);\n * }\n * .slide.ng-enter.ng-enter-active {\n * transform:translateY(0);\n * }\n * ```\n *\n * Does this mean that CSS and JS animations cannot be used together? Do JS-based animations always have higher priority? We can make up for the\n * lack of CSS animations by using the `$animateCss` service to trigger our own tweaked-out, CSS-based animations directly from\n * our own JS-based animation code:\n *\n * ```js\n * myModule.animation('.slide', ['$animateCss', function($animateCss) {\n * return {\n * enter: function(element) {\n* // this will trigger `.slide.ng-enter` and `.slide.ng-enter-active`.\n * return $animateCss(element, {\n * event: 'enter',\n * structural: true\n * });\n * }\n * }\n * }]);\n * ```\n *\n * The nice thing here is that we can save bandwidth by sticking to our CSS-based animation code and we don't need to rely on a 3rd-party animation framework.\n *\n * The `$animateCss` service is very powerful since we can feed in all kinds of extra properties that will be evaluated and fed into a CSS transition or\n * keyframe animation. For example if we wanted to animate the height of an element while adding and removing classes then we can do so by providing that\n * data into `$animateCss` directly:\n *\n * ```js\n * myModule.animation('.slide', ['$animateCss', function($animateCss) {\n * return {\n * enter: function(element) {\n * return $animateCss(element, {\n * event: 'enter',\n * structural: true,\n * addClass: 'maroon-setting',\n * from: { height:0 },\n * to: { height: 200 }\n * });\n * }\n * }\n * }]);\n * ```\n *\n * Now we can fill in the rest via our transition CSS code:\n *\n * ```css\n * /* the transition tells ngAnimate to make the animation happen */\n * .slide.ng-enter { transition:0.5s linear all; }\n *\n * /* this extra CSS class will be absorbed into the transition\n * since the $animateCss code is adding the class */\n * .maroon-setting { background:red; }\n * ```\n *\n * And `$animateCss` will figure out the rest. Just make sure to have the `done()` callback fire the `doneFn` function to signal when the animation is over.\n *\n * To learn more about what's possible be sure to visit the {@link ngAnimate.$animateCss $animateCss service}.\n *\n * ## Animation Anchoring (via `ng-animate-ref`)\n *\n * ngAnimate in AngularJS 1.4 comes packed with the ability to cross-animate elements between\n * structural areas of an application (like views) by pairing up elements using an attribute\n * called `ng-animate-ref`.\n *\n * Let's say for example we have two views that are managed by `ng-view` and we want to show\n * that there is a relationship between two components situated in within these views. By using the\n * `ng-animate-ref` attribute we can identify that the two components are paired together and we\n * can then attach an animation, which is triggered when the view changes.\n *\n * Say for example we have the following template code:\n *\n * ```html\n * \n * \n *
\n *\n * \n * \n * ![](\"./banner.jpg\")
\n * \n *\n * \n * \n * ```\n *\n * Now, when the view changes (once the link is clicked), ngAnimate will examine the\n * HTML contents to see if there is a match reference between any components in the view\n * that is leaving and the view that is entering. It will scan both the view which is being\n * removed (leave) and inserted (enter) to see if there are any paired DOM elements that\n * contain a matching ref value.\n *\n * The two images match since they share the same ref value. ngAnimate will now create a\n * transport element (which is a clone of the first image element) and it will then attempt\n * to animate to the position of the second image element in the next view. For the animation to\n * work a special CSS class called `ng-anchor` will be added to the transported element.\n *\n * We can now attach a transition onto the `.banner.ng-anchor` CSS class and then\n * ngAnimate will handle the entire transition for us as well as the addition and removal of\n * any changes of CSS classes between the elements:\n *\n * ```css\n * .banner.ng-anchor {\n * /* this animation will last for 1 second since there are\n * two phases to the animation (an `in` and an `out` phase) */\n * transition:0.5s linear all;\n * }\n * ```\n *\n * We also **must** include animations for the views that are being entered and removed\n * (otherwise anchoring wouldn't be possible since the new view would be inserted right away).\n *\n * ```css\n * .view-animation.ng-enter, .view-animation.ng-leave {\n * transition:0.5s linear all;\n * position:fixed;\n * left:0;\n * top:0;\n * width:100%;\n * }\n * .view-animation.ng-enter {\n * transform:translateX(100%);\n * }\n * .view-animation.ng-leave,\n * .view-animation.ng-enter.ng-enter-active {\n * transform:translateX(0%);\n * }\n * .view-animation.ng-leave.ng-leave-active {\n * transform:translateX(-100%);\n * }\n * ```\n *\n * Now we can jump back to the anchor animation. When the animation happens, there are two stages that occur:\n * an `out` and an `in` stage. The `out` stage happens first and that is when the element is animated away\n * from its origin. Once that animation is over then the `in` stage occurs which animates the\n * element to its destination. The reason why there are two animations is to give enough time\n * for the enter animation on the new element to be ready.\n *\n * The example above sets up a transition for both the in and out phases, but we can also target the out or\n * in phases directly via `ng-anchor-out` and `ng-anchor-in`.\n *\n * ```css\n * .banner.ng-anchor-out {\n * transition: 0.5s linear all;\n *\n * /* the scale will be applied during the out animation,\n * but will be animated away when the in animation runs */\n * transform: scale(1.2);\n * }\n *\n * .banner.ng-anchor-in {\n * transition: 1s linear all;\n * }\n * ```\n *\n *\n *\n *\n * ### Anchoring Demo\n *\n \n
\n \n
\n Welcome to the home page\n
Please click on an element
\n \n {{ record.title }}\n \n\n {{ profile.title }}\n
\n \n * \n * Left Nav!\n * \n *\n * \n * Center Content\n * \n * Open Left Menu\n * \n * \n *\n * \n * \n * \n *
\n * | Breakpoint | \n *mediaQuery | \n *
|---|---|
| xs | \n *(max-width: 599px) | \n *
| gt-xs | \n *(min-width: 600px) | \n *
| sm | \n *(min-width: 600px) and (max-width: 959px) | \n *
| gt-sm | \n *(min-width: 960px) | \n *
| md | \n *(min-width: 960px) and (max-width: 1279px) | \n *
| gt-md | \n *(min-width: 1280px) | \n *
| lg | \n *(min-width: 1280px) and (max-width: 1919px) | \n *
| gt-lg | \n *(min-width: 1920px) | \n *
| xl | \n *(min-width: 1920px) | \n *
| landscape | \n *landscape | \n *
| portrait | \n *portrait | \n *
![](\"https://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B8olV15J7abPSGFxemFiQVRtb1k/layout_adaptive_breakpoints_01.png\")
\n * \n *\n * @returns {boolean} a boolean representing whether or not the given media query is true or false.\n *\n * @usage\n * ' +\n ' ' +\n '
');\n wrappedElementToDisable.append(scrollMask);\n }\n\n /**\n * @param {Event} $event\n */\n function preventDefault($event) {\n $event.preventDefault();\n }\n\n scrollMask.on('wheel touchmove', preventDefault);\n\n return function restoreElementScroll() {\n scrollMask.off('wheel touchmove', preventDefault);\n\n if (!scrollMaskOptions.disableScrollMask && scrollMask[0].parentNode) {\n scrollMask[0].parentNode.removeChild(scrollMask[0]);\n }\n };\n }\n\n // Converts the body to a position fixed block and translate it to the proper scroll position\n function disableBodyScroll() {\n var documentElement = $document[0].documentElement;\n\n var prevDocumentStyle = documentElement.style.cssText || '';\n var prevBodyStyle = body.style.cssText || '';\n\n var viewportTop = $mdUtil.getViewportTop();\n $mdUtil.disableScrollAround._viewPortTop = viewportTop;\n var clientWidth = body.clientWidth;\n var hasVerticalScrollbar = body.scrollHeight > body.clientHeight + 1;\n\n // Scroll may be set on element (for example by overflow-y: scroll)\n // but Chrome is reporting the scrollTop position always on .\n // scrollElement will allow to restore the scrollTop position to proper target.\n var scrollElement = documentElement.scrollTop > 0 ? documentElement : body;\n\n if (hasVerticalScrollbar) {\n angular.element(body).css({\n position: 'fixed',\n width: '100%',\n top: -viewportTop + 'px'\n });\n }\n\n if (body.clientWidth < clientWidth) {\n body.style.overflow = 'hidden';\n }\n\n return function restoreScroll() {\n // Reset the inline style CSS to the previous.\n body.style.cssText = prevBodyStyle;\n documentElement.style.cssText = prevDocumentStyle;\n\n // The scroll position while being fixed\n scrollElement.scrollTop = viewportTop;\n };\n }\n\n },\n\n enableScrolling: function() {\n var restoreFn = this.disableScrollAround._restoreScroll;\n restoreFn && restoreFn();\n },\n\n floatingScrollbars: function() {\n if (this.floatingScrollbars.cached === undefined) {\n var tempNode = angular.element('').css({\n width: '100%',\n 'z-index': -1,\n position: 'absolute',\n height: '35px',\n 'overflow-y': 'scroll'\n });\n tempNode.children().css('height', '60px');\n\n $document[0].body.appendChild(tempNode[0]);\n this.floatingScrollbars.cached = (tempNode[0].offsetWidth == tempNode[0].childNodes[0].offsetWidth);\n tempNode.remove();\n }\n return this.floatingScrollbars.cached;\n },\n\n /**\n * Mobile safari only allows you to set focus in click event listeners.\n * @param {Element|angular.JQLite} element to focus\n */\n forceFocus: function(element) {\n var node = element[0] || element;\n\n document.addEventListener('click', function focusOnClick(ev) {\n if (ev.target === node && ev.$focus) {\n node.focus();\n ev.stopImmediatePropagation();\n ev.preventDefault();\n node.removeEventListener('click', focusOnClick);\n }\n }, true);\n\n var newEvent = document.createEvent('MouseEvents');\n newEvent.initMouseEvent('click', false, true, window, {}, 0, 0, 0, 0,\n false, false, false, false, 0, null);\n newEvent.$material = true;\n newEvent.$focus = true;\n node.dispatchEvent(newEvent);\n },\n\n /**\n * facade to build md-backdrop element with desired styles\n * NOTE: Use $compile to trigger backdrop postLink function\n */\n createBackdrop: function(scope, addClass) {\n return $compile($mdUtil.supplant('
');\n $document[0].body.appendChild(testEl[0]);\n\n var stickyProps = ['sticky', '-webkit-sticky'];\n for (var i = 0; i < stickyProps.length; ++i) {\n testEl.css({\n position: stickyProps[i],\n top: 0,\n 'z-index': 2\n });\n\n if (testEl.css('position') == stickyProps[i]) {\n stickyProp = stickyProps[i];\n break;\n }\n }\n\n testEl.remove();\n\n return stickyProp;\n },\n\n /**\n * Parses an attribute value, mostly a string.\n * By default checks for negated values and returns `false´ if present.\n * Negated values are: (native falsy) and negative strings like:\n * `false` or `0`.\n * @param value Attribute value which should be parsed.\n * @param negatedCheck When set to false, won't check for negated values.\n * @returns {boolean}\n */\n parseAttributeBoolean: function(value, negatedCheck) {\n return value === '' || !!value && (negatedCheck === false || value !== 'false' && value !== '0');\n },\n\n hasComputedStyle: hasComputedStyle,\n\n /**\n * Returns true if the parent form of the element has been submitted.\n * @param element An AngularJS or HTML5 element.\n * @returns {boolean}\n */\n isParentFormSubmitted: function(element) {\n var parent = $mdUtil.getClosest(element, 'form');\n var form = parent ? angular.element(parent).controller('form') : null;\n\n return form ? form.$submitted : false;\n },\n\n /**\n * Animate the requested element's scrollTop to the requested scrollPosition with basic easing.\n * @param {!Element} element The element to scroll.\n * @param {number} scrollEnd The new/final scroll position.\n * @param {number=} duration Duration of the scroll. Default is 1000ms.\n */\n animateScrollTo: function(element, scrollEnd, duration) {\n var scrollStart = element.scrollTop;\n var scrollChange = scrollEnd - scrollStart;\n var scrollingDown = scrollStart < scrollEnd;\n var startTime = $mdUtil.now();\n\n $$rAF(scrollChunk);\n\n function scrollChunk() {\n var newPosition = calculateNewPosition();\n\n element.scrollTop = newPosition;\n\n if (scrollingDown ? newPosition < scrollEnd : newPosition > scrollEnd) {\n $$rAF(scrollChunk);\n }\n }\n\n function calculateNewPosition() {\n var easeDuration = duration || 1000;\n var currentTime = $mdUtil.now() - startTime;\n\n return ease(currentTime, scrollStart, scrollChange, easeDuration);\n }\n\n function ease(currentTime, start, change, duration) {\n // If the duration has passed (which can occur if our app loses focus due to $$rAF), jump\n // straight to the proper position\n if (currentTime > duration) {\n return start + change;\n }\n\n var ts = (currentTime /= duration) * currentTime;\n var tc = ts * currentTime;\n\n return start + change * (-2 * tc + 3 * ts);\n }\n },\n\n /**\n * Provides an easy mechanism for removing duplicates from an array.\n *\n * var myArray = [1, 2, 2, 3, 3, 3, 4, 4, 4, 4];\n *\n * $mdUtil.uniq(myArray) => [1, 2, 3, 4]\n *\n * @param {Array} array The array whose unique values should be returned.\n * @returns {Array|void} A copy of the array containing only unique values.\n */\n uniq: function(array) {\n if (!array) { return; }\n\n return array.filter(function(value, index, self) {\n return self.indexOf(value) === index;\n });\n },\n\n /**\n * Gets the inner HTML content of the given HTMLElement.\n * Only intended for use with SVG or Symbol elements in IE11.\n * @param {Element} element\n * @returns {string} the inner HTML of the element passed in\n */\n getInnerHTML: function(element) {\n // For SVG or Symbol elements, innerHTML returns `undefined` in IE.\n // Reference: https://stackoverflow.com/q/28129956/633107\n // The XMLSerializer API is supported on IE11 and is the recommended workaround.\n var serializer = new XMLSerializer();\n\n return Array.prototype.map.call(element.childNodes, function (child) {\n return serializer.serializeToString(child);\n }).join('');\n },\n\n /**\n * Gets the outer HTML content of the given HTMLElement.\n * Only intended for use with SVG or Symbol elements in IE11.\n * @param {Element} element\n * @returns {string} the outer HTML of the element passed in\n */\n getOuterHTML: function(element) {\n // For SVG or Symbol elements, outerHTML returns `undefined` in IE.\n // Reference: https://stackoverflow.com/q/29888050/633107\n // The XMLSerializer API is supported on IE11 and is the recommended workaround.\n var serializer = new XMLSerializer();\n return serializer.serializeToString(element);\n },\n\n /**\n * Support: IE 9-11 only\n * documentMode is an IE-only property\n * http://msdn.microsoft.com/en-us/library/ie/cc196988(v=vs.85).aspx\n */\n msie: window.document.documentMode,\n\n getTouchAction: function() {\n var testEl = document.createElement('div');\n var vendorPrefixes = ['', 'webkit', 'Moz', 'MS', 'ms', 'o'];\n\n for (var i = 0; i < vendorPrefixes.length; i++) {\n var prefix = vendorPrefixes[i];\n var property = prefix ? prefix + 'TouchAction' : 'touchAction';\n if (angular.isDefined(testEl.style[property])) {\n return property;\n }\n }\n },\n\n /**\n * @param {Event} event the event to calculate the bubble path for\n * @return {EventTarget[]} the set of nodes that this event could bubble up to\n */\n getEventPath: function(event) {\n var path = [];\n var currentTarget = event.target;\n while (currentTarget) {\n path.push(currentTarget);\n currentTarget = currentTarget.parentElement;\n }\n if (path.indexOf(window) === -1 && path.indexOf(document) === -1)\n path.push(document);\n if (path.indexOf(window) === -1)\n path.push(window);\n return path;\n },\n\n /**\n * Gets the string the user has entered and removes Regex identifiers\n * @param {string} term\n * @returns {string} sanitized string\n */\n sanitize: function(term) {\n if (!term) return term;\n return term.replace(/[\\\\^$*+?.()|{}[]/g, '\\\\$&');\n }\n };\n\n // Instantiate other namespace utility methods\n\n $mdUtil.dom.animator = $$mdAnimate($mdUtil);\n\n return $mdUtil;\n\n function getNode(el) {\n return el[0] || el;\n }\n}\n\n/**\n * Since removing jQuery from the demos, some code that uses `element.focus()` is broken.\n * We need to add `element.focus()`, because it's testable unlike `element[0].focus`.\n */\nangular.element.prototype.focus = angular.element.prototype.focus || function() {\n if (this.length) {\n this[0].focus();\n }\n return this;\n};\n\nangular.element.prototype.blur = angular.element.prototype.blur || function() {\n if (this.length) {\n this[0].blur();\n }\n return this;\n};\n\n})();\n(function(){\n\"use strict\";\n\n// Polyfill angular < 1.4 (provide $animateCss)\nangular\n .module('material.core')\n .factory('$$mdAnimate', [\"$q\", \"$timeout\", \"$mdConstant\", \"$animateCss\", function($q, $timeout, $mdConstant, $animateCss){\n\n // Since $$mdAnimate is injected into $mdUtil... use a wrapper function\n // to subsequently inject $mdUtil as an argument to the AnimateDomUtils\n\n return function($mdUtil) {\n return AnimateDomUtils($mdUtil, $q, $timeout, $mdConstant, $animateCss);\n };\n }]);\n\n/**\n * Factory function that requires special injections\n */\nfunction AnimateDomUtils($mdUtil, $q, $timeout, $mdConstant, $animateCss) {\n var self;\n return self = {\n /**\n *\n */\n translate3d : function(target, from, to, options) {\n return $animateCss(target, {\n from: from,\n to: to,\n addClass: options.transitionInClass,\n removeClass: options.transitionOutClass,\n duration: options.duration\n })\n .start()\n .then(function(){\n // Resolve with reverser function...\n return reverseTranslate;\n });\n\n /**\n * Specific reversal of the request translate animation above...\n */\n function reverseTranslate (newFrom) {\n return $animateCss(target, {\n to: newFrom || from,\n addClass: options.transitionOutClass,\n removeClass: options.transitionInClass,\n duration: options.duration\n }).start();\n\n }\n },\n\n /**\n * Listen for transitionEnd event (with optional timeout)\n * Announce completion or failure via promise handlers\n */\n waitTransitionEnd: function (element, opts) {\n var TIMEOUT = 3000; // fallback is 3 secs\n\n return $q(function(resolve, reject){\n opts = opts || { };\n\n // If there is no transition is found, resolve immediately\n //\n // NOTE: using $mdUtil.nextTick() causes delays/issues\n if (noTransitionFound(opts.cachedTransitionStyles)) {\n TIMEOUT = 0;\n }\n\n var timer = $timeout(finished, opts.timeout || TIMEOUT);\n element.on($mdConstant.CSS.TRANSITIONEND, finished);\n\n /**\n * Upon timeout or transitionEnd, reject or resolve (respectively) this promise.\n * NOTE: Make sure this transitionEnd didn't bubble up from a child\n */\n function finished(ev) {\n if (ev && ev.target !== element[0]) return;\n\n if (ev) $timeout.cancel(timer);\n element.off($mdConstant.CSS.TRANSITIONEND, finished);\n\n // Never reject since ngAnimate may cause timeouts due missed transitionEnd events\n resolve();\n\n }\n\n /**\n * Checks whether or not there is a transition.\n *\n * @param styles The cached styles to use for the calculation. If null, getComputedStyle()\n * will be used.\n *\n * @returns {boolean} True if there is no transition/duration; false otherwise.\n */\n function noTransitionFound(styles) {\n styles = styles || window.getComputedStyle(element[0]);\n\n return styles.transitionDuration == '0s' || (!styles.transition && !styles.transitionProperty);\n }\n\n });\n },\n\n calculateTransformValues: function (element, originator) {\n var origin = originator.element;\n var bounds = originator.bounds;\n\n if (origin || bounds) {\n var originBnds = origin ? self.clientRect(origin) || currentBounds() : self.copyRect(bounds);\n var dialogRect = self.copyRect(element[0].getBoundingClientRect());\n var dialogCenterPt = self.centerPointFor(dialogRect);\n var originCenterPt = self.centerPointFor(originBnds);\n\n return {\n centerX: originCenterPt.x - dialogCenterPt.x,\n centerY: originCenterPt.y - dialogCenterPt.y,\n scaleX: Math.round(100 * Math.min(0.5, originBnds.width / dialogRect.width)) / 100,\n scaleY: Math.round(100 * Math.min(0.5, originBnds.height / dialogRect.height)) / 100\n };\n }\n return {centerX: 0, centerY: 0, scaleX: 0.5, scaleY: 0.5};\n\n /**\n * This is a fallback if the origin information is no longer valid, then the\n * origin bounds simply becomes the current bounds for the dialogContainer's parent\n */\n function currentBounds() {\n var cntr = element ? element.parent() : null;\n var parent = cntr ? cntr.parent() : null;\n\n return parent ? self.clientRect(parent) : null;\n }\n },\n\n /**\n * Calculate the zoom transform from dialog to origin.\n *\n * We use this to set the dialog position immediately;\n * then the md-transition-in actually translates back to\n * `translate3d(0,0,0) scale(1.0)`...\n *\n * NOTE: all values are rounded to the nearest integer\n */\n calculateZoomToOrigin: function (element, originator) {\n var zoomTemplate = \"translate3d( {centerX}px, {centerY}px, 0 ) scale( {scaleX}, {scaleY} )\";\n var buildZoom = angular.bind(null, $mdUtil.supplant, zoomTemplate);\n\n return buildZoom(self.calculateTransformValues(element, originator));\n },\n\n /**\n * Calculate the slide transform from panel to origin.\n * NOTE: all values are rounded to the nearest integer\n */\n calculateSlideToOrigin: function (element, originator) {\n var slideTemplate = \"translate3d( {centerX}px, {centerY}px, 0 )\";\n var buildSlide = angular.bind(null, $mdUtil.supplant, slideTemplate);\n\n return buildSlide(self.calculateTransformValues(element, originator));\n },\n\n /**\n * Enhance raw values to represent valid css stylings...\n */\n toCss : function(raw) {\n var css = { };\n var lookups = 'left top right bottom width height x y min-width min-height max-width max-height';\n\n angular.forEach(raw, function(value,key) {\n if (angular.isUndefined(value)) return;\n\n if (lookups.indexOf(key) >= 0) {\n css[key] = value + 'px';\n } else {\n switch (key) {\n case 'transition':\n convertToVendor(key, $mdConstant.CSS.TRANSITION, value);\n break;\n case 'transform':\n convertToVendor(key, $mdConstant.CSS.TRANSFORM, value);\n break;\n case 'transformOrigin':\n convertToVendor(key, $mdConstant.CSS.TRANSFORM_ORIGIN, value);\n break;\n case 'font-size':\n css['font-size'] = value; // font sizes aren't always in px\n break;\n }\n }\n });\n\n return css;\n\n function convertToVendor(key, vendor, value) {\n angular.forEach(vendor.split(' '), function (key) {\n css[key] = value;\n });\n }\n },\n\n /**\n * Convert the translate CSS value to key/value pair(s).\n */\n toTransformCss: function (transform, addTransition, transition) {\n var css = {};\n angular.forEach($mdConstant.CSS.TRANSFORM.split(' '), function (key) {\n css[key] = transform;\n });\n\n if (addTransition) {\n transition = transition || \"all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important\";\n css.transition = transition;\n }\n\n return css;\n },\n\n /**\n * Clone the Rect and calculate the height/width if needed\n */\n copyRect: function (source, destination) {\n if (!source) return null;\n\n destination = destination || {};\n\n angular.forEach('left top right bottom width height'.split(' '), function (key) {\n destination[key] = Math.round(source[key]);\n });\n\n destination.width = destination.width || (destination.right - destination.left);\n destination.height = destination.height || (destination.bottom - destination.top);\n\n return destination;\n },\n\n /**\n * Calculate ClientRect of element; return null if hidden or zero size\n */\n clientRect: function (element) {\n var bounds = angular.element(element)[0].getBoundingClientRect();\n var isPositiveSizeClientRect = function (rect) {\n return rect && (rect.width > 0) && (rect.height > 0);\n };\n\n // If the event origin element has zero size, it has probably been hidden.\n return isPositiveSizeClientRect(bounds) ? self.copyRect(bounds) : null;\n },\n\n /**\n * Calculate 'rounded' center point of Rect\n */\n centerPointFor: function (targetRect) {\n return targetRect ? {\n x: Math.round(targetRect.left + (targetRect.width / 2)),\n y: Math.round(targetRect.top + (targetRect.height / 2))\n } : { x : 0, y : 0 };\n }\n\n };\n}\n\n\n})();\n(function(){\n\"use strict\";\n\nif (angular.version.minor >= 4) {\n angular.module('material.core.animate', []);\n} else {\n(function() {\n \"use strict\";\n\n var forEach = angular.forEach;\n\n var WEBKIT = angular.isDefined(document.documentElement.style.WebkitAppearance);\n var TRANSITION_PROP = WEBKIT ? 'WebkitTransition' : 'transition';\n var ANIMATION_PROP = WEBKIT ? 'WebkitAnimation' : 'animation';\n var PREFIX = WEBKIT ? '-webkit-' : '';\n\n var TRANSITION_EVENTS = (WEBKIT ? 'webkitTransitionEnd ' : '') + 'transitionend';\n var ANIMATION_EVENTS = (WEBKIT ? 'webkitAnimationEnd ' : '') + 'animationend';\n\n var $$ForceReflowFactory = ['$document', function($document) {\n return function() {\n return $document[0].body.clientWidth + 1;\n };\n }];\n\n var $$rAFMutexFactory = ['$$rAF', function($$rAF) {\n return function() {\n var passed = false;\n $$rAF(function() {\n passed = true;\n });\n return function(fn) {\n passed ? fn() : $$rAF(fn);\n };\n };\n }];\n\n var $$AnimateRunnerFactory = ['$q', '$$rAFMutex', function($q, $$rAFMutex) {\n var INITIAL_STATE = 0;\n var DONE_PENDING_STATE = 1;\n var DONE_COMPLETE_STATE = 2;\n\n function AnimateRunner(host) {\n this.setHost(host);\n\n this._doneCallbacks = [];\n this._runInAnimationFrame = $$rAFMutex();\n this._state = 0;\n }\n\n AnimateRunner.prototype = {\n setHost: function(host) {\n this.host = host || {};\n },\n\n done: function(fn) {\n if (this._state === DONE_COMPLETE_STATE) {\n fn();\n } else {\n this._doneCallbacks.push(fn);\n }\n },\n\n progress: angular.noop,\n\n getPromise: function() {\n if (!this.promise) {\n var self = this;\n this.promise = $q(function(resolve, reject) {\n self.done(function(status) {\n status === false ? reject() : resolve();\n });\n });\n }\n return this.promise;\n },\n\n then: function(resolveHandler, rejectHandler) {\n return this.getPromise().then(resolveHandler, rejectHandler);\n },\n\n 'catch': function(handler) {\n return this.getPromise()['catch'](handler);\n },\n\n 'finally': function(handler) {\n return this.getPromise()['finally'](handler);\n },\n\n pause: function() {\n if (this.host.pause) {\n this.host.pause();\n }\n },\n\n resume: function() {\n if (this.host.resume) {\n this.host.resume();\n }\n },\n\n end: function() {\n if (this.host.end) {\n this.host.end();\n }\n this._resolve(true);\n },\n\n cancel: function() {\n if (this.host.cancel) {\n this.host.cancel();\n }\n this._resolve(false);\n },\n\n complete: function(response) {\n var self = this;\n if (self._state === INITIAL_STATE) {\n self._state = DONE_PENDING_STATE;\n self._runInAnimationFrame(function() {\n self._resolve(response);\n });\n }\n },\n\n _resolve: function(response) {\n if (this._state !== DONE_COMPLETE_STATE) {\n forEach(this._doneCallbacks, function(fn) {\n fn(response);\n });\n this._doneCallbacks.length = 0;\n this._state = DONE_COMPLETE_STATE;\n }\n }\n };\n\n // Polyfill AnimateRunner.all which is used by input animations\n AnimateRunner.all = function(runners, callback) {\n var count = 0;\n var status = true;\n forEach(runners, function(runner) {\n runner.done(onProgress);\n });\n\n function onProgress(response) {\n status = status && response;\n if (++count === runners.length) {\n callback(status);\n }\n }\n };\n\n return AnimateRunner;\n }];\n\n angular\n .module('material.core.animate', [])\n .factory('$$forceReflow', $$ForceReflowFactory)\n .factory('$$AnimateRunner', $$AnimateRunnerFactory)\n .factory('$$rAFMutex', $$rAFMutexFactory)\n .factory('$animateCss', ['$window', '$$rAF', '$$AnimateRunner', '$$forceReflow', '$$jqLite', '$timeout', '$animate',\n function($window, $$rAF, $$AnimateRunner, $$forceReflow, $$jqLite, $timeout, $animate) {\n\n function init(element, options) {\n\n var temporaryStyles = [];\n var node = getDomNode(element);\n var areAnimationsAllowed = node && $animate.enabled();\n\n var hasCompleteStyles = false;\n var hasCompleteClasses = false;\n\n if (areAnimationsAllowed) {\n if (options.transitionStyle) {\n temporaryStyles.push([PREFIX + 'transition', options.transitionStyle]);\n }\n\n if (options.keyframeStyle) {\n temporaryStyles.push([PREFIX + 'animation', options.keyframeStyle]);\n }\n\n if (options.delay) {\n temporaryStyles.push([PREFIX + 'transition-delay', options.delay + 's']);\n }\n\n if (options.duration) {\n temporaryStyles.push([PREFIX + 'transition-duration', options.duration + 's']);\n }\n\n hasCompleteStyles = options.keyframeStyle ||\n (options.to && (options.duration > 0 || options.transitionStyle));\n hasCompleteClasses = !!options.addClass || !!options.removeClass;\n\n blockTransition(element, true);\n }\n\n var hasCompleteAnimation = areAnimationsAllowed && (hasCompleteStyles || hasCompleteClasses);\n\n applyAnimationFromStyles(element, options);\n\n var animationClosed = false;\n var events, eventFn;\n\n return {\n close: $window.close,\n start: function() {\n var runner = new $$AnimateRunner();\n waitUntilQuiet(function() {\n blockTransition(element, false);\n if (!hasCompleteAnimation) {\n return close();\n }\n\n forEach(temporaryStyles, function(entry) {\n var key = entry[0];\n var value = entry[1];\n node.style[camelCase(key)] = value;\n });\n\n applyClasses(element, options);\n\n var timings = computeTimings(element);\n if (timings.duration === 0) {\n return close();\n }\n\n var moreStyles = [];\n\n if (options.easing) {\n if (timings.transitionDuration) {\n moreStyles.push([PREFIX + 'transition-timing-function', options.easing]);\n }\n if (timings.animationDuration) {\n moreStyles.push([PREFIX + 'animation-timing-function', options.easing]);\n }\n }\n\n if (options.delay && timings.animationDelay) {\n moreStyles.push([PREFIX + 'animation-delay', options.delay + 's']);\n }\n\n if (options.duration && timings.animationDuration) {\n moreStyles.push([PREFIX + 'animation-duration', options.duration + 's']);\n }\n\n forEach(moreStyles, function(entry) {\n var key = entry[0];\n var value = entry[1];\n node.style[camelCase(key)] = value;\n temporaryStyles.push(entry);\n });\n\n var maxDelay = timings.delay;\n var maxDelayTime = maxDelay * 1000;\n var maxDuration = timings.duration;\n var maxDurationTime = maxDuration * 1000;\n var startTime = Date.now();\n\n events = [];\n if (timings.transitionDuration) {\n events.push(TRANSITION_EVENTS);\n }\n if (timings.animationDuration) {\n events.push(ANIMATION_EVENTS);\n }\n events = events.join(' ');\n eventFn = function(event) {\n event.stopPropagation();\n var ev = event.originalEvent || event;\n var timeStamp = ev.timeStamp || Date.now();\n var elapsedTime = parseFloat(ev.elapsedTime.toFixed(3));\n if (Math.max(timeStamp - startTime, 0) >= maxDelayTime && elapsedTime >= maxDuration) {\n close();\n }\n };\n element.on(events, eventFn);\n\n applyAnimationToStyles(element, options);\n\n $timeout(close, maxDelayTime + maxDurationTime * 1.5, false);\n });\n\n return runner;\n\n function close() {\n if (animationClosed) return;\n animationClosed = true;\n\n if (events && eventFn) {\n element.off(events, eventFn);\n }\n applyClasses(element, options);\n applyAnimationStyles(element, options);\n forEach(temporaryStyles, function(entry) {\n node.style[camelCase(entry[0])] = '';\n });\n runner.complete(true);\n return runner;\n }\n }\n };\n }\n\n function applyClasses(element, options) {\n if (options.addClass) {\n $$jqLite.addClass(element, options.addClass);\n options.addClass = null;\n }\n if (options.removeClass) {\n $$jqLite.removeClass(element, options.removeClass);\n options.removeClass = null;\n }\n }\n\n function computeTimings(element) {\n var node = getDomNode(element);\n var cs = $window.getComputedStyle(node);\n var tdr = parseMaxTime(cs[prop('transitionDuration')]);\n var adr = parseMaxTime(cs[prop('animationDuration')]);\n var tdy = parseMaxTime(cs[prop('transitionDelay')]);\n var ady = parseMaxTime(cs[prop('animationDelay')]);\n\n adr *= (parseInt(cs[prop('animationIterationCount')], 10) || 1);\n var duration = Math.max(adr, tdr);\n var delay = Math.max(ady, tdy);\n\n return {\n duration: duration,\n delay: delay,\n animationDuration: adr,\n transitionDuration: tdr,\n animationDelay: ady,\n transitionDelay: tdy\n };\n\n function prop(key) {\n return WEBKIT ? 'Webkit' + key.charAt(0).toUpperCase() + key.substr(1)\n : key;\n }\n }\n\n function parseMaxTime(str) {\n var maxValue = 0;\n var values = (str || \"\").split(/\\s*,\\s*/);\n forEach(values, function(value) {\n // it's always safe to consider only second values and omit `ms` values since\n // getComputedStyle will always handle the conversion for us\n if (value.charAt(value.length - 1) == 's') {\n value = value.substring(0, value.length - 1);\n }\n value = parseFloat(value) || 0;\n maxValue = maxValue ? Math.max(value, maxValue) : value;\n });\n return maxValue;\n }\n\n var cancelLastRAFRequest;\n var rafWaitQueue = [];\n function waitUntilQuiet(callback) {\n if (cancelLastRAFRequest) {\n cancelLastRAFRequest(); // cancels the request\n }\n rafWaitQueue.push(callback);\n cancelLastRAFRequest = $$rAF(function() {\n cancelLastRAFRequest = null;\n\n // DO NOT REMOVE THIS LINE OR REFACTOR OUT THE `pageWidth` variable.\n // PLEASE EXAMINE THE `$$forceReflow` service to understand why.\n var pageWidth = $$forceReflow();\n\n // we use a for loop to ensure that if the queue is changed\n // during this looping then it will consider new requests\n for (var i = 0; i < rafWaitQueue.length; i++) {\n rafWaitQueue[i](pageWidth);\n }\n rafWaitQueue.length = 0;\n });\n }\n\n function applyAnimationStyles(element, options) {\n applyAnimationFromStyles(element, options);\n applyAnimationToStyles(element, options);\n }\n\n function applyAnimationFromStyles(element, options) {\n if (options.from) {\n element.css(options.from);\n options.from = null;\n }\n }\n\n function applyAnimationToStyles(element, options) {\n if (options.to) {\n element.css(options.to);\n options.to = null;\n }\n }\n\n function getDomNode(element) {\n for (var i = 0; i < element.length; i++) {\n if (element[i].nodeType === 1) return element[i];\n }\n }\n\n function blockTransition(element, bool) {\n var node = getDomNode(element);\n var key = camelCase(PREFIX + 'transition-delay');\n node.style[key] = bool ? '-9999s' : '';\n }\n\n return init;\n }]);\n\n /**\n * Older browsers [FF31] expect camelCase\n * property keys.\n * e.g.\n * animation-duration --> animationDuration\n */\n function camelCase(str) {\n return str.replace(/-[a-z]/g, function(str) {\n return str.charAt(1).toUpperCase();\n });\n }\n\n})();\n\n}\n\n})();\n(function(){\n\"use strict\";\n\n/**\n * @ngdoc module\n * @name material.core.aria\n * @description\n * Aria Expectations for AngularJS Material components.\n */\nMdAriaService.$inject = [\"$$rAF\", \"$log\", \"$window\", \"$interpolate\"];\nangular\n .module('material.core')\n .provider('$mdAria', MdAriaProvider);\n\n/**\n * @ngdoc service\n * @name $mdAriaProvider\n * @module material.core.aria\n *\n * @description\n *\n * Modify options of the `$mdAria` service, which will be used by most of the AngularJS Material\n * components.\n *\n * You are able to disable `$mdAria` warnings, by using the following markup.\n *\n * \n * app.config(function($mdAriaProvider) {\n * // Globally disables all ARIA warnings.\n * $mdAriaProvider.disableWarnings();\n * });\n * \n *\n */\nfunction MdAriaProvider() {\n\n var config = {\n /** Whether we should show ARIA warnings in the console if labels are missing on the element */\n showWarnings: true\n };\n\n return {\n disableWarnings: disableWarnings,\n $get: [\"$$rAF\", \"$log\", \"$window\", \"$interpolate\", function($$rAF, $log, $window, $interpolate) {\n return MdAriaService.apply(config, arguments);\n }]\n };\n\n /**\n * @ngdoc method\n * @name $mdAriaProvider#disableWarnings\n * @description Disables all ARIA warnings generated by AngularJS Material.\n */\n function disableWarnings() {\n config.showWarnings = false;\n }\n}\n\n/*\n * @ngInject\n */\nfunction MdAriaService($$rAF, $log, $window, $interpolate) {\n\n // Load the showWarnings option from the current context and store it inside of a scope variable,\n // because the context will be probably lost in some function calls.\n var showWarnings = this.showWarnings;\n\n return {\n expect: expect,\n expectAsync: expectAsync,\n expectWithText: expectWithText,\n expectWithoutText: expectWithoutText,\n getText: getText,\n hasAriaLabel: hasAriaLabel,\n parentHasAriaLabel: parentHasAriaLabel\n };\n\n /**\n * Check if expected attribute has been specified on the target element or child\n * @param element\n * @param attrName\n * @param {optional} defaultValue What to set the attr to if no value is found\n */\n function expect(element, attrName, defaultValue) {\n\n var node = angular.element(element)[0] || element;\n\n // if node exists and neither it nor its children have the attribute\n if (node &&\n ((!node.hasAttribute(attrName) ||\n node.getAttribute(attrName).length === 0) &&\n !childHasAttribute(node, attrName))) {\n\n defaultValue = angular.isString(defaultValue) ? defaultValue.trim() : '';\n if (defaultValue.length) {\n element.attr(attrName, defaultValue);\n } else if (showWarnings) {\n $log.warn('ARIA: Attribute \"', attrName, '\", required for accessibility, is missing on node:', node);\n }\n\n }\n }\n\n function expectAsync(element, attrName, defaultValueGetter) {\n // Problem: when retrieving the element's contents synchronously to find the label,\n // the text may not be defined yet in the case of a binding.\n // There is a higher chance that a binding will be defined if we wait one frame.\n $$rAF(function() {\n expect(element, attrName, defaultValueGetter());\n });\n }\n\n function expectWithText(element, attrName) {\n var content = getText(element) || \"\";\n var hasBinding = content.indexOf($interpolate.startSymbol()) > -1;\n\n if (hasBinding) {\n expectAsync(element, attrName, function() {\n return getText(element);\n });\n } else {\n expect(element, attrName, content);\n }\n }\n\n function expectWithoutText(element, attrName) {\n var content = getText(element);\n var hasBinding = content.indexOf($interpolate.startSymbol()) > -1;\n\n if (!hasBinding && !content) {\n expect(element, attrName, content);\n }\n }\n\n function getText(element) {\n element = element[0] || element;\n var walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null, false);\n var text = '';\n\n var node;\n while (node = walker.nextNode()) {\n if (!isAriaHiddenNode(node)) {\n text += node.textContent;\n }\n }\n\n return text.trim() || '';\n\n function isAriaHiddenNode(node) {\n while (node.parentNode && (node = node.parentNode) !== element) {\n if (node.getAttribute && node.getAttribute('aria-hidden') === 'true') {\n return true;\n }\n }\n }\n }\n\n function childHasAttribute(node, attrName) {\n var hasChildren = node.hasChildNodes(),\n hasAttr = false;\n\n function isHidden(el) {\n var style = el.currentStyle ? el.currentStyle : $window.getComputedStyle(el);\n return (style.display === 'none');\n }\n\n if (hasChildren) {\n var children = node.childNodes;\n for (var i=0; i < children.length; i++) {\n var child = children[i];\n if (child.nodeType === 1 && child.hasAttribute(attrName)) {\n if (!isHidden(child)) {\n hasAttr = true;\n }\n }\n }\n }\n return hasAttr;\n }\n\n /**\n * Check if expected element has aria label attribute\n * @param element\n */\n function hasAriaLabel(element) {\n var node = angular.element(element)[0] || element;\n\n /* Check if compatible node type (ie: not HTML Document node) */\n if (!node.hasAttribute) {\n return false;\n }\n\n /* Check label or description attributes */\n return node.hasAttribute('aria-label') || node.hasAttribute('aria-labelledby') || node.hasAttribute('aria-describedby');\n }\n\n /**\n * Check if expected element's parent has aria label attribute and has valid role and tagName\n * @param element\n * @param {optional} level Number of levels deep search should be performed\n */\n function parentHasAriaLabel(element, level) {\n level = level || 1;\n var node = angular.element(element)[0] || element;\n if (!node.parentNode) {\n return false;\n }\n if (performCheck(node.parentNode)) {\n return true;\n }\n level--;\n if (level) {\n return parentHasAriaLabel(node.parentNode, level);\n }\n return false;\n\n function performCheck(parentNode) {\n if (!hasAriaLabel(parentNode)) {\n return false;\n }\n /* Perform role blacklist check */\n if (parentNode.hasAttribute('role')) {\n switch (parentNode.getAttribute('role').toLowerCase()) {\n case 'command':\n case 'definition':\n case 'directory':\n case 'grid':\n case 'list':\n case 'listitem':\n case 'log':\n case 'marquee':\n case 'menu':\n case 'menubar':\n case 'note':\n case 'presentation':\n case 'separator':\n case 'scrollbar':\n case 'status':\n case 'tablist':\n return false;\n }\n }\n /* Perform tagName blacklist check */\n switch (parentNode.tagName.toLowerCase()) {\n case 'abbr':\n case 'acronym':\n case 'address':\n case 'applet':\n case 'audio':\n case 'b':\n case 'bdi':\n case 'bdo':\n case 'big':\n case 'blockquote':\n case 'br':\n case 'canvas':\n case 'caption':\n case 'center':\n case 'cite':\n case 'code':\n case 'col':\n case 'data':\n case 'dd':\n case 'del':\n case 'dfn':\n case 'dir':\n case 'div':\n case 'dl':\n case 'em':\n case 'embed':\n case 'fieldset':\n case 'figcaption':\n case 'font':\n case 'h1':\n case 'h2':\n case 'h3':\n case 'h4':\n case 'h5':\n case 'h6':\n case 'hgroup':\n case 'html':\n case 'i':\n case 'ins':\n case 'isindex':\n case 'kbd':\n case 'keygen':\n case 'label':\n case 'legend':\n case 'li':\n case 'map':\n case 'mark':\n case 'menu':\n case 'object':\n case 'ol':\n case 'output':\n case 'pre':\n case 'presentation':\n case 'q':\n case 'rt':\n case 'ruby':\n case 'samp':\n case 'small':\n case 'source':\n case 'span':\n case 'status':\n case 'strike':\n case 'strong':\n case 'sub':\n case 'sup':\n case 'svg':\n case 'tbody':\n case 'td':\n case 'th':\n case 'thead':\n case 'time':\n case 'tr':\n case 'track':\n case 'tt':\n case 'ul':\n case 'var':\n return false;\n }\n return true;\n }\n }\n}\n\n})();\n(function(){\n\"use strict\";\n\n/**\n * @ngdoc module\n * @name material.core.compiler\n * @description\n * AngularJS Material template and element compiler.\n */\nangular\n .module('material.core')\n .provider('$mdCompiler', MdCompilerProvider);\n\n/**\n * @ngdoc service\n * @name $mdCompilerProvider\n * @module material.core.compiler\n * @description\n * The `$mdCompiler` is able to respect the AngularJS `$compileProvider.preAssignBindingsEnabled`\n * state when using AngularJS versions greater than or equal to 1.5.10 and less than 1.7.0.\n * See the [AngularJS documentation for `$compileProvider.preAssignBindingsEnabled`\n * ](https://code.angularjs.org/1.6.10/docs/api/ng/provider/$compileProvider#preAssignBindingsEnabled)\n * for more information.\n *\n * To enable/disable whether the controllers of dynamic AngularJS Material components\n * (i.e. dialog, panel, toast, bottomsheet) respect the AngularJS\n * `$compileProvider.preAssignBindingsEnabled` flag, call the AngularJS Material method:\n * `$mdCompilerProvider.respectPreAssignBindingsEnabled(boolean)`.\n *\n * This AngularJS Material *flag* doesn't affect directives/components created via regular\n * AngularJS methods. These constitute the majority of AngularJS Material and user-created\n * components. Only dynamic construction of elements such as Dialogs, Panels, Toasts, BottomSheets,\n * etc. may be affected. Invoking `$mdCompilerProvider.respectPreAssignBindingsEnabled(true)`\n * will effect **bindings** in controllers created by AngularJS Material's services like\n * `$mdDialog`, `$mdPanel`, `$mdToast`, or `$mdBottomSheet`.\n *\n * See\n * \n * $mdCompilerProvider.respectPreAssignBindingsEnabled\n * \n * for the details of how the different versions and settings of AngularJS affect this behavior.\n *\n * @usage\n *\n * Respect the AngularJS Compiler Setting\n *\n * \n * app.config(function($mdCompilerProvider) {\n * $mdCompilerProvider.respectPreAssignBindingsEnabled(true);\n * });\n * \n *\n * @example\n * Using the default (backwards compatible) values for AngularJS 1.6\n * - AngularJS' `$compileProvider.preAssignBindingsEnabled(false)`\n * - AngularJS Material's `$mdCompilerProvider.respectPreAssignBindingsEnabled(false)`\n *
\n *\n *\n * $mdDialog.show({\n * locals: {\n * myVar: true\n * },\n * controller: MyController,\n * bindToController: true\n * }\n *\n * function MyController() {\n * // Locals from Angular Material are available. e.g myVar is true.\n * }\n *\n * MyController.prototype.$onInit = function() {\n * // Bindings are also available in the $onInit lifecycle hook.\n * }\n * \n *\n * Recommended Settings for AngularJS 1.6\n * - AngularJS' `$compileProvider.preAssignBindingsEnabled(false)`\n * - AngularJS Material's `$mdCompilerProvider.respectPreAssignBindingsEnabled(true)`\n *
\n *\n *\n * $mdDialog.show({\n * locals: {\n * myVar: true\n * },\n * controller: MyController,\n * bindToController: true\n * }\n *\n * function MyController() {\n * // No locals from Angular Material are available. e.g myVar is undefined.\n * }\n *\n * MyController.prototype.$onInit = function() {\n * // Bindings are now available in the $onInit lifecycle hook.\n * }\n * \n *\n */\nMdCompilerProvider.$inject = ['$compileProvider'];\nfunction MdCompilerProvider($compileProvider) {\n\n var provider = this;\n\n /**\n * @ngdoc method\n * @name $mdCompilerProvider#respectPreAssignBindingsEnabled\n *\n * @param {boolean=} respected update the `respectPreAssignBindingsEnabled` state if provided,\n * otherwise just return the current Material `respectPreAssignBindingsEnabled` state.\n * @returns {boolean|MdCompilerProvider} current value, if used as a getter, or itself (chaining)\n * if used as a setter.\n *\n * @description\n * Call this method to enable/disable whether Material-specific (dialog/panel/toast/bottomsheet)\n * controllers respect the AngularJS `$compileProvider.preAssignBindingsEnabled` flag. Note that\n * this doesn't affect directives/components created via regular AngularJS methods which\n * constitute most Material and user-created components.\n *\n * If disabled (`false`), the compiler assigns the value of each of the bindings to the\n * properties of the controller object before the constructor of this object is called.\n * The ability to disable this settings is **deprecated** and will be removed in\n * AngularJS Material 1.2.0.\n *\n * If enabled (`true`) the behavior depends on the AngularJS version used:\n *\n * - `<1.5.10`\n * - Bindings are pre-assigned.\n * - `>=1.5.10 <1.7`\n * - Respects whatever `$compileProvider.preAssignBindingsEnabled()` reports. If the\n * `preAssignBindingsEnabled` flag wasn't set manually, it defaults to pre-assigning bindings\n * with AngularJS `1.5` and to calling the constructor first with AngularJS `1.6`.\n * - `>=1.7`\n * - The compiler calls the constructor first before assigning bindings and\n * `$compileProvider.preAssignBindingsEnabled()` no longer exists.\n *\n * Defaults\n * - The default value is `false` in AngularJS 1.6 and earlier.\n * - It is planned to fix this value to `true` and not allow the `false` value in\n * AngularJS Material 1.2.0.\n *\n * It is recommended to set this flag to `true` when using AngularJS Material 1.1.x with\n * AngularJS versions >= 1.5.10. The only reason it's not set that way by default is backwards\n * compatibility.\n *\n * By not setting the flag to `true` when AngularJS' `$compileProvider.preAssignBindingsEnabled()`\n * is set to `false` (i.e. default behavior in AngularJS 1.6 or newer), unit testing of\n * Material Dialog/Panel/Toast/BottomSheet controllers using the `$controller` helper\n * is problematic as it always follows AngularJS' `$compileProvider.preAssignBindingsEnabled()`\n * value.\n */\n var respectPreAssignBindingsEnabled = false;\n this.respectPreAssignBindingsEnabled = function(respected) {\n if (angular.isDefined(respected)) {\n respectPreAssignBindingsEnabled = respected;\n return this;\n }\n\n return respectPreAssignBindingsEnabled;\n };\n\n /**\n * @private\n * @description\n * This function returns `true` if AngularJS Material-specific (dialog/panel/toast/bottomsheet)\n * controllers have bindings pre-assigned in controller constructors and `false` otherwise.\n *\n * Note that this doesn't affect directives/components created via regular AngularJS methods\n * which constitute most Material and user-created components; their behavior can be checked via\n * `$compileProvider.preAssignBindingsEnabled()` in AngularJS `>=1.5.10 <1.7.0`.\n *\n * @returns {*} current preAssignBindingsEnabled state\n */\n function getPreAssignBindingsEnabled() {\n if (!respectPreAssignBindingsEnabled) {\n // respectPreAssignBindingsEnabled === false\n // We're ignoring the AngularJS `$compileProvider.preAssignBindingsEnabled()` value in this case.\n return true;\n }\n\n // respectPreAssignBindingsEnabled === true\n\n // This check is needed because $compileProvider.preAssignBindingsEnabled does not exist prior\n // to AngularJS 1.5.10, is deprecated in AngularJS 1.6.x, and removed in AngularJS 1.7.x.\n if (typeof $compileProvider.preAssignBindingsEnabled === 'function') {\n return $compileProvider.preAssignBindingsEnabled();\n }\n\n // Flag respected but not present => apply logic based on AngularJS version used.\n if (angular.version.major === 1 && angular.version.minor < 6) {\n // AngularJS <1.5.10\n return true;\n }\n\n // AngularJS >=1.7.0\n return false;\n }\n\n this.$get = [\"$q\", \"$templateRequest\", \"$injector\", \"$compile\", \"$controller\",\n function($q, $templateRequest, $injector, $compile, $controller) {\n return new MdCompilerService($q, $templateRequest, $injector, $compile, $controller);\n }];\n\n /**\n * @ngdoc service\n * @name $mdCompiler\n * @module material.core.compiler\n * @description\n * The $mdCompiler service is an abstraction of AngularJS's compiler, that allows developers\n * to easily compile an element with options like in a Directive Definition Object.\n *\n * > The compiler powers a lot of components inside of AngularJS Material.\n * > Like the `$mdPanel` or `$mdDialog`.\n *\n * @usage\n *\n * Basic Usage with a template\n *\n * \n * $mdCompiler.compile({\n * templateUrl: 'modal.html',\n * controller: 'ModalCtrl',\n * locals: {\n * modal: myModalInstance;\n * }\n * }).then(function (compileData) {\n * compileData.element; // Compiled DOM element\n * compileData.link(myScope); // Instantiate controller and link element to scope.\n * });\n * \n *\n * Example with a content element\n *\n * \n *\n * // Create a virtual element and link it manually.\n * // The compiler doesn't need to recompile the element each time.\n * var myElement = $compile('Test')(myScope);\n *\n * $mdCompiler.compile({\n * contentElement: myElement\n * }).then(function (compileData) {\n * compileData.element // Content Element (same as above)\n * compileData.link // This does nothing when using a contentElement.\n * });\n * \n *\n * > Content Element is a significant performance improvement when the developer already knows that the\n * > compiled element will be always the same and the scope will not change either.\n *\n * The `contentElement` option also supports DOM elements which will be temporary removed and restored\n * at its old position.\n *\n * \n * var domElement = document.querySelector('#myElement');\n *\n * $mdCompiler.compile({\n * contentElement: myElement\n * }).then(function (compileData) {\n * compileData.element // Content Element (same as above)\n * compileData.link // This does nothing when using a contentElement.\n * });\n * \n *\n * The `$mdCompiler` can also query for the element in the DOM itself.\n *\n * \n * $mdCompiler.compile({\n * contentElement: '#myElement'\n * }).then(function (compileData) {\n * compileData.element // Content Element (same as above)\n * compileData.link // This does nothing when using a contentElement.\n * });\n * \n *\n */\n function MdCompilerService($q, $templateRequest, $injector, $compile, $controller) {\n\n /**\n * @private @const\n * @type {!IQService}\n */\n this.$q = $q;\n\n /**\n * @private @const\n * @type {!ITemplateRequestService}\n */\n this.$templateRequest = $templateRequest;\n\n /**\n * @private @const\n * @type {!IInjectorService}\n */\n this.$injector = $injector;\n\n /**\n * @private @const\n * @type{!ICompileService}\n */\n this.$compile = $compile;\n\n /**\n * @private @const\n * @type {!IControllerService}\n */\n this.$controller = $controller;\n }\n\n /**\n * @ngdoc method\n * @name $mdCompiler#compile\n * @description\n *\n * A method to compile a HTML template with the AngularJS compiler.\n * The `$mdCompiler` is wrapper around the AngularJS compiler and provides extra functionality\n * like controller instantiation or async resolves.\n *\n * @param {!Object} options An options object, with the following properties:\n *\n * - `controller` - `{string|function}` Controller fn that should be associated with\n * newly created scope or the name of a registered controller if passed as a string.\n * - `controllerAs` - `{string=}` A controller alias name. If present the controller will be\n * published to scope under the `controllerAs` name.\n * - `contentElement` - `{string|Element}`: Instead of using a template, which will be\n * compiled each time, you can also use a DOM element.
\n * - `template` - `{string=}` An html template as a string.\n * - `templateUrl` - `{string=}` A path to an html template.\n * - `transformTemplate` - `{function(template)=}` A function which transforms the template after\n * it is loaded. It will be given the template string as a parameter, and should\n * return a a new string representing the transformed template.\n * - `resolve` - `{Object.=}` - An optional map of dependencies which should\n * be injected into the controller. If any of these dependencies are promises, the compiler\n * will wait for them all to be resolved, or if one is rejected before the controller is\n * instantiated `compile()` will fail..\n * * `key` - `{string}`: a name of a dependency to be injected into the controller.\n * * `factory` - `{string|function}`: If `string` then it is an alias for a service.\n * Otherwise if function, then it is injected and the return value is treated as the\n * dependency. If the result is a promise, it is resolved before its value is\n * injected into the controller.\n *\n * @returns {Object} promise A promise, which will be resolved with a `compileData` object.\n * `compileData` has the following properties:\n *\n * - `element` - `{Element}`: an uncompiled element matching the provided template.\n * - `link` - `{function(scope)}`: A link function, which, when called, will compile\n * the element and instantiate the provided controller (if given).\n * - `locals` - `{Object}`: The locals which will be passed into the controller once `link` is\n * called. If `bindToController` is true, they will be copied to the ctrl instead\n */\n MdCompilerService.prototype.compile = function(options) {\n\n if (options.contentElement) {\n return this._prepareContentElement(options);\n } else {\n return this._compileTemplate(options);\n }\n\n };\n\n /**\n * Instead of compiling any template, the compiler just fetches an existing HTML element from the DOM and\n * provides a restore function to put the element back it old DOM position.\n * @param {!Object} options Options to be used for the compiler.\n */\n MdCompilerService.prototype._prepareContentElement = function(options) {\n\n var contentElement = this._fetchContentElement(options);\n\n return this.$q.resolve({\n element: contentElement.element,\n cleanup: contentElement.restore,\n locals: {},\n link: function() {\n return contentElement.element;\n }\n });\n\n };\n\n /**\n * Compiles a template by considering all options and waiting for all resolves to be ready.\n * @param {!Object} options Compile options\n * @returns {!Object} Compile data with link function.\n */\n MdCompilerService.prototype._compileTemplate = function(options) {\n\n var self = this;\n var templateUrl = options.templateUrl;\n var template = options.template || '';\n var resolve = angular.extend({}, options.resolve);\n var locals = angular.extend({}, options.locals);\n var transformTemplate = options.transformTemplate || angular.identity;\n\n // Take resolve values and invoke them.\n // Resolves can either be a string (value: 'MyRegisteredAngularConst'),\n // or an invokable 'factory' of sorts: (value: function ValueGetter($dependency) {})\n angular.forEach(resolve, function(value, key) {\n if (angular.isString(value)) {\n resolve[key] = self.$injector.get(value);\n } else {\n resolve[key] = self.$injector.invoke(value);\n }\n });\n\n // Add the locals, which are just straight values to inject\n // eg locals: { three: 3 }, will inject three into the controller\n angular.extend(resolve, locals);\n\n if (templateUrl) {\n resolve.$$ngTemplate = this.$templateRequest(templateUrl);\n } else {\n resolve.$$ngTemplate = this.$q.when(template);\n }\n\n\n // Wait for all the resolves to finish if they are promises\n return this.$q.all(resolve).then(function(locals) {\n\n var template = transformTemplate(locals.$$ngTemplate, options);\n var element = options.element || angular.element('
\n *\n *
\n *\n *
\n * - `template` - `{string=}` An html template as a string.\n * - `templateUrl` - `{string=}` A path to an html template.\n * - `transformTemplate` - `{function(template)=}` A function which transforms the template after\n * it is loaded. It will be given the template string as a parameter, and should\n * return a a new string representing the transformed template.\n * - `resolve` - `{Object.
').html(template.trim()).contents();\n\n return self._compileElement(locals, element, options);\n });\n\n };\n\n /**\n * Method to compile an element with the given options.\n * @param {!Object} locals Locals to be injected to the controller if present\n * @param {!JQLite} element Element to be compiled and linked\n * @param {!Object} options Options to be used for linking.\n * @returns {!Object} Compile data with link function.\n */\n MdCompilerService.prototype._compileElement = function(locals, element, options) {\n var self = this;\n var ngLinkFn = this.$compile(element);\n\n var compileData = {\n element: element,\n cleanup: element.remove.bind(element),\n locals: locals,\n link: linkFn\n };\n\n function linkFn(scope) {\n locals.$scope = scope;\n\n // Instantiate controller if the developer provided one.\n if (options.controller) {\n\n var injectLocals = angular.extend({}, locals, {\n $element: element\n });\n\n // Create the specified controller instance.\n var ctrl = self._createController(options, injectLocals, locals);\n\n // Registering extra $destroy listeners should be avoided.\n // Only register the listener if the controller implements a $onDestroy hook.\n if (angular.isFunction(ctrl.$onDestroy)) {\n scope.$on('$destroy', function() {\n // Call the $onDestroy hook if it's present on the controller.\n angular.isFunction(ctrl.$onDestroy) && ctrl.$onDestroy();\n });\n }\n\n // Unique identifier for AngularJS Route ngView controllers.\n element.data('$ngControllerController', ctrl);\n element.children().data('$ngControllerController', ctrl);\n\n // Expose the instantiated controller to the compile data\n compileData.controller = ctrl;\n }\n\n // Invoke the AngularJS $compile link function.\n return ngLinkFn(scope);\n }\n\n return compileData;\n\n };\n\n /**\n * Creates and instantiates a new controller with the specified options.\n * @param {!Object} options Options that include the controller function or string.\n * @param {!Object} injectLocals Locals to to be provided in the controller DI.\n * @param {!Object} locals Locals to be injected to the controller.\n * @returns {!Object} Created controller instance.\n */\n MdCompilerService.prototype._createController = function(options, injectLocals, locals) {\n var ctrl;\n var preAssignBindingsEnabled = getPreAssignBindingsEnabled();\n // The third argument to $controller is considered private and undocumented:\n // https://github.com/angular/angular.js/blob/v1.6.10/src/ng/controller.js#L102-L109.\n // TODO remove the use of this third argument in AngularJS Material 1.2.0.\n // Passing `true` as the third argument causes `$controller` to return a function that\n // gets the controller instance instead of returning the instance directly. When the\n // controller is defined as a function, `invokeCtrl.instance` is the *same instance* as\n // `invokeCtrl()`. However, when the controller is an ES6 class, `invokeCtrl.instance` is a\n // *different instance* from `invokeCtrl()`.\n if (preAssignBindingsEnabled) {\n var invokeCtrl = this.$controller(options.controller, injectLocals, true);\n\n if (options.bindToController) {\n angular.extend(invokeCtrl.instance, locals);\n }\n\n // Use the private API callback to instantiate and initialize the specified controller.\n ctrl = invokeCtrl();\n } else {\n // If we don't need to pre-assign bindings, avoid using the private API third argument and\n // related callback.\n ctrl = this.$controller(options.controller, injectLocals);\n\n if (options.bindToController) {\n angular.extend(ctrl, locals);\n }\n }\n\n if (options.controllerAs) {\n injectLocals.$scope[options.controllerAs] = ctrl;\n }\n\n // Call the $onInit hook if it's present on the controller.\n angular.isFunction(ctrl.$onInit) && ctrl.$onInit();\n\n return ctrl;\n };\n\n /**\n * Fetches an element removing it from the DOM and using it temporary for the compiler.\n * Elements which were fetched will be restored after use.\n * @param {!Object} options Options to be used for the compilation.\n * @returns {{element: !JQLite, restore: !function}}\n */\n MdCompilerService.prototype._fetchContentElement = function(options) {\n var contentEl = options.contentElement;\n var restoreFn = null;\n\n if (angular.isString(contentEl)) {\n contentEl = document.querySelector(contentEl);\n restoreFn = createRestoreFn(contentEl);\n } else {\n contentEl = contentEl[0] || contentEl;\n\n // When the element is visible in the DOM, then we restore it at close of the dialog.\n // Otherwise it will be removed from the DOM after close.\n if (document.contains(contentEl)) {\n restoreFn = createRestoreFn(contentEl);\n } else {\n restoreFn = function() {\n if (contentEl.parentNode) {\n contentEl.parentNode.removeChild(contentEl);\n }\n };\n }\n }\n\n return {\n element: angular.element(contentEl),\n restore: restoreFn\n };\n\n function createRestoreFn(element) {\n var parent = element.parentNode;\n var nextSibling = element.nextElementSibling;\n\n return function() {\n if (!nextSibling) {\n // When the element didn't had any sibling, then it can be simply appended to the\n // parent, because it plays no role, which index it had before.\n parent.appendChild(element);\n } else {\n // When the element had a sibling, which marks the previous position of the element\n // in the DOM, we insert it correctly before the sibling, to have the same index as\n // before.\n parent.insertBefore(element, nextSibling);\n }\n };\n }\n };\n}\n\n\n})();\n(function(){\n\"use strict\";\n\n\nMdGesture.$inject = [\"$$MdGestureHandler\", \"$$rAF\", \"$timeout\", \"$mdUtil\"];\nattachToDocument.$inject = [\"$mdGesture\", \"$$MdGestureHandler\", \"$mdUtil\"];var HANDLERS = {};\n\n/**\n * The state of the current 'pointer'. The pointer represents the state of the current touch.\n * It contains normalized x and y coordinates from DOM events,\n * as well as other information abstracted from the DOM.\n */\nvar pointer, lastPointer, maxClickDistance = 6;\nvar forceSkipClickHijack = false, disableAllGestures = false;\n\n/**\n * The position of the most recent click if that click was on a label element.\n * @type {{x: number, y: number}|null}\n */\nvar lastLabelClickPos = null;\n\n/**\n * Used to attach event listeners once when multiple ng-apps are running.\n * @type {boolean}\n */\nvar isInitialized = false;\n\n/**\n * @ngdoc module\n * @name material.core.gestures\n * @description\n * AngularJS Material Gesture handling for touch devices.\n * This module replaced the usage of the HammerJS library.\n */\nangular\n .module('material.core.gestures', [])\n .provider('$mdGesture', MdGestureProvider)\n .factory('$$MdGestureHandler', MdGestureHandler)\n .run(attachToDocument);\n\n/**\n * @ngdoc service\n * @name $mdGestureProvider\n * @module material.core.gestures\n *\n * @description\n * In some scenarios on mobile devices (without jQuery), the click events should NOT be hijacked.\n * `$mdGestureProvider` is used to configure the Gesture module to ignore or skip click hijacking\n * on mobile devices.\n *\n * You can also change the max click distance, `6px` by default, if you have issues on some touch\n * screens.\n *\n * \n * app.config(function($mdGestureProvider) {\n *\n * // For mobile devices without jQuery loaded, do not\n * // intercept click events during the capture phase.\n * $mdGestureProvider.skipClickHijack();\n *\n * // If hijacking clicks, you may want to change the default click distance\n * $mdGestureProvider.setMaxClickDistance(12);\n * });\n * \n *\n */\nfunction MdGestureProvider() { }\n\nMdGestureProvider.prototype = {\n\n /**\n * @ngdoc method\n * @name $mdGestureProvider#disableAll\n *\n * @description\n * Disable all gesture detection. This can be beneficial to application performance\n * and memory usage.\n */\n disableAll: function () {\n disableAllGestures = true;\n },\n\n // Publish access to setter to configure a variable BEFORE the\n // $mdGesture service is instantiated...\n /**\n * @ngdoc method\n * @name $mdGestureProvider#skipClickHijack\n *\n * @description\n * Tell the AngularJS Material Gesture module to skip (or ignore) click hijacking on mobile devices.\n */\n skipClickHijack: function() {\n return forceSkipClickHijack = true;\n },\n\n /**\n * @ngdoc method\n * @name $mdGestureProvider#setMaxClickDistance\n * @param clickDistance {string} Distance in pixels. I.e. `12px`.\n * @description\n * Set the max distance from the origin of the touch event to trigger touch handlers.\n */\n setMaxClickDistance: function(clickDistance) {\n maxClickDistance = parseInt(clickDistance);\n },\n\n /**\n * $get is used to build an instance of $mdGesture\n * @ngInject\n */\n $get : [\"$$MdGestureHandler\", \"$$rAF\", \"$timeout\", \"$mdUtil\", function($$MdGestureHandler, $$rAF, $timeout, $mdUtil) {\n return new MdGesture($$MdGestureHandler, $$rAF, $timeout, $mdUtil);\n }]\n};\n\n\n\n/**\n * MdGesture factory construction function\n * @ngInject\n */\nfunction MdGesture($$MdGestureHandler, $$rAF, $timeout, $mdUtil) {\n var touchActionProperty = $mdUtil.getTouchAction();\n var hasJQuery = (typeof window.jQuery !== 'undefined') && (angular.element === window.jQuery);\n\n var self = {\n handler: addHandler,\n register: register,\n isAndroid: $mdUtil.isAndroid,\n isIos: $mdUtil.isIos,\n // On mobile w/out jQuery, we normally intercept clicks. Should we skip that?\n isHijackingClicks: ($mdUtil.isIos || $mdUtil.isAndroid) && !hasJQuery && !forceSkipClickHijack\n };\n\n if (self.isHijackingClicks) {\n self.handler('click', {\n options: {\n maxDistance: maxClickDistance\n },\n onEnd: checkDistanceAndEmit('click')\n });\n\n self.handler('focus', {\n options: {\n maxDistance: maxClickDistance\n },\n onEnd: function(ev, pointer) {\n if (pointer.distance < this.state.options.maxDistance && canFocus(ev.target)) {\n this.dispatchEvent(ev, 'focus', pointer);\n ev.target.focus();\n }\n }\n });\n\n self.handler('mouseup', {\n options: {\n maxDistance: maxClickDistance\n },\n onEnd: checkDistanceAndEmit('mouseup')\n });\n\n self.handler('mousedown', {\n onStart: function(ev) {\n this.dispatchEvent(ev, 'mousedown');\n }\n });\n }\n\n function checkDistanceAndEmit(eventName) {\n return function(ev, pointer) {\n if (pointer.distance < this.state.options.maxDistance) {\n this.dispatchEvent(ev, eventName, pointer);\n }\n };\n }\n\n /**\n * Register an element to listen for a handler.\n * This allows an element to override the default options for a handler.\n * Additionally, some handlers like drag and hold only dispatch events if\n * the domEvent happens inside an element that's registered to listen for these events.\n *\n * @see GestureHandler for how overriding of default options works.\n * @example $mdGesture.register(myElement, 'drag', { minDistance: 20, horizontal: false })\n */\n function register(element, handlerName, options) {\n var handler = HANDLERS[handlerName.replace(/^\\$md./, '')];\n if (!handler) {\n throw new Error('Failed to register element with handler ' + handlerName + '. ' +\n 'Available handlers: ' + Object.keys(HANDLERS).join(', '));\n }\n return handler.registerElement(element, options);\n }\n\n /*\n * add a handler to $mdGesture. see below.\n */\n function addHandler(name, definition) {\n var handler = new $$MdGestureHandler(name);\n angular.extend(handler, definition);\n HANDLERS[name] = handler;\n\n return self;\n }\n\n /**\n * Register handlers. These listen to touch/start/move events, interpret them,\n * and dispatch gesture events depending on options & conditions. These are all\n * instances of GestureHandler.\n * @see GestureHandler\n */\n return self\n /*\n * The press handler dispatches an event on touchdown/touchend.\n * It's a simple abstraction of touch/mouse/pointer start and end.\n */\n .handler('press', {\n onStart: function (ev, pointer) {\n this.dispatchEvent(ev, '$md.pressdown');\n },\n onEnd: function (ev, pointer) {\n this.dispatchEvent(ev, '$md.pressup');\n }\n })\n\n /*\n * The hold handler dispatches an event if the user keeps their finger within\n * the same area for ms.\n * The hold handler will only run if a parent of the touch target is registered\n * to listen for hold events through $mdGesture.register()\n */\n .handler('hold', {\n options: {\n maxDistance: 6,\n delay: 500\n },\n onCancel: function () {\n $timeout.cancel(this.state.timeout);\n },\n onStart: function (ev, pointer) {\n // For hold, require a parent to be registered with $mdGesture.register()\n // Because we prevent scroll events, this is necessary.\n if (!this.state.registeredParent) return this.cancel();\n\n this.state.pos = {x: pointer.x, y: pointer.y};\n this.state.timeout = $timeout(angular.bind(this, function holdDelayFn() {\n this.dispatchEvent(ev, '$md.hold');\n this.cancel(); // we're done!\n }), this.state.options.delay, false);\n },\n onMove: function (ev, pointer) {\n // Don't scroll while waiting for hold.\n // If we don't preventDefault touchmove events here, Android will assume we don't\n // want to listen to anymore touch events. It will start scrolling and stop sending\n // touchmove events.\n if (!touchActionProperty && ev.type === 'touchmove') ev.preventDefault();\n\n // If the user moves greater than pixels, stop the hold timer\n // set in onStart\n var dx = this.state.pos.x - pointer.x;\n var dy = this.state.pos.y - pointer.y;\n if (Math.sqrt(dx * dx + dy * dy) > this.options.maxDistance) {\n this.cancel();\n }\n },\n onEnd: function () {\n this.onCancel();\n }\n })\n\n /*\n * The drag handler dispatches a drag event if the user holds and moves his finger greater than\n * px in the x or y direction, depending on options.horizontal.\n * The drag will be cancelled if the user moves his finger greater than * in\n * the perpendicular direction. Eg if the drag is horizontal and the user moves his finger *\n * pixels vertically, this handler won't consider the move part of a drag.\n */\n .handler('drag', {\n options: {\n minDistance: 6,\n horizontal: true,\n cancelMultiplier: 1.5\n },\n /**\n * @param {angular.JQLite} element where touch action styles need to be adjusted\n * @param {{horizontal: boolean}=} options object whose horizontal property can specify to\n * apply 'pan-y' or 'pan-x' touch actions.\n */\n onSetup: function(element, options) {\n if (touchActionProperty) {\n // We check for horizontal to be false, because otherwise we would overwrite the default opts.\n this.oldTouchAction = element[0].style[touchActionProperty];\n element[0].style[touchActionProperty] = options.horizontal ? 'pan-y' : 'pan-x';\n }\n },\n /**\n * @param {angular.JQLite} element where styles need to be cleaned up\n */\n onCleanup: function(element) {\n if (this.oldTouchAction) {\n element[0].style[touchActionProperty] = this.oldTouchAction;\n } else {\n element[0].style[touchActionProperty] = null;\n }\n },\n onStart: function (ev) {\n // For drag, require a parent to be registered with $mdGesture.register()\n if (!this.state.registeredParent) this.cancel();\n },\n onMove: function (ev, pointer) {\n var shouldStartDrag, shouldCancel;\n // Don't scroll while deciding if this touchmove qualifies as a drag event.\n // If we don't preventDefault touchmove events here, Android will assume we don't\n // want to listen to anymore touch events. It will start scrolling and stop sending\n // touchmove events.\n if (!touchActionProperty && ev.type === 'touchmove') ev.preventDefault();\n\n if (!this.state.dragPointer) {\n if (this.state.options.horizontal) {\n shouldStartDrag = Math.abs(pointer.distanceX) > this.state.options.minDistance;\n shouldCancel = Math.abs(pointer.distanceY) > this.state.options.minDistance * this.state.options.cancelMultiplier;\n } else {\n shouldStartDrag = Math.abs(pointer.distanceY) > this.state.options.minDistance;\n shouldCancel = Math.abs(pointer.distanceX) > this.state.options.minDistance * this.state.options.cancelMultiplier;\n }\n\n if (shouldStartDrag) {\n // Create a new pointer representing this drag, starting at this point where the drag started.\n this.state.dragPointer = makeStartPointer(ev);\n updatePointerState(ev, this.state.dragPointer);\n this.dispatchEvent(ev, '$md.dragstart', this.state.dragPointer);\n\n } else if (shouldCancel) {\n this.cancel();\n }\n } else {\n this.dispatchDragMove(ev);\n }\n },\n // Only dispatch dragmove events every frame; any more is unnecessary\n dispatchDragMove: $$rAF.throttle(function (ev) {\n // Make sure the drag didn't stop while waiting for the next frame\n if (this.state.isRunning) {\n updatePointerState(ev, this.state.dragPointer);\n this.dispatchEvent(ev, '$md.drag', this.state.dragPointer);\n }\n }),\n onEnd: function (ev, pointer) {\n if (this.state.dragPointer) {\n updatePointerState(ev, this.state.dragPointer);\n this.dispatchEvent(ev, '$md.dragend', this.state.dragPointer);\n }\n }\n })\n\n /*\n * The swipe handler will dispatch a swipe event if, on the end of a touch,\n * the velocity and distance were high enough.\n */\n .handler('swipe', {\n options: {\n minVelocity: 0.65,\n minDistance: 10\n },\n onEnd: function (ev, pointer) {\n var eventType;\n\n if (Math.abs(pointer.velocityX) > this.state.options.minVelocity &&\n Math.abs(pointer.distanceX) > this.state.options.minDistance) {\n eventType = pointer.directionX == 'left' ? '$md.swipeleft' : '$md.swiperight';\n this.dispatchEvent(ev, eventType);\n }\n else if (Math.abs(pointer.velocityY) > this.state.options.minVelocity &&\n Math.abs(pointer.distanceY) > this.state.options.minDistance) {\n eventType = pointer.directionY == 'up' ? '$md.swipeup' : '$md.swipedown';\n this.dispatchEvent(ev, eventType);\n }\n }\n });\n}\n\n/**\n * MdGestureHandler\n * A GestureHandler is an object which is able to dispatch custom dom events\n * based on native dom {touch,pointer,mouse}{start,move,end} events.\n *\n * A gesture will manage its lifecycle through the start,move,end, and cancel\n * functions, which are called by native dom events.\n *\n * A gesture has the concept of 'options' (eg. a swipe's required velocity), which can be\n * overridden by elements registering through $mdGesture.register().\n */\nfunction GestureHandler (name) {\n this.name = name;\n this.state = {};\n}\n\nfunction MdGestureHandler() {\n var hasJQuery = (typeof window.jQuery !== 'undefined') && (angular.element === window.jQuery);\n\n GestureHandler.prototype = {\n options: {},\n // jQuery listeners don't work with custom DOMEvents, so we have to dispatch events\n // differently when jQuery is loaded\n dispatchEvent: hasJQuery ? jQueryDispatchEvent : nativeDispatchEvent,\n\n // These are overridden by the registered handler\n onSetup: angular.noop,\n onCleanup: angular.noop,\n onStart: angular.noop,\n onMove: angular.noop,\n onEnd: angular.noop,\n onCancel: angular.noop,\n\n // onStart sets up a new state for the handler, which includes options from the\n // nearest registered parent element of ev.target.\n start: function (ev, pointer) {\n if (this.state.isRunning) return;\n var parentTarget = this.getNearestParent(ev.target);\n // Get the options from the nearest registered parent\n var parentTargetOptions = parentTarget && parentTarget.$mdGesture[this.name] || {};\n\n this.state = {\n isRunning: true,\n // Override the default options with the nearest registered parent's options\n options: angular.extend({}, this.options, parentTargetOptions),\n // Pass in the registered parent node to the state so the onStart listener can use\n registeredParent: parentTarget\n };\n this.onStart(ev, pointer);\n },\n move: function (ev, pointer) {\n if (!this.state.isRunning) return;\n this.onMove(ev, pointer);\n },\n end: function (ev, pointer) {\n if (!this.state.isRunning) return;\n this.state.isRunning = false;\n this.onEnd(ev, pointer);\n },\n cancel: function (ev, pointer) {\n this.onCancel(ev, pointer);\n this.state = {};\n },\n\n // Find and return the nearest parent element that has been registered to\n // listen for this handler via $mdGesture.register(element, 'handlerName').\n getNearestParent: function (node) {\n var current = node;\n while (current) {\n if ((current.$mdGesture || {})[this.name]) {\n return current;\n }\n current = current.parentNode;\n }\n return null;\n },\n\n // Called from $mdGesture.register when an element registers itself with a handler.\n // Store the options the user gave on the DOMElement itself. These options will\n // be retrieved with getNearestParent when the handler starts.\n registerElement: function (element, options) {\n var self = this;\n element[0].$mdGesture = element[0].$mdGesture || {};\n element[0].$mdGesture[this.name] = options || {};\n element.on('$destroy', onDestroy);\n\n self.onSetup(element, options || {});\n\n return onDestroy;\n\n function onDestroy() {\n delete element[0].$mdGesture[self.name];\n element.off('$destroy', onDestroy);\n\n self.onCleanup(element, options || {});\n }\n }\n };\n\n return GestureHandler;\n\n /**\n * Dispatch an event with jQuery\n * TODO: Make sure this sends bubbling events\n *\n * @param srcEvent the original DOM touch event that started this.\n * @param eventType the name of the custom event to send (eg 'click' or '$md.drag')\n * @param eventPointer the pointer object that matches this event.\n */\n function jQueryDispatchEvent(srcEvent, eventType, eventPointer) {\n eventPointer = eventPointer || pointer;\n var eventObj = new angular.element.Event(eventType);\n\n eventObj.$material = true;\n eventObj.pointer = eventPointer;\n eventObj.srcEvent = srcEvent;\n\n angular.extend(eventObj, {\n clientX: eventPointer.x,\n clientY: eventPointer.y,\n screenX: eventPointer.x,\n screenY: eventPointer.y,\n pageX: eventPointer.x,\n pageY: eventPointer.y,\n ctrlKey: srcEvent.ctrlKey,\n altKey: srcEvent.altKey,\n shiftKey: srcEvent.shiftKey,\n metaKey: srcEvent.metaKey\n });\n angular.element(eventPointer.target).trigger(eventObj);\n }\n\n /**\n * NOTE: nativeDispatchEvent is very performance sensitive.\n * @param srcEvent the original DOM touch event that started this.\n * @param eventType the name of the custom event to send (eg 'click' or '$md.drag')\n * @param eventPointer the pointer object that matches this event.\n */\n function nativeDispatchEvent(srcEvent, eventType, eventPointer) {\n eventPointer = eventPointer || pointer;\n var eventObj;\n\n if (eventType === 'click' || eventType === 'mouseup' || eventType === 'mousedown') {\n if (typeof window.MouseEvent === \"function\") {\n eventObj = new MouseEvent(eventType, {\n bubbles: true,\n cancelable: true,\n screenX: Number(srcEvent.screenX),\n screenY: Number(srcEvent.screenY),\n clientX: Number(eventPointer.x),\n clientY: Number(eventPointer.y),\n ctrlKey: srcEvent.ctrlKey,\n altKey: srcEvent.altKey,\n shiftKey: srcEvent.shiftKey,\n metaKey: srcEvent.metaKey,\n button: srcEvent.button,\n buttons: srcEvent.buttons,\n relatedTarget: srcEvent.relatedTarget || null\n });\n } else {\n eventObj = document.createEvent('MouseEvents');\n // This has been deprecated\n // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/initMouseEvent\n eventObj.initMouseEvent(\n eventType, true, true, window, srcEvent.detail,\n eventPointer.x, eventPointer.y, eventPointer.x, eventPointer.y,\n srcEvent.ctrlKey, srcEvent.altKey, srcEvent.shiftKey, srcEvent.metaKey,\n srcEvent.button, srcEvent.relatedTarget || null\n );\n }\n } else {\n if (typeof window.CustomEvent === \"function\") {\n eventObj = new CustomEvent(eventType, {\n bubbles: true,\n cancelable: true,\n detail: {}\n });\n } else {\n // This has been deprecated\n // https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/initCustomEvent\n eventObj = document.createEvent('CustomEvent');\n eventObj.initCustomEvent(eventType, true, true, {});\n }\n }\n eventObj.$material = true;\n eventObj.pointer = eventPointer;\n eventObj.srcEvent = srcEvent;\n eventPointer.target.dispatchEvent(eventObj);\n }\n}\n\n/**\n * Attach Gestures: hook document and check shouldHijack clicks\n * @ngInject\n */\nfunction attachToDocument($mdGesture, $$MdGestureHandler, $mdUtil) {\n if (disableAllGestures) {\n return;\n }\n\n if (!isInitialized && $mdGesture.isHijackingClicks) {\n /*\n * If hijack clicks is true, we preventDefault any click that wasn't\n * sent by AngularJS Material. This is because on older Android & iOS, a false, or 'ghost',\n * click event will be sent ~400ms after a touchend event happens.\n * The only way to know if this click is real is to prevent any normal\n * click events, and add a flag to events sent by material so we know not to prevent those.\n *\n * Two exceptions to click events that should be prevented are:\n * - click events sent by the keyboard (eg form submit)\n * - events that originate from an Ionic app\n */\n document.addEventListener('click' , clickHijacker , true);\n document.addEventListener('mouseup' , mouseInputHijacker, true);\n document.addEventListener('mousedown', mouseInputHijacker, true);\n document.addEventListener('focus' , mouseInputHijacker, true);\n\n isInitialized = true;\n }\n\n function mouseInputHijacker(ev) {\n var isKeyClick = !ev.clientX && !ev.clientY;\n\n if (\n !isKeyClick &&\n !ev.$material &&\n !ev.isIonicTap &&\n !isInputEventFromLabelClick(ev) &&\n (ev.type !== 'mousedown' || (!canFocus(ev.target) && !canFocus(document.activeElement)))\n ) {\n ev.preventDefault();\n ev.stopPropagation();\n }\n }\n\n /**\n * Ignore click events that don't come from AngularJS Material, Ionic, Input Label clicks,\n * or key presses that generate click events. This helps to ignore the ghost tap events on\n * older mobile browsers that get sent after a 300-400ms delay.\n * @param ev MouseEvent or modified MouseEvent with $material, pointer, and other fields\n */\n function clickHijacker(ev) {\n var isKeyClick;\n if ($mdUtil.isIos) {\n isKeyClick = angular.isDefined(ev.webkitForce) && ev.webkitForce === 0;\n } else {\n isKeyClick = ev.clientX === 0 && ev.clientY === 0;\n }\n if (!isKeyClick && !ev.$material && !ev.isIonicTap && !isInputEventFromLabelClick(ev)) {\n ev.preventDefault();\n ev.stopPropagation();\n lastLabelClickPos = null;\n } else {\n lastLabelClickPos = null;\n if (ev.target.tagName.toLowerCase() === 'label') {\n lastLabelClickPos = {x: ev.x, y: ev.y};\n }\n }\n }\n\n\n // Listen to all events to cover all platforms.\n var START_EVENTS = 'mousedown touchstart pointerdown';\n var MOVE_EVENTS = 'mousemove touchmove pointermove';\n var END_EVENTS = 'mouseup mouseleave touchend touchcancel pointerup pointercancel';\n\n angular.element(document)\n .on(START_EVENTS, gestureStart)\n .on(MOVE_EVENTS, gestureMove)\n .on(END_EVENTS, gestureEnd)\n // For testing\n .on('$$mdGestureReset', function gestureClearCache () {\n lastPointer = pointer = null;\n });\n\n /**\n * When a DOM event happens, run all registered gesture handlers' lifecycle\n * methods which match the DOM event.\n * Eg. when a 'touchstart' event happens, runHandlers('start') will call and\n * run `handler.cancel()` and `handler.start()` on all registered handlers.\n */\n function runHandlers(handlerEvent, event) {\n var handler;\n for (var name in HANDLERS) {\n handler = HANDLERS[name];\n if (handler instanceof $$MdGestureHandler) {\n\n if (handlerEvent === 'start') {\n // Run cancel to reset any handlers' state\n handler.cancel();\n }\n handler[handlerEvent](event, pointer);\n }\n }\n }\n\n /*\n * gestureStart vets if a start event is legitimate (and not part of a 'ghost click' from iOS/Android)\n * If it is legitimate, we initiate the pointer state and mark the current pointer's type\n * For example, for a touchstart event, mark the current pointer as a 'touch' pointer, so mouse events\n * won't effect it.\n */\n function gestureStart(ev) {\n // If we're already touched down, abort\n if (pointer) return;\n\n var now = +Date.now();\n\n // iOS & old android bug: after a touch event, a click event is sent 350 ms later.\n // If <400ms have passed, don't allow an event of a different type than the previous event\n if (lastPointer && !typesMatch(ev, lastPointer) && (now - lastPointer.endTime < 1500)) {\n return;\n }\n\n pointer = makeStartPointer(ev);\n\n runHandlers('start', ev);\n }\n\n /**\n * If a move event happens of the right type, update the pointer and run all the move handlers.\n * \"of the right type\": if a mousemove happens but our pointer started with a touch event, do\n * nothing.\n */\n function gestureMove(ev) {\n if (!pointer || !typesMatch(ev, pointer)) return;\n\n updatePointerState(ev, pointer);\n runHandlers('move', ev);\n }\n\n /**\n * If an end event happens of the right type, update the pointer, run endHandlers, and save the\n * pointer as 'lastPointer'.\n */\n function gestureEnd(ev) {\n if (!pointer || !typesMatch(ev, pointer)) return;\n\n updatePointerState(ev, pointer);\n pointer.endTime = +Date.now();\n\n if (ev.type !== 'pointercancel') {\n runHandlers('end', ev);\n }\n\n lastPointer = pointer;\n pointer = null;\n }\n\n}\n\n// ********************\n// Module Functions\n// ********************\n\n/*\n * Initiate the pointer. x, y, and the pointer's type.\n */\nfunction makeStartPointer(ev) {\n var point = getEventPoint(ev);\n var startPointer = {\n startTime: +Date.now(),\n target: ev.target,\n // 'p' for pointer events, 'm' for mouse, 't' for touch\n type: ev.type.charAt(0)\n };\n startPointer.startX = startPointer.x = point.pageX;\n startPointer.startY = startPointer.y = point.pageY;\n return startPointer;\n}\n\n/*\n * return whether the pointer's type matches the event's type.\n * Eg if a touch event happens but the pointer has a mouse type, return false.\n */\nfunction typesMatch(ev, pointer) {\n return ev && pointer && ev.type.charAt(0) === pointer.type;\n}\n\n/**\n * Gets whether the given event is an input event that was caused by clicking on an\n * associated label element.\n *\n * This is necessary because the browser will, upon clicking on a label element, fire an\n * *extra* click event on its associated input (if any). mdGesture is able to flag the label\n * click as with `$material` correctly, but not the second input click.\n *\n * In order to determine whether an input event is from a label click, we compare the (x, y) for\n * the event to the (x, y) for the most recent label click (which is cleared whenever a non-label\n * click occurs). Unfortunately, there are no event properties that tie the input and the label\n * together (such as relatedTarget).\n *\n * @param {MouseEvent} event\n * @returns {boolean}\n */\nfunction isInputEventFromLabelClick(event) {\n return lastLabelClickPos\n && lastLabelClickPos.x === event.x\n && lastLabelClickPos.y === event.y;\n}\n\n/*\n * Update the given pointer based upon the given DOMEvent.\n * Distance, velocity, direction, duration, etc\n */\nfunction updatePointerState(ev, pointer) {\n var point = getEventPoint(ev);\n var x = pointer.x = point.pageX;\n var y = pointer.y = point.pageY;\n\n pointer.distanceX = x - pointer.startX;\n pointer.distanceY = y - pointer.startY;\n pointer.distance = Math.sqrt(\n pointer.distanceX * pointer.distanceX + pointer.distanceY * pointer.distanceY\n );\n\n pointer.directionX = pointer.distanceX > 0 ? 'right' : pointer.distanceX < 0 ? 'left' : '';\n pointer.directionY = pointer.distanceY > 0 ? 'down' : pointer.distanceY < 0 ? 'up' : '';\n\n pointer.duration = +Date.now() - pointer.startTime;\n pointer.velocityX = pointer.distanceX / pointer.duration;\n pointer.velocityY = pointer.distanceY / pointer.duration;\n}\n\n/**\n * Normalize the point where the DOM event happened whether it's touch or mouse.\n * @returns point event obj with pageX and pageY on it.\n */\nfunction getEventPoint(ev) {\n ev = ev.originalEvent || ev; // support jQuery events\n return (ev.touches && ev.touches[0]) ||\n (ev.changedTouches && ev.changedTouches[0]) ||\n ev;\n}\n\n/** Checks whether an element can be focused. */\nfunction canFocus(element) {\n return (\n !!element &&\n element.getAttribute('tabindex') !== '-1' &&\n !element.hasAttribute('disabled') &&\n (\n element.hasAttribute('tabindex') ||\n element.hasAttribute('href') ||\n element.isContentEditable ||\n ['INPUT', 'SELECT', 'BUTTON', 'TEXTAREA', 'VIDEO', 'AUDIO'].indexOf(element.nodeName) !== -1\n )\n );\n}\n\n})();\n(function(){\n\"use strict\";\n\n/**\n * @ngdoc module\n * @name material.core.interaction\n * @description\n * User interaction detection to provide proper accessibility.\n */\nMdInteractionService.$inject = [\"$timeout\", \"$mdUtil\", \"$rootScope\"];\nangular\n .module('material.core.interaction', [])\n .service('$mdInteraction', MdInteractionService);\n\n\n/**\n * @ngdoc service\n * @name $mdInteraction\n * @module material.core.interaction\n *\n * @description\n *\n * Service which keeps track of the last interaction type and validates them for several browsers.\n * The service hooks into the document's body and listens for touch, mouse and keyboard events.\n *\n * The most recent interaction type can be retrieved by calling the `getLastInteractionType` method.\n *\n * Here is an example markup for using the interaction service.\n *\n * \n * var lastType = $mdInteraction.getLastInteractionType();\n *\n * if (lastType === 'keyboard') {\n * // We only restore the focus for keyboard users.\n * restoreFocus();\n * }\n * \n *\n */\nfunction MdInteractionService($timeout, $mdUtil, $rootScope) {\n this.$timeout = $timeout;\n this.$mdUtil = $mdUtil;\n this.$rootScope = $rootScope;\n\n // IE browsers can also trigger pointer events, which also leads to an interaction.\n this.pointerEvent = 'MSPointerEvent' in window ? 'MSPointerDown' : 'PointerEvent' in window ? 'pointerdown' : null;\n this.bodyElement = angular.element(document.body);\n this.isBuffering = false;\n this.bufferTimeout = null;\n this.lastInteractionType = null;\n this.lastInteractionTime = null;\n this.inputHandler = this.onInputEvent.bind(this);\n this.bufferedInputHandler = this.onBufferInputEvent.bind(this);\n\n // Type Mappings for the different events\n // There will be three three interaction types\n // `keyboard`, `mouse` and `touch`\n // type `pointer` will be evaluated in `pointerMap` for IE Browser events\n this.inputEventMap = {\n 'keydown': 'keyboard',\n 'mousedown': 'mouse',\n 'mouseenter': 'mouse',\n 'touchstart': 'touch',\n 'pointerdown': 'pointer',\n 'MSPointerDown': 'pointer'\n };\n\n // IE PointerDown events will be validated in `touch` or `mouse`\n // Index numbers referenced here: https://msdn.microsoft.com/library/windows/apps/hh466130.aspx\n this.iePointerMap = {\n 2: 'touch',\n 3: 'touch',\n 4: 'mouse'\n };\n\n this.initializeEvents();\n this.$rootScope.$on('$destroy', this.deregister.bind(this));\n}\n\n/**\n * Removes all event listeners created by $mdInteration on the\n * body element.\n */\nMdInteractionService.prototype.deregister = function() {\n\n this.bodyElement.off('keydown mousedown', this.inputHandler);\n\n if ('ontouchstart' in document.documentElement) {\n this.bodyElement.off('touchstart', this.bufferedInputHandler);\n }\n\n if (this.pointerEvent) {\n this.bodyElement.off(this.pointerEvent, this.inputHandler);\n }\n\n};\n\n/**\n * Initializes the interaction service, by registering all interaction events to the\n * body element.\n */\nMdInteractionService.prototype.initializeEvents = function() {\n\n this.bodyElement.on('keydown mousedown', this.inputHandler);\n\n if ('ontouchstart' in document.documentElement) {\n this.bodyElement.on('touchstart', this.bufferedInputHandler);\n }\n\n if (this.pointerEvent) {\n this.bodyElement.on(this.pointerEvent, this.inputHandler);\n }\n\n};\n\n/**\n * Event listener for normal interaction events, which should be tracked.\n * @param event {MouseEvent|KeyboardEvent|PointerEvent|TouchEvent}\n */\nMdInteractionService.prototype.onInputEvent = function(event) {\n if (this.isBuffering) {\n return;\n }\n\n var type = this.inputEventMap[event.type];\n\n if (type === 'pointer') {\n type = this.iePointerMap[event.pointerType] || event.pointerType;\n }\n\n this.lastInteractionType = type;\n this.lastInteractionTime = this.$mdUtil.now();\n};\n\n/**\n * Event listener for interaction events which should be buffered (touch events).\n * @param event {TouchEvent}\n */\nMdInteractionService.prototype.onBufferInputEvent = function(event) {\n this.$timeout.cancel(this.bufferTimeout);\n\n this.onInputEvent(event);\n this.isBuffering = true;\n\n // The timeout of 650ms is needed to delay the touchstart, because otherwise the touch will call\n // the `onInput` function multiple times.\n this.bufferTimeout = this.$timeout(function() {\n this.isBuffering = false;\n }.bind(this), 650, false);\n\n};\n\n/**\n * @ngdoc method\n * @name $mdInteraction#getLastInteractionType\n * @description Retrieves the last interaction type triggered in body.\n * @returns {string|null} Last interaction type.\n */\nMdInteractionService.prototype.getLastInteractionType = function() {\n return this.lastInteractionType;\n};\n\n/**\n * @ngdoc method\n * @name $mdInteraction#isUserInvoked\n * @description Method to detect whether any interaction happened recently or not.\n * @param {number=} checkDelay Time to check for any interaction to have been triggered.\n * @returns {boolean} Whether there was any interaction or not.\n */\nMdInteractionService.prototype.isUserInvoked = function(checkDelay) {\n var delay = angular.isNumber(checkDelay) ? checkDelay : 15;\n\n // Check for any interaction to be within the specified check time.\n return this.lastInteractionTime >= this.$mdUtil.now() - delay;\n};\n\n})();\n(function(){\n\"use strict\";\n\nangular.module('material.core')\n .provider('$$interimElement', InterimElementProvider);\n\n/**\n * @ngdoc service\n * @name $$interimElementProvider\n * @module material.core.interimElement\n *\n * @description\n *\n * Factory that constructs `$$interimElement.$service` services.\n * Used internally in material design for elements that appear on screen temporarily.\n * The service provides a promise-like API for interacting with the temporary\n * elements.\n *\n * \n * app.service('$mdToast', function($$interimElement) {\n * var $mdToast = $$interimElement(toastDefaultOptions);\n * return $mdToast;\n * });\n * \n *\n * @param {object=} defaultOptions Options used by default for the `show` method on the service.\n *\n * @returns {$$interimElement.$service}\n */\n\nfunction InterimElementProvider() {\n InterimElementFactory.$inject = [\"$document\", \"$q\", \"$rootScope\", \"$timeout\", \"$rootElement\", \"$animate\", \"$mdUtil\", \"$mdCompiler\", \"$mdTheming\", \"$injector\", \"$exceptionHandler\"];\n createInterimElementProvider.$get = InterimElementFactory;\n return createInterimElementProvider;\n\n /**\n * Returns a new provider which allows configuration of a new interimElement\n * service. Allows configuration of default options & methods for options,\n * as well as configuration of 'preset' methods (eg dialog.basic(): basic is a preset method)\n */\n function createInterimElementProvider(interimFactoryName) {\n factory.$inject = [\"$$interimElement\", \"$injector\"];\n var EXPOSED_METHODS = ['onHide', 'onShow', 'onRemove'];\n\n var customMethods = {};\n var providerConfig = {\n presets: {}\n };\n\n var provider = {\n setDefaults: setDefaults,\n addPreset: addPreset,\n addMethod: addMethod,\n $get: factory\n };\n\n /**\n * all interim elements will come with the 'build' preset\n */\n provider.addPreset('build', {\n methods: ['controller', 'controllerAs', 'resolve', 'multiple',\n 'template', 'templateUrl', 'themable', 'transformTemplate', 'parent', 'contentElement']\n });\n\n return provider;\n\n /**\n * Save the configured defaults to be used when the factory is instantiated\n */\n function setDefaults(definition) {\n providerConfig.optionsFactory = definition.options;\n providerConfig.methods = (definition.methods || []).concat(EXPOSED_METHODS);\n return provider;\n }\n\n /**\n * Add a method to the factory that isn't specific to any interim element operations\n */\n function addMethod(name, fn) {\n customMethods[name] = fn;\n return provider;\n }\n\n /**\n * Save the configured preset to be used when the factory is instantiated\n */\n function addPreset(name, definition) {\n definition = definition || {};\n definition.methods = definition.methods || [];\n definition.options = definition.options || function() { return {}; };\n\n if (/^cancel|hide|show$/.test(name)) {\n throw new Error(\"Preset '\" + name + \"' in \" + interimFactoryName + \" is reserved!\");\n }\n if (definition.methods.indexOf('_options') > -1) {\n throw new Error(\"Method '_options' in \" + interimFactoryName + \" is reserved!\");\n }\n providerConfig.presets[name] = {\n methods: definition.methods.concat(EXPOSED_METHODS),\n optionsFactory: definition.options,\n argOption: definition.argOption\n };\n return provider;\n }\n\n function addPresetMethod(presetName, methodName, method) {\n providerConfig.presets[presetName][methodName] = method;\n }\n\n /**\n * Create a factory that has the given methods & defaults implementing interimElement\n */\n /* @ngInject */\n function factory($$interimElement, $injector) {\n var defaultMethods;\n var defaultOptions;\n var interimElementService = $$interimElement();\n\n /*\n * publicService is what the developer will be using.\n * It has methods hide(), cancel(), show(), build(), and any other\n * presets which were set during the config phase.\n */\n var publicService = {\n hide: interimElementService.hide,\n cancel: interimElementService.cancel,\n show: showInterimElement,\n\n // Special internal method to destroy an interim element without animations\n // used when navigation changes causes a $scope.$destroy() action\n destroy : destroyInterimElement\n };\n\n\n defaultMethods = providerConfig.methods || [];\n // This must be invoked after the publicService is initialized\n defaultOptions = invokeFactory(providerConfig.optionsFactory, {});\n\n // Copy over the simple custom methods\n angular.forEach(customMethods, function(fn, name) {\n publicService[name] = fn;\n });\n\n angular.forEach(providerConfig.presets, function(definition, name) {\n var presetDefaults = invokeFactory(definition.optionsFactory, {});\n var presetMethods = (definition.methods || []).concat(defaultMethods);\n\n // Every interimElement built with a preset has a field called `$type`,\n // which matches the name of the preset.\n // Eg in preset 'confirm', options.$type === 'confirm'\n angular.extend(presetDefaults, { $type: name });\n\n // This creates a preset class which has setter methods for every\n // method given in the `.addPreset()` function, as well as every\n // method given in the `.setDefaults()` function.\n //\n // @example\n // .setDefaults({\n // methods: ['hasBackdrop', 'clickOutsideToClose', 'escapeToClose', 'targetEvent'],\n // options: dialogDefaultOptions\n // })\n // .addPreset('alert', {\n // methods: ['title', 'ok'],\n // options: alertDialogOptions\n // })\n //\n // Set values will be passed to the options when interimElement.show() is called.\n function Preset(opts) {\n this._options = angular.extend({}, presetDefaults, opts);\n }\n angular.forEach(presetMethods, function(name) {\n Preset.prototype[name] = function(value) {\n this._options[name] = value;\n return this;\n };\n });\n\n // Create shortcut method for one-linear methods\n if (definition.argOption) {\n var methodName = 'show' + name.charAt(0).toUpperCase() + name.slice(1);\n publicService[methodName] = function(arg) {\n var config = publicService[name](arg);\n return publicService.show(config);\n };\n }\n\n // eg $mdDialog.alert() will return a new alert preset\n publicService[name] = function(arg) {\n // If argOption is supplied, eg `argOption: 'content'`, then we assume\n // if the argument is not an options object then it is the `argOption` option.\n //\n // @example `$mdToast.simple('hello')` // sets options.content to hello\n // // because argOption === 'content'\n if (arguments.length && definition.argOption &&\n !angular.isObject(arg) && !angular.isArray(arg)) {\n\n return (new Preset())[definition.argOption](arg);\n\n } else {\n return new Preset(arg);\n }\n\n };\n });\n\n return publicService;\n\n /**\n *\n */\n function showInterimElement(opts) {\n // opts is either a preset which stores its options on an _options field,\n // or just an object made up of options\n opts = opts || { };\n if (opts._options) opts = opts._options;\n\n return interimElementService.show(\n angular.extend({}, defaultOptions, opts)\n );\n }\n\n /**\n * Special method to hide and destroy an interimElement WITHOUT\n * any 'leave` or hide animations ( an immediate force hide/remove )\n *\n * NOTE: This calls the onRemove() subclass method for each component...\n * which must have code to respond to `options.$destroy == true`\n */\n function destroyInterimElement(opts) {\n return interimElementService.destroy(opts);\n }\n\n /**\n * Helper to call $injector.invoke with a local of the factory name for\n * this provider.\n * If an $mdDialog is providing options for a dialog and tries to inject\n * $mdDialog, a circular dependency error will happen.\n * We get around that by manually injecting $mdDialog as a local.\n */\n function invokeFactory(factory, defaultVal) {\n var locals = {};\n locals[interimFactoryName] = publicService;\n return $injector.invoke(factory || function() { return defaultVal; }, {}, locals);\n }\n }\n }\n\n /* @ngInject */\n function InterimElementFactory($document, $q, $rootScope, $timeout, $rootElement, $animate,\n $mdUtil, $mdCompiler, $mdTheming, $injector, $exceptionHandler) {\n return function createInterimElementService() {\n var SHOW_CANCELLED = false;\n\n /**\n * @ngdoc service\n * @name $$interimElementProvider.$service\n *\n * @description\n * A service used to control inserting and removing of an element from the DOM.\n * It is used by $mdBottomSheet, $mdDialog, $mdToast, $mdMenu, $mdPanel, and $mdSelect.\n */\n var service;\n\n var showPromises = []; // Promises for the interim's which are currently opening.\n var hidePromises = []; // Promises for the interim's which are currently hiding.\n var showingInterims = []; // Interim elements which are currently showing up.\n\n // Publish instance $$interimElement service;\n return service = {\n show: show,\n hide: waitForInterim(hide),\n cancel: waitForInterim(cancel),\n destroy : destroy,\n $injector_: $injector\n };\n\n /**\n * @ngdoc method\n * @name $$interimElementProvider.$service#show\n * @kind function\n *\n * @description\n * Adds the `$interimElement` to the DOM and returns a special promise that will be resolved\n * or rejected with hide or cancel, respectively.\n *\n * @param {object} options map of options and values\n * @returns {Promise} a Promise that will be resolved when hide() is called or rejected when\n * cancel() is called.\n */\n function show(options) {\n options = options || {};\n var interimElement = new InterimElement(options || {});\n\n // When an interim element is currently showing, we have to cancel it.\n // Just hiding it, will resolve the InterimElement's promise, the promise should be\n // rejected instead.\n var hideAction = options.multiple ? $q.resolve() : $q.all(showPromises);\n\n if (!options.multiple) {\n // Wait for all opening interim's to finish their transition.\n hideAction = hideAction.then(function() {\n // Wait for all closing and showing interim's to be completely closed.\n var promiseArray = hidePromises.concat(showingInterims.map(service.cancel));\n return $q.all(promiseArray);\n });\n }\n\n var showAction = hideAction.then(function() {\n\n return interimElement\n .show()\n .then(function () {\n showingInterims.push(interimElement);\n })\n .catch(function (reason) {\n return reason;\n })\n .finally(function() {\n showPromises.splice(showPromises.indexOf(showAction), 1);\n });\n\n });\n\n showPromises.push(showAction);\n\n // In AngularJS 1.6+, exceptions inside promises will cause a rejection. We need to handle\n // the rejection and only log it if it's an error.\n interimElement.deferred.promise.catch(function(fault) {\n if (fault instanceof Error) {\n $exceptionHandler(fault);\n }\n\n return fault;\n });\n\n // Return a promise that will be resolved when the interim\n // element is hidden or cancelled...\n return interimElement.deferred.promise;\n }\n\n /**\n * @ngdoc method\n * @name $$interimElementProvider.$service#hide\n * @kind function\n *\n * @description\n * Removes the `$interimElement` from the DOM and resolves the Promise returned from `show()`.\n *\n * @param {*} reason Data used to resolve the Promise\n * @param {object} options map of options and values\n * @returns {Promise} a Promise that will be resolved after the element has been removed\n * from the DOM.\n */\n function hide(reason, options) {\n options = options || {};\n\n if (options.closeAll) {\n // We have to make a shallow copy of the array, because otherwise the map will break.\n return $q.all(showingInterims.slice().reverse().map(closeElement));\n } else if (options.closeTo !== undefined) {\n return $q.all(showingInterims.slice(options.closeTo).map(closeElement));\n }\n\n // Hide the latest showing interim element.\n return closeElement(showingInterims[showingInterims.length - 1]);\n\n /**\n * @param {InterimElement} interim element to close\n * @returns {Promise}\n */\n function closeElement(interim) {\n if (!interim) {\n return $q.when(reason);\n }\n\n var hideAction = interim\n .remove(reason, false, options || { })\n .catch(function(reason) { return reason; })\n .finally(function() {\n hidePromises.splice(hidePromises.indexOf(hideAction), 1);\n });\n\n showingInterims.splice(showingInterims.indexOf(interim), 1);\n hidePromises.push(hideAction);\n\n return interim.deferred.promise;\n }\n }\n\n /**\n * @ngdoc method\n * @name $$interimElementProvider.$service#cancel\n * @kind function\n *\n * @description\n * Removes the `$interimElement` from the DOM and rejects the Promise returned from `show()`.\n *\n * @param {*} reason Data used to resolve the Promise\n * @param {object} options map of options and values\n * @returns {Promise} Promise that will be resolved after the element has been removed\n * from the DOM.\n */\n function cancel(reason, options) {\n var interim = showingInterims.pop();\n if (!interim) {\n return $q.when(reason);\n }\n\n var cancelAction = interim\n .remove(reason, true, options || {})\n .catch(function(reason) { return reason; })\n .finally(function() {\n hidePromises.splice(hidePromises.indexOf(cancelAction), 1);\n });\n\n hidePromises.push(cancelAction);\n\n // Since AngularJS 1.6.7, promises will be logged to $exceptionHandler when the promise\n // is not handling the rejection. We create a pseudo catch handler, which will prevent the\n // promise from being logged to the $exceptionHandler.\n return interim.deferred.promise.catch(angular.noop);\n }\n\n /**\n * Creates a function to wait for at least one interim element to be available.\n * @param callbackFn Function to be used as callback\n * @returns {Function}\n */\n function waitForInterim(callbackFn) {\n return function() {\n var fnArguments = arguments;\n\n if (!showingInterims.length) {\n // When there are still interim's opening, then wait for the first interim element to\n // finish its open animation.\n if (showPromises.length) {\n return showPromises[0].finally(function () {\n return callbackFn.apply(service, fnArguments);\n });\n }\n\n return $q.when(\"No interim elements currently showing up.\");\n }\n\n return callbackFn.apply(service, fnArguments);\n };\n }\n\n /**\n * @ngdoc method\n * @name $$interimElementProvider.$service#destroy\n * @kind function\n *\n * Special method to quick-remove the interim element without running animations. This is\n * useful when the parent component has been or is being destroyed.\n *\n * Note: interim elements are in \"interim containers\".\n */\n function destroy(targetEl) {\n var interim = !targetEl ? showingInterims.shift() : null;\n\n var parentEl = angular.element(targetEl).length && angular.element(targetEl)[0].parentNode;\n\n if (parentEl) {\n // Try to find the interim in the stack which corresponds to the supplied DOM element.\n var filtered = showingInterims.filter(function(entry) {\n return entry.options.element[0] === parentEl;\n });\n\n // Note: This function might be called when the element already has been removed,\n // in which case we won't find any matches.\n if (filtered.length) {\n interim = filtered[0];\n showingInterims.splice(showingInterims.indexOf(interim), 1);\n }\n }\n\n return interim ? interim.remove(SHOW_CANCELLED, false, { '$destroy': true }) :\n $q.when(SHOW_CANCELLED);\n }\n\n /*\n * Internal Interim Element Object\n * Used internally to manage the DOM element and related data\n */\n function InterimElement(options) {\n var self, element, showAction = $q.when(true);\n\n options = configureScopeAndTransitions(options);\n\n return self = {\n options : options,\n deferred: $q.defer(),\n show : createAndTransitionIn,\n remove : transitionOutAndRemove\n };\n\n /**\n * Compile, link, and show this interim element\n * Use optional autoHided and transition-in effects\n */\n function createAndTransitionIn() {\n return $q(function(resolve, reject) {\n\n // Trigger onCompiling callback before the compilation starts.\n // This is useful, when modifying options, which can be influenced by developers.\n options.onCompiling && options.onCompiling(options);\n\n compileElement(options)\n .then(function(compiledData) {\n element = linkElement(compiledData, options);\n\n // Expose the cleanup function from the compiler.\n options.cleanupElement = compiledData.cleanup;\n\n showAction = showElement(element, options, compiledData.controller)\n .then(resolve, rejectAll);\n }).catch(rejectAll);\n\n function rejectAll(fault) {\n // Force the '$md.show()' promise to reject\n self.deferred.reject(fault);\n\n // Continue rejection propagation\n reject(fault);\n }\n });\n }\n\n /**\n * After the show process has finished/rejected:\n * - announce 'removing',\n * - perform the transition-out, and\n * - perform optional clean up scope.\n */\n function transitionOutAndRemove(response, isCancelled, opts) {\n\n // abort if the show() and compile failed\n if (!element) return $q.when(false);\n\n options = angular.extend(options || {}, opts || {});\n options.cancelAutoHide && options.cancelAutoHide();\n options.element.triggerHandler('$mdInterimElementRemove');\n\n if (options.$destroy === true) {\n\n return hideElement(options.element, options).then(function(){\n (isCancelled && rejectAll(response)) || resolveAll(response);\n });\n\n } else {\n $q.when(showAction).finally(function() {\n hideElement(options.element, options).then(function() {\n isCancelled ? rejectAll(response) : resolveAll(response);\n }, rejectAll);\n });\n\n return self.deferred.promise;\n }\n\n\n /**\n * The `show()` returns a promise that will be resolved when the interim\n * element is hidden or cancelled...\n */\n function resolveAll(response) {\n self.deferred.resolve(response);\n }\n\n /**\n * Force the '$md.show()' promise to reject\n */\n function rejectAll(fault) {\n self.deferred.reject(fault);\n }\n }\n\n /**\n * Prepare optional isolated scope and prepare $animate with default enter and leave\n * transitions for the new element instance.\n */\n function configureScopeAndTransitions(options) {\n options = options || { };\n if (options.template) {\n options.template = $mdUtil.processTemplate(options.template);\n }\n\n return angular.extend({\n preserveScope: false,\n cancelAutoHide : angular.noop,\n scope: options.scope || $rootScope.$new(options.isolateScope),\n\n /**\n * Default usage to enable $animate to transition-in; can be easily overridden via 'options'\n */\n onShow: function transitionIn(scope, element, options) {\n return $animate.enter(element, options.parent);\n },\n\n /**\n * Default usage to enable $animate to transition-out; can be easily overridden via 'options'\n */\n onRemove: function transitionOut(scope, element) {\n // Element could be undefined if a new element is shown before\n // the old one finishes compiling.\n return element && $animate.leave(element) || $q.when();\n }\n }, options);\n\n }\n\n /**\n * Compile an element with a templateUrl, controller, and locals\n */\n function compileElement(options) {\n\n var compiled = !options.skipCompile ? $mdCompiler.compile(options) : null;\n\n return compiled || $q(function (resolve) {\n resolve({\n locals: {},\n link: function () {\n return options.element;\n }\n });\n });\n }\n\n /**\n * Link an element with compiled configuration\n */\n function linkElement(compileData, options){\n angular.extend(compileData.locals, options);\n\n var element = compileData.link(options.scope);\n\n // Search for parent at insertion time, if not specified\n options.element = element;\n options.parent = findParent(element, options);\n if (options.themable) $mdTheming(element);\n\n return element;\n }\n\n /**\n * Search for parent at insertion time, if not specified\n */\n function findParent(element, options) {\n var parent = options.parent;\n\n // Search for parent at insertion time, if not specified\n if (angular.isFunction(parent)) {\n parent = parent(options.scope, element, options);\n } else if (angular.isString(parent)) {\n parent = angular.element($document[0].querySelector(parent));\n } else {\n parent = angular.element(parent);\n }\n\n // If parent querySelector/getter function fails, or it's just null,\n // find a default.\n if (!(parent || {}).length) {\n var el;\n if ($rootElement[0] && $rootElement[0].querySelector) {\n el = $rootElement[0].querySelector(':not(svg) > body');\n }\n if (!el) el = $rootElement[0];\n if (el.nodeName == '#comment') {\n el = $document[0].body;\n }\n return angular.element(el);\n }\n\n return parent;\n }\n\n /**\n * If auto-hide is enabled, start timer and prepare cancel function\n */\n function startAutoHide() {\n var autoHideTimer, cancelAutoHide = angular.noop;\n\n if (options.hideDelay) {\n autoHideTimer = $timeout(service.hide, options.hideDelay) ;\n cancelAutoHide = function() {\n $timeout.cancel(autoHideTimer);\n };\n }\n\n // Cache for subsequent use\n options.cancelAutoHide = function() {\n cancelAutoHide();\n options.cancelAutoHide = undefined;\n };\n }\n\n /**\n * Show the element ( with transitions), notify complete and start\n * optional auto-Hide\n */\n function showElement(element, options, controller) {\n // Trigger onShowing callback before the `show()` starts\n var notifyShowing = options.onShowing || angular.noop;\n // Trigger onComplete callback when the `show()` finishes\n var notifyComplete = options.onComplete || angular.noop;\n\n // Necessary for consistency between AngularJS 1.5 and 1.6.\n try {\n notifyShowing(options.scope, element, options, controller);\n } catch (e) {\n return $q.reject(e);\n }\n\n return $q(function (resolve, reject) {\n try {\n // Start transitionIn\n $q.when(options.onShow(options.scope, element, options, controller))\n .then(function () {\n notifyComplete(options.scope, element, options);\n startAutoHide();\n\n resolve(element);\n }, reject);\n\n } catch (e) {\n reject(e.message);\n }\n });\n }\n\n function hideElement(element, options) {\n var announceRemoving = options.onRemoving || angular.noop;\n\n return $q(function (resolve, reject) {\n try {\n // Start transitionIn\n var action = $q.when(options.onRemove(options.scope, element, options) || true);\n\n // Trigger callback *before* the remove operation starts\n announceRemoving(element, action);\n\n if (options.$destroy) {\n // For $destroy, onRemove should be synchronous\n resolve(element);\n\n if (!options.preserveScope && options.scope) {\n // scope destroy should still be be done after the current digest is done\n action.then(function() { options.scope.$destroy(); });\n }\n } else {\n // Wait until transition-out is done\n action.then(function () {\n if (!options.preserveScope && options.scope) {\n options.scope.$destroy();\n }\n\n resolve(element);\n }, reject);\n }\n } catch (e) {\n reject(e.message);\n }\n });\n }\n\n }\n };\n }\n}\n\n})();\n(function(){\n\"use strict\";\n\n(function() {\n 'use strict';\n\n var $mdUtil, $interpolate, $log;\n\n var SUFFIXES = /(-gt)?-(sm|md|lg|print)/g;\n var WHITESPACE = /\\s+/g;\n\n var FLEX_OPTIONS = ['grow', 'initial', 'auto', 'none', 'noshrink', 'nogrow'];\n var LAYOUT_OPTIONS = ['row', 'column'];\n var ALIGNMENT_MAIN_AXIS= [\"\", \"start\", \"center\", \"end\", \"stretch\", \"space-around\", \"space-between\"];\n var ALIGNMENT_CROSS_AXIS= [\"\", \"start\", \"center\", \"end\", \"stretch\"];\n\n var config = {\n /**\n * Enable directive attribute-to-class conversions\n * Developers can use ` ` to quickly\n * disable the Layout directives and prohibit the injection of Layout classNames\n */\n enabled: true,\n\n /**\n * List of mediaQuery breakpoints and associated suffixes\n *\n * [\n * { suffix: \"sm\", mediaQuery: \"screen and (max-width: 599px)\" },\n * { suffix: \"md\", mediaQuery: \"screen and (min-width: 600px) and (max-width: 959px)\" }\n * ]\n */\n breakpoints: []\n };\n\n registerLayoutAPI(angular.module('material.core.layout', ['ng']));\n\n /**\n * registerLayoutAPI()\n *\n * The original AngularJS Material Layout solution used attribute selectors and CSS.\n *\n * ```html\n * ` variant.\");\n return angular.noop;\n }];\n }\n\n /**\n * Centralize warnings for known flexbox issues (especially IE-related issues)\n */\n function validateAttributeUsage(className, attr, element, $log){\n var message, usage, url;\n var nodeName = element[0].nodeName.toLowerCase();\n\n switch (className.replace(SUFFIXES,\"\")) {\n case \"flex\":\n if ((nodeName == \"md-button\") || (nodeName == \"fieldset\")){\n // @see https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers\n // Use \\\n \\\n \\\n ';\n } else {\n return '\\\n ';\n }\n }\n\n function getClearButton() {\n return '' +\n '';\n }\n }\n };\n}\n\n})();\n(function(){\n\"use strict\";\n\n\nMdAutocompleteItemScopeDirective.$inject = [\"$compile\", \"$mdUtil\"];angular\n .module('material.components.autocomplete')\n .directive('mdAutocompleteParentScope', MdAutocompleteItemScopeDirective);\n\nfunction MdAutocompleteItemScopeDirective($compile, $mdUtil) {\n return {\n restrict: 'AE',\n compile: compile,\n terminal: true,\n transclude: 'element'\n };\n\n function compile(tElement, tAttr, transclude) {\n return function postLink(scope, element, attr) {\n var ctrl = scope.$mdAutocompleteCtrl;\n var newScope = ctrl.parent.$new();\n var itemName = ctrl.itemName;\n\n // Watch for changes to our scope's variables and copy them to the new scope\n watchVariable('$index', '$index');\n watchVariable('item', itemName);\n\n // Ensure that $digest calls on our scope trigger $digest on newScope.\n connectScopes();\n\n // Link the element against newScope.\n transclude(newScope, function(clone) {\n element.after(clone);\n });\n\n /**\n * Creates a watcher for variables that are copied from the parent scope\n * @param variable\n * @param alias\n */\n function watchVariable(variable, alias) {\n newScope[alias] = scope[variable];\n\n scope.$watch(variable, function(value) {\n $mdUtil.nextTick(function() {\n newScope[alias] = value;\n });\n });\n }\n\n /**\n * Creates watchers on scope and newScope that ensure that for any\n * $digest of scope, newScope is also $digested.\n */\n function connectScopes() {\n var scopeDigesting = false;\n var newScopeDigesting = false;\n\n scope.$watch(function() {\n if (newScopeDigesting || scopeDigesting) {\n return;\n }\n\n scopeDigesting = true;\n scope.$$postDigest(function() {\n if (!newScopeDigesting) {\n newScope.$digest();\n }\n\n scopeDigesting = newScopeDigesting = false;\n });\n });\n\n newScope.$watch(function() {\n newScopeDigesting = true;\n });\n }\n };\n }\n}\n})();\n(function(){\n\"use strict\";\n\n\nMdHighlightCtrl.$inject = [\"$scope\", \"$element\", \"$attrs\", \"$mdUtil\"];angular\n .module('material.components.autocomplete')\n .controller('MdHighlightCtrl', MdHighlightCtrl);\n\nfunction MdHighlightCtrl ($scope, $element, $attrs, $mdUtil) {\n this.$scope = $scope;\n this.$element = $element;\n this.$attrs = $attrs;\n this.$mdUtil = $mdUtil;\n\n // Cache the Regex to avoid rebuilding each time.\n this.regex = null;\n}\n\nMdHighlightCtrl.prototype.init = function(unsafeTermFn, unsafeContentFn) {\n\n this.flags = this.$attrs.mdHighlightFlags || '';\n\n this.unregisterFn = this.$scope.$watch(function($scope) {\n return {\n term: unsafeTermFn($scope),\n contentText: unsafeContentFn($scope)\n };\n }.bind(this), this.onRender.bind(this), true);\n\n this.$element.on('$destroy', this.unregisterFn);\n};\n\n/**\n * Triggered once a new change has been recognized and the highlighted\n * text needs to be updated.\n */\nMdHighlightCtrl.prototype.onRender = function(state, prevState) {\n\n var contentText = state.contentText;\n\n /* Update the regex if it's outdated, because we don't want to rebuilt it constantly. */\n if (this.regex === null || state.term !== prevState.term) {\n this.regex = this.createRegex(state.term, this.flags);\n }\n\n /* If a term is available apply the regex to the content */\n if (state.term) {\n this.applyRegex(contentText);\n } else {\n this.$element.text(contentText);\n }\n\n};\n\n/**\n * Decomposes the specified text into different tokens (whether match or not).\n * Breaking down the string guarantees proper XSS protection due to the native browser\n * escaping of unsafe text.\n */\nMdHighlightCtrl.prototype.applyRegex = function(text) {\n var tokens = this.resolveTokens(text);\n\n this.$element.empty();\n\n tokens.forEach(function (token) {\n\n if (token.isMatch) {\n var tokenEl = angular.element('').text(token.text);\n\n this.$element.append(tokenEl);\n } else {\n this.$element.append(document.createTextNode(token));\n }\n\n }.bind(this));\n\n};\n\n /**\n * Decomposes the specified text into different tokens by running the regex against the text.\n */\nMdHighlightCtrl.prototype.resolveTokens = function(string) {\n var tokens = [];\n var lastIndex = 0;\n\n // Use replace here, because it supports global and single regular expressions at same time.\n string.replace(this.regex, function(match, index) {\n appendToken(lastIndex, index);\n\n tokens.push({\n text: match,\n isMatch: true\n });\n\n lastIndex = index + match.length;\n });\n\n // Append the missing text as a token.\n appendToken(lastIndex);\n\n return tokens;\n\n function appendToken(from, to) {\n var targetText = string.slice(from, to);\n targetText && tokens.push(targetText);\n }\n};\n\n/** Creates a regex for the specified text with the given flags. */\nMdHighlightCtrl.prototype.createRegex = function(term, flags) {\n var startFlag = '', endFlag = '';\n var regexTerm = this.$mdUtil.sanitize(term);\n\n if (flags.indexOf('^') >= 0) startFlag = '^';\n if (flags.indexOf('$') >= 0) endFlag = '$';\n\n return new RegExp(startFlag + regexTerm + endFlag, flags.replace(/[$^]/g, ''));\n};\n\n})();\n(function(){\n\"use strict\";\n\n\nMdHighlight.$inject = [\"$interpolate\", \"$parse\"];angular\n .module('material.components.autocomplete')\n .directive('mdHighlightText', MdHighlight);\n\n/**\n * @ngdoc directive\n * @name mdHighlightText\n * @module material.components.autocomplete\n *\n * @description\n * The `md-highlight-text` directive allows you to specify text that should be highlighted within\n * an element. Highlighted text will be wrapped in `` which can\n * be styled through CSS. Please note that child elements may not be used with this directive.\n *\n * @param {string} md-highlight-text A model to be searched for\n * @param {string=} md-highlight-flags A list of flags (loosely based on JavaScript RexExp flags).\n * #### **Supported flags**:\n * - `g`: Find all matches within the provided text\n * - `i`: Ignore case when searching for matches\n * - `$`: Only match if the text ends with the search term\n * - `^`: Only match if the text begins with the search term\n *\n * @usage\n * \n * \n * \n */\n\nfunction MdHighlight ($interpolate, $parse) {\n return {\n terminal: true,\n controller: 'MdHighlightCtrl',\n compile: function mdHighlightCompile(tElement, tAttr) {\n var termExpr = $parse(tAttr.mdHighlightText);\n var unsafeContentExpr = $interpolate(tElement.html());\n\n return function mdHighlightLink(scope, element, attr, ctrl) {\n ctrl.init(termExpr, unsafeContentExpr);\n };\n }\n };\n}\n\n})();\n(function(){\n\"use strict\";\n\n/*\n * @ngdoc module\n * @name material.components.backdrop\n * @description Backdrop\n */\n\n/**\n * @ngdoc directive\n * @name mdBackdrop\n * @module material.components.backdrop\n *\n * @restrict E\n *\n * @description\n * `` is a backdrop element used by other components, such as dialog and bottom sheet.\n * Apply class `opaque` to make the backdrop use the theme backdrop color.\n *\n */\n\nangular\n .module('material.components.backdrop', ['material.core'])\n .directive('mdBackdrop', [\"$mdTheming\", \"$mdUtil\", \"$animate\", \"$rootElement\", \"$window\", \"$log\", \"$$rAF\", \"$document\", function BackdropDirective($mdTheming, $mdUtil, $animate, $rootElement, $window, $log, $$rAF, $document) {\n var ERROR_CSS_POSITION = ' may not work properly in a scrolled, static-positioned parent container.';\n\n return {\n restrict: 'E',\n link: postLink\n };\n\n function postLink(scope, element, attrs) {\n // backdrop may be outside the $rootElement, tell ngAnimate to animate regardless\n if ($animate.pin) $animate.pin(element, $rootElement);\n\n var bodyStyles;\n\n $$rAF(function() {\n // If body scrolling has been disabled using mdUtil.disableBodyScroll(),\n // adjust the 'backdrop' height to account for the fixed 'body' top offset.\n // Note that this can be pretty expensive and is better done inside the $$rAF.\n bodyStyles = $window.getComputedStyle($document[0].body);\n\n if (bodyStyles.position === 'fixed') {\n var resizeHandler = $mdUtil.debounce(function(){\n bodyStyles = $window.getComputedStyle($document[0].body);\n resize();\n }, 60, null, false);\n\n resize();\n angular.element($window).on('resize', resizeHandler);\n\n scope.$on('$destroy', function() {\n angular.element($window).off('resize', resizeHandler);\n });\n }\n\n // Often $animate.enter() is used to append the backDrop element\n // so let's wait until $animate is done...\n var parent = element.parent();\n\n if (parent.length) {\n if (parent[0].nodeName === 'BODY') {\n element.css('position', 'fixed');\n }\n\n var styles = $window.getComputedStyle(parent[0]);\n\n if (styles.position === 'static') {\n // backdrop uses position:absolute and will not work properly with parent position:static (default)\n $log.warn(ERROR_CSS_POSITION);\n }\n\n // Only inherit the parent if the backdrop has a parent.\n $mdTheming.inherit(element, parent);\n }\n });\n\n function resize() {\n var viewportHeight = parseInt(bodyStyles.height, 10) + Math.abs(parseInt(bodyStyles.top, 10));\n element.css('height', viewportHeight + 'px');\n }\n }\n\n }]);\n\n})();\n(function(){\n\"use strict\";\n\n/**\n * @ngdoc module\n * @name material.components.bottomSheet\n * @description\n * BottomSheet\n */\nMdBottomSheetDirective.$inject = [\"$mdBottomSheet\"];\nMdBottomSheetProvider.$inject = [\"$$interimElementProvider\"];\nangular\n .module('material.components.bottomSheet', [\n 'material.core',\n 'material.components.backdrop'\n ])\n .directive('mdBottomSheet', MdBottomSheetDirective)\n .provider('$mdBottomSheet', MdBottomSheetProvider);\n\n/* @ngInject */\nfunction MdBottomSheetDirective($mdBottomSheet) {\n return {\n restrict: 'E',\n link : function postLink(scope, element) {\n element.addClass('_md'); // private md component indicator for styling\n\n // When navigation force destroys an interimElement, then\n // listen and $destroy() that interim instance...\n scope.$on('$destroy', function() {\n $mdBottomSheet.destroy();\n });\n }\n };\n}\n\n\n/**\n * @ngdoc service\n * @name $mdBottomSheet\n * @module material.components.bottomSheet\n *\n * @description\n * `$mdBottomSheet` opens a bottom sheet over the app and provides a simple promise API.\n *\n * ## Restrictions\n *\n * - The bottom sheet's template must have an outer `` element.\n * - Add the `md-grid` class to the bottom sheet for a grid layout.\n * - Add the `md-list` class to the bottom sheet for a list layout.\n *\n * @usage\n * \n * \n * \n * var app = angular.module('app', ['ngMaterial']);\n * app.controller('MyController', function($scope, $mdBottomSheet) {\n * $scope.openBottomSheet = function() {\n * $mdBottomSheet.show({\n * template: '' +\n * 'Hello! Close ' +\n * ' '\n * })\n *\n * // Fires when the hide() method is used\n * .then(function() {\n * console.log('You clicked the button to close the bottom sheet!');\n * })\n *\n * // Fires when the cancel() method is used\n * .catch(function() {\n * console.log('You hit escape or clicked the backdrop to close.');\n * });\n * };\n *\n * $scope.closeBottomSheet = function($scope, $mdBottomSheet) {\n * $mdBottomSheet.hide();\n * }\n *\n * });\n * \n *\n * ### Custom Presets\n * Developers are also able to create their own preset, which can be easily used without repeating\n * their options each time.\n *\n * \n * $mdBottomSheetProvider.addPreset('testPreset', {\n * options: function() {\n * return {\n * template:\n * '' +\n * 'This is a custom preset' +\n * ' ',\n * controllerAs: 'bottomSheet',\n * bindToController: true,\n * clickOutsideToClose: true,\n * escapeToClose: true\n * };\n * }\n * });\n * \n *\n * After you create your preset during the config phase, you can easily access it.\n *\n * \n * $mdBottomSheet.show(\n * $mdBottomSheet.testPreset()\n * );\n * \n */\n\n /**\n * @ngdoc method\n * @name $mdBottomSheet#show\n *\n * @description\n * Show a bottom sheet with the specified options.\n *\n * Note: You should always provide a `.catch()` method in case the user hits the\n * `esc` key or clicks the background to close. In this case, the `cancel()` method will\n * automatically be called on the bottom sheet which will `reject()` the promise. See the @usage\n * section above for an example.\n *\n * Newer versions of Angular will throw a `Possibly unhandled rejection` exception if you forget\n * this.\n *\n * @param {object} optionsOrPreset Either provide an `$mdBottomSheetPreset` defined during the config phase or\n * an options object, with the following properties:\n *\n * - `templateUrl` - `{string=}`: The url of an html template file that will\n * be used as the content of the bottom sheet. Restrictions: the template must\n * have an outer `md-bottom-sheet` element.\n * - `template` - `{string=}`: Same as templateUrl, except this is an actual\n * template string.\n * - `scope` - `{object=}`: the scope to link the template / controller to. If none is specified, it will create a new child scope.\n * This scope will be destroyed when the bottom sheet is removed unless `preserveScope` is set to true.\n * - `preserveScope` - `{boolean=}`: whether to preserve the scope when the element is removed. Default is false\n * - `controller` - `{string=}`: The controller to associate with this bottom sheet.\n * - `locals` - `{string=}`: An object containing key/value pairs. The keys will\n * be used as names of values to inject into the controller. For example,\n * `locals: {three: 3}` would inject `three` into the controller with the value\n * of 3.\n * - `clickOutsideToClose` - `{boolean=}`: Whether the user can click outside the bottom sheet to\n * close it. Default true.\n * - `bindToController` - `{boolean=}`: When set to true, the locals will be bound to the controller instance.\n * - `disableBackdrop` - `{boolean=}`: When set to true, the bottomsheet will not show a backdrop.\n * - `escapeToClose` - `{boolean=}`: Whether the user can press escape to close the bottom sheet.\n * Default true.\n * - `isLockedOpen` - `{boolean=}`: Disables all default ways of closing the bottom sheet. **Note:** this will override\n * the `clickOutsideToClose` and `escapeToClose` options, leaving only the `hide` and `cancel`\n * methods as ways of closing the bottom sheet. Defaults to false.\n * - `resolve` - `{object=}`: Similar to locals, except it takes promises as values\n * and the bottom sheet will not open until the promises resolve.\n * - `controllerAs` - `{string=}`: An alias to assign the controller to on the scope.\n * - `parent` - `{element=}`: The element to append the bottom sheet to. The `parent` may be a `function`, `string`,\n * `object`, or null. Defaults to appending to the body of the root element (or the root element) of the application.\n * e.g. angular.element(document.getElementById('content')) or \"#content\"\n * - `disableParentScroll` - `{boolean=}`: Whether to disable scrolling while the bottom sheet is open.\n * Default true.\n *\n * @returns {promise} A promise that can be resolved with `$mdBottomSheet.hide()` or\n * rejected with `$mdBottomSheet.cancel()`.\n */\n\n/**\n * @ngdoc method\n * @name $mdBottomSheet#hide\n *\n * @description\n * Hide the existing bottom sheet and resolve the promise returned from\n * `$mdBottomSheet.show()`. This call will close the most recently opened/current bottom sheet (if\n * any).\n *\n * Note: Use a `.then()` on your `.show()` to handle this callback.\n *\n * @param {*=} response An argument for the resolved promise.\n *\n */\n\n/**\n * @ngdoc method\n * @name $mdBottomSheet#cancel\n *\n * @description\n * Hide the existing bottom sheet and reject the promise returned from\n * `$mdBottomSheet.show()`.\n *\n * Note: Use a `.catch()` on your `.show()` to handle this callback.\n *\n * @param {*=} response An argument for the rejected promise.\n *\n */\n\nfunction MdBottomSheetProvider($$interimElementProvider) {\n // how fast we need to flick down to close the sheet, pixels/ms\n bottomSheetDefaults.$inject = [\"$animate\", \"$mdConstant\", \"$mdUtil\", \"$mdTheming\", \"$mdBottomSheet\", \"$rootElement\", \"$mdGesture\", \"$log\"];\n var CLOSING_VELOCITY = 0.5;\n var PADDING = 80; // same as css\n\n return $$interimElementProvider('$mdBottomSheet')\n .setDefaults({\n methods: ['disableParentScroll', 'escapeToClose', 'clickOutsideToClose'],\n options: bottomSheetDefaults\n });\n\n /* @ngInject */\n function bottomSheetDefaults($animate, $mdConstant, $mdUtil, $mdTheming, $mdBottomSheet, $rootElement,\n $mdGesture, $log) {\n var backdrop;\n\n return {\n themable: true,\n onShow: onShow,\n onRemove: onRemove,\n disableBackdrop: false,\n escapeToClose: true,\n clickOutsideToClose: true,\n disableParentScroll: true,\n isLockedOpen: false\n };\n\n\n function onShow(scope, element, options, controller) {\n\n element = $mdUtil.extractElementByName(element, 'md-bottom-sheet');\n\n // prevent tab focus or click focus on the bottom-sheet container\n element.attr('tabindex', '-1');\n\n // Once the md-bottom-sheet has `ng-cloak` applied on his template the opening animation will not work properly.\n // This is a very common problem, so we have to notify the developer about this.\n if (element.hasClass('ng-cloak')) {\n var message = '$mdBottomSheet: using `` will affect the bottom-sheet opening animations.';\n $log.warn(message, element[0]);\n }\n\n if (options.isLockedOpen) {\n options.clickOutsideToClose = false;\n options.escapeToClose = false;\n } else {\n options.cleanupGestures = registerGestures(element, options.parent);\n }\n\n if (!options.disableBackdrop) {\n // Add a backdrop that will close on click\n backdrop = $mdUtil.createBackdrop(scope, \"md-bottom-sheet-backdrop md-opaque\");\n\n // Prevent mouse focus on backdrop; ONLY programmatic focus allowed.\n // This allows clicks on backdrop to propagate to the $rootElement and\n // ESC key events to be detected properly.\n backdrop[0].tabIndex = -1;\n\n if (options.clickOutsideToClose) {\n backdrop.on('click', function() {\n $mdUtil.nextTick($mdBottomSheet.cancel, true);\n });\n }\n\n $mdTheming.inherit(backdrop, options.parent);\n\n $animate.enter(backdrop, options.parent, null);\n }\n\n $mdTheming.inherit(element, options.parent);\n\n if (options.disableParentScroll) {\n options.restoreScroll = $mdUtil.disableScrollAround(element, options.parent);\n }\n\n return $animate.enter(element, options.parent, backdrop)\n .then(function() {\n var focusable = $mdUtil.findFocusTarget(element) || angular.element(\n element[0].querySelector('button') ||\n element[0].querySelector('a') ||\n element[0].querySelector($mdUtil.prefixer('ng-click', true))\n ) || backdrop;\n\n if (options.escapeToClose) {\n options.rootElementKeyupCallback = function(e) {\n if (e.keyCode === $mdConstant.KEY_CODE.ESCAPE) {\n $mdUtil.nextTick($mdBottomSheet.cancel, true);\n }\n };\n\n $rootElement.on('keyup', options.rootElementKeyupCallback);\n focusable && focusable.focus();\n }\n });\n\n }\n\n function onRemove(scope, element, options) {\n if (!options.disableBackdrop) $animate.leave(backdrop);\n\n return $animate.leave(element).then(function() {\n if (options.disableParentScroll) {\n options.restoreScroll();\n delete options.restoreScroll;\n }\n\n options.cleanupGestures && options.cleanupGestures();\n });\n }\n\n /**\n * Adds the drag gestures to the bottom sheet.\n * @param {angular.JQLite} element where CSS transitions will be applied\n * @param {angular.JQLite} parent used for registering gesture listeners\n * @return {Function} function that removes gesture listeners that were set up by\n * registerGestures()\n */\n function registerGestures(element, parent) {\n var deregister = $mdGesture.register(parent, 'drag', { horizontal: false });\n parent.on('$md.dragstart', onDragStart)\n .on('$md.drag', onDrag)\n .on('$md.dragend', onDragEnd);\n\n return function cleanupGestures() {\n deregister();\n parent.off('$md.dragstart', onDragStart);\n parent.off('$md.drag', onDrag);\n parent.off('$md.dragend', onDragEnd);\n };\n\n function onDragStart() {\n // Disable transitions on transform so that it feels fast\n element.css($mdConstant.CSS.TRANSITION_DURATION, '0ms');\n }\n\n function onDrag(ev) {\n var transform = ev.pointer.distanceY;\n if (transform < 5) {\n // Slow down drag when trying to drag up, and stop after PADDING\n transform = Math.max(-PADDING, transform / 2);\n }\n element.css($mdConstant.CSS.TRANSFORM, 'translate3d(0,' + (PADDING + transform) + 'px,0)');\n }\n\n function onDragEnd(ev) {\n if (ev.pointer.distanceY > 0 &&\n (ev.pointer.distanceY > 20 || Math.abs(ev.pointer.velocityY) > CLOSING_VELOCITY)) {\n var distanceRemaining = element.prop('offsetHeight') - ev.pointer.distanceY;\n var transitionDuration = Math.min(distanceRemaining / ev.pointer.velocityY * 0.75, 500);\n element.css($mdConstant.CSS.TRANSITION_DURATION, transitionDuration + 'ms');\n $mdUtil.nextTick($mdBottomSheet.cancel, true);\n } else {\n element.css($mdConstant.CSS.TRANSITION_DURATION, '');\n element.css($mdConstant.CSS.TRANSFORM, '');\n }\n }\n }\n\n }\n\n}\n\n})();\n(function(){\n\"use strict\";\n\n/**\n * @ngdoc module\n * @name material.components.button\n * @description\n *\n * Button\n */\nMdButtonDirective.$inject = [\"$mdButtonInkRipple\", \"$mdTheming\", \"$mdAria\", \"$mdInteraction\"];\nMdAnchorDirective.$inject = [\"$mdTheming\"];\nangular\n .module('material.components.button', ['material.core'])\n .directive('mdButton', MdButtonDirective)\n .directive('a', MdAnchorDirective);\n\n\n/**\n * @private\n * @restrict E\n *\n * @description\n * `a` is an anchor directive used to inherit theme colors for md-primary, md-accent, etc.\n *\n * @usage\n *\n * \n * \n * \n * \n * \n */\nfunction MdAnchorDirective($mdTheming) {\n return {\n restrict : 'E',\n link : function postLink(scope, element) {\n // Make sure to inherit theme so stand-alone anchors\n // support theme colors for md-primary, md-accent, etc.\n $mdTheming(element);\n }\n };\n}\n\n\n/**\n * @ngdoc directive\n * @name mdButton\n * @module material.components.button\n *\n * @restrict E\n *\n * @description\n * `` is a button directive with optional ink ripples (default enabled).\n *\n * If you supply a `href` or `ng-href` attribute, it will become an `` element. Otherwise, it\n * will become a `';\n\n /**\n * MDChips Directive Definition\n */\n function MdChips ($mdTheming, $mdUtil, $compile, $log, $timeout, $$mdSvgRegistry) {\n // Run our templates through $mdUtil.processTemplate() to allow custom start/end symbols\n var templates = getTemplates();\n\n return {\n template: function(element, attrs) {\n // Clone the element into an attribute. By prepending the attribute\n // name with '$', AngularJS won't write it into the DOM. The cloned\n // element propagates to the link function via the attrs argument,\n // where various contained-elements can be consumed.\n attrs['$mdUserTemplate'] = element.clone();\n return templates.chips;\n },\n require: ['mdChips'],\n restrict: 'E',\n controller: 'MdChipsCtrl',\n controllerAs: '$mdChipsCtrl',\n bindToController: true,\n compile: compile,\n scope: {\n readonly: '=?readonly',\n removable: '=?mdRemovable',\n placeholder: '@?',\n secondaryPlaceholder: '@?',\n maxChips: '@?mdMaxChips',\n transformChip: '&mdTransformChip',\n onAppend: '&?mdOnAppend',\n onAdd: '&?mdOnAdd',\n onRemove: '&?mdOnRemove',\n addedMessage: '@?mdAddedMessage',\n removedMessage: '@?mdRemovedMessage',\n onSelect: '&?mdOnSelect',\n inputAriaDescribedBy: '@?inputAriaDescribedby',\n inputAriaLabelledBy: '@?inputAriaLabelledby',\n inputAriaLabel: '@?',\n containerHint: '@?',\n containerEmptyHint: '@?',\n deleteHint: '@?',\n deleteButtonLabel: '@?',\n separatorKeys: '=?mdSeparatorKeys',\n requireMatch: '=?mdRequireMatch',\n chipAppendDelayString: '@?mdChipAppendDelay',\n ngChange: '&?'\n }\n };\n\n /**\n * Builds the final template for `md-chips` and returns the postLink function.\n *\n * Building the template involves 3 key components:\n * static chips\n * chip template\n * input control\n *\n * If no `ng-model` is provided, only the static chip work needs to be done.\n *\n * If no user-passed `md-chip-template` exists, the default template is used. This resulting\n * template is appended to the chip content element.\n *\n * The remove button may be overridden by passing an element with an md-chip-remove attribute.\n *\n * If an `input` or `md-autocomplete` element is provided by the caller, it is set aside for\n * transclusion later. The transclusion happens in `postLink` as the parent scope is required.\n * If no user input is provided, a default one is appended to the input container node in the\n * template.\n *\n * Static Chips (i.e. `md-chip` elements passed from the caller) are gathered and set aside for\n * transclusion in the `postLink` function.\n *\n *\n * @param element\n * @param attr\n * @returns {Function}\n */\n function compile(element, attr) {\n // Grab the user template from attr and reset the attribute to null.\n var userTemplate = attr['$mdUserTemplate'];\n attr['$mdUserTemplate'] = null;\n\n var chipTemplate = getTemplateByQuery('md-chips>md-chip-template');\n\n var chipRemoveSelector = $mdUtil\n .prefixer()\n .buildList('md-chip-remove')\n .map(function(attr) {\n return 'md-chips>*[' + attr + ']';\n })\n .join(',');\n\n // Set the chip remove, chip contents and chip input templates. The link function will put\n // them on the scope for transclusion later.\n var chipRemoveTemplate = getTemplateByQuery(chipRemoveSelector) || templates.remove,\n chipContentsTemplate = chipTemplate || templates.default,\n chipInputTemplate = getTemplateByQuery('md-chips>md-autocomplete')\n || getTemplateByQuery('md-chips>input')\n || templates.input,\n staticChips = userTemplate.find('md-chip');\n\n // Warn of malformed template. See #2545\n if (userTemplate[0].querySelector('md-chip-template>*[md-chip-remove]')) {\n $log.warn('invalid placement of md-chip-remove within md-chip-template.');\n }\n\n function getTemplateByQuery (query) {\n if (!attr.ngModel) return;\n var element = userTemplate[0].querySelector(query);\n return element && element.outerHTML;\n }\n\n /**\n * Configures controller and transcludes.\n */\n return function postLink(scope, element, attrs, controllers) {\n $mdUtil.initOptionalProperties(scope, attr);\n\n $mdTheming(element);\n var mdChipsCtrl = controllers[0];\n if (chipTemplate) {\n // Chip editing functionality assumes we are using the default chip template.\n mdChipsCtrl.enableChipEdit = false;\n }\n\n mdChipsCtrl.chipContentsTemplate = chipContentsTemplate;\n mdChipsCtrl.chipRemoveTemplate = chipRemoveTemplate;\n mdChipsCtrl.chipInputTemplate = chipInputTemplate;\n\n mdChipsCtrl.mdCloseIcon = $$mdSvgRegistry.mdClose;\n\n element\n .attr({ tabindex: -1 })\n .on('focus', function () { mdChipsCtrl.onFocus(); })\n .on('click', function () {\n if (!mdChipsCtrl.readonly && mdChipsCtrl.selectedChip === -1) {\n mdChipsCtrl.onFocus();\n }\n });\n\n if (attr.ngModel) {\n mdChipsCtrl.configureNgModel(element.controller('ngModel'));\n\n // If an `md-transform-chip` attribute was set, tell the controller to use the expression\n // before appending chips.\n if (attrs.mdTransformChip) mdChipsCtrl.useTransformChipExpression();\n\n // If an `md-on-append` attribute was set, tell the controller to use the expression\n // when appending chips.\n //\n // TODO: Remove this now that 1.0 is long since released\n // DEPRECATED: Will remove in official 1.0 release\n if (attrs.mdOnAppend) mdChipsCtrl.useOnAppendExpression();\n\n // If an `md-on-add` attribute was set, tell the controller to use the expression\n // when adding chips.\n if (attrs.mdOnAdd) mdChipsCtrl.useOnAddExpression();\n\n // If an `md-on-remove` attribute was set, tell the controller to use the expression\n // when removing chips.\n if (attrs.mdOnRemove) mdChipsCtrl.useOnRemoveExpression();\n\n // If an `md-on-select` attribute was set, tell the controller to use the expression\n // when selecting chips.\n if (attrs.mdOnSelect) mdChipsCtrl.useOnSelectExpression();\n\n // The md-autocomplete and input elements won't be compiled until after this directive\n // is complete (due to their nested nature). Wait a tick before looking for them to\n // configure the controller.\n if (chipInputTemplate !== templates.input) {\n // The autocomplete will not appear until the readonly attribute is not true (i.e.\n // false or undefined), so we have to watch the readonly and then on the next tick\n // after the chip transclusion has run, we can configure the autocomplete and user\n // input.\n scope.$watch('$mdChipsCtrl.readonly', function(readonly) {\n if (!readonly) {\n\n $mdUtil.nextTick(function(){\n\n if (chipInputTemplate.indexOf(' 0) {\n var compiledStaticChips = $compile(staticChips.clone())(scope.$parent);\n $timeout(function() { element.find('md-chips-wrap').prepend(compiledStaticChips); });\n }\n };\n }\n\n function getTemplates() {\n return {\n chips: $mdUtil.processTemplate(MD_CHIPS_TEMPLATE),\n input: $mdUtil.processTemplate(CHIP_INPUT_TEMPLATE),\n default: $mdUtil.processTemplate(CHIP_DEFAULT_TEMPLATE),\n remove: $mdUtil.processTemplate(CHIP_REMOVE_TEMPLATE)\n };\n }\n }\n\n})();\n(function(){\n\"use strict\";\n\n\nMdContactChipsCtrl.$inject = [\"$attrs\", \"$element\", \"$timeout\"];angular\n .module('material.components.chips')\n .controller('MdContactChipsCtrl', MdContactChipsCtrl);\n\n/**\n * Controller for the MdContactChips component\n * @constructor\n */\nfunction MdContactChipsCtrl ($attrs, $element, $timeout) {\n /** @type {$element} */\n this.$element = $element;\n\n /** @type {$attrs} */\n this.$attrs = $attrs;\n\n /** @type {Function} */\n this.$timeout = $timeout;\n\n /** @type {Object} */\n this.selectedItem = null;\n\n /** @type {string} */\n this.searchText = '';\n\n /**\n * Collection of functions to call to un-register watchers\n * @type {Array}\n */\n this.deRegister = [];\n\n this.init();\n}\n\nMdContactChipsCtrl.prototype.init = function() {\n var ctrl = this;\n var deRegister = this.deRegister;\n var element = this.$element;\n\n // Setup a watcher which manages chips a11y messages and autocomplete aria.\n // Timeout required to allow the child elements to be compiled.\n this.$timeout(function() {\n deRegister.push(\n element.find('md-chips').controller('mdChips').$scope.$watchCollection('$mdChipsCtrl.items', function() {\n // Make sure our input and wrapper have the correct ARIA attributes\n ctrl.setupChipsAria();\n ctrl.setupAutocompleteAria();\n })\n );\n });\n};\n\nMdContactChipsCtrl.prototype.setupChipsAria = function() {\n var chips = this.$element.find('md-chips');\n var chipsCtrl = chips.controller('mdChips');\n\n // Configure MdChipsCtrl\n if (this.removedMessage) {\n chipsCtrl.removedMessage = this.removedMessage;\n }\n if (this.containerHint) {\n chipsCtrl.containerHint = this.containerHint;\n }\n if (this.containerEmptyHint) {\n // Apply attribute to avoid the hint being overridden by MdChipsCtrl.configureAutocomplete()\n chips.attr('container-empty-hint', this.containerEmptyHint);\n chipsCtrl.containerEmptyHint = this.containerEmptyHint;\n }\n if (this.deleteHint) {\n chipsCtrl.deleteHint = this.deleteHint;\n }\n if (this.inputAriaLabel) {\n chipsCtrl.inputAriaLabel = this.inputAriaLabel;\n }\n};\n\nMdContactChipsCtrl.prototype.setupAutocompleteAria = function() {\n var autocompleteInput = this.$element.find('md-chips-wrap').find('md-autocomplete').find('input');\n\n // Set attributes on the input of the md-autocomplete\n if (this.inputAriaDescribedBy) {\n autocompleteInput.attr('aria-describedby', this.inputAriaDescribedBy);\n }\n if (this.inputAriaLabelledBy) {\n autocompleteInput.removeAttr('aria-label');\n autocompleteInput.attr('aria-labelledby', this.inputAriaLabelledBy);\n }\n};\n\nMdContactChipsCtrl.prototype.queryContact = function(searchText) {\n return this.contactQuery({'$query': searchText});\n};\n\nMdContactChipsCtrl.prototype.inputKeydown = function(event) {\n if (!this.separatorKeys || this.separatorKeys.indexOf(event.keyCode) < 0) {\n return;\n }\n\n event.stopPropagation();\n event.preventDefault();\n\n var autocompleteCtrl = angular.element(event.target).controller('mdAutocomplete');\n autocompleteCtrl.select(autocompleteCtrl.index);\n};\n\nMdContactChipsCtrl.prototype.itemName = function(item) {\n return item[this.contactName];\n};\n\n/**\n * Destructor for cleanup\n */\nMdContactChipsCtrl.prototype.$onDestroy = function $onDestroy() {\n var $destroyFn;\n while (($destroyFn = this.deRegister.pop())) {\n $destroyFn.call(this);\n }\n};\n\n})();\n(function(){\n\"use strict\";\n\n\nMdContactChips.$inject = [\"$mdTheming\", \"$mdUtil\"];angular\n .module('material.components.chips')\n .directive('mdContactChips', MdContactChips);\n\n/**\n * @ngdoc directive\n * @name mdContactChips\n * @module material.components.chips\n *\n * @description\n * `` is an input component based on `md-chips` and makes use of an\n * `md-autocomplete` element. The component allows the caller to supply a query expression which\n * returns a list of possible contacts. The user can select one of these and add it to the list of\n * chips.\n *\n * You may also use the md-highlight-flags attribute\n * along with its parameters to control the appearance of the matched text inside of the contacts'\n * autocomplete popup.\n *\n * @param {expression} ng-model Assignable AngularJS expression to be data-bound to the list of\n * contact chips. The expression should evaluate to an `Object` Array.\n * @param {expression=} ng-change AngularJS expression to be executed on chip addition, removal,\n * or content change.\n * @param {string=} placeholder Placeholder text that will be forwarded to the input.\n * @param {string=} secondary-placeholder Placeholder text that will be forwarded to the input,\n * displayed when there is at least on item in the list\n * @param {expression} md-contacts An expression expected to return contacts matching the search\n * test, `$query`. If this expression involves a promise, a loading bar is displayed while\n * waiting for it to resolve.\n * @param {string} md-contact-name The field name of the contact object representing the\n * contact's name.\n * @param {string} md-contact-email The field name of the contact object representing the\n * contact's email address.\n * @param {string} md-contact-image The field name of the contact object representing the\n * contact's image.\n * @param {number=} md-min-length Specifies the minimum length of text before autocomplete will\n * make suggestions\n * @param {string=} input-aria-describedby A space-separated list of element IDs. This should\n * contain the IDs of any elements that describe this autocomplete. Screen readers will read\n * the content of these elements at the end of announcing that the chips input has been\n * selected and describing its current state. The descriptive elements do not need to be\n * visible on the page.\n * @param {string=} input-aria-labelledby A space-separated list of element IDs. The ideal use\n * case is that this would contain the ID of a ` \n * \n *\n */\n\n\nvar MD_CONTACT_CHIPS_TEMPLATE = '\\\n \\\n \\\n \\\n \\\n ';\n\n\n/**\n * MDContactChips Directive Definition\n *\n * @param $mdTheming\n * @param $mdUtil\n * @returns {*}\n * @ngInject\n */\nfunction MdContactChips($mdTheming, $mdUtil) {\n return {\n template: function(element, attrs) {\n return MD_CONTACT_CHIPS_TEMPLATE;\n },\n restrict: 'E',\n controller: 'MdContactChipsCtrl',\n controllerAs: '$mdContactChipsCtrl',\n bindToController: true,\n compile: compile,\n scope: {\n contactQuery: '&mdContacts',\n placeholder: '@?',\n secondaryPlaceholder: '@?',\n contactName: '@mdContactName',\n contactImage: '@mdContactImage',\n contactEmail: '@mdContactEmail',\n contacts: '=ngModel',\n ngChange: '&?',\n requireMatch: '=?mdRequireMatch',\n minLength: '=?mdMinLength',\n highlightFlags: '@?mdHighlightFlags',\n chipAppendDelay: '@?mdChipAppendDelay',\n separatorKeys: '=?mdSeparatorKeys',\n removedMessage: '@?mdRemovedMessage',\n inputAriaDescribedBy: '@?inputAriaDescribedby',\n inputAriaLabelledBy: '@?inputAriaLabelledby',\n inputAriaLabel: '@?',\n containerHint: '@?',\n containerEmptyHint: '@?',\n deleteHint: '@?'\n }\n };\n\n function compile(element, attr) {\n return function postLink(scope, element, attrs, controllers) {\n var contactChipsController = controllers;\n\n $mdUtil.initOptionalProperties(scope, attr);\n $mdTheming(element);\n\n element.attr('tabindex', '-1');\n\n attrs.$observe('mdChipAppendDelay', function(newValue) {\n contactChipsController.chipAppendDelay = newValue;\n });\n };\n }\n}\n\n})();\n(function(){\n\"use strict\";\n\n(function () {\n \"use strict\";\n\n /**\n * Use a RegExp to check if the `md-colors=\"\"` is static string\n * or one that should be observed and dynamically interpolated.\n */\n MdColorsDirective.$inject = [\"$mdColors\", \"$mdUtil\", \"$log\", \"$parse\"];\n MdColorsService.$inject = [\"$mdTheming\", \"$mdUtil\", \"$log\"];\n var STATIC_COLOR_EXPRESSION = /^{((\\s|,)*?[\"'a-zA-Z-]+?\\s*?:\\s*?('|\")[a-zA-Z0-9-.]*('|\"))+\\s*}$/;\n var colorPalettes = null;\n\n /**\n * @ngdoc module\n * @name material.components.colors\n *\n * @description\n * Define $mdColors service and a `md-colors=\"\"` attribute directive\n */\n angular\n .module('material.components.colors', ['material.core'])\n .directive('mdColors', MdColorsDirective)\n .service('$mdColors', MdColorsService);\n\n /**\n * @ngdoc service\n * @name $mdColors\n * @module material.components.colors\n *\n * @description\n * By default, defining a theme does not make its colors available for applying to non AngularJS\n * Material elements. The `$mdColors` service is used by the `md-color` directive to convert a\n * set of color expressions to RGBA values and then apply those values to the element as CSS\n * property values.\n *\n * @usage\n * Getting a color based on a theme\n *\n * \n * angular.controller('myCtrl', function ($mdColors) {\n * var color = $mdColors.getThemeColor('myTheme-primary-900-0.5');\n * ...\n * });\n * \n *\n * Applying a color from a palette to an element\n * \n * app.directive('myDirective', function($mdColors) {\n * return {\n * ...\n * link: function (scope, elem) {\n * $mdColors.applyThemeColors(elem, {color: 'red-A200-0.2'});\n * }\n * }\n * });\n * \n */\n function MdColorsService($mdTheming, $mdUtil, $log) {\n colorPalettes = colorPalettes || Object.keys($mdTheming.PALETTES);\n\n // Publish service instance\n return {\n applyThemeColors: applyThemeColors,\n getThemeColor: getThemeColor,\n hasTheme: hasTheme\n };\n\n // ********************************************\n // Internal Methods\n // ********************************************\n\n /**\n * @ngdoc method\n * @name $mdColors#applyThemeColors\n *\n * @description\n * Lookup a set of colors by hue, theme, and palette, then apply those colors\n * with the provided opacity (via `rgba()`) to the specified CSS property.\n *\n * @param {angular.element} element the element to apply the styles to\n * @param {Object} colorExpression Keys are CSS properties and values are strings representing\n * the `theme-palette-hue-opacity` of the desired color. For example:\n * `{'color': 'red-A200-0.3', 'background-color': 'myTheme-primary-700-0.8'}`. Theme, hue, and\n * opacity are optional.\n */\n function applyThemeColors(element, colorExpression) {\n try {\n if (colorExpression) {\n // Assign the calculate RGBA color values directly as inline CSS\n element.css(interpolateColors(colorExpression));\n }\n } catch (e) {\n $log.error(e.message);\n }\n }\n\n /**\n * @ngdoc method\n * @name $mdColors#getThemeColor\n *\n * @description\n * Get a parsed RGBA color using a string representing the `theme-palette-hue-opacity` of the\n * desired color.\n *\n * @param {string} expression color expression like `'red-A200-0.3'` or\n * `'myTheme-primary-700-0.8'`. Theme, hue, and opacity are optional.\n * @returns {string} a CSS color value like `rgba(211, 47, 47, 0.8)`\n */\n function getThemeColor(expression) {\n var color = extractColorOptions(expression);\n\n return parseColor(color);\n }\n\n /**\n * Return the parsed color\n * @param {{hue: *, theme: any, palette: *, opacity: (*|string|number)}} color hash map of color\n * definitions\n * @param {boolean=} contrast whether use contrast color for foreground. Defaults to false.\n * @returns {string} rgba color string\n */\n function parseColor(color, contrast) {\n contrast = contrast || false;\n var rgbValues = $mdTheming.PALETTES[color.palette][color.hue];\n\n rgbValues = contrast ? rgbValues.contrast : rgbValues.value;\n\n return $mdUtil.supplant('rgba({0}, {1}, {2}, {3})',\n [rgbValues[0], rgbValues[1], rgbValues[2], rgbValues[3] || color.opacity]\n );\n }\n\n /**\n * Convert the color expression into an object with scope-interpolated values\n * Then calculate the rgba() values based on the theme color parts\n * @param {Object} themeColors json object, keys are css properties and values are string of\n * the wanted color, for example: `{color: 'red-A200-0.3'}`.\n * @return {Object} Hashmap of CSS properties with associated `rgba()` string values\n */\n function interpolateColors(themeColors) {\n var rgbColors = {};\n\n var hasColorProperty = themeColors.hasOwnProperty('color');\n\n angular.forEach(themeColors, function (value, key) {\n var color = extractColorOptions(value);\n var hasBackground = key.indexOf('background') > -1;\n\n rgbColors[key] = parseColor(color);\n if (hasBackground && !hasColorProperty) {\n rgbColors.color = parseColor(color, true);\n }\n });\n\n return rgbColors;\n }\n\n /**\n * Check if expression has defined theme\n * For instance:\n * 'myTheme-primary' => true\n * 'red-800' => false\n * @param {string} expression color expression like 'red-800', 'red-A200-0.3',\n * 'myTheme-primary', or 'myTheme-primary-400'\n * @return {boolean} true if the expression has a theme part, false otherwise.\n */\n function hasTheme(expression) {\n return angular.isDefined($mdTheming.THEMES[expression.split('-')[0]]);\n }\n\n /**\n * For the evaluated expression, extract the color parts into a hash map\n * @param {string} expression color expression like 'red-800', 'red-A200-0.3',\n * 'myTheme-primary', or 'myTheme-primary-400'\n * @returns {{hue: *, theme: any, palette: *, opacity: (*|string|number)}}\n */\n function extractColorOptions(expression) {\n var parts = expression.split('-');\n var hasTheme = angular.isDefined($mdTheming.THEMES[parts[0]]);\n var theme = hasTheme ? parts.splice(0, 1)[0] : $mdTheming.defaultTheme();\n\n return {\n theme: theme,\n palette: extractPalette(parts, theme),\n hue: extractHue(parts, theme),\n opacity: parts[2] || 1\n };\n }\n\n /**\n * Calculate the theme palette name\n * @param {Array} parts\n * @param {string} theme name\n * @return {string}\n */\n function extractPalette(parts, theme) {\n // If the next section is one of the palettes we assume it's a two word palette\n // Two word palette can be also written in camelCase, forming camelCase to dash-case\n\n var isTwoWord = parts.length > 1 && colorPalettes.indexOf(parts[1]) !== -1;\n var palette = parts[0].replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();\n\n if (isTwoWord) palette = parts[0] + '-' + parts.splice(1, 1);\n\n if (colorPalettes.indexOf(palette) === -1) {\n // If the palette is not in the palette list it's one of primary/accent/warn/background\n var scheme = $mdTheming.THEMES[theme].colors[palette];\n if (!scheme) {\n throw new Error($mdUtil.supplant(\n 'mdColors: couldn\\'t find \\'{palette}\\' in the palettes.',\n {palette: palette}));\n }\n palette = scheme.name;\n }\n\n return palette;\n }\n\n /**\n * @param {Array} parts\n * @param {string} theme name\n * @return {*}\n */\n function extractHue(parts, theme) {\n var themeColors = $mdTheming.THEMES[theme].colors;\n\n if (parts[1] === 'hue') {\n var hueNumber = parseInt(parts.splice(2, 1)[0], 10);\n\n if (hueNumber < 1 || hueNumber > 3) {\n throw new Error($mdUtil.supplant(\n 'mdColors: \\'hue-{hueNumber}\\' is not a valid hue, can be only \\'hue-1\\', \\'hue-2\\' and \\'hue-3\\'',\n {hueNumber: hueNumber}));\n }\n parts[1] = 'hue-' + hueNumber;\n\n if (!(parts[0] in themeColors)) {\n throw new Error($mdUtil.supplant(\n 'mdColors: \\'hue-x\\' can only be used with [{availableThemes}], but was used with \\'{usedTheme}\\'',\n {\n availableThemes: Object.keys(themeColors).join(', '),\n usedTheme: parts[0]\n }));\n }\n\n return themeColors[parts[0]].hues[parts[1]];\n }\n\n return parts[1] || themeColors[parts[0] in themeColors ? parts[0] : 'primary'].hues['default'];\n }\n }\n\n /**\n * @ngdoc directive\n * @name mdColors\n * @module material.components.colors\n *\n * @restrict A\n *\n * @description\n * `mdColors` directive will apply the theme-based color expression as RGBA CSS style values.\n *\n * The format will be similar to the colors defined in the Sass files:\n *\n * ## `[?theme]-[palette]-[?hue]-[?opacity]`\n * - [theme] - default value is the default theme\n * - [palette] - can be either palette name or primary/accent/warn/background\n * - [hue] - default is 500 (hue-x can be used with primary/accent/warn/background)\n * - [opacity] - default is 1\n *\n *\n * > `?` indicates optional parameter\n *\n * @usage\n * \n * \n *\n * The `mdColors` directive will automatically watch for changes in the expression if it recognizes\n * an interpolation expression or a function. For performance options, you can use `::` prefix to\n * the `md-colors` expression to indicate a one-time data binding.\n *\n * \n * \n * \n * \n */\n function MdColorsDirective($mdColors, $mdUtil, $log, $parse) {\n return {\n restrict: 'A',\n require: ['^?mdTheme'],\n compile: function (tElem, tAttrs) {\n var shouldWatch = shouldColorsWatch();\n\n return function (scope, element, attrs, ctrl) {\n var mdThemeController = ctrl[0];\n\n var lastColors = {};\n\n /**\n * @param {string=} theme\n * @return {Object} colors found in the specified theme\n */\n var parseColors = function (theme) {\n if (typeof theme !== 'string') {\n theme = '';\n }\n\n if (!attrs.mdColors) {\n attrs.mdColors = '{}';\n }\n\n /**\n * Json.parse() does not work because the keys are not quoted;\n * use $parse to convert to a hash map\n */\n var colors = $parse(attrs.mdColors)(scope);\n\n /**\n * If mdTheme is defined higher up the DOM tree,\n * we add mdTheme's theme to the colors which don't specify a theme.\n *\n * @example\n * \n * \n *\n * 'primary-600' will be changed to 'myTheme-primary-600',\n * but 'mySecondTheme-accent-200' will not be changed since it has a theme defined.\n */\n if (mdThemeController) {\n Object.keys(colors).forEach(function (prop) {\n var color = colors[prop];\n if (!$mdColors.hasTheme(color)) {\n colors[prop] = (theme || mdThemeController.$mdTheme) + '-' + color;\n }\n });\n }\n\n cleanElement(colors);\n\n return colors;\n };\n\n /**\n * @param {Object} colors\n */\n var cleanElement = function (colors) {\n if (!angular.equals(colors, lastColors)) {\n var keys = Object.keys(lastColors);\n\n if (lastColors.background && !keys.color) {\n keys.push('color');\n }\n\n keys.forEach(function (key) {\n element.css(key, '');\n });\n }\n\n lastColors = colors;\n };\n\n /**\n * Registering for mgTheme changes and asking mdTheme controller run our callback whenever\n * a theme changes.\n */\n var unregisterChanges = angular.noop;\n\n if (mdThemeController) {\n unregisterChanges = mdThemeController.registerChanges(function (theme) {\n $mdColors.applyThemeColors(element, parseColors(theme));\n });\n }\n\n scope.$on('$destroy', function () {\n unregisterChanges();\n });\n\n try {\n if (shouldWatch) {\n scope.$watch(parseColors, angular.bind(this,\n $mdColors.applyThemeColors, element\n ), true);\n }\n else {\n $mdColors.applyThemeColors(element, parseColors());\n }\n\n }\n catch (e) {\n $log.error(e.message);\n }\n\n };\n\n /**\n * @return {boolean}\n */\n function shouldColorsWatch() {\n // Simulate 1x binding and mark mdColorsWatch == false\n var rawColorExpression = tAttrs.mdColors;\n var bindOnce = rawColorExpression.indexOf('::') > -1;\n var isStatic = bindOnce ? true : STATIC_COLOR_EXPRESSION.test(tAttrs.mdColors);\n\n // Remove it for the postLink...\n tAttrs.mdColors = rawColorExpression.replace('::', '');\n\n var hasWatchAttr = angular.isDefined(tAttrs.mdColorsWatch);\n\n return (bindOnce || isStatic) ? false :\n hasWatchAttr ? $mdUtil.parseAttributeBoolean(tAttrs.mdColorsWatch) : true;\n }\n }\n };\n }\n})();\n\n})();\n(function(){\n\"use strict\";\n\n/**\n * @ngdoc module\n * @name material.components.content\n *\n * @description\n * Scrollable content\n */\nmdContentDirective.$inject = [\"$mdTheming\"];\nangular.module('material.components.content', [\n 'material.core'\n])\n .directive('mdContent', mdContentDirective);\n\n/**\n * @ngdoc directive\n * @name mdContent\n * @module material.components.content\n *\n * @restrict E\n *\n * @description\n *\n * The `` directive is a container element useful for scrollable content. It achieves\n * this by setting the CSS `overflow` property to `auto` so that content can properly scroll.\n *\n * In general, `` components are not designed to be nested inside one another. If\n * possible, it is better to make them siblings. This often results in a better user experience as\n * having nested scrollbars may confuse the user.\n *\n * ## Troubleshooting\n *\n * In some cases, you may wish to apply the `md-no-momentum` class to ensure that Safari's\n * momentum scrolling is disabled. Momentum scrolling can cause flickering issues while scrolling\n * SVG icons and some other components.\n *\n * Additionally, we now also offer the `md-no-flicker` class which can be applied to any element\n * and uses a Webkit-specific filter of `blur(0px)` that forces GPU rendering of all elements\n * inside (which eliminates the flicker on iOS devices).\n *\n * _Note: Forcing an element to render on the GPU can have unintended side-effects, especially\n * related to the z-index of elements. Please use with caution and only on the elements needed._\n *\n * @usage\n *\n * Add the `[layout-padding]` attribute to make the content padded.\n *\n * \n * \n * Lorem ipsum dolor sit amet, ne quod novum mei.\n * \n * \n */\n\nfunction mdContentDirective($mdTheming) {\n return {\n restrict: 'E',\n controller: ['$scope', '$element', ContentController],\n link: function(scope, element) {\n element.addClass('_md'); // private md component indicator for styling\n\n $mdTheming(element);\n scope.$broadcast('$mdContentLoaded', element);\n\n iosScrollFix(element[0]);\n }\n };\n\n function ContentController($scope, $element) {\n this.$scope = $scope;\n this.$element = $element;\n }\n}\n\nfunction iosScrollFix(node) {\n // IOS FIX:\n // If we scroll where there is no more room for the webview to scroll,\n // by default the webview itself will scroll up and down, this looks really\n // bad. So if we are scrolling to the very top or bottom, add/subtract one\n angular.element(node).on('$md.pressdown', function(ev) {\n // Only touch events\n if (ev.pointer.type !== 't') return;\n // Don't let a child content's touchstart ruin it for us.\n if (ev.$materialScrollFixed) return;\n ev.$materialScrollFixed = true;\n\n if (node.scrollTop === 0) {\n node.scrollTop = 1;\n } else if (node.scrollHeight === node.scrollTop + node.offsetHeight) {\n node.scrollTop -= 1;\n }\n });\n}\n\n})();\n(function(){\n\"use strict\";\n\n/**\n * @ngdoc module\n * @name material.components.datepicker\n * @description Module for the datepicker component.\n */\n\nangular.module('material.components.datepicker', [\n 'material.core',\n 'material.components.icon',\n 'material.components.virtualRepeat'\n]);\n\n})();\n(function(){\n\"use strict\";\n\n(function() {\n 'use strict';\n\n /**\n * @ngdoc directive\n * @name mdCalendar\n * @module material.components.datepicker\n *\n * @param {Date} ng-model The component's model. Should be a Date object.\n * @param {Object=} ng-model-options Allows tuning of the way in which `ng-model` is being\n * updated. Also allows for a timezone to be specified.\n * Read more at the\n * ngModelOptions docs.\n * @param {Date=} md-min-date Expression representing the minimum date.\n * @param {Date=} md-max-date Expression representing the maximum date.\n * @param {(function(Date): boolean)=} md-date-filter Function expecting a date and returning a\n * boolean whether it can be selected in \"day\" mode or not.\n * @param {(function(Date): boolean)=} md-month-filter Function expecting a date and returning a\n * boolean whether it can be selected in \"month\" mode or not.\n * @param {String=} md-current-view Current view of the calendar. Can be either \"month\" or \"year\".\n * @param {String=} md-mode Restricts the user to only selecting a value from a particular view.\n * This option can be used if the user is only supposed to choose from a certain date type\n * (e.g. only selecting the month). Can be either \"month\" or \"day\". **Note** that this will\n * overwrite the `md-current-view` value.\n *\n * @description\n * `` is a component that renders a calendar that can be used to select a date.\n * It is a part of the `` pane, however it can also be used on it's own.\n *\n * @usage\n *\n * \n * \n */\n CalendarCtrl.$inject = [\"$element\", \"$scope\", \"$$mdDateUtil\", \"$mdUtil\", \"$mdConstant\", \"$mdTheming\", \"$$rAF\", \"$attrs\", \"$mdDateLocale\", \"$filter\"];\n calendarDirective.$inject = [\"inputDirective\"];\n angular.module('material.components.datepicker')\n .directive('mdCalendar', calendarDirective);\n\n // TODO(jelbourn): Mac Cmd + left / right == Home / End\n // TODO(jelbourn): Refactor month element creation to use cloneNode (performance).\n // TODO(jelbourn): Define virtual scrolling constants (compactness) users can override.\n // TODO(jelbourn): Animated month transition on ng-model change (virtual-repeat)\n // TODO(jelbourn): Scroll snapping (virtual repeat)\n // TODO(jelbourn): Remove superfluous row from short months (virtual-repeat)\n // TODO(jelbourn): Month headers stick to top when scrolling.\n // TODO(jelbourn): Previous month opacity is lowered when partially scrolled out of view.\n // TODO(jelbourn): Support md-calendar standalone on a page (as a tabstop w/ aria-live\n // announcement and key handling).\n // TODO Read-only calendar (not just date-picker).\n\n function calendarDirective(inputDirective) {\n return {\n template: function(tElement, tAttr) {\n // This allows the calendar to work, without a datepicker. This ensures that the virtual\n // repeater scrolls to the proper place on load by deferring the execution until the next\n // digest. It's necessary only if the calendar is used without a datepicker, otherwise it's\n // already wrapped in an ngIf.\n var extraAttrs = tAttr.hasOwnProperty('ngIf') ? '' : 'ng-if=\"calendarCtrl.isInitialized\"';\n return '' +\n '
' +\n ' elements.\n */\n CalendarMonthBodyCtrl.prototype.buildCalendarForMonth = function(opt_dateInMonth) {\n var date = this.dateUtil.isValidDate(opt_dateInMonth) ? opt_dateInMonth : new Date();\n\n var firstDayOfMonth = this.dateUtil.getFirstDateOfMonth(date);\n var firstDayOfTheWeek = this.getLocaleDay_(firstDayOfMonth);\n var numberOfDaysInMonth = this.dateUtil.getNumberOfDaysInMonth(date);\n\n // Store rows for the month in a document fragment so that we can append them all at once.\n var monthBody = document.createDocumentFragment();\n\n var rowNumber = 1;\n var row = this.buildDateRow(rowNumber);\n monthBody.appendChild(row);\n\n // If this is the final month in the list of items, only the first week should render,\n // so we should return immediately after the first row is complete and has been\n // attached to the body.\n var isFinalMonth = this.offset === this.monthCtrl.items.length - 1;\n\n // Add a label for the month. If the month starts on a Sun/Mon/Tues, the month label\n // goes on a row above the first of the month. Otherwise, the month label takes up the first\n // two cells of the first row.\n var blankCellOffset = 0;\n var monthLabelCell = document.createElement('td');\n var monthLabelCellContent = document.createElement('span');\n var calendarCtrl = this.calendarCtrl;\n\n monthLabelCellContent.textContent = this.dateLocale.monthHeaderFormatter(date);\n monthLabelCell.appendChild(monthLabelCellContent);\n monthLabelCell.classList.add('md-calendar-month-label');\n // If the entire month is after the max date, render the label as a disabled state.\n if (calendarCtrl.maxDate && firstDayOfMonth > calendarCtrl.maxDate) {\n monthLabelCell.classList.add('md-calendar-month-label-disabled');\n // If the user isn't supposed to be able to change views, render the\n // label as usual, but disable the clicking functionality.\n } else if (!calendarCtrl.mode) {\n monthLabelCell.addEventListener('click', this.monthCtrl.headerClickHandler);\n monthLabelCell.setAttribute('data-timestamp', firstDayOfMonth.getTime());\n monthLabelCell.setAttribute('aria-label', this.dateLocale.monthFormatter(date));\n monthLabelCell.classList.add('md-calendar-label-clickable');\n monthLabelCell.appendChild(this.arrowIcon.cloneNode(true));\n }\n\n if (firstDayOfTheWeek <= 2) {\n monthLabelCell.setAttribute('colspan', '7');\n\n var monthLabelRow = this.buildDateRow();\n monthLabelRow.appendChild(monthLabelCell);\n monthBody.insertBefore(monthLabelRow, row);\n\n if (isFinalMonth) {\n return monthBody;\n }\n } else {\n blankCellOffset = 3;\n monthLabelCell.setAttribute('colspan', '3');\n row.appendChild(monthLabelCell);\n }\n\n // Add a blank cell for each day of the week that occurs before the first of the month.\n // For example, if the first day of the month is a Tuesday, add blank cells for Sun and Mon.\n // The blankCellOffset is needed in cases where the first N cells are used by the month label.\n for (var i = blankCellOffset; i < firstDayOfTheWeek; i++) {\n row.appendChild(this.buildDateCell());\n }\n\n // Add a cell for each day of the month, keeping track of the day of the week so that\n // we know when to start a new row.\n var dayOfWeek = firstDayOfTheWeek;\n var iterationDate = firstDayOfMonth;\n for (var d = 1; d <= numberOfDaysInMonth; d++) {\n // If we've reached the end of the week, start a new row.\n if (dayOfWeek === 7) {\n // We've finished the first row, so we're done if this is the final month.\n if (isFinalMonth) {\n return monthBody;\n }\n dayOfWeek = 0;\n rowNumber++;\n row = this.buildDateRow(rowNumber);\n monthBody.appendChild(row);\n }\n\n iterationDate.setDate(d);\n var cell = this.buildDateCell(iterationDate);\n row.appendChild(cell);\n\n dayOfWeek++;\n }\n\n // Ensure that the last row of the month has 7 cells.\n while (row.childNodes.length < 7) {\n row.appendChild(this.buildDateCell());\n }\n\n // Ensure that all months have 6 rows. This is necessary for now because the virtual-repeat\n // requires that all items have exactly the same height.\n while (monthBody.childNodes.length < 6) {\n var whitespaceRow = this.buildDateRow();\n for (var j = 0; j < 7; j++) {\n whitespaceRow.appendChild(this.buildDateCell());\n }\n monthBody.appendChild(whitespaceRow);\n }\n\n return monthBody;\n };\n\n /**\n * Gets the day-of-the-week index for a date for the current locale.\n * @private\n * @param {Date} date\n * @returns {number} The column index of the date in the calendar.\n */\n CalendarMonthBodyCtrl.prototype.getLocaleDay_ = function(date) {\n return (date.getDay() + (7 - this.dateLocale.firstDayOfWeek)) % 7;\n };\n})();\n\n})();\n(function(){\n\"use strict\";\n\n(function() {\n 'use strict';\n\n CalendarYearCtrl.$inject = [\"$element\", \"$scope\", \"$animate\", \"$q\", \"$$mdDateUtil\", \"$mdUtil\"];\n angular.module('material.components.datepicker')\n .directive('mdCalendarYear', calendarDirective);\n\n /**\n * Height of one calendar year tbody. This must be made known to the virtual-repeat and is\n * subsequently used for scrolling to specific years.\n */\n var TBODY_HEIGHT = 88;\n\n /** Private component, representing a list of years in the calendar. */\n function calendarDirective() {\n return {\n template:\n ' content for the given year.\n * @param {Date} date Date for which the content should be built.\n * @returns {DocumentFragment} A document fragment containing the months within the year.\n */\n CalendarYearBodyCtrl.prototype.buildCalendarForYear = function(date) {\n // Store rows for the month in a document fragment so that we can append them all at once.\n var year = date.getFullYear();\n var yearBody = document.createDocumentFragment();\n\n var monthCell, i;\n // First row contains label and Jan-Jun.\n var firstRow = document.createElement('tr');\n var labelCell = document.createElement('td');\n labelCell.className = 'md-calendar-month-label';\n labelCell.textContent = String(year);\n firstRow.appendChild(labelCell);\n\n for (i = 0; i < 6; i++) {\n firstRow.appendChild(this.buildMonthCell(year, i));\n }\n yearBody.appendChild(firstRow);\n\n // Second row contains a blank cell and Jul-Dec.\n var secondRow = document.createElement('tr');\n secondRow.appendChild(this.buildBlankCell());\n for (i = 6; i < 12; i++) {\n secondRow.appendChild(this.buildMonthCell(year, i));\n }\n yearBody.appendChild(secondRow);\n\n return yearBody;\n };\n})();\n\n})();\n(function(){\n\"use strict\";\n\n(function() {\n 'use strict';\n\n /**\n * @ngdoc service\n * @name $mdDateLocaleProvider\n * @module material.components.datepicker\n *\n * @description\n * The `$mdDateLocaleProvider` is the provider that creates the `$mdDateLocale` service.\n * This provider that allows the user to specify messages, formatters, and parsers for date\n * internationalization. The `$mdDateLocale` service itself is consumed by AngularJS Material\n * components that deal with dates\n * (i.e. mdDatepicker).\n *\n * @property {Array} months Array of month names (in order).\n * @property {Array} shortMonths Array of abbreviated month names.\n * @property {Array} days Array of the days of the week (in order).\n * @property {Array} shortDays Array of abbreviated days of the week.\n * @property {Array} dates Array of dates of the month. Only necessary for locales\n * using a numeral system other than [1, 2, 3...].\n * @property {Array} firstDayOfWeek The first day of the week. Sunday = 0, Monday = 1,\n * etc.\n * @property {function(string): Date} parseDate Function that converts a date string to a Date\n * object (the date portion).\n * @property {function(Date, string): string} formatDate Function to format a date object to a\n * string. The datepicker directive also provides the time zone, if it was specified.\n * @property {function(Date): string} monthHeaderFormatter Function that returns the label for\n * a month given a date.\n * @property {function(Date): string} monthFormatter Function that returns the full name of a month\n * for a given date.\n * @property {function(number): string} weekNumberFormatter Function that returns a label for\n * a week given the week number.\n * @property {function(Date): string} longDateFormatter Function that formats a date into a long\n * `aria-label` that is read by the screen reader when the focused date changes.\n * @property {string} msgCalendar Translation of the label \"Calendar\" for the current locale.\n * @property {string} msgOpenCalendar Translation of the button label \"Open calendar\" for the\n * current locale.\n * @property {Date} firstRenderableDate The date from which the datepicker calendar will begin\n * rendering. Note that this will be ignored if a minimum date is set.\n * Defaults to January 1st 1880.\n * @property {Date} lastRenderableDate The last date that will be rendered by the datepicker\n * calendar. Note that this will be ignored if a maximum date is set.\n * Defaults to January 1st 2130.\n * @property {function(string): boolean} isDateComplete Function to determine whether a string\n * makes sense to be parsed to a `Date` object. Returns `true` if the date appears to be complete\n * and parsing should occur. By default, this checks for 3 groups of text or numbers separated\n * by delimiters. This means that by default, date strings must include a month, day, and year\n * to be parsed and for the model to be updated.\n *\n * @usage\n * \n * myAppModule.config(function($mdDateLocaleProvider) {\n *\n * // Example of a French localization.\n * $mdDateLocaleProvider.months = ['janvier', 'février', 'mars', ...];\n * $mdDateLocaleProvider.shortMonths = ['janv', 'févr', 'mars', ...];\n * $mdDateLocaleProvider.days = ['dimanche', 'lundi', 'mardi', ...];\n * $mdDateLocaleProvider.shortDays = ['Di', 'Lu', 'Ma', ...];\n *\n * // Can change week display to start on Monday.\n * $mdDateLocaleProvider.firstDayOfWeek = 1;\n *\n * // Optional.\n * $mdDateLocaleProvider.dates = [1, 2, 3, 4, 5, 6, ...];\n *\n * // Example uses moment.js to parse and format dates.\n * $mdDateLocaleProvider.parseDate = function(dateString) {\n * var m = moment(dateString, 'L', true);\n * return m.isValid() ? m.toDate() : new Date(NaN);\n * };\n *\n * $mdDateLocaleProvider.formatDate = function(date) {\n * var m = moment(date);\n * return m.isValid() ? m.format('L') : '';\n * };\n *\n * // Allow only a day and month to be specified.\n * // This is required if using the 'M/D' format with moment.js.\n * $mdDateLocaleProvider.isDateComplete = function(dateString) {\n * dateString = dateString.trim();\n *\n * // Look for two chunks of content (either numbers or text) separated by delimiters.\n * var re = /^(([a-zA-Z]{3,}|[0-9]{1,4})([ .,]+|[/-]))([a-zA-Z]{3,}|[0-9]{1,4})/;\n * return re.test(dateString);\n * };\n *\n * $mdDateLocaleProvider.monthHeaderFormatter = function(date) {\n * return myShortMonths[date.getMonth()] + ' ' + date.getFullYear();\n * };\n *\n * // In addition to date display, date components also need localized messages\n * // for aria-labels for screen-reader users.\n *\n * $mdDateLocaleProvider.weekNumberFormatter = function(weekNumber) {\n * return 'Semaine ' + weekNumber;\n * };\n *\n * $mdDateLocaleProvider.msgCalendar = 'Calendrier';\n * $mdDateLocaleProvider.msgOpenCalendar = 'Ouvrir le calendrier';\n *\n * // You can also set when your calendar begins and ends.\n * $mdDateLocaleProvider.firstRenderableDate = new Date(1776, 6, 4);\n * $mdDateLocaleProvider.lastRenderableDate = new Date(2012, 11, 21);\n * });\n * \n *\n */\n angular.module('material.components.datepicker').config([\"$provide\", function($provide) {\n // TODO(jelbourn): Assert provided values are correctly formatted. Need assertions.\n\n /** @constructor */\n function DateLocaleProvider() {\n /** Array of full month names. E.g., ['January', 'February', ...] */\n this.months = null;\n\n /** Array of abbreviated month names. E.g., ['Jan', 'Feb', ...] */\n this.shortMonths = null;\n\n /** Array of full day of the week names. E.g., ['Monday', 'Tuesday', ...] */\n this.days = null;\n\n /** Array of abbreviated dat of the week names. E.g., ['M', 'T', ...] */\n this.shortDays = null;\n\n /** Array of dates of a month (1 - 31). Characters might be different in some locales. */\n this.dates = null;\n\n /** Index of the first day of the week. 0 = Sunday, 1 = Monday, etc. */\n this.firstDayOfWeek = 0;\n\n /**\n * Function that converts the date portion of a Date to a string.\n * @type {(function(Date): string)}\n */\n this.formatDate = null;\n\n /**\n * Function that converts a date string to a Date object (the date portion)\n * @type {function(string): Date}\n */\n this.parseDate = null;\n\n /**\n * Function that formats a Date into a month header string.\n * @type {function(Date): string}\n */\n this.monthHeaderFormatter = null;\n\n /**\n * Function that formats a week number into a label for the week.\n * @type {function(number): string}\n */\n this.weekNumberFormatter = null;\n\n /**\n * Function that formats a date into a long aria-label that is read\n * when the focused date changes.\n * @type {function(Date): string}\n */\n this.longDateFormatter = null;\n\n /**\n * Function to determine whether a string makes sense to be\n * parsed to a Date object.\n * @type {function(string): boolean}\n */\n this.isDateComplete = null;\n\n /**\n * ARIA label for the calendar \"dialog\" used in the datepicker.\n * @type {string}\n */\n this.msgCalendar = '';\n\n /**\n * ARIA label for the datepicker's \"Open calendar\" buttons.\n * @type {string}\n */\n this.msgOpenCalendar = '';\n }\n\n /**\n * Factory function that returns an instance of the dateLocale service.\n * @ngInject\n * @param $locale\n * @param $filter\n * @returns {DateLocale}\n */\n DateLocaleProvider.prototype.$get = function($locale, $filter) {\n /**\n * Default date-to-string formatting function.\n * @param {!Date} date\n * @param {string=} timezone\n * @returns {string}\n */\n function defaultFormatDate(date, timezone) {\n if (!date) {\n return '';\n }\n\n // All of the dates created through ng-material *should* be set to midnight.\n // If we encounter a date where the localeTime shows at 11pm instead of midnight,\n // we have run into an issue with DST where we need to increment the hour by one:\n // var d = new Date(1992, 9, 8, 0, 0, 0);\n // d.toLocaleString(); // == \"10/7/1992, 11:00:00 PM\"\n var localeTime = date.toLocaleTimeString();\n var formatDate = date;\n if (date.getHours() === 0 &&\n (localeTime.indexOf('11:') !== -1 || localeTime.indexOf('23:') !== -1)) {\n formatDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 1, 0, 0);\n }\n\n return $filter('date')(formatDate, 'M/d/yyyy', timezone);\n }\n\n /**\n * Default string-to-date parsing function.\n * @param {string|number} dateString\n * @returns {!Date}\n */\n function defaultParseDate(dateString) {\n return new Date(dateString);\n }\n\n /**\n * Default function to determine whether a string makes sense to be\n * parsed to a Date object.\n *\n * This is very permissive and is just a basic sanity check to ensure that\n * things like single integers aren't able to be parsed into dates.\n * @param {string} dateString\n * @returns {boolean}\n */\n function defaultIsDateComplete(dateString) {\n dateString = dateString.trim();\n\n // Looks for three chunks of content (either numbers or text) separated\n // by delimiters.\n var re = /^(([a-zA-Z]{3,}|[0-9]{1,4})([ .,]+|[/-])){2}([a-zA-Z]{3,}|[0-9]{1,4})$/;\n return re.test(dateString);\n }\n\n /**\n * Default date-to-string formatter to get a month header.\n * @param {!Date} date\n * @returns {string}\n */\n function defaultMonthHeaderFormatter(date) {\n return service.shortMonths[date.getMonth()] + ' ' + date.getFullYear();\n }\n\n /**\n * Default formatter for a month.\n * @param {!Date} date\n * @returns {string}\n */\n function defaultMonthFormatter(date) {\n return service.months[date.getMonth()] + ' ' + date.getFullYear();\n }\n\n /**\n * Default week number formatter.\n * @param number\n * @returns {string}\n */\n function defaultWeekNumberFormatter(number) {\n return 'Week ' + number;\n }\n\n /**\n * Default formatter for date cell aria-labels.\n * @param {!Date} date\n * @returns {string}\n */\n function defaultLongDateFormatter(date) {\n // Example: 'Thursday June 18 2015'\n return [\n service.days[date.getDay()],\n service.months[date.getMonth()],\n service.dates[date.getDate()],\n date.getFullYear()\n ].join(' ');\n }\n\n // The default \"short\" day strings are the first character of each day,\n // e.g., \"Monday\" => \"M\".\n var defaultShortDays = $locale.DATETIME_FORMATS.SHORTDAY.map(function(day) {\n return day.substring(0, 1);\n });\n\n // The default dates are simply the numbers 1 through 31.\n var defaultDates = Array(32);\n for (var i = 1; i <= 31; i++) {\n defaultDates[i] = i;\n }\n\n // Default ARIA messages are in English (US).\n var defaultMsgCalendar = 'Calendar';\n var defaultMsgOpenCalendar = 'Open calendar';\n\n // Default start/end dates that are rendered in the calendar.\n var defaultFirstRenderableDate = new Date(1880, 0, 1);\n var defaultLastRendereableDate = new Date(defaultFirstRenderableDate.getFullYear() + 250, 0, 1);\n\n var service = {\n months: this.months || $locale.DATETIME_FORMATS.MONTH,\n shortMonths: this.shortMonths || $locale.DATETIME_FORMATS.SHORTMONTH,\n days: this.days || $locale.DATETIME_FORMATS.DAY,\n shortDays: this.shortDays || defaultShortDays,\n dates: this.dates || defaultDates,\n firstDayOfWeek: this.firstDayOfWeek || 0,\n formatDate: this.formatDate || defaultFormatDate,\n parseDate: this.parseDate || defaultParseDate,\n isDateComplete: this.isDateComplete || defaultIsDateComplete,\n monthHeaderFormatter: this.monthHeaderFormatter || defaultMonthHeaderFormatter,\n monthFormatter: this.monthFormatter || defaultMonthFormatter,\n weekNumberFormatter: this.weekNumberFormatter || defaultWeekNumberFormatter,\n longDateFormatter: this.longDateFormatter || defaultLongDateFormatter,\n msgCalendar: this.msgCalendar || defaultMsgCalendar,\n msgOpenCalendar: this.msgOpenCalendar || defaultMsgOpenCalendar,\n firstRenderableDate: this.firstRenderableDate || defaultFirstRenderableDate,\n lastRenderableDate: this.lastRenderableDate || defaultLastRendereableDate\n };\n\n return service;\n };\n DateLocaleProvider.prototype.$get.$inject = [\"$locale\", \"$filter\"];\n\n $provide.provider('$mdDateLocale', new DateLocaleProvider());\n }]);\n})();\n\n})();\n(function(){\n\"use strict\";\n\n(function() {\n 'use strict';\n\n /**\n * Utility for performing date calculations to facilitate operation of the calendar and\n * datepicker.\n */\n angular.module('material.components.datepicker').factory('$$mdDateUtil', function() {\n return {\n getFirstDateOfMonth: getFirstDateOfMonth,\n getNumberOfDaysInMonth: getNumberOfDaysInMonth,\n getDateInNextMonth: getDateInNextMonth,\n getDateInPreviousMonth: getDateInPreviousMonth,\n isInNextMonth: isInNextMonth,\n isInPreviousMonth: isInPreviousMonth,\n getDateMidpoint: getDateMidpoint,\n isSameMonthAndYear: isSameMonthAndYear,\n getWeekOfMonth: getWeekOfMonth,\n incrementDays: incrementDays,\n incrementMonths: incrementMonths,\n getLastDateOfMonth: getLastDateOfMonth,\n isSameDay: isSameDay,\n getMonthDistance: getMonthDistance,\n isValidDate: isValidDate,\n setDateTimeToMidnight: setDateTimeToMidnight,\n createDateAtMidnight: createDateAtMidnight,\n isDateWithinRange: isDateWithinRange,\n incrementYears: incrementYears,\n getYearDistance: getYearDistance,\n clampDate: clampDate,\n getTimestampFromNode: getTimestampFromNode,\n isMonthWithinRange: isMonthWithinRange\n };\n\n /**\n * Gets the first day of the month for the given date's month.\n * @param {Date} date\n * @returns {Date}\n */\n function getFirstDateOfMonth(date) {\n return new Date(date.getFullYear(), date.getMonth(), 1);\n }\n\n /**\n * Gets the number of days in the month for the given date's month.\n * @param date\n * @returns {number}\n */\n function getNumberOfDaysInMonth(date) {\n return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();\n }\n\n /**\n * Get an arbitrary date in the month after the given date's month.\n * @param date\n * @returns {Date}\n */\n function getDateInNextMonth(date) {\n return new Date(date.getFullYear(), date.getMonth() + 1, 1);\n }\n\n /**\n * Get an arbitrary date in the month before the given date's month.\n * @param date\n * @returns {Date}\n */\n function getDateInPreviousMonth(date) {\n return new Date(date.getFullYear(), date.getMonth() - 1, 1);\n }\n\n /**\n * Gets whether two dates have the same month and year.\n * @param {Date} d1\n * @param {Date} d2\n * @returns {boolean}\n */\n function isSameMonthAndYear(d1, d2) {\n return d1.getFullYear() === d2.getFullYear() && d1.getMonth() === d2.getMonth();\n }\n\n /**\n * Gets whether two dates are the same day (not not necessarily the same time).\n * @param {Date} d1\n * @param {Date} d2\n * @returns {boolean}\n */\n function isSameDay(d1, d2) {\n return d1.getDate() == d2.getDate() && isSameMonthAndYear(d1, d2);\n }\n\n /**\n * Gets whether a date is in the month immediately after some date.\n * @param {Date} startDate The date from which to compare.\n * @param {Date} endDate The date to check.\n * @returns {boolean}\n */\n function isInNextMonth(startDate, endDate) {\n var nextMonth = getDateInNextMonth(startDate);\n return isSameMonthAndYear(nextMonth, endDate);\n }\n\n /**\n * Gets whether a date is in the month immediately before some date.\n * @param {Date} startDate The date from which to compare.\n * @param {Date} endDate The date to check.\n * @returns {boolean}\n */\n function isInPreviousMonth(startDate, endDate) {\n var previousMonth = getDateInPreviousMonth(startDate);\n return isSameMonthAndYear(endDate, previousMonth);\n }\n\n /**\n * Gets the midpoint between two dates.\n * @param {Date} d1\n * @param {Date} d2\n * @returns {Date}\n */\n function getDateMidpoint(d1, d2) {\n return createDateAtMidnight((d1.getTime() + d2.getTime()) / 2);\n }\n\n /**\n * Gets the week of the month that a given date occurs in.\n * @param {Date} date\n * @returns {number} Index of the week of the month (zero-based).\n */\n function getWeekOfMonth(date) {\n var firstDayOfMonth = getFirstDateOfMonth(date);\n return Math.floor((firstDayOfMonth.getDay() + date.getDate() - 1) / 7);\n }\n\n /**\n * Gets a new date incremented by the given number of days. Number of days can be negative.\n * @param {Date} date\n * @param {number} numberOfDays\n * @returns {Date}\n */\n function incrementDays(date, numberOfDays) {\n return new Date(date.getFullYear(), date.getMonth(), date.getDate() + numberOfDays);\n }\n\n /**\n * Gets a new date incremented by the given number of months. Number of months can be negative.\n * If the date of the given month does not match the target month, the date will be set to the\n * last day of the month.\n * @param {Date} date\n * @param {number} numberOfMonths\n * @returns {Date}\n */\n function incrementMonths(date, numberOfMonths) {\n // If the same date in the target month does not actually exist, the Date object will\n // automatically advance *another* month by the number of missing days.\n // For example, if you try to go from Jan. 30 to Feb. 30, you'll end up on March 2.\n // So, we check if the month overflowed and go to the last day of the target month instead.\n var dateInTargetMonth = new Date(date.getFullYear(), date.getMonth() + numberOfMonths, 1);\n var numberOfDaysInMonth = getNumberOfDaysInMonth(dateInTargetMonth);\n if (numberOfDaysInMonth < date.getDate()) {\n dateInTargetMonth.setDate(numberOfDaysInMonth);\n } else {\n dateInTargetMonth.setDate(date.getDate());\n }\n\n return dateInTargetMonth;\n }\n\n /**\n * Get the integer distance between two months. This *only* considers the month and year\n * portion of the Date instances.\n *\n * @param {Date} start\n * @param {Date} end\n * @returns {number} Number of months between `start` and `end`. If `end` is before `start`\n * chronologically, this number will be negative.\n */\n function getMonthDistance(start, end) {\n return (12 * (end.getFullYear() - start.getFullYear())) + (end.getMonth() - start.getMonth());\n }\n\n /**\n * Gets the last day of the month for the given date.\n * @param {Date} date\n * @returns {Date}\n */\n function getLastDateOfMonth(date) {\n return new Date(date.getFullYear(), date.getMonth(), getNumberOfDaysInMonth(date));\n }\n\n /**\n * Checks whether a date is valid.\n * @param {Date} date\n * @return {boolean} Whether the date is a valid Date.\n */\n function isValidDate(date) {\n return date && date.getTime && !isNaN(date.getTime());\n }\n\n /**\n * Sets a date's time to midnight.\n * @param {Date} date\n */\n function setDateTimeToMidnight(date) {\n if (isValidDate(date)) {\n date.setHours(0, 0, 0, 0);\n }\n }\n\n /**\n * Creates a date with the time set to midnight.\n * Drop-in replacement for two forms of the Date constructor via opt_value.\n * @param {number|Date=} opt_value Leave undefined for a Date representing now. Or use a\n * single value representing the number of seconds since the Unix Epoch or a Date object.\n * @return {Date} New date with time set to midnight.\n */\n function createDateAtMidnight(opt_value) {\n var date;\n if (angular.isDate(opt_value)) {\n date = opt_value;\n } else if (angular.isNumber(opt_value)) {\n date = new Date(opt_value);\n } else {\n date = new Date();\n }\n setDateTimeToMidnight(date);\n return date;\n }\n\n /**\n * Checks if a date is within a min and max range, ignoring the time component.\n * If minDate or maxDate are not dates, they are ignored.\n * @param {Date} date\n * @param {Date} minDate\n * @param {Date} maxDate\n */\n function isDateWithinRange(date, minDate, maxDate) {\n var dateAtMidnight = createDateAtMidnight(date);\n var minDateAtMidnight = isValidDate(minDate) ? createDateAtMidnight(minDate) : null;\n var maxDateAtMidnight = isValidDate(maxDate) ? createDateAtMidnight(maxDate) : null;\n return (!minDateAtMidnight || minDateAtMidnight <= dateAtMidnight) &&\n (!maxDateAtMidnight || maxDateAtMidnight >= dateAtMidnight);\n }\n\n /**\n * Gets a new date incremented by the given number of years. Number of years can be negative.\n * See `incrementMonths` for notes on overflow for specific dates.\n * @param {Date} date\n * @param {number} numberOfYears\n * @returns {Date}\n */\n function incrementYears(date, numberOfYears) {\n return incrementMonths(date, numberOfYears * 12);\n }\n\n /**\n * Get the integer distance between two years. This *only* considers the year portion of the\n * Date instances.\n *\n * @param {Date} start\n * @param {Date} end\n * @returns {number} Number of months between `start` and `end`. If `end` is before `start`\n * chronologically, this number will be negative.\n */\n function getYearDistance(start, end) {\n return end.getFullYear() - start.getFullYear();\n }\n\n /**\n * Clamps a date between a minimum and a maximum date.\n * @param {Date} date Date to be clamped\n * @param {Date=} minDate Minimum date\n * @param {Date=} maxDate Maximum date\n * @return {Date}\n */\n function clampDate(date, minDate, maxDate) {\n var boundDate = date;\n if (minDate && date < minDate) {\n boundDate = new Date(minDate.getTime());\n }\n if (maxDate && date > maxDate) {\n boundDate = new Date(maxDate.getTime());\n }\n return boundDate;\n }\n\n /**\n * Extracts and parses the timestamp from a DOM node.\n * @param {HTMLElement} node Node from which the timestamp will be extracted.\n * @return {number} Time since epoch.\n */\n function getTimestampFromNode(node) {\n if (node && node.hasAttribute('data-timestamp')) {\n return Number(node.getAttribute('data-timestamp'));\n }\n }\n\n /**\n * Checks if a month is within a min and max range, ignoring the date and time components.\n * If minDate or maxDate are not dates, they are ignored.\n * @param {Date} date\n * @param {Date} minDate\n * @param {Date} maxDate\n */\n function isMonthWithinRange(date, minDate, maxDate) {\n var month = date.getMonth();\n var year = date.getFullYear();\n\n return (!minDate || minDate.getFullYear() < year || minDate.getMonth() <= month) &&\n (!maxDate || maxDate.getFullYear() > year || maxDate.getMonth() >= month);\n }\n });\n})();\n\n})();\n(function(){\n\"use strict\";\n\n(function() {\n 'use strict';\n\n // TODO(jelbourn): forward more attributes to the internal input (required, autofocus, etc.)\n // TODO(jelbourn): something better for mobile (calendar panel takes up entire screen?)\n // TODO(jelbourn): input behavior (masking? auto-complete?)\n\n DatePickerCtrl.$inject = [\"$scope\", \"$element\", \"$attrs\", \"$window\", \"$mdConstant\", \"$mdTheming\", \"$mdUtil\", \"$mdDateLocale\", \"$$mdDateUtil\", \"$$rAF\", \"$filter\", \"$timeout\"];\n datePickerDirective.$inject = [\"$$mdSvgRegistry\", \"$mdUtil\", \"$mdAria\", \"inputDirective\"];\n angular.module('material.components.datepicker')\n .directive('mdDatepicker', datePickerDirective);\n\n /**\n * @ngdoc directive\n * @name mdDatepicker\n * @module material.components.datepicker\n *\n * @param {Date} ng-model The component's model. Expects either a JavaScript Date object or a\n * value that can be parsed into one (e.g. a ISO 8601 string).\n * @param {Object=} ng-model-options Allows tuning of the way in which `ng-model` is being\n * updated. Also allows for a timezone to be specified.\n * \n * Read more at the ngModelOptions docs.\n * @param {expression=} ng-change Expression evaluated when the model value changes.\n * @param {expression=} ng-focus Expression evaluated when the input is focused or the calendar\n * is opened.\n * @param {expression=} ng-blur Expression evaluated when focus is removed from the input or the\n * calendar is closed.\n * @param {boolean=} ng-disabled Whether the datepicker is disabled.\n * @param {boolean=} ng-required Whether a value is required for the datepicker.\n * @param {Date=} md-min-date Expression representing a min date (inclusive).\n * @param {Date=} md-max-date Expression representing a max date (inclusive).\n * @param {(function(Date): boolean)=} md-date-filter Function expecting a date and returning a\n * boolean whether it can be selected in \"day\" mode or not. Returning false will also trigger a\n * `filtered` model validation error.\n * @param {(function(Date): boolean)=} md-month-filter Function expecting a date and returning a\n * boolean whether it can be selected in \"month\" mode or not. Returning false will also trigger a\n * `filtered` model validation error.\n * @param {String=} md-placeholder The date input placeholder value.\n * @param {String=} md-open-on-focus When present, the calendar will be opened when the input\n * is focused.\n * @param {Boolean=} md-is-open Expression that can be used to open the datepicker's calendar\n * on-demand.\n * @param {String=} md-current-view Default open view of the calendar pane. Can be either\n * \"month\" or \"year\".\n * @param {String=} md-mode Restricts the user to only selecting a value from a particular view.\n * This option can be used if the user is only supposed to choose from a certain date type\n * (e.g. only selecting the month).\n * Can be either \"month\" or \"day\". **Note** that this will overwrite the `md-current-view` value.\n *\n * @param {String=} md-hide-icons Determines which datepicker icons should be hidden. Note that\n * this may cause the datepicker to not align properly with other components.\n * **Use at your own risk.** Possible values are:\n * * `\"all\"` - Hides all icons.\n * * `\"calendar\"` - Only hides the calendar icon.\n * * `\"triangle\"` - Only hides the triangle icon.\n * @param {Object=} md-date-locale Allows for the values from the `$mdDateLocaleProvider` to be\n * overwritten on a per-element basis (e.g. `msgOpenCalendar` can be overwritten with\n * `md-date-locale=\"{ msgOpenCalendar: 'Open a special calendar' }\"`).\n *\n * @description\n * `` is a component used to select a single date.\n * For information on how to configure internationalization for the date picker,\n * see $mdDateLocaleProvider.\n *\n * This component supports\n * [ngMessages](https://docs.angularjs.org/api/ngMessages/directive/ngMessages).\n * Supported attributes are:\n * * `required`: whether a required date is not set.\n * * `mindate`: whether the selected date is before the minimum allowed date.\n * * `maxdate`: whether the selected date is after the maximum allowed date.\n * * `debounceInterval`: ms to delay input processing (since last debounce reset);\n * default value 500ms\n *\n * @usage\n * \n * \n *\n */\n\n function datePickerDirective($$mdSvgRegistry, $mdUtil, $mdAria, inputDirective) {\n return {\n template: function(tElement, tAttrs) {\n // Buttons are not in the tab order because users can open the calendar via keyboard\n // interaction on the text input, and multiple tab stops for one component (picker)\n // may be confusing.\n var hiddenIcons = tAttrs.mdHideIcons;\n var ariaLabelValue = tAttrs.ariaLabel || tAttrs.mdPlaceholder;\n\n var calendarButton = (hiddenIcons === 'all' || hiddenIcons === 'calendar') ? '' :\n '' +\n ' ';\n\n var triangleButton = '';\n\n if (hiddenIcons !== 'all' && hiddenIcons !== 'triangle') {\n triangleButton = '' +\n '' +\n '' +\n ' ';\n\n tElement.addClass(HAS_TRIANGLE_ICON_CLASS);\n }\n\n return calendarButton +\n '
My Content
\n * ```\n *\n * ```css\n * [layout] {\n * box-sizing: border-box;\n * display:flex;\n * }\n * [layout=column] {\n * flex-direction : column\n * }\n * ```\n *\n * Use of attribute selectors creates significant performance impacts in some\n * browsers... mainly IE.\n *\n * This module registers directives that allow the same layout attributes to be\n * interpreted and converted to class selectors. The directive will add equivalent classes to each element that\n * contains a Layout directive.\n *\n * ```html\n * My Content
\n *```\n *\n * ```css\n * .layout {\n * box-sizing: border-box;\n * display:flex;\n * }\n * .layout-column {\n * flex-direction : column\n * }\n * ```\n */\n function registerLayoutAPI(module){\n var PREFIX_REGEXP = /^((?:x|data)[:\\-_])/i;\n var SPECIAL_CHARS_REGEXP = /([:\\-_]+(.))/g;\n\n // NOTE: these are also defined in constants::MEDIA_PRIORITY and constants::MEDIA\n var BREAKPOINTS = [\"\", \"xs\", \"gt-xs\", \"sm\", \"gt-sm\", \"md\", \"gt-md\", \"lg\", \"gt-lg\", \"xl\", \"print\"];\n var API_WITH_VALUES = [\"layout\", \"flex\", \"flex-order\", \"flex-offset\", \"layout-align\"];\n var API_NO_VALUES = [\"show\", \"hide\", \"layout-padding\", \"layout-margin\"];\n\n\n // Build directive registration functions for the standard Layout API... for all breakpoints.\n angular.forEach(BREAKPOINTS, function(mqb) {\n\n // Attribute directives with expected, observable value(s)\n angular.forEach(API_WITH_VALUES, function(name){\n var fullName = mqb ? name + \"-\" + mqb : name;\n module.directive(directiveNormalize(fullName), attributeWithObserve(fullName));\n });\n\n // Attribute directives with no expected value(s)\n angular.forEach(API_NO_VALUES, function(name){\n var fullName = mqb ? name + \"-\" + mqb : name;\n module.directive(directiveNormalize(fullName), attributeWithoutValue(fullName));\n });\n\n });\n\n // Register other, special directive functions for the Layout features:\n module\n\n .provider('$$mdLayout' , function() {\n // Publish internal service for Layouts\n return {\n $get : angular.noop,\n validateAttributeValue : validateAttributeValue,\n validateAttributeUsage : validateAttributeUsage,\n /**\n * Easy way to disable/enable the Layout API.\n * When disabled, this stops all attribute-to-classname generations\n */\n disableLayouts : function(isDisabled) {\n config.enabled = (isDisabled !== true);\n }\n };\n })\n\n .directive('mdLayoutCss' , disableLayoutDirective)\n .directive('ngCloak' , buildCloakInterceptor('ng-cloak'))\n\n .directive('layoutWrap' , attributeWithoutValue('layout-wrap'))\n .directive('layoutNowrap' , attributeWithoutValue('layout-nowrap'))\n .directive('layoutNoWrap' , attributeWithoutValue('layout-no-wrap'))\n .directive('layoutFill' , attributeWithoutValue('layout-fill'))\n\n // !! Deprecated attributes: use the `-lt` (aka less-than) notations\n\n .directive('layoutLtMd' , warnAttrNotSupported('layout-lt-md', true))\n .directive('layoutLtLg' , warnAttrNotSupported('layout-lt-lg', true))\n .directive('flexLtMd' , warnAttrNotSupported('flex-lt-md', true))\n .directive('flexLtLg' , warnAttrNotSupported('flex-lt-lg', true))\n\n .directive('layoutAlignLtMd', warnAttrNotSupported('layout-align-lt-md'))\n .directive('layoutAlignLtLg', warnAttrNotSupported('layout-align-lt-lg'))\n .directive('flexOrderLtMd' , warnAttrNotSupported('flex-order-lt-md'))\n .directive('flexOrderLtLg' , warnAttrNotSupported('flex-order-lt-lg'))\n .directive('offsetLtMd' , warnAttrNotSupported('flex-offset-lt-md'))\n .directive('offsetLtLg' , warnAttrNotSupported('flex-offset-lt-lg'))\n\n .directive('hideLtMd' , warnAttrNotSupported('hide-lt-md'))\n .directive('hideLtLg' , warnAttrNotSupported('hide-lt-lg'))\n .directive('showLtMd' , warnAttrNotSupported('show-lt-md'))\n .directive('showLtLg' , warnAttrNotSupported('show-lt-lg'))\n\n // Determine if\n .config(detectDisabledLayouts);\n\n /**\n * Converts snake_case to camelCase.\n * Also there is special case for Moz prefix starting with upper case letter.\n * @param name Name to normalize\n */\n function directiveNormalize(name) {\n return name\n .replace(PREFIX_REGEXP, '')\n .replace(SPECIAL_CHARS_REGEXP, function(_, separator, letter, offset) {\n return offset ? letter.toUpperCase() : letter;\n });\n }\n\n }\n\n\n /**\n * Detect if any of the HTML tags has a [md-layouts-disabled] attribute;\n * If yes, then immediately disable all layout API features\n *\n * Note: this attribute should be specified on either the HTML or BODY tags\n */\n /**\n * @ngInject\n */\n function detectDisabledLayouts() {\n var isDisabled = !!document.querySelector('[md-layouts-disabled]');\n config.enabled = !isDisabled;\n }\n\n /**\n * Special directive that will disable ALL Layout conversions of layout\n * attribute(s) to classname(s).\n *\n * \n * \n *\n * \n * ...\n * \n *\n * Note: Using md-layout-css directive requires the developer to load the Material\n * Layout Attribute stylesheet (which only uses attribute selectors):\n *\n * `angular-material.layout.css`\n *\n * Another option is to use the LayoutProvider to configure and disable the attribute\n * conversions; this would obviate the use of the `md-layout-css` directive\n *\n */\n function disableLayoutDirective() {\n // Return a 1x-only, first-match attribute directive\n config.enabled = false;\n\n return {\n restrict : 'A',\n priority : '900'\n };\n }\n\n /**\n * Tail-hook ngCloak to delay the uncloaking while Layout transformers\n * finish processing. Eliminates flicker with Material.Layouts\n */\n function buildCloakInterceptor(className) {\n return ['$timeout', function($timeout){\n return {\n restrict : 'A',\n priority : -10, // run after normal ng-cloak\n compile : function(element) {\n if (!config.enabled) return angular.noop;\n\n // Re-add the cloak\n element.addClass(className);\n\n return function(scope, element) {\n // Wait while layout injectors configure, then uncloak\n // NOTE: $rAF does not delay enough... and this is a 1x-only event,\n // $timeout is acceptable.\n $timeout(function(){\n element.removeClass(className);\n }, 10, false);\n };\n }\n };\n }];\n }\n\n\n // *********************************************************************************\n //\n // These functions create registration functions for AngularJS Material Layout attribute directives\n // This provides easy translation to switch AngularJS Material attribute selectors to\n // CLASS selectors and directives; which has huge performance implications\n // for IE Browsers\n //\n // *********************************************************************************\n\n /**\n * Creates a directive registration function where a possible dynamic attribute\n * value will be observed/watched.\n * @param {string} className attribute name; eg `layout-gt-md` with value =\"row\"\n */\n function attributeWithObserve(className) {\n\n return ['$mdUtil', '$interpolate', \"$log\", function(_$mdUtil_, _$interpolate_, _$log_) {\n $mdUtil = _$mdUtil_;\n $interpolate = _$interpolate_;\n $log = _$log_;\n\n return {\n restrict: 'A',\n compile: function(element, attr) {\n var linkFn;\n if (config.enabled) {\n // immediately replace static (non-interpolated) invalid values...\n\n validateAttributeUsage(className, attr, element, $log);\n\n validateAttributeValue(className,\n getNormalizedAttrValue(className, attr, \"\"),\n buildUpdateFn(element, className, attr)\n );\n\n linkFn = translateWithValueToCssClass;\n }\n\n // Use for postLink to account for transforms after ng-transclude.\n return linkFn || angular.noop;\n }\n };\n }];\n\n /**\n * Add as transformed class selector(s), then\n * remove the deprecated attribute selector\n */\n function translateWithValueToCssClass(scope, element, attrs) {\n var updateFn = updateClassWithValue(element, className, attrs);\n var unwatch = attrs.$observe(attrs.$normalize(className), updateFn);\n\n updateFn(getNormalizedAttrValue(className, attrs, \"\"));\n scope.$on(\"$destroy\", function() { unwatch(); });\n }\n }\n\n /**\n * Creates a registration function for AngularJS Material Layout attribute directive.\n * This is a `simple` transpose of attribute usage to class usage; where we ignore\n * any attribute value\n */\n function attributeWithoutValue(className) {\n return ['$mdUtil', '$interpolate', \"$log\", function(_$mdUtil_, _$interpolate_, _$log_) {\n $mdUtil = _$mdUtil_;\n $interpolate = _$interpolate_;\n $log = _$log_;\n\n return {\n restrict: 'A',\n compile: function(element, attr) {\n var linkFn;\n if (config.enabled) {\n // immediately replace static (non-interpolated) invalid values...\n\n validateAttributeValue(className,\n getNormalizedAttrValue(className, attr, \"\"),\n buildUpdateFn(element, className, attr)\n );\n\n translateToCssClass(null, element);\n\n // Use for postLink to account for transforms after ng-transclude.\n linkFn = translateToCssClass;\n }\n\n return linkFn || angular.noop;\n }\n };\n }];\n\n /**\n * Add as transformed class selector, then\n * remove the deprecated attribute selector\n */\n function translateToCssClass(scope, element) {\n element.addClass(className);\n }\n }\n\n\n\n /**\n * After link-phase, do NOT remove deprecated layout attribute selector.\n * Instead watch the attribute so interpolated data-bindings to layout\n * selectors will continue to be supported.\n *\n * $observe() the className and update with new class (after removing the last one)\n *\n * e.g. `layout=\"{{layoutDemo.direction}}\"` will update...\n *\n * NOTE: The value must match one of the specified styles in the CSS.\n * For example `flex-gt-md=\"{{size}}` where `scope.size == 47` will NOT work since\n * only breakpoints for 0, 5, 10, 15... 100, 33, 34, 66, 67 are defined.\n *\n */\n function updateClassWithValue(element, className) {\n var lastClass;\n\n return function updateClassFn(newValue) {\n var value = validateAttributeValue(className, newValue || \"\");\n if (angular.isDefined(value)) {\n if (lastClass) element.removeClass(lastClass);\n lastClass = !value ? className : className + \"-\" + value.trim().replace(WHITESPACE, \"-\");\n element.addClass(lastClass);\n }\n };\n }\n\n /**\n * Provide console warning that this layout attribute has been deprecated\n *\n */\n function warnAttrNotSupported(className) {\n var parts = className.split(\"-\");\n return [\"$log\", function($log) {\n $log.warn(className + \"has been deprecated. Please use a `\" + parts[0] + \"-gt- wrapper inside (preferred) or outside\n\n usage = \"<\" + nodeName + \" \" + className + \">\";\n url = \"https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers\";\n message = \"Markup '{0}' may not work as expected in IE Browsers. Consult '{1}' for details.\";\n\n $log.warn($mdUtil.supplant(message, [usage, url]));\n }\n }\n\n }\n\n\n /**\n * For the Layout attribute value, validate or replace with default\n * fallback value\n */\n function validateAttributeValue(className, value, updateFn) {\n var origValue = value;\n\n if (!needsInterpolation(value)) {\n switch (className.replace(SUFFIXES,\"\")) {\n case 'layout' :\n if (!findIn(value, LAYOUT_OPTIONS)) {\n value = LAYOUT_OPTIONS[0]; // 'row';\n }\n break;\n\n case 'flex' :\n if (!findIn(value, FLEX_OPTIONS)) {\n if (isNaN(value)) {\n value = '';\n }\n }\n break;\n\n case 'flex-offset' :\n case 'flex-order' :\n if (!value || isNaN(+value)) {\n value = '0';\n }\n break;\n\n case 'layout-align' :\n var axis = extractAlignAxis(value);\n value = $mdUtil.supplant(\"{main}-{cross}\",axis);\n break;\n\n case 'layout-padding' :\n case 'layout-margin' :\n case 'layout-fill' :\n case 'layout-wrap' :\n case 'layout-nowrap' :\n value = '';\n break;\n }\n\n if (value != origValue) {\n (updateFn || angular.noop)(value);\n }\n }\n\n return value ? value.trim() : \"\";\n }\n\n /**\n * Replace current attribute value with fallback value\n */\n function buildUpdateFn(element, className, attrs) {\n return function updateAttrValue(fallback) {\n if (!needsInterpolation(fallback)) {\n // Do not modify the element's attribute value; so\n // uses '\r\n * module.controller('AppCtrl', function($mdLiveAnnouncer) {\r\n * // Basic announcement (Polite Mode)\r\n * $mdLiveAnnouncer.announce('Hey Google');\r\n *\r\n * // Custom announcement (Assertive Mode)\r\n * $mdLiveAnnouncer.announce('Hey Google', 'assertive');\r\n * });\r\n * \r\n *\r\n */\r\nfunction MdLiveAnnouncer($timeout) {\r\n /** @private @const @type {!angular.$timeout} */\r\n this._$timeout = $timeout;\r\n\r\n /** @private @const @type {!HTMLElement} */\r\n this._liveElement = this._createLiveElement();\r\n\r\n /** @private @const @type {!number} */\r\n this._announceTimeout = 100;\r\n}\r\n\r\n/**\r\n * @ngdoc method\r\n * @name $mdLiveAnnouncer#announce\r\n * @description Announces messages to supported screenreaders.\r\n * @param {string} message Message to be announced to the screenreader\r\n * @param {'off'|'polite'|'assertive'} politeness The politeness of the announcer element.\r\n */\r\nMdLiveAnnouncer.prototype.announce = function(message, politeness) {\r\n if (!politeness) {\r\n politeness = 'polite';\r\n }\r\n\r\n var self = this;\r\n\r\n self._liveElement.textContent = '';\r\n self._liveElement.setAttribute('aria-live', politeness);\r\n\r\n // This 100ms timeout is necessary for some browser + screen-reader combinations:\r\n // - Both JAWS and NVDA over IE11 will not announce anything without a non-zero timeout.\r\n // - With Chrome and IE11 with NVDA or JAWS, a repeated (identical) message won't be read a\r\n // second time without clearing and then using a non-zero delay.\r\n // (using JAWS 17 at time of this writing).\r\n self._$timeout(function() {\r\n self._liveElement.textContent = message;\r\n }, self._announceTimeout, false);\r\n};\r\n\r\n/**\r\n * Creates a live announcer element, which listens for DOM changes and announces them\r\n * to the screenreaders.\r\n * @returns {!HTMLElement}\r\n * @private\r\n */\r\nMdLiveAnnouncer.prototype._createLiveElement = function() {\r\n var liveEl = document.createElement('div');\r\n\r\n liveEl.classList.add('md-visually-hidden');\r\n liveEl.setAttribute('role', 'status');\r\n liveEl.setAttribute('aria-atomic', 'true');\r\n liveEl.setAttribute('aria-live', 'polite');\r\n\r\n document.body.appendChild(liveEl);\r\n\r\n return liveEl;\r\n};\r\n\n})();\n(function(){\n\"use strict\";\n\n/**\n * @ngdoc service\n * @name $$mdMeta\n * @module material.core.meta\n *\n * @description\n *\n * A provider and a service that simplifies meta tags access\n *\n * Note: This is intended only for use with dynamic meta tags such as browser color and title.\n * Tags that are only processed when the page is rendered (such as `charset`, and `http-equiv`)\n * will not work since `$$mdMeta` adds the tags after the page has already been loaded.\n *\n * ```js\n * app.config(function($$mdMetaProvider) {\n * var removeMeta = $$mdMetaProvider.setMeta('meta-name', 'content');\n * var metaValue = $$mdMetaProvider.getMeta('meta-name'); // -> 'content'\n *\n * removeMeta();\n * });\n *\n * app.controller('myController', function($$mdMeta) {\n * var removeMeta = $$mdMeta.setMeta('meta-name', 'content');\n * var metaValue = $$mdMeta.getMeta('meta-name'); // -> 'content'\n *\n * removeMeta();\n * });\n * ```\n *\n * @returns {$$mdMeta.$service}\n *\n */\nangular.module('material.core.meta', [])\n .provider('$$mdMeta', function () {\n var head = angular.element(document.head);\n var metaElements = {};\n\n /**\n * Checks if the requested element was written manually and maps it\n *\n * @param {string} name meta tag 'name' attribute value\n * @returns {boolean} returns true if there is an element with the requested name\n */\n function mapExistingElement(name) {\n if (metaElements[name]) {\n return true;\n }\n\n var element = document.getElementsByName(name)[0];\n\n if (!element) {\n return false;\n }\n\n metaElements[name] = angular.element(element);\n\n return true;\n }\n\n /**\n * @ngdoc method\n * @name $$mdMeta#setMeta\n *\n * @description\n * Creates meta element with the 'name' and 'content' attributes,\n * if the meta tag is already created than we replace the 'content' value\n *\n * @param {string} name meta tag 'name' attribute value\n * @param {string} content meta tag 'content' attribute value\n * @returns {function} remove function\n *\n */\n function setMeta(name, content) {\n mapExistingElement(name);\n\n if (!metaElements[name]) {\n var newMeta = angular.element('');\n head.append(newMeta);\n metaElements[name] = newMeta;\n }\n else {\n metaElements[name].attr('content', content);\n }\n\n return function () {\n metaElements[name].attr('content', '');\n metaElements[name].remove();\n delete metaElements[name];\n };\n }\n\n /**\n * @ngdoc method\n * @name $$mdMeta#getMeta\n *\n * @description\n * Gets the 'content' attribute value of the wanted meta element\n *\n * @param {string} name meta tag 'name' attribute value\n * @returns {string} content attribute value\n */\n function getMeta(name) {\n if (!mapExistingElement(name)) {\n throw Error('$$mdMeta: could not find a meta tag with the name \\'' + name + '\\'');\n }\n\n return metaElements[name].attr('content');\n }\n\n var module = {\n setMeta: setMeta,\n getMeta: getMeta\n };\n\n return angular.extend({}, module, {\n $get: function () {\n return module;\n }\n });\n });\n})();\n(function(){\n\"use strict\";\n\n /**\n * @ngdoc module\n * @name material.core.componentRegistry\n *\n * @description\n * A component instance registration service.\n * Note: currently this as a private service in the SideNav component.\n */\n ComponentRegistry.$inject = [\"$log\", \"$q\"];\n angular.module('material.core')\n .factory('$mdComponentRegistry', ComponentRegistry);\n\n /*\n * @private\n * @ngdoc factory\n * @name ComponentRegistry\n * @module material.core.componentRegistry\n *\n */\n function ComponentRegistry($log, $q) {\n\n var self;\n var instances = [];\n var pendings = { };\n\n return self = {\n /**\n * Used to print an error when an instance for a handle isn't found.\n */\n notFoundError: function(handle, msgContext) {\n $log.error((msgContext || \"\") + 'No instance found for handle', handle);\n },\n /**\n * Return all registered instances as an array.\n */\n getInstances: function() {\n return instances;\n },\n\n /**\n * Get a registered instance.\n * @param handle the String handle to look up for a registered instance.\n */\n get: function(handle) {\n if (!isValidID(handle)) return null;\n\n var i, j, instance;\n for (i = 0, j = instances.length; i < j; i++) {\n instance = instances[i];\n if (instance.$$mdHandle === handle) {\n return instance;\n }\n }\n return null;\n },\n\n /**\n * Register an instance.\n * @param instance the instance to register\n * @param handle the handle to identify the instance under.\n */\n register: function(instance, handle) {\n if (!handle) return angular.noop;\n\n instance.$$mdHandle = handle;\n instances.push(instance);\n resolveWhen();\n\n return deregister;\n\n /**\n * Remove registration for an instance\n */\n function deregister() {\n var index = instances.indexOf(instance);\n if (index !== -1) {\n instances.splice(index, 1);\n }\n }\n\n /**\n * Resolve any pending promises for this instance\n */\n function resolveWhen() {\n var dfd = pendings[handle];\n if (dfd) {\n dfd.forEach(function (promise) {\n promise.resolve(instance);\n });\n delete pendings[handle];\n }\n }\n },\n\n /**\n * Async accessor to registered component instance\n * If not available then a promise is created to notify\n * all listeners when the instance is registered.\n */\n when : function(handle) {\n if (isValidID(handle)) {\n var deferred = $q.defer();\n var instance = self.get(handle);\n\n if (instance) {\n deferred.resolve(instance);\n } else {\n if (pendings[handle] === undefined) {\n pendings[handle] = [];\n }\n pendings[handle].push(deferred);\n }\n\n return deferred.promise;\n }\n return $q.reject(\"Invalid `md-component-id` value.\");\n }\n\n };\n\n function isValidID(handle){\n return handle && (handle !== \"\");\n }\n\n }\n\n})();\n(function(){\n\"use strict\";\n\n(function() {\n 'use strict';\n\n /**\n * @ngdoc service\n * @name $mdButtonInkRipple\n * @module material.core\n *\n * @description\n * Provides ripple effects for md-button. See $mdInkRipple service for all possible configuration options.\n *\n * @param {object=} scope Scope within the current context\n * @param {object=} element The element the ripple effect should be applied to\n * @param {object=} options (Optional) Configuration options to override the default ripple configuration\n */\n\n MdButtonInkRipple.$inject = [\"$mdInkRipple\"];\n angular.module('material.core')\n .factory('$mdButtonInkRipple', MdButtonInkRipple);\n\n function MdButtonInkRipple($mdInkRipple) {\n return {\n attach: function attachRipple(scope, element, options) {\n options = angular.extend(optionsForElement(element), options);\n\n return $mdInkRipple.attach(scope, element, options);\n }\n };\n\n function optionsForElement(element) {\n if (element.hasClass('md-icon-button')) {\n return {\n isMenuItem: element.hasClass('md-menu-item'),\n fitRipple: true,\n center: true\n };\n } else {\n return {\n isMenuItem: element.hasClass('md-menu-item'),\n dimBackground: true\n };\n }\n }\n }\n})();\n\n})();\n(function(){\n\"use strict\";\n\n(function() {\n 'use strict';\n\n /**\n * @ngdoc service\n * @name $mdCheckboxInkRipple\n * @module material.core\n *\n * @description\n * Provides ripple effects for md-checkbox. See $mdInkRipple service for all possible configuration options.\n *\n * @param {object=} scope Scope within the current context\n * @param {object=} element The element the ripple effect should be applied to\n * @param {object=} options (Optional) Configuration options to override the defaultripple configuration\n */\n\n MdCheckboxInkRipple.$inject = [\"$mdInkRipple\"];\n angular.module('material.core')\n .factory('$mdCheckboxInkRipple', MdCheckboxInkRipple);\n\n function MdCheckboxInkRipple($mdInkRipple) {\n return {\n attach: attach\n };\n\n function attach(scope, element, options) {\n return $mdInkRipple.attach(scope, element, angular.extend({\n center: true,\n dimBackground: false,\n fitRipple: true\n }, options));\n }\n }\n})();\n\n})();\n(function(){\n\"use strict\";\n\n(function() {\n 'use strict';\n\n /**\n * @ngdoc service\n * @name $mdListInkRipple\n * @module material.core\n *\n * @description\n * Provides ripple effects for md-list. See $mdInkRipple service for all possible configuration options.\n *\n * @param {object=} scope Scope within the current context\n * @param {object=} element The element the ripple effect should be applied to\n * @param {object=} options (Optional) Configuration options to override the defaultripple configuration\n */\n\n MdListInkRipple.$inject = [\"$mdInkRipple\"];\n angular.module('material.core')\n .factory('$mdListInkRipple', MdListInkRipple);\n\n function MdListInkRipple($mdInkRipple) {\n return {\n attach: attach\n };\n\n function attach(scope, element, options) {\n return $mdInkRipple.attach(scope, element, angular.extend({\n center: false,\n dimBackground: true,\n outline: false,\n rippleSize: 'full'\n }, options));\n }\n }\n})();\n\n})();\n(function(){\n\"use strict\";\n\n/**\n * @ngdoc module\n * @name material.core.ripple\n * @description\n * Ripple\n */\nInkRippleCtrl.$inject = [\"$scope\", \"$element\", \"rippleOptions\", \"$window\", \"$timeout\", \"$mdUtil\", \"$mdColorUtil\"];\nInkRippleDirective.$inject = [\"$mdButtonInkRipple\", \"$mdCheckboxInkRipple\"];\nangular.module('material.core')\n .provider('$mdInkRipple', InkRippleProvider)\n .directive('mdInkRipple', InkRippleDirective)\n .directive('mdNoInk', attrNoDirective)\n .directive('mdNoBar', attrNoDirective)\n .directive('mdNoStretch', attrNoDirective);\n\nvar DURATION = 450;\n\n/**\n * @ngdoc directive\n * @name mdInkRipple\n * @module material.core.ripple\n *\n * @description\n * The `md-ink-ripple` directive allows you to specify the ripple color or if a ripple is allowed.\n *\n * @param {string|boolean} md-ink-ripple A color string `#FF0000` or boolean (`false` or `0`) for\n * preventing ripple\n *\n * @usage\n * ### String values\n * \n * \n * Ripples in red\n * \n *\n * \n * Not rippling\n * \n * \n *\n * ### Interpolated values\n * \n * \n * Ripples with the return value of 'randomColor' function\n * \n *\n * \n * Ripples if 'canRipple' function return value is not 'false' or '0'\n * \n * \n */\nfunction InkRippleDirective ($mdButtonInkRipple, $mdCheckboxInkRipple) {\n return {\n controller: angular.noop,\n link: function (scope, element, attr) {\n attr.hasOwnProperty('mdInkRippleCheckbox')\n ? $mdCheckboxInkRipple.attach(scope, element)\n : $mdButtonInkRipple.attach(scope, element);\n }\n };\n}\n\n/**\n * @ngdoc service\n * @name $mdInkRipple\n * @module material.core.ripple\n *\n * @description\n * `$mdInkRipple` is a service for adding ripples to any element.\n *\n * @usage\n * \n * app.factory('$myElementInkRipple', function($mdInkRipple) {\n * return {\n * attach: function (scope, element, options) {\n * return $mdInkRipple.attach(scope, element, angular.extend({\n * center: false,\n * dimBackground: true\n * }, options));\n * }\n * };\n * });\n *\n * app.controller('myController', function ($scope, $element, $myElementInkRipple) {\n * $scope.onClick = function (ev) {\n * $myElementInkRipple.attach($scope, angular.element(ev.target), { center: true });\n * }\n * });\n * \n */\n\n/**\n * @ngdoc service\n * @name $mdInkRippleProvider\n * @module material.core.ripple\n *\n * @description\n * If you want to disable ink ripples globally, for all components, you can call the\n * `disableInkRipple` method in your app's config.\n *\n *\n * @usage\n * \n * app.config(function ($mdInkRippleProvider) {\n * $mdInkRippleProvider.disableInkRipple();\n * });\n * \n */\n\nfunction InkRippleProvider () {\n var isDisabledGlobally = false;\n\n return {\n disableInkRipple: disableInkRipple,\n $get: [\"$injector\", function($injector) {\n return { attach: attach };\n\n /**\n * @ngdoc method\n * @name $mdInkRipple#attach\n *\n * @description\n * Attaching given scope, element and options to inkRipple controller\n *\n * @param {object=} scope Scope within the current context\n * @param {object=} element The element the ripple effect should be applied to\n * @param {object=} options (Optional) Configuration options to override the defaultRipple configuration\n * * `center` - Whether the ripple should start from the center of the container element\n * * `dimBackground` - Whether the background should be dimmed with the ripple color\n * * `colorElement` - The element the ripple should take its color from, defined by css property `color`\n * * `fitRipple` - Whether the ripple should fill the element\n */\n function attach (scope, element, options) {\n if (isDisabledGlobally || element.controller('mdNoInk')) return angular.noop;\n return $injector.instantiate(InkRippleCtrl, {\n $scope: scope,\n $element: element,\n rippleOptions: options\n });\n }\n }]\n };\n\n /**\n * @ngdoc method\n * @name $mdInkRippleProvider#disableInkRipple\n *\n * @description\n * A config-time method that, when called, disables ripples globally.\n */\n function disableInkRipple () {\n isDisabledGlobally = true;\n }\n}\n\n/**\n * Controller used by the ripple service in order to apply ripples\n * @ngInject\n */\nfunction InkRippleCtrl ($scope, $element, rippleOptions, $window, $timeout, $mdUtil, $mdColorUtil) {\n this.$window = $window;\n this.$timeout = $timeout;\n this.$mdUtil = $mdUtil;\n this.$mdColorUtil = $mdColorUtil;\n this.$scope = $scope;\n this.$element = $element;\n this.options = rippleOptions;\n this.mousedown = false;\n this.ripples = [];\n this.timeout = null; // Stores a reference to the most-recent ripple timeout\n this.lastRipple = null;\n\n $mdUtil.valueOnUse(this, 'container', this.createContainer);\n\n this.$element.addClass('md-ink-ripple');\n\n // attach method for unit tests\n ($element.controller('mdInkRipple') || {}).createRipple = angular.bind(this, this.createRipple);\n ($element.controller('mdInkRipple') || {}).setColor = angular.bind(this, this.color);\n\n this.bindEvents();\n}\n\n\n/**\n * Either remove or unlock any remaining ripples when the user mouses off of the element (either by\n * mouseup or mouseleave event)\n */\nfunction autoCleanup (self, cleanupFn) {\n if (self.mousedown || self.lastRipple) {\n self.mousedown = false;\n self.$mdUtil.nextTick(angular.bind(self, cleanupFn), false);\n }\n}\n\n\n/**\n * Returns the color that the ripple should be (either based on CSS or hard-coded)\n * @returns {string}\n */\nInkRippleCtrl.prototype.color = function (value) {\n var self = this;\n\n // If assigning a color value, apply it to background and the ripple color\n if (angular.isDefined(value)) {\n self._color = self._parseColor(value);\n }\n\n // If color lookup, use assigned, defined, or inherited\n return self._color || self._parseColor(self.inkRipple()) || self._parseColor(getElementColor());\n\n /**\n * Finds the color element and returns its text color for use as default ripple color\n * @returns {string}\n */\n function getElementColor () {\n var items = self.options && self.options.colorElement ? self.options.colorElement : [];\n var elem = items.length ? items[ 0 ] : self.$element[ 0 ];\n\n return elem ? self.$window.getComputedStyle(elem).color : 'rgb(0,0,0)';\n }\n};\n\n/**\n * Updating the ripple colors based on the current inkRipple value\n * or the element's computed style color\n */\nInkRippleCtrl.prototype.calculateColor = function () {\n return this.color();\n};\n\n\n/**\n * Takes a string color and converts it to RGBA format\n * @param {string} color\n * @param {number} multiplier\n * @returns {string}\n */\nInkRippleCtrl.prototype._parseColor = function parseColor (color, multiplier) {\n multiplier = multiplier || 1;\n var colorUtil = this.$mdColorUtil;\n\n if (!color) return;\n if (color.indexOf('rgba') === 0) return color.replace(/\\d?\\.?\\d*\\s*\\)\\s*$/, (0.1 * multiplier).toString() + ')');\n if (color.indexOf('rgb') === 0) return colorUtil.rgbToRgba(color);\n if (color.indexOf('#') === 0) return colorUtil.hexToRgba(color);\n\n};\n\n/**\n * Binds events to the root element for\n */\nInkRippleCtrl.prototype.bindEvents = function () {\n this.$element.on('mousedown', angular.bind(this, this.handleMousedown));\n this.$element.on('mouseup touchend', angular.bind(this, this.handleMouseup));\n this.$element.on('mouseleave', angular.bind(this, this.handleMouseup));\n this.$element.on('touchmove', angular.bind(this, this.handleTouchmove));\n};\n\n/**\n * Create a new ripple on every mousedown event from the root element\n * @param event {MouseEvent}\n */\nInkRippleCtrl.prototype.handleMousedown = function (event) {\n if (this.mousedown) return;\n\n // When jQuery is loaded, we have to get the original event\n if (event.hasOwnProperty('originalEvent')) event = event.originalEvent;\n this.mousedown = true;\n if (this.options.center) {\n this.createRipple(this.container.prop('clientWidth') / 2, this.container.prop('clientWidth') / 2);\n } else {\n\n // We need to calculate the relative coordinates if the target is a sublayer of the ripple element\n if (event.srcElement !== this.$element[0]) {\n var layerRect = this.$element[0].getBoundingClientRect();\n var layerX = event.clientX - layerRect.left;\n var layerY = event.clientY - layerRect.top;\n\n this.createRipple(layerX, layerY);\n } else {\n this.createRipple(event.offsetX, event.offsetY);\n }\n }\n};\n\n/**\n * Either remove or unlock any remaining ripples when the user mouses off of the element (either by\n * mouseup, touchend or mouseleave event)\n */\nInkRippleCtrl.prototype.handleMouseup = function () {\n this.$timeout(function () {\n autoCleanup(this, this.clearRipples);\n }.bind(this));\n};\n\n/**\n * Either remove or unlock any remaining ripples when the user mouses off of the element (by\n * touchmove)\n */\nInkRippleCtrl.prototype.handleTouchmove = function () {\n autoCleanup(this, this.deleteRipples);\n};\n\n/**\n * Cycles through all ripples and attempts to remove them.\n */\nInkRippleCtrl.prototype.deleteRipples = function () {\n for (var i = 0; i < this.ripples.length; i++) {\n this.ripples[ i ].remove();\n }\n};\n\n/**\n * Cycles through all ripples and attempts to remove them with fade.\n * Depending on logic within `fadeInComplete`, some removals will be postponed.\n */\nInkRippleCtrl.prototype.clearRipples = function () {\n for (var i = 0; i < this.ripples.length; i++) {\n this.fadeInComplete(this.ripples[ i ]);\n }\n};\n\n/**\n * Creates the ripple container element\n * @returns {*}\n */\nInkRippleCtrl.prototype.createContainer = function () {\n var container = angular.element('');\n this.$element.append(container);\n return container;\n};\n\nInkRippleCtrl.prototype.clearTimeout = function () {\n if (this.timeout) {\n this.$timeout.cancel(this.timeout);\n this.timeout = null;\n }\n};\n\nInkRippleCtrl.prototype.isRippleAllowed = function () {\n var element = this.$element[0];\n do {\n if (!element.tagName || element.tagName === 'BODY') break;\n\n if (element && angular.isFunction(element.hasAttribute)) {\n if (element.hasAttribute('disabled')) return false;\n if (this.inkRipple() === 'false' || this.inkRipple() === '0') return false;\n }\n\n } while (element = element.parentNode);\n return true;\n};\n\n/**\n * The attribute `md-ink-ripple` may be a static or interpolated\n * color value OR a boolean indicator (used to disable ripples)\n */\nInkRippleCtrl.prototype.inkRipple = function () {\n return this.$element.attr('md-ink-ripple');\n};\n\n/**\n * Creates a new ripple and adds it to the container. Also tracks ripple in `this.ripples`.\n * @param left\n * @param top\n */\nInkRippleCtrl.prototype.createRipple = function (left, top) {\n if (!this.isRippleAllowed()) return;\n\n var ctrl = this;\n var colorUtil = ctrl.$mdColorUtil;\n var ripple = angular.element('');\n var width = this.$element.prop('clientWidth');\n var height = this.$element.prop('clientHeight');\n var x = Math.max(Math.abs(width - left), left) * 2;\n var y = Math.max(Math.abs(height - top), top) * 2;\n var size = getSize(this.options.fitRipple, x, y);\n var color = this.calculateColor();\n\n ripple.css({\n left: left + 'px',\n top: top + 'px',\n background: 'black',\n width: size + 'px',\n height: size + 'px',\n backgroundColor: colorUtil.rgbaToRgb(color),\n borderColor: colorUtil.rgbaToRgb(color)\n });\n this.lastRipple = ripple;\n\n // we only want one timeout to be running at a time\n this.clearTimeout();\n this.timeout = this.$timeout(function () {\n ctrl.clearTimeout();\n if (!ctrl.mousedown) ctrl.fadeInComplete(ripple);\n }, DURATION * 0.35, false);\n\n if (this.options.dimBackground) this.container.css({ backgroundColor: color });\n this.container.append(ripple);\n this.ripples.push(ripple);\n ripple.addClass('md-ripple-placed');\n\n this.$mdUtil.nextTick(function () {\n\n ripple.addClass('md-ripple-scaled md-ripple-active');\n ctrl.$timeout(function () {\n ctrl.clearRipples();\n }, DURATION, false);\n\n }, false);\n\n function getSize (fit, x, y) {\n return fit\n ? Math.max(x, y)\n : Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));\n }\n};\n\n\n\n/**\n * After fadeIn finishes, either kicks off the fade-out animation or queues the element for removal on mouseup\n * @param ripple\n */\nInkRippleCtrl.prototype.fadeInComplete = function (ripple) {\n if (this.lastRipple === ripple) {\n if (!this.timeout && !this.mousedown) {\n this.removeRipple(ripple);\n }\n } else {\n this.removeRipple(ripple);\n }\n};\n\n/**\n * Kicks off the animation for removing a ripple\n * @param ripple {Element}\n */\nInkRippleCtrl.prototype.removeRipple = function (ripple) {\n var ctrl = this;\n var index = this.ripples.indexOf(ripple);\n if (index < 0) return;\n this.ripples.splice(this.ripples.indexOf(ripple), 1);\n ripple.removeClass('md-ripple-active');\n ripple.addClass('md-ripple-remove');\n if (this.ripples.length === 0) this.container.css({ backgroundColor: '' });\n // use a 2-second timeout in order to allow for the animation to finish\n // we don't actually care how long the animation takes\n this.$timeout(function () {\n ctrl.fadeOutComplete(ripple);\n }, DURATION, false);\n};\n\n/**\n * Removes the provided ripple from the DOM\n * @param ripple\n */\nInkRippleCtrl.prototype.fadeOutComplete = function (ripple) {\n ripple.remove();\n this.lastRipple = null;\n};\n\n/**\n * Used to create an empty directive. This is used to track flag-directives whose children may have\n * functionality based on them.\n *\n * Example: `md-no-ink` will potentially be used by all child directives.\n */\nfunction attrNoDirective () {\n return { controller: angular.noop };\n}\n\n})();\n(function(){\n\"use strict\";\n\n(function() {\n 'use strict';\n\n /**\n * @ngdoc service\n * @name $mdTabInkRipple\n * @module material.core\n *\n * @description\n * Provides ripple effects for md-tabs. See $mdInkRipple service for all possible configuration options.\n *\n * @param {object=} scope Scope within the current context\n * @param {object=} element The element the ripple effect should be applied to\n * @param {object=} options (Optional) Configuration options to override the defaultripple configuration\n */\n\n MdTabInkRipple.$inject = [\"$mdInkRipple\"];\n angular.module('material.core')\n .factory('$mdTabInkRipple', MdTabInkRipple);\n\n function MdTabInkRipple($mdInkRipple) {\n return {\n attach: attach\n };\n\n function attach(scope, element, options) {\n return $mdInkRipple.attach(scope, element, angular.extend({\n center: false,\n dimBackground: true,\n outline: false,\n rippleSize: 'full'\n }, options));\n }\n }\n})();\n\n})();\n(function(){\n\"use strict\";\n\nangular.module('material.core.theming.palette', [])\n.constant('$mdColorPalette', {\n 'red': {\n '50': '#ffebee',\n '100': '#ffcdd2',\n '200': '#ef9a9a',\n '300': '#e57373',\n '400': '#ef5350',\n '500': '#f44336',\n '600': '#e53935',\n '700': '#d32f2f',\n '800': '#c62828',\n '900': '#b71c1c',\n 'A100': '#ff8a80',\n 'A200': '#ff5252',\n 'A400': '#ff1744',\n 'A700': '#d50000',\n 'contrastDefaultColor': 'light',\n 'contrastDarkColors': '50 100 200 300 A100',\n 'contrastStrongLightColors': '400 500 600 700 A200 A400 A700'\n },\n 'pink': {\n '50': '#fce4ec',\n '100': '#f8bbd0',\n '200': '#f48fb1',\n '300': '#f06292',\n '400': '#ec407a',\n '500': '#e91e63',\n '600': '#d81b60',\n '700': '#c2185b',\n '800': '#ad1457',\n '900': '#880e4f',\n 'A100': '#ff80ab',\n 'A200': '#ff4081',\n 'A400': '#f50057',\n 'A700': '#c51162',\n 'contrastDefaultColor': 'light',\n 'contrastDarkColors': '50 100 200 A100',\n 'contrastStrongLightColors': '500 600 A200 A400 A700'\n },\n 'purple': {\n '50': '#f3e5f5',\n '100': '#e1bee7',\n '200': '#ce93d8',\n '300': '#ba68c8',\n '400': '#ab47bc',\n '500': '#9c27b0',\n '600': '#8e24aa',\n '700': '#7b1fa2',\n '800': '#6a1b9a',\n '900': '#4a148c',\n 'A100': '#ea80fc',\n 'A200': '#e040fb',\n 'A400': '#d500f9',\n 'A700': '#aa00ff',\n 'contrastDefaultColor': 'light',\n 'contrastDarkColors': '50 100 200 A100',\n 'contrastStrongLightColors': '300 400 A200 A400 A700'\n },\n 'deep-purple': {\n '50': '#ede7f6',\n '100': '#d1c4e9',\n '200': '#b39ddb',\n '300': '#9575cd',\n '400': '#7e57c2',\n '500': '#673ab7',\n '600': '#5e35b1',\n '700': '#512da8',\n '800': '#4527a0',\n '900': '#311b92',\n 'A100': '#b388ff',\n 'A200': '#7c4dff',\n 'A400': '#651fff',\n 'A700': '#6200ea',\n 'contrastDefaultColor': 'light',\n 'contrastDarkColors': '50 100 200 A100',\n 'contrastStrongLightColors': '300 400 A200'\n },\n 'indigo': {\n '50': '#e8eaf6',\n '100': '#c5cae9',\n '200': '#9fa8da',\n '300': '#7986cb',\n '400': '#5c6bc0',\n '500': '#3f51b5',\n '600': '#3949ab',\n '700': '#303f9f',\n '800': '#283593',\n '900': '#1a237e',\n 'A100': '#8c9eff',\n 'A200': '#536dfe',\n 'A400': '#3d5afe',\n 'A700': '#304ffe',\n 'contrastDefaultColor': 'light',\n 'contrastDarkColors': '50 100 200 A100',\n 'contrastStrongLightColors': '300 400 A200 A400'\n },\n 'blue': {\n '50': '#e3f2fd',\n '100': '#bbdefb',\n '200': '#90caf9',\n '300': '#64b5f6',\n '400': '#42a5f5',\n '500': '#2196f3',\n '600': '#1e88e5',\n '700': '#1976d2',\n '800': '#1565c0',\n '900': '#0d47a1',\n 'A100': '#82b1ff',\n 'A200': '#448aff',\n 'A400': '#2979ff',\n 'A700': '#2962ff',\n 'contrastDefaultColor': 'light',\n 'contrastDarkColors': '50 100 200 300 400 A100',\n 'contrastStrongLightColors': '500 600 700 A200 A400 A700'\n },\n 'light-blue': {\n '50': '#e1f5fe',\n '100': '#b3e5fc',\n '200': '#81d4fa',\n '300': '#4fc3f7',\n '400': '#29b6f6',\n '500': '#03a9f4',\n '600': '#039be5',\n '700': '#0288d1',\n '800': '#0277bd',\n '900': '#01579b',\n 'A100': '#80d8ff',\n 'A200': '#40c4ff',\n 'A400': '#00b0ff',\n 'A700': '#0091ea',\n 'contrastDefaultColor': 'dark',\n 'contrastLightColors': '600 700 800 900 A700',\n 'contrastStrongLightColors': '600 700 800 A700'\n },\n 'cyan': {\n '50': '#e0f7fa',\n '100': '#b2ebf2',\n '200': '#80deea',\n '300': '#4dd0e1',\n '400': '#26c6da',\n '500': '#00bcd4',\n '600': '#00acc1',\n '700': '#0097a7',\n '800': '#00838f',\n '900': '#006064',\n 'A100': '#84ffff',\n 'A200': '#18ffff',\n 'A400': '#00e5ff',\n 'A700': '#00b8d4',\n 'contrastDefaultColor': 'dark',\n 'contrastLightColors': '700 800 900',\n 'contrastStrongLightColors': '700 800 900'\n },\n 'teal': {\n '50': '#e0f2f1',\n '100': '#b2dfdb',\n '200': '#80cbc4',\n '300': '#4db6ac',\n '400': '#26a69a',\n '500': '#009688',\n '600': '#00897b',\n '700': '#00796b',\n '800': '#00695c',\n '900': '#004d40',\n 'A100': '#a7ffeb',\n 'A200': '#64ffda',\n 'A400': '#1de9b6',\n 'A700': '#00bfa5',\n 'contrastDefaultColor': 'dark',\n 'contrastLightColors': '500 600 700 800 900',\n 'contrastStrongLightColors': '500 600 700'\n },\n 'green': {\n '50': '#e8f5e9',\n '100': '#c8e6c9',\n '200': '#a5d6a7',\n '300': '#81c784',\n '400': '#66bb6a',\n '500': '#4caf50',\n '600': '#43a047',\n '700': '#388e3c',\n '800': '#2e7d32',\n '900': '#1b5e20',\n 'A100': '#b9f6ca',\n 'A200': '#69f0ae',\n 'A400': '#00e676',\n 'A700': '#00c853',\n 'contrastDefaultColor': 'dark',\n 'contrastLightColors': '500 600 700 800 900',\n 'contrastStrongLightColors': '500 600 700'\n },\n 'light-green': {\n '50': '#f1f8e9',\n '100': '#dcedc8',\n '200': '#c5e1a5',\n '300': '#aed581',\n '400': '#9ccc65',\n '500': '#8bc34a',\n '600': '#7cb342',\n '700': '#689f38',\n '800': '#558b2f',\n '900': '#33691e',\n 'A100': '#ccff90',\n 'A200': '#b2ff59',\n 'A400': '#76ff03',\n 'A700': '#64dd17',\n 'contrastDefaultColor': 'dark',\n 'contrastLightColors': '700 800 900',\n 'contrastStrongLightColors': '700 800 900'\n },\n 'lime': {\n '50': '#f9fbe7',\n '100': '#f0f4c3',\n '200': '#e6ee9c',\n '300': '#dce775',\n '400': '#d4e157',\n '500': '#cddc39',\n '600': '#c0ca33',\n '700': '#afb42b',\n '800': '#9e9d24',\n '900': '#827717',\n 'A100': '#f4ff81',\n 'A200': '#eeff41',\n 'A400': '#c6ff00',\n 'A700': '#aeea00',\n 'contrastDefaultColor': 'dark',\n 'contrastLightColors': '900',\n 'contrastStrongLightColors': '900'\n },\n 'yellow': {\n '50': '#fffde7',\n '100': '#fff9c4',\n '200': '#fff59d',\n '300': '#fff176',\n '400': '#ffee58',\n '500': '#ffeb3b',\n '600': '#fdd835',\n '700': '#fbc02d',\n '800': '#f9a825',\n '900': '#f57f17',\n 'A100': '#ffff8d',\n 'A200': '#ffff00',\n 'A400': '#ffea00',\n 'A700': '#ffd600',\n 'contrastDefaultColor': 'dark'\n },\n 'amber': {\n '50': '#fff8e1',\n '100': '#ffecb3',\n '200': '#ffe082',\n '300': '#ffd54f',\n '400': '#ffca28',\n '500': '#ffc107',\n '600': '#ffb300',\n '700': '#ffa000',\n '800': '#ff8f00',\n '900': '#ff6f00',\n 'A100': '#ffe57f',\n 'A200': '#ffd740',\n 'A400': '#ffc400',\n 'A700': '#ffab00',\n 'contrastDefaultColor': 'dark'\n },\n 'orange': {\n '50': '#fff3e0',\n '100': '#ffe0b2',\n '200': '#ffcc80',\n '300': '#ffb74d',\n '400': '#ffa726',\n '500': '#ff9800',\n '600': '#fb8c00',\n '700': '#f57c00',\n '800': '#ef6c00',\n '900': '#e65100',\n 'A100': '#ffd180',\n 'A200': '#ffab40',\n 'A400': '#ff9100',\n 'A700': '#ff6d00',\n 'contrastDefaultColor': 'dark',\n 'contrastLightColors': '800 900',\n 'contrastStrongLightColors': '800 900'\n },\n 'deep-orange': {\n '50': '#fbe9e7',\n '100': '#ffccbc',\n '200': '#ffab91',\n '300': '#ff8a65',\n '400': '#ff7043',\n '500': '#ff5722',\n '600': '#f4511e',\n '700': '#e64a19',\n '800': '#d84315',\n '900': '#bf360c',\n 'A100': '#ff9e80',\n 'A200': '#ff6e40',\n 'A400': '#ff3d00',\n 'A700': '#dd2c00',\n 'contrastDefaultColor': 'light',\n 'contrastDarkColors': '50 100 200 300 400 A100 A200',\n 'contrastStrongLightColors': '500 600 700 800 900 A400 A700'\n },\n 'brown': {\n '50': '#efebe9',\n '100': '#d7ccc8',\n '200': '#bcaaa4',\n '300': '#a1887f',\n '400': '#8d6e63',\n '500': '#795548',\n '600': '#6d4c41',\n '700': '#5d4037',\n '800': '#4e342e',\n '900': '#3e2723',\n 'A100': '#d7ccc8',\n 'A200': '#bcaaa4',\n 'A400': '#8d6e63',\n 'A700': '#5d4037',\n 'contrastDefaultColor': 'light',\n 'contrastDarkColors': '50 100 200 A100 A200',\n 'contrastStrongLightColors': '300 400'\n },\n 'grey': {\n '50': '#fafafa',\n '100': '#f5f5f5',\n '200': '#eeeeee',\n '300': '#e0e0e0',\n '400': '#bdbdbd',\n '500': '#9e9e9e',\n '600': '#757575',\n '700': '#616161',\n '800': '#424242',\n '900': '#212121',\n 'A100': '#ffffff',\n 'A200': '#000000',\n 'A400': '#303030',\n 'A700': '#616161',\n 'contrastDefaultColor': 'dark',\n 'contrastLightColors': '600 700 800 900 A200 A400 A700'\n },\n 'blue-grey': {\n '50': '#eceff1',\n '100': '#cfd8dc',\n '200': '#b0bec5',\n '300': '#90a4ae',\n '400': '#78909c',\n '500': '#607d8b',\n '600': '#546e7a',\n '700': '#455a64',\n '800': '#37474f',\n '900': '#263238',\n 'A100': '#cfd8dc',\n 'A200': '#b0bec5',\n 'A400': '#78909c',\n 'A700': '#455a64',\n 'contrastDefaultColor': 'light',\n 'contrastDarkColors': '50 100 200 300 A100 A200',\n 'contrastStrongLightColors': '400 500 700'\n }\n});\n\n})();\n(function(){\n\"use strict\";\n\n(function(angular) {\n 'use strict';\n/**\n * @ngdoc module\n * @name material.core.theming\n * @description\n * Theming\n */\ndetectDisabledThemes.$inject = [\"$mdThemingProvider\"];\nThemingDirective.$inject = [\"$mdTheming\", \"$interpolate\", \"$parse\", \"$mdUtil\", \"$q\", \"$log\"];\nThemableDirective.$inject = [\"$mdTheming\"];\nThemingProvider.$inject = [\"$mdColorPalette\", \"$$mdMetaProvider\"];\ngenerateAllThemes.$inject = [\"$injector\", \"$mdTheming\"];\nangular.module('material.core.theming', ['material.core.theming.palette', 'material.core.meta'])\n .directive('mdTheme', ThemingDirective)\n .directive('mdThemable', ThemableDirective)\n .directive('mdThemesDisabled', disableThemesDirective)\n .provider('$mdTheming', ThemingProvider)\n .config(detectDisabledThemes)\n .run(generateAllThemes);\n\n/**\n * Detect if the HTML or the BODY tags has a [md-themes-disabled] attribute\n * If yes, then immediately disable all theme stylesheet generation and DOM injection\n */\n/**\n * @ngInject\n */\nfunction detectDisabledThemes($mdThemingProvider) {\n var isDisabled = !!document.querySelector('[md-themes-disabled]');\n $mdThemingProvider.disableTheming(isDisabled);\n}\n\n/**\n * @ngdoc service\n * @name $mdThemingProvider\n * @module material.core.theming\n *\n * @description Provider to configure the `$mdTheming` service.\n *\n * ### Default Theme\n * The `$mdThemingProvider` uses by default the following theme configuration:\n *\n * - Primary Palette: `Blue`\n * - Accent Palette: `Pink`\n * - Warn Palette: `Deep-Orange`\n * - Background Palette: `Grey`\n *\n * If you don't want to use the `md-theme` directive on the elements itself, you may want to overwrite\n * the default theme.
\n * This can be done by using the following markup.\n *\n *\n * myAppModule.config(function($mdThemingProvider) {\n * $mdThemingProvider\n * .theme('default')\n * .primaryPalette('blue')\n * .accentPalette('teal')\n * .warnPalette('red')\n * .backgroundPalette('grey');\n * });\n * \n *\n\n * ### Dynamic Themes\n *\n * By default, if you change a theme at runtime, the `$mdTheming` service will not detect those changes.
\n * If you have an application, which changes its theme on runtime, you have to enable theme watching.\n *\n *\n * myAppModule.config(function($mdThemingProvider) {\n * // Enable theme watching.\n * $mdThemingProvider.alwaysWatchTheme(true);\n * });\n * \n *\n * ### Custom Theme Styles\n *\n * Sometimes you may want to use your own theme styles for some custom components.
\n * You are able to register your own styles by using the following markup.\n *\n *\n * myAppModule.config(function($mdThemingProvider) {\n * // Register our custom stylesheet into the theming provider.\n * $mdThemingProvider.registerStyles(STYLESHEET);\n * });\n * \n *\n * The `registerStyles` method only accepts strings as value, so you're actually not able to load an external\n * stylesheet file into the `$mdThemingProvider`.\n *\n * If it's necessary to load an external stylesheet, we suggest using a bundler, which supports including raw content,\n * like [raw-loader](https://github.com/webpack/raw-loader) for `webpack`.\n *\n * \n * myAppModule.config(function($mdThemingProvider) {\n * // Register your custom stylesheet into the theming provider.\n * $mdThemingProvider.registerStyles(require('../styles/my-component.theme.css'));\n * });\n * \n *\n * ### Browser color\n *\n * Enables browser header coloring\n * for more info please visit:\n * https://developers.google.com/web/fundamentals/design-and-ui/browser-customization/theme-color\n *\n * Options parameter:
\n * `theme` - A defined theme via `$mdThemeProvider` to use the palettes from. Default is `default` theme.
\n * `palette` - Can be any one of the basic material design palettes, extended defined palettes and 'primary',\n * 'accent', 'background' and 'warn'. Default is `primary`.
\n * `hue` - The hue from the selected palette. Default is `800`
\n *\n *\n * myAppModule.config(function($mdThemingProvider) {\n * // Enable browser color\n * $mdThemingProvider.enableBrowserColor({\n * theme: 'myTheme', // Default is 'default'\n * palette: 'accent', // Default is 'primary', any basic material palette and extended palettes are available\n * hue: '200' // Default is '800'\n * });\n * });\n * \n */\n\n/**\n * Some Example Valid Theming Expressions\n * =======================================\n *\n * Intention group expansion: (valid for primary, accent, warn, background)\n *\n * {{primary-100}} - grab shade 100 from the primary palette\n * {{primary-100-0.7}} - grab shade 100, apply opacity of 0.7\n * {{primary-100-contrast}} - grab shade 100's contrast color\n * {{primary-hue-1}} - grab the shade assigned to hue-1 from the primary palette\n * {{primary-hue-1-0.7}} - apply 0.7 opacity to primary-hue-1\n * {{primary-color}} - Generates .md-hue-1, .md-hue-2, .md-hue-3 with configured shades set for each hue\n * {{primary-color-0.7}} - Apply 0.7 opacity to each of the above rules\n * {{primary-contrast}} - Generates .md-hue-1, .md-hue-2, .md-hue-3 with configured contrast (ie. text) color shades set for each hue\n * {{primary-contrast-0.7}} - Apply 0.7 opacity to each of the above rules\n *\n * Foreground expansion: Applies rgba to black/white foreground text\n *\n * {{foreground-1}} - used for primary text\n * {{foreground-2}} - used for secondary text/divider\n * {{foreground-3}} - used for disabled text\n * {{foreground-4}} - used for dividers\n */\n\n// In memory generated CSS rules; registered by theme.name\nvar GENERATED = { };\n\n// In memory storage of defined themes and color palettes (both loaded by CSS, and user specified)\nvar PALETTES;\n\n// Text Colors on light and dark backgrounds\n// @see https://material.io/archive/guidelines/style/color.html#color-usability\nvar DARK_FOREGROUND = {\n name: 'dark',\n '1': 'rgba(0,0,0,0.87)',\n '2': 'rgba(0,0,0,0.54)',\n '3': 'rgba(0,0,0,0.38)',\n '4': 'rgba(0,0,0,0.12)'\n};\nvar LIGHT_FOREGROUND = {\n name: 'light',\n '1': 'rgba(255,255,255,1.0)',\n '2': 'rgba(255,255,255,0.7)',\n '3': 'rgba(255,255,255,0.5)',\n '4': 'rgba(255,255,255,0.12)'\n};\n\nvar DARK_SHADOW = '1px 1px 0px rgba(0,0,0,0.4), -1px -1px 0px rgba(0,0,0,0.4)';\nvar LIGHT_SHADOW = '';\n\nvar DARK_CONTRAST_COLOR = colorToRgbaArray('rgba(0,0,0,0.87)');\nvar LIGHT_CONTRAST_COLOR = colorToRgbaArray('rgba(255,255,255,0.87)');\nvar STRONG_LIGHT_CONTRAST_COLOR = colorToRgbaArray('rgb(255,255,255)');\n\nvar THEME_COLOR_TYPES = ['primary', 'accent', 'warn', 'background'];\nvar DEFAULT_COLOR_TYPE = 'primary';\n\n// A color in a theme will use these hues by default, if not specified by user.\nvar LIGHT_DEFAULT_HUES = {\n 'accent': {\n 'default': 'A200',\n 'hue-1': 'A100',\n 'hue-2': 'A400',\n 'hue-3': 'A700'\n },\n 'background': {\n 'default': '50',\n 'hue-1': 'A100',\n 'hue-2': '100',\n 'hue-3': '300'\n }\n};\n\nvar DARK_DEFAULT_HUES = {\n 'background': {\n 'default': 'A400',\n 'hue-1': '800',\n 'hue-2': '900',\n 'hue-3': 'A200'\n }\n};\nTHEME_COLOR_TYPES.forEach(function(colorType) {\n // Color types with unspecified default hues will use these default hue values\n var defaultDefaultHues = {\n 'default': '500',\n 'hue-1': '300',\n 'hue-2': '800',\n 'hue-3': 'A100'\n };\n if (!LIGHT_DEFAULT_HUES[colorType]) LIGHT_DEFAULT_HUES[colorType] = defaultDefaultHues;\n if (!DARK_DEFAULT_HUES[colorType]) DARK_DEFAULT_HUES[colorType] = defaultDefaultHues;\n});\n\nvar VALID_HUE_VALUES = [\n '50', '100', '200', '300', '400', '500', '600',\n '700', '800', '900', 'A100', 'A200', 'A400', 'A700'\n];\n\nvar themeConfig = {\n disableTheming : false, // Generate our themes at run time; also disable stylesheet DOM injection\n generateOnDemand : false, // Whether or not themes are to be generated on-demand (vs. eagerly).\n registeredStyles : [], // Custom styles registered to be used in the theming of custom components.\n nonce : null // Nonce to be added as an attribute to the generated themes style tags.\n};\n\n/**\n *\n */\nfunction ThemingProvider($mdColorPalette, $$mdMetaProvider) {\n ThemingService.$inject = [\"$rootScope\", \"$mdUtil\", \"$q\", \"$log\"];\n PALETTES = { };\n var THEMES = { };\n\n var themingProvider;\n\n var alwaysWatchTheme = false;\n var defaultTheme = 'default';\n\n // Load JS Defined Palettes\n angular.extend(PALETTES, $mdColorPalette);\n\n // Default theme defined in core.js\n\n /**\n * Adds `theme-color` and `msapplication-navbutton-color` meta tags with the color parameter\n * @param {string} color Hex value of the wanted browser color\n * @returns {function} Remove function of the meta tags\n */\n var setBrowserColor = function (color) {\n // Chrome, Firefox OS and Opera\n var removeChrome = $$mdMetaProvider.setMeta('theme-color', color);\n // Windows Phone\n var removeWindows = $$mdMetaProvider.setMeta('msapplication-navbutton-color', color);\n\n return function () {\n removeChrome();\n removeWindows();\n };\n };\n\n /**\n * @ngdoc method\n * @name $mdThemingProvider#enableBrowserColor\n * @description\n * Enables browser header coloring. For more info please visit\n * \n * Web Fundamentals.\n * @param {object=} options Options for the browser color, which include:
\n * - `theme` - `{string}`: A defined theme via `$mdThemeProvider` to use the palettes from. Default is `default` theme.
\n * - `palette` - `{string}`: Can be any one of the basic material design palettes, extended defined palettes, or `primary`,\n * `accent`, `background`, and `warn`. Default is `primary`.
\n * - `hue` - `{string}`: The hue from the selected palette. Default is `800`.
\n * @returns {function} Function that removes the browser coloring when called.\n */\n var enableBrowserColor = function (options) {\n options = angular.isObject(options) ? options : {};\n\n var theme = options.theme || 'default';\n var hue = options.hue || '800';\n\n var palette = PALETTES[options.palette] ||\n PALETTES[THEMES[theme].colors[options.palette || 'primary'].name];\n\n var color = angular.isObject(palette[hue]) ? palette[hue].hex : palette[hue];\n if (color.substr(0, 1) !== '#') color = '#' + color;\n\n return setBrowserColor(color);\n };\n\n return themingProvider = {\n definePalette: definePalette,\n extendPalette: extendPalette,\n theme: registerTheme,\n\n /**\n * return a read-only clone of the current theme configuration\n */\n configuration : function() {\n return angular.extend({ }, themeConfig, {\n defaultTheme : defaultTheme,\n alwaysWatchTheme : alwaysWatchTheme,\n registeredStyles : [].concat(themeConfig.registeredStyles)\n });\n },\n\n /**\n * @ngdoc method\n * @name $mdThemingProvider#disableTheming\n * @description\n * An easier way to disable theming without having to use `.constant(\"$MD_THEME_CSS\",\"\");`.\n * This disables all dynamic theme style sheet generations and injections.\n * @param {boolean=} isDisabled Disable all dynamic theme style sheet generations and injections\n * if `true` or `undefined`.\n */\n disableTheming: function(isDisabled) {\n themeConfig.disableTheming = angular.isUndefined(isDisabled) || !!isDisabled;\n },\n\n /**\n * @ngdoc method\n * @name $mdThemingProvider#registerStyles\n * @param {string} styles The styles to be appended to AngularJS Material's built in theme CSS.\n */\n registerStyles: function(styles) {\n themeConfig.registeredStyles.push(styles);\n },\n\n /**\n * @ngdoc method\n * @name $mdThemingProvider#setNonce\n * @param {string} nonceValue The nonce to be added as an attribute to the theme style tags.\n * Setting a value allows the use of CSP policy without using the `'unsafe-inline'` directive.\n * The string must already be base64 encoded. You can use `btoa(string)` to do this encoding.\n * In your CSP's `style-src`, you would then add an entry for `'nonce-nonceValue'`.\n */\n setNonce: function(nonceValue) {\n themeConfig.nonce = nonceValue;\n },\n\n generateThemesOnDemand: function(onDemand) {\n themeConfig.generateOnDemand = onDemand;\n },\n\n /**\n * @ngdoc method\n * @name $mdThemingProvider#setDefaultTheme\n * @param {string} theme Default theme name to be applied to elements. Default value is `default`.\n */\n setDefaultTheme: function(theme) {\n defaultTheme = theme;\n },\n\n /**\n * @ngdoc method\n * @name $mdThemingProvider#alwaysWatchTheme\n * @param {boolean} alwaysWatch Whether or not to always watch themes for changes and re-apply\n * classes when they change. Default is `false`. Enabling can reduce performance.\n */\n alwaysWatchTheme: function(alwaysWatch) {\n alwaysWatchTheme = alwaysWatch;\n },\n\n enableBrowserColor: enableBrowserColor,\n\n $get: ThemingService,\n _LIGHT_DEFAULT_HUES: LIGHT_DEFAULT_HUES,\n _DARK_DEFAULT_HUES: DARK_DEFAULT_HUES,\n _PALETTES: PALETTES,\n _THEMES: THEMES,\n _parseRules: parseRules,\n _rgba: rgba\n };\n\n /**\n * @ngdoc method\n * @name $mdThemingProvider#definePalette\n * @description\n * In the event that you need to define a custom color palette, you can use this function to\n * make it available to your theme for use in its intention groups.
\n * Note that you must specify all hues in the definition map.\n * @param {string} name Name of palette being defined\n * @param {object} map Palette definition that includes hue definitions and contrast colors:\n * - `'50'` - `{string}`: HEX color\n * - `'100'` - `{string}`: HEX color\n * - `'200'` - `{string}`: HEX color\n * - `'300'` - `{string}`: HEX color\n * - `'400'` - `{string}`: HEX color\n * - `'500'` - `{string}`: HEX color\n * - `'600'` - `{string}`: HEX color\n * - `'700'` - `{string}`: HEX color\n * - `'800'` - `{string}`: HEX color\n * - `'900'` - `{string}`: HEX color\n * - `'A100'` - `{string}`: HEX color\n * - `'A200'` - `{string}`: HEX color\n * - `'A400'` - `{string}`: HEX color\n * - `'A700'` - `{string}`: HEX color\n * - `'contrastDefaultColor'` - `{string}`: `light` or `dark`\n * - `'contrastDarkColors'` - `{string[]}`: Hues which should use dark contrast colors (i.e. raised button text).\n * For example: `['50', '100', '200', '300', '400', 'A100']`.\n * - `'contrastLightColors'` - `{string[]}`: Hues which should use light contrast colors (i.e. raised button text).\n * For example: `['500', '600', '700', '800', '900', 'A200', 'A400', 'A700']`.\n */\n function definePalette(name, map) {\n map = map || {};\n PALETTES[name] = checkPaletteValid(name, map);\n return themingProvider;\n }\n\n /**\n * @ngdoc method\n * @name $mdThemingProvider#extendPalette\n * @description\n * Sometimes it is easier to extend an existing color palette and then change a few properties,\n * rather than defining a whole new palette.\n * @param {string} name Name of palette being extended\n * @param {object} map Palette definition that includes optional hue definitions and contrast colors:\n * - `'50'` - `{string}`: HEX color\n * - `'100'` - `{string}`: HEX color\n * - `'200'` - `{string}`: HEX color\n * - `'300'` - `{string}`: HEX color\n * - `'400'` - `{string}`: HEX color\n * - `'500'` - `{string}`: HEX color\n * - `'600'` - `{string}`: HEX color\n * - `'700'` - `{string}`: HEX color\n * - `'800'` - `{string}`: HEX color\n * - `'900'` - `{string}`: HEX color\n * - `'A100'` - `{string}`: HEX color\n * - `'A200'` - `{string}`: HEX color\n * - `'A400'` - `{string}`: HEX color\n * - `'A700'` - `{string}`: HEX color\n * - `'contrastDefaultColor'` - `{string}`: `light` or `dark`\n * - `'contrastDarkColors'` - `{string[]}`: Hues which should use dark contrast colors (i.e. raised button text).\n * For example: `['50', '100', '200', '300', '400', 'A100']`.\n * - `'contrastLightColors'` - `{string[]}`: Hues which should use light contrast colors (i.e. raised button text).\n * For example: `['500', '600', '700', '800', '900', 'A200', 'A400', 'A700']`.\n * @returns {object} A new object which is a copy of the given palette, `name`,\n * with variables from `map` overwritten.\n */\n function extendPalette(name, map) {\n return checkPaletteValid(name, angular.extend({}, PALETTES[name] || {}, map));\n }\n\n // Make sure that palette has all required hues\n function checkPaletteValid(name, map) {\n var missingColors = VALID_HUE_VALUES.filter(function(field) {\n return !map[field];\n });\n if (missingColors.length) {\n throw new Error(\"Missing colors %1 in palette %2!\"\n .replace('%1', missingColors.join(', '))\n .replace('%2', name));\n }\n\n return map;\n }\n\n /**\n * @ngdoc method\n * @name $mdThemingProvider#theme\n * @description\n * Register a theme (which is a collection of color palettes); i.e. `warn`, `accent`,\n * `background`, and `primary`.
\n * Optionally inherit from an existing theme.\n * @param {string} name Name of theme being registered\n * @param {string=} inheritFrom Existing theme name to inherit from\n */\n function registerTheme(name, inheritFrom) {\n if (THEMES[name]) return THEMES[name];\n\n inheritFrom = inheritFrom || 'default';\n\n var parentTheme = typeof inheritFrom === 'string' ? THEMES[inheritFrom] : inheritFrom;\n var theme = new Theme(name);\n\n if (parentTheme) {\n angular.forEach(parentTheme.colors, function(color, colorType) {\n theme.colors[colorType] = {\n name: color.name,\n // Make sure a COPY of the hues is given to the child color,\n // not the same reference.\n hues: angular.extend({}, color.hues)\n };\n });\n }\n THEMES[name] = theme;\n\n return theme;\n }\n\n function Theme(name) {\n var self = this;\n self.name = name;\n self.colors = {};\n\n self.dark = setDark;\n setDark(false);\n\n function setDark(isDark) {\n isDark = arguments.length === 0 ? true : !!isDark;\n\n // If no change, abort\n if (isDark === self.isDark) return;\n\n self.isDark = isDark;\n\n self.foregroundPalette = self.isDark ? LIGHT_FOREGROUND : DARK_FOREGROUND;\n self.foregroundShadow = self.isDark ? DARK_SHADOW : LIGHT_SHADOW;\n\n // Light and dark themes have different default hues.\n // Go through each existing color type for this theme, and for every\n // hue value that is still the default hue value from the previous light/dark setting,\n // set it to the default hue value from the new light/dark setting.\n var newDefaultHues = self.isDark ? DARK_DEFAULT_HUES : LIGHT_DEFAULT_HUES;\n var oldDefaultHues = self.isDark ? LIGHT_DEFAULT_HUES : DARK_DEFAULT_HUES;\n angular.forEach(newDefaultHues, function(newDefaults, colorType) {\n var color = self.colors[colorType];\n var oldDefaults = oldDefaultHues[colorType];\n if (color) {\n for (var hueName in color.hues) {\n if (color.hues[hueName] === oldDefaults[hueName]) {\n color.hues[hueName] = newDefaults[hueName];\n }\n }\n }\n });\n\n return self;\n }\n\n THEME_COLOR_TYPES.forEach(function(colorType) {\n var defaultHues = (self.isDark ? DARK_DEFAULT_HUES : LIGHT_DEFAULT_HUES)[colorType];\n self[colorType + 'Palette'] = function setPaletteType(paletteName, hues) {\n var color = self.colors[colorType] = {\n name: paletteName,\n hues: angular.extend({}, defaultHues, hues)\n };\n\n Object.keys(color.hues).forEach(function(name) {\n if (!defaultHues[name]) {\n throw new Error(\"Invalid hue name '%1' in theme %2's %3 color %4. Available hue names: %4\"\n .replace('%1', name)\n .replace('%2', self.name)\n .replace('%3', paletteName)\n .replace('%4', Object.keys(defaultHues).join(', '))\n );\n }\n });\n Object.keys(color.hues).map(function(key) {\n return color.hues[key];\n }).forEach(function(hueValue) {\n if (VALID_HUE_VALUES.indexOf(hueValue) == -1) {\n throw new Error(\"Invalid hue value '%1' in theme %2's %3 color %4. Available hue values: %5\"\n .replace('%1', hueValue)\n .replace('%2', self.name)\n .replace('%3', colorType)\n .replace('%4', paletteName)\n .replace('%5', VALID_HUE_VALUES.join(', '))\n );\n }\n });\n return self;\n };\n\n self[colorType + 'Color'] = function() {\n var args = Array.prototype.slice.call(arguments);\n // eslint-disable-next-line no-console\n console.warn('$mdThemingProviderTheme.' + colorType + 'Color() has been deprecated. ' +\n 'Use $mdThemingProviderTheme.' + colorType + 'Palette() instead.');\n return self[colorType + 'Palette'].apply(self, args);\n };\n });\n }\n\n /**\n * @ngdoc service\n * @name $mdTheming\n * @module material.core.theming\n * @description\n * Service that makes an element apply theming related classes to itself.\n *\n * For more information on the hue objects, their default values, as well as valid hue values, please visit the custom hues section of Configuring a Theme.\n *\n *\n * // Example component directive that we want to apply theming classes to.\n * app.directive('myFancyDirective', function($mdTheming) {\n * return {\n * restrict: 'AE',\n * link: function(scope, element, attrs) {\n * // Initialize the service using our directive's element\n * $mdTheming(element);\n *\n * $mdTheming.defineTheme('myTheme', {\n * primary: 'blue',\n * primaryHues: {\n * default: '500',\n * hue-1: '300',\n * hue-2: '900',\n * hue-3: 'A100'\n * },\n * accent: 'pink',\n * accentHues: {\n * default: '600',\n * hue-1: '300',\n * hue-2: '200',\n * hue-3: 'A500'\n * },\n * warn: 'red',\n * // It's not necessary to specify all hues in the object.\n * warnHues: {\n * default: '200',\n * hue-3: 'A100'\n * },\n * // It's not necessary to specify custom hues at all.\n * background: 'grey',\n * dark: true\n * });\n * // Your directive's custom code here.\n * }\n * };\n * });\n * \n * @param {element=} element Element that will have theming classes applied to it.\n */\n\n /**\n * @ngdoc property\n * @name $mdTheming#THEMES\n * @description\n * Property to get all the themes defined\n * @returns {object} All the themes defined with their properties.\n */\n\n /**\n * @ngdoc property\n * @name $mdTheming#PALETTES\n * @description\n * Property to get all the palettes defined\n * @returns {object} All the palettes defined with their colors.\n */\n\n /**\n * @ngdoc method\n * @name $mdTheming#registered\n * @description\n * Determine is specified theme name is a valid, registered theme\n * @param {string} themeName the theme to check if registered\n * @returns {boolean} whether the theme is registered or not\n */\n\n /**\n * @ngdoc method\n * @name $mdTheming#defaultTheme\n * @description\n * Returns the default theme\n * @returns {string} The default theme\n */\n\n /**\n * @ngdoc method\n * @name $mdTheming#generateTheme\n * @description\n * Lazy generate themes - by default, every theme is generated when defined.\n * You can disable this in the configuration section using the\n * `$mdThemingProvider.generateThemesOnDemand(true);`\n *\n * The theme name that is passed in must match the name of the theme that was defined as part of\n * the configuration block.\n *\n * @param {string} name theme name to generate\n */\n\n /**\n * @ngdoc method\n * @name $mdTheming#setBrowserColor\n * @description\n * Enables browser header coloring. For more info please visit\n * \n * Web Fundamentals.\n * @param {object=} options Options for the browser color, which include:
\n * - `theme` - `{string}`: A defined theme via `$mdThemeProvider` to use the palettes from.\n * Default is `default` theme.
\n * - `palette` - `{string}`: Can be any one of the basic material design palettes, extended\n * defined palettes, or `primary`, `accent`, `background`, and `warn`. Default is `primary`.\n *
\n * - `hue` - `{string}`: The hue from the selected palette. Default is `800`.
\n * @returns {function} Function that removes the browser coloring when called.\n */\n\n /**\n * @ngdoc method\n * @name $mdTheming#defineTheme\n * @description\n * Dynamically define a theme by using an options object that contains palette names.\n *\n * @param {string} name Theme name to define\n * @param {object} options Theme definition options\n *\n * Options are:
\n * - `primary` - `{string}`: The name of the primary palette to use in the theme.
\n * - `primaryHues` - `{object=}`: Override hues for primary palette.
\n * - `accent` - `{string}`: The name of the accent palette to use in the theme.
\n * - `accentHues` - `{object=}`: Override hues for accent palette.
\n * - `warn` - `{string}`: The name of the warn palette to use in the theme.
\n * - `warnHues` - `{object=}`: Override hues for warn palette.
\n * - `background` - `{string}`: The name of the background palette to use in the theme.
\n * - `backgroundHues` - `{object=}`: Override hues for background palette.
\n * - `dark` - `{boolean}`: Indicates if it's a dark theme.
\n * @returns {Promise} A resolved promise with the new theme name.\n */\n\n /* @ngInject */\n function ThemingService($rootScope, $mdUtil, $q, $log) {\n // Allow us to be invoked via a linking function signature.\n var applyTheme = function (scope, el) {\n if (el === undefined) { el = scope; scope = undefined; }\n if (scope === undefined) { scope = $rootScope; }\n applyTheme.inherit(el, el);\n };\n\n Object.defineProperty(applyTheme, 'THEMES', {\n get: function () {\n return angular.extend({}, THEMES);\n }\n });\n Object.defineProperty(applyTheme, 'PALETTES', {\n get: function () {\n return angular.extend({}, PALETTES);\n }\n });\n Object.defineProperty(applyTheme, 'ALWAYS_WATCH', {\n get: function () {\n return alwaysWatchTheme;\n }\n });\n applyTheme.inherit = inheritTheme;\n applyTheme.registered = registered;\n applyTheme.defaultTheme = function() { return defaultTheme; };\n applyTheme.generateTheme = function(name) { generateTheme(THEMES[name], name, themeConfig.nonce); };\n applyTheme.defineTheme = function(name, options) {\n options = options || {};\n\n var theme = registerTheme(name);\n\n if (options.primary) {\n theme.primaryPalette(options.primary, options.primaryHues);\n }\n if (options.accent) {\n theme.accentPalette(options.accent, options.accentHues);\n }\n if (options.warn) {\n theme.warnPalette(options.warn, options.warnHues);\n }\n if (options.background) {\n theme.backgroundPalette(options.background, options.backgroundHues);\n }\n if (options.dark){\n theme.dark();\n }\n\n this.generateTheme(name);\n\n return $q.resolve(name);\n };\n applyTheme.setBrowserColor = enableBrowserColor;\n\n return applyTheme;\n\n /**\n * Determine is specified theme name is a valid, registered theme\n */\n function registered(themeName) {\n if (themeName === undefined || themeName === '') return true;\n return applyTheme.THEMES[themeName] !== undefined;\n }\n\n /**\n * Get theme name for the element, then update with Theme CSS class\n */\n function inheritTheme (el, parent) {\n var ctrl = parent.controller('mdTheme') || el.data('$mdThemeController');\n var scope = el.scope();\n\n updateThemeClass(lookupThemeName());\n\n if (ctrl) {\n var watchTheme = alwaysWatchTheme ||\n ctrl.$shouldWatch ||\n $mdUtil.parseAttributeBoolean(el.attr('md-theme-watch'));\n\n if (watchTheme || ctrl.isAsyncTheme) {\n var clearNameWatcher = function () {\n if (unwatch) {\n unwatch();\n unwatch = undefined;\n }\n };\n\n var unwatch = ctrl.registerChanges(function(name) {\n updateThemeClass(name);\n\n if (!watchTheme) {\n clearNameWatcher();\n }\n });\n\n if (scope) {\n scope.$on('$destroy', clearNameWatcher);\n } else {\n el.on('$destroy', clearNameWatcher);\n }\n }\n }\n\n /**\n * Find the theme name from the parent controller or element data\n */\n function lookupThemeName() {\n // As a few components (dialog) add their controllers later, we should also watch for a controller init.\n return ctrl && ctrl.$mdTheme || (defaultTheme === 'default' ? '' : defaultTheme);\n }\n\n /**\n * Remove old theme class and apply a new one\n * NOTE: if not a valid theme name, then the current name is not changed\n */\n function updateThemeClass(theme) {\n if (!theme) return;\n if (!registered(theme)) {\n $log.warn('Attempted to use unregistered theme \\'' + theme + '\\'. ' +\n 'Register it with $mdThemingProvider.theme().');\n }\n\n var oldTheme = el.data('$mdThemeName');\n if (oldTheme) el.removeClass('md-' + oldTheme +'-theme');\n el.addClass('md-' + theme + '-theme');\n el.data('$mdThemeName', theme);\n if (ctrl) {\n el.data('$mdThemeController', ctrl);\n }\n }\n }\n\n }\n}\n\nfunction ThemingDirective($mdTheming, $interpolate, $parse, $mdUtil, $q, $log) {\n return {\n priority: 101, // has to be more than 100 to be before interpolation (issue on IE)\n link: {\n pre: function(scope, el, attrs) {\n var registeredCallbacks = [];\n\n var startSymbol = $interpolate.startSymbol();\n var endSymbol = $interpolate.endSymbol();\n\n var theme = attrs.mdTheme.trim();\n\n var hasInterpolation =\n theme.substr(0, startSymbol.length) === startSymbol &&\n theme.lastIndexOf(endSymbol) === theme.length - endSymbol.length;\n\n var oneTimeOperator = '::';\n var oneTimeBind = attrs.mdTheme\n .split(startSymbol).join('')\n .split(endSymbol).join('')\n .trim()\n .substr(0, oneTimeOperator.length) === oneTimeOperator;\n\n var getTheme = function () {\n var interpolation = $interpolate(attrs.mdTheme)(scope);\n return $parse(interpolation)(scope) || interpolation;\n };\n\n var ctrl = {\n isAsyncTheme: angular.isFunction(getTheme()) || angular.isFunction(getTheme().then),\n registerChanges: function (cb, context) {\n if (context) {\n cb = angular.bind(context, cb);\n }\n\n registeredCallbacks.push(cb);\n\n return function () {\n var index = registeredCallbacks.indexOf(cb);\n\n if (index > -1) {\n registeredCallbacks.splice(index, 1);\n }\n };\n },\n $setTheme: function (theme) {\n if (!$mdTheming.registered(theme)) {\n $log.warn('attempted to use unregistered theme \\'' + theme + '\\'');\n }\n\n ctrl.$mdTheme = theme;\n\n // Iterating backwards to support unregistering during iteration\n // http://stackoverflow.com/a/9882349/890293\n // we don't use `reverse()` of array because it mutates the array and we don't want it\n // to get re-indexed\n for (var i = registeredCallbacks.length; i--;) {\n registeredCallbacks[i](theme);\n }\n },\n $shouldWatch: $mdUtil.parseAttributeBoolean(el.attr('md-theme-watch')) ||\n $mdTheming.ALWAYS_WATCH ||\n (hasInterpolation && !oneTimeBind)\n };\n\n el.data('$mdThemeController', ctrl);\n\n var setParsedTheme = function (theme) {\n if (typeof theme === 'string') {\n return ctrl.$setTheme(theme);\n }\n\n $q.when(angular.isFunction(theme) ? theme() : theme)\n .then(function(name) {\n ctrl.$setTheme(name);\n });\n };\n\n setParsedTheme(getTheme());\n\n var unwatch = scope.$watch(getTheme, function(theme) {\n if (theme) {\n setParsedTheme(theme);\n\n if (!ctrl.$shouldWatch) {\n unwatch();\n }\n }\n });\n }\n }\n };\n}\n\n/**\n * Special directive that will disable ALL runtime Theme style generation and DOM injection\n *\n * \n * \n *\n * \n * ...\n * \n *\n * Note: Using md-themes-css directive requires the developer to load external\n * theme stylesheets; e.g. custom themes from Material-Tools:\n *\n * `angular-material.themes.css`\n *\n * Another option is to use the ThemingProvider to configure and disable the attribute\n * conversions; this would obviate the use of the `md-themes-css` directive\n *\n */\nfunction disableThemesDirective() {\n themeConfig.disableTheming = true;\n\n // Return a 1x-only, first-match attribute directive\n return {\n restrict : 'A',\n priority : '900'\n };\n}\n\nfunction ThemableDirective($mdTheming) {\n return $mdTheming;\n}\n\nfunction parseRules(theme, colorType, rules) {\n checkValidPalette(theme, colorType);\n\n rules = rules.replace(/THEME_NAME/g, theme.name);\n var themeNameRegex = new RegExp('\\\\.md-' + theme.name + '-theme', 'g');\n var simpleVariableRegex = /'?\"?\\{\\{\\s*([a-zA-Z]+)-(A?\\d+|hue-[0-3]|shadow|default)-?(\\d\\.?\\d*)?(contrast)?\\s*\\}\\}'?\"?/g;\n\n // find and replace simple variables where we use a specific hue, not an entire palette\n // eg. \"{{primary-100}}\"\n // \\(' + THEME_COLOR_TYPES.join('\\|') + '\\)'\n rules = rules.replace(simpleVariableRegex, function(match, colorType, hue, opacity, contrast) {\n if (colorType === 'foreground') {\n if (hue == 'shadow') {\n return theme.foregroundShadow;\n } else {\n return theme.foregroundPalette[hue] || theme.foregroundPalette['1'];\n }\n }\n\n // `default` is also accepted as a hue-value, because the background palettes are\n // using it as a name for the default hue.\n if (hue.indexOf('hue') === 0 || hue === 'default') {\n hue = theme.colors[colorType].hues[hue];\n }\n\n return rgba((PALETTES[ theme.colors[colorType].name ][hue] || '')[contrast ? 'contrast' : 'value'], opacity);\n });\n\n // Matches '{{ primary-color }}', etc\n var hueRegex = new RegExp('(\\'|\")?{{\\\\s*([a-zA-Z]+)-(color|contrast)-?(\\\\d\\\\.?\\\\d*)?\\\\s*}}(\"|\\')?','g');\n var generatedRules = [];\n\n // For each type, generate rules for each hue (ie. default, md-hue-1, md-hue-2, md-hue-3)\n angular.forEach(['default', 'hue-1', 'hue-2', 'hue-3'], function(hueName) {\n var newRule = rules\n .replace(hueRegex, function(match, _, matchedColorType, hueType, opacity) {\n var color = theme.colors[matchedColorType];\n var palette = PALETTES[color.name];\n var hueValue = color.hues[hueName];\n return rgba(palette[hueValue][hueType === 'color' ? 'value' : 'contrast'], opacity);\n });\n if (hueName !== 'default') {\n newRule = newRule.replace(themeNameRegex, '.md-' + theme.name + '-theme.md-' + hueName);\n }\n\n // Don't apply a selector rule to the default theme, making it easier to override\n // styles of the base-component\n if (theme.name == 'default') {\n var themeRuleRegex = /((?:\\s|>|\\.|\\w|-|:|\\(|\\)|\\[|\\]|\"|'|=)*)\\.md-default-theme((?:\\s|>|\\.|\\w|-|:|\\(|\\)|\\[|\\]|\"|'|=)*)/g;\n\n newRule = newRule.replace(themeRuleRegex, function(match, start, end) {\n return match + ', ' + start + end;\n });\n }\n generatedRules.push(newRule);\n });\n\n return generatedRules;\n}\n\nvar rulesByType = {};\n\n// Generate our themes at run time given the state of THEMES and PALETTES\nfunction generateAllThemes($injector, $mdTheming) {\n var head = document.head;\n var firstChild = head ? head.firstElementChild : null;\n var themeCss = !themeConfig.disableTheming && $injector.has('$MD_THEME_CSS') ? $injector.get('$MD_THEME_CSS') : '';\n\n // Append our custom registered styles to the theme stylesheet.\n themeCss += themeConfig.registeredStyles.join('');\n\n if (!firstChild) return;\n if (themeCss.length === 0) return; // no rules, so no point in running this expensive task\n\n // Expose contrast colors for palettes to ensure that text is always readable\n angular.forEach(PALETTES, sanitizePalette);\n\n // MD_THEME_CSS is a string generated by the build process that includes all the themable\n // components as templates\n\n // Break the CSS into individual rules\n var rules = themeCss\n .split(/\\}(?!(\\}|'|\"|;))/)\n .filter(function(rule) { return rule && rule.trim().length; })\n .map(function(rule) { return rule.trim() + '}'; });\n\n THEME_COLOR_TYPES.forEach(function(type) {\n rulesByType[type] = '';\n });\n\n // Sort the rules based on type, allowing us to do color substitution on a per-type basis\n rules.forEach(function(rule) {\n // First: test that if the rule has '.md-accent', it goes into the accent set of rules\n for (var i = 0, type; type = THEME_COLOR_TYPES[i]; i++) {\n if (rule.indexOf('.md-' + type) > -1) {\n return rulesByType[type] += rule;\n }\n }\n\n // If no eg 'md-accent' class is found, try to just find 'accent' in the rule and guess from\n // there\n for (i = 0; type = THEME_COLOR_TYPES[i]; i++) {\n if (rule.indexOf(type) > -1) {\n return rulesByType[type] += rule;\n }\n }\n\n // Default to the primary array\n return rulesByType[DEFAULT_COLOR_TYPE] += rule;\n });\n\n // If themes are being generated on-demand, quit here. The user will later manually\n // call generateTheme to do this on a theme-by-theme basis.\n if (themeConfig.generateOnDemand) return;\n\n angular.forEach($mdTheming.THEMES, function(theme) {\n if (!GENERATED[theme.name] && !($mdTheming.defaultTheme() !== 'default' && theme.name === 'default')) {\n generateTheme(theme, theme.name, themeConfig.nonce);\n }\n });\n\n\n // *************************\n // Internal functions\n // *************************\n\n // The user specifies a 'default' contrast color as either light or dark,\n // then explicitly lists which hues are the opposite contrast (eg. A100 has dark, A200 has light)\n function sanitizePalette(palette, name) {\n var defaultContrast = palette.contrastDefaultColor;\n var lightColors = palette.contrastLightColors || [];\n var strongLightColors = palette.contrastStrongLightColors || [];\n var darkColors = palette.contrastDarkColors || [];\n\n // These colors are provided as space-separated lists\n if (typeof lightColors === 'string') lightColors = lightColors.split(' ');\n if (typeof strongLightColors === 'string') strongLightColors = strongLightColors.split(' ');\n if (typeof darkColors === 'string') darkColors = darkColors.split(' ');\n\n // Cleanup after ourselves\n delete palette.contrastDefaultColor;\n delete palette.contrastLightColors;\n delete palette.contrastStrongLightColors;\n delete palette.contrastDarkColors;\n\n // Change { 'A100': '#fffeee' } to { 'A100': { value: '#fffeee', contrast:DARK_CONTRAST_COLOR }\n angular.forEach(palette, function(hueValue, hueName) {\n if (angular.isObject(hueValue)) return; // Already converted\n // Map everything to rgb colors\n var rgbValue = colorToRgbaArray(hueValue);\n if (!rgbValue) {\n throw new Error(\"Color %1, in palette %2's hue %3, is invalid. Hex or rgb(a) color expected.\"\n .replace('%1', hueValue)\n .replace('%2', palette.name)\n .replace('%3', hueName));\n }\n\n palette[hueName] = {\n hex: palette[hueName],\n value: rgbValue,\n contrast: getContrastColor()\n };\n function getContrastColor() {\n if (defaultContrast === 'light') {\n if (darkColors.indexOf(hueName) > -1) {\n return DARK_CONTRAST_COLOR;\n } else {\n return strongLightColors.indexOf(hueName) > -1 ? STRONG_LIGHT_CONTRAST_COLOR\n : LIGHT_CONTRAST_COLOR;\n }\n } else {\n if (lightColors.indexOf(hueName) > -1) {\n return strongLightColors.indexOf(hueName) > -1 ? STRONG_LIGHT_CONTRAST_COLOR\n : LIGHT_CONTRAST_COLOR;\n } else {\n return DARK_CONTRAST_COLOR;\n }\n }\n }\n });\n }\n}\n\nfunction generateTheme(theme, name, nonce) {\n var head = document.head;\n var firstChild = head ? head.firstElementChild : null;\n\n if (!GENERATED[name]) {\n // For each theme, use the color palettes specified for\n // `primary`, `warn` and `accent` to generate CSS rules.\n THEME_COLOR_TYPES.forEach(function(colorType) {\n var styleStrings = parseRules(theme, colorType, rulesByType[colorType]);\n while (styleStrings.length) {\n var styleContent = styleStrings.shift();\n if (styleContent) {\n var style = document.createElement('style');\n style.setAttribute('md-theme-style', '');\n if (nonce) {\n style.setAttribute('nonce', nonce);\n }\n style.appendChild(document.createTextNode(styleContent));\n head.insertBefore(style, firstChild);\n }\n }\n });\n\n GENERATED[theme.name] = true;\n }\n\n}\n\n\nfunction checkValidPalette(theme, colorType) {\n // If theme attempts to use a palette that doesnt exist, throw error\n if (!PALETTES[ (theme.colors[colorType] || {}).name ]) {\n throw new Error(\n \"You supplied an invalid color palette for theme %1's %2 palette. Available palettes: %3\"\n .replace('%1', theme.name)\n .replace('%2', colorType)\n .replace('%3', Object.keys(PALETTES).join(', '))\n );\n }\n}\n\nfunction colorToRgbaArray(clr) {\n if (angular.isArray(clr) && clr.length == 3) return clr;\n if (/^rgb/.test(clr)) {\n return clr.replace(/(^\\s*rgba?\\(|\\)\\s*$)/g, '').split(',').map(function(value, i) {\n return i == 3 ? parseFloat(value, 10) : parseInt(value, 10);\n });\n }\n if (clr.charAt(0) == '#') clr = clr.substring(1);\n if (!/^([a-fA-F0-9]{3}){1,2}$/g.test(clr)) return;\n\n var dig = clr.length / 3;\n var red = clr.substr(0, dig);\n var grn = clr.substr(dig, dig);\n var blu = clr.substr(dig * 2);\n if (dig === 1) {\n red += red;\n grn += grn;\n blu += blu;\n }\n return [parseInt(red, 16), parseInt(grn, 16), parseInt(blu, 16)];\n}\n\nfunction rgba(rgbArray, opacity) {\n if (!rgbArray) return \"rgb('0,0,0')\";\n\n if (rgbArray.length == 4) {\n rgbArray = angular.copy(rgbArray);\n opacity ? rgbArray.pop() : opacity = rgbArray.pop();\n }\n return opacity && (typeof opacity == 'number' || (typeof opacity == 'string' && opacity.length)) ?\n 'rgba(' + rgbArray.join(',') + ',' + opacity + ')' :\n 'rgb(' + rgbArray.join(',') + ')';\n}\n\n\n})(window.angular);\n\n})();\n(function(){\n\"use strict\";\n\n/**\n * @ngdoc module\n * @name material.components.autocomplete\n */\n/*\n * @see js folder for autocomplete implementation\n */\nangular.module('material.components.autocomplete', [\n 'material.core',\n 'material.components.icon',\n 'material.components.virtualRepeat'\n]);\n\n})();\n(function(){\n\"use strict\";\n\n\nMdAutocompleteCtrl.$inject = [\"$scope\", \"$element\", \"$mdUtil\", \"$mdConstant\", \"$mdTheming\", \"$window\", \"$animate\", \"$rootElement\", \"$attrs\", \"$q\", \"$log\", \"$mdLiveAnnouncer\"];angular\n .module('material.components.autocomplete')\n .controller('MdAutocompleteCtrl', MdAutocompleteCtrl);\n\nvar ITEM_HEIGHT = 48,\n MAX_ITEMS = 5,\n MENU_PADDING = 8,\n INPUT_PADDING = 2, // Padding provided by `md-input-container`\n MODE_STANDARD = 'standard',\n MODE_VIRTUAL = 'virtual';\n\nfunction MdAutocompleteCtrl ($scope, $element, $mdUtil, $mdConstant, $mdTheming, $window,\n $animate, $rootElement, $attrs, $q, $log, $mdLiveAnnouncer) {\n\n // Internal Variables.\n var ctrl = this,\n itemParts = $scope.itemsExpr.split(/ in /i),\n itemExpr = itemParts[ 1 ],\n elements = null,\n cache = {},\n noBlur = false,\n selectedItemWatchers = [],\n hasFocus = false,\n fetchesInProgress = 0,\n enableWrapScroll = null,\n inputModelCtrl = null,\n debouncedOnResize = $mdUtil.debounce(onWindowResize),\n mode = MODE_VIRTUAL; // default\n\n /**\n * The root document element. This is used for attaching a top-level click handler to\n * close the options panel when a click outside said panel occurs. We use `documentElement`\n * instead of body because, when scrolling is disabled, some browsers consider the body element\n * to be completely off the screen and propagate events directly to the html element.\n * @type {!Object} angular.JQLite\n */\n ctrl.documentElement = angular.element(document.documentElement);\n\n // Public Exported Variables with handlers\n defineProperty('hidden', handleHiddenChange, true);\n\n // Public Exported Variables\n ctrl.scope = $scope;\n ctrl.parent = $scope.$parent;\n ctrl.itemName = itemParts[0];\n ctrl.matches = [];\n ctrl.loading = false;\n ctrl.hidden = true;\n ctrl.index = -1;\n ctrl.activeOption = null;\n ctrl.id = $mdUtil.nextUid();\n ctrl.isDisabled = null;\n ctrl.isRequired = null;\n ctrl.isReadonly = null;\n ctrl.hasNotFound = false;\n ctrl.selectedMessage = $scope.selectedMessage || 'selected';\n\n // Public Exported Methods\n ctrl.keydown = keydown;\n ctrl.blur = blur;\n ctrl.focus = focus;\n ctrl.clear = clearValue;\n ctrl.select = select;\n ctrl.listEnter = onListEnter;\n ctrl.listLeave = onListLeave;\n ctrl.focusInput = focusInputElement;\n ctrl.getCurrentDisplayValue = getCurrentDisplayValue;\n ctrl.registerSelectedItemWatcher = registerSelectedItemWatcher;\n ctrl.unregisterSelectedItemWatcher = unregisterSelectedItemWatcher;\n ctrl.notFoundVisible = notFoundVisible;\n ctrl.loadingIsVisible = loadingIsVisible;\n ctrl.positionDropdown = positionDropdown;\n\n /**\n * Report types to be used for the $mdLiveAnnouncer\n * @enum {number} Unique flag id.\n */\n var ReportType = {\n Count: 1,\n Selected: 2\n };\n\n return init();\n\n // initialization methods\n\n /**\n * Initialize the controller, setup watchers, gather elements\n */\n function init () {\n\n $mdUtil.initOptionalProperties($scope, $attrs, {\n searchText: '',\n selectedItem: null,\n clearButton: false,\n disableVirtualRepeat: false,\n });\n\n $mdTheming($element);\n configureWatchers();\n $mdUtil.nextTick(function () {\n\n gatherElements();\n moveDropdown();\n\n // Touch devices often do not send a click event on tap. We still want to focus the input\n // and open the options pop-up in these cases.\n $element.on('touchstart', focusInputElement);\n\n // Forward all focus events to the input element when autofocus is enabled\n if ($scope.autofocus) {\n $element.on('focus', focusInputElement);\n }\n if ($scope.inputAriaDescribedBy) {\n elements.input.setAttribute('aria-describedby', $scope.inputAriaDescribedBy);\n }\n if (!$scope.floatingLabel) {\n if ($scope.inputAriaLabel) {\n elements.input.setAttribute('aria-label', $scope.inputAriaLabel);\n } else if ($scope.inputAriaLabelledBy) {\n elements.input.setAttribute('aria-labelledby', $scope.inputAriaLabelledBy);\n } else if ($scope.placeholder) {\n // If no aria-label or aria-labelledby references are defined, then just label using the\n // placeholder.\n elements.input.setAttribute('aria-label', $scope.placeholder);\n }\n }\n });\n }\n\n function updateModelValidators() {\n if (!$scope.requireMatch || !inputModelCtrl) return;\n\n inputModelCtrl.$setValidity('md-require-match', !!$scope.selectedItem || !$scope.searchText);\n }\n\n /**\n * Calculates the dropdown's position and applies the new styles to the menu element\n * @returns {*}\n */\n function positionDropdown () {\n if (!elements) {\n return $mdUtil.nextTick(positionDropdown, false, $scope);\n }\n\n var dropdownHeight = ($scope.dropdownItems || MAX_ITEMS) * ITEM_HEIGHT;\n var hrect = elements.wrap.getBoundingClientRect(),\n vrect = elements.snap.getBoundingClientRect(),\n root = elements.root.getBoundingClientRect(),\n top = vrect.bottom - root.top,\n bot = root.bottom - vrect.top,\n left = hrect.left - root.left,\n width = hrect.width,\n offset = getVerticalOffset(),\n position = $scope.dropdownPosition,\n styles, enoughBottomSpace, enoughTopSpace;\n var bottomSpace = root.bottom - vrect.bottom - MENU_PADDING + $mdUtil.getViewportTop();\n var topSpace = vrect.top - MENU_PADDING;\n\n // Automatically determine dropdown placement based on available space in viewport.\n if (!position) {\n enoughTopSpace = topSpace > dropdownHeight;\n enoughBottomSpace = bottomSpace > dropdownHeight;\n if (enoughBottomSpace) {\n position = 'bottom';\n } else if (enoughTopSpace) {\n position = 'top';\n } else {\n position = topSpace > bottomSpace ? 'top' : 'bottom';\n }\n }\n // Adjust the width to account for the padding provided by `md-input-container`\n if ($attrs.mdFloatingLabel) {\n left += INPUT_PADDING;\n width -= INPUT_PADDING * 2;\n }\n styles = {\n left: left + 'px',\n minWidth: width + 'px',\n maxWidth: Math.max(hrect.right - root.left, root.right - hrect.left) - MENU_PADDING + 'px'\n };\n\n if (position === 'top') {\n styles.top = 'auto';\n styles.bottom = bot + 'px';\n styles.maxHeight = Math.min(dropdownHeight, topSpace) + 'px';\n } else {\n bottomSpace = root.bottom - hrect.bottom - MENU_PADDING + $mdUtil.getViewportTop();\n\n styles.top = (top - offset) + 'px';\n styles.bottom = 'auto';\n styles.maxHeight = Math.min(dropdownHeight, bottomSpace) + 'px';\n }\n\n elements.$.scrollContainer.css(styles);\n $mdUtil.nextTick(correctHorizontalAlignment, false, $scope);\n\n /**\n * Calculates the vertical offset for floating label examples to account for ngMessages\n * @returns {number}\n */\n function getVerticalOffset () {\n var offset = 0;\n var inputContainer = $element.find('md-input-container');\n if (inputContainer.length) {\n var input = inputContainer.find('input');\n offset = inputContainer.prop('offsetHeight');\n offset -= input.prop('offsetTop');\n offset -= input.prop('offsetHeight');\n // add in the height left up top for the floating label text\n offset += inputContainer.prop('offsetTop');\n }\n return offset;\n }\n\n /**\n * Makes sure that the menu doesn't go off of the screen on either side.\n */\n function correctHorizontalAlignment () {\n var dropdown = elements.scrollContainer.getBoundingClientRect(),\n styles = {};\n if (dropdown.right > root.right) {\n styles.left = (hrect.right - dropdown.width) + 'px';\n }\n elements.$.scrollContainer.css(styles);\n }\n }\n\n /**\n * Moves the dropdown menu to the body tag in order to avoid z-index and overflow issues.\n */\n function moveDropdown () {\n if (!elements.$.root.length) return;\n $mdTheming(elements.$.scrollContainer);\n elements.$.scrollContainer.detach();\n elements.$.root.append(elements.$.scrollContainer);\n if ($animate.pin) $animate.pin(elements.$.scrollContainer, $rootElement);\n }\n\n /**\n * Sends focus to the input element.\n */\n function focusInputElement () {\n elements.input.focus();\n }\n\n /**\n * Update the activeOption based on the selected item in the listbox.\n * The activeOption is used in the template to set the aria-activedescendant attribute, which\n * enables screen readers to properly handle visual focus within the listbox and announce the\n * item's place in the list. I.e. \"List item 3 of 50\". Anytime that `ctrl.index` changes, this\n * function needs to be called to update the activeOption.\n */\n function updateActiveOption() {\n var selectedOption = elements.scroller.querySelector('.selected');\n if (selectedOption) {\n ctrl.activeOption = selectedOption.id;\n } else {\n ctrl.activeOption = null;\n }\n }\n\n /**\n * Sets up any watchers used by autocomplete\n */\n function configureWatchers () {\n var wait = parseInt($scope.delay, 10) || 0;\n\n $attrs.$observe('disabled', function (value) { ctrl.isDisabled = $mdUtil.parseAttributeBoolean(value, false); });\n $attrs.$observe('required', function (value) { ctrl.isRequired = $mdUtil.parseAttributeBoolean(value, false); });\n $attrs.$observe('readonly', function (value) { ctrl.isReadonly = $mdUtil.parseAttributeBoolean(value, false); });\n\n $scope.$watch('searchText', wait ? $mdUtil.debounce(handleSearchText, wait) : handleSearchText);\n $scope.$watch('selectedItem', selectedItemChange);\n\n angular.element($window).on('resize', debouncedOnResize);\n\n $scope.$on('$destroy', cleanup);\n }\n\n /**\n * Removes any events or leftover elements created by this controller\n */\n function cleanup () {\n if (!ctrl.hidden) {\n $mdUtil.enableScrolling();\n }\n\n angular.element($window).off('resize', debouncedOnResize);\n\n if (elements){\n var items = ['ul', 'scroller', 'scrollContainer', 'input'];\n angular.forEach(items, function(key){\n elements.$[key].remove();\n });\n }\n }\n\n /**\n * Event handler to be called whenever the window resizes.\n */\n function onWindowResize() {\n if (!ctrl.hidden) {\n positionDropdown();\n }\n }\n\n /**\n * Gathers all of the elements needed for this controller\n */\n function gatherElements () {\n\n var snapWrap = gatherSnapWrap();\n\n elements = {\n main: $element[0],\n scrollContainer: $element[0].querySelector('.md-virtual-repeat-container, .md-standard-list-container'),\n scroller: $element[0].querySelector('.md-virtual-repeat-scroller, .md-standard-list-scroller'),\n ul: $element.find('ul')[0],\n input: $element.find('input')[0],\n wrap: snapWrap.wrap,\n snap: snapWrap.snap,\n root: document.body,\n };\n\n elements.li = elements.ul.getElementsByTagName('li');\n elements.$ = getAngularElements(elements);\n mode = elements.scrollContainer.classList.contains('md-standard-list-container') ? MODE_STANDARD : MODE_VIRTUAL;\n inputModelCtrl = elements.$.input.controller('ngModel');\n }\n\n /**\n * Gathers the snap and wrap elements\n *\n */\n function gatherSnapWrap() {\n var element;\n var value;\n for (element = $element; element.length; element = element.parent()) {\n value = element.attr('md-autocomplete-snap');\n if (angular.isDefined(value)) break;\n }\n\n if (element.length) {\n return {\n snap: element[0],\n wrap: (value.toLowerCase() === 'width') ? element[0] : $element.find('md-autocomplete-wrap')[0]\n };\n }\n\n var wrap = $element.find('md-autocomplete-wrap')[0];\n return {\n snap: wrap,\n wrap: wrap\n };\n }\n\n /**\n * Gathers angular-wrapped versions of each element\n * @param elements\n * @returns {{}}\n */\n function getAngularElements (elements) {\n var obj = {};\n for (var key in elements) {\n if (elements.hasOwnProperty(key)) obj[ key ] = angular.element(elements[ key ]);\n }\n return obj;\n }\n\n // event/change handlers\n\n /**\n * @param {Event} $event\n */\n function preventDefault($event) {\n $event.preventDefault();\n }\n\n /**\n * @param {Event} $event\n */\n function stopPropagation($event) {\n $event.stopPropagation();\n }\n\n /**\n * Handles changes to the `hidden` property.\n * @param {boolean} hidden true to hide the options pop-up, false to show it.\n * @param {boolean} oldHidden the previous value of hidden\n */\n function handleHiddenChange (hidden, oldHidden) {\n var scrollContainerElement;\n\n if (elements) {\n scrollContainerElement = angular.element(elements.scrollContainer);\n }\n if (!hidden && oldHidden) {\n positionDropdown();\n\n // Report in polite mode, because the screen reader should finish the default description of\n // the input element.\n reportMessages(true, ReportType.Count | ReportType.Selected);\n\n if (elements) {\n $mdUtil.disableScrollAround(elements.scrollContainer);\n enableWrapScroll = disableElementScrollEvents(elements.wrap);\n if ($mdUtil.isIos) {\n ctrl.documentElement.on('touchend', handleTouchOutsidePanel);\n if (scrollContainerElement) {\n scrollContainerElement.on('touchstart touchmove touchend', stopPropagation);\n }\n }\n ctrl.index = getDefaultIndex();\n $mdUtil.nextTick(function() {\n updateActiveOption();\n updateScroll();\n });\n }\n } else if (hidden && !oldHidden) {\n if ($mdUtil.isIos) {\n ctrl.documentElement.off('touchend', handleTouchOutsidePanel);\n if (scrollContainerElement) {\n scrollContainerElement.off('touchstart touchmove touchend', stopPropagation);\n }\n }\n $mdUtil.enableScrolling();\n\n if (enableWrapScroll) {\n enableWrapScroll();\n enableWrapScroll = null;\n }\n }\n }\n\n /**\n * Handling touch events that bubble up to the document is required for closing the dropdown\n * panel on touch outside of the options pop-up panel on iOS.\n * @param {Event} $event\n */\n function handleTouchOutsidePanel($event) {\n ctrl.hidden = true;\n // iOS does not blur the pop-up for touches on the scroll mask, so we have to do it.\n doBlur(true);\n }\n\n /**\n * Disables scrolling for a specific element.\n * @param {!string|!DOMElement} element to disable scrolling\n * @return {Function} function to call to re-enable scrolling for the element\n */\n function disableElementScrollEvents(element) {\n var elementToDisable = angular.element(element);\n elementToDisable.on('wheel touchmove', preventDefault);\n\n return function() {\n elementToDisable.off('wheel touchmove', preventDefault);\n };\n }\n\n /**\n * When the user mouses over the dropdown menu, ignore blur events.\n */\n function onListEnter () {\n noBlur = true;\n }\n\n /**\n * When the user's mouse leaves the menu, blur events may hide the menu again.\n */\n function onListLeave () {\n if (!hasFocus && !ctrl.hidden) elements.input.focus();\n noBlur = false;\n ctrl.hidden = shouldHide();\n }\n\n /**\n * Handles changes to the selected item.\n * @param selectedItem\n * @param previousSelectedItem\n */\n function selectedItemChange (selectedItem, previousSelectedItem) {\n\n updateModelValidators();\n\n if (selectedItem) {\n getDisplayValue(selectedItem).then(function (val) {\n $scope.searchText = val;\n handleSelectedItemChange(selectedItem, previousSelectedItem);\n });\n } else if (previousSelectedItem && $scope.searchText) {\n getDisplayValue(previousSelectedItem).then(function(displayValue) {\n // Clear the searchText, when the selectedItem is set to null.\n // Do not clear the searchText, when the searchText isn't matching with the previous\n // selected item.\n if (angular.isString($scope.searchText)\n && displayValue.toString().toLowerCase() === $scope.searchText.toLowerCase()) {\n $scope.searchText = '';\n }\n });\n }\n\n if (selectedItem !== previousSelectedItem) {\n announceItemChange();\n }\n }\n\n /**\n * Use the user-defined expression to announce changes each time a new item is selected\n */\n function announceItemChange () {\n angular.isFunction($scope.itemChange) &&\n $scope.itemChange(getItemAsNameVal($scope.selectedItem));\n }\n\n /**\n * Use the user-defined expression to announce changes each time the search text is changed\n */\n function announceTextChange () {\n angular.isFunction($scope.textChange) && $scope.textChange();\n }\n\n /**\n * Calls any external watchers listening for the selected item. Used in conjunction with\n * `registerSelectedItemWatcher`.\n * @param selectedItem\n * @param previousSelectedItem\n */\n function handleSelectedItemChange (selectedItem, previousSelectedItem) {\n selectedItemWatchers.forEach(function (watcher) {\n watcher(selectedItem, previousSelectedItem);\n });\n }\n\n /**\n * Register a function to be called when the selected item changes.\n * @param cb\n */\n function registerSelectedItemWatcher (cb) {\n if (selectedItemWatchers.indexOf(cb) === -1) {\n selectedItemWatchers.push(cb);\n }\n }\n\n /**\n * Unregister a function previously registered for selected item changes.\n * @param cb\n */\n function unregisterSelectedItemWatcher (cb) {\n var i = selectedItemWatchers.indexOf(cb);\n if (i !== -1) {\n selectedItemWatchers.splice(i, 1);\n }\n }\n\n /**\n * Handles changes to the searchText property.\n * @param {string} searchText\n * @param {string} previousSearchText\n */\n function handleSearchText (searchText, previousSearchText) {\n ctrl.index = getDefaultIndex();\n\n // do nothing on init\n if (searchText === previousSearchText) return;\n\n updateModelValidators();\n\n getDisplayValue($scope.selectedItem).then(function (val) {\n // clear selected item if search text no longer matches it\n if (searchText !== val) {\n $scope.selectedItem = null;\n\n // trigger change event if available\n if (searchText !== previousSearchText) {\n announceTextChange();\n }\n\n // cancel results if search text is not long enough\n if (!isMinLengthMet()) {\n ctrl.matches = [];\n\n setLoading(false);\n reportMessages(true, ReportType.Count);\n\n } else {\n handleQuery();\n }\n }\n });\n\n }\n\n /**\n * Handles input blur event, determines if the dropdown should hide.\n */\n function blur($event) {\n hasFocus = false;\n\n if (!noBlur) {\n ctrl.hidden = shouldHide();\n evalAttr('ngBlur', { $event: $event });\n }\n }\n\n /**\n * Force blur on input element\n * @param {boolean} forceBlur\n */\n function doBlur(forceBlur) {\n if (forceBlur) {\n noBlur = false;\n hasFocus = false;\n }\n elements.input.blur();\n }\n\n /**\n * Handles input focus event, determines if the dropdown should show.\n */\n function focus($event) {\n hasFocus = true;\n\n if (isSearchable() && isMinLengthMet()) {\n handleQuery();\n }\n\n ctrl.hidden = shouldHide();\n\n evalAttr('ngFocus', { $event: $event });\n }\n\n /**\n * Handles keyboard input.\n * @param event\n */\n function keydown (event) {\n switch (event.keyCode) {\n case $mdConstant.KEY_CODE.DOWN_ARROW:\n if (ctrl.loading || hasSelection()) return;\n event.stopPropagation();\n event.preventDefault();\n ctrl.index = ctrl.index + 1 > ctrl.matches.length - 1 ? 0 : Math.min(ctrl.index + 1, ctrl.matches.length - 1);\n $mdUtil.nextTick(updateActiveOption);\n updateScroll();\n break;\n case $mdConstant.KEY_CODE.UP_ARROW:\n if (ctrl.loading || hasSelection()) return;\n event.stopPropagation();\n event.preventDefault();\n ctrl.index = ctrl.index - 1 < 0 ? ctrl.matches.length - 1 : Math.max(0, ctrl.index - 1);\n $mdUtil.nextTick(updateActiveOption);\n updateScroll();\n break;\n case $mdConstant.KEY_CODE.TAB:\n // If we hit tab, assume that we've left the list so it will close\n onListLeave();\n\n if (ctrl.hidden || ctrl.loading || ctrl.index < 0 || ctrl.matches.length < 1) return;\n select(ctrl.index);\n break;\n case $mdConstant.KEY_CODE.ENTER:\n if (ctrl.hidden || ctrl.loading || ctrl.index < 0 || ctrl.matches.length < 1) return;\n if (hasSelection()) return;\n event.stopImmediatePropagation();\n event.preventDefault();\n select(ctrl.index);\n break;\n case $mdConstant.KEY_CODE.ESCAPE:\n event.preventDefault(); // Prevent browser from always clearing input\n if (!shouldProcessEscape()) return;\n event.stopPropagation();\n\n clearSelectedItem();\n if ($scope.searchText && hasEscapeOption('clear')) {\n clearSearchText();\n }\n\n // Manually hide (needed for mdNotFound support)\n ctrl.hidden = true;\n\n if (hasEscapeOption('blur')) {\n // Force the component to blur if they hit escape\n doBlur(true);\n }\n\n break;\n default:\n }\n }\n\n // getters\n\n /**\n * Returns the minimum length needed to display the dropdown.\n * @returns {*}\n */\n function getMinLength () {\n return angular.isNumber($scope.minLength) ? $scope.minLength : 1;\n }\n\n /**\n * Returns the display value for an item.\n * @param {*} item\n * @returns {*}\n */\n function getDisplayValue (item) {\n return $q.when(getItemText(item) || item).then(function(itemText) {\n if (itemText && !angular.isString(itemText)) {\n $log.warn('md-autocomplete: Could not resolve display value to a string. ' +\n 'Please check the `md-item-text` attribute.');\n }\n\n return itemText;\n });\n\n /**\n * Getter function to invoke user-defined expression (in the directive)\n * to convert your object to a single string.\n * @param {*} item\n * @returns {string|null}\n */\n function getItemText (item) {\n return (item && $scope.itemText) ? $scope.itemText(getItemAsNameVal(item)) : null;\n }\n }\n\n /**\n * Returns the locals object for compiling item templates.\n * @param {*} item\n * @returns {Object|undefined}\n */\n function getItemAsNameVal (item) {\n if (!item) {\n return undefined;\n }\n\n var locals = {};\n if (ctrl.itemName) {\n locals[ ctrl.itemName ] = item;\n }\n\n return locals;\n }\n\n /**\n * Returns the default index based on whether or not autoselect is enabled.\n * @returns {number} 0 if autoselect is enabled, -1 if not.\n */\n function getDefaultIndex () {\n return $scope.autoselect ? 0 : -1;\n }\n\n /**\n * Sets the loading parameter and updates the hidden state.\n * @param value {boolean} Whether or not the component is currently loading.\n */\n function setLoading(value) {\n if (ctrl.loading !== value) {\n ctrl.loading = value;\n }\n\n // Always refresh the hidden variable as something else might have changed\n ctrl.hidden = shouldHide();\n }\n\n /**\n * Determines if the menu should be hidden.\n * @returns {boolean} true if the menu should be hidden\n */\n function shouldHide () {\n return !shouldShow();\n }\n\n /**\n * Determines whether the autocomplete is able to query within the current state.\n * @returns {boolean} true if the query can be run\n */\n function isSearchable() {\n if (ctrl.loading && !hasMatches()) {\n // No query when query is in progress.\n return false;\n } else if (hasSelection()) {\n // No query if there is already a selection\n return false;\n }\n else if (!hasFocus) {\n // No query if the input does not have focus\n return false;\n }\n return true;\n }\n\n /**\n * @returns {boolean} if the escape keydown should be processed, return true.\n * Otherwise return false.\n */\n function shouldProcessEscape() {\n return hasEscapeOption('blur') || !ctrl.hidden || ctrl.loading || hasEscapeOption('clear') && $scope.searchText;\n }\n\n /**\n * @param {string} option check if this option is set\n * @returns {boolean} if the specified escape option is set, return true. Return false otherwise.\n */\n function hasEscapeOption(option) {\n return !$scope.escapeOptions || $scope.escapeOptions.toLowerCase().indexOf(option) !== -1;\n }\n\n /**\n * Determines if the menu should be shown.\n * @returns {boolean} true if the menu should be shown\n */\n function shouldShow() {\n if (ctrl.isReadonly) {\n // Don't show if read only is set\n return false;\n } else if (!isSearchable()) {\n // Don't show if a query is in progress, there is already a selection,\n // or the input is not focused.\n return false;\n }\n return (isMinLengthMet() && hasMatches()) || notFoundVisible();\n }\n\n /**\n * @returns {boolean} true if the search text has matches.\n */\n function hasMatches() {\n return ctrl.matches.length ? true : false;\n }\n\n /**\n * @returns {boolean} true if the autocomplete has a valid selection.\n */\n function hasSelection() {\n return ctrl.scope.selectedItem ? true : false;\n }\n\n /**\n * @returns {boolean} true if the loading indicator is, or should be, visible.\n */\n function loadingIsVisible() {\n return ctrl.loading && !hasSelection();\n }\n\n /**\n * @returns {*} the display value of the current item.\n */\n function getCurrentDisplayValue () {\n return getDisplayValue(ctrl.matches[ ctrl.index ]);\n }\n\n /**\n * Determines if the minimum length is met by the search text.\n * @returns {*} true if the minimum length is met by the search text\n */\n function isMinLengthMet () {\n return ($scope.searchText || '').length >= getMinLength();\n }\n\n // actions\n\n /**\n * Defines a public property with a handler and a default value.\n * @param {string} key\n * @param {Function} handler function\n * @param {*} defaultValue default value\n */\n function defineProperty (key, handler, defaultValue) {\n Object.defineProperty(ctrl, key, {\n get: function () { return defaultValue; },\n set: function (newValue) {\n var oldValue = defaultValue;\n defaultValue = newValue;\n handler(newValue, oldValue);\n }\n });\n }\n\n /**\n * Selects the item at the given index.\n * @param {number} index to select\n */\n function select (index) {\n // force form to update state for validation\n $mdUtil.nextTick(function () {\n getDisplayValue(ctrl.matches[ index ]).then(function (val) {\n var ngModel = elements.$.input.controller('ngModel');\n $mdLiveAnnouncer.announce(val + ' ' + ctrl.selectedMessage, 'assertive');\n ngModel.$setViewValue(val);\n ngModel.$render();\n }).finally(function () {\n $scope.selectedItem = ctrl.matches[ index ];\n setLoading(false);\n });\n }, false);\n }\n\n /**\n * Clears the searchText value and selected item.\n * @param {Event} $event\n */\n function clearValue ($event) {\n if ($event) {\n $event.stopPropagation();\n }\n clearSelectedItem();\n clearSearchText();\n }\n\n /**\n * Clears the selected item\n */\n function clearSelectedItem () {\n // Reset our variables\n ctrl.index = -1;\n $mdUtil.nextTick(updateActiveOption);\n ctrl.matches = [];\n }\n\n /**\n * Clears the searchText value\n */\n function clearSearchText () {\n // Set the loading to true so we don't see flashes of content.\n // The flashing will only occur when an async request is running.\n // So the loading process will stop when the results had been retrieved.\n setLoading(true);\n\n $scope.searchText = '';\n\n // Normally, triggering the change / input event is unnecessary, because the browser detects it properly.\n // But some browsers are not detecting it properly, which means that we have to trigger the event.\n // Using the `input` is not working properly, because for example IE11 is not supporting the `input` event.\n // The `change` event is a good alternative and is supported by all supported browsers.\n var eventObj = document.createEvent('CustomEvent');\n eventObj.initCustomEvent('change', true, true, { value: '' });\n elements.input.dispatchEvent(eventObj);\n\n // For some reason, firing the above event resets the value of $scope.searchText if\n // $scope.searchText has a space character at the end, so we blank it one more time and then\n // focus.\n elements.input.blur();\n $scope.searchText = '';\n elements.input.focus();\n }\n\n /**\n * Fetches the results for the provided search text.\n * @param searchText\n */\n function fetchResults (searchText) {\n var items = $scope.$parent.$eval(itemExpr),\n term = searchText.toLowerCase(),\n isList = angular.isArray(items),\n isPromise = !!items.then; // Every promise should contain a `then` property\n\n if (isList) onResultsRetrieved(items);\n else if (isPromise) handleAsyncResults(items);\n\n function handleAsyncResults(items) {\n if (!items) return;\n\n items = $q.when(items);\n fetchesInProgress++;\n setLoading(true);\n\n $mdUtil.nextTick(function () {\n items\n .then(onResultsRetrieved)\n .finally(function(){\n if (--fetchesInProgress === 0) {\n setLoading(false);\n }\n });\n },true, $scope);\n }\n\n function onResultsRetrieved(matches) {\n cache[term] = matches;\n\n // Just cache the results if the request is now outdated.\n // The request becomes outdated, when the new searchText has changed during the result fetching.\n if ((searchText || '') !== ($scope.searchText || '')) {\n return;\n }\n\n handleResults(matches);\n }\n }\n\n\n /**\n * Reports given message types to supported screen readers.\n * @param {boolean} isPolite Whether the announcement should be polite.\n * @param {!number} types Message flags to be reported to the screen reader.\n */\n function reportMessages(isPolite, types) {\n var politeness = isPolite ? 'polite' : 'assertive';\n var messages = [];\n\n if (types & ReportType.Selected && ctrl.index !== -1) {\n messages.push(getCurrentDisplayValue());\n }\n\n if (types & ReportType.Count) {\n messages.push($q.resolve(getCountMessage()));\n }\n\n $q.all(messages).then(function(data) {\n $mdLiveAnnouncer.announce(data.join(' '), politeness);\n });\n }\n\n /**\n * @returns {string} the ARIA message for how many results match the current query.\n */\n function getCountMessage () {\n switch (ctrl.matches.length) {\n case 0:\n return 'There are no matches available.';\n case 1:\n return 'There is 1 match available.';\n default:\n return 'There are ' + ctrl.matches.length + ' matches available.';\n }\n }\n\n /**\n * Makes sure that the focused element is within view.\n */\n function updateScroll () {\n if (!elements.li[0]) return;\n if (mode === MODE_STANDARD) {\n updateStandardScroll();\n } else {\n updateVirtualScroll();\n }\n }\n\n function updateVirtualScroll() {\n // elements in virtual scroll have consistent heights\n var optionHeight = elements.li[0].offsetHeight,\n top = optionHeight * Math.max(0, ctrl.index),\n bottom = top + optionHeight,\n containerHeight = elements.scroller.clientHeight,\n scrollTop = elements.scroller.scrollTop;\n\n if (top < scrollTop) {\n scrollTo(top);\n } else if (bottom > scrollTop + containerHeight) {\n scrollTo(bottom - containerHeight);\n }\n }\n\n function updateStandardScroll() {\n // elements in standard scroll have variable heights\n var selected = elements.li[Math.max(0, ctrl.index)];\n var containerHeight = elements.scrollContainer.offsetHeight,\n top = selected && selected.offsetTop || 0,\n bottom = top + selected.clientHeight,\n scrollTop = elements.scrollContainer.scrollTop;\n\n if (top < scrollTop) {\n scrollTo(top);\n } else if (bottom > scrollTop + containerHeight) {\n scrollTo(bottom - containerHeight);\n }\n }\n\n function isPromiseFetching() {\n return fetchesInProgress !== 0;\n }\n\n function scrollTo (offset) {\n if (mode === MODE_STANDARD) {\n elements.scrollContainer.scrollTop = offset;\n } else {\n elements.$.scrollContainer.controller('mdVirtualRepeatContainer').scrollTo(offset);\n }\n }\n\n function notFoundVisible () {\n var textLength = (ctrl.scope.searchText || '').length;\n\n return ctrl.hasNotFound && !hasMatches() && (!ctrl.loading || isPromiseFetching()) && textLength >= getMinLength() && (hasFocus || noBlur) && !hasSelection();\n }\n\n /**\n * Starts the query to gather the results for the current searchText. Attempts to return cached\n * results first, then forwards the process to `fetchResults` if necessary.\n */\n function handleQuery () {\n var searchText = $scope.searchText || '';\n var term = searchText.toLowerCase();\n\n // If caching is enabled and the current searchText is stored in the cache\n if (!$scope.noCache && cache[term]) {\n // The results should be handled as same as a normal un-cached request does.\n handleResults(cache[term]);\n } else {\n fetchResults(searchText);\n }\n\n ctrl.hidden = shouldHide();\n }\n\n /**\n * Handles the retrieved results by showing them in the autocompletes dropdown.\n * @param results Retrieved results\n */\n function handleResults(results) {\n ctrl.matches = results;\n ctrl.hidden = shouldHide();\n\n // If loading is in progress, then we'll end the progress. This is needed for example,\n // when the `clear` button was clicked, because there we always show the loading process, to prevent flashing.\n if (ctrl.loading) setLoading(false);\n\n if ($scope.selectOnMatch) selectItemOnMatch();\n\n positionDropdown();\n reportMessages(true, ReportType.Count);\n }\n\n /**\n * If there is only one matching item and the search text matches its display value exactly,\n * automatically select that item. Note: This function is only called if the user uses the\n * `md-select-on-match` flag.\n */\n function selectItemOnMatch () {\n var searchText = $scope.searchText,\n matches = ctrl.matches,\n item = matches[ 0 ];\n if (matches.length === 1) getDisplayValue(item).then(function (displayValue) {\n var isMatching = searchText === displayValue;\n if ($scope.matchInsensitive && !isMatching) {\n isMatching = searchText.toLowerCase() === displayValue.toLowerCase();\n }\n\n if (isMatching) {\n select(0);\n }\n });\n }\n\n /**\n * Evaluates an attribute expression against the parent scope.\n * @param {String} attr Name of the attribute to be evaluated.\n * @param {Object?} locals Properties to be injected into the evaluation context.\n */\n function evalAttr(attr, locals) {\n if ($attrs[attr]) {\n $scope.$parent.$eval($attrs[attr], locals || {});\n }\n }\n\n}\n\n})();\n(function(){\n\"use strict\";\n\n\nMdAutocomplete.$inject = [\"$$mdSvgRegistry\"];angular\n .module('material.components.autocomplete')\n .directive('mdAutocomplete', MdAutocomplete);\n\n/**\n * @ngdoc directive\n * @name mdAutocomplete\n * @module material.components.autocomplete\n *\n * @description\n * `` is a special input component with a drop-down of all possible matches to a\n * custom query. This component allows you to provide real-time suggestions as the user types\n * in the input area.\n *\n * To start, you will need to specify the required parameters and provide a template for your\n * results. The content inside `md-autocomplete` will be treated as a template.\n *\n * In more complex cases, you may want to include other content such as a message to display when\n * no matches were found. You can do this by wrapping your template in `md-item-template` and\n * adding a tag for `md-not-found`. An example of this is shown below.\n *\n * To reset the displayed value you must clear both values for `md-search-text` and\n * `md-selected-item`.\n *\n * ### Validation\n *\n * You can use `ng-messages` to include validation the same way that you would normally validate;\n * however, if you want to replicate a standard input with a floating label, you will have to\n * do the following:\n *\n * - Make sure that your template is wrapped in `md-item-template`\n * - Add your `ng-messages` code inside of `md-autocomplete`\n * - Add your validation properties to `md-autocomplete` (ie. `required`)\n * - Add a `name` to `md-autocomplete` (to be used on the generated `input`)\n *\n * There is an example below of how this should look.\n *\n * ### Snapping Drop-Down\n *\n * You can cause the autocomplete drop-down to snap to an ancestor element by applying the\n * `md-autocomplete-snap` attribute to that element. You can also snap to the width of\n * the `md-autocomplete-snap` element by setting the attribute's value to `width`\n * (ie. `md-autocomplete-snap=\"width\"`).\n *\n * ### Notes\n *\n * **Autocomplete Dropdown Items Rendering**\n *\n * The `md-autocomplete` uses the the \n * mdVirtualRepeat directive for displaying the results inside of the dropdown.
\n *\n * > When encountering issues regarding the item template please take a look at the\n * VirtualRepeatContainer documentation.\n *\n * **Autocomplete inside of a Virtual Repeat**\n *\n * When using the `md-autocomplete` directive inside of a\n * VirtualRepeatContainer the dropdown items\n * might not update properly, because caching of the results is enabled by default.\n *\n * The autocomplete will then show invalid dropdown items, because the Virtual Repeat only updates\n * the scope bindings rather than re-creating the `md-autocomplete`. This means that the previous\n * cached results will be used.\n *\n * > To avoid such problems, ensure that the autocomplete does not cache any results via\n * `md-no-cache=\"true\"`:\n *\n *\n * \n * {{ item.display }}\n * \n * \n *\n *\n * @param {expression} md-items An expression in the format of `item in results` to iterate over\n * matches for your search.
\n * The `results` expression can be also a function, which returns the results synchronously\n * or asynchronously (per Promise).\n * @param {expression=} md-selected-item-change An expression to be run each time a new item is\n * selected.\n * @param {expression=} md-search-text-change An expression to be run each time the search text\n * updates.\n * @param {expression=} md-search-text A model to bind the search query text to.\n * @param {object=} md-selected-item A model to bind the selected item to.\n * @param {expression=} md-item-text An expression that will convert your object to a single string.\n * @param {string=} placeholder Placeholder text that will be forwarded to the input.\n * @param {boolean=} md-no-cache Disables the internal caching that happens in autocomplete.\n * @param {boolean=} ng-disabled Determines whether or not to disable the input field.\n * @param {boolean=} md-require-match When set to true, the autocomplete will add a validator,\n * which will evaluate to false, when no item is currently selected.\n * @param {number=} md-min-length Specifies the minimum length of text before autocomplete will\n * make suggestions.\n * @param {number=} md-delay Specifies the amount of time (in milliseconds) to wait before looking\n * for results.\n * @param {boolean=} md-clear-button Whether the clear button for the autocomplete input should show\n * up or not. When `md-floating-label` is set, defaults to false, defaults to true otherwise.\n * @param {boolean=} md-autofocus If true, the autocomplete will be automatically focused when a\n * `$mdDialog`, `$mdBottomsheet` or `$mdSidenav`, which contains the autocomplete, is opening.\n *
\n * Also the autocomplete will immediately focus the input element.\n * @param {boolean=} md-no-asterisk When present, asterisk will not be appended to the floating\n * label.\n * @param {boolean=} md-autoselect If set to true, the first item will be automatically selected\n * in the dropdown upon open.\n * @param {string=} md-input-name The name attribute given to the input element to be used with\n * FormController.\n * @param {string=} md-menu-class This class will be applied to the dropdown menu for styling.\n * @param {string=} md-menu-container-class This class will be applied to the parent container\n * of the dropdown panel.\n * @param {string=} md-input-class This will be applied to the input for styling. This attribute\n * is only valid when a `md-floating-label` is defined.\n * @param {string=} md-floating-label This will add a floating label to autocomplete and wrap it in\n * `md-input-container`.\n * @param {string=} md-select-on-focus When present the input's text will be automatically selected\n * on focus.\n * @param {string=} md-input-id An ID to be added to the input element.\n * @param {number=} md-input-minlength The minimum length for the input's value for validation.\n * @param {number=} md-input-maxlength The maximum length for the input's value for validation.\n * @param {boolean=} md-select-on-match When set, autocomplete will automatically select\n * the item if the search text is an exact match.
\n * An exact match is when only one match is displayed.\n * @param {boolean=} md-match-case-insensitive When set and using `md-select-on-match`, autocomplete\n * will select on case-insensitive match.\n * @param {string=} md-escape-options Override escape key logic. Default is `blur clear`.
\n * Options: `blur`, `clear`, `none`.\n * @param {string=} md-dropdown-items Specifies the maximum amount of items to be shown in\n * the dropdown.
\n * When the dropdown doesn't fit into the viewport, the dropdown will shrink\n * as much as possible.\n * @param {string=} md-dropdown-position Overrides the default dropdown position. Options: `top`,\n * `bottom`.\n * @param {string=} input-aria-describedby A space-separated list of element IDs. This should\n * contain the IDs of any elements that describe this autocomplete. Screen readers will read the\n * content of these elements at the end of announcing that the autocomplete has been selected\n * and describing its current state. The descriptive elements do not need to be visible on the\n * page.\n * @param {string=} input-aria-labelledby A space-separated list of element IDs. The ideal use case\n * is that this would contain the ID of a `
' : '';\n }\n\n function getRepeatType(repeatMode) {\n return isVirtualRepeatDisabled(repeatMode) ?\n 'ng-repeat' : 'md-virtual-repeat';\n }\n\n function isVirtualRepeatDisabled(repeatMode) {\n // ensure we have a valid repeat mode\n var correctedRepeatMode = getRepeatMode(repeatMode);\n return correctedRepeatMode !== REPEAT_VIRTUAL;\n }\n\n function getInputElement () {\n if (attr.mdFloatingLabel) {\n return '\\\n \n * This can be done by using the following markup.\n *\n *
\n * If you have an application, which changes its theme on runtime, you have to enable theme watching.\n *\n *
\n * You are able to register your own styles by using the following markup.\n *\n *
\n * `theme` - A defined theme via `$mdThemeProvider` to use the palettes from. Default is `default` theme.
\n * `palette` - Can be any one of the basic material design palettes, extended defined palettes and 'primary',\n * 'accent', 'background' and 'warn'. Default is `primary`.
\n * `hue` - The hue from the selected palette. Default is `800`
\n *\n *
\n * - `theme` - `{string}`: A defined theme via `$mdThemeProvider` to use the palettes from. Default is `default` theme.
\n * - `palette` - `{string}`: Can be any one of the basic material design palettes, extended defined palettes, or `primary`,\n * `accent`, `background`, and `warn`. Default is `primary`.
\n * - `hue` - `{string}`: The hue from the selected palette. Default is `800`.
\n * @returns {function} Function that removes the browser coloring when called.\n */\n var enableBrowserColor = function (options) {\n options = angular.isObject(options) ? options : {};\n\n var theme = options.theme || 'default';\n var hue = options.hue || '800';\n\n var palette = PALETTES[options.palette] ||\n PALETTES[THEMES[theme].colors[options.palette || 'primary'].name];\n\n var color = angular.isObject(palette[hue]) ? palette[hue].hex : palette[hue];\n if (color.substr(0, 1) !== '#') color = '#' + color;\n\n return setBrowserColor(color);\n };\n\n return themingProvider = {\n definePalette: definePalette,\n extendPalette: extendPalette,\n theme: registerTheme,\n\n /**\n * return a read-only clone of the current theme configuration\n */\n configuration : function() {\n return angular.extend({ }, themeConfig, {\n defaultTheme : defaultTheme,\n alwaysWatchTheme : alwaysWatchTheme,\n registeredStyles : [].concat(themeConfig.registeredStyles)\n });\n },\n\n /**\n * @ngdoc method\n * @name $mdThemingProvider#disableTheming\n * @description\n * An easier way to disable theming without having to use `.constant(\"$MD_THEME_CSS\",\"\");`.\n * This disables all dynamic theme style sheet generations and injections.\n * @param {boolean=} isDisabled Disable all dynamic theme style sheet generations and injections\n * if `true` or `undefined`.\n */\n disableTheming: function(isDisabled) {\n themeConfig.disableTheming = angular.isUndefined(isDisabled) || !!isDisabled;\n },\n\n /**\n * @ngdoc method\n * @name $mdThemingProvider#registerStyles\n * @param {string} styles The styles to be appended to AngularJS Material's built in theme CSS.\n */\n registerStyles: function(styles) {\n themeConfig.registeredStyles.push(styles);\n },\n\n /**\n * @ngdoc method\n * @name $mdThemingProvider#setNonce\n * @param {string} nonceValue The nonce to be added as an attribute to the theme style tags.\n * Setting a value allows the use of CSP policy without using the `'unsafe-inline'` directive.\n * The string must already be base64 encoded. You can use `btoa(string)` to do this encoding.\n * In your CSP's `style-src`, you would then add an entry for `'nonce-nonceValue'`.\n */\n setNonce: function(nonceValue) {\n themeConfig.nonce = nonceValue;\n },\n\n generateThemesOnDemand: function(onDemand) {\n themeConfig.generateOnDemand = onDemand;\n },\n\n /**\n * @ngdoc method\n * @name $mdThemingProvider#setDefaultTheme\n * @param {string} theme Default theme name to be applied to elements. Default value is `default`.\n */\n setDefaultTheme: function(theme) {\n defaultTheme = theme;\n },\n\n /**\n * @ngdoc method\n * @name $mdThemingProvider#alwaysWatchTheme\n * @param {boolean} alwaysWatch Whether or not to always watch themes for changes and re-apply\n * classes when they change. Default is `false`. Enabling can reduce performance.\n */\n alwaysWatchTheme: function(alwaysWatch) {\n alwaysWatchTheme = alwaysWatch;\n },\n\n enableBrowserColor: enableBrowserColor,\n\n $get: ThemingService,\n _LIGHT_DEFAULT_HUES: LIGHT_DEFAULT_HUES,\n _DARK_DEFAULT_HUES: DARK_DEFAULT_HUES,\n _PALETTES: PALETTES,\n _THEMES: THEMES,\n _parseRules: parseRules,\n _rgba: rgba\n };\n\n /**\n * @ngdoc method\n * @name $mdThemingProvider#definePalette\n * @description\n * In the event that you need to define a custom color palette, you can use this function to\n * make it available to your theme for use in its intention groups.
\n * Note that you must specify all hues in the definition map.\n * @param {string} name Name of palette being defined\n * @param {object} map Palette definition that includes hue definitions and contrast colors:\n * - `'50'` - `{string}`: HEX color\n * - `'100'` - `{string}`: HEX color\n * - `'200'` - `{string}`: HEX color\n * - `'300'` - `{string}`: HEX color\n * - `'400'` - `{string}`: HEX color\n * - `'500'` - `{string}`: HEX color\n * - `'600'` - `{string}`: HEX color\n * - `'700'` - `{string}`: HEX color\n * - `'800'` - `{string}`: HEX color\n * - `'900'` - `{string}`: HEX color\n * - `'A100'` - `{string}`: HEX color\n * - `'A200'` - `{string}`: HEX color\n * - `'A400'` - `{string}`: HEX color\n * - `'A700'` - `{string}`: HEX color\n * - `'contrastDefaultColor'` - `{string}`: `light` or `dark`\n * - `'contrastDarkColors'` - `{string[]}`: Hues which should use dark contrast colors (i.e. raised button text).\n * For example: `['50', '100', '200', '300', '400', 'A100']`.\n * - `'contrastLightColors'` - `{string[]}`: Hues which should use light contrast colors (i.e. raised button text).\n * For example: `['500', '600', '700', '800', '900', 'A200', 'A400', 'A700']`.\n */\n function definePalette(name, map) {\n map = map || {};\n PALETTES[name] = checkPaletteValid(name, map);\n return themingProvider;\n }\n\n /**\n * @ngdoc method\n * @name $mdThemingProvider#extendPalette\n * @description\n * Sometimes it is easier to extend an existing color palette and then change a few properties,\n * rather than defining a whole new palette.\n * @param {string} name Name of palette being extended\n * @param {object} map Palette definition that includes optional hue definitions and contrast colors:\n * - `'50'` - `{string}`: HEX color\n * - `'100'` - `{string}`: HEX color\n * - `'200'` - `{string}`: HEX color\n * - `'300'` - `{string}`: HEX color\n * - `'400'` - `{string}`: HEX color\n * - `'500'` - `{string}`: HEX color\n * - `'600'` - `{string}`: HEX color\n * - `'700'` - `{string}`: HEX color\n * - `'800'` - `{string}`: HEX color\n * - `'900'` - `{string}`: HEX color\n * - `'A100'` - `{string}`: HEX color\n * - `'A200'` - `{string}`: HEX color\n * - `'A400'` - `{string}`: HEX color\n * - `'A700'` - `{string}`: HEX color\n * - `'contrastDefaultColor'` - `{string}`: `light` or `dark`\n * - `'contrastDarkColors'` - `{string[]}`: Hues which should use dark contrast colors (i.e. raised button text).\n * For example: `['50', '100', '200', '300', '400', 'A100']`.\n * - `'contrastLightColors'` - `{string[]}`: Hues which should use light contrast colors (i.e. raised button text).\n * For example: `['500', '600', '700', '800', '900', 'A200', 'A400', 'A700']`.\n * @returns {object} A new object which is a copy of the given palette, `name`,\n * with variables from `map` overwritten.\n */\n function extendPalette(name, map) {\n return checkPaletteValid(name, angular.extend({}, PALETTES[name] || {}, map));\n }\n\n // Make sure that palette has all required hues\n function checkPaletteValid(name, map) {\n var missingColors = VALID_HUE_VALUES.filter(function(field) {\n return !map[field];\n });\n if (missingColors.length) {\n throw new Error(\"Missing colors %1 in palette %2!\"\n .replace('%1', missingColors.join(', '))\n .replace('%2', name));\n }\n\n return map;\n }\n\n /**\n * @ngdoc method\n * @name $mdThemingProvider#theme\n * @description\n * Register a theme (which is a collection of color palettes); i.e. `warn`, `accent`,\n * `background`, and `primary`.
\n * Optionally inherit from an existing theme.\n * @param {string} name Name of theme being registered\n * @param {string=} inheritFrom Existing theme name to inherit from\n */\n function registerTheme(name, inheritFrom) {\n if (THEMES[name]) return THEMES[name];\n\n inheritFrom = inheritFrom || 'default';\n\n var parentTheme = typeof inheritFrom === 'string' ? THEMES[inheritFrom] : inheritFrom;\n var theme = new Theme(name);\n\n if (parentTheme) {\n angular.forEach(parentTheme.colors, function(color, colorType) {\n theme.colors[colorType] = {\n name: color.name,\n // Make sure a COPY of the hues is given to the child color,\n // not the same reference.\n hues: angular.extend({}, color.hues)\n };\n });\n }\n THEMES[name] = theme;\n\n return theme;\n }\n\n function Theme(name) {\n var self = this;\n self.name = name;\n self.colors = {};\n\n self.dark = setDark;\n setDark(false);\n\n function setDark(isDark) {\n isDark = arguments.length === 0 ? true : !!isDark;\n\n // If no change, abort\n if (isDark === self.isDark) return;\n\n self.isDark = isDark;\n\n self.foregroundPalette = self.isDark ? LIGHT_FOREGROUND : DARK_FOREGROUND;\n self.foregroundShadow = self.isDark ? DARK_SHADOW : LIGHT_SHADOW;\n\n // Light and dark themes have different default hues.\n // Go through each existing color type for this theme, and for every\n // hue value that is still the default hue value from the previous light/dark setting,\n // set it to the default hue value from the new light/dark setting.\n var newDefaultHues = self.isDark ? DARK_DEFAULT_HUES : LIGHT_DEFAULT_HUES;\n var oldDefaultHues = self.isDark ? LIGHT_DEFAULT_HUES : DARK_DEFAULT_HUES;\n angular.forEach(newDefaultHues, function(newDefaults, colorType) {\n var color = self.colors[colorType];\n var oldDefaults = oldDefaultHues[colorType];\n if (color) {\n for (var hueName in color.hues) {\n if (color.hues[hueName] === oldDefaults[hueName]) {\n color.hues[hueName] = newDefaults[hueName];\n }\n }\n }\n });\n\n return self;\n }\n\n THEME_COLOR_TYPES.forEach(function(colorType) {\n var defaultHues = (self.isDark ? DARK_DEFAULT_HUES : LIGHT_DEFAULT_HUES)[colorType];\n self[colorType + 'Palette'] = function setPaletteType(paletteName, hues) {\n var color = self.colors[colorType] = {\n name: paletteName,\n hues: angular.extend({}, defaultHues, hues)\n };\n\n Object.keys(color.hues).forEach(function(name) {\n if (!defaultHues[name]) {\n throw new Error(\"Invalid hue name '%1' in theme %2's %3 color %4. Available hue names: %4\"\n .replace('%1', name)\n .replace('%2', self.name)\n .replace('%3', paletteName)\n .replace('%4', Object.keys(defaultHues).join(', '))\n );\n }\n });\n Object.keys(color.hues).map(function(key) {\n return color.hues[key];\n }).forEach(function(hueValue) {\n if (VALID_HUE_VALUES.indexOf(hueValue) == -1) {\n throw new Error(\"Invalid hue value '%1' in theme %2's %3 color %4. Available hue values: %5\"\n .replace('%1', hueValue)\n .replace('%2', self.name)\n .replace('%3', colorType)\n .replace('%4', paletteName)\n .replace('%5', VALID_HUE_VALUES.join(', '))\n );\n }\n });\n return self;\n };\n\n self[colorType + 'Color'] = function() {\n var args = Array.prototype.slice.call(arguments);\n // eslint-disable-next-line no-console\n console.warn('$mdThemingProviderTheme.' + colorType + 'Color() has been deprecated. ' +\n 'Use $mdThemingProviderTheme.' + colorType + 'Palette() instead.');\n return self[colorType + 'Palette'].apply(self, args);\n };\n });\n }\n\n /**\n * @ngdoc service\n * @name $mdTheming\n * @module material.core.theming\n * @description\n * Service that makes an element apply theming related classes to itself.\n *\n * For more information on the hue objects, their default values, as well as valid hue values, please visit the custom hues section of Configuring a Theme.\n *\n *
\n * - `theme` - `{string}`: A defined theme via `$mdThemeProvider` to use the palettes from.\n * Default is `default` theme.
\n * - `palette` - `{string}`: Can be any one of the basic material design palettes, extended\n * defined palettes, or `primary`, `accent`, `background`, and `warn`. Default is `primary`.\n *
\n * - `hue` - `{string}`: The hue from the selected palette. Default is `800`.
\n * @returns {function} Function that removes the browser coloring when called.\n */\n\n /**\n * @ngdoc method\n * @name $mdTheming#defineTheme\n * @description\n * Dynamically define a theme by using an options object that contains palette names.\n *\n * @param {string} name Theme name to define\n * @param {object} options Theme definition options\n *\n * Options are:
\n * - `primary` - `{string}`: The name of the primary palette to use in the theme.
\n * - `primaryHues` - `{object=}`: Override hues for primary palette.
\n * - `accent` - `{string}`: The name of the accent palette to use in the theme.
\n * - `accentHues` - `{object=}`: Override hues for accent palette.
\n * - `warn` - `{string}`: The name of the warn palette to use in the theme.
\n * - `warnHues` - `{object=}`: Override hues for warn palette.
\n * - `background` - `{string}`: The name of the background palette to use in the theme.
\n * - `backgroundHues` - `{object=}`: Override hues for background palette.
\n * - `dark` - `{boolean}`: Indicates if it's a dark theme.
\n * @returns {Promise
\n *\n * > When encountering issues regarding the item template please take a look at the\n * VirtualRepeatContainer documentation.\n *\n * **Autocomplete inside of a Virtual Repeat**\n *\n * When using the `md-autocomplete` directive inside of a\n * VirtualRepeatContainer the dropdown items\n * might not update properly, because caching of the results is enabled by default.\n *\n * The autocomplete will then show invalid dropdown items, because the Virtual Repeat only updates\n * the scope bindings rather than re-creating the `md-autocomplete`. This means that the previous\n * cached results will be used.\n *\n * > To avoid such problems, ensure that the autocomplete does not cache any results via\n * `md-no-cache=\"true\"`:\n *\n *
\n * The `results` expression can be also a function, which returns the results synchronously\n * or asynchronously (per Promise).\n * @param {expression=} md-selected-item-change An expression to be run each time a new item is\n * selected.\n * @param {expression=} md-search-text-change An expression to be run each time the search text\n * updates.\n * @param {expression=} md-search-text A model to bind the search query text to.\n * @param {object=} md-selected-item A model to bind the selected item to.\n * @param {expression=} md-item-text An expression that will convert your object to a single string.\n * @param {string=} placeholder Placeholder text that will be forwarded to the input.\n * @param {boolean=} md-no-cache Disables the internal caching that happens in autocomplete.\n * @param {boolean=} ng-disabled Determines whether or not to disable the input field.\n * @param {boolean=} md-require-match When set to true, the autocomplete will add a validator,\n * which will evaluate to false, when no item is currently selected.\n * @param {number=} md-min-length Specifies the minimum length of text before autocomplete will\n * make suggestions.\n * @param {number=} md-delay Specifies the amount of time (in milliseconds) to wait before looking\n * for results.\n * @param {boolean=} md-clear-button Whether the clear button for the autocomplete input should show\n * up or not. When `md-floating-label` is set, defaults to false, defaults to true otherwise.\n * @param {boolean=} md-autofocus If true, the autocomplete will be automatically focused when a\n * `$mdDialog`, `$mdBottomsheet` or `$mdSidenav`, which contains the autocomplete, is opening.\n *
\n * Also the autocomplete will immediately focus the input element.\n * @param {boolean=} md-no-asterisk When present, asterisk will not be appended to the floating\n * label.\n * @param {boolean=} md-autoselect If set to true, the first item will be automatically selected\n * in the dropdown upon open.\n * @param {string=} md-input-name The name attribute given to the input element to be used with\n * FormController.\n * @param {string=} md-menu-class This class will be applied to the dropdown menu for styling.\n * @param {string=} md-menu-container-class This class will be applied to the parent container\n * of the dropdown panel.\n * @param {string=} md-input-class This will be applied to the input for styling. This attribute\n * is only valid when a `md-floating-label` is defined.\n * @param {string=} md-floating-label This will add a floating label to autocomplete and wrap it in\n * `md-input-container`.\n * @param {string=} md-select-on-focus When present the input's text will be automatically selected\n * on focus.\n * @param {string=} md-input-id An ID to be added to the input element.\n * @param {number=} md-input-minlength The minimum length for the input's value for validation.\n * @param {number=} md-input-maxlength The maximum length for the input's value for validation.\n * @param {boolean=} md-select-on-match When set, autocomplete will automatically select\n * the item if the search text is an exact match.
\n * An exact match is when only one match is displayed.\n * @param {boolean=} md-match-case-insensitive When set and using `md-select-on-match`, autocomplete\n * will select on case-insensitive match.\n * @param {string=} md-escape-options Override escape key logic. Default is `blur clear`.
\n * Options: `blur`, `clear`, `none`.\n * @param {string=} md-dropdown-items Specifies the maximum amount of items to be shown in\n * the dropdown.
\n * When the dropdown doesn't fit into the viewport, the dropdown will shrink\n * as much as possible.\n * @param {string=} md-dropdown-position Overrides the default dropdown position. Options: `top`,\n * `bottom`.\n * @param {string=} input-aria-describedby A space-separated list of element IDs. This should\n * contain the IDs of any elements that describe this autocomplete. Screen readers will read the\n * content of these elements at the end of announcing that the autocomplete has been selected\n * and describing its current state. The descriptive elements do not need to be visible on the\n * page.\n * @param {string=} input-aria-labelledby A space-separated list of element IDs. The ideal use case\n * is that this would contain the ID of a `
' + leftover + '
\\\n - \n *
- \n * {{result.text}}\n * \n *
\n * \n * Open a Bottom Sheet!\n * \n *
\n * \\\n ![\"{{item[$mdContactChipsCtrl.contactName]}}\"\\\n]()
\\\n \\\n {{item[$mdContactChipsCtrl.contactName]}}\\\n \\\n {{item[$mdContactChipsCtrl.contactEmail]}}\\\n
\\\n \\\n \\\n ![\"{{$chip[$mdContactChipsCtrl.contactName]}}\"\\\n]()
\\\n
\\\n \\\n {{$chip[$mdContactChipsCtrl.contactName]}}\\\n
\\\n \n *
\n * \n * Color demo\n *
\n * \n *
\n * \n * Color demo\n *
\n * ' +\n '
';\n },\n scope: {\n minDate: '=mdMinDate',\n maxDate: '=mdMaxDate',\n dateFilter: '=mdDateFilter',\n monthFilter: '=mdMonthFilter',\n\n // These need to be prefixed, because Angular resets\n // any changes to the value due to bindToController.\n _mode: '@mdMode',\n _currentView: '@mdCurrentView'\n },\n require: ['ngModel', 'mdCalendar'],\n controller: CalendarCtrl,\n controllerAs: 'calendarCtrl',\n bindToController: true,\n link: function(scope, element, attrs, controllers) {\n var ngModelCtrl = controllers[0];\n var mdCalendarCtrl = controllers[1];\n mdCalendarCtrl.configureNgModel(ngModelCtrl, inputDirective);\n }\n };\n }\n\n /**\n * Occasionally the hideVerticalScrollbar method might read an element's\n * width as 0, because it hasn't been laid out yet. This value will be used\n * as a fallback, in order to prevent scenarios where the element's width\n * would otherwise have been set to 0. This value is the \"usual\" width of a\n * calendar within a floating calendar pane.\n */\n var FALLBACK_WIDTH = 340;\n\n /** Next identifier for calendar instance. */\n var nextUniqueId = 0;\n\n /** Maps the `md-mode` values to their corresponding calendar views. */\n var MODE_MAP = {\n day: 'month',\n month: 'year'\n };\n\n /**\n * Controller for the mdCalendar component.\n * @ngInject @constructor\n */\n function CalendarCtrl($element, $scope, $$mdDateUtil, $mdUtil,\n $mdConstant, $mdTheming, $$rAF, $attrs, $mdDateLocale, $filter) {\n\n $mdTheming($element);\n\n /**\n * @final\n * @type {!JQLite}\n */\n this.$element = $element;\n\n /**\n * @final\n * @type {!angular.Scope}\n */\n this.$scope = $scope;\n\n /**\n * @final\n * @type {!angular.$attrs} Current attributes object for the element\n */\n this.$attrs = $attrs;\n\n /** @final */\n this.dateUtil = $$mdDateUtil;\n\n /** @final */\n this.$mdUtil = $mdUtil;\n\n /** @final */\n this.keyCode = $mdConstant.KEY_CODE;\n\n /** @final */\n this.$$rAF = $$rAF;\n\n /** @final */\n this.$mdDateLocale = $mdDateLocale;\n\n /** @final The built-in Angular date filter. */\n this.ngDateFilter = $filter('date');\n\n /**\n * @final\n * @type {Date}\n */\n this.today = this.dateUtil.createDateAtMidnight();\n\n /** @type {!ngModel.NgModelController} */\n this.ngModelCtrl = undefined;\n\n /** @type {string} Class applied to the selected date cell. */\n this.SELECTED_DATE_CLASS = 'md-calendar-selected-date';\n\n /** @type {string} Class applied to the cell for today. */\n this.TODAY_CLASS = 'md-calendar-date-today';\n\n /** @type {string} Class applied to the focused cell. */\n this.FOCUSED_DATE_CLASS = 'md-focus';\n\n /**\n * @final\n * @type {number} Unique ID for this calendar instance.\n */\n this.id = nextUniqueId++;\n\n /**\n * The date that is currently focused or showing in the calendar. This will initially be set\n * to the ng-model value if set, otherwise to today. It will be updated as the user navigates\n * to other months. The cell corresponding to the displayDate does not necesarily always have\n * focus in the document (such as for cases when the user is scrolling the calendar).\n * @type {Date}\n */\n this.displayDate = null;\n\n /**\n * Allows restricting the calendar to only allow selecting a month or a day.\n * @type {'month'|'day'|null}\n */\n this.mode = null;\n\n /**\n * The selected date. Keep track of this separately from the ng-model value so that we\n * can know, when the ng-model value changes, what the previous value was before it's updated\n * in the component's UI.\n *\n * @type {Date}\n */\n this.selectedDate = null;\n\n /**\n * The first date that can be rendered by the calendar. The default is taken\n * from the mdDateLocale provider and is limited by the mdMinDate.\n * @type {Date}\n */\n this.firstRenderableDate = null;\n\n /**\n * The last date that can be rendered by the calendar. The default comes\n * from the mdDateLocale provider and is limited by the maxDate.\n * @type {Date}\n */\n this.lastRenderableDate = null;\n\n /**\n * Used to toggle initialize the root element in the next digest.\n * @type {boolean}\n */\n this.isInitialized = false;\n\n /**\n * Cache for the width of the element without a scrollbar. Used to hide the scrollbar later on\n * and to avoid extra reflows when switching between views.\n * @type {number}\n */\n this.width = 0;\n\n /**\n * Caches the width of the scrollbar in order to be used when hiding it and to avoid extra reflows.\n * @type {number}\n */\n this.scrollbarWidth = 0;\n\n // Unless the user specifies so, the calendar should not be a tab stop.\n // This is necessary because ngAria might add a tabindex to anything with an ng-model\n // (based on whether or not the user has turned that particular feature on/off).\n if (!$attrs.tabindex) {\n $element.attr('tabindex', '-1');\n }\n\n var boundKeyHandler = angular.bind(this, this.handleKeyEvent);\n\n // If use the md-calendar directly in the body without datepicker,\n // handleKeyEvent will disable other inputs on the page.\n // So only apply the handleKeyEvent on the body when the md-calendar inside datepicker,\n // otherwise apply on the calendar element only.\n\n var handleKeyElement;\n if ($element.parent().hasClass('md-datepicker-calendar')) {\n handleKeyElement = angular.element(document.body);\n } else {\n handleKeyElement = $element;\n }\n\n // Bind the keydown handler to the body, in order to handle cases where the focused\n // element gets removed from the DOM and stops propagating click events.\n handleKeyElement.on('keydown', boundKeyHandler);\n\n $scope.$on('$destroy', function() {\n handleKeyElement.off('keydown', boundKeyHandler);\n });\n\n // For AngularJS 1.4 and older, where there are no lifecycle hooks but bindings are pre-assigned,\n // manually call the $onInit hook.\n if (angular.version.major === 1 && angular.version.minor <= 4) {\n this.$onInit();\n }\n }\n\n /**\n * AngularJS Lifecycle hook for newer AngularJS versions.\n * Bindings are not guaranteed to have been assigned in the controller, but they are in the\n * $onInit hook.\n */\n CalendarCtrl.prototype.$onInit = function() {\n /**\n * The currently visible calendar view. Note the prefix on the scope value,\n * which is necessary, because the datepicker seems to reset the real one value if the\n * calendar is open, but the `currentView` on the datepicker's scope is empty.\n * @type {String}\n */\n if (this._mode && MODE_MAP.hasOwnProperty(this._mode)) {\n this.currentView = MODE_MAP[this._mode];\n this.mode = this._mode;\n } else {\n this.currentView = this._currentView || 'month';\n this.mode = null;\n }\n\n if (this.minDate && this.minDate > this.$mdDateLocale.firstRenderableDate) {\n this.firstRenderableDate = this.minDate;\n } else {\n this.firstRenderableDate = this.$mdDateLocale.firstRenderableDate;\n }\n\n if (this.maxDate && this.maxDate < this.$mdDateLocale.lastRenderableDate) {\n this.lastRenderableDate = this.maxDate;\n } else {\n this.lastRenderableDate = this.$mdDateLocale.lastRenderableDate;\n }\n };\n\n /**\n * Sets up the controller's reference to ngModelController.\n * @param {!ngModel.NgModelController} ngModelCtrl Instance of the ngModel controller.\n * @param {Object} inputDirective Config for Angular's `input` directive.\n */\n CalendarCtrl.prototype.configureNgModel = function(ngModelCtrl, inputDirective) {\n var self = this;\n self.ngModelCtrl = ngModelCtrl;\n\n // The component needs to be [type=\"date\"] in order to be picked up by AngularJS.\n this.$attrs.$set('type', 'date');\n\n // Invoke the `input` directive link function, adding a stub for the element.\n // This allows us to re-use AngularJS' logic for setting the timezone via ng-model-options.\n // It works by calling the link function directly which then adds the proper `$parsers` and\n // `$formatters` to the NgModelController.\n inputDirective[0].link.pre(this.$scope, {\n on: angular.noop,\n val: angular.noop,\n 0: {}\n }, this.$attrs, [ngModelCtrl]);\n\n ngModelCtrl.$render = function() {\n var value = this.$viewValue;\n var parsedValue, convertedValue;\n\n // In the case where a conversion is needed, the $viewValue here will be a string like\n // \"2020-05-10\" instead of a Date object.\n if (!self.dateUtil.isValidDate(value)) {\n parsedValue = self.$mdDateLocale.parseDate(this.$viewValue);\n convertedValue =\n new Date(parsedValue.getTime() + 60000 * parsedValue.getTimezoneOffset());\n if (self.dateUtil.isValidDate(convertedValue)) {\n value = convertedValue;\n }\n }\n\n // Notify the child scopes of any changes.\n self.$scope.$broadcast('md-calendar-parent-changed', value);\n\n // Set up the selectedDate if it hasn't been already.\n if (!self.selectedDate) {\n self.selectedDate = value;\n }\n\n // Also set up the displayDate.\n if (!self.displayDate) {\n self.displayDate = self.selectedDate || self.today;\n }\n };\n\n self.$mdUtil.nextTick(function() {\n self.isInitialized = true;\n });\n };\n\n /**\n * Sets the ng-model value for the calendar and emits a change event.\n * @param {Date} date new value for the calendar\n */\n CalendarCtrl.prototype.setNgModelValue = function(date) {\n var timezone = this.$mdUtil.getModelOption(this.ngModelCtrl, 'timezone');\n var value = this.dateUtil.createDateAtMidnight(date);\n this.focusDate(value);\n this.$scope.$emit('md-calendar-change', value);\n this.ngModelCtrl.$setViewValue(this.ngDateFilter(value, 'yyyy-MM-dd', timezone), 'default');\n this.ngModelCtrl.$render();\n return value;\n };\n\n /**\n * Sets the current view that should be visible in the calendar\n * @param {string} newView View name to be set.\n * @param {number|Date} time Date object or a timestamp for the new display date.\n */\n CalendarCtrl.prototype.setCurrentView = function(newView, time) {\n var self = this;\n\n self.$mdUtil.nextTick(function() {\n self.currentView = newView;\n\n if (time) {\n self.displayDate = angular.isDate(time) ? time : new Date(time);\n }\n });\n };\n\n /**\n * Focus the cell corresponding to the given date.\n * @param {Date=} date The date to be focused.\n */\n CalendarCtrl.prototype.focusDate = function(date) {\n if (this.dateUtil.isValidDate(date)) {\n var previousFocus = this.$element[0].querySelector('.' + this.FOCUSED_DATE_CLASS);\n if (previousFocus) {\n previousFocus.classList.remove(this.FOCUSED_DATE_CLASS);\n }\n\n var cellId = this.getDateId(date, this.currentView);\n var cell = document.getElementById(cellId);\n if (cell) {\n cell.classList.add(this.FOCUSED_DATE_CLASS);\n cell.focus();\n this.displayDate = date;\n }\n } else {\n var rootElement = this.$element[0].querySelector('[ng-switch]');\n\n if (rootElement) {\n rootElement.focus();\n }\n }\n };\n\n /**\n * Highlights a date cell on the calendar and changes the selected date.\n * @param {Date=} date Date to be marked as selected.\n */\n CalendarCtrl.prototype.changeSelectedDate = function(date) {\n var selectedDateClass = this.SELECTED_DATE_CLASS;\n var prevDateCell = this.$element[0].querySelector('.' + selectedDateClass);\n\n // Remove the selected class from the previously selected date, if any.\n if (prevDateCell) {\n prevDateCell.classList.remove(selectedDateClass);\n prevDateCell.setAttribute('aria-selected', 'false');\n }\n\n // Apply the select class to the new selected date if it is set.\n if (date) {\n var dateCell = document.getElementById(this.getDateId(date, this.currentView));\n if (dateCell) {\n dateCell.classList.add(selectedDateClass);\n dateCell.setAttribute('aria-selected', 'true');\n }\n }\n\n this.selectedDate = date;\n };\n\n /**\n * Normalizes the key event into an action name. The action will be broadcast\n * to the child controllers.\n * @param {KeyboardEvent} event\n * @returns {String} The action that should be taken, or null if the key\n * does not match a calendar shortcut.\n */\n CalendarCtrl.prototype.getActionFromKeyEvent = function(event) {\n var keyCode = this.keyCode;\n\n switch (event.which) {\n case keyCode.ENTER: return 'select';\n\n case keyCode.RIGHT_ARROW: return 'move-right';\n case keyCode.LEFT_ARROW: return 'move-left';\n\n case keyCode.DOWN_ARROW: return event.metaKey ? 'move-page-down' : 'move-row-down';\n case keyCode.UP_ARROW: return event.metaKey ? 'move-page-up' : 'move-row-up';\n\n case keyCode.PAGE_DOWN: return 'move-page-down';\n case keyCode.PAGE_UP: return 'move-page-up';\n\n case keyCode.HOME: return 'start';\n case keyCode.END: return 'end';\n\n default: return null;\n }\n };\n\n /**\n * Handles a key event in the calendar with the appropriate action. The action will either\n * be to select the focused date or to navigate to focus a new date.\n * @param {KeyboardEvent} event\n */\n CalendarCtrl.prototype.handleKeyEvent = function(event) {\n var self = this;\n\n this.$scope.$apply(function() {\n // Capture escape and emit back up so that a wrapping component\n // (such as a date-picker) can decide to close.\n if (event.which === self.keyCode.ESCAPE || event.which === self.keyCode.TAB) {\n self.$scope.$emit('md-calendar-close');\n\n if (event.which === self.keyCode.TAB) {\n event.preventDefault();\n }\n\n return;\n }\n\n // Broadcast the action that any child controllers should take.\n var action = self.getActionFromKeyEvent(event);\n if (action) {\n event.preventDefault();\n event.stopPropagation();\n self.$scope.$broadcast('md-calendar-parent-action', action);\n }\n });\n };\n\n /**\n * Hides the vertical scrollbar on the calendar scroller of a child controller by\n * setting the width on the calendar scroller and the `overflow: hidden` wrapper\n * around the scroller, and then setting a padding-right on the scroller equal\n * to the width of the browser's scrollbar.\n *\n * This will cause a reflow.\n *\n * @param {object} childCtrl The child controller whose scrollbar should be hidden.\n */\n CalendarCtrl.prototype.hideVerticalScrollbar = function(childCtrl) {\n var self = this;\n var element = childCtrl.$element[0];\n var scrollMask = element.querySelector('.md-calendar-scroll-mask');\n\n if (self.width > 0) {\n setWidth();\n } else {\n self.$$rAF(function() {\n var scroller = childCtrl.calendarScroller;\n\n self.scrollbarWidth = scroller.offsetWidth - scroller.clientWidth;\n self.width = element.querySelector('table').offsetWidth;\n setWidth();\n });\n }\n\n function setWidth() {\n var width = self.width || FALLBACK_WIDTH;\n var scrollbarWidth = self.scrollbarWidth;\n var scroller = childCtrl.calendarScroller;\n\n scrollMask.style.width = width + 'px';\n scroller.style.width = (width + scrollbarWidth) + 'px';\n scroller.style.paddingRight = scrollbarWidth + 'px';\n }\n };\n\n /**\n * Gets an identifier for a date unique to the calendar instance for internal\n * purposes. Not to be displayed.\n * @param {Date} date The date for which the id is being generated\n * @param {string} namespace Namespace for the id. (month, year etc.)\n * @returns {string}\n */\n CalendarCtrl.prototype.getDateId = function(date, namespace) {\n if (!namespace) {\n throw new Error('A namespace for the date id has to be specified.');\n }\n\n return [\n 'md',\n this.id,\n namespace,\n date.getFullYear(),\n date.getMonth(),\n date.getDate()\n ].join('-');\n };\n\n /**\n * Util to trigger an extra digest on a parent scope, in order to to ensure that\n * any child virtual repeaters have updated. This is necessary, because the virtual\n * repeater doesn't update the $index the first time around since the content isn't\n * in place yet. The case, in which this is an issue, is when the repeater has less\n * than a page of content (e.g. a month or year view has a min or max date).\n */\n CalendarCtrl.prototype.updateVirtualRepeat = function() {\n var scope = this.$scope;\n var virtualRepeatResizeListener = scope.$on('$md-resize-enable', function() {\n if (!scope.$$phase) {\n scope.$apply();\n }\n\n virtualRepeatResizeListener();\n });\n };\n})();\n\n})();\n(function(){\n\"use strict\";\n\n(function() {\n 'use strict';\n\n CalendarMonthCtrl.$inject = [\"$element\", \"$scope\", \"$animate\", \"$q\", \"$$mdDateUtil\", \"$mdDateLocale\"];\n angular.module('material.components.datepicker')\n .directive('mdCalendarMonth', calendarDirective);\n\n /**\n * Height of one calendar month tbody. This must be made known to the virtual-repeat and is\n * subsequently used for scrolling to specific months.\n */\n var TBODY_HEIGHT = 265;\n\n /**\n * Height of a calendar month with a single row. This is needed to calculate the offset for\n * rendering an extra month in virtual-repeat that only contains one row.\n */\n var TBODY_SINGLE_ROW_HEIGHT = 45;\n\n /** Private directive that represents a list of months inside the calendar. */\n function calendarDirective() {\n return {\n template:\n '' +\n '' +\n '' +\n '' +\n\n // The
' +\n ' ' +\n '
',\n require: ['^^mdCalendar', 'mdCalendarMonth'],\n controller: CalendarMonthCtrl,\n controllerAs: 'monthCtrl',\n bindToController: true,\n link: function(scope, element, attrs, controllers) {\n var calendarCtrl = controllers[0];\n var monthCtrl = controllers[1];\n monthCtrl.initialize(calendarCtrl);\n }\n };\n }\n\n /**\n * Controller for the calendar month component.\n * @ngInject @constructor\n */\n function CalendarMonthCtrl($element, $scope, $animate, $q,\n $$mdDateUtil, $mdDateLocale) {\n\n /** @final {!angular.JQLite} */\n this.$element = $element;\n\n /** @final {!angular.Scope} */\n this.$scope = $scope;\n\n /** @final {!angular.$animate} */\n this.$animate = $animate;\n\n /** @final {!angular.$q} */\n this.$q = $q;\n\n /** @final */\n this.dateUtil = $$mdDateUtil;\n\n /** @final */\n this.dateLocale = $mdDateLocale;\n\n /** @final {HTMLElement} */\n this.calendarScroller = $element[0].querySelector('.md-virtual-repeat-scroller');\n\n /** @type {boolean} */\n this.isInitialized = false;\n\n /** @type {boolean} */\n this.isMonthTransitionInProgress = false;\n\n var self = this;\n\n /**\n * Handles a click event on a date cell.\n * Created here so that every cell can use the same function instance.\n * @this {HTMLTableCellElement} The cell that was clicked.\n */\n this.cellClickHandler = function() {\n var timestamp = $$mdDateUtil.getTimestampFromNode(this);\n self.$scope.$apply(function() {\n self.calendarCtrl.setNgModelValue(self.dateLocale.parseDate(timestamp));\n });\n };\n\n /**\n * Handles click events on the month headers. Switches\n * the calendar to the year view.\n * @this {HTMLTableCellElement} The cell that was clicked.\n */\n this.headerClickHandler = function() {\n self.calendarCtrl.setCurrentView('year', $$mdDateUtil.getTimestampFromNode(this));\n };\n }\n\n /** Initialization **/\n\n /**\n * Initialize the controller by saving a reference to the calendar and\n * setting up the object that will be iterated by the virtual repeater.\n */\n CalendarMonthCtrl.prototype.initialize = function(calendarCtrl) {\n /**\n * Dummy array-like object for virtual-repeat to iterate over. The length is the total\n * number of months that can be viewed. We add 2 months: one to include the current month\n * and one for the last dummy month.\n *\n * This is shorter than ideal because of a (potential) Firefox bug\n * https://bugzilla.mozilla.org/show_bug.cgi?id=1181658.\n */\n\n this.items = {\n length: this.dateUtil.getMonthDistance(\n calendarCtrl.firstRenderableDate,\n calendarCtrl.lastRenderableDate\n ) + 2\n };\n\n this.calendarCtrl = calendarCtrl;\n this.attachScopeListeners();\n calendarCtrl.updateVirtualRepeat();\n\n // Fire the initial render, since we might have missed it the first time it fired.\n calendarCtrl.ngModelCtrl && calendarCtrl.ngModelCtrl.$render();\n };\n\n /**\n * Gets the \"index\" of the currently selected date as it would be in the virtual-repeat.\n * @returns {number} the \"index\" of the currently selected date\n */\n CalendarMonthCtrl.prototype.getSelectedMonthIndex = function() {\n var calendarCtrl = this.calendarCtrl;\n\n return this.dateUtil.getMonthDistance(\n calendarCtrl.firstRenderableDate,\n calendarCtrl.displayDate || calendarCtrl.selectedDate || calendarCtrl.today\n );\n };\n\n /**\n * Change the date that is being shown in the calendar. If the given date is in a different\n * month, the displayed month will be transitioned.\n * @param {Date} date\n */\n CalendarMonthCtrl.prototype.changeDisplayDate = function(date) {\n // Initialization is deferred until this function is called because we want to reflect\n // the starting value of ngModel.\n if (!this.isInitialized) {\n this.buildWeekHeader();\n this.calendarCtrl.hideVerticalScrollbar(this);\n this.isInitialized = true;\n return this.$q.when();\n }\n\n // If trying to show an invalid date or a transition is in progress, do nothing.\n if (!this.dateUtil.isValidDate(date) || this.isMonthTransitionInProgress) {\n return this.$q.when();\n }\n\n this.isMonthTransitionInProgress = true;\n var animationPromise = this.animateDateChange(date);\n\n this.calendarCtrl.displayDate = date;\n\n var self = this;\n animationPromise.then(function() {\n self.isMonthTransitionInProgress = false;\n });\n\n return animationPromise;\n };\n\n /**\n * Animates the transition from the calendar's current month to the given month.\n * @param {Date} date\n * @returns {angular.$q.Promise} The animation promise.\n */\n CalendarMonthCtrl.prototype.animateDateChange = function(date) {\n if (this.dateUtil.isValidDate(date)) {\n var monthDistance = this.dateUtil.getMonthDistance(this.calendarCtrl.firstRenderableDate, date);\n this.calendarScroller.scrollTop = monthDistance * TBODY_HEIGHT;\n }\n\n return this.$q.when();\n };\n\n /**\n * Builds and appends a day-of-the-week header to the calendar.\n * This should only need to be called once during initialization.\n */\n CalendarMonthCtrl.prototype.buildWeekHeader = function() {\n var firstDayOfWeek = this.dateLocale.firstDayOfWeek;\n var shortDays = this.dateLocale.shortDays;\n\n var row = document.createElement('tr');\n for (var i = 0; i < 7; i++) {\n var th = document.createElement('th');\n th.textContent = shortDays[(i + firstDayOfWeek) % 7];\n row.appendChild(th);\n }\n\n this.$element.find('thead').append(row);\n };\n\n /**\n * Attaches listeners for the scope events that are broadcast by the calendar.\n */\n CalendarMonthCtrl.prototype.attachScopeListeners = function() {\n var self = this;\n\n self.$scope.$on('md-calendar-parent-changed', function(event, value) {\n self.calendarCtrl.changeSelectedDate(value);\n self.changeDisplayDate(value);\n });\n\n self.$scope.$on('md-calendar-parent-action', angular.bind(this, this.handleKeyEvent));\n };\n\n /**\n * Handles the month-specific keyboard interactions.\n * @param {Object} event Scope event object passed by the calendar.\n * @param {String} action Action, corresponding to the key that was pressed.\n */\n CalendarMonthCtrl.prototype.handleKeyEvent = function(event, action) {\n var calendarCtrl = this.calendarCtrl;\n var displayDate = calendarCtrl.displayDate;\n\n if (action === 'select') {\n calendarCtrl.setNgModelValue(displayDate);\n } else {\n var date = null;\n var dateUtil = this.dateUtil;\n\n switch (action) {\n case 'move-right': date = dateUtil.incrementDays(displayDate, 1); break;\n case 'move-left': date = dateUtil.incrementDays(displayDate, -1); break;\n\n case 'move-page-down': date = dateUtil.incrementMonths(displayDate, 1); break;\n case 'move-page-up': date = dateUtil.incrementMonths(displayDate, -1); break;\n\n case 'move-row-down': date = dateUtil.incrementDays(displayDate, 7); break;\n case 'move-row-up': date = dateUtil.incrementDays(displayDate, -7); break;\n\n case 'start': date = dateUtil.getFirstDateOfMonth(displayDate); break;\n case 'end': date = dateUtil.getLastDateOfMonth(displayDate); break;\n }\n\n if (date) {\n date = this.dateUtil.clampDate(date, calendarCtrl.minDate, calendarCtrl.maxDate);\n\n this.changeDisplayDate(date).then(function() {\n calendarCtrl.focusDate(date);\n });\n }\n }\n };\n})();\n\n})();\n(function(){\n\"use strict\";\n\n(function() {\n 'use strict';\n\n mdCalendarMonthBodyDirective.$inject = [\"$compile\", \"$$mdSvgRegistry\"];\n CalendarMonthBodyCtrl.$inject = [\"$element\", \"$$mdDateUtil\", \"$mdDateLocale\"];\n angular.module('material.components.datepicker')\n .directive('mdCalendarMonthBody', mdCalendarMonthBodyDirective);\n\n /**\n * Private directive consumed by md-calendar-month. Having this directive lets the calender use\n * md-virtual-repeat and also cleanly separates the month DOM construction functions from\n * the rest of the calendar controller logic.\n * @ngInject\n */\n function mdCalendarMonthBodyDirective($compile, $$mdSvgRegistry) {\n var ARROW_ICON = $compile('' +\n '' +\n '' +\n '' +\n // The
' +\n ' ' +\n '
',\n require: ['^^mdCalendar', 'mdCalendarYear'],\n controller: CalendarYearCtrl,\n controllerAs: 'yearCtrl',\n bindToController: true,\n link: function(scope, element, attrs, controllers) {\n var calendarCtrl = controllers[0];\n var yearCtrl = controllers[1];\n yearCtrl.initialize(calendarCtrl);\n }\n };\n }\n\n /**\n * Controller for the mdCalendar component.\n * @ngInject @constructor\n */\n function CalendarYearCtrl($element, $scope, $animate, $q, $$mdDateUtil, $mdUtil) {\n\n /** @final {!angular.JQLite} */\n this.$element = $element;\n\n /** @final {!angular.Scope} */\n this.$scope = $scope;\n\n /** @final {!angular.$animate} */\n this.$animate = $animate;\n\n /** @final {!angular.$q} */\n this.$q = $q;\n\n /** @final */\n this.dateUtil = $$mdDateUtil;\n\n /** @final {HTMLElement} */\n this.calendarScroller = $element[0].querySelector('.md-virtual-repeat-scroller');\n\n /** @type {boolean} */\n this.isInitialized = false;\n\n /** @type {boolean} */\n this.isMonthTransitionInProgress = false;\n\n /** @final */\n this.$mdUtil = $mdUtil;\n\n var self = this;\n\n /**\n * Handles a click event on a date cell.\n * Created here so that every cell can use the same function instance.\n * @this {HTMLTableCellElement} The cell that was clicked.\n */\n this.cellClickHandler = function() {\n self.onTimestampSelected($$mdDateUtil.getTimestampFromNode(this));\n };\n }\n\n /**\n * Initialize the controller by saving a reference to the calendar and\n * setting up the object that will be iterated by the virtual repeater.\n */\n CalendarYearCtrl.prototype.initialize = function(calendarCtrl) {\n /**\n * Dummy array-like object for virtual-repeat to iterate over. The length is the total\n * number of years that can be viewed. We add 1 extra in order to include the current year.\n */\n\n this.items = {\n length: this.dateUtil.getYearDistance(\n calendarCtrl.firstRenderableDate,\n calendarCtrl.lastRenderableDate\n ) + 1\n };\n\n this.calendarCtrl = calendarCtrl;\n this.attachScopeListeners();\n calendarCtrl.updateVirtualRepeat();\n\n // Fire the initial render, since we might have missed it the first time it fired.\n calendarCtrl.ngModelCtrl && calendarCtrl.ngModelCtrl.$render();\n };\n\n /**\n * Gets the \"index\" of the currently selected date as it would be in the virtual-repeat.\n * @returns {number}\n */\n CalendarYearCtrl.prototype.getFocusedYearIndex = function() {\n var calendarCtrl = this.calendarCtrl;\n\n return this.dateUtil.getYearDistance(\n calendarCtrl.firstRenderableDate,\n calendarCtrl.displayDate || calendarCtrl.selectedDate || calendarCtrl.today\n );\n };\n\n /**\n * Change the date that is highlighted in the calendar.\n * @param {Date} date\n */\n CalendarYearCtrl.prototype.changeDate = function(date) {\n // Initialization is deferred until this function is called because we want to reflect\n // the starting value of ngModel.\n if (!this.isInitialized) {\n this.calendarCtrl.hideVerticalScrollbar(this);\n this.isInitialized = true;\n return this.$q.when();\n } else if (this.dateUtil.isValidDate(date) && !this.isMonthTransitionInProgress) {\n var self = this;\n var animationPromise = this.animateDateChange(date);\n\n self.isMonthTransitionInProgress = true;\n self.calendarCtrl.displayDate = date;\n\n return animationPromise.then(function() {\n self.isMonthTransitionInProgress = false;\n });\n }\n };\n\n /**\n * Animates the transition from the calendar's current month to the given month.\n * @param {Date} date\n * @returns {angular.$q.Promise} The animation promise.\n */\n CalendarYearCtrl.prototype.animateDateChange = function(date) {\n if (this.dateUtil.isValidDate(date)) {\n var monthDistance = this.dateUtil.getYearDistance(this.calendarCtrl.firstRenderableDate, date);\n this.calendarScroller.scrollTop = monthDistance * TBODY_HEIGHT;\n }\n\n return this.$q.when();\n };\n\n /**\n * Handles the year-view-specific keyboard interactions.\n * @param {Object} event Scope event object passed by the calendar.\n * @param {String} action Action, corresponding to the key that was pressed.\n */\n CalendarYearCtrl.prototype.handleKeyEvent = function(event, action) {\n var self = this;\n var calendarCtrl = self.calendarCtrl;\n var displayDate = calendarCtrl.displayDate;\n\n if (action === 'select') {\n self.changeDate(displayDate).then(function() {\n self.onTimestampSelected(displayDate);\n });\n } else {\n var date = null;\n var dateUtil = self.dateUtil;\n\n switch (action) {\n case 'move-right': date = dateUtil.incrementMonths(displayDate, 1); break;\n case 'move-left': date = dateUtil.incrementMonths(displayDate, -1); break;\n\n case 'move-row-down': date = dateUtil.incrementMonths(displayDate, 6); break;\n case 'move-row-up': date = dateUtil.incrementMonths(displayDate, -6); break;\n }\n\n if (date) {\n var min = calendarCtrl.minDate ? dateUtil.getFirstDateOfMonth(calendarCtrl.minDate) : null;\n var max = calendarCtrl.maxDate ? dateUtil.getFirstDateOfMonth(calendarCtrl.maxDate) : null;\n date = dateUtil.getFirstDateOfMonth(self.dateUtil.clampDate(date, min, max));\n\n self.changeDate(date).then(function() {\n calendarCtrl.focusDate(date);\n });\n }\n }\n };\n\n /**\n * Attaches listeners for the scope events that are broadcast by the calendar.\n */\n CalendarYearCtrl.prototype.attachScopeListeners = function() {\n var self = this;\n\n self.$scope.$on('md-calendar-parent-changed', function(event, value) {\n self.calendarCtrl.changeSelectedDate(value ? self.dateUtil.getFirstDateOfMonth(value) : value);\n self.changeDate(value);\n });\n\n self.$scope.$on('md-calendar-parent-action', angular.bind(self, self.handleKeyEvent));\n };\n\n /**\n * Handles the behavior when a date is selected. Depending on the `mode`\n * of the calendar, this can either switch back to the calendar view or\n * set the model value.\n * @param {number} timestamp The selected timestamp.\n */\n CalendarYearCtrl.prototype.onTimestampSelected = function(timestamp) {\n var calendarCtrl = this.calendarCtrl;\n\n if (calendarCtrl.mode) {\n this.$mdUtil.nextTick(function() {\n calendarCtrl.setNgModelValue(calendarCtrl.$mdDateLocale.parseDate(timestamp));\n });\n } else {\n calendarCtrl.setCurrentView('month', timestamp);\n }\n };\n})();\n\n})();\n(function(){\n\"use strict\";\n\n(function() {\n 'use strict';\n\n CalendarYearBodyCtrl.$inject = [\"$element\", \"$$mdDateUtil\", \"$mdDateLocale\"];\n angular.module('material.components.datepicker')\n .directive('mdCalendarYearBody', mdCalendarYearDirective);\n\n /**\n * Private component, consumed by the md-calendar-year, which separates the DOM construction logic\n * and allows for the year view to use md-virtual-repeat.\n */\n function mdCalendarYearDirective() {\n return {\n require: ['^^mdCalendar', '^^mdCalendarYear', 'mdCalendarYearBody'],\n scope: { offset: '=mdYearOffset' },\n controller: CalendarYearBodyCtrl,\n controllerAs: 'mdYearBodyCtrl',\n bindToController: true,\n link: function(scope, element, attrs, controllers) {\n var calendarCtrl = controllers[0];\n var yearCtrl = controllers[1];\n var yearBodyCtrl = controllers[2];\n\n yearBodyCtrl.calendarCtrl = calendarCtrl;\n yearBodyCtrl.yearCtrl = yearCtrl;\n\n scope.$watch(function() { return yearBodyCtrl.offset; }, function(offset) {\n if (angular.isNumber(offset)) {\n yearBodyCtrl.generateContent();\n }\n });\n }\n };\n }\n\n /**\n * Controller for a single year.\n * @ngInject @constructor\n */\n function CalendarYearBodyCtrl($element, $$mdDateUtil, $mdDateLocale) {\n /**\n * @final\n * @type {!JQLite}\n */\n this.$element = $element;\n\n /** @final */\n this.dateUtil = $$mdDateUtil;\n\n /** @final */\n this.dateLocale = $mdDateLocale;\n\n /** @type {Object} Reference to the calendar. */\n this.calendarCtrl = null;\n\n /** @type {Object} Reference to the year view. */\n this.yearCtrl = null;\n\n /**\n * Number of months from the start of the month \"items\" that the currently rendered month\n * occurs. Set via angular data binding.\n * @type {number|null}\n */\n this.offset = null;\n\n /**\n * Date cell to focus after appending the month to the document.\n * @type {HTMLElement}\n */\n this.focusAfterAppend = null;\n }\n\n /** Generate and append the content for this year to the directive element. */\n CalendarYearBodyCtrl.prototype.generateContent = function() {\n var date = this.dateUtil.incrementYears(this.calendarCtrl.firstRenderableDate, this.offset);\n\n this.$element\n .empty()\n .append(this.buildCalendarForYear(date));\n\n if (this.focusAfterAppend) {\n this.focusAfterAppend.classList.add(this.calendarCtrl.FOCUSED_DATE_CLASS);\n this.focusAfterAppend = null;\n }\n };\n\n /**\n * Creates a single cell to contain a year in the calendar.\n * @param {number} year Four-digit year.\n * @param {number} month Zero-indexed month.\n * @returns {HTMLElement}\n */\n CalendarYearBodyCtrl.prototype.buildMonthCell = function(year, month) {\n var calendarCtrl = this.calendarCtrl;\n var yearCtrl = this.yearCtrl;\n var cell = this.buildBlankCell();\n\n // Represent this month/year as a date.\n var firstOfMonth = new Date(year, month, 1);\n cell.setAttribute('aria-label', this.dateLocale.monthFormatter(firstOfMonth));\n cell.id = calendarCtrl.getDateId(firstOfMonth, 'year');\n\n // Use `data-timestamp` attribute because IE10 does not support the `dataset` property.\n cell.setAttribute('data-timestamp', String(firstOfMonth.getTime()));\n\n if (this.dateUtil.isSameMonthAndYear(firstOfMonth, calendarCtrl.today)) {\n cell.classList.add(calendarCtrl.TODAY_CLASS);\n }\n\n if (this.dateUtil.isValidDate(calendarCtrl.selectedDate) &&\n this.dateUtil.isSameMonthAndYear(firstOfMonth, calendarCtrl.selectedDate)) {\n cell.classList.add(calendarCtrl.SELECTED_DATE_CLASS);\n cell.setAttribute('aria-selected', 'true');\n }\n\n var cellText = this.dateLocale.shortMonths[month];\n\n if (this.dateUtil.isMonthWithinRange(\n firstOfMonth, calendarCtrl.minDate, calendarCtrl.maxDate) &&\n (!angular.isFunction(calendarCtrl.monthFilter) ||\n calendarCtrl.monthFilter(firstOfMonth))) {\n var selectionIndicator = document.createElement('span');\n selectionIndicator.classList.add('md-calendar-date-selection-indicator');\n selectionIndicator.textContent = cellText;\n cell.appendChild(selectionIndicator);\n cell.addEventListener('click', yearCtrl.cellClickHandler);\n\n if (calendarCtrl.displayDate &&\n this.dateUtil.isSameMonthAndYear(firstOfMonth, calendarCtrl.displayDate)) {\n this.focusAfterAppend = cell;\n }\n } else {\n cell.classList.add('md-calendar-date-disabled');\n cell.textContent = cellText;\n }\n\n return cell;\n };\n\n /**\n * Builds a blank cell.\n * @return {HTMLElement}\n */\n CalendarYearBodyCtrl.prototype.buildBlankCell = function() {\n var cell = document.createElement('td');\n cell.tabIndex = -1;\n cell.classList.add('md-calendar-date');\n cell.setAttribute('role', 'gridcell');\n\n cell.setAttribute('tabindex', '-1');\n return cell;\n };\n\n /**\n * Builds the ' +\n ' ' +\n triangleButton +\n '
' +\n\n // This pane will be detached from here and re-attached to the document body.\n '' +\n '
';\n },\n require: ['ngModel', 'mdDatepicker', '?^mdInputContainer', '?^form'],\n scope: {\n minDate: '=mdMinDate',\n maxDate: '=mdMaxDate',\n placeholder: '@mdPlaceholder',\n currentView: '@mdCurrentView',\n mode: '@mdMode',\n dateFilter: '=mdDateFilter',\n monthFilter: '=mdMonthFilter',\n isOpen: '=?mdIsOpen',\n debounceInterval: '=mdDebounceInterval',\n dateLocale: '=mdDateLocale'\n },\n controller: DatePickerCtrl,\n controllerAs: 'ctrl',\n bindToController: true,\n link: function(scope, element, attr, controllers) {\n var ngModelCtrl = controllers[0];\n var mdDatePickerCtrl = controllers[1];\n var mdInputContainer = controllers[2];\n var parentForm = controllers[3];\n var mdNoAsterisk = $mdUtil.parseAttributeBoolean(attr.mdNoAsterisk);\n\n mdDatePickerCtrl.configureNgModel(ngModelCtrl, mdInputContainer, inputDirective);\n\n if (mdInputContainer) {\n // We need to move the spacer after the datepicker itself,\n // because md-input-container adds it after the\n // md-datepicker-input by default. The spacer gets wrapped in a\n // div, because it floats and gets aligned next to the datepicker.\n // There are easier ways of working around this with CSS (making the\n // datepicker 100% wide, change the `display` etc.), however they\n // break the alignment with any other form controls.\n var spacer = element[0].querySelector('.md-errors-spacer');\n\n if (spacer) {\n element.after(angular.element('' +\n '' +\n '
' +\n '' +\n '' +\n ' ' +\n '
' +\n '').append(spacer));\n }\n\n mdInputContainer.setHasPlaceholder(attr.mdPlaceholder);\n mdInputContainer.input = element;\n mdInputContainer.element\n .addClass(INPUT_CONTAINER_CLASS)\n .toggleClass(HAS_CALENDAR_ICON_CLASS, attr.mdHideIcons !== 'calendar' && attr.mdHideIcons !== 'all');\n\n if (!mdInputContainer.label) {\n $mdAria.expect(element, 'aria-label', attr.mdPlaceholder);\n } else if (!mdNoAsterisk) {\n attr.$observe('required', function(value) {\n mdInputContainer.label.toggleClass('md-required', !!value);\n });\n }\n\n scope.$watch(mdInputContainer.isErrorGetter || function() {\n return ngModelCtrl.$invalid && (ngModelCtrl.$touched || (parentForm && parentForm.$submitted));\n }, mdInputContainer.setInvalid);\n } else if (parentForm) {\n // If invalid, highlights the input when the parent form is submitted.\n var parentSubmittedWatcher = scope.$watch(function() {\n return parentForm.$submitted;\n }, function(isSubmitted) {\n if (isSubmitted) {\n mdDatePickerCtrl.updateErrorState();\n parentSubmittedWatcher();\n }\n });\n }\n }\n };\n }\n\n /** Additional offset for the input's `size` attribute, which is updated based on its content. */\n var EXTRA_INPUT_SIZE = 3;\n\n /** Class applied to the container if the date is invalid. */\n var INVALID_CLASS = 'md-datepicker-invalid';\n\n /** Class applied to the datepicker when it's open. */\n var OPEN_CLASS = 'md-datepicker-open';\n\n /** Class applied to the md-input-container, if a datepicker is placed inside it */\n var INPUT_CONTAINER_CLASS = '_md-datepicker-floating-label';\n\n /** Class to be applied when the calendar icon is enabled. */\n var HAS_CALENDAR_ICON_CLASS = '_md-datepicker-has-calendar-icon';\n\n /** Class to be applied when the triangle icon is enabled. */\n var HAS_TRIANGLE_ICON_CLASS = '_md-datepicker-has-triangle-icon';\n\n /** Default time in ms to debounce input event by. */\n var DEFAULT_DEBOUNCE_INTERVAL = 500;\n\n /**\n * Height of the calendar pane used to check if the pane is going outside the boundary of\n * the viewport. See calendar.scss for how $md-calendar-height is computed; an extra 20px is\n * also added to space the pane away from the exact edge of the screen.\n *\n * This is computed statically now, but can be changed to be measured if the circumstances\n * of calendar sizing are changed.\n */\n var CALENDAR_PANE_HEIGHT = 368;\n\n /**\n * Width of the calendar pane used to check if the pane is going outside the boundary of\n * the viewport. See calendar.scss for how $md-calendar-width is computed; an extra 20px is\n * also added to space the pane away from the exact edge of the screen.\n *\n * This is computed statically now, but can be changed to be measured if the circumstances\n * of calendar sizing are changed.\n */\n var CALENDAR_PANE_WIDTH = 360;\n\n /** Used for checking whether the current user agent is on iOS or Android. */\n var IS_MOBILE_REGEX = /ipad|iphone|ipod|android/i;\n\n /**\n * Controller for md-datepicker.\n *\n * @ngInject @constructor\n */\n function DatePickerCtrl($scope, $element, $attrs, $window, $mdConstant, $mdTheming, $mdUtil,\n $mdDateLocale, $$mdDateUtil, $$rAF, $filter, $timeout) {\n\n /** @final */\n this.$window = $window;\n\n /** @final */\n this.dateUtil = $$mdDateUtil;\n\n /** @final */\n this.$mdConstant = $mdConstant;\n\n /** @final */\n this.$mdUtil = $mdUtil;\n\n /** @final */\n this.$$rAF = $$rAF;\n\n /** @final */\n this.$mdDateLocale = $mdDateLocale;\n\n /** @final */\n this.$timeout = $timeout;\n\n /**\n * The root document element. This is used for attaching a top-level click handler to\n * close the calendar panel when a click outside said panel occurs. We use `documentElement`\n * instead of body because, when scrolling is disabled, some browsers consider the body element\n * to be completely off the screen and propagate events directly to the html element.\n * @type {!JQLite}\n */\n this.documentElement = angular.element(document.documentElement);\n\n /** @type {!ngModel.NgModelController} */\n this.ngModelCtrl = null;\n\n /** @type {HTMLInputElement} */\n this.inputElement = $element[0].querySelector('input');\n\n /**\n * @final\n * @type {!JQLite}\n */\n this.ngInputElement = angular.element(this.inputElement);\n\n /** @type {HTMLElement} */\n this.inputContainer = $element[0].querySelector('.md-datepicker-input-container');\n\n /** @type {HTMLElement} Floating calendar pane. */\n this.calendarPane = $element[0].querySelector('.md-datepicker-calendar-pane');\n\n /** @type {HTMLElement} Calendar icon button. */\n this.calendarButton = $element[0].querySelector('.md-datepicker-button');\n\n /**\n * Element covering everything but the input in the top of the floating calendar pane.\n * @type {!JQLite}\n */\n this.inputMask = angular.element($element[0].querySelector('.md-datepicker-input-mask-opaque'));\n\n /**\n * @final\n * @type {!JQLite}\n */\n this.$element = $element;\n\n /**\n * @final\n * @type {!angular.Attributes}\n */\n this.$attrs = $attrs;\n\n /**\n * @final\n * @type {!angular.Scope}\n */\n this.$scope = $scope;\n\n /** @type {Date} */\n this.date = null;\n\n /** @type {boolean} */\n this.isFocused = false;\n\n /** @type {boolean} */\n this.isDisabled = undefined;\n this.setDisabled($element[0].disabled || angular.isString($attrs.disabled));\n\n /** @type {boolean} Whether the date-picker's calendar pane is open. */\n this.isCalendarOpen = false;\n\n /** @type {boolean} Whether the calendar should open when the input is focused. */\n this.openOnFocus = $attrs.hasOwnProperty('mdOpenOnFocus');\n\n /** @type {Object} Instance of the mdInputContainer controller */\n this.mdInputContainer = null;\n\n /**\n * Element from which the calendar pane was opened. Keep track of this so that we can return\n * focus to it when the pane is closed.\n * @type {HTMLElement}\n */\n this.calendarPaneOpenedFrom = null;\n\n /** @type {String} Unique id for the calendar pane. */\n this.calendarPaneId = 'md-date-pane-' + $mdUtil.nextUid();\n\n /** Pre-bound click handler is saved so that the event listener can be removed. */\n this.bodyClickHandler = angular.bind(this, this.handleBodyClick);\n\n /**\n * Name of the event that will trigger a close. Necessary to sniff the browser, because\n * the resize event doesn't make sense on mobile and can have a negative impact since it\n * triggers whenever the browser zooms in on a focused input.\n */\n this.windowEventName = IS_MOBILE_REGEX.test(\n navigator.userAgent || navigator.vendor || window.opera\n ) ? 'orientationchange' : 'resize';\n\n /** Pre-bound close handler so that the event listener can be removed. */\n this.windowEventHandler = $mdUtil.debounce(angular.bind(this, this.closeCalendarPane), 100);\n\n /** Pre-bound handler for the window blur event. Allows for it to be removed later. */\n this.windowBlurHandler = angular.bind(this, this.handleWindowBlur);\n\n /** The built-in AngularJS date filter. */\n this.ngDateFilter = $filter('date');\n\n /** @type {Number} Extra margin for the left side of the floating calendar pane. */\n this.leftMargin = 20;\n\n /** @type {Number} Extra margin for the top of the floating calendar. Gets determined on the first open. */\n this.topMargin = null;\n\n // Unless the user specifies so, the datepicker should not be a tab stop.\n // This is necessary because ngAria might add a tabindex to anything with an ng-model\n // (based on whether or not the user has turned that particular feature on/off).\n if ($attrs.tabindex) {\n this.ngInputElement.attr('tabindex', $attrs.tabindex);\n $attrs.$set('tabindex', null);\n } else {\n $attrs.$set('tabindex', '-1');\n }\n\n $attrs.$set('aria-owns', this.calendarPaneId);\n\n $mdTheming($element);\n $mdTheming(angular.element(this.calendarPane));\n\n var self = this;\n\n $scope.$on('$destroy', function() {\n self.detachCalendarPane();\n });\n\n if ($attrs.mdIsOpen) {\n $scope.$watch('ctrl.isOpen', function(shouldBeOpen) {\n if (shouldBeOpen) {\n self.openCalendarPane({\n target: self.inputElement\n });\n } else {\n self.closeCalendarPane();\n }\n });\n }\n\n // For AngularJS 1.4 and older, where there are no lifecycle hooks but bindings are pre-assigned,\n // manually call the $onInit hook.\n if (angular.version.major === 1 && angular.version.minor <= 4) {\n this.$onInit();\n }\n }\n\n /**\n * AngularJS Lifecycle hook for newer AngularJS versions.\n * Bindings are not guaranteed to have been assigned in the controller, but they are in the $onInit hook.\n */\n DatePickerCtrl.prototype.$onInit = function() {\n\n /**\n * Holds locale-specific formatters, parsers, labels etc. Allows\n * the user to override specific ones from the $mdDateLocale provider.\n * @type {!Object}\n */\n this.locale = this.dateLocale ? angular.extend({}, this.$mdDateLocale, this.dateLocale) : this.$mdDateLocale;\n\n this.installPropertyInterceptors();\n this.attachChangeListeners();\n this.attachInteractionListeners();\n };\n\n /**\n * Sets up the controller's reference to ngModelController and\n * applies AngularJS's `input[type=\"date\"]` directive.\n * @param {!angular.NgModelController} ngModelCtrl Instance of the ngModel controller.\n * @param {Object} mdInputContainer Instance of the mdInputContainer controller.\n * @param {Object} inputDirective Config for AngularJS's `input` directive.\n */\n DatePickerCtrl.prototype.configureNgModel = function(ngModelCtrl, mdInputContainer, inputDirective) {\n this.ngModelCtrl = ngModelCtrl;\n this.mdInputContainer = mdInputContainer;\n\n // The input needs to be [type=\"date\"] in order to be picked up by AngularJS.\n this.$attrs.$set('type', 'date');\n\n // Invoke the `input` directive link function, adding a stub for the element.\n // This allows us to re-use AngularJS's logic for setting the timezone via ng-model-options.\n // It works by calling the link function directly which then adds the proper `$parsers` and\n // `$formatters` to the ngModel controller.\n inputDirective[0].link.pre(this.$scope, {\n on: angular.noop,\n val: angular.noop,\n 0: {}\n }, this.$attrs, [ngModelCtrl]);\n\n var self = this;\n\n // Responds to external changes to the model value.\n self.ngModelCtrl.$formatters.push(function(value) {\n var parsedValue = angular.isDefined(value) ? value : null;\n\n if (!(value instanceof Date)) {\n parsedValue = Date.parse(value);\n\n // `parsedValue` is the time since epoch if valid or `NaN` if invalid.\n if (!isNaN(parsedValue) && angular.isNumber(parsedValue)) {\n value = new Date(parsedValue);\n }\n\n if (value && !(value instanceof Date)) {\n throw Error(\n 'The ng-model for md-datepicker must be a Date instance or a value ' +\n 'that can be parsed into a date. Currently the model is of type: ' + typeof value\n );\n }\n }\n\n self.onExternalChange(value);\n\n return value;\n });\n\n // Responds to external error state changes (e.g. ng-required based on another input).\n ngModelCtrl.$viewChangeListeners.unshift(angular.bind(this, this.updateErrorState));\n\n // Forwards any events from the input to the root element. This is necessary to get `updateOn`\n // working for events that don't bubble (e.g. 'blur') since AngularJS binds the handlers to\n // the ``.\n var updateOn = self.$mdUtil.getModelOption(ngModelCtrl, 'updateOn');\n\n if (updateOn) {\n this.ngInputElement.on(\n updateOn,\n angular.bind(this.$element, this.$element.triggerHandler, updateOn)\n );\n }\n };\n\n /**\n * Attach event listeners for both the text input and the md-calendar.\n * Events are used instead of ng-model so that updates don't infinitely update the other\n * on a change. This should also be more performant than using a $watch.\n */\n DatePickerCtrl.prototype.attachChangeListeners = function() {\n var self = this;\n\n self.$scope.$on('md-calendar-change', function(event, date) {\n self.setModelValue(date);\n self.onExternalChange(date);\n self.closeCalendarPane();\n });\n\n self.ngInputElement.on('input', angular.bind(self, self.resizeInputElement));\n\n var debounceInterval = angular.isDefined(this.debounceInterval) ?\n this.debounceInterval : DEFAULT_DEBOUNCE_INTERVAL;\n self.ngInputElement.on('input', self.$mdUtil.debounce(self.handleInputEvent,\n debounceInterval, self));\n };\n\n /** Attach event listeners for user interaction. */\n DatePickerCtrl.prototype.attachInteractionListeners = function() {\n var self = this;\n var $scope = this.$scope;\n var keyCodes = this.$mdConstant.KEY_CODE;\n\n // Add event listener through angular so that we can triggerHandler in unit tests.\n self.ngInputElement.on('keydown', function(event) {\n if (event.altKey && event.keyCode === keyCodes.DOWN_ARROW) {\n self.openCalendarPane(event);\n $scope.$digest();\n }\n });\n\n if (self.openOnFocus) {\n self.ngInputElement.on('focus', angular.bind(self, self.openCalendarPane));\n self.ngInputElement.on('click', function(event) {\n event.stopPropagation();\n });\n self.ngInputElement.on('pointerdown',function(event) {\n if (event.target && event.target.setPointerCapture) {\n event.target.setPointerCapture(event.pointerId);\n }\n });\n\n angular.element(self.$window).on('blur', self.windowBlurHandler);\n\n $scope.$on('$destroy', function() {\n angular.element(self.$window).off('blur', self.windowBlurHandler);\n });\n }\n\n $scope.$on('md-calendar-close', function() {\n self.closeCalendarPane();\n });\n };\n\n /**\n * Capture properties set to the date-picker and imperatively handle internal changes.\n * This is done to avoid setting up additional $watches.\n */\n DatePickerCtrl.prototype.installPropertyInterceptors = function() {\n var self = this;\n\n if (this.$attrs.ngDisabled) {\n // The expression is to be evaluated against the directive element's scope and not\n // the directive's isolate scope.\n var scope = this.$scope.$parent;\n\n if (scope) {\n scope.$watch(this.$attrs.ngDisabled, function(isDisabled) {\n self.setDisabled(isDisabled);\n });\n }\n }\n\n Object.defineProperty(this, 'placeholder', {\n get: function() { return self.inputElement.placeholder; },\n set: function(value) { self.inputElement.placeholder = value || ''; }\n });\n };\n\n /**\n * Sets whether the date-picker is disabled.\n * @param {boolean} isDisabled\n */\n DatePickerCtrl.prototype.setDisabled = function(isDisabled) {\n this.isDisabled = isDisabled;\n this.inputElement.disabled = isDisabled;\n\n if (this.calendarButton) {\n this.calendarButton.disabled = isDisabled;\n }\n };\n\n /**\n * Sets the custom ngModel.$error flags to be consumed by ngMessages. Flags are:\n * - mindate: whether the selected date is before the minimum date.\n * - maxdate: whether the selected flag is after the maximum date.\n * - filtered: whether the selected date is allowed by the custom filtering function.\n * - valid: whether the entered text input is a valid date\n *\n * The 'required' flag is handled automatically by ngModel.\n *\n * @param {Date=} opt_date Date to check. If not given, defaults to the datepicker's model value.\n */\n DatePickerCtrl.prototype.updateErrorState = function(opt_date) {\n var date = opt_date || this.date;\n\n // Clear any existing errors to get rid of anything that's no longer relevant.\n this.clearErrorState();\n\n if (this.dateUtil.isValidDate(date)) {\n // Force all dates to midnight in order to ignore the time portion.\n date = this.dateUtil.createDateAtMidnight(date);\n\n if (this.dateUtil.isValidDate(this.minDate)) {\n var minDate = this.dateUtil.createDateAtMidnight(this.minDate);\n this.ngModelCtrl.$setValidity('mindate', date >= minDate);\n }\n\n if (this.dateUtil.isValidDate(this.maxDate)) {\n var maxDate = this.dateUtil.createDateAtMidnight(this.maxDate);\n this.ngModelCtrl.$setValidity('maxdate', date <= maxDate);\n }\n\n if (angular.isFunction(this.dateFilter)) {\n this.ngModelCtrl.$setValidity('filtered', this.dateFilter(date));\n }\n\n if (angular.isFunction(this.monthFilter)) {\n this.ngModelCtrl.$setValidity('filtered', this.monthFilter(date));\n }\n } else {\n // The date is seen as \"not a valid date\" if there is *something* set\n // (i.e.., not null or undefined), but that something isn't a valid date.\n this.ngModelCtrl.$setValidity('valid', date == null);\n }\n\n var input = this.inputElement.value;\n var parsedDate = this.locale.parseDate(input);\n\n if (!this.isInputValid(input, parsedDate) && this.ngModelCtrl.$valid) {\n this.ngModelCtrl.$setValidity('valid', date == null);\n }\n\n angular.element(this.inputContainer).toggleClass(INVALID_CLASS,\n this.ngModelCtrl.$invalid && (this.ngModelCtrl.$touched || this.ngModelCtrl.$submitted));\n };\n\n /**\n * Check to see if the input is valid, as the validation should fail if the model is invalid.\n *\n * @param {string} inputString\n * @param {Date} parsedDate\n * @return {boolean} Whether the input is valid\n */\n DatePickerCtrl.prototype.isInputValid = function (inputString, parsedDate) {\n return inputString === '' || (\n this.dateUtil.isValidDate(parsedDate) &&\n this.locale.isDateComplete(inputString) &&\n this.isDateEnabled(parsedDate)\n );\n };\n\n /** Clears any error flags set by `updateErrorState`. */\n DatePickerCtrl.prototype.clearErrorState = function() {\n this.inputContainer.classList.remove(INVALID_CLASS);\n ['mindate', 'maxdate', 'filtered', 'valid'].forEach(function(field) {\n this.ngModelCtrl.$setValidity(field, true);\n }, this);\n };\n\n /** Resizes the input element based on the size of its content. */\n DatePickerCtrl.prototype.resizeInputElement = function() {\n this.inputElement.size = this.inputElement.value.length + EXTRA_INPUT_SIZE;\n };\n\n /**\n * Sets the model value if the user input is a valid date.\n * Adds an invalid class to the input element if not.\n */\n DatePickerCtrl.prototype.handleInputEvent = function() {\n var inputString = this.inputElement.value;\n var parsedDate = inputString ? this.locale.parseDate(inputString) : null;\n this.dateUtil.setDateTimeToMidnight(parsedDate);\n\n // An input string is valid if it is either empty (representing no date)\n // or if it parses to a valid date that the user is allowed to select.\n var isValidInput = this.isInputValid(inputString, parsedDate);\n\n // The datepicker's model is only updated when there is a valid input.\n if (isValidInput) {\n this.setModelValue(parsedDate);\n this.date = parsedDate;\n }\n\n this.updateErrorState(parsedDate);\n };\n\n /**\n * Check whether date is in range and enabled\n * @param {Date=} opt_date\n * @return {boolean} Whether the date is enabled.\n */\n DatePickerCtrl.prototype.isDateEnabled = function(opt_date) {\n return this.dateUtil.isDateWithinRange(opt_date, this.minDate, this.maxDate) &&\n (!angular.isFunction(this.dateFilter) || this.dateFilter(opt_date)) &&\n (!angular.isFunction(this.monthFilter) || this.monthFilter(opt_date));\n };\n\n /** Position and attach the floating calendar to the document. */\n DatePickerCtrl.prototype.attachCalendarPane = function() {\n var calendarPane = this.calendarPane;\n var body = document.body;\n\n calendarPane.style.transform = '';\n this.$element.addClass(OPEN_CLASS);\n this.mdInputContainer && this.mdInputContainer.element.addClass(OPEN_CLASS);\n angular.element(body).addClass('md-datepicker-is-showing');\n\n var elementRect = this.inputContainer.getBoundingClientRect();\n var bodyRect = body.getBoundingClientRect();\n\n if (!this.topMargin || this.topMargin < 0) {\n this.topMargin = (this.inputMask.parent().prop('clientHeight') - this.ngInputElement.prop('clientHeight')) / 2;\n }\n\n // Check to see if the calendar pane would go off the screen. If so, adjust position\n // accordingly to keep it within the viewport.\n var paneTop = elementRect.top - bodyRect.top - this.topMargin;\n var paneLeft = elementRect.left - bodyRect.left - this.leftMargin;\n\n // If ng-material has disabled body scrolling (for example, if a dialog is open),\n // then it's possible that the already-scrolled body has a negative top/left. In this case,\n // we want to treat the \"real\" top as (0 - bodyRect.top). In a normal scrolling situation,\n // though, the top of the viewport should just be the body's scroll position.\n var viewportTop = (bodyRect.top < 0 && document.body.scrollTop === 0) ?\n -bodyRect.top :\n document.body.scrollTop;\n\n var viewportLeft = (bodyRect.left < 0 && document.body.scrollLeft === 0) ?\n -bodyRect.left :\n document.body.scrollLeft;\n\n var viewportBottom = viewportTop + this.$window.innerHeight;\n var viewportRight = viewportLeft + this.$window.innerWidth;\n\n // Creates an overlay with a hole the same size as element. We remove a pixel or two\n // on each end to make it overlap slightly. The overlay's background is added in\n // the theme in the form of a box-shadow with a huge spread.\n this.inputMask.css({\n position: 'absolute',\n left: this.leftMargin + 'px',\n top: this.topMargin + 'px',\n width: (elementRect.width - 1) + 'px',\n height: (elementRect.height - 2) + 'px'\n });\n\n // If the right edge of the pane would be off the screen and shifting it left by the\n // difference would not go past the left edge of the screen. If the calendar pane is too\n // big to fit on the screen at all, move it to the left of the screen and scale the entire\n // element down to fit.\n if (paneLeft + CALENDAR_PANE_WIDTH > viewportRight) {\n if (viewportRight - CALENDAR_PANE_WIDTH > 0) {\n paneLeft = viewportRight - CALENDAR_PANE_WIDTH;\n } else {\n paneLeft = viewportLeft;\n var scale = this.$window.innerWidth / CALENDAR_PANE_WIDTH;\n calendarPane.style.transform = 'scale(' + scale + ')';\n }\n\n calendarPane.classList.add('md-datepicker-pos-adjusted');\n }\n\n // If the bottom edge of the pane would be off the screen and shifting it up by the\n // difference would not go past the top edge of the screen.\n if (paneTop + CALENDAR_PANE_HEIGHT > viewportBottom &&\n viewportBottom - CALENDAR_PANE_HEIGHT > viewportTop) {\n paneTop = viewportBottom - CALENDAR_PANE_HEIGHT;\n calendarPane.classList.add('md-datepicker-pos-adjusted');\n }\n\n calendarPane.style.left = paneLeft + 'px';\n calendarPane.style.top = paneTop + 'px';\n document.body.appendChild(calendarPane);\n\n // Add CSS class after one frame to trigger open animation.\n this.$$rAF(function() {\n calendarPane.classList.add('md-pane-open');\n });\n };\n\n /** Detach the floating calendar pane from the document. */\n DatePickerCtrl.prototype.detachCalendarPane = function() {\n this.$element.removeClass(OPEN_CLASS);\n this.mdInputContainer && this.mdInputContainer.element.removeClass(OPEN_CLASS);\n angular.element(document.body).removeClass('md-datepicker-is-showing');\n this.calendarPane.classList.remove('md-pane-open');\n this.calendarPane.classList.remove('md-datepicker-pos-adjusted');\n\n if (this.isCalendarOpen) {\n this.$mdUtil.enableScrolling();\n }\n\n if (this.calendarPane.parentNode) {\n // Use native DOM removal because we do not want any of the\n // angular state of this element to be disposed.\n this.calendarPane.parentNode.removeChild(this.calendarPane);\n }\n };\n\n /**\n * Open the floating calendar pane.\n * @param {Event} event\n */\n DatePickerCtrl.prototype.openCalendarPane = function(event) {\n if (!this.isCalendarOpen && !this.isDisabled && !this.inputFocusedOnWindowBlur) {\n this.isCalendarOpen = this.isOpen = true;\n this.calendarPaneOpenedFrom = event.target;\n\n // Because the calendar pane is attached directly to the body, it is possible that the\n // rest of the component (input, etc) is in a different scrolling container, such as\n // an md-content. This means that, if the container is scrolled, the pane would remain\n // stationary. To remedy this, we disable scrolling while the calendar pane is open, which\n // also matches the native behavior for things like `