\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 \r\n * \r\n * Left Nav!\r\n * \r\n *\r\n * \r\n * Center Content\r\n * \r\n * Open Left Menu\r\n * \r\n * \r\n *\r\n * \r\n * \r\n * \r\n *
\r\n * | Breakpoint | \r\n *mediaQuery | \r\n *
|---|---|
| xs | \r\n *(max-width: 599px) | \r\n *
| gt-xs | \r\n *(min-width: 600px) | \r\n *
| sm | \r\n *(min-width: 600px) and (max-width: 959px) | \r\n *
| gt-sm | \r\n *(min-width: 960px) | \r\n *
| md | \r\n *(min-width: 960px) and (max-width: 1279px) | \r\n *
| gt-md | \r\n *(min-width: 1280px) | \r\n *
| lg | \r\n *(min-width: 1280px) and (max-width: 1919px) | \r\n *
| gt-lg | \r\n *(min-width: 1920px) | \r\n *
| xl | \r\n *(min-width: 1920px) | \r\n *
| landscape | \r\n *landscape | \r\n *
| portrait | \r\n *portrait | \r\n *
![](\"https://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B8olV15J7abPSGFxemFiQVRtb1k/layout_adaptive_breakpoints_01.png\")
\r\n * \r\n *\r\n * @returns {boolean} a boolean representing whether or not the given media query is true or false.\r\n *\r\n * @usage\r\n * ' +\r\n ' ' +\r\n '
');\r\n wrappedElementToDisable.append(scrollMask);\r\n }\r\n\r\n /**\r\n * @param {Event} $event\r\n */\r\n function preventDefault($event) {\r\n $event.preventDefault();\r\n }\r\n\r\n scrollMask.on('wheel touchmove', preventDefault);\r\n\r\n return function restoreElementScroll() {\r\n scrollMask.off('wheel touchmove', preventDefault);\r\n\r\n if (!scrollMaskOptions.disableScrollMask && scrollMask[0].parentNode) {\r\n scrollMask[0].parentNode.removeChild(scrollMask[0]);\r\n }\r\n };\r\n }\r\n\r\n // Converts the body to a position fixed block and translate it to the proper scroll position\r\n function disableBodyScroll() {\r\n var documentElement = $document[0].documentElement;\r\n\r\n var prevDocumentStyle = documentElement.style.cssText || '';\r\n var prevBodyStyle = body.style.cssText || '';\r\n\r\n var viewportTop = $mdUtil.getViewportTop();\r\n $mdUtil.disableScrollAround._viewPortTop = viewportTop;\r\n var clientWidth = body.clientWidth;\r\n var hasVerticalScrollbar = body.scrollHeight > body.clientHeight + 1;\r\n\r\n // Scroll may be set on element (for example by overflow-y: scroll)\r\n // but Chrome is reporting the scrollTop position always on .\r\n // scrollElement will allow to restore the scrollTop position to proper target.\r\n var scrollElement = documentElement.scrollTop > 0 ? documentElement : body;\r\n\r\n if (hasVerticalScrollbar) {\r\n angular.element(body).css({\r\n position: 'fixed',\r\n width: '100%',\r\n top: -viewportTop + 'px'\r\n });\r\n }\r\n\r\n if (body.clientWidth < clientWidth) {\r\n body.style.overflow = 'hidden';\r\n }\r\n\r\n return function restoreScroll() {\r\n // Reset the inline style CSS to the previous.\r\n body.style.cssText = prevBodyStyle;\r\n documentElement.style.cssText = prevDocumentStyle;\r\n\r\n // The scroll position while being fixed\r\n scrollElement.scrollTop = viewportTop;\r\n };\r\n }\r\n\r\n },\r\n\r\n enableScrolling: function() {\r\n var restoreFn = this.disableScrollAround._restoreScroll;\r\n restoreFn && restoreFn();\r\n },\r\n\r\n floatingScrollbars: function() {\r\n if (this.floatingScrollbars.cached === undefined) {\r\n var tempNode = angular.element('').css({\r\n width: '100%',\r\n 'z-index': -1,\r\n position: 'absolute',\r\n height: '35px',\r\n 'overflow-y': 'scroll'\r\n });\r\n tempNode.children().css('height', '60px');\r\n\r\n $document[0].body.appendChild(tempNode[0]);\r\n this.floatingScrollbars.cached =\r\n (tempNode[0].offsetWidth === tempNode[0].childNodes[0].offsetWidth);\r\n tempNode.remove();\r\n }\r\n return this.floatingScrollbars.cached;\r\n },\r\n\r\n /**\r\n * Mobile safari only allows you to set focus in click event listeners.\r\n * @param {Element|JQLite} element to focus\r\n */\r\n forceFocus: function(element) {\r\n var node = element[0] || element;\r\n\r\n document.addEventListener('click', function focusOnClick(ev) {\r\n if (ev.target === node && ev.$focus) {\r\n node.focus();\r\n ev.stopImmediatePropagation();\r\n ev.preventDefault();\r\n node.removeEventListener('click', focusOnClick);\r\n }\r\n }, true);\r\n\r\n var newEvent = document.createEvent('MouseEvents');\r\n newEvent.initMouseEvent('click', false, true, window, {}, 0, 0, 0, 0,\r\n false, false, false, false, 0, null);\r\n newEvent.$material = true;\r\n newEvent.$focus = true;\r\n node.dispatchEvent(newEvent);\r\n },\r\n\r\n /**\r\n * facade to build md-backdrop element with desired styles\r\n * NOTE: Use $compile to trigger backdrop postLink function\r\n */\r\n createBackdrop: function(scope, addClass) {\r\n return $compile($mdUtil.supplant('
');\r\n $document[0].body.appendChild(testEl[0]);\r\n\r\n var stickyProps = ['sticky', '-webkit-sticky'];\r\n for (var i = 0; i < stickyProps.length; ++i) {\r\n testEl.css({\r\n position: stickyProps[i],\r\n top: 0,\r\n 'z-index': 2\r\n });\r\n\r\n if (testEl.css('position') == stickyProps[i]) {\r\n stickyProp = stickyProps[i];\r\n break;\r\n }\r\n }\r\n\r\n testEl.remove();\r\n\r\n return stickyProp;\r\n },\r\n\r\n /**\r\n * Parses an attribute value, mostly a string.\r\n * By default checks for negated values and returns `false´ if present.\r\n * Negated values are: (native falsy) and negative strings like:\r\n * `false` or `0`.\r\n * @param value Attribute value which should be parsed.\r\n * @param negatedCheck When set to false, won't check for negated values.\r\n * @returns {boolean}\r\n */\r\n parseAttributeBoolean: function(value, negatedCheck) {\r\n return value === '' || !!value && (negatedCheck === false || value !== 'false' && value !== '0');\r\n },\r\n\r\n hasComputedStyle: hasComputedStyle,\r\n\r\n /**\r\n * Returns true if the parent form of the element has been submitted.\r\n * @param element An AngularJS or HTML5 element.\r\n * @returns {boolean}\r\n */\r\n isParentFormSubmitted: function(element) {\r\n var parent = $mdUtil.getClosest(element, 'form');\r\n var form = parent ? angular.element(parent).controller('form') : null;\r\n\r\n return form ? form.$submitted : false;\r\n },\r\n\r\n /**\r\n * Animate the requested element's scrollTop to the requested scrollPosition with basic easing.\r\n * @param {!Element} element The element to scroll.\r\n * @param {number} scrollEnd The new/final scroll position.\r\n * @param {number=} duration Duration of the scroll. Default is 1000ms.\r\n */\r\n animateScrollTo: function(element, scrollEnd, duration) {\r\n var scrollStart = element.scrollTop;\r\n var scrollChange = scrollEnd - scrollStart;\r\n var scrollingDown = scrollStart < scrollEnd;\r\n var startTime = $mdUtil.now();\r\n\r\n $$rAF(scrollChunk);\r\n\r\n function scrollChunk() {\r\n var newPosition = calculateNewPosition();\r\n\r\n element.scrollTop = newPosition;\r\n\r\n if (scrollingDown ? newPosition < scrollEnd : newPosition > scrollEnd) {\r\n $$rAF(scrollChunk);\r\n }\r\n }\r\n\r\n function calculateNewPosition() {\r\n var easeDuration = duration || 1000;\r\n var currentTime = $mdUtil.now() - startTime;\r\n\r\n return ease(currentTime, scrollStart, scrollChange, easeDuration);\r\n }\r\n\r\n function ease(currentTime, start, change, duration) {\r\n // If the duration has passed (which can occur if our app loses focus due to $$rAF), jump\r\n // straight to the proper position\r\n if (currentTime > duration) {\r\n return start + change;\r\n }\r\n\r\n var ts = (currentTime /= duration) * currentTime;\r\n var tc = ts * currentTime;\r\n\r\n return start + change * (-2 * tc + 3 * ts);\r\n }\r\n },\r\n\r\n /**\r\n * Provides an easy mechanism for removing duplicates from an array.\r\n *\r\n * var myArray = [1, 2, 2, 3, 3, 3, 4, 4, 4, 4];\r\n *\r\n * $mdUtil.uniq(myArray) => [1, 2, 3, 4]\r\n *\r\n * @param {Array} array The array whose unique values should be returned.\r\n * @returns {Array|void} A copy of the array containing only unique values.\r\n */\r\n uniq: function(array) {\r\n if (!array) { return; }\r\n\r\n return array.filter(function(value, index, self) {\r\n return self.indexOf(value) === index;\r\n });\r\n },\r\n\r\n /**\r\n * Gets the inner HTML content of the given HTMLElement.\r\n * Only intended for use with SVG or Symbol elements in IE11.\r\n * @param {Element} element\r\n * @returns {string} the inner HTML of the element passed in\r\n */\r\n getInnerHTML: function(element) {\r\n // For SVG or Symbol elements, innerHTML returns `undefined` in IE.\r\n // Reference: https://stackoverflow.com/q/28129956/633107\r\n // The XMLSerializer API is supported on IE11 and is the recommended workaround.\r\n var serializer = new XMLSerializer();\r\n\r\n return Array.prototype.map.call(element.childNodes, function (child) {\r\n return serializer.serializeToString(child);\r\n }).join('');\r\n },\r\n\r\n /**\r\n * Gets the outer HTML content of the given HTMLElement.\r\n * Only intended for use with SVG or Symbol elements in IE11.\r\n * @param {Element} element\r\n * @returns {string} the outer HTML of the element passed in\r\n */\r\n getOuterHTML: function(element) {\r\n // For SVG or Symbol elements, outerHTML returns `undefined` in IE.\r\n // Reference: https://stackoverflow.com/q/29888050/633107\r\n // The XMLSerializer API is supported on IE11 and is the recommended workaround.\r\n var serializer = new XMLSerializer();\r\n return serializer.serializeToString(element);\r\n },\r\n\r\n /**\r\n * Support: IE 9-11 only\r\n * documentMode is an IE-only property\r\n * http://msdn.microsoft.com/en-us/library/ie/cc196988(v=vs.85).aspx\r\n */\r\n msie: window.document.documentMode,\r\n\r\n getTouchAction: function() {\r\n var testEl = document.createElement('div');\r\n var vendorPrefixes = ['', 'webkit', 'Moz', 'MS', 'ms', 'o'];\r\n\r\n for (var i = 0; i < vendorPrefixes.length; i++) {\r\n var prefix = vendorPrefixes[i];\r\n var property = prefix ? prefix + 'TouchAction' : 'touchAction';\r\n if (angular.isDefined(testEl.style[property])) {\r\n return property;\r\n }\r\n }\r\n },\r\n\r\n /**\r\n * @param {Event} event the event to calculate the bubble path for\r\n * @return {EventTarget[]} the set of nodes that this event could bubble up to\r\n */\r\n getEventPath: function(event) {\r\n var path = [];\r\n var currentTarget = event.target;\r\n while (currentTarget) {\r\n path.push(currentTarget);\r\n currentTarget = currentTarget.parentElement;\r\n }\r\n if (path.indexOf(window) === -1 && path.indexOf(document) === -1)\r\n path.push(document);\r\n if (path.indexOf(window) === -1)\r\n path.push(window);\r\n return path;\r\n },\r\n\r\n /**\r\n * Gets the string the user has entered and removes Regex identifiers\r\n * @param {string} term\r\n * @returns {string} sanitized string\r\n */\r\n sanitize: function(term) {\r\n if (!term) return term;\r\n return term.replace(/[\\\\^$*+?.()|{}[]/g, '\\\\$&');\r\n },\r\n\r\n /**********************************************************************************************\r\n * The following functions were sourced from\r\n * https://github.com/angular/components/blob/3c37e4b1c1cb74a3d0a90d173240fc730d21d9d4/src/cdk/a11y/interactivity-checker/interactivity-checker.ts\r\n **********************************************************************************************/\r\n\r\n /**\r\n * Gets whether an element is disabled.\r\n * @param {HTMLElement} element Element to be checked.\r\n * @returns {boolean} Whether the element is disabled.\r\n */\r\n isDisabled: function(element) {\r\n // This does not capture some cases, such as a non-form control with a disabled attribute or\r\n // a form control inside of a disabled form, but should capture the most common cases.\r\n return element.hasAttribute('disabled');\r\n },\r\n\r\n /**\r\n * Gets whether an element is visible for the purposes of interactivity.\r\n *\r\n * This will capture states like `display: none` and `visibility: hidden`, but not things like\r\n * being clipped by an `overflow: hidden` parent or being outside the viewport.\r\n *\r\n * @param {HTMLElement} element\r\n * @returns {boolean} Whether the element is visible.\r\n */\r\n isVisible: function(element) {\r\n return $mdUtil.hasGeometry(element) && getComputedStyle(element).visibility === 'visible';\r\n },\r\n\r\n /**\r\n * Gets whether an element can be reached via Tab key.\r\n * Assumes that the element has already been checked with isFocusable.\r\n * @param {HTMLElement} element Element to be checked.\r\n * @returns {boolean} Whether the element is tabbable.\r\n */\r\n isTabbable: function(element) {\r\n var frameElement = $mdUtil.getFrameElement($mdUtil.getWindow(element));\r\n\r\n if (frameElement) {\r\n // Frame elements inherit their tabindex onto all child elements.\r\n if ($mdUtil.getTabIndexValue(frameElement) === -1) {\r\n return false;\r\n }\r\n\r\n // Browsers disable tabbing to an element inside of an invisible frame.\r\n if (!$mdUtil.isVisible(frameElement)) {\r\n return false;\r\n }\r\n }\r\n\r\n var nodeName = element.nodeName.toLowerCase();\r\n var tabIndexValue = $mdUtil.getTabIndexValue(element);\r\n\r\n if (element.hasAttribute('contenteditable')) {\r\n return tabIndexValue !== -1;\r\n }\r\n\r\n if (nodeName === 'iframe' || nodeName === 'object') {\r\n // The frame or object's content may be tabbable depending on the content, but it's\r\n // not possibly to reliably detect the content of the frames. We always consider such\r\n // elements as non-tabbable.\r\n return false;\r\n }\r\n\r\n // In iOS, the browser only considers some specific elements as tabbable.\r\n if (isIos && !$mdUtil.isPotentiallyTabbableIOS(element)) {\r\n return false;\r\n }\r\n\r\n if (nodeName === 'audio') {\r\n // Audio elements without controls enabled are never tabbable, regardless\r\n // of the tabindex attribute explicitly being set.\r\n if (!element.hasAttribute('controls')) {\r\n return false;\r\n }\r\n // Audio elements with controls are by default tabbable unless the\r\n // tabindex attribute is set to `-1` explicitly.\r\n return tabIndexValue !== -1;\r\n }\r\n\r\n if (nodeName === 'video') {\r\n // For all video elements, if the tabindex attribute is set to `-1`, the video\r\n // is not tabbable. Note: We cannot rely on the default `HTMLElement.tabIndex`\r\n // property as that one is set to `-1` in Chrome, Edge and Safari v13.1. The\r\n // tabindex attribute is the source of truth here.\r\n if (tabIndexValue === -1) {\r\n return false;\r\n }\r\n // If the tabindex is explicitly set, and not `-1` (as per check before), the\r\n // video element is always tabbable (regardless of whether it has controls or not).\r\n if (tabIndexValue !== null) {\r\n return true;\r\n }\r\n // Otherwise (when no explicit tabindex is set), a video is only tabbable if it\r\n // has controls enabled. Firefox is special as videos are always tabbable regardless\r\n // of whether there are controls or not.\r\n return isFirefox || element.hasAttribute('controls');\r\n }\r\n\r\n return element.tabIndex >= 0;\r\n },\r\n\r\n /**\r\n * Gets whether an element can be focused by the user.\r\n * @param {HTMLElement} element Element to be checked.\r\n * @returns {boolean} Whether the element is focusable.\r\n */\r\n isFocusable: function(element) {\r\n // Perform checks in order of left to most expensive.\r\n // Again, naive approach that does not capture many edge cases and browser quirks.\r\n return $mdUtil.isPotentiallyFocusable(element) && !$mdUtil.isDisabled(element) &&\r\n $mdUtil.isVisible(element);\r\n },\r\n\r\n /**\r\n * Gets whether an element is potentially focusable without taking current visible/disabled\r\n * state into account.\r\n * @param {HTMLElement} element\r\n * @returns {boolean}\r\n */\r\n isPotentiallyFocusable: function(element) {\r\n // Inputs are potentially focusable *unless* they're type=\"hidden\".\r\n if ($mdUtil.isHiddenInput(element)) {\r\n return false;\r\n }\r\n\r\n return $mdUtil.isNativeFormElement(element) ||\r\n $mdUtil.isAnchorWithHref(element) ||\r\n element.hasAttribute('contenteditable') ||\r\n $mdUtil.hasValidTabIndex(element);\r\n },\r\n\r\n /**\r\n * Checks whether the specified element is potentially tabbable on iOS.\r\n * @param {HTMLElement} element\r\n * @returns {boolean}\r\n */\r\n isPotentiallyTabbableIOS: function(element) {\r\n var nodeName = element.nodeName.toLowerCase();\r\n var inputType = nodeName === 'input' && element.type;\r\n\r\n return inputType === 'text'\r\n || inputType === 'password'\r\n || nodeName === 'select'\r\n || nodeName === 'textarea';\r\n },\r\n\r\n /**\r\n * Returns the parsed tabindex from the element attributes instead of returning the\r\n * evaluated tabindex from the browsers defaults.\r\n * @param {HTMLElement} element\r\n * @returns {null|number}\r\n */\r\n getTabIndexValue: function(element) {\r\n if (!$mdUtil.hasValidTabIndex(element)) {\r\n return null;\r\n }\r\n\r\n // See browser issue in Gecko https://bugzilla.mozilla.org/show_bug.cgi?id=1128054\r\n var tabIndex = parseInt(element.getAttribute('tabindex') || '', 10);\r\n\r\n return isNaN(tabIndex) ? -1 : tabIndex;\r\n },\r\n\r\n /**\r\n * Gets whether an element has a valid tabindex.\r\n * @param {HTMLElement} element\r\n * @returns {boolean}\r\n */\r\n hasValidTabIndex: function(element) {\r\n if (!element.hasAttribute('tabindex') || element.tabIndex === undefined) {\r\n return false;\r\n }\r\n\r\n var tabIndex = element.getAttribute('tabindex');\r\n\r\n // IE11 parses tabindex=\"\" as the value \"-32768\"\r\n if (tabIndex == '-32768') {\r\n return false;\r\n }\r\n\r\n return !!(tabIndex && !isNaN(parseInt(tabIndex, 10)));\r\n },\r\n\r\n /**\r\n * Checks whether the specified element has any geometry / rectangles.\r\n * @param {HTMLElement} element\r\n * @returns {boolean}\r\n */\r\n hasGeometry: function(element) {\r\n // Use logic from jQuery to check for an invisible element.\r\n // See https://github.com/jquery/jquery/blob/8969732518470a7f8e654d5bc5be0b0076cb0b87/src/css/hiddenVisibleSelectors.js#L9\r\n return !!(element.offsetWidth || element.offsetHeight ||\r\n (typeof element.getClientRects === 'function' && element.getClientRects().length));\r\n },\r\n\r\n /**\r\n * Returns the frame element from a window object. Since browsers like MS Edge throw errors if\r\n * the frameElement property is being accessed from a different host address, this property\r\n * should be accessed carefully.\r\n * @param {Window} window\r\n * @returns {null|HTMLElement}\r\n */\r\n getFrameElement: function(window) {\r\n try {\r\n return window.frameElement;\r\n } catch (error) {\r\n return null;\r\n }\r\n },\r\n\r\n /**\r\n * Gets the parent window of a DOM node with regards of being inside of an iframe.\r\n * @param {HTMLElement} node\r\n * @returns {Window}\r\n */\r\n getWindow: function(node) {\r\n // ownerDocument is null if `node` itself *is* a document.\r\n return node.ownerDocument && node.ownerDocument.defaultView || window;\r\n },\r\n\r\n /**\r\n * Gets whether an element's\r\n * @param {Node} element\r\n * @returns {boolean}\r\n */\r\n isNativeFormElement: function(element) {\r\n var nodeName = element.nodeName.toLowerCase();\r\n return nodeName === 'input' ||\r\n nodeName === 'select' ||\r\n nodeName === 'button' ||\r\n nodeName === 'textarea';\r\n },\r\n\r\n /**\r\n * Gets whether an element is an ``.\r\n * @param {HTMLElement} element\r\n * @returns {boolean}\r\n */\r\n isHiddenInput: function(element) {\r\n return $mdUtil.isInputElement(element) && element.type == 'hidden';\r\n },\r\n\r\n /**\r\n * Gets whether an element is an anchor that has an href attribute.\r\n * @param {HTMLElement} element\r\n * @returns {boolean}\r\n */\r\n isAnchorWithHref: function(element) {\r\n return $mdUtil.isAnchorElement(element) && element.hasAttribute('href');\r\n },\r\n\r\n /**\r\n * Gets whether an element is an input element.\r\n * @param {HTMLElement} element\r\n * @returns {boolean}\r\n */\r\n isInputElement: function(element) {\r\n return element.nodeName.toLowerCase() == 'input';\r\n },\r\n\r\n /**\r\n * Gets whether an element is an anchor element.\r\n * @param {HTMLElement} element\r\n * @returns {boolean}\r\n */\r\n isAnchorElement: function(element) {\r\n return element.nodeName.toLowerCase() == 'a';\r\n },\r\n\r\n /**********************************************************************************************\r\n * The following two functions were sourced from\r\n * https://github.com/angular/components/blob/3c37e4b1c1cb74a3d0a90d173240fc730d21d9d4/src/cdk/a11y/focus-trap/focus-trap.ts#L268-L311\r\n **********************************************************************************************/\r\n\r\n /**\r\n * Get the first tabbable element from a DOM subtree (inclusive).\r\n * @param {HTMLElement} root\r\n * @returns {HTMLElement|null}\r\n */\r\n getFirstTabbableElement: function(root) {\r\n if ($mdUtil.isFocusable(root) && $mdUtil.isTabbable(root)) {\r\n return root;\r\n }\r\n\r\n // Iterate in DOM order. Note that IE doesn't have `children` for SVG so we fall\r\n // back to `childNodes` which includes text nodes, comments etc.\r\n var children = root.children || root.childNodes;\r\n\r\n for (var i = 0; i < children.length; i++) {\r\n var tabbableChild = children[i].nodeType === $document[0].ELEMENT_NODE ?\r\n $mdUtil.getFirstTabbableElement(children[i]) : null;\r\n\r\n if (tabbableChild) {\r\n return tabbableChild;\r\n }\r\n }\r\n\r\n return null;\r\n },\r\n\r\n /**\r\n * Get the last tabbable element from a DOM subtree (inclusive).\r\n * @param {HTMLElement} root\r\n * @returns {HTMLElement|null}\r\n */\r\n getLastTabbableElement: function(root) {\r\n if ($mdUtil.isFocusable(root) && $mdUtil.isTabbable(root)) {\r\n return root;\r\n }\r\n\r\n // Iterate in reverse DOM order.\r\n var children = root.children || root.childNodes;\r\n\r\n for (var i = children.length - 1; i >= 0; i--) {\r\n var tabbableChild = children[i].nodeType === $document[0].ELEMENT_NODE ?\r\n $mdUtil.getLastTabbableElement(children[i]) : null;\r\n\r\n if (tabbableChild) {\r\n return tabbableChild;\r\n }\r\n }\r\n\r\n return null;\r\n }\r\n };\r\n\r\n // Instantiate other namespace utility methods\r\n\r\n $mdUtil.dom.animator = $$mdAnimate($mdUtil);\r\n\r\n return $mdUtil;\r\n\r\n function getNode(el) {\r\n return el[0] || el;\r\n }\r\n}\r\n\r\n/**\r\n * Since removing jQuery from the demos, some code that uses `element.focus()` is broken.\r\n * We need to add `element.focus()`, because it's testable unlike `element[0].focus`.\r\n */\r\nangular.element.prototype.focus = angular.element.prototype.focus || function() {\r\n if (this.length) {\r\n this[0].focus();\r\n }\r\n return this;\r\n};\r\n\r\nangular.element.prototype.blur = angular.element.prototype.blur || function() {\r\n if (this.length) {\r\n this[0].blur();\r\n }\r\n return this;\r\n};\r\n\r\n})();\r\n(function(){\r\n\"use strict\";\r\n\r\n// Polyfill angular < 1.4 (provide $animateCss)\r\nangular\r\n .module('material.core')\r\n .factory('$$mdAnimate', [\"$q\", \"$timeout\", \"$mdConstant\", \"$animateCss\", function($q, $timeout, $mdConstant, $animateCss) {\r\n // Since $$mdAnimate is injected into $mdUtil... use a wrapper function\r\n // to subsequently inject $mdUtil as an argument to the AnimateDomUtils\r\n return function($mdUtil) {\r\n return AnimateDomUtils($mdUtil, $q, $timeout, $mdConstant, $animateCss);\r\n };\r\n }]);\r\n\r\n/**\r\n * Factory function that requires special injections\r\n */\r\nfunction AnimateDomUtils($mdUtil, $q, $timeout, $mdConstant, $animateCss) {\r\n var self;\r\n return self = {\r\n translate3d : function(target, from, to, options) {\r\n return $animateCss(target, {\r\n from: from,\r\n to: to,\r\n addClass: options.transitionInClass,\r\n removeClass: options.transitionOutClass,\r\n duration: options.duration\r\n })\r\n .start()\r\n .then(function() {\r\n // Resolve with reverser function...\r\n return reverseTranslate;\r\n });\r\n\r\n /**\r\n * Specific reversal of the request translate animation above...\r\n */\r\n function reverseTranslate (newFrom) {\r\n return $animateCss(target, {\r\n to: newFrom || from,\r\n addClass: options.transitionOutClass,\r\n removeClass: options.transitionInClass,\r\n duration: options.duration\r\n }).start();\r\n }\r\n },\r\n\r\n /**\r\n * Listen for transitionEnd event (with optional timeout)\r\n * Announce completion or failure via promise handlers\r\n */\r\n waitTransitionEnd: function (element, opts) {\r\n var TIMEOUT = 3000; // fallback is 3 secs\r\n\r\n return $q(function(resolve, reject){\r\n opts = opts || { };\r\n\r\n // If there is no transition is found, resolve immediately\r\n //\r\n // NOTE: using $mdUtil.nextTick() causes delays/issues\r\n if (noTransitionFound(opts.cachedTransitionStyles)) {\r\n TIMEOUT = 0;\r\n }\r\n\r\n var timer = $timeout(finished, opts.timeout || TIMEOUT);\r\n element.on($mdConstant.CSS.TRANSITIONEND, finished);\r\n\r\n /**\r\n * Upon timeout or transitionEnd, reject or resolve (respectively) this promise.\r\n * NOTE: Make sure this transitionEnd didn't bubble up from a child\r\n */\r\n function finished(ev) {\r\n if (ev && ev.target !== element[0]) return;\r\n\r\n if (ev) $timeout.cancel(timer);\r\n element.off($mdConstant.CSS.TRANSITIONEND, finished);\r\n\r\n // Never reject since ngAnimate may cause timeouts due missed transitionEnd events\r\n resolve();\r\n }\r\n\r\n /**\r\n * Checks whether or not there is a transition.\r\n *\r\n * @param styles The cached styles to use for the calculation. If null, getComputedStyle()\r\n * will be used.\r\n *\r\n * @returns {boolean} True if there is no transition/duration; false otherwise.\r\n */\r\n function noTransitionFound(styles) {\r\n styles = styles || window.getComputedStyle(element[0]);\r\n\r\n return styles.transitionDuration === '0s' ||\r\n (!styles.transition && !styles.transitionProperty);\r\n }\r\n });\r\n },\r\n\r\n calculateTransformValues: function (element, originator) {\r\n var origin = originator.element;\r\n var bounds = originator.bounds;\r\n\r\n if (origin || bounds) {\r\n var originBnds = origin ? self.clientRect(origin) || currentBounds() : self.copyRect(bounds);\r\n var dialogRect = self.copyRect(element[0].getBoundingClientRect());\r\n var dialogCenterPt = self.centerPointFor(dialogRect);\r\n var originCenterPt = self.centerPointFor(originBnds);\r\n\r\n return {\r\n centerX: originCenterPt.x - dialogCenterPt.x,\r\n centerY: originCenterPt.y - dialogCenterPt.y,\r\n scaleX: Math.round(100 * Math.min(0.5, originBnds.width / dialogRect.width)) / 100,\r\n scaleY: Math.round(100 * Math.min(0.5, originBnds.height / dialogRect.height)) / 100\r\n };\r\n }\r\n return {centerX: 0, centerY: 0, scaleX: 0.5, scaleY: 0.5};\r\n\r\n /**\r\n * This is a fallback if the origin information is no longer valid, then the\r\n * origin bounds simply becomes the current bounds for the dialogContainer's parent.\r\n * @returns {null|DOMRect}\r\n */\r\n function currentBounds() {\r\n var container = element ? element.parent() : null;\r\n var parent = container ? container.parent() : null;\r\n\r\n return parent ? self.clientRect(parent) : null;\r\n }\r\n },\r\n\r\n /**\r\n * Calculate the zoom transform from dialog to origin.\r\n *\r\n * We use this to set the dialog position immediately;\r\n * then the md-transition-in actually translates back to\r\n * `translate3d(0,0,0) scale(1.0)`...\r\n *\r\n * NOTE: all values are rounded to the nearest integer\r\n */\r\n calculateZoomToOrigin: function (element, originator) {\r\n var zoomTemplate = \"translate3d( {centerX}px, {centerY}px, 0 ) scale( {scaleX}, {scaleY} )\";\r\n var buildZoom = angular.bind(null, $mdUtil.supplant, zoomTemplate);\r\n\r\n return buildZoom(self.calculateTransformValues(element, originator));\r\n },\r\n\r\n /**\r\n * Calculate the slide transform from panel to origin.\r\n * NOTE: all values are rounded to the nearest integer\r\n */\r\n calculateSlideToOrigin: function (element, originator) {\r\n var slideTemplate = \"translate3d( {centerX}px, {centerY}px, 0 )\";\r\n var buildSlide = angular.bind(null, $mdUtil.supplant, slideTemplate);\r\n\r\n return buildSlide(self.calculateTransformValues(element, originator));\r\n },\r\n\r\n /**\r\n * Enhance raw values to represent valid css stylings...\r\n */\r\n toCss : function(raw) {\r\n var css = { };\r\n var lookups = 'left top right bottom width height x y min-width min-height max-width max-height';\r\n\r\n angular.forEach(raw, function(value,key) {\r\n if (angular.isUndefined(value)) return;\r\n\r\n if (lookups.indexOf(key) >= 0) {\r\n css[key] = value + 'px';\r\n } else {\r\n switch (key) {\r\n case 'transition':\r\n convertToVendor(key, $mdConstant.CSS.TRANSITION, value);\r\n break;\r\n case 'transform':\r\n convertToVendor(key, $mdConstant.CSS.TRANSFORM, value);\r\n break;\r\n case 'transformOrigin':\r\n convertToVendor(key, $mdConstant.CSS.TRANSFORM_ORIGIN, value);\r\n break;\r\n case 'font-size':\r\n css['font-size'] = value; // font sizes aren't always in px\r\n break;\r\n }\r\n }\r\n });\r\n\r\n return css;\r\n\r\n function convertToVendor(key, vendor, value) {\r\n angular.forEach(vendor.split(' '), function (key) {\r\n css[key] = value;\r\n });\r\n }\r\n },\r\n\r\n /**\r\n * Convert the translate CSS value to key/value pair(s).\r\n * @param {string} transform\r\n * @param {boolean=} addTransition\r\n * @param {string=} transition\r\n * @return {Object} object containing CSS translate key/value pair(s)\r\n */\r\n toTransformCss: function (transform, addTransition, transition) {\r\n var css = {};\r\n angular.forEach($mdConstant.CSS.TRANSFORM.split(' '), function (key) {\r\n css[key] = transform;\r\n });\r\n\r\n if (addTransition) {\r\n transition = transition || \"all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important\";\r\n css.transition = transition;\r\n }\r\n\r\n return css;\r\n },\r\n\r\n /**\r\n * Clone the Rect and calculate the height/width if needed.\r\n * @param {DOMRect} source\r\n * @param {DOMRect=} destination\r\n * @returns {null|DOMRect}\r\n */\r\n copyRect: function (source, destination) {\r\n if (!source) return null;\r\n\r\n destination = destination || {};\r\n\r\n angular.forEach('left top right bottom width height'.split(' '), function (key) {\r\n destination[key] = Math.round(source[key]);\r\n });\r\n\r\n destination.width = destination.width || (destination.right - destination.left);\r\n destination.height = destination.height || (destination.bottom - destination.top);\r\n\r\n return destination;\r\n },\r\n\r\n /**\r\n * Calculate ClientRect of element; return null if hidden or zero size.\r\n * @param {Element|string} element\r\n * @returns {null|DOMRect}\r\n */\r\n clientRect: function (element) {\r\n var bounds = angular.element(element)[0].getBoundingClientRect();\r\n var isPositiveSizeClientRect = function (rect) {\r\n return rect && (rect.width > 0) && (rect.height > 0);\r\n };\r\n\r\n // If the event origin element has zero size, it has probably been hidden.\r\n return isPositiveSizeClientRect(bounds) ? self.copyRect(bounds) : null;\r\n },\r\n\r\n /**\r\n * Calculate 'rounded' center point of Rect\r\n * @param {DOMRect} targetRect\r\n * @returns {{x: number, y: number}}\r\n */\r\n centerPointFor: function (targetRect) {\r\n return targetRect ? {\r\n x: Math.round(targetRect.left + (targetRect.width / 2)),\r\n y: Math.round(targetRect.top + (targetRect.height / 2))\r\n } : { x : 0, y : 0 };\r\n }\r\n };\r\n}\r\n\r\n\r\n})();\r\n(function(){\r\n\"use strict\";\r\n\r\nif (angular.version.minor >= 4) {\r\n angular.module('material.core.animate', []);\r\n} else {\r\n(function() {\r\n \"use strict\";\r\n\r\n var forEach = angular.forEach;\r\n\r\n var WEBKIT = angular.isDefined(document.documentElement.style.WebkitAppearance);\r\n var TRANSITION_PROP = WEBKIT ? 'WebkitTransition' : 'transition';\r\n var ANIMATION_PROP = WEBKIT ? 'WebkitAnimation' : 'animation';\r\n var PREFIX = WEBKIT ? '-webkit-' : '';\r\n\r\n var TRANSITION_EVENTS = (WEBKIT ? 'webkitTransitionEnd ' : '') + 'transitionend';\r\n var ANIMATION_EVENTS = (WEBKIT ? 'webkitAnimationEnd ' : '') + 'animationend';\r\n\r\n var $$ForceReflowFactory = ['$document', function($document) {\r\n return function() {\r\n return $document[0].body.clientWidth + 1;\r\n };\r\n }];\r\n\r\n var $$rAFMutexFactory = ['$$rAF', function($$rAF) {\r\n return function() {\r\n var passed = false;\r\n $$rAF(function() {\r\n passed = true;\r\n });\r\n return function(fn) {\r\n passed ? fn() : $$rAF(fn);\r\n };\r\n };\r\n }];\r\n\r\n var $$AnimateRunnerFactory = ['$q', '$$rAFMutex', function($q, $$rAFMutex) {\r\n var INITIAL_STATE = 0;\r\n var DONE_PENDING_STATE = 1;\r\n var DONE_COMPLETE_STATE = 2;\r\n\r\n function AnimateRunner(host) {\r\n this.setHost(host);\r\n\r\n this._doneCallbacks = [];\r\n this._runInAnimationFrame = $$rAFMutex();\r\n this._state = 0;\r\n }\r\n\r\n AnimateRunner.prototype = {\r\n setHost: function(host) {\r\n this.host = host || {};\r\n },\r\n\r\n done: function(fn) {\r\n if (this._state === DONE_COMPLETE_STATE) {\r\n fn();\r\n } else {\r\n this._doneCallbacks.push(fn);\r\n }\r\n },\r\n\r\n progress: angular.noop,\r\n\r\n getPromise: function() {\r\n if (!this.promise) {\r\n var self = this;\r\n this.promise = $q(function(resolve, reject) {\r\n self.done(function(status) {\r\n status === false ? reject() : resolve();\r\n });\r\n });\r\n }\r\n return this.promise;\r\n },\r\n\r\n then: function(resolveHandler, rejectHandler) {\r\n return this.getPromise().then(resolveHandler, rejectHandler);\r\n },\r\n\r\n 'catch': function(handler) {\r\n return this.getPromise()['catch'](handler);\r\n },\r\n\r\n 'finally': function(handler) {\r\n return this.getPromise()['finally'](handler);\r\n },\r\n\r\n pause: function() {\r\n if (this.host.pause) {\r\n this.host.pause();\r\n }\r\n },\r\n\r\n resume: function() {\r\n if (this.host.resume) {\r\n this.host.resume();\r\n }\r\n },\r\n\r\n end: function() {\r\n if (this.host.end) {\r\n this.host.end();\r\n }\r\n this._resolve(true);\r\n },\r\n\r\n cancel: function() {\r\n if (this.host.cancel) {\r\n this.host.cancel();\r\n }\r\n this._resolve(false);\r\n },\r\n\r\n complete: function(response) {\r\n var self = this;\r\n if (self._state === INITIAL_STATE) {\r\n self._state = DONE_PENDING_STATE;\r\n self._runInAnimationFrame(function() {\r\n self._resolve(response);\r\n });\r\n }\r\n },\r\n\r\n _resolve: function(response) {\r\n if (this._state !== DONE_COMPLETE_STATE) {\r\n forEach(this._doneCallbacks, function(fn) {\r\n fn(response);\r\n });\r\n this._doneCallbacks.length = 0;\r\n this._state = DONE_COMPLETE_STATE;\r\n }\r\n }\r\n };\r\n\r\n // Polyfill AnimateRunner.all which is used by input animations\r\n AnimateRunner.all = function(runners, callback) {\r\n var count = 0;\r\n var status = true;\r\n forEach(runners, function(runner) {\r\n runner.done(onProgress);\r\n });\r\n\r\n function onProgress(response) {\r\n status = status && response;\r\n if (++count === runners.length) {\r\n callback(status);\r\n }\r\n }\r\n };\r\n\r\n return AnimateRunner;\r\n }];\r\n\r\n angular\r\n .module('material.core.animate', [])\r\n .factory('$$forceReflow', $$ForceReflowFactory)\r\n .factory('$$AnimateRunner', $$AnimateRunnerFactory)\r\n .factory('$$rAFMutex', $$rAFMutexFactory)\r\n .factory('$animateCss', ['$window', '$$rAF', '$$AnimateRunner', '$$forceReflow', '$$jqLite', '$timeout', '$animate',\r\n function($window, $$rAF, $$AnimateRunner, $$forceReflow, $$jqLite, $timeout, $animate) {\r\n\r\n function init(element, options) {\r\n\r\n var temporaryStyles = [];\r\n var node = getDomNode(element);\r\n var areAnimationsAllowed = node && $animate.enabled();\r\n\r\n var hasCompleteStyles = false;\r\n var hasCompleteClasses = false;\r\n\r\n if (areAnimationsAllowed) {\r\n if (options.transitionStyle) {\r\n temporaryStyles.push([PREFIX + 'transition', options.transitionStyle]);\r\n }\r\n\r\n if (options.keyframeStyle) {\r\n temporaryStyles.push([PREFIX + 'animation', options.keyframeStyle]);\r\n }\r\n\r\n if (options.delay) {\r\n temporaryStyles.push([PREFIX + 'transition-delay', options.delay + 's']);\r\n }\r\n\r\n if (options.duration) {\r\n temporaryStyles.push([PREFIX + 'transition-duration', options.duration + 's']);\r\n }\r\n\r\n hasCompleteStyles = options.keyframeStyle ||\r\n (options.to && (options.duration > 0 || options.transitionStyle));\r\n hasCompleteClasses = !!options.addClass || !!options.removeClass;\r\n\r\n blockTransition(element, true);\r\n }\r\n\r\n var hasCompleteAnimation = areAnimationsAllowed && (hasCompleteStyles || hasCompleteClasses);\r\n\r\n applyAnimationFromStyles(element, options);\r\n\r\n var animationClosed = false;\r\n var events, eventFn;\r\n\r\n return {\r\n close: $window.close,\r\n start: function() {\r\n var runner = new $$AnimateRunner();\r\n waitUntilQuiet(function() {\r\n blockTransition(element, false);\r\n if (!hasCompleteAnimation) {\r\n return close();\r\n }\r\n\r\n forEach(temporaryStyles, function(entry) {\r\n var key = entry[0];\r\n var value = entry[1];\r\n node.style[camelCase(key)] = value;\r\n });\r\n\r\n applyClasses(element, options);\r\n\r\n var timings = computeTimings(element);\r\n if (timings.duration === 0) {\r\n return close();\r\n }\r\n\r\n var moreStyles = [];\r\n\r\n if (options.easing) {\r\n if (timings.transitionDuration) {\r\n moreStyles.push([PREFIX + 'transition-timing-function', options.easing]);\r\n }\r\n if (timings.animationDuration) {\r\n moreStyles.push([PREFIX + 'animation-timing-function', options.easing]);\r\n }\r\n }\r\n\r\n if (options.delay && timings.animationDelay) {\r\n moreStyles.push([PREFIX + 'animation-delay', options.delay + 's']);\r\n }\r\n\r\n if (options.duration && timings.animationDuration) {\r\n moreStyles.push([PREFIX + 'animation-duration', options.duration + 's']);\r\n }\r\n\r\n forEach(moreStyles, function(entry) {\r\n var key = entry[0];\r\n var value = entry[1];\r\n node.style[camelCase(key)] = value;\r\n temporaryStyles.push(entry);\r\n });\r\n\r\n var maxDelay = timings.delay;\r\n var maxDelayTime = maxDelay * 1000;\r\n var maxDuration = timings.duration;\r\n var maxDurationTime = maxDuration * 1000;\r\n var startTime = Date.now();\r\n\r\n events = [];\r\n if (timings.transitionDuration) {\r\n events.push(TRANSITION_EVENTS);\r\n }\r\n if (timings.animationDuration) {\r\n events.push(ANIMATION_EVENTS);\r\n }\r\n events = events.join(' ');\r\n eventFn = function(event) {\r\n event.stopPropagation();\r\n var ev = event.originalEvent || event;\r\n var timeStamp = ev.timeStamp || Date.now();\r\n var elapsedTime = parseFloat(ev.elapsedTime.toFixed(3));\r\n if (Math.max(timeStamp - startTime, 0) >= maxDelayTime && elapsedTime >= maxDuration) {\r\n close();\r\n }\r\n };\r\n element.on(events, eventFn);\r\n\r\n applyAnimationToStyles(element, options);\r\n\r\n $timeout(close, maxDelayTime + maxDurationTime * 1.5, false);\r\n });\r\n\r\n return runner;\r\n\r\n function close() {\r\n if (animationClosed) return;\r\n animationClosed = true;\r\n\r\n if (events && eventFn) {\r\n element.off(events, eventFn);\r\n }\r\n applyClasses(element, options);\r\n applyAnimationStyles(element, options);\r\n forEach(temporaryStyles, function(entry) {\r\n node.style[camelCase(entry[0])] = '';\r\n });\r\n runner.complete(true);\r\n return runner;\r\n }\r\n }\r\n };\r\n }\r\n\r\n function applyClasses(element, options) {\r\n if (options.addClass) {\r\n $$jqLite.addClass(element, options.addClass);\r\n options.addClass = null;\r\n }\r\n if (options.removeClass) {\r\n $$jqLite.removeClass(element, options.removeClass);\r\n options.removeClass = null;\r\n }\r\n }\r\n\r\n function computeTimings(element) {\r\n var node = getDomNode(element);\r\n var cs = $window.getComputedStyle(node);\r\n var tdr = parseMaxTime(cs[prop('transitionDuration')]);\r\n var adr = parseMaxTime(cs[prop('animationDuration')]);\r\n var tdy = parseMaxTime(cs[prop('transitionDelay')]);\r\n var ady = parseMaxTime(cs[prop('animationDelay')]);\r\n\r\n adr *= (parseInt(cs[prop('animationIterationCount')], 10) || 1);\r\n var duration = Math.max(adr, tdr);\r\n var delay = Math.max(ady, tdy);\r\n\r\n return {\r\n duration: duration,\r\n delay: delay,\r\n animationDuration: adr,\r\n transitionDuration: tdr,\r\n animationDelay: ady,\r\n transitionDelay: tdy\r\n };\r\n\r\n function prop(key) {\r\n return WEBKIT ? 'Webkit' + key.charAt(0).toUpperCase() + key.substr(1)\r\n : key;\r\n }\r\n }\r\n\r\n function parseMaxTime(str) {\r\n var maxValue = 0;\r\n var values = (str || \"\").split(/\\s*,\\s*/);\r\n forEach(values, function(value) {\r\n // it's always safe to consider only second values and omit `ms` values since\r\n // getComputedStyle will always handle the conversion for us\r\n if (value.charAt(value.length - 1) == 's') {\r\n value = value.substring(0, value.length - 1);\r\n }\r\n value = parseFloat(value) || 0;\r\n maxValue = maxValue ? Math.max(value, maxValue) : value;\r\n });\r\n return maxValue;\r\n }\r\n\r\n var cancelLastRAFRequest;\r\n var rafWaitQueue = [];\r\n function waitUntilQuiet(callback) {\r\n if (cancelLastRAFRequest) {\r\n cancelLastRAFRequest(); // cancels the request\r\n }\r\n rafWaitQueue.push(callback);\r\n cancelLastRAFRequest = $$rAF(function() {\r\n cancelLastRAFRequest = null;\r\n\r\n // DO NOT REMOVE THIS LINE OR REFACTOR OUT THE `pageWidth` variable.\r\n // PLEASE EXAMINE THE `$$forceReflow` service to understand why.\r\n var pageWidth = $$forceReflow();\r\n\r\n // we use a for loop to ensure that if the queue is changed\r\n // during this looping then it will consider new requests\r\n for (var i = 0; i < rafWaitQueue.length; i++) {\r\n rafWaitQueue[i](pageWidth);\r\n }\r\n rafWaitQueue.length = 0;\r\n });\r\n }\r\n\r\n function applyAnimationStyles(element, options) {\r\n applyAnimationFromStyles(element, options);\r\n applyAnimationToStyles(element, options);\r\n }\r\n\r\n function applyAnimationFromStyles(element, options) {\r\n if (options.from) {\r\n element.css(options.from);\r\n options.from = null;\r\n }\r\n }\r\n\r\n function applyAnimationToStyles(element, options) {\r\n if (options.to) {\r\n element.css(options.to);\r\n options.to = null;\r\n }\r\n }\r\n\r\n function getDomNode(element) {\r\n for (var i = 0; i < element.length; i++) {\r\n if (element[i].nodeType === 1) return element[i];\r\n }\r\n }\r\n\r\n function blockTransition(element, bool) {\r\n var node = getDomNode(element);\r\n var key = camelCase(PREFIX + 'transition-delay');\r\n node.style[key] = bool ? '-9999s' : '';\r\n }\r\n\r\n return init;\r\n }]);\r\n\r\n /**\r\n * Older browsers [FF31] expect camelCase\r\n * property keys.\r\n * e.g.\r\n * animation-duration --> animationDuration\r\n */\r\n function camelCase(str) {\r\n return str.replace(/-[a-z]/g, function(str) {\r\n return str.charAt(1).toUpperCase();\r\n });\r\n }\r\n\r\n})();\r\n\r\n}\r\n\r\n})();\r\n(function(){\r\n\"use strict\";\r\n\r\n/**\r\n * @ngdoc module\r\n * @name material.core.aria\r\n * @description\r\n * Aria Expectations for AngularJS Material components.\r\n */\r\nMdAriaService.$inject = [\"$$rAF\", \"$log\", \"$window\", \"$interpolate\"];\r\nangular\r\n .module('material.core')\r\n .provider('$mdAria', MdAriaProvider);\r\n\r\n/**\r\n * @ngdoc service\r\n * @name $mdAriaProvider\r\n * @module material.core.aria\r\n *\r\n * @description\r\n *\r\n * Modify options of the `$mdAria` service, which will be used by most of the AngularJS Material\r\n * components.\r\n *\r\n * You are able to disable `$mdAria` warnings, by using the following markup.\r\n *\r\n * \r\n * app.config(function($mdAriaProvider) {\r\n * // Globally disables all ARIA warnings.\r\n * $mdAriaProvider.disableWarnings();\r\n * });\r\n * \r\n *\r\n */\r\nfunction MdAriaProvider() {\r\n\r\n var config = {\r\n /** Whether we should show ARIA warnings in the console if labels are missing on the element */\r\n showWarnings: true\r\n };\r\n\r\n return {\r\n disableWarnings: disableWarnings,\r\n $get: [\"$$rAF\", \"$log\", \"$window\", \"$interpolate\", function($$rAF, $log, $window, $interpolate) {\r\n return MdAriaService.apply(config, arguments);\r\n }]\r\n };\r\n\r\n /**\r\n * @ngdoc method\r\n * @name $mdAriaProvider#disableWarnings\r\n * @description Disables all ARIA warnings generated by AngularJS Material.\r\n */\r\n function disableWarnings() {\r\n config.showWarnings = false;\r\n }\r\n}\r\n\r\n/*\r\n * @ngInject\r\n */\r\nfunction MdAriaService($$rAF, $log, $window, $interpolate) {\r\n\r\n // Load the showWarnings option from the current context and store it inside of a scope variable,\r\n // because the context will be probably lost in some function calls.\r\n var showWarnings = this.showWarnings;\r\n\r\n return {\r\n expect: expect,\r\n expectAsync: expectAsync,\r\n expectWithText: expectWithText,\r\n expectWithoutText: expectWithoutText,\r\n getText: getText,\r\n hasAriaLabel: hasAriaLabel,\r\n parentHasAriaLabel: parentHasAriaLabel\r\n };\r\n\r\n /**\r\n * Check if expected attribute has been specified on the target element or child\r\n * @param {string|JQLite} element\r\n * @param {string} attrName\r\n * @param {string=} defaultValue What to set the attr to if no value is found\r\n */\r\n function expect(element, attrName, defaultValue) {\r\n\r\n var node = angular.element(element)[0] || element;\r\n\r\n // if node exists and neither it nor its children have the attribute\r\n if (node &&\r\n ((!node.hasAttribute(attrName) ||\r\n node.getAttribute(attrName).length === 0) &&\r\n !childHasAttribute(node, attrName))) {\r\n\r\n defaultValue = angular.isString(defaultValue) ? defaultValue.trim() : '';\r\n if (defaultValue.length) {\r\n element.attr(attrName, defaultValue);\r\n } else if (showWarnings) {\r\n $log.warn('ARIA: Attribute \"', attrName, '\", required for accessibility, is missing on node:', node);\r\n }\r\n\r\n }\r\n }\r\n\r\n function expectAsync(element, attrName, defaultValueGetter) {\r\n // Problem: when retrieving the element's contents synchronously to find the label,\r\n // the text may not be defined yet in the case of a binding.\r\n // There is a higher chance that a binding will be defined if we wait one frame.\r\n $$rAF(function() {\r\n expect(element, attrName, defaultValueGetter());\r\n });\r\n }\r\n\r\n function expectWithText(element, attrName) {\r\n var content = getText(element) || \"\";\r\n var hasBinding = content.indexOf($interpolate.startSymbol()) > -1;\r\n\r\n if (hasBinding) {\r\n expectAsync(element, attrName, function() {\r\n return getText(element);\r\n });\r\n } else {\r\n expect(element, attrName, content);\r\n }\r\n }\r\n\r\n function expectWithoutText(element, attrName) {\r\n var content = getText(element);\r\n var hasBinding = content.indexOf($interpolate.startSymbol()) > -1;\r\n\r\n if (!hasBinding && !content) {\r\n expect(element, attrName, content);\r\n }\r\n }\r\n\r\n /**\r\n * @param {Element|JQLite} element\r\n * @returns {string}\r\n */\r\n function getText(element) {\r\n element = element[0] || element;\r\n var walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null, false);\r\n var text = '';\r\n\r\n var node;\r\n while (node = walker.nextNode()) {\r\n if (!isAriaHiddenNode(node)) {\r\n text += node.textContent;\r\n }\r\n }\r\n\r\n return text.trim() || '';\r\n\r\n /**\r\n * @param {Node} node\r\n * @returns {boolean}\r\n */\r\n function isAriaHiddenNode(node) {\r\n while (node.parentNode && (node = node.parentNode) !== element) {\r\n if (node.getAttribute && node.getAttribute('aria-hidden') === 'true') {\r\n return true;\r\n }\r\n }\r\n }\r\n }\r\n\r\n function childHasAttribute(node, attrName) {\r\n var hasChildren = node.hasChildNodes(),\r\n hasAttr = false;\r\n\r\n function isHidden(el) {\r\n var style = el.currentStyle ? el.currentStyle : $window.getComputedStyle(el);\r\n return (style.display === 'none');\r\n }\r\n\r\n if (hasChildren) {\r\n var children = node.childNodes;\r\n for (var i=0; i < children.length; i++) {\r\n var child = children[i];\r\n if (child.nodeType === 1 && child.hasAttribute(attrName)) {\r\n if (!isHidden(child)) {\r\n hasAttr = true;\r\n }\r\n }\r\n }\r\n }\r\n return hasAttr;\r\n }\r\n\r\n /**\r\n * Check if expected element has aria label attribute\r\n * @param element\r\n */\r\n function hasAriaLabel(element) {\r\n var node = angular.element(element)[0] || element;\r\n\r\n /* Check if compatible node type (ie: not HTML Document node) */\r\n if (!node.hasAttribute) {\r\n return false;\r\n }\r\n\r\n /* Check label or description attributes */\r\n return node.hasAttribute('aria-label') || node.hasAttribute('aria-labelledby') || node.hasAttribute('aria-describedby');\r\n }\r\n\r\n /**\r\n * Check if expected element's parent has aria label attribute and has valid role and tagName\r\n * @param {string|JQLite|Node & ParentNode} element\r\n * @param {number=} level Number of levels deep search should be performed\r\n */\r\n function parentHasAriaLabel(element, level) {\r\n level = level || 1;\r\n var node = angular.element(element)[0] || element;\r\n if (!node.parentNode) {\r\n return false;\r\n }\r\n if (performCheck(node.parentNode)) {\r\n return true;\r\n }\r\n level--;\r\n if (level) {\r\n return parentHasAriaLabel(node.parentNode, level);\r\n }\r\n return false;\r\n\r\n function performCheck(parentNode) {\r\n if (!hasAriaLabel(parentNode)) {\r\n return false;\r\n }\r\n /* Perform role block-list check */\r\n if (parentNode.hasAttribute('role')) {\r\n switch (parentNode.getAttribute('role').toLowerCase()) {\r\n case 'command':\r\n case 'definition':\r\n case 'directory':\r\n case 'grid':\r\n case 'list':\r\n case 'listitem':\r\n case 'log':\r\n case 'marquee':\r\n case 'menu':\r\n case 'menubar':\r\n case 'note':\r\n case 'presentation':\r\n case 'separator':\r\n case 'scrollbar':\r\n case 'status':\r\n case 'tablist':\r\n return false;\r\n }\r\n }\r\n /* Perform tagName block-list check */\r\n switch (parentNode.tagName.toLowerCase()) {\r\n case 'abbr':\r\n case 'acronym':\r\n case 'address':\r\n case 'applet':\r\n case 'audio':\r\n case 'b':\r\n case 'bdi':\r\n case 'bdo':\r\n case 'big':\r\n case 'blockquote':\r\n case 'br':\r\n case 'canvas':\r\n case 'caption':\r\n case 'center':\r\n case 'cite':\r\n case 'code':\r\n case 'col':\r\n case 'data':\r\n case 'dd':\r\n case 'del':\r\n case 'dfn':\r\n case 'dir':\r\n case 'div':\r\n case 'dl':\r\n case 'em':\r\n case 'embed':\r\n case 'fieldset':\r\n case 'figcaption':\r\n case 'font':\r\n case 'h1':\r\n case 'h2':\r\n case 'h3':\r\n case 'h4':\r\n case 'h5':\r\n case 'h6':\r\n case 'hgroup':\r\n case 'html':\r\n case 'i':\r\n case 'ins':\r\n case 'isindex':\r\n case 'kbd':\r\n case 'keygen':\r\n case 'label':\r\n case 'legend':\r\n case 'li':\r\n case 'map':\r\n case 'mark':\r\n case 'menu':\r\n case 'object':\r\n case 'ol':\r\n case 'output':\r\n case 'pre':\r\n case 'presentation':\r\n case 'q':\r\n case 'rt':\r\n case 'ruby':\r\n case 'samp':\r\n case 'small':\r\n case 'source':\r\n case 'span':\r\n case 'status':\r\n case 'strike':\r\n case 'strong':\r\n case 'sub':\r\n case 'sup':\r\n case 'svg':\r\n case 'tbody':\r\n case 'td':\r\n case 'th':\r\n case 'thead':\r\n case 'time':\r\n case 'tr':\r\n case 'track':\r\n case 'tt':\r\n case 'ul':\r\n case 'var':\r\n return false;\r\n }\r\n return true;\r\n }\r\n }\r\n}\r\n\r\n})();\r\n(function(){\r\n\"use strict\";\r\n\r\n/**\r\n * @ngdoc module\r\n * @name material.core.compiler\r\n * @description\r\n * AngularJS Material template and element compiler.\r\n */\r\nangular\r\n .module('material.core')\r\n .provider('$mdCompiler', MdCompilerProvider);\r\n\r\nMdCompilerProvider.$inject = ['$compileProvider'];\r\nfunction MdCompilerProvider() {\r\n\r\n this.$get = [\"$q\", \"$templateRequest\", \"$injector\", \"$compile\", \"$controller\",\r\n function($q, $templateRequest, $injector, $compile, $controller) {\r\n return new MdCompilerService($q, $templateRequest, $injector, $compile, $controller);\r\n }];\r\n\r\n /**\r\n * @ngdoc service\r\n * @name $mdCompiler\r\n * @module material.core.compiler\r\n * @description\r\n * The $mdCompiler service is an abstraction of AngularJS's compiler, that allows developers\r\n * to compile an element with options like in a Directive Definition Object.\r\n *\r\n * > The compiler powers a lot of components inside of AngularJS Material.\r\n * > Like the `$mdPanel` or `$mdDialog` services.\r\n *\r\n * @usage\r\n *\r\n * Basic Usage with a template\r\n *\r\n * \r\n * $mdCompiler.compile({\r\n * templateUrl: 'modal.html',\r\n * controller: 'ModalCtrl',\r\n * locals: {\r\n * modal: myModalInstance;\r\n * }\r\n * }).then(function (compileData) {\r\n * compileData.element; // Compiled DOM element\r\n * compileData.link(myScope); // Instantiate controller and link element to scope.\r\n * });\r\n * \r\n *\r\n * Example with a content element\r\n *\r\n * \r\n *\r\n * // Create a virtual element and link it manually.\r\n * // The compiler doesn't need to recompile the element each time.\r\n * var myElement = $compile('Test')(myScope);\r\n *\r\n * $mdCompiler.compile({\r\n * contentElement: myElement\r\n * }).then(function (compileData) {\r\n * compileData.element // Content Element (same as above)\r\n * compileData.link // This does nothing when using a contentElement.\r\n * });\r\n * \r\n *\r\n * > Content Element is a significant performance improvement when the developer already knows\r\n * > that the compiled element will be always the same and the scope will not change either.\r\n *\r\n * The `contentElement` option also supports DOM elements which will be temporary removed and\r\n * restored at its old position.\r\n *\r\n * \r\n * var domElement = document.querySelector('#myElement');\r\n *\r\n * $mdCompiler.compile({\r\n * contentElement: myElement\r\n * }).then(function (compileData) {\r\n * compileData.element // Content Element (same as above)\r\n * compileData.link // This does nothing when using a contentElement.\r\n * });\r\n * \r\n *\r\n * The `$mdCompiler` can also query for the element in the DOM itself.\r\n *\r\n * \r\n * $mdCompiler.compile({\r\n * contentElement: '#myElement'\r\n * }).then(function (compileData) {\r\n * compileData.element // Content Element (same as above)\r\n * compileData.link // This does nothing when using a contentElement.\r\n * });\r\n * \r\n *\r\n */\r\n function MdCompilerService($q, $templateRequest, $injector, $compile, $controller) {\r\n\r\n /**\r\n * @private @const\r\n * @type {!IQService}\r\n */\r\n this.$q = $q;\r\n\r\n /**\r\n * @private @const\r\n * @type {!ITemplateRequestService}\r\n */\r\n this.$templateRequest = $templateRequest;\r\n\r\n /**\r\n * @private @const\r\n * @type {!IInjectorService}\r\n */\r\n this.$injector = $injector;\r\n\r\n /**\r\n * @private @const\r\n * @type{!ICompileService}\r\n */\r\n this.$compile = $compile;\r\n\r\n /**\r\n * @private @const\r\n * @type {!IControllerService}\r\n */\r\n this.$controller = $controller;\r\n }\r\n\r\n /**\r\n * @ngdoc method\r\n * @name $mdCompiler#compile\r\n * @description\r\n *\r\n * A method to compile a HTML template with the AngularJS compiler.\r\n * The `$mdCompiler` is wrapper around the AngularJS compiler and provides extra functionality\r\n * like controller instantiation or async resolves.\r\n *\r\n * @param {!Object} options An options object, with the following properties:\r\n *\r\n * - `controller` - `{string|function}` Controller fn that should be associated with\r\n * newly created scope or the name of a registered controller if passed as a string.\r\n * - `controllerAs` - `{string=}` A controller alias name. If present the controller will be\r\n * published to scope under the `controllerAs` name.\r\n * - `contentElement` - `{string|Element}`: Instead of using a template, which will be\r\n * compiled each time, you can also use a DOM element.
\r\n * - `template` - `{string=}` An html template as a string.\r\n * - `templateUrl` - `{string=}` A path to an html template.\r\n * - `transformTemplate` - `{function(template)=}` A function which transforms the template after\r\n * it is loaded. It will be given the template string as a parameter, and should\r\n * return a a new string representing the transformed template.\r\n * - `resolve` - `{Object.=}` - An optional map of dependencies which should\r\n * be injected into the controller. If any of these dependencies are promises, the compiler\r\n * will wait for them all to be resolved, or if one is rejected before the controller is\r\n * instantiated `compile()` will fail..\r\n * * `key` - `{string}`: a name of a dependency to be injected into the controller.\r\n * * `factory` - `{string|function}`: If `string` then it is an alias for a service.\r\n * Otherwise if function, then it is injected and the return value is treated as the\r\n * dependency. If the result is a promise, it is resolved before its value is\r\n * injected into the controller.\r\n *\r\n * @returns {Q.Promise<{element: JQLite, link: Function, locals: Object, cleanup: any,\r\n * controller: Object=}>} promise A promise, which will be resolved with a `compileData` object.\r\n * `compileData` has the following properties:\r\n *\r\n * - `element` - `{JQLite}`: an uncompiled element matching the provided template.\r\n * - `link` - `{function(scope)}`: A link function, which, when called, will compile\r\n * the element and instantiate the provided controller (if given).\r\n * - `locals` - `{Object}`: The locals which will be passed into the controller once `link` is\r\n * called. If `bindToController` is true, they will be copied to the ctrl instead\r\n */\r\n MdCompilerService.prototype.compile = function(options) {\r\n if (options.contentElement) {\r\n return this._prepareContentElement(options);\r\n } else {\r\n return this._compileTemplate(options);\r\n }\r\n };\r\n\r\n /**\r\n * Instead of compiling any template, the compiler just fetches an existing HTML element from the\r\n * DOM and provides a restore function to put the element back it old DOM position.\r\n * @param {!Object} options Options to be used for the compiler.\r\n * @returns {Q.Promise<{element: JQLite, link: Function, locals: Object, cleanup: any}>}\r\n */\r\n MdCompilerService.prototype._prepareContentElement = function(options) {\r\n\r\n var contentElement = this._fetchContentElement(options);\r\n\r\n return this.$q.resolve({\r\n element: contentElement.element,\r\n cleanup: contentElement.restore,\r\n locals: {},\r\n link: function() {\r\n return contentElement.element;\r\n }\r\n });\r\n\r\n };\r\n\r\n /**\r\n * Compiles a template by considering all options and waiting for all resolves to be ready.\r\n * @param {!Object} options Compile options\r\n * @returns {!Q.Promise<{element: JQLite, link: Function, locals: Object, cleanup: any}>} Compile\r\n * data with link function.\r\n */\r\n MdCompilerService.prototype._compileTemplate = function(options) {\r\n\r\n var self = this;\r\n var templateUrl = options.templateUrl;\r\n var template = options.template || '';\r\n var resolve = angular.extend({}, options.resolve);\r\n var locals = angular.extend({}, options.locals);\r\n var transformTemplate = options.transformTemplate || angular.identity;\r\n\r\n // Take resolve values and invoke them.\r\n // Resolves can either be a string (value: 'MyRegisteredAngularConst'),\r\n // or an invokable 'factory' of sorts: (value: function ValueGetter($dependency) {})\r\n angular.forEach(resolve, function(value, key) {\r\n if (angular.isString(value)) {\r\n resolve[key] = self.$injector.get(value);\r\n } else {\r\n resolve[key] = self.$injector.invoke(value);\r\n }\r\n });\r\n\r\n // Add the locals, which are just straight values to inject\r\n // eg locals: { three: 3 }, will inject three into the controller\r\n angular.extend(resolve, locals);\r\n\r\n if (templateUrl) {\r\n resolve.$$ngTemplate = this.$templateRequest(templateUrl);\r\n } else {\r\n resolve.$$ngTemplate = this.$q.when(template);\r\n }\r\n\r\n\r\n // Wait for all the resolves to finish if they are promises\r\n return this.$q.all(resolve).then(function(locals) {\r\n\r\n var template = transformTemplate(locals.$$ngTemplate, options);\r\n var element = options.element || angular.element('
\r\n * - `template` - `{string=}` An html template as a string.\r\n * - `templateUrl` - `{string=}` A path to an html template.\r\n * - `transformTemplate` - `{function(template)=}` A function which transforms the template after\r\n * it is loaded. It will be given the template string as a parameter, and should\r\n * return a a new string representing the transformed template.\r\n * - `resolve` - `{Object.
').html(template.trim()).contents();\r\n\r\n return self._compileElement(locals, element, options);\r\n });\r\n\r\n };\r\n\r\n /**\r\n * Method to compile an element with the given options.\r\n * @param {!Object} locals Locals to be injected to the controller if present\r\n * @param {!JQLite} element Element to be compiled and linked\r\n * @param {!Object} options Options to be used for linking.\r\n * @returns {!{element: JQLite, link: Function, locals: Object, cleanup: any, controller: Object}} Compile data with link function.\r\n */\r\n MdCompilerService.prototype._compileElement = function(locals, element, options) {\r\n var self = this;\r\n var ngLinkFn = this.$compile(element);\r\n\r\n var compileData = {\r\n element: element,\r\n cleanup: element.remove.bind(element),\r\n locals: locals,\r\n link: linkFn\r\n };\r\n\r\n function linkFn(scope) {\r\n locals.$scope = scope;\r\n\r\n // Instantiate controller if the developer provided one.\r\n if (options.controller) {\r\n\r\n var injectLocals = angular.extend({}, locals, {\r\n $element: element\r\n });\r\n\r\n // Create the specified controller instance.\r\n var ctrl = self._createController(options, injectLocals, locals);\r\n\r\n // Registering extra $destroy listeners should be avoided.\r\n // Only register the listener if the controller implements a $onDestroy hook.\r\n if (angular.isFunction(ctrl.$onDestroy)) {\r\n scope.$on('$destroy', function() {\r\n // Call the $onDestroy hook if it's present on the controller.\r\n angular.isFunction(ctrl.$onDestroy) && ctrl.$onDestroy();\r\n });\r\n }\r\n\r\n // Unique identifier for AngularJS Route ngView controllers.\r\n element.data('$ngControllerController', ctrl);\r\n element.children().data('$ngControllerController', ctrl);\r\n\r\n // Expose the instantiated controller to the compile data\r\n compileData.controller = ctrl;\r\n }\r\n\r\n // Invoke the AngularJS $compile link function.\r\n return ngLinkFn(scope);\r\n }\r\n\r\n return compileData;\r\n\r\n };\r\n\r\n /**\r\n * Creates and instantiates a new controller with the specified options.\r\n * @param {!Object} options Options that include the controller function or string.\r\n * @param {!Object} injectLocals Locals to to be provided in the controller DI.\r\n * @param {!Object} locals Locals to be injected to the controller.\r\n * @returns {!Object} Created controller instance.\r\n */\r\n MdCompilerService.prototype._createController = function(options, injectLocals, locals) {\r\n var ctrl = this.$controller(options.controller, injectLocals);\r\n\r\n if (options.bindToController) {\r\n angular.extend(ctrl, locals);\r\n }\r\n\r\n if (options.controllerAs) {\r\n injectLocals.$scope[options.controllerAs] = ctrl;\r\n }\r\n\r\n // Call the $onInit hook if it's present on the controller.\r\n angular.isFunction(ctrl.$onInit) && ctrl.$onInit();\r\n\r\n return ctrl;\r\n };\r\n\r\n /**\r\n * Fetches an element removing it from the DOM and using it temporary for the compiler.\r\n * Elements which were fetched will be restored after use.\r\n * @param {!Object} options Options to be used for the compilation.\r\n * @returns {{element: !JQLite, restore: !function}}\r\n */\r\n MdCompilerService.prototype._fetchContentElement = function(options) {\r\n var contentEl = options.contentElement;\r\n var restoreFn;\r\n\r\n if (angular.isString(contentEl)) {\r\n contentEl = document.querySelector(contentEl);\r\n restoreFn = createRestoreFn(contentEl);\r\n } else {\r\n contentEl = contentEl[0] || contentEl;\r\n\r\n // When the element is visible in the DOM, then we restore it at close of the dialog.\r\n // Otherwise it will be removed from the DOM after close.\r\n if (document.contains(contentEl)) {\r\n restoreFn = createRestoreFn(contentEl);\r\n } else {\r\n restoreFn = function() {\r\n if (contentEl.parentNode) {\r\n contentEl.parentNode.removeChild(contentEl);\r\n }\r\n };\r\n }\r\n }\r\n\r\n return {\r\n element: angular.element(contentEl),\r\n restore: restoreFn\r\n };\r\n\r\n function createRestoreFn(element) {\r\n var parent = element.parentNode;\r\n var nextSibling = element.nextElementSibling;\r\n\r\n return function() {\r\n if (!nextSibling) {\r\n // When the element didn't had any sibling, then it can be simply appended to the\r\n // parent, because it plays no role, which index it had before.\r\n parent.appendChild(element);\r\n } else {\r\n // When the element had a sibling, which marks the previous position of the element\r\n // in the DOM, we insert it correctly before the sibling, to have the same index as\r\n // before.\r\n parent.insertBefore(element, nextSibling);\r\n }\r\n };\r\n }\r\n };\r\n}\r\n\r\n\r\n})();\r\n(function(){\r\n\"use strict\";\r\n\r\n\r\nMdGesture.$inject = [\"$$MdGestureHandler\", \"$$rAF\", \"$timeout\", \"$mdUtil\"];\r\nattachToDocument.$inject = [\"$mdGesture\", \"$$MdGestureHandler\", \"$mdUtil\"];var HANDLERS = {};\r\n\r\n/**\r\n * The state of the current 'pointer'. The pointer represents the state of the current touch.\r\n * It contains normalized x and y coordinates from DOM events,\r\n * as well as other information abstracted from the DOM.\r\n */\r\nvar pointer, lastPointer, maxClickDistance = 6;\r\nvar forceSkipClickHijack = false, disableAllGestures = false;\r\n\r\n/**\r\n * The position of the most recent click if that click was on a label element.\r\n * @type {{x: number, y: number}|null}\r\n */\r\nvar lastLabelClickPos = null;\r\n\r\n/**\r\n * Used to attach event listeners once when multiple ng-apps are running.\r\n * @type {boolean}\r\n */\r\nvar isInitialized = false;\r\n\r\n/**\r\n * @ngdoc module\r\n * @name material.core.gestures\r\n * @description\r\n * AngularJS Material Gesture handling for touch devices.\r\n * This module replaced the usage of the HammerJS library.\r\n */\r\nangular\r\n .module('material.core.gestures', [])\r\n .provider('$mdGesture', MdGestureProvider)\r\n .factory('$$MdGestureHandler', MdGestureHandler)\r\n .run(attachToDocument);\r\n\r\n/**\r\n * @ngdoc service\r\n * @name $mdGestureProvider\r\n * @module material.core.gestures\r\n *\r\n * @description\r\n * In some scenarios on mobile devices (without jQuery), the click events should NOT be hijacked.\r\n * `$mdGestureProvider` is used to configure the Gesture module to ignore or skip click hijacking\r\n * on mobile devices.\r\n *\r\n * You can also change the max click distance, `6px` by default, if you have issues on some touch\r\n * screens.\r\n *\r\n * \r\n * app.config(function($mdGestureProvider) {\r\n *\r\n * // For mobile devices without jQuery loaded, do not\r\n * // intercept click events during the capture phase.\r\n * $mdGestureProvider.skipClickHijack();\r\n *\r\n * // If hijacking clicks, you may want to change the default click distance\r\n * $mdGestureProvider.setMaxClickDistance(12);\r\n * });\r\n * \r\n *\r\n */\r\nfunction MdGestureProvider() { }\r\n\r\nMdGestureProvider.prototype = {\r\n\r\n /**\r\n * @ngdoc method\r\n * @name $mdGestureProvider#disableAll\r\n *\r\n * @description\r\n * Disable all gesture detection. This can be beneficial to application performance\r\n * and memory usage.\r\n */\r\n disableAll: function () {\r\n disableAllGestures = true;\r\n },\r\n\r\n // Publish access to setter to configure a variable BEFORE the\r\n // $mdGesture service is instantiated...\r\n /**\r\n * @ngdoc method\r\n * @name $mdGestureProvider#skipClickHijack\r\n *\r\n * @description\r\n * Tell the AngularJS Material Gesture module to skip (or ignore) click hijacking on mobile devices.\r\n */\r\n skipClickHijack: function() {\r\n return forceSkipClickHijack = true;\r\n },\r\n\r\n /**\r\n * @ngdoc method\r\n * @name $mdGestureProvider#setMaxClickDistance\r\n * @param clickDistance {string} Distance in pixels. I.e. `12px`.\r\n * @description\r\n * Set the max distance from the origin of the touch event to trigger touch handlers.\r\n */\r\n setMaxClickDistance: function(clickDistance) {\r\n maxClickDistance = parseInt(clickDistance);\r\n },\r\n\r\n /**\r\n * $get is used to build an instance of $mdGesture\r\n * @ngInject\r\n */\r\n $get : [\"$$MdGestureHandler\", \"$$rAF\", \"$timeout\", \"$mdUtil\", function($$MdGestureHandler, $$rAF, $timeout, $mdUtil) {\r\n return new MdGesture($$MdGestureHandler, $$rAF, $timeout, $mdUtil);\r\n }]\r\n};\r\n\r\n\r\n\r\n/**\r\n * MdGesture factory construction function\r\n * @ngInject\r\n */\r\nfunction MdGesture($$MdGestureHandler, $$rAF, $timeout, $mdUtil) {\r\n var touchActionProperty = $mdUtil.getTouchAction();\r\n var hasJQuery = (typeof window.jQuery !== 'undefined') && (angular.element === window.jQuery);\r\n\r\n var self = {\r\n handler: addHandler,\r\n register: register,\r\n isAndroid: $mdUtil.isAndroid,\r\n isIos: $mdUtil.isIos,\r\n // On mobile w/out jQuery, we normally intercept clicks. Should we skip that?\r\n isHijackingClicks: ($mdUtil.isIos || $mdUtil.isAndroid) && !hasJQuery && !forceSkipClickHijack\r\n };\r\n\r\n if (self.isHijackingClicks) {\r\n self.handler('click', {\r\n options: {\r\n maxDistance: maxClickDistance\r\n },\r\n onEnd: checkDistanceAndEmit('click')\r\n });\r\n\r\n self.handler('focus', {\r\n options: {\r\n maxDistance: maxClickDistance\r\n },\r\n onEnd: function(ev, pointer) {\r\n if (pointer.distance < this.state.options.maxDistance && canFocus(ev.target)) {\r\n this.dispatchEvent(ev, 'focus', pointer);\r\n ev.target.focus();\r\n }\r\n }\r\n });\r\n\r\n self.handler('mouseup', {\r\n options: {\r\n maxDistance: maxClickDistance\r\n },\r\n onEnd: checkDistanceAndEmit('mouseup')\r\n });\r\n\r\n self.handler('mousedown', {\r\n onStart: function(ev) {\r\n this.dispatchEvent(ev, 'mousedown');\r\n }\r\n });\r\n }\r\n\r\n function checkDistanceAndEmit(eventName) {\r\n return function(ev, pointer) {\r\n if (pointer.distance < this.state.options.maxDistance) {\r\n this.dispatchEvent(ev, eventName, pointer);\r\n }\r\n };\r\n }\r\n\r\n /**\r\n * Register an element to listen for a handler.\r\n * This allows an element to override the default options for a handler.\r\n * Additionally, some handlers like drag and hold only dispatch events if\r\n * the domEvent happens inside an element that's registered to listen for these events.\r\n *\r\n * @see GestureHandler for how overriding of default options works.\r\n * @example $mdGesture.register(myElement, 'drag', { minDistance: 20, horizontal: false })\r\n */\r\n function register(element, handlerName, options) {\r\n var handler = HANDLERS[handlerName.replace(/^\\$md./, '')];\r\n if (!handler) {\r\n throw new Error('Failed to register element with handler ' + handlerName + '. ' +\r\n 'Available handlers: ' + Object.keys(HANDLERS).join(', '));\r\n }\r\n return handler.registerElement(element, options);\r\n }\r\n\r\n /*\r\n * add a handler to $mdGesture. see below.\r\n */\r\n function addHandler(name, definition) {\r\n var handler = new $$MdGestureHandler(name);\r\n angular.extend(handler, definition);\r\n HANDLERS[name] = handler;\r\n\r\n return self;\r\n }\r\n\r\n /**\r\n * Register handlers. These listen to touch/start/move events, interpret them,\r\n * and dispatch gesture events depending on options & conditions. These are all\r\n * instances of GestureHandler.\r\n * @see GestureHandler\r\n */\r\n return self\r\n /*\r\n * The press handler dispatches an event on touchdown/touchend.\r\n * It's a simple abstraction of touch/mouse/pointer start and end.\r\n */\r\n .handler('press', {\r\n onStart: function (ev, pointer) {\r\n this.dispatchEvent(ev, '$md.pressdown');\r\n },\r\n onEnd: function (ev, pointer) {\r\n this.dispatchEvent(ev, '$md.pressup');\r\n }\r\n })\r\n\r\n /*\r\n * The hold handler dispatches an event if the user keeps their finger within\r\n * the same area for ms.\r\n * The hold handler will only run if a parent of the touch target is registered\r\n * to listen for hold events through $mdGesture.register()\r\n */\r\n .handler('hold', {\r\n options: {\r\n maxDistance: 6,\r\n delay: 500\r\n },\r\n onCancel: function () {\r\n $timeout.cancel(this.state.timeout);\r\n },\r\n onStart: function (ev, pointer) {\r\n // For hold, require a parent to be registered with $mdGesture.register()\r\n // Because we prevent scroll events, this is necessary.\r\n if (!this.state.registeredParent) return this.cancel();\r\n\r\n this.state.pos = {x: pointer.x, y: pointer.y};\r\n this.state.timeout = $timeout(angular.bind(this, function holdDelayFn() {\r\n this.dispatchEvent(ev, '$md.hold');\r\n this.cancel(); // we're done!\r\n }), this.state.options.delay, false);\r\n },\r\n onMove: function (ev, pointer) {\r\n // Don't scroll while waiting for hold.\r\n // If we don't preventDefault touchmove events here, Android will assume we don't\r\n // want to listen to anymore touch events. It will start scrolling and stop sending\r\n // touchmove events.\r\n if (!touchActionProperty && ev.type === 'touchmove') ev.preventDefault();\r\n\r\n // If the user moves greater than pixels, stop the hold timer\r\n // set in onStart\r\n var dx = this.state.pos.x - pointer.x;\r\n var dy = this.state.pos.y - pointer.y;\r\n if (Math.sqrt(dx * dx + dy * dy) > this.options.maxDistance) {\r\n this.cancel();\r\n }\r\n },\r\n onEnd: function () {\r\n this.onCancel();\r\n }\r\n })\r\n\r\n /*\r\n * The drag handler dispatches a drag event if the user holds and moves his finger greater than\r\n * px in the x or y direction, depending on options.horizontal.\r\n * The drag will be cancelled if the user moves his finger greater than * in\r\n * the perpendicular direction. Eg if the drag is horizontal and the user moves his finger *\r\n * pixels vertically, this handler won't consider the move part of a drag.\r\n */\r\n .handler('drag', {\r\n options: {\r\n minDistance: 6,\r\n horizontal: true,\r\n cancelMultiplier: 1.5\r\n },\r\n /**\r\n * @param {angular.JQLite} element where touch action styles need to be adjusted\r\n * @param {{horizontal: boolean}=} options object whose horizontal property can specify to\r\n * apply 'pan-y' or 'pan-x' touch actions.\r\n */\r\n onSetup: function(element, options) {\r\n if (touchActionProperty) {\r\n // We check for horizontal to be false, because otherwise we would overwrite the default opts.\r\n this.oldTouchAction = element[0].style[touchActionProperty];\r\n element[0].style[touchActionProperty] = options.horizontal ? 'pan-y' : 'pan-x';\r\n }\r\n },\r\n /**\r\n * @param {angular.JQLite} element where styles need to be cleaned up\r\n */\r\n onCleanup: function(element) {\r\n if (this.oldTouchAction) {\r\n element[0].style[touchActionProperty] = this.oldTouchAction;\r\n } else {\r\n element[0].style[touchActionProperty] = null;\r\n }\r\n },\r\n onStart: function (ev) {\r\n // For drag, require a parent to be registered with $mdGesture.register()\r\n if (!this.state.registeredParent) this.cancel();\r\n },\r\n onMove: function (ev, pointer) {\r\n var shouldStartDrag, shouldCancel;\r\n // Don't scroll while deciding if this touchmove qualifies as a drag event.\r\n // If we don't preventDefault touchmove events here, Android will assume we don't\r\n // want to listen to anymore touch events. It will start scrolling and stop sending\r\n // touchmove events.\r\n if (!touchActionProperty && ev.type === 'touchmove') ev.preventDefault();\r\n\r\n if (!this.state.dragPointer) {\r\n if (this.state.options.horizontal) {\r\n shouldStartDrag = Math.abs(pointer.distanceX) > this.state.options.minDistance;\r\n shouldCancel = Math.abs(pointer.distanceY) > this.state.options.minDistance * this.state.options.cancelMultiplier;\r\n } else {\r\n shouldStartDrag = Math.abs(pointer.distanceY) > this.state.options.minDistance;\r\n shouldCancel = Math.abs(pointer.distanceX) > this.state.options.minDistance * this.state.options.cancelMultiplier;\r\n }\r\n\r\n if (shouldStartDrag) {\r\n // Create a new pointer representing this drag, starting at this point where the drag started.\r\n this.state.dragPointer = makeStartPointer(ev);\r\n updatePointerState(ev, this.state.dragPointer);\r\n this.dispatchEvent(ev, '$md.dragstart', this.state.dragPointer);\r\n\r\n } else if (shouldCancel) {\r\n this.cancel();\r\n }\r\n } else {\r\n this.dispatchDragMove(ev);\r\n }\r\n },\r\n // Only dispatch dragmove events every frame; any more is unnecessary\r\n dispatchDragMove: $$rAF.throttle(function (ev) {\r\n // Make sure the drag didn't stop while waiting for the next frame\r\n if (this.state.isRunning) {\r\n updatePointerState(ev, this.state.dragPointer);\r\n this.dispatchEvent(ev, '$md.drag', this.state.dragPointer);\r\n }\r\n }),\r\n onEnd: function (ev, pointer) {\r\n if (this.state.dragPointer) {\r\n updatePointerState(ev, this.state.dragPointer);\r\n this.dispatchEvent(ev, '$md.dragend', this.state.dragPointer);\r\n }\r\n }\r\n })\r\n\r\n /*\r\n * The swipe handler will dispatch a swipe event if, on the end of a touch,\r\n * the velocity and distance were high enough.\r\n */\r\n .handler('swipe', {\r\n options: {\r\n minVelocity: 0.65,\r\n minDistance: 10\r\n },\r\n onEnd: function (ev, pointer) {\r\n var eventType;\r\n\r\n if (Math.abs(pointer.velocityX) > this.state.options.minVelocity &&\r\n Math.abs(pointer.distanceX) > this.state.options.minDistance) {\r\n eventType = pointer.directionX == 'left' ? '$md.swipeleft' : '$md.swiperight';\r\n this.dispatchEvent(ev, eventType);\r\n }\r\n else if (Math.abs(pointer.velocityY) > this.state.options.minVelocity &&\r\n Math.abs(pointer.distanceY) > this.state.options.minDistance) {\r\n eventType = pointer.directionY == 'up' ? '$md.swipeup' : '$md.swipedown';\r\n this.dispatchEvent(ev, eventType);\r\n }\r\n }\r\n });\r\n}\r\n\r\n/**\r\n * MdGestureHandler\r\n * A GestureHandler is an object which is able to dispatch custom dom events\r\n * based on native dom {touch,pointer,mouse}{start,move,end} events.\r\n *\r\n * A gesture will manage its lifecycle through the start,move,end, and cancel\r\n * functions, which are called by native dom events.\r\n *\r\n * A gesture has the concept of 'options' (eg. a swipe's required velocity), which can be\r\n * overridden by elements registering through $mdGesture.register().\r\n */\r\nfunction GestureHandler (name) {\r\n this.name = name;\r\n this.state = {};\r\n}\r\n\r\nfunction MdGestureHandler() {\r\n var hasJQuery = (typeof window.jQuery !== 'undefined') && (angular.element === window.jQuery);\r\n\r\n GestureHandler.prototype = {\r\n options: {},\r\n // jQuery listeners don't work with custom DOMEvents, so we have to dispatch events\r\n // differently when jQuery is loaded\r\n dispatchEvent: hasJQuery ? jQueryDispatchEvent : nativeDispatchEvent,\r\n\r\n // These are overridden by the registered handler\r\n onSetup: angular.noop,\r\n onCleanup: angular.noop,\r\n onStart: angular.noop,\r\n onMove: angular.noop,\r\n onEnd: angular.noop,\r\n onCancel: angular.noop,\r\n\r\n // onStart sets up a new state for the handler, which includes options from the\r\n // nearest registered parent element of ev.target.\r\n start: function (ev, pointer) {\r\n if (this.state.isRunning) return;\r\n var parentTarget = this.getNearestParent(ev.target);\r\n // Get the options from the nearest registered parent\r\n var parentTargetOptions = parentTarget && parentTarget.$mdGesture[this.name] || {};\r\n\r\n this.state = {\r\n isRunning: true,\r\n // Override the default options with the nearest registered parent's options\r\n options: angular.extend({}, this.options, parentTargetOptions),\r\n // Pass in the registered parent node to the state so the onStart listener can use\r\n registeredParent: parentTarget\r\n };\r\n this.onStart(ev, pointer);\r\n },\r\n move: function (ev, pointer) {\r\n if (!this.state.isRunning) return;\r\n this.onMove(ev, pointer);\r\n },\r\n end: function (ev, pointer) {\r\n if (!this.state.isRunning) return;\r\n this.state.isRunning = false;\r\n this.onEnd(ev, pointer);\r\n },\r\n cancel: function (ev, pointer) {\r\n this.onCancel(ev, pointer);\r\n this.state = {};\r\n },\r\n\r\n // Find and return the nearest parent element that has been registered to\r\n // listen for this handler via $mdGesture.register(element, 'handlerName').\r\n getNearestParent: function (node) {\r\n var current = node;\r\n while (current) {\r\n if ((current.$mdGesture || {})[this.name]) {\r\n return current;\r\n }\r\n current = current.parentNode;\r\n }\r\n return null;\r\n },\r\n\r\n // Called from $mdGesture.register when an element registers itself with a handler.\r\n // Store the options the user gave on the DOMElement itself. These options will\r\n // be retrieved with getNearestParent when the handler starts.\r\n registerElement: function (element, options) {\r\n var self = this;\r\n element[0].$mdGesture = element[0].$mdGesture || {};\r\n element[0].$mdGesture[this.name] = options || {};\r\n element.on('$destroy', onDestroy);\r\n\r\n self.onSetup(element, options || {});\r\n\r\n return onDestroy;\r\n\r\n function onDestroy() {\r\n delete element[0].$mdGesture[self.name];\r\n element.off('$destroy', onDestroy);\r\n\r\n self.onCleanup(element, options || {});\r\n }\r\n }\r\n };\r\n\r\n return GestureHandler;\r\n\r\n /**\r\n * Dispatch an event with jQuery\r\n * TODO: Make sure this sends bubbling events\r\n *\r\n * @param srcEvent the original DOM touch event that started this.\r\n * @param eventType the name of the custom event to send (eg 'click' or '$md.drag')\r\n * @param eventPointer the pointer object that matches this event.\r\n */\r\n function jQueryDispatchEvent(srcEvent, eventType, eventPointer) {\r\n eventPointer = eventPointer || pointer;\r\n var eventObj = new angular.element.Event(eventType);\r\n\r\n eventObj.$material = true;\r\n eventObj.pointer = eventPointer;\r\n eventObj.srcEvent = srcEvent;\r\n\r\n angular.extend(eventObj, {\r\n clientX: eventPointer.x,\r\n clientY: eventPointer.y,\r\n screenX: eventPointer.x,\r\n screenY: eventPointer.y,\r\n pageX: eventPointer.x,\r\n pageY: eventPointer.y,\r\n ctrlKey: srcEvent.ctrlKey,\r\n altKey: srcEvent.altKey,\r\n shiftKey: srcEvent.shiftKey,\r\n metaKey: srcEvent.metaKey\r\n });\r\n angular.element(eventPointer.target).trigger(eventObj);\r\n }\r\n\r\n /**\r\n * NOTE: nativeDispatchEvent is very performance sensitive.\r\n * @param srcEvent the original DOM touch event that started this.\r\n * @param eventType the name of the custom event to send (eg 'click' or '$md.drag')\r\n * @param eventPointer the pointer object that matches this event.\r\n */\r\n function nativeDispatchEvent(srcEvent, eventType, eventPointer) {\r\n eventPointer = eventPointer || pointer;\r\n var eventObj;\r\n \r\n if (eventType === 'click' || eventType === 'mouseup' || eventType === 'mousedown') {\r\n if (typeof window.MouseEvent === \"function\" && srcEvent.screenX && srcEvent.screenY) {\r\n eventObj = new MouseEvent(eventType, {\r\n bubbles: true,\r\n cancelable: true,\r\n screenX: Number(srcEvent.screenX),\r\n screenY: Number(srcEvent.screenY),\r\n clientX: Number(eventPointer.x),\r\n clientY: Number(eventPointer.y),\r\n ctrlKey: srcEvent.ctrlKey,\r\n altKey: srcEvent.altKey,\r\n shiftKey: srcEvent.shiftKey,\r\n metaKey: srcEvent.metaKey,\r\n button: srcEvent.button,\r\n buttons: srcEvent.buttons,\r\n relatedTarget: srcEvent.relatedTarget || null\r\n });\r\n } else {\r\n eventObj = document.createEvent('MouseEvents');\r\n // This has been deprecated\r\n // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/initMouseEvent\r\n eventObj.initMouseEvent(\r\n eventType, true, true, window, srcEvent.detail,\r\n eventPointer.x, eventPointer.y, eventPointer.x, eventPointer.y,\r\n srcEvent.ctrlKey, srcEvent.altKey, srcEvent.shiftKey, srcEvent.metaKey,\r\n srcEvent.button, srcEvent.relatedTarget || null\r\n );\r\n }\r\n } else {\r\n if (typeof window.CustomEvent === \"function\") {\r\n eventObj = new CustomEvent(eventType, {\r\n bubbles: true,\r\n cancelable: true,\r\n detail: {}\r\n });\r\n } else {\r\n // This has been deprecated\r\n // https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/initCustomEvent\r\n eventObj = document.createEvent('CustomEvent');\r\n eventObj.initCustomEvent(eventType, true, true, {});\r\n }\r\n }\r\n eventObj.$material = true;\r\n eventObj.pointer = eventPointer;\r\n eventObj.srcEvent = srcEvent;\r\n eventPointer.target.dispatchEvent(eventObj);\r\n }\r\n}\r\n\r\n/**\r\n * Attach Gestures: hook document and check shouldHijack clicks\r\n * @ngInject\r\n */\r\nfunction attachToDocument($mdGesture, $$MdGestureHandler, $mdUtil) {\r\n if (disableAllGestures) {\r\n return;\r\n }\r\n\r\n if (!isInitialized && $mdGesture.isHijackingClicks) {\r\n /*\r\n * If hijack clicks is true, we preventDefault any click that wasn't\r\n * sent by AngularJS Material. This is because on older Android & iOS, a false, or 'ghost',\r\n * click event will be sent ~400ms after a touchend event happens.\r\n * The only way to know if this click is real is to prevent any normal\r\n * click events, and add a flag to events sent by material so we know not to prevent those.\r\n *\r\n * Two exceptions to click events that should be prevented are:\r\n * - click events sent by the keyboard (eg form submit)\r\n * - events that originate from an Ionic app\r\n */\r\n document.addEventListener('click' , clickHijacker , true);\r\n document.addEventListener('mouseup' , mouseInputHijacker, true);\r\n document.addEventListener('mousedown', mouseInputHijacker, true);\r\n document.addEventListener('focus' , mouseInputHijacker, true);\r\n\r\n isInitialized = true;\r\n }\r\n\r\n function mouseInputHijacker(ev) {\r\n var isKeyClick = !ev.clientX && !ev.clientY;\r\n\r\n if (\r\n !isKeyClick &&\r\n !ev.$material &&\r\n !ev.isIonicTap &&\r\n !isInputEventFromLabelClick(ev) &&\r\n (ev.type !== 'mousedown' || (!canFocus(ev.target) && !canFocus(document.activeElement)))\r\n ) {\r\n ev.preventDefault();\r\n ev.stopPropagation();\r\n }\r\n }\r\n\r\n /**\r\n * Ignore click events that don't come from AngularJS Material, Ionic, Input Label clicks,\r\n * or key presses that generate click events. This helps to ignore the ghost tap events on\r\n * older mobile browsers that get sent after a 300-400ms delay.\r\n * @param ev MouseEvent or modified MouseEvent with $material, pointer, and other fields\r\n */\r\n function clickHijacker(ev) {\r\n var isKeyClick;\r\n if ($mdUtil.isIos) {\r\n isKeyClick = angular.isDefined(ev.webkitForce) && ev.webkitForce === 0;\r\n } else {\r\n isKeyClick = ev.clientX === 0 && ev.clientY === 0;\r\n }\r\n if (!isKeyClick && !ev.$material && !ev.isIonicTap && !isInputEventFromLabelClick(ev)) {\r\n ev.preventDefault();\r\n ev.stopPropagation();\r\n lastLabelClickPos = null;\r\n } else {\r\n lastLabelClickPos = null;\r\n if (ev.target.tagName.toLowerCase() === 'label') {\r\n lastLabelClickPos = {x: ev.x, y: ev.y};\r\n }\r\n }\r\n }\r\n\r\n\r\n // Listen to all events to cover all platforms.\r\n var START_EVENTS = 'mousedown touchstart pointerdown';\r\n var MOVE_EVENTS = 'mousemove touchmove pointermove';\r\n var END_EVENTS = 'mouseup mouseleave touchend touchcancel pointerup pointercancel';\r\n\r\n angular.element(document)\r\n .on(START_EVENTS, gestureStart)\r\n .on(MOVE_EVENTS, gestureMove)\r\n .on(END_EVENTS, gestureEnd)\r\n // For testing\r\n .on('$$mdGestureReset', function gestureClearCache () {\r\n lastPointer = pointer = null;\r\n });\r\n\r\n /**\r\n * When a DOM event happens, run all registered gesture handlers' lifecycle\r\n * methods which match the DOM event.\r\n * Eg. when a 'touchstart' event happens, runHandlers('start') will call and\r\n * run `handler.cancel()` and `handler.start()` on all registered handlers.\r\n */\r\n function runHandlers(handlerEvent, event) {\r\n var handler;\r\n for (var name in HANDLERS) {\r\n handler = HANDLERS[name];\r\n if (handler instanceof $$MdGestureHandler) {\r\n\r\n if (handlerEvent === 'start') {\r\n // Run cancel to reset any handlers' state\r\n handler.cancel();\r\n }\r\n handler[handlerEvent](event, pointer);\r\n }\r\n }\r\n }\r\n\r\n /*\r\n * gestureStart vets if a start event is legitimate (and not part of a 'ghost click' from iOS/Android)\r\n * If it is legitimate, we initiate the pointer state and mark the current pointer's type\r\n * For example, for a touchstart event, mark the current pointer as a 'touch' pointer, so mouse events\r\n * won't effect it.\r\n */\r\n function gestureStart(ev) {\r\n // If we're already touched down, abort\r\n if (pointer) return;\r\n\r\n var now = +Date.now();\r\n\r\n // iOS & old android bug: after a touch event, a click event is sent 350 ms later.\r\n // If <400ms have passed, don't allow an event of a different type than the previous event\r\n if (lastPointer && !typesMatch(ev, lastPointer) && (now - lastPointer.endTime < 1500)) {\r\n return;\r\n }\r\n\r\n pointer = makeStartPointer(ev);\r\n\r\n runHandlers('start', ev);\r\n }\r\n\r\n /**\r\n * If a move event happens of the right type, update the pointer and run all the move handlers.\r\n * \"of the right type\": if a mousemove happens but our pointer started with a touch event, do\r\n * nothing.\r\n */\r\n function gestureMove(ev) {\r\n if (!pointer || !typesMatch(ev, pointer)) return;\r\n\r\n updatePointerState(ev, pointer);\r\n runHandlers('move', ev);\r\n }\r\n\r\n /**\r\n * If an end event happens of the right type, update the pointer, run endHandlers, and save the\r\n * pointer as 'lastPointer'.\r\n */\r\n function gestureEnd(ev) {\r\n if (!pointer || !typesMatch(ev, pointer)) return;\r\n\r\n updatePointerState(ev, pointer);\r\n pointer.endTime = +Date.now();\r\n\r\n if (ev.type !== 'pointercancel') {\r\n runHandlers('end', ev);\r\n }\r\n\r\n lastPointer = pointer;\r\n pointer = null;\r\n }\r\n\r\n}\r\n\r\n// ********************\r\n// Module Functions\r\n// ********************\r\n\r\n/*\r\n * Initiate the pointer. x, y, and the pointer's type.\r\n */\r\nfunction makeStartPointer(ev) {\r\n var point = getEventPoint(ev);\r\n var startPointer = {\r\n startTime: +Date.now(),\r\n target: ev.target,\r\n // 'p' for pointer events, 'm' for mouse, 't' for touch\r\n type: ev.type.charAt(0)\r\n };\r\n startPointer.startX = startPointer.x = point.pageX;\r\n startPointer.startY = startPointer.y = point.pageY;\r\n return startPointer;\r\n}\r\n\r\n/*\r\n * return whether the pointer's type matches the event's type.\r\n * Eg if a touch event happens but the pointer has a mouse type, return false.\r\n */\r\nfunction typesMatch(ev, pointer) {\r\n return ev && pointer && ev.type.charAt(0) === pointer.type;\r\n}\r\n\r\n/**\r\n * Gets whether the given event is an input event that was caused by clicking on an\r\n * associated label element.\r\n *\r\n * This is necessary because the browser will, upon clicking on a label element, fire an\r\n * *extra* click event on its associated input (if any). mdGesture is able to flag the label\r\n * click as with `$material` correctly, but not the second input click.\r\n *\r\n * In order to determine whether an input event is from a label click, we compare the (x, y) for\r\n * the event to the (x, y) for the most recent label click (which is cleared whenever a non-label\r\n * click occurs). Unfortunately, there are no event properties that tie the input and the label\r\n * together (such as relatedTarget).\r\n *\r\n * @param {MouseEvent} event\r\n * @returns {boolean}\r\n */\r\nfunction isInputEventFromLabelClick(event) {\r\n return lastLabelClickPos\r\n && lastLabelClickPos.x === event.x\r\n && lastLabelClickPos.y === event.y;\r\n}\r\n\r\n/*\r\n * Update the given pointer based upon the given DOMEvent.\r\n * Distance, velocity, direction, duration, etc\r\n */\r\nfunction updatePointerState(ev, pointer) {\r\n var point = getEventPoint(ev);\r\n var x = pointer.x = point.pageX;\r\n var y = pointer.y = point.pageY;\r\n\r\n pointer.distanceX = x - pointer.startX;\r\n pointer.distanceY = y - pointer.startY;\r\n pointer.distance = Math.sqrt(\r\n pointer.distanceX * pointer.distanceX + pointer.distanceY * pointer.distanceY\r\n );\r\n\r\n pointer.directionX = pointer.distanceX > 0 ? 'right' : pointer.distanceX < 0 ? 'left' : '';\r\n pointer.directionY = pointer.distanceY > 0 ? 'down' : pointer.distanceY < 0 ? 'up' : '';\r\n\r\n pointer.duration = +Date.now() - pointer.startTime;\r\n pointer.velocityX = pointer.distanceX / pointer.duration;\r\n pointer.velocityY = pointer.distanceY / pointer.duration;\r\n}\r\n\r\n/**\r\n * Normalize the point where the DOM event happened whether it's touch or mouse.\r\n * @returns point event obj with pageX and pageY on it.\r\n */\r\nfunction getEventPoint(ev) {\r\n ev = ev.originalEvent || ev; // support jQuery events\r\n return (ev.touches && ev.touches[0]) ||\r\n (ev.changedTouches && ev.changedTouches[0]) ||\r\n ev;\r\n}\r\n\r\n/** Checks whether an element can be focused. */\r\nfunction canFocus(element) {\r\n return (\r\n !!element &&\r\n element.getAttribute('tabindex') !== '-1' &&\r\n !element.hasAttribute('disabled') &&\r\n (\r\n element.hasAttribute('tabindex') ||\r\n element.hasAttribute('href') ||\r\n element.isContentEditable ||\r\n ['INPUT', 'SELECT', 'BUTTON', 'TEXTAREA', 'VIDEO', 'AUDIO'].indexOf(element.nodeName) !== -1\r\n )\r\n );\r\n}\r\n\r\n})();\r\n(function(){\r\n\"use strict\";\r\n\r\n/**\r\n * @ngdoc module\r\n * @name material.core.interaction\r\n * @description\r\n * User interaction detection to provide proper accessibility.\r\n */\r\nMdInteractionService.$inject = [\"$timeout\", \"$mdUtil\", \"$rootScope\"];\r\nangular\r\n .module('material.core.interaction', [])\r\n .service('$mdInteraction', MdInteractionService);\r\n\r\n\r\n/**\r\n * @ngdoc service\r\n * @name $mdInteraction\r\n * @module material.core.interaction\r\n *\r\n * @description\r\n *\r\n * Service which keeps track of the last interaction type and validates them for several browsers.\r\n * The service hooks into the document's body and listens for touch, mouse and keyboard events.\r\n *\r\n * The most recent interaction type can be retrieved by calling the `getLastInteractionType` method.\r\n *\r\n * Here is an example markup for using the interaction service.\r\n *\r\n * \r\n * var lastType = $mdInteraction.getLastInteractionType();\r\n *\r\n * if (lastType === 'keyboard') {\r\n * // We only restore the focus for keyboard users.\r\n * restoreFocus();\r\n * }\r\n * \r\n *\r\n */\r\nfunction MdInteractionService($timeout, $mdUtil, $rootScope) {\r\n this.$timeout = $timeout;\r\n this.$mdUtil = $mdUtil;\r\n this.$rootScope = $rootScope;\r\n\r\n // IE browsers can also trigger pointer events, which also leads to an interaction.\r\n this.pointerEvent = 'MSPointerEvent' in window ? 'MSPointerDown' : 'PointerEvent' in window ? 'pointerdown' : null;\r\n this.bodyElement = angular.element(document.body);\r\n this.isBuffering = false;\r\n this.bufferTimeout = null;\r\n this.lastInteractionType = null;\r\n this.lastInteractionTime = null;\r\n this.inputHandler = this.onInputEvent.bind(this);\r\n this.bufferedInputHandler = this.onBufferInputEvent.bind(this);\r\n\r\n // Type Mappings for the different events\r\n // There will be three three interaction types\r\n // `keyboard`, `mouse` and `touch`\r\n // type `pointer` will be evaluated in `pointerMap` for IE Browser events\r\n this.inputEventMap = {\r\n 'keydown': 'keyboard',\r\n 'mousedown': 'mouse',\r\n 'mouseenter': 'mouse',\r\n 'touchstart': 'touch',\r\n 'pointerdown': 'pointer',\r\n 'MSPointerDown': 'pointer'\r\n };\r\n\r\n // IE PointerDown events will be validated in `touch` or `mouse`\r\n // Index numbers referenced here: https://msdn.microsoft.com/library/windows/apps/hh466130.aspx\r\n this.iePointerMap = {\r\n 2: 'touch',\r\n 3: 'touch',\r\n 4: 'mouse'\r\n };\r\n\r\n this.initializeEvents();\r\n this.$rootScope.$on('$destroy', this.deregister.bind(this));\r\n}\r\n\r\n/**\r\n * Removes all event listeners created by $mdInteration on the\r\n * body element.\r\n */\r\nMdInteractionService.prototype.deregister = function() {\r\n\r\n this.bodyElement.off('keydown mousedown', this.inputHandler);\r\n\r\n if ('ontouchstart' in document.documentElement) {\r\n this.bodyElement.off('touchstart', this.bufferedInputHandler);\r\n }\r\n\r\n if (this.pointerEvent) {\r\n this.bodyElement.off(this.pointerEvent, this.inputHandler);\r\n }\r\n\r\n};\r\n\r\n/**\r\n * Initializes the interaction service, by registering all interaction events to the\r\n * body element.\r\n */\r\nMdInteractionService.prototype.initializeEvents = function() {\r\n\r\n this.bodyElement.on('keydown mousedown', this.inputHandler);\r\n\r\n if ('ontouchstart' in document.documentElement) {\r\n this.bodyElement.on('touchstart', this.bufferedInputHandler);\r\n }\r\n\r\n if (this.pointerEvent) {\r\n this.bodyElement.on(this.pointerEvent, this.inputHandler);\r\n }\r\n\r\n};\r\n\r\n/**\r\n * Event listener for normal interaction events, which should be tracked.\r\n * @param event {MouseEvent|KeyboardEvent|PointerEvent|TouchEvent}\r\n */\r\nMdInteractionService.prototype.onInputEvent = function(event) {\r\n if (this.isBuffering) {\r\n return;\r\n }\r\n\r\n var type = this.inputEventMap[event.type];\r\n\r\n if (type === 'pointer') {\r\n type = this.iePointerMap[event.pointerType] || event.pointerType;\r\n }\r\n\r\n this.lastInteractionType = type;\r\n this.lastInteractionTime = this.$mdUtil.now();\r\n};\r\n\r\n/**\r\n * Event listener for interaction events which should be buffered (touch events).\r\n * @param event {TouchEvent}\r\n */\r\nMdInteractionService.prototype.onBufferInputEvent = function(event) {\r\n this.$timeout.cancel(this.bufferTimeout);\r\n\r\n this.onInputEvent(event);\r\n this.isBuffering = true;\r\n\r\n // The timeout of 650ms is needed to delay the touchstart, because otherwise the touch will call\r\n // the `onInput` function multiple times.\r\n this.bufferTimeout = this.$timeout(function() {\r\n this.isBuffering = false;\r\n }.bind(this), 650, false);\r\n\r\n};\r\n\r\n/**\r\n * @ngdoc method\r\n * @name $mdInteraction#getLastInteractionType\r\n * @description Retrieves the last interaction type triggered in body.\r\n * @returns {string|null} Last interaction type.\r\n */\r\nMdInteractionService.prototype.getLastInteractionType = function() {\r\n return this.lastInteractionType;\r\n};\r\n\r\n/**\r\n * @ngdoc method\r\n * @name $mdInteraction#isUserInvoked\r\n * @description Method to detect whether any interaction happened recently or not.\r\n * @param {number=} checkDelay Time to check for any interaction to have been triggered.\r\n * @returns {boolean} Whether there was any interaction or not.\r\n */\r\nMdInteractionService.prototype.isUserInvoked = function(checkDelay) {\r\n var delay = angular.isNumber(checkDelay) ? checkDelay : 15;\r\n\r\n // Check for any interaction to be within the specified check time.\r\n return this.lastInteractionTime >= this.$mdUtil.now() - delay;\r\n};\r\n\r\n})();\r\n(function(){\r\n\"use strict\";\r\n\r\nangular.module('material.core')\r\n .provider('$$interimElement', InterimElementProvider);\r\n\r\n/**\r\n * @ngdoc service\r\n * @name $$interimElementProvider\r\n * @module material.core.interimElement\r\n *\r\n * @description\r\n *\r\n * Factory that constructs `$$interimElement.$service` services.\r\n * Used internally in material design for elements that appear on screen temporarily.\r\n * The service provides a promise-like API for interacting with the temporary\r\n * elements.\r\n *\r\n * \r\n * app.service('$mdToast', function($$interimElement) {\r\n * var $mdToast = $$interimElement(toastDefaultOptions);\r\n * return $mdToast;\r\n * });\r\n * \r\n *\r\n * @param {object=} defaultOptions Options used by default for the `show` method on the service.\r\n *\r\n * @returns {$$interimElement.$service}\r\n */\r\n\r\nfunction InterimElementProvider() {\r\n InterimElementFactory.$inject = [\"$document\", \"$q\", \"$rootScope\", \"$timeout\", \"$rootElement\", \"$animate\", \"$mdUtil\", \"$mdCompiler\", \"$mdTheming\", \"$injector\", \"$exceptionHandler\"];\r\n createInterimElementProvider.$get = InterimElementFactory;\r\n return createInterimElementProvider;\r\n\r\n /**\r\n * Returns a new provider which allows configuration of a new interimElement\r\n * service. Allows configuration of default options & methods for options,\r\n * as well as configuration of 'preset' methods (eg dialog.basic(): basic is a preset method)\r\n */\r\n function createInterimElementProvider(interimFactoryName) {\r\n factory.$inject = [\"$$interimElement\", \"$injector\"];\r\n var EXPOSED_METHODS = ['onHide', 'onShow', 'onRemove'];\r\n\r\n var customMethods = {};\r\n var providerConfig = {\r\n presets: {}\r\n };\r\n\r\n var provider = {\r\n setDefaults: setDefaults,\r\n addPreset: addPreset,\r\n addMethod: addMethod,\r\n $get: factory\r\n };\r\n\r\n /**\r\n * all interim elements will come with the 'build' preset\r\n */\r\n provider.addPreset('build', {\r\n methods: ['controller', 'controllerAs', 'resolve', 'multiple',\r\n 'template', 'templateUrl', 'themable', 'transformTemplate', 'parent', 'contentElement']\r\n });\r\n\r\n return provider;\r\n\r\n /**\r\n * Save the configured defaults to be used when the factory is instantiated\r\n */\r\n function setDefaults(definition) {\r\n providerConfig.optionsFactory = definition.options;\r\n providerConfig.methods = (definition.methods || []).concat(EXPOSED_METHODS);\r\n return provider;\r\n }\r\n\r\n /**\r\n * Add a method to the factory that isn't specific to any interim element operations\r\n */\r\n function addMethod(name, fn) {\r\n customMethods[name] = fn;\r\n return provider;\r\n }\r\n\r\n /**\r\n * Save the configured preset to be used when the factory is instantiated\r\n */\r\n function addPreset(name, definition) {\r\n definition = definition || {};\r\n definition.methods = definition.methods || [];\r\n definition.options = definition.options || function() { return {}; };\r\n\r\n if (/^cancel|hide|show$/.test(name)) {\r\n throw new Error(\"Preset '\" + name + \"' in \" + interimFactoryName + \" is reserved!\");\r\n }\r\n if (definition.methods.indexOf('_options') > -1) {\r\n throw new Error(\"Method '_options' in \" + interimFactoryName + \" is reserved!\");\r\n }\r\n providerConfig.presets[name] = {\r\n methods: definition.methods.concat(EXPOSED_METHODS),\r\n optionsFactory: definition.options,\r\n argOption: definition.argOption\r\n };\r\n return provider;\r\n }\r\n\r\n function addPresetMethod(presetName, methodName, method) {\r\n providerConfig.presets[presetName][methodName] = method;\r\n }\r\n\r\n /**\r\n * Create a factory that has the given methods & defaults implementing interimElement\r\n */\r\n /* @ngInject */\r\n function factory($$interimElement, $injector) {\r\n var defaultMethods;\r\n var defaultOptions;\r\n var interimElementService = $$interimElement();\r\n\r\n /*\r\n * publicService is what the developer will be using.\r\n * It has methods hide(), cancel(), show(), build(), and any other\r\n * presets which were set during the config phase.\r\n */\r\n var publicService = {\r\n hide: interimElementService.hide,\r\n cancel: interimElementService.cancel,\r\n show: showInterimElement,\r\n\r\n // Special internal method to destroy an interim element without animations\r\n // used when navigation changes causes a $scope.$destroy() action\r\n destroy : destroyInterimElement\r\n };\r\n\r\n\r\n defaultMethods = providerConfig.methods || [];\r\n // This must be invoked after the publicService is initialized\r\n defaultOptions = invokeFactory(providerConfig.optionsFactory, {});\r\n\r\n // Copy over the simple custom methods\r\n angular.forEach(customMethods, function(fn, name) {\r\n publicService[name] = fn;\r\n });\r\n\r\n angular.forEach(providerConfig.presets, function(definition, name) {\r\n var presetDefaults = invokeFactory(definition.optionsFactory, {});\r\n var presetMethods = (definition.methods || []).concat(defaultMethods);\r\n\r\n // Every interimElement built with a preset has a field called `$type`,\r\n // which matches the name of the preset.\r\n // Eg in preset 'confirm', options.$type === 'confirm'\r\n angular.extend(presetDefaults, { $type: name });\r\n\r\n // This creates a preset class which has setter methods for every\r\n // method given in the `.addPreset()` function, as well as every\r\n // method given in the `.setDefaults()` function.\r\n //\r\n // @example\r\n // .setDefaults({\r\n // methods: ['hasBackdrop', 'clickOutsideToClose', 'escapeToClose', 'targetEvent'],\r\n // options: dialogDefaultOptions\r\n // })\r\n // .addPreset('alert', {\r\n // methods: ['title', 'ok'],\r\n // options: alertDialogOptions\r\n // })\r\n //\r\n // Set values will be passed to the options when interimElement.show() is called.\r\n function Preset(opts) {\r\n this._options = angular.extend({}, presetDefaults, opts);\r\n }\r\n angular.forEach(presetMethods, function(name) {\r\n Preset.prototype[name] = function(value) {\r\n this._options[name] = value;\r\n return this;\r\n };\r\n });\r\n\r\n // Create shortcut method for one-linear methods\r\n if (definition.argOption) {\r\n var methodName = 'show' + name.charAt(0).toUpperCase() + name.slice(1);\r\n publicService[methodName] = function(arg) {\r\n var config = publicService[name](arg);\r\n return publicService.show(config);\r\n };\r\n }\r\n\r\n // eg $mdDialog.alert() will return a new alert preset\r\n publicService[name] = function(arg) {\r\n // If argOption is supplied, eg `argOption: 'content'`, then we assume\r\n // if the argument is not an options object then it is the `argOption` option.\r\n //\r\n // @example `$mdToast.simple('hello')` // sets options.content to hello\r\n // // because argOption === 'content'\r\n if (arguments.length && definition.argOption &&\r\n !angular.isObject(arg) && !angular.isArray(arg)) {\r\n\r\n return (new Preset())[definition.argOption](arg);\r\n\r\n } else {\r\n return new Preset(arg);\r\n }\r\n\r\n };\r\n });\r\n\r\n return publicService;\r\n\r\n /**\r\n *\r\n */\r\n function showInterimElement(opts) {\r\n // opts is either a preset which stores its options on an _options field,\r\n // or just an object made up of options\r\n opts = opts || { };\r\n if (opts._options) opts = opts._options;\r\n\r\n return interimElementService.show(\r\n angular.extend({}, defaultOptions, opts)\r\n );\r\n }\r\n\r\n /**\r\n * Special method to hide and destroy an interimElement WITHOUT\r\n * any 'leave` or hide animations ( an immediate force hide/remove )\r\n *\r\n * NOTE: This calls the onRemove() subclass method for each component...\r\n * which must have code to respond to `options.$destroy == true`\r\n */\r\n function destroyInterimElement(opts) {\r\n return interimElementService.destroy(opts);\r\n }\r\n\r\n /**\r\n * Helper to call $injector.invoke with a local of the factory name for\r\n * this provider.\r\n * If an $mdDialog is providing options for a dialog and tries to inject\r\n * $mdDialog, a circular dependency error will happen.\r\n * We get around that by manually injecting $mdDialog as a local.\r\n */\r\n function invokeFactory(factory, defaultVal) {\r\n var locals = {};\r\n locals[interimFactoryName] = publicService;\r\n return $injector.invoke(factory || function() { return defaultVal; }, {}, locals);\r\n }\r\n }\r\n }\r\n\r\n /* @ngInject */\r\n function InterimElementFactory($document, $q, $rootScope, $timeout, $rootElement, $animate,\r\n $mdUtil, $mdCompiler, $mdTheming, $injector, $exceptionHandler) {\r\n return function createInterimElementService() {\r\n var SHOW_CANCELLED = false;\r\n\r\n /**\r\n * @ngdoc service\r\n * @name $$interimElementProvider.$service\r\n *\r\n * @description\r\n * A service used to control inserting and removing of an element from the DOM.\r\n * It is used by $mdBottomSheet, $mdDialog, $mdToast, $mdMenu, $mdPanel, and $mdSelect.\r\n */\r\n var service;\r\n\r\n var showPromises = []; // Promises for the interim's which are currently opening.\r\n var hidePromises = []; // Promises for the interim's which are currently hiding.\r\n var showingInterims = []; // Interim elements which are currently showing up.\r\n\r\n // Publish instance $$interimElement service;\r\n return service = {\r\n show: show,\r\n hide: waitForInterim(hide),\r\n cancel: waitForInterim(cancel),\r\n destroy : destroy,\r\n $injector_: $injector\r\n };\r\n\r\n /**\r\n * @ngdoc method\r\n * @name $$interimElementProvider.$service#show\r\n * @kind function\r\n *\r\n * @description\r\n * Adds the `$interimElement` to the DOM and returns a special promise that will be resolved\r\n * or rejected with hide or cancel, respectively.\r\n *\r\n * @param {Object} options map of options and values\r\n * @returns {Promise} a Promise that will be resolved when hide() is called or rejected when\r\n * cancel() is called.\r\n */\r\n function show(options) {\r\n options = options || {};\r\n var interimElement = new InterimElement(options || {});\r\n\r\n // When an interim element is currently showing, we have to cancel it.\r\n // Just hiding it, will resolve the InterimElement's promise, the promise should be\r\n // rejected instead.\r\n var hideAction = options.multiple ? $q.resolve() : $q.all(showPromises);\r\n\r\n if (!options.multiple) {\r\n // Wait for all opening interim's to finish their transition.\r\n hideAction = hideAction.then(function() {\r\n // Wait for all closing and showing interim's to be completely closed.\r\n var promiseArray = hidePromises.concat(showingInterims.map(service.cancel));\r\n return $q.all(promiseArray);\r\n });\r\n }\r\n\r\n var showAction = hideAction.then(function() {\r\n\r\n return interimElement\r\n .show()\r\n .then(function () {\r\n showingInterims.push(interimElement);\r\n })\r\n .catch(function (reason) {\r\n return reason;\r\n })\r\n .finally(function() {\r\n showPromises.splice(showPromises.indexOf(showAction), 1);\r\n });\r\n\r\n });\r\n\r\n showPromises.push(showAction);\r\n\r\n // In AngularJS 1.6+, exceptions inside promises will cause a rejection. We need to handle\r\n // the rejection and only log it if it's an error.\r\n interimElement.deferred.promise.catch(function(fault) {\r\n if (fault instanceof Error) {\r\n $exceptionHandler(fault);\r\n }\r\n\r\n return fault;\r\n });\r\n\r\n // Return a promise that will be resolved when the interim\r\n // element is hidden or cancelled...\r\n return interimElement.deferred.promise;\r\n }\r\n\r\n /**\r\n * @ngdoc method\r\n * @name $$interimElementProvider.$service#hide\r\n * @kind function\r\n *\r\n * @description\r\n * Removes the `$interimElement` from the DOM and resolves the Promise returned from `show()`.\r\n *\r\n * @param {*} reason Data used to resolve the Promise\r\n * @param {object} options map of options and values\r\n * @returns {Promise} a Promise that will be resolved after the element has been removed\r\n * from the DOM.\r\n */\r\n function hide(reason, options) {\r\n options = options || {};\r\n\r\n if (options.closeAll) {\r\n // We have to make a shallow copy of the array, because otherwise the map will break.\r\n return $q.all(showingInterims.slice().reverse().map(closeElement));\r\n } else if (options.closeTo !== undefined) {\r\n return $q.all(showingInterims.slice(options.closeTo).map(closeElement));\r\n }\r\n\r\n // Hide the latest showing interim element.\r\n return closeElement(showingInterims[showingInterims.length - 1]);\r\n\r\n /**\r\n * @param {InterimElement} interim element to close\r\n * @returns {Promise}\r\n */\r\n function closeElement(interim) {\r\n if (!interim) {\r\n return $q.when(reason);\r\n }\r\n\r\n var hideAction = interim\r\n .remove(reason, false, options || { })\r\n .catch(function(reason) { return reason; })\r\n .finally(function() {\r\n hidePromises.splice(hidePromises.indexOf(hideAction), 1);\r\n });\r\n\r\n showingInterims.splice(showingInterims.indexOf(interim), 1);\r\n hidePromises.push(hideAction);\r\n\r\n return interim.deferred.promise;\r\n }\r\n }\r\n\r\n /**\r\n * @ngdoc method\r\n * @name $$interimElementProvider.$service#cancel\r\n * @kind function\r\n *\r\n * @description\r\n * Removes the `$interimElement` from the DOM and rejects the Promise returned from `show()`.\r\n *\r\n * @param {*} reason Data used to resolve the Promise\r\n * @param {object} options map of options and values\r\n * @returns {Promise} Promise that will be resolved after the element has been removed\r\n * from the DOM.\r\n */\r\n function cancel(reason, options) {\r\n var interim = showingInterims.pop();\r\n if (!interim) {\r\n return $q.when(reason);\r\n }\r\n\r\n var cancelAction = interim\r\n .remove(reason, true, options || {})\r\n .catch(function(reason) { return reason; })\r\n .finally(function() {\r\n hidePromises.splice(hidePromises.indexOf(cancelAction), 1);\r\n });\r\n\r\n hidePromises.push(cancelAction);\r\n\r\n // Since AngularJS 1.6.7, promises will be logged to $exceptionHandler when the promise\r\n // is not handling the rejection. We create a pseudo catch handler, which will prevent the\r\n // promise from being logged to the $exceptionHandler.\r\n return interim.deferred.promise.catch(angular.noop);\r\n }\r\n\r\n /**\r\n * Creates a function to wait for at least one interim element to be available.\r\n * @param callbackFn Function to be used as callback\r\n * @returns {Function}\r\n */\r\n function waitForInterim(callbackFn) {\r\n return function() {\r\n var fnArguments = arguments;\r\n\r\n if (!showingInterims.length) {\r\n // When there are still interim's opening, then wait for the first interim element to\r\n // finish its open animation.\r\n if (showPromises.length) {\r\n return showPromises[0].finally(function () {\r\n return callbackFn.apply(service, fnArguments);\r\n });\r\n }\r\n\r\n return $q.when(\"No interim elements currently showing up.\");\r\n }\r\n\r\n return callbackFn.apply(service, fnArguments);\r\n };\r\n }\r\n\r\n /**\r\n * @ngdoc method\r\n * @name $$interimElementProvider.$service#destroy\r\n * @kind function\r\n *\r\n * Special method to quick-remove the interim element without running animations. This is\r\n * useful when the parent component has been or is being destroyed.\r\n *\r\n * Note: interim elements are in \"interim containers\".\r\n */\r\n function destroy(targetEl) {\r\n var interim = !targetEl ? showingInterims.shift() : null;\r\n\r\n var parentEl = angular.element(targetEl).length && angular.element(targetEl)[0].parentNode;\r\n\r\n if (parentEl) {\r\n // Try to find the interim in the stack which corresponds to the supplied DOM element.\r\n var filtered = showingInterims.filter(function(entry) {\r\n return entry.options.element[0] === parentEl;\r\n });\r\n\r\n // Note: This function might be called when the element already has been removed,\r\n // in which case we won't find any matches.\r\n if (filtered.length) {\r\n interim = filtered[0];\r\n showingInterims.splice(showingInterims.indexOf(interim), 1);\r\n }\r\n }\r\n\r\n return interim ? interim.remove(SHOW_CANCELLED, false, { '$destroy': true }) :\r\n $q.when(SHOW_CANCELLED);\r\n }\r\n\r\n /*\r\n * Internal Interim Element Object\r\n * Used internally to manage the DOM element and related data\r\n */\r\n function InterimElement(options) {\r\n var self, element, showAction = $q.when(true);\r\n\r\n options = configureScopeAndTransitions(options);\r\n\r\n return self = {\r\n options : options,\r\n deferred: $q.defer(),\r\n show : createAndTransitionIn,\r\n remove : transitionOutAndRemove\r\n };\r\n\r\n /**\r\n * Compile, link, and show this interim element. Use optional autoHide and transition-in\r\n * effects.\r\n * @return {Q.Promise}\r\n */\r\n function createAndTransitionIn() {\r\n return $q(function(resolve, reject) {\r\n\r\n // Trigger onCompiling callback before the compilation starts.\r\n // This is useful, when modifying options, which can be influenced by developers.\r\n options.onCompiling && options.onCompiling(options);\r\n\r\n compileElement(options)\r\n .then(function(compiledData) {\r\n element = linkElement(compiledData, options);\r\n\r\n // Expose the cleanup function from the compiler.\r\n options.cleanupElement = compiledData.cleanup;\r\n\r\n showAction = showElement(element, options, compiledData.controller)\r\n .then(resolve, rejectAll);\r\n }).catch(rejectAll);\r\n\r\n function rejectAll(fault) {\r\n // Force the '$md.show()' promise to reject\r\n self.deferred.reject(fault);\r\n\r\n // Continue rejection propagation\r\n reject(fault);\r\n }\r\n });\r\n }\r\n\r\n /**\r\n * After the show process has finished/rejected:\r\n * - announce 'removing',\r\n * - perform the transition-out, and\r\n * - perform optional clean up scope.\r\n */\r\n function transitionOutAndRemove(response, isCancelled, opts) {\r\n\r\n // abort if the show() and compile failed\r\n if (!element) return $q.when(false);\r\n\r\n options = angular.extend(options || {}, opts || {});\r\n options.cancelAutoHide && options.cancelAutoHide();\r\n options.element.triggerHandler('$mdInterimElementRemove');\r\n\r\n if (options.$destroy === true) {\r\n\r\n return hideElement(options.element, options).then(function(){\r\n (isCancelled && rejectAll(response)) || resolveAll(response);\r\n });\r\n\r\n } else {\r\n $q.when(showAction).finally(function() {\r\n hideElement(options.element, options).then(function() {\r\n isCancelled ? rejectAll(response) : resolveAll(response);\r\n }, rejectAll);\r\n });\r\n\r\n return self.deferred.promise;\r\n }\r\n\r\n\r\n /**\r\n * The `show()` returns a promise that will be resolved when the interim\r\n * element is hidden or cancelled...\r\n */\r\n function resolveAll(response) {\r\n self.deferred.resolve(response);\r\n }\r\n\r\n /**\r\n * Force the '$md.show()' promise to reject\r\n */\r\n function rejectAll(fault) {\r\n self.deferred.reject(fault);\r\n }\r\n }\r\n\r\n /**\r\n * Prepare optional isolated scope and prepare $animate with default enter and leave\r\n * transitions for the new element instance.\r\n */\r\n function configureScopeAndTransitions(options) {\r\n options = options || { };\r\n if (options.template) {\r\n options.template = $mdUtil.processTemplate(options.template);\r\n }\r\n\r\n return angular.extend({\r\n preserveScope: false,\r\n cancelAutoHide : angular.noop,\r\n scope: options.scope || $rootScope.$new(options.isolateScope),\r\n\r\n /**\r\n * Default usage to enable $animate to transition-in; can be easily overridden via 'options'\r\n */\r\n onShow: function transitionIn(scope, element, options) {\r\n return $animate.enter(element, options.parent);\r\n },\r\n\r\n /**\r\n * Default usage to enable $animate to transition-out; can be easily overridden via 'options'\r\n */\r\n onRemove: function transitionOut(scope, element) {\r\n // Element could be undefined if a new element is shown before\r\n // the old one finishes compiling.\r\n return element && $animate.leave(element) || $q.when();\r\n }\r\n }, options);\r\n\r\n }\r\n\r\n /**\r\n * Compile an element with a templateUrl, controller, and locals\r\n * @param {Object} options\r\n * @return {Q.Promise<{element: JQLite=, link: Function, locals: Object, cleanup: any=,\r\n * controller: Object=}>}\r\n */\r\n function compileElement(options) {\r\n\r\n var compiled = !options.skipCompile ? $mdCompiler.compile(options) : null;\r\n\r\n return compiled || $q(function (resolve) {\r\n resolve({\r\n locals: {},\r\n link: function () {\r\n return options.element;\r\n }\r\n });\r\n });\r\n }\r\n\r\n /**\r\n * Link an element with compiled configuration\r\n * @param {{element: JQLite=, link: Function, locals: Object, controller: Object=}} compileData\r\n * @param {Object} options\r\n * @return {JQLite}\r\n */\r\n function linkElement(compileData, options) {\r\n angular.extend(compileData.locals, options);\r\n\r\n var element = compileData.link(options.scope);\r\n\r\n // Search for parent at insertion time, if not specified\r\n options.element = element;\r\n options.parent = findParent(element, options);\r\n if (options.themable) $mdTheming(element);\r\n\r\n return element;\r\n }\r\n\r\n /**\r\n * Search for parent at insertion time, if not specified.\r\n * @param {JQLite} element\r\n * @param {Object} options\r\n * @return {JQLite}\r\n */\r\n function findParent(element, options) {\r\n var parent = options.parent;\r\n\r\n // Search for parent at insertion time, if not specified\r\n if (angular.isFunction(parent)) {\r\n parent = parent(options.scope, element, options);\r\n } else if (angular.isString(parent)) {\r\n parent = angular.element($document[0].querySelector(parent));\r\n } else {\r\n parent = angular.element(parent);\r\n }\r\n\r\n // If parent querySelector/getter function fails, or it's just null,\r\n // find a default.\r\n if (!(parent || {}).length) {\r\n var el;\r\n if ($rootElement[0] && $rootElement[0].querySelector) {\r\n el = $rootElement[0].querySelector(':not(svg) > body');\r\n }\r\n if (!el) el = $rootElement[0];\r\n if (el.nodeName === '#comment') {\r\n el = $document[0].body;\r\n }\r\n return angular.element(el);\r\n }\r\n\r\n return parent;\r\n }\r\n\r\n /**\r\n * If auto-hide is enabled, start timer and prepare cancel function\r\n */\r\n function startAutoHide() {\r\n var autoHideTimer, cancelAutoHide = angular.noop;\r\n\r\n if (options.hideDelay) {\r\n autoHideTimer = $timeout(service.hide, options.hideDelay) ;\r\n cancelAutoHide = function() {\r\n $timeout.cancel(autoHideTimer);\r\n };\r\n }\r\n\r\n // Cache for subsequent use\r\n options.cancelAutoHide = function() {\r\n cancelAutoHide();\r\n options.cancelAutoHide = undefined;\r\n };\r\n }\r\n\r\n /**\r\n * Show the element (with transitions), notify complete and start optional auto hiding\r\n * timer.\r\n * @param {JQLite} element\r\n * @param {Object} options\r\n * @param {Object} controller\r\n * @return {Q.Promise}\r\n */\r\n function showElement(element, options, controller) {\r\n // Trigger onShowing callback before the `show()` starts\r\n var notifyShowing = options.onShowing || angular.noop;\r\n // Trigger onComplete callback when the `show()` finishes\r\n var notifyComplete = options.onComplete || angular.noop;\r\n\r\n // Necessary for consistency between AngularJS 1.5 and 1.6.\r\n try {\r\n // This fourth controller parameter is used by $mdDialog in beforeShow().\r\n notifyShowing(options.scope, element, options, controller);\r\n } catch (e) {\r\n return $q.reject(e);\r\n }\r\n\r\n return $q(function (resolve, reject) {\r\n try {\r\n // Start transitionIn\r\n $q.when(options.onShow(options.scope, element, options))\r\n .then(function () {\r\n notifyComplete(options.scope, element, options);\r\n startAutoHide();\r\n\r\n resolve(element);\r\n }, reject);\r\n\r\n } catch (e) {\r\n reject(e.message);\r\n }\r\n });\r\n }\r\n\r\n function hideElement(element, options) {\r\n var announceRemoving = options.onRemoving || angular.noop;\r\n\r\n return $q(function (resolve, reject) {\r\n try {\r\n // Start transitionIn\r\n var action = $q.when(options.onRemove(options.scope, element, options) || true);\r\n\r\n // Trigger callback *before* the remove operation starts\r\n announceRemoving(element, action);\r\n\r\n if (options.$destroy) {\r\n // For $destroy, onRemove should be synchronous\r\n resolve(element);\r\n\r\n if (!options.preserveScope && options.scope) {\r\n // scope destroy should still be be done after the current digest is done\r\n action.then(function() { options.scope.$destroy(); });\r\n }\r\n } else {\r\n // Wait until transition-out is done\r\n action.then(function () {\r\n if (!options.preserveScope && options.scope) {\r\n options.scope.$destroy();\r\n }\r\n\r\n resolve(element);\r\n }, reject);\r\n }\r\n } catch (e) {\r\n reject(e.message);\r\n }\r\n });\r\n }\r\n\r\n }\r\n };\r\n }\r\n}\r\n\r\n})();\r\n(function(){\r\n\"use strict\";\r\n\r\n(function() {\r\n 'use strict';\r\n\r\n var $mdUtil, $interpolate, $log;\r\n\r\n var SUFFIXES = /(-gt)?-(sm|md|lg|print)/g;\r\n var WHITESPACE = /\\s+/g;\r\n\r\n var FLEX_OPTIONS = ['grow', 'initial', 'auto', 'none', 'noshrink', 'nogrow'];\r\n var LAYOUT_OPTIONS = ['row', 'column'];\r\n var ALIGNMENT_MAIN_AXIS= [\"\", \"start\", \"center\", \"end\", \"stretch\", \"space-around\", \"space-between\"];\r\n var ALIGNMENT_CROSS_AXIS= [\"\", \"start\", \"center\", \"end\", \"stretch\"];\r\n\r\n var config = {\r\n /**\r\n * Enable directive attribute-to-class conversions\r\n * Developers can use ` ` to quickly\r\n * disable the Layout directives and prohibit the injection of Layout classNames\r\n */\r\n enabled: true,\r\n\r\n /**\r\n * List of mediaQuery breakpoints and associated suffixes\r\n * [\r\n * { suffix: \"sm\", mediaQuery: \"screen and (max-width: 599px)\" },\r\n * { suffix: \"md\", mediaQuery: \"screen and (min-width: 600px) and (max-width: 959px)\" }\r\n * ]\r\n */\r\n breakpoints: []\r\n };\r\n\r\n registerLayoutAPI(angular.module('material.core.layout', ['ng']));\r\n\r\n /**\r\n * registerLayoutAPI()\r\n *\r\n * The original AngularJS Material Layout solution used attribute selectors and CSS.\r\n *\r\n * ```html\r\n * \\\r\n \\\r\n \\\r\n ';\r\n } else {\r\n return '\\\r\n ';\r\n }\r\n }\r\n\r\n function getClearButton() {\r\n return '' +\r\n '';\r\n }\r\n }\r\n };\r\n}\r\n\r\n})();\r\n(function(){\r\n\"use strict\";\r\n\r\n\r\nMdAutocompleteItemScopeDirective.$inject = [\"$compile\", \"$mdUtil\"];angular\r\n .module('material.components.autocomplete')\r\n .directive('mdAutocompleteParentScope', MdAutocompleteItemScopeDirective);\r\n\r\nfunction MdAutocompleteItemScopeDirective($compile, $mdUtil) {\r\n return {\r\n restrict: 'AE',\r\n compile: compile,\r\n terminal: true,\r\n transclude: 'element'\r\n };\r\n\r\n function compile(tElement, tAttr, transclude) {\r\n return function postLink(scope, element, attr) {\r\n var ctrl = scope.$mdAutocompleteCtrl;\r\n var newScope = ctrl.parent.$new();\r\n var itemName = ctrl.itemName;\r\n\r\n // Watch for changes to our scope's variables and copy them to the new scope\r\n watchVariable('$index', '$index');\r\n watchVariable('item', itemName);\r\n\r\n // Ensure that $digest calls on our scope trigger $digest on newScope.\r\n connectScopes();\r\n\r\n // Link the element against newScope.\r\n transclude(newScope, function(clone) {\r\n element.after(clone);\r\n });\r\n\r\n /**\r\n * Creates a watcher for variables that are copied from the parent scope\r\n * @param variable\r\n * @param alias\r\n */\r\n function watchVariable(variable, alias) {\r\n newScope[alias] = scope[variable];\r\n\r\n scope.$watch(variable, function(value) {\r\n $mdUtil.nextTick(function() {\r\n newScope[alias] = value;\r\n });\r\n });\r\n }\r\n\r\n /**\r\n * Creates watchers on scope and newScope that ensure that for any\r\n * $digest of scope, newScope is also $digested.\r\n */\r\n function connectScopes() {\r\n var scopeDigesting = false;\r\n var newScopeDigesting = false;\r\n\r\n scope.$watch(function() {\r\n if (newScopeDigesting || scopeDigesting) {\r\n return;\r\n }\r\n\r\n scopeDigesting = true;\r\n scope.$$postDigest(function() {\r\n if (!newScopeDigesting) {\r\n newScope.$digest();\r\n }\r\n\r\n scopeDigesting = newScopeDigesting = false;\r\n });\r\n });\r\n\r\n newScope.$watch(function() {\r\n newScopeDigesting = true;\r\n });\r\n }\r\n };\r\n }\r\n}\r\n})();\r\n(function(){\r\n\"use strict\";\r\n\r\n\r\nMdHighlightCtrl.$inject = [\"$scope\", \"$element\", \"$attrs\", \"$mdUtil\"];angular\r\n .module('material.components.autocomplete')\r\n .controller('MdHighlightCtrl', MdHighlightCtrl);\r\n\r\nfunction MdHighlightCtrl ($scope, $element, $attrs, $mdUtil) {\r\n this.$scope = $scope;\r\n this.$element = $element;\r\n this.$attrs = $attrs;\r\n this.$mdUtil = $mdUtil;\r\n\r\n // Cache the Regex to avoid rebuilding each time.\r\n this.regex = null;\r\n}\r\n\r\nMdHighlightCtrl.prototype.init = function(unsafeTermFn, unsafeContentFn) {\r\n\r\n this.flags = this.$attrs.mdHighlightFlags || '';\r\n\r\n this.unregisterFn = this.$scope.$watch(function($scope) {\r\n return {\r\n term: unsafeTermFn($scope),\r\n contentText: unsafeContentFn($scope)\r\n };\r\n }.bind(this), this.onRender.bind(this), true);\r\n\r\n this.$element.on('$destroy', this.unregisterFn);\r\n};\r\n\r\n/**\r\n * Triggered once a new change has been recognized and the highlighted\r\n * text needs to be updated.\r\n */\r\nMdHighlightCtrl.prototype.onRender = function(state, prevState) {\r\n\r\n var contentText = state.contentText;\r\n\r\n /* Update the regex if it's outdated, because we don't want to rebuilt it constantly. */\r\n if (this.regex === null || state.term !== prevState.term) {\r\n this.regex = this.createRegex(state.term, this.flags);\r\n }\r\n\r\n /* If a term is available apply the regex to the content */\r\n if (state.term) {\r\n this.applyRegex(contentText);\r\n } else {\r\n this.$element.text(contentText);\r\n }\r\n\r\n};\r\n\r\n/**\r\n * Decomposes the specified text into different tokens (whether match or not).\r\n * Breaking down the string guarantees proper XSS protection due to the native browser\r\n * escaping of unsafe text.\r\n */\r\nMdHighlightCtrl.prototype.applyRegex = function(text) {\r\n var tokens = this.resolveTokens(text);\r\n\r\n this.$element.empty();\r\n\r\n tokens.forEach(function (token) {\r\n\r\n if (token.isMatch) {\r\n var tokenEl = angular.element('').text(token.text);\r\n\r\n this.$element.append(tokenEl);\r\n } else {\r\n this.$element.append(document.createTextNode(token));\r\n }\r\n\r\n }.bind(this));\r\n\r\n};\r\n\r\n /**\r\n * Decomposes the specified text into different tokens by running the regex against the text.\r\n */\r\nMdHighlightCtrl.prototype.resolveTokens = function(string) {\r\n var tokens = [];\r\n var lastIndex = 0;\r\n\r\n // Use replace here, because it supports global and single regular expressions at same time.\r\n string.replace(this.regex, function(match, index) {\r\n appendToken(lastIndex, index);\r\n\r\n tokens.push({\r\n text: match,\r\n isMatch: true\r\n });\r\n\r\n lastIndex = index + match.length;\r\n });\r\n\r\n // Append the missing text as a token.\r\n appendToken(lastIndex);\r\n\r\n return tokens;\r\n\r\n function appendToken(from, to) {\r\n var targetText = string.slice(from, to);\r\n targetText && tokens.push(targetText);\r\n }\r\n};\r\n\r\n/** Creates a regex for the specified text with the given flags. */\r\nMdHighlightCtrl.prototype.createRegex = function(term, flags) {\r\n var startFlag = '', endFlag = '';\r\n var regexTerm = this.$mdUtil.sanitize(term);\r\n\r\n if (flags.indexOf('^') >= 0) startFlag = '^';\r\n if (flags.indexOf('$') >= 0) endFlag = '$';\r\n\r\n return new RegExp(startFlag + regexTerm + endFlag, flags.replace(/[$^]/g, ''));\r\n};\r\n\r\n})();\r\n(function(){\r\n\"use strict\";\r\n\r\n\r\nMdHighlight.$inject = [\"$interpolate\", \"$parse\"];angular\r\n .module('material.components.autocomplete')\r\n .directive('mdHighlightText', MdHighlight);\r\n\r\n/**\r\n * @ngdoc directive\r\n * @name mdHighlightText\r\n * @module material.components.autocomplete\r\n *\r\n * @description\r\n * The `md-highlight-text` directive allows you to specify text that should be highlighted within\r\n * an element. Highlighted text will be wrapped in `` which can\r\n * be styled through CSS. Please note that child elements may not be used with this directive.\r\n *\r\n * @param {string} md-highlight-text A model to be searched for\r\n * @param {string=} md-highlight-flags A list of flags (loosely based on JavaScript RexExp flags).\r\n * #### **Supported flags**:\r\n * - `g`: Find all matches within the provided text\r\n * - `i`: Ignore case when searching for matches\r\n * - `$`: Only match if the text ends with the search term\r\n * - `^`: Only match if the text begins with the search term\r\n *\r\n * @usage\r\n * \r\n * \r\n * \r\n */\r\n\r\nfunction MdHighlight ($interpolate, $parse) {\r\n return {\r\n terminal: true,\r\n controller: 'MdHighlightCtrl',\r\n compile: function mdHighlightCompile(tElement, tAttr) {\r\n var termExpr = $parse(tAttr.mdHighlightText);\r\n var unsafeContentExpr = $interpolate(tElement.html());\r\n\r\n return function mdHighlightLink(scope, element, attr, ctrl) {\r\n ctrl.init(termExpr, unsafeContentExpr);\r\n };\r\n }\r\n };\r\n}\r\n\r\n})();\r\n(function(){\r\n\"use strict\";\r\n\r\n/*\r\n * @ngdoc module\r\n * @name material.components.backdrop\r\n * @description Backdrop\r\n */\r\n\r\n/**\r\n * @ngdoc directive\r\n * @name mdBackdrop\r\n * @module material.components.backdrop\r\n *\r\n * @restrict E\r\n *\r\n * @description\r\n * `` is a backdrop element used by other components, such as dialog and bottom sheet.\r\n * Apply class `opaque` to make the backdrop use the theme backdrop color.\r\n *\r\n */\r\n\r\nangular\r\n .module('material.components.backdrop', ['material.core'])\r\n .directive('mdBackdrop', [\"$mdTheming\", \"$mdUtil\", \"$animate\", \"$rootElement\", \"$window\", \"$log\", \"$$rAF\", \"$document\", function BackdropDirective($mdTheming, $mdUtil, $animate, $rootElement, $window, $log, $$rAF, $document) {\r\n var ERROR_CSS_POSITION = ' may not work properly in a scrolled, static-positioned parent container.';\r\n\r\n return {\r\n restrict: 'E',\r\n link: postLink\r\n };\r\n\r\n function postLink(scope, element, attrs) {\r\n // backdrop may be outside the $rootElement, tell ngAnimate to animate regardless\r\n if ($animate.pin) $animate.pin(element, $rootElement);\r\n\r\n var bodyStyles;\r\n\r\n $$rAF(function() {\r\n // If body scrolling has been disabled using mdUtil.disableBodyScroll(),\r\n // adjust the 'backdrop' height to account for the fixed 'body' top offset.\r\n // Note that this can be pretty expensive and is better done inside the $$rAF.\r\n bodyStyles = $window.getComputedStyle($document[0].body);\r\n\r\n if (bodyStyles.position === 'fixed') {\r\n var resizeHandler = $mdUtil.debounce(function(){\r\n bodyStyles = $window.getComputedStyle($document[0].body);\r\n resize();\r\n }, 60, null, false);\r\n\r\n resize();\r\n angular.element($window).on('resize', resizeHandler);\r\n\r\n scope.$on('$destroy', function() {\r\n angular.element($window).off('resize', resizeHandler);\r\n });\r\n }\r\n\r\n // Often $animate.enter() is used to append the backDrop element\r\n // so let's wait until $animate is done...\r\n var parent = element.parent();\r\n\r\n if (parent.length) {\r\n if (parent[0].nodeName === 'BODY') {\r\n element.css('position', 'fixed');\r\n }\r\n\r\n var styles = $window.getComputedStyle(parent[0]);\r\n\r\n if (styles.position === 'static') {\r\n // backdrop uses position:absolute and will not work properly with parent position:static (default)\r\n $log.warn(ERROR_CSS_POSITION);\r\n }\r\n\r\n // Only inherit the parent if the backdrop has a parent.\r\n $mdTheming.inherit(element, parent);\r\n }\r\n });\r\n\r\n function resize() {\r\n var viewportHeight = parseInt(bodyStyles.height, 10) + Math.abs(parseInt(bodyStyles.top, 10));\r\n element.css('height', viewportHeight + 'px');\r\n }\r\n }\r\n\r\n }]);\r\n\r\n})();\r\n(function(){\r\n\"use strict\";\r\n\r\n/**\r\n * @ngdoc module\r\n * @name material.components.bottomSheet\r\n * @description\r\n * BottomSheet\r\n */\r\nMdBottomSheetDirective.$inject = [\"$mdBottomSheet\"];\r\nMdBottomSheetProvider.$inject = [\"$$interimElementProvider\"];\r\nangular\r\n .module('material.components.bottomSheet', [\r\n 'material.core',\r\n 'material.components.backdrop'\r\n ])\r\n .directive('mdBottomSheet', MdBottomSheetDirective)\r\n .provider('$mdBottomSheet', MdBottomSheetProvider);\r\n\r\n/* @ngInject */\r\nfunction MdBottomSheetDirective($mdBottomSheet) {\r\n return {\r\n restrict: 'E',\r\n link : function postLink(scope, element) {\r\n element.addClass('_md'); // private md component indicator for styling\r\n\r\n // When navigation force destroys an interimElement, then\r\n // listen and $destroy() that interim instance...\r\n scope.$on('$destroy', function() {\r\n $mdBottomSheet.destroy();\r\n });\r\n }\r\n };\r\n}\r\n\r\n\r\n/**\r\n * @ngdoc service\r\n * @name $mdBottomSheet\r\n * @module material.components.bottomSheet\r\n *\r\n * @description\r\n * `$mdBottomSheet` opens a bottom sheet over the app and provides a simple promise API.\r\n *\r\n * ## Restrictions\r\n *\r\n * - The bottom sheet's template must have an outer `` element.\r\n * - Add the `md-grid` class to the bottom sheet for a grid layout.\r\n * - Add the `md-list` class to the bottom sheet for a list layout.\r\n *\r\n * @usage\r\n * \r\n * \r\n * \r\n * var app = angular.module('app', ['ngMaterial']);\r\n * app.controller('MyController', function($scope, $mdBottomSheet) {\r\n * $scope.openBottomSheet = function() {\r\n * $mdBottomSheet.show({\r\n * template: '' +\r\n * 'Hello! Close ' +\r\n * ' '\r\n * })\r\n *\r\n * // Fires when the hide() method is used\r\n * .then(function() {\r\n * console.log('You clicked the button to close the bottom sheet!');\r\n * })\r\n *\r\n * // Fires when the cancel() method is used\r\n * .catch(function() {\r\n * console.log('You hit escape or clicked the backdrop to close.');\r\n * });\r\n * };\r\n *\r\n * $scope.closeBottomSheet = function($scope, $mdBottomSheet) {\r\n * $mdBottomSheet.hide();\r\n * }\r\n *\r\n * });\r\n * \r\n *\r\n * ### Custom Presets\r\n * Developers are also able to create their own preset, which can be easily used without repeating\r\n * their options each time.\r\n *\r\n * \r\n * $mdBottomSheetProvider.addPreset('testPreset', {\r\n * options: function() {\r\n * return {\r\n * template:\r\n * '' +\r\n * 'This is a custom preset' +\r\n * ' ',\r\n * controllerAs: 'bottomSheet',\r\n * bindToController: true,\r\n * clickOutsideToClose: true,\r\n * escapeToClose: true\r\n * };\r\n * }\r\n * });\r\n * \r\n *\r\n * After you create your preset during the config phase, you can easily access it.\r\n *\r\n * \r\n * $mdBottomSheet.show(\r\n * $mdBottomSheet.testPreset()\r\n * );\r\n * \r\n */\r\n\r\n/**\r\n * @ngdoc method\r\n * @name $mdBottomSheet#show\r\n *\r\n * @description\r\n * Show a bottom sheet with the specified options.\r\n *\r\n * Note: You should always provide a `.catch()` method in case the user hits the\r\n * `esc` key or clicks the background to close. In this case, the `cancel()` method will\r\n * automatically be called on the bottom sheet which will `reject()` the promise. See the @usage\r\n * section above for an example.\r\n *\r\n * Newer versions of Angular will throw a `Possibly unhandled rejection` exception if you forget\r\n * this.\r\n *\r\n * @param {Object} optionsOrPreset Either provide an `$mdBottomSheetPreset` defined during the\r\n * config phase or an options object, with the following properties:\r\n *\r\n * - `templateUrl` - `{string=}`: The url of an html template file that will\r\n * be used as the content of the bottom sheet. Restrictions: the template must\r\n * have an outer `md-bottom-sheet` element.\r\n * - `template` - `{string=}`: Same as templateUrl, except this is an actual\r\n * template string.\r\n * - `scope` - `{Object=}`: the scope to link the template / controller to. If none is specified,\r\n * it will create a new child scope. This scope will be destroyed when the bottom sheet is\r\n * removed unless `preserveScope` is set to true.\r\n * - `preserveScope` - `{boolean=}`: whether to preserve the scope when the element is removed.\r\n * Default is false\r\n * - `controller` - `{string=}`: The controller to associate with this bottom sheet.\r\n * - `locals` - `{string=}`: An object containing key/value pairs. The keys will be used as names\r\n * of values to inject into the controller. For example, `locals: {three: 3}` would inject\r\n * `three` into the controller with the value of 3.\r\n * - `clickOutsideToClose` - `{boolean=}`: Whether the user can click outside the bottom sheet to\r\n * close it. Default true.\r\n * - `bindToController` - `{boolean=}`: When set to true, the locals will be bound to the\r\n * controller instance and available in it's $onInit function.\r\n * - `disableBackdrop` - `{boolean=}`: When set to true, the bottomsheet will not show a backdrop.\r\n * - `escapeToClose` - `{boolean=}`: Whether the user can press escape to close the bottom sheet.\r\n * Default true.\r\n * - `isLockedOpen` - `{boolean=}`: Disables all default ways of closing the bottom sheet.\r\n * **Note:** this will override the `clickOutsideToClose` and `escapeToClose` options, leaving\r\n * only the `hide` and `cancel` methods as ways of closing the bottom sheet. Defaults to false.\r\n * - `resolve` - `{Object=}`: Similar to locals, except it takes promises as values\r\n * and the bottom sheet will not open until the promises resolve.\r\n * - `controllerAs` - `{string=}`: An alias to assign the controller to on the scope.\r\n * - `parent` - `{element=}`: The element to append the bottom sheet to. The `parent` may be a\r\n * `function`, `string`, `Object`, or null. Defaults to appending to the body of the root element\r\n * (or the root element) of the application.\r\n * e.g. angular.element(document.getElementById('content')) or \"#content\"\r\n * - `disableParentScroll` - `{boolean=}`: Whether to disable scrolling while the bottom sheet is\r\n * open. Default true.\r\n *\r\n * @returns {promise} A promise that can be resolved with `$mdBottomSheet.hide()` or\r\n * rejected with `$mdBottomSheet.cancel()`.\r\n */\r\n\r\n/**\r\n * @ngdoc method\r\n * @name $mdBottomSheet#hide\r\n *\r\n * @description\r\n * Hide the existing bottom sheet and resolve the promise returned from\r\n * `$mdBottomSheet.show()`. This call will close the most recently opened/current bottom sheet (if\r\n * any).\r\n *\r\n * Note: Use a `.then()` on your `.show()` to handle this callback.\r\n *\r\n * @param {*=} response An argument for the resolved promise.\r\n *\r\n */\r\n\r\n/**\r\n * @ngdoc method\r\n * @name $mdBottomSheet#cancel\r\n *\r\n * @description\r\n * Hide the existing bottom sheet and reject the promise returned from\r\n * `$mdBottomSheet.show()`.\r\n *\r\n * Note: Use a `.catch()` on your `.show()` to handle this callback.\r\n *\r\n * @param {*=} response An argument for the rejected promise.\r\n *\r\n */\r\n\r\nfunction MdBottomSheetProvider($$interimElementProvider) {\r\n // how fast we need to flick down to close the sheet, pixels/ms\r\n bottomSheetDefaults.$inject = [\"$animate\", \"$mdConstant\", \"$mdUtil\", \"$mdTheming\", \"$mdBottomSheet\", \"$rootElement\", \"$mdGesture\", \"$log\"];\r\n var CLOSING_VELOCITY = 0.5;\r\n var PADDING = 80; // same as css\r\n\r\n return $$interimElementProvider('$mdBottomSheet')\r\n .setDefaults({\r\n methods: ['disableParentScroll', 'escapeToClose', 'clickOutsideToClose'],\r\n options: bottomSheetDefaults\r\n });\r\n\r\n /* @ngInject */\r\n function bottomSheetDefaults($animate, $mdConstant, $mdUtil, $mdTheming, $mdBottomSheet, $rootElement,\r\n $mdGesture, $log) {\r\n var backdrop;\r\n\r\n return {\r\n themable: true,\r\n onShow: onShow,\r\n onRemove: onRemove,\r\n disableBackdrop: false,\r\n escapeToClose: true,\r\n clickOutsideToClose: true,\r\n disableParentScroll: true,\r\n isLockedOpen: false\r\n };\r\n\r\n function onShow(scope, element, options) {\r\n element = $mdUtil.extractElementByName(element, 'md-bottom-sheet');\r\n\r\n // prevent tab focus or click focus on the bottom-sheet container\r\n element.attr('tabindex', '-1');\r\n\r\n // Once the md-bottom-sheet has `ng-cloak` applied on his template the opening animation will not work properly.\r\n // This is a very common problem, so we have to notify the developer about this.\r\n if (element.hasClass('ng-cloak')) {\r\n var message = '$mdBottomSheet: using `` will affect the bottom-sheet opening animations.';\r\n $log.warn(message, element[0]);\r\n }\r\n\r\n if (options.isLockedOpen) {\r\n options.clickOutsideToClose = false;\r\n options.escapeToClose = false;\r\n } else {\r\n options.cleanupGestures = registerGestures(element, options.parent);\r\n }\r\n\r\n if (!options.disableBackdrop) {\r\n // Add a backdrop that will close on click\r\n backdrop = $mdUtil.createBackdrop(scope, \"md-bottom-sheet-backdrop md-opaque\");\r\n\r\n // Prevent mouse focus on backdrop; ONLY programmatic focus allowed.\r\n // This allows clicks on backdrop to propagate to the $rootElement and\r\n // ESC key events to be detected properly.\r\n backdrop[0].tabIndex = -1;\r\n\r\n if (options.clickOutsideToClose) {\r\n backdrop.on('click', function() {\r\n $mdUtil.nextTick($mdBottomSheet.cancel, true);\r\n });\r\n }\r\n\r\n $mdTheming.inherit(backdrop, options.parent);\r\n\r\n $animate.enter(backdrop, options.parent, null);\r\n }\r\n\r\n $mdTheming.inherit(element, options.parent);\r\n\r\n if (options.disableParentScroll) {\r\n options.restoreScroll = $mdUtil.disableScrollAround(element, options.parent);\r\n }\r\n\r\n return $animate.enter(element, options.parent, backdrop)\r\n .then(function() {\r\n var focusable = $mdUtil.findFocusTarget(element) || angular.element(\r\n element[0].querySelector('button') ||\r\n element[0].querySelector('a') ||\r\n element[0].querySelector($mdUtil.prefixer('ng-click', true))\r\n ) || backdrop;\r\n\r\n if (options.escapeToClose) {\r\n options.rootElementKeyupCallback = function(e) {\r\n if (e.keyCode === $mdConstant.KEY_CODE.ESCAPE) {\r\n $mdUtil.nextTick($mdBottomSheet.cancel, true);\r\n }\r\n };\r\n\r\n $rootElement.on('keyup', options.rootElementKeyupCallback);\r\n focusable && focusable.focus();\r\n }\r\n });\r\n\r\n }\r\n\r\n function onRemove(scope, element, options) {\r\n if (!options.disableBackdrop) $animate.leave(backdrop);\r\n\r\n return $animate.leave(element).then(function() {\r\n if (options.disableParentScroll) {\r\n options.restoreScroll();\r\n delete options.restoreScroll;\r\n }\r\n\r\n options.cleanupGestures && options.cleanupGestures();\r\n });\r\n }\r\n\r\n /**\r\n * Adds the drag gestures to the bottom sheet.\r\n * @param {JQLite} element where CSS transitions will be applied\r\n * @param {JQLite} parent used for registering gesture listeners\r\n * @return {Function} function that removes gesture listeners that were set up by\r\n * registerGestures()\r\n */\r\n function registerGestures(element, parent) {\r\n var deregister = $mdGesture.register(parent, 'drag', { horizontal: false });\r\n parent.on('$md.dragstart', onDragStart)\r\n .on('$md.drag', onDrag)\r\n .on('$md.dragend', onDragEnd);\r\n\r\n return function cleanupGestures() {\r\n deregister();\r\n parent.off('$md.dragstart', onDragStart);\r\n parent.off('$md.drag', onDrag);\r\n parent.off('$md.dragend', onDragEnd);\r\n };\r\n\r\n function onDragStart() {\r\n // Disable transitions on transform so that it feels fast\r\n element.css($mdConstant.CSS.TRANSITION_DURATION, '0ms');\r\n }\r\n\r\n function onDrag(ev) {\r\n var transform = ev.pointer.distanceY;\r\n if (transform < 5) {\r\n // Slow down drag when trying to drag up, and stop after PADDING\r\n transform = Math.max(-PADDING, transform / 2);\r\n }\r\n element.css($mdConstant.CSS.TRANSFORM, 'translate3d(0,' + (PADDING + transform) + 'px,0)');\r\n }\r\n\r\n function onDragEnd(ev) {\r\n if (ev.pointer.distanceY > 0 &&\r\n (ev.pointer.distanceY > 20 || Math.abs(ev.pointer.velocityY) > CLOSING_VELOCITY)) {\r\n var distanceRemaining = element.prop('offsetHeight') - ev.pointer.distanceY;\r\n var transitionDuration = Math.min(distanceRemaining / ev.pointer.velocityY * 0.75, 500);\r\n element.css($mdConstant.CSS.TRANSITION_DURATION, transitionDuration + 'ms');\r\n $mdUtil.nextTick($mdBottomSheet.cancel, true);\r\n } else {\r\n element.css($mdConstant.CSS.TRANSITION_DURATION, '');\r\n element.css($mdConstant.CSS.TRANSFORM, '');\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n})();\r\n(function(){\r\n\"use strict\";\r\n\r\n/**\r\n * @ngdoc module\r\n * @name material.components.button\r\n * @description\r\n *\r\n * Button\r\n */\r\nMdButtonDirective.$inject = [\"$mdButtonInkRipple\", \"$mdTheming\", \"$mdAria\", \"$mdInteraction\"];\r\nMdAnchorDirective.$inject = [\"$mdTheming\"];\r\nangular\r\n .module('material.components.button', ['material.core'])\r\n .directive('mdButton', MdButtonDirective)\r\n .directive('a', MdAnchorDirective);\r\n\r\n\r\n/**\r\n * @private\r\n * @restrict E\r\n *\r\n * @description\r\n * `a` is an anchor directive used to inherit theme colors for md-primary, md-accent, etc.\r\n *\r\n * @usage\r\n *\r\n * \r\n * \r\n * \r\n * \r\n * \r\n */\r\nfunction MdAnchorDirective($mdTheming) {\r\n return {\r\n restrict : 'E',\r\n link : function postLink(scope, element) {\r\n // Make sure to inherit theme so stand-alone anchors\r\n // support theme colors for md-primary, md-accent, etc.\r\n $mdTheming(element);\r\n }\r\n };\r\n}\r\n\r\n\r\n/**\r\n * @ngdoc directive\r\n * @name mdButton\r\n * @module material.components.button\r\n *\r\n * @restrict E\r\n *\r\n * @description\r\n * `` is a button directive with optional ink ripples (default enabled).\r\n *\r\n * If you supply a `href` or `ng-href` attribute, it will become an `` element. Otherwise, it\r\n * will become a `';\r\n\r\n /**\r\n * MDChips Directive Definition\r\n */\r\n function MdChips ($mdTheming, $mdUtil, $compile, $log, $timeout, $$mdSvgRegistry) {\r\n // Run our templates through $mdUtil.processTemplate() to allow custom start/end symbols\r\n var templates = getTemplates();\r\n\r\n return {\r\n template: function(element, attrs) {\r\n // Clone the element into an attribute. By prepending the attribute\r\n // name with '$', AngularJS won't write it into the DOM. The cloned\r\n // element propagates to the link function via the attrs argument,\r\n // where various contained-elements can be consumed.\r\n attrs['$mdUserTemplate'] = element.clone();\r\n return templates.chips;\r\n },\r\n require: ['mdChips'],\r\n restrict: 'E',\r\n controller: 'MdChipsCtrl',\r\n controllerAs: '$mdChipsCtrl',\r\n bindToController: true,\r\n compile: compile,\r\n scope: {\r\n readonly: '=?readonly',\r\n removable: '=?mdRemovable',\r\n placeholder: '@?',\r\n secondaryPlaceholder: '@?',\r\n maxChips: '@?mdMaxChips',\r\n transformChip: '&mdTransformChip',\r\n onAdd: '&?mdOnAdd',\r\n onRemove: '&?mdOnRemove',\r\n addedMessage: '@?mdAddedMessage',\r\n removedMessage: '@?mdRemovedMessage',\r\n onSelect: '&?mdOnSelect',\r\n inputClass: '@?mdInputClass',\r\n inputAriaDescribedBy: '@?inputAriaDescribedby',\r\n inputAriaLabelledBy: '@?inputAriaLabelledby',\r\n inputAriaLabel: '@?',\r\n containerHint: '@?',\r\n containerEmptyHint: '@?',\r\n deleteHint: '@?',\r\n deleteButtonLabel: '@?',\r\n separatorKeys: '=?mdSeparatorKeys',\r\n requireMatch: '=?mdRequireMatch',\r\n chipAppendDelayString: '@?mdChipAppendDelay',\r\n ngChange: '&?'\r\n }\r\n };\r\n\r\n /**\r\n * Builds the final template for `md-chips` and returns the postLink function.\r\n *\r\n * Building the template involves 3 key components:\r\n * static chips\r\n * chip template\r\n * input control\r\n *\r\n * If no `ng-model` is provided, only the static chip work needs to be done.\r\n *\r\n * If no user-passed `md-chip-template` exists, the default template is used. This resulting\r\n * template is appended to the chip content element.\r\n *\r\n * The remove button may be overridden by passing an element with an md-chip-remove attribute.\r\n *\r\n * If an `input` or `md-autocomplete` element is provided by the caller, it is set aside for\r\n * transclusion later. The transclusion happens in `postLink` as the parent scope is required.\r\n * If no user input is provided, a default one is appended to the input container node in the\r\n * template.\r\n *\r\n * Static Chips (i.e. `md-chip` elements passed from the caller) are gathered and set aside for\r\n * transclusion in the `postLink` function.\r\n *\r\n *\r\n * @param element\r\n * @param attr\r\n * @returns {Function}\r\n */\r\n function compile(element, attr) {\r\n // Grab the user template from attr and reset the attribute to null.\r\n var userTemplate = attr['$mdUserTemplate'];\r\n attr['$mdUserTemplate'] = null;\r\n\r\n var chipTemplate = getTemplateByQuery('md-chips>md-chip-template');\r\n\r\n var chipRemoveSelector = $mdUtil\r\n .prefixer()\r\n .buildList('md-chip-remove')\r\n .map(function(attr) {\r\n return 'md-chips>*[' + attr + ']';\r\n })\r\n .join(',');\r\n\r\n // Set the chip remove, chip contents and chip input templates. The link function will put\r\n // them on the scope for transclusion later.\r\n var chipRemoveTemplate = getTemplateByQuery(chipRemoveSelector) || templates.remove,\r\n chipContentsTemplate = chipTemplate || templates.default,\r\n chipInputTemplate = getTemplateByQuery('md-chips>md-autocomplete')\r\n || getTemplateByQuery('md-chips>input')\r\n || templates.input,\r\n staticChips = userTemplate.find('md-chip');\r\n\r\n // Warn of malformed template. See #2545\r\n if (userTemplate[0].querySelector('md-chip-template>*[md-chip-remove]')) {\r\n $log.warn('invalid placement of md-chip-remove within md-chip-template.');\r\n }\r\n\r\n function getTemplateByQuery (query) {\r\n if (!attr.ngModel) return;\r\n var element = userTemplate[0].querySelector(query);\r\n return element && element.outerHTML;\r\n }\r\n\r\n /**\r\n * Configures controller and transcludes.\r\n */\r\n return function postLink(scope, element, attrs, controllers) {\r\n $mdUtil.initOptionalProperties(scope, attr);\r\n\r\n $mdTheming(element);\r\n var mdChipsCtrl = controllers[0];\r\n if (chipTemplate) {\r\n // Chip editing functionality assumes we are using the default chip template.\r\n mdChipsCtrl.enableChipEdit = false;\r\n }\r\n\r\n mdChipsCtrl.chipContentsTemplate = chipContentsTemplate;\r\n mdChipsCtrl.chipRemoveTemplate = chipRemoveTemplate;\r\n mdChipsCtrl.chipInputTemplate = chipInputTemplate;\r\n\r\n mdChipsCtrl.mdCloseIcon = $$mdSvgRegistry.mdCancel;\r\n\r\n element\r\n .attr({ tabindex: -1 })\r\n .on('focus', function () { mdChipsCtrl.onFocus(); })\r\n .on('click', function () {\r\n if (!mdChipsCtrl.readonly && mdChipsCtrl.selectedChip === -1) {\r\n mdChipsCtrl.onFocus();\r\n }\r\n });\r\n\r\n if (attr.ngModel) {\r\n mdChipsCtrl.configureNgModel(element.controller('ngModel'));\r\n\r\n // If an `md-transform-chip` attribute was set, tell the controller to use the expression\r\n // before appending chips.\r\n if (attrs.mdTransformChip) mdChipsCtrl.useTransformChipExpression();\r\n\r\n // If an `md-on-add` attribute was set, tell the controller to use the expression\r\n // when adding chips.\r\n if (attrs.mdOnAdd) mdChipsCtrl.useOnAddExpression();\r\n\r\n // If an `md-on-remove` attribute was set, tell the controller to use the expression\r\n // when removing chips.\r\n if (attrs.mdOnRemove) mdChipsCtrl.useOnRemoveExpression();\r\n\r\n // If an `md-on-select` attribute was set, tell the controller to use the expression\r\n // when selecting chips.\r\n if (attrs.mdOnSelect) mdChipsCtrl.useOnSelectExpression();\r\n\r\n // The md-autocomplete and input elements won't be compiled until after this directive\r\n // is complete (due to their nested nature). Wait a tick before looking for them to\r\n // configure the controller.\r\n if (chipInputTemplate !== templates.input) {\r\n // The autocomplete will not appear until the readonly attribute is not true (i.e.\r\n // false or undefined), so we have to watch the readonly and then on the next tick\r\n // after the chip transclusion has run, we can configure the autocomplete and user\r\n // input.\r\n scope.$watch('$mdChipsCtrl.readonly', function(readonly) {\r\n if (!readonly) {\r\n\r\n $mdUtil.nextTick(function(){\r\n\r\n if (chipInputTemplate.indexOf(' 0) {\r\n var compiledStaticChips = $compile(staticChips.clone())(scope.$parent);\r\n $timeout(function() { element.find('md-chips-wrap').prepend(compiledStaticChips); });\r\n }\r\n };\r\n }\r\n\r\n function getTemplates() {\r\n return {\r\n chips: $mdUtil.processTemplate(MD_CHIPS_TEMPLATE),\r\n input: $mdUtil.processTemplate(CHIP_INPUT_TEMPLATE),\r\n default: $mdUtil.processTemplate(CHIP_DEFAULT_TEMPLATE),\r\n remove: $mdUtil.processTemplate(CHIP_REMOVE_TEMPLATE)\r\n };\r\n }\r\n }\r\n\r\n})();\r\n(function(){\r\n\"use strict\";\r\n\r\n\r\nMdContactChipsCtrl.$inject = [\"$attrs\", \"$element\", \"$timeout\"];angular\r\n .module('material.components.chips')\r\n .controller('MdContactChipsCtrl', MdContactChipsCtrl);\r\n\r\n/**\r\n * Controller for the MdContactChips component\r\n * @constructor\r\n */\r\nfunction MdContactChipsCtrl ($attrs, $element, $timeout) {\r\n /** @type {$element} */\r\n this.$element = $element;\r\n\r\n /** @type {$attrs} */\r\n this.$attrs = $attrs;\r\n\r\n /** @type {Function} */\r\n this.$timeout = $timeout;\r\n\r\n /** @type {Object} */\r\n this.selectedItem = null;\r\n\r\n /** @type {string} */\r\n this.searchText = '';\r\n\r\n /**\r\n * Collection of functions to call to un-register watchers\r\n * @type {Array}\r\n */\r\n this.deRegister = [];\r\n\r\n this.init();\r\n}\r\n\r\nMdContactChipsCtrl.prototype.init = function() {\r\n var ctrl = this;\r\n var deRegister = this.deRegister;\r\n var element = this.$element;\r\n\r\n // Setup a watcher which manages chips a11y messages and autocomplete aria.\r\n // Timeout required to allow the child elements to be compiled.\r\n this.$timeout(function() {\r\n deRegister.push(\r\n element.find('md-chips').controller('mdChips').$scope.$watchCollection('$mdChipsCtrl.items', function() {\r\n // Make sure our input and wrapper have the correct ARIA attributes\r\n ctrl.setupChipsAria();\r\n ctrl.setupAutocompleteAria();\r\n })\r\n );\r\n });\r\n};\r\n\r\nMdContactChipsCtrl.prototype.setupChipsAria = function() {\r\n var chips = this.$element.find('md-chips');\r\n var chipsCtrl = chips.controller('mdChips');\r\n\r\n // Configure MdChipsCtrl\r\n if (this.removedMessage) {\r\n chipsCtrl.removedMessage = this.removedMessage;\r\n }\r\n if (this.containerHint) {\r\n chipsCtrl.containerHint = this.containerHint;\r\n }\r\n if (this.containerEmptyHint) {\r\n // Apply attribute to avoid the hint being overridden by MdChipsCtrl.configureAutocomplete()\r\n chips.attr('container-empty-hint', this.containerEmptyHint);\r\n chipsCtrl.containerEmptyHint = this.containerEmptyHint;\r\n }\r\n if (this.deleteHint) {\r\n chipsCtrl.deleteHint = this.deleteHint;\r\n }\r\n if (this.inputAriaLabel) {\r\n chipsCtrl.inputAriaLabel = this.inputAriaLabel;\r\n }\r\n if (this.inputClass) {\r\n chipsCtrl.inputClass = this.inputClass;\r\n }\r\n};\r\n\r\nMdContactChipsCtrl.prototype.setupAutocompleteAria = function() {\r\n var autocompleteInput = this.$element.find('md-chips-wrap').find('md-autocomplete').find('input');\r\n\r\n // Set attributes on the input of the md-autocomplete\r\n if (this.inputAriaDescribedBy) {\r\n autocompleteInput.attr('aria-describedby', this.inputAriaDescribedBy);\r\n }\r\n if (this.inputAriaLabelledBy) {\r\n autocompleteInput.removeAttr('aria-label');\r\n autocompleteInput.attr('aria-labelledby', this.inputAriaLabelledBy);\r\n }\r\n};\r\n\r\nMdContactChipsCtrl.prototype.queryContact = function(searchText) {\r\n return this.contactQuery({'$query': searchText});\r\n};\r\n\r\nMdContactChipsCtrl.prototype.inputKeydown = function(event) {\r\n if (!this.separatorKeys || this.separatorKeys.indexOf(event.keyCode) < 0) {\r\n return;\r\n }\r\n\r\n event.stopPropagation();\r\n event.preventDefault();\r\n\r\n var autocompleteCtrl = angular.element(event.target).controller('mdAutocomplete');\r\n autocompleteCtrl.select(autocompleteCtrl.index);\r\n};\r\n\r\nMdContactChipsCtrl.prototype.itemName = function(item) {\r\n return item[this.contactName];\r\n};\r\n\r\n/**\r\n * Destructor for cleanup\r\n */\r\nMdContactChipsCtrl.prototype.$onDestroy = function $onDestroy() {\r\n var $destroyFn;\r\n while (($destroyFn = this.deRegister.pop())) {\r\n $destroyFn.call(this);\r\n }\r\n};\r\n\r\n})();\r\n(function(){\r\n\"use strict\";\r\n\r\n\r\nMdContactChips.$inject = [\"$mdTheming\", \"$mdUtil\"];angular\r\n .module('material.components.chips')\r\n .directive('mdContactChips', MdContactChips);\r\n\r\n/**\r\n * @ngdoc directive\r\n * @name mdContactChips\r\n * @module material.components.chips\r\n *\r\n * @description\r\n * `` is an input component based on `md-chips` and makes use of an\r\n * `md-autocomplete` element. The component allows the caller to supply a query expression which\r\n * returns a list of possible contacts. The user can select one of these and add it to the list of\r\n * chips.\r\n *\r\n * You may also use the md-highlight-flags attribute\r\n * along with its parameters to control the appearance of the matched text inside of the contacts'\r\n * autocomplete popup.\r\n *\r\n * @param {expression} ng-model Assignable AngularJS expression to be data-bound to the list of\r\n * contact chips. The expression should evaluate to an `Object` Array.\r\n * @param {expression=} ng-change AngularJS expression to be executed on chip addition, removal,\r\n * or content change.\r\n * @param {string=} placeholder Placeholder text that will be forwarded to the input.\r\n * @param {string=} secondary-placeholder Placeholder text that will be forwarded to the input,\r\n * displayed when there is at least on item in the list\r\n * @param {expression} md-contacts An expression expected to return contacts matching the search\r\n * test, `$query`. If this expression involves a promise, a loading bar is displayed while\r\n * waiting for it to resolve.\r\n * @param {string} md-contact-name The field name of the contact object representing the\r\n * contact's name.\r\n * @param {string} md-contact-email The field name of the contact object representing the\r\n * contact's email address.\r\n * @param {string} md-contact-image The field name of the contact object representing the\r\n * contact's image.\r\n * @param {number=} md-max-chips The maximum number of chips allowed to add through user input.\r\n *
The validation property `md-max-chips` can be used when the max chips\r\n * amount is reached.\r\n * @param {number=} md-min-length Specifies the minimum length of text before autocomplete will\r\n * make suggestions\r\n * @param {string=} md-input-class This class will be applied to the child `md-autocomplete` for\r\n * custom styling.\r\n * @param {string=} input-aria-describedby A space-separated list of element IDs. This should\r\n * contain the IDs of any elements that describe this autocomplete. Screen readers will read\r\n * the content of these elements at the end of announcing that the chips input has been\r\n * selected and describing its current state. The descriptive elements do not need to be\r\n * visible on the page.\r\n * @param {string=} input-aria-labelledby A space-separated list of element IDs. The ideal use\r\n * case is that this would contain the ID of a ` \r\n * \r\n *\r\n */\r\n\r\n\r\nvar MD_CONTACT_CHIPS_TEMPLATE = '\\\r\n \\\r\n \\\r\n \\\r\n \\\r\n ';\r\n\r\n\r\n/**\r\n * MDContactChips Directive Definition\r\n *\r\n * @param $mdTheming\r\n * @param $mdUtil\r\n * @returns {*}\r\n * @ngInject\r\n */\r\nfunction MdContactChips($mdTheming, $mdUtil) {\r\n return {\r\n template: function(element, attrs) {\r\n return MD_CONTACT_CHIPS_TEMPLATE;\r\n },\r\n restrict: 'E',\r\n controller: 'MdContactChipsCtrl',\r\n controllerAs: '$mdContactChipsCtrl',\r\n bindToController: true,\r\n compile: compile,\r\n scope: {\r\n contactQuery: '&mdContacts',\r\n placeholder: '@?',\r\n secondaryPlaceholder: '@?',\r\n contactName: '@mdContactName',\r\n contactImage: '@mdContactImage',\r\n contactEmail: '@mdContactEmail',\r\n contacts: '=ngModel',\r\n ngChange: '&?',\r\n requireMatch: '=?mdRequireMatch',\r\n minLength: '=?mdMinLength',\r\n maxChips: '=?mdMaxChips',\r\n highlightFlags: '@?mdHighlightFlags',\r\n chipAppendDelay: '@?mdChipAppendDelay',\r\n separatorKeys: '=?mdSeparatorKeys',\r\n removedMessage: '@?mdRemovedMessage',\r\n inputClass: '@?mdInputClass',\r\n inputAriaDescribedBy: '@?inputAriaDescribedby',\r\n inputAriaLabelledBy: '@?inputAriaLabelledby',\r\n inputAriaLabel: '@?',\r\n containerHint: '@?',\r\n containerEmptyHint: '@?',\r\n deleteHint: '@?'\r\n }\r\n };\r\n\r\n function compile(element, attr) {\r\n return function postLink(scope, element, attrs, controllers) {\r\n var contactChipsController = controllers;\r\n\r\n $mdUtil.initOptionalProperties(scope, attr);\r\n $mdTheming(element);\r\n\r\n element.attr('tabindex', '-1');\r\n\r\n attrs.$observe('mdChipAppendDelay', function(newValue) {\r\n contactChipsController.chipAppendDelay = newValue;\r\n });\r\n };\r\n }\r\n}\r\n\r\n})();\r\n(function(){\r\n\"use strict\";\r\n\r\n(function () {\r\n \"use strict\";\r\n\r\n /**\r\n * Use a RegExp to check if the `md-colors=\"\"` is static string\r\n * or one that should be observed and dynamically interpolated.\r\n */\r\n MdColorsDirective.$inject = [\"$mdColors\", \"$mdUtil\", \"$log\", \"$parse\"];\r\n MdColorsService.$inject = [\"$mdTheming\", \"$mdUtil\", \"$log\"];\r\n var STATIC_COLOR_EXPRESSION = /^{((\\s|,)*?[\"'a-zA-Z-]+?\\s*?:\\s*?(['\"])[a-zA-Z0-9-.]*(['\"]))+\\s*}$/;\r\n var colorPalettes = null;\r\n\r\n /**\r\n * @ngdoc module\r\n * @name material.components.colors\r\n *\r\n * @description\r\n * Define $mdColors service and a `md-colors=\"\"` attribute directive\r\n */\r\n angular\r\n .module('material.components.colors', ['material.core'])\r\n .directive('mdColors', MdColorsDirective)\r\n .service('$mdColors', MdColorsService);\r\n\r\n /**\r\n * @ngdoc service\r\n * @name $mdColors\r\n * @module material.components.colors\r\n *\r\n * @description\r\n * By default, defining a theme does not make its colors available for applying to non AngularJS\r\n * Material elements. The `$mdColors` service is used by the `md-color` directive to convert a\r\n * set of color expressions to RGBA values and then apply those values to the element as CSS\r\n * property values.\r\n *\r\n * @usage\r\n * Getting a color based on a theme\r\n *\r\n * \r\n * angular.controller('myCtrl', function ($mdColors) {\r\n * var color = $mdColors.getThemeColor('myTheme-primary-900-0.5');\r\n * ...\r\n * });\r\n * \r\n *\r\n * Applying a color from a palette to an element\r\n * \r\n * app.directive('myDirective', function($mdColors) {\r\n * return {\r\n * ...\r\n * link: function (scope, elem) {\r\n * $mdColors.applyThemeColors(elem, {color: 'red-A200-0.2'});\r\n * }\r\n * }\r\n * });\r\n * \r\n */\r\n function MdColorsService($mdTheming, $mdUtil, $log) {\r\n colorPalettes = colorPalettes || Object.keys($mdTheming.PALETTES);\r\n\r\n // Publish service instance\r\n return {\r\n applyThemeColors: applyThemeColors,\r\n getThemeColor: getThemeColor,\r\n hasTheme: hasTheme\r\n };\r\n\r\n // ********************************************\r\n // Internal Methods\r\n // ********************************************\r\n\r\n /**\r\n * @ngdoc method\r\n * @name $mdColors#applyThemeColors\r\n *\r\n * @description\r\n * Lookup a set of colors by hue, theme, and palette, then apply those colors\r\n * with the provided opacity (via `rgba()`) to the specified CSS property.\r\n *\r\n * @param {angular.element} element the element to apply the styles to\r\n * @param {Object} colorExpression Keys are CSS properties and values are strings representing\r\n * the `theme-palette-hue-opacity` of the desired color. For example:\r\n * `{'color': 'red-A200-0.3', 'background-color': 'myTheme-primary-700-0.8'}`. Theme, hue, and\r\n * opacity are optional.\r\n */\r\n function applyThemeColors(element, colorExpression) {\r\n try {\r\n if (colorExpression) {\r\n // Assign the calculate RGBA color values directly as inline CSS\r\n element.css(interpolateColors(colorExpression));\r\n }\r\n } catch (e) {\r\n $log.error(e.message);\r\n }\r\n }\r\n\r\n /**\r\n * @ngdoc method\r\n * @name $mdColors#getThemeColor\r\n *\r\n * @description\r\n * Get a parsed RGBA color using a string representing the `theme-palette-hue-opacity` of the\r\n * desired color.\r\n *\r\n * @param {string} expression color expression like `'red-A200-0.3'` or\r\n * `'myTheme-primary-700-0.8'`. Theme, hue, and opacity are optional.\r\n * @returns {string} a CSS color value like `rgba(211, 47, 47, 0.8)`\r\n */\r\n function getThemeColor(expression) {\r\n var color = extractColorOptions(expression);\r\n\r\n return parseColor(color);\r\n }\r\n\r\n /**\r\n * Return the parsed color\r\n * @param {{hue: *, theme: any, palette: *, opacity: (*|string|number)}} color hash map of color\r\n * definitions\r\n * @param {boolean=} contrast whether use contrast color for foreground. Defaults to false.\r\n * @returns {string} rgba color string\r\n */\r\n function parseColor(color, contrast) {\r\n contrast = contrast || false;\r\n var rgbValues = $mdTheming.PALETTES[color.palette][color.hue];\r\n\r\n rgbValues = contrast ? rgbValues.contrast : rgbValues.value;\r\n\r\n return $mdUtil.supplant('rgba({0}, {1}, {2}, {3})',\r\n [rgbValues[0], rgbValues[1], rgbValues[2], rgbValues[3] || color.opacity]\r\n );\r\n }\r\n\r\n /**\r\n * Convert the color expression into an object with scope-interpolated values\r\n * Then calculate the rgba() values based on the theme color parts\r\n * @param {Object} themeColors json object, keys are css properties and values are string of\r\n * the wanted color, for example: `{color: 'red-A200-0.3'}`.\r\n * @return {Object} Hashmap of CSS properties with associated `rgba()` string values\r\n */\r\n function interpolateColors(themeColors) {\r\n var rgbColors = {};\r\n\r\n var hasColorProperty = themeColors.hasOwnProperty('color');\r\n\r\n angular.forEach(themeColors, function (value, key) {\r\n var color = extractColorOptions(value);\r\n var hasBackground = key.indexOf('background') > -1;\r\n\r\n rgbColors[key] = parseColor(color);\r\n if (hasBackground && !hasColorProperty) {\r\n rgbColors.color = parseColor(color, true);\r\n }\r\n });\r\n\r\n return rgbColors;\r\n }\r\n\r\n /**\r\n * Check if expression has defined theme\r\n * For instance:\r\n * 'myTheme-primary' => true\r\n * 'red-800' => false\r\n * @param {string} expression color expression like 'red-800', 'red-A200-0.3',\r\n * 'myTheme-primary', or 'myTheme-primary-400'\r\n * @return {boolean} true if the expression has a theme part, false otherwise.\r\n */\r\n function hasTheme(expression) {\r\n return angular.isDefined($mdTheming.THEMES[expression.split('-')[0]]);\r\n }\r\n\r\n /**\r\n * For the evaluated expression, extract the color parts into a hash map\r\n * @param {string} expression color expression like 'red-800', 'red-A200-0.3',\r\n * 'myTheme-primary', or 'myTheme-primary-400'\r\n * @returns {{hue: *, theme: any, palette: *, opacity: (*|string|number)}}\r\n */\r\n function extractColorOptions(expression) {\r\n var parts = expression.split('-');\r\n var hasTheme = angular.isDefined($mdTheming.THEMES[parts[0]]);\r\n var theme = hasTheme ? parts.splice(0, 1)[0] : $mdTheming.defaultTheme();\r\n\r\n return {\r\n theme: theme,\r\n palette: extractPalette(parts, theme),\r\n hue: extractHue(parts, theme),\r\n opacity: parts[2] || 1\r\n };\r\n }\r\n\r\n /**\r\n * Calculate the theme palette name\r\n * @param {Array} parts\r\n * @param {string} theme name\r\n * @return {string}\r\n */\r\n function extractPalette(parts, theme) {\r\n // If the next section is one of the palettes we assume it's a two word palette\r\n // Two word palette can be also written in camelCase, forming camelCase to dash-case\r\n\r\n var isTwoWord = parts.length > 1 && colorPalettes.indexOf(parts[1]) !== -1;\r\n var palette = parts[0].replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();\r\n\r\n if (isTwoWord) palette = parts[0] + '-' + parts.splice(1, 1);\r\n\r\n if (colorPalettes.indexOf(palette) === -1) {\r\n // If the palette is not in the palette list it's one of primary/accent/warn/background\r\n var scheme = $mdTheming.THEMES[theme].colors[palette];\r\n if (!scheme) {\r\n throw new Error($mdUtil.supplant(\r\n 'mdColors: couldn\\'t find \\'{palette}\\' in the palettes.',\r\n {palette: palette}));\r\n }\r\n palette = scheme.name;\r\n }\r\n\r\n return palette;\r\n }\r\n\r\n /**\r\n * @param {Array} parts\r\n * @param {string} theme name\r\n * @return {*}\r\n */\r\n function extractHue(parts, theme) {\r\n var themeColors = $mdTheming.THEMES[theme].colors;\r\n\r\n if (parts[1] === 'hue') {\r\n var hueNumber = parseInt(parts.splice(2, 1)[0], 10);\r\n\r\n if (hueNumber < 1 || hueNumber > 3) {\r\n throw new Error($mdUtil.supplant(\r\n 'mdColors: \\'hue-{hueNumber}\\' is not a valid hue, can be only \\'hue-1\\', \\'hue-2\\' and \\'hue-3\\'',\r\n {hueNumber: hueNumber}));\r\n }\r\n parts[1] = 'hue-' + hueNumber;\r\n\r\n if (!(parts[0] in themeColors)) {\r\n throw new Error($mdUtil.supplant(\r\n 'mdColors: \\'hue-x\\' can only be used with [{availableThemes}], but was used with \\'{usedTheme}\\'',\r\n {\r\n availableThemes: Object.keys(themeColors).join(', '),\r\n usedTheme: parts[0]\r\n }));\r\n }\r\n\r\n return themeColors[parts[0]].hues[parts[1]];\r\n }\r\n\r\n return parts[1] || themeColors[parts[0] in themeColors ? parts[0] : 'primary'].hues['default'];\r\n }\r\n }\r\n\r\n /**\r\n * @ngdoc directive\r\n * @name mdColors\r\n * @module material.components.colors\r\n *\r\n * @restrict A\r\n *\r\n * @description\r\n * `mdColors` directive will apply the theme-based color expression as RGBA CSS style values.\r\n *\r\n * The format will be similar to the colors defined in the Sass files:\r\n *\r\n * ## `[?theme]-[palette]-[?hue]-[?opacity]`\r\n * - [theme] - default value is the default theme\r\n * - [palette] - can be either palette name or primary/accent/warn/background\r\n * - [hue] - default is 500 (hue-x can be used with primary/accent/warn/background)\r\n * - [opacity] - default is 1\r\n *\r\n *\r\n * > `?` indicates optional parameter\r\n *\r\n * @usage\r\n * \r\n * \r\n *\r\n * The `mdColors` directive will automatically watch for changes in the expression if it recognizes\r\n * an interpolation expression or a function. For performance options, you can use `::` prefix to\r\n * the `md-colors` expression to indicate a one-time data binding.\r\n *\r\n * \r\n * \r\n * \r\n * \r\n */\r\n function MdColorsDirective($mdColors, $mdUtil, $log, $parse) {\r\n return {\r\n restrict: 'A',\r\n require: ['^?mdTheme'],\r\n compile: function (tElem, tAttrs) {\r\n var shouldWatch = shouldColorsWatch();\r\n\r\n return function (scope, element, attrs, ctrl) {\r\n var mdThemeController = ctrl[0];\r\n\r\n var lastColors = {};\r\n\r\n /**\r\n * @param {string=} theme\r\n * @return {Object} colors found in the specified theme\r\n */\r\n var parseColors = function (theme) {\r\n if (typeof theme !== 'string') {\r\n theme = '';\r\n }\r\n\r\n if (!attrs.mdColors) {\r\n attrs.mdColors = '{}';\r\n }\r\n\r\n /**\r\n * Json.parse() does not work because the keys are not quoted;\r\n * use $parse to convert to a hash map\r\n */\r\n var colors = $parse(attrs.mdColors)(scope);\r\n\r\n /**\r\n * If mdTheme is defined higher up the DOM tree,\r\n * we add mdTheme's theme to the colors which don't specify a theme.\r\n *\r\n * @example\r\n * \r\n * \r\n *\r\n * 'primary-600' will be changed to 'myTheme-primary-600',\r\n * but 'mySecondTheme-accent-200' will not be changed since it has a theme defined.\r\n */\r\n if (mdThemeController) {\r\n Object.keys(colors).forEach(function (prop) {\r\n var color = colors[prop];\r\n if (!$mdColors.hasTheme(color)) {\r\n colors[prop] = (theme || mdThemeController.$mdTheme) + '-' + color;\r\n }\r\n });\r\n }\r\n\r\n cleanElement(colors);\r\n\r\n return colors;\r\n };\r\n\r\n /**\r\n * @param {Object} colors\r\n */\r\n var cleanElement = function (colors) {\r\n if (!angular.equals(colors, lastColors)) {\r\n var keys = Object.keys(lastColors);\r\n\r\n if (lastColors.background && !keys.color) {\r\n keys.push('color');\r\n }\r\n\r\n keys.forEach(function (key) {\r\n element.css(key, '');\r\n });\r\n }\r\n\r\n lastColors = colors;\r\n };\r\n\r\n /**\r\n * Registering for mgTheme changes and asking mdTheme controller run our callback whenever\r\n * a theme changes.\r\n */\r\n var unregisterChanges = angular.noop;\r\n\r\n if (mdThemeController) {\r\n unregisterChanges = mdThemeController.registerChanges(function (theme) {\r\n $mdColors.applyThemeColors(element, parseColors(theme));\r\n });\r\n }\r\n\r\n scope.$on('$destroy', function () {\r\n unregisterChanges();\r\n });\r\n\r\n try {\r\n if (shouldWatch) {\r\n scope.$watch(parseColors, angular.bind(this,\r\n $mdColors.applyThemeColors, element\r\n ), true);\r\n }\r\n else {\r\n $mdColors.applyThemeColors(element, parseColors());\r\n }\r\n\r\n }\r\n catch (e) {\r\n $log.error(e.message);\r\n }\r\n\r\n };\r\n\r\n /**\r\n * @return {boolean}\r\n */\r\n function shouldColorsWatch() {\r\n // Simulate 1x binding and mark mdColorsWatch == false\r\n var rawColorExpression = tAttrs.mdColors;\r\n var bindOnce = rawColorExpression.indexOf('::') > -1;\r\n var isStatic = bindOnce ? true : STATIC_COLOR_EXPRESSION.test(tAttrs.mdColors);\r\n\r\n // Remove it for the postLink...\r\n tAttrs.mdColors = rawColorExpression.replace('::', '');\r\n\r\n var hasWatchAttr = angular.isDefined(tAttrs.mdColorsWatch);\r\n\r\n return (bindOnce || isStatic) ? false :\r\n hasWatchAttr ? $mdUtil.parseAttributeBoolean(tAttrs.mdColorsWatch) : true;\r\n }\r\n }\r\n };\r\n }\r\n})();\r\n\r\n})();\r\n(function(){\r\n\"use strict\";\r\n\r\n/**\r\n * @ngdoc module\r\n * @name material.components.content\r\n *\r\n * @description\r\n * Scrollable content\r\n */\r\nmdContentDirective.$inject = [\"$mdTheming\"];\r\nangular.module('material.components.content', [\r\n 'material.core'\r\n])\r\n .directive('mdContent', mdContentDirective);\r\n\r\n/**\r\n * @ngdoc directive\r\n * @name mdContent\r\n * @module material.components.content\r\n *\r\n * @restrict E\r\n *\r\n * @description\r\n *\r\n * The `` directive is a container element useful for scrollable content. It achieves\r\n * this by setting the CSS `overflow` property to `auto` so that content can properly scroll.\r\n *\r\n * In general, `` components are not designed to be nested inside one another. If\r\n * possible, it is better to make them siblings. This often results in a better user experience as\r\n * having nested scrollbars may confuse the user.\r\n *\r\n * ## Troubleshooting\r\n *\r\n * In some cases, you may wish to apply the `md-no-momentum` class to ensure that Safari's\r\n * momentum scrolling is disabled. Momentum scrolling can cause flickering issues while scrolling\r\n * SVG icons and some other components.\r\n *\r\n * Additionally, we now also offer the `md-no-flicker` class which can be applied to any element\r\n * and uses a Webkit-specific filter of `blur(0px)` that forces GPU rendering of all elements\r\n * inside (which eliminates the flicker on iOS devices).\r\n *\r\n * _Note: Forcing an element to render on the GPU can have unintended side-effects, especially\r\n * related to the z-index of elements. Please use with caution and only on the elements needed._\r\n *\r\n * @usage\r\n *\r\n * Add the `[layout-padding]` attribute to make the content padded.\r\n *\r\n * \r\n * \r\n * Lorem ipsum dolor sit amet, ne quod novum mei.\r\n * \r\n * \r\n */\r\n\r\nfunction mdContentDirective($mdTheming) {\r\n return {\r\n restrict: 'E',\r\n controller: ['$scope', '$element', ContentController],\r\n link: function(scope, element) {\r\n element.addClass('_md'); // private md component indicator for styling\r\n\r\n $mdTheming(element);\r\n scope.$broadcast('$mdContentLoaded', element);\r\n\r\n iosScrollFix(element[0]);\r\n }\r\n };\r\n\r\n function ContentController($scope, $element) {\r\n this.$scope = $scope;\r\n this.$element = $element;\r\n }\r\n}\r\n\r\nfunction iosScrollFix(node) {\r\n // IOS FIX:\r\n // If we scroll where there is no more room for the webview to scroll,\r\n // by default the webview itself will scroll up and down, this looks really\r\n // bad. So if we are scrolling to the very top or bottom, add/subtract one\r\n angular.element(node).on('$md.pressdown', function(ev) {\r\n // Only touch events\r\n if (ev.pointer.type !== 't') return;\r\n // Don't let a child content's touchstart ruin it for us.\r\n if (ev.$materialScrollFixed) return;\r\n ev.$materialScrollFixed = true;\r\n\r\n if (node.scrollTop === 0) {\r\n node.scrollTop = 1;\r\n } else if (node.scrollHeight === node.scrollTop + node.offsetHeight) {\r\n node.scrollTop -= 1;\r\n }\r\n });\r\n}\r\n\r\n})();\r\n(function(){\r\n\"use strict\";\r\n\r\n/**\r\n * @ngdoc module\r\n * @name material.components.datepicker\r\n * @description Module for the datepicker component.\r\n */\r\n\r\nangular.module('material.components.datepicker', [\r\n 'material.core',\r\n 'material.components.icon',\r\n 'material.components.virtualRepeat'\r\n]);\r\n\r\n})();\r\n(function(){\r\n\"use strict\";\r\n\r\n(function() {\r\n 'use strict';\r\n\r\n /**\r\n * @ngdoc directive\r\n * @name mdCalendar\r\n * @module material.components.datepicker\r\n *\r\n * @param {Date} ng-model The component's model. Should be a Date object.\r\n * @param {Object=} ng-model-options Allows tuning of the way in which `ng-model` is being\r\n * updated. Also allows for a timezone to be specified.\r\n * Read more at the\r\n * ngModelOptions docs.\r\n * @param {Date=} md-min-date Expression representing the minimum date.\r\n * @param {Date=} md-max-date Expression representing the maximum date.\r\n * @param {(function(Date): boolean)=} md-date-filter Function expecting a date and returning a\r\n * boolean whether it can be selected in \"day\" mode or not.\r\n * @param {(function(Date): boolean)=} md-month-filter Function expecting a date and returning a\r\n * boolean whether it can be selected in \"month\" mode or not.\r\n * @param {String=} md-current-view Current view of the calendar. Can be either \"month\" or \"year\".\r\n * @param {String=} md-mode Restricts the user to only selecting a value from a particular view.\r\n * This option can be used if the user is only supposed to choose from a certain date type\r\n * (e.g. only selecting the month). Can be either \"month\" or \"day\". **Note** that this will\r\n * overwrite the `md-current-view` value.\r\n *\r\n * @description\r\n * `` is a component that renders a calendar that can be used to select a date.\r\n * It is a part of the `` pane, however it can also be used on it's own.\r\n *\r\n * @usage\r\n *\r\n * \r\n * \r\n */\r\n CalendarCtrl.$inject = [\"$element\", \"$scope\", \"$$mdDateUtil\", \"$mdUtil\", \"$mdConstant\", \"$mdTheming\", \"$$rAF\", \"$attrs\", \"$mdDateLocale\", \"$filter\", \"$document\"];\r\n calendarDirective.$inject = [\"inputDirective\"];\r\n angular.module('material.components.datepicker')\r\n .directive('mdCalendar', calendarDirective);\r\n\r\n // TODO(jelbourn): Mac Cmd + left / right == Home / End\r\n // TODO(jelbourn): Refactor month element creation to use cloneNode (performance).\r\n // TODO(jelbourn): Define virtual scrolling constants (compactness) users can override.\r\n // TODO(jelbourn): Animated month transition on ng-model change (virtual-repeat)\r\n // TODO(jelbourn): Scroll snapping (virtual repeat)\r\n // TODO(jelbourn): Remove superfluous row from short months (virtual-repeat)\r\n // TODO(jelbourn): Month headers stick to top when scrolling.\r\n // TODO(jelbourn): Previous month opacity is lowered when partially scrolled out of view.\r\n // TODO(jelbourn): Support md-calendar standalone on a page (as a tabstop w/ aria-live\r\n // announcement and key handling).\r\n // TODO Read-only calendar (not just date-picker).\r\n\r\n function calendarDirective(inputDirective) {\r\n return {\r\n template: function(tElement, tAttr) {\r\n // This allows the calendar to work, without a datepicker. This ensures that the virtual\r\n // repeater scrolls to the proper place on load by deferring the execution until the next\r\n // digest. It's necessary only if the calendar is used without a datepicker, otherwise it's\r\n // already wrapped in an ngIf.\r\n var extraAttrs = tAttr.hasOwnProperty('ngIf') ? '' : 'ng-if=\"calendarCtrl.isInitialized\"';\r\n return '' +\r\n '
' +\r\n ' elements.\r\n */\r\n CalendarMonthBodyCtrl.prototype.buildCalendarForMonth = function(opt_dateInMonth) {\r\n var date = this.dateUtil.isValidDate(opt_dateInMonth) ? opt_dateInMonth : new Date();\r\n\r\n var firstDayOfMonth = this.dateUtil.getFirstDateOfMonth(date);\r\n var firstDayOfTheWeek = this.getLocaleDay_(firstDayOfMonth);\r\n var numberOfDaysInMonth = this.dateUtil.getNumberOfDaysInMonth(date);\r\n\r\n // Store rows for the month in a document fragment so that we can append them all at once.\r\n var monthBody = document.createDocumentFragment();\r\n\r\n var rowNumber = 1;\r\n var row = this.buildDateRow(rowNumber);\r\n monthBody.appendChild(row);\r\n\r\n // If this is the final month in the list of items, only the first week should render,\r\n // so we should return immediately after the first row is complete and has been\r\n // attached to the body.\r\n var isFinalMonth = this.offset === this.monthCtrl.items.length - 1;\r\n\r\n // Add a label for the month. If the month starts on a Sun/Mon/Tues, the month label\r\n // goes on a row above the first of the month. Otherwise, the month label takes up the first\r\n // two cells of the first row.\r\n var blankCellOffset = 0;\r\n var monthLabelCell = document.createElement('td');\r\n var monthLabelCellContent = document.createElement('span');\r\n var calendarCtrl = this.calendarCtrl;\r\n\r\n monthLabelCellContent.textContent = this.dateLocale.monthHeaderFormatter(date);\r\n monthLabelCell.appendChild(monthLabelCellContent);\r\n monthLabelCell.classList.add('md-calendar-month-label');\r\n // If the entire month is after the max date, render the label as a disabled state.\r\n if (calendarCtrl.maxDate && firstDayOfMonth > calendarCtrl.maxDate) {\r\n monthLabelCell.classList.add('md-calendar-month-label-disabled');\r\n // If the user isn't supposed to be able to change views, render the\r\n // label as usual, but disable the clicking functionality.\r\n } else if (!calendarCtrl.mode) {\r\n monthLabelCell.addEventListener('click', this.monthCtrl.headerClickHandler);\r\n monthLabelCell.setAttribute('data-timestamp', firstDayOfMonth.getTime());\r\n monthLabelCell.setAttribute('aria-label', this.dateLocale.monthFormatter(date));\r\n monthLabelCell.classList.add('md-calendar-label-clickable');\r\n monthLabelCell.appendChild(this.arrowIcon.cloneNode(true));\r\n }\r\n\r\n if (firstDayOfTheWeek <= 2) {\r\n monthLabelCell.setAttribute('colspan', '7');\r\n\r\n var monthLabelRow = this.buildDateRow();\r\n monthLabelRow.appendChild(monthLabelCell);\r\n monthBody.insertBefore(monthLabelRow, row);\r\n\r\n if (isFinalMonth) {\r\n return monthBody;\r\n }\r\n } else {\r\n blankCellOffset = 3;\r\n monthLabelCell.setAttribute('colspan', '3');\r\n row.appendChild(monthLabelCell);\r\n }\r\n\r\n // Add a blank cell for each day of the week that occurs before the first of the month.\r\n // For example, if the first day of the month is a Tuesday, add blank cells for Sun and Mon.\r\n // The blankCellOffset is needed in cases where the first N cells are used by the month label.\r\n for (var i = blankCellOffset; i < firstDayOfTheWeek; i++) {\r\n row.appendChild(this.buildDateCell());\r\n }\r\n\r\n // Add a cell for each day of the month, keeping track of the day of the week so that\r\n // we know when to start a new row.\r\n var dayOfWeek = firstDayOfTheWeek;\r\n var iterationDate = firstDayOfMonth;\r\n for (var d = 1; d <= numberOfDaysInMonth; d++) {\r\n // If we've reached the end of the week, start a new row.\r\n if (dayOfWeek === 7) {\r\n // We've finished the first row, so we're done if this is the final month.\r\n if (isFinalMonth) {\r\n return monthBody;\r\n }\r\n dayOfWeek = 0;\r\n rowNumber++;\r\n row = this.buildDateRow(rowNumber);\r\n monthBody.appendChild(row);\r\n }\r\n\r\n iterationDate.setDate(d);\r\n var cell = this.buildDateCell(iterationDate);\r\n row.appendChild(cell);\r\n\r\n dayOfWeek++;\r\n }\r\n\r\n // Ensure that the last row of the month has 7 cells.\r\n while (row.childNodes.length < 7) {\r\n row.appendChild(this.buildDateCell());\r\n }\r\n\r\n // Ensure that all months have 6 rows. This is necessary for now because the virtual-repeat\r\n // requires that all items have exactly the same height.\r\n while (monthBody.childNodes.length < 6) {\r\n var whitespaceRow = this.buildDateRow();\r\n for (var j = 0; j < 7; j++) {\r\n whitespaceRow.appendChild(this.buildDateCell());\r\n }\r\n monthBody.appendChild(whitespaceRow);\r\n }\r\n\r\n return monthBody;\r\n };\r\n\r\n /**\r\n * Gets the day-of-the-week index for a date for the current locale.\r\n * @private\r\n * @param {Date} date\r\n * @returns {number} The column index of the date in the calendar.\r\n */\r\n CalendarMonthBodyCtrl.prototype.getLocaleDay_ = function(date) {\r\n return (date.getDay() + (7 - this.dateLocale.firstDayOfWeek)) % 7;\r\n };\r\n})();\r\n\r\n})();\r\n(function(){\r\n\"use strict\";\r\n\r\n(function() {\r\n 'use strict';\r\n\r\n CalendarYearCtrl.$inject = [\"$element\", \"$scope\", \"$animate\", \"$q\", \"$$mdDateUtil\", \"$mdUtil\"];\r\n angular.module('material.components.datepicker')\r\n .directive('mdCalendarYear', calendarDirective);\r\n\r\n /**\r\n * Height of one calendar year tbody. This must be made known to the virtual-repeat and is\r\n * subsequently used for scrolling to specific years.\r\n */\r\n var TBODY_HEIGHT = 88;\r\n\r\n /** Private component, representing a list of years in the calendar. */\r\n function calendarDirective() {\r\n return {\r\n template:\r\n ' content for the given year.\r\n * @param {Date} date Date for which the content should be built.\r\n * @returns {DocumentFragment} A document fragment containing the months within the year.\r\n */\r\n CalendarYearBodyCtrl.prototype.buildCalendarForYear = function(date) {\r\n // Store rows for the month in a document fragment so that we can append them all at once.\r\n var year = date.getFullYear();\r\n var yearBody = document.createDocumentFragment();\r\n\r\n var monthCell, i;\r\n // First row contains label and Jan-Jun.\r\n var firstRow = document.createElement('tr');\r\n var labelCell = document.createElement('td');\r\n labelCell.className = 'md-calendar-month-label';\r\n labelCell.textContent = String(year);\r\n firstRow.appendChild(labelCell);\r\n\r\n for (i = 0; i < 6; i++) {\r\n firstRow.appendChild(this.buildMonthCell(year, i));\r\n }\r\n yearBody.appendChild(firstRow);\r\n\r\n // Second row contains a blank cell and Jul-Dec.\r\n var secondRow = document.createElement('tr');\r\n secondRow.appendChild(this.buildBlankCell());\r\n for (i = 6; i < 12; i++) {\r\n secondRow.appendChild(this.buildMonthCell(year, i));\r\n }\r\n yearBody.appendChild(secondRow);\r\n\r\n return yearBody;\r\n };\r\n})();\r\n\r\n})();\r\n(function(){\r\n\"use strict\";\r\n\r\n(function() {\r\n 'use strict';\r\n\r\n /**\r\n * @ngdoc service\r\n * @name $mdDateLocaleProvider\r\n * @module material.components.datepicker\r\n *\r\n * @description\r\n * The `$mdDateLocaleProvider` is the provider that creates the `$mdDateLocale` service.\r\n * This provider that allows the user to specify messages, formatters, and parsers for date\r\n * internationalization. The `$mdDateLocale` service itself is consumed by AngularJS Material\r\n * components that deal with dates\r\n * (i.e. mdDatepicker).\r\n *\r\n * @property {Array} months Array of month names (in order).\r\n * @property {Array} shortMonths Array of abbreviated month names.\r\n * @property {Array} days Array of the days of the week (in order).\r\n * @property {Array} shortDays Array of abbreviated days of the week.\r\n * @property {Array} dates Array of dates of the month. Only necessary for locales\r\n * using a numeral system other than [1, 2, 3...].\r\n * @property {Array} firstDayOfWeek The first day of the week. Sunday = 0, Monday = 1,\r\n * etc.\r\n * @property {function(string): Date} parseDate Function that converts a date string to a Date\r\n * object (the date portion).\r\n * @property {function(Date, string): string} formatDate Function to format a date object to a\r\n * string. The datepicker directive also provides the time zone, if it was specified.\r\n * @property {function(Date): string} monthHeaderFormatter Function that returns the label for\r\n * a month given a date.\r\n * @property {function(Date): string} monthFormatter Function that returns the full name of a month\r\n * for a given date.\r\n * @property {function(number): string} weekNumberFormatter Function that returns a label for\r\n * a week given the week number.\r\n * @property {function(Date): string} longDateFormatter Function that formats a date into a long\r\n * `aria-label` that is read by the screen reader when the focused date changes.\r\n * @property {string} msgCalendar Translation of the label \"Calendar\" for the current locale.\r\n * @property {string} msgOpenCalendar Translation of the button label \"Open calendar\" for the\r\n * current locale.\r\n * @property {Date} firstRenderableDate The date from which the datepicker calendar will begin\r\n * rendering. Note that this will be ignored if a minimum date is set.\r\n * Defaults to January 1st 1880.\r\n * @property {Date} lastRenderableDate The last date that will be rendered by the datepicker\r\n * calendar. Note that this will be ignored if a maximum date is set.\r\n * Defaults to January 1st 2130.\r\n * @property {function(string): boolean} isDateComplete Function to determine whether a string\r\n * makes sense to be parsed to a `Date` object. Returns `true` if the date appears to be complete\r\n * and parsing should occur. By default, this checks for 3 groups of text or numbers separated\r\n * by delimiters. This means that by default, date strings must include a month, day, and year\r\n * to be parsed and for the model to be updated.\r\n *\r\n * @usage\r\n * \r\n * myAppModule.config(function($mdDateLocaleProvider) {\r\n *\r\n * // Example of a French localization.\r\n * $mdDateLocaleProvider.months = ['janvier', 'février', 'mars', ...];\r\n * $mdDateLocaleProvider.shortMonths = ['janv', 'févr', 'mars', ...];\r\n * $mdDateLocaleProvider.days = ['dimanche', 'lundi', 'mardi', ...];\r\n * $mdDateLocaleProvider.shortDays = ['Di', 'Lu', 'Ma', ...];\r\n *\r\n * // Can change week display to start on Monday.\r\n * $mdDateLocaleProvider.firstDayOfWeek = 1;\r\n *\r\n * // Optional.\r\n * $mdDateLocaleProvider.dates = [1, 2, 3, 4, 5, 6, ...];\r\n *\r\n * // Example uses moment.js to parse and format dates.\r\n * $mdDateLocaleProvider.parseDate = function(dateString) {\r\n * var m = moment(dateString, 'L', true);\r\n * return m.isValid() ? m.toDate() : new Date(NaN);\r\n * };\r\n *\r\n * $mdDateLocaleProvider.formatDate = function(date) {\r\n * var m = moment(date);\r\n * return m.isValid() ? m.format('L') : '';\r\n * };\r\n *\r\n * // Allow only a day and month to be specified.\r\n * // This is required if using the 'M/D' format with moment.js.\r\n * $mdDateLocaleProvider.isDateComplete = function(dateString) {\r\n * dateString = dateString.trim();\r\n *\r\n * // Look for two chunks of content (either numbers or text) separated by delimiters.\r\n * var re = /^(([a-zA-Z]{3,}|[0-9]{1,4})([ .,]+|[/-]))([a-zA-Z]{3,}|[0-9]{1,4})/;\r\n * return re.test(dateString);\r\n * };\r\n *\r\n * $mdDateLocaleProvider.monthHeaderFormatter = function(date) {\r\n * return myShortMonths[date.getMonth()] + ' ' + date.getFullYear();\r\n * };\r\n *\r\n * // In addition to date display, date components also need localized messages\r\n * // for aria-labels for screen-reader users.\r\n *\r\n * $mdDateLocaleProvider.weekNumberFormatter = function(weekNumber) {\r\n * return 'Semaine ' + weekNumber;\r\n * };\r\n *\r\n * $mdDateLocaleProvider.msgCalendar = 'Calendrier';\r\n * $mdDateLocaleProvider.msgOpenCalendar = 'Ouvrir le calendrier';\r\n *\r\n * // You can also set when your calendar begins and ends.\r\n * $mdDateLocaleProvider.firstRenderableDate = new Date(1776, 6, 4);\r\n * $mdDateLocaleProvider.lastRenderableDate = new Date(2012, 11, 21);\r\n * });\r\n * \r\n *\r\n */\r\n angular.module('material.components.datepicker').config([\"$provide\", function($provide) {\r\n // TODO(jelbourn): Assert provided values are correctly formatted. Need assertions.\r\n\r\n /** @constructor */\r\n function DateLocaleProvider() {\r\n /** Array of full month names. E.g., ['January', 'February', ...] */\r\n this.months = null;\r\n\r\n /** Array of abbreviated month names. E.g., ['Jan', 'Feb', ...] */\r\n this.shortMonths = null;\r\n\r\n /** Array of full day of the week names. E.g., ['Monday', 'Tuesday', ...] */\r\n this.days = null;\r\n\r\n /** Array of abbreviated dat of the week names. E.g., ['M', 'T', ...] */\r\n this.shortDays = null;\r\n\r\n /** Array of dates of a month (1 - 31). Characters might be different in some locales. */\r\n this.dates = null;\r\n\r\n /** Index of the first day of the week. 0 = Sunday, 1 = Monday, etc. */\r\n this.firstDayOfWeek = 0;\r\n\r\n /**\r\n * Function that converts the date portion of a Date to a string.\r\n * @type {(function(Date): string)}\r\n */\r\n this.formatDate = null;\r\n\r\n /**\r\n * Function that converts a date string to a Date object (the date portion)\r\n * @type {function(string): Date}\r\n */\r\n this.parseDate = null;\r\n\r\n /**\r\n * Function that formats a Date into a month header string.\r\n * @type {function(Date): string}\r\n */\r\n this.monthHeaderFormatter = null;\r\n\r\n /**\r\n * Function that formats a week number into a label for the week.\r\n * @type {function(number): string}\r\n */\r\n this.weekNumberFormatter = null;\r\n\r\n /**\r\n * Function that formats a date into a long aria-label that is read\r\n * when the focused date changes.\r\n * @type {function(Date): string}\r\n */\r\n this.longDateFormatter = null;\r\n\r\n /**\r\n * Function to determine whether a string makes sense to be\r\n * parsed to a Date object.\r\n * @type {function(string): boolean}\r\n */\r\n this.isDateComplete = null;\r\n\r\n /**\r\n * ARIA label for the calendar \"dialog\" used in the datepicker.\r\n * @type {string}\r\n */\r\n this.msgCalendar = '';\r\n\r\n /**\r\n * ARIA label for the datepicker's \"Open calendar\" buttons.\r\n * @type {string}\r\n */\r\n this.msgOpenCalendar = '';\r\n }\r\n\r\n /**\r\n * Factory function that returns an instance of the dateLocale service.\r\n * @ngInject\r\n * @param $locale\r\n * @param $filter\r\n * @returns {DateLocale}\r\n */\r\n DateLocaleProvider.prototype.$get = function($locale, $filter) {\r\n /**\r\n * Default date-to-string formatting function.\r\n * @param {!Date} date\r\n * @param {string=} timezone\r\n * @returns {string}\r\n */\r\n function defaultFormatDate(date, timezone) {\r\n if (!date) {\r\n return '';\r\n }\r\n\r\n // All of the dates created through ng-material *should* be set to midnight.\r\n // If we encounter a date where the localeTime shows at 11pm instead of midnight,\r\n // we have run into an issue with DST where we need to increment the hour by one:\r\n // var d = new Date(1992, 9, 8, 0, 0, 0);\r\n // d.toLocaleString(); // == \"10/7/1992, 11:00:00 PM\"\r\n var localeTime = date.toLocaleTimeString();\r\n var formatDate = date;\r\n if (date.getHours() === 0 &&\r\n (localeTime.indexOf('11:') !== -1 || localeTime.indexOf('23:') !== -1)) {\r\n formatDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 1, 0, 0);\r\n }\r\n\r\n return $filter('date')(formatDate, 'M/d/yyyy', timezone);\r\n }\r\n\r\n /**\r\n * Default string-to-date parsing function.\r\n * @param {string|number} dateString\r\n * @returns {!Date}\r\n */\r\n function defaultParseDate(dateString) {\r\n return new Date(dateString);\r\n }\r\n\r\n /**\r\n * Default function to determine whether a string makes sense to be\r\n * parsed to a Date object.\r\n *\r\n * This is very permissive and is just a basic check to ensure that\r\n * things like single integers aren't able to be parsed into dates.\r\n * @param {string} dateString\r\n * @returns {boolean}\r\n */\r\n function defaultIsDateComplete(dateString) {\r\n dateString = dateString.trim();\r\n\r\n // Looks for three chunks of content (either numbers or text) separated\r\n // by delimiters.\r\n var re = /^(([a-zA-Z]{3,}|[0-9]{1,4})([ .,]+|[/-])){2}([a-zA-Z]{3,}|[0-9]{1,4})$/;\r\n return re.test(dateString);\r\n }\r\n\r\n /**\r\n * Default date-to-string formatter to get a month header.\r\n * @param {!Date} date\r\n * @returns {string}\r\n */\r\n function defaultMonthHeaderFormatter(date) {\r\n return service.shortMonths[date.getMonth()] + ' ' + date.getFullYear();\r\n }\r\n\r\n /**\r\n * Default formatter for a month.\r\n * @param {!Date} date\r\n * @returns {string}\r\n */\r\n function defaultMonthFormatter(date) {\r\n return service.months[date.getMonth()] + ' ' + date.getFullYear();\r\n }\r\n\r\n /**\r\n * Default week number formatter.\r\n * @param number\r\n * @returns {string}\r\n */\r\n function defaultWeekNumberFormatter(number) {\r\n return 'Week ' + number;\r\n }\r\n\r\n /**\r\n * Default formatter for date cell aria-labels.\r\n * @param {!Date} date\r\n * @returns {string}\r\n */\r\n function defaultLongDateFormatter(date) {\r\n // Example: 'Thursday June 18 2015'\r\n return [\r\n service.days[date.getDay()],\r\n service.months[date.getMonth()],\r\n service.dates[date.getDate()],\r\n date.getFullYear()\r\n ].join(' ');\r\n }\r\n\r\n // The default \"short\" day strings are the first character of each day,\r\n // e.g., \"Monday\" => \"M\".\r\n var defaultShortDays = $locale.DATETIME_FORMATS.SHORTDAY.map(function(day) {\r\n return day.substring(0, 1);\r\n });\r\n\r\n // The default dates are simply the numbers 1 through 31.\r\n var defaultDates = Array(32);\r\n for (var i = 1; i <= 31; i++) {\r\n defaultDates[i] = i;\r\n }\r\n\r\n // Default ARIA messages are in English (US).\r\n var defaultMsgCalendar = 'Calendar';\r\n var defaultMsgOpenCalendar = 'Open calendar';\r\n\r\n // Default start/end dates that are rendered in the calendar.\r\n var defaultFirstRenderableDate = new Date(1880, 0, 1);\r\n var defaultLastRendereableDate = new Date(defaultFirstRenderableDate.getFullYear() + 250, 0, 1);\r\n\r\n var service = {\r\n months: this.months || $locale.DATETIME_FORMATS.MONTH,\r\n shortMonths: this.shortMonths || $locale.DATETIME_FORMATS.SHORTMONTH,\r\n days: this.days || $locale.DATETIME_FORMATS.DAY,\r\n shortDays: this.shortDays || defaultShortDays,\r\n dates: this.dates || defaultDates,\r\n firstDayOfWeek: this.firstDayOfWeek || 0,\r\n formatDate: this.formatDate || defaultFormatDate,\r\n parseDate: this.parseDate || defaultParseDate,\r\n isDateComplete: this.isDateComplete || defaultIsDateComplete,\r\n monthHeaderFormatter: this.monthHeaderFormatter || defaultMonthHeaderFormatter,\r\n monthFormatter: this.monthFormatter || defaultMonthFormatter,\r\n weekNumberFormatter: this.weekNumberFormatter || defaultWeekNumberFormatter,\r\n longDateFormatter: this.longDateFormatter || defaultLongDateFormatter,\r\n msgCalendar: this.msgCalendar || defaultMsgCalendar,\r\n msgOpenCalendar: this.msgOpenCalendar || defaultMsgOpenCalendar,\r\n firstRenderableDate: this.firstRenderableDate || defaultFirstRenderableDate,\r\n lastRenderableDate: this.lastRenderableDate || defaultLastRendereableDate\r\n };\r\n\r\n return service;\r\n };\r\n DateLocaleProvider.prototype.$get.$inject = [\"$locale\", \"$filter\"];\r\n\r\n $provide.provider('$mdDateLocale', new DateLocaleProvider());\r\n }]);\r\n})();\r\n\r\n})();\r\n(function(){\r\n\"use strict\";\r\n\r\n(function() {\r\n 'use strict';\r\n\r\n /**\r\n * Utility for performing date calculations to facilitate operation of the calendar and\r\n * datepicker.\r\n */\r\n angular.module('material.components.datepicker').factory('$$mdDateUtil', [\"$mdDateLocale\", function($mdDateLocale) {\r\n return {\r\n getFirstDateOfMonth: getFirstDateOfMonth,\r\n getNumberOfDaysInMonth: getNumberOfDaysInMonth,\r\n getDateInNextMonth: getDateInNextMonth,\r\n getDateInPreviousMonth: getDateInPreviousMonth,\r\n isInNextMonth: isInNextMonth,\r\n isInPreviousMonth: isInPreviousMonth,\r\n getDateMidpoint: getDateMidpoint,\r\n isSameMonthAndYear: isSameMonthAndYear,\r\n getWeekOfMonth: getWeekOfMonth,\r\n incrementDays: incrementDays,\r\n incrementMonths: incrementMonths,\r\n getLastDateOfMonth: getLastDateOfMonth,\r\n isSameDay: isSameDay,\r\n getMonthDistance: getMonthDistance,\r\n isValidDate: isValidDate,\r\n setDateTimeToMidnight: setDateTimeToMidnight,\r\n createDateAtMidnight: createDateAtMidnight,\r\n isDateWithinRange: isDateWithinRange,\r\n incrementYears: incrementYears,\r\n getYearDistance: getYearDistance,\r\n clampDate: clampDate,\r\n getTimestampFromNode: getTimestampFromNode,\r\n isMonthWithinRange: isMonthWithinRange,\r\n removeLocalTzAndReparseDate: removeLocalTzAndReparseDate\r\n };\r\n\r\n /**\r\n * Gets the first day of the month for the given date's month.\r\n * @param {Date} date\r\n * @returns {Date}\r\n */\r\n function getFirstDateOfMonth(date) {\r\n return new Date(date.getFullYear(), date.getMonth(), 1);\r\n }\r\n\r\n /**\r\n * Gets the number of days in the month for the given date's month.\r\n * @param date\r\n * @returns {number}\r\n */\r\n function getNumberOfDaysInMonth(date) {\r\n return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();\r\n }\r\n\r\n /**\r\n * Get an arbitrary date in the month after the given date's month.\r\n * @param date\r\n * @returns {Date}\r\n */\r\n function getDateInNextMonth(date) {\r\n return new Date(date.getFullYear(), date.getMonth() + 1, 1);\r\n }\r\n\r\n /**\r\n * Get an arbitrary date in the month before the given date's month.\r\n * @param date\r\n * @returns {Date}\r\n */\r\n function getDateInPreviousMonth(date) {\r\n return new Date(date.getFullYear(), date.getMonth() - 1, 1);\r\n }\r\n\r\n /**\r\n * Gets whether two dates have the same month and year.\r\n * @param {Date} d1\r\n * @param {Date} d2\r\n * @returns {boolean}\r\n */\r\n function isSameMonthAndYear(d1, d2) {\r\n return d1.getFullYear() === d2.getFullYear() && d1.getMonth() === d2.getMonth();\r\n }\r\n\r\n /**\r\n * Gets whether two dates are the same day (not not necessarily the same time).\r\n * @param {Date} d1\r\n * @param {Date} d2\r\n * @returns {boolean}\r\n */\r\n function isSameDay(d1, d2) {\r\n return d1.getDate() == d2.getDate() && isSameMonthAndYear(d1, d2);\r\n }\r\n\r\n /**\r\n * Gets whether a date is in the month immediately after some date.\r\n * @param {Date} startDate The date from which to compare.\r\n * @param {Date} endDate The date to check.\r\n * @returns {boolean}\r\n */\r\n function isInNextMonth(startDate, endDate) {\r\n var nextMonth = getDateInNextMonth(startDate);\r\n return isSameMonthAndYear(nextMonth, endDate);\r\n }\r\n\r\n /**\r\n * Gets whether a date is in the month immediately before some date.\r\n * @param {Date} startDate The date from which to compare.\r\n * @param {Date} endDate The date to check.\r\n * @returns {boolean}\r\n */\r\n function isInPreviousMonth(startDate, endDate) {\r\n var previousMonth = getDateInPreviousMonth(startDate);\r\n return isSameMonthAndYear(endDate, previousMonth);\r\n }\r\n\r\n /**\r\n * Gets the midpoint between two dates.\r\n * @param {Date} d1\r\n * @param {Date} d2\r\n * @returns {Date}\r\n */\r\n function getDateMidpoint(d1, d2) {\r\n return createDateAtMidnight((d1.getTime() + d2.getTime()) / 2);\r\n }\r\n\r\n /**\r\n * Gets the week of the month that a given date occurs in.\r\n * @param {Date} date\r\n * @returns {number} Index of the week of the month (zero-based).\r\n */\r\n function getWeekOfMonth(date) {\r\n var firstDayOfMonth = getFirstDateOfMonth(date);\r\n return Math.floor((firstDayOfMonth.getDay() + date.getDate() - 1) / 7);\r\n }\r\n\r\n /**\r\n * Gets a new date incremented by the given number of days. Number of days can be negative.\r\n * @param {Date} date\r\n * @param {number} numberOfDays\r\n * @returns {Date}\r\n */\r\n function incrementDays(date, numberOfDays) {\r\n return new Date(date.getFullYear(), date.getMonth(), date.getDate() + numberOfDays);\r\n }\r\n\r\n /**\r\n * Gets a new date incremented by the given number of months. Number of months can be negative.\r\n * If the date of the given month does not match the target month, the date will be set to the\r\n * last day of the month.\r\n * @param {Date} date\r\n * @param {number} numberOfMonths\r\n * @returns {Date}\r\n */\r\n function incrementMonths(date, numberOfMonths) {\r\n // If the same date in the target month does not actually exist, the Date object will\r\n // automatically advance *another* month by the number of missing days.\r\n // For example, if you try to go from Jan. 30 to Feb. 30, you'll end up on March 2.\r\n // So, we check if the month overflowed and go to the last day of the target month instead.\r\n var dateInTargetMonth = new Date(date.getFullYear(), date.getMonth() + numberOfMonths, 1);\r\n var numberOfDaysInMonth = getNumberOfDaysInMonth(dateInTargetMonth);\r\n if (numberOfDaysInMonth < date.getDate()) {\r\n dateInTargetMonth.setDate(numberOfDaysInMonth);\r\n } else {\r\n dateInTargetMonth.setDate(date.getDate());\r\n }\r\n\r\n return dateInTargetMonth;\r\n }\r\n\r\n /**\r\n * Get the integer distance between two months. This *only* considers the month and year\r\n * portion of the Date instances.\r\n *\r\n * @param {Date} start\r\n * @param {Date} end\r\n * @returns {number} Number of months between `start` and `end`. If `end` is before `start`\r\n * chronologically, this number will be negative.\r\n */\r\n function getMonthDistance(start, end) {\r\n return (12 * (end.getFullYear() - start.getFullYear())) + (end.getMonth() - start.getMonth());\r\n }\r\n\r\n /**\r\n * Gets the last day of the month for the given date.\r\n * @param {Date} date\r\n * @returns {Date}\r\n */\r\n function getLastDateOfMonth(date) {\r\n return new Date(date.getFullYear(), date.getMonth(), getNumberOfDaysInMonth(date));\r\n }\r\n\r\n /**\r\n * Checks whether a date is valid.\r\n * @param {Date} date\r\n * @return {boolean} Whether the date is a valid Date.\r\n */\r\n function isValidDate(date) {\r\n return date && date.getTime && !isNaN(date.getTime());\r\n }\r\n\r\n /**\r\n * Sets a date's time to midnight.\r\n * @param {Date} date\r\n */\r\n function setDateTimeToMidnight(date) {\r\n if (isValidDate(date)) {\r\n date.setHours(0, 0, 0, 0);\r\n }\r\n }\r\n\r\n /**\r\n * Creates a date with the time set to midnight.\r\n * Drop-in replacement for two forms of the Date constructor via opt_value.\r\n * @param {number|Date=} opt_value Leave undefined for a Date representing now. Or use a\r\n * single value representing the number of seconds since the Unix Epoch or a Date object.\r\n * @return {Date} New date with time set to midnight.\r\n */\r\n function createDateAtMidnight(opt_value) {\r\n var date;\r\n if (angular.isDate(opt_value)) {\r\n date = opt_value;\r\n } else if (angular.isNumber(opt_value)) {\r\n date = new Date(opt_value);\r\n } else {\r\n date = new Date();\r\n }\r\n setDateTimeToMidnight(date);\r\n return date;\r\n }\r\n\r\n /**\r\n * Checks if a date is within a min and max range, ignoring the time component.\r\n * If minDate or maxDate are not dates, they are ignored.\r\n * @param {Date} date\r\n * @param {Date} minDate\r\n * @param {Date} maxDate\r\n */\r\n function isDateWithinRange(date, minDate, maxDate) {\r\n var dateAtMidnight = createDateAtMidnight(date);\r\n var minDateAtMidnight = isValidDate(minDate) ? createDateAtMidnight(minDate) : null;\r\n var maxDateAtMidnight = isValidDate(maxDate) ? createDateAtMidnight(maxDate) : null;\r\n return (!minDateAtMidnight || minDateAtMidnight <= dateAtMidnight) &&\r\n (!maxDateAtMidnight || maxDateAtMidnight >= dateAtMidnight);\r\n }\r\n\r\n /**\r\n * Gets a new date incremented by the given number of years. Number of years can be negative.\r\n * See `incrementMonths` for notes on overflow for specific dates.\r\n * @param {Date} date\r\n * @param {number} numberOfYears\r\n * @returns {Date}\r\n */\r\n function incrementYears(date, numberOfYears) {\r\n return incrementMonths(date, numberOfYears * 12);\r\n }\r\n\r\n /**\r\n * Get the integer distance between two years. This *only* considers the year portion of the\r\n * Date instances.\r\n *\r\n * @param {Date} start\r\n * @param {Date} end\r\n * @returns {number} Number of months between `start` and `end`. If `end` is before `start`\r\n * chronologically, this number will be negative.\r\n */\r\n function getYearDistance(start, end) {\r\n return end.getFullYear() - start.getFullYear();\r\n }\r\n\r\n /**\r\n * Clamps a date between a minimum and a maximum date.\r\n * @param {Date} date Date to be clamped\r\n * @param {Date=} minDate Minimum date\r\n * @param {Date=} maxDate Maximum date\r\n * @return {Date}\r\n */\r\n function clampDate(date, minDate, maxDate) {\r\n var boundDate = date;\r\n if (minDate && date < minDate) {\r\n boundDate = new Date(minDate.getTime());\r\n }\r\n if (maxDate && date > maxDate) {\r\n boundDate = new Date(maxDate.getTime());\r\n }\r\n return boundDate;\r\n }\r\n\r\n /**\r\n * Extracts and parses the timestamp from a DOM node.\r\n * @param {HTMLElement} node Node from which the timestamp will be extracted.\r\n * @return {number} Time since epoch.\r\n */\r\n function getTimestampFromNode(node) {\r\n if (node && node.hasAttribute('data-timestamp')) {\r\n return Number(node.getAttribute('data-timestamp'));\r\n }\r\n }\r\n\r\n /**\r\n * Checks if a month is within a min and max range, ignoring the date and time components.\r\n * If minDate or maxDate are not dates, they are ignored.\r\n * @param {Date} date\r\n * @param {Date} minDate\r\n * @param {Date} maxDate\r\n */\r\n function isMonthWithinRange(date, minDate, maxDate) {\r\n var month = date.getMonth();\r\n var year = date.getFullYear();\r\n\r\n return (!minDate || minDate.getFullYear() < year || minDate.getMonth() <= month) &&\r\n (!maxDate || maxDate.getFullYear() > year || maxDate.getMonth() >= month);\r\n }\r\n\r\n /**\r\n * @param {Date} value date in local timezone\r\n * @return {Date} date with local timezone offset removed\r\n */\r\n function removeLocalTzAndReparseDate(value) {\r\n var dateValue, formattedDate;\r\n // Remove the local timezone offset before calling formatDate.\r\n dateValue = new Date(value.getTime() + 60000 * value.getTimezoneOffset());\r\n formattedDate = $mdDateLocale.formatDate(dateValue);\r\n // parseDate only works with a date formatted by formatDate when using Moment validation.\r\n return $mdDateLocale.parseDate(formattedDate);\r\n }\r\n }]);\r\n})();\r\n\r\n})();\r\n(function(){\r\n\"use strict\";\r\n\r\n(function() {\r\n 'use strict';\r\n\r\n // TODO(jelbourn): forward more attributes to the internal input (required, autofocus, etc.)\r\n // TODO(jelbourn): something better for mobile (calendar panel takes up entire screen?)\r\n // TODO(jelbourn): input behavior (masking? auto-complete?)\r\n\r\n DatePickerCtrl.$inject = [\"$scope\", \"$element\", \"$attrs\", \"$window\", \"$mdConstant\", \"$mdTheming\", \"$mdUtil\", \"$mdDateLocale\", \"$$mdDateUtil\", \"$$rAF\", \"$filter\", \"$timeout\"];\r\n datePickerDirective.$inject = [\"$$mdSvgRegistry\", \"$mdUtil\", \"$mdAria\", \"inputDirective\"];\r\n angular.module('material.components.datepicker')\r\n .directive('mdDatepicker', datePickerDirective);\r\n\r\n /**\r\n * @ngdoc directive\r\n * @name mdDatepicker\r\n * @module material.components.datepicker\r\n *\r\n * @param {Date} ng-model The component's model. Expects either a JavaScript Date object or a\r\n * value that can be parsed into one (e.g. a ISO 8601 string).\r\n * @param {Object=} ng-model-options Allows tuning of the way in which `ng-model` is being\r\n * updated. Also allows for a timezone to be specified.\r\n * \r\n * Read more at the ngModelOptions docs.\r\n * @param {expression=} ng-change Expression evaluated when the model value changes.\r\n * @param {expression=} ng-focus Expression evaluated when the input is focused or the calendar\r\n * is opened.\r\n * @param {expression=} ng-blur Expression evaluated when focus is removed from the input or the\r\n * calendar is closed.\r\n * @param {boolean=} ng-disabled Whether the datepicker is disabled.\r\n * @param {boolean=} ng-required Whether a value is required for the datepicker.\r\n * @param {Date=} md-min-date Expression representing a min date (inclusive).\r\n * @param {Date=} md-max-date Expression representing a max date (inclusive).\r\n * @param {(function(Date): boolean)=} md-date-filter Function expecting a date and returning a\r\n * boolean whether it can be selected in \"day\" mode or not. Returning false will also trigger a\r\n * `filtered` model validation error.\r\n * @param {(function(Date): boolean)=} md-month-filter Function expecting a date and returning a\r\n * boolean whether it can be selected in \"month\" mode or not. Returning false will also trigger a\r\n * `filtered` model validation error.\r\n * @param {string=} md-placeholder The date input placeholder value.\r\n * @param {string=} md-open-on-focus When present, the calendar will be opened when the input\r\n * is focused.\r\n * @param {Boolean=} md-is-open Expression that can be used to open the datepicker's calendar\r\n * on-demand.\r\n * @param {string=} md-current-view Default open view of the calendar pane. Can be either\r\n * \"month\" or \"year\".\r\n * @param {string=} md-mode Restricts the user to only selecting a value from a particular view.\r\n * This option can be used if the user is only supposed to choose from a certain date type\r\n * (e.g. only selecting the month).\r\n * Can be either \"month\" or \"day\". **Note** that this will overwrite the `md-current-view` value.\r\n * @param {string=} md-hide-icons Determines which datepicker icons should be hidden. Note that\r\n * this may cause the datepicker to not align properly with other components.\r\n * **Use at your own risk.** Possible values are:\r\n * * `\"all\"` - Hides all icons.\r\n * * `\"calendar\"` - Only hides the calendar icon.\r\n * * `\"triangle\"` - Only hides the triangle icon.\r\n * @param {Object=} md-date-locale Allows for the values from the `$mdDateLocaleProvider` to be\r\n * overwritten on a per-element basis (e.g. `msgOpenCalendar` can be overwritten with\r\n * `md-date-locale=\"{ msgOpenCalendar: 'Open a special calendar' }\"`).\r\n * @param {string=} input-aria-describedby A space-separated list of element IDs. This should\r\n * contain the IDs of any elements that describe this datepicker. Screen readers will read the\r\n * content of these elements at the end of announcing that the datepicker has been selected\r\n * and describing its current state. The descriptive elements do not need to be visible on the\r\n * page.\r\n * @param {string=} input-aria-labelledby A space-separated list of element IDs. The ideal use\r\n * case is that this would contain the ID of a `
My Content
\r\n * ```\r\n *\r\n * ```css\r\n * [layout] {\r\n * box-sizing: border-box;\r\n * display:flex;\r\n * }\r\n * [layout=column] {\r\n * flex-direction : column\r\n * }\r\n * ```\r\n *\r\n * Use of attribute selectors creates significant performance impacts in some\r\n * browsers... mainly IE.\r\n *\r\n * This module registers directives that allow the same layout attributes to be\r\n * interpreted and converted to class selectors. The directive will add equivalent classes to\r\n * each element that contains a Layout directive.\r\n *\r\n * ```html\r\n * My Content
\r\n * ```\r\n *\r\n * ```css\r\n * .layout {\r\n * box-sizing: border-box;\r\n * display:flex;\r\n * }\r\n * .layout-column {\r\n * flex-direction : column\r\n * }\r\n * ```\r\n */\r\n function registerLayoutAPI(module){\r\n var PREFIX_REGEXP = /^((?:x|data)[:\\-_])/i;\r\n var SPECIAL_CHARS_REGEXP = /([:\\-_]+(.))/g;\r\n\r\n // NOTE: these are also defined in constants::MEDIA_PRIORITY and constants::MEDIA\r\n var BREAKPOINTS = [\"\", \"xs\", \"gt-xs\", \"sm\", \"gt-sm\", \"md\", \"gt-md\", \"lg\", \"gt-lg\", \"xl\", \"print\"];\r\n var API_WITH_VALUES = [\"layout\", \"flex\", \"flex-order\", \"flex-offset\", \"layout-align\"];\r\n var API_NO_VALUES = [\"show\", \"hide\", \"layout-padding\", \"layout-margin\"];\r\n\r\n\r\n // Build directive registration functions for the standard Layout API... for all breakpoints.\r\n angular.forEach(BREAKPOINTS, function(mqb) {\r\n\r\n // Attribute directives with expected, observable value(s)\r\n angular.forEach(API_WITH_VALUES, function(name){\r\n var fullName = mqb ? name + \"-\" + mqb : name;\r\n module.directive(directiveNormalize(fullName), attributeWithObserve(fullName));\r\n });\r\n\r\n // Attribute directives with no expected value(s)\r\n angular.forEach(API_NO_VALUES, function(name){\r\n var fullName = mqb ? name + \"-\" + mqb : name;\r\n module.directive(directiveNormalize(fullName), attributeWithoutValue(fullName));\r\n });\r\n\r\n });\r\n\r\n // Register other, special directive functions for the Layout features:\r\n module\r\n .provider('$$mdLayout', function() {\r\n // Publish internal service for Layouts\r\n return {\r\n $get : angular.noop,\r\n validateAttributeValue : validateAttributeValue,\r\n validateAttributeUsage : validateAttributeUsage,\r\n /**\r\n * Easy way to disable/enable the Layout API.\r\n * When disabled, this stops all attribute-to-classname generations\r\n */\r\n disableLayouts : function(isDisabled) {\r\n config.enabled = (isDisabled !== true);\r\n }\r\n };\r\n })\r\n\r\n .directive('mdLayoutCss' , disableLayoutDirective)\r\n .directive('ngCloak' , buildCloakInterceptor('ng-cloak'))\r\n\r\n .directive('layoutWrap' , attributeWithoutValue('layout-wrap'))\r\n .directive('layoutNowrap' , attributeWithoutValue('layout-nowrap'))\r\n .directive('layoutNoWrap' , attributeWithoutValue('layout-no-wrap'))\r\n .directive('layoutFill' , attributeWithoutValue('layout-fill'))\r\n\r\n // Determine if\r\n .config(detectDisabledLayouts);\r\n\r\n /**\r\n * Converts snake_case to camelCase.\r\n * Also there is special case for Moz prefix starting with upper case letter.\r\n * @param name Name to normalize\r\n */\r\n function directiveNormalize(name) {\r\n return name\r\n .replace(PREFIX_REGEXP, '')\r\n .replace(SPECIAL_CHARS_REGEXP, function(_, separator, letter, offset) {\r\n return offset ? letter.toUpperCase() : letter;\r\n });\r\n }\r\n }\r\n\r\n\r\n /**\r\n * Detect if any of the HTML tags has a [md-layouts-disabled] attribute;\r\n * If yes, then immediately disable all layout API features\r\n *\r\n * Note: this attribute should be specified on either the HTML or BODY tags\r\n * @ngInject\r\n */\r\n function detectDisabledLayouts() {\r\n var isDisabled = !!document.querySelector('[md-layouts-disabled]');\r\n config.enabled = !isDisabled;\r\n }\r\n\r\n /**\r\n * Special directive that will disable ALL Layout conversions of layout\r\n * attribute(s) to classname(s).\r\n *\r\n * \r\n * \r\n *\r\n * \r\n * ...\r\n * \r\n *\r\n * Note: Using md-layout-css directive requires the developer to load the Material\r\n * Layout Attribute stylesheet (which only uses attribute selectors):\r\n *\r\n * `angular-material.layout.css`\r\n *\r\n * Another option is to use the LayoutProvider to configure and disable the attribute\r\n * conversions; this would obviate the use of the `md-layout-css` directive\r\n */\r\n function disableLayoutDirective() {\r\n // Return a 1x-only, first-match attribute directive\r\n config.enabled = false;\r\n\r\n return {\r\n restrict : 'A',\r\n priority : '900'\r\n };\r\n }\r\n\r\n /**\r\n * Tail-hook ngCloak to delay the uncloaking while Layout transformers\r\n * finish processing. Eliminates flicker with Material.Layouts\r\n */\r\n function buildCloakInterceptor(className) {\r\n return ['$timeout', function($timeout){\r\n return {\r\n restrict : 'A',\r\n priority : -10, // run after normal ng-cloak\r\n compile : function(element) {\r\n if (!config.enabled) return angular.noop;\r\n\r\n // Re-add the cloak\r\n element.addClass(className);\r\n\r\n return function(scope, element) {\r\n // Wait while layout injectors configure, then uncloak\r\n // NOTE: $rAF does not delay enough... and this is a 1x-only event,\r\n // $timeout is acceptable.\r\n $timeout(function(){\r\n element.removeClass(className);\r\n }, 10, false);\r\n };\r\n }\r\n };\r\n }];\r\n }\r\n\r\n\r\n // *********************************************************************************\r\n //\r\n // These functions create registration functions for AngularJS Material Layout attribute\r\n // directives. This provides easy translation to switch AngularJS Material attribute selectors to\r\n // CLASS selectors and directives; which has huge performance implications for IE Browsers.\r\n //\r\n // *********************************************************************************\r\n\r\n /**\r\n * Creates a directive registration function where a possible dynamic attribute\r\n * value will be observed/watched.\r\n * @param {string} className attribute name; eg `layout-gt-md` with value =\"row\"\r\n */\r\n function attributeWithObserve(className) {\r\n\r\n return ['$mdUtil', '$interpolate', \"$log\", function(_$mdUtil_, _$interpolate_, _$log_) {\r\n $mdUtil = _$mdUtil_;\r\n $interpolate = _$interpolate_;\r\n $log = _$log_;\r\n\r\n return {\r\n restrict: 'A',\r\n compile: function(element, attr) {\r\n var linkFn;\r\n if (config.enabled) {\r\n // immediately replace static (non-interpolated) invalid values...\r\n\r\n validateAttributeUsage(className, attr, element, $log);\r\n\r\n validateAttributeValue(className,\r\n getNormalizedAttrValue(className, attr, \"\"),\r\n buildUpdateFn(element, className, attr)\r\n );\r\n\r\n linkFn = translateWithValueToCssClass;\r\n }\r\n\r\n // Use for postLink to account for transforms after ng-transclude.\r\n return linkFn || angular.noop;\r\n }\r\n };\r\n }];\r\n\r\n /**\r\n * Observe deprecated layout attributes and update the element's layout classes to match.\r\n */\r\n function translateWithValueToCssClass(scope, element, attrs) {\r\n var updateFn = updateClassWithValue(element, className, attrs);\r\n var unwatch = attrs.$observe(attrs.$normalize(className), updateFn);\r\n\r\n updateFn(getNormalizedAttrValue(className, attrs, \"\"));\r\n scope.$on(\"$destroy\", function() { unwatch(); });\r\n }\r\n }\r\n\r\n /**\r\n * Creates a registration function for AngularJS Material Layout attribute directive.\r\n * This is a `simple` transpose of attribute usage to class usage; where we ignore\r\n * any attribute value.\r\n */\r\n function attributeWithoutValue(className) {\r\n return ['$mdUtil', '$interpolate', \"$log\", function(_$mdUtil_, _$interpolate_, _$log_) {\r\n $mdUtil = _$mdUtil_;\r\n $interpolate = _$interpolate_;\r\n $log = _$log_;\r\n\r\n return {\r\n restrict: 'A',\r\n compile: function(element, attr) {\r\n var linkFn;\r\n if (config.enabled) {\r\n // immediately replace static (non-interpolated) invalid values...\r\n\r\n validateAttributeValue(className,\r\n getNormalizedAttrValue(className, attr, \"\"),\r\n buildUpdateFn(element, className, attr)\r\n );\r\n\r\n translateToCssClass(null, element);\r\n\r\n // Use for postLink to account for transforms after ng-transclude.\r\n linkFn = translateToCssClass;\r\n }\r\n\r\n return linkFn || angular.noop;\r\n }\r\n };\r\n }];\r\n\r\n /**\r\n * Add transformed class selector.\r\n */\r\n function translateToCssClass(scope, element) {\r\n element.addClass(className);\r\n }\r\n }\r\n\r\n /**\r\n * After link-phase, do NOT remove deprecated layout attribute selector.\r\n * Instead watch the attribute so interpolated data-bindings to layout\r\n * selectors will continue to be supported.\r\n *\r\n * $observe() the className and update with new class (after removing the last one)\r\n *\r\n * e.g. `layout=\"{{layoutDemo.direction}}\"` will update...\r\n *\r\n * NOTE: The value must match one of the specified styles in the CSS.\r\n * For example `flex-gt-md=\"{{size}}` where `scope.size == 47` will NOT work since\r\n * only breakpoints for 0, 5, 10, 15... 100, 33, 34, 66, 67 are defined.\r\n */\r\n function updateClassWithValue(element, className) {\r\n var lastClass;\r\n\r\n return function updateClassFn(newValue) {\r\n var value = validateAttributeValue(className, newValue || \"\");\r\n if (angular.isDefined(value)) {\r\n if (lastClass) element.removeClass(lastClass);\r\n lastClass = !value ? className : className + \"-\" + value.trim().replace(WHITESPACE, \"-\");\r\n element.addClass(lastClass);\r\n }\r\n };\r\n }\r\n\r\n /**\r\n * Centralize warnings for known flexbox issues (especially IE-related issues)\r\n */\r\n function validateAttributeUsage(className, attr, element, $log){\r\n var message, usage, url;\r\n var nodeName = element[0].nodeName.toLowerCase();\r\n\r\n switch (className.replace(SUFFIXES,\"\")) {\r\n case \"flex\":\r\n if ((nodeName === \"md-button\") || (nodeName === \"fieldset\")){\r\n // @see https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers\r\n // Use wrapper inside (preferred) or outside\r\n\r\n usage = \"<\" + nodeName + \" \" + className + \">\";\r\n url = \"https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers\";\r\n message = \"Markup '{0}' may not work as expected in IE Browsers. Consult '{1}' for details.\";\r\n\r\n $log.warn($mdUtil.supplant(message, [usage, url]));\r\n }\r\n }\r\n }\r\n\r\n\r\n /**\r\n * For the Layout attribute value, validate or replace with default fallback value.\r\n */\r\n function validateAttributeValue(className, value, updateFn) {\r\n var origValue = value;\r\n\r\n if (!needsInterpolation(value)) {\r\n switch (className.replace(SUFFIXES,\"\")) {\r\n case 'layout' :\r\n if (!findIn(value, LAYOUT_OPTIONS)) {\r\n value = LAYOUT_OPTIONS[0]; // 'row';\r\n }\r\n break;\r\n\r\n case 'flex' :\r\n if (!findIn(value, FLEX_OPTIONS)) {\r\n if (isNaN(value)) {\r\n value = '';\r\n }\r\n }\r\n break;\r\n\r\n case 'flex-offset' :\r\n case 'flex-order' :\r\n if (!value || isNaN(+value)) {\r\n value = '0';\r\n }\r\n break;\r\n\r\n case 'layout-align' :\r\n var axis = extractAlignAxis(value);\r\n value = $mdUtil.supplant(\"{main}-{cross}\",axis);\r\n break;\r\n\r\n case 'layout-padding' :\r\n case 'layout-margin' :\r\n case 'layout-fill' :\r\n case 'layout-wrap' :\r\n case 'layout-nowrap' :\r\n value = '';\r\n break;\r\n }\r\n\r\n if (value !== origValue) {\r\n (updateFn || angular.noop)(value);\r\n }\r\n }\r\n\r\n return value ? value.trim() : \"\";\r\n }\r\n\r\n /**\r\n * Replace current attribute value with fallback value\r\n */\r\n function buildUpdateFn(element, className, attrs) {\r\n return function updateAttrValue(fallback) {\r\n if (!needsInterpolation(fallback)) {\r\n // Do not modify the element's attribute value; so\r\n // uses '\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\r\n})();\r\n(function(){\r\n\"use strict\";\r\n\r\n/**\r\n * @ngdoc service\r\n * @name $$mdMeta\r\n * @module material.core.meta\r\n *\r\n * @description\r\n *\r\n * A provider and a service that simplifies meta tags access\r\n *\r\n * Note: This is intended only for use with dynamic meta tags such as browser color and title.\r\n * Tags that are only processed when the page is rendered (such as `charset`, and `http-equiv`)\r\n * will not work since `$$mdMeta` adds the tags after the page has already been loaded.\r\n *\r\n * ```js\r\n * app.config(function($$mdMetaProvider) {\r\n * var removeMeta = $$mdMetaProvider.setMeta('meta-name', 'content');\r\n * var metaValue = $$mdMetaProvider.getMeta('meta-name'); // -> 'content'\r\n *\r\n * removeMeta();\r\n * });\r\n *\r\n * app.controller('myController', function($$mdMeta) {\r\n * var removeMeta = $$mdMeta.setMeta('meta-name', 'content');\r\n * var metaValue = $$mdMeta.getMeta('meta-name'); // -> 'content'\r\n *\r\n * removeMeta();\r\n * });\r\n * ```\r\n *\r\n * @returns {$$mdMeta.$service}\r\n *\r\n */\r\nangular.module('material.core.meta', [])\r\n .provider('$$mdMeta', function () {\r\n var head = angular.element(document.head);\r\n var metaElements = {};\r\n\r\n /**\r\n * Checks if the requested element was written manually and maps it\r\n *\r\n * @param {string} name meta tag 'name' attribute value\r\n * @returns {boolean} returns true if there is an element with the requested name\r\n */\r\n function mapExistingElement(name) {\r\n if (metaElements[name]) {\r\n return true;\r\n }\r\n\r\n var element = document.getElementsByName(name)[0];\r\n\r\n if (!element) {\r\n return false;\r\n }\r\n\r\n metaElements[name] = angular.element(element);\r\n\r\n return true;\r\n }\r\n\r\n /**\r\n * @ngdoc method\r\n * @name $$mdMeta#setMeta\r\n *\r\n * @description\r\n * Creates meta element with the 'name' and 'content' attributes,\r\n * if the meta tag is already created than we replace the 'content' value\r\n *\r\n * @param {string} name meta tag 'name' attribute value\r\n * @param {string} content meta tag 'content' attribute value\r\n * @returns {function} remove function\r\n *\r\n */\r\n function setMeta(name, content) {\r\n mapExistingElement(name);\r\n\r\n if (!metaElements[name]) {\r\n var newMeta = angular.element('');\r\n head.append(newMeta);\r\n metaElements[name] = newMeta;\r\n }\r\n else {\r\n metaElements[name].attr('content', content);\r\n }\r\n\r\n return function () {\r\n metaElements[name].attr('content', '');\r\n metaElements[name].remove();\r\n delete metaElements[name];\r\n };\r\n }\r\n\r\n /**\r\n * @ngdoc method\r\n * @name $$mdMeta#getMeta\r\n *\r\n * @description\r\n * Gets the 'content' attribute value of the wanted meta element\r\n *\r\n * @param {string} name meta tag 'name' attribute value\r\n * @returns {string} content attribute value\r\n */\r\n function getMeta(name) {\r\n if (!mapExistingElement(name)) {\r\n throw Error('$$mdMeta: could not find a meta tag with the name \\'' + name + '\\'');\r\n }\r\n\r\n return metaElements[name].attr('content');\r\n }\r\n\r\n var module = {\r\n setMeta: setMeta,\r\n getMeta: getMeta\r\n };\r\n\r\n return angular.extend({}, module, {\r\n $get: function () {\r\n return module;\r\n }\r\n });\r\n });\r\n})();\r\n(function(){\r\n\"use strict\";\r\n\r\n /**\r\n * @ngdoc module\r\n * @name material.core.componentRegistry\r\n *\r\n * @description\r\n * A component instance registration service.\r\n * Note: currently this as a private service in the SideNav component.\r\n */\r\n ComponentRegistry.$inject = [\"$log\", \"$q\"];\r\n angular.module('material.core')\r\n .factory('$mdComponentRegistry', ComponentRegistry);\r\n\r\n /*\r\n * @private\r\n * @ngdoc factory\r\n * @name ComponentRegistry\r\n * @module material.core.componentRegistry\r\n *\r\n */\r\n function ComponentRegistry($log, $q) {\r\n\r\n var self;\r\n var instances = [];\r\n var pendings = { };\r\n\r\n return self = {\r\n /**\r\n * Used to print an error when an instance for a handle isn't found.\r\n */\r\n notFoundError: function(handle, msgContext) {\r\n $log.error((msgContext || \"\") + 'No instance found for handle', handle);\r\n },\r\n /**\r\n * Return all registered instances as an array.\r\n */\r\n getInstances: function() {\r\n return instances;\r\n },\r\n\r\n /**\r\n * Get a registered instance.\r\n * @param handle the String handle to look up for a registered instance.\r\n */\r\n get: function(handle) {\r\n if (!isValidID(handle)) return null;\r\n\r\n var i, j, instance;\r\n for (i = 0, j = instances.length; i < j; i++) {\r\n instance = instances[i];\r\n if (instance.$$mdHandle === handle) {\r\n return instance;\r\n }\r\n }\r\n return null;\r\n },\r\n\r\n /**\r\n * Register an instance.\r\n * @param instance the instance to register\r\n * @param handle the handle to identify the instance under.\r\n */\r\n register: function(instance, handle) {\r\n if (!handle) return angular.noop;\r\n\r\n instance.$$mdHandle = handle;\r\n instances.push(instance);\r\n resolveWhen();\r\n\r\n return deregister;\r\n\r\n /**\r\n * Remove registration for an instance\r\n */\r\n function deregister() {\r\n var index = instances.indexOf(instance);\r\n if (index !== -1) {\r\n instances.splice(index, 1);\r\n }\r\n }\r\n\r\n /**\r\n * Resolve any pending promises for this instance\r\n */\r\n function resolveWhen() {\r\n var dfd = pendings[handle];\r\n if (dfd) {\r\n dfd.forEach(function (promise) {\r\n promise.resolve(instance);\r\n });\r\n delete pendings[handle];\r\n }\r\n }\r\n },\r\n\r\n /**\r\n * Async accessor to registered component instance\r\n * If not available then a promise is created to notify\r\n * all listeners when the instance is registered.\r\n */\r\n when : function(handle) {\r\n if (isValidID(handle)) {\r\n var deferred = $q.defer();\r\n var instance = self.get(handle);\r\n\r\n if (instance) {\r\n deferred.resolve(instance);\r\n } else {\r\n if (pendings[handle] === undefined) {\r\n pendings[handle] = [];\r\n }\r\n pendings[handle].push(deferred);\r\n }\r\n\r\n return deferred.promise;\r\n }\r\n return $q.reject(\"Invalid `md-component-id` value.\");\r\n }\r\n\r\n };\r\n\r\n function isValidID(handle){\r\n return handle && (handle !== \"\");\r\n }\r\n\r\n }\r\n\r\n})();\r\n(function(){\r\n\"use strict\";\r\n\r\n(function() {\r\n 'use strict';\r\n\r\n /**\r\n * @ngdoc service\r\n * @name $mdButtonInkRipple\r\n * @module material.core\r\n *\r\n * @description\r\n * Provides ripple effects for md-button. See $mdInkRipple service for all possible configuration options.\r\n *\r\n * @param {object=} scope Scope within the current context\r\n * @param {object=} element The element the ripple effect should be applied to\r\n * @param {object=} options (Optional) Configuration options to override the default ripple configuration\r\n */\r\n\r\n MdButtonInkRipple.$inject = [\"$mdInkRipple\"];\r\n angular.module('material.core')\r\n .factory('$mdButtonInkRipple', MdButtonInkRipple);\r\n\r\n function MdButtonInkRipple($mdInkRipple) {\r\n return {\r\n attach: function attachRipple(scope, element, options) {\r\n options = angular.extend(optionsForElement(element), options);\r\n\r\n return $mdInkRipple.attach(scope, element, options);\r\n }\r\n };\r\n\r\n function optionsForElement(element) {\r\n if (element.hasClass('md-icon-button')) {\r\n return {\r\n isMenuItem: element.hasClass('md-menu-item'),\r\n fitRipple: true,\r\n center: true\r\n };\r\n } else {\r\n return {\r\n isMenuItem: element.hasClass('md-menu-item'),\r\n dimBackground: true\r\n };\r\n }\r\n }\r\n }\r\n})();\r\n\r\n})();\r\n(function(){\r\n\"use strict\";\r\n\r\n(function() {\r\n 'use strict';\r\n\r\n /**\r\n * @ngdoc service\r\n * @name $mdCheckboxInkRipple\r\n * @module material.core\r\n *\r\n * @description\r\n * Provides ripple effects for md-checkbox. See $mdInkRipple service for all possible configuration options.\r\n *\r\n * @param {object=} scope Scope within the current context\r\n * @param {object=} element The element the ripple effect should be applied to\r\n * @param {object=} options (Optional) Configuration options to override the defaultripple configuration\r\n */\r\n\r\n MdCheckboxInkRipple.$inject = [\"$mdInkRipple\"];\r\n angular.module('material.core')\r\n .factory('$mdCheckboxInkRipple', MdCheckboxInkRipple);\r\n\r\n function MdCheckboxInkRipple($mdInkRipple) {\r\n return {\r\n attach: attach\r\n };\r\n\r\n function attach(scope, element, options) {\r\n return $mdInkRipple.attach(scope, element, angular.extend({\r\n center: true,\r\n dimBackground: false,\r\n fitRipple: true\r\n }, options));\r\n }\r\n }\r\n})();\r\n\r\n})();\r\n(function(){\r\n\"use strict\";\r\n\r\n(function() {\r\n 'use strict';\r\n\r\n /**\r\n * @ngdoc service\r\n * @name $mdListInkRipple\r\n * @module material.core\r\n *\r\n * @description\r\n * Provides ripple effects for md-list. See $mdInkRipple service for all possible configuration options.\r\n *\r\n * @param {object=} scope Scope within the current context\r\n * @param {object=} element The element the ripple effect should be applied to\r\n * @param {object=} options (Optional) Configuration options to override the defaultripple configuration\r\n */\r\n\r\n MdListInkRipple.$inject = [\"$mdInkRipple\"];\r\n angular.module('material.core')\r\n .factory('$mdListInkRipple', MdListInkRipple);\r\n\r\n function MdListInkRipple($mdInkRipple) {\r\n return {\r\n attach: attach\r\n };\r\n\r\n function attach(scope, element, options) {\r\n return $mdInkRipple.attach(scope, element, angular.extend({\r\n center: false,\r\n dimBackground: true,\r\n outline: false,\r\n rippleSize: 'full'\r\n }, options));\r\n }\r\n }\r\n})();\r\n\r\n})();\r\n(function(){\r\n\"use strict\";\r\n\r\n/**\r\n * @ngdoc module\r\n * @name material.core.ripple\r\n * @description\r\n * Ripple\r\n */\r\nInkRippleCtrl.$inject = [\"$scope\", \"$element\", \"rippleOptions\", \"$window\", \"$timeout\", \"$mdUtil\", \"$mdColorUtil\"];\r\nInkRippleDirective.$inject = [\"$mdButtonInkRipple\", \"$mdCheckboxInkRipple\"];\r\nangular.module('material.core')\r\n .provider('$mdInkRipple', InkRippleProvider)\r\n .directive('mdInkRipple', InkRippleDirective)\r\n .directive('mdNoInk', attrNoDirective)\r\n .directive('mdNoBar', attrNoDirective)\r\n .directive('mdNoStretch', attrNoDirective);\r\n\r\nvar DURATION = 450;\r\n\r\n/**\r\n * @ngdoc directive\r\n * @name mdInkRipple\r\n * @module material.core.ripple\r\n *\r\n * @description\r\n * The `md-ink-ripple` directive allows you to specify the ripple color or if a ripple is allowed.\r\n *\r\n * @param {string|boolean} md-ink-ripple A color string `#FF0000` or boolean (`false` or `0`) for\r\n * preventing ripple\r\n *\r\n * @usage\r\n * ### String values\r\n * \r\n * \r\n * Ripples in red\r\n * \r\n *\r\n * \r\n * Not rippling\r\n * \r\n * \r\n *\r\n * ### Interpolated values\r\n * \r\n * \r\n * Ripples with the return value of 'randomColor' function\r\n * \r\n *\r\n * \r\n * Ripples if 'canRipple' function return value is not 'false' or '0'\r\n * \r\n * \r\n */\r\nfunction InkRippleDirective ($mdButtonInkRipple, $mdCheckboxInkRipple) {\r\n return {\r\n controller: angular.noop,\r\n link: function (scope, element, attr) {\r\n attr.hasOwnProperty('mdInkRippleCheckbox')\r\n ? $mdCheckboxInkRipple.attach(scope, element)\r\n : $mdButtonInkRipple.attach(scope, element);\r\n }\r\n };\r\n}\r\n\r\n/**\r\n * @ngdoc service\r\n * @name $mdInkRipple\r\n * @module material.core.ripple\r\n *\r\n * @description\r\n * `$mdInkRipple` is a service for adding ripples to any element.\r\n *\r\n * @usage\r\n * \r\n * app.factory('$myElementInkRipple', function($mdInkRipple) {\r\n * return {\r\n * attach: function (scope, element, options) {\r\n * return $mdInkRipple.attach(scope, element, angular.extend({\r\n * center: false,\r\n * dimBackground: true\r\n * }, options));\r\n * }\r\n * };\r\n * });\r\n *\r\n * app.controller('myController', function ($scope, $element, $myElementInkRipple) {\r\n * $scope.onClick = function (ev) {\r\n * $myElementInkRipple.attach($scope, angular.element(ev.target), { center: true });\r\n * }\r\n * });\r\n * \r\n */\r\n\r\n/**\r\n * @ngdoc service\r\n * @name $mdInkRippleProvider\r\n * @module material.core.ripple\r\n *\r\n * @description\r\n * If you want to disable ink ripples globally, for all components, you can call the\r\n * `disableInkRipple` method in your app's config.\r\n *\r\n *\r\n * @usage\r\n * \r\n * app.config(function ($mdInkRippleProvider) {\r\n * $mdInkRippleProvider.disableInkRipple();\r\n * });\r\n * \r\n */\r\n\r\nfunction InkRippleProvider () {\r\n var isDisabledGlobally = false;\r\n\r\n return {\r\n disableInkRipple: disableInkRipple,\r\n $get: [\"$injector\", function($injector) {\r\n return { attach: attach };\r\n\r\n /**\r\n * @ngdoc method\r\n * @name $mdInkRipple#attach\r\n *\r\n * @description\r\n * Attaching given scope, element and options to inkRipple controller\r\n *\r\n * @param {object=} scope Scope within the current context\r\n * @param {object=} element The element the ripple effect should be applied to\r\n * @param {object=} options (Optional) Configuration options to override the defaultRipple configuration\r\n * * `center` - Whether the ripple should start from the center of the container element\r\n * * `dimBackground` - Whether the background should be dimmed with the ripple color\r\n * * `colorElement` - The element the ripple should take its color from, defined by css property `color`\r\n * * `fitRipple` - Whether the ripple should fill the element\r\n */\r\n function attach (scope, element, options) {\r\n if (isDisabledGlobally || element.controller('mdNoInk')) return angular.noop;\r\n return $injector.instantiate(InkRippleCtrl, {\r\n $scope: scope,\r\n $element: element,\r\n rippleOptions: options\r\n });\r\n }\r\n }]\r\n };\r\n\r\n /**\r\n * @ngdoc method\r\n * @name $mdInkRippleProvider#disableInkRipple\r\n *\r\n * @description\r\n * A config-time method that, when called, disables ripples globally.\r\n */\r\n function disableInkRipple () {\r\n isDisabledGlobally = true;\r\n }\r\n}\r\n\r\n/**\r\n * Controller used by the ripple service in order to apply ripples\r\n * @ngInject\r\n */\r\nfunction InkRippleCtrl ($scope, $element, rippleOptions, $window, $timeout, $mdUtil, $mdColorUtil) {\r\n this.$window = $window;\r\n this.$timeout = $timeout;\r\n this.$mdUtil = $mdUtil;\r\n this.$mdColorUtil = $mdColorUtil;\r\n this.$scope = $scope;\r\n this.$element = $element;\r\n this.options = rippleOptions;\r\n this.mousedown = false;\r\n this.ripples = [];\r\n this.timeout = null; // Stores a reference to the most-recent ripple timeout\r\n this.lastRipple = null;\r\n\r\n $mdUtil.valueOnUse(this, 'container', this.createContainer);\r\n\r\n this.$element.addClass('md-ink-ripple');\r\n\r\n // attach method for unit tests\r\n ($element.controller('mdInkRipple') || {}).createRipple = angular.bind(this, this.createRipple);\r\n ($element.controller('mdInkRipple') || {}).setColor = angular.bind(this, this.color);\r\n\r\n this.bindEvents();\r\n}\r\n\r\n\r\n/**\r\n * Either remove or unlock any remaining ripples when the user mouses off of the element (either by\r\n * mouseup or mouseleave event)\r\n */\r\nfunction autoCleanup (self, cleanupFn) {\r\n if (self.mousedown || self.lastRipple) {\r\n self.mousedown = false;\r\n self.$mdUtil.nextTick(angular.bind(self, cleanupFn), false);\r\n }\r\n}\r\n\r\n\r\n/**\r\n * Returns the color that the ripple should be (either based on CSS or hard-coded)\r\n * @returns {string}\r\n */\r\nInkRippleCtrl.prototype.color = function (value) {\r\n var self = this;\r\n\r\n // If assigning a color value, apply it to background and the ripple color\r\n if (angular.isDefined(value)) {\r\n self._color = self._parseColor(value);\r\n }\r\n\r\n // If color lookup, use assigned, defined, or inherited\r\n return self._color || self._parseColor(self.inkRipple()) || self._parseColor(getElementColor());\r\n\r\n /**\r\n * Finds the color element and returns its text color for use as default ripple color\r\n * @returns {string}\r\n */\r\n function getElementColor () {\r\n var items = self.options && self.options.colorElement ? self.options.colorElement : [];\r\n var elem = items.length ? items[ 0 ] : self.$element[ 0 ];\r\n\r\n return elem ? self.$window.getComputedStyle(elem).color : 'rgb(0,0,0)';\r\n }\r\n};\r\n\r\n/**\r\n * Updating the ripple colors based on the current inkRipple value\r\n * or the element's computed style color\r\n */\r\nInkRippleCtrl.prototype.calculateColor = function () {\r\n return this.color();\r\n};\r\n\r\n\r\n/**\r\n * Takes a string color and converts it to RGBA format\r\n * @param {string} color\r\n * @param {number} multiplier\r\n * @returns {string}\r\n */\r\nInkRippleCtrl.prototype._parseColor = function parseColor (color, multiplier) {\r\n multiplier = multiplier || 1;\r\n var colorUtil = this.$mdColorUtil;\r\n\r\n if (!color) return;\r\n if (color.indexOf('rgba') === 0) return color.replace(/\\d?\\.?\\d*\\s*\\)\\s*$/, (0.1 * multiplier).toString() + ')');\r\n if (color.indexOf('rgb') === 0) return colorUtil.rgbToRgba(color);\r\n if (color.indexOf('#') === 0) return colorUtil.hexToRgba(color);\r\n\r\n};\r\n\r\n/**\r\n * Binds events to the root element for\r\n */\r\nInkRippleCtrl.prototype.bindEvents = function () {\r\n this.$element.on('mousedown', angular.bind(this, this.handleMousedown));\r\n this.$element.on('mouseup touchend', angular.bind(this, this.handleMouseup));\r\n this.$element.on('mouseleave', angular.bind(this, this.handleMouseup));\r\n this.$element.on('touchmove', angular.bind(this, this.handleTouchmove));\r\n};\r\n\r\n/**\r\n * Create a new ripple on every mousedown event from the root element\r\n * @param event {MouseEvent}\r\n */\r\nInkRippleCtrl.prototype.handleMousedown = function (event) {\r\n if (this.mousedown) return;\r\n\r\n // When jQuery is loaded, we have to get the original event\r\n if (event.hasOwnProperty('originalEvent')) event = event.originalEvent;\r\n this.mousedown = true;\r\n if (this.options.center) {\r\n this.createRipple(this.container.prop('clientWidth') / 2, this.container.prop('clientWidth') / 2);\r\n } else {\r\n\r\n // We need to calculate the relative coordinates if the target is a sublayer of the ripple element\r\n if (event.srcElement !== this.$element[0]) {\r\n var layerRect = this.$element[0].getBoundingClientRect();\r\n var layerX = event.clientX - layerRect.left;\r\n var layerY = event.clientY - layerRect.top;\r\n\r\n this.createRipple(layerX, layerY);\r\n } else {\r\n this.createRipple(event.offsetX, event.offsetY);\r\n }\r\n }\r\n};\r\n\r\n/**\r\n * Either remove or unlock any remaining ripples when the user mouses off of the element (either by\r\n * mouseup, touchend or mouseleave event)\r\n */\r\nInkRippleCtrl.prototype.handleMouseup = function () {\r\n this.$timeout(function () {\r\n autoCleanup(this, this.clearRipples);\r\n }.bind(this));\r\n};\r\n\r\n/**\r\n * Either remove or unlock any remaining ripples when the user mouses off of the element (by\r\n * touchmove)\r\n */\r\nInkRippleCtrl.prototype.handleTouchmove = function () {\r\n autoCleanup(this, this.deleteRipples);\r\n};\r\n\r\n/**\r\n * Cycles through all ripples and attempts to remove them.\r\n */\r\nInkRippleCtrl.prototype.deleteRipples = function () {\r\n for (var i = 0; i < this.ripples.length; i++) {\r\n this.ripples[ i ].remove();\r\n }\r\n};\r\n\r\n/**\r\n * Cycles through all ripples and attempts to remove them with fade.\r\n * Depending on logic within `fadeInComplete`, some removals will be postponed.\r\n */\r\nInkRippleCtrl.prototype.clearRipples = function () {\r\n for (var i = 0; i < this.ripples.length; i++) {\r\n this.fadeInComplete(this.ripples[ i ]);\r\n }\r\n};\r\n\r\n/**\r\n * Creates the ripple container element\r\n * @returns {*}\r\n */\r\nInkRippleCtrl.prototype.createContainer = function () {\r\n var container = angular.element('');\r\n this.$element.append(container);\r\n return container;\r\n};\r\n\r\nInkRippleCtrl.prototype.clearTimeout = function () {\r\n if (this.timeout) {\r\n this.$timeout.cancel(this.timeout);\r\n this.timeout = null;\r\n }\r\n};\r\n\r\nInkRippleCtrl.prototype.isRippleAllowed = function () {\r\n var element = this.$element[0];\r\n do {\r\n if (!element.tagName || element.tagName === 'BODY') break;\r\n\r\n if (element && angular.isFunction(element.hasAttribute)) {\r\n if (element.hasAttribute('disabled')) return false;\r\n if (this.inkRipple() === 'false' || this.inkRipple() === '0') return false;\r\n }\r\n\r\n } while (element = element.parentNode);\r\n return true;\r\n};\r\n\r\n/**\r\n * The attribute `md-ink-ripple` may be a static or interpolated\r\n * color value OR a boolean indicator (used to disable ripples)\r\n */\r\nInkRippleCtrl.prototype.inkRipple = function () {\r\n return this.$element.attr('md-ink-ripple');\r\n};\r\n\r\n/**\r\n * Creates a new ripple and adds it to the container. Also tracks ripple in `this.ripples`.\r\n * @param left\r\n * @param top\r\n */\r\nInkRippleCtrl.prototype.createRipple = function (left, top) {\r\n if (!this.isRippleAllowed()) return;\r\n\r\n var ctrl = this;\r\n var colorUtil = ctrl.$mdColorUtil;\r\n var ripple = angular.element('');\r\n var width = this.$element.prop('clientWidth');\r\n var height = this.$element.prop('clientHeight');\r\n var x = Math.max(Math.abs(width - left), left) * 2;\r\n var y = Math.max(Math.abs(height - top), top) * 2;\r\n var size = getSize(this.options.fitRipple, x, y);\r\n var color = this.calculateColor();\r\n\r\n ripple.css({\r\n left: left + 'px',\r\n top: top + 'px',\r\n background: 'black',\r\n width: size + 'px',\r\n height: size + 'px',\r\n backgroundColor: colorUtil.rgbaToRgb(color),\r\n borderColor: colorUtil.rgbaToRgb(color)\r\n });\r\n this.lastRipple = ripple;\r\n\r\n // we only want one timeout to be running at a time\r\n this.clearTimeout();\r\n this.timeout = this.$timeout(function () {\r\n ctrl.clearTimeout();\r\n if (!ctrl.mousedown) ctrl.fadeInComplete(ripple);\r\n }, DURATION * 0.35, false);\r\n\r\n if (this.options.dimBackground) this.container.css({ backgroundColor: color });\r\n this.container.append(ripple);\r\n this.ripples.push(ripple);\r\n ripple.addClass('md-ripple-placed');\r\n\r\n this.$mdUtil.nextTick(function () {\r\n\r\n ripple.addClass('md-ripple-scaled md-ripple-active');\r\n ctrl.$timeout(function () {\r\n ctrl.clearRipples();\r\n }, DURATION, false);\r\n\r\n }, false);\r\n\r\n function getSize (fit, x, y) {\r\n return fit\r\n ? Math.max(x, y)\r\n : Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));\r\n }\r\n};\r\n\r\n\r\n\r\n/**\r\n * After fadeIn finishes, either kicks off the fade-out animation or queues the element for removal on mouseup\r\n * @param ripple\r\n */\r\nInkRippleCtrl.prototype.fadeInComplete = function (ripple) {\r\n if (this.lastRipple === ripple) {\r\n if (!this.timeout && !this.mousedown) {\r\n this.removeRipple(ripple);\r\n }\r\n } else {\r\n this.removeRipple(ripple);\r\n }\r\n};\r\n\r\n/**\r\n * Kicks off the animation for removing a ripple\r\n * @param ripple {Element}\r\n */\r\nInkRippleCtrl.prototype.removeRipple = function (ripple) {\r\n var ctrl = this;\r\n var index = this.ripples.indexOf(ripple);\r\n if (index < 0) return;\r\n this.ripples.splice(this.ripples.indexOf(ripple), 1);\r\n ripple.removeClass('md-ripple-active');\r\n ripple.addClass('md-ripple-remove');\r\n if (this.ripples.length === 0) this.container.css({ backgroundColor: '' });\r\n // use a 2-second timeout in order to allow for the animation to finish\r\n // we don't actually care how long the animation takes\r\n this.$timeout(function () {\r\n ctrl.fadeOutComplete(ripple);\r\n }, DURATION, false);\r\n};\r\n\r\n/**\r\n * Removes the provided ripple from the DOM\r\n * @param ripple\r\n */\r\nInkRippleCtrl.prototype.fadeOutComplete = function (ripple) {\r\n ripple.remove();\r\n this.lastRipple = null;\r\n};\r\n\r\n/**\r\n * Used to create an empty directive. This is used to track flag-directives whose children may have\r\n * functionality based on them.\r\n *\r\n * Example: `md-no-ink` will potentially be used by all child directives.\r\n */\r\nfunction attrNoDirective () {\r\n return { controller: angular.noop };\r\n}\r\n\r\n})();\r\n(function(){\r\n\"use strict\";\r\n\r\n(function() {\r\n 'use strict';\r\n\r\n /**\r\n * @ngdoc service\r\n * @name $mdTabInkRipple\r\n * @module material.core\r\n *\r\n * @description\r\n * Provides ripple effects for md-tabs. See $mdInkRipple service for all possible configuration options.\r\n *\r\n * @param {object=} scope Scope within the current context\r\n * @param {object=} element The element the ripple effect should be applied to\r\n * @param {object=} options (Optional) Configuration options to override the defaultripple configuration\r\n */\r\n\r\n MdTabInkRipple.$inject = [\"$mdInkRipple\"];\r\n angular.module('material.core')\r\n .factory('$mdTabInkRipple', MdTabInkRipple);\r\n\r\n function MdTabInkRipple($mdInkRipple) {\r\n return {\r\n attach: attach\r\n };\r\n\r\n function attach(scope, element, options) {\r\n return $mdInkRipple.attach(scope, element, angular.extend({\r\n center: false,\r\n dimBackground: true,\r\n outline: false,\r\n rippleSize: 'full'\r\n }, options));\r\n }\r\n }\r\n})();\r\n\r\n})();\r\n(function(){\r\n\"use strict\";\r\n\r\nangular.module('material.core.theming.palette', [])\r\n.constant('$mdColorPalette', {\r\n 'red': {\r\n '50': '#ffebee',\r\n '100': '#ffcdd2',\r\n '200': '#ef9a9a',\r\n '300': '#e57373',\r\n '400': '#ef5350',\r\n '500': '#f44336',\r\n '600': '#e53935',\r\n '700': '#d32f2f',\r\n '800': '#c62828',\r\n '900': '#b71c1c',\r\n 'A100': '#ff8a80',\r\n 'A200': '#ff5252',\r\n 'A400': '#ff1744',\r\n 'A700': '#d50000',\r\n 'contrastDefaultColor': 'light',\r\n 'contrastDarkColors': '50 100 200 300 400 500 600 A100 A200 A400',\r\n 'contrastStrongLightColors': '700 800 900 A700'\r\n },\r\n 'pink': {\r\n '50': '#fce4ec',\r\n '100': '#f8bbd0',\r\n '200': '#f48fb1',\r\n '300': '#f06292',\r\n '400': '#ec407a',\r\n '500': '#e91e63',\r\n '600': '#d81b60',\r\n '700': '#c2185b',\r\n '800': '#ad1457',\r\n '900': '#880e4f',\r\n 'A100': '#ff80ab',\r\n 'A200': '#ff4081',\r\n 'A400': '#f50057',\r\n 'A700': '#c51162',\r\n 'contrastDefaultColor': 'light',\r\n 'contrastDarkColors': '50 100 200 300 400 A100 A200 A400',\r\n // White on 500 does not meet the minimum 4.5 contrast ratio (at 4.34),\r\n // but it's worse with a dark foreground (3.61).\r\n 'contrastStrongLightColors': '500 600 700 800 900 A700'\r\n },\r\n 'purple': {\r\n '50': '#f3e5f5',\r\n '100': '#e1bee7',\r\n '200': '#ce93d8',\r\n '300': '#ba68c8',\r\n '400': '#ab47bc',\r\n '500': '#9c27b0',\r\n '600': '#8e24aa',\r\n '700': '#7b1fa2',\r\n '800': '#6a1b9a',\r\n '900': '#4a148c',\r\n 'A100': '#ea80fc',\r\n 'A200': '#e040fb',\r\n 'A400': '#d500f9',\r\n 'A700': '#aa00ff',\r\n 'contrastDefaultColor': 'light',\r\n 'contrastDarkColors': '50 100 200 300 A100 A200 A400',\r\n 'contrastStrongLightColors': '400 500 600 700 800 900 A700'\r\n },\r\n 'deep-purple': {\r\n '50': '#ede7f6',\r\n '100': '#d1c4e9',\r\n '200': '#b39ddb',\r\n '300': '#9575cd',\r\n '400': '#7e57c2',\r\n '500': '#673ab7',\r\n '600': '#5e35b1',\r\n '700': '#512da8',\r\n '800': '#4527a0',\r\n '900': '#311b92',\r\n 'A100': '#b388ff',\r\n 'A200': '#7c4dff',\r\n 'A400': '#651fff',\r\n 'A700': '#6200ea',\r\n 'contrastDefaultColor': 'light',\r\n 'contrastDarkColors': '50 100 200 300 A100',\r\n 'contrastStrongLightColors': '400 500 600 700 800 900 A200 A400 A700'\r\n },\r\n 'indigo': {\r\n '50': '#e8eaf6',\r\n '100': '#c5cae9',\r\n '200': '#9fa8da',\r\n '300': '#7986cb',\r\n '400': '#5c6bc0',\r\n '500': '#3f51b5',\r\n '600': '#3949ab',\r\n '700': '#303f9f',\r\n '800': '#283593',\r\n '900': '#1a237e',\r\n 'A100': '#8c9eff',\r\n 'A200': '#536dfe',\r\n 'A400': '#3d5afe',\r\n 'A700': '#304ffe',\r\n 'contrastDefaultColor': 'light',\r\n 'contrastDarkColors': '50 100 200 300 A100 A200',\r\n 'contrastStrongLightColors': '400 500 600 700 800 900 A400 A700'\r\n },\r\n 'blue': {\r\n '50': '#e3f2fd',\r\n '100': '#bbdefb',\r\n '200': '#90caf9',\r\n '300': '#64b5f6',\r\n '400': '#42a5f5',\r\n '500': '#2196f3',\r\n '600': '#1e88e5',\r\n '700': '#1976d2',\r\n '800': '#1565c0',\r\n '900': '#0d47a1',\r\n 'A100': '#82b1ff',\r\n 'A200': '#448aff',\r\n 'A400': '#2979ff',\r\n 'A700': '#2962ff',\r\n 'contrastDefaultColor': 'light',\r\n // White on A400 does not meet the minimum 4.5 contrast ratio (at 3.98),\r\n // but it's worse with a dark foreground (3.94).\r\n 'contrastDarkColors': '50 100 200 300 400 500 600 A100 A200',\r\n 'contrastStrongLightColors': '700 800 900 A400 A700'\r\n },\r\n 'light-blue': {\r\n '50': '#e1f5fe',\r\n '100': '#b3e5fc',\r\n '200': '#81d4fa',\r\n '300': '#4fc3f7',\r\n '400': '#29b6f6',\r\n '500': '#03a9f4',\r\n '600': '#039be5',\r\n '700': '#0288d1',\r\n '800': '#0277bd',\r\n '900': '#01579b',\r\n 'A100': '#80d8ff',\r\n 'A200': '#40c4ff',\r\n 'A400': '#00b0ff',\r\n 'A700': '#0091ea',\r\n 'contrastDefaultColor': 'dark',\r\n // Dark on 700 does not meet the minimum 4.5 contrast ratio (at 4.07),\r\n // but it's worse with a white foreground (3.85).\r\n 'contrastStrongLightColors': '800 900 A700'\r\n },\r\n 'cyan': {\r\n '50': '#e0f7fa',\r\n '100': '#b2ebf2',\r\n '200': '#80deea',\r\n '300': '#4dd0e1',\r\n '400': '#26c6da',\r\n '500': '#00bcd4',\r\n '600': '#00acc1',\r\n '700': '#0097a7',\r\n '800': '#00838f',\r\n '900': '#006064',\r\n 'A100': '#84ffff',\r\n 'A200': '#18ffff',\r\n 'A400': '#00e5ff',\r\n 'A700': '#00b8d4',\r\n 'contrastDefaultColor': 'dark',\r\n // Dark on 700 does not meet the minimum 4.5 contrast ratio (at 4.47),\r\n // but it's worse with a white foreground (3.5).\r\n 'contrastStrongLightColors': '800 900'\r\n },\r\n 'teal': {\r\n '50': '#e0f2f1',\r\n '100': '#b2dfdb',\r\n '200': '#80cbc4',\r\n '300': '#4db6ac',\r\n '400': '#26a69a',\r\n '500': '#009688',\r\n '600': '#00897b',\r\n '700': '#00796b',\r\n '800': '#00695c',\r\n '900': '#004d40',\r\n 'A100': '#a7ffeb',\r\n 'A200': '#64ffda',\r\n 'A400': '#1de9b6',\r\n 'A700': '#00bfa5',\r\n 'contrastDefaultColor': 'dark',\r\n // Dark on 500 does not meet the minimum 4.5 contrast ratio (at 4.27),\r\n // but it's worse with a white foreground (3.67).\r\n // White on 600 does not meet the minimum 4.5 contrast ratio (at 4.31),\r\n // but it's worse with a dark foreground (3.64).\r\n 'contrastStrongLightColors': '600 700 800 900'\r\n },\r\n 'green': {\r\n '50': '#e8f5e9',\r\n '100': '#c8e6c9',\r\n '200': '#a5d6a7',\r\n '300': '#81c784',\r\n '400': '#66bb6a',\r\n '500': '#4caf50',\r\n '600': '#43a047',\r\n '700': '#388e3c',\r\n '800': '#2e7d32',\r\n '900': '#1b5e20',\r\n 'A100': '#b9f6ca',\r\n 'A200': '#69f0ae',\r\n 'A400': '#00e676',\r\n 'A700': '#00c853',\r\n 'contrastDefaultColor': 'dark',\r\n // White on 700 does not meet the minimum 4.5 contrast ratio (at 4.11),\r\n // but it's worse with a dark foreground (3.81).\r\n 'contrastStrongLightColors': '700 800 900'\r\n },\r\n 'light-green': {\r\n '50': '#f1f8e9',\r\n '100': '#dcedc8',\r\n '200': '#c5e1a5',\r\n '300': '#aed581',\r\n '400': '#9ccc65',\r\n '500': '#8bc34a',\r\n '600': '#7cb342',\r\n '700': '#689f38',\r\n '800': '#558b2f',\r\n '900': '#33691e',\r\n 'A100': '#ccff90',\r\n 'A200': '#b2ff59',\r\n 'A400': '#76ff03',\r\n 'A700': '#64dd17',\r\n 'contrastDefaultColor': 'dark',\r\n 'contrastStrongLightColors': '800 900'\r\n },\r\n 'lime': {\r\n '50': '#f9fbe7',\r\n '100': '#f0f4c3',\r\n '200': '#e6ee9c',\r\n '300': '#dce775',\r\n '400': '#d4e157',\r\n '500': '#cddc39',\r\n '600': '#c0ca33',\r\n '700': '#afb42b',\r\n '800': '#9e9d24',\r\n '900': '#827717',\r\n 'A100': '#f4ff81',\r\n 'A200': '#eeff41',\r\n 'A400': '#c6ff00',\r\n 'A700': '#aeea00',\r\n 'contrastDefaultColor': 'dark',\r\n 'contrastStrongLightColors': '900'\r\n },\r\n 'yellow': {\r\n '50': '#fffde7',\r\n '100': '#fff9c4',\r\n '200': '#fff59d',\r\n '300': '#fff176',\r\n '400': '#ffee58',\r\n '500': '#ffeb3b',\r\n '600': '#fdd835',\r\n '700': '#fbc02d',\r\n '800': '#f9a825',\r\n '900': '#f57f17',\r\n 'A100': '#ffff8d',\r\n 'A200': '#ffff00',\r\n 'A400': '#ffea00',\r\n 'A700': '#ffd600',\r\n 'contrastDefaultColor': 'dark'\r\n },\r\n 'amber': {\r\n '50': '#fff8e1',\r\n '100': '#ffecb3',\r\n '200': '#ffe082',\r\n '300': '#ffd54f',\r\n '400': '#ffca28',\r\n '500': '#ffc107',\r\n '600': '#ffb300',\r\n '700': '#ffa000',\r\n '800': '#ff8f00',\r\n '900': '#ff6f00',\r\n 'A100': '#ffe57f',\r\n 'A200': '#ffd740',\r\n 'A400': '#ffc400',\r\n 'A700': '#ffab00',\r\n 'contrastDefaultColor': 'dark'\r\n },\r\n 'orange': {\r\n '50': '#fff3e0',\r\n '100': '#ffe0b2',\r\n '200': '#ffcc80',\r\n '300': '#ffb74d',\r\n '400': '#ffa726',\r\n '500': '#ff9800',\r\n '600': '#fb8c00',\r\n '700': '#f57c00',\r\n '800': '#ef6c00',\r\n '900': '#e65100',\r\n 'A100': '#ffd180',\r\n 'A200': '#ffab40',\r\n 'A400': '#ff9100',\r\n 'A700': '#ff6d00',\r\n 'contrastDefaultColor': 'dark',\r\n 'contrastStrongLightColors': '900'\r\n },\r\n 'deep-orange': {\r\n '50': '#fbe9e7',\r\n '100': '#ffccbc',\r\n '200': '#ffab91',\r\n '300': '#ff8a65',\r\n '400': '#ff7043',\r\n '500': '#ff5722',\r\n '600': '#f4511e',\r\n '700': '#e64a19',\r\n '800': '#d84315',\r\n '900': '#bf360c',\r\n 'A100': '#ff9e80',\r\n 'A200': '#ff6e40',\r\n 'A400': '#ff3d00',\r\n 'A700': '#dd2c00',\r\n 'contrastDefaultColor': 'dark',\r\n // Dark on 700 does not meet the minimum 4.5 contrast ratio (at 4.01),\r\n // but it's worse with a white foreground (3.91).\r\n // White on 800 does not meet the minimum 4.5 contrast ratio (at 4.43),\r\n // but it's worse with a dark foreground (3.54).\r\n 'contrastStrongLightColors': '800 900 A400 A700',\r\n },\r\n 'brown': {\r\n '50': '#efebe9',\r\n '100': '#d7ccc8',\r\n '200': '#bcaaa4',\r\n '300': '#a1887f',\r\n '400': '#8d6e63',\r\n '500': '#795548',\r\n '600': '#6d4c41',\r\n '700': '#5d4037',\r\n '800': '#4e342e',\r\n '900': '#3e2723',\r\n 'A100': '#d7ccc8',\r\n 'A200': '#bcaaa4',\r\n 'A400': '#8d6e63',\r\n 'A700': '#5d4037',\r\n 'contrastDefaultColor': 'light',\r\n 'contrastDarkColors': '50 100 200 300 A100 A200',\r\n 'contrastStrongLightColors': '400 500 600 700 800 900 A400 A700'\r\n },\r\n 'grey': {\r\n '50': '#fafafa',\r\n '100': '#f5f5f5',\r\n '200': '#eeeeee',\r\n '300': '#e0e0e0',\r\n '400': '#bdbdbd',\r\n '500': '#9e9e9e',\r\n '600': '#757575',\r\n '700': '#616161',\r\n '800': '#424242',\r\n '900': '#212121',\r\n 'A100': '#ffffff',\r\n 'A200': '#000000',\r\n 'A400': '#303030',\r\n 'A700': '#616161',\r\n 'contrastDefaultColor': 'dark',\r\n 'contrastLightColors': '700 800 900 A200 A400 A700',\r\n 'contrastStrongLightColors': '600'\r\n },\r\n 'blue-grey': {\r\n '50': '#eceff1',\r\n '100': '#cfd8dc',\r\n '200': '#b0bec5',\r\n '300': '#90a4ae',\r\n '400': '#78909c',\r\n '500': '#607d8b',\r\n '600': '#546e7a',\r\n '700': '#455a64',\r\n '800': '#37474f',\r\n '900': '#263238',\r\n 'A100': '#cfd8dc',\r\n 'A200': '#b0bec5',\r\n 'A400': '#78909c',\r\n 'A700': '#455a64',\r\n 'contrastDefaultColor': 'light',\r\n 'contrastDarkColors': '50 100 200 300 400 A100 A200 A400',\r\n // White on 500 does not meet the minimum 4.5 contrast ratio (at 4.37),\r\n // but it's worse with a dark foreground.\r\n 'contrastStrongLightColors': '500 600 700 800 900 A700'\r\n }\r\n});\r\n\r\n})();\r\n(function(){\r\n\"use strict\";\r\n\r\n(function(angular) {\r\n 'use strict';\r\n/**\r\n * @ngdoc module\r\n * @name material.core.theming\r\n * @description\r\n * Theming\r\n */\r\ndetectDisabledThemes.$inject = [\"$mdThemingProvider\"];\r\nThemingDirective.$inject = [\"$mdTheming\", \"$interpolate\", \"$parse\", \"$mdUtil\", \"$q\", \"$log\"];\r\nThemableDirective.$inject = [\"$mdTheming\"];\r\nThemingProvider.$inject = [\"$mdColorPalette\", \"$$mdMetaProvider\"];\r\ngenerateAllThemes.$inject = [\"$injector\", \"$mdTheming\"];\r\nangular.module('material.core.theming', ['material.core.theming.palette', 'material.core.meta'])\r\n .directive('mdTheme', ThemingDirective)\r\n .directive('mdThemable', ThemableDirective)\r\n .directive('mdThemesDisabled', disableThemesDirective)\r\n .provider('$mdTheming', ThemingProvider)\r\n .config(detectDisabledThemes)\r\n .run(generateAllThemes);\r\n\r\n/**\r\n * Detect if the HTML or the BODY tags has a [md-themes-disabled] attribute\r\n * If yes, then immediately disable all theme stylesheet generation and DOM injection\r\n */\r\n/**\r\n * @ngInject\r\n */\r\nfunction detectDisabledThemes($mdThemingProvider) {\r\n var isDisabled = !!document.querySelector('[md-themes-disabled]');\r\n $mdThemingProvider.disableTheming(isDisabled);\r\n}\r\n\r\n/**\r\n * @ngdoc service\r\n * @name $mdThemingProvider\r\n * @module material.core.theming\r\n *\r\n * @description Provider to configure the `$mdTheming` service.\r\n *\r\n * ### Default Theme\r\n * The `$mdThemingProvider` uses by default the following theme configuration:\r\n *\r\n * - Primary Palette: `Blue`\r\n * - Accent Palette: `Pink`\r\n * - Warn Palette: `Deep-Orange`\r\n * - Background Palette: `Grey`\r\n *\r\n * If you don't want to use the `md-theme` directive on the elements itself, you may want to overwrite\r\n * the default theme.
\r\n * This can be done by using the following markup.\r\n *\r\n *\r\n * myAppModule.config(function($mdThemingProvider) {\r\n * $mdThemingProvider\r\n * .theme('default')\r\n * .primaryPalette('blue')\r\n * .accentPalette('teal')\r\n * .warnPalette('red')\r\n * .backgroundPalette('grey');\r\n * });\r\n * \r\n *\r\n\r\n * ### Dynamic Themes\r\n *\r\n * By default, if you change a theme at runtime, the `$mdTheming` service will not detect those changes.
\r\n * If you have an application, which changes its theme on runtime, you have to enable theme watching.\r\n *\r\n *\r\n * myAppModule.config(function($mdThemingProvider) {\r\n * // Enable theme watching.\r\n * $mdThemingProvider.alwaysWatchTheme(true);\r\n * });\r\n * \r\n *\r\n * ### Custom Theme Styles\r\n *\r\n * Sometimes you may want to use your own theme styles for some custom components.
\r\n * You are able to register your own styles by using the following markup.\r\n *\r\n *\r\n * myAppModule.config(function($mdThemingProvider) {\r\n * // Register our custom stylesheet into the theming provider.\r\n * $mdThemingProvider.registerStyles(STYLESHEET);\r\n * });\r\n * \r\n *\r\n * The `registerStyles` method only accepts strings as value, so you're actually not able to load an external\r\n * stylesheet file into the `$mdThemingProvider`.\r\n *\r\n * If it's necessary to load an external stylesheet, we suggest using a bundler, which supports including raw content,\r\n * like [raw-loader](https://github.com/webpack/raw-loader) for `webpack`.\r\n *\r\n * \r\n * myAppModule.config(function($mdThemingProvider) {\r\n * // Register your custom stylesheet into the theming provider.\r\n * $mdThemingProvider.registerStyles(require('../styles/my-component.theme.css'));\r\n * });\r\n * \r\n *\r\n * ### Browser color\r\n *\r\n * Enables browser header coloring\r\n * for more info please visit:\r\n * https://developers.google.com/web/fundamentals/design-and-ui/browser-customization/theme-color\r\n *\r\n * Options parameter:
\r\n * `theme` - A defined theme via `$mdThemeProvider` to use the palettes from. Default is `default` theme.
\r\n * `palette` - Can be any one of the basic material design palettes, extended defined palettes and 'primary',\r\n * 'accent', 'background' and 'warn'. Default is `primary`.
\r\n * `hue` - The hue from the selected palette. Default is `800`
\r\n *\r\n *\r\n * myAppModule.config(function($mdThemingProvider) {\r\n * // Enable browser color\r\n * $mdThemingProvider.enableBrowserColor({\r\n * theme: 'myTheme', // Default is 'default'\r\n * palette: 'accent', // Default is 'primary', any basic material palette and extended palettes are available\r\n * hue: '200' // Default is '800'\r\n * });\r\n * });\r\n * \r\n */\r\n\r\n/**\r\n * Some Example Valid Theming Expressions\r\n * =======================================\r\n *\r\n * Intention group expansion: (valid for primary, accent, warn, background)\r\n *\r\n * {{primary-100}} - grab shade 100 from the primary palette\r\n * {{primary-100-0.7}} - grab shade 100, apply opacity of 0.7\r\n * {{primary-100-contrast}} - grab shade 100's contrast color\r\n * {{primary-hue-1}} - grab the shade assigned to hue-1 from the primary palette\r\n * {{primary-hue-1-0.7}} - apply 0.7 opacity to primary-hue-1\r\n * {{primary-color}} - Generates .md-hue-1, .md-hue-2, .md-hue-3 with configured shades set for each hue\r\n * {{primary-color-0.7}} - Apply 0.7 opacity to each of the above rules\r\n * {{primary-contrast}} - Generates .md-hue-1, .md-hue-2, .md-hue-3 with configured contrast (ie. text) color shades set for each hue\r\n * {{primary-contrast-0.7}} - Apply 0.7 opacity to each of the above rules\r\n * {{primary-contrast-divider}} - Apply divider opacity to contrast color\r\n *\r\n * Foreground expansion: Applies rgba to black/white foreground text\r\n *\r\n * Old Foreground Expressions:\r\n * {{foreground-1}} - used for primary text\r\n * {{foreground-2}} - used for secondary text/divider\r\n * {{foreground-3}} - used for disabled text\r\n * {{foreground-4}} - used for dividers\r\n *\r\n * New Foreground Expressions:\r\n *\r\n * Apply primary text color for contrasting with default background\r\n * {{background-default-contrast}} - default opacity\r\n * {{background-default-contrast-secondary}} - opacity for secondary text\r\n * {{background-default-contrast-hint}} - opacity for hints and placeholders\r\n * {{background-default-contrast-disabled}} - opacity for disabled text\r\n * {{background-default-contrast-divider}} - opacity for dividers\r\n *\r\n * Apply contrast color for specific shades\r\n * {{background-50-contrast-icon}} - Apply contrast color for icon on background's shade 50 hue\r\n */\r\n\r\n// In memory generated CSS rules; registered by theme.name\r\nvar GENERATED = { };\r\n\r\n// In memory storage of defined themes and color palettes (both loaded by CSS, and user specified)\r\nvar PALETTES;\r\n\r\n// Text colors are automatically generated based on background color when not specified\r\n// Custom palettes can provide override colors\r\n// @see https://material.io/archive/guidelines/style/color.html#color-usability\r\nvar DARK_FOREGROUND = {\r\n name: 'dark',\r\n};\r\nvar LIGHT_FOREGROUND = {\r\n name: 'light',\r\n};\r\n\r\nvar DARK_SHADOW = '1px 1px 0px rgba(0,0,0,0.4), -1px -1px 0px rgba(0,0,0,0.4)';\r\nvar LIGHT_SHADOW = '';\r\n\r\nvar DARK_CONTRAST_COLOR = colorToRgbaArray('rgba(0,0,0,0.87)');\r\nvar LIGHT_CONTRAST_COLOR = colorToRgbaArray('rgba(255,255,255,0.87)');\r\nvar STRONG_LIGHT_CONTRAST_COLOR = colorToRgbaArray('rgb(255,255,255)');\r\n\r\nvar THEME_COLOR_TYPES = ['primary', 'accent', 'warn', 'background'];\r\nvar DEFAULT_COLOR_TYPE = 'primary';\r\n\r\n// A color in a theme will use these hues by default, if not specified by user.\r\nvar LIGHT_DEFAULT_HUES = {\r\n 'accent': {\r\n 'default': 'A200',\r\n 'hue-1': 'A100',\r\n 'hue-2': 'A400',\r\n 'hue-3': 'A700'\r\n },\r\n 'background': {\r\n 'default': '50',\r\n 'hue-1': 'A100',\r\n 'hue-2': '100',\r\n 'hue-3': '300'\r\n }\r\n};\r\n\r\nvar DARK_DEFAULT_HUES = {\r\n 'background': {\r\n 'default': 'A400',\r\n 'hue-1': '800',\r\n 'hue-2': '900',\r\n 'hue-3': 'A200'\r\n }\r\n};\r\n\r\n// Icon opacity values (active/inactive) from\r\n// https://material.io/archive/guidelines/style/color.html#color-usability\r\nvar DARK_CONTRAST_OPACITY = {\r\n 'icon': 0.54,\r\n 'secondary': 0.54,\r\n 'disabled': 0.38,\r\n 'hint': 0.38,\r\n 'divider': 0.12,\r\n};\r\n\r\nvar LIGHT_CONTRAST_OPACITY = {\r\n 'icon': 0.87,\r\n 'secondary': 0.7,\r\n 'disabled': 0.5,\r\n 'hint': 0.5,\r\n 'divider': 0.12\r\n};\r\n\r\n// Icon opacity values (active/inactive) from\r\n// https://material.io/archive/guidelines/style/color.html#color-usability\r\nvar STRONG_LIGHT_CONTRAST_OPACITY = {\r\n 'icon': 1.0,\r\n 'secondary': 0.7,\r\n 'disabled': 0.5,\r\n 'hint': 0.5,\r\n 'divider': 0.12\r\n};\r\n\r\nTHEME_COLOR_TYPES.forEach(function(colorType) {\r\n // Color types with unspecified default hues will use these default hue values\r\n var defaultDefaultHues = {\r\n 'default': '500',\r\n 'hue-1': '300',\r\n 'hue-2': '800',\r\n 'hue-3': 'A100'\r\n };\r\n if (!LIGHT_DEFAULT_HUES[colorType]) LIGHT_DEFAULT_HUES[colorType] = defaultDefaultHues;\r\n if (!DARK_DEFAULT_HUES[colorType]) DARK_DEFAULT_HUES[colorType] = defaultDefaultHues;\r\n});\r\n\r\nvar VALID_HUE_VALUES = [\r\n '50', '100', '200', '300', '400', '500', '600',\r\n '700', '800', '900', 'A100', 'A200', 'A400', 'A700'\r\n];\r\n\r\nvar themeConfig = {\r\n disableTheming : false, // Generate our themes at run time; also disable stylesheet DOM injection\r\n generateOnDemand : false, // Whether or not themes are to be generated on-demand (vs. eagerly).\r\n registeredStyles : [], // Custom styles registered to be used in the theming of custom components.\r\n nonce : null // Nonce to be added as an attribute to the generated themes style tags.\r\n};\r\n\r\n/**\r\n *\r\n */\r\nfunction ThemingProvider($mdColorPalette, $$mdMetaProvider) {\r\n ThemingService.$inject = [\"$rootScope\", \"$mdUtil\", \"$q\", \"$log\"];\r\n PALETTES = { };\r\n var THEMES = { };\r\n\r\n var themingProvider;\r\n\r\n var alwaysWatchTheme = false;\r\n var defaultTheme = 'default';\r\n\r\n // Load JS Defined Palettes\r\n angular.extend(PALETTES, $mdColorPalette);\r\n\r\n // Default theme defined in core.js\r\n\r\n /**\r\n * Adds `theme-color` and `msapplication-navbutton-color` meta tags with the color parameter\r\n * @param {string} color Hex value of the wanted browser color\r\n * @returns {function} Remove function of the meta tags\r\n */\r\n var setBrowserColor = function (color) {\r\n // Chrome, Firefox OS and Opera\r\n var removeChrome = $$mdMetaProvider.setMeta('theme-color', color);\r\n // Windows Phone\r\n var removeWindows = $$mdMetaProvider.setMeta('msapplication-navbutton-color', color);\r\n\r\n return function () {\r\n removeChrome();\r\n removeWindows();\r\n };\r\n };\r\n\r\n /**\r\n * @ngdoc method\r\n * @name $mdThemingProvider#enableBrowserColor\r\n * @description\r\n * Enables browser header coloring. For more info please visit\r\n * \r\n * Web Fundamentals.\r\n * @param {object=} options Options for the browser color, which include:
\r\n * - `theme` - `{string}`: A defined theme via `$mdThemeProvider` to use the palettes from. Default is `default` theme.
\r\n * - `palette` - `{string}`: Can be any one of the basic material design palettes, extended defined palettes, or `primary`,\r\n * `accent`, `background`, and `warn`. Default is `primary`.
\r\n * - `hue` - `{string}`: The hue from the selected palette. Default is `800`.
\r\n * @returns {function} Function that removes the browser coloring when called.\r\n */\r\n var enableBrowserColor = function (options) {\r\n options = angular.isObject(options) ? options : {};\r\n\r\n var theme = options.theme || 'default';\r\n var hue = options.hue || '800';\r\n\r\n var palette = PALETTES[options.palette] ||\r\n PALETTES[THEMES[theme].colors[options.palette || 'primary'].name];\r\n\r\n var color = angular.isObject(palette[hue]) ? palette[hue].hex : palette[hue];\r\n if (color.substr(0, 1) !== '#') color = '#' + color;\r\n\r\n return setBrowserColor(color);\r\n };\r\n\r\n return themingProvider = {\r\n definePalette: definePalette,\r\n extendPalette: extendPalette,\r\n theme: registerTheme,\r\n\r\n /**\r\n * return a read-only clone of the current theme configuration\r\n */\r\n configuration : function() {\r\n return angular.extend({ }, themeConfig, {\r\n defaultTheme : defaultTheme,\r\n alwaysWatchTheme : alwaysWatchTheme,\r\n registeredStyles : [].concat(themeConfig.registeredStyles)\r\n });\r\n },\r\n\r\n /**\r\n * @ngdoc method\r\n * @name $mdThemingProvider#disableTheming\r\n * @description\r\n * An easier way to disable theming without having to use `.constant(\"$MD_THEME_CSS\",\"\");`.\r\n * This disables all dynamic theme style sheet generations and injections.\r\n * @param {boolean=} isDisabled Disable all dynamic theme style sheet generations and injections\r\n * if `true` or `undefined`.\r\n */\r\n disableTheming: function(isDisabled) {\r\n themeConfig.disableTheming = angular.isUndefined(isDisabled) || !!isDisabled;\r\n },\r\n\r\n /**\r\n * @ngdoc method\r\n * @name $mdThemingProvider#registerStyles\r\n * @param {string} styles The styles to be appended to AngularJS Material's built in theme CSS.\r\n */\r\n registerStyles: function(styles) {\r\n themeConfig.registeredStyles.push(styles);\r\n },\r\n\r\n /**\r\n * @ngdoc method\r\n * @name $mdThemingProvider#setNonce\r\n * @param {string} nonceValue The nonce to be added as an attribute to the theme style tags.\r\n * Setting a value allows the use of CSP policy without using the `'unsafe-inline'` directive.\r\n * The string must already be base64 encoded. You can use `btoa(string)` to do this encoding.\r\n * In your CSP's `style-src`, you would then add an entry for `'nonce-nonceValue'`.\r\n */\r\n setNonce: function(nonceValue) {\r\n themeConfig.nonce = nonceValue;\r\n },\r\n\r\n generateThemesOnDemand: function(onDemand) {\r\n themeConfig.generateOnDemand = onDemand;\r\n },\r\n\r\n /**\r\n * @ngdoc method\r\n * @name $mdThemingProvider#setDefaultTheme\r\n * @param {string} theme Default theme name to be applied to elements.\r\n * Default value is `default`.\r\n */\r\n setDefaultTheme: function(theme) {\r\n defaultTheme = theme;\r\n },\r\n\r\n /**\r\n * @ngdoc method\r\n * @name $mdThemingProvider#alwaysWatchTheme\r\n * @param {boolean} alwaysWatch Whether or not to always watch themes for changes and re-apply\r\n * classes when they change. Default is `false`. Enabling can reduce performance.\r\n */\r\n alwaysWatchTheme: function(alwaysWatch) {\r\n alwaysWatchTheme = alwaysWatch;\r\n },\r\n\r\n enableBrowserColor: enableBrowserColor,\r\n\r\n $get: ThemingService,\r\n _LIGHT_DEFAULT_HUES: LIGHT_DEFAULT_HUES,\r\n _DARK_DEFAULT_HUES: DARK_DEFAULT_HUES,\r\n _PALETTES: PALETTES,\r\n _THEMES: THEMES,\r\n _parseRules: parseRules,\r\n _rgba: rgba\r\n };\r\n\r\n /**\r\n * @ngdoc method\r\n * @name $mdThemingProvider#definePalette\r\n * @description\r\n * In the event that you need to define a custom color palette, you can use this function to\r\n * make it available to your theme for use in its intention groups.
\r\n * Note that you must specify all hues in the definition map.\r\n * @param {string} name Name of palette being defined\r\n * @param {object} map Palette definition that includes hue definitions and contrast colors:\r\n * - `'50'` - `{string}`: HEX color\r\n * - `'100'` - `{string}`: HEX color\r\n * - `'200'` - `{string}`: HEX color\r\n * - `'300'` - `{string}`: HEX color\r\n * - `'400'` - `{string}`: HEX color\r\n * - `'500'` - `{string}`: HEX color\r\n * - `'600'` - `{string}`: HEX color\r\n * - `'700'` - `{string}`: HEX color\r\n * - `'800'` - `{string}`: HEX color\r\n * - `'900'` - `{string}`: HEX color\r\n * - `'A100'` - `{string}`: HEX color\r\n * - `'A200'` - `{string}`: HEX color\r\n * - `'A400'` - `{string}`: HEX color\r\n * - `'A700'` - `{string}`: HEX color\r\n * - `'contrastDefaultColor'` - `{string}`: `light` or `dark`\r\n * - `'contrastDarkColors'` - `{string[]}`: Hues which should use dark contrast colors (i.e. raised button text).\r\n * For example: `['50', '100', '200', '300', '400', 'A100']`.\r\n * - `'contrastLightColors'` - `{string[]}`: Hues which should use light contrast colors (i.e. raised button text).\r\n * For example: `['500', '600', '700', '800', '900', 'A200', 'A400', 'A700']`.\r\n */\r\n function definePalette(name, map) {\r\n map = map || {};\r\n PALETTES[name] = checkPaletteValid(name, map);\r\n return themingProvider;\r\n }\r\n\r\n /**\r\n * @ngdoc method\r\n * @name $mdThemingProvider#extendPalette\r\n * @description\r\n * Sometimes it is easier to extend an existing color palette and then change a few properties,\r\n * rather than defining a whole new palette.\r\n * @param {string} name Name of palette being extended\r\n * @param {object} map Palette definition that includes optional hue definitions and contrast colors:\r\n * - `'50'` - `{string}`: HEX color\r\n * - `'100'` - `{string}`: HEX color\r\n * - `'200'` - `{string}`: HEX color\r\n * - `'300'` - `{string}`: HEX color\r\n * - `'400'` - `{string}`: HEX color\r\n * - `'500'` - `{string}`: HEX color\r\n * - `'600'` - `{string}`: HEX color\r\n * - `'700'` - `{string}`: HEX color\r\n * - `'800'` - `{string}`: HEX color\r\n * - `'900'` - `{string}`: HEX color\r\n * - `'A100'` - `{string}`: HEX color\r\n * - `'A200'` - `{string}`: HEX color\r\n * - `'A400'` - `{string}`: HEX color\r\n * - `'A700'` - `{string}`: HEX color\r\n * - `'contrastDefaultColor'` - `{string}`: `light` or `dark`\r\n * - `'contrastDarkColors'` - `{string[]}`: Hues which should use dark contrast colors (i.e. raised button text).\r\n * For example: `['50', '100', '200', '300', '400', 'A100']`.\r\n * - `'contrastLightColors'` - `{string[]}`: Hues which should use light contrast colors (i.e. raised button text).\r\n * For example: `['500', '600', '700', '800', '900', 'A200', 'A400', 'A700']`.\r\n * @returns {object} A new object which is a copy of the given palette, `name`,\r\n * with variables from `map` overwritten.\r\n */\r\n function extendPalette(name, map) {\r\n return checkPaletteValid(name, angular.extend({}, PALETTES[name] || {}, map));\r\n }\r\n\r\n // Make sure that palette has all required hues\r\n function checkPaletteValid(name, map) {\r\n var missingColors = VALID_HUE_VALUES.filter(function(field) {\r\n return !map[field];\r\n });\r\n if (missingColors.length) {\r\n throw new Error(\"Missing colors %1 in palette %2!\"\r\n .replace('%1', missingColors.join(', '))\r\n .replace('%2', name));\r\n }\r\n\r\n return map;\r\n }\r\n\r\n /**\r\n * @ngdoc method\r\n * @name $mdThemingProvider#theme\r\n * @description\r\n * Register a theme (which is a collection of color palettes); i.e. `warn`, `accent`,\r\n * `background`, and `primary`.
\r\n * Optionally inherit from an existing theme.\r\n * @param {string} name Name of theme being registered\r\n * @param {string=} inheritFrom Existing theme name to inherit from\r\n */\r\n function registerTheme(name, inheritFrom) {\r\n if (THEMES[name]) return THEMES[name];\r\n\r\n inheritFrom = inheritFrom || 'default';\r\n\r\n var parentTheme = typeof inheritFrom === 'string' ? THEMES[inheritFrom] : inheritFrom;\r\n var theme = new Theme(name);\r\n\r\n if (parentTheme) {\r\n angular.forEach(parentTheme.colors, function(color, colorType) {\r\n theme.colors[colorType] = {\r\n name: color.name,\r\n // Make sure a COPY of the hues is given to the child color,\r\n // not the same reference.\r\n hues: angular.extend({}, color.hues)\r\n };\r\n });\r\n }\r\n THEMES[name] = theme;\r\n\r\n return theme;\r\n }\r\n\r\n function Theme(name) {\r\n var self = this;\r\n self.name = name;\r\n self.colors = {};\r\n\r\n self.dark = setDark;\r\n setDark(false);\r\n\r\n function setDark(isDark) {\r\n isDark = arguments.length === 0 ? true : !!isDark;\r\n\r\n // If no change, abort\r\n if (isDark === self.isDark) return;\r\n\r\n self.isDark = isDark;\r\n\r\n self.foregroundPalette = self.isDark ? LIGHT_FOREGROUND : DARK_FOREGROUND;\r\n self.foregroundShadow = self.isDark ? DARK_SHADOW : LIGHT_SHADOW;\r\n\r\n // Light and dark themes have different default hues.\r\n // Go through each existing color type for this theme, and for every\r\n // hue value that is still the default hue value from the previous light/dark setting,\r\n // set it to the default hue value from the new light/dark setting.\r\n var newDefaultHues = self.isDark ? DARK_DEFAULT_HUES : LIGHT_DEFAULT_HUES;\r\n var oldDefaultHues = self.isDark ? LIGHT_DEFAULT_HUES : DARK_DEFAULT_HUES;\r\n angular.forEach(newDefaultHues, function(newDefaults, colorType) {\r\n var color = self.colors[colorType];\r\n var oldDefaults = oldDefaultHues[colorType];\r\n if (color) {\r\n for (var hueName in color.hues) {\r\n if (color.hues[hueName] === oldDefaults[hueName]) {\r\n color.hues[hueName] = newDefaults[hueName];\r\n }\r\n }\r\n }\r\n });\r\n\r\n return self;\r\n }\r\n\r\n THEME_COLOR_TYPES.forEach(function(colorType) {\r\n var defaultHues = (self.isDark ? DARK_DEFAULT_HUES : LIGHT_DEFAULT_HUES)[colorType];\r\n self[colorType + 'Palette'] = function setPaletteType(paletteName, hues) {\r\n var color = self.colors[colorType] = {\r\n name: paletteName,\r\n hues: angular.extend({}, defaultHues, hues)\r\n };\r\n\r\n Object.keys(color.hues).forEach(function(name) {\r\n if (!defaultHues[name]) {\r\n throw new Error(\"Invalid hue name '%1' in theme %2's %3 color %4. Available hue names: %4\"\r\n .replace('%1', name)\r\n .replace('%2', self.name)\r\n .replace('%3', paletteName)\r\n .replace('%4', Object.keys(defaultHues).join(', '))\r\n );\r\n }\r\n });\r\n Object.keys(color.hues).map(function(key) {\r\n return color.hues[key];\r\n }).forEach(function(hueValue) {\r\n if (VALID_HUE_VALUES.indexOf(hueValue) === -1) {\r\n throw new Error(\"Invalid hue value '%1' in theme %2's %3 color %4. Available hue values: %5\"\r\n .replace('%1', hueValue)\r\n .replace('%2', self.name)\r\n .replace('%3', colorType)\r\n .replace('%4', paletteName)\r\n .replace('%5', VALID_HUE_VALUES.join(', '))\r\n );\r\n }\r\n });\r\n return self;\r\n };\r\n });\r\n }\r\n\r\n /**\r\n * @ngdoc service\r\n * @name $mdTheming\r\n * @module material.core.theming\r\n * @description\r\n * Service that makes an element apply theming related classes to itself.\r\n *\r\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.\r\n *\r\n *\r\n * // Example component directive that we want to apply theming classes to.\r\n * app.directive('myFancyDirective', function($mdTheming) {\r\n * return {\r\n * restrict: 'AE',\r\n * link: function(scope, element, attrs) {\r\n * // Initialize the service using our directive's element\r\n * $mdTheming(element);\r\n *\r\n * $mdTheming.defineTheme('myTheme', {\r\n * primary: 'blue',\r\n * primaryHues: {\r\n * default: '500',\r\n * hue-1: '300',\r\n * hue-2: '900',\r\n * hue-3: 'A100'\r\n * },\r\n * accent: 'pink',\r\n * accentHues: {\r\n * default: '600',\r\n * hue-1: '300',\r\n * hue-2: '200',\r\n * hue-3: 'A500'\r\n * },\r\n * warn: 'red',\r\n * // It's not necessary to specify all hues in the object.\r\n * warnHues: {\r\n * default: '200',\r\n * hue-3: 'A100'\r\n * },\r\n * // It's not necessary to specify custom hues at all.\r\n * background: 'grey',\r\n * dark: true\r\n * });\r\n * // Your directive's custom code here.\r\n * }\r\n * };\r\n * });\r\n * \r\n * @param {element=} element Element that will have theming classes applied to it.\r\n */\r\n\r\n /**\r\n * @ngdoc property\r\n * @name $mdTheming#THEMES\r\n * @description\r\n * Property to get all the themes defined\r\n * @returns {object} All the themes defined with their properties.\r\n */\r\n\r\n /**\r\n * @ngdoc property\r\n * @name $mdTheming#PALETTES\r\n * @description\r\n * Property to get all the palettes defined\r\n * @returns {object} All the palettes defined with their colors.\r\n */\r\n\r\n /**\r\n * @ngdoc method\r\n * @name $mdTheming#registered\r\n * @description\r\n * Determine is specified theme name is a valid, registered theme\r\n * @param {string} themeName the theme to check if registered\r\n * @returns {boolean} whether the theme is registered or not\r\n */\r\n\r\n /**\r\n * @ngdoc method\r\n * @name $mdTheming#defaultTheme\r\n * @description\r\n * Returns the default theme\r\n * @returns {string} The default theme\r\n */\r\n\r\n /**\r\n * @ngdoc method\r\n * @name $mdTheming#generateTheme\r\n * @description\r\n * Lazy generate themes - by default, every theme is generated when defined.\r\n * You can disable this in the configuration section using the\r\n * `$mdThemingProvider.generateThemesOnDemand(true);`\r\n *\r\n * The theme name that is passed in must match the name of the theme that was defined as part of\r\n * the configuration block.\r\n *\r\n * @param {string} name theme name to generate\r\n */\r\n\r\n /**\r\n * @ngdoc method\r\n * @name $mdTheming#setBrowserColor\r\n * @description\r\n * Enables browser header coloring. For more info please visit\r\n * \r\n * Web Fundamentals.\r\n * @param {object=} options Options for the browser color, which include:
\r\n * - `theme` - `{string}`: A defined theme via `$mdThemeProvider` to use the palettes from.\r\n * Default is `default` theme.
\r\n * - `palette` - `{string}`: Can be any one of the basic material design palettes, extended\r\n * defined palettes, or `primary`, `accent`, `background`, and `warn`. Default is `primary`.\r\n *
\r\n * - `hue` - `{string}`: The hue from the selected palette. Default is `800`.
\r\n * @returns {function} Function that removes the browser coloring when called.\r\n */\r\n\r\n /**\r\n * @ngdoc method\r\n * @name $mdTheming#defineTheme\r\n * @description\r\n * Dynamically define a theme by using an options object that contains palette names.\r\n *\r\n * @param {string} name Theme name to define\r\n * @param {object} options Theme definition options\r\n *\r\n * Options are:
\r\n * - `primary` - `{string}`: The name of the primary palette to use in the theme.
\r\n * - `primaryHues` - `{object=}`: Override hues for primary palette.
\r\n * - `accent` - `{string}`: The name of the accent palette to use in the theme.
\r\n * - `accentHues` - `{object=}`: Override hues for accent palette.
\r\n * - `warn` - `{string}`: The name of the warn palette to use in the theme.
\r\n * - `warnHues` - `{object=}`: Override hues for warn palette.
\r\n * - `background` - `{string}`: The name of the background palette to use in the theme.
\r\n * - `backgroundHues` - `{object=}`: Override hues for background palette.
\r\n * - `dark` - `{boolean}`: Indicates if it's a dark theme.
\r\n * @returns {Promise} A resolved promise with the new theme name.\r\n */\r\n\r\n /* @ngInject */\r\n function ThemingService($rootScope, $mdUtil, $q, $log) {\r\n // Allow us to be invoked via a linking function signature.\r\n var applyTheme = function (scope, el) {\r\n if (el === undefined) { el = scope; scope = undefined; }\r\n if (scope === undefined) { scope = $rootScope; }\r\n applyTheme.inherit(el, el);\r\n };\r\n\r\n Object.defineProperty(applyTheme, 'THEMES', {\r\n get: function () {\r\n return angular.extend({}, THEMES);\r\n }\r\n });\r\n Object.defineProperty(applyTheme, 'PALETTES', {\r\n get: function () {\r\n return angular.extend({}, PALETTES);\r\n }\r\n });\r\n Object.defineProperty(applyTheme, 'ALWAYS_WATCH', {\r\n get: function () {\r\n return alwaysWatchTheme;\r\n }\r\n });\r\n applyTheme.inherit = inheritTheme;\r\n applyTheme.registered = registered;\r\n applyTheme.defaultTheme = function() { return defaultTheme; };\r\n applyTheme.generateTheme = function(name) { generateTheme(THEMES[name], name, themeConfig.nonce); };\r\n applyTheme.defineTheme = function(name, options) {\r\n options = options || {};\r\n\r\n var theme = registerTheme(name);\r\n\r\n if (options.primary) {\r\n theme.primaryPalette(options.primary, options.primaryHues);\r\n }\r\n if (options.accent) {\r\n theme.accentPalette(options.accent, options.accentHues);\r\n }\r\n if (options.warn) {\r\n theme.warnPalette(options.warn, options.warnHues);\r\n }\r\n if (options.background) {\r\n theme.backgroundPalette(options.background, options.backgroundHues);\r\n }\r\n if (options.dark){\r\n theme.dark();\r\n }\r\n\r\n this.generateTheme(name);\r\n\r\n return $q.resolve(name);\r\n };\r\n applyTheme.setBrowserColor = enableBrowserColor;\r\n\r\n return applyTheme;\r\n\r\n /**\r\n * Determine is specified theme name is a valid, registered theme\r\n */\r\n function registered(themeName) {\r\n if (themeName === undefined || themeName === '') return true;\r\n return applyTheme.THEMES[themeName] !== undefined;\r\n }\r\n\r\n /**\r\n * Get theme name for the element, then update with Theme CSS class\r\n */\r\n function inheritTheme (el, parent) {\r\n var ctrl = parent.controller('mdTheme') || el.data('$mdThemeController');\r\n var scope = el.scope();\r\n\r\n updateThemeClass(lookupThemeName());\r\n\r\n if (ctrl) {\r\n var watchTheme = alwaysWatchTheme ||\r\n ctrl.$shouldWatch ||\r\n $mdUtil.parseAttributeBoolean(el.attr('md-theme-watch'));\r\n\r\n if (watchTheme || ctrl.isAsyncTheme) {\r\n var clearNameWatcher = function () {\r\n if (unwatch) {\r\n unwatch();\r\n unwatch = undefined;\r\n }\r\n };\r\n\r\n var unwatch = ctrl.registerChanges(function(name) {\r\n updateThemeClass(name);\r\n\r\n if (!watchTheme) {\r\n clearNameWatcher();\r\n }\r\n });\r\n\r\n if (scope) {\r\n scope.$on('$destroy', clearNameWatcher);\r\n } else {\r\n el.on('$destroy', clearNameWatcher);\r\n }\r\n }\r\n }\r\n\r\n /**\r\n * Find the theme name from the parent controller or element data\r\n */\r\n function lookupThemeName() {\r\n // As a few components (dialog) add their controllers later, we should also watch for a controller init.\r\n return ctrl && ctrl.$mdTheme || (defaultTheme === 'default' ? '' : defaultTheme);\r\n }\r\n\r\n /**\r\n * Remove old theme class and apply a new one\r\n * NOTE: if not a valid theme name, then the current name is not changed\r\n */\r\n function updateThemeClass(theme) {\r\n if (!theme) return;\r\n if (!registered(theme)) {\r\n $log.warn('Attempted to use unregistered theme \\'' + theme + '\\'. ' +\r\n 'Register it with $mdThemingProvider.theme().');\r\n }\r\n\r\n var oldTheme = el.data('$mdThemeName');\r\n if (oldTheme) el.removeClass('md-' + oldTheme +'-theme');\r\n el.addClass('md-' + theme + '-theme');\r\n el.data('$mdThemeName', theme);\r\n if (ctrl) {\r\n el.data('$mdThemeController', ctrl);\r\n }\r\n }\r\n }\r\n\r\n }\r\n}\r\n\r\nfunction ThemingDirective($mdTheming, $interpolate, $parse, $mdUtil, $q, $log) {\r\n return {\r\n priority: 101, // has to be more than 100 to be before interpolation (issue on IE)\r\n link: {\r\n pre: function(scope, el, attrs) {\r\n var registeredCallbacks = [];\r\n\r\n var startSymbol = $interpolate.startSymbol();\r\n var endSymbol = $interpolate.endSymbol();\r\n\r\n var theme = attrs.mdTheme.trim();\r\n\r\n var hasInterpolation =\r\n theme.substr(0, startSymbol.length) === startSymbol &&\r\n theme.lastIndexOf(endSymbol) === theme.length - endSymbol.length;\r\n\r\n var oneTimeOperator = '::';\r\n var oneTimeBind = attrs.mdTheme\r\n .split(startSymbol).join('')\r\n .split(endSymbol).join('')\r\n .trim()\r\n .substr(0, oneTimeOperator.length) === oneTimeOperator;\r\n\r\n var getTheme = function () {\r\n var interpolation = $interpolate(attrs.mdTheme)(scope);\r\n return $parse(interpolation)(scope) || interpolation;\r\n };\r\n\r\n var ctrl = {\r\n isAsyncTheme: angular.isFunction(getTheme()) || angular.isFunction(getTheme().then),\r\n registerChanges: function (cb, context) {\r\n if (context) {\r\n cb = angular.bind(context, cb);\r\n }\r\n\r\n registeredCallbacks.push(cb);\r\n\r\n return function () {\r\n var index = registeredCallbacks.indexOf(cb);\r\n\r\n if (index > -1) {\r\n registeredCallbacks.splice(index, 1);\r\n }\r\n };\r\n },\r\n $setTheme: function (theme) {\r\n if (!$mdTheming.registered(theme)) {\r\n $log.warn('attempted to use unregistered theme \\'' + theme + '\\'');\r\n }\r\n\r\n ctrl.$mdTheme = theme;\r\n\r\n // Iterating backwards to support unregistering during iteration\r\n // http://stackoverflow.com/a/9882349/890293\r\n // we don't use `reverse()` of array because it mutates the array and we don't want it\r\n // to get re-indexed\r\n for (var i = registeredCallbacks.length; i--;) {\r\n registeredCallbacks[i](theme);\r\n }\r\n },\r\n $shouldWatch: $mdUtil.parseAttributeBoolean(el.attr('md-theme-watch')) ||\r\n $mdTheming.ALWAYS_WATCH ||\r\n (hasInterpolation && !oneTimeBind)\r\n };\r\n\r\n el.data('$mdThemeController', ctrl);\r\n\r\n var setParsedTheme = function (theme) {\r\n if (typeof theme === 'string') {\r\n return ctrl.$setTheme(theme);\r\n }\r\n\r\n $q.when(angular.isFunction(theme) ? theme() : theme)\r\n .then(function(name) {\r\n ctrl.$setTheme(name);\r\n });\r\n };\r\n\r\n setParsedTheme(getTheme());\r\n\r\n var unwatch = scope.$watch(getTheme, function(theme) {\r\n if (theme) {\r\n setParsedTheme(theme);\r\n\r\n if (!ctrl.$shouldWatch) {\r\n unwatch();\r\n }\r\n }\r\n });\r\n }\r\n }\r\n };\r\n}\r\n\r\n/**\r\n * Special directive that will disable ALL runtime Theme style generation and DOM injection\r\n *\r\n * \r\n * \r\n *\r\n * \r\n * ...\r\n * \r\n *\r\n * Note: Using md-themes-css directive requires the developer to load external\r\n * theme stylesheets; e.g. custom themes from Material-Tools:\r\n *\r\n * `angular-material.themes.css`\r\n *\r\n * Another option is to use the ThemingProvider to configure and disable the attribute\r\n * conversions; this would obviate the use of the `md-themes-css` directive\r\n *\r\n */\r\nfunction disableThemesDirective() {\r\n themeConfig.disableTheming = true;\r\n\r\n // Return a 1x-only, first-match attribute directive\r\n return {\r\n restrict : 'A',\r\n priority : '900'\r\n };\r\n}\r\n\r\nfunction ThemableDirective($mdTheming) {\r\n return $mdTheming;\r\n}\r\n\r\nfunction parseRules(theme, colorType, rules) {\r\n checkValidPalette(theme, colorType);\r\n\r\n rules = rules.replace(/THEME_NAME/g, theme.name);\r\n var themeNameRegex = new RegExp('\\\\.md-' + theme.name + '-theme', 'g');\r\n // Matches '{{ primary-color }}', etc\r\n var hueRegex = new RegExp('([\\'\"])?{{\\\\s*([a-zA-Z]+)-?(color|default)?-?(contrast)?-?((?:\\\\d\\\\.?\\\\d*)|(?:[a-zA-Z]+))?\\\\s*}}([\"\\'])?','g');\r\n var simpleVariableRegex = /'?\"?{{\\s*([a-zA-Z]+)-(A?\\d+|hue-[0-3]|shadow|default)-?(contrast)?-?((?:\\d\\.?\\d*)|(?:[a-zA-Z]+))?\\s*}}'?\"?/g;\r\n var defaultBgHue = theme.colors['background'].hues['default'];\r\n var defaultBgContrastType = PALETTES[theme.colors['background'].name][defaultBgHue].contrastType;\r\n\r\n // find and replace simple variables where we use a specific hue, not an entire palette\r\n // eg. \"{{primary-100}}\"\r\n // \\(' + THEME_COLOR_TYPES.join('\\|') + '\\)'\r\n rules = rules.replace(simpleVariableRegex, function(match, colorType, hue, contrast, opacity) {\r\n var regexColorType = colorType;\r\n if (colorType === 'foreground') {\r\n if (hue === 'shadow') {\r\n return theme.foregroundShadow;\r\n } else if (theme.foregroundPalette[hue]) {\r\n // Use user defined palette number (ie: foreground-2)\r\n return rgba(colorToRgbaArray(theme.foregroundPalette[hue]));\r\n } else if (theme.foregroundPalette['1']){\r\n return rgba(colorToRgbaArray(theme.foregroundPalette['1']));\r\n }\r\n // Default to background-default-contrast-{opacity}\r\n colorType = 'background';\r\n contrast = 'contrast';\r\n if (!opacity && hue) {\r\n // Convert references to legacy hues to opacities (i.e. foreground-4 to *-divider)\r\n switch (hue) {\r\n // hue-1 uses default opacity\r\n case '2':\r\n opacity = 'secondary';\r\n break;\r\n case '3':\r\n opacity = 'disabled';\r\n break;\r\n case '4':\r\n opacity = 'divider';\r\n }\r\n }\r\n hue = 'default';\r\n }\r\n\r\n // `default` is also accepted as a hue-value, because the background palettes are\r\n // using it as a name for the default hue.\r\n if (hue.indexOf('hue') === 0 || hue === 'default') {\r\n hue = theme.colors[colorType].hues[hue];\r\n }\r\n\r\n var colorDetails = (PALETTES[ theme.colors[colorType].name ][hue] || '');\r\n\r\n // If user has specified a foreground color, use those\r\n if (colorType === 'background' && contrast && regexColorType !== 'foreground' &&\r\n colorDetails.contrastType === defaultBgContrastType) {\r\n // Don't process if colorType was changed\r\n switch (opacity) {\r\n case 'secondary':\r\n case 'icon':\r\n if (theme.foregroundPalette['2']) {\r\n return rgba(colorToRgbaArray(theme.foregroundPalette['2']));\r\n }\r\n break;\r\n case 'disabled':\r\n case 'hint':\r\n if (theme.foregroundPalette['3']) {\r\n return rgba(colorToRgbaArray(theme.foregroundPalette['3']));\r\n }\r\n break;\r\n case 'divider':\r\n if (theme.foregroundPalette['4']) {\r\n return rgba(colorToRgbaArray(theme.foregroundPalette['4']));\r\n }\r\n break;\r\n default:\r\n if (theme.foregroundPalette['1']) {\r\n return rgba(colorToRgbaArray(theme.foregroundPalette['1']));\r\n }\r\n break;\r\n }\r\n }\r\n\r\n if (contrast && opacity) {\r\n opacity = colorDetails.opacity[opacity] || opacity;\r\n }\r\n\r\n return rgba(colorDetails[contrast ? 'contrast' : 'value'], opacity);\r\n });\r\n\r\n var generatedRules = [];\r\n\r\n // For each type, generate rules for each hue (ie. default, md-hue-1, md-hue-2, md-hue-3)\r\n angular.forEach(['default', 'hue-1', 'hue-2', 'hue-3'], function(hueName) {\r\n var newRule = rules\r\n .replace(hueRegex, function(match, _, matchedColorType, hueType, contrast, opacity) {\r\n var color = theme.colors[matchedColorType];\r\n var palette = PALETTES[color.name];\r\n var hueValue = color.hues[hueName];\r\n if (contrast && opacity) {\r\n opacity = palette[hueValue].opacity[opacity] || opacity;\r\n }\r\n return rgba(palette[hueValue][hueType === 'color' ? 'value' : 'contrast'], opacity);\r\n });\r\n if (hueName !== 'default') {\r\n newRule = newRule.replace(themeNameRegex, '.md-' + theme.name + '-theme.md-' + hueName);\r\n }\r\n\r\n // Don't apply a selector rule to the default theme, making it easier to override\r\n // styles of the base-component\r\n if (theme.name === 'default') {\r\n var themeRuleRegex = /((?:\\s|>|\\.|\\w|-|:|\\(|\\)|\\[|]|\"|'|=)*)\\.md-default-theme((?:\\s|>|\\.|\\w|-|:|\\(|\\)|\\[|]|\"|'|=)*)/g;\r\n\r\n newRule = newRule.replace(themeRuleRegex, function(match, start, end) {\r\n return match + ', ' + start + end;\r\n });\r\n }\r\n generatedRules.push(newRule);\r\n });\r\n\r\n return generatedRules;\r\n}\r\n\r\nvar rulesByType = {};\r\n\r\n// Generate our themes at run time given the state of THEMES and PALETTES\r\nfunction generateAllThemes($injector, $mdTheming) {\r\n var head = document.head;\r\n var firstChild = head ? head.firstElementChild : null;\r\n var themeCss = !themeConfig.disableTheming && $injector.has('$MD_THEME_CSS') ? $injector.get('$MD_THEME_CSS') : '';\r\n\r\n // Append our custom registered styles to the theme stylesheet.\r\n themeCss += themeConfig.registeredStyles.join('');\r\n\r\n if (!firstChild) return;\r\n if (themeCss.length === 0) return; // no rules, so no point in running this expensive task\r\n\r\n // Expose contrast colors for palettes to ensure that text is always readable\r\n angular.forEach(PALETTES, sanitizePalette);\r\n\r\n // MD_THEME_CSS is a string generated by the build process that includes all the themeable\r\n // components as templates\r\n\r\n // Break the CSS into individual rules\r\n var rules = splitCss(themeCss).map(function(rule) {\r\n return rule.trim();\r\n });\r\n\r\n THEME_COLOR_TYPES.forEach(function(type) {\r\n rulesByType[type] = '';\r\n });\r\n\r\n // Sort the rules based on type, allowing us to do color substitution on a per-type basis\r\n rules.forEach(function(rule) {\r\n // First: test that if the rule has '.md-accent', it goes into the accent set of rules\r\n for (var i = 0, type; type = THEME_COLOR_TYPES[i]; i++) {\r\n if (rule.indexOf('.md-' + type) > -1) {\r\n return rulesByType[type] += rule;\r\n }\r\n }\r\n\r\n // If no eg 'md-accent' class is found, try to just find 'accent' in the rule and guess from\r\n // there\r\n for (i = 0; type = THEME_COLOR_TYPES[i]; i++) {\r\n if (rule.indexOf(type) > -1) {\r\n return rulesByType[type] += rule;\r\n }\r\n }\r\n\r\n // Default to the primary array\r\n return rulesByType[DEFAULT_COLOR_TYPE] += rule;\r\n });\r\n\r\n // If themes are being generated on-demand, quit here. The user will later manually\r\n // call generateTheme to do this on a theme-by-theme basis.\r\n if (themeConfig.generateOnDemand) return;\r\n\r\n angular.forEach($mdTheming.THEMES, function(theme) {\r\n if (!GENERATED[theme.name] && !($mdTheming.defaultTheme() !== 'default' && theme.name === 'default')) {\r\n generateTheme(theme, theme.name, themeConfig.nonce);\r\n }\r\n });\r\n\r\n\r\n // *************************\r\n // Internal functions\r\n // *************************\r\n\r\n /**\r\n * The user specifies a 'default' contrast color as either light or dark, then explicitly lists\r\n * which hues are the opposite contrast (eg. A100 has dark, A200 has light).\r\n * @param {!object} palette to sanitize\r\n */\r\n function sanitizePalette(palette) {\r\n var defaultContrast = palette.contrastDefaultColor;\r\n var lightColors = palette.contrastLightColors || [];\r\n var strongLightColors = palette.contrastStrongLightColors || [];\r\n var darkColors = palette.contrastDarkColors || [];\r\n\r\n // These colors are provided as space-separated lists\r\n if (typeof lightColors === 'string') lightColors = lightColors.split(' ');\r\n if (typeof strongLightColors === 'string') strongLightColors = strongLightColors.split(' ');\r\n if (typeof darkColors === 'string') darkColors = darkColors.split(' ');\r\n\r\n // Cleanup after ourselves\r\n delete palette.contrastDefaultColor;\r\n delete palette.contrastLightColors;\r\n delete palette.contrastStrongLightColors;\r\n delete palette.contrastDarkColors;\r\n\r\n /**\r\n * @param {string} hueName\r\n * @return {'dark'|'light'|'strongLight'}\r\n */\r\n function getContrastType(hueName) {\r\n if (defaultContrast === 'light' ? darkColors.indexOf(hueName) !== -1 :\r\n (lightColors.indexOf(hueName) === -1 && strongLightColors.indexOf(hueName) === -1)) {\r\n return 'dark';\r\n }\r\n if (strongLightColors.indexOf(hueName) !== -1) {\r\n return 'strongLight';\r\n }\r\n return 'light';\r\n }\r\n\r\n /**\r\n * @param {'dark'|'light'|'strongLight'} contrastType\r\n * @return {[number, number, number]} [red, green, blue] array\r\n */\r\n function getContrastColor(contrastType) {\r\n switch (contrastType) {\r\n default:\r\n case 'strongLight':\r\n return STRONG_LIGHT_CONTRAST_COLOR;\r\n case 'light':\r\n return LIGHT_CONTRAST_COLOR;\r\n case 'dark':\r\n return DARK_CONTRAST_COLOR;\r\n }\r\n }\r\n\r\n /**\r\n * @param {'dark'|'light'|'strongLight'} contrastType\r\n * @return {{secondary: number, divider: number, hint: number, icon: number, disabled: number}}\r\n */\r\n function getOpacityValues(contrastType) {\r\n switch (contrastType) {\r\n default:\r\n case 'strongLight':\r\n return STRONG_LIGHT_CONTRAST_OPACITY;\r\n case 'light':\r\n return LIGHT_CONTRAST_OPACITY;\r\n case 'dark':\r\n return DARK_CONTRAST_OPACITY;\r\n }\r\n }\r\n // Change { 'A100': '#fffeee' } to { 'A100': { value: '#fffeee', contrast:DARK_CONTRAST_COLOR }\r\n angular.forEach(palette, function(hueValue, hueName) {\r\n if (angular.isObject(hueValue)) return; // Already converted\r\n // Map everything to rgb colors\r\n var rgbValue = colorToRgbaArray(hueValue);\r\n if (!rgbValue) {\r\n throw new Error(\"Color %1, in palette %2's hue %3, is invalid. Hex or rgb(a) color expected.\"\r\n .replace('%1', hueValue)\r\n .replace('%2', palette.name)\r\n .replace('%3', hueName));\r\n }\r\n\r\n var contrastType = getContrastType(hueName);\r\n palette[hueName] = {\r\n hex: palette[hueName],\r\n value: rgbValue,\r\n contrastType: contrastType,\r\n contrast: getContrastColor(contrastType),\r\n opacity: getOpacityValues(contrastType)\r\n };\r\n });\r\n }\r\n\r\n /**\r\n * @param {string} themeCss\r\n * @returns {[]} a string representing a CSS file that is split, producing an array with a rule\r\n * at each index.\r\n */\r\n function splitCss(themeCss) {\r\n var result = [];\r\n var currentRule = '';\r\n var openedCurlyBrackets = 0;\r\n var closedCurlyBrackets = 0;\r\n\r\n for (var i = 0; i < themeCss.length; i++) {\r\n var character = themeCss.charAt(i);\r\n\r\n // Check for content in quotes\r\n if (character === '\\'' || character === '\"') {\r\n // Append text in quotes to current rule\r\n var textInQuotes = themeCss.substring(i, themeCss.indexOf(character, i + 1));\r\n currentRule += textInQuotes;\r\n\r\n // Jump to the closing quote char\r\n i += textInQuotes.length;\r\n } else {\r\n currentRule += character;\r\n\r\n if (character === '}') {\r\n closedCurlyBrackets++;\r\n if (closedCurlyBrackets === openedCurlyBrackets) {\r\n closedCurlyBrackets = 0;\r\n openedCurlyBrackets = 0;\r\n result.push(currentRule);\r\n currentRule = '';\r\n }\r\n } else if (character === '{') {\r\n openedCurlyBrackets++;\r\n }\r\n }\r\n }\r\n // Add comments added after last valid rule.\r\n if (currentRule !== '') {\r\n result.push(currentRule);\r\n }\r\n\r\n return result;\r\n }\r\n}\r\n\r\nfunction generateTheme(theme, name, nonce) {\r\n var head = document.head;\r\n var firstChild = head ? head.firstElementChild : null;\r\n\r\n if (!GENERATED[name]) {\r\n // For each theme, use the color palettes specified for\r\n // `primary`, `warn` and `accent` to generate CSS rules.\r\n THEME_COLOR_TYPES.forEach(function(colorType) {\r\n var styleStrings = parseRules(theme, colorType, rulesByType[colorType]);\r\n while (styleStrings.length) {\r\n var styleContent = styleStrings.shift();\r\n if (styleContent) {\r\n var style = document.createElement('style');\r\n style.setAttribute('md-theme-style', '');\r\n if (nonce) {\r\n style.setAttribute('nonce', nonce);\r\n }\r\n style.appendChild(document.createTextNode(styleContent));\r\n head.insertBefore(style, firstChild);\r\n }\r\n }\r\n });\r\n\r\n GENERATED[theme.name] = true;\r\n }\r\n\r\n}\r\n\r\n\r\nfunction checkValidPalette(theme, colorType) {\r\n // If theme attempts to use a palette that doesnt exist, throw error\r\n if (!PALETTES[ (theme.colors[colorType] || {}).name ]) {\r\n throw new Error(\r\n \"You supplied an invalid color palette for theme %1's %2 palette. Available palettes: %3\"\r\n .replace('%1', theme.name)\r\n .replace('%2', colorType)\r\n .replace('%3', Object.keys(PALETTES).join(', '))\r\n );\r\n }\r\n}\r\n\r\n/**\r\n * @param {string} clr rbg or rgba color\r\n * @return {number[]|undefined} [red, green, blue] array if it can be computed\r\n */\r\nfunction colorToRgbaArray(clr) {\r\n if (angular.isArray(clr) && clr.length === 3) return clr;\r\n if (/^rgb/.test(clr)) {\r\n return clr.replace(/(^\\s*rgba?\\(|\\)\\s*$)/g, '').split(',').map(function(value, i) {\r\n return i === 3 ? parseFloat(value) : parseInt(value, 10);\r\n });\r\n }\r\n if (clr.charAt(0) === '#') clr = clr.substring(1);\r\n if (!/^([a-fA-F0-9]{3}){1,2}$/g.test(clr)) return;\r\n\r\n var dig = clr.length / 3;\r\n var red = clr.substr(0, dig);\r\n var grn = clr.substr(dig, dig);\r\n var blu = clr.substr(dig * 2);\r\n if (dig === 1) {\r\n red += red;\r\n grn += grn;\r\n blu += blu;\r\n }\r\n return [parseInt(red, 16), parseInt(grn, 16), parseInt(blu, 16)];\r\n}\r\n\r\nfunction rgba(rgbArray, opacity) {\r\n if (!rgbArray) return \"rgb('0,0,0')\";\r\n\r\n if (rgbArray.length === 4) {\r\n rgbArray = angular.copy(rgbArray);\r\n opacity ? rgbArray.pop() : opacity = rgbArray.pop();\r\n }\r\n return opacity && (typeof opacity == 'number' || (typeof opacity == 'string' && opacity.length)) ?\r\n 'rgba(' + rgbArray.join(',') + ',' + opacity + ')' :\r\n 'rgb(' + rgbArray.join(',') + ')';\r\n}\r\n\r\n\r\n})(window.angular);\r\n\r\n})();\r\n(function(){\r\n\"use strict\";\r\n\r\n/**\r\n * @ngdoc module\r\n * @name material.components.autocomplete\r\n */\r\n/*\r\n * @see js folder for autocomplete implementation\r\n */\r\nangular.module('material.components.autocomplete', [\r\n 'material.core',\r\n 'material.components.icon',\r\n 'material.components.virtualRepeat'\r\n]);\r\n\r\n})();\r\n(function(){\r\n\"use strict\";\r\n\r\n\r\nMdAutocompleteCtrl.$inject = [\"$scope\", \"$element\", \"$mdUtil\", \"$mdConstant\", \"$mdTheming\", \"$window\", \"$animate\", \"$rootElement\", \"$attrs\", \"$q\", \"$log\", \"$mdLiveAnnouncer\"];angular\r\n .module('material.components.autocomplete')\r\n .controller('MdAutocompleteCtrl', MdAutocompleteCtrl);\r\n\r\nvar ITEM_HEIGHT = 48,\r\n MAX_ITEMS = 5,\r\n MENU_PADDING = 8,\r\n INPUT_PADDING = 2, // Padding provided by `md-input-container`\r\n MODE_STANDARD = 'standard',\r\n MODE_VIRTUAL = 'virtual';\r\n\r\nfunction MdAutocompleteCtrl ($scope, $element, $mdUtil, $mdConstant, $mdTheming, $window,\r\n $animate, $rootElement, $attrs, $q, $log, $mdLiveAnnouncer) {\r\n\r\n // Internal Variables.\r\n var ctrl = this,\r\n itemParts = $scope.itemsExpr.split(/ in /i),\r\n itemExpr = itemParts[ 1 ],\r\n elements = null,\r\n cache = {},\r\n noBlur = false,\r\n selectedItemWatchers = [],\r\n hasFocus = false,\r\n fetchesInProgress = 0,\r\n enableWrapScroll = null,\r\n inputModelCtrl = null,\r\n debouncedOnResize = $mdUtil.debounce(onWindowResize),\r\n mode = MODE_VIRTUAL; // default\r\n\r\n /**\r\n * The root document element. This is used for attaching a top-level click handler to\r\n * close the options panel when a click outside said panel occurs. We use `documentElement`\r\n * instead of body because, when scrolling is disabled, some browsers consider the body element\r\n * to be completely off the screen and propagate events directly to the html element.\r\n * @type {!Object} angular.JQLite\r\n */\r\n ctrl.documentElement = angular.element(document.documentElement);\r\n\r\n // Public Exported Variables with handlers\r\n defineProperty('hidden', handleHiddenChange, true);\r\n\r\n // Public Exported Variables\r\n ctrl.scope = $scope;\r\n ctrl.parent = $scope.$parent;\r\n ctrl.itemName = itemParts[0];\r\n ctrl.matches = [];\r\n ctrl.loading = false;\r\n ctrl.hidden = true;\r\n ctrl.index = -1;\r\n ctrl.activeOption = null;\r\n ctrl.id = $mdUtil.nextUid();\r\n ctrl.isDisabled = null;\r\n ctrl.isRequired = null;\r\n ctrl.isReadonly = null;\r\n ctrl.hasNotFound = false;\r\n ctrl.selectedMessage = $scope.selectedMessage || 'selected';\r\n ctrl.noMatchMessage = $scope.noMatchMessage || 'There are no matches available.';\r\n ctrl.singleMatchMessage = $scope.singleMatchMessage || 'There is 1 match available.';\r\n ctrl.multipleMatchStartMessage = $scope.multipleMatchStartMessage || 'There are ';\r\n ctrl.multipleMatchEndMessage = $scope.multipleMatchEndMessage || ' matches available.';\r\n ctrl.defaultEscapeOptions = 'clear';\r\n\r\n // Public Exported Methods\r\n ctrl.keydown = keydown;\r\n ctrl.blur = blur;\r\n ctrl.focus = focus;\r\n ctrl.clear = clearValue;\r\n ctrl.select = select;\r\n ctrl.listEnter = onListEnter;\r\n ctrl.listLeave = onListLeave;\r\n ctrl.focusInput = focusInputElement;\r\n ctrl.getCurrentDisplayValue = getCurrentDisplayValue;\r\n ctrl.registerSelectedItemWatcher = registerSelectedItemWatcher;\r\n ctrl.unregisterSelectedItemWatcher = unregisterSelectedItemWatcher;\r\n ctrl.notFoundVisible = notFoundVisible;\r\n ctrl.loadingIsVisible = loadingIsVisible;\r\n ctrl.positionDropdown = positionDropdown;\r\n\r\n /**\r\n * Report types to be used for the $mdLiveAnnouncer\r\n * @enum {number} Unique flag id.\r\n */\r\n var ReportType = {\r\n Count: 1,\r\n Selected: 2\r\n };\r\n\r\n return init();\r\n\r\n // initialization methods\r\n\r\n /**\r\n * Initialize the controller, setup watchers, gather elements\r\n */\r\n function init () {\r\n\r\n $mdUtil.initOptionalProperties($scope, $attrs, {\r\n searchText: '',\r\n selectedItem: null,\r\n clearButton: false,\r\n disableVirtualRepeat: false,\r\n });\r\n\r\n $mdTheming($element);\r\n configureWatchers();\r\n $mdUtil.nextTick(function () {\r\n\r\n gatherElements();\r\n moveDropdown();\r\n\r\n // Touch devices often do not send a click event on tap. We still want to focus the input\r\n // and open the options pop-up in these cases.\r\n $element.on('touchstart', focusInputElement);\r\n\r\n // Forward all focus events to the input element when autofocus is enabled\r\n if ($scope.autofocus) {\r\n $element.on('focus', focusInputElement);\r\n }\r\n if ($scope.inputAriaDescribedBy) {\r\n elements.input.setAttribute('aria-describedby', $scope.inputAriaDescribedBy);\r\n }\r\n if (!$scope.floatingLabel) {\r\n if ($scope.inputAriaLabel) {\r\n elements.input.setAttribute('aria-label', $scope.inputAriaLabel);\r\n } else if ($scope.inputAriaLabelledBy) {\r\n elements.input.setAttribute('aria-labelledby', $scope.inputAriaLabelledBy);\r\n } else if ($scope.placeholder) {\r\n // If no aria-label or aria-labelledby references are defined, then just label using the\r\n // placeholder.\r\n elements.input.setAttribute('aria-label', $scope.placeholder);\r\n }\r\n }\r\n });\r\n }\r\n\r\n function updateModelValidators() {\r\n if (!$scope.requireMatch || !inputModelCtrl) return;\r\n\r\n inputModelCtrl.$setValidity('md-require-match', !!$scope.selectedItem || !$scope.searchText);\r\n }\r\n\r\n /**\r\n * Calculates the dropdown's position and applies the new styles to the menu element\r\n * @returns {*}\r\n */\r\n function positionDropdown () {\r\n if (!elements) {\r\n return $mdUtil.nextTick(positionDropdown, false, $scope);\r\n }\r\n\r\n var dropdownHeight = ($scope.dropdownItems || MAX_ITEMS) * ITEM_HEIGHT;\r\n var hrect = elements.wrap.getBoundingClientRect(),\r\n vrect = elements.snap.getBoundingClientRect(),\r\n root = elements.root.getBoundingClientRect(),\r\n top = vrect.bottom - root.top,\r\n bot = root.bottom - vrect.top,\r\n left = hrect.left - root.left,\r\n width = hrect.width,\r\n offset = getVerticalOffset(),\r\n position = $scope.dropdownPosition,\r\n styles, enoughBottomSpace, enoughTopSpace;\r\n var bottomSpace = root.bottom - vrect.bottom - MENU_PADDING + $mdUtil.getViewportTop();\r\n var topSpace = vrect.top - MENU_PADDING;\r\n\r\n // Automatically determine dropdown placement based on available space in viewport.\r\n if (!position) {\r\n enoughTopSpace = topSpace > dropdownHeight;\r\n enoughBottomSpace = bottomSpace > dropdownHeight;\r\n if (enoughBottomSpace) {\r\n position = 'bottom';\r\n } else if (enoughTopSpace) {\r\n position = 'top';\r\n } else {\r\n position = topSpace > bottomSpace ? 'top' : 'bottom';\r\n }\r\n }\r\n // Adjust the width to account for the padding provided by `md-input-container`\r\n if ($attrs.mdFloatingLabel) {\r\n left += INPUT_PADDING;\r\n width -= INPUT_PADDING * 2;\r\n }\r\n styles = {\r\n left: left + 'px',\r\n minWidth: width + 'px',\r\n maxWidth: Math.max(hrect.right - root.left, root.right - hrect.left) - MENU_PADDING + 'px'\r\n };\r\n\r\n if (position === 'top') {\r\n styles.top = 'auto';\r\n styles.bottom = bot + 'px';\r\n styles.maxHeight = Math.min(dropdownHeight, topSpace) + 'px';\r\n } else {\r\n bottomSpace = root.bottom - hrect.bottom - MENU_PADDING + $mdUtil.getViewportTop();\r\n\r\n styles.top = (top - offset) + 'px';\r\n styles.bottom = 'auto';\r\n styles.maxHeight = Math.min(dropdownHeight, bottomSpace) + 'px';\r\n }\r\n\r\n elements.$.scrollContainer.css(styles);\r\n $mdUtil.nextTick(correctHorizontalAlignment, false, $scope);\r\n\r\n /**\r\n * Calculates the vertical offset for floating label examples to account for ngMessages\r\n * @returns {number}\r\n */\r\n function getVerticalOffset () {\r\n var offset = 0;\r\n var inputContainer = $element.find('md-input-container');\r\n if (inputContainer.length) {\r\n var input = inputContainer.find('input');\r\n offset = inputContainer.prop('offsetHeight');\r\n offset -= input.prop('offsetTop');\r\n offset -= input.prop('offsetHeight');\r\n // add in the height left up top for the floating label text\r\n offset += inputContainer.prop('offsetTop');\r\n }\r\n return offset;\r\n }\r\n\r\n /**\r\n * Makes sure that the menu doesn't go off of the screen on either side.\r\n */\r\n function correctHorizontalAlignment () {\r\n var dropdown = elements.scrollContainer.getBoundingClientRect(),\r\n styles = {};\r\n if (dropdown.right > root.right) {\r\n styles.left = (hrect.right - dropdown.width) + 'px';\r\n }\r\n elements.$.scrollContainer.css(styles);\r\n }\r\n }\r\n\r\n /**\r\n * Moves the dropdown menu to the body tag in order to avoid z-index and overflow issues.\r\n */\r\n function moveDropdown () {\r\n if (!elements.$.root.length) return;\r\n $mdTheming(elements.$.scrollContainer);\r\n elements.$.scrollContainer.detach();\r\n elements.$.root.append(elements.$.scrollContainer);\r\n if ($animate.pin) $animate.pin(elements.$.scrollContainer, $rootElement);\r\n }\r\n\r\n /**\r\n * Sends focus to the input element.\r\n */\r\n function focusInputElement () {\r\n elements.input.focus();\r\n }\r\n\r\n /**\r\n * Update the activeOption based on the selected item in the listbox.\r\n * The activeOption is used in the template to set the aria-activedescendant attribute, which\r\n * enables screen readers to properly handle visual focus within the listbox and announce the\r\n * item's place in the list. I.e. \"List item 3 of 50\". Anytime that `ctrl.index` changes, this\r\n * function needs to be called to update the activeOption.\r\n */\r\n function updateActiveOption() {\r\n var selectedOption = elements.scroller.querySelector('.selected');\r\n if (selectedOption) {\r\n ctrl.activeOption = selectedOption.id;\r\n } else {\r\n ctrl.activeOption = null;\r\n }\r\n }\r\n\r\n /**\r\n * Sets up any watchers used by autocomplete\r\n */\r\n function configureWatchers () {\r\n var wait = parseInt($scope.delay, 10) || 0;\r\n\r\n $attrs.$observe('disabled', function (value) { ctrl.isDisabled = $mdUtil.parseAttributeBoolean(value, false); });\r\n $attrs.$observe('required', function (value) { ctrl.isRequired = $mdUtil.parseAttributeBoolean(value, false); });\r\n $attrs.$observe('readonly', function (value) { ctrl.isReadonly = $mdUtil.parseAttributeBoolean(value, false); });\r\n\r\n $scope.$watch('searchText', wait ? $mdUtil.debounce(handleSearchText, wait) : handleSearchText);\r\n $scope.$watch('selectedItem', selectedItemChange);\r\n\r\n angular.element($window).on('resize', debouncedOnResize);\r\n\r\n $scope.$on('$destroy', cleanup);\r\n }\r\n\r\n /**\r\n * Removes any events or leftover elements created by this controller\r\n */\r\n function cleanup () {\r\n if (!ctrl.hidden) {\r\n $mdUtil.enableScrolling();\r\n }\r\n\r\n angular.element($window).off('resize', debouncedOnResize);\r\n\r\n if (elements){\r\n var items = ['ul', 'scroller', 'scrollContainer', 'input'];\r\n angular.forEach(items, function(key){\r\n elements.$[key].remove();\r\n });\r\n }\r\n }\r\n\r\n /**\r\n * Event handler to be called whenever the window resizes.\r\n */\r\n function onWindowResize() {\r\n if (!ctrl.hidden) {\r\n positionDropdown();\r\n }\r\n }\r\n\r\n /**\r\n * Gathers all of the elements needed for this controller\r\n */\r\n function gatherElements () {\r\n\r\n var snapWrap = gatherSnapWrap();\r\n\r\n elements = {\r\n main: $element[0],\r\n scrollContainer: $element[0].querySelector('.md-virtual-repeat-container, .md-standard-list-container'),\r\n scroller: $element[0].querySelector('.md-virtual-repeat-scroller, .md-standard-list-scroller'),\r\n ul: $element.find('ul')[0],\r\n input: $element.find('input')[0],\r\n wrap: snapWrap.wrap,\r\n snap: snapWrap.snap,\r\n root: document.body,\r\n };\r\n\r\n elements.li = elements.ul.getElementsByTagName('li');\r\n elements.$ = getAngularElements(elements);\r\n mode = elements.scrollContainer.classList.contains('md-standard-list-container') ? MODE_STANDARD : MODE_VIRTUAL;\r\n inputModelCtrl = elements.$.input.controller('ngModel');\r\n }\r\n\r\n /**\r\n * Gathers the snap and wrap elements\r\n *\r\n */\r\n function gatherSnapWrap() {\r\n var element;\r\n var value;\r\n for (element = $element; element.length; element = element.parent()) {\r\n value = element.attr('md-autocomplete-snap');\r\n if (angular.isDefined(value)) break;\r\n }\r\n\r\n if (element.length) {\r\n return {\r\n snap: element[0],\r\n wrap: (value.toLowerCase() === 'width') ? element[0] : $element.find('md-autocomplete-wrap')[0]\r\n };\r\n }\r\n\r\n var wrap = $element.find('md-autocomplete-wrap')[0];\r\n return {\r\n snap: wrap,\r\n wrap: wrap\r\n };\r\n }\r\n\r\n /**\r\n * Gathers angular-wrapped versions of each element\r\n * @param elements\r\n * @returns {{}}\r\n */\r\n function getAngularElements (elements) {\r\n var obj = {};\r\n for (var key in elements) {\r\n if (elements.hasOwnProperty(key)) obj[ key ] = angular.element(elements[ key ]);\r\n }\r\n return obj;\r\n }\r\n\r\n // event/change handlers\r\n\r\n /**\r\n * @param {Event} $event\r\n */\r\n function preventDefault($event) {\r\n $event.preventDefault();\r\n }\r\n\r\n /**\r\n * @param {Event} $event\r\n */\r\n function stopPropagation($event) {\r\n $event.stopPropagation();\r\n }\r\n\r\n /**\r\n * Handles changes to the `hidden` property.\r\n * @param {boolean} hidden true to hide the options pop-up, false to show it.\r\n * @param {boolean} oldHidden the previous value of hidden\r\n */\r\n function handleHiddenChange (hidden, oldHidden) {\r\n var scrollContainerElement;\r\n\r\n if (elements) {\r\n scrollContainerElement = angular.element(elements.scrollContainer);\r\n }\r\n if (!hidden && oldHidden) {\r\n positionDropdown();\r\n\r\n // Report in polite mode, because the screen reader should finish the default description of\r\n // the input element.\r\n reportMessages(true, ReportType.Count | ReportType.Selected);\r\n\r\n if (elements) {\r\n $mdUtil.disableScrollAround(elements.scrollContainer);\r\n enableWrapScroll = disableElementScrollEvents(elements.wrap);\r\n if ($mdUtil.isIos) {\r\n ctrl.documentElement.on('touchend', handleTouchOutsidePanel);\r\n if (scrollContainerElement) {\r\n scrollContainerElement.on('touchstart touchmove touchend', stopPropagation);\r\n }\r\n }\r\n ctrl.index = getDefaultIndex();\r\n $mdUtil.nextTick(function() {\r\n updateActiveOption();\r\n updateScroll();\r\n });\r\n }\r\n } else if (hidden && !oldHidden) {\r\n if ($mdUtil.isIos) {\r\n ctrl.documentElement.off('touchend', handleTouchOutsidePanel);\r\n if (scrollContainerElement) {\r\n scrollContainerElement.off('touchstart touchmove touchend', stopPropagation);\r\n }\r\n }\r\n $mdUtil.enableScrolling();\r\n\r\n if (enableWrapScroll) {\r\n enableWrapScroll();\r\n enableWrapScroll = null;\r\n }\r\n }\r\n }\r\n\r\n /**\r\n * Handling touch events that bubble up to the document is required for closing the dropdown\r\n * panel on touch outside of the options pop-up panel on iOS.\r\n * @param {Event} $event\r\n */\r\n function handleTouchOutsidePanel($event) {\r\n ctrl.hidden = true;\r\n // iOS does not blur the pop-up for touches on the scroll mask, so we have to do it.\r\n doBlur(true);\r\n }\r\n\r\n /**\r\n * Disables scrolling for a specific element.\r\n * @param {!string|!DOMElement} element to disable scrolling\r\n * @return {Function} function to call to re-enable scrolling for the element\r\n */\r\n function disableElementScrollEvents(element) {\r\n var elementToDisable = angular.element(element);\r\n elementToDisable.on('wheel touchmove', preventDefault);\r\n\r\n return function() {\r\n elementToDisable.off('wheel touchmove', preventDefault);\r\n };\r\n }\r\n\r\n /**\r\n * When the user mouses over the dropdown menu, ignore blur events.\r\n */\r\n function onListEnter () {\r\n noBlur = true;\r\n }\r\n\r\n /**\r\n * When the user's mouse leaves the menu, blur events may hide the menu again.\r\n */\r\n function onListLeave () {\r\n if (!hasFocus && !ctrl.hidden) elements.input.focus();\r\n noBlur = false;\r\n ctrl.hidden = shouldHide();\r\n }\r\n\r\n /**\r\n * Handles changes to the selected item.\r\n * @param selectedItem\r\n * @param previousSelectedItem\r\n */\r\n function selectedItemChange (selectedItem, previousSelectedItem) {\r\n\r\n updateModelValidators();\r\n\r\n if (selectedItem) {\r\n getDisplayValue(selectedItem).then(function (val) {\r\n $scope.searchText = val;\r\n handleSelectedItemChange(selectedItem, previousSelectedItem);\r\n });\r\n } else if (previousSelectedItem && $scope.searchText) {\r\n getDisplayValue(previousSelectedItem).then(function(displayValue) {\r\n // Clear the searchText, when the selectedItem is set to null.\r\n // Do not clear the searchText, when the searchText isn't matching with the previous\r\n // selected item.\r\n if (angular.isString($scope.searchText)\r\n && displayValue.toString().toLowerCase() === $scope.searchText.toLowerCase()) {\r\n $scope.searchText = '';\r\n }\r\n });\r\n }\r\n\r\n if (selectedItem !== previousSelectedItem) {\r\n announceItemChange();\r\n }\r\n }\r\n\r\n /**\r\n * Use the user-defined expression to announce changes each time a new item is selected\r\n */\r\n function announceItemChange () {\r\n angular.isFunction($scope.itemChange) &&\r\n $scope.itemChange(getItemAsNameVal($scope.selectedItem));\r\n }\r\n\r\n /**\r\n * Use the user-defined expression to announce changes each time the search text is changed\r\n */\r\n function announceTextChange () {\r\n angular.isFunction($scope.textChange) && $scope.textChange();\r\n }\r\n\r\n /**\r\n * Calls any external watchers listening for the selected item. Used in conjunction with\r\n * `registerSelectedItemWatcher`.\r\n * @param selectedItem\r\n * @param previousSelectedItem\r\n */\r\n function handleSelectedItemChange (selectedItem, previousSelectedItem) {\r\n selectedItemWatchers.forEach(function (watcher) {\r\n watcher(selectedItem, previousSelectedItem);\r\n });\r\n }\r\n\r\n /**\r\n * Register a function to be called when the selected item changes.\r\n * @param cb\r\n */\r\n function registerSelectedItemWatcher (cb) {\r\n if (selectedItemWatchers.indexOf(cb) === -1) {\r\n selectedItemWatchers.push(cb);\r\n }\r\n }\r\n\r\n /**\r\n * Unregister a function previously registered for selected item changes.\r\n * @param cb\r\n */\r\n function unregisterSelectedItemWatcher (cb) {\r\n var i = selectedItemWatchers.indexOf(cb);\r\n if (i !== -1) {\r\n selectedItemWatchers.splice(i, 1);\r\n }\r\n }\r\n\r\n /**\r\n * Handles changes to the searchText property.\r\n * @param {string} searchText\r\n * @param {string} previousSearchText\r\n */\r\n function handleSearchText (searchText, previousSearchText) {\r\n ctrl.index = getDefaultIndex();\r\n\r\n // do nothing on init\r\n if (searchText === previousSearchText) return;\r\n\r\n updateModelValidators();\r\n\r\n getDisplayValue($scope.selectedItem).then(function (val) {\r\n // clear selected item if search text no longer matches it\r\n if (searchText !== val) {\r\n $scope.selectedItem = null;\r\n\r\n // trigger change event if available\r\n if (searchText !== previousSearchText) {\r\n announceTextChange();\r\n }\r\n\r\n // cancel results if search text is not long enough\r\n if (!isMinLengthMet()) {\r\n ctrl.matches = [];\r\n\r\n setLoading(false);\r\n reportMessages(true, ReportType.Count);\r\n\r\n } else {\r\n handleQuery();\r\n }\r\n }\r\n });\r\n\r\n }\r\n\r\n /**\r\n * Handles input blur event, determines if the dropdown should hide.\r\n * @param {Event=} $event\r\n */\r\n function blur($event) {\r\n hasFocus = false;\r\n\r\n if (!noBlur) {\r\n ctrl.hidden = shouldHide();\r\n evalAttr('ngBlur', { $event: $event });\r\n } else if (angular.isObject($event)) {\r\n $event.stopImmediatePropagation();\r\n }\r\n }\r\n\r\n /**\r\n * Force blur on input element\r\n * @param {boolean} forceBlur\r\n */\r\n function doBlur(forceBlur) {\r\n if (forceBlur) {\r\n noBlur = false;\r\n hasFocus = false;\r\n }\r\n elements.input.blur();\r\n }\r\n\r\n /**\r\n * Handles input focus event, determines if the dropdown should show.\r\n */\r\n function focus($event) {\r\n hasFocus = true;\r\n\r\n if (isSearchable() && isMinLengthMet()) {\r\n handleQuery();\r\n }\r\n\r\n ctrl.hidden = shouldHide();\r\n\r\n evalAttr('ngFocus', { $event: $event });\r\n }\r\n\r\n /**\r\n * Handles keyboard input.\r\n * @param event\r\n */\r\n function keydown (event) {\r\n switch (event.keyCode) {\r\n case $mdConstant.KEY_CODE.DOWN_ARROW:\r\n if (ctrl.loading || hasSelection()) return;\r\n event.stopPropagation();\r\n event.preventDefault();\r\n ctrl.index = ctrl.index + 1 > ctrl.matches.length - 1 ? 0 : Math.min(ctrl.index + 1, ctrl.matches.length - 1);\r\n $mdUtil.nextTick(updateActiveOption);\r\n updateScroll();\r\n break;\r\n case $mdConstant.KEY_CODE.UP_ARROW:\r\n if (ctrl.loading || hasSelection()) return;\r\n event.stopPropagation();\r\n event.preventDefault();\r\n ctrl.index = ctrl.index - 1 < 0 ? ctrl.matches.length - 1 : Math.max(0, ctrl.index - 1);\r\n $mdUtil.nextTick(updateActiveOption);\r\n updateScroll();\r\n break;\r\n case $mdConstant.KEY_CODE.TAB:\r\n // If we hit tab, assume that we've left the list so it will close\r\n onListLeave();\r\n\r\n if (ctrl.hidden || ctrl.loading || ctrl.index < 0 || ctrl.matches.length < 1) return;\r\n select(ctrl.index);\r\n break;\r\n case $mdConstant.KEY_CODE.ENTER:\r\n if (ctrl.hidden || ctrl.loading || ctrl.index < 0 || ctrl.matches.length < 1) return;\r\n if (hasSelection()) return;\r\n event.stopImmediatePropagation();\r\n event.preventDefault();\r\n select(ctrl.index);\r\n break;\r\n case $mdConstant.KEY_CODE.ESCAPE:\r\n event.preventDefault(); // Prevent browser from always clearing input\r\n if (!shouldProcessEscape()) return;\r\n event.stopPropagation();\r\n\r\n clearSelectedItem();\r\n if ($scope.searchText && hasEscapeOption('clear')) {\r\n clearSearchText();\r\n }\r\n\r\n // Manually hide (needed for mdNotFound support)\r\n ctrl.hidden = true;\r\n\r\n if (hasEscapeOption('blur')) {\r\n // Force the component to blur if they hit escape\r\n doBlur(true);\r\n }\r\n\r\n break;\r\n default:\r\n }\r\n }\r\n\r\n // getters\r\n\r\n /**\r\n * Returns the minimum length needed to display the dropdown.\r\n * @returns {*}\r\n */\r\n function getMinLength () {\r\n return angular.isNumber($scope.minLength) ? $scope.minLength : 1;\r\n }\r\n\r\n /**\r\n * Returns the display value for an item.\r\n * @param {*} item\r\n * @returns {*}\r\n */\r\n function getDisplayValue (item) {\r\n return $q.when(getItemText(item) || item).then(function(itemText) {\r\n if (itemText && !angular.isString(itemText)) {\r\n $log.warn('md-autocomplete: Could not resolve display value to a string. ' +\r\n 'Please check the `md-item-text` attribute.');\r\n }\r\n\r\n return itemText;\r\n });\r\n\r\n /**\r\n * Getter function to invoke user-defined expression (in the directive)\r\n * to convert your object to a single string.\r\n * @param {*} item\r\n * @returns {string|null}\r\n */\r\n function getItemText (item) {\r\n return (item && $scope.itemText) ? $scope.itemText(getItemAsNameVal(item)) : null;\r\n }\r\n }\r\n\r\n /**\r\n * Returns the locals object for compiling item templates.\r\n * @param {*} item\r\n * @returns {Object|undefined}\r\n */\r\n function getItemAsNameVal (item) {\r\n if (!item) {\r\n return undefined;\r\n }\r\n\r\n var locals = {};\r\n if (ctrl.itemName) {\r\n locals[ ctrl.itemName ] = item;\r\n }\r\n\r\n return locals;\r\n }\r\n\r\n /**\r\n * Returns the default index based on whether or not autoselect is enabled.\r\n * @returns {number} 0 if autoselect is enabled, -1 if not.\r\n */\r\n function getDefaultIndex () {\r\n return $scope.autoselect ? 0 : -1;\r\n }\r\n\r\n /**\r\n * Sets the loading parameter and updates the hidden state.\r\n * @param value {boolean} Whether or not the component is currently loading.\r\n */\r\n function setLoading(value) {\r\n if (ctrl.loading !== value) {\r\n ctrl.loading = value;\r\n }\r\n\r\n // Always refresh the hidden variable as something else might have changed\r\n ctrl.hidden = shouldHide();\r\n }\r\n\r\n /**\r\n * Determines if the menu should be hidden.\r\n * @returns {boolean} true if the menu should be hidden\r\n */\r\n function shouldHide () {\r\n return !shouldShow();\r\n }\r\n\r\n /**\r\n * Determines whether the autocomplete is able to query within the current state.\r\n * @returns {boolean} true if the query can be run\r\n */\r\n function isSearchable() {\r\n if (ctrl.loading && !hasMatches()) {\r\n // No query when query is in progress.\r\n return false;\r\n } else if (hasSelection()) {\r\n // No query if there is already a selection\r\n return false;\r\n }\r\n else if (!hasFocus) {\r\n // No query if the input does not have focus\r\n return false;\r\n }\r\n return true;\r\n }\r\n\r\n /**\r\n * @returns {boolean} if the escape keydown should be processed, return true.\r\n * Otherwise return false.\r\n */\r\n function shouldProcessEscape() {\r\n return hasEscapeOption('blur') || !ctrl.hidden || ctrl.loading || hasEscapeOption('clear') && $scope.searchText;\r\n }\r\n\r\n /**\r\n * @param {string} option check if this option is set\r\n * @returns {boolean} if the specified escape option is set, return true. Return false otherwise.\r\n */\r\n function hasEscapeOption(option) {\r\n if (!angular.isString($scope.escapeOptions)) {\r\n return ctrl.defaultEscapeOptions.indexOf(option) !== -1;\r\n } else {\r\n return $scope.escapeOptions.toLowerCase().indexOf(option) !== -1;\r\n }\r\n }\r\n\r\n /**\r\n * Determines if the menu should be shown.\r\n * @returns {boolean} true if the menu should be shown\r\n */\r\n function shouldShow() {\r\n if (ctrl.isReadonly) {\r\n // Don't show if read only is set\r\n return false;\r\n } else if (!isSearchable()) {\r\n // Don't show if a query is in progress, there is already a selection,\r\n // or the input is not focused.\r\n return false;\r\n }\r\n return (isMinLengthMet() && hasMatches()) || notFoundVisible();\r\n }\r\n\r\n /**\r\n * @returns {boolean} true if the search text has matches.\r\n */\r\n function hasMatches() {\r\n return ctrl.matches.length ? true : false;\r\n }\r\n\r\n /**\r\n * @returns {boolean} true if the autocomplete has a valid selection.\r\n */\r\n function hasSelection() {\r\n return ctrl.scope.selectedItem ? true : false;\r\n }\r\n\r\n /**\r\n * @returns {boolean} true if the loading indicator is, or should be, visible.\r\n */\r\n function loadingIsVisible() {\r\n return ctrl.loading && !hasSelection();\r\n }\r\n\r\n /**\r\n * @returns {*} the display value of the current item.\r\n */\r\n function getCurrentDisplayValue () {\r\n return getDisplayValue(ctrl.matches[ ctrl.index ]);\r\n }\r\n\r\n /**\r\n * Determines if the minimum length is met by the search text.\r\n * @returns {*} true if the minimum length is met by the search text\r\n */\r\n function isMinLengthMet () {\r\n return ($scope.searchText || '').length >= getMinLength();\r\n }\r\n\r\n // actions\r\n\r\n /**\r\n * Defines a public property with a handler and a default value.\r\n * @param {string} key\r\n * @param {Function} handler function\r\n * @param {*} defaultValue default value\r\n */\r\n function defineProperty (key, handler, defaultValue) {\r\n Object.defineProperty(ctrl, key, {\r\n get: function () { return defaultValue; },\r\n set: function (newValue) {\r\n var oldValue = defaultValue;\r\n defaultValue = newValue;\r\n handler(newValue, oldValue);\r\n }\r\n });\r\n }\r\n\r\n /**\r\n * Selects the item at the given index.\r\n * @param {number} index to select\r\n */\r\n function select (index) {\r\n // force form to update state for validation\r\n $mdUtil.nextTick(function () {\r\n getDisplayValue(ctrl.matches[ index ]).then(function (val) {\r\n var ngModel = elements.$.input.controller('ngModel');\r\n $mdLiveAnnouncer.announce(val + ' ' + ctrl.selectedMessage, 'assertive');\r\n ngModel.$setViewValue(val);\r\n ngModel.$render();\r\n }).finally(function () {\r\n $scope.selectedItem = ctrl.matches[ index ];\r\n setLoading(false);\r\n });\r\n }, false);\r\n }\r\n\r\n /**\r\n * Clears the searchText value and selected item.\r\n * @param {Event} $event\r\n */\r\n function clearValue ($event) {\r\n if ($event) {\r\n $event.stopPropagation();\r\n }\r\n clearSelectedItem();\r\n clearSearchText();\r\n }\r\n\r\n /**\r\n * Clears the selected item\r\n */\r\n function clearSelectedItem () {\r\n // Reset our variables\r\n ctrl.index = -1;\r\n $mdUtil.nextTick(updateActiveOption);\r\n ctrl.matches = [];\r\n }\r\n\r\n /**\r\n * Clears the searchText value\r\n */\r\n function clearSearchText () {\r\n // Set the loading to true so we don't see flashes of content.\r\n // The flashing will only occur when an async request is running.\r\n // So the loading process will stop when the results had been retrieved.\r\n setLoading(true);\r\n\r\n $scope.searchText = '';\r\n\r\n // Normally, triggering the change / input event is unnecessary, because the browser detects it properly.\r\n // But some browsers are not detecting it properly, which means that we have to trigger the event.\r\n // Using the `input` is not working properly, because for example IE11 is not supporting the `input` event.\r\n // The `change` event is a good alternative and is supported by all supported browsers.\r\n var eventObj = document.createEvent('CustomEvent');\r\n eventObj.initCustomEvent('change', true, true, { value: '' });\r\n elements.input.dispatchEvent(eventObj);\r\n\r\n // For some reason, firing the above event resets the value of $scope.searchText if\r\n // $scope.searchText has a space character at the end, so we blank it one more time and then\r\n // focus.\r\n elements.input.blur();\r\n $scope.searchText = '';\r\n elements.input.focus();\r\n }\r\n\r\n /**\r\n * Fetches the results for the provided search text.\r\n * @param searchText\r\n */\r\n function fetchResults (searchText) {\r\n var items = $scope.$parent.$eval(itemExpr),\r\n term = searchText.toLowerCase(),\r\n isList = angular.isArray(items),\r\n isPromise = !!items.then; // Every promise should contain a `then` property\r\n\r\n if (isList) onResultsRetrieved(items);\r\n else if (isPromise) handleAsyncResults(items);\r\n\r\n function handleAsyncResults(items) {\r\n if (!items) return;\r\n\r\n items = $q.when(items);\r\n fetchesInProgress++;\r\n setLoading(true);\r\n\r\n $mdUtil.nextTick(function () {\r\n items\r\n .then(onResultsRetrieved)\r\n .finally(function(){\r\n if (--fetchesInProgress === 0) {\r\n setLoading(false);\r\n }\r\n });\r\n },true, $scope);\r\n }\r\n\r\n function onResultsRetrieved(matches) {\r\n cache[term] = matches;\r\n\r\n // Just cache the results if the request is now outdated.\r\n // The request becomes outdated, when the new searchText has changed during the result fetching.\r\n if ((searchText || '') !== ($scope.searchText || '')) {\r\n return;\r\n }\r\n\r\n handleResults(matches);\r\n }\r\n }\r\n\r\n\r\n /**\r\n * Reports given message types to supported screen readers.\r\n * @param {boolean} isPolite Whether the announcement should be polite.\r\n * @param {!number} types Message flags to be reported to the screen reader.\r\n */\r\n function reportMessages(isPolite, types) {\r\n var politeness = isPolite ? 'polite' : 'assertive';\r\n var messages = [];\r\n\r\n if (types & ReportType.Selected && ctrl.index !== -1) {\r\n messages.push(getCurrentDisplayValue());\r\n }\r\n\r\n if (types & ReportType.Count) {\r\n messages.push($q.resolve(getCountMessage()));\r\n }\r\n\r\n $q.all(messages).then(function(data) {\r\n $mdLiveAnnouncer.announce(data.join(' '), politeness);\r\n });\r\n }\r\n\r\n /**\r\n * @returns {string} the ARIA message for how many results match the current query.\r\n */\r\n function getCountMessage () {\r\n switch (ctrl.matches.length) {\r\n case 0:\r\n return ctrl.noMatchMessage;\r\n case 1:\r\n return ctrl.singleMatchMessage;\r\n default:\r\n return ctrl.multipleMatchStartMessage + ctrl.matches.length + ctrl.multipleMatchEndMessage;\r\n }\r\n }\r\n\r\n /**\r\n * Makes sure that the focused element is within view.\r\n */\r\n function updateScroll () {\r\n if (!elements.li[0]) return;\r\n if (mode === MODE_STANDARD) {\r\n updateStandardScroll();\r\n } else {\r\n updateVirtualScroll();\r\n }\r\n }\r\n\r\n function updateVirtualScroll() {\r\n // elements in virtual scroll have consistent heights\r\n var optionHeight = elements.li[0].offsetHeight,\r\n top = optionHeight * Math.max(0, ctrl.index),\r\n bottom = top + optionHeight,\r\n containerHeight = elements.scroller.clientHeight,\r\n scrollTop = elements.scroller.scrollTop;\r\n\r\n if (top < scrollTop) {\r\n scrollTo(top);\r\n } else if (bottom > scrollTop + containerHeight) {\r\n scrollTo(bottom - containerHeight);\r\n }\r\n }\r\n\r\n function updateStandardScroll() {\r\n // elements in standard scroll have variable heights\r\n var selected = elements.li[Math.max(0, ctrl.index)];\r\n var containerHeight = elements.scrollContainer.offsetHeight,\r\n top = selected && selected.offsetTop || 0,\r\n bottom = top + selected.clientHeight,\r\n scrollTop = elements.scrollContainer.scrollTop;\r\n\r\n if (top < scrollTop) {\r\n scrollTo(top);\r\n } else if (bottom > scrollTop + containerHeight) {\r\n scrollTo(bottom - containerHeight);\r\n }\r\n }\r\n\r\n function isPromiseFetching() {\r\n return fetchesInProgress !== 0;\r\n }\r\n\r\n function scrollTo (offset) {\r\n if (mode === MODE_STANDARD) {\r\n elements.scrollContainer.scrollTop = offset;\r\n } else {\r\n elements.$.scrollContainer.controller('mdVirtualRepeatContainer').scrollTo(offset);\r\n }\r\n }\r\n\r\n function notFoundVisible () {\r\n var textLength = (ctrl.scope.searchText || '').length;\r\n\r\n return ctrl.hasNotFound && !hasMatches() && (!ctrl.loading || isPromiseFetching()) && textLength >= getMinLength() && (hasFocus || noBlur) && !hasSelection();\r\n }\r\n\r\n /**\r\n * Starts the query to gather the results for the current searchText. Attempts to return cached\r\n * results first, then forwards the process to `fetchResults` if necessary.\r\n */\r\n function handleQuery () {\r\n var searchText = $scope.searchText || '';\r\n var term = searchText.toLowerCase();\r\n\r\n // If caching is enabled and the current searchText is stored in the cache\r\n if (!$scope.noCache && cache[term]) {\r\n // The results should be handled as same as a normal un-cached request does.\r\n handleResults(cache[term]);\r\n } else {\r\n fetchResults(searchText);\r\n }\r\n\r\n ctrl.hidden = shouldHide();\r\n }\r\n\r\n /**\r\n * Handles the retrieved results by showing them in the autocompletes dropdown.\r\n * @param results Retrieved results\r\n */\r\n function handleResults(results) {\r\n ctrl.matches = results;\r\n ctrl.hidden = shouldHide();\r\n\r\n // If loading is in progress, then we'll end the progress. This is needed for example,\r\n // when the `clear` button was clicked, because there we always show the loading process, to prevent flashing.\r\n if (ctrl.loading) setLoading(false);\r\n\r\n if ($scope.selectOnMatch) selectItemOnMatch();\r\n\r\n positionDropdown();\r\n reportMessages(true, ReportType.Count);\r\n }\r\n\r\n /**\r\n * If there is only one matching item and the search text matches its display value exactly,\r\n * automatically select that item. Note: This function is only called if the user uses the\r\n * `md-select-on-match` flag.\r\n */\r\n function selectItemOnMatch () {\r\n var searchText = $scope.searchText,\r\n matches = ctrl.matches,\r\n item = matches[ 0 ];\r\n if (matches.length === 1) getDisplayValue(item).then(function (displayValue) {\r\n var isMatching = searchText === displayValue;\r\n if ($scope.matchInsensitive && !isMatching) {\r\n isMatching = searchText.toLowerCase() === displayValue.toLowerCase();\r\n }\r\n\r\n if (isMatching) {\r\n select(0);\r\n }\r\n });\r\n }\r\n\r\n /**\r\n * Evaluates an attribute expression against the parent scope.\r\n * @param {String} attr Name of the attribute to be evaluated.\r\n * @param {Object?} locals Properties to be injected into the evaluation context.\r\n */\r\n function evalAttr(attr, locals) {\r\n if ($attrs[attr]) {\r\n $scope.$parent.$eval($attrs[attr], locals || {});\r\n }\r\n }\r\n\r\n}\r\n\r\n})();\r\n(function(){\r\n\"use strict\";\r\n\r\n\r\nMdAutocomplete.$inject = [\"$$mdSvgRegistry\"];angular\r\n .module('material.components.autocomplete')\r\n .directive('mdAutocomplete', MdAutocomplete);\r\n\r\n/**\r\n * @ngdoc directive\r\n * @name mdAutocomplete\r\n * @module material.components.autocomplete\r\n *\r\n * @description\r\n * `` is a special input component with a drop-down of all possible matches to a\r\n * custom query. This component allows you to provide real-time suggestions as the user types\r\n * in the input area.\r\n *\r\n * To start, you will need to specify the required parameters and provide a template for your\r\n * results. The content inside `md-autocomplete` will be treated as a template.\r\n *\r\n * In more complex cases, you may want to include other content such as a message to display when\r\n * no matches were found. You can do this by wrapping your template in `md-item-template` and\r\n * adding a tag for `md-not-found`. An example of this is shown below.\r\n *\r\n * To reset the displayed value you must clear both values for `md-search-text` and\r\n * `md-selected-item`.\r\n *\r\n * ### Validation\r\n *\r\n * You can use `ng-messages` to include validation the same way that you would normally validate;\r\n * however, if you want to replicate a standard input with a floating label, you will have to\r\n * do the following:\r\n *\r\n * - Make sure that your template is wrapped in `md-item-template`\r\n * - Add your `ng-messages` code inside of `md-autocomplete`\r\n * - Add your validation properties to `md-autocomplete` (ie. `required`)\r\n * - Add a `name` to `md-autocomplete` (to be used on the generated `input`)\r\n *\r\n * There is an example below of how this should look.\r\n *\r\n * ### Snapping Drop-Down\r\n *\r\n * You can cause the autocomplete drop-down to snap to an ancestor element by applying the\r\n * `md-autocomplete-snap` attribute to that element. You can also snap to the width of\r\n * the `md-autocomplete-snap` element by setting the attribute's value to `width`\r\n * (ie. `md-autocomplete-snap=\"width\"`).\r\n *\r\n * ### Notes\r\n *\r\n * **Autocomplete Dropdown Items Rendering**\r\n *\r\n * The `md-autocomplete` uses the the \r\n * mdVirtualRepeat directive for displaying the results inside of the dropdown.
\r\n *\r\n * > When encountering issues regarding the item template please take a look at the\r\n * VirtualRepeatContainer documentation.\r\n *\r\n * **Autocomplete inside of a Virtual Repeat**\r\n *\r\n * When using the `md-autocomplete` directive inside of a\r\n * VirtualRepeatContainer the dropdown items\r\n * might not update properly, because caching of the results is enabled by default.\r\n *\r\n * The autocomplete will then show invalid dropdown items, because the Virtual Repeat only updates\r\n * the scope bindings rather than re-creating the `md-autocomplete`. This means that the previous\r\n * cached results will be used.\r\n *\r\n * > To avoid such problems, ensure that the autocomplete does not cache any results via\r\n * `md-no-cache=\"true\"`:\r\n *\r\n *\r\n * \r\n * {{ item.display }}\r\n * \r\n * \r\n *\r\n *\r\n * @param {expression} md-items An expression in the format of `item in results` to iterate over\r\n * matches for your search.
\r\n * The `results` expression can be also a function, which returns the results synchronously\r\n * or asynchronously (per Promise).\r\n * @param {expression=} md-selected-item-change An expression to be run each time a new item is\r\n * selected.\r\n * @param {expression=} md-search-text-change An expression to be run each time the search text\r\n * updates.\r\n * @param {expression=} md-search-text A model to bind the search query text to.\r\n * @param {object=} md-selected-item A model to bind the selected item to.\r\n * @param {expression=} md-item-text An expression that will convert your object to a single string.\r\n * @param {string=} placeholder Placeholder text that will be forwarded to the input.\r\n * @param {boolean=} md-no-cache Disables the internal caching that happens in autocomplete.\r\n * @param {boolean=} ng-disabled Determines whether or not to disable the input field.\r\n * @param {boolean=} md-require-match When set to true, the autocomplete will add a validator,\r\n * which will evaluate to false, when no item is currently selected.\r\n * @param {number=} md-min-length Specifies the minimum length of text before autocomplete will\r\n * make suggestions.\r\n * @param {number=} md-delay Specifies the amount of time (in milliseconds) to wait before looking\r\n * for results.\r\n * @param {boolean=} md-clear-button Whether the clear button for the autocomplete input should show\r\n * up or not. When `md-floating-label` is set, defaults to false, defaults to true otherwise.\r\n * @param {boolean=} md-autofocus If true, the autocomplete will be automatically focused when a\r\n * `$mdDialog`, `$mdBottomsheet` or `$mdSidenav`, which contains the autocomplete, is opening.\r\n *
\r\n * Also the autocomplete will immediately focus the input element.\r\n * @param {boolean=} md-no-asterisk When present, asterisk will not be appended to the floating\r\n * label.\r\n * @param {boolean=} md-autoselect If set to true, the first item will be automatically selected\r\n * in the dropdown upon open.\r\n * @param {string=} md-input-name The name attribute given to the input element to be used with\r\n * FormController.\r\n * @param {string=} md-menu-class This class will be applied to the dropdown menu for styling.\r\n * @param {string=} md-menu-container-class This class will be applied to the parent container\r\n * of the dropdown panel.\r\n * @param {string=} md-input-class This will be applied to the input for styling. This attribute\r\n * is only valid when a `md-floating-label` is defined.\r\n * @param {string=} md-floating-label This will add a floating label to autocomplete and wrap it in\r\n * `md-input-container`.\r\n * @param {string=} md-select-on-focus When present the input's text will be automatically selected\r\n * on focus.\r\n * @param {string=} md-input-id An ID to be added to the input element.\r\n * @param {number=} md-input-minlength The minimum length for the input's value for validation.\r\n * @param {number=} md-input-maxlength The maximum length for the input's value for validation.\r\n * @param {boolean=} md-select-on-match When set, autocomplete will automatically select\r\n * the item if the search text is an exact match.
\r\n * An exact match is when only one match is displayed.\r\n * @param {boolean=} md-match-case-insensitive When set and using `md-select-on-match`, autocomplete\r\n * will select on case-insensitive match.\r\n * @param {string=} md-escape-options Override escape key logic. Default is `clear`.
\r\n * Options: `blur`, `clear`, `none`.\r\n * @param {string=} md-dropdown-items Specifies the maximum amount of items to be shown in\r\n * the dropdown.
\r\n * When the dropdown doesn't fit into the viewport, the dropdown will shrink\r\n * as much as possible.\r\n * @param {string=} md-dropdown-position Overrides the default dropdown position. Options: `top`,\r\n * `bottom`.\r\n * @param {string=} input-aria-describedby A space-separated list of element IDs. This should\r\n * contain the IDs of any elements that describe this autocomplete. Screen readers will read the\r\n * content of these elements at the end of announcing that the autocomplete has been selected\r\n * and describing its current state. The descriptive elements do not need to be visible on the\r\n * page.\r\n * @param {string=} input-aria-labelledby A space-separated list of element IDs. The ideal use case\r\n * is that this would contain the ID of a `
' : '';\r\n }\r\n\r\n function getRepeatType(repeatMode) {\r\n return isVirtualRepeatDisabled(repeatMode) ?\r\n 'ng-repeat' : 'md-virtual-repeat';\r\n }\r\n\r\n function isVirtualRepeatDisabled(repeatMode) {\r\n // ensure we have a valid repeat mode\r\n var correctedRepeatMode = getRepeatMode(repeatMode);\r\n return correctedRepeatMode !== REPEAT_VIRTUAL;\r\n }\r\n\r\n function getInputElement () {\r\n if (attr.mdFloatingLabel) {\r\n return '\\\r\n \r\n * This can be done by using the following markup.\r\n *\r\n *
\r\n * If you have an application, which changes its theme on runtime, you have to enable theme watching.\r\n *\r\n *
\r\n * You are able to register your own styles by using the following markup.\r\n *\r\n *
\r\n * `theme` - A defined theme via `$mdThemeProvider` to use the palettes from. Default is `default` theme.
\r\n * `palette` - Can be any one of the basic material design palettes, extended defined palettes and 'primary',\r\n * 'accent', 'background' and 'warn'. Default is `primary`.
\r\n * `hue` - The hue from the selected palette. Default is `800`
\r\n *\r\n *
\r\n * - `theme` - `{string}`: A defined theme via `$mdThemeProvider` to use the palettes from. Default is `default` theme.
\r\n * - `palette` - `{string}`: Can be any one of the basic material design palettes, extended defined palettes, or `primary`,\r\n * `accent`, `background`, and `warn`. Default is `primary`.
\r\n * - `hue` - `{string}`: The hue from the selected palette. Default is `800`.
\r\n * @returns {function} Function that removes the browser coloring when called.\r\n */\r\n var enableBrowserColor = function (options) {\r\n options = angular.isObject(options) ? options : {};\r\n\r\n var theme = options.theme || 'default';\r\n var hue = options.hue || '800';\r\n\r\n var palette = PALETTES[options.palette] ||\r\n PALETTES[THEMES[theme].colors[options.palette || 'primary'].name];\r\n\r\n var color = angular.isObject(palette[hue]) ? palette[hue].hex : palette[hue];\r\n if (color.substr(0, 1) !== '#') color = '#' + color;\r\n\r\n return setBrowserColor(color);\r\n };\r\n\r\n return themingProvider = {\r\n definePalette: definePalette,\r\n extendPalette: extendPalette,\r\n theme: registerTheme,\r\n\r\n /**\r\n * return a read-only clone of the current theme configuration\r\n */\r\n configuration : function() {\r\n return angular.extend({ }, themeConfig, {\r\n defaultTheme : defaultTheme,\r\n alwaysWatchTheme : alwaysWatchTheme,\r\n registeredStyles : [].concat(themeConfig.registeredStyles)\r\n });\r\n },\r\n\r\n /**\r\n * @ngdoc method\r\n * @name $mdThemingProvider#disableTheming\r\n * @description\r\n * An easier way to disable theming without having to use `.constant(\"$MD_THEME_CSS\",\"\");`.\r\n * This disables all dynamic theme style sheet generations and injections.\r\n * @param {boolean=} isDisabled Disable all dynamic theme style sheet generations and injections\r\n * if `true` or `undefined`.\r\n */\r\n disableTheming: function(isDisabled) {\r\n themeConfig.disableTheming = angular.isUndefined(isDisabled) || !!isDisabled;\r\n },\r\n\r\n /**\r\n * @ngdoc method\r\n * @name $mdThemingProvider#registerStyles\r\n * @param {string} styles The styles to be appended to AngularJS Material's built in theme CSS.\r\n */\r\n registerStyles: function(styles) {\r\n themeConfig.registeredStyles.push(styles);\r\n },\r\n\r\n /**\r\n * @ngdoc method\r\n * @name $mdThemingProvider#setNonce\r\n * @param {string} nonceValue The nonce to be added as an attribute to the theme style tags.\r\n * Setting a value allows the use of CSP policy without using the `'unsafe-inline'` directive.\r\n * The string must already be base64 encoded. You can use `btoa(string)` to do this encoding.\r\n * In your CSP's `style-src`, you would then add an entry for `'nonce-nonceValue'`.\r\n */\r\n setNonce: function(nonceValue) {\r\n themeConfig.nonce = nonceValue;\r\n },\r\n\r\n generateThemesOnDemand: function(onDemand) {\r\n themeConfig.generateOnDemand = onDemand;\r\n },\r\n\r\n /**\r\n * @ngdoc method\r\n * @name $mdThemingProvider#setDefaultTheme\r\n * @param {string} theme Default theme name to be applied to elements.\r\n * Default value is `default`.\r\n */\r\n setDefaultTheme: function(theme) {\r\n defaultTheme = theme;\r\n },\r\n\r\n /**\r\n * @ngdoc method\r\n * @name $mdThemingProvider#alwaysWatchTheme\r\n * @param {boolean} alwaysWatch Whether or not to always watch themes for changes and re-apply\r\n * classes when they change. Default is `false`. Enabling can reduce performance.\r\n */\r\n alwaysWatchTheme: function(alwaysWatch) {\r\n alwaysWatchTheme = alwaysWatch;\r\n },\r\n\r\n enableBrowserColor: enableBrowserColor,\r\n\r\n $get: ThemingService,\r\n _LIGHT_DEFAULT_HUES: LIGHT_DEFAULT_HUES,\r\n _DARK_DEFAULT_HUES: DARK_DEFAULT_HUES,\r\n _PALETTES: PALETTES,\r\n _THEMES: THEMES,\r\n _parseRules: parseRules,\r\n _rgba: rgba\r\n };\r\n\r\n /**\r\n * @ngdoc method\r\n * @name $mdThemingProvider#definePalette\r\n * @description\r\n * In the event that you need to define a custom color palette, you can use this function to\r\n * make it available to your theme for use in its intention groups.
\r\n * Note that you must specify all hues in the definition map.\r\n * @param {string} name Name of palette being defined\r\n * @param {object} map Palette definition that includes hue definitions and contrast colors:\r\n * - `'50'` - `{string}`: HEX color\r\n * - `'100'` - `{string}`: HEX color\r\n * - `'200'` - `{string}`: HEX color\r\n * - `'300'` - `{string}`: HEX color\r\n * - `'400'` - `{string}`: HEX color\r\n * - `'500'` - `{string}`: HEX color\r\n * - `'600'` - `{string}`: HEX color\r\n * - `'700'` - `{string}`: HEX color\r\n * - `'800'` - `{string}`: HEX color\r\n * - `'900'` - `{string}`: HEX color\r\n * - `'A100'` - `{string}`: HEX color\r\n * - `'A200'` - `{string}`: HEX color\r\n * - `'A400'` - `{string}`: HEX color\r\n * - `'A700'` - `{string}`: HEX color\r\n * - `'contrastDefaultColor'` - `{string}`: `light` or `dark`\r\n * - `'contrastDarkColors'` - `{string[]}`: Hues which should use dark contrast colors (i.e. raised button text).\r\n * For example: `['50', '100', '200', '300', '400', 'A100']`.\r\n * - `'contrastLightColors'` - `{string[]}`: Hues which should use light contrast colors (i.e. raised button text).\r\n * For example: `['500', '600', '700', '800', '900', 'A200', 'A400', 'A700']`.\r\n */\r\n function definePalette(name, map) {\r\n map = map || {};\r\n PALETTES[name] = checkPaletteValid(name, map);\r\n return themingProvider;\r\n }\r\n\r\n /**\r\n * @ngdoc method\r\n * @name $mdThemingProvider#extendPalette\r\n * @description\r\n * Sometimes it is easier to extend an existing color palette and then change a few properties,\r\n * rather than defining a whole new palette.\r\n * @param {string} name Name of palette being extended\r\n * @param {object} map Palette definition that includes optional hue definitions and contrast colors:\r\n * - `'50'` - `{string}`: HEX color\r\n * - `'100'` - `{string}`: HEX color\r\n * - `'200'` - `{string}`: HEX color\r\n * - `'300'` - `{string}`: HEX color\r\n * - `'400'` - `{string}`: HEX color\r\n * - `'500'` - `{string}`: HEX color\r\n * - `'600'` - `{string}`: HEX color\r\n * - `'700'` - `{string}`: HEX color\r\n * - `'800'` - `{string}`: HEX color\r\n * - `'900'` - `{string}`: HEX color\r\n * - `'A100'` - `{string}`: HEX color\r\n * - `'A200'` - `{string}`: HEX color\r\n * - `'A400'` - `{string}`: HEX color\r\n * - `'A700'` - `{string}`: HEX color\r\n * - `'contrastDefaultColor'` - `{string}`: `light` or `dark`\r\n * - `'contrastDarkColors'` - `{string[]}`: Hues which should use dark contrast colors (i.e. raised button text).\r\n * For example: `['50', '100', '200', '300', '400', 'A100']`.\r\n * - `'contrastLightColors'` - `{string[]}`: Hues which should use light contrast colors (i.e. raised button text).\r\n * For example: `['500', '600', '700', '800', '900', 'A200', 'A400', 'A700']`.\r\n * @returns {object} A new object which is a copy of the given palette, `name`,\r\n * with variables from `map` overwritten.\r\n */\r\n function extendPalette(name, map) {\r\n return checkPaletteValid(name, angular.extend({}, PALETTES[name] || {}, map));\r\n }\r\n\r\n // Make sure that palette has all required hues\r\n function checkPaletteValid(name, map) {\r\n var missingColors = VALID_HUE_VALUES.filter(function(field) {\r\n return !map[field];\r\n });\r\n if (missingColors.length) {\r\n throw new Error(\"Missing colors %1 in palette %2!\"\r\n .replace('%1', missingColors.join(', '))\r\n .replace('%2', name));\r\n }\r\n\r\n return map;\r\n }\r\n\r\n /**\r\n * @ngdoc method\r\n * @name $mdThemingProvider#theme\r\n * @description\r\n * Register a theme (which is a collection of color palettes); i.e. `warn`, `accent`,\r\n * `background`, and `primary`.
\r\n * Optionally inherit from an existing theme.\r\n * @param {string} name Name of theme being registered\r\n * @param {string=} inheritFrom Existing theme name to inherit from\r\n */\r\n function registerTheme(name, inheritFrom) {\r\n if (THEMES[name]) return THEMES[name];\r\n\r\n inheritFrom = inheritFrom || 'default';\r\n\r\n var parentTheme = typeof inheritFrom === 'string' ? THEMES[inheritFrom] : inheritFrom;\r\n var theme = new Theme(name);\r\n\r\n if (parentTheme) {\r\n angular.forEach(parentTheme.colors, function(color, colorType) {\r\n theme.colors[colorType] = {\r\n name: color.name,\r\n // Make sure a COPY of the hues is given to the child color,\r\n // not the same reference.\r\n hues: angular.extend({}, color.hues)\r\n };\r\n });\r\n }\r\n THEMES[name] = theme;\r\n\r\n return theme;\r\n }\r\n\r\n function Theme(name) {\r\n var self = this;\r\n self.name = name;\r\n self.colors = {};\r\n\r\n self.dark = setDark;\r\n setDark(false);\r\n\r\n function setDark(isDark) {\r\n isDark = arguments.length === 0 ? true : !!isDark;\r\n\r\n // If no change, abort\r\n if (isDark === self.isDark) return;\r\n\r\n self.isDark = isDark;\r\n\r\n self.foregroundPalette = self.isDark ? LIGHT_FOREGROUND : DARK_FOREGROUND;\r\n self.foregroundShadow = self.isDark ? DARK_SHADOW : LIGHT_SHADOW;\r\n\r\n // Light and dark themes have different default hues.\r\n // Go through each existing color type for this theme, and for every\r\n // hue value that is still the default hue value from the previous light/dark setting,\r\n // set it to the default hue value from the new light/dark setting.\r\n var newDefaultHues = self.isDark ? DARK_DEFAULT_HUES : LIGHT_DEFAULT_HUES;\r\n var oldDefaultHues = self.isDark ? LIGHT_DEFAULT_HUES : DARK_DEFAULT_HUES;\r\n angular.forEach(newDefaultHues, function(newDefaults, colorType) {\r\n var color = self.colors[colorType];\r\n var oldDefaults = oldDefaultHues[colorType];\r\n if (color) {\r\n for (var hueName in color.hues) {\r\n if (color.hues[hueName] === oldDefaults[hueName]) {\r\n color.hues[hueName] = newDefaults[hueName];\r\n }\r\n }\r\n }\r\n });\r\n\r\n return self;\r\n }\r\n\r\n THEME_COLOR_TYPES.forEach(function(colorType) {\r\n var defaultHues = (self.isDark ? DARK_DEFAULT_HUES : LIGHT_DEFAULT_HUES)[colorType];\r\n self[colorType + 'Palette'] = function setPaletteType(paletteName, hues) {\r\n var color = self.colors[colorType] = {\r\n name: paletteName,\r\n hues: angular.extend({}, defaultHues, hues)\r\n };\r\n\r\n Object.keys(color.hues).forEach(function(name) {\r\n if (!defaultHues[name]) {\r\n throw new Error(\"Invalid hue name '%1' in theme %2's %3 color %4. Available hue names: %4\"\r\n .replace('%1', name)\r\n .replace('%2', self.name)\r\n .replace('%3', paletteName)\r\n .replace('%4', Object.keys(defaultHues).join(', '))\r\n );\r\n }\r\n });\r\n Object.keys(color.hues).map(function(key) {\r\n return color.hues[key];\r\n }).forEach(function(hueValue) {\r\n if (VALID_HUE_VALUES.indexOf(hueValue) === -1) {\r\n throw new Error(\"Invalid hue value '%1' in theme %2's %3 color %4. Available hue values: %5\"\r\n .replace('%1', hueValue)\r\n .replace('%2', self.name)\r\n .replace('%3', colorType)\r\n .replace('%4', paletteName)\r\n .replace('%5', VALID_HUE_VALUES.join(', '))\r\n );\r\n }\r\n });\r\n return self;\r\n };\r\n });\r\n }\r\n\r\n /**\r\n * @ngdoc service\r\n * @name $mdTheming\r\n * @module material.core.theming\r\n * @description\r\n * Service that makes an element apply theming related classes to itself.\r\n *\r\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.\r\n *\r\n *
\r\n * - `theme` - `{string}`: A defined theme via `$mdThemeProvider` to use the palettes from.\r\n * Default is `default` theme.
\r\n * - `palette` - `{string}`: Can be any one of the basic material design palettes, extended\r\n * defined palettes, or `primary`, `accent`, `background`, and `warn`. Default is `primary`.\r\n *
\r\n * - `hue` - `{string}`: The hue from the selected palette. Default is `800`.
\r\n * @returns {function} Function that removes the browser coloring when called.\r\n */\r\n\r\n /**\r\n * @ngdoc method\r\n * @name $mdTheming#defineTheme\r\n * @description\r\n * Dynamically define a theme by using an options object that contains palette names.\r\n *\r\n * @param {string} name Theme name to define\r\n * @param {object} options Theme definition options\r\n *\r\n * Options are:
\r\n * - `primary` - `{string}`: The name of the primary palette to use in the theme.
\r\n * - `primaryHues` - `{object=}`: Override hues for primary palette.
\r\n * - `accent` - `{string}`: The name of the accent palette to use in the theme.
\r\n * - `accentHues` - `{object=}`: Override hues for accent palette.
\r\n * - `warn` - `{string}`: The name of the warn palette to use in the theme.
\r\n * - `warnHues` - `{object=}`: Override hues for warn palette.
\r\n * - `background` - `{string}`: The name of the background palette to use in the theme.
\r\n * - `backgroundHues` - `{object=}`: Override hues for background palette.
\r\n * - `dark` - `{boolean}`: Indicates if it's a dark theme.
\r\n * @returns {Promise
\r\n *\r\n * > When encountering issues regarding the item template please take a look at the\r\n * VirtualRepeatContainer documentation.\r\n *\r\n * **Autocomplete inside of a Virtual Repeat**\r\n *\r\n * When using the `md-autocomplete` directive inside of a\r\n * VirtualRepeatContainer the dropdown items\r\n * might not update properly, because caching of the results is enabled by default.\r\n *\r\n * The autocomplete will then show invalid dropdown items, because the Virtual Repeat only updates\r\n * the scope bindings rather than re-creating the `md-autocomplete`. This means that the previous\r\n * cached results will be used.\r\n *\r\n * > To avoid such problems, ensure that the autocomplete does not cache any results via\r\n * `md-no-cache=\"true\"`:\r\n *\r\n *
\r\n * The `results` expression can be also a function, which returns the results synchronously\r\n * or asynchronously (per Promise).\r\n * @param {expression=} md-selected-item-change An expression to be run each time a new item is\r\n * selected.\r\n * @param {expression=} md-search-text-change An expression to be run each time the search text\r\n * updates.\r\n * @param {expression=} md-search-text A model to bind the search query text to.\r\n * @param {object=} md-selected-item A model to bind the selected item to.\r\n * @param {expression=} md-item-text An expression that will convert your object to a single string.\r\n * @param {string=} placeholder Placeholder text that will be forwarded to the input.\r\n * @param {boolean=} md-no-cache Disables the internal caching that happens in autocomplete.\r\n * @param {boolean=} ng-disabled Determines whether or not to disable the input field.\r\n * @param {boolean=} md-require-match When set to true, the autocomplete will add a validator,\r\n * which will evaluate to false, when no item is currently selected.\r\n * @param {number=} md-min-length Specifies the minimum length of text before autocomplete will\r\n * make suggestions.\r\n * @param {number=} md-delay Specifies the amount of time (in milliseconds) to wait before looking\r\n * for results.\r\n * @param {boolean=} md-clear-button Whether the clear button for the autocomplete input should show\r\n * up or not. When `md-floating-label` is set, defaults to false, defaults to true otherwise.\r\n * @param {boolean=} md-autofocus If true, the autocomplete will be automatically focused when a\r\n * `$mdDialog`, `$mdBottomsheet` or `$mdSidenav`, which contains the autocomplete, is opening.\r\n *
\r\n * Also the autocomplete will immediately focus the input element.\r\n * @param {boolean=} md-no-asterisk When present, asterisk will not be appended to the floating\r\n * label.\r\n * @param {boolean=} md-autoselect If set to true, the first item will be automatically selected\r\n * in the dropdown upon open.\r\n * @param {string=} md-input-name The name attribute given to the input element to be used with\r\n * FormController.\r\n * @param {string=} md-menu-class This class will be applied to the dropdown menu for styling.\r\n * @param {string=} md-menu-container-class This class will be applied to the parent container\r\n * of the dropdown panel.\r\n * @param {string=} md-input-class This will be applied to the input for styling. This attribute\r\n * is only valid when a `md-floating-label` is defined.\r\n * @param {string=} md-floating-label This will add a floating label to autocomplete and wrap it in\r\n * `md-input-container`.\r\n * @param {string=} md-select-on-focus When present the input's text will be automatically selected\r\n * on focus.\r\n * @param {string=} md-input-id An ID to be added to the input element.\r\n * @param {number=} md-input-minlength The minimum length for the input's value for validation.\r\n * @param {number=} md-input-maxlength The maximum length for the input's value for validation.\r\n * @param {boolean=} md-select-on-match When set, autocomplete will automatically select\r\n * the item if the search text is an exact match.
\r\n * An exact match is when only one match is displayed.\r\n * @param {boolean=} md-match-case-insensitive When set and using `md-select-on-match`, autocomplete\r\n * will select on case-insensitive match.\r\n * @param {string=} md-escape-options Override escape key logic. Default is `clear`.
\r\n * Options: `blur`, `clear`, `none`.\r\n * @param {string=} md-dropdown-items Specifies the maximum amount of items to be shown in\r\n * the dropdown.
\r\n * When the dropdown doesn't fit into the viewport, the dropdown will shrink\r\n * as much as possible.\r\n * @param {string=} md-dropdown-position Overrides the default dropdown position. Options: `top`,\r\n * `bottom`.\r\n * @param {string=} input-aria-describedby A space-separated list of element IDs. This should\r\n * contain the IDs of any elements that describe this autocomplete. Screen readers will read the\r\n * content of these elements at the end of announcing that the autocomplete has been selected\r\n * and describing its current state. The descriptive elements do not need to be visible on the\r\n * page.\r\n * @param {string=} input-aria-labelledby A space-separated list of element IDs. The ideal use case\r\n * is that this would contain the ID of a `
' + leftover + '
\\\r\n - \r\n *
- \r\n * {{result.text}}\r\n * \r\n *
\r\n * \r\n * Open a Bottom Sheet!\r\n * \r\n *
\r\n * The validation property `md-max-chips` can be used when the max chips\r\n * amount is reached.\r\n * @param {number=} md-min-length Specifies the minimum length of text before autocomplete will\r\n * make suggestions\r\n * @param {string=} md-input-class This class will be applied to the child `md-autocomplete` for\r\n * custom styling.\r\n * @param {string=} input-aria-describedby A space-separated list of element IDs. This should\r\n * contain the IDs of any elements that describe this autocomplete. Screen readers will read\r\n * the content of these elements at the end of announcing that the chips input has been\r\n * selected and describing its current state. The descriptive elements do not need to be\r\n * visible on the page.\r\n * @param {string=} input-aria-labelledby A space-separated list of element IDs. The ideal use\r\n * case is that this would contain the ID of a `
\\\r\n ![\"{{item[$mdContactChipsCtrl.contactName]}}\"\\\r\n]()
\\\r\n \\\r\n {{item[$mdContactChipsCtrl.contactName]}}\\\r\n \\\r\n {{item[$mdContactChipsCtrl.contactEmail]}}\\\r\n
\\\r\n \\\r\n \\\r\n ![\"{{$chip[$mdContactChipsCtrl.contactName]}}\"\\\r\n]()
\\\r\n
\\\r\n \\\r\n {{$chip[$mdContactChipsCtrl.contactName]}}\\\r\n
\\\r\n \r\n *
\r\n * \r\n * Color demo\r\n *
\r\n * \r\n *
\r\n * \r\n * Color demo\r\n *
\r\n * ' +\r\n '
';\r\n },\r\n scope: {\r\n minDate: '=mdMinDate',\r\n maxDate: '=mdMaxDate',\r\n dateFilter: '=mdDateFilter',\r\n monthFilter: '=mdMonthFilter',\r\n\r\n // These need to be prefixed, because Angular resets\r\n // any changes to the value due to bindToController.\r\n _mode: '@mdMode',\r\n _currentView: '@mdCurrentView'\r\n },\r\n require: ['ngModel', 'mdCalendar'],\r\n controller: CalendarCtrl,\r\n controllerAs: 'calendarCtrl',\r\n bindToController: true,\r\n link: function(scope, element, attrs, controllers) {\r\n var ngModelCtrl = controllers[0];\r\n var mdCalendarCtrl = controllers[1];\r\n mdCalendarCtrl.configureNgModel(ngModelCtrl, inputDirective);\r\n }\r\n };\r\n }\r\n\r\n /**\r\n * Occasionally the hideVerticalScrollbar method might read an element's\r\n * width as 0, because it hasn't been laid out yet. This value will be used\r\n * as a fallback, in order to prevent scenarios where the element's width\r\n * would otherwise have been set to 0. This value is the \"usual\" width of a\r\n * calendar within a floating calendar pane.\r\n */\r\n var FALLBACK_WIDTH = 340;\r\n\r\n /** Next identifier for calendar instance. */\r\n var nextUniqueId = 0;\r\n\r\n /** Maps the `md-mode` values to their corresponding calendar views. */\r\n var MODE_MAP = {\r\n day: 'month',\r\n month: 'year'\r\n };\r\n\r\n /**\r\n * Controller for the mdCalendar component.\r\n * @ngInject @constructor\r\n */\r\n function CalendarCtrl($element, $scope, $$mdDateUtil, $mdUtil, $mdConstant, $mdTheming, $$rAF,\r\n $attrs, $mdDateLocale, $filter, $document) {\r\n $mdTheming($element);\r\n\r\n /**\r\n * @final\r\n * @type {!JQLite}\r\n */\r\n this.$element = $element;\r\n\r\n /**\r\n * @final\r\n * @type {!angular.Scope}\r\n */\r\n this.$scope = $scope;\r\n\r\n /**\r\n * @final\r\n * @type {!angular.$attrs} Current attributes object for the element\r\n */\r\n this.$attrs = $attrs;\r\n\r\n /** @final */\r\n this.dateUtil = $$mdDateUtil;\r\n\r\n /** @final */\r\n this.$mdUtil = $mdUtil;\r\n\r\n /** @final */\r\n this.keyCode = $mdConstant.KEY_CODE;\r\n\r\n /** @final */\r\n this.$$rAF = $$rAF;\r\n\r\n /** @final */\r\n this.$mdDateLocale = $mdDateLocale;\r\n\r\n /** @final The built-in Angular date filter. */\r\n this.ngDateFilter = $filter('date');\r\n\r\n /**\r\n * @final\r\n * @type {Date}\r\n */\r\n this.today = this.dateUtil.createDateAtMidnight();\r\n\r\n /** @type {!ngModel.NgModelController} */\r\n this.ngModelCtrl = undefined;\r\n\r\n /** @type {string} Class applied to the selected date cell. */\r\n this.SELECTED_DATE_CLASS = 'md-calendar-selected-date';\r\n\r\n /** @type {string} Class applied to the cell for today. */\r\n this.TODAY_CLASS = 'md-calendar-date-today';\r\n\r\n /** @type {string} Class applied to the focused cell. */\r\n this.FOCUSED_DATE_CLASS = 'md-focus';\r\n\r\n /**\r\n * @final\r\n * @type {number} Unique ID for this calendar instance.\r\n */\r\n this.id = nextUniqueId++;\r\n\r\n /**\r\n * The date that is currently focused or showing in the calendar. This will initially be set\r\n * to the ng-model value if set, otherwise to today. It will be updated as the user navigates\r\n * to other months. The cell corresponding to the displayDate does not necessarily always have\r\n * focus in the document (such as for cases when the user is scrolling the calendar).\r\n * @type {Date}\r\n */\r\n this.displayDate = null;\r\n\r\n /**\r\n * Allows restricting the calendar to only allow selecting a month or a day.\r\n * @type {'month'|'day'|null}\r\n */\r\n this.mode = null;\r\n\r\n /**\r\n * The selected date. Keep track of this separately from the ng-model value so that we\r\n * can know, when the ng-model value changes, what the previous value was before it's updated\r\n * in the component's UI.\r\n *\r\n * @type {Date}\r\n */\r\n this.selectedDate = null;\r\n\r\n /**\r\n * The first date that can be rendered by the calendar. The default is taken\r\n * from the mdDateLocale provider and is limited by the mdMinDate.\r\n * @type {Date}\r\n */\r\n this.firstRenderableDate = null;\r\n\r\n /**\r\n * The last date that can be rendered by the calendar. The default comes\r\n * from the mdDateLocale provider and is limited by the maxDate.\r\n * @type {Date}\r\n */\r\n this.lastRenderableDate = null;\r\n\r\n /**\r\n * Used to toggle initialize the root element in the next digest.\r\n * @type {boolean}\r\n */\r\n this.isInitialized = false;\r\n\r\n /**\r\n * Cache for the width of the element without a scrollbar. Used to hide the scrollbar later on\r\n * and to avoid extra reflows when switching between views.\r\n * @type {number}\r\n */\r\n this.width = 0;\r\n\r\n /**\r\n * Caches the width of the scrollbar in order to be used when hiding it and to avoid extra reflows.\r\n * @type {number}\r\n */\r\n this.scrollbarWidth = 0;\r\n\r\n /**\r\n * @type {boolean} set to true if the calendar is being used \"standalone\" (outside of a\r\n * md-datepicker).\r\n */\r\n this.standaloneMode = false;\r\n\r\n // Unless the user specifies so, the calendar should not be a tab stop.\r\n // This is necessary because ngAria might add a tabindex to anything with an ng-model\r\n // (based on whether or not the user has turned that particular feature on/off).\r\n if (!$attrs.tabindex) {\r\n $element.attr('tabindex', '-1');\r\n }\r\n\r\n var boundKeyHandler = angular.bind(this, this.handleKeyEvent);\r\n\r\n // If use the md-calendar directly in the body without datepicker,\r\n // handleKeyEvent will disable other inputs on the page.\r\n // So only apply the handleKeyEvent on the body when the md-calendar inside datepicker,\r\n // otherwise apply on the calendar element only.\r\n\r\n var handleKeyElement;\r\n if ($element.parent().hasClass('md-datepicker-calendar')) {\r\n handleKeyElement = angular.element($document[0].body);\r\n } else {\r\n this.standaloneMode = true;\r\n handleKeyElement = $element;\r\n }\r\n\r\n // Bind the keydown handler to the body, in order to handle cases where the focused\r\n // element gets removed from the DOM and stops propagating click events.\r\n handleKeyElement.on('keydown', boundKeyHandler);\r\n\r\n $scope.$on('$destroy', function() {\r\n handleKeyElement.off('keydown', boundKeyHandler);\r\n });\r\n\r\n // For AngularJS 1.4 and older, where there are no lifecycle hooks but bindings are pre-assigned,\r\n // manually call the $onInit hook.\r\n if (angular.version.major === 1 && angular.version.minor <= 4) {\r\n this.$onInit();\r\n }\r\n }\r\n\r\n /**\r\n * AngularJS Lifecycle hook for newer AngularJS versions.\r\n * Bindings are not guaranteed to have been assigned in the controller, but they are in the\r\n * $onInit hook.\r\n */\r\n CalendarCtrl.prototype.$onInit = function() {\r\n /**\r\n * The currently visible calendar view. Note the prefix on the scope value,\r\n * which is necessary, because the datepicker seems to reset the real one value if the\r\n * calendar is open, but the `currentView` on the datepicker's scope is empty.\r\n * @type {String}\r\n */\r\n if (this._mode && MODE_MAP.hasOwnProperty(this._mode)) {\r\n this.currentView = MODE_MAP[this._mode];\r\n this.mode = this._mode;\r\n } else {\r\n this.currentView = this._currentView || 'month';\r\n this.mode = null;\r\n }\r\n\r\n if (this.minDate && this.minDate > this.$mdDateLocale.firstRenderableDate) {\r\n this.firstRenderableDate = this.minDate;\r\n } else {\r\n this.firstRenderableDate = this.$mdDateLocale.firstRenderableDate;\r\n }\r\n\r\n if (this.maxDate && this.maxDate < this.$mdDateLocale.lastRenderableDate) {\r\n this.lastRenderableDate = this.maxDate;\r\n } else {\r\n this.lastRenderableDate = this.$mdDateLocale.lastRenderableDate;\r\n }\r\n };\r\n\r\n /**\r\n * Sets up the controller's reference to ngModelController.\r\n * @param {!ngModel.NgModelController} ngModelCtrl Instance of the ngModel controller.\r\n * @param {Object} inputDirective Config for AngularJS's `input` directive.\r\n */\r\n CalendarCtrl.prototype.configureNgModel = function(ngModelCtrl, inputDirective) {\r\n var self = this;\r\n self.ngModelCtrl = ngModelCtrl;\r\n\r\n // The component needs to be [type=\"date\"] in order to be picked up by AngularJS.\r\n this.$attrs.$set('type', 'date');\r\n\r\n // Invoke the `input` directive link function, adding a stub for the element.\r\n // This allows us to re-use AngularJS' logic for setting the timezone via ng-model-options.\r\n // It works by calling the link function directly which then adds the proper `$parsers` and\r\n // `$formatters` to the NgModelController.\r\n inputDirective[0].link.pre(this.$scope, {\r\n on: angular.noop,\r\n val: angular.noop,\r\n 0: {}\r\n }, this.$attrs, [ngModelCtrl]);\r\n\r\n ngModelCtrl.$render = function() {\r\n var value = this.$viewValue, convertedDate;\r\n\r\n // In the case where a conversion is needed, the $viewValue here will be a string like\r\n // \"2020-05-10\" instead of a Date object.\r\n if (!self.dateUtil.isValidDate(value)) {\r\n convertedDate = self.dateUtil.removeLocalTzAndReparseDate(new Date(value));\r\n if (self.dateUtil.isValidDate(convertedDate)) {\r\n value = convertedDate;\r\n }\r\n }\r\n\r\n // Notify the child scopes of any changes.\r\n self.$scope.$broadcast('md-calendar-parent-changed', value);\r\n\r\n // Set up the selectedDate if it hasn't been already.\r\n if (!self.selectedDate) {\r\n self.selectedDate = value;\r\n }\r\n\r\n // Also set up the displayDate.\r\n if (!self.displayDate) {\r\n self.displayDate = self.selectedDate || self.today;\r\n }\r\n };\r\n\r\n self.$mdUtil.nextTick(function() {\r\n self.isInitialized = true;\r\n });\r\n };\r\n\r\n /**\r\n * Sets the ng-model value for the calendar and emits a change event.\r\n * @param {Date} date new value for the calendar\r\n */\r\n CalendarCtrl.prototype.setNgModelValue = function(date) {\r\n var timezone = this.$mdUtil.getModelOption(this.ngModelCtrl, 'timezone');\r\n var value = this.dateUtil.createDateAtMidnight(date);\r\n this.focusDate(value);\r\n this.$scope.$emit('md-calendar-change', value);\r\n // Using the timezone when the offset is negative (GMT+X) causes the previous day to be\r\n // selected here. This check avoids that.\r\n if (timezone == null || value.getTimezoneOffset() < 0) {\r\n this.ngModelCtrl.$setViewValue(this.ngDateFilter(value, 'yyyy-MM-dd'), 'default');\r\n } else {\r\n this.ngModelCtrl.$setViewValue(this.ngDateFilter(value, 'yyyy-MM-dd', timezone), 'default');\r\n }\r\n this.ngModelCtrl.$render();\r\n return value;\r\n };\r\n\r\n /**\r\n * Sets the current view that should be visible in the calendar\r\n * @param {string} newView View name to be set.\r\n * @param {number|Date} time Date object or a timestamp for the new display date.\r\n */\r\n CalendarCtrl.prototype.setCurrentView = function(newView, time) {\r\n var self = this;\r\n\r\n self.$mdUtil.nextTick(function() {\r\n self.currentView = newView;\r\n\r\n if (time) {\r\n self.displayDate = angular.isDate(time) ? time : new Date(time);\r\n }\r\n });\r\n };\r\n\r\n /**\r\n * Focus the cell corresponding to the given date.\r\n * @param {Date=} date The date to be focused.\r\n */\r\n CalendarCtrl.prototype.focusDate = function(date) {\r\n if (this.dateUtil.isValidDate(date)) {\r\n var previousFocus = this.$element[0].querySelector('.' + this.FOCUSED_DATE_CLASS);\r\n if (previousFocus) {\r\n previousFocus.classList.remove(this.FOCUSED_DATE_CLASS);\r\n }\r\n\r\n var cellId = this.getDateId(date, this.currentView);\r\n var cell = document.getElementById(cellId);\r\n if (cell) {\r\n cell.classList.add(this.FOCUSED_DATE_CLASS);\r\n cell.focus();\r\n this.displayDate = date;\r\n }\r\n } else {\r\n var rootElement = this.$element[0].querySelector('[ng-switch]');\r\n\r\n if (rootElement) {\r\n rootElement.focus();\r\n }\r\n }\r\n };\r\n\r\n /**\r\n * Highlights a date cell on the calendar and changes the selected date.\r\n * @param {Date=} date Date to be marked as selected.\r\n */\r\n CalendarCtrl.prototype.changeSelectedDate = function(date) {\r\n var selectedDateClass = this.SELECTED_DATE_CLASS;\r\n var prevDateCell = this.$element[0].querySelector('.' + selectedDateClass);\r\n\r\n // Remove the selected class from the previously selected date, if any.\r\n if (prevDateCell) {\r\n prevDateCell.classList.remove(selectedDateClass);\r\n prevDateCell.setAttribute('aria-selected', 'false');\r\n }\r\n\r\n // Apply the select class to the new selected date if it is set.\r\n if (date) {\r\n var dateCell = document.getElementById(this.getDateId(date, this.currentView));\r\n if (dateCell) {\r\n dateCell.classList.add(selectedDateClass);\r\n dateCell.setAttribute('aria-selected', 'true');\r\n }\r\n }\r\n\r\n this.selectedDate = date;\r\n };\r\n\r\n /**\r\n * Normalizes the key event into an action name. The action will be broadcast\r\n * to the child controllers.\r\n * @param {KeyboardEvent} event\r\n * @returns {string} The action that should be taken, or null if the key\r\n * does not match a calendar shortcut.\r\n */\r\n CalendarCtrl.prototype.getActionFromKeyEvent = function(event) {\r\n var keyCode = this.keyCode;\r\n\r\n switch (event.which) {\r\n case keyCode.ENTER: return 'select';\r\n\r\n case keyCode.RIGHT_ARROW: return 'move-right';\r\n case keyCode.LEFT_ARROW: return 'move-left';\r\n\r\n case keyCode.DOWN_ARROW: return event.metaKey ? 'move-page-down' : 'move-row-down';\r\n case keyCode.UP_ARROW: return event.metaKey ? 'move-page-up' : 'move-row-up';\r\n\r\n case keyCode.PAGE_DOWN: return 'move-page-down';\r\n case keyCode.PAGE_UP: return 'move-page-up';\r\n\r\n case keyCode.HOME: return 'start';\r\n case keyCode.END: return 'end';\r\n\r\n default: return null;\r\n }\r\n };\r\n\r\n /**\r\n * Handles a key event in the calendar with the appropriate action.\r\n * The action will either\r\n * - select the focused date\r\n * - navigate to focus a new date\r\n * - emit a md-calendar-close event if in a md-datepicker panel\r\n * - emit a md-calendar-parent-action\r\n * - delegate to normal tab order if the TAB key is pressed in standalone mode\r\n * @param {KeyboardEvent} event\r\n */\r\n CalendarCtrl.prototype.handleKeyEvent = function(event) {\r\n var self = this;\r\n\r\n this.$scope.$apply(function() {\r\n // Capture escape and emit back up so that a wrapping component\r\n // (such as a date-picker) can decide to close.\r\n if (event.which === self.keyCode.ESCAPE ||\r\n (event.which === self.keyCode.TAB && !self.standaloneMode)) {\r\n self.$scope.$emit('md-calendar-close');\r\n\r\n if (event.which === self.keyCode.TAB) {\r\n event.preventDefault();\r\n }\r\n\r\n return;\r\n } else if (event.which === self.keyCode.TAB && self.standaloneMode) {\r\n // delegate to the normal tab order if the TAB key is pressed in standalone mode\r\n return;\r\n }\r\n\r\n // Broadcast the action that any child controllers should take.\r\n var action = self.getActionFromKeyEvent(event);\r\n if (action) {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n self.$scope.$broadcast('md-calendar-parent-action', action);\r\n }\r\n });\r\n };\r\n\r\n /**\r\n * Hides the vertical scrollbar on the calendar scroller of a child controller by\r\n * setting the width on the calendar scroller and the `overflow: hidden` wrapper\r\n * around the scroller, and then setting a padding-right on the scroller equal\r\n * to the width of the browser's scrollbar.\r\n *\r\n * This will cause a reflow.\r\n *\r\n * @param {object} childCtrl The child controller whose scrollbar should be hidden.\r\n */\r\n CalendarCtrl.prototype.hideVerticalScrollbar = function(childCtrl) {\r\n var self = this;\r\n var element = childCtrl.$element[0];\r\n var scrollMask = element.querySelector('.md-calendar-scroll-mask');\r\n\r\n if (self.width > 0) {\r\n setWidth();\r\n } else {\r\n self.$$rAF(function() {\r\n var scroller = childCtrl.calendarScroller;\r\n\r\n self.scrollbarWidth = scroller.offsetWidth - scroller.clientWidth;\r\n self.width = element.querySelector('table').offsetWidth;\r\n setWidth();\r\n });\r\n }\r\n\r\n function setWidth() {\r\n var width = self.width || FALLBACK_WIDTH;\r\n var scrollbarWidth = self.scrollbarWidth;\r\n var scroller = childCtrl.calendarScroller;\r\n\r\n scrollMask.style.width = width + 'px';\r\n scroller.style.width = (width + scrollbarWidth) + 'px';\r\n scroller.style.paddingRight = scrollbarWidth + 'px';\r\n }\r\n };\r\n\r\n /**\r\n * Gets an identifier for a date unique to the calendar instance for internal\r\n * purposes. Not to be displayed.\r\n * @param {Date} date The date for which the id is being generated\r\n * @param {string} namespace Namespace for the id. (month, year etc.)\r\n * @returns {string}\r\n */\r\n CalendarCtrl.prototype.getDateId = function(date, namespace) {\r\n if (!namespace) {\r\n throw new Error('A namespace for the date id has to be specified.');\r\n }\r\n\r\n return [\r\n 'md',\r\n this.id,\r\n namespace,\r\n date.getFullYear(),\r\n date.getMonth(),\r\n date.getDate()\r\n ].join('-');\r\n };\r\n\r\n /**\r\n * Util to trigger an extra digest on a parent scope, in order to to ensure that\r\n * any child virtual repeaters have updated. This is necessary, because the virtual\r\n * repeater doesn't update the $index the first time around since the content isn't\r\n * in place yet. The case, in which this is an issue, is when the repeater has less\r\n * than a page of content (e.g. a month or year view has a min or max date).\r\n */\r\n CalendarCtrl.prototype.updateVirtualRepeat = function() {\r\n var scope = this.$scope;\r\n var virtualRepeatResizeListener = scope.$on('$md-resize-enable', function() {\r\n if (!scope.$$phase) {\r\n scope.$apply();\r\n }\r\n\r\n virtualRepeatResizeListener();\r\n });\r\n };\r\n})();\r\n\r\n})();\r\n(function(){\r\n\"use strict\";\r\n\r\n(function() {\r\n 'use strict';\r\n\r\n CalendarMonthCtrl.$inject = [\"$element\", \"$scope\", \"$animate\", \"$q\", \"$$mdDateUtil\", \"$mdDateLocale\"];\r\n angular.module('material.components.datepicker')\r\n .directive('mdCalendarMonth', calendarDirective);\r\n\r\n /**\r\n * Height of one calendar month tbody. This must be made known to the virtual-repeat and is\r\n * subsequently used for scrolling to specific months.\r\n */\r\n var TBODY_HEIGHT = 265;\r\n\r\n /**\r\n * Height of a calendar month with a single row. This is needed to calculate the offset for\r\n * rendering an extra month in virtual-repeat that only contains one row.\r\n */\r\n var TBODY_SINGLE_ROW_HEIGHT = 45;\r\n\r\n /** Private directive that represents a list of months inside the calendar. */\r\n function calendarDirective() {\r\n return {\r\n template:\r\n '' +\r\n '' +\r\n '' +\r\n '' +\r\n\r\n // The
' +\r\n ' ' +\r\n '
',\r\n require: ['^^mdCalendar', 'mdCalendarMonth'],\r\n controller: CalendarMonthCtrl,\r\n controllerAs: 'monthCtrl',\r\n bindToController: true,\r\n link: function(scope, element, attrs, controllers) {\r\n var calendarCtrl = controllers[0];\r\n var monthCtrl = controllers[1];\r\n monthCtrl.initialize(calendarCtrl);\r\n }\r\n };\r\n }\r\n\r\n /**\r\n * Controller for the calendar month component.\r\n * @ngInject @constructor\r\n */\r\n function CalendarMonthCtrl($element, $scope, $animate, $q,\r\n $$mdDateUtil, $mdDateLocale) {\r\n\r\n /** @final {!angular.JQLite} */\r\n this.$element = $element;\r\n\r\n /** @final {!angular.Scope} */\r\n this.$scope = $scope;\r\n\r\n /** @final {!angular.$animate} */\r\n this.$animate = $animate;\r\n\r\n /** @final {!angular.$q} */\r\n this.$q = $q;\r\n\r\n /** @final */\r\n this.dateUtil = $$mdDateUtil;\r\n\r\n /** @final */\r\n this.dateLocale = $mdDateLocale;\r\n\r\n /** @final {HTMLElement} */\r\n this.calendarScroller = $element[0].querySelector('.md-virtual-repeat-scroller');\r\n\r\n /** @type {boolean} */\r\n this.isInitialized = false;\r\n\r\n /** @type {boolean} */\r\n this.isMonthTransitionInProgress = false;\r\n\r\n var self = this;\r\n\r\n /**\r\n * Handles a click event on a date cell.\r\n * Created here so that every cell can use the same function instance.\r\n * @this {HTMLTableCellElement} The cell that was clicked.\r\n */\r\n this.cellClickHandler = function() {\r\n var timestamp = $$mdDateUtil.getTimestampFromNode(this);\r\n self.$scope.$apply(function() {\r\n // The timestamp has to be converted to a valid date.\r\n self.calendarCtrl.setNgModelValue(new Date(timestamp));\r\n });\r\n };\r\n\r\n /**\r\n * Handles click events on the month headers. Switches\r\n * the calendar to the year view.\r\n * @this {HTMLTableCellElement} The cell that was clicked.\r\n */\r\n this.headerClickHandler = function() {\r\n self.calendarCtrl.setCurrentView('year', $$mdDateUtil.getTimestampFromNode(this));\r\n };\r\n }\r\n\r\n /** Initialization **/\r\n\r\n /**\r\n * Initialize the controller by saving a reference to the calendar and\r\n * setting up the object that will be iterated by the virtual repeater.\r\n */\r\n CalendarMonthCtrl.prototype.initialize = function(calendarCtrl) {\r\n /**\r\n * Dummy array-like object for virtual-repeat to iterate over. The length is the total\r\n * number of months that can be viewed. We add 2 months: one to include the current month\r\n * and one for the last dummy month.\r\n *\r\n * This is shorter than ideal because of a (potential) Firefox bug\r\n * https://bugzilla.mozilla.org/show_bug.cgi?id=1181658.\r\n */\r\n\r\n this.items = {\r\n length: this.dateUtil.getMonthDistance(\r\n calendarCtrl.firstRenderableDate,\r\n calendarCtrl.lastRenderableDate\r\n ) + 2\r\n };\r\n\r\n this.calendarCtrl = calendarCtrl;\r\n this.attachScopeListeners();\r\n calendarCtrl.updateVirtualRepeat();\r\n\r\n // Fire the initial render, since we might have missed it the first time it fired.\r\n calendarCtrl.ngModelCtrl && calendarCtrl.ngModelCtrl.$render();\r\n };\r\n\r\n /**\r\n * Gets the \"index\" of the currently selected date as it would be in the virtual-repeat.\r\n * @returns {number} the \"index\" of the currently selected date\r\n */\r\n CalendarMonthCtrl.prototype.getSelectedMonthIndex = function() {\r\n var calendarCtrl = this.calendarCtrl;\r\n\r\n return this.dateUtil.getMonthDistance(\r\n calendarCtrl.firstRenderableDate,\r\n calendarCtrl.displayDate || calendarCtrl.selectedDate || calendarCtrl.today\r\n );\r\n };\r\n\r\n /**\r\n * Change the date that is being shown in the calendar. If the given date is in a different\r\n * month, the displayed month will be transitioned.\r\n * @param {Date} date\r\n */\r\n CalendarMonthCtrl.prototype.changeDisplayDate = function(date) {\r\n // Initialization is deferred until this function is called because we want to reflect\r\n // the starting value of ngModel.\r\n if (!this.isInitialized) {\r\n this.buildWeekHeader();\r\n this.calendarCtrl.hideVerticalScrollbar(this);\r\n this.isInitialized = true;\r\n return this.$q.when();\r\n }\r\n\r\n // If trying to show an invalid date or a transition is in progress, do nothing.\r\n if (!this.dateUtil.isValidDate(date) || this.isMonthTransitionInProgress) {\r\n return this.$q.when();\r\n }\r\n\r\n this.isMonthTransitionInProgress = true;\r\n var animationPromise = this.animateDateChange(date);\r\n\r\n this.calendarCtrl.displayDate = date;\r\n\r\n var self = this;\r\n animationPromise.then(function() {\r\n self.isMonthTransitionInProgress = false;\r\n });\r\n\r\n return animationPromise;\r\n };\r\n\r\n /**\r\n * Animates the transition from the calendar's current month to the given month.\r\n * @param {Date} date\r\n * @returns {angular.$q.Promise} The animation promise.\r\n */\r\n CalendarMonthCtrl.prototype.animateDateChange = function(date) {\r\n if (this.dateUtil.isValidDate(date)) {\r\n var monthDistance = this.dateUtil.getMonthDistance(this.calendarCtrl.firstRenderableDate, date);\r\n this.calendarScroller.scrollTop = monthDistance * TBODY_HEIGHT;\r\n }\r\n\r\n return this.$q.when();\r\n };\r\n\r\n /**\r\n * Builds and appends a day-of-the-week header to the calendar.\r\n * This should only need to be called once during initialization.\r\n */\r\n CalendarMonthCtrl.prototype.buildWeekHeader = function() {\r\n var firstDayOfWeek = this.dateLocale.firstDayOfWeek;\r\n var shortDays = this.dateLocale.shortDays;\r\n\r\n var row = document.createElement('tr');\r\n for (var i = 0; i < 7; i++) {\r\n var th = document.createElement('th');\r\n th.textContent = shortDays[(i + firstDayOfWeek) % 7];\r\n row.appendChild(th);\r\n }\r\n\r\n this.$element.find('thead').append(row);\r\n };\r\n\r\n /**\r\n * Attaches listeners for the scope events that are broadcast by the calendar.\r\n */\r\n CalendarMonthCtrl.prototype.attachScopeListeners = function() {\r\n var self = this;\r\n\r\n self.$scope.$on('md-calendar-parent-changed', function(event, value) {\r\n self.calendarCtrl.changeSelectedDate(value);\r\n self.changeDisplayDate(value);\r\n });\r\n\r\n self.$scope.$on('md-calendar-parent-action', angular.bind(this, this.handleKeyEvent));\r\n };\r\n\r\n /**\r\n * Handles the month-specific keyboard interactions.\r\n * @param {Object} event Scope event object passed by the calendar.\r\n * @param {String} action Action, corresponding to the key that was pressed.\r\n */\r\n CalendarMonthCtrl.prototype.handleKeyEvent = function(event, action) {\r\n var calendarCtrl = this.calendarCtrl;\r\n var displayDate = calendarCtrl.displayDate;\r\n\r\n if (action === 'select') {\r\n calendarCtrl.setNgModelValue(displayDate);\r\n } else {\r\n var date = null;\r\n var dateUtil = this.dateUtil;\r\n\r\n switch (action) {\r\n case 'move-right': date = dateUtil.incrementDays(displayDate, 1); break;\r\n case 'move-left': date = dateUtil.incrementDays(displayDate, -1); break;\r\n\r\n case 'move-page-down': date = dateUtil.incrementMonths(displayDate, 1); break;\r\n case 'move-page-up': date = dateUtil.incrementMonths(displayDate, -1); break;\r\n\r\n case 'move-row-down': date = dateUtil.incrementDays(displayDate, 7); break;\r\n case 'move-row-up': date = dateUtil.incrementDays(displayDate, -7); break;\r\n\r\n case 'start': date = dateUtil.getFirstDateOfMonth(displayDate); break;\r\n case 'end': date = dateUtil.getLastDateOfMonth(displayDate); break;\r\n }\r\n\r\n if (date) {\r\n date = this.dateUtil.clampDate(date, calendarCtrl.minDate, calendarCtrl.maxDate);\r\n\r\n this.changeDisplayDate(date).then(function() {\r\n calendarCtrl.focusDate(date);\r\n });\r\n }\r\n }\r\n };\r\n})();\r\n\r\n})();\r\n(function(){\r\n\"use strict\";\r\n\r\n(function() {\r\n 'use strict';\r\n\r\n mdCalendarMonthBodyDirective.$inject = [\"$compile\", \"$$mdSvgRegistry\"];\r\n CalendarMonthBodyCtrl.$inject = [\"$element\", \"$$mdDateUtil\", \"$mdDateLocale\"];\r\n angular.module('material.components.datepicker')\r\n .directive('mdCalendarMonthBody', mdCalendarMonthBodyDirective);\r\n\r\n /**\r\n * Private directive consumed by md-calendar-month. Having this directive lets the calender use\r\n * md-virtual-repeat and also cleanly separates the month DOM construction functions from\r\n * the rest of the calendar controller logic.\r\n * @ngInject\r\n */\r\n function mdCalendarMonthBodyDirective($compile, $$mdSvgRegistry) {\r\n var ARROW_ICON = $compile('' +\r\n '' +\r\n '' +\r\n '' +\r\n // The
' +\r\n ' ' +\r\n '
',\r\n require: ['^^mdCalendar', 'mdCalendarYear'],\r\n controller: CalendarYearCtrl,\r\n controllerAs: 'yearCtrl',\r\n bindToController: true,\r\n link: function(scope, element, attrs, controllers) {\r\n var calendarCtrl = controllers[0];\r\n var yearCtrl = controllers[1];\r\n yearCtrl.initialize(calendarCtrl);\r\n }\r\n };\r\n }\r\n\r\n /**\r\n * Controller for the mdCalendar component.\r\n * @ngInject @constructor\r\n */\r\n function CalendarYearCtrl($element, $scope, $animate, $q, $$mdDateUtil, $mdUtil) {\r\n\r\n /** @final {!angular.JQLite} */\r\n this.$element = $element;\r\n\r\n /** @final {!angular.Scope} */\r\n this.$scope = $scope;\r\n\r\n /** @final {!angular.$animate} */\r\n this.$animate = $animate;\r\n\r\n /** @final {!angular.$q} */\r\n this.$q = $q;\r\n\r\n /** @final */\r\n this.dateUtil = $$mdDateUtil;\r\n\r\n /** @final {HTMLElement} */\r\n this.calendarScroller = $element[0].querySelector('.md-virtual-repeat-scroller');\r\n\r\n /** @type {boolean} */\r\n this.isInitialized = false;\r\n\r\n /** @type {boolean} */\r\n this.isMonthTransitionInProgress = false;\r\n\r\n /** @final */\r\n this.$mdUtil = $mdUtil;\r\n\r\n var self = this;\r\n\r\n /**\r\n * Handles a click event on a date cell.\r\n * Created here so that every cell can use the same function instance.\r\n * @this {HTMLTableCellElement} The cell that was clicked.\r\n */\r\n this.cellClickHandler = function() {\r\n self.onTimestampSelected($$mdDateUtil.getTimestampFromNode(this));\r\n };\r\n }\r\n\r\n /**\r\n * Initialize the controller by saving a reference to the calendar and\r\n * setting up the object that will be iterated by the virtual repeater.\r\n */\r\n CalendarYearCtrl.prototype.initialize = function(calendarCtrl) {\r\n /**\r\n * Dummy array-like object for virtual-repeat to iterate over. The length is the total\r\n * number of years that can be viewed. We add 1 extra in order to include the current year.\r\n */\r\n\r\n this.items = {\r\n length: this.dateUtil.getYearDistance(\r\n calendarCtrl.firstRenderableDate,\r\n calendarCtrl.lastRenderableDate\r\n ) + 1\r\n };\r\n\r\n this.calendarCtrl = calendarCtrl;\r\n this.attachScopeListeners();\r\n calendarCtrl.updateVirtualRepeat();\r\n\r\n // Fire the initial render, since we might have missed it the first time it fired.\r\n calendarCtrl.ngModelCtrl && calendarCtrl.ngModelCtrl.$render();\r\n };\r\n\r\n /**\r\n * Gets the \"index\" of the currently selected date as it would be in the virtual-repeat.\r\n * @returns {number}\r\n */\r\n CalendarYearCtrl.prototype.getFocusedYearIndex = function() {\r\n var calendarCtrl = this.calendarCtrl;\r\n\r\n return this.dateUtil.getYearDistance(\r\n calendarCtrl.firstRenderableDate,\r\n calendarCtrl.displayDate || calendarCtrl.selectedDate || calendarCtrl.today\r\n );\r\n };\r\n\r\n /**\r\n * Change the date that is highlighted in the calendar.\r\n * @param {Date} date\r\n */\r\n CalendarYearCtrl.prototype.changeDate = function(date) {\r\n // Initialization is deferred until this function is called because we want to reflect\r\n // the starting value of ngModel.\r\n if (!this.isInitialized) {\r\n this.calendarCtrl.hideVerticalScrollbar(this);\r\n this.isInitialized = true;\r\n return this.$q.when();\r\n } else if (this.dateUtil.isValidDate(date) && !this.isMonthTransitionInProgress) {\r\n var self = this;\r\n var animationPromise = this.animateDateChange(date);\r\n\r\n self.isMonthTransitionInProgress = true;\r\n self.calendarCtrl.displayDate = date;\r\n\r\n return animationPromise.then(function() {\r\n self.isMonthTransitionInProgress = false;\r\n });\r\n }\r\n };\r\n\r\n /**\r\n * Animates the transition from the calendar's current month to the given month.\r\n * @param {Date} date\r\n * @returns {angular.$q.Promise} The animation promise.\r\n */\r\n CalendarYearCtrl.prototype.animateDateChange = function(date) {\r\n if (this.dateUtil.isValidDate(date)) {\r\n var monthDistance = this.dateUtil.getYearDistance(this.calendarCtrl.firstRenderableDate, date);\r\n this.calendarScroller.scrollTop = monthDistance * TBODY_HEIGHT;\r\n }\r\n\r\n return this.$q.when();\r\n };\r\n\r\n /**\r\n * Handles the year-view-specific keyboard interactions.\r\n * @param {Object} event Scope event object passed by the calendar.\r\n * @param {String} action Action, corresponding to the key that was pressed.\r\n */\r\n CalendarYearCtrl.prototype.handleKeyEvent = function(event, action) {\r\n var self = this;\r\n var calendarCtrl = self.calendarCtrl;\r\n var displayDate = calendarCtrl.displayDate;\r\n\r\n if (action === 'select') {\r\n self.changeDate(displayDate).then(function() {\r\n self.onTimestampSelected(displayDate);\r\n });\r\n } else {\r\n var date = null;\r\n var dateUtil = self.dateUtil;\r\n\r\n switch (action) {\r\n case 'move-right': date = dateUtil.incrementMonths(displayDate, 1); break;\r\n case 'move-left': date = dateUtil.incrementMonths(displayDate, -1); break;\r\n\r\n case 'move-row-down': date = dateUtil.incrementMonths(displayDate, 6); break;\r\n case 'move-row-up': date = dateUtil.incrementMonths(displayDate, -6); break;\r\n }\r\n\r\n if (date) {\r\n var min = calendarCtrl.minDate ? dateUtil.getFirstDateOfMonth(calendarCtrl.minDate) : null;\r\n var max = calendarCtrl.maxDate ? dateUtil.getFirstDateOfMonth(calendarCtrl.maxDate) : null;\r\n date = dateUtil.getFirstDateOfMonth(self.dateUtil.clampDate(date, min, max));\r\n\r\n self.changeDate(date).then(function() {\r\n calendarCtrl.focusDate(date);\r\n });\r\n }\r\n }\r\n };\r\n\r\n /**\r\n * Attaches listeners for the scope events that are broadcast by the calendar.\r\n */\r\n CalendarYearCtrl.prototype.attachScopeListeners = function() {\r\n var self = this;\r\n\r\n self.$scope.$on('md-calendar-parent-changed', function(event, value) {\r\n self.calendarCtrl.changeSelectedDate(value ? self.dateUtil.getFirstDateOfMonth(value) : value);\r\n self.changeDate(value);\r\n });\r\n\r\n self.$scope.$on('md-calendar-parent-action', angular.bind(self, self.handleKeyEvent));\r\n };\r\n\r\n /**\r\n * Handles the behavior when a date is selected. Depending on the `mode`\r\n * of the calendar, this can either switch back to the calendar view or\r\n * set the model value.\r\n * @param {number} timestamp The selected timestamp.\r\n */\r\n CalendarYearCtrl.prototype.onTimestampSelected = function(timestamp) {\r\n var calendarCtrl = this.calendarCtrl;\r\n\r\n if (calendarCtrl.mode) {\r\n this.$mdUtil.nextTick(function() {\r\n // The timestamp has to be converted to a valid date.\r\n calendarCtrl.setNgModelValue(new Date(timestamp));\r\n });\r\n } else {\r\n calendarCtrl.setCurrentView('month', timestamp);\r\n }\r\n };\r\n})();\r\n\r\n})();\r\n(function(){\r\n\"use strict\";\r\n\r\n(function() {\r\n 'use strict';\r\n\r\n CalendarYearBodyCtrl.$inject = [\"$element\", \"$$mdDateUtil\", \"$mdDateLocale\"];\r\n angular.module('material.components.datepicker')\r\n .directive('mdCalendarYearBody', mdCalendarYearDirective);\r\n\r\n /**\r\n * Private component, consumed by the md-calendar-year, which separates the DOM construction logic\r\n * and allows for the year view to use md-virtual-repeat.\r\n */\r\n function mdCalendarYearDirective() {\r\n return {\r\n require: ['^^mdCalendar', '^^mdCalendarYear', 'mdCalendarYearBody'],\r\n scope: { offset: '=mdYearOffset' },\r\n controller: CalendarYearBodyCtrl,\r\n controllerAs: 'mdYearBodyCtrl',\r\n bindToController: true,\r\n link: function(scope, element, attrs, controllers) {\r\n var calendarCtrl = controllers[0];\r\n var yearCtrl = controllers[1];\r\n var yearBodyCtrl = controllers[2];\r\n\r\n yearBodyCtrl.calendarCtrl = calendarCtrl;\r\n yearBodyCtrl.yearCtrl = yearCtrl;\r\n\r\n scope.$watch(function() { return yearBodyCtrl.offset; }, function(offset) {\r\n if (angular.isNumber(offset)) {\r\n yearBodyCtrl.generateContent();\r\n }\r\n });\r\n }\r\n };\r\n }\r\n\r\n /**\r\n * Controller for a single year.\r\n * @ngInject @constructor\r\n */\r\n function CalendarYearBodyCtrl($element, $$mdDateUtil, $mdDateLocale) {\r\n /**\r\n * @final\r\n * @type {!JQLite}\r\n */\r\n this.$element = $element;\r\n\r\n /** @final */\r\n this.dateUtil = $$mdDateUtil;\r\n\r\n /** @final */\r\n this.dateLocale = $mdDateLocale;\r\n\r\n /** @type {Object} Reference to the calendar. */\r\n this.calendarCtrl = null;\r\n\r\n /** @type {Object} Reference to the year view. */\r\n this.yearCtrl = null;\r\n\r\n /**\r\n * Number of months from the start of the month \"items\" that the currently rendered month\r\n * occurs. Set via angular data binding.\r\n * @type {number|null}\r\n */\r\n this.offset = null;\r\n\r\n /**\r\n * Date cell to focus after appending the month to the document.\r\n * @type {HTMLElement}\r\n */\r\n this.focusAfterAppend = null;\r\n }\r\n\r\n /** Generate and append the content for this year to the directive element. */\r\n CalendarYearBodyCtrl.prototype.generateContent = function() {\r\n var date = this.dateUtil.incrementYears(this.calendarCtrl.firstRenderableDate, this.offset);\r\n\r\n this.$element\r\n .empty()\r\n .append(this.buildCalendarForYear(date));\r\n\r\n if (this.focusAfterAppend) {\r\n this.focusAfterAppend.classList.add(this.calendarCtrl.FOCUSED_DATE_CLASS);\r\n this.focusAfterAppend = null;\r\n }\r\n };\r\n\r\n /**\r\n * Creates a single cell to contain a year in the calendar.\r\n * @param {number} year Four-digit year.\r\n * @param {number} month Zero-indexed month.\r\n * @returns {HTMLElement}\r\n */\r\n CalendarYearBodyCtrl.prototype.buildMonthCell = function(year, month) {\r\n var calendarCtrl = this.calendarCtrl;\r\n var yearCtrl = this.yearCtrl;\r\n var cell = this.buildBlankCell();\r\n\r\n // Represent this month/year as a date.\r\n var firstOfMonth = new Date(year, month, 1);\r\n cell.setAttribute('aria-label', this.dateLocale.monthFormatter(firstOfMonth));\r\n cell.id = calendarCtrl.getDateId(firstOfMonth, 'year');\r\n\r\n // Use `data-timestamp` attribute because IE10 does not support the `dataset` property.\r\n cell.setAttribute('data-timestamp', String(firstOfMonth.getTime()));\r\n\r\n if (this.dateUtil.isSameMonthAndYear(firstOfMonth, calendarCtrl.today)) {\r\n cell.classList.add(calendarCtrl.TODAY_CLASS);\r\n }\r\n\r\n if (this.dateUtil.isValidDate(calendarCtrl.selectedDate) &&\r\n this.dateUtil.isSameMonthAndYear(firstOfMonth, calendarCtrl.selectedDate)) {\r\n cell.classList.add(calendarCtrl.SELECTED_DATE_CLASS);\r\n cell.setAttribute('aria-selected', 'true');\r\n }\r\n\r\n var cellText = this.dateLocale.shortMonths[month];\r\n\r\n if (this.dateUtil.isMonthWithinRange(\r\n firstOfMonth, calendarCtrl.minDate, calendarCtrl.maxDate) &&\r\n (!angular.isFunction(calendarCtrl.monthFilter) ||\r\n calendarCtrl.monthFilter(firstOfMonth))) {\r\n var selectionIndicator = document.createElement('span');\r\n selectionIndicator.classList.add('md-calendar-date-selection-indicator');\r\n selectionIndicator.textContent = cellText;\r\n cell.appendChild(selectionIndicator);\r\n cell.addEventListener('click', yearCtrl.cellClickHandler);\r\n\r\n if (calendarCtrl.displayDate &&\r\n this.dateUtil.isSameMonthAndYear(firstOfMonth, calendarCtrl.displayDate)) {\r\n this.focusAfterAppend = cell;\r\n }\r\n } else {\r\n cell.classList.add('md-calendar-date-disabled');\r\n cell.textContent = cellText;\r\n }\r\n\r\n return cell;\r\n };\r\n\r\n /**\r\n * Builds a blank cell.\r\n * @return {HTMLElement}\r\n */\r\n CalendarYearBodyCtrl.prototype.buildBlankCell = function() {\r\n var cell = document.createElement('td');\r\n cell.tabIndex = -1;\r\n cell.classList.add('md-calendar-date');\r\n cell.setAttribute('role', 'gridcell');\r\n\r\n cell.setAttribute('tabindex', '-1');\r\n return cell;\r\n };\r\n\r\n /**\r\n * Builds the