+
+
+
+
+ +
+
+
+ List of items:
+
+ Item {{item}}
+
+ * This element will go BOOM
+ *
+ *
+ * ```
+ *
+ * Now we create the **JavaScript animation** that will trigger the CSS transition:
+ *
+ * ```js
+ * ngModule.animation('.fold-animation', ['$animateCss', function($animateCss) {
+ * return {
+ * enter: function(element, doneFn) {
+ * var height = element[0].offsetHeight;
+ * return $animateCss(element, {
+ * from: { height:'0px' },
+ * to: { height:height + 'px' },
+ * duration: 1 // one second
+ * });
+ * }
+ * }
+ * }]);
+ * ```
+ *
+ * ## More Advanced Uses
+ *
+ * `$animateCss` is the underlying code that ngAnimate uses to power **CSS-based animations** behind the scenes. Therefore CSS hooks
+ * like `.ng-EVENT`, `.ng-EVENT-active`, `.ng-EVENT-stagger` are all features that can be triggered using `$animateCss` via JavaScript code.
+ *
+ * This also means that just about any combination of adding classes, removing classes, setting styles, dynamically setting a keyframe animation,
+ * applying a hardcoded duration or delay value, changing the animation easing or applying a stagger animation are all options that work with
+ * `$animateCss`. The service itself is smart enough to figure out the combination of options and examine the element styling properties in order
+ * to provide a working animation that will run in CSS.
+ *
+ * The example below showcases a more advanced version of the `.fold-animation` from the example above:
+ *
+ * ```js
+ * ngModule.animation('.fold-animation', ['$animateCss', function($animateCss) {
+ * return {
+ * enter: function(element, doneFn) {
+ * var height = element[0].offsetHeight;
+ * return $animateCss(element, {
+ * addClass: 'red large-text pulse-twice',
+ * easing: 'ease-out',
+ * from: { height:'0px' },
+ * to: { height:height + 'px' },
+ * duration: 1 // one second
+ * });
+ * }
+ * }
+ * }]);
+ * ```
+ *
+ * Since we're adding/removing CSS classes then the CSS transition will also pick those up:
+ *
+ * ```css
+ * /* since a hardcoded duration value of 1 was provided in the JavaScript animation code,
+ * the CSS classes below will be transitioned despite them being defined as regular CSS classes */
+ * .red { background:red; }
+ * .large-text { font-size:20px; }
+ *
+ * /* we can also use a keyframe animation and $animateCss will make it work alongside the transition */
+ * .pulse-twice {
+ * animation: 0.5s pulse linear 2;
+ * -webkit-animation: 0.5s pulse linear 2;
+ * }
+ *
+ * @keyframes pulse {
+ * from { transform: scale(0.5); }
+ * to { transform: scale(1.5); }
+ * }
+ *
+ * @-webkit-keyframes pulse {
+ * from { -webkit-transform: scale(0.5); }
+ * to { -webkit-transform: scale(1.5); }
+ * }
+ * ```
+ *
+ * Given this complex combination of CSS classes, styles and options, `$animateCss` will figure everything out and make the animation happen.
+ *
+ * ## How the Options are handled
+ *
+ * `$animateCss` is very versatile and intelligent when it comes to figuring out what configurations to apply to the element to ensure the animation
+ * works with the options provided. Say for example we were adding a class that contained a keyframe value and we wanted to also animate some inline
+ * styles using the `from` and `to` properties.
+ *
+ * ```js
+ * var animator = $animateCss(element, {
+ * from: { background:'red' },
+ * to: { background:'blue' }
+ * });
+ * animator.start();
+ * ```
+ *
+ * ```css
+ * .rotating-animation {
+ * animation:0.5s rotate linear;
+ * -webkit-animation:0.5s rotate linear;
+ * }
+ *
+ * @keyframes rotate {
+ * from { transform: rotate(0deg); }
+ * to { transform: rotate(360deg); }
+ * }
+ *
+ * @-webkit-keyframes rotate {
+ * from { -webkit-transform: rotate(0deg); }
+ * to { -webkit-transform: rotate(360deg); }
+ * }
+ * ```
+ *
+ * The missing pieces here are that we do not have a transition set (within the CSS code nor within the `$animateCss` options) and the duration of the animation is
+ * going to be detected from what the keyframe styles on the CSS class are. In this event, `$animateCss` will automatically create an inline transition
+ * style matching the duration detected from the keyframe style (which is present in the CSS class that is being added) and then prepare both the transition
+ * and keyframe animations to run in parallel on the element. Then when the animation is underway the provided `from` and `to` CSS styles will be applied
+ * and spread across the transition and keyframe animation.
+ *
+ * ## What is returned
+ *
+ * `$animateCss` works in two stages: a preparation phase and an animation phase. Therefore when `$animateCss` is first called it will NOT actually
+ * start the animation. All that is going on here is that the element is being prepared for the animation (which means that the generated CSS classes are
+ * added and removed on the element). Once `$animateCss` is called it will return an object with the following properties:
+ *
+ * ```js
+ * var animator = $animateCss(element, { ... });
+ * ```
+ *
+ * Now what do the contents of our `animator` variable look like:
+ *
+ * ```js
+ * {
+ * // starts the animation
+ * start: Function,
+ *
+ * // ends (aborts) the animation
+ * end: Function
+ * }
+ * ```
+ *
+ * To actually start the animation we need to run `animation.start()` which will then return a promise that we can hook into to detect when the animation ends.
+ * If we choose not to run the animation then we MUST run `animation.end()` to perform a cleanup on the element (since some CSS classes and styles may have been
+ * applied to the element during the preparation phase). Note that all other properties such as duration, delay, transitions and keyframes are just properties
+ * and that changing them will not reconfigure the parameters of the animation.
+ *
+ * ### runner.done() vs runner.then()
+ * It is documented that `animation.start()` will return a promise object and this is true, however, there is also an additional method available on the
+ * runner called `.done(callbackFn)`. The done method works the same as `.finally(callbackFn)`, however, it does **not trigger a digest to occur**.
+ * Therefore, for performance reasons, it's always best to use `runner.done(callback)` instead of `runner.then()`, `runner.catch()` or `runner.finally()`
+ * unless you really need a digest to kick off afterwards.
+ *
+ * Keep in mind that, to make this easier, ngAnimate has tweaked the JS animations API to recognize when a runner instance is returned from $animateCss
+ * (so there is no need to call `runner.done(doneFn)` inside of your JavaScript animation code).
+ * Check the {@link ngAnimate.$animateCss#usage animation code above} to see how this works.
+ *
+ * @param {DOMElement} element the element that will be animated
+ * @param {object} options the animation-related options that will be applied during the animation
+ *
+ * * `event` - The DOM event (e.g. enter, leave, move). When used, a generated CSS class of `ng-EVENT` and `ng-EVENT-active` will be applied
+ * to the element during the animation. Multiple events can be provided when spaces are used as a separator. (Note that this will not perform any DOM operation.)
+ * * `structural` - Indicates that the `ng-` prefix will be added to the event class. Setting to `false` or omitting will turn `ng-EVENT` and
+ * `ng-EVENT-active` in `EVENT` and `EVENT-active`. Unused if `event` is omitted.
+ * * `easing` - The CSS easing value that will be applied to the transition or keyframe animation (or both).
+ * * `transitionStyle` - The raw CSS transition style that will be used (e.g. `1s linear all`).
+ * * `keyframeStyle` - The raw CSS keyframe animation style that will be used (e.g. `1s my_animation linear`).
+ * * `from` - The starting CSS styles (a key/value object) that will be applied at the start of the animation.
+ * * `to` - The ending CSS styles (a key/value object) that will be applied across the animation via a CSS transition.
+ * * `addClass` - A space separated list of CSS classes that will be added to the element and spread across the animation.
+ * * `removeClass` - A space separated list of CSS classes that will be removed from the element and spread across the animation.
+ * * `duration` - A number value representing the total duration of the transition and/or keyframe (note that a value of 1 is 1000ms). If a value of `0`
+ * is provided then the animation will be skipped entirely.
+ * * `delay` - A number value representing the total delay of the transition and/or keyframe (note that a value of 1 is 1000ms). If a value of `true` is
+ * used then whatever delay value is detected from the CSS classes will be mirrored on the elements styles (e.g. by setting delay true then the style value
+ * of the element will be `transition-delay: DETECTED_VALUE`). Using `true` is useful when you want the CSS classes and inline styles to all share the same
+ * CSS delay value.
+ * * `stagger` - A numeric time value representing the delay between successively animated elements
+ * ({@link ngAnimate#css-staggering-animations Click here to learn how CSS-based staggering works in ngAnimate.})
+ * * `staggerIndex` - The numeric index representing the stagger item (e.g. a value of 5 is equal to the sixth item in the stagger; therefore when a
+ * `stagger` option value of `0.1` is used then there will be a stagger delay of `600ms`)
+ * * `applyClassesEarly` - Whether or not the classes being added or removed will be used when detecting the animation. This is set by `$animate` when enter/leave/move animations are fired to ensure that the CSS classes are resolved in time. (Note that this will prevent any transitions from occurring on the classes being added and removed.)
+ * * `cleanupStyles` - Whether or not the provided `from` and `to` styles will be removed once
+ * the animation is closed. This is useful for when the styles are used purely for the sake of
+ * the animation and do not have a lasting visual effect on the element (e.g. a collapse and open animation).
+ * By default this value is set to `false`.
+ *
+ * @return {object} an object with start and end methods and details about the animation.
+ *
+ * * `start` - The method to start the animation. This will return a `Promise` when called.
+ * * `end` - This method will cancel the animation and remove all applied CSS classes and styles.
+ */
+var ONE_SECOND = 1000;
+
+var ELAPSED_TIME_MAX_DECIMAL_PLACES = 3;
+var CLOSING_TIME_BUFFER = 1.5;
+
+var DETECT_CSS_PROPERTIES = {
+ transitionDuration: TRANSITION_DURATION_PROP,
+ transitionDelay: TRANSITION_DELAY_PROP,
+ transitionProperty: TRANSITION_PROP + PROPERTY_KEY,
+ animationDuration: ANIMATION_DURATION_PROP,
+ animationDelay: ANIMATION_DELAY_PROP,
+ animationIterationCount: ANIMATION_PROP + ANIMATION_ITERATION_COUNT_KEY
+};
+
+var DETECT_STAGGER_CSS_PROPERTIES = {
+ transitionDuration: TRANSITION_DURATION_PROP,
+ transitionDelay: TRANSITION_DELAY_PROP,
+ animationDuration: ANIMATION_DURATION_PROP,
+ animationDelay: ANIMATION_DELAY_PROP
+};
+
+function getCssKeyframeDurationStyle(duration) {
+ return [ANIMATION_DURATION_PROP, duration + 's'];
+}
+
+function getCssDelayStyle(delay, isKeyframeAnimation) {
+ var prop = isKeyframeAnimation ? ANIMATION_DELAY_PROP : TRANSITION_DELAY_PROP;
+ return [prop, delay + 's'];
+}
+
+function computeCssStyles($window, element, properties) {
+ var styles = Object.create(null);
+ var detectedStyles = $window.getComputedStyle(element) || {};
+ forEach(properties, function(formalStyleName, actualStyleName) {
+ var val = detectedStyles[formalStyleName];
+ if (val) {
+ var c = val.charAt(0);
+
+ // only numerical-based values have a negative sign or digit as the first value
+ if (c === '-' || c === '+' || c >= 0) {
+ val = parseMaxTime(val);
+ }
+
+ // by setting this to null in the event that the delay is not set or is set directly as 0
+ // then we can still allow for negative values to be used later on and not mistake this
+ // value for being greater than any other negative value.
+ if (val === 0) {
+ val = null;
+ }
+ styles[actualStyleName] = val;
+ }
+ });
+
+ return styles;
+}
+
+function parseMaxTime(str) {
+ var maxValue = 0;
+ var values = str.split(/\s*,\s*/);
+ forEach(values, function(value) {
+ // it's always safe to consider only second values and omit `ms` values since
+ // getComputedStyle will always handle the conversion for us
+ if (value.charAt(value.length - 1) === 's') {
+ value = value.substring(0, value.length - 1);
+ }
+ value = parseFloat(value) || 0;
+ maxValue = maxValue ? Math.max(value, maxValue) : value;
+ });
+ return maxValue;
+}
+
+function truthyTimingValue(val) {
+ return val === 0 || val != null;
+}
+
+function getCssTransitionDurationStyle(duration, applyOnlyDuration) {
+ var style = TRANSITION_PROP;
+ var value = duration + 's';
+ if (applyOnlyDuration) {
+ style += DURATION_KEY;
+ } else {
+ value += ' linear all';
+ }
+ return [style, value];
+}
+
+function createLocalCacheLookup() {
+ var cache = Object.create(null);
+ return {
+ flush: function() {
+ cache = Object.create(null);
+ },
+
+ count: function(key) {
+ var entry = cache[key];
+ return entry ? entry.total : 0;
+ },
+
+ get: function(key) {
+ var entry = cache[key];
+ return entry && entry.value;
+ },
+
+ put: function(key, value) {
+ if (!cache[key]) {
+ cache[key] = { total: 1, value: value };
+ } else {
+ cache[key].total++;
+ }
+ }
+ };
+}
+
+// we do not reassign an already present style value since
+// if we detect the style property value again we may be
+// detecting styles that were added via the `from` styles.
+// We make use of `isDefined` here since an empty string
+// or null value (which is what getPropertyValue will return
+// for a non-existing style) will still be marked as a valid
+// value for the style (a falsy value implies that the style
+// is to be removed at the end of the animation). If we had a simple
+// "OR" statement then it would not be enough to catch that.
+function registerRestorableStyles(backup, node, properties) {
+ forEach(properties, function(prop) {
+ backup[prop] = isDefined(backup[prop])
+ ? backup[prop]
+ : node.style.getPropertyValue(prop);
+ });
+}
+
+var $AnimateCssProvider = ['$animateProvider', /** @this */ function($animateProvider) {
+ var gcsLookup = createLocalCacheLookup();
+ var gcsStaggerLookup = createLocalCacheLookup();
+
+ this.$get = ['$window', '$$jqLite', '$$AnimateRunner', '$timeout',
+ '$$forceReflow', '$sniffer', '$$rAFScheduler', '$$animateQueue',
+ function($window, $$jqLite, $$AnimateRunner, $timeout,
+ $$forceReflow, $sniffer, $$rAFScheduler, $$animateQueue) {
+
+ var applyAnimationClasses = applyAnimationClassesFactory($$jqLite);
+
+ var parentCounter = 0;
+ function gcsHashFn(node, extraClasses) {
+ var KEY = '$$ngAnimateParentKey';
+ var parentNode = node.parentNode;
+ var parentID = parentNode[KEY] || (parentNode[KEY] = ++parentCounter);
+ return parentID + '-' + node.getAttribute('class') + '-' + extraClasses;
+ }
+
+ function computeCachedCssStyles(node, className, cacheKey, properties) {
+ var timings = gcsLookup.get(cacheKey);
+
+ if (!timings) {
+ timings = computeCssStyles($window, node, properties);
+ if (timings.animationIterationCount === 'infinite') {
+ timings.animationIterationCount = 1;
+ }
+ }
+
+ // we keep putting this in multiple times even though the value and the cacheKey are the same
+ // because we're keeping an internal tally of how many duplicate animations are detected.
+ gcsLookup.put(cacheKey, timings);
+ return timings;
+ }
+
+ function computeCachedCssStaggerStyles(node, className, cacheKey, properties) {
+ var stagger;
+
+ // if we have one or more existing matches of matching elements
+ // containing the same parent + CSS styles (which is how cacheKey works)
+ // then staggering is possible
+ if (gcsLookup.count(cacheKey) > 0) {
+ stagger = gcsStaggerLookup.get(cacheKey);
+
+ if (!stagger) {
+ var staggerClassName = pendClasses(className, '-stagger');
+
+ $$jqLite.addClass(node, staggerClassName);
+
+ stagger = computeCssStyles($window, node, properties);
+
+ // force the conversion of a null value to zero incase not set
+ stagger.animationDuration = Math.max(stagger.animationDuration, 0);
+ stagger.transitionDuration = Math.max(stagger.transitionDuration, 0);
+
+ $$jqLite.removeClass(node, staggerClassName);
+
+ gcsStaggerLookup.put(cacheKey, stagger);
+ }
+ }
+
+ return stagger || {};
+ }
+
+ var rafWaitQueue = [];
+ function waitUntilQuiet(callback) {
+ rafWaitQueue.push(callback);
+ $$rAFScheduler.waitUntilQuiet(function() {
+ gcsLookup.flush();
+ gcsStaggerLookup.flush();
+
+ // DO NOT REMOVE THIS LINE OR REFACTOR OUT THE `pageWidth` variable.
+ // PLEASE EXAMINE THE `$$forceReflow` service to understand why.
+ var pageWidth = $$forceReflow();
+
+ // we use a for loop to ensure that if the queue is changed
+ // during this looping then it will consider new requests
+ for (var i = 0; i < rafWaitQueue.length; i++) {
+ rafWaitQueue[i](pageWidth);
+ }
+ rafWaitQueue.length = 0;
+ });
+ }
+
+ function computeTimings(node, className, cacheKey) {
+ var timings = computeCachedCssStyles(node, className, cacheKey, DETECT_CSS_PROPERTIES);
+ var aD = timings.animationDelay;
+ var tD = timings.transitionDelay;
+ timings.maxDelay = aD && tD
+ ? Math.max(aD, tD)
+ : (aD || tD);
+ timings.maxDuration = Math.max(
+ timings.animationDuration * timings.animationIterationCount,
+ timings.transitionDuration);
+
+ return timings;
+ }
+
+ return function init(element, initialOptions) {
+ // all of the animation functions should create
+ // a copy of the options data, however, if a
+ // parent service has already created a copy then
+ // we should stick to using that
+ var options = initialOptions || {};
+ if (!options.$$prepared) {
+ options = prepareAnimationOptions(copy(options));
+ }
+
+ var restoreStyles = {};
+ var node = getDomNode(element);
+ if (!node
+ || !node.parentNode
+ || !$$animateQueue.enabled()) {
+ return closeAndReturnNoopAnimator();
+ }
+
+ var temporaryStyles = [];
+ var classes = element.attr('class');
+ var styles = packageStyles(options);
+ var animationClosed;
+ var animationPaused;
+ var animationCompleted;
+ var runner;
+ var runnerHost;
+ var maxDelay;
+ var maxDelayTime;
+ var maxDuration;
+ var maxDurationTime;
+ var startTime;
+ var events = [];
+
+ if (options.duration === 0 || (!$sniffer.animations && !$sniffer.transitions)) {
+ return closeAndReturnNoopAnimator();
+ }
+
+ var method = options.event && isArray(options.event)
+ ? options.event.join(' ')
+ : options.event;
+
+ var isStructural = method && options.structural;
+ var structuralClassName = '';
+ var addRemoveClassName = '';
+
+ if (isStructural) {
+ structuralClassName = pendClasses(method, EVENT_CLASS_PREFIX, true);
+ } else if (method) {
+ structuralClassName = method;
+ }
+
+ if (options.addClass) {
+ addRemoveClassName += pendClasses(options.addClass, ADD_CLASS_SUFFIX);
+ }
+
+ if (options.removeClass) {
+ if (addRemoveClassName.length) {
+ addRemoveClassName += ' ';
+ }
+ addRemoveClassName += pendClasses(options.removeClass, REMOVE_CLASS_SUFFIX);
+ }
+
+ // there may be a situation where a structural animation is combined together
+ // with CSS classes that need to resolve before the animation is computed.
+ // However this means that there is no explicit CSS code to block the animation
+ // from happening (by setting 0s none in the class name). If this is the case
+ // we need to apply the classes before the first rAF so we know to continue if
+ // there actually is a detected transition or keyframe animation
+ if (options.applyClassesEarly && addRemoveClassName.length) {
+ applyAnimationClasses(element, options);
+ }
+
+ var preparationClasses = [structuralClassName, addRemoveClassName].join(' ').trim();
+ var fullClassName = classes + ' ' + preparationClasses;
+ var activeClasses = pendClasses(preparationClasses, ACTIVE_CLASS_SUFFIX);
+ var hasToStyles = styles.to && Object.keys(styles.to).length > 0;
+ var containsKeyframeAnimation = (options.keyframeStyle || '').length > 0;
+
+ // there is no way we can trigger an animation if no styles and
+ // no classes are being applied which would then trigger a transition,
+ // unless there a is raw keyframe value that is applied to the element.
+ if (!containsKeyframeAnimation
+ && !hasToStyles
+ && !preparationClasses) {
+ return closeAndReturnNoopAnimator();
+ }
+
+ var cacheKey, stagger;
+ if (options.stagger > 0) {
+ var staggerVal = parseFloat(options.stagger);
+ stagger = {
+ transitionDelay: staggerVal,
+ animationDelay: staggerVal,
+ transitionDuration: 0,
+ animationDuration: 0
+ };
+ } else {
+ cacheKey = gcsHashFn(node, fullClassName);
+ stagger = computeCachedCssStaggerStyles(node, preparationClasses, cacheKey, DETECT_STAGGER_CSS_PROPERTIES);
+ }
+
+ if (!options.$$skipPreparationClasses) {
+ $$jqLite.addClass(element, preparationClasses);
+ }
+
+ var applyOnlyDuration;
+
+ if (options.transitionStyle) {
+ var transitionStyle = [TRANSITION_PROP, options.transitionStyle];
+ applyInlineStyle(node, transitionStyle);
+ temporaryStyles.push(transitionStyle);
+ }
+
+ if (options.duration >= 0) {
+ applyOnlyDuration = node.style[TRANSITION_PROP].length > 0;
+ var durationStyle = getCssTransitionDurationStyle(options.duration, applyOnlyDuration);
+
+ // we set the duration so that it will be picked up by getComputedStyle later
+ applyInlineStyle(node, durationStyle);
+ temporaryStyles.push(durationStyle);
+ }
+
+ if (options.keyframeStyle) {
+ var keyframeStyle = [ANIMATION_PROP, options.keyframeStyle];
+ applyInlineStyle(node, keyframeStyle);
+ temporaryStyles.push(keyframeStyle);
+ }
+
+ var itemIndex = stagger
+ ? options.staggerIndex >= 0
+ ? options.staggerIndex
+ : gcsLookup.count(cacheKey)
+ : 0;
+
+ var isFirst = itemIndex === 0;
+
+ // this is a pre-emptive way of forcing the setup classes to be added and applied INSTANTLY
+ // without causing any combination of transitions to kick in. By adding a negative delay value
+ // it forces the setup class' transition to end immediately. We later then remove the negative
+ // transition delay to allow for the transition to naturally do it's thing. The beauty here is
+ // that if there is no transition defined then nothing will happen and this will also allow
+ // other transitions to be stacked on top of each other without any chopping them out.
+ if (isFirst && !options.skipBlocking) {
+ blockTransitions(node, SAFE_FAST_FORWARD_DURATION_VALUE);
+ }
+
+ var timings = computeTimings(node, fullClassName, cacheKey);
+ var relativeDelay = timings.maxDelay;
+ maxDelay = Math.max(relativeDelay, 0);
+ maxDuration = timings.maxDuration;
+
+ var flags = {};
+ flags.hasTransitions = timings.transitionDuration > 0;
+ flags.hasAnimations = timings.animationDuration > 0;
+ flags.hasTransitionAll = flags.hasTransitions && timings.transitionProperty === 'all';
+ flags.applyTransitionDuration = hasToStyles && (
+ (flags.hasTransitions && !flags.hasTransitionAll)
+ || (flags.hasAnimations && !flags.hasTransitions));
+ flags.applyAnimationDuration = options.duration && flags.hasAnimations;
+ flags.applyTransitionDelay = truthyTimingValue(options.delay) && (flags.applyTransitionDuration || flags.hasTransitions);
+ flags.applyAnimationDelay = truthyTimingValue(options.delay) && flags.hasAnimations;
+ flags.recalculateTimingStyles = addRemoveClassName.length > 0;
+
+ if (flags.applyTransitionDuration || flags.applyAnimationDuration) {
+ maxDuration = options.duration ? parseFloat(options.duration) : maxDuration;
+
+ if (flags.applyTransitionDuration) {
+ flags.hasTransitions = true;
+ timings.transitionDuration = maxDuration;
+ applyOnlyDuration = node.style[TRANSITION_PROP + PROPERTY_KEY].length > 0;
+ temporaryStyles.push(getCssTransitionDurationStyle(maxDuration, applyOnlyDuration));
+ }
+
+ if (flags.applyAnimationDuration) {
+ flags.hasAnimations = true;
+ timings.animationDuration = maxDuration;
+ temporaryStyles.push(getCssKeyframeDurationStyle(maxDuration));
+ }
+ }
+
+ if (maxDuration === 0 && !flags.recalculateTimingStyles) {
+ return closeAndReturnNoopAnimator();
+ }
+
+ if (options.delay != null) {
+ var delayStyle;
+ if (typeof options.delay !== 'boolean') {
+ delayStyle = parseFloat(options.delay);
+ // number in options.delay means we have to recalculate the delay for the closing timeout
+ maxDelay = Math.max(delayStyle, 0);
+ }
+
+ if (flags.applyTransitionDelay) {
+ temporaryStyles.push(getCssDelayStyle(delayStyle));
+ }
+
+ if (flags.applyAnimationDelay) {
+ temporaryStyles.push(getCssDelayStyle(delayStyle, true));
+ }
+ }
+
+ // we need to recalculate the delay value since we used a pre-emptive negative
+ // delay value and the delay value is required for the final event checking. This
+ // property will ensure that this will happen after the RAF phase has passed.
+ if (options.duration == null && timings.transitionDuration > 0) {
+ flags.recalculateTimingStyles = flags.recalculateTimingStyles || isFirst;
+ }
+
+ maxDelayTime = maxDelay * ONE_SECOND;
+ maxDurationTime = maxDuration * ONE_SECOND;
+ if (!options.skipBlocking) {
+ flags.blockTransition = timings.transitionDuration > 0;
+ flags.blockKeyframeAnimation = timings.animationDuration > 0 &&
+ stagger.animationDelay > 0 &&
+ stagger.animationDuration === 0;
+ }
+
+ if (options.from) {
+ if (options.cleanupStyles) {
+ registerRestorableStyles(restoreStyles, node, Object.keys(options.from));
+ }
+ applyAnimationFromStyles(element, options);
+ }
+
+ if (flags.blockTransition || flags.blockKeyframeAnimation) {
+ applyBlocking(maxDuration);
+ } else if (!options.skipBlocking) {
+ blockTransitions(node, false);
+ }
+
+ // TODO(matsko): for 1.5 change this code to have an animator object for better debugging
+ return {
+ $$willAnimate: true,
+ end: endFn,
+ start: function() {
+ if (animationClosed) return;
+
+ runnerHost = {
+ end: endFn,
+ cancel: cancelFn,
+ resume: null, //this will be set during the start() phase
+ pause: null
+ };
+
+ runner = new $$AnimateRunner(runnerHost);
+
+ waitUntilQuiet(start);
+
+ // we don't have access to pause/resume the animation
+ // since it hasn't run yet. AnimateRunner will therefore
+ // set noop functions for resume and pause and they will
+ // later be overridden once the animation is triggered
+ return runner;
+ }
+ };
+
+ function endFn() {
+ close();
+ }
+
+ function cancelFn() {
+ close(true);
+ }
+
+ function close(rejected) {
+ // if the promise has been called already then we shouldn't close
+ // the animation again
+ if (animationClosed || (animationCompleted && animationPaused)) return;
+ animationClosed = true;
+ animationPaused = false;
+
+ if (!options.$$skipPreparationClasses) {
+ $$jqLite.removeClass(element, preparationClasses);
+ }
+ $$jqLite.removeClass(element, activeClasses);
+
+ blockKeyframeAnimations(node, false);
+ blockTransitions(node, false);
+
+ forEach(temporaryStyles, function(entry) {
+ // There is only one way to remove inline style properties entirely from elements.
+ // By using `removeProperty` this works, but we need to convert camel-cased CSS
+ // styles down to hyphenated values.
+ node.style[entry[0]] = '';
+ });
+
+ applyAnimationClasses(element, options);
+ applyAnimationStyles(element, options);
+
+ if (Object.keys(restoreStyles).length) {
+ forEach(restoreStyles, function(value, prop) {
+ if (value) {
+ node.style.setProperty(prop, value);
+ } else {
+ node.style.removeProperty(prop);
+ }
+ });
+ }
+
+ // the reason why we have this option is to allow a synchronous closing callback
+ // that is fired as SOON as the animation ends (when the CSS is removed) or if
+ // the animation never takes off at all. A good example is a leave animation since
+ // the element must be removed just after the animation is over or else the element
+ // will appear on screen for one animation frame causing an overbearing flicker.
+ if (options.onDone) {
+ options.onDone();
+ }
+
+ if (events && events.length) {
+ // Remove the transitionend / animationend listener(s)
+ element.off(events.join(' '), onAnimationProgress);
+ }
+
+ //Cancel the fallback closing timeout and remove the timer data
+ var animationTimerData = element.data(ANIMATE_TIMER_KEY);
+ if (animationTimerData) {
+ $timeout.cancel(animationTimerData[0].timer);
+ element.removeData(ANIMATE_TIMER_KEY);
+ }
+
+ // if the preparation function fails then the promise is not setup
+ if (runner) {
+ runner.complete(!rejected);
+ }
+ }
+
+ function applyBlocking(duration) {
+ if (flags.blockTransition) {
+ blockTransitions(node, duration);
+ }
+
+ if (flags.blockKeyframeAnimation) {
+ blockKeyframeAnimations(node, !!duration);
+ }
+ }
+
+ function closeAndReturnNoopAnimator() {
+ runner = new $$AnimateRunner({
+ end: endFn,
+ cancel: cancelFn
+ });
+
+ // should flush the cache animation
+ waitUntilQuiet(noop);
+ close();
+
+ return {
+ $$willAnimate: false,
+ start: function() {
+ return runner;
+ },
+ end: endFn
+ };
+ }
+
+ function onAnimationProgress(event) {
+ event.stopPropagation();
+ var ev = event.originalEvent || event;
+
+ // we now always use `Date.now()` due to the recent changes with
+ // event.timeStamp in Firefox, Webkit and Chrome (see #13494 for more info)
+ var timeStamp = ev.$manualTimeStamp || Date.now();
+
+ /* Firefox (or possibly just Gecko) likes to not round values up
+ * when a ms measurement is used for the animation */
+ var elapsedTime = parseFloat(ev.elapsedTime.toFixed(ELAPSED_TIME_MAX_DECIMAL_PLACES));
+
+ /* $manualTimeStamp is a mocked timeStamp value which is set
+ * within browserTrigger(). This is only here so that tests can
+ * mock animations properly. Real events fallback to event.timeStamp,
+ * or, if they don't, then a timeStamp is automatically created for them.
+ * We're checking to see if the timeStamp surpasses the expected delay,
+ * but we're using elapsedTime instead of the timeStamp on the 2nd
+ * pre-condition since animationPauseds sometimes close off early */
+ if (Math.max(timeStamp - startTime, 0) >= maxDelayTime && elapsedTime >= maxDuration) {
+ // we set this flag to ensure that if the transition is paused then, when resumed,
+ // the animation will automatically close itself since transitions cannot be paused.
+ animationCompleted = true;
+ close();
+ }
+ }
+
+ function start() {
+ if (animationClosed) return;
+ if (!node.parentNode) {
+ close();
+ return;
+ }
+
+ // even though we only pause keyframe animations here the pause flag
+ // will still happen when transitions are used. Only the transition will
+ // not be paused since that is not possible. If the animation ends when
+ // paused then it will not complete until unpaused or cancelled.
+ var playPause = function(playAnimation) {
+ if (!animationCompleted) {
+ animationPaused = !playAnimation;
+ if (timings.animationDuration) {
+ var value = blockKeyframeAnimations(node, animationPaused);
+ if (animationPaused) {
+ temporaryStyles.push(value);
+ } else {
+ removeFromArray(temporaryStyles, value);
+ }
+ }
+ } else if (animationPaused && playAnimation) {
+ animationPaused = false;
+ close();
+ }
+ };
+
+ // checking the stagger duration prevents an accidentally cascade of the CSS delay style
+ // being inherited from the parent. If the transition duration is zero then we can safely
+ // rely that the delay value is an intentional stagger delay style.
+ var maxStagger = itemIndex > 0
+ && ((timings.transitionDuration && stagger.transitionDuration === 0) ||
+ (timings.animationDuration && stagger.animationDuration === 0))
+ && Math.max(stagger.animationDelay, stagger.transitionDelay);
+ if (maxStagger) {
+ $timeout(triggerAnimationStart,
+ Math.floor(maxStagger * itemIndex * ONE_SECOND),
+ false);
+ } else {
+ triggerAnimationStart();
+ }
+
+ // this will decorate the existing promise runner with pause/resume methods
+ runnerHost.resume = function() {
+ playPause(true);
+ };
+
+ runnerHost.pause = function() {
+ playPause(false);
+ };
+
+ function triggerAnimationStart() {
+ // just incase a stagger animation kicks in when the animation
+ // itself was cancelled entirely
+ if (animationClosed) return;
+
+ applyBlocking(false);
+
+ forEach(temporaryStyles, function(entry) {
+ var key = entry[0];
+ var value = entry[1];
+ node.style[key] = value;
+ });
+
+ applyAnimationClasses(element, options);
+ $$jqLite.addClass(element, activeClasses);
+
+ if (flags.recalculateTimingStyles) {
+ fullClassName = node.getAttribute('class') + ' ' + preparationClasses;
+ cacheKey = gcsHashFn(node, fullClassName);
+
+ timings = computeTimings(node, fullClassName, cacheKey);
+ relativeDelay = timings.maxDelay;
+ maxDelay = Math.max(relativeDelay, 0);
+ maxDuration = timings.maxDuration;
+
+ if (maxDuration === 0) {
+ close();
+ return;
+ }
+
+ flags.hasTransitions = timings.transitionDuration > 0;
+ flags.hasAnimations = timings.animationDuration > 0;
+ }
+
+ if (flags.applyAnimationDelay) {
+ relativeDelay = typeof options.delay !== 'boolean' && truthyTimingValue(options.delay)
+ ? parseFloat(options.delay)
+ : relativeDelay;
+
+ maxDelay = Math.max(relativeDelay, 0);
+ timings.animationDelay = relativeDelay;
+ delayStyle = getCssDelayStyle(relativeDelay, true);
+ temporaryStyles.push(delayStyle);
+ node.style[delayStyle[0]] = delayStyle[1];
+ }
+
+ maxDelayTime = maxDelay * ONE_SECOND;
+ maxDurationTime = maxDuration * ONE_SECOND;
+
+ if (options.easing) {
+ var easeProp, easeVal = options.easing;
+ if (flags.hasTransitions) {
+ easeProp = TRANSITION_PROP + TIMING_KEY;
+ temporaryStyles.push([easeProp, easeVal]);
+ node.style[easeProp] = easeVal;
+ }
+ if (flags.hasAnimations) {
+ easeProp = ANIMATION_PROP + TIMING_KEY;
+ temporaryStyles.push([easeProp, easeVal]);
+ node.style[easeProp] = easeVal;
+ }
+ }
+
+ if (timings.transitionDuration) {
+ events.push(TRANSITIONEND_EVENT);
+ }
+
+ if (timings.animationDuration) {
+ events.push(ANIMATIONEND_EVENT);
+ }
+
+ startTime = Date.now();
+ var timerTime = maxDelayTime + CLOSING_TIME_BUFFER * maxDurationTime;
+ var endTime = startTime + timerTime;
+
+ var animationsData = element.data(ANIMATE_TIMER_KEY) || [];
+ var setupFallbackTimer = true;
+ if (animationsData.length) {
+ var currentTimerData = animationsData[0];
+ setupFallbackTimer = endTime > currentTimerData.expectedEndTime;
+ if (setupFallbackTimer) {
+ $timeout.cancel(currentTimerData.timer);
+ } else {
+ animationsData.push(close);
+ }
+ }
+
+ if (setupFallbackTimer) {
+ var timer = $timeout(onAnimationExpired, timerTime, false);
+ animationsData[0] = {
+ timer: timer,
+ expectedEndTime: endTime
+ };
+ animationsData.push(close);
+ element.data(ANIMATE_TIMER_KEY, animationsData);
+ }
+
+ if (events.length) {
+ element.on(events.join(' '), onAnimationProgress);
+ }
+
+ if (options.to) {
+ if (options.cleanupStyles) {
+ registerRestorableStyles(restoreStyles, node, Object.keys(options.to));
+ }
+ applyAnimationToStyles(element, options);
+ }
+ }
+
+ function onAnimationExpired() {
+ var animationsData = element.data(ANIMATE_TIMER_KEY);
+
+ // this will be false in the event that the element was
+ // removed from the DOM (via a leave animation or something
+ // similar)
+ if (animationsData) {
+ for (var i = 1; i < animationsData.length; i++) {
+ animationsData[i]();
+ }
+ element.removeData(ANIMATE_TIMER_KEY);
+ }
+ }
+ }
+ };
+ }];
+}];
+
+var $$AnimateCssDriverProvider = ['$$animationProvider', /** @this */ function($$animationProvider) {
+ $$animationProvider.drivers.push('$$animateCssDriver');
+
+ var NG_ANIMATE_SHIM_CLASS_NAME = 'ng-animate-shim';
+ var NG_ANIMATE_ANCHOR_CLASS_NAME = 'ng-anchor';
+
+ var NG_OUT_ANCHOR_CLASS_NAME = 'ng-anchor-out';
+ var NG_IN_ANCHOR_CLASS_NAME = 'ng-anchor-in';
+
+ function isDocumentFragment(node) {
+ return node.parentNode && node.parentNode.nodeType === 11;
+ }
+
+ this.$get = ['$animateCss', '$rootScope', '$$AnimateRunner', '$rootElement', '$sniffer', '$$jqLite', '$document',
+ function($animateCss, $rootScope, $$AnimateRunner, $rootElement, $sniffer, $$jqLite, $document) {
+
+ // only browsers that support these properties can render animations
+ if (!$sniffer.animations && !$sniffer.transitions) return noop;
+
+ var bodyNode = $document[0].body;
+ var rootNode = getDomNode($rootElement);
+
+ var rootBodyElement = jqLite(
+ // this is to avoid using something that exists outside of the body
+ // we also special case the doc fragment case because our unit test code
+ // appends the $rootElement to the body after the app has been bootstrapped
+ isDocumentFragment(rootNode) || bodyNode.contains(rootNode) ? rootNode : bodyNode
+ );
+
+ return function initDriverFn(animationDetails) {
+ return animationDetails.from && animationDetails.to
+ ? prepareFromToAnchorAnimation(animationDetails.from,
+ animationDetails.to,
+ animationDetails.classes,
+ animationDetails.anchors)
+ : prepareRegularAnimation(animationDetails);
+ };
+
+ function filterCssClasses(classes) {
+ //remove all the `ng-` stuff
+ return classes.replace(/\bng-\S+\b/g, '');
+ }
+
+ function getUniqueValues(a, b) {
+ if (isString(a)) a = a.split(' ');
+ if (isString(b)) b = b.split(' ');
+ return a.filter(function(val) {
+ return b.indexOf(val) === -1;
+ }).join(' ');
+ }
+
+ function prepareAnchoredAnimation(classes, outAnchor, inAnchor) {
+ var clone = jqLite(getDomNode(outAnchor).cloneNode(true));
+ var startingClasses = filterCssClasses(getClassVal(clone));
+
+ outAnchor.addClass(NG_ANIMATE_SHIM_CLASS_NAME);
+ inAnchor.addClass(NG_ANIMATE_SHIM_CLASS_NAME);
+
+ clone.addClass(NG_ANIMATE_ANCHOR_CLASS_NAME);
+
+ rootBodyElement.append(clone);
+
+ var animatorIn, animatorOut = prepareOutAnimation();
+
+ // the user may not end up using the `out` animation and
+ // only making use of the `in` animation or vice-versa.
+ // In either case we should allow this and not assume the
+ // animation is over unless both animations are not used.
+ if (!animatorOut) {
+ animatorIn = prepareInAnimation();
+ if (!animatorIn) {
+ return end();
+ }
+ }
+
+ var startingAnimator = animatorOut || animatorIn;
+
+ return {
+ start: function() {
+ var runner;
+
+ var currentAnimation = startingAnimator.start();
+ currentAnimation.done(function() {
+ currentAnimation = null;
+ if (!animatorIn) {
+ animatorIn = prepareInAnimation();
+ if (animatorIn) {
+ currentAnimation = animatorIn.start();
+ currentAnimation.done(function() {
+ currentAnimation = null;
+ end();
+ runner.complete();
+ });
+ return currentAnimation;
+ }
+ }
+ // in the event that there is no `in` animation
+ end();
+ runner.complete();
+ });
+
+ runner = new $$AnimateRunner({
+ end: endFn,
+ cancel: endFn
+ });
+
+ return runner;
+
+ function endFn() {
+ if (currentAnimation) {
+ currentAnimation.end();
+ }
+ }
+ }
+ };
+
+ function calculateAnchorStyles(anchor) {
+ var styles = {};
+
+ var coords = getDomNode(anchor).getBoundingClientRect();
+
+ // we iterate directly since safari messes up and doesn't return
+ // all the keys for the coords object when iterated
+ forEach(['width','height','top','left'], function(key) {
+ var value = coords[key];
+ switch (key) {
+ case 'top':
+ value += bodyNode.scrollTop;
+ break;
+ case 'left':
+ value += bodyNode.scrollLeft;
+ break;
+ }
+ styles[key] = Math.floor(value) + 'px';
+ });
+ return styles;
+ }
+
+ function prepareOutAnimation() {
+ var animator = $animateCss(clone, {
+ addClass: NG_OUT_ANCHOR_CLASS_NAME,
+ delay: true,
+ from: calculateAnchorStyles(outAnchor)
+ });
+
+ // read the comment within `prepareRegularAnimation` to understand
+ // why this check is necessary
+ return animator.$$willAnimate ? animator : null;
+ }
+
+ function getClassVal(element) {
+ return element.attr('class') || '';
+ }
+
+ function prepareInAnimation() {
+ var endingClasses = filterCssClasses(getClassVal(inAnchor));
+ var toAdd = getUniqueValues(endingClasses, startingClasses);
+ var toRemove = getUniqueValues(startingClasses, endingClasses);
+
+ var animator = $animateCss(clone, {
+ to: calculateAnchorStyles(inAnchor),
+ addClass: NG_IN_ANCHOR_CLASS_NAME + ' ' + toAdd,
+ removeClass: NG_OUT_ANCHOR_CLASS_NAME + ' ' + toRemove,
+ delay: true
+ });
+
+ // read the comment within `prepareRegularAnimation` to understand
+ // why this check is necessary
+ return animator.$$willAnimate ? animator : null;
+ }
+
+ function end() {
+ clone.remove();
+ outAnchor.removeClass(NG_ANIMATE_SHIM_CLASS_NAME);
+ inAnchor.removeClass(NG_ANIMATE_SHIM_CLASS_NAME);
+ }
+ }
+
+ function prepareFromToAnchorAnimation(from, to, classes, anchors) {
+ var fromAnimation = prepareRegularAnimation(from, noop);
+ var toAnimation = prepareRegularAnimation(to, noop);
+
+ var anchorAnimations = [];
+ forEach(anchors, function(anchor) {
+ var outElement = anchor['out'];
+ var inElement = anchor['in'];
+ var animator = prepareAnchoredAnimation(classes, outElement, inElement);
+ if (animator) {
+ anchorAnimations.push(animator);
+ }
+ });
+
+ // no point in doing anything when there are no elements to animate
+ if (!fromAnimation && !toAnimation && anchorAnimations.length === 0) return;
+
+ return {
+ start: function() {
+ var animationRunners = [];
+
+ if (fromAnimation) {
+ animationRunners.push(fromAnimation.start());
+ }
+
+ if (toAnimation) {
+ animationRunners.push(toAnimation.start());
+ }
+
+ forEach(anchorAnimations, function(animation) {
+ animationRunners.push(animation.start());
+ });
+
+ var runner = new $$AnimateRunner({
+ end: endFn,
+ cancel: endFn // CSS-driven animations cannot be cancelled, only ended
+ });
+
+ $$AnimateRunner.all(animationRunners, function(status) {
+ runner.complete(status);
+ });
+
+ return runner;
+
+ function endFn() {
+ forEach(animationRunners, function(runner) {
+ runner.end();
+ });
+ }
+ }
+ };
+ }
+
+ function prepareRegularAnimation(animationDetails) {
+ var element = animationDetails.element;
+ var options = animationDetails.options || {};
+
+ if (animationDetails.structural) {
+ options.event = animationDetails.event;
+ options.structural = true;
+ options.applyClassesEarly = true;
+
+ // we special case the leave animation since we want to ensure that
+ // the element is removed as soon as the animation is over. Otherwise
+ // a flicker might appear or the element may not be removed at all
+ if (animationDetails.event === 'leave') {
+ options.onDone = options.domOperation;
+ }
+ }
+
+ // We assign the preparationClasses as the actual animation event since
+ // the internals of $animateCss will just suffix the event token values
+ // with `-active` to trigger the animation.
+ if (options.preparationClasses) {
+ options.event = concatWithSpace(options.event, options.preparationClasses);
+ }
+
+ var animator = $animateCss(element, options);
+
+ // the driver lookup code inside of $$animation attempts to spawn a
+ // driver one by one until a driver returns a.$$willAnimate animator object.
+ // $animateCss will always return an object, however, it will pass in
+ // a flag as a hint as to whether an animation was detected or not
+ return animator.$$willAnimate ? animator : null;
+ }
+ }];
+}];
+
+// TODO(matsko): use caching here to speed things up for detection
+// TODO(matsko): add documentation
+// by the time...
+
+var $$AnimateJsProvider = ['$animateProvider', /** @this */ function($animateProvider) {
+ this.$get = ['$injector', '$$AnimateRunner', '$$jqLite',
+ function($injector, $$AnimateRunner, $$jqLite) {
+
+ var applyAnimationClasses = applyAnimationClassesFactory($$jqLite);
+ // $animateJs(element, 'enter');
+ return function(element, event, classes, options) {
+ var animationClosed = false;
+
+ // the `classes` argument is optional and if it is not used
+ // then the classes will be resolved from the element's className
+ // property as well as options.addClass/options.removeClass.
+ if (arguments.length === 3 && isObject(classes)) {
+ options = classes;
+ classes = null;
+ }
+
+ options = prepareAnimationOptions(options);
+ if (!classes) {
+ classes = element.attr('class') || '';
+ if (options.addClass) {
+ classes += ' ' + options.addClass;
+ }
+ if (options.removeClass) {
+ classes += ' ' + options.removeClass;
+ }
+ }
+
+ var classesToAdd = options.addClass;
+ var classesToRemove = options.removeClass;
+
+ // the lookupAnimations function returns a series of animation objects that are
+ // matched up with one or more of the CSS classes. These animation objects are
+ // defined via the module.animation factory function. If nothing is detected then
+ // we don't return anything which then makes $animation query the next driver.
+ var animations = lookupAnimations(classes);
+ var before, after;
+ if (animations.length) {
+ var afterFn, beforeFn;
+ if (event === 'leave') {
+ beforeFn = 'leave';
+ afterFn = 'afterLeave'; // TODO(matsko): get rid of this
+ } else {
+ beforeFn = 'before' + event.charAt(0).toUpperCase() + event.substr(1);
+ afterFn = event;
+ }
+
+ if (event !== 'enter' && event !== 'move') {
+ before = packageAnimations(element, event, options, animations, beforeFn);
+ }
+ after = packageAnimations(element, event, options, animations, afterFn);
+ }
+
+ // no matching animations
+ if (!before && !after) return;
+
+ function applyOptions() {
+ options.domOperation();
+ applyAnimationClasses(element, options);
+ }
+
+ function close() {
+ animationClosed = true;
+ applyOptions();
+ applyAnimationStyles(element, options);
+ }
+
+ var runner;
+
+ return {
+ $$willAnimate: true,
+ end: function() {
+ if (runner) {
+ runner.end();
+ } else {
+ close();
+ runner = new $$AnimateRunner();
+ runner.complete(true);
+ }
+ return runner;
+ },
+ start: function() {
+ if (runner) {
+ return runner;
+ }
+
+ runner = new $$AnimateRunner();
+ var closeActiveAnimations;
+ var chain = [];
+
+ if (before) {
+ chain.push(function(fn) {
+ closeActiveAnimations = before(fn);
+ });
+ }
+
+ if (chain.length) {
+ chain.push(function(fn) {
+ applyOptions();
+ fn(true);
+ });
+ } else {
+ applyOptions();
+ }
+
+ if (after) {
+ chain.push(function(fn) {
+ closeActiveAnimations = after(fn);
+ });
+ }
+
+ runner.setHost({
+ end: function() {
+ endAnimations();
+ },
+ cancel: function() {
+ endAnimations(true);
+ }
+ });
+
+ $$AnimateRunner.chain(chain, onComplete);
+ return runner;
+
+ function onComplete(success) {
+ close(success);
+ runner.complete(success);
+ }
+
+ function endAnimations(cancelled) {
+ if (!animationClosed) {
+ (closeActiveAnimations || noop)(cancelled);
+ onComplete(cancelled);
+ }
+ }
+ }
+ };
+
+ function executeAnimationFn(fn, element, event, options, onDone) {
+ var args;
+ switch (event) {
+ case 'animate':
+ args = [element, options.from, options.to, onDone];
+ break;
+
+ case 'setClass':
+ args = [element, classesToAdd, classesToRemove, onDone];
+ break;
+
+ case 'addClass':
+ args = [element, classesToAdd, onDone];
+ break;
+
+ case 'removeClass':
+ args = [element, classesToRemove, onDone];
+ break;
+
+ default:
+ args = [element, onDone];
+ break;
+ }
+
+ args.push(options);
+
+ var value = fn.apply(fn, args);
+ if (value) {
+ if (isFunction(value.start)) {
+ value = value.start();
+ }
+
+ if (value instanceof $$AnimateRunner) {
+ value.done(onDone);
+ } else if (isFunction(value)) {
+ // optional onEnd / onCancel callback
+ return value;
+ }
+ }
+
+ return noop;
+ }
+
+ function groupEventedAnimations(element, event, options, animations, fnName) {
+ var operations = [];
+ forEach(animations, function(ani) {
+ var animation = ani[fnName];
+ if (!animation) return;
+
+ // note that all of these animations will run in parallel
+ operations.push(function() {
+ var runner;
+ var endProgressCb;
+
+ var resolved = false;
+ var onAnimationComplete = function(rejected) {
+ if (!resolved) {
+ resolved = true;
+ (endProgressCb || noop)(rejected);
+ runner.complete(!rejected);
+ }
+ };
+
+ runner = new $$AnimateRunner({
+ end: function() {
+ onAnimationComplete();
+ },
+ cancel: function() {
+ onAnimationComplete(true);
+ }
+ });
+
+ endProgressCb = executeAnimationFn(animation, element, event, options, function(result) {
+ var cancelled = result === false;
+ onAnimationComplete(cancelled);
+ });
+
+ return runner;
+ });
+ });
+
+ return operations;
+ }
+
+ function packageAnimations(element, event, options, animations, fnName) {
+ var operations = groupEventedAnimations(element, event, options, animations, fnName);
+ if (operations.length === 0) {
+ var a, b;
+ if (fnName === 'beforeSetClass') {
+ a = groupEventedAnimations(element, 'removeClass', options, animations, 'beforeRemoveClass');
+ b = groupEventedAnimations(element, 'addClass', options, animations, 'beforeAddClass');
+ } else if (fnName === 'setClass') {
+ a = groupEventedAnimations(element, 'removeClass', options, animations, 'removeClass');
+ b = groupEventedAnimations(element, 'addClass', options, animations, 'addClass');
+ }
+
+ if (a) {
+ operations = operations.concat(a);
+ }
+ if (b) {
+ operations = operations.concat(b);
+ }
+ }
+
+ if (operations.length === 0) return;
+
+ // TODO(matsko): add documentation
+ return function startAnimation(callback) {
+ var runners = [];
+ if (operations.length) {
+ forEach(operations, function(animateFn) {
+ runners.push(animateFn());
+ });
+ }
+
+ if (runners.length) {
+ $$AnimateRunner.all(runners, callback);
+ } else {
+ callback();
+ }
+
+ return function endFn(reject) {
+ forEach(runners, function(runner) {
+ if (reject) {
+ runner.cancel();
+ } else {
+ runner.end();
+ }
+ });
+ };
+ };
+ }
+ };
+
+ function lookupAnimations(classes) {
+ classes = isArray(classes) ? classes : classes.split(' ');
+ var matches = [], flagMap = {};
+ for (var i = 0; i < classes.length; i++) {
+ var klass = classes[i],
+ animationFactory = $animateProvider.$$registeredAnimations[klass];
+ if (animationFactory && !flagMap[klass]) {
+ matches.push($injector.get(animationFactory));
+ flagMap[klass] = true;
+ }
+ }
+ return matches;
+ }
+ }];
+}];
+
+var $$AnimateJsDriverProvider = ['$$animationProvider', /** @this */ function($$animationProvider) {
+ $$animationProvider.drivers.push('$$animateJsDriver');
+ this.$get = ['$$animateJs', '$$AnimateRunner', function($$animateJs, $$AnimateRunner) {
+ return function initDriverFn(animationDetails) {
+ if (animationDetails.from && animationDetails.to) {
+ var fromAnimation = prepareAnimation(animationDetails.from);
+ var toAnimation = prepareAnimation(animationDetails.to);
+ if (!fromAnimation && !toAnimation) return;
+
+ return {
+ start: function() {
+ var animationRunners = [];
+
+ if (fromAnimation) {
+ animationRunners.push(fromAnimation.start());
+ }
+
+ if (toAnimation) {
+ animationRunners.push(toAnimation.start());
+ }
+
+ $$AnimateRunner.all(animationRunners, done);
+
+ var runner = new $$AnimateRunner({
+ end: endFnFactory(),
+ cancel: endFnFactory()
+ });
+
+ return runner;
+
+ function endFnFactory() {
+ return function() {
+ forEach(animationRunners, function(runner) {
+ // at this point we cannot cancel animations for groups just yet. 1.5+
+ runner.end();
+ });
+ };
+ }
+
+ function done(status) {
+ runner.complete(status);
+ }
+ }
+ };
+ } else {
+ return prepareAnimation(animationDetails);
+ }
+ };
+
+ function prepareAnimation(animationDetails) {
+ // TODO(matsko): make sure to check for grouped animations and delegate down to normal animations
+ var element = animationDetails.element;
+ var event = animationDetails.event;
+ var options = animationDetails.options;
+ var classes = animationDetails.classes;
+ return $$animateJs(element, event, classes, options);
+ }
+ }];
+}];
+
+var NG_ANIMATE_ATTR_NAME = 'data-ng-animate';
+var NG_ANIMATE_PIN_DATA = '$ngAnimatePin';
+var $$AnimateQueueProvider = ['$animateProvider', /** @this */ function($animateProvider) {
+ var PRE_DIGEST_STATE = 1;
+ var RUNNING_STATE = 2;
+ var ONE_SPACE = ' ';
+
+ var rules = this.rules = {
+ skip: [],
+ cancel: [],
+ join: []
+ };
+
+ function makeTruthyCssClassMap(classString) {
+ if (!classString) {
+ return null;
+ }
+
+ var keys = classString.split(ONE_SPACE);
+ var map = Object.create(null);
+
+ forEach(keys, function(key) {
+ map[key] = true;
+ });
+ return map;
+ }
+
+ function hasMatchingClasses(newClassString, currentClassString) {
+ if (newClassString && currentClassString) {
+ var currentClassMap = makeTruthyCssClassMap(currentClassString);
+ return newClassString.split(ONE_SPACE).some(function(className) {
+ return currentClassMap[className];
+ });
+ }
+ }
+
+ function isAllowed(ruleType, element, currentAnimation, previousAnimation) {
+ return rules[ruleType].some(function(fn) {
+ return fn(element, currentAnimation, previousAnimation);
+ });
+ }
+
+ function hasAnimationClasses(animation, and) {
+ var a = (animation.addClass || '').length > 0;
+ var b = (animation.removeClass || '').length > 0;
+ return and ? a && b : a || b;
+ }
+
+ rules.join.push(function(element, newAnimation, currentAnimation) {
+ // if the new animation is class-based then we can just tack that on
+ return !newAnimation.structural && hasAnimationClasses(newAnimation);
+ });
+
+ rules.skip.push(function(element, newAnimation, currentAnimation) {
+ // there is no need to animate anything if no classes are being added and
+ // there is no structural animation that will be triggered
+ return !newAnimation.structural && !hasAnimationClasses(newAnimation);
+ });
+
+ rules.skip.push(function(element, newAnimation, currentAnimation) {
+ // why should we trigger a new structural animation if the element will
+ // be removed from the DOM anyway?
+ return currentAnimation.event === 'leave' && newAnimation.structural;
+ });
+
+ rules.skip.push(function(element, newAnimation, currentAnimation) {
+ // if there is an ongoing current animation then don't even bother running the class-based animation
+ return currentAnimation.structural && currentAnimation.state === RUNNING_STATE && !newAnimation.structural;
+ });
+
+ rules.cancel.push(function(element, newAnimation, currentAnimation) {
+ // there can never be two structural animations running at the same time
+ return currentAnimation.structural && newAnimation.structural;
+ });
+
+ rules.cancel.push(function(element, newAnimation, currentAnimation) {
+ // if the previous animation is already running, but the new animation will
+ // be triggered, but the new animation is structural
+ return currentAnimation.state === RUNNING_STATE && newAnimation.structural;
+ });
+
+ rules.cancel.push(function(element, newAnimation, currentAnimation) {
+ // cancel the animation if classes added / removed in both animation cancel each other out,
+ // but only if the current animation isn't structural
+
+ if (currentAnimation.structural) return false;
+
+ var nA = newAnimation.addClass;
+ var nR = newAnimation.removeClass;
+ var cA = currentAnimation.addClass;
+ var cR = currentAnimation.removeClass;
+
+ // early detection to save the global CPU shortage :)
+ if ((isUndefined(nA) && isUndefined(nR)) || (isUndefined(cA) && isUndefined(cR))) {
+ return false;
+ }
+
+ return hasMatchingClasses(nA, cR) || hasMatchingClasses(nR, cA);
+ });
+
+ this.$get = ['$$rAF', '$rootScope', '$rootElement', '$document', '$$HashMap',
+ '$$animation', '$$AnimateRunner', '$templateRequest', '$$jqLite', '$$forceReflow',
+ '$$isDocumentHidden',
+ function($$rAF, $rootScope, $rootElement, $document, $$HashMap,
+ $$animation, $$AnimateRunner, $templateRequest, $$jqLite, $$forceReflow,
+ $$isDocumentHidden) {
+
+ var activeAnimationsLookup = new $$HashMap();
+ var disabledElementsLookup = new $$HashMap();
+ var animationsEnabled = null;
+
+ function postDigestTaskFactory() {
+ var postDigestCalled = false;
+ return function(fn) {
+ // we only issue a call to postDigest before
+ // it has first passed. This prevents any callbacks
+ // from not firing once the animation has completed
+ // since it will be out of the digest cycle.
+ if (postDigestCalled) {
+ fn();
+ } else {
+ $rootScope.$$postDigest(function() {
+ postDigestCalled = true;
+ fn();
+ });
+ }
+ };
+ }
+
+ // Wait until all directive and route-related templates are downloaded and
+ // compiled. The $templateRequest.totalPendingRequests variable keeps track of
+ // all of the remote templates being currently downloaded. If there are no
+ // templates currently downloading then the watcher will still fire anyway.
+ var deregisterWatch = $rootScope.$watch(
+ function() { return $templateRequest.totalPendingRequests === 0; },
+ function(isEmpty) {
+ if (!isEmpty) return;
+ deregisterWatch();
+
+ // Now that all templates have been downloaded, $animate will wait until
+ // the post digest queue is empty before enabling animations. By having two
+ // calls to $postDigest calls we can ensure that the flag is enabled at the
+ // very end of the post digest queue. Since all of the animations in $animate
+ // use $postDigest, it's important that the code below executes at the end.
+ // This basically means that the page is fully downloaded and compiled before
+ // any animations are triggered.
+ $rootScope.$$postDigest(function() {
+ $rootScope.$$postDigest(function() {
+ // we check for null directly in the event that the application already called
+ // .enabled() with whatever arguments that it provided it with
+ if (animationsEnabled === null) {
+ animationsEnabled = true;
+ }
+ });
+ });
+ }
+ );
+
+ var callbackRegistry = Object.create(null);
+
+ // remember that the classNameFilter is set during the provider/config
+ // stage therefore we can optimize here and setup a helper function
+ var classNameFilter = $animateProvider.classNameFilter();
+ var isAnimatableClassName = !classNameFilter
+ ? function() { return true; }
+ : function(className) {
+ return classNameFilter.test(className);
+ };
+
+ var applyAnimationClasses = applyAnimationClassesFactory($$jqLite);
+
+ function normalizeAnimationDetails(element, animation) {
+ return mergeAnimationDetails(element, animation, {});
+ }
+
+ // IE9-11 has no method "contains" in SVG element and in Node.prototype. Bug #10259.
+ var contains = window.Node.prototype.contains || /** @this */ function(arg) {
+ // eslint-disable-next-line no-bitwise
+ return this === arg || !!(this.compareDocumentPosition(arg) & 16);
+ };
+
+ function findCallbacks(parent, element, event) {
+ var targetNode = getDomNode(element);
+ var targetParentNode = getDomNode(parent);
+
+ var matches = [];
+ var entries = callbackRegistry[event];
+ if (entries) {
+ forEach(entries, function(entry) {
+ if (contains.call(entry.node, targetNode)) {
+ matches.push(entry.callback);
+ } else if (event === 'leave' && contains.call(entry.node, targetParentNode)) {
+ matches.push(entry.callback);
+ }
+ });
+ }
+
+ return matches;
+ }
+
+ function filterFromRegistry(list, matchContainer, matchCallback) {
+ var containerNode = extractElementNode(matchContainer);
+ return list.filter(function(entry) {
+ var isMatch = entry.node === containerNode &&
+ (!matchCallback || entry.callback === matchCallback);
+ return !isMatch;
+ });
+ }
+
+ function cleanupEventListeners(phase, element) {
+ if (phase === 'close' && !element[0].parentNode) {
+ // If the element is not attached to a parentNode, it has been removed by
+ // the domOperation, and we can safely remove the event callbacks
+ $animate.off(element);
+ }
+ }
+
+ var $animate = {
+ on: function(event, container, callback) {
+ var node = extractElementNode(container);
+ callbackRegistry[event] = callbackRegistry[event] || [];
+ callbackRegistry[event].push({
+ node: node,
+ callback: callback
+ });
+
+ // Remove the callback when the element is removed from the DOM
+ jqLite(container).on('$destroy', function() {
+ var animationDetails = activeAnimationsLookup.get(node);
+
+ if (!animationDetails) {
+ // If there's an animation ongoing, the callback calling code will remove
+ // the event listeners. If we'd remove here, the callbacks would be removed
+ // before the animation ends
+ $animate.off(event, container, callback);
+ }
+ });
+ },
+
+ off: function(event, container, callback) {
+ if (arguments.length === 1 && !isString(arguments[0])) {
+ container = arguments[0];
+ for (var eventType in callbackRegistry) {
+ callbackRegistry[eventType] = filterFromRegistry(callbackRegistry[eventType], container);
+ }
+
+ return;
+ }
+
+ var entries = callbackRegistry[event];
+ if (!entries) return;
+
+ callbackRegistry[event] = arguments.length === 1
+ ? null
+ : filterFromRegistry(entries, container, callback);
+ },
+
+ pin: function(element, parentElement) {
+ assertArg(isElement(element), 'element', 'not an element');
+ assertArg(isElement(parentElement), 'parentElement', 'not an element');
+ element.data(NG_ANIMATE_PIN_DATA, parentElement);
+ },
+
+ push: function(element, event, options, domOperation) {
+ options = options || {};
+ options.domOperation = domOperation;
+ return queueAnimation(element, event, options);
+ },
+
+ // this method has four signatures:
+ // () - global getter
+ // (bool) - global setter
+ // (element) - element getter
+ // (element, bool) - element setter
+ *
+ *
+ * {{ number }}
+ *
+ *
+ * Fade me in out
+ *
+ *
+ *
+ * ```
+ *
+ * Notice the CSS class **fade**? We can now create the CSS transition code that references this class:
+ *
+ * ```css
+ * /* The starting CSS styles for the enter animation */
+ * .fade.ng-enter {
+ * transition:0.5s linear all;
+ * opacity:0;
+ * }
+ *
+ * /* The finishing CSS styles for the enter animation */
+ * .fade.ng-enter.ng-enter-active {
+ * opacity:1;
+ * }
+ * ```
+ *
+ * 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
+ * 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
+ * code **must** be defined within the starting CSS class (in this case `.ng-enter`). The destination class is what the transition will animate towards.
+ *
+ * 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:
+ *
+ * ```css
+ * /* now the element will fade out before it is removed from the DOM */
+ * .fade.ng-leave {
+ * transition:0.5s linear all;
+ * opacity:1;
+ * }
+ * .fade.ng-leave.ng-leave-active {
+ * opacity:0;
+ * }
+ * ```
+ *
+ * We can also make use of **CSS Keyframes** by referencing the keyframe animation within the starting CSS class:
+ *
+ * ```css
+ * /* there is no need to define anything inside of the destination
+ * CSS class since the keyframe will take charge of the animation */
+ * .fade.ng-leave {
+ * animation: my_fade_animation 0.5s linear;
+ * -webkit-animation: my_fade_animation 0.5s linear;
+ * }
+ *
+ * @keyframes my_fade_animation {
+ * from { opacity:1; }
+ * to { opacity:0; }
+ * }
+ *
+ * @-webkit-keyframes my_fade_animation {
+ * from { opacity:1; }
+ * to { opacity:0; }
+ * }
+ * ```
+ *
+ * Feel free also mix transitions and keyframes together as well as any other CSS classes on the same element.
+ *
+ * ### CSS Class-based Animations
+ *
+ * Class-based animations (animations that are triggered via `ngClass`, `ngShow`, `ngHide` and some other directives) have a slightly different
+ * naming convention. Class-based animations are basic enough that a standard transition or keyframe can be referenced on the class being added
+ * and removed.
+ *
+ * For example if we wanted to do a CSS animation for `ngHide` then we place an animation on the `.ng-hide` CSS class:
+ *
+ * ```html
+ *
+ * Show and hide me
+ *
+ *
+ *
+ *
+ * ```
+ *
+ * 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
+ * ngShow and ngHide are animation aware then we can match up a transition and ngAnimate handles the rest.
+ *
+ * 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
+ * with CSS styles.
+ *
+ * ```html
+ *
+ * Highlight this box
+ *
+ *
+ *
+ *
+ * ```
+ *
+ * We can also make use of CSS keyframes by placing them within the CSS classes.
+ *
+ *
+ * ### CSS Staggering Animations
+ * A Staggering animation is a collection of animations that are issued with a slight delay in between each successive operation resulting in a
+ * curtain-like effect. The ngAnimate module (versions >=1.2) supports staggering animations and the stagger effect can be
+ * performed by creating a **ng-EVENT-stagger** CSS class and attaching that class to the base CSS class used for
+ * the animation. The style property expected within the stagger class can either be a **transition-delay** or an
+ * **animation-delay** property (or both if your animation contains both transitions and keyframe animations).
+ *
+ * ```css
+ * .my-animation.ng-enter {
+ * /* standard transition code */
+ * transition: 1s linear all;
+ * opacity:0;
+ * }
+ * .my-animation.ng-enter-stagger {
+ * /* this will have a 100ms delay between each successive leave animation */
+ * transition-delay: 0.1s;
+ *
+ * /* As of 1.4.4, this must always be set: it signals ngAnimate
+ * to not accidentally inherit a delay property from another CSS class */
+ * transition-duration: 0s;
+ * }
+ * .my-animation.ng-enter.ng-enter-active {
+ * /* standard transition styles */
+ * opacity:1;
+ * }
+ * ```
+ *
+ * Staggering animations work by default in ngRepeat (so long as the CSS class is defined). Outside of ngRepeat, to use staggering animations
+ * on your own, they can be triggered by firing multiple calls to the same event on $animate. However, the restrictions surrounding this
+ * are that each of the elements must have the same CSS className value as well as the same parent element. A stagger operation
+ * will also be reset if one or more animation frames have passed since the multiple calls to `$animate` were fired.
+ *
+ * The following code will issue the **ng-leave-stagger** event on the element provided:
+ *
+ * ```js
+ * var kids = parent.children();
+ *
+ * $animate.leave(kids[0]); //stagger index=0
+ * $animate.leave(kids[1]); //stagger index=1
+ * $animate.leave(kids[2]); //stagger index=2
+ * $animate.leave(kids[3]); //stagger index=3
+ * $animate.leave(kids[4]); //stagger index=4
+ *
+ * window.requestAnimationFrame(function() {
+ * //stagger has reset itself
+ * $animate.leave(kids[5]); //stagger index=0
+ * $animate.leave(kids[6]); //stagger index=1
+ *
+ * $scope.$digest();
+ * });
+ * ```
+ *
+ * Stagger animations are currently only supported within CSS-defined animations.
+ *
+ * ### The `ng-animate` CSS class
+ *
+ * When ngAnimate is animating an element it will apply the `ng-animate` CSS class to the element for the duration of the animation.
+ * This is a temporary CSS class and it will be removed once the animation is over (for both JavaScript and CSS-based animations).
+ *
+ * Therefore, animations can be applied to an element using this temporary class directly via CSS.
+ *
+ * ```css
+ * .zipper.ng-animate {
+ * transition:0.5s linear all;
+ * }
+ * .zipper.ng-enter {
+ * opacity:0;
+ * }
+ * .zipper.ng-enter.ng-enter-active {
+ * opacity:1;
+ * }
+ * .zipper.ng-leave {
+ * opacity:1;
+ * }
+ * .zipper.ng-leave.ng-leave-active {
+ * opacity:0;
+ * }
+ * ```
+ *
+ * (Note that the `ng-animate` CSS class is reserved and it cannot be applied on an element directly since ngAnimate will always remove
+ * the CSS class once an animation has completed.)
+ *
+ *
+ * ### The `ng-[event]-prepare` class
+ *
+ * This is a special class that can be used to prevent unwanted flickering / flash of content before
+ * the actual animation starts. The class is added as soon as an animation is initialized, but removed
+ * before the actual animation starts (after waiting for a $digest).
+ * It is also only added for *structural* animations (`enter`, `move`, and `leave`).
+ *
+ * In practice, flickering can appear when nesting elements with structural animations such as `ngIf`
+ * into elements that have class-based animations such as `ngClass`.
+ *
+ * ```html
+ *
+ *
+ * ```
+ *
+ * It is possible that during the `enter` animation, the `.message` div will be briefly visible before it starts animating.
+ * In that case, you can add styles to the CSS that make sure the element stays hidden before the animation starts:
+ *
+ * ```css
+ * .message.ng-enter-prepare {
+ * opacity: 0;
+ * }
+ *
+ * ```
+ *
+ * ## JavaScript-based Animations
+ *
+ * ngAnimate also allows for animations to be consumed by JavaScript code. The approach is similar to CSS-based animations (where there is a shared
+ * 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
+ * `module.animation()` module function we can register the animation.
+ *
+ * Let's see an example of a enter/leave animation using `ngRepeat`:
+ *
+ * ```html
+ *
+ * ```
+ *
+ * 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`:
+ *
+ * ```js
+ * myModule.animation('.slide', [function() {
+ * return {
+ * // make note that other events (like addClass/removeClass)
+ * // have different function input parameters
+ * enter: function(element, doneFn) {
+ * jQuery(element).fadeIn(1000, doneFn);
+ *
+ * // remember to call doneFn so that angular
+ * // knows that the animation has concluded
+ * },
+ *
+ * move: function(element, doneFn) {
+ * jQuery(element).fadeIn(1000, doneFn);
+ * },
+ *
+ * leave: function(element, doneFn) {
+ * jQuery(element).fadeOut(1000, doneFn);
+ * }
+ * }
+ * }]);
+ * ```
+ *
+ * The nice thing about JS-based animations is that we can inject other services and make use of advanced animation libraries such as
+ * greensock.js and velocity.js.
+ *
+ * If our animation code class-based (meaning that something like `ngClass`, `ngHide` and `ngShow` triggers it) then we can still define
+ * our animations inside of the same registered animation, however, the function input arguments are a bit different:
+ *
+ * ```html
+ *
+ *
+ *
+ *
+ * this box is moody
+ *
+ *
+ *
+ *
+ * ```
+ *
+ * ```js
+ * myModule.animation('.colorful', [function() {
+ * return {
+ * addClass: function(element, className, doneFn) {
+ * // do some cool animation and call the doneFn
+ * },
+ * removeClass: function(element, className, doneFn) {
+ * // do some cool animation and call the doneFn
+ * },
+ * setClass: function(element, addedClass, removedClass, doneFn) {
+ * // do some cool animation and call the doneFn
+ * }
+ * }
+ * }]);
+ * ```
+ *
+ * ## CSS + JS Animations Together
+ *
+ * AngularJS 1.4 and higher has taken steps to make the amalgamation of CSS and JS animations more flexible. However, unlike earlier versions of Angular,
+ * 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
+ * charge of the animation**:
+ *
+ * ```html
+ *
+ * ```
+ *
+ * ```js
+ * myModule.animation('.slide', [function() {
+ * return {
+ * enter: function(element, doneFn) {
+ * jQuery(element).slideIn(1000, doneFn);
+ * }
+ * }
+ * }]);
+ * ```
+ *
+ * ```css
+ * .slide.ng-enter {
+ * transition:0.5s linear all;
+ * transform:translateY(-100px);
+ * }
+ * .slide.ng-enter.ng-enter-active {
+ * transform:translateY(0);
+ * }
+ * ```
+ *
+ * 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
+ * lack of CSS animations by using the `$animateCss` service to trigger our own tweaked-out, CSS-based animations directly from
+ * our own JS-based animation code:
+ *
+ * ```js
+ * myModule.animation('.slide', ['$animateCss', function($animateCss) {
+ * return {
+ * enter: function(element) {
+* // this will trigger `.slide.ng-enter` and `.slide.ng-enter-active`.
+ * return $animateCss(element, {
+ * event: 'enter',
+ * structural: true
+ * });
+ * }
+ * }
+ * }]);
+ * ```
+ *
+ * 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.
+ *
+ * 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
+ * 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
+ * data into `$animateCss` directly:
+ *
+ * ```js
+ * myModule.animation('.slide', ['$animateCss', function($animateCss) {
+ * return {
+ * enter: function(element) {
+ * return $animateCss(element, {
+ * event: 'enter',
+ * structural: true,
+ * addClass: 'maroon-setting',
+ * from: { height:0 },
+ * to: { height: 200 }
+ * });
+ * }
+ * }
+ * }]);
+ * ```
+ *
+ * Now we can fill in the rest via our transition CSS code:
+ *
+ * ```css
+ * /* the transition tells ngAnimate to make the animation happen */
+ * .slide.ng-enter { transition:0.5s linear all; }
+ *
+ * /* this extra CSS class will be absorbed into the transition
+ * since the $animateCss code is adding the class */
+ * .maroon-setting { background:red; }
+ * ```
+ *
+ * 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.
+ *
+ * To learn more about what's possible be sure to visit the {@link ngAnimate.$animateCss $animateCss service}.
+ *
+ * ## Animation Anchoring (via `ng-animate-ref`)
+ *
+ * ngAnimate in AngularJS 1.4 comes packed with the ability to cross-animate elements between
+ * structural areas of an application (like views) by pairing up elements using an attribute
+ * called `ng-animate-ref`.
+ *
+ * Let's say for example we have two views that are managed by `ng-view` and we want to show
+ * that there is a relationship between two components situated in within these views. By using the
+ * `ng-animate-ref` attribute we can identify that the two components are paired together and we
+ * can then attach an animation, which is triggered when the view changes.
+ *
+ * Say for example we have the following template code:
+ *
+ * ```html
+ *
+ *
+ *
+ *
+ *
+ *
+ * 
+ *
+ *
+ *
+ *
+ * ```
+ *
+ * Now, when the view changes (once the link is clicked), ngAnimate will examine the
+ * HTML contents to see if there is a match reference between any components in the view
+ * that is leaving and the view that is entering. It will scan both the view which is being
+ * removed (leave) and inserted (enter) to see if there are any paired DOM elements that
+ * contain a matching ref value.
+ *
+ * The two images match since they share the same ref value. ngAnimate will now create a
+ * transport element (which is a clone of the first image element) and it will then attempt
+ * to animate to the position of the second image element in the next view. For the animation to
+ * work a special CSS class called `ng-anchor` will be added to the transported element.
+ *
+ * We can now attach a transition onto the `.banner.ng-anchor` CSS class and then
+ * ngAnimate will handle the entire transition for us as well as the addition and removal of
+ * any changes of CSS classes between the elements:
+ *
+ * ```css
+ * .banner.ng-anchor {
+ * /* this animation will last for 1 second since there are
+ * two phases to the animation (an `in` and an `out` phase) */
+ * transition:0.5s linear all;
+ * }
+ * ```
+ *
+ * We also **must** include animations for the views that are being entered and removed
+ * (otherwise anchoring wouldn't be possible since the new view would be inserted right away).
+ *
+ * ```css
+ * .view-animation.ng-enter, .view-animation.ng-leave {
+ * transition:0.5s linear all;
+ * position:fixed;
+ * left:0;
+ * top:0;
+ * width:100%;
+ * }
+ * .view-animation.ng-enter {
+ * transform:translateX(100%);
+ * }
+ * .view-animation.ng-leave,
+ * .view-animation.ng-enter.ng-enter-active {
+ * transform:translateX(0%);
+ * }
+ * .view-animation.ng-leave.ng-leave-active {
+ * transform:translateX(-100%);
+ * }
+ * ```
+ *
+ * Now we can jump back to the anchor animation. When the animation happens, there are two stages that occur:
+ * an `out` and an `in` stage. The `out` stage happens first and that is when the element is animated away
+ * from its origin. Once that animation is over then the `in` stage occurs which animates the
+ * element to its destination. The reason why there are two animations is to give enough time
+ * for the enter animation on the new element to be ready.
+ *
+ * The example above sets up a transition for both the in and out phases, but we can also target the out or
+ * in phases directly via `ng-anchor-out` and `ng-anchor-in`.
+ *
+ * ```css
+ * .banner.ng-anchor-out {
+ * transition: 0.5s linear all;
+ *
+ * /* the scale will be applied during the out animation,
+ * but will be animated away when the in animation runs */
+ * transform: scale(1.2);
+ * }
+ *
+ * .banner.ng-anchor-in {
+ * transition: 1s linear all;
+ * }
+ * ```
+ *
+ *
+ *
+ *
+ * ### Anchoring Demo
+ *
+ +
+
+
+ Welcome to the home page +
Please click on an element
+ + {{ record.title }} + +
+ {{ profile.title }}
+
+ ';
+ this.loadingBarTemplate = '
';
+
+ this.$get = ['$injector', '$document', '$timeout', '$rootScope', function ($injector, $document, $timeout, $rootScope) {
+ var $animate;
+ var $parentSelector = this.parentSelector,
+ loadingBarContainer = angular.element(this.loadingBarTemplate),
+ loadingBar = loadingBarContainer.find('div').eq(0),
+ spinner = angular.element(this.spinnerTemplate);
+
+ var incTimeout,
+ completeTimeout,
+ started = false,
+ status = 0;
+
+ var autoIncrement = this.autoIncrement;
+ var includeSpinner = this.includeSpinner;
+ var includeBar = this.includeBar;
+ var startSize = this.startSize;
+
+ /**
+ * Inserts the loading bar element into the dom, and sets it to 2%
+ */
+ function _start() {
+ if (!$animate) {
+ $animate = $injector.get('$animate');
+ }
+
+ $timeout.cancel(completeTimeout);
+
+ // do not continually broadcast the started event:
+ if (started) {
+ return;
+ }
+
+ var document = $document[0];
+ var parent = document.querySelector ?
+ document.querySelector($parentSelector)
+ : $document.find($parentSelector)[0]
+ ;
+
+ if (! parent) {
+ parent = document.getElementsByTagName('body')[0];
+ }
+
+ var $parent = angular.element(parent);
+ var $after = parent.lastChild && angular.element(parent.lastChild);
+
+ $rootScope.$broadcast('cfpLoadingBar:started');
+ started = true;
+
+ if (includeBar) {
+ $animate.enter(loadingBarContainer, $parent, $after);
+ }
+
+ if (includeSpinner) {
+ $animate.enter(spinner, $parent, loadingBarContainer);
+ }
+
+ _set(startSize);
+ }
+
+ /**
+ * Set the loading bar's width to a certain percent.
+ *
+ * @param n any value between 0 and 1
+ */
+ function _set(n) {
+ if (!started) {
+ return;
+ }
+ var pct = (n * 100) + '%';
+ loadingBar.css('width', pct);
+ status = n;
+
+ // increment loadingbar to give the illusion that there is always
+ // progress but make sure to cancel the previous timeouts so we don't
+ // have multiple incs running at the same time.
+ if (autoIncrement) {
+ $timeout.cancel(incTimeout);
+ incTimeout = $timeout(function() {
+ _inc();
+ }, 250);
+ }
+ }
+
+ /**
+ * Increments the loading bar by a random amount
+ * but slows down as it progresses
+ */
+ function _inc() {
+ if (_status() >= 1) {
+ return;
+ }
+
+ var rnd = 0;
+
+ // TODO: do this mathmatically instead of through conditions
+
+ var stat = _status();
+ if (stat >= 0 && stat < 0.25) {
+ // Start out between 3 - 6% increments
+ rnd = (Math.random() * (5 - 3 + 1) + 3) / 100;
+ } else if (stat >= 0.25 && stat < 0.65) {
+ // increment between 0 - 3%
+ rnd = (Math.random() * 3) / 100;
+ } else if (stat >= 0.65 && stat < 0.9) {
+ // increment between 0 - 2%
+ rnd = (Math.random() * 2) / 100;
+ } else if (stat >= 0.9 && stat < 0.99) {
+ // finally, increment it .5 %
+ rnd = 0.005;
+ } else {
+ // after 99%, don't increment:
+ rnd = 0;
+ }
+
+ var pct = _status() + rnd;
+ _set(pct);
+ }
+
+ function _status() {
+ return status;
+ }
+
+ function _completeAnimation() {
+ status = 0;
+ started = false;
+ }
+
+ function _complete() {
+ if (!$animate) {
+ $animate = $injector.get('$animate');
+ }
+
+ $rootScope.$broadcast('cfpLoadingBar:completed');
+ _set(1);
+
+ $timeout.cancel(completeTimeout);
+
+ // Attempt to aggregate any start/complete calls within 500ms:
+ completeTimeout = $timeout(function() {
+ var promise = $animate.leave(loadingBarContainer, _completeAnimation);
+ if (promise && promise.then) {
+ promise.then(_completeAnimation);
+ }
+ $animate.leave(spinner);
+ }, 500);
+ }
+
+ return {
+ start : _start,
+ set : _set,
+ status : _status,
+ inc : _inc,
+ complete : _complete,
+ autoIncrement : this.autoIncrement,
+ includeSpinner : this.includeSpinner,
+ latencyThreshold : this.latencyThreshold,
+ parentSelector : this.parentSelector,
+ startSize : this.startSize
+ };
+
+
+ }]; //
+ }); // wtf javascript. srsly
+})(); //
+
+},{}],6:[function(require,module,exports){
+require('./build/loading-bar');
+module.exports = 'angular-loading-bar';
+
+},{"./build/loading-bar":5}],7:[function(require,module,exports){
+/*!
+ * Angular Material Design
+ * https://github.com/angular/material
+ * @license MIT
+ * v1.1.1
+ */
+(function( window, angular, undefined ){
+"use strict";
+
+(function(){
+"use strict";
+
+angular.module('ngMaterial', ["ng","ngAnimate","ngAria","material.core","material.core.gestures","material.core.layout","material.core.meta","material.core.theming.palette","material.core.theming","material.core.animate","material.components.autocomplete","material.components.backdrop","material.components.bottomSheet","material.components.button","material.components.card","material.components.chips","material.components.checkbox","material.components.colors","material.components.content","material.components.datepicker","material.components.dialog","material.components.divider","material.components.fabActions","material.components.fabShared","material.components.fabSpeedDial","material.components.fabToolbar","material.components.gridList","material.components.icon","material.components.input","material.components.list","material.components.menu","material.components.menuBar","material.components.navBar","material.components.panel","material.components.progressCircular","material.components.progressLinear","material.components.radioButton","material.components.select","material.components.showHide","material.components.sidenav","material.components.slider","material.components.sticky","material.components.subheader","material.components.swipe","material.components.switch","material.components.tabs","material.components.toast","material.components.toolbar","material.components.tooltip","material.components.virtualRepeat","material.components.whiteframe"]);
+})();
+(function(){
+"use strict";
+
+/**
+ * Initialization function that validates environment
+ * requirements.
+ */
+DetectNgTouch.$inject = ["$log", "$injector"];
+MdCoreConfigure.$inject = ["$provide", "$mdThemingProvider"];
+rAFDecorator.$inject = ["$delegate"];
+angular
+ .module('material.core', [
+ 'ngAnimate',
+ 'material.core.animate',
+ 'material.core.layout',
+ 'material.core.gestures',
+ 'material.core.theming'
+ ])
+ .config(MdCoreConfigure)
+ .run(DetectNgTouch);
+
+
+/**
+ * Detect if the ng-Touch module is also being used.
+ * Warn if detected.
+ * @ngInject
+ */
+function DetectNgTouch($log, $injector) {
+ if ( $injector.has('$swipe') ) {
+ var msg = "" +
+ "You are using the ngTouch module. \n" +
+ "Angular Material already has mobile click, tap, and swipe support... \n" +
+ "ngTouch is not supported with Angular Material!";
+ $log.warn(msg);
+ }
+}
+
+/**
+ * @ngInject
+ */
+function MdCoreConfigure($provide, $mdThemingProvider) {
+
+ $provide.decorator('$$rAF', ["$delegate", rAFDecorator]);
+
+ $mdThemingProvider.theme('default')
+ .primaryPalette('indigo')
+ .accentPalette('pink')
+ .warnPalette('deep-orange')
+ .backgroundPalette('grey');
+}
+
+/**
+ * @ngInject
+ */
+function rAFDecorator($delegate) {
+ /**
+ * Use this to throttle events that come in often.
+ * The throttled function will always use the *last* invocation before the
+ * coming frame.
+ *
+ * For example, window resize events that fire many times a second:
+ * If we set to use an raf-throttled callback on window resize, then
+ * our callback will only be fired once per frame, with the last resize
+ * event that happened before that frame.
+ *
+ * @param {function} callback function to debounce
+ */
+ $delegate.throttle = function(cb) {
+ var queuedArgs, alreadyQueued, queueCb, context;
+ return function debounced() {
+ queuedArgs = arguments;
+ context = this;
+ queueCb = cb;
+ if (!alreadyQueued) {
+ alreadyQueued = true;
+ $delegate(function() {
+ queueCb.apply(context, Array.prototype.slice.call(queuedArgs));
+ alreadyQueued = false;
+ });
+ }
+ };
+ };
+ return $delegate;
+}
+
+})();
+(function(){
+"use strict";
+
+angular.module('material.core')
+ .directive('mdAutofocus', MdAutofocusDirective)
+
+ // Support the deprecated md-auto-focus and md-sidenav-focus as well
+ .directive('mdAutoFocus', MdAutofocusDirective)
+ .directive('mdSidenavFocus', MdAutofocusDirective);
+
+/**
+ * @ngdoc directive
+ * @name mdAutofocus
+ * @module material.core.util
+ *
+ * @description
+ *
+ * `[md-autofocus]` provides an optional way to identify the focused element when a `$mdDialog`,
+ * `$mdBottomSheet`, `$mdMenu` or `$mdSidenav` opens or upon page load for input-like elements.
+ *
+ * When one of these opens, it will find the first nested element with the `[md-autofocus]`
+ * attribute directive and optional expression. An expression may be specified as the directive
+ * value to enable conditional activation of the autofocus.
+ *
+ * @usage
+ *
+ * ### Dialog
+ *
+ *
+ * Left Nav!
+ *
+ *
+ *
+ * Center Content
+ *
+ * Open Left Menu
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ * | Breakpoint | + *mediaQuery | + *
|---|---|
| xs | + *(max-width: 599px) | + *
| gt-xs | + *(min-width: 600px) | + *
| sm | + *(min-width: 600px) and (max-width: 959px) | + *
| gt-sm | + *(min-width: 960px) | + *
| md | + *(min-width: 960px) and (max-width: 1279px) | + *
| gt-md | + *(min-width: 1280px) | + *
| lg | + *(min-width: 1280px) and (max-width: 1919px) | + *
| gt-lg | + *(min-width: 1920px) | + *
| xl | + *(min-width: 1920px) | + *
| landscape | + *landscape | + *
| portrait | + *portrait | + *
+ *
+ *
+ * @returns {boolean} a boolean representing whether or not the given media query is true or false.
+ *
+ * @usage
+ * ' +
+ ' ' +
+ '
');
+ element.appendChild(scrollMask[0]);
+ }
+
+ scrollMask.on('wheel', preventDefault);
+ scrollMask.on('touchmove', preventDefault);
+
+ return function restoreScroll() {
+ scrollMask.off('wheel');
+ scrollMask.off('touchmove');
+ scrollMask[0].parentNode.removeChild(scrollMask[0]);
+ delete $mdUtil.disableScrollAround._enableScrolling;
+ };
+
+ function preventDefault(e) {
+ e.preventDefault();
+ }
+ }
+
+ // Converts the body to a position fixed block and translate it to the proper scroll position
+ function disableBodyScroll() {
+ var htmlNode = body.parentNode;
+ var restoreHtmlStyle = htmlNode.style.cssText || '';
+ var restoreBodyStyle = body.style.cssText || '';
+ var scrollOffset = $mdUtil.scrollTop(body);
+ var clientWidth = body.clientWidth;
+
+ if (body.scrollHeight > body.clientHeight + 1) {
+ applyStyles(body, {
+ position: 'fixed',
+ width: '100%',
+ top: -scrollOffset + 'px'
+ });
+
+ htmlNode.style.overflowY = 'scroll';
+ }
+
+ if (body.clientWidth < clientWidth) applyStyles(body, {overflow: 'hidden'});
+
+ return function restoreScroll() {
+ body.style.cssText = restoreBodyStyle;
+ htmlNode.style.cssText = restoreHtmlStyle;
+ body.scrollTop = scrollOffset;
+ htmlNode.scrollTop = scrollOffset;
+ };
+ }
+
+ function applyStyles(el, styles) {
+ for (var key in styles) {
+ el.style[key] = styles[key];
+ }
+ }
+ },
+ enableScrolling: function() {
+ var method = this.disableScrollAround._enableScrolling;
+ method && method();
+ },
+ floatingScrollbars: function() {
+ if (this.floatingScrollbars.cached === undefined) {
+ var tempNode = angular.element('').css({
+ width: '100%',
+ 'z-index': -1,
+ position: 'absolute',
+ height: '35px',
+ 'overflow-y': 'scroll'
+ });
+ tempNode.children().css('height', '60px');
+
+ $document[0].body.appendChild(tempNode[0]);
+ this.floatingScrollbars.cached = (tempNode[0].offsetWidth == tempNode[0].childNodes[0].offsetWidth);
+ tempNode.remove();
+ }
+ return this.floatingScrollbars.cached;
+ },
+
+ // Mobile safari only allows you to set focus in click event listeners...
+ forceFocus: function(element) {
+ var node = element[0] || element;
+
+ document.addEventListener('click', function focusOnClick(ev) {
+ if (ev.target === node && ev.$focus) {
+ node.focus();
+ ev.stopImmediatePropagation();
+ ev.preventDefault();
+ node.removeEventListener('click', focusOnClick);
+ }
+ }, true);
+
+ var newEvent = document.createEvent('MouseEvents');
+ newEvent.initMouseEvent('click', false, true, window, {}, 0, 0, 0, 0,
+ false, false, false, false, 0, null);
+ newEvent.$material = true;
+ newEvent.$focus = true;
+ node.dispatchEvent(newEvent);
+ },
+
+ /**
+ * facade to build md-backdrop element with desired styles
+ * NOTE: Use $compile to trigger backdrop postLink function
+ */
+ createBackdrop: function(scope, addClass) {
+ return $compile($mdUtil.supplant('
');
+ $document[0].body.appendChild(testEl[0]);
+
+ var stickyProps = ['sticky', '-webkit-sticky'];
+ for (var i = 0; i < stickyProps.length; ++i) {
+ testEl.css({
+ position: stickyProps[i],
+ top: 0,
+ 'z-index': 2
+ });
+
+ if (testEl.css('position') == stickyProps[i]) {
+ stickyProp = stickyProps[i];
+ break;
+ }
+ }
+
+ testEl.remove();
+
+ return stickyProp;
+ },
+
+ /**
+ * Parses an attribute value, mostly a string.
+ * By default checks for negated values and returns `false´ if present.
+ * Negated values are: (native falsy) and negative strings like:
+ * `false` or `0`.
+ * @param value Attribute value which should be parsed.
+ * @param negatedCheck When set to false, won't check for negated values.
+ * @returns {boolean}
+ */
+ parseAttributeBoolean: function(value, negatedCheck) {
+ return value === '' || !!value && (negatedCheck === false || value !== 'false' && value !== '0');
+ },
+
+ hasComputedStyle: hasComputedStyle,
+
+ /**
+ * Returns true if the parent form of the element has been submitted.
+ *
+ * @param element An Angular or HTML5 element.
+ *
+ * @returns {boolean}
+ */
+ isParentFormSubmitted: function(element) {
+ var parent = $mdUtil.getClosest(element, 'form');
+ var form = parent ? angular.element(parent).controller('form') : null;
+
+ return form ? form.$submitted : false;
+ },
+
+ /**
+ * Animate the requested element's scrollTop to the requested scrollPosition with basic easing.
+ *
+ * @param element The element to scroll.
+ * @param scrollEnd The new/final scroll position.
+ */
+ animateScrollTo: function(element, scrollEnd) {
+ var scrollStart = element.scrollTop;
+ var scrollChange = scrollEnd - scrollStart;
+ var scrollingDown = scrollStart < scrollEnd;
+ var startTime = $mdUtil.now();
+
+ $$rAF(scrollChunk);
+
+ function scrollChunk() {
+ var newPosition = calculateNewPosition();
+
+ element.scrollTop = newPosition;
+
+ if (scrollingDown ? newPosition < scrollEnd : newPosition > scrollEnd) {
+ $$rAF(scrollChunk);
+ }
+ }
+
+ function calculateNewPosition() {
+ var duration = 1000;
+ var currentTime = $mdUtil.now() - startTime;
+
+ return ease(currentTime, scrollStart, scrollChange, duration);
+ }
+
+ function ease(currentTime, start, change, duration) {
+ // If the duration has passed (which can occur if our app loses focus due to $$rAF), jump
+ // straight to the proper position
+ if (currentTime > duration) {
+ return start + change;
+ }
+
+ var ts = (currentTime /= duration) * currentTime;
+ var tc = ts * currentTime;
+
+ return start + change * (-2 * tc + 3 * ts);
+ }
+ }
+ };
+
+
+// Instantiate other namespace utility methods
+
+ $mdUtil.dom.animator = $$mdAnimate($mdUtil);
+
+ return $mdUtil;
+
+ function getNode(el) {
+ return el[0] || el;
+ }
+
+}
+
+/*
+ * Since removing jQuery from the demos, some code that uses `element.focus()` is broken.
+ * We need to add `element.focus()`, because it's testable unlike `element[0].focus`.
+ */
+
+angular.element.prototype.focus = angular.element.prototype.focus || function() {
+ if (this.length) {
+ this[0].focus();
+ }
+ return this;
+ };
+angular.element.prototype.blur = angular.element.prototype.blur || function() {
+ if (this.length) {
+ this[0].blur();
+ }
+ return this;
+ };
+
+})();
+(function(){
+"use strict";
+
+/**
+ * @ngdoc module
+ * @name material.core.aria
+ * @description
+ * Aria Expectations for ngMaterial components.
+ */
+MdAriaService.$inject = ["$$rAF", "$log", "$window", "$interpolate"];
+angular
+ .module('material.core')
+ .provider('$mdAria', MdAriaProvider);
+
+/**
+ * @ngdoc service
+ * @name $mdAriaProvider
+ * @module material.core.aria
+ *
+ * @description
+ *
+ * Modify options of the `$mdAria` service, which will be used by most of the Angular Material
+ * components.
+ *
+ * You are able to disable `$mdAria` warnings, by using the following markup.
+ *
+ *
+ * app.config(function($mdAriaProvider) {
+ * // Globally disables all ARIA warnings.
+ * $mdAriaProvider.disableWarnings();
+ * });
+ *
+ *
+ */
+function MdAriaProvider() {
+
+ var self = this;
+
+ /**
+ * Whether we should show ARIA warnings in the console, if labels are missing on the element
+ * By default the warnings are enabled
+ */
+ self.showWarnings = true;
+
+ return {
+ disableWarnings: disableWarnings,
+ $get: ["$$rAF", "$log", "$window", "$interpolate", function($$rAF, $log, $window, $interpolate) {
+ return MdAriaService.apply(self, arguments);
+ }]
+ };
+
+ /**
+ * @ngdoc method
+ * @name $mdAriaProvider#disableWarnings
+ * @description Disables all ARIA warnings generated by Angular Material.
+ */
+ function disableWarnings() {
+ self.showWarnings = false;
+ }
+}
+
+/*
+ * @ngInject
+ */
+function MdAriaService($$rAF, $log, $window, $interpolate) {
+
+ // Load the showWarnings option from the current context and store it inside of a scope variable,
+ // because the context will be probably lost in some function calls.
+ var showWarnings = this.showWarnings;
+
+ return {
+ expect: expect,
+ expectAsync: expectAsync,
+ expectWithText: expectWithText,
+ expectWithoutText: expectWithoutText
+ };
+
+ /**
+ * Check if expected attribute has been specified on the target element or child
+ * @param element
+ * @param attrName
+ * @param {optional} defaultValue What to set the attr to if no value is found
+ */
+ function expect(element, attrName, defaultValue) {
+
+ var node = angular.element(element)[0] || element;
+
+ // if node exists and neither it nor its children have the attribute
+ if (node &&
+ ((!node.hasAttribute(attrName) ||
+ node.getAttribute(attrName).length === 0) &&
+ !childHasAttribute(node, attrName))) {
+
+ defaultValue = angular.isString(defaultValue) ? defaultValue.trim() : '';
+ if (defaultValue.length) {
+ element.attr(attrName, defaultValue);
+ } else if (showWarnings) {
+ $log.warn('ARIA: Attribute "', attrName, '", required for accessibility, is missing on node:', node);
+ }
+
+ }
+ }
+
+ function expectAsync(element, attrName, defaultValueGetter) {
+ // Problem: when retrieving the element's contents synchronously to find the label,
+ // the text may not be defined yet in the case of a binding.
+ // There is a higher chance that a binding will be defined if we wait one frame.
+ $$rAF(function() {
+ expect(element, attrName, defaultValueGetter());
+ });
+ }
+
+ function expectWithText(element, attrName) {
+ var content = getText(element) || "";
+ var hasBinding = content.indexOf($interpolate.startSymbol()) > -1;
+
+ if ( hasBinding ) {
+ expectAsync(element, attrName, function() {
+ return getText(element);
+ });
+ } else {
+ expect(element, attrName, content);
+ }
+ }
+
+ function expectWithoutText(element, attrName) {
+ var content = getText(element);
+ var hasBinding = content.indexOf($interpolate.startSymbol()) > -1;
+
+ if ( !hasBinding && !content) {
+ expect(element, attrName, content);
+ }
+ }
+
+ function getText(element) {
+ element = element[0] || element;
+ var walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null, false);
+ var text = '';
+
+ var node;
+ while (node = walker.nextNode()) {
+ if (!isAriaHiddenNode(node)) {
+ text += node.textContent;
+ }
+ }
+
+ return text.trim() || '';
+
+ function isAriaHiddenNode(node) {
+ while (node.parentNode && (node = node.parentNode) !== element) {
+ if (node.getAttribute && node.getAttribute('aria-hidden') === 'true') {
+ return true;
+ }
+ }
+ }
+ }
+
+ function childHasAttribute(node, attrName) {
+ var hasChildren = node.hasChildNodes(),
+ hasAttr = false;
+
+ function isHidden(el) {
+ var style = el.currentStyle ? el.currentStyle : $window.getComputedStyle(el);
+ return (style.display === 'none');
+ }
+
+ if (hasChildren) {
+ var children = node.childNodes;
+ for (var i=0; i < children.length; i++) {
+ var child = children[i];
+ if (child.nodeType === 1 && child.hasAttribute(attrName)) {
+ if (!isHidden(child)) {
+ hasAttr = true;
+ }
+ }
+ }
+ }
+
+ return hasAttr;
+ }
+}
+
+})();
+(function(){
+"use strict";
+
+
+mdCompilerService.$inject = ["$q", "$templateRequest", "$injector", "$compile", "$controller"];angular
+ .module('material.core')
+ .service('$mdCompiler', mdCompilerService);
+
+function mdCompilerService($q, $templateRequest, $injector, $compile, $controller) {
+ /* jshint validthis: true */
+
+ /*
+ * @ngdoc service
+ * @name $mdCompiler
+ * @module material.core
+ * @description
+ * The $mdCompiler service is an abstraction of angular's compiler, that allows the developer
+ * to easily compile an element with a templateUrl, controller, and locals.
+ *
+ * @usage
+ *
+ * $mdCompiler.compile({
+ * templateUrl: 'modal.html',
+ * controller: 'ModalCtrl',
+ * locals: {
+ * modal: myModalInstance;
+ * }
+ * }).then(function(compileData) {
+ * compileData.element; // modal.html's template in an element
+ * compileData.link(myScope); //attach controller & scope to element
+ * });
+ *
+ */
+
+ /*
+ * @ngdoc method
+ * @name $mdCompiler#compile
+ * @description A helper to compile an HTML template/templateUrl with a given controller,
+ * locals, and scope.
+ * @param {object} options An options object, with the following properties:
+ *
+ * - `controller` - `{(string=|function()=}` Controller fn that should be associated with
+ * newly created scope or the name of a registered controller if passed as a string.
+ * - `controllerAs` - `{string=}` A controller alias name. If present the controller will be
+ * published to scope under the `controllerAs` name.
+ * - `template` - `{string=}` An html template as a string.
+ * - `templateUrl` - `{string=}` A path to an html template.
+ * - `transformTemplate` - `{function(template)=}` A function which transforms the template after
+ * it is loaded. It will be given the template string as a parameter, and should
+ * return a a new string representing the transformed template.
+ * - `resolve` - `{Object.=}` - An optional map of dependencies which should
+ * be injected into the controller. If any of these dependencies are promises, the compiler
+ * will wait for them all to be resolved, or if one is rejected before the controller is
+ * instantiated `compile()` will fail..
+ * * `key` - `{string}`: a name of a dependency to be injected into the controller.
+ * * `factory` - `{string|function}`: If `string` then it is an alias for a service.
+ * Otherwise if function, then it is injected and the return value is treated as the
+ * dependency. If the result is a promise, it is resolved before its value is
+ * injected into the controller.
+ *
+ * @returns {object=} promise A promise, which will be resolved with a `compileData` object.
+ * `compileData` has the following properties:
+ *
+ * - `element` - `{element}`: an uncompiled element matching the provided template.
+ * - `link` - `{function(scope)}`: A link function, which, when called, will compile
+ * the element and instantiate the provided controller (if given).
+ * - `locals` - `{object}`: The locals which will be passed into the controller once `link` is
+ * called. If `bindToController` is true, they will be coppied to the ctrl instead
+ * - `bindToController` - `bool`: bind the locals to the controller, instead of passing them in.
+ */
+ this.compile = function(options) {
+ var templateUrl = options.templateUrl;
+ var template = options.template || '';
+ var controller = options.controller;
+ var controllerAs = options.controllerAs;
+ var resolve = angular.extend({}, options.resolve || {});
+ var locals = angular.extend({}, options.locals || {});
+ var transformTemplate = options.transformTemplate || angular.identity;
+ var bindToController = options.bindToController;
+
+ // Take resolve values and invoke them.
+ // Resolves can either be a string (value: 'MyRegisteredAngularConst'),
+ // or an invokable 'factory' of sorts: (value: function ValueGetter($dependency) {})
+ angular.forEach(resolve, function(value, key) {
+ if (angular.isString(value)) {
+ resolve[key] = $injector.get(value);
+ } else {
+ resolve[key] = $injector.invoke(value);
+ }
+ });
+ //Add the locals, which are just straight values to inject
+ //eg locals: { three: 3 }, will inject three into the controller
+ angular.extend(resolve, locals);
+
+ if (templateUrl) {
+ resolve.$template = $templateRequest(templateUrl)
+ .then(function(response) {
+ return response;
+ });
+ } else {
+ resolve.$template = $q.when(template);
+ }
+
+ // Wait for all the resolves to finish if they are promises
+ return $q.all(resolve).then(function(locals) {
+
+ var compiledData;
+ var template = transformTemplate(locals.$template, options);
+ var element = options.element || angular.element('
').html(template.trim()).contents();
+ var linkFn = $compile(element);
+
+ // Return a linking function that can be used later when the element is ready
+ return compiledData = {
+ locals: locals,
+ element: element,
+ link: function link(scope) {
+ locals.$scope = scope;
+
+ //Instantiate controller if it exists, because we have scope
+ if (controller) {
+ var invokeCtrl = $controller(controller, locals, true, controllerAs);
+ if (bindToController) {
+ angular.extend(invokeCtrl.instance, locals);
+ }
+ var ctrl = invokeCtrl();
+ //See angular-route source for this logic
+ element.data('$ngControllerController', ctrl);
+ element.children().data('$ngControllerController', ctrl);
+
+ // Publish reference to this controller
+ compiledData.controller = ctrl;
+ }
+ return linkFn(scope);
+ }
+ };
+ });
+
+ };
+}
+
+})();
+(function(){
+"use strict";
+
+
+MdGesture.$inject = ["$$MdGestureHandler", "$$rAF", "$timeout"];
+attachToDocument.$inject = ["$mdGesture", "$$MdGestureHandler"];var HANDLERS = {};
+
+/* The state of the current 'pointer'
+ * The pointer represents the state of the current touch.
+ * It contains normalized x and y coordinates from DOM events,
+ * as well as other information abstracted from the DOM.
+ */
+
+var pointer, lastPointer, forceSkipClickHijack = false;
+
+/**
+ * The position of the most recent click if that click was on a label element.
+ * @type {{x: number, y: number}?}
+ */
+var lastLabelClickPos = null;
+
+// Used to attach event listeners once when multiple ng-apps are running.
+var isInitialized = false;
+
+angular
+ .module('material.core.gestures', [ ])
+ .provider('$mdGesture', MdGestureProvider)
+ .factory('$$MdGestureHandler', MdGestureHandler)
+ .run( attachToDocument );
+
+/**
+ * @ngdoc service
+ * @name $mdGestureProvider
+ * @module material.core.gestures
+ *
+ * @description
+ * In some scenarios on Mobile devices (without jQuery), the click events should NOT be hijacked.
+ * `$mdGestureProvider` is used to configure the Gesture module to ignore or skip click hijacking on mobile
+ * devices.
+ *
+ *
+ * app.config(function($mdGestureProvider) {
+ *
+ * // For mobile devices without jQuery loaded, do not
+ * // intercept click events during the capture phase.
+ * $mdGestureProvider.skipClickHijack();
+ *
+ * });
+ *
+ *
+ */
+function MdGestureProvider() { }
+
+MdGestureProvider.prototype = {
+
+ // Publish access to setter to configure a variable BEFORE the
+ // $mdGesture service is instantiated...
+ skipClickHijack: function() {
+ return forceSkipClickHijack = true;
+ },
+
+ /**
+ * $get is used to build an instance of $mdGesture
+ * @ngInject
+ */
+ $get : ["$$MdGestureHandler", "$$rAF", "$timeout", function($$MdGestureHandler, $$rAF, $timeout) {
+ return new MdGesture($$MdGestureHandler, $$rAF, $timeout);
+ }]
+};
+
+
+
+/**
+ * MdGesture factory construction function
+ * @ngInject
+ */
+function MdGesture($$MdGestureHandler, $$rAF, $timeout) {
+ var userAgent = navigator.userAgent || navigator.vendor || window.opera;
+ var isIos = userAgent.match(/ipad|iphone|ipod/i);
+ var isAndroid = userAgent.match(/android/i);
+ var touchActionProperty = getTouchAction();
+ var hasJQuery = (typeof window.jQuery !== 'undefined') && (angular.element === window.jQuery);
+
+ var self = {
+ handler: addHandler,
+ register: register,
+ isIos: isIos,
+ isAndroid: isAndroid,
+ // On mobile w/out jQuery, we normally intercept clicks. Should we skip that?
+ isHijackingClicks: (isIos || isAndroid) && !hasJQuery && !forceSkipClickHijack
+ };
+
+ if (self.isHijackingClicks) {
+ var maxClickDistance = 6;
+ self.handler('click', {
+ options: {
+ maxDistance: maxClickDistance
+ },
+ onEnd: checkDistanceAndEmit('click')
+ });
+
+ self.handler('focus', {
+ options: {
+ maxDistance: maxClickDistance
+ },
+ onEnd: function(ev, pointer) {
+ if (pointer.distance < this.state.options.maxDistance) {
+ if (canFocus(ev.target)) {
+ this.dispatchEvent(ev, 'focus', pointer);
+ ev.target.focus();
+ }
+ }
+
+ function canFocus(element) {
+ var focusableElements = ['INPUT', 'SELECT', 'BUTTON', 'TEXTAREA', 'VIDEO', 'AUDIO'];
+
+ return (element.getAttribute('tabindex') != '-1') &&
+ !element.hasAttribute('DISABLED') &&
+ (element.hasAttribute('tabindex') || element.hasAttribute('href') || element.isContentEditable ||
+ (focusableElements.indexOf(element.nodeName) != -1));
+ }
+ }
+ });
+
+ self.handler('mouseup', {
+ options: {
+ maxDistance: maxClickDistance
+ },
+ onEnd: checkDistanceAndEmit('mouseup')
+ });
+
+ self.handler('mousedown', {
+ onStart: function(ev) {
+ this.dispatchEvent(ev, 'mousedown');
+ }
+ });
+ }
+
+ function checkDistanceAndEmit(eventName) {
+ return function(ev, pointer) {
+ if (pointer.distance < this.state.options.maxDistance) {
+ this.dispatchEvent(ev, eventName, pointer);
+ }
+ };
+ }
+
+ /*
+ * Register an element to listen for a handler.
+ * This allows an element to override the default options for a handler.
+ * Additionally, some handlers like drag and hold only dispatch events if
+ * the domEvent happens inside an element that's registered to listen for these events.
+ *
+ * @see GestureHandler for how overriding of default options works.
+ * @example $mdGesture.register(myElement, 'drag', { minDistance: 20, horziontal: false })
+ */
+ function register(element, handlerName, options) {
+ var handler = HANDLERS[handlerName.replace(/^\$md./, '')];
+ if (!handler) {
+ throw new Error('Failed to register element with handler ' + handlerName + '. ' +
+ 'Available handlers: ' + Object.keys(HANDLERS).join(', '));
+ }
+ return handler.registerElement(element, options);
+ }
+
+ /*
+ * add a handler to $mdGesture. see below.
+ */
+ function addHandler(name, definition) {
+ var handler = new $$MdGestureHandler(name);
+ angular.extend(handler, definition);
+ HANDLERS[name] = handler;
+
+ return self;
+ }
+
+ /*
+ * Register handlers. These listen to touch/start/move events, interpret them,
+ * and dispatch gesture events depending on options & conditions. These are all
+ * instances of GestureHandler.
+ * @see GestureHandler
+ */
+ return self
+ /*
+ * The press handler dispatches an event on touchdown/touchend.
+ * It's a simple abstraction of touch/mouse/pointer start and end.
+ */
+ .handler('press', {
+ onStart: function (ev, pointer) {
+ this.dispatchEvent(ev, '$md.pressdown');
+ },
+ onEnd: function (ev, pointer) {
+ this.dispatchEvent(ev, '$md.pressup');
+ }
+ })
+
+ /*
+ * The hold handler dispatches an event if the user keeps their finger within
+ * the same area for ms.
+ * The hold handler will only run if a parent of the touch target is registered
+ * to listen for hold events through $mdGesture.register()
+ */
+ .handler('hold', {
+ options: {
+ maxDistance: 6,
+ delay: 500
+ },
+ onCancel: function () {
+ $timeout.cancel(this.state.timeout);
+ },
+ onStart: function (ev, pointer) {
+ // For hold, require a parent to be registered with $mdGesture.register()
+ // Because we prevent scroll events, this is necessary.
+ if (!this.state.registeredParent) return this.cancel();
+
+ this.state.pos = {x: pointer.x, y: pointer.y};
+ this.state.timeout = $timeout(angular.bind(this, function holdDelayFn() {
+ this.dispatchEvent(ev, '$md.hold');
+ this.cancel(); //we're done!
+ }), this.state.options.delay, false);
+ },
+ onMove: function (ev, pointer) {
+ // Don't scroll while waiting for hold.
+ // If we don't preventDefault touchmove events here, Android will assume we don't
+ // want to listen to anymore touch events. It will start scrolling and stop sending
+ // touchmove events.
+ if (!touchActionProperty && ev.type === 'touchmove') ev.preventDefault();
+
+ // If the user moves greater than pixels, stop the hold timer
+ // set in onStart
+ var dx = this.state.pos.x - pointer.x;
+ var dy = this.state.pos.y - pointer.y;
+ if (Math.sqrt(dx * dx + dy * dy) > this.options.maxDistance) {
+ this.cancel();
+ }
+ },
+ onEnd: function () {
+ this.onCancel();
+ }
+ })
+
+ /*
+ * The drag handler dispatches a drag event if the user holds and moves his finger greater than
+ * px in the x or y direction, depending on options.horizontal.
+ * The drag will be cancelled if the user moves his finger greater than * in
+ * the perpendicular direction. Eg if the drag is horizontal and the user moves his finger *
+ * pixels vertically, this handler won't consider the move part of a drag.
+ */
+ .handler('drag', {
+ options: {
+ minDistance: 6,
+ horizontal: true,
+ cancelMultiplier: 1.5
+ },
+ onSetup: function(element, options) {
+ if (touchActionProperty) {
+ // We check for horizontal to be false, because otherwise we would overwrite the default opts.
+ this.oldTouchAction = element[0].style[touchActionProperty];
+ element[0].style[touchActionProperty] = options.horizontal === false ? 'pan-y' : 'pan-x';
+ }
+ },
+ onCleanup: function(element) {
+ if (this.oldTouchAction) {
+ element[0].style[touchActionProperty] = this.oldTouchAction;
+ }
+ },
+ onStart: function (ev) {
+ // For drag, require a parent to be registered with $mdGesture.register()
+ if (!this.state.registeredParent) this.cancel();
+ },
+ onMove: function (ev, pointer) {
+ var shouldStartDrag, shouldCancel;
+ // Don't scroll while deciding if this touchmove qualifies as a drag event.
+ // If we don't preventDefault touchmove events here, Android will assume we don't
+ // want to listen to anymore touch events. It will start scrolling and stop sending
+ // touchmove events.
+ if (!touchActionProperty && ev.type === 'touchmove') ev.preventDefault();
+
+ if (!this.state.dragPointer) {
+ if (this.state.options.horizontal) {
+ shouldStartDrag = Math.abs(pointer.distanceX) > this.state.options.minDistance;
+ shouldCancel = Math.abs(pointer.distanceY) > this.state.options.minDistance * this.state.options.cancelMultiplier;
+ } else {
+ shouldStartDrag = Math.abs(pointer.distanceY) > this.state.options.minDistance;
+ shouldCancel = Math.abs(pointer.distanceX) > this.state.options.minDistance * this.state.options.cancelMultiplier;
+ }
+
+ if (shouldStartDrag) {
+ // Create a new pointer representing this drag, starting at this point where the drag started.
+ this.state.dragPointer = makeStartPointer(ev);
+ updatePointerState(ev, this.state.dragPointer);
+ this.dispatchEvent(ev, '$md.dragstart', this.state.dragPointer);
+
+ } else if (shouldCancel) {
+ this.cancel();
+ }
+ } else {
+ this.dispatchDragMove(ev);
+ }
+ },
+ // Only dispatch dragmove events every frame; any more is unnecessary
+ dispatchDragMove: $$rAF.throttle(function (ev) {
+ // Make sure the drag didn't stop while waiting for the next frame
+ if (this.state.isRunning) {
+ updatePointerState(ev, this.state.dragPointer);
+ this.dispatchEvent(ev, '$md.drag', this.state.dragPointer);
+ }
+ }),
+ onEnd: function (ev, pointer) {
+ if (this.state.dragPointer) {
+ updatePointerState(ev, this.state.dragPointer);
+ this.dispatchEvent(ev, '$md.dragend', this.state.dragPointer);
+ }
+ }
+ })
+
+ /*
+ * The swipe handler will dispatch a swipe event if, on the end of a touch,
+ * the velocity and distance were high enough.
+ */
+ .handler('swipe', {
+ options: {
+ minVelocity: 0.65,
+ minDistance: 10
+ },
+ onEnd: function (ev, pointer) {
+ var eventType;
+
+ if (Math.abs(pointer.velocityX) > this.state.options.minVelocity &&
+ Math.abs(pointer.distanceX) > this.state.options.minDistance) {
+ eventType = pointer.directionX == 'left' ? '$md.swipeleft' : '$md.swiperight';
+ this.dispatchEvent(ev, eventType);
+ }
+ else if (Math.abs(pointer.velocityY) > this.state.options.minVelocity &&
+ Math.abs(pointer.distanceY) > this.state.options.minDistance) {
+ eventType = pointer.directionY == 'up' ? '$md.swipeup' : '$md.swipedown';
+ this.dispatchEvent(ev, eventType);
+ }
+ }
+ });
+
+ function getTouchAction() {
+ var testEl = document.createElement('div');
+ var vendorPrefixes = ['', 'webkit', 'Moz', 'MS', 'ms', 'o'];
+
+ for (var i = 0; i < vendorPrefixes.length; i++) {
+ var prefix = vendorPrefixes[i];
+ var property = prefix ? prefix + 'TouchAction' : 'touchAction';
+ if (angular.isDefined(testEl.style[property])) {
+ return property;
+ }
+ }
+ }
+
+}
+
+/**
+ * MdGestureHandler
+ * A GestureHandler is an object which is able to dispatch custom dom events
+ * based on native dom {touch,pointer,mouse}{start,move,end} events.
+ *
+ * A gesture will manage its lifecycle through the start,move,end, and cancel
+ * functions, which are called by native dom events.
+ *
+ * A gesture has the concept of 'options' (eg a swipe's required velocity), which can be
+ * overridden by elements registering through $mdGesture.register()
+ */
+function GestureHandler (name) {
+ this.name = name;
+ this.state = {};
+}
+
+function MdGestureHandler() {
+ var hasJQuery = (typeof window.jQuery !== 'undefined') && (angular.element === window.jQuery);
+
+ GestureHandler.prototype = {
+ options: {},
+ // jQuery listeners don't work with custom DOMEvents, so we have to dispatch events
+ // differently when jQuery is loaded
+ dispatchEvent: hasJQuery ? jQueryDispatchEvent : nativeDispatchEvent,
+
+ // These are overridden by the registered handler
+ onSetup: angular.noop,
+ onCleanup: angular.noop,
+ onStart: angular.noop,
+ onMove: angular.noop,
+ onEnd: angular.noop,
+ onCancel: angular.noop,
+
+ // onStart sets up a new state for the handler, which includes options from the
+ // nearest registered parent element of ev.target.
+ start: function (ev, pointer) {
+ if (this.state.isRunning) return;
+ var parentTarget = this.getNearestParent(ev.target);
+ // Get the options from the nearest registered parent
+ var parentTargetOptions = parentTarget && parentTarget.$mdGesture[this.name] || {};
+
+ this.state = {
+ isRunning: true,
+ // Override the default options with the nearest registered parent's options
+ options: angular.extend({}, this.options, parentTargetOptions),
+ // Pass in the registered parent node to the state so the onStart listener can use
+ registeredParent: parentTarget
+ };
+ this.onStart(ev, pointer);
+ },
+ move: function (ev, pointer) {
+ if (!this.state.isRunning) return;
+ this.onMove(ev, pointer);
+ },
+ end: function (ev, pointer) {
+ if (!this.state.isRunning) return;
+ this.onEnd(ev, pointer);
+ this.state.isRunning = false;
+ },
+ cancel: function (ev, pointer) {
+ this.onCancel(ev, pointer);
+ this.state = {};
+ },
+
+ // Find and return the nearest parent element that has been registered to
+ // listen for this handler via $mdGesture.register(element, 'handlerName').
+ getNearestParent: function (node) {
+ var current = node;
+ while (current) {
+ if ((current.$mdGesture || {})[this.name]) {
+ return current;
+ }
+ current = current.parentNode;
+ }
+ return null;
+ },
+
+ // Called from $mdGesture.register when an element registers itself with a handler.
+ // Store the options the user gave on the DOMElement itself. These options will
+ // be retrieved with getNearestParent when the handler starts.
+ registerElement: function (element, options) {
+ var self = this;
+ element[0].$mdGesture = element[0].$mdGesture || {};
+ element[0].$mdGesture[this.name] = options || {};
+ element.on('$destroy', onDestroy);
+
+ self.onSetup(element, options || {});
+
+ return onDestroy;
+
+ function onDestroy() {
+ delete element[0].$mdGesture[self.name];
+ element.off('$destroy', onDestroy);
+
+ self.onCleanup(element, options || {});
+ }
+ }
+ };
+
+ return GestureHandler;
+
+ /*
+ * Dispatch an event with jQuery
+ * TODO: Make sure this sends bubbling events
+ *
+ * @param srcEvent the original DOM touch event that started this.
+ * @param eventType the name of the custom event to send (eg 'click' or '$md.drag')
+ * @param eventPointer the pointer object that matches this event.
+ */
+ function jQueryDispatchEvent(srcEvent, eventType, eventPointer) {
+ eventPointer = eventPointer || pointer;
+ var eventObj = new angular.element.Event(eventType);
+
+ eventObj.$material = true;
+ eventObj.pointer = eventPointer;
+ eventObj.srcEvent = srcEvent;
+
+ angular.extend(eventObj, {
+ clientX: eventPointer.x,
+ clientY: eventPointer.y,
+ screenX: eventPointer.x,
+ screenY: eventPointer.y,
+ pageX: eventPointer.x,
+ pageY: eventPointer.y,
+ ctrlKey: srcEvent.ctrlKey,
+ altKey: srcEvent.altKey,
+ shiftKey: srcEvent.shiftKey,
+ metaKey: srcEvent.metaKey
+ });
+ angular.element(eventPointer.target).trigger(eventObj);
+ }
+
+ /*
+ * NOTE: nativeDispatchEvent is very performance sensitive.
+ * @param srcEvent the original DOM touch event that started this.
+ * @param eventType the name of the custom event to send (eg 'click' or '$md.drag')
+ * @param eventPointer the pointer object that matches this event.
+ */
+ function nativeDispatchEvent(srcEvent, eventType, eventPointer) {
+ eventPointer = eventPointer || pointer;
+ var eventObj;
+
+ if (eventType === 'click' || eventType == 'mouseup' || eventType == 'mousedown' ) {
+ eventObj = document.createEvent('MouseEvents');
+ eventObj.initMouseEvent(
+ eventType, true, true, window, srcEvent.detail,
+ eventPointer.x, eventPointer.y, eventPointer.x, eventPointer.y,
+ srcEvent.ctrlKey, srcEvent.altKey, srcEvent.shiftKey, srcEvent.metaKey,
+ srcEvent.button, srcEvent.relatedTarget || null
+ );
+
+ } else {
+ eventObj = document.createEvent('CustomEvent');
+ eventObj.initCustomEvent(eventType, true, true, {});
+ }
+ eventObj.$material = true;
+ eventObj.pointer = eventPointer;
+ eventObj.srcEvent = srcEvent;
+ eventPointer.target.dispatchEvent(eventObj);
+ }
+
+}
+
+/**
+ * Attach Gestures: hook document and check shouldHijack clicks
+ * @ngInject
+ */
+function attachToDocument( $mdGesture, $$MdGestureHandler ) {
+
+ // Polyfill document.contains for IE11.
+ // TODO: move to util
+ document.contains || (document.contains = function (node) {
+ return document.body.contains(node);
+ });
+
+ if (!isInitialized && $mdGesture.isHijackingClicks ) {
+ /*
+ * If hijack clicks is true, we preventDefault any click that wasn't
+ * sent by ngMaterial. This is because on older Android & iOS, a false, or 'ghost',
+ * click event will be sent ~400ms after a touchend event happens.
+ * The only way to know if this click is real is to prevent any normal
+ * click events, and add a flag to events sent by material so we know not to prevent those.
+ *
+ * Two exceptions to click events that should be prevented are:
+ * - click events sent by the keyboard (eg form submit)
+ * - events that originate from an Ionic app
+ */
+ document.addEventListener('click' , clickHijacker , true);
+ document.addEventListener('mouseup' , mouseInputHijacker, true);
+ document.addEventListener('mousedown', mouseInputHijacker, true);
+ document.addEventListener('focus' , mouseInputHijacker, true);
+
+ isInitialized = true;
+ }
+
+ function mouseInputHijacker(ev) {
+ var isKeyClick = !ev.clientX && !ev.clientY;
+ if (!isKeyClick && !ev.$material && !ev.isIonicTap
+ && !isInputEventFromLabelClick(ev)) {
+ ev.preventDefault();
+ ev.stopPropagation();
+ }
+ }
+
+ function clickHijacker(ev) {
+ var isKeyClick = ev.clientX === 0 && ev.clientY === 0;
+ if (!isKeyClick && !ev.$material && !ev.isIonicTap
+ && !isInputEventFromLabelClick(ev)) {
+ ev.preventDefault();
+ ev.stopPropagation();
+ lastLabelClickPos = null;
+ } else {
+ lastLabelClickPos = null;
+ if (ev.target.tagName.toLowerCase() == 'label') {
+ lastLabelClickPos = {x: ev.x, y: ev.y};
+ }
+ }
+ }
+
+
+ // Listen to all events to cover all platforms.
+ var START_EVENTS = 'mousedown touchstart pointerdown';
+ var MOVE_EVENTS = 'mousemove touchmove pointermove';
+ var END_EVENTS = 'mouseup mouseleave touchend touchcancel pointerup pointercancel';
+
+ angular.element(document)
+ .on(START_EVENTS, gestureStart)
+ .on(MOVE_EVENTS, gestureMove)
+ .on(END_EVENTS, gestureEnd)
+ // For testing
+ .on('$$mdGestureReset', function gestureClearCache () {
+ lastPointer = pointer = null;
+ });
+
+ /*
+ * When a DOM event happens, run all registered gesture handlers' lifecycle
+ * methods which match the DOM event.
+ * Eg when a 'touchstart' event happens, runHandlers('start') will call and
+ * run `handler.cancel()` and `handler.start()` on all registered handlers.
+ */
+ function runHandlers(handlerEvent, event) {
+ var handler;
+ for (var name in HANDLERS) {
+ handler = HANDLERS[name];
+ if( handler instanceof $$MdGestureHandler ) {
+
+ if (handlerEvent === 'start') {
+ // Run cancel to reset any handlers' state
+ handler.cancel();
+ }
+ handler[handlerEvent](event, pointer);
+
+ }
+ }
+ }
+
+ /*
+ * gestureStart vets if a start event is legitimate (and not part of a 'ghost click' from iOS/Android)
+ * If it is legitimate, we initiate the pointer state and mark the current pointer's type
+ * For example, for a touchstart event, mark the current pointer as a 'touch' pointer, so mouse events
+ * won't effect it.
+ */
+ function gestureStart(ev) {
+ // If we're already touched down, abort
+ if (pointer) return;
+
+ var now = +Date.now();
+
+ // iOS & old android bug: after a touch event, a click event is sent 350 ms later.
+ // If <400ms have passed, don't allow an event of a different type than the previous event
+ if (lastPointer && !typesMatch(ev, lastPointer) && (now - lastPointer.endTime < 1500)) {
+ return;
+ }
+
+ pointer = makeStartPointer(ev);
+
+ runHandlers('start', ev);
+ }
+ /*
+ * If a move event happens of the right type, update the pointer and run all the move handlers.
+ * "of the right type": if a mousemove happens but our pointer started with a touch event, do nothing.
+ */
+ function gestureMove(ev) {
+ if (!pointer || !typesMatch(ev, pointer)) return;
+
+ updatePointerState(ev, pointer);
+ runHandlers('move', ev);
+ }
+ /*
+ * If an end event happens of the right type, update the pointer, run endHandlers, and save the pointer as 'lastPointer'
+ */
+ function gestureEnd(ev) {
+ if (!pointer || !typesMatch(ev, pointer)) return;
+
+ updatePointerState(ev, pointer);
+ pointer.endTime = +Date.now();
+
+ runHandlers('end', ev);
+
+ lastPointer = pointer;
+ pointer = null;
+ }
+
+}
+
+// ********************
+// Module Functions
+// ********************
+
+/*
+ * Initiate the pointer. x, y, and the pointer's type.
+ */
+function makeStartPointer(ev) {
+ var point = getEventPoint(ev);
+ var startPointer = {
+ startTime: +Date.now(),
+ target: ev.target,
+ // 'p' for pointer events, 'm' for mouse, 't' for touch
+ type: ev.type.charAt(0)
+ };
+ startPointer.startX = startPointer.x = point.pageX;
+ startPointer.startY = startPointer.y = point.pageY;
+ return startPointer;
+}
+
+/*
+ * return whether the pointer's type matches the event's type.
+ * Eg if a touch event happens but the pointer has a mouse type, return false.
+ */
+function typesMatch(ev, pointer) {
+ return ev && pointer && ev.type.charAt(0) === pointer.type;
+}
+
+/**
+ * Gets whether the given event is an input event that was caused by clicking on an
+ * associated label element.
+ *
+ * This is necessary because the browser will, upon clicking on a label element, fire an
+ * *extra* click event on its associated input (if any). mdGesture is able to flag the label
+ * click as with `$material` correctly, but not the second input click.
+ *
+ * In order to determine whether an input event is from a label click, we compare the (x, y) for
+ * the event to the (x, y) for the most recent label click (which is cleared whenever a non-label
+ * click occurs). Unfortunately, there are no event properties that tie the input and the label
+ * together (such as relatedTarget).
+ *
+ * @param {MouseEvent} event
+ * @returns {boolean}
+ */
+function isInputEventFromLabelClick(event) {
+ return lastLabelClickPos
+ && lastLabelClickPos.x == event.x
+ && lastLabelClickPos.y == event.y;
+}
+
+/*
+ * Update the given pointer based upon the given DOMEvent.
+ * Distance, velocity, direction, duration, etc
+ */
+function updatePointerState(ev, pointer) {
+ var point = getEventPoint(ev);
+ var x = pointer.x = point.pageX;
+ var y = pointer.y = point.pageY;
+
+ pointer.distanceX = x - pointer.startX;
+ pointer.distanceY = y - pointer.startY;
+ pointer.distance = Math.sqrt(
+ pointer.distanceX * pointer.distanceX + pointer.distanceY * pointer.distanceY
+ );
+
+ pointer.directionX = pointer.distanceX > 0 ? 'right' : pointer.distanceX < 0 ? 'left' : '';
+ pointer.directionY = pointer.distanceY > 0 ? 'down' : pointer.distanceY < 0 ? 'up' : '';
+
+ pointer.duration = +Date.now() - pointer.startTime;
+ pointer.velocityX = pointer.distanceX / pointer.duration;
+ pointer.velocityY = pointer.distanceY / pointer.duration;
+}
+
+/*
+ * Normalize the point where the DOM event happened whether it's touch or mouse.
+ * @returns point event obj with pageX and pageY on it.
+ */
+function getEventPoint(ev) {
+ ev = ev.originalEvent || ev; // support jQuery events
+ return (ev.touches && ev.touches[0]) ||
+ (ev.changedTouches && ev.changedTouches[0]) ||
+ ev;
+}
+
+})();
+(function(){
+"use strict";
+
+angular.module('material.core')
+ .provider('$$interimElement', InterimElementProvider);
+
+/*
+ * @ngdoc service
+ * @name $$interimElement
+ * @module material.core
+ *
+ * @description
+ *
+ * Factory that contructs `$$interimElement.$service` services.
+ * Used internally in material design for elements that appear on screen temporarily.
+ * The service provides a promise-like API for interacting with the temporary
+ * elements.
+ *
+ * ```js
+ * app.service('$mdToast', function($$interimElement) {
+ * var $mdToast = $$interimElement(toastDefaultOptions);
+ * return $mdToast;
+ * });
+ * ```
+ * @param {object=} defaultOptions Options used by default for the `show` method on the service.
+ *
+ * @returns {$$interimElement.$service}
+ *
+ */
+
+function InterimElementProvider() {
+ InterimElementFactory.$inject = ["$document", "$q", "$$q", "$rootScope", "$timeout", "$rootElement", "$animate", "$mdUtil", "$mdCompiler", "$mdTheming", "$injector"];
+ createInterimElementProvider.$get = InterimElementFactory;
+ return createInterimElementProvider;
+
+ /**
+ * Returns a new provider which allows configuration of a new interimElement
+ * service. Allows configuration of default options & methods for options,
+ * as well as configuration of 'preset' methods (eg dialog.basic(): basic is a preset method)
+ */
+ function createInterimElementProvider(interimFactoryName) {
+ factory.$inject = ["$$interimElement", "$injector"];
+ var EXPOSED_METHODS = ['onHide', 'onShow', 'onRemove'];
+
+ var customMethods = {};
+ var providerConfig = {
+ presets: {}
+ };
+
+ var provider = {
+ setDefaults: setDefaults,
+ addPreset: addPreset,
+ addMethod: addMethod,
+ $get: factory
+ };
+
+ /**
+ * all interim elements will come with the 'build' preset
+ */
+ provider.addPreset('build', {
+ methods: ['controller', 'controllerAs', 'resolve',
+ 'template', 'templateUrl', 'themable', 'transformTemplate', 'parent']
+ });
+
+ return provider;
+
+ /**
+ * Save the configured defaults to be used when the factory is instantiated
+ */
+ function setDefaults(definition) {
+ providerConfig.optionsFactory = definition.options;
+ providerConfig.methods = (definition.methods || []).concat(EXPOSED_METHODS);
+ return provider;
+ }
+
+ /**
+ * Add a method to the factory that isn't specific to any interim element operations
+ */
+
+ function addMethod(name, fn) {
+ customMethods[name] = fn;
+ return provider;
+ }
+
+ /**
+ * Save the configured preset to be used when the factory is instantiated
+ */
+ function addPreset(name, definition) {
+ definition = definition || {};
+ definition.methods = definition.methods || [];
+ definition.options = definition.options || function() { return {}; };
+
+ if (/^cancel|hide|show$/.test(name)) {
+ throw new Error("Preset '" + name + "' in " + interimFactoryName + " is reserved!");
+ }
+ if (definition.methods.indexOf('_options') > -1) {
+ throw new Error("Method '_options' in " + interimFactoryName + " is reserved!");
+ }
+ providerConfig.presets[name] = {
+ methods: definition.methods.concat(EXPOSED_METHODS),
+ optionsFactory: definition.options,
+ argOption: definition.argOption
+ };
+ return provider;
+ }
+
+ function addPresetMethod(presetName, methodName, method) {
+ providerConfig.presets[presetName][methodName] = method;
+ }
+
+ /**
+ * Create a factory that has the given methods & defaults implementing interimElement
+ */
+ /* @ngInject */
+ function factory($$interimElement, $injector) {
+ var defaultMethods;
+ var defaultOptions;
+ var interimElementService = $$interimElement();
+
+ /*
+ * publicService is what the developer will be using.
+ * It has methods hide(), cancel(), show(), build(), and any other
+ * presets which were set during the config phase.
+ */
+ var publicService = {
+ hide: interimElementService.hide,
+ cancel: interimElementService.cancel,
+ show: showInterimElement,
+
+ // Special internal method to destroy an interim element without animations
+ // used when navigation changes causes a $scope.$destroy() action
+ destroy : destroyInterimElement
+ };
+
+
+ defaultMethods = providerConfig.methods || [];
+ // This must be invoked after the publicService is initialized
+ defaultOptions = invokeFactory(providerConfig.optionsFactory, {});
+
+ // Copy over the simple custom methods
+ angular.forEach(customMethods, function(fn, name) {
+ publicService[name] = fn;
+ });
+
+ angular.forEach(providerConfig.presets, function(definition, name) {
+ var presetDefaults = invokeFactory(definition.optionsFactory, {});
+ var presetMethods = (definition.methods || []).concat(defaultMethods);
+
+ // Every interimElement built with a preset has a field called `$type`,
+ // which matches the name of the preset.
+ // Eg in preset 'confirm', options.$type === 'confirm'
+ angular.extend(presetDefaults, { $type: name });
+
+ // This creates a preset class which has setter methods for every
+ // method given in the `.addPreset()` function, as well as every
+ // method given in the `.setDefaults()` function.
+ //
+ // @example
+ // .setDefaults({
+ // methods: ['hasBackdrop', 'clickOutsideToClose', 'escapeToClose', 'targetEvent'],
+ // options: dialogDefaultOptions
+ // })
+ // .addPreset('alert', {
+ // methods: ['title', 'ok'],
+ // options: alertDialogOptions
+ // })
+ //
+ // Set values will be passed to the options when interimElement.show() is called.
+ function Preset(opts) {
+ this._options = angular.extend({}, presetDefaults, opts);
+ }
+ angular.forEach(presetMethods, function(name) {
+ Preset.prototype[name] = function(value) {
+ this._options[name] = value;
+ return this;
+ };
+ });
+
+ // Create shortcut method for one-linear methods
+ if (definition.argOption) {
+ var methodName = 'show' + name.charAt(0).toUpperCase() + name.slice(1);
+ publicService[methodName] = function(arg) {
+ var config = publicService[name](arg);
+ return publicService.show(config);
+ };
+ }
+
+ // eg $mdDialog.alert() will return a new alert preset
+ publicService[name] = function(arg) {
+ // If argOption is supplied, eg `argOption: 'content'`, then we assume
+ // if the argument is not an options object then it is the `argOption` option.
+ //
+ // @example `$mdToast.simple('hello')` // sets options.content to hello
+ // // because argOption === 'content'
+ if (arguments.length && definition.argOption &&
+ !angular.isObject(arg) && !angular.isArray(arg)) {
+
+ return (new Preset())[definition.argOption](arg);
+
+ } else {
+ return new Preset(arg);
+ }
+
+ };
+ });
+
+ return publicService;
+
+ /**
+ *
+ */
+ function showInterimElement(opts) {
+ // opts is either a preset which stores its options on an _options field,
+ // or just an object made up of options
+ opts = opts || { };
+ if (opts._options) opts = opts._options;
+
+ return interimElementService.show(
+ angular.extend({}, defaultOptions, opts)
+ );
+ }
+
+ /**
+ * Special method to hide and destroy an interimElement WITHOUT
+ * any 'leave` or hide animations ( an immediate force hide/remove )
+ *
+ * NOTE: This calls the onRemove() subclass method for each component...
+ * which must have code to respond to `options.$destroy == true`
+ */
+ function destroyInterimElement(opts) {
+ return interimElementService.destroy(opts);
+ }
+
+ /**
+ * Helper to call $injector.invoke with a local of the factory name for
+ * this provider.
+ * If an $mdDialog is providing options for a dialog and tries to inject
+ * $mdDialog, a circular dependency error will happen.
+ * We get around that by manually injecting $mdDialog as a local.
+ */
+ function invokeFactory(factory, defaultVal) {
+ var locals = {};
+ locals[interimFactoryName] = publicService;
+ return $injector.invoke(factory || function() { return defaultVal; }, {}, locals);
+ }
+
+ }
+
+ }
+
+ /* @ngInject */
+ function InterimElementFactory($document, $q, $$q, $rootScope, $timeout, $rootElement, $animate,
+ $mdUtil, $mdCompiler, $mdTheming, $injector ) {
+ return function createInterimElementService() {
+ var SHOW_CANCELLED = false;
+
+ /*
+ * @ngdoc service
+ * @name $$interimElement.$service
+ *
+ * @description
+ * A service used to control inserting and removing an element into the DOM.
+ *
+ */
+ var service, stack = [];
+
+ // Publish instance $$interimElement service;
+ // ... used as $mdDialog, $mdToast, $mdMenu, and $mdSelect
+
+ return service = {
+ show: show,
+ hide: hide,
+ cancel: cancel,
+ destroy : destroy,
+ $injector_: $injector
+ };
+
+ /*
+ * @ngdoc method
+ * @name $$interimElement.$service#show
+ * @kind function
+ *
+ * @description
+ * Adds the `$interimElement` to the DOM and returns a special promise that will be resolved or rejected
+ * with hide or cancel, respectively. To external cancel/hide, developers should use the
+ *
+ * @param {*} options is hashMap of settings
+ * @returns a Promise
+ *
+ */
+ function show(options) {
+ options = options || {};
+ var interimElement = new InterimElement(options || {});
+ // When an interim element is currently showing, we have to cancel it.
+ // Just hiding it, will resolve the InterimElement's promise, the promise should be
+ // rejected instead.
+ var hideExisting = !options.skipHide && stack.length ? service.cancel() : $q.when(true);
+
+ // This hide()s only the current interim element before showing the next, new one
+ // NOTE: this is not reversible (e.g. interim elements are not stackable)
+
+ hideExisting.finally(function() {
+
+ stack.push(interimElement);
+ interimElement
+ .show()
+ .catch(function( reason ) {
+ //$log.error("InterimElement.show() error: " + reason );
+ return reason;
+ });
+
+ });
+
+ // Return a promise that will be resolved when the interim
+ // element is hidden or cancelled...
+
+ return interimElement.deferred.promise;
+ }
+
+ /*
+ * @ngdoc method
+ * @name $$interimElement.$service#hide
+ * @kind function
+ *
+ * @description
+ * Removes the `$interimElement` from the DOM and resolves the promise returned from `show`
+ *
+ * @param {*} resolveParam Data to resolve the promise with
+ * @returns a Promise that will be resolved after the element has been removed.
+ *
+ */
+ function hide(reason, options) {
+ if ( !stack.length ) return $q.when(reason);
+ options = options || {};
+
+ if (options.closeAll) {
+ var promise = $q.all(stack.reverse().map(closeElement));
+ stack = [];
+ return promise;
+ } else if (options.closeTo !== undefined) {
+ return $q.all(stack.splice(options.closeTo).map(closeElement));
+ } else {
+ var interim = stack.pop();
+ return closeElement(interim);
+ }
+
+ function closeElement(interim) {
+ interim
+ .remove(reason, false, options || { })
+ .catch(function( reason ) {
+ //$log.error("InterimElement.hide() error: " + reason );
+ return reason;
+ });
+ return interim.deferred.promise;
+ }
+ }
+
+ /*
+ * @ngdoc method
+ * @name $$interimElement.$service#cancel
+ * @kind function
+ *
+ * @description
+ * Removes the `$interimElement` from the DOM and rejects the promise returned from `show`
+ *
+ * @param {*} reason Data to reject the promise with
+ * @returns Promise that will be resolved after the element has been removed.
+ *
+ */
+ function cancel(reason, options) {
+ var interim = stack.pop();
+ if ( !interim ) return $q.when(reason);
+
+ interim
+ .remove(reason, true, options || { })
+ .catch(function( reason ) {
+ //$log.error("InterimElement.cancel() error: " + reason );
+ return reason;
+ });
+
+ // Since Angular 1.6.7, promises will be logged to $exceptionHandler when the promise
+ // is not handling the rejection. We create a pseudo catch handler, which will prevent the
+ // promise from being logged to the $exceptionHandler.
+ return interim.deferred.promise.catch(angular.noop);
+ }
+
+ /*
+ * Special method to quick-remove the interim element without animations
+ * Note: interim elements are in "interim containers"
+ */
+ function destroy(target) {
+ var interim = !target ? stack.shift() : null;
+ var cntr = angular.element(target).length ? angular.element(target)[0].parentNode : null;
+
+ if (cntr) {
+ // Try to find the interim element in the stack which corresponds to the supplied DOM element.
+ var filtered = stack.filter(function(entry) {
+ var currNode = entry.options.element[0];
+ return (currNode === cntr);
+ });
+
+ // Note: this function might be called when the element already has been removed, in which
+ // case we won't find any matches. That's ok.
+ if (filtered.length > 0) {
+ interim = filtered[0];
+ stack.splice(stack.indexOf(interim), 1);
+ }
+ }
+
+ return interim ? interim.remove(SHOW_CANCELLED, false, {'$destroy':true}) : $q.when(SHOW_CANCELLED);
+ }
+
+ /*
+ * Internal Interim Element Object
+ * Used internally to manage the DOM element and related data
+ */
+ function InterimElement(options) {
+ var self, element, showAction = $q.when(true);
+
+ options = configureScopeAndTransitions(options);
+
+ return self = {
+ options : options,
+ deferred: $q.defer(),
+ show : createAndTransitionIn,
+ remove : transitionOutAndRemove
+ };
+
+ /**
+ * Compile, link, and show this interim element
+ * Use optional autoHided and transition-in effects
+ */
+ function createAndTransitionIn() {
+ return $q(function(resolve, reject) {
+
+ // Trigger onCompiling callback before the compilation starts.
+ // This is useful, when modifying options, which can be influenced by developers.
+ options.onCompiling && options.onCompiling(options);
+
+ compileElement(options)
+ .then(function( compiledData ) {
+ element = linkElement( compiledData, options );
+
+ showAction = showElement(element, options, compiledData.controller)
+ .then(resolve, rejectAll);
+
+ }, rejectAll);
+
+ function rejectAll(fault) {
+ // Force the '$md.show()' promise to reject
+ self.deferred.reject(fault);
+
+ // Continue rejection propagation
+ reject(fault);
+ }
+ });
+ }
+
+ /**
+ * After the show process has finished/rejected:
+ * - announce 'removing',
+ * - perform the transition-out, and
+ * - perform optional clean up scope.
+ */
+ function transitionOutAndRemove(response, isCancelled, opts) {
+
+ // abort if the show() and compile failed
+ if ( !element ) return $q.when(false);
+
+ options = angular.extend(options || {}, opts || {});
+ options.cancelAutoHide && options.cancelAutoHide();
+ options.element.triggerHandler('$mdInterimElementRemove');
+
+ if ( options.$destroy === true ) {
+
+ return hideElement(options.element, options).then(function(){
+ (isCancelled && rejectAll(response)) || resolveAll(response);
+ });
+
+ } else {
+
+ $q.when(showAction)
+ .finally(function() {
+ hideElement(options.element, options).then(function() {
+
+ (isCancelled && rejectAll(response)) || resolveAll(response);
+
+ }, rejectAll);
+ });
+
+ return self.deferred.promise;
+ }
+
+
+ /**
+ * The `show()` returns a promise that will be resolved when the interim
+ * element is hidden or cancelled...
+ */
+ function resolveAll(response) {
+ self.deferred.resolve(response);
+ }
+
+ /**
+ * Force the '$md.show()' promise to reject
+ */
+ function rejectAll(fault) {
+ self.deferred.reject(fault);
+ }
+ }
+
+ /**
+ * Prepare optional isolated scope and prepare $animate with default enter and leave
+ * transitions for the new element instance.
+ */
+ function configureScopeAndTransitions(options) {
+ options = options || { };
+ if ( options.template ) {
+ options.template = $mdUtil.processTemplate(options.template);
+ }
+
+ return angular.extend({
+ preserveScope: false,
+ cancelAutoHide : angular.noop,
+ scope: options.scope || $rootScope.$new(options.isolateScope),
+
+ /**
+ * Default usage to enable $animate to transition-in; can be easily overridden via 'options'
+ */
+ onShow: function transitionIn(scope, element, options) {
+ return $animate.enter(element, options.parent);
+ },
+
+ /**
+ * Default usage to enable $animate to transition-out; can be easily overridden via 'options'
+ */
+ onRemove: function transitionOut(scope, element) {
+ // Element could be undefined if a new element is shown before
+ // the old one finishes compiling.
+ return element && $animate.leave(element) || $q.when();
+ }
+ }, options );
+
+ }
+
+ /**
+ * Compile an element with a templateUrl, controller, and locals
+ */
+ function compileElement(options) {
+
+ var compiled = !options.skipCompile ? $mdCompiler.compile(options) : null;
+
+ return compiled || $q(function (resolve) {
+ resolve({
+ locals: {},
+ link: function () {
+ return options.element;
+ }
+ });
+ });
+ }
+
+ /**
+ * Link an element with compiled configuration
+ */
+ function linkElement(compileData, options){
+ angular.extend(compileData.locals, options);
+
+ var element = compileData.link(options.scope);
+
+ // Search for parent at insertion time, if not specified
+ options.element = element;
+ options.parent = findParent(element, options);
+ if (options.themable) $mdTheming(element);
+
+ return element;
+ }
+
+ /**
+ * Search for parent at insertion time, if not specified
+ */
+ function findParent(element, options) {
+ var parent = options.parent;
+
+ // Search for parent at insertion time, if not specified
+ if (angular.isFunction(parent)) {
+ parent = parent(options.scope, element, options);
+ } else if (angular.isString(parent)) {
+ parent = angular.element($document[0].querySelector(parent));
+ } else {
+ parent = angular.element(parent);
+ }
+
+ // If parent querySelector/getter function fails, or it's just null,
+ // find a default.
+ if (!(parent || {}).length) {
+ var el;
+ if ($rootElement[0] && $rootElement[0].querySelector) {
+ el = $rootElement[0].querySelector(':not(svg) > body');
+ }
+ if (!el) el = $rootElement[0];
+ if (el.nodeName == '#comment') {
+ el = $document[0].body;
+ }
+ return angular.element(el);
+ }
+
+ return parent;
+ }
+
+ /**
+ * If auto-hide is enabled, start timer and prepare cancel function
+ */
+ function startAutoHide() {
+ var autoHideTimer, cancelAutoHide = angular.noop;
+
+ if (options.hideDelay) {
+ autoHideTimer = $timeout(service.hide, options.hideDelay) ;
+ cancelAutoHide = function() {
+ $timeout.cancel(autoHideTimer);
+ }
+ }
+
+ // Cache for subsequent use
+ options.cancelAutoHide = function() {
+ cancelAutoHide();
+ options.cancelAutoHide = undefined;
+ }
+ }
+
+ /**
+ * Show the element ( with transitions), notify complete and start
+ * optional auto-Hide
+ */
+ function showElement(element, options, controller) {
+ // Trigger onShowing callback before the `show()` starts
+ var notifyShowing = options.onShowing || angular.noop;
+ // Trigger onComplete callback when the `show()` finishes
+ var notifyComplete = options.onComplete || angular.noop;
+
+ notifyShowing(options.scope, element, options, controller);
+
+ return $q(function (resolve, reject) {
+ try {
+ // Start transitionIn
+ $q.when(options.onShow(options.scope, element, options, controller))
+ .then(function () {
+ notifyComplete(options.scope, element, options);
+ startAutoHide();
+
+ resolve(element);
+
+ }, reject );
+
+ } catch(e) {
+ reject(e.message);
+ }
+ });
+ }
+
+ function hideElement(element, options) {
+ var announceRemoving = options.onRemoving || angular.noop;
+
+ return $$q(function (resolve, reject) {
+ try {
+ // Start transitionIn
+ var action = $$q.when( options.onRemove(options.scope, element, options) || true );
+
+ // Trigger callback *before* the remove operation starts
+ announceRemoving(element, action);
+
+ if ( options.$destroy == true ) {
+
+ // For $destroy, onRemove should be synchronous
+ resolve(element);
+
+ } else {
+
+ // Wait until transition-out is done
+ action.then(function () {
+
+ if (!options.preserveScope && options.scope ) {
+ options.scope.$destroy();
+ }
+
+ resolve(element);
+
+ }, reject );
+ }
+
+ } catch(e) {
+ reject(e);
+ }
+ });
+ }
+
+ }
+ };
+
+ }
+
+}
+
+})();
+(function(){
+"use strict";
+
+(function() {
+ 'use strict';
+
+ var $mdUtil, $interpolate, $log;
+
+ var SUFFIXES = /(-gt)?-(sm|md|lg|print)/g;
+ var WHITESPACE = /\s+/g;
+
+ var FLEX_OPTIONS = ['grow', 'initial', 'auto', 'none', 'noshrink', 'nogrow' ];
+ var LAYOUT_OPTIONS = ['row', 'column'];
+ var ALIGNMENT_MAIN_AXIS= [ "", "start", "center", "end", "stretch", "space-around", "space-between" ];
+ var ALIGNMENT_CROSS_AXIS= [ "", "start", "center", "end", "stretch" ];
+
+ var config = {
+ /**
+ * Enable directive attribute-to-class conversions
+ * Developers can use ` ` to quickly
+ * disable the Layout directives and prohibit the injection of Layout classNames
+ */
+ enabled: true,
+
+ /**
+ * List of mediaQuery breakpoints and associated suffixes
+ *
+ * [
+ * { suffix: "sm", mediaQuery: "screen and (max-width: 599px)" },
+ * { suffix: "md", mediaQuery: "screen and (min-width: 600px) and (max-width: 959px)" }
+ * ]
+ */
+ breakpoints: []
+ };
+
+ registerLayoutAPI( angular.module('material.core.layout', ['ng']) );
+
+ /**
+ * registerLayoutAPI()
+ *
+ * The original ngMaterial Layout solution used attribute selectors and CSS.
+ *
+ * ```html
+ * ` variant.");
+ return angular.noop;
+ }];
+ }
+
+ /**
+ * Centralize warnings for known flexbox issues (especially IE-related issues)
+ */
+ function validateAttributeUsage(className, attr, element, $log){
+ var message, usage, url;
+ var nodeName = element[0].nodeName.toLowerCase();
+
+ switch(className.replace(SUFFIXES,"")) {
+ case "flex":
+ if ((nodeName == "md-button") || (nodeName == "fieldset")){
+ // @see https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers
+ // Use
My Content
+ * ```
+ *
+ * ```css
+ * [layout] {
+ * box-sizing: border-box;
+ * display:flex;
+ * }
+ * [layout=column] {
+ * flex-direction : column
+ * }
+ * ```
+ *
+ * Use of attribute selectors creates significant performance impacts in some
+ * browsers... mainly IE.
+ *
+ * This module registers directives that allow the same layout attributes to be
+ * interpreted and converted to class selectors. The directive will add equivalent classes to each element that
+ * contains a Layout directive.
+ *
+ * ```html
+ * My Content
+ *```
+ *
+ * ```css
+ * .layout {
+ * box-sizing: border-box;
+ * display:flex;
+ * }
+ * .layout-column {
+ * flex-direction : column
+ * }
+ * ```
+ */
+ function registerLayoutAPI(module){
+ var PREFIX_REGEXP = /^((?:x|data)[\:\-_])/i;
+ var SPECIAL_CHARS_REGEXP = /([\:\-\_]+(.))/g;
+
+ // NOTE: these are also defined in constants::MEDIA_PRIORITY and constants::MEDIA
+ var BREAKPOINTS = [ "", "xs", "gt-xs", "sm", "gt-sm", "md", "gt-md", "lg", "gt-lg", "xl", "print" ];
+ var API_WITH_VALUES = [ "layout", "flex", "flex-order", "flex-offset", "layout-align" ];
+ var API_NO_VALUES = [ "show", "hide", "layout-padding", "layout-margin" ];
+
+
+ // Build directive registration functions for the standard Layout API... for all breakpoints.
+ angular.forEach(BREAKPOINTS, function(mqb) {
+
+ // Attribute directives with expected, observable value(s)
+ angular.forEach( API_WITH_VALUES, function(name){
+ var fullName = mqb ? name + "-" + mqb : name;
+ module.directive( directiveNormalize(fullName), attributeWithObserve(fullName));
+ });
+
+ // Attribute directives with no expected value(s)
+ angular.forEach( API_NO_VALUES, function(name){
+ var fullName = mqb ? name + "-" + mqb : name;
+ module.directive( directiveNormalize(fullName), attributeWithoutValue(fullName));
+ });
+
+ });
+
+ // Register other, special directive functions for the Layout features:
+ module
+
+ .provider('$$mdLayout' , function() {
+ // Publish internal service for Layouts
+ return {
+ $get : angular.noop,
+ validateAttributeValue : validateAttributeValue,
+ validateAttributeUsage : validateAttributeUsage,
+ /**
+ * Easy way to disable/enable the Layout API.
+ * When disabled, this stops all attribute-to-classname generations
+ */
+ disableLayouts : function(isDisabled) {
+ config.enabled = (isDisabled !== true);
+ }
+ };
+ })
+
+ .directive('mdLayoutCss' , disableLayoutDirective )
+ .directive('ngCloak' , buildCloakInterceptor('ng-cloak'))
+
+ .directive('layoutWrap' , attributeWithoutValue('layout-wrap'))
+ .directive('layoutNowrap' , attributeWithoutValue('layout-nowrap'))
+ .directive('layoutNoWrap' , attributeWithoutValue('layout-no-wrap'))
+ .directive('layoutFill' , attributeWithoutValue('layout-fill'))
+
+ // !! Deprecated attributes: use the `-lt` (aka less-than) notations
+
+ .directive('layoutLtMd' , warnAttrNotSupported('layout-lt-md', true))
+ .directive('layoutLtLg' , warnAttrNotSupported('layout-lt-lg', true))
+ .directive('flexLtMd' , warnAttrNotSupported('flex-lt-md', true))
+ .directive('flexLtLg' , warnAttrNotSupported('flex-lt-lg', true))
+
+ .directive('layoutAlignLtMd', warnAttrNotSupported('layout-align-lt-md'))
+ .directive('layoutAlignLtLg', warnAttrNotSupported('layout-align-lt-lg'))
+ .directive('flexOrderLtMd' , warnAttrNotSupported('flex-order-lt-md'))
+ .directive('flexOrderLtLg' , warnAttrNotSupported('flex-order-lt-lg'))
+ .directive('offsetLtMd' , warnAttrNotSupported('flex-offset-lt-md'))
+ .directive('offsetLtLg' , warnAttrNotSupported('flex-offset-lt-lg'))
+
+ .directive('hideLtMd' , warnAttrNotSupported('hide-lt-md'))
+ .directive('hideLtLg' , warnAttrNotSupported('hide-lt-lg'))
+ .directive('showLtMd' , warnAttrNotSupported('show-lt-md'))
+ .directive('showLtLg' , warnAttrNotSupported('show-lt-lg'))
+
+ // Determine if
+ .config( detectDisabledLayouts );
+
+ /**
+ * Converts snake_case to camelCase.
+ * Also there is special case for Moz prefix starting with upper case letter.
+ * @param name Name to normalize
+ */
+ function directiveNormalize(name) {
+ return name
+ .replace(PREFIX_REGEXP, '')
+ .replace(SPECIAL_CHARS_REGEXP, function(_, separator, letter, offset) {
+ return offset ? letter.toUpperCase() : letter;
+ });
+ }
+
+ }
+
+
+ /**
+ * Detect if any of the HTML tags has a [md-layouts-disabled] attribute;
+ * If yes, then immediately disable all layout API features
+ *
+ * Note: this attribute should be specified on either the HTML or BODY tags
+ */
+ /**
+ * @ngInject
+ */
+ function detectDisabledLayouts() {
+ var isDisabled = !!document.querySelector('[md-layouts-disabled]');
+ config.enabled = !isDisabled;
+ }
+
+ /**
+ * Special directive that will disable ALL Layout conversions of layout
+ * attribute(s) to classname(s).
+ *
+ *
+ *
+ *
+ *
+ * ...
+ *
+ *
+ * Note: Using md-layout-css directive requires the developer to load the Material
+ * Layout Attribute stylesheet (which only uses attribute selectors):
+ *
+ * `angular-material.layout.css`
+ *
+ * Another option is to use the LayoutProvider to configure and disable the attribute
+ * conversions; this would obviate the use of the `md-layout-css` directive
+ *
+ */
+ function disableLayoutDirective() {
+ // Return a 1x-only, first-match attribute directive
+ config.enabled = false;
+
+ return {
+ restrict : 'A',
+ priority : '900'
+ };
+ }
+
+ /**
+ * Tail-hook ngCloak to delay the uncloaking while Layout transformers
+ * finish processing. Eliminates flicker with Material.Layouts
+ */
+ function buildCloakInterceptor(className) {
+ return [ '$timeout', function($timeout){
+ return {
+ restrict : 'A',
+ priority : -10, // run after normal ng-cloak
+ compile : function( element ) {
+ if (!config.enabled) return angular.noop;
+
+ // Re-add the cloak
+ element.addClass(className);
+
+ return function( scope, element ) {
+ // Wait while layout injectors configure, then uncloak
+ // NOTE: $rAF does not delay enough... and this is a 1x-only event,
+ // $timeout is acceptable.
+ $timeout( function(){
+ element.removeClass(className);
+ }, 10, false);
+ };
+ }
+ };
+ }];
+ }
+
+
+ // *********************************************************************************
+ //
+ // These functions create registration functions for ngMaterial Layout attribute directives
+ // This provides easy translation to switch ngMaterial attribute selectors to
+ // CLASS selectors and directives; which has huge performance implications
+ // for IE Browsers
+ //
+ // *********************************************************************************
+
+ /**
+ * Creates a directive registration function where a possible dynamic attribute
+ * value will be observed/watched.
+ * @param {string} className attribute name; eg `layout-gt-md` with value ="row"
+ */
+ function attributeWithObserve(className) {
+
+ return ['$mdUtil', '$interpolate', "$log", function(_$mdUtil_, _$interpolate_, _$log_) {
+ $mdUtil = _$mdUtil_;
+ $interpolate = _$interpolate_;
+ $log = _$log_;
+
+ return {
+ restrict: 'A',
+ compile: function(element, attr) {
+ var linkFn;
+ if (config.enabled) {
+ // immediately replace static (non-interpolated) invalid values...
+
+ validateAttributeUsage(className, attr, element, $log);
+
+ validateAttributeValue( className,
+ getNormalizedAttrValue(className, attr, ""),
+ buildUpdateFn(element, className, attr)
+ );
+
+ linkFn = translateWithValueToCssClass;
+ }
+
+ // Use for postLink to account for transforms after ng-transclude.
+ return linkFn || angular.noop;
+ }
+ };
+ }];
+
+ /**
+ * Add as transformed class selector(s), then
+ * remove the deprecated attribute selector
+ */
+ function translateWithValueToCssClass(scope, element, attrs) {
+ var updateFn = updateClassWithValue(element, className, attrs);
+ var unwatch = attrs.$observe(attrs.$normalize(className), updateFn);
+
+ updateFn(getNormalizedAttrValue(className, attrs, ""));
+ scope.$on("$destroy", function() { unwatch(); });
+ }
+ }
+
+ /**
+ * Creates a registration function for ngMaterial Layout attribute directive.
+ * This is a `simple` transpose of attribute usage to class usage; where we ignore
+ * any attribute value
+ */
+ function attributeWithoutValue(className) {
+ return ['$mdUtil', '$interpolate', "$log", function(_$mdUtil_, _$interpolate_, _$log_) {
+ $mdUtil = _$mdUtil_;
+ $interpolate = _$interpolate_;
+ $log = _$log_;
+
+ return {
+ restrict: 'A',
+ compile: function(element, attr) {
+ var linkFn;
+ if (config.enabled) {
+ // immediately replace static (non-interpolated) invalid values...
+
+ validateAttributeValue( className,
+ getNormalizedAttrValue(className, attr, ""),
+ buildUpdateFn(element, className, attr)
+ );
+
+ translateToCssClass(null, element);
+
+ // Use for postLink to account for transforms after ng-transclude.
+ linkFn = translateToCssClass;
+ }
+
+ return linkFn || angular.noop;
+ }
+ };
+ }];
+
+ /**
+ * Add as transformed class selector, then
+ * remove the deprecated attribute selector
+ */
+ function translateToCssClass(scope, element) {
+ element.addClass(className);
+ }
+ }
+
+
+
+ /**
+ * After link-phase, do NOT remove deprecated layout attribute selector.
+ * Instead watch the attribute so interpolated data-bindings to layout
+ * selectors will continue to be supported.
+ *
+ * $observe() the className and update with new class (after removing the last one)
+ *
+ * e.g. `layout="{{layoutDemo.direction}}"` will update...
+ *
+ * NOTE: The value must match one of the specified styles in the CSS.
+ * For example `flex-gt-md="{{size}}` where `scope.size == 47` will NOT work since
+ * only breakpoints for 0, 5, 10, 15... 100, 33, 34, 66, 67 are defined.
+ *
+ */
+ function updateClassWithValue(element, className) {
+ var lastClass;
+
+ return function updateClassFn(newValue) {
+ var value = validateAttributeValue(className, newValue || "");
+ if ( angular.isDefined(value) ) {
+ if (lastClass) element.removeClass(lastClass);
+ lastClass = !value ? className : className + "-" + value.replace(WHITESPACE, "-");
+ element.addClass(lastClass);
+ }
+ };
+ }
+
+ /**
+ * Provide console warning that this layout attribute has been deprecated
+ *
+ */
+ function warnAttrNotSupported(className) {
+ var parts = className.split("-");
+ return ["$log", function($log) {
+ $log.warn(className + "has been deprecated. Please use a `" + parts[0] + "-gt- wrapper inside (preferred) or outside
+
+ usage = "<" + nodeName + " " + className + ">";
+ url = "https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers";
+ message = "Markup '{0}' may not work as expected in IE Browsers. Consult '{1}' for details.";
+
+ $log.warn( $mdUtil.supplant(message, [usage, url]) );
+ }
+ }
+
+ }
+
+
+ /**
+ * For the Layout attribute value, validate or replace with default
+ * fallback value
+ */
+ function validateAttributeValue(className, value, updateFn) {
+ var origValue = value;
+
+ if (!needsInterpolation(value)) {
+ switch (className.replace(SUFFIXES,"")) {
+ case 'layout' :
+ if ( !findIn(value, LAYOUT_OPTIONS) ) {
+ value = LAYOUT_OPTIONS[0]; // 'row';
+ }
+ break;
+
+ case 'flex' :
+ if (!findIn(value, FLEX_OPTIONS)) {
+ if (isNaN(value)) {
+ value = '';
+ }
+ }
+ break;
+
+ case 'flex-offset' :
+ case 'flex-order' :
+ if (!value || isNaN(+value)) {
+ value = '0';
+ }
+ break;
+
+ case 'layout-align' :
+ var axis = extractAlignAxis(value);
+ value = $mdUtil.supplant("{main}-{cross}",axis);
+ break;
+
+ case 'layout-padding' :
+ case 'layout-margin' :
+ case 'layout-fill' :
+ case 'layout-wrap' :
+ case 'layout-nowrap' :
+ case 'layout-nowrap' :
+ value = '';
+ break;
+ }
+
+ if (value != origValue) {
+ (updateFn || angular.noop)(value);
+ }
+ }
+
+ return value;
+ }
+
+ /**
+ * Replace current attribute value with fallback value
+ */
+ function buildUpdateFn(element, className, attrs) {
+ return function updateAttrValue(fallback) {
+ if (!needsInterpolation(fallback)) {
+ // Do not modify the element's attribute value; so
+ // uses '
+ *
+ * Ripples in red
+ *
+ *
+ *
+ * Not rippling
+ *
+ *
+ *
+ * ### Interpolated values
+ *
+ *
+ * Ripples with the return value of 'randomColor' function
+ *
+ *
+ *
+ * Ripples if 'canRipple' function return value is not 'false' or '0'
+ *
+ *
+ */
+function InkRippleDirective ($mdButtonInkRipple, $mdCheckboxInkRipple) {
+ return {
+ controller: angular.noop,
+ link: function (scope, element, attr) {
+ attr.hasOwnProperty('mdInkRippleCheckbox')
+ ? $mdCheckboxInkRipple.attach(scope, element)
+ : $mdButtonInkRipple.attach(scope, element);
+ }
+ };
+}
+
+/**
+ * @ngdoc service
+ * @name $mdInkRipple
+ * @module material.core.ripple
+ *
+ * @description
+ * `$mdInkRipple` is a service for adding ripples to any element
+ *
+ * @usage
+ *
+ * app.factory('$myElementInkRipple', function($mdInkRipple) {
+ * return {
+ * attach: function (scope, element, options) {
+ * return $mdInkRipple.attach(scope, element, angular.extend({
+ * center: false,
+ * dimBackground: true
+ * }, options));
+ * }
+ * };
+ * });
+ *
+ * app.controller('myController', function ($scope, $element, $myElementInkRipple) {
+ * $scope.onClick = function (ev) {
+ * $myElementInkRipple.attach($scope, angular.element(ev.target), { center: true });
+ * }
+ * });
+ *
+ *
+ * ### Disabling ripples globally
+ * If you want to disable ink ripples globally, for all components, you can call the
+ * `disableInkRipple` method in your app's config.
+ *
+ *
+ * app.config(function ($mdInkRippleProvider) {
+ * $mdInkRippleProvider.disableInkRipple();
+ * });
+ */
+
+function InkRippleProvider () {
+ var isDisabledGlobally = false;
+
+ return {
+ disableInkRipple: disableInkRipple,
+ $get: ["$injector", function($injector) {
+ return { attach: attach };
+
+ /**
+ * @ngdoc method
+ * @name $mdInkRipple#attach
+ *
+ * @description
+ * Attaching given scope, element and options to inkRipple controller
+ *
+ * @param {object=} scope Scope within the current context
+ * @param {object=} element The element the ripple effect should be applied to
+ * @param {object=} options (Optional) Configuration options to override the defaultRipple configuration
+ * * `center` - Whether the ripple should start from the center of the container element
+ * * `dimBackground` - Whether the background should be dimmed with the ripple color
+ * * `colorElement` - The element the ripple should take its color from, defined by css property `color`
+ * * `fitRipple` - Whether the ripple should fill the element
+ */
+ function attach (scope, element, options) {
+ if (isDisabledGlobally || element.controller('mdNoInk')) return angular.noop;
+ return $injector.instantiate(InkRippleCtrl, {
+ $scope: scope,
+ $element: element,
+ rippleOptions: options
+ });
+ }
+ }]
+ };
+
+ /**
+ * @ngdoc method
+ * @name $mdInkRipple#disableInkRipple
+ *
+ * @description
+ * A config-time method that, when called, disables ripples globally.
+ */
+ function disableInkRipple () {
+ isDisabledGlobally = true;
+ }
+}
+
+/**
+ * Controller used by the ripple service in order to apply ripples
+ * @ngInject
+ */
+function InkRippleCtrl ($scope, $element, rippleOptions, $window, $timeout, $mdUtil, $mdColorUtil) {
+ this.$window = $window;
+ this.$timeout = $timeout;
+ this.$mdUtil = $mdUtil;
+ this.$mdColorUtil = $mdColorUtil;
+ this.$scope = $scope;
+ this.$element = $element;
+ this.options = rippleOptions;
+ this.mousedown = false;
+ this.ripples = [];
+ this.timeout = null; // Stores a reference to the most-recent ripple timeout
+ this.lastRipple = null;
+
+ $mdUtil.valueOnUse(this, 'container', this.createContainer);
+
+ this.$element.addClass('md-ink-ripple');
+
+ // attach method for unit tests
+ ($element.controller('mdInkRipple') || {}).createRipple = angular.bind(this, this.createRipple);
+ ($element.controller('mdInkRipple') || {}).setColor = angular.bind(this, this.color);
+
+ this.bindEvents();
+}
+
+
+/**
+ * Either remove or unlock any remaining ripples when the user mouses off of the element (either by
+ * mouseup or mouseleave event)
+ */
+function autoCleanup (self, cleanupFn) {
+
+ if ( self.mousedown || self.lastRipple ) {
+ self.mousedown = false;
+ self.$mdUtil.nextTick( angular.bind(self, cleanupFn), false);
+ }
+
+}
+
+
+/**
+ * Returns the color that the ripple should be (either based on CSS or hard-coded)
+ * @returns {string}
+ */
+InkRippleCtrl.prototype.color = function (value) {
+ var self = this;
+
+ // If assigning a color value, apply it to background and the ripple color
+ if (angular.isDefined(value)) {
+ self._color = self._parseColor(value);
+ }
+
+ // If color lookup, use assigned, defined, or inherited
+ return self._color || self._parseColor( self.inkRipple() ) || self._parseColor( getElementColor() );
+
+ /**
+ * Finds the color element and returns its text color for use as default ripple color
+ * @returns {string}
+ */
+ function getElementColor () {
+ var items = self.options && self.options.colorElement ? self.options.colorElement : [];
+ var elem = items.length ? items[ 0 ] : self.$element[ 0 ];
+
+ return elem ? self.$window.getComputedStyle(elem).color : 'rgb(0,0,0)';
+ }
+};
+
+/**
+ * Updating the ripple colors based on the current inkRipple value
+ * or the element's computed style color
+ */
+InkRippleCtrl.prototype.calculateColor = function () {
+ return this.color();
+};
+
+
+/**
+ * Takes a string color and converts it to RGBA format
+ * @param color {string}
+ * @param [multiplier] {int}
+ * @returns {string}
+ */
+
+InkRippleCtrl.prototype._parseColor = function parseColor (color, multiplier) {
+ multiplier = multiplier || 1;
+ var colorUtil = this.$mdColorUtil;
+
+ if (!color) return;
+ if (color.indexOf('rgba') === 0) return color.replace(/\d?\.?\d*\s*\)\s*$/, (0.1 * multiplier).toString() + ')');
+ if (color.indexOf('rgb') === 0) return colorUtil.rgbToRgba(color);
+ if (color.indexOf('#') === 0) return colorUtil.hexToRgba(color);
+
+};
+
+/**
+ * Binds events to the root element for
+ */
+InkRippleCtrl.prototype.bindEvents = function () {
+ this.$element.on('mousedown', angular.bind(this, this.handleMousedown));
+ this.$element.on('mouseup touchend', angular.bind(this, this.handleMouseup));
+ this.$element.on('mouseleave', angular.bind(this, this.handleMouseup));
+ this.$element.on('touchmove', angular.bind(this, this.handleTouchmove));
+};
+
+/**
+ * Create a new ripple on every mousedown event from the root element
+ * @param event {MouseEvent}
+ */
+InkRippleCtrl.prototype.handleMousedown = function (event) {
+ if ( this.mousedown ) return;
+
+ // When jQuery is loaded, we have to get the original event
+ if (event.hasOwnProperty('originalEvent')) event = event.originalEvent;
+ this.mousedown = true;
+ if (this.options.center) {
+ this.createRipple(this.container.prop('clientWidth') / 2, this.container.prop('clientWidth') / 2);
+ } else {
+
+ // We need to calculate the relative coordinates if the target is a sublayer of the ripple element
+ if (event.srcElement !== this.$element[0]) {
+ var layerRect = this.$element[0].getBoundingClientRect();
+ var layerX = event.clientX - layerRect.left;
+ var layerY = event.clientY - layerRect.top;
+
+ this.createRipple(layerX, layerY);
+ } else {
+ this.createRipple(event.offsetX, event.offsetY);
+ }
+ }
+};
+
+/**
+ * Either remove or unlock any remaining ripples when the user mouses off of the element (either by
+ * mouseup, touchend or mouseleave event)
+ */
+InkRippleCtrl.prototype.handleMouseup = function () {
+ autoCleanup(this, this.clearRipples);
+};
+
+/**
+ * Either remove or unlock any remaining ripples when the user mouses off of the element (by
+ * touchmove)
+ */
+InkRippleCtrl.prototype.handleTouchmove = function () {
+ autoCleanup(this, this.deleteRipples);
+};
+
+/**
+ * Cycles through all ripples and attempts to remove them.
+ */
+InkRippleCtrl.prototype.deleteRipples = function () {
+ for (var i = 0; i < this.ripples.length; i++) {
+ this.ripples[ i ].remove();
+ }
+};
+
+/**
+ * Cycles through all ripples and attempts to remove them with fade.
+ * Depending on logic within `fadeInComplete`, some removals will be postponed.
+ */
+InkRippleCtrl.prototype.clearRipples = function () {
+ for (var i = 0; i < this.ripples.length; i++) {
+ this.fadeInComplete(this.ripples[ i ]);
+ }
+};
+
+/**
+ * Creates the ripple container element
+ * @returns {*}
+ */
+InkRippleCtrl.prototype.createContainer = function () {
+ var container = angular.element('');
+ this.$element.append(container);
+ return container;
+};
+
+InkRippleCtrl.prototype.clearTimeout = function () {
+ if (this.timeout) {
+ this.$timeout.cancel(this.timeout);
+ this.timeout = null;
+ }
+};
+
+InkRippleCtrl.prototype.isRippleAllowed = function () {
+ var element = this.$element[0];
+ do {
+ if (!element.tagName || element.tagName === 'BODY') break;
+
+ if (element && angular.isFunction(element.hasAttribute)) {
+ if (element.hasAttribute('disabled')) return false;
+ if (this.inkRipple() === 'false' || this.inkRipple() === '0') return false;
+ }
+
+ } while (element = element.parentNode);
+ return true;
+};
+
+/**
+ * The attribute `md-ink-ripple` may be a static or interpolated
+ * color value OR a boolean indicator (used to disable ripples)
+ */
+InkRippleCtrl.prototype.inkRipple = function () {
+ return this.$element.attr('md-ink-ripple');
+};
+
+/**
+ * Creates a new ripple and adds it to the container. Also tracks ripple in `this.ripples`.
+ * @param left
+ * @param top
+ */
+InkRippleCtrl.prototype.createRipple = function (left, top) {
+ if (!this.isRippleAllowed()) return;
+
+ var ctrl = this;
+ var colorUtil = ctrl.$mdColorUtil;
+ var ripple = angular.element('');
+ var width = this.$element.prop('clientWidth');
+ var height = this.$element.prop('clientHeight');
+ var x = Math.max(Math.abs(width - left), left) * 2;
+ var y = Math.max(Math.abs(height - top), top) * 2;
+ var size = getSize(this.options.fitRipple, x, y);
+ var color = this.calculateColor();
+
+ ripple.css({
+ left: left + 'px',
+ top: top + 'px',
+ background: 'black',
+ width: size + 'px',
+ height: size + 'px',
+ backgroundColor: colorUtil.rgbaToRgb(color),
+ borderColor: colorUtil.rgbaToRgb(color)
+ });
+ this.lastRipple = ripple;
+
+ // we only want one timeout to be running at a time
+ this.clearTimeout();
+ this.timeout = this.$timeout(function () {
+ ctrl.clearTimeout();
+ if (!ctrl.mousedown) ctrl.fadeInComplete(ripple);
+ }, DURATION * 0.35, false);
+
+ if (this.options.dimBackground) this.container.css({ backgroundColor: color });
+ this.container.append(ripple);
+ this.ripples.push(ripple);
+ ripple.addClass('md-ripple-placed');
+
+ this.$mdUtil.nextTick(function () {
+
+ ripple.addClass('md-ripple-scaled md-ripple-active');
+ ctrl.$timeout(function () {
+ ctrl.clearRipples();
+ }, DURATION, false);
+
+ }, false);
+
+ function getSize (fit, x, y) {
+ return fit
+ ? Math.max(x, y)
+ : Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
+ }
+};
+
+
+
+/**
+ * After fadeIn finishes, either kicks off the fade-out animation or queues the element for removal on mouseup
+ * @param ripple
+ */
+InkRippleCtrl.prototype.fadeInComplete = function (ripple) {
+ if (this.lastRipple === ripple) {
+ if (!this.timeout && !this.mousedown) {
+ this.removeRipple(ripple);
+ }
+ } else {
+ this.removeRipple(ripple);
+ }
+};
+
+/**
+ * Kicks off the animation for removing a ripple
+ * @param ripple {Element}
+ */
+InkRippleCtrl.prototype.removeRipple = function (ripple) {
+ var ctrl = this;
+ var index = this.ripples.indexOf(ripple);
+ if (index < 0) return;
+ this.ripples.splice(this.ripples.indexOf(ripple), 1);
+ ripple.removeClass('md-ripple-active');
+ ripple.addClass('md-ripple-remove');
+ if (this.ripples.length === 0) this.container.css({ backgroundColor: '' });
+ // use a 2-second timeout in order to allow for the animation to finish
+ // we don't actually care how long the animation takes
+ this.$timeout(function () {
+ ctrl.fadeOutComplete(ripple);
+ }, DURATION, false);
+};
+
+/**
+ * Removes the provided ripple from the DOM
+ * @param ripple
+ */
+InkRippleCtrl.prototype.fadeOutComplete = function (ripple) {
+ ripple.remove();
+ this.lastRipple = null;
+};
+
+/**
+ * Used to create an empty directive. This is used to track flag-directives whose children may have
+ * functionality based on them.
+ *
+ * Example: `md-no-ink` will potentially be used by all child directives.
+ */
+function attrNoDirective () {
+ return { controller: angular.noop };
+}
+
+})();
+(function(){
+"use strict";
+
+(function() {
+ 'use strict';
+
+ /**
+ * @ngdoc service
+ * @name $mdTabInkRipple
+ * @module material.core
+ *
+ * @description
+ * Provides ripple effects for md-tabs. See $mdInkRipple service for all possible configuration options.
+ *
+ * @param {object=} scope Scope within the current context
+ * @param {object=} element The element the ripple effect should be applied to
+ * @param {object=} options (Optional) Configuration options to override the defaultripple configuration
+ */
+
+ MdTabInkRipple.$inject = ["$mdInkRipple"];
+ angular.module('material.core')
+ .factory('$mdTabInkRipple', MdTabInkRipple);
+
+ function MdTabInkRipple($mdInkRipple) {
+ return {
+ attach: attach
+ };
+
+ function attach(scope, element, options) {
+ return $mdInkRipple.attach(scope, element, angular.extend({
+ center: false,
+ dimBackground: true,
+ outline: false,
+ rippleSize: 'full'
+ }, options));
+ };
+ };
+})();
+
+})();
+(function(){
+"use strict";
+
+angular.module('material.core.theming.palette', [])
+.constant('$mdColorPalette', {
+ 'red': {
+ '50': '#ffebee',
+ '100': '#ffcdd2',
+ '200': '#ef9a9a',
+ '300': '#e57373',
+ '400': '#ef5350',
+ '500': '#f44336',
+ '600': '#e53935',
+ '700': '#d32f2f',
+ '800': '#c62828',
+ '900': '#b71c1c',
+ 'A100': '#ff8a80',
+ 'A200': '#ff5252',
+ 'A400': '#ff1744',
+ 'A700': '#d50000',
+ 'contrastDefaultColor': 'light',
+ 'contrastDarkColors': '50 100 200 300 A100',
+ 'contrastStrongLightColors': '400 500 600 700 A200 A400 A700'
+ },
+ 'pink': {
+ '50': '#fce4ec',
+ '100': '#f8bbd0',
+ '200': '#f48fb1',
+ '300': '#f06292',
+ '400': '#ec407a',
+ '500': '#e91e63',
+ '600': '#d81b60',
+ '700': '#c2185b',
+ '800': '#ad1457',
+ '900': '#880e4f',
+ 'A100': '#ff80ab',
+ 'A200': '#ff4081',
+ 'A400': '#f50057',
+ 'A700': '#c51162',
+ 'contrastDefaultColor': 'light',
+ 'contrastDarkColors': '50 100 200 A100',
+ 'contrastStrongLightColors': '500 600 A200 A400 A700'
+ },
+ 'purple': {
+ '50': '#f3e5f5',
+ '100': '#e1bee7',
+ '200': '#ce93d8',
+ '300': '#ba68c8',
+ '400': '#ab47bc',
+ '500': '#9c27b0',
+ '600': '#8e24aa',
+ '700': '#7b1fa2',
+ '800': '#6a1b9a',
+ '900': '#4a148c',
+ 'A100': '#ea80fc',
+ 'A200': '#e040fb',
+ 'A400': '#d500f9',
+ 'A700': '#aa00ff',
+ 'contrastDefaultColor': 'light',
+ 'contrastDarkColors': '50 100 200 A100',
+ 'contrastStrongLightColors': '300 400 A200 A400 A700'
+ },
+ 'deep-purple': {
+ '50': '#ede7f6',
+ '100': '#d1c4e9',
+ '200': '#b39ddb',
+ '300': '#9575cd',
+ '400': '#7e57c2',
+ '500': '#673ab7',
+ '600': '#5e35b1',
+ '700': '#512da8',
+ '800': '#4527a0',
+ '900': '#311b92',
+ 'A100': '#b388ff',
+ 'A200': '#7c4dff',
+ 'A400': '#651fff',
+ 'A700': '#6200ea',
+ 'contrastDefaultColor': 'light',
+ 'contrastDarkColors': '50 100 200 A100',
+ 'contrastStrongLightColors': '300 400 A200'
+ },
+ 'indigo': {
+ '50': '#e8eaf6',
+ '100': '#c5cae9',
+ '200': '#9fa8da',
+ '300': '#7986cb',
+ '400': '#5c6bc0',
+ '500': '#3f51b5',
+ '600': '#3949ab',
+ '700': '#303f9f',
+ '800': '#283593',
+ '900': '#1a237e',
+ 'A100': '#8c9eff',
+ 'A200': '#536dfe',
+ 'A400': '#3d5afe',
+ 'A700': '#304ffe',
+ 'contrastDefaultColor': 'light',
+ 'contrastDarkColors': '50 100 200 A100',
+ 'contrastStrongLightColors': '300 400 A200 A400'
+ },
+ 'blue': {
+ '50': '#e3f2fd',
+ '100': '#bbdefb',
+ '200': '#90caf9',
+ '300': '#64b5f6',
+ '400': '#42a5f5',
+ '500': '#2196f3',
+ '600': '#1e88e5',
+ '700': '#1976d2',
+ '800': '#1565c0',
+ '900': '#0d47a1',
+ 'A100': '#82b1ff',
+ 'A200': '#448aff',
+ 'A400': '#2979ff',
+ 'A700': '#2962ff',
+ 'contrastDefaultColor': 'light',
+ 'contrastDarkColors': '50 100 200 300 400 A100',
+ 'contrastStrongLightColors': '500 600 700 A200 A400 A700'
+ },
+ 'light-blue': {
+ '50': '#e1f5fe',
+ '100': '#b3e5fc',
+ '200': '#81d4fa',
+ '300': '#4fc3f7',
+ '400': '#29b6f6',
+ '500': '#03a9f4',
+ '600': '#039be5',
+ '700': '#0288d1',
+ '800': '#0277bd',
+ '900': '#01579b',
+ 'A100': '#80d8ff',
+ 'A200': '#40c4ff',
+ 'A400': '#00b0ff',
+ 'A700': '#0091ea',
+ 'contrastDefaultColor': 'dark',
+ 'contrastLightColors': '600 700 800 900 A700',
+ 'contrastStrongLightColors': '600 700 800 A700'
+ },
+ 'cyan': {
+ '50': '#e0f7fa',
+ '100': '#b2ebf2',
+ '200': '#80deea',
+ '300': '#4dd0e1',
+ '400': '#26c6da',
+ '500': '#00bcd4',
+ '600': '#00acc1',
+ '700': '#0097a7',
+ '800': '#00838f',
+ '900': '#006064',
+ 'A100': '#84ffff',
+ 'A200': '#18ffff',
+ 'A400': '#00e5ff',
+ 'A700': '#00b8d4',
+ 'contrastDefaultColor': 'dark',
+ 'contrastLightColors': '700 800 900',
+ 'contrastStrongLightColors': '700 800 900'
+ },
+ 'teal': {
+ '50': '#e0f2f1',
+ '100': '#b2dfdb',
+ '200': '#80cbc4',
+ '300': '#4db6ac',
+ '400': '#26a69a',
+ '500': '#009688',
+ '600': '#00897b',
+ '700': '#00796b',
+ '800': '#00695c',
+ '900': '#004d40',
+ 'A100': '#a7ffeb',
+ 'A200': '#64ffda',
+ 'A400': '#1de9b6',
+ 'A700': '#00bfa5',
+ 'contrastDefaultColor': 'dark',
+ 'contrastLightColors': '500 600 700 800 900',
+ 'contrastStrongLightColors': '500 600 700'
+ },
+ 'green': {
+ '50': '#e8f5e9',
+ '100': '#c8e6c9',
+ '200': '#a5d6a7',
+ '300': '#81c784',
+ '400': '#66bb6a',
+ '500': '#4caf50',
+ '600': '#43a047',
+ '700': '#388e3c',
+ '800': '#2e7d32',
+ '900': '#1b5e20',
+ 'A100': '#b9f6ca',
+ 'A200': '#69f0ae',
+ 'A400': '#00e676',
+ 'A700': '#00c853',
+ 'contrastDefaultColor': 'dark',
+ 'contrastLightColors': '500 600 700 800 900',
+ 'contrastStrongLightColors': '500 600 700'
+ },
+ 'light-green': {
+ '50': '#f1f8e9',
+ '100': '#dcedc8',
+ '200': '#c5e1a5',
+ '300': '#aed581',
+ '400': '#9ccc65',
+ '500': '#8bc34a',
+ '600': '#7cb342',
+ '700': '#689f38',
+ '800': '#558b2f',
+ '900': '#33691e',
+ 'A100': '#ccff90',
+ 'A200': '#b2ff59',
+ 'A400': '#76ff03',
+ 'A700': '#64dd17',
+ 'contrastDefaultColor': 'dark',
+ 'contrastLightColors': '700 800 900',
+ 'contrastStrongLightColors': '700 800 900'
+ },
+ 'lime': {
+ '50': '#f9fbe7',
+ '100': '#f0f4c3',
+ '200': '#e6ee9c',
+ '300': '#dce775',
+ '400': '#d4e157',
+ '500': '#cddc39',
+ '600': '#c0ca33',
+ '700': '#afb42b',
+ '800': '#9e9d24',
+ '900': '#827717',
+ 'A100': '#f4ff81',
+ 'A200': '#eeff41',
+ 'A400': '#c6ff00',
+ 'A700': '#aeea00',
+ 'contrastDefaultColor': 'dark',
+ 'contrastLightColors': '900',
+ 'contrastStrongLightColors': '900'
+ },
+ 'yellow': {
+ '50': '#fffde7',
+ '100': '#fff9c4',
+ '200': '#fff59d',
+ '300': '#fff176',
+ '400': '#ffee58',
+ '500': '#ffeb3b',
+ '600': '#fdd835',
+ '700': '#fbc02d',
+ '800': '#f9a825',
+ '900': '#f57f17',
+ 'A100': '#ffff8d',
+ 'A200': '#ffff00',
+ 'A400': '#ffea00',
+ 'A700': '#ffd600',
+ 'contrastDefaultColor': 'dark'
+ },
+ 'amber': {
+ '50': '#fff8e1',
+ '100': '#ffecb3',
+ '200': '#ffe082',
+ '300': '#ffd54f',
+ '400': '#ffca28',
+ '500': '#ffc107',
+ '600': '#ffb300',
+ '700': '#ffa000',
+ '800': '#ff8f00',
+ '900': '#ff6f00',
+ 'A100': '#ffe57f',
+ 'A200': '#ffd740',
+ 'A400': '#ffc400',
+ 'A700': '#ffab00',
+ 'contrastDefaultColor': 'dark'
+ },
+ 'orange': {
+ '50': '#fff3e0',
+ '100': '#ffe0b2',
+ '200': '#ffcc80',
+ '300': '#ffb74d',
+ '400': '#ffa726',
+ '500': '#ff9800',
+ '600': '#fb8c00',
+ '700': '#f57c00',
+ '800': '#ef6c00',
+ '900': '#e65100',
+ 'A100': '#ffd180',
+ 'A200': '#ffab40',
+ 'A400': '#ff9100',
+ 'A700': '#ff6d00',
+ 'contrastDefaultColor': 'dark',
+ 'contrastLightColors': '800 900',
+ 'contrastStrongLightColors': '800 900'
+ },
+ 'deep-orange': {
+ '50': '#fbe9e7',
+ '100': '#ffccbc',
+ '200': '#ffab91',
+ '300': '#ff8a65',
+ '400': '#ff7043',
+ '500': '#ff5722',
+ '600': '#f4511e',
+ '700': '#e64a19',
+ '800': '#d84315',
+ '900': '#bf360c',
+ 'A100': '#ff9e80',
+ 'A200': '#ff6e40',
+ 'A400': '#ff3d00',
+ 'A700': '#dd2c00',
+ 'contrastDefaultColor': 'light',
+ 'contrastDarkColors': '50 100 200 300 400 A100 A200',
+ 'contrastStrongLightColors': '500 600 700 800 900 A400 A700'
+ },
+ 'brown': {
+ '50': '#efebe9',
+ '100': '#d7ccc8',
+ '200': '#bcaaa4',
+ '300': '#a1887f',
+ '400': '#8d6e63',
+ '500': '#795548',
+ '600': '#6d4c41',
+ '700': '#5d4037',
+ '800': '#4e342e',
+ '900': '#3e2723',
+ 'A100': '#d7ccc8',
+ 'A200': '#bcaaa4',
+ 'A400': '#8d6e63',
+ 'A700': '#5d4037',
+ 'contrastDefaultColor': 'light',
+ 'contrastDarkColors': '50 100 200 A100 A200',
+ 'contrastStrongLightColors': '300 400'
+ },
+ 'grey': {
+ '50': '#fafafa',
+ '100': '#f5f5f5',
+ '200': '#eeeeee',
+ '300': '#e0e0e0',
+ '400': '#bdbdbd',
+ '500': '#9e9e9e',
+ '600': '#757575',
+ '700': '#616161',
+ '800': '#424242',
+ '900': '#212121',
+ 'A100': '#ffffff',
+ 'A200': '#000000',
+ 'A400': '#303030',
+ 'A700': '#616161',
+ 'contrastDefaultColor': 'dark',
+ 'contrastLightColors': '600 700 800 900 A200 A400 A700'
+ },
+ 'blue-grey': {
+ '50': '#eceff1',
+ '100': '#cfd8dc',
+ '200': '#b0bec5',
+ '300': '#90a4ae',
+ '400': '#78909c',
+ '500': '#607d8b',
+ '600': '#546e7a',
+ '700': '#455a64',
+ '800': '#37474f',
+ '900': '#263238',
+ 'A100': '#cfd8dc',
+ 'A200': '#b0bec5',
+ 'A400': '#78909c',
+ 'A700': '#455a64',
+ 'contrastDefaultColor': 'light',
+ 'contrastDarkColors': '50 100 200 300 A100 A200',
+ 'contrastStrongLightColors': '400 500 700'
+ }
+});
+
+})();
+(function(){
+"use strict";
+
+(function(angular) {
+ 'use strict';
+/**
+ * @ngdoc module
+ * @name material.core.theming
+ * @description
+ * Theming
+ */
+detectDisabledThemes.$inject = ["$mdThemingProvider"];
+ThemingDirective.$inject = ["$mdTheming", "$interpolate", "$log"];
+ThemableDirective.$inject = ["$mdTheming"];
+ThemingProvider.$inject = ["$mdColorPalette", "$$mdMetaProvider"];
+generateAllThemes.$inject = ["$injector", "$mdTheming"];
+angular.module('material.core.theming', ['material.core.theming.palette', 'material.core.meta'])
+ .directive('mdTheme', ThemingDirective)
+ .directive('mdThemable', ThemableDirective)
+ .directive('mdThemesDisabled', disableThemesDirective )
+ .provider('$mdTheming', ThemingProvider)
+ .config( detectDisabledThemes )
+ .run(generateAllThemes);
+
+/**
+ * Detect if the HTML or the BODY tags has a [md-themes-disabled] attribute
+ * If yes, then immediately disable all theme stylesheet generation and DOM injection
+ */
+/**
+ * @ngInject
+ */
+function detectDisabledThemes($mdThemingProvider) {
+ var isDisabled = !!document.querySelector('[md-themes-disabled]');
+ $mdThemingProvider.disableTheming(isDisabled);
+}
+
+/**
+ * @ngdoc service
+ * @name $mdThemingProvider
+ * @module material.core.theming
+ *
+ * @description Provider to configure the `$mdTheming` service.
+ *
+ * ### Default Theme
+ * The `$mdThemingProvider` uses by default the following theme configuration:
+ *
+ * - Primary Palette: `Primary`
+ * - Accent Palette: `Pink`
+ * - Warn Palette: `Deep-Orange`
+ * - Background Palette: `Grey`
+ *
+ * If you don't want to use the `md-theme` directive on the elements itself, you may want to overwrite
+ * the default theme.
+ * This can be done by using the following markup. + * + *
+ * myAppModule.config(function($mdThemingProvider) {
+ * $mdThemingProvider
+ * .theme('default')
+ * .primaryPalette('blue')
+ * .accentPalette('teal')
+ * .warnPalette('red')
+ * .backgroundPalette('grey');
+ * });
+ *
+ *
+
+ * ### Dynamic Themes
+ *
+ * By default, if you change a theme at runtime, the `$mdTheming` service will not detect those changes.
+ * If you have an application, which changes its theme on runtime, you have to enable theme watching. + * + *
+ * myAppModule.config(function($mdThemingProvider) {
+ * // Enable theme watching.
+ * $mdThemingProvider.alwaysWatchTheme(true);
+ * });
+ *
+ *
+ * ### Custom Theme Styles
+ *
+ * Sometimes you may want to use your own theme styles for some custom components.
+ * You are able to register your own styles by using the following markup. + * + *
+ * myAppModule.config(function($mdThemingProvider) {
+ * // Register our custom stylesheet into the theming provider.
+ * $mdThemingProvider.registerStyles(STYLESHEET);
+ * });
+ *
+ *
+ * The `registerStyles` method only accepts strings as value, so you're actually not able to load an external
+ * stylesheet file into the `$mdThemingProvider`.
+ *
+ * If it's necessary to load an external stylesheet, we suggest using a bundler, which supports including raw content,
+ * like [raw-loader](https://github.com/webpack/raw-loader) for `webpack`.
+ *
+ *
+ * myAppModule.config(function($mdThemingProvider) {
+ * // Register your custom stylesheet into the theming provider.
+ * $mdThemingProvider.registerStyles(require('../styles/my-component.theme.css'));
+ * });
+ *
+ *
+ * ### Browser color
+ *
+ * Enables browser header coloring
+ * for more info please visit:
+ * https://developers.google.com/web/fundamentals/design-and-ui/browser-customization/theme-color
+ *
+ * Options parameter:
+ * `theme` - A defined theme via `$mdThemeProvider` to use the palettes from. Default is `default` theme.
+ * `palette` - Can be any one of the basic material design palettes, extended defined palettes and 'primary', + * 'accent', 'background' and 'warn'. Default is `primary`.
+ * `hue` - The hue from the selected palette. Default is `800`
+ * + *
+ * myAppModule.config(function($mdThemingProvider) {
+ * // Enable browser color
+ * $mdThemingProvider.enableBrowserColor({
+ * theme: 'myTheme', // Default is 'default'
+ * palette: 'accent', // Default is 'primary', any basic material palette and extended palettes are available
+ * hue: '200' // Default is '800'
+ * });
+ * });
+ *
+ */
+
+/**
+ * @ngdoc method
+ * @name $mdThemingProvider#registerStyles
+ * @param {string} styles The styles to be appended to Angular Material's built in theme css.
+ */
+/**
+ * @ngdoc method
+ * @name $mdThemingProvider#setNonce
+ * @param {string} nonceValue The nonce to be added as an attribute to the theme style tags.
+ * Setting a value allows the use of CSP policy without using the unsafe-inline directive.
+ */
+
+/**
+ * @ngdoc method
+ * @name $mdThemingProvider#setDefaultTheme
+ * @param {string} themeName Default theme name to be applied to elements. Default value is `default`.
+ */
+
+/**
+ * @ngdoc method
+ * @name $mdThemingProvider#alwaysWatchTheme
+ * @param {boolean} watch Whether or not to always watch themes for changes and re-apply
+ * classes when they change. Default is `false`. Enabling can reduce performance.
+ */
+
+/**
+ * @ngdoc method
+ * @name $mdThemingProvider#enableBrowserColor
+ * @param {Object=} options Options object for the browser color
+ * `theme` - A defined theme via `$mdThemeProvider` to use the palettes from. Default is `default` theme.
+ * `palette` - Can be any one of the basic material design palettes, extended defined palettes and 'primary', + * 'accent', 'background' and 'warn'. Default is `primary`.
+ * `hue` - The hue from the selected palette. Default is `800`
+ * @returns {Function} remove function of the browser color + */ + +/* Some Example Valid Theming Expressions + * ======================================= + * + * Intention group expansion: (valid for primary, accent, warn, background) + * + * {{primary-100}} - grab shade 100 from the primary palette + * {{primary-100-0.7}} - grab shade 100, apply opacity of 0.7 + * {{primary-100-contrast}} - grab shade 100's contrast color + * {{primary-hue-1}} - grab the shade assigned to hue-1 from the primary palette + * {{primary-hue-1-0.7}} - apply 0.7 opacity to primary-hue-1 + * {{primary-color}} - Generates .md-hue-1, .md-hue-2, .md-hue-3 with configured shades set for each hue + * {{primary-color-0.7}} - Apply 0.7 opacity to each of the above rules + * {{primary-contrast}} - Generates .md-hue-1, .md-hue-2, .md-hue-3 with configured contrast (ie. text) color shades set for each hue + * {{primary-contrast-0.7}} - Apply 0.7 opacity to each of the above rules + * + * Foreground expansion: Applies rgba to black/white foreground text + * + * {{foreground-1}} - used for primary text + * {{foreground-2}} - used for secondary text/divider + * {{foreground-3}} - used for disabled text + * {{foreground-4}} - used for dividers + * + */ + +// In memory generated CSS rules; registered by theme.name +var GENERATED = { }; + +// In memory storage of defined themes and color palettes (both loaded by CSS, and user specified) +var PALETTES; + +// Text Colors on light and dark backgrounds +// @see https://www.google.com/design/spec/style/color.html#color-text-background-colors +var DARK_FOREGROUND = { + name: 'dark', + '1': 'rgba(0,0,0,0.87)', + '2': 'rgba(0,0,0,0.54)', + '3': 'rgba(0,0,0,0.38)', + '4': 'rgba(0,0,0,0.12)' +}; +var LIGHT_FOREGROUND = { + name: 'light', + '1': 'rgba(255,255,255,1.0)', + '2': 'rgba(255,255,255,0.7)', + '3': 'rgba(255,255,255,0.5)', + '4': 'rgba(255,255,255,0.12)' +}; + +var DARK_SHADOW = '1px 1px 0px rgba(0,0,0,0.4), -1px -1px 0px rgba(0,0,0,0.4)'; +var LIGHT_SHADOW = ''; + +var DARK_CONTRAST_COLOR = colorToRgbaArray('rgba(0,0,0,0.87)'); +var LIGHT_CONTRAST_COLOR = colorToRgbaArray('rgba(255,255,255,0.87)'); +var STRONG_LIGHT_CONTRAST_COLOR = colorToRgbaArray('rgb(255,255,255)'); + +var THEME_COLOR_TYPES = ['primary', 'accent', 'warn', 'background']; +var DEFAULT_COLOR_TYPE = 'primary'; + +// A color in a theme will use these hues by default, if not specified by user. +var LIGHT_DEFAULT_HUES = { + 'accent': { + 'default': 'A200', + 'hue-1': 'A100', + 'hue-2': 'A400', + 'hue-3': 'A700' + }, + 'background': { + 'default': '50', + 'hue-1': 'A100', + 'hue-2': '100', + 'hue-3': '300' + } +}; + +var DARK_DEFAULT_HUES = { + 'background': { + 'default': 'A400', + 'hue-1': '800', + 'hue-2': '900', + 'hue-3': 'A200' + } +}; +THEME_COLOR_TYPES.forEach(function(colorType) { + // Color types with unspecified default hues will use these default hue values + var defaultDefaultHues = { + 'default': '500', + 'hue-1': '300', + 'hue-2': '800', + 'hue-3': 'A100' + }; + if (!LIGHT_DEFAULT_HUES[colorType]) LIGHT_DEFAULT_HUES[colorType] = defaultDefaultHues; + if (!DARK_DEFAULT_HUES[colorType]) DARK_DEFAULT_HUES[colorType] = defaultDefaultHues; +}); + +var VALID_HUE_VALUES = [ + '50', '100', '200', '300', '400', '500', '600', + '700', '800', '900', 'A100', 'A200', 'A400', 'A700' +]; + +var themeConfig = { + disableTheming : false, // Generate our themes at run time; also disable stylesheet DOM injection + generateOnDemand : false, // Whether or not themes are to be generated on-demand (vs. eagerly). + registeredStyles : [], // Custom styles registered to be used in the theming of custom components. + nonce : null // Nonce to be added as an attribute to the generated themes style tags. +}; + +/** + * + */ +function ThemingProvider($mdColorPalette, $$mdMetaProvider) { + ThemingService.$inject = ["$rootScope", "$log"]; + PALETTES = { }; + var THEMES = { }; + + var themingProvider; + + var alwaysWatchTheme = false; + var defaultTheme = 'default'; + + // Load JS Defined Palettes + angular.extend(PALETTES, $mdColorPalette); + + // Default theme defined in core.js + + /** + * Adds `theme-color` and `msapplication-navbutton-color` meta tags with the color parameter + * @param {string} color Hex value of the wanted browser color + * @returns {Function} Remove function of the meta tags + */ + var setBrowserColor = function (color) { + // Chrome, Firefox OS and Opera + var removeChrome = $$mdMetaProvider.setMeta('theme-color', color); + // Windows Phone + var removeWindows = $$mdMetaProvider.setMeta('msapplication-navbutton-color', color); + + return function () { + removeChrome(); + removeWindows(); + } + }; + + /** + * Enables browser header coloring + * for more info please visit: + * https://developers.google.com/web/fundamentals/design-and-ui/browser-customization/theme-color + * + * The default color is `800` from `primary` palette of the `default` theme + * + * options are: + * `theme` - A defined theme via `$mdThemeProvider` to use the palettes from. Default is `default` theme + * `palette` - Can be any one of the basic material design palettes, extended defined palettes and 'primary', + * 'accent', 'background' and 'warn'. Default is `primary` + * `hue` - The hue from the selected palette. Default is `800` + * + * @param {Object=} options Options object for the browser color + * @returns {Function} remove function of the browser color + */ + var enableBrowserColor = function (options) { + options = angular.isObject(options) ? options : {}; + + var theme = options.theme || 'default'; + var hue = options.hue || '800'; + + var palette = PALETTES[options.palette] || + PALETTES[THEMES[theme].colors[options.palette || 'primary'].name]; + + var color = angular.isObject(palette[hue]) ? palette[hue].hex : palette[hue]; + + return setBrowserColor(color); + }; + + return themingProvider = { + definePalette: definePalette, + extendPalette: extendPalette, + theme: registerTheme, + + /** + * return a read-only clone of the current theme configuration + */ + configuration : function() { + return angular.extend( { }, themeConfig, { + defaultTheme : defaultTheme, + alwaysWatchTheme : alwaysWatchTheme, + registeredStyles : [].concat(themeConfig.registeredStyles) + }); + }, + + /** + * Easy way to disable theming without having to use + * `.constant("$MD_THEME_CSS","");` This disables + * all dynamic theme style sheet generations and injections... + */ + disableTheming: function(isDisabled) { + themeConfig.disableTheming = angular.isUndefined(isDisabled) || !!isDisabled; + }, + + registerStyles: function(styles) { + themeConfig.registeredStyles.push(styles); + }, + + setNonce: function(nonceValue) { + themeConfig.nonce = nonceValue; + }, + + generateThemesOnDemand: function(onDemand) { + themeConfig.generateOnDemand = onDemand; + }, + + setDefaultTheme: function(theme) { + defaultTheme = theme; + }, + + alwaysWatchTheme: function(alwaysWatch) { + alwaysWatchTheme = alwaysWatch; + }, + + enableBrowserColor: enableBrowserColor, + + $get: ThemingService, + _LIGHT_DEFAULT_HUES: LIGHT_DEFAULT_HUES, + _DARK_DEFAULT_HUES: DARK_DEFAULT_HUES, + _PALETTES: PALETTES, + _THEMES: THEMES, + _parseRules: parseRules, + _rgba: rgba + }; + + // Example: $mdThemingProvider.definePalette('neonRed', { 50: '#f5fafa', ... }); + function definePalette(name, map) { + map = map || {}; + PALETTES[name] = checkPaletteValid(name, map); + return themingProvider; + } + + // Returns an new object which is a copy of a given palette `name` with variables from + // `map` overwritten + // Example: var neonRedMap = $mdThemingProvider.extendPalette('red', { 50: '#f5fafafa' }); + function extendPalette(name, map) { + return checkPaletteValid(name, angular.extend({}, PALETTES[name] || {}, map) ); + } + + // Make sure that palette has all required hues + function checkPaletteValid(name, map) { + var missingColors = VALID_HUE_VALUES.filter(function(field) { + return !map[field]; + }); + if (missingColors.length) { + throw new Error("Missing colors %1 in palette %2!" + .replace('%1', missingColors.join(', ')) + .replace('%2', name)); + } + + return map; + } + + // Register a theme (which is a collection of color palettes to use with various states + // ie. warn, accent, primary ) + // Optionally inherit from an existing theme + // $mdThemingProvider.theme('custom-theme').primaryPalette('red'); + function registerTheme(name, inheritFrom) { + if (THEMES[name]) return THEMES[name]; + + inheritFrom = inheritFrom || 'default'; + + var parentTheme = typeof inheritFrom === 'string' ? THEMES[inheritFrom] : inheritFrom; + var theme = new Theme(name); + + if (parentTheme) { + angular.forEach(parentTheme.colors, function(color, colorType) { + theme.colors[colorType] = { + name: color.name, + // Make sure a COPY of the hues is given to the child color, + // not the same reference. + hues: angular.extend({}, color.hues) + }; + }); + } + THEMES[name] = theme; + + return theme; + } + + function Theme(name) { + var self = this; + self.name = name; + self.colors = {}; + + self.dark = setDark; + setDark(false); + + function setDark(isDark) { + isDark = arguments.length === 0 ? true : !!isDark; + + // If no change, abort + if (isDark === self.isDark) return; + + self.isDark = isDark; + + self.foregroundPalette = self.isDark ? LIGHT_FOREGROUND : DARK_FOREGROUND; + self.foregroundShadow = self.isDark ? DARK_SHADOW : LIGHT_SHADOW; + + // Light and dark themes have different default hues. + // Go through each existing color type for this theme, and for every + // hue value that is still the default hue value from the previous light/dark setting, + // set it to the default hue value from the new light/dark setting. + var newDefaultHues = self.isDark ? DARK_DEFAULT_HUES : LIGHT_DEFAULT_HUES; + var oldDefaultHues = self.isDark ? LIGHT_DEFAULT_HUES : DARK_DEFAULT_HUES; + angular.forEach(newDefaultHues, function(newDefaults, colorType) { + var color = self.colors[colorType]; + var oldDefaults = oldDefaultHues[colorType]; + if (color) { + for (var hueName in color.hues) { + if (color.hues[hueName] === oldDefaults[hueName]) { + color.hues[hueName] = newDefaults[hueName]; + } + } + } + }); + + return self; + } + + THEME_COLOR_TYPES.forEach(function(colorType) { + var defaultHues = (self.isDark ? DARK_DEFAULT_HUES : LIGHT_DEFAULT_HUES)[colorType]; + self[colorType + 'Palette'] = function setPaletteType(paletteName, hues) { + var color = self.colors[colorType] = { + name: paletteName, + hues: angular.extend({}, defaultHues, hues) + }; + + Object.keys(color.hues).forEach(function(name) { + if (!defaultHues[name]) { + throw new Error("Invalid hue name '%1' in theme %2's %3 color %4. Available hue names: %4" + .replace('%1', name) + .replace('%2', self.name) + .replace('%3', paletteName) + .replace('%4', Object.keys(defaultHues).join(', ')) + ); + } + }); + Object.keys(color.hues).map(function(key) { + return color.hues[key]; + }).forEach(function(hueValue) { + if (VALID_HUE_VALUES.indexOf(hueValue) == -1) { + throw new Error("Invalid hue value '%1' in theme %2's %3 color %4. Available hue values: %5" + .replace('%1', hueValue) + .replace('%2', self.name) + .replace('%3', colorType) + .replace('%4', paletteName) + .replace('%5', VALID_HUE_VALUES.join(', ')) + ); + } + }); + return self; + }; + + self[colorType + 'Color'] = function() { + var args = Array.prototype.slice.call(arguments); + console.warn('$mdThemingProviderTheme.' + colorType + 'Color() has been deprecated. ' + + 'Use $mdThemingProviderTheme.' + colorType + 'Palette() instead.'); + return self[colorType + 'Palette'].apply(self, args); + }; + }); + } + + /** + * @ngdoc service + * @name $mdTheming + * + * @description + * + * Service that makes an element apply theming related classes to itself. + * + * ```js + * app.directive('myFancyDirective', function($mdTheming) { + * return { + * restrict: 'e', + * link: function(scope, el, attrs) { + * $mdTheming(el); + * } + * }; + * }); + * ``` + * @param {el=} element to apply theming to + */ + /* @ngInject */ + function ThemingService($rootScope, $log) { + // Allow us to be invoked via a linking function signature. + var applyTheme = function (scope, el) { + if (el === undefined) { el = scope; scope = undefined; } + if (scope === undefined) { scope = $rootScope; } + applyTheme.inherit(el, el); + }; + + applyTheme.THEMES = angular.extend({}, THEMES); + applyTheme.PALETTES = angular.extend({}, PALETTES); + applyTheme.inherit = inheritTheme; + applyTheme.registered = registered; + applyTheme.defaultTheme = function() { return defaultTheme; }; + applyTheme.generateTheme = function(name) { generateTheme(THEMES[name], name, themeConfig.nonce); }; + applyTheme.setBrowserColor = enableBrowserColor; + + return applyTheme; + + /** + * Determine is specified theme name is a valid, registered theme + */ + function registered(themeName) { + if (themeName === undefined || themeName === '') return true; + return applyTheme.THEMES[themeName] !== undefined; + } + + /** + * Get theme name for the element, then update with Theme CSS class + */ + function inheritTheme (el, parent) { + var ctrl = parent.controller('mdTheme'); + var attrThemeValue = el.attr('md-theme-watch'); + var watchTheme = (alwaysWatchTheme || angular.isDefined(attrThemeValue)) && attrThemeValue != 'false'; + + updateThemeClass(lookupThemeName()); + + if ((alwaysWatchTheme && !registerChangeCallback()) || (!alwaysWatchTheme && watchTheme)) { + el.on('$destroy', $rootScope.$watch(lookupThemeName, updateThemeClass) ); + } + + /** + * Find the theme name from the parent controller or element data + */ + function lookupThemeName() { + // As a few components (dialog) add their controllers later, we should also watch for a controller init. + ctrl = parent.controller('mdTheme') || el.data('$mdThemeController'); + return ctrl && ctrl.$mdTheme || (defaultTheme == 'default' ? '' : defaultTheme); + } + + /** + * Remove old theme class and apply a new one + * NOTE: if not a valid theme name, then the current name is not changed + */ + function updateThemeClass(theme) { + if (!theme) return; + if (!registered(theme)) { + $log.warn('Attempted to use unregistered theme \'' + theme + '\'. ' + + 'Register it with $mdThemingProvider.theme().'); + } + + var oldTheme = el.data('$mdThemeName'); + if (oldTheme) el.removeClass('md-' + oldTheme +'-theme'); + el.addClass('md-' + theme + '-theme'); + el.data('$mdThemeName', theme); + if (ctrl) { + el.data('$mdThemeController', ctrl); + } + } + + /** + * Register change callback with parent mdTheme controller + */ + function registerChangeCallback() { + var parentController = parent.controller('mdTheme'); + if (!parentController) return false; + el.on('$destroy', parentController.registerChanges( function() { + updateThemeClass(lookupThemeName()); + })); + return true; + } + } + + } +} + +function ThemingDirective($mdTheming, $interpolate, $log) { + return { + priority: 100, + link: { + pre: function(scope, el, attrs) { + var registeredCallbacks = []; + var ctrl = { + registerChanges: function (cb, context) { + if (context) { + cb = angular.bind(context, cb); + } + + registeredCallbacks.push(cb); + + return function () { + var index = registeredCallbacks.indexOf(cb); + + if (index > -1) { + registeredCallbacks.splice(index, 1); + } + }; + }, + $setTheme: function (theme) { + if (!$mdTheming.registered(theme)) { + $log.warn('attempted to use unregistered theme \'' + theme + '\''); + } + ctrl.$mdTheme = theme; + + registeredCallbacks.forEach(function (cb) { + cb(); + }); + } + }; + el.data('$mdThemeController', ctrl); + ctrl.$setTheme($interpolate(attrs.mdTheme)(scope)); + attrs.$observe('mdTheme', ctrl.$setTheme); + } + } + }; +} + +/** + * Special directive that will disable ALL runtime Theme style generation and DOM injection + * + * + * + * + * + * ... + * + * + * Note: Using md-themes-css directive requires the developer to load external + * theme stylesheets; e.g. custom themes from Material-Tools: + * + * `angular-material.themes.css` + * + * Another option is to use the ThemingProvider to configure and disable the attribute + * conversions; this would obviate the use of the `md-themes-css` directive + * + */ +function disableThemesDirective() { + themeConfig.disableTheming = true; + + // Return a 1x-only, first-match attribute directive + return { + restrict : 'A', + priority : '900' + }; +} + +function ThemableDirective($mdTheming) { + return $mdTheming; +} + +function parseRules(theme, colorType, rules) { + checkValidPalette(theme, colorType); + + rules = rules.replace(/THEME_NAME/g, theme.name); + var generatedRules = []; + var color = theme.colors[colorType]; + + var themeNameRegex = new RegExp('\\.md-' + theme.name + '-theme', 'g'); + // Matches '{{ primary-color }}', etc + var hueRegex = new RegExp('(\'|")?{{\\s*(' + colorType + ')-(color|contrast)-?(\\d\\.?\\d*)?\\s*}}(\"|\')?','g'); + var simpleVariableRegex = /'?"?\{\{\s*([a-zA-Z]+)-(A?\d+|hue\-[0-3]|shadow|default)-?(\d\.?\d*)?(contrast)?\s*\}\}'?"?/g; + var palette = PALETTES[color.name]; + + // find and replace simple variables where we use a specific hue, not an entire palette + // eg. "{{primary-100}}" + //\(' + THEME_COLOR_TYPES.join('\|') + '\)' + rules = rules.replace(simpleVariableRegex, function(match, colorType, hue, opacity, contrast) { + if (colorType === 'foreground') { + if (hue == 'shadow') { + return theme.foregroundShadow; + } else { + return theme.foregroundPalette[hue] || theme.foregroundPalette['1']; + } + } + + // `default` is also accepted as a hue-value, because the background palettes are + // using it as a name for the default hue. + if (hue.indexOf('hue') === 0 || hue === 'default') { + hue = theme.colors[colorType].hues[hue]; + } + + return rgba( (PALETTES[ theme.colors[colorType].name ][hue] || '')[contrast ? 'contrast' : 'value'], opacity ); + }); + + // For each type, generate rules for each hue (ie. default, md-hue-1, md-hue-2, md-hue-3) + angular.forEach(color.hues, function(hueValue, hueName) { + var newRule = rules + .replace(hueRegex, function(match, _, colorType, hueType, opacity) { + return rgba(palette[hueValue][hueType === 'color' ? 'value' : 'contrast'], opacity); + }); + if (hueName !== 'default') { + newRule = newRule.replace(themeNameRegex, '.md-' + theme.name + '-theme.md-' + hueName); + } + + // Don't apply a selector rule to the default theme, making it easier to override + // styles of the base-component + if (theme.name == 'default') { + var themeRuleRegex = /((?:(?:(?: |>|\.|\w|-|:|\(|\)|\[|\]|"|'|=)+) )?)((?:(?:\w|\.|-)+)?)\.md-default-theme((?: |>|\.|\w|-|:|\(|\)|\[|\]|"|'|=)*)/g; + newRule = newRule.replace(themeRuleRegex, function(match, prefix, target, suffix) { + return match + ', ' + prefix + target + suffix; + }); + } + generatedRules.push(newRule); + }); + + return generatedRules; +} + +var rulesByType = {}; + +// Generate our themes at run time given the state of THEMES and PALETTES +function generateAllThemes($injector, $mdTheming) { + var head = document.head; + var firstChild = head ? head.firstElementChild : null; + var themeCss = !themeConfig.disableTheming && $injector.has('$MD_THEME_CSS') ? $injector.get('$MD_THEME_CSS') : ''; + + // Append our custom registered styles to the theme stylesheet. + themeCss += themeConfig.registeredStyles.join(''); + + if ( !firstChild ) return; + if (themeCss.length === 0) return; // no rules, so no point in running this expensive task + + // Expose contrast colors for palettes to ensure that text is always readable + angular.forEach(PALETTES, sanitizePalette); + + // MD_THEME_CSS is a string generated by the build process that includes all the themable + // components as templates + + // Break the CSS into individual rules + var rules = themeCss + .split(/\}(?!(\}|'|"|;))/) + .filter(function(rule) { return rule && rule.trim().length; }) + .map(function(rule) { return rule.trim() + '}'; }); + + + var ruleMatchRegex = new RegExp('md-(' + THEME_COLOR_TYPES.join('|') + ')', 'g'); + + THEME_COLOR_TYPES.forEach(function(type) { + rulesByType[type] = ''; + }); + + + // Sort the rules based on type, allowing us to do color substitution on a per-type basis + rules.forEach(function(rule) { + var match = rule.match(ruleMatchRegex); + // First: test that if the rule has '.md-accent', it goes into the accent set of rules + for (var i = 0, type; type = THEME_COLOR_TYPES[i]; i++) { + if (rule.indexOf('.md-' + type) > -1) { + return rulesByType[type] += rule; + } + } + + // If no eg 'md-accent' class is found, try to just find 'accent' in the rule and guess from + // there + for (i = 0; type = THEME_COLOR_TYPES[i]; i++) { + if (rule.indexOf(type) > -1) { + return rulesByType[type] += rule; + } + } + + // Default to the primary array + return rulesByType[DEFAULT_COLOR_TYPE] += rule; + }); + + // If themes are being generated on-demand, quit here. The user will later manually + // call generateTheme to do this on a theme-by-theme basis. + if (themeConfig.generateOnDemand) return; + + angular.forEach($mdTheming.THEMES, function(theme) { + if (!GENERATED[theme.name] && !($mdTheming.defaultTheme() !== 'default' && theme.name === 'default')) { + generateTheme(theme, theme.name, themeConfig.nonce); + } + }); + + + // ************************* + // Internal functions + // ************************* + + // The user specifies a 'default' contrast color as either light or dark, + // then explicitly lists which hues are the opposite contrast (eg. A100 has dark, A200 has light) + function sanitizePalette(palette, name) { + var defaultContrast = palette.contrastDefaultColor; + var lightColors = palette.contrastLightColors || []; + var strongLightColors = palette.contrastStrongLightColors || []; + var darkColors = palette.contrastDarkColors || []; + + // These colors are provided as space-separated lists + if (typeof lightColors === 'string') lightColors = lightColors.split(' '); + if (typeof strongLightColors === 'string') strongLightColors = strongLightColors.split(' '); + if (typeof darkColors === 'string') darkColors = darkColors.split(' '); + + // Cleanup after ourselves + delete palette.contrastDefaultColor; + delete palette.contrastLightColors; + delete palette.contrastStrongLightColors; + delete palette.contrastDarkColors; + + // Change { 'A100': '#fffeee' } to { 'A100': { value: '#fffeee', contrast:DARK_CONTRAST_COLOR } + angular.forEach(palette, function(hueValue, hueName) { + if (angular.isObject(hueValue)) return; // Already converted + // Map everything to rgb colors + var rgbValue = colorToRgbaArray(hueValue); + if (!rgbValue) { + throw new Error("Color %1, in palette %2's hue %3, is invalid. Hex or rgb(a) color expected." + .replace('%1', hueValue) + .replace('%2', palette.name) + .replace('%3', hueName)); + } + + palette[hueName] = { + hex: palette[hueName], + value: rgbValue, + contrast: getContrastColor() + }; + function getContrastColor() { + if (defaultContrast === 'light') { + if (darkColors.indexOf(hueName) > -1) { + return DARK_CONTRAST_COLOR; + } else { + return strongLightColors.indexOf(hueName) > -1 ? STRONG_LIGHT_CONTRAST_COLOR + : LIGHT_CONTRAST_COLOR; + } + } else { + if (lightColors.indexOf(hueName) > -1) { + return strongLightColors.indexOf(hueName) > -1 ? STRONG_LIGHT_CONTRAST_COLOR + : LIGHT_CONTRAST_COLOR; + } else { + return DARK_CONTRAST_COLOR; + } + } + } + }); + } +} + +function generateTheme(theme, name, nonce) { + var head = document.head; + var firstChild = head ? head.firstElementChild : null; + + if (!GENERATED[name]) { + // For each theme, use the color palettes specified for + // `primary`, `warn` and `accent` to generate CSS rules. + THEME_COLOR_TYPES.forEach(function(colorType) { + var styleStrings = parseRules(theme, colorType, rulesByType[colorType]); + while (styleStrings.length) { + var styleContent = styleStrings.shift(); + if (styleContent) { + var style = document.createElement('style'); + style.setAttribute('md-theme-style', ''); + if (nonce) { + style.setAttribute('nonce', nonce); + } + style.appendChild(document.createTextNode(styleContent)); + head.insertBefore(style, firstChild); + } + } + }); + + GENERATED[theme.name] = true; + } + +} + + +function checkValidPalette(theme, colorType) { + // If theme attempts to use a palette that doesnt exist, throw error + if (!PALETTES[ (theme.colors[colorType] || {}).name ]) { + throw new Error( + "You supplied an invalid color palette for theme %1's %2 palette. Available palettes: %3" + .replace('%1', theme.name) + .replace('%2', colorType) + .replace('%3', Object.keys(PALETTES).join(', ')) + ); + } +} + +function colorToRgbaArray(clr) { + if (angular.isArray(clr) && clr.length == 3) return clr; + if (/^rgb/.test(clr)) { + return clr.replace(/(^\s*rgba?\(|\)\s*$)/g, '').split(',').map(function(value, i) { + return i == 3 ? parseFloat(value, 10) : parseInt(value, 10); + }); + } + if (clr.charAt(0) == '#') clr = clr.substring(1); + if (!/^([a-fA-F0-9]{3}){1,2}$/g.test(clr)) return; + + var dig = clr.length / 3; + var red = clr.substr(0, dig); + var grn = clr.substr(dig, dig); + var blu = clr.substr(dig * 2); + if (dig === 1) { + red += red; + grn += grn; + blu += blu; + } + return [parseInt(red, 16), parseInt(grn, 16), parseInt(blu, 16)]; +} + +function rgba(rgbArray, opacity) { + if ( !rgbArray ) return "rgb('0,0,0')"; + + if (rgbArray.length == 4) { + rgbArray = angular.copy(rgbArray); + opacity ? rgbArray.pop() : opacity = rgbArray.pop(); + } + return opacity && (typeof opacity == 'number' || (typeof opacity == 'string' && opacity.length)) ? + 'rgba(' + rgbArray.join(',') + ',' + opacity + ')' : + 'rgb(' + rgbArray.join(',') + ')'; +} + + +})(window.angular); + +})(); +(function(){ +"use strict"; + +// Polyfill angular < 1.4 (provide $animateCss) +angular + .module('material.core') + .factory('$$mdAnimate', ["$q", "$timeout", "$mdConstant", "$animateCss", function($q, $timeout, $mdConstant, $animateCss){ + + // Since $$mdAnimate is injected into $mdUtil... use a wrapper function + // to subsequently inject $mdUtil as an argument to the AnimateDomUtils + + return function($mdUtil) { + return AnimateDomUtils( $mdUtil, $q, $timeout, $mdConstant, $animateCss); + }; + }]); + +/** + * Factory function that requires special injections + */ +function AnimateDomUtils($mdUtil, $q, $timeout, $mdConstant, $animateCss) { + var self; + return self = { + /** + * + */ + translate3d : function( target, from, to, options ) { + return $animateCss(target,{ + from:from, + to:to, + addClass:options.transitionInClass, + removeClass:options.transitionOutClass + }) + .start() + .then(function(){ + // Resolve with reverser function... + return reverseTranslate; + }); + + /** + * Specific reversal of the request translate animation above... + */ + function reverseTranslate (newFrom) { + return $animateCss(target, { + to: newFrom || from, + addClass: options.transitionOutClass, + removeClass: options.transitionInClass + }).start(); + + } + }, + + /** + * Listen for transitionEnd event (with optional timeout) + * Announce completion or failure via promise handlers + */ + waitTransitionEnd: function (element, opts) { + var TIMEOUT = 3000; // fallback is 3 secs + + return $q(function(resolve, reject){ + opts = opts || { }; + + // If there is no transition is found, resolve immediately + // + // NOTE: using $mdUtil.nextTick() causes delays/issues + if (noTransitionFound(opts.cachedTransitionStyles)) { + TIMEOUT = 0; + } + + var timer = $timeout(finished, opts.timeout || TIMEOUT); + element.on($mdConstant.CSS.TRANSITIONEND, finished); + + /** + * Upon timeout or transitionEnd, reject or resolve (respectively) this promise. + * NOTE: Make sure this transitionEnd didn't bubble up from a child + */ + function finished(ev) { + if ( ev && ev.target !== element[0]) return; + + if ( ev ) $timeout.cancel(timer); + element.off($mdConstant.CSS.TRANSITIONEND, finished); + + // Never reject since ngAnimate may cause timeouts due missed transitionEnd events + resolve(); + + } + + /** + * Checks whether or not there is a transition. + * + * @param styles The cached styles to use for the calculation. If null, getComputedStyle() + * will be used. + * + * @returns {boolean} True if there is no transition/duration; false otherwise. + */ + function noTransitionFound(styles) { + styles = styles || window.getComputedStyle(element[0]); + + return styles.transitionDuration == '0s' || (!styles.transition && !styles.transitionProperty); + } + + }); + }, + + calculateTransformValues: function (element, originator) { + var origin = originator.element; + var bounds = originator.bounds; + + if (origin || bounds) { + var originBnds = origin ? self.clientRect(origin) || currentBounds() : self.copyRect(bounds); + var dialogRect = self.copyRect(element[0].getBoundingClientRect()); + var dialogCenterPt = self.centerPointFor(dialogRect); + var originCenterPt = self.centerPointFor(originBnds); + + return { + centerX: originCenterPt.x - dialogCenterPt.x, + centerY: originCenterPt.y - dialogCenterPt.y, + scaleX: Math.round(100 * Math.min(0.5, originBnds.width / dialogRect.width)) / 100, + scaleY: Math.round(100 * Math.min(0.5, originBnds.height / dialogRect.height)) / 100 + }; + } + return {centerX: 0, centerY: 0, scaleX: 0.5, scaleY: 0.5}; + + /** + * This is a fallback if the origin information is no longer valid, then the + * origin bounds simply becomes the current bounds for the dialogContainer's parent + */ + function currentBounds() { + var cntr = element ? element.parent() : null; + var parent = cntr ? cntr.parent() : null; + + return parent ? self.clientRect(parent) : null; + } + }, + + /** + * Calculate the zoom transform from dialog to origin. + * + * We use this to set the dialog position immediately; + * then the md-transition-in actually translates back to + * `translate3d(0,0,0) scale(1.0)`... + * + * NOTE: all values are rounded to the nearest integer + */ + calculateZoomToOrigin: function (element, originator) { + var zoomTemplate = "translate3d( {centerX}px, {centerY}px, 0 ) scale( {scaleX}, {scaleY} )"; + var buildZoom = angular.bind(null, $mdUtil.supplant, zoomTemplate); + + return buildZoom(self.calculateTransformValues(element, originator)); + }, + + /** + * Calculate the slide transform from panel to origin. + * NOTE: all values are rounded to the nearest integer + */ + calculateSlideToOrigin: function (element, originator) { + var slideTemplate = "translate3d( {centerX}px, {centerY}px, 0 )"; + var buildSlide = angular.bind(null, $mdUtil.supplant, slideTemplate); + + return buildSlide(self.calculateTransformValues(element, originator)); + }, + + /** + * Enhance raw values to represent valid css stylings... + */ + toCss : function( raw ) { + var css = { }; + var lookups = 'left top right bottom width height x y min-width min-height max-width max-height'; + + angular.forEach(raw, function(value,key) { + if ( angular.isUndefined(value) ) return; + + if ( lookups.indexOf(key) >= 0 ) { + css[key] = value + 'px'; + } else { + switch (key) { + case 'transition': + convertToVendor(key, $mdConstant.CSS.TRANSITION, value); + break; + case 'transform': + convertToVendor(key, $mdConstant.CSS.TRANSFORM, value); + break; + case 'transformOrigin': + convertToVendor(key, $mdConstant.CSS.TRANSFORM_ORIGIN, value); + break; + case 'font-size': + css['font-size'] = value; // font sizes aren't always in px + break; + } + } + }); + + return css; + + function convertToVendor(key, vendor, value) { + angular.forEach(vendor.split(' '), function (key) { + css[key] = value; + }); + } + }, + + /** + * Convert the translate CSS value to key/value pair(s). + */ + toTransformCss: function (transform, addTransition, transition) { + var css = {}; + angular.forEach($mdConstant.CSS.TRANSFORM.split(' '), function (key) { + css[key] = transform; + }); + + if (addTransition) { + transition = transition || "all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important"; + css.transition = transition; + } + + return css; + }, + + /** + * Clone the Rect and calculate the height/width if needed + */ + copyRect: function (source, destination) { + if (!source) return null; + + destination = destination || {}; + + angular.forEach('left top right bottom width height'.split(' '), function (key) { + destination[key] = Math.round(source[key]); + }); + + destination.width = destination.width || (destination.right - destination.left); + destination.height = destination.height || (destination.bottom - destination.top); + + return destination; + }, + + /** + * Calculate ClientRect of element; return null if hidden or zero size + */ + clientRect: function (element) { + var bounds = angular.element(element)[0].getBoundingClientRect(); + var isPositiveSizeClientRect = function (rect) { + return rect && (rect.width > 0) && (rect.height > 0); + }; + + // If the event origin element has zero size, it has probably been hidden. + return isPositiveSizeClientRect(bounds) ? self.copyRect(bounds) : null; + }, + + /** + * Calculate 'rounded' center point of Rect + */ + centerPointFor: function (targetRect) { + return targetRect ? { + x: Math.round(targetRect.left + (targetRect.width / 2)), + y: Math.round(targetRect.top + (targetRect.height / 2)) + } : { x : 0, y : 0 }; + } + + }; +} + + +})(); +(function(){ +"use strict"; + +"use strict"; + +if (angular.version.minor >= 4) { + angular.module('material.core.animate', []); +} else { +(function() { + + var forEach = angular.forEach; + + var WEBKIT = angular.isDefined(document.documentElement.style.WebkitAppearance); + var TRANSITION_PROP = WEBKIT ? 'WebkitTransition' : 'transition'; + var ANIMATION_PROP = WEBKIT ? 'WebkitAnimation' : 'animation'; + var PREFIX = WEBKIT ? '-webkit-' : ''; + + var TRANSITION_EVENTS = (WEBKIT ? 'webkitTransitionEnd ' : '') + 'transitionend'; + var ANIMATION_EVENTS = (WEBKIT ? 'webkitAnimationEnd ' : '') + 'animationend'; + + var $$ForceReflowFactory = ['$document', function($document) { + return function() { + return $document[0].body.clientWidth + 1; + } + }]; + + var $$rAFMutexFactory = ['$$rAF', function($$rAF) { + return function() { + var passed = false; + $$rAF(function() { + passed = true; + }); + return function(fn) { + passed ? fn() : $$rAF(fn); + }; + }; + }]; + + var $$AnimateRunnerFactory = ['$q', '$$rAFMutex', function($q, $$rAFMutex) { + var INITIAL_STATE = 0; + var DONE_PENDING_STATE = 1; + var DONE_COMPLETE_STATE = 2; + + function AnimateRunner(host) { + this.setHost(host); + + this._doneCallbacks = []; + this._runInAnimationFrame = $$rAFMutex(); + this._state = 0; + } + + AnimateRunner.prototype = { + setHost: function(host) { + this.host = host || {}; + }, + + done: function(fn) { + if (this._state === DONE_COMPLETE_STATE) { + fn(); + } else { + this._doneCallbacks.push(fn); + } + }, + + progress: angular.noop, + + getPromise: function() { + if (!this.promise) { + var self = this; + this.promise = $q(function(resolve, reject) { + self.done(function(status) { + status === false ? reject() : resolve(); + }); + }); + } + return this.promise; + }, + + then: function(resolveHandler, rejectHandler) { + return this.getPromise().then(resolveHandler, rejectHandler); + }, + + 'catch': function(handler) { + return this.getPromise()['catch'](handler); + }, + + 'finally': function(handler) { + return this.getPromise()['finally'](handler); + }, + + pause: function() { + if (this.host.pause) { + this.host.pause(); + } + }, + + resume: function() { + if (this.host.resume) { + this.host.resume(); + } + }, + + end: function() { + if (this.host.end) { + this.host.end(); + } + this._resolve(true); + }, + + cancel: function() { + if (this.host.cancel) { + this.host.cancel(); + } + this._resolve(false); + }, + + complete: function(response) { + var self = this; + if (self._state === INITIAL_STATE) { + self._state = DONE_PENDING_STATE; + self._runInAnimationFrame(function() { + self._resolve(response); + }); + } + }, + + _resolve: function(response) { + if (this._state !== DONE_COMPLETE_STATE) { + forEach(this._doneCallbacks, function(fn) { + fn(response); + }); + this._doneCallbacks.length = 0; + this._state = DONE_COMPLETE_STATE; + } + } + }; + + // Polyfill AnimateRunner.all which is used by input animations + AnimateRunner.all = function(runners, callback) { + var count = 0; + var status = true; + forEach(runners, function(runner) { + runner.done(onProgress); + }); + + function onProgress(response) { + status = status && response; + if (++count === runners.length) { + callback(status); + } + } + }; + + return AnimateRunner; + }]; + + angular + .module('material.core.animate', []) + .factory('$$forceReflow', $$ForceReflowFactory) + .factory('$$AnimateRunner', $$AnimateRunnerFactory) + .factory('$$rAFMutex', $$rAFMutexFactory) + .factory('$animateCss', ['$window', '$$rAF', '$$AnimateRunner', '$$forceReflow', '$$jqLite', '$timeout', '$animate', + function($window, $$rAF, $$AnimateRunner, $$forceReflow, $$jqLite, $timeout, $animate) { + + function init(element, options) { + + var temporaryStyles = []; + var node = getDomNode(element); + var areAnimationsAllowed = node && $animate.enabled(); + + var hasCompleteStyles = false; + var hasCompleteClasses = false; + + if (areAnimationsAllowed) { + if (options.transitionStyle) { + temporaryStyles.push([PREFIX + 'transition', options.transitionStyle]); + } + + if (options.keyframeStyle) { + temporaryStyles.push([PREFIX + 'animation', options.keyframeStyle]); + } + + if (options.delay) { + temporaryStyles.push([PREFIX + 'transition-delay', options.delay + 's']); + } + + if (options.duration) { + temporaryStyles.push([PREFIX + 'transition-duration', options.duration + 's']); + } + + hasCompleteStyles = options.keyframeStyle || + (options.to && (options.duration > 0 || options.transitionStyle)); + hasCompleteClasses = !!options.addClass || !!options.removeClass; + + blockTransition(element, true); + } + + var hasCompleteAnimation = areAnimationsAllowed && (hasCompleteStyles || hasCompleteClasses); + + applyAnimationFromStyles(element, options); + + var animationClosed = false; + var events, eventFn; + + return { + close: $window.close, + start: function() { + var runner = new $$AnimateRunner(); + waitUntilQuiet(function() { + blockTransition(element, false); + if (!hasCompleteAnimation) { + return close(); + } + + forEach(temporaryStyles, function(entry) { + var key = entry[0]; + var value = entry[1]; + node.style[camelCase(key)] = value; + }); + + applyClasses(element, options); + + var timings = computeTimings(element); + if (timings.duration === 0) { + return close(); + } + + var moreStyles = []; + + if (options.easing) { + if (timings.transitionDuration) { + moreStyles.push([PREFIX + 'transition-timing-function', options.easing]); + } + if (timings.animationDuration) { + moreStyles.push([PREFIX + 'animation-timing-function', options.easing]); + } + } + + if (options.delay && timings.animationDelay) { + moreStyles.push([PREFIX + 'animation-delay', options.delay + 's']); + } + + if (options.duration && timings.animationDuration) { + moreStyles.push([PREFIX + 'animation-duration', options.duration + 's']); + } + + forEach(moreStyles, function(entry) { + var key = entry[0]; + var value = entry[1]; + node.style[camelCase(key)] = value; + temporaryStyles.push(entry); + }); + + var maxDelay = timings.delay; + var maxDelayTime = maxDelay * 1000; + var maxDuration = timings.duration; + var maxDurationTime = maxDuration * 1000; + var startTime = Date.now(); + + events = []; + if (timings.transitionDuration) { + events.push(TRANSITION_EVENTS); + } + if (timings.animationDuration) { + events.push(ANIMATION_EVENTS); + } + events = events.join(' '); + eventFn = function(event) { + event.stopPropagation(); + var ev = event.originalEvent || event; + var timeStamp = ev.timeStamp || Date.now(); + var elapsedTime = parseFloat(ev.elapsedTime.toFixed(3)); + if (Math.max(timeStamp - startTime, 0) >= maxDelayTime && elapsedTime >= maxDuration) { + close(); + } + }; + element.on(events, eventFn); + + applyAnimationToStyles(element, options); + + $timeout(close, maxDelayTime + maxDurationTime * 1.5, false); + }); + + return runner; + + function close() { + if (animationClosed) return; + animationClosed = true; + + if (events && eventFn) { + element.off(events, eventFn); + } + applyClasses(element, options); + applyAnimationStyles(element, options); + forEach(temporaryStyles, function(entry) { + node.style[camelCase(entry[0])] = ''; + }); + runner.complete(true); + return runner; + } + } + } + } + + function applyClasses(element, options) { + if (options.addClass) { + $$jqLite.addClass(element, options.addClass); + options.addClass = null; + } + if (options.removeClass) { + $$jqLite.removeClass(element, options.removeClass); + options.removeClass = null; + } + } + + function computeTimings(element) { + var node = getDomNode(element); + var cs = $window.getComputedStyle(node) + var tdr = parseMaxTime(cs[prop('transitionDuration')]); + var adr = parseMaxTime(cs[prop('animationDuration')]); + var tdy = parseMaxTime(cs[prop('transitionDelay')]); + var ady = parseMaxTime(cs[prop('animationDelay')]); + + adr *= (parseInt(cs[prop('animationIterationCount')], 10) || 1); + var duration = Math.max(adr, tdr); + var delay = Math.max(ady, tdy); + + return { + duration: duration, + delay: delay, + animationDuration: adr, + transitionDuration: tdr, + animationDelay: ady, + transitionDelay: tdy + }; + + function prop(key) { + return WEBKIT ? 'Webkit' + key.charAt(0).toUpperCase() + key.substr(1) + : key; + } + } + + function parseMaxTime(str) { + var maxValue = 0; + var values = (str || "").split(/\s*,\s*/); + forEach(values, function(value) { + // it's always safe to consider only second values and omit `ms` values since + // getComputedStyle will always handle the conversion for us + if (value.charAt(value.length - 1) == 's') { + value = value.substring(0, value.length - 1); + } + value = parseFloat(value) || 0; + maxValue = maxValue ? Math.max(value, maxValue) : value; + }); + return maxValue; + } + + var cancelLastRAFRequest; + var rafWaitQueue = []; + function waitUntilQuiet(callback) { + if (cancelLastRAFRequest) { + cancelLastRAFRequest(); //cancels the request + } + rafWaitQueue.push(callback); + cancelLastRAFRequest = $$rAF(function() { + cancelLastRAFRequest = null; + + // DO NOT REMOVE THIS LINE OR REFACTOR OUT THE `pageWidth` variable. + // PLEASE EXAMINE THE `$$forceReflow` service to understand why. + var pageWidth = $$forceReflow(); + + // we use a for loop to ensure that if the queue is changed + // during this looping then it will consider new requests + for (var i = 0; i < rafWaitQueue.length; i++) { + rafWaitQueue[i](pageWidth); + } + rafWaitQueue.length = 0; + }); + } + + function applyAnimationStyles(element, options) { + applyAnimationFromStyles(element, options); + applyAnimationToStyles(element, options); + } + + function applyAnimationFromStyles(element, options) { + if (options.from) { + element.css(options.from); + options.from = null; + } + } + + function applyAnimationToStyles(element, options) { + if (options.to) { + element.css(options.to); + options.to = null; + } + } + + function getDomNode(element) { + for (var i = 0; i < element.length; i++) { + if (element[i].nodeType === 1) return element[i]; + } + } + + function blockTransition(element, bool) { + var node = getDomNode(element); + var key = camelCase(PREFIX + 'transition-delay'); + node.style[key] = bool ? '-9999s' : ''; + } + + return init; + }]); + + /** + * Older browsers [FF31] expect camelCase + * property keys. + * e.g. + * animation-duration --> animationDuration + */ + function camelCase(str) { + return str.replace(/-[a-z]/g, function(str) { + return str.charAt(1).toUpperCase(); + }); + } + +})(); + +} + +})(); +(function(){ +"use strict"; + +/** + * @ngdoc module + * @name material.components.autocomplete + */ +/* + * @see js folder for autocomplete implementation + */ +angular.module('material.components.autocomplete', [ + 'material.core', + 'material.components.icon', + 'material.components.virtualRepeat' +]); + +})(); +(function(){ +"use strict"; + +/* + * @ngdoc module + * @name material.components.backdrop + * @description Backdrop + */ + +/** + * @ngdoc directive + * @name mdBackdrop + * @module material.components.backdrop + * + * @restrict E + * + * @description + * `` is a backdrop element used by other components, such as dialog and bottom sheet.
+ * Apply class `opaque` to make the backdrop use the theme backdrop color.
+ *
+ */
+
+angular
+ .module('material.components.backdrop', ['material.core'])
+ .directive('mdBackdrop', ["$mdTheming", "$mdUtil", "$animate", "$rootElement", "$window", "$log", "$$rAF", "$document", function BackdropDirective($mdTheming, $mdUtil, $animate, $rootElement, $window, $log, $$rAF, $document) {
+ var ERROR_CSS_POSITION = ' may not work properly in a scrolled, static-positioned parent container.';
+
+ return {
+ restrict: 'E',
+ link: postLink
+ };
+
+ function postLink(scope, element, attrs) {
+ // backdrop may be outside the $rootElement, tell ngAnimate to animate regardless
+ if ($animate.pin) $animate.pin(element, $rootElement);
+
+ var bodyStyles;
+
+ $$rAF(function() {
+ // If body scrolling has been disabled using mdUtil.disableBodyScroll(),
+ // adjust the 'backdrop' height to account for the fixed 'body' top offset.
+ // Note that this can be pretty expensive and is better done inside the $$rAF.
+ bodyStyles = $window.getComputedStyle($document[0].body);
+
+ if (bodyStyles.position === 'fixed') {
+ var resizeHandler = $mdUtil.debounce(function(){
+ bodyStyles = $window.getComputedStyle($document[0].body);
+ resize();
+ }, 60, null, false);
+
+ resize();
+ angular.element($window).on('resize', resizeHandler);
+
+ scope.$on('$destroy', function() {
+ angular.element($window).off('resize', resizeHandler);
+ });
+ }
+
+ // Often $animate.enter() is used to append the backDrop element
+ // so let's wait until $animate is done...
+ var parent = element.parent();
+
+ if (parent.length) {
+ if (parent[0].nodeName === 'BODY') {
+ element.css('position', 'fixed');
+ }
+
+ var styles = $window.getComputedStyle(parent[0]);
+
+ if (styles.position === 'static') {
+ // backdrop uses position:absolute and will not work properly with parent position:static (default)
+ $log.warn(ERROR_CSS_POSITION);
+ }
+
+ // Only inherit the parent if the backdrop has a parent.
+ $mdTheming.inherit(element, parent);
+ }
+ });
+
+ function resize() {
+ var viewportHeight = parseInt(bodyStyles.height, 10) + Math.abs(parseInt(bodyStyles.top, 10));
+ element.css('height', viewportHeight + 'px');
+ }
+ }
+
+ }]);
+
+})();
+(function(){
+"use strict";
+
+/**
+ * @ngdoc module
+ * @name material.components.bottomSheet
+ * @description
+ * BottomSheet
+ */
+MdBottomSheetDirective.$inject = ["$mdBottomSheet"];
+MdBottomSheetProvider.$inject = ["$$interimElementProvider"];
+angular
+ .module('material.components.bottomSheet', [
+ 'material.core',
+ 'material.components.backdrop'
+ ])
+ .directive('mdBottomSheet', MdBottomSheetDirective)
+ .provider('$mdBottomSheet', MdBottomSheetProvider);
+
+/* @ngInject */
+function MdBottomSheetDirective($mdBottomSheet) {
+ return {
+ restrict: 'E',
+ link : function postLink(scope, element) {
+ element.addClass('_md'); // private md component indicator for styling
+
+ // When navigation force destroys an interimElement, then
+ // listen and $destroy() that interim instance...
+ scope.$on('$destroy', function() {
+ $mdBottomSheet.destroy();
+ });
+ }
+ };
+}
+
+
+/**
+ * @ngdoc service
+ * @name $mdBottomSheet
+ * @module material.components.bottomSheet
+ *
+ * @description
+ * `$mdBottomSheet` opens a bottom sheet over the app and provides a simple promise API.
+ *
+ * ## Restrictions
+ *
+ * - The bottom sheet's template must have an outer `` element.
+ * - Add the `md-grid` class to the bottom sheet for a grid layout.
+ * - Add the `md-list` class to the bottom sheet for a list layout.
+ *
+ * @usage
+ *
+ *
+ *
+ * var app = angular.module('app', ['ngMaterial']);
+ * app.controller('MyController', function($scope, $mdBottomSheet) {
+ * $scope.openBottomSheet = function() {
+ * $mdBottomSheet.show({
+ * template: 'Hello! '
+ * });
+ * };
+ * });
+ *
+ */
+
+ /**
+ * @ngdoc method
+ * @name $mdBottomSheet#show
+ *
+ * @description
+ * Show a bottom sheet with the specified options.
+ *
+ * @param {object} options An options object, with the following properties:
+ *
+ * - `templateUrl` - `{string=}`: The url of an html template file that will
+ * be used as the content of the bottom sheet. Restrictions: the template must
+ * have an outer `md-bottom-sheet` element.
+ * - `template` - `{string=}`: Same as templateUrl, except this is an actual
+ * template string.
+ * - `scope` - `{object=}`: the scope to link the template / controller to. If none is specified, it will create a new child scope.
+ * This scope will be destroyed when the bottom sheet is removed unless `preserveScope` is set to true.
+ * - `preserveScope` - `{boolean=}`: whether to preserve the scope when the element is removed. Default is false
+ * - `controller` - `{string=}`: The controller to associate with this bottom sheet.
+ * - `locals` - `{string=}`: An object containing key/value pairs. The keys will
+ * be used as names of values to inject into the controller. For example,
+ * `locals: {three: 3}` would inject `three` into the controller with the value
+ * of 3.
+ * - `clickOutsideToClose` - `{boolean=}`: Whether the user can click outside the bottom sheet to
+ * close it. Default true.
+ * - `disableBackdrop` - `{boolean=}`: When set to true, the bottomsheet will not show a backdrop.
+ * - `escapeToClose` - `{boolean=}`: Whether the user can press escape to close the bottom sheet.
+ * Default true.
+ * - `resolve` - `{object=}`: Similar to locals, except it takes promises as values
+ * and the bottom sheet will not open until the promises resolve.
+ * - `controllerAs` - `{string=}`: An alias to assign the controller to on the scope.
+ * - `parent` - `{element=}`: The element to append the bottom sheet to. The `parent` may be a `function`, `string`,
+ * `object`, or null. Defaults to appending to the body of the root element (or the root element) of the application.
+ * e.g. angular.element(document.getElementById('content')) or "#content"
+ * - `disableParentScroll` - `{boolean=}`: Whether to disable scrolling while the bottom sheet is open.
+ * Default true.
+ *
+ * @returns {promise} A promise that can be resolved with `$mdBottomSheet.hide()` or
+ * rejected with `$mdBottomSheet.cancel()`.
+ */
+
+/**
+ * @ngdoc method
+ * @name $mdBottomSheet#hide
+ *
+ * @description
+ * Hide the existing bottom sheet and resolve the promise returned from
+ * `$mdBottomSheet.show()`. This call will close the most recently opened/current bottomsheet (if any).
+ *
+ * @param {*=} response An argument for the resolved promise.
+ *
+ */
+
+/**
+ * @ngdoc method
+ * @name $mdBottomSheet#cancel
+ *
+ * @description
+ * Hide the existing bottom sheet and reject the promise returned from
+ * `$mdBottomSheet.show()`.
+ *
+ * @param {*=} response An argument for the rejected promise.
+ *
+ */
+
+function MdBottomSheetProvider($$interimElementProvider) {
+ // how fast we need to flick down to close the sheet, pixels/ms
+ bottomSheetDefaults.$inject = ["$animate", "$mdConstant", "$mdUtil", "$mdTheming", "$mdBottomSheet", "$rootElement", "$mdGesture", "$log"];
+ var CLOSING_VELOCITY = 0.5;
+ var PADDING = 80; // same as css
+
+ return $$interimElementProvider('$mdBottomSheet')
+ .setDefaults({
+ methods: ['disableParentScroll', 'escapeToClose', 'clickOutsideToClose'],
+ options: bottomSheetDefaults
+ });
+
+ /* @ngInject */
+ function bottomSheetDefaults($animate, $mdConstant, $mdUtil, $mdTheming, $mdBottomSheet, $rootElement,
+ $mdGesture, $log) {
+ var backdrop;
+
+ return {
+ themable: true,
+ onShow: onShow,
+ onRemove: onRemove,
+ disableBackdrop: false,
+ escapeToClose: true,
+ clickOutsideToClose: true,
+ disableParentScroll: true
+ };
+
+
+ function onShow(scope, element, options, controller) {
+
+ element = $mdUtil.extractElementByName(element, 'md-bottom-sheet');
+
+ // prevent tab focus or click focus on the bottom-sheet container
+ element.attr('tabindex',"-1");
+
+ // Once the md-bottom-sheet has `ng-cloak` applied on his template the opening animation will not work properly.
+ // This is a very common problem, so we have to notify the developer about this.
+ if (element.hasClass('ng-cloak')) {
+ var message = '$mdBottomSheet: using `` will affect the bottom-sheet opening animations.';
+ $log.warn( message, element[0] );
+ }
+
+ if (!options.disableBackdrop) {
+ // Add a backdrop that will close on click
+ backdrop = $mdUtil.createBackdrop(scope, "md-bottom-sheet-backdrop md-opaque");
+
+ // Prevent mouse focus on backdrop; ONLY programatic focus allowed.
+ // This allows clicks on backdrop to propogate to the $rootElement and
+ // ESC key events to be detected properly.
+
+ backdrop[0].tabIndex = -1;
+
+ if (options.clickOutsideToClose) {
+ backdrop.on('click', function() {
+ $mdUtil.nextTick($mdBottomSheet.cancel,true);
+ });
+ }
+
+ $mdTheming.inherit(backdrop, options.parent);
+
+ $animate.enter(backdrop, options.parent, null);
+ }
+
+ var bottomSheet = new BottomSheet(element, options.parent);
+ options.bottomSheet = bottomSheet;
+
+ $mdTheming.inherit(bottomSheet.element, options.parent);
+
+ if (options.disableParentScroll) {
+ options.restoreScroll = $mdUtil.disableScrollAround(bottomSheet.element, options.parent);
+ }
+
+ return $animate.enter(bottomSheet.element, options.parent, backdrop)
+ .then(function() {
+ var focusable = $mdUtil.findFocusTarget(element) || angular.element(
+ element[0].querySelector('button') ||
+ element[0].querySelector('a') ||
+ element[0].querySelector($mdUtil.prefixer('ng-click', true))
+ ) || backdrop;
+
+ if (options.escapeToClose) {
+ options.rootElementKeyupCallback = function(e) {
+ if (e.keyCode === $mdConstant.KEY_CODE.ESCAPE) {
+ $mdUtil.nextTick($mdBottomSheet.cancel,true);
+ }
+ };
+
+ $rootElement.on('keyup', options.rootElementKeyupCallback);
+ focusable && focusable.focus();
+ }
+ });
+
+ }
+
+ function onRemove(scope, element, options) {
+
+ var bottomSheet = options.bottomSheet;
+
+ if (!options.disableBackdrop) $animate.leave(backdrop);
+ return $animate.leave(bottomSheet.element).then(function() {
+ if (options.disableParentScroll) {
+ options.restoreScroll();
+ delete options.restoreScroll;
+ }
+
+ bottomSheet.cleanup();
+ });
+ }
+
+ /**
+ * BottomSheet class to apply bottom-sheet behavior to an element
+ */
+ function BottomSheet(element, parent) {
+ var deregister = $mdGesture.register(parent, 'drag', { horizontal: false });
+ parent.on('$md.dragstart', onDragStart)
+ .on('$md.drag', onDrag)
+ .on('$md.dragend', onDragEnd);
+
+ return {
+ element: element,
+ cleanup: function cleanup() {
+ deregister();
+ parent.off('$md.dragstart', onDragStart);
+ parent.off('$md.drag', onDrag);
+ parent.off('$md.dragend', onDragEnd);
+ }
+ };
+
+ function onDragStart(ev) {
+ // Disable transitions on transform so that it feels fast
+ element.css($mdConstant.CSS.TRANSITION_DURATION, '0ms');
+ }
+
+ function onDrag(ev) {
+ var transform = ev.pointer.distanceY;
+ if (transform < 5) {
+ // Slow down drag when trying to drag up, and stop after PADDING
+ transform = Math.max(-PADDING, transform / 2);
+ }
+ element.css($mdConstant.CSS.TRANSFORM, 'translate3d(0,' + (PADDING + transform) + 'px,0)');
+ }
+
+ function onDragEnd(ev) {
+ if (ev.pointer.distanceY > 0 &&
+ (ev.pointer.distanceY > 20 || Math.abs(ev.pointer.velocityY) > CLOSING_VELOCITY)) {
+ var distanceRemaining = element.prop('offsetHeight') - ev.pointer.distanceY;
+ var transitionDuration = Math.min(distanceRemaining / ev.pointer.velocityY * 0.75, 500);
+ element.css($mdConstant.CSS.TRANSITION_DURATION, transitionDuration + 'ms');
+ $mdUtil.nextTick($mdBottomSheet.cancel,true);
+ } else {
+ element.css($mdConstant.CSS.TRANSITION_DURATION, '');
+ element.css($mdConstant.CSS.TRANSFORM, '');
+ }
+ }
+ }
+
+ }
+
+}
+
+})();
+(function(){
+"use strict";
+
+/**
+ * @ngdoc module
+ * @name material.components.button
+ * @description
+ *
+ * Button
+ */
+MdButtonDirective.$inject = ["$mdButtonInkRipple", "$mdTheming", "$mdAria", "$timeout"];
+MdAnchorDirective.$inject = ["$mdTheming"];
+angular
+ .module('material.components.button', [ 'material.core' ])
+ .directive('mdButton', MdButtonDirective)
+ .directive('a', MdAnchorDirective);
+
+
+/**
+ * @private
+ * @restrict E
+ *
+ * @description
+ * `a` is an anchor directive used to inherit theme colors for md-primary, md-accent, etc.
+ *
+ * @usage
+ *
+ *
+ *
+ *
+ *
+ *
+ */
+function MdAnchorDirective($mdTheming) {
+ return {
+ restrict : 'E',
+ link : function postLink(scope, element) {
+ // Make sure to inherit theme so stand-alone anchors
+ // support theme colors for md-primary, md-accent, etc.
+ $mdTheming(element);
+ }
+ };
+}
+
+
+/**
+ * @ngdoc directive
+ * @name mdButton
+ * @module material.components.button
+ *
+ * @restrict E
+ *
+ * @description
+ * `` is a button directive with optional ink ripples (default enabled).
+ *
+ * If you supply a `href` or `ng-href` attribute, it will become an `` element. Otherwise, it
+ * will become a `
+ * This can be done by using the following markup. + * + *
+ * If you have an application, which changes its theme on runtime, you have to enable theme watching. + * + *
+ * You are able to register your own styles by using the following markup. + * + *
+ * `theme` - A defined theme via `$mdThemeProvider` to use the palettes from. Default is `default` theme.
+ * `palette` - Can be any one of the basic material design palettes, extended defined palettes and 'primary', + * 'accent', 'background' and 'warn'. Default is `primary`.
+ * `hue` - The hue from the selected palette. Default is `800`
+ * + *
+ * `theme` - A defined theme via `$mdThemeProvider` to use the palettes from. Default is `default` theme.
+ * `palette` - Can be any one of the basic material design palettes, extended defined palettes and 'primary', + * 'accent', 'background' and 'warn'. Default is `primary`.
+ * `hue` - The hue from the selected palette. Default is `800`
+ * @returns {Function} remove function of the browser color + */ + +/* Some Example Valid Theming Expressions + * ======================================= + * + * Intention group expansion: (valid for primary, accent, warn, background) + * + * {{primary-100}} - grab shade 100 from the primary palette + * {{primary-100-0.7}} - grab shade 100, apply opacity of 0.7 + * {{primary-100-contrast}} - grab shade 100's contrast color + * {{primary-hue-1}} - grab the shade assigned to hue-1 from the primary palette + * {{primary-hue-1-0.7}} - apply 0.7 opacity to primary-hue-1 + * {{primary-color}} - Generates .md-hue-1, .md-hue-2, .md-hue-3 with configured shades set for each hue + * {{primary-color-0.7}} - Apply 0.7 opacity to each of the above rules + * {{primary-contrast}} - Generates .md-hue-1, .md-hue-2, .md-hue-3 with configured contrast (ie. text) color shades set for each hue + * {{primary-contrast-0.7}} - Apply 0.7 opacity to each of the above rules + * + * Foreground expansion: Applies rgba to black/white foreground text + * + * {{foreground-1}} - used for primary text + * {{foreground-2}} - used for secondary text/divider + * {{foreground-3}} - used for disabled text + * {{foreground-4}} - used for dividers + * + */ + +// In memory generated CSS rules; registered by theme.name +var GENERATED = { }; + +// In memory storage of defined themes and color palettes (both loaded by CSS, and user specified) +var PALETTES; + +// Text Colors on light and dark backgrounds +// @see https://www.google.com/design/spec/style/color.html#color-text-background-colors +var DARK_FOREGROUND = { + name: 'dark', + '1': 'rgba(0,0,0,0.87)', + '2': 'rgba(0,0,0,0.54)', + '3': 'rgba(0,0,0,0.38)', + '4': 'rgba(0,0,0,0.12)' +}; +var LIGHT_FOREGROUND = { + name: 'light', + '1': 'rgba(255,255,255,1.0)', + '2': 'rgba(255,255,255,0.7)', + '3': 'rgba(255,255,255,0.5)', + '4': 'rgba(255,255,255,0.12)' +}; + +var DARK_SHADOW = '1px 1px 0px rgba(0,0,0,0.4), -1px -1px 0px rgba(0,0,0,0.4)'; +var LIGHT_SHADOW = ''; + +var DARK_CONTRAST_COLOR = colorToRgbaArray('rgba(0,0,0,0.87)'); +var LIGHT_CONTRAST_COLOR = colorToRgbaArray('rgba(255,255,255,0.87)'); +var STRONG_LIGHT_CONTRAST_COLOR = colorToRgbaArray('rgb(255,255,255)'); + +var THEME_COLOR_TYPES = ['primary', 'accent', 'warn', 'background']; +var DEFAULT_COLOR_TYPE = 'primary'; + +// A color in a theme will use these hues by default, if not specified by user. +var LIGHT_DEFAULT_HUES = { + 'accent': { + 'default': 'A200', + 'hue-1': 'A100', + 'hue-2': 'A400', + 'hue-3': 'A700' + }, + 'background': { + 'default': '50', + 'hue-1': 'A100', + 'hue-2': '100', + 'hue-3': '300' + } +}; + +var DARK_DEFAULT_HUES = { + 'background': { + 'default': 'A400', + 'hue-1': '800', + 'hue-2': '900', + 'hue-3': 'A200' + } +}; +THEME_COLOR_TYPES.forEach(function(colorType) { + // Color types with unspecified default hues will use these default hue values + var defaultDefaultHues = { + 'default': '500', + 'hue-1': '300', + 'hue-2': '800', + 'hue-3': 'A100' + }; + if (!LIGHT_DEFAULT_HUES[colorType]) LIGHT_DEFAULT_HUES[colorType] = defaultDefaultHues; + if (!DARK_DEFAULT_HUES[colorType]) DARK_DEFAULT_HUES[colorType] = defaultDefaultHues; +}); + +var VALID_HUE_VALUES = [ + '50', '100', '200', '300', '400', '500', '600', + '700', '800', '900', 'A100', 'A200', 'A400', 'A700' +]; + +var themeConfig = { + disableTheming : false, // Generate our themes at run time; also disable stylesheet DOM injection + generateOnDemand : false, // Whether or not themes are to be generated on-demand (vs. eagerly). + registeredStyles : [], // Custom styles registered to be used in the theming of custom components. + nonce : null // Nonce to be added as an attribute to the generated themes style tags. +}; + +/** + * + */ +function ThemingProvider($mdColorPalette, $$mdMetaProvider) { + ThemingService.$inject = ["$rootScope", "$log"]; + PALETTES = { }; + var THEMES = { }; + + var themingProvider; + + var alwaysWatchTheme = false; + var defaultTheme = 'default'; + + // Load JS Defined Palettes + angular.extend(PALETTES, $mdColorPalette); + + // Default theme defined in core.js + + /** + * Adds `theme-color` and `msapplication-navbutton-color` meta tags with the color parameter + * @param {string} color Hex value of the wanted browser color + * @returns {Function} Remove function of the meta tags + */ + var setBrowserColor = function (color) { + // Chrome, Firefox OS and Opera + var removeChrome = $$mdMetaProvider.setMeta('theme-color', color); + // Windows Phone + var removeWindows = $$mdMetaProvider.setMeta('msapplication-navbutton-color', color); + + return function () { + removeChrome(); + removeWindows(); + } + }; + + /** + * Enables browser header coloring + * for more info please visit: + * https://developers.google.com/web/fundamentals/design-and-ui/browser-customization/theme-color + * + * The default color is `800` from `primary` palette of the `default` theme + * + * options are: + * `theme` - A defined theme via `$mdThemeProvider` to use the palettes from. Default is `default` theme + * `palette` - Can be any one of the basic material design palettes, extended defined palettes and 'primary', + * 'accent', 'background' and 'warn'. Default is `primary` + * `hue` - The hue from the selected palette. Default is `800` + * + * @param {Object=} options Options object for the browser color + * @returns {Function} remove function of the browser color + */ + var enableBrowserColor = function (options) { + options = angular.isObject(options) ? options : {}; + + var theme = options.theme || 'default'; + var hue = options.hue || '800'; + + var palette = PALETTES[options.palette] || + PALETTES[THEMES[theme].colors[options.palette || 'primary'].name]; + + var color = angular.isObject(palette[hue]) ? palette[hue].hex : palette[hue]; + + return setBrowserColor(color); + }; + + return themingProvider = { + definePalette: definePalette, + extendPalette: extendPalette, + theme: registerTheme, + + /** + * return a read-only clone of the current theme configuration + */ + configuration : function() { + return angular.extend( { }, themeConfig, { + defaultTheme : defaultTheme, + alwaysWatchTheme : alwaysWatchTheme, + registeredStyles : [].concat(themeConfig.registeredStyles) + }); + }, + + /** + * Easy way to disable theming without having to use + * `.constant("$MD_THEME_CSS","");` This disables + * all dynamic theme style sheet generations and injections... + */ + disableTheming: function(isDisabled) { + themeConfig.disableTheming = angular.isUndefined(isDisabled) || !!isDisabled; + }, + + registerStyles: function(styles) { + themeConfig.registeredStyles.push(styles); + }, + + setNonce: function(nonceValue) { + themeConfig.nonce = nonceValue; + }, + + generateThemesOnDemand: function(onDemand) { + themeConfig.generateOnDemand = onDemand; + }, + + setDefaultTheme: function(theme) { + defaultTheme = theme; + }, + + alwaysWatchTheme: function(alwaysWatch) { + alwaysWatchTheme = alwaysWatch; + }, + + enableBrowserColor: enableBrowserColor, + + $get: ThemingService, + _LIGHT_DEFAULT_HUES: LIGHT_DEFAULT_HUES, + _DARK_DEFAULT_HUES: DARK_DEFAULT_HUES, + _PALETTES: PALETTES, + _THEMES: THEMES, + _parseRules: parseRules, + _rgba: rgba + }; + + // Example: $mdThemingProvider.definePalette('neonRed', { 50: '#f5fafa', ... }); + function definePalette(name, map) { + map = map || {}; + PALETTES[name] = checkPaletteValid(name, map); + return themingProvider; + } + + // Returns an new object which is a copy of a given palette `name` with variables from + // `map` overwritten + // Example: var neonRedMap = $mdThemingProvider.extendPalette('red', { 50: '#f5fafafa' }); + function extendPalette(name, map) { + return checkPaletteValid(name, angular.extend({}, PALETTES[name] || {}, map) ); + } + + // Make sure that palette has all required hues + function checkPaletteValid(name, map) { + var missingColors = VALID_HUE_VALUES.filter(function(field) { + return !map[field]; + }); + if (missingColors.length) { + throw new Error("Missing colors %1 in palette %2!" + .replace('%1', missingColors.join(', ')) + .replace('%2', name)); + } + + return map; + } + + // Register a theme (which is a collection of color palettes to use with various states + // ie. warn, accent, primary ) + // Optionally inherit from an existing theme + // $mdThemingProvider.theme('custom-theme').primaryPalette('red'); + function registerTheme(name, inheritFrom) { + if (THEMES[name]) return THEMES[name]; + + inheritFrom = inheritFrom || 'default'; + + var parentTheme = typeof inheritFrom === 'string' ? THEMES[inheritFrom] : inheritFrom; + var theme = new Theme(name); + + if (parentTheme) { + angular.forEach(parentTheme.colors, function(color, colorType) { + theme.colors[colorType] = { + name: color.name, + // Make sure a COPY of the hues is given to the child color, + // not the same reference. + hues: angular.extend({}, color.hues) + }; + }); + } + THEMES[name] = theme; + + return theme; + } + + function Theme(name) { + var self = this; + self.name = name; + self.colors = {}; + + self.dark = setDark; + setDark(false); + + function setDark(isDark) { + isDark = arguments.length === 0 ? true : !!isDark; + + // If no change, abort + if (isDark === self.isDark) return; + + self.isDark = isDark; + + self.foregroundPalette = self.isDark ? LIGHT_FOREGROUND : DARK_FOREGROUND; + self.foregroundShadow = self.isDark ? DARK_SHADOW : LIGHT_SHADOW; + + // Light and dark themes have different default hues. + // Go through each existing color type for this theme, and for every + // hue value that is still the default hue value from the previous light/dark setting, + // set it to the default hue value from the new light/dark setting. + var newDefaultHues = self.isDark ? DARK_DEFAULT_HUES : LIGHT_DEFAULT_HUES; + var oldDefaultHues = self.isDark ? LIGHT_DEFAULT_HUES : DARK_DEFAULT_HUES; + angular.forEach(newDefaultHues, function(newDefaults, colorType) { + var color = self.colors[colorType]; + var oldDefaults = oldDefaultHues[colorType]; + if (color) { + for (var hueName in color.hues) { + if (color.hues[hueName] === oldDefaults[hueName]) { + color.hues[hueName] = newDefaults[hueName]; + } + } + } + }); + + return self; + } + + THEME_COLOR_TYPES.forEach(function(colorType) { + var defaultHues = (self.isDark ? DARK_DEFAULT_HUES : LIGHT_DEFAULT_HUES)[colorType]; + self[colorType + 'Palette'] = function setPaletteType(paletteName, hues) { + var color = self.colors[colorType] = { + name: paletteName, + hues: angular.extend({}, defaultHues, hues) + }; + + Object.keys(color.hues).forEach(function(name) { + if (!defaultHues[name]) { + throw new Error("Invalid hue name '%1' in theme %2's %3 color %4. Available hue names: %4" + .replace('%1', name) + .replace('%2', self.name) + .replace('%3', paletteName) + .replace('%4', Object.keys(defaultHues).join(', ')) + ); + } + }); + Object.keys(color.hues).map(function(key) { + return color.hues[key]; + }).forEach(function(hueValue) { + if (VALID_HUE_VALUES.indexOf(hueValue) == -1) { + throw new Error("Invalid hue value '%1' in theme %2's %3 color %4. Available hue values: %5" + .replace('%1', hueValue) + .replace('%2', self.name) + .replace('%3', colorType) + .replace('%4', paletteName) + .replace('%5', VALID_HUE_VALUES.join(', ')) + ); + } + }); + return self; + }; + + self[colorType + 'Color'] = function() { + var args = Array.prototype.slice.call(arguments); + console.warn('$mdThemingProviderTheme.' + colorType + 'Color() has been deprecated. ' + + 'Use $mdThemingProviderTheme.' + colorType + 'Palette() instead.'); + return self[colorType + 'Palette'].apply(self, args); + }; + }); + } + + /** + * @ngdoc service + * @name $mdTheming + * + * @description + * + * Service that makes an element apply theming related classes to itself. + * + * ```js + * app.directive('myFancyDirective', function($mdTheming) { + * return { + * restrict: 'e', + * link: function(scope, el, attrs) { + * $mdTheming(el); + * } + * }; + * }); + * ``` + * @param {el=} element to apply theming to + */ + /* @ngInject */ + function ThemingService($rootScope, $log) { + // Allow us to be invoked via a linking function signature. + var applyTheme = function (scope, el) { + if (el === undefined) { el = scope; scope = undefined; } + if (scope === undefined) { scope = $rootScope; } + applyTheme.inherit(el, el); + }; + + applyTheme.THEMES = angular.extend({}, THEMES); + applyTheme.PALETTES = angular.extend({}, PALETTES); + applyTheme.inherit = inheritTheme; + applyTheme.registered = registered; + applyTheme.defaultTheme = function() { return defaultTheme; }; + applyTheme.generateTheme = function(name) { generateTheme(THEMES[name], name, themeConfig.nonce); }; + applyTheme.setBrowserColor = enableBrowserColor; + + return applyTheme; + + /** + * Determine is specified theme name is a valid, registered theme + */ + function registered(themeName) { + if (themeName === undefined || themeName === '') return true; + return applyTheme.THEMES[themeName] !== undefined; + } + + /** + * Get theme name for the element, then update with Theme CSS class + */ + function inheritTheme (el, parent) { + var ctrl = parent.controller('mdTheme'); + var attrThemeValue = el.attr('md-theme-watch'); + var watchTheme = (alwaysWatchTheme || angular.isDefined(attrThemeValue)) && attrThemeValue != 'false'; + + updateThemeClass(lookupThemeName()); + + if ((alwaysWatchTheme && !registerChangeCallback()) || (!alwaysWatchTheme && watchTheme)) { + el.on('$destroy', $rootScope.$watch(lookupThemeName, updateThemeClass) ); + } + + /** + * Find the theme name from the parent controller or element data + */ + function lookupThemeName() { + // As a few components (dialog) add their controllers later, we should also watch for a controller init. + ctrl = parent.controller('mdTheme') || el.data('$mdThemeController'); + return ctrl && ctrl.$mdTheme || (defaultTheme == 'default' ? '' : defaultTheme); + } + + /** + * Remove old theme class and apply a new one + * NOTE: if not a valid theme name, then the current name is not changed + */ + function updateThemeClass(theme) { + if (!theme) return; + if (!registered(theme)) { + $log.warn('Attempted to use unregistered theme \'' + theme + '\'. ' + + 'Register it with $mdThemingProvider.theme().'); + } + + var oldTheme = el.data('$mdThemeName'); + if (oldTheme) el.removeClass('md-' + oldTheme +'-theme'); + el.addClass('md-' + theme + '-theme'); + el.data('$mdThemeName', theme); + if (ctrl) { + el.data('$mdThemeController', ctrl); + } + } + + /** + * Register change callback with parent mdTheme controller + */ + function registerChangeCallback() { + var parentController = parent.controller('mdTheme'); + if (!parentController) return false; + el.on('$destroy', parentController.registerChanges( function() { + updateThemeClass(lookupThemeName()); + })); + return true; + } + } + + } +} + +function ThemingDirective($mdTheming, $interpolate, $log) { + return { + priority: 100, + link: { + pre: function(scope, el, attrs) { + var registeredCallbacks = []; + var ctrl = { + registerChanges: function (cb, context) { + if (context) { + cb = angular.bind(context, cb); + } + + registeredCallbacks.push(cb); + + return function () { + var index = registeredCallbacks.indexOf(cb); + + if (index > -1) { + registeredCallbacks.splice(index, 1); + } + }; + }, + $setTheme: function (theme) { + if (!$mdTheming.registered(theme)) { + $log.warn('attempted to use unregistered theme \'' + theme + '\''); + } + ctrl.$mdTheme = theme; + + registeredCallbacks.forEach(function (cb) { + cb(); + }); + } + }; + el.data('$mdThemeController', ctrl); + ctrl.$setTheme($interpolate(attrs.mdTheme)(scope)); + attrs.$observe('mdTheme', ctrl.$setTheme); + } + } + }; +} + +/** + * Special directive that will disable ALL runtime Theme style generation and DOM injection + * + * + * + * + * + * ... + * + * + * Note: Using md-themes-css directive requires the developer to load external + * theme stylesheets; e.g. custom themes from Material-Tools: + * + * `angular-material.themes.css` + * + * Another option is to use the ThemingProvider to configure and disable the attribute + * conversions; this would obviate the use of the `md-themes-css` directive + * + */ +function disableThemesDirective() { + themeConfig.disableTheming = true; + + // Return a 1x-only, first-match attribute directive + return { + restrict : 'A', + priority : '900' + }; +} + +function ThemableDirective($mdTheming) { + return $mdTheming; +} + +function parseRules(theme, colorType, rules) { + checkValidPalette(theme, colorType); + + rules = rules.replace(/THEME_NAME/g, theme.name); + var generatedRules = []; + var color = theme.colors[colorType]; + + var themeNameRegex = new RegExp('\\.md-' + theme.name + '-theme', 'g'); + // Matches '{{ primary-color }}', etc + var hueRegex = new RegExp('(\'|")?{{\\s*(' + colorType + ')-(color|contrast)-?(\\d\\.?\\d*)?\\s*}}(\"|\')?','g'); + var simpleVariableRegex = /'?"?\{\{\s*([a-zA-Z]+)-(A?\d+|hue\-[0-3]|shadow|default)-?(\d\.?\d*)?(contrast)?\s*\}\}'?"?/g; + var palette = PALETTES[color.name]; + + // find and replace simple variables where we use a specific hue, not an entire palette + // eg. "{{primary-100}}" + //\(' + THEME_COLOR_TYPES.join('\|') + '\)' + rules = rules.replace(simpleVariableRegex, function(match, colorType, hue, opacity, contrast) { + if (colorType === 'foreground') { + if (hue == 'shadow') { + return theme.foregroundShadow; + } else { + return theme.foregroundPalette[hue] || theme.foregroundPalette['1']; + } + } + + // `default` is also accepted as a hue-value, because the background palettes are + // using it as a name for the default hue. + if (hue.indexOf('hue') === 0 || hue === 'default') { + hue = theme.colors[colorType].hues[hue]; + } + + return rgba( (PALETTES[ theme.colors[colorType].name ][hue] || '')[contrast ? 'contrast' : 'value'], opacity ); + }); + + // For each type, generate rules for each hue (ie. default, md-hue-1, md-hue-2, md-hue-3) + angular.forEach(color.hues, function(hueValue, hueName) { + var newRule = rules + .replace(hueRegex, function(match, _, colorType, hueType, opacity) { + return rgba(palette[hueValue][hueType === 'color' ? 'value' : 'contrast'], opacity); + }); + if (hueName !== 'default') { + newRule = newRule.replace(themeNameRegex, '.md-' + theme.name + '-theme.md-' + hueName); + } + + // Don't apply a selector rule to the default theme, making it easier to override + // styles of the base-component + if (theme.name == 'default') { + var themeRuleRegex = /((?:(?:(?: |>|\.|\w|-|:|\(|\)|\[|\]|"|'|=)+) )?)((?:(?:\w|\.|-)+)?)\.md-default-theme((?: |>|\.|\w|-|:|\(|\)|\[|\]|"|'|=)*)/g; + newRule = newRule.replace(themeRuleRegex, function(match, prefix, target, suffix) { + return match + ', ' + prefix + target + suffix; + }); + } + generatedRules.push(newRule); + }); + + return generatedRules; +} + +var rulesByType = {}; + +// Generate our themes at run time given the state of THEMES and PALETTES +function generateAllThemes($injector, $mdTheming) { + var head = document.head; + var firstChild = head ? head.firstElementChild : null; + var themeCss = !themeConfig.disableTheming && $injector.has('$MD_THEME_CSS') ? $injector.get('$MD_THEME_CSS') : ''; + + // Append our custom registered styles to the theme stylesheet. + themeCss += themeConfig.registeredStyles.join(''); + + if ( !firstChild ) return; + if (themeCss.length === 0) return; // no rules, so no point in running this expensive task + + // Expose contrast colors for palettes to ensure that text is always readable + angular.forEach(PALETTES, sanitizePalette); + + // MD_THEME_CSS is a string generated by the build process that includes all the themable + // components as templates + + // Break the CSS into individual rules + var rules = themeCss + .split(/\}(?!(\}|'|"|;))/) + .filter(function(rule) { return rule && rule.trim().length; }) + .map(function(rule) { return rule.trim() + '}'; }); + + + var ruleMatchRegex = new RegExp('md-(' + THEME_COLOR_TYPES.join('|') + ')', 'g'); + + THEME_COLOR_TYPES.forEach(function(type) { + rulesByType[type] = ''; + }); + + + // Sort the rules based on type, allowing us to do color substitution on a per-type basis + rules.forEach(function(rule) { + var match = rule.match(ruleMatchRegex); + // First: test that if the rule has '.md-accent', it goes into the accent set of rules + for (var i = 0, type; type = THEME_COLOR_TYPES[i]; i++) { + if (rule.indexOf('.md-' + type) > -1) { + return rulesByType[type] += rule; + } + } + + // If no eg 'md-accent' class is found, try to just find 'accent' in the rule and guess from + // there + for (i = 0; type = THEME_COLOR_TYPES[i]; i++) { + if (rule.indexOf(type) > -1) { + return rulesByType[type] += rule; + } + } + + // Default to the primary array + return rulesByType[DEFAULT_COLOR_TYPE] += rule; + }); + + // If themes are being generated on-demand, quit here. The user will later manually + // call generateTheme to do this on a theme-by-theme basis. + if (themeConfig.generateOnDemand) return; + + angular.forEach($mdTheming.THEMES, function(theme) { + if (!GENERATED[theme.name] && !($mdTheming.defaultTheme() !== 'default' && theme.name === 'default')) { + generateTheme(theme, theme.name, themeConfig.nonce); + } + }); + + + // ************************* + // Internal functions + // ************************* + + // The user specifies a 'default' contrast color as either light or dark, + // then explicitly lists which hues are the opposite contrast (eg. A100 has dark, A200 has light) + function sanitizePalette(palette, name) { + var defaultContrast = palette.contrastDefaultColor; + var lightColors = palette.contrastLightColors || []; + var strongLightColors = palette.contrastStrongLightColors || []; + var darkColors = palette.contrastDarkColors || []; + + // These colors are provided as space-separated lists + if (typeof lightColors === 'string') lightColors = lightColors.split(' '); + if (typeof strongLightColors === 'string') strongLightColors = strongLightColors.split(' '); + if (typeof darkColors === 'string') darkColors = darkColors.split(' '); + + // Cleanup after ourselves + delete palette.contrastDefaultColor; + delete palette.contrastLightColors; + delete palette.contrastStrongLightColors; + delete palette.contrastDarkColors; + + // Change { 'A100': '#fffeee' } to { 'A100': { value: '#fffeee', contrast:DARK_CONTRAST_COLOR } + angular.forEach(palette, function(hueValue, hueName) { + if (angular.isObject(hueValue)) return; // Already converted + // Map everything to rgb colors + var rgbValue = colorToRgbaArray(hueValue); + if (!rgbValue) { + throw new Error("Color %1, in palette %2's hue %3, is invalid. Hex or rgb(a) color expected." + .replace('%1', hueValue) + .replace('%2', palette.name) + .replace('%3', hueName)); + } + + palette[hueName] = { + hex: palette[hueName], + value: rgbValue, + contrast: getContrastColor() + }; + function getContrastColor() { + if (defaultContrast === 'light') { + if (darkColors.indexOf(hueName) > -1) { + return DARK_CONTRAST_COLOR; + } else { + return strongLightColors.indexOf(hueName) > -1 ? STRONG_LIGHT_CONTRAST_COLOR + : LIGHT_CONTRAST_COLOR; + } + } else { + if (lightColors.indexOf(hueName) > -1) { + return strongLightColors.indexOf(hueName) > -1 ? STRONG_LIGHT_CONTRAST_COLOR + : LIGHT_CONTRAST_COLOR; + } else { + return DARK_CONTRAST_COLOR; + } + } + } + }); + } +} + +function generateTheme(theme, name, nonce) { + var head = document.head; + var firstChild = head ? head.firstElementChild : null; + + if (!GENERATED[name]) { + // For each theme, use the color palettes specified for + // `primary`, `warn` and `accent` to generate CSS rules. + THEME_COLOR_TYPES.forEach(function(colorType) { + var styleStrings = parseRules(theme, colorType, rulesByType[colorType]); + while (styleStrings.length) { + var styleContent = styleStrings.shift(); + if (styleContent) { + var style = document.createElement('style'); + style.setAttribute('md-theme-style', ''); + if (nonce) { + style.setAttribute('nonce', nonce); + } + style.appendChild(document.createTextNode(styleContent)); + head.insertBefore(style, firstChild); + } + } + }); + + GENERATED[theme.name] = true; + } + +} + + +function checkValidPalette(theme, colorType) { + // If theme attempts to use a palette that doesnt exist, throw error + if (!PALETTES[ (theme.colors[colorType] || {}).name ]) { + throw new Error( + "You supplied an invalid color palette for theme %1's %2 palette. Available palettes: %3" + .replace('%1', theme.name) + .replace('%2', colorType) + .replace('%3', Object.keys(PALETTES).join(', ')) + ); + } +} + +function colorToRgbaArray(clr) { + if (angular.isArray(clr) && clr.length == 3) return clr; + if (/^rgb/.test(clr)) { + return clr.replace(/(^\s*rgba?\(|\)\s*$)/g, '').split(',').map(function(value, i) { + return i == 3 ? parseFloat(value, 10) : parseInt(value, 10); + }); + } + if (clr.charAt(0) == '#') clr = clr.substring(1); + if (!/^([a-fA-F0-9]{3}){1,2}$/g.test(clr)) return; + + var dig = clr.length / 3; + var red = clr.substr(0, dig); + var grn = clr.substr(dig, dig); + var blu = clr.substr(dig * 2); + if (dig === 1) { + red += red; + grn += grn; + blu += blu; + } + return [parseInt(red, 16), parseInt(grn, 16), parseInt(blu, 16)]; +} + +function rgba(rgbArray, opacity) { + if ( !rgbArray ) return "rgb('0,0,0')"; + + if (rgbArray.length == 4) { + rgbArray = angular.copy(rgbArray); + opacity ? rgbArray.pop() : opacity = rgbArray.pop(); + } + return opacity && (typeof opacity == 'number' || (typeof opacity == 'string' && opacity.length)) ? + 'rgba(' + rgbArray.join(',') + ',' + opacity + ')' : + 'rgb(' + rgbArray.join(',') + ')'; +} + + +})(window.angular); + +})(); +(function(){ +"use strict"; + +// Polyfill angular < 1.4 (provide $animateCss) +angular + .module('material.core') + .factory('$$mdAnimate', ["$q", "$timeout", "$mdConstant", "$animateCss", function($q, $timeout, $mdConstant, $animateCss){ + + // Since $$mdAnimate is injected into $mdUtil... use a wrapper function + // to subsequently inject $mdUtil as an argument to the AnimateDomUtils + + return function($mdUtil) { + return AnimateDomUtils( $mdUtil, $q, $timeout, $mdConstant, $animateCss); + }; + }]); + +/** + * Factory function that requires special injections + */ +function AnimateDomUtils($mdUtil, $q, $timeout, $mdConstant, $animateCss) { + var self; + return self = { + /** + * + */ + translate3d : function( target, from, to, options ) { + return $animateCss(target,{ + from:from, + to:to, + addClass:options.transitionInClass, + removeClass:options.transitionOutClass + }) + .start() + .then(function(){ + // Resolve with reverser function... + return reverseTranslate; + }); + + /** + * Specific reversal of the request translate animation above... + */ + function reverseTranslate (newFrom) { + return $animateCss(target, { + to: newFrom || from, + addClass: options.transitionOutClass, + removeClass: options.transitionInClass + }).start(); + + } + }, + + /** + * Listen for transitionEnd event (with optional timeout) + * Announce completion or failure via promise handlers + */ + waitTransitionEnd: function (element, opts) { + var TIMEOUT = 3000; // fallback is 3 secs + + return $q(function(resolve, reject){ + opts = opts || { }; + + // If there is no transition is found, resolve immediately + // + // NOTE: using $mdUtil.nextTick() causes delays/issues + if (noTransitionFound(opts.cachedTransitionStyles)) { + TIMEOUT = 0; + } + + var timer = $timeout(finished, opts.timeout || TIMEOUT); + element.on($mdConstant.CSS.TRANSITIONEND, finished); + + /** + * Upon timeout or transitionEnd, reject or resolve (respectively) this promise. + * NOTE: Make sure this transitionEnd didn't bubble up from a child + */ + function finished(ev) { + if ( ev && ev.target !== element[0]) return; + + if ( ev ) $timeout.cancel(timer); + element.off($mdConstant.CSS.TRANSITIONEND, finished); + + // Never reject since ngAnimate may cause timeouts due missed transitionEnd events + resolve(); + + } + + /** + * Checks whether or not there is a transition. + * + * @param styles The cached styles to use for the calculation. If null, getComputedStyle() + * will be used. + * + * @returns {boolean} True if there is no transition/duration; false otherwise. + */ + function noTransitionFound(styles) { + styles = styles || window.getComputedStyle(element[0]); + + return styles.transitionDuration == '0s' || (!styles.transition && !styles.transitionProperty); + } + + }); + }, + + calculateTransformValues: function (element, originator) { + var origin = originator.element; + var bounds = originator.bounds; + + if (origin || bounds) { + var originBnds = origin ? self.clientRect(origin) || currentBounds() : self.copyRect(bounds); + var dialogRect = self.copyRect(element[0].getBoundingClientRect()); + var dialogCenterPt = self.centerPointFor(dialogRect); + var originCenterPt = self.centerPointFor(originBnds); + + return { + centerX: originCenterPt.x - dialogCenterPt.x, + centerY: originCenterPt.y - dialogCenterPt.y, + scaleX: Math.round(100 * Math.min(0.5, originBnds.width / dialogRect.width)) / 100, + scaleY: Math.round(100 * Math.min(0.5, originBnds.height / dialogRect.height)) / 100 + }; + } + return {centerX: 0, centerY: 0, scaleX: 0.5, scaleY: 0.5}; + + /** + * This is a fallback if the origin information is no longer valid, then the + * origin bounds simply becomes the current bounds for the dialogContainer's parent + */ + function currentBounds() { + var cntr = element ? element.parent() : null; + var parent = cntr ? cntr.parent() : null; + + return parent ? self.clientRect(parent) : null; + } + }, + + /** + * Calculate the zoom transform from dialog to origin. + * + * We use this to set the dialog position immediately; + * then the md-transition-in actually translates back to + * `translate3d(0,0,0) scale(1.0)`... + * + * NOTE: all values are rounded to the nearest integer + */ + calculateZoomToOrigin: function (element, originator) { + var zoomTemplate = "translate3d( {centerX}px, {centerY}px, 0 ) scale( {scaleX}, {scaleY} )"; + var buildZoom = angular.bind(null, $mdUtil.supplant, zoomTemplate); + + return buildZoom(self.calculateTransformValues(element, originator)); + }, + + /** + * Calculate the slide transform from panel to origin. + * NOTE: all values are rounded to the nearest integer + */ + calculateSlideToOrigin: function (element, originator) { + var slideTemplate = "translate3d( {centerX}px, {centerY}px, 0 )"; + var buildSlide = angular.bind(null, $mdUtil.supplant, slideTemplate); + + return buildSlide(self.calculateTransformValues(element, originator)); + }, + + /** + * Enhance raw values to represent valid css stylings... + */ + toCss : function( raw ) { + var css = { }; + var lookups = 'left top right bottom width height x y min-width min-height max-width max-height'; + + angular.forEach(raw, function(value,key) { + if ( angular.isUndefined(value) ) return; + + if ( lookups.indexOf(key) >= 0 ) { + css[key] = value + 'px'; + } else { + switch (key) { + case 'transition': + convertToVendor(key, $mdConstant.CSS.TRANSITION, value); + break; + case 'transform': + convertToVendor(key, $mdConstant.CSS.TRANSFORM, value); + break; + case 'transformOrigin': + convertToVendor(key, $mdConstant.CSS.TRANSFORM_ORIGIN, value); + break; + case 'font-size': + css['font-size'] = value; // font sizes aren't always in px + break; + } + } + }); + + return css; + + function convertToVendor(key, vendor, value) { + angular.forEach(vendor.split(' '), function (key) { + css[key] = value; + }); + } + }, + + /** + * Convert the translate CSS value to key/value pair(s). + */ + toTransformCss: function (transform, addTransition, transition) { + var css = {}; + angular.forEach($mdConstant.CSS.TRANSFORM.split(' '), function (key) { + css[key] = transform; + }); + + if (addTransition) { + transition = transition || "all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important"; + css.transition = transition; + } + + return css; + }, + + /** + * Clone the Rect and calculate the height/width if needed + */ + copyRect: function (source, destination) { + if (!source) return null; + + destination = destination || {}; + + angular.forEach('left top right bottom width height'.split(' '), function (key) { + destination[key] = Math.round(source[key]); + }); + + destination.width = destination.width || (destination.right - destination.left); + destination.height = destination.height || (destination.bottom - destination.top); + + return destination; + }, + + /** + * Calculate ClientRect of element; return null if hidden or zero size + */ + clientRect: function (element) { + var bounds = angular.element(element)[0].getBoundingClientRect(); + var isPositiveSizeClientRect = function (rect) { + return rect && (rect.width > 0) && (rect.height > 0); + }; + + // If the event origin element has zero size, it has probably been hidden. + return isPositiveSizeClientRect(bounds) ? self.copyRect(bounds) : null; + }, + + /** + * Calculate 'rounded' center point of Rect + */ + centerPointFor: function (targetRect) { + return targetRect ? { + x: Math.round(targetRect.left + (targetRect.width / 2)), + y: Math.round(targetRect.top + (targetRect.height / 2)) + } : { x : 0, y : 0 }; + } + + }; +} + + +})(); +(function(){ +"use strict"; + +"use strict"; + +if (angular.version.minor >= 4) { + angular.module('material.core.animate', []); +} else { +(function() { + + var forEach = angular.forEach; + + var WEBKIT = angular.isDefined(document.documentElement.style.WebkitAppearance); + var TRANSITION_PROP = WEBKIT ? 'WebkitTransition' : 'transition'; + var ANIMATION_PROP = WEBKIT ? 'WebkitAnimation' : 'animation'; + var PREFIX = WEBKIT ? '-webkit-' : ''; + + var TRANSITION_EVENTS = (WEBKIT ? 'webkitTransitionEnd ' : '') + 'transitionend'; + var ANIMATION_EVENTS = (WEBKIT ? 'webkitAnimationEnd ' : '') + 'animationend'; + + var $$ForceReflowFactory = ['$document', function($document) { + return function() { + return $document[0].body.clientWidth + 1; + } + }]; + + var $$rAFMutexFactory = ['$$rAF', function($$rAF) { + return function() { + var passed = false; + $$rAF(function() { + passed = true; + }); + return function(fn) { + passed ? fn() : $$rAF(fn); + }; + }; + }]; + + var $$AnimateRunnerFactory = ['$q', '$$rAFMutex', function($q, $$rAFMutex) { + var INITIAL_STATE = 0; + var DONE_PENDING_STATE = 1; + var DONE_COMPLETE_STATE = 2; + + function AnimateRunner(host) { + this.setHost(host); + + this._doneCallbacks = []; + this._runInAnimationFrame = $$rAFMutex(); + this._state = 0; + } + + AnimateRunner.prototype = { + setHost: function(host) { + this.host = host || {}; + }, + + done: function(fn) { + if (this._state === DONE_COMPLETE_STATE) { + fn(); + } else { + this._doneCallbacks.push(fn); + } + }, + + progress: angular.noop, + + getPromise: function() { + if (!this.promise) { + var self = this; + this.promise = $q(function(resolve, reject) { + self.done(function(status) { + status === false ? reject() : resolve(); + }); + }); + } + return this.promise; + }, + + then: function(resolveHandler, rejectHandler) { + return this.getPromise().then(resolveHandler, rejectHandler); + }, + + 'catch': function(handler) { + return this.getPromise()['catch'](handler); + }, + + 'finally': function(handler) { + return this.getPromise()['finally'](handler); + }, + + pause: function() { + if (this.host.pause) { + this.host.pause(); + } + }, + + resume: function() { + if (this.host.resume) { + this.host.resume(); + } + }, + + end: function() { + if (this.host.end) { + this.host.end(); + } + this._resolve(true); + }, + + cancel: function() { + if (this.host.cancel) { + this.host.cancel(); + } + this._resolve(false); + }, + + complete: function(response) { + var self = this; + if (self._state === INITIAL_STATE) { + self._state = DONE_PENDING_STATE; + self._runInAnimationFrame(function() { + self._resolve(response); + }); + } + }, + + _resolve: function(response) { + if (this._state !== DONE_COMPLETE_STATE) { + forEach(this._doneCallbacks, function(fn) { + fn(response); + }); + this._doneCallbacks.length = 0; + this._state = DONE_COMPLETE_STATE; + } + } + }; + + // Polyfill AnimateRunner.all which is used by input animations + AnimateRunner.all = function(runners, callback) { + var count = 0; + var status = true; + forEach(runners, function(runner) { + runner.done(onProgress); + }); + + function onProgress(response) { + status = status && response; + if (++count === runners.length) { + callback(status); + } + } + }; + + return AnimateRunner; + }]; + + angular + .module('material.core.animate', []) + .factory('$$forceReflow', $$ForceReflowFactory) + .factory('$$AnimateRunner', $$AnimateRunnerFactory) + .factory('$$rAFMutex', $$rAFMutexFactory) + .factory('$animateCss', ['$window', '$$rAF', '$$AnimateRunner', '$$forceReflow', '$$jqLite', '$timeout', '$animate', + function($window, $$rAF, $$AnimateRunner, $$forceReflow, $$jqLite, $timeout, $animate) { + + function init(element, options) { + + var temporaryStyles = []; + var node = getDomNode(element); + var areAnimationsAllowed = node && $animate.enabled(); + + var hasCompleteStyles = false; + var hasCompleteClasses = false; + + if (areAnimationsAllowed) { + if (options.transitionStyle) { + temporaryStyles.push([PREFIX + 'transition', options.transitionStyle]); + } + + if (options.keyframeStyle) { + temporaryStyles.push([PREFIX + 'animation', options.keyframeStyle]); + } + + if (options.delay) { + temporaryStyles.push([PREFIX + 'transition-delay', options.delay + 's']); + } + + if (options.duration) { + temporaryStyles.push([PREFIX + 'transition-duration', options.duration + 's']); + } + + hasCompleteStyles = options.keyframeStyle || + (options.to && (options.duration > 0 || options.transitionStyle)); + hasCompleteClasses = !!options.addClass || !!options.removeClass; + + blockTransition(element, true); + } + + var hasCompleteAnimation = areAnimationsAllowed && (hasCompleteStyles || hasCompleteClasses); + + applyAnimationFromStyles(element, options); + + var animationClosed = false; + var events, eventFn; + + return { + close: $window.close, + start: function() { + var runner = new $$AnimateRunner(); + waitUntilQuiet(function() { + blockTransition(element, false); + if (!hasCompleteAnimation) { + return close(); + } + + forEach(temporaryStyles, function(entry) { + var key = entry[0]; + var value = entry[1]; + node.style[camelCase(key)] = value; + }); + + applyClasses(element, options); + + var timings = computeTimings(element); + if (timings.duration === 0) { + return close(); + } + + var moreStyles = []; + + if (options.easing) { + if (timings.transitionDuration) { + moreStyles.push([PREFIX + 'transition-timing-function', options.easing]); + } + if (timings.animationDuration) { + moreStyles.push([PREFIX + 'animation-timing-function', options.easing]); + } + } + + if (options.delay && timings.animationDelay) { + moreStyles.push([PREFIX + 'animation-delay', options.delay + 's']); + } + + if (options.duration && timings.animationDuration) { + moreStyles.push([PREFIX + 'animation-duration', options.duration + 's']); + } + + forEach(moreStyles, function(entry) { + var key = entry[0]; + var value = entry[1]; + node.style[camelCase(key)] = value; + temporaryStyles.push(entry); + }); + + var maxDelay = timings.delay; + var maxDelayTime = maxDelay * 1000; + var maxDuration = timings.duration; + var maxDurationTime = maxDuration * 1000; + var startTime = Date.now(); + + events = []; + if (timings.transitionDuration) { + events.push(TRANSITION_EVENTS); + } + if (timings.animationDuration) { + events.push(ANIMATION_EVENTS); + } + events = events.join(' '); + eventFn = function(event) { + event.stopPropagation(); + var ev = event.originalEvent || event; + var timeStamp = ev.timeStamp || Date.now(); + var elapsedTime = parseFloat(ev.elapsedTime.toFixed(3)); + if (Math.max(timeStamp - startTime, 0) >= maxDelayTime && elapsedTime >= maxDuration) { + close(); + } + }; + element.on(events, eventFn); + + applyAnimationToStyles(element, options); + + $timeout(close, maxDelayTime + maxDurationTime * 1.5, false); + }); + + return runner; + + function close() { + if (animationClosed) return; + animationClosed = true; + + if (events && eventFn) { + element.off(events, eventFn); + } + applyClasses(element, options); + applyAnimationStyles(element, options); + forEach(temporaryStyles, function(entry) { + node.style[camelCase(entry[0])] = ''; + }); + runner.complete(true); + return runner; + } + } + } + } + + function applyClasses(element, options) { + if (options.addClass) { + $$jqLite.addClass(element, options.addClass); + options.addClass = null; + } + if (options.removeClass) { + $$jqLite.removeClass(element, options.removeClass); + options.removeClass = null; + } + } + + function computeTimings(element) { + var node = getDomNode(element); + var cs = $window.getComputedStyle(node) + var tdr = parseMaxTime(cs[prop('transitionDuration')]); + var adr = parseMaxTime(cs[prop('animationDuration')]); + var tdy = parseMaxTime(cs[prop('transitionDelay')]); + var ady = parseMaxTime(cs[prop('animationDelay')]); + + adr *= (parseInt(cs[prop('animationIterationCount')], 10) || 1); + var duration = Math.max(adr, tdr); + var delay = Math.max(ady, tdy); + + return { + duration: duration, + delay: delay, + animationDuration: adr, + transitionDuration: tdr, + animationDelay: ady, + transitionDelay: tdy + }; + + function prop(key) { + return WEBKIT ? 'Webkit' + key.charAt(0).toUpperCase() + key.substr(1) + : key; + } + } + + function parseMaxTime(str) { + var maxValue = 0; + var values = (str || "").split(/\s*,\s*/); + forEach(values, function(value) { + // it's always safe to consider only second values and omit `ms` values since + // getComputedStyle will always handle the conversion for us + if (value.charAt(value.length - 1) == 's') { + value = value.substring(0, value.length - 1); + } + value = parseFloat(value) || 0; + maxValue = maxValue ? Math.max(value, maxValue) : value; + }); + return maxValue; + } + + var cancelLastRAFRequest; + var rafWaitQueue = []; + function waitUntilQuiet(callback) { + if (cancelLastRAFRequest) { + cancelLastRAFRequest(); //cancels the request + } + rafWaitQueue.push(callback); + cancelLastRAFRequest = $$rAF(function() { + cancelLastRAFRequest = null; + + // DO NOT REMOVE THIS LINE OR REFACTOR OUT THE `pageWidth` variable. + // PLEASE EXAMINE THE `$$forceReflow` service to understand why. + var pageWidth = $$forceReflow(); + + // we use a for loop to ensure that if the queue is changed + // during this looping then it will consider new requests + for (var i = 0; i < rafWaitQueue.length; i++) { + rafWaitQueue[i](pageWidth); + } + rafWaitQueue.length = 0; + }); + } + + function applyAnimationStyles(element, options) { + applyAnimationFromStyles(element, options); + applyAnimationToStyles(element, options); + } + + function applyAnimationFromStyles(element, options) { + if (options.from) { + element.css(options.from); + options.from = null; + } + } + + function applyAnimationToStyles(element, options) { + if (options.to) { + element.css(options.to); + options.to = null; + } + } + + function getDomNode(element) { + for (var i = 0; i < element.length; i++) { + if (element[i].nodeType === 1) return element[i]; + } + } + + function blockTransition(element, bool) { + var node = getDomNode(element); + var key = camelCase(PREFIX + 'transition-delay'); + node.style[key] = bool ? '-9999s' : ''; + } + + return init; + }]); + + /** + * Older browsers [FF31] expect camelCase + * property keys. + * e.g. + * animation-duration --> animationDuration + */ + function camelCase(str) { + return str.replace(/-[a-z]/g, function(str) { + return str.charAt(1).toUpperCase(); + }); + } + +})(); + +} + +})(); +(function(){ +"use strict"; + +/** + * @ngdoc module + * @name material.components.autocomplete + */ +/* + * @see js folder for autocomplete implementation + */ +angular.module('material.components.autocomplete', [ + 'material.core', + 'material.components.icon', + 'material.components.virtualRepeat' +]); + +})(); +(function(){ +"use strict"; + +/* + * @ngdoc module + * @name material.components.backdrop + * @description Backdrop + */ + +/** + * @ngdoc directive + * @name mdBackdrop + * @module material.components.backdrop + * + * @restrict E + * + * @description + * `
+ *
+ * Open a Bottom Sheet!
+ *
+ *
+ *