| /** |
| * @license Angular v5.2.0 |
| * (c) 2010-2018 Google, Inc. https://angular.io/ |
| * License: MIT |
| */ |
| import { AUTO_STYLE, NoopAnimationPlayer, sequence, style, ɵAnimationGroupPlayer, ɵPRE_STYLE } from '@angular/animations'; |
| import { __assign, __extends } from 'tslib'; |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes} checked by tsc |
| */ |
| /** |
| * @param {?} players |
| * @return {?} |
| */ |
| function optimizeGroupPlayer(players) { |
| switch (players.length) { |
| case 0: |
| return new NoopAnimationPlayer(); |
| case 1: |
| return players[0]; |
| default: |
| return new ɵAnimationGroupPlayer(players); |
| } |
| } |
| /** |
| * @param {?} driver |
| * @param {?} normalizer |
| * @param {?} element |
| * @param {?} keyframes |
| * @param {?=} preStyles |
| * @param {?=} postStyles |
| * @return {?} |
| */ |
| function normalizeKeyframes(driver, normalizer, element, keyframes, preStyles, postStyles) { |
| if (preStyles === void 0) { preStyles = {}; } |
| if (postStyles === void 0) { postStyles = {}; } |
| var /** @type {?} */ errors = []; |
| var /** @type {?} */ normalizedKeyframes = []; |
| var /** @type {?} */ previousOffset = -1; |
| var /** @type {?} */ previousKeyframe = null; |
| keyframes.forEach(function (kf) { |
| var /** @type {?} */ offset = /** @type {?} */ (kf['offset']); |
| var /** @type {?} */ isSameOffset = offset == previousOffset; |
| var /** @type {?} */ normalizedKeyframe = (isSameOffset && previousKeyframe) || {}; |
| Object.keys(kf).forEach(function (prop) { |
| var /** @type {?} */ normalizedProp = prop; |
| var /** @type {?} */ normalizedValue = kf[prop]; |
| if (prop !== 'offset') { |
| normalizedProp = normalizer.normalizePropertyName(normalizedProp, errors); |
| switch (normalizedValue) { |
| case ɵPRE_STYLE: |
| normalizedValue = preStyles[prop]; |
| break; |
| case AUTO_STYLE: |
| normalizedValue = postStyles[prop]; |
| break; |
| default: |
| normalizedValue = |
| normalizer.normalizeStyleValue(prop, normalizedProp, normalizedValue, errors); |
| break; |
| } |
| } |
| normalizedKeyframe[normalizedProp] = normalizedValue; |
| }); |
| if (!isSameOffset) { |
| normalizedKeyframes.push(normalizedKeyframe); |
| } |
| previousKeyframe = normalizedKeyframe; |
| previousOffset = offset; |
| }); |
| if (errors.length) { |
| var /** @type {?} */ LINE_START = '\n - '; |
| throw new Error("Unable to animate due to the following errors:" + LINE_START + errors.join(LINE_START)); |
| } |
| return normalizedKeyframes; |
| } |
| /** |
| * @param {?} player |
| * @param {?} eventName |
| * @param {?} event |
| * @param {?} callback |
| * @return {?} |
| */ |
| function listenOnPlayer(player, eventName, event, callback) { |
| switch (eventName) { |
| case 'start': |
| player.onStart(function () { return callback(event && copyAnimationEvent(event, 'start', player.totalTime)); }); |
| break; |
| case 'done': |
| player.onDone(function () { return callback(event && copyAnimationEvent(event, 'done', player.totalTime)); }); |
| break; |
| case 'destroy': |
| player.onDestroy(function () { return callback(event && copyAnimationEvent(event, 'destroy', player.totalTime)); }); |
| break; |
| } |
| } |
| /** |
| * @param {?} e |
| * @param {?=} phaseName |
| * @param {?=} totalTime |
| * @return {?} |
| */ |
| function copyAnimationEvent(e, phaseName, totalTime) { |
| var /** @type {?} */ event = makeAnimationEvent(e.element, e.triggerName, e.fromState, e.toState, phaseName || e.phaseName, totalTime == undefined ? e.totalTime : totalTime); |
| var /** @type {?} */ data = (/** @type {?} */ (e))['_data']; |
| if (data != null) { |
| (/** @type {?} */ (event))['_data'] = data; |
| } |
| return event; |
| } |
| /** |
| * @param {?} element |
| * @param {?} triggerName |
| * @param {?} fromState |
| * @param {?} toState |
| * @param {?=} phaseName |
| * @param {?=} totalTime |
| * @return {?} |
| */ |
| function makeAnimationEvent(element, triggerName, fromState, toState, phaseName, totalTime) { |
| if (phaseName === void 0) { phaseName = ''; } |
| if (totalTime === void 0) { totalTime = 0; } |
| return { element: element, triggerName: triggerName, fromState: fromState, toState: toState, phaseName: phaseName, totalTime: totalTime }; |
| } |
| /** |
| * @param {?} map |
| * @param {?} key |
| * @param {?} defaultValue |
| * @return {?} |
| */ |
| function getOrSetAsInMap(map, key, defaultValue) { |
| var /** @type {?} */ value; |
| if (map instanceof Map) { |
| value = map.get(key); |
| if (!value) { |
| map.set(key, value = defaultValue); |
| } |
| } |
| else { |
| value = map[key]; |
| if (!value) { |
| value = map[key] = defaultValue; |
| } |
| } |
| return value; |
| } |
| /** |
| * @param {?} command |
| * @return {?} |
| */ |
| function parseTimelineCommand(command) { |
| var /** @type {?} */ separatorPos = command.indexOf(':'); |
| var /** @type {?} */ id = command.substring(1, separatorPos); |
| var /** @type {?} */ action = command.substr(separatorPos + 1); |
| return [id, action]; |
| } |
| var _contains = function (elm1, elm2) { return false; }; |
| var _matches = function (element, selector) { |
| return false; |
| }; |
| var _query = function (element, selector, multi) { |
| return []; |
| }; |
| if (typeof Element != 'undefined') { |
| // this is well supported in all browsers |
| _contains = function (elm1, elm2) { return /** @type {?} */ (elm1.contains(elm2)); }; |
| if (Element.prototype.matches) { |
| _matches = function (element, selector) { return element.matches(selector); }; |
| } |
| else { |
| var /** @type {?} */ proto = /** @type {?} */ (Element.prototype); |
| var /** @type {?} */ fn_1 = proto.matchesSelector || proto.mozMatchesSelector || proto.msMatchesSelector || |
| proto.oMatchesSelector || proto.webkitMatchesSelector; |
| if (fn_1) { |
| _matches = function (element, selector) { return fn_1.apply(element, [selector]); }; |
| } |
| } |
| _query = function (element, selector, multi) { |
| var /** @type {?} */ results = []; |
| if (multi) { |
| results.push.apply(results, element.querySelectorAll(selector)); |
| } |
| else { |
| var /** @type {?} */ elm = element.querySelector(selector); |
| if (elm) { |
| results.push(elm); |
| } |
| } |
| return results; |
| }; |
| } |
| /** |
| * @param {?} prop |
| * @return {?} |
| */ |
| function containsVendorPrefix(prop) { |
| // Webkit is the only real popular vendor prefix nowadays |
| // cc: http://shouldiprefix.com/ |
| return prop.substring(1, 6) == 'ebkit'; // webkit or Webkit |
| } |
| var _CACHED_BODY = null; |
| var _IS_WEBKIT = false; |
| /** |
| * @param {?} prop |
| * @return {?} |
| */ |
| function validateStyleProperty(prop) { |
| if (!_CACHED_BODY) { |
| _CACHED_BODY = getBodyNode() || {}; |
| _IS_WEBKIT = /** @type {?} */ ((_CACHED_BODY)).style ? ('WebkitAppearance' in /** @type {?} */ ((_CACHED_BODY)).style) : false; |
| } |
| var /** @type {?} */ result = true; |
| if (/** @type {?} */ ((_CACHED_BODY)).style && !containsVendorPrefix(prop)) { |
| result = prop in /** @type {?} */ ((_CACHED_BODY)).style; |
| if (!result && _IS_WEBKIT) { |
| var /** @type {?} */ camelProp = 'Webkit' + prop.charAt(0).toUpperCase() + prop.substr(1); |
| result = camelProp in /** @type {?} */ ((_CACHED_BODY)).style; |
| } |
| } |
| return result; |
| } |
| /** |
| * @return {?} |
| */ |
| function getBodyNode() { |
| if (typeof document != 'undefined') { |
| return document.body; |
| } |
| return null; |
| } |
| var matchesElement = _matches; |
| var containsElement = _contains; |
| var invokeQuery = _query; |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes} checked by tsc |
| */ |
| /** |
| * \@experimental |
| */ |
| var NoopAnimationDriver = /** @class */ (function () { |
| function NoopAnimationDriver() { |
| } |
| /** |
| * @param {?} prop |
| * @return {?} |
| */ |
| NoopAnimationDriver.prototype.validateStyleProperty = /** |
| * @param {?} prop |
| * @return {?} |
| */ |
| function (prop) { return validateStyleProperty(prop); }; |
| /** |
| * @param {?} element |
| * @param {?} selector |
| * @return {?} |
| */ |
| NoopAnimationDriver.prototype.matchesElement = /** |
| * @param {?} element |
| * @param {?} selector |
| * @return {?} |
| */ |
| function (element, selector) { |
| return matchesElement(element, selector); |
| }; |
| /** |
| * @param {?} elm1 |
| * @param {?} elm2 |
| * @return {?} |
| */ |
| NoopAnimationDriver.prototype.containsElement = /** |
| * @param {?} elm1 |
| * @param {?} elm2 |
| * @return {?} |
| */ |
| function (elm1, elm2) { return containsElement(elm1, elm2); }; |
| /** |
| * @param {?} element |
| * @param {?} selector |
| * @param {?} multi |
| * @return {?} |
| */ |
| NoopAnimationDriver.prototype.query = /** |
| * @param {?} element |
| * @param {?} selector |
| * @param {?} multi |
| * @return {?} |
| */ |
| function (element, selector, multi) { |
| return invokeQuery(element, selector, multi); |
| }; |
| /** |
| * @param {?} element |
| * @param {?} prop |
| * @param {?=} defaultValue |
| * @return {?} |
| */ |
| NoopAnimationDriver.prototype.computeStyle = /** |
| * @param {?} element |
| * @param {?} prop |
| * @param {?=} defaultValue |
| * @return {?} |
| */ |
| function (element, prop, defaultValue) { |
| return defaultValue || ''; |
| }; |
| /** |
| * @param {?} element |
| * @param {?} keyframes |
| * @param {?} duration |
| * @param {?} delay |
| * @param {?} easing |
| * @param {?=} previousPlayers |
| * @return {?} |
| */ |
| NoopAnimationDriver.prototype.animate = /** |
| * @param {?} element |
| * @param {?} keyframes |
| * @param {?} duration |
| * @param {?} delay |
| * @param {?} easing |
| * @param {?=} previousPlayers |
| * @return {?} |
| */ |
| function (element, keyframes, duration, delay, easing, previousPlayers) { |
| if (previousPlayers === void 0) { previousPlayers = []; } |
| return new NoopAnimationPlayer(); |
| }; |
| return NoopAnimationDriver; |
| }()); |
| /** |
| * \@experimental |
| * @abstract |
| */ |
| var AnimationDriver = /** @class */ (function () { |
| function AnimationDriver() { |
| } |
| AnimationDriver.NOOP = new NoopAnimationDriver(); |
| return AnimationDriver; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes} checked by tsc |
| */ |
| var ONE_SECOND = 1000; |
| var SUBSTITUTION_EXPR_START = '{{'; |
| var SUBSTITUTION_EXPR_END = '}}'; |
| var ENTER_CLASSNAME = 'ng-enter'; |
| var LEAVE_CLASSNAME = 'ng-leave'; |
| |
| |
| var NG_TRIGGER_CLASSNAME = 'ng-trigger'; |
| var NG_TRIGGER_SELECTOR = '.ng-trigger'; |
| var NG_ANIMATING_CLASSNAME = 'ng-animating'; |
| var NG_ANIMATING_SELECTOR = '.ng-animating'; |
| /** |
| * @param {?} value |
| * @return {?} |
| */ |
| function resolveTimingValue(value) { |
| if (typeof value == 'number') |
| return value; |
| var /** @type {?} */ matches = (/** @type {?} */ (value)).match(/^(-?[\.\d]+)(m?s)/); |
| if (!matches || matches.length < 2) |
| return 0; |
| return _convertTimeValueToMS(parseFloat(matches[1]), matches[2]); |
| } |
| /** |
| * @param {?} value |
| * @param {?} unit |
| * @return {?} |
| */ |
| function _convertTimeValueToMS(value, unit) { |
| switch (unit) { |
| case 's': |
| return value * ONE_SECOND; |
| default: |
| // ms or something else |
| return value; |
| } |
| } |
| /** |
| * @param {?} timings |
| * @param {?} errors |
| * @param {?=} allowNegativeValues |
| * @return {?} |
| */ |
| function resolveTiming(timings, errors, allowNegativeValues) { |
| return timings.hasOwnProperty('duration') ? /** @type {?} */ (timings) : |
| parseTimeExpression(/** @type {?} */ (timings), errors, allowNegativeValues); |
| } |
| /** |
| * @param {?} exp |
| * @param {?} errors |
| * @param {?=} allowNegativeValues |
| * @return {?} |
| */ |
| function parseTimeExpression(exp, errors, allowNegativeValues) { |
| var /** @type {?} */ regex = /^(-?[\.\d]+)(m?s)(?:\s+(-?[\.\d]+)(m?s))?(?:\s+([-a-z]+(?:\(.+?\))?))?$/i; |
| var /** @type {?} */ duration; |
| var /** @type {?} */ delay = 0; |
| var /** @type {?} */ easing = ''; |
| if (typeof exp === 'string') { |
| var /** @type {?} */ matches = exp.match(regex); |
| if (matches === null) { |
| errors.push("The provided timing value \"" + exp + "\" is invalid."); |
| return { duration: 0, delay: 0, easing: '' }; |
| } |
| duration = _convertTimeValueToMS(parseFloat(matches[1]), matches[2]); |
| var /** @type {?} */ delayMatch = matches[3]; |
| if (delayMatch != null) { |
| delay = _convertTimeValueToMS(Math.floor(parseFloat(delayMatch)), matches[4]); |
| } |
| var /** @type {?} */ easingVal = matches[5]; |
| if (easingVal) { |
| easing = easingVal; |
| } |
| } |
| else { |
| duration = /** @type {?} */ (exp); |
| } |
| if (!allowNegativeValues) { |
| var /** @type {?} */ containsErrors = false; |
| var /** @type {?} */ startIndex = errors.length; |
| if (duration < 0) { |
| errors.push("Duration values below 0 are not allowed for this animation step."); |
| containsErrors = true; |
| } |
| if (delay < 0) { |
| errors.push("Delay values below 0 are not allowed for this animation step."); |
| containsErrors = true; |
| } |
| if (containsErrors) { |
| errors.splice(startIndex, 0, "The provided timing value \"" + exp + "\" is invalid."); |
| } |
| } |
| return { duration: duration, delay: delay, easing: easing }; |
| } |
| /** |
| * @param {?} obj |
| * @param {?=} destination |
| * @return {?} |
| */ |
| function copyObj(obj, destination) { |
| if (destination === void 0) { destination = {}; } |
| Object.keys(obj).forEach(function (prop) { destination[prop] = obj[prop]; }); |
| return destination; |
| } |
| /** |
| * @param {?} styles |
| * @return {?} |
| */ |
| function normalizeStyles(styles) { |
| var /** @type {?} */ normalizedStyles = {}; |
| if (Array.isArray(styles)) { |
| styles.forEach(function (data) { return copyStyles(data, false, normalizedStyles); }); |
| } |
| else { |
| copyStyles(styles, false, normalizedStyles); |
| } |
| return normalizedStyles; |
| } |
| /** |
| * @param {?} styles |
| * @param {?} readPrototype |
| * @param {?=} destination |
| * @return {?} |
| */ |
| function copyStyles(styles, readPrototype, destination) { |
| if (destination === void 0) { destination = {}; } |
| if (readPrototype) { |
| // we make use of a for-in loop so that the |
| // prototypically inherited properties are |
| // revealed from the backFill map |
| for (var /** @type {?} */ prop in styles) { |
| destination[prop] = styles[prop]; |
| } |
| } |
| else { |
| copyObj(styles, destination); |
| } |
| return destination; |
| } |
| /** |
| * @param {?} element |
| * @param {?} styles |
| * @return {?} |
| */ |
| function setStyles(element, styles) { |
| if (element['style']) { |
| Object.keys(styles).forEach(function (prop) { |
| var /** @type {?} */ camelProp = dashCaseToCamelCase(prop); |
| element.style[camelProp] = styles[prop]; |
| }); |
| } |
| } |
| /** |
| * @param {?} element |
| * @param {?} styles |
| * @return {?} |
| */ |
| function eraseStyles(element, styles) { |
| if (element['style']) { |
| Object.keys(styles).forEach(function (prop) { |
| var /** @type {?} */ camelProp = dashCaseToCamelCase(prop); |
| element.style[camelProp] = ''; |
| }); |
| } |
| } |
| /** |
| * @param {?} steps |
| * @return {?} |
| */ |
| function normalizeAnimationEntry(steps) { |
| if (Array.isArray(steps)) { |
| if (steps.length == 1) |
| return steps[0]; |
| return sequence(steps); |
| } |
| return /** @type {?} */ (steps); |
| } |
| /** |
| * @param {?} value |
| * @param {?} options |
| * @param {?} errors |
| * @return {?} |
| */ |
| function validateStyleParams(value, options, errors) { |
| var /** @type {?} */ params = options.params || {}; |
| var /** @type {?} */ matches = extractStyleParams(value); |
| if (matches.length) { |
| matches.forEach(function (varName) { |
| if (!params.hasOwnProperty(varName)) { |
| errors.push("Unable to resolve the local animation param " + varName + " in the given list of values"); |
| } |
| }); |
| } |
| } |
| var PARAM_REGEX = new RegExp(SUBSTITUTION_EXPR_START + "\\s*(.+?)\\s*" + SUBSTITUTION_EXPR_END, 'g'); |
| /** |
| * @param {?} value |
| * @return {?} |
| */ |
| function extractStyleParams(value) { |
| var /** @type {?} */ params = []; |
| if (typeof value === 'string') { |
| var /** @type {?} */ val = value.toString(); |
| var /** @type {?} */ match = void 0; |
| while (match = PARAM_REGEX.exec(val)) { |
| params.push(/** @type {?} */ (match[1])); |
| } |
| PARAM_REGEX.lastIndex = 0; |
| } |
| return params; |
| } |
| /** |
| * @param {?} value |
| * @param {?} params |
| * @param {?} errors |
| * @return {?} |
| */ |
| function interpolateParams(value, params, errors) { |
| var /** @type {?} */ original = value.toString(); |
| var /** @type {?} */ str = original.replace(PARAM_REGEX, function (_, varName) { |
| var /** @type {?} */ localVal = params[varName]; |
| // this means that the value was never overidden by the data passed in by the user |
| if (!params.hasOwnProperty(varName)) { |
| errors.push("Please provide a value for the animation param " + varName); |
| localVal = ''; |
| } |
| return localVal.toString(); |
| }); |
| // we do this to assert that numeric values stay as they are |
| return str == original ? value : str; |
| } |
| /** |
| * @param {?} iterator |
| * @return {?} |
| */ |
| function iteratorToArray(iterator) { |
| var /** @type {?} */ arr = []; |
| var /** @type {?} */ item = iterator.next(); |
| while (!item.done) { |
| arr.push(item.value); |
| item = iterator.next(); |
| } |
| return arr; |
| } |
| /** |
| * @param {?} source |
| * @param {?} destination |
| * @return {?} |
| */ |
| |
| var DASH_CASE_REGEXP = /-+([a-z0-9])/g; |
| /** |
| * @param {?} input |
| * @return {?} |
| */ |
| function dashCaseToCamelCase(input) { |
| return input.replace(DASH_CASE_REGEXP, function () { |
| var m = []; |
| for (var _i = 0; _i < arguments.length; _i++) { |
| m[_i] = arguments[_i]; |
| } |
| return m[1].toUpperCase(); |
| }); |
| } |
| /** |
| * @param {?} duration |
| * @param {?} delay |
| * @return {?} |
| */ |
| function allowPreviousPlayerStylesMerge(duration, delay) { |
| return duration === 0 || delay === 0; |
| } |
| /** |
| * @param {?} visitor |
| * @param {?} node |
| * @param {?} context |
| * @return {?} |
| */ |
| function visitDslNode(visitor, node, context) { |
| switch (node.type) { |
| case 7 /* Trigger */: |
| return visitor.visitTrigger(node, context); |
| case 0 /* State */: |
| return visitor.visitState(node, context); |
| case 1 /* Transition */: |
| return visitor.visitTransition(node, context); |
| case 2 /* Sequence */: |
| return visitor.visitSequence(node, context); |
| case 3 /* Group */: |
| return visitor.visitGroup(node, context); |
| case 4 /* Animate */: |
| return visitor.visitAnimate(node, context); |
| case 5 /* Keyframes */: |
| return visitor.visitKeyframes(node, context); |
| case 6 /* Style */: |
| return visitor.visitStyle(node, context); |
| case 8 /* Reference */: |
| return visitor.visitReference(node, context); |
| case 9 /* AnimateChild */: |
| return visitor.visitAnimateChild(node, context); |
| case 10 /* AnimateRef */: |
| return visitor.visitAnimateRef(node, context); |
| case 11 /* Query */: |
| return visitor.visitQuery(node, context); |
| case 12 /* Stagger */: |
| return visitor.visitStagger(node, context); |
| default: |
| throw new Error("Unable to resolve animation metadata node #" + node.type); |
| } |
| } |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes} checked by tsc |
| */ |
| /** |
| * @license |
| * Copyright Google Inc. All Rights Reserved. |
| * |
| * Use of this source code is governed by an MIT-style license that can be |
| * found in the LICENSE file at https://angular.io/license |
| */ |
| var ANY_STATE = '*'; |
| /** |
| * @param {?} transitionValue |
| * @param {?} errors |
| * @return {?} |
| */ |
| function parseTransitionExpr(transitionValue, errors) { |
| var /** @type {?} */ expressions = []; |
| if (typeof transitionValue == 'string') { |
| (/** @type {?} */ (transitionValue)) |
| .split(/\s*,\s*/) |
| .forEach(function (str) { return parseInnerTransitionStr(str, expressions, errors); }); |
| } |
| else { |
| expressions.push(/** @type {?} */ (transitionValue)); |
| } |
| return expressions; |
| } |
| /** |
| * @param {?} eventStr |
| * @param {?} expressions |
| * @param {?} errors |
| * @return {?} |
| */ |
| function parseInnerTransitionStr(eventStr, expressions, errors) { |
| if (eventStr[0] == ':') { |
| var /** @type {?} */ result = parseAnimationAlias(eventStr, errors); |
| if (typeof result == 'function') { |
| expressions.push(result); |
| return; |
| } |
| eventStr = /** @type {?} */ (result); |
| } |
| var /** @type {?} */ match = eventStr.match(/^(\*|[-\w]+)\s*(<?[=-]>)\s*(\*|[-\w]+)$/); |
| if (match == null || match.length < 4) { |
| errors.push("The provided transition expression \"" + eventStr + "\" is not supported"); |
| return expressions; |
| } |
| var /** @type {?} */ fromState = match[1]; |
| var /** @type {?} */ separator = match[2]; |
| var /** @type {?} */ toState = match[3]; |
| expressions.push(makeLambdaFromStates(fromState, toState)); |
| var /** @type {?} */ isFullAnyStateExpr = fromState == ANY_STATE && toState == ANY_STATE; |
| if (separator[0] == '<' && !isFullAnyStateExpr) { |
| expressions.push(makeLambdaFromStates(toState, fromState)); |
| } |
| } |
| /** |
| * @param {?} alias |
| * @param {?} errors |
| * @return {?} |
| */ |
| function parseAnimationAlias(alias, errors) { |
| switch (alias) { |
| case ':enter': |
| return 'void => *'; |
| case ':leave': |
| return '* => void'; |
| case ':increment': |
| return function (fromState, toState) { return parseFloat(toState) > parseFloat(fromState); }; |
| case ':decrement': |
| return function (fromState, toState) { return parseFloat(toState) < parseFloat(fromState); }; |
| default: |
| errors.push("The transition alias value \"" + alias + "\" is not supported"); |
| return '* => *'; |
| } |
| } |
| // DO NOT REFACTOR ... keep the follow set instantiations |
| // with the values intact (closure compiler for some reason |
| // removes follow-up lines that add the values outside of |
| // the constructor... |
| var TRUE_BOOLEAN_VALUES = new Set(['true', '1']); |
| var FALSE_BOOLEAN_VALUES = new Set(['false', '0']); |
| /** |
| * @param {?} lhs |
| * @param {?} rhs |
| * @return {?} |
| */ |
| function makeLambdaFromStates(lhs, rhs) { |
| var /** @type {?} */ LHS_MATCH_BOOLEAN = TRUE_BOOLEAN_VALUES.has(lhs) || FALSE_BOOLEAN_VALUES.has(lhs); |
| var /** @type {?} */ RHS_MATCH_BOOLEAN = TRUE_BOOLEAN_VALUES.has(rhs) || FALSE_BOOLEAN_VALUES.has(rhs); |
| return function (fromState, toState) { |
| var /** @type {?} */ lhsMatch = lhs == ANY_STATE || lhs == fromState; |
| var /** @type {?} */ rhsMatch = rhs == ANY_STATE || rhs == toState; |
| if (!lhsMatch && LHS_MATCH_BOOLEAN && typeof fromState === 'boolean') { |
| lhsMatch = fromState ? TRUE_BOOLEAN_VALUES.has(lhs) : FALSE_BOOLEAN_VALUES.has(lhs); |
| } |
| if (!rhsMatch && RHS_MATCH_BOOLEAN && typeof toState === 'boolean') { |
| rhsMatch = toState ? TRUE_BOOLEAN_VALUES.has(rhs) : FALSE_BOOLEAN_VALUES.has(rhs); |
| } |
| return lhsMatch && rhsMatch; |
| }; |
| } |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes} checked by tsc |
| */ |
| var SELF_TOKEN = ':self'; |
| var SELF_TOKEN_REGEX = new RegExp("s*" + SELF_TOKEN + "s*,?", 'g'); |
| /** |
| * @param {?} driver |
| * @param {?} metadata |
| * @param {?} errors |
| * @return {?} |
| */ |
| function buildAnimationAst(driver, metadata, errors) { |
| return new AnimationAstBuilderVisitor(driver).build(metadata, errors); |
| } |
| var ROOT_SELECTOR = ''; |
| var AnimationAstBuilderVisitor = /** @class */ (function () { |
| function AnimationAstBuilderVisitor(_driver) { |
| this._driver = _driver; |
| } |
| /** |
| * @param {?} metadata |
| * @param {?} errors |
| * @return {?} |
| */ |
| AnimationAstBuilderVisitor.prototype.build = /** |
| * @param {?} metadata |
| * @param {?} errors |
| * @return {?} |
| */ |
| function (metadata, errors) { |
| var /** @type {?} */ context = new AnimationAstBuilderContext(errors); |
| this._resetContextStyleTimingState(context); |
| return /** @type {?} */ (visitDslNode(this, normalizeAnimationEntry(metadata), context)); |
| }; |
| /** |
| * @param {?} context |
| * @return {?} |
| */ |
| AnimationAstBuilderVisitor.prototype._resetContextStyleTimingState = /** |
| * @param {?} context |
| * @return {?} |
| */ |
| function (context) { |
| context.currentQuerySelector = ROOT_SELECTOR; |
| context.collectedStyles = {}; |
| context.collectedStyles[ROOT_SELECTOR] = {}; |
| context.currentTime = 0; |
| }; |
| /** |
| * @param {?} metadata |
| * @param {?} context |
| * @return {?} |
| */ |
| AnimationAstBuilderVisitor.prototype.visitTrigger = /** |
| * @param {?} metadata |
| * @param {?} context |
| * @return {?} |
| */ |
| function (metadata, context) { |
| var _this = this; |
| var /** @type {?} */ queryCount = context.queryCount = 0; |
| var /** @type {?} */ depCount = context.depCount = 0; |
| var /** @type {?} */ states = []; |
| var /** @type {?} */ transitions = []; |
| if (metadata.name.charAt(0) == '@') { |
| context.errors.push('animation triggers cannot be prefixed with an `@` sign (e.g. trigger(\'@foo\', [...]))'); |
| } |
| metadata.definitions.forEach(function (def) { |
| _this._resetContextStyleTimingState(context); |
| if (def.type == 0 /* State */) { |
| var /** @type {?} */ stateDef_1 = /** @type {?} */ (def); |
| var /** @type {?} */ name_1 = stateDef_1.name; |
| name_1.split(/\s*,\s*/).forEach(function (n) { |
| stateDef_1.name = n; |
| states.push(_this.visitState(stateDef_1, context)); |
| }); |
| stateDef_1.name = name_1; |
| } |
| else if (def.type == 1 /* Transition */) { |
| var /** @type {?} */ transition = _this.visitTransition(/** @type {?} */ (def), context); |
| queryCount += transition.queryCount; |
| depCount += transition.depCount; |
| transitions.push(transition); |
| } |
| else { |
| context.errors.push('only state() and transition() definitions can sit inside of a trigger()'); |
| } |
| }); |
| return { |
| type: 7 /* Trigger */, |
| name: metadata.name, states: states, transitions: transitions, queryCount: queryCount, depCount: depCount, |
| options: null |
| }; |
| }; |
| /** |
| * @param {?} metadata |
| * @param {?} context |
| * @return {?} |
| */ |
| AnimationAstBuilderVisitor.prototype.visitState = /** |
| * @param {?} metadata |
| * @param {?} context |
| * @return {?} |
| */ |
| function (metadata, context) { |
| var /** @type {?} */ styleAst = this.visitStyle(metadata.styles, context); |
| var /** @type {?} */ astParams = (metadata.options && metadata.options.params) || null; |
| if (styleAst.containsDynamicStyles) { |
| var /** @type {?} */ missingSubs_1 = new Set(); |
| var /** @type {?} */ params_1 = astParams || {}; |
| styleAst.styles.forEach(function (value) { |
| if (isObject(value)) { |
| var /** @type {?} */ stylesObj_1 = /** @type {?} */ (value); |
| Object.keys(stylesObj_1).forEach(function (prop) { |
| extractStyleParams(stylesObj_1[prop]).forEach(function (sub) { |
| if (!params_1.hasOwnProperty(sub)) { |
| missingSubs_1.add(sub); |
| } |
| }); |
| }); |
| } |
| }); |
| if (missingSubs_1.size) { |
| var /** @type {?} */ missingSubsArr = iteratorToArray(missingSubs_1.values()); |
| context.errors.push("state(\"" + metadata.name + "\", ...) must define default values for all the following style substitutions: " + missingSubsArr.join(', ')); |
| } |
| } |
| return { |
| type: 0 /* State */, |
| name: metadata.name, |
| style: styleAst, |
| options: astParams ? { params: astParams } : null |
| }; |
| }; |
| /** |
| * @param {?} metadata |
| * @param {?} context |
| * @return {?} |
| */ |
| AnimationAstBuilderVisitor.prototype.visitTransition = /** |
| * @param {?} metadata |
| * @param {?} context |
| * @return {?} |
| */ |
| function (metadata, context) { |
| context.queryCount = 0; |
| context.depCount = 0; |
| var /** @type {?} */ animation = visitDslNode(this, normalizeAnimationEntry(metadata.animation), context); |
| var /** @type {?} */ matchers = parseTransitionExpr(metadata.expr, context.errors); |
| return { |
| type: 1 /* Transition */, |
| matchers: matchers, |
| animation: animation, |
| queryCount: context.queryCount, |
| depCount: context.depCount, |
| options: normalizeAnimationOptions(metadata.options) |
| }; |
| }; |
| /** |
| * @param {?} metadata |
| * @param {?} context |
| * @return {?} |
| */ |
| AnimationAstBuilderVisitor.prototype.visitSequence = /** |
| * @param {?} metadata |
| * @param {?} context |
| * @return {?} |
| */ |
| function (metadata, context) { |
| var _this = this; |
| return { |
| type: 2 /* Sequence */, |
| steps: metadata.steps.map(function (s) { return visitDslNode(_this, s, context); }), |
| options: normalizeAnimationOptions(metadata.options) |
| }; |
| }; |
| /** |
| * @param {?} metadata |
| * @param {?} context |
| * @return {?} |
| */ |
| AnimationAstBuilderVisitor.prototype.visitGroup = /** |
| * @param {?} metadata |
| * @param {?} context |
| * @return {?} |
| */ |
| function (metadata, context) { |
| var _this = this; |
| var /** @type {?} */ currentTime = context.currentTime; |
| var /** @type {?} */ furthestTime = 0; |
| var /** @type {?} */ steps = metadata.steps.map(function (step) { |
| context.currentTime = currentTime; |
| var /** @type {?} */ innerAst = visitDslNode(_this, step, context); |
| furthestTime = Math.max(furthestTime, context.currentTime); |
| return innerAst; |
| }); |
| context.currentTime = furthestTime; |
| return { |
| type: 3 /* Group */, |
| steps: steps, |
| options: normalizeAnimationOptions(metadata.options) |
| }; |
| }; |
| /** |
| * @param {?} metadata |
| * @param {?} context |
| * @return {?} |
| */ |
| AnimationAstBuilderVisitor.prototype.visitAnimate = /** |
| * @param {?} metadata |
| * @param {?} context |
| * @return {?} |
| */ |
| function (metadata, context) { |
| var /** @type {?} */ timingAst = constructTimingAst(metadata.timings, context.errors); |
| context.currentAnimateTimings = timingAst; |
| var /** @type {?} */ styleAst; |
| var /** @type {?} */ styleMetadata = metadata.styles ? metadata.styles : style({}); |
| if (styleMetadata.type == 5 /* Keyframes */) { |
| styleAst = this.visitKeyframes(/** @type {?} */ (styleMetadata), context); |
| } |
| else { |
| var /** @type {?} */ styleMetadata_1 = /** @type {?} */ (metadata.styles); |
| var /** @type {?} */ isEmpty = false; |
| if (!styleMetadata_1) { |
| isEmpty = true; |
| var /** @type {?} */ newStyleData = {}; |
| if (timingAst.easing) { |
| newStyleData['easing'] = timingAst.easing; |
| } |
| styleMetadata_1 = style(newStyleData); |
| } |
| context.currentTime += timingAst.duration + timingAst.delay; |
| var /** @type {?} */ _styleAst = this.visitStyle(styleMetadata_1, context); |
| _styleAst.isEmptyStep = isEmpty; |
| styleAst = _styleAst; |
| } |
| context.currentAnimateTimings = null; |
| return { |
| type: 4 /* Animate */, |
| timings: timingAst, |
| style: styleAst, |
| options: null |
| }; |
| }; |
| /** |
| * @param {?} metadata |
| * @param {?} context |
| * @return {?} |
| */ |
| AnimationAstBuilderVisitor.prototype.visitStyle = /** |
| * @param {?} metadata |
| * @param {?} context |
| * @return {?} |
| */ |
| function (metadata, context) { |
| var /** @type {?} */ ast = this._makeStyleAst(metadata, context); |
| this._validateStyleAst(ast, context); |
| return ast; |
| }; |
| /** |
| * @param {?} metadata |
| * @param {?} context |
| * @return {?} |
| */ |
| AnimationAstBuilderVisitor.prototype._makeStyleAst = /** |
| * @param {?} metadata |
| * @param {?} context |
| * @return {?} |
| */ |
| function (metadata, context) { |
| var /** @type {?} */ styles = []; |
| if (Array.isArray(metadata.styles)) { |
| (/** @type {?} */ (metadata.styles)).forEach(function (styleTuple) { |
| if (typeof styleTuple == 'string') { |
| if (styleTuple == AUTO_STYLE) { |
| styles.push(/** @type {?} */ (styleTuple)); |
| } |
| else { |
| context.errors.push("The provided style string value " + styleTuple + " is not allowed."); |
| } |
| } |
| else { |
| styles.push(/** @type {?} */ (styleTuple)); |
| } |
| }); |
| } |
| else { |
| styles.push(metadata.styles); |
| } |
| var /** @type {?} */ containsDynamicStyles = false; |
| var /** @type {?} */ collectedEasing = null; |
| styles.forEach(function (styleData) { |
| if (isObject(styleData)) { |
| var /** @type {?} */ styleMap = /** @type {?} */ (styleData); |
| var /** @type {?} */ easing = styleMap['easing']; |
| if (easing) { |
| collectedEasing = /** @type {?} */ (easing); |
| delete styleMap['easing']; |
| } |
| if (!containsDynamicStyles) { |
| for (var /** @type {?} */ prop in styleMap) { |
| var /** @type {?} */ value = styleMap[prop]; |
| if (value.toString().indexOf(SUBSTITUTION_EXPR_START) >= 0) { |
| containsDynamicStyles = true; |
| break; |
| } |
| } |
| } |
| } |
| }); |
| return { |
| type: 6 /* Style */, |
| styles: styles, |
| easing: collectedEasing, |
| offset: metadata.offset, containsDynamicStyles: containsDynamicStyles, |
| options: null |
| }; |
| }; |
| /** |
| * @param {?} ast |
| * @param {?} context |
| * @return {?} |
| */ |
| AnimationAstBuilderVisitor.prototype._validateStyleAst = /** |
| * @param {?} ast |
| * @param {?} context |
| * @return {?} |
| */ |
| function (ast, context) { |
| var _this = this; |
| var /** @type {?} */ timings = context.currentAnimateTimings; |
| var /** @type {?} */ endTime = context.currentTime; |
| var /** @type {?} */ startTime = context.currentTime; |
| if (timings && startTime > 0) { |
| startTime -= timings.duration + timings.delay; |
| } |
| ast.styles.forEach(function (tuple) { |
| if (typeof tuple == 'string') |
| return; |
| Object.keys(tuple).forEach(function (prop) { |
| if (!_this._driver.validateStyleProperty(prop)) { |
| context.errors.push("The provided animation property \"" + prop + "\" is not a supported CSS property for animations"); |
| return; |
| } |
| var /** @type {?} */ collectedStyles = context.collectedStyles[/** @type {?} */ ((context.currentQuerySelector))]; |
| var /** @type {?} */ collectedEntry = collectedStyles[prop]; |
| var /** @type {?} */ updateCollectedStyle = true; |
| if (collectedEntry) { |
| if (startTime != endTime && startTime >= collectedEntry.startTime && |
| endTime <= collectedEntry.endTime) { |
| context.errors.push("The CSS property \"" + prop + "\" that exists between the times of \"" + collectedEntry.startTime + "ms\" and \"" + collectedEntry.endTime + "ms\" is also being animated in a parallel animation between the times of \"" + startTime + "ms\" and \"" + endTime + "ms\""); |
| updateCollectedStyle = false; |
| } |
| // we always choose the smaller start time value since we |
| // want to have a record of the entire animation window where |
| // the style property is being animated in between |
| startTime = collectedEntry.startTime; |
| } |
| if (updateCollectedStyle) { |
| collectedStyles[prop] = { startTime: startTime, endTime: endTime }; |
| } |
| if (context.options) { |
| validateStyleParams(tuple[prop], context.options, context.errors); |
| } |
| }); |
| }); |
| }; |
| /** |
| * @param {?} metadata |
| * @param {?} context |
| * @return {?} |
| */ |
| AnimationAstBuilderVisitor.prototype.visitKeyframes = /** |
| * @param {?} metadata |
| * @param {?} context |
| * @return {?} |
| */ |
| function (metadata, context) { |
| var _this = this; |
| var /** @type {?} */ ast = { type: 5 /* Keyframes */, styles: [], options: null }; |
| if (!context.currentAnimateTimings) { |
| context.errors.push("keyframes() must be placed inside of a call to animate()"); |
| return ast; |
| } |
| var /** @type {?} */ MAX_KEYFRAME_OFFSET = 1; |
| var /** @type {?} */ totalKeyframesWithOffsets = 0; |
| var /** @type {?} */ offsets = []; |
| var /** @type {?} */ offsetsOutOfOrder = false; |
| var /** @type {?} */ keyframesOutOfRange = false; |
| var /** @type {?} */ previousOffset = 0; |
| var /** @type {?} */ keyframes = metadata.steps.map(function (styles) { |
| var /** @type {?} */ style$$1 = _this._makeStyleAst(styles, context); |
| var /** @type {?} */ offsetVal = style$$1.offset != null ? style$$1.offset : consumeOffset(style$$1.styles); |
| var /** @type {?} */ offset = 0; |
| if (offsetVal != null) { |
| totalKeyframesWithOffsets++; |
| offset = style$$1.offset = offsetVal; |
| } |
| keyframesOutOfRange = keyframesOutOfRange || offset < 0 || offset > 1; |
| offsetsOutOfOrder = offsetsOutOfOrder || offset < previousOffset; |
| previousOffset = offset; |
| offsets.push(offset); |
| return style$$1; |
| }); |
| if (keyframesOutOfRange) { |
| context.errors.push("Please ensure that all keyframe offsets are between 0 and 1"); |
| } |
| if (offsetsOutOfOrder) { |
| context.errors.push("Please ensure that all keyframe offsets are in order"); |
| } |
| var /** @type {?} */ length = metadata.steps.length; |
| var /** @type {?} */ generatedOffset = 0; |
| if (totalKeyframesWithOffsets > 0 && totalKeyframesWithOffsets < length) { |
| context.errors.push("Not all style() steps within the declared keyframes() contain offsets"); |
| } |
| else if (totalKeyframesWithOffsets == 0) { |
| generatedOffset = MAX_KEYFRAME_OFFSET / (length - 1); |
| } |
| var /** @type {?} */ limit = length - 1; |
| var /** @type {?} */ currentTime = context.currentTime; |
| var /** @type {?} */ currentAnimateTimings = /** @type {?} */ ((context.currentAnimateTimings)); |
| var /** @type {?} */ animateDuration = currentAnimateTimings.duration; |
| keyframes.forEach(function (kf, i) { |
| var /** @type {?} */ offset = generatedOffset > 0 ? (i == limit ? 1 : (generatedOffset * i)) : offsets[i]; |
| var /** @type {?} */ durationUpToThisFrame = offset * animateDuration; |
| context.currentTime = currentTime + currentAnimateTimings.delay + durationUpToThisFrame; |
| currentAnimateTimings.duration = durationUpToThisFrame; |
| _this._validateStyleAst(kf, context); |
| kf.offset = offset; |
| ast.styles.push(kf); |
| }); |
| return ast; |
| }; |
| /** |
| * @param {?} metadata |
| * @param {?} context |
| * @return {?} |
| */ |
| AnimationAstBuilderVisitor.prototype.visitReference = /** |
| * @param {?} metadata |
| * @param {?} context |
| * @return {?} |
| */ |
| function (metadata, context) { |
| return { |
| type: 8 /* Reference */, |
| animation: visitDslNode(this, normalizeAnimationEntry(metadata.animation), context), |
| options: normalizeAnimationOptions(metadata.options) |
| }; |
| }; |
| /** |
| * @param {?} metadata |
| * @param {?} context |
| * @return {?} |
| */ |
| AnimationAstBuilderVisitor.prototype.visitAnimateChild = /** |
| * @param {?} metadata |
| * @param {?} context |
| * @return {?} |
| */ |
| function (metadata, context) { |
| context.depCount++; |
| return { |
| type: 9 /* AnimateChild */, |
| options: normalizeAnimationOptions(metadata.options) |
| }; |
| }; |
| /** |
| * @param {?} metadata |
| * @param {?} context |
| * @return {?} |
| */ |
| AnimationAstBuilderVisitor.prototype.visitAnimateRef = /** |
| * @param {?} metadata |
| * @param {?} context |
| * @return {?} |
| */ |
| function (metadata, context) { |
| return { |
| type: 10 /* AnimateRef */, |
| animation: this.visitReference(metadata.animation, context), |
| options: normalizeAnimationOptions(metadata.options) |
| }; |
| }; |
| /** |
| * @param {?} metadata |
| * @param {?} context |
| * @return {?} |
| */ |
| AnimationAstBuilderVisitor.prototype.visitQuery = /** |
| * @param {?} metadata |
| * @param {?} context |
| * @return {?} |
| */ |
| function (metadata, context) { |
| var /** @type {?} */ parentSelector = /** @type {?} */ ((context.currentQuerySelector)); |
| var /** @type {?} */ options = /** @type {?} */ ((metadata.options || {})); |
| context.queryCount++; |
| context.currentQuery = metadata; |
| var _a = normalizeSelector(metadata.selector), selector = _a[0], includeSelf = _a[1]; |
| context.currentQuerySelector = |
| parentSelector.length ? (parentSelector + ' ' + selector) : selector; |
| getOrSetAsInMap(context.collectedStyles, context.currentQuerySelector, {}); |
| var /** @type {?} */ animation = visitDslNode(this, normalizeAnimationEntry(metadata.animation), context); |
| context.currentQuery = null; |
| context.currentQuerySelector = parentSelector; |
| return { |
| type: 11 /* Query */, |
| selector: selector, |
| limit: options.limit || 0, |
| optional: !!options.optional, includeSelf: includeSelf, animation: animation, |
| originalSelector: metadata.selector, |
| options: normalizeAnimationOptions(metadata.options) |
| }; |
| }; |
| /** |
| * @param {?} metadata |
| * @param {?} context |
| * @return {?} |
| */ |
| AnimationAstBuilderVisitor.prototype.visitStagger = /** |
| * @param {?} metadata |
| * @param {?} context |
| * @return {?} |
| */ |
| function (metadata, context) { |
| if (!context.currentQuery) { |
| context.errors.push("stagger() can only be used inside of query()"); |
| } |
| var /** @type {?} */ timings = metadata.timings === 'full' ? |
| { duration: 0, delay: 0, easing: 'full' } : |
| resolveTiming(metadata.timings, context.errors, true); |
| return { |
| type: 12 /* Stagger */, |
| animation: visitDslNode(this, normalizeAnimationEntry(metadata.animation), context), timings: timings, |
| options: null |
| }; |
| }; |
| return AnimationAstBuilderVisitor; |
| }()); |
| /** |
| * @param {?} selector |
| * @return {?} |
| */ |
| function normalizeSelector(selector) { |
| var /** @type {?} */ hasAmpersand = selector.split(/\s*,\s*/).find(function (token) { return token == SELF_TOKEN; }) ? true : false; |
| if (hasAmpersand) { |
| selector = selector.replace(SELF_TOKEN_REGEX, ''); |
| } |
| // the :enter and :leave selectors are filled in at runtime during timeline building |
| selector = selector.replace(/@\*/g, NG_TRIGGER_SELECTOR) |
| .replace(/@\w+/g, function (match) { return NG_TRIGGER_SELECTOR + '-' + match.substr(1); }) |
| .replace(/:animating/g, NG_ANIMATING_SELECTOR); |
| return [selector, hasAmpersand]; |
| } |
| /** |
| * @param {?} obj |
| * @return {?} |
| */ |
| function normalizeParams(obj) { |
| return obj ? copyObj(obj) : null; |
| } |
| var AnimationAstBuilderContext = /** @class */ (function () { |
| function AnimationAstBuilderContext(errors) { |
| this.errors = errors; |
| this.queryCount = 0; |
| this.depCount = 0; |
| this.currentTransition = null; |
| this.currentQuery = null; |
| this.currentQuerySelector = null; |
| this.currentAnimateTimings = null; |
| this.currentTime = 0; |
| this.collectedStyles = {}; |
| this.options = null; |
| } |
| return AnimationAstBuilderContext; |
| }()); |
| /** |
| * @param {?} styles |
| * @return {?} |
| */ |
| function consumeOffset(styles) { |
| if (typeof styles == 'string') |
| return null; |
| var /** @type {?} */ offset = null; |
| if (Array.isArray(styles)) { |
| styles.forEach(function (styleTuple) { |
| if (isObject(styleTuple) && styleTuple.hasOwnProperty('offset')) { |
| var /** @type {?} */ obj = /** @type {?} */ (styleTuple); |
| offset = parseFloat(/** @type {?} */ (obj['offset'])); |
| delete obj['offset']; |
| } |
| }); |
| } |
| else if (isObject(styles) && styles.hasOwnProperty('offset')) { |
| var /** @type {?} */ obj = /** @type {?} */ (styles); |
| offset = parseFloat(/** @type {?} */ (obj['offset'])); |
| delete obj['offset']; |
| } |
| return offset; |
| } |
| /** |
| * @param {?} value |
| * @return {?} |
| */ |
| function isObject(value) { |
| return !Array.isArray(value) && typeof value == 'object'; |
| } |
| /** |
| * @param {?} value |
| * @param {?} errors |
| * @return {?} |
| */ |
| function constructTimingAst(value, errors) { |
| var /** @type {?} */ timings = null; |
| if (value.hasOwnProperty('duration')) { |
| timings = /** @type {?} */ (value); |
| } |
| else if (typeof value == 'number') { |
| var /** @type {?} */ duration = resolveTiming(/** @type {?} */ (value), errors).duration; |
| return makeTimingAst(/** @type {?} */ (duration), 0, ''); |
| } |
| var /** @type {?} */ strValue = /** @type {?} */ (value); |
| var /** @type {?} */ isDynamic = strValue.split(/\s+/).some(function (v) { return v.charAt(0) == '{' && v.charAt(1) == '{'; }); |
| if (isDynamic) { |
| var /** @type {?} */ ast = /** @type {?} */ (makeTimingAst(0, 0, '')); |
| ast.dynamic = true; |
| ast.strValue = strValue; |
| return /** @type {?} */ (ast); |
| } |
| timings = timings || resolveTiming(strValue, errors); |
| return makeTimingAst(timings.duration, timings.delay, timings.easing); |
| } |
| /** |
| * @param {?} options |
| * @return {?} |
| */ |
| function normalizeAnimationOptions(options) { |
| if (options) { |
| options = copyObj(options); |
| if (options['params']) { |
| options['params'] = /** @type {?} */ ((normalizeParams(options['params']))); |
| } |
| } |
| else { |
| options = {}; |
| } |
| return options; |
| } |
| /** |
| * @param {?} duration |
| * @param {?} delay |
| * @param {?} easing |
| * @return {?} |
| */ |
| function makeTimingAst(duration, delay, easing) { |
| return { duration: duration, delay: delay, easing: easing }; |
| } |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes} checked by tsc |
| */ |
| /** |
| * @record |
| */ |
| |
| /** |
| * @param {?} element |
| * @param {?} keyframes |
| * @param {?} preStyleProps |
| * @param {?} postStyleProps |
| * @param {?} duration |
| * @param {?} delay |
| * @param {?=} easing |
| * @param {?=} subTimeline |
| * @return {?} |
| */ |
| function createTimelineInstruction(element, keyframes, preStyleProps, postStyleProps, duration, delay, easing, subTimeline) { |
| if (easing === void 0) { easing = null; } |
| if (subTimeline === void 0) { subTimeline = false; } |
| return { |
| type: 1 /* TimelineAnimation */, |
| element: element, |
| keyframes: keyframes, |
| preStyleProps: preStyleProps, |
| postStyleProps: postStyleProps, |
| duration: duration, |
| delay: delay, |
| totalTime: duration + delay, easing: easing, subTimeline: subTimeline |
| }; |
| } |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes} checked by tsc |
| */ |
| var ElementInstructionMap = /** @class */ (function () { |
| function ElementInstructionMap() { |
| this._map = new Map(); |
| } |
| /** |
| * @param {?} element |
| * @return {?} |
| */ |
| ElementInstructionMap.prototype.consume = /** |
| * @param {?} element |
| * @return {?} |
| */ |
| function (element) { |
| var /** @type {?} */ instructions = this._map.get(element); |
| if (instructions) { |
| this._map.delete(element); |
| } |
| else { |
| instructions = []; |
| } |
| return instructions; |
| }; |
| /** |
| * @param {?} element |
| * @param {?} instructions |
| * @return {?} |
| */ |
| ElementInstructionMap.prototype.append = /** |
| * @param {?} element |
| * @param {?} instructions |
| * @return {?} |
| */ |
| function (element, instructions) { |
| var /** @type {?} */ existingInstructions = this._map.get(element); |
| if (!existingInstructions) { |
| this._map.set(element, existingInstructions = []); |
| } |
| existingInstructions.push.apply(existingInstructions, instructions); |
| }; |
| /** |
| * @param {?} element |
| * @return {?} |
| */ |
| ElementInstructionMap.prototype.has = /** |
| * @param {?} element |
| * @return {?} |
| */ |
| function (element) { return this._map.has(element); }; |
| /** |
| * @return {?} |
| */ |
| ElementInstructionMap.prototype.clear = /** |
| * @return {?} |
| */ |
| function () { this._map.clear(); }; |
| return ElementInstructionMap; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes} checked by tsc |
| */ |
| var ONE_FRAME_IN_MILLISECONDS = 1; |
| var ENTER_TOKEN = ':enter'; |
| var ENTER_TOKEN_REGEX = new RegExp(ENTER_TOKEN, 'g'); |
| var LEAVE_TOKEN = ':leave'; |
| var LEAVE_TOKEN_REGEX = new RegExp(LEAVE_TOKEN, 'g'); |
| /** |
| * @param {?} driver |
| * @param {?} rootElement |
| * @param {?} ast |
| * @param {?} enterClassName |
| * @param {?} leaveClassName |
| * @param {?=} startingStyles |
| * @param {?=} finalStyles |
| * @param {?=} options |
| * @param {?=} subInstructions |
| * @param {?=} errors |
| * @return {?} |
| */ |
| function buildAnimationTimelines(driver, rootElement, ast, enterClassName, leaveClassName, startingStyles, finalStyles, options, subInstructions, errors) { |
| if (startingStyles === void 0) { startingStyles = {}; } |
| if (finalStyles === void 0) { finalStyles = {}; } |
| if (errors === void 0) { errors = []; } |
| return new AnimationTimelineBuilderVisitor().buildKeyframes(driver, rootElement, ast, enterClassName, leaveClassName, startingStyles, finalStyles, options, subInstructions, errors); |
| } |
| var AnimationTimelineBuilderVisitor = /** @class */ (function () { |
| function AnimationTimelineBuilderVisitor() { |
| } |
| /** |
| * @param {?} driver |
| * @param {?} rootElement |
| * @param {?} ast |
| * @param {?} enterClassName |
| * @param {?} leaveClassName |
| * @param {?} startingStyles |
| * @param {?} finalStyles |
| * @param {?} options |
| * @param {?=} subInstructions |
| * @param {?=} errors |
| * @return {?} |
| */ |
| AnimationTimelineBuilderVisitor.prototype.buildKeyframes = /** |
| * @param {?} driver |
| * @param {?} rootElement |
| * @param {?} ast |
| * @param {?} enterClassName |
| * @param {?} leaveClassName |
| * @param {?} startingStyles |
| * @param {?} finalStyles |
| * @param {?} options |
| * @param {?=} subInstructions |
| * @param {?=} errors |
| * @return {?} |
| */ |
| function (driver, rootElement, ast, enterClassName, leaveClassName, startingStyles, finalStyles, options, subInstructions, errors) { |
| if (errors === void 0) { errors = []; } |
| subInstructions = subInstructions || new ElementInstructionMap(); |
| var /** @type {?} */ context = new AnimationTimelineContext(driver, rootElement, subInstructions, enterClassName, leaveClassName, errors, []); |
| context.options = options; |
| context.currentTimeline.setStyles([startingStyles], null, context.errors, options); |
| visitDslNode(this, ast, context); |
| // this checks to see if an actual animation happened |
| var /** @type {?} */ timelines = context.timelines.filter(function (timeline) { return timeline.containsAnimation(); }); |
| if (timelines.length && Object.keys(finalStyles).length) { |
| var /** @type {?} */ tl = timelines[timelines.length - 1]; |
| if (!tl.allowOnlyTimelineStyles()) { |
| tl.setStyles([finalStyles], null, context.errors, options); |
| } |
| } |
| return timelines.length ? timelines.map(function (timeline) { return timeline.buildKeyframes(); }) : |
| [createTimelineInstruction(rootElement, [], [], [], 0, 0, '', false)]; |
| }; |
| /** |
| * @param {?} ast |
| * @param {?} context |
| * @return {?} |
| */ |
| AnimationTimelineBuilderVisitor.prototype.visitTrigger = /** |
| * @param {?} ast |
| * @param {?} context |
| * @return {?} |
| */ |
| function (ast, context) { |
| // these values are not visited in this AST |
| }; |
| /** |
| * @param {?} ast |
| * @param {?} context |
| * @return {?} |
| */ |
| AnimationTimelineBuilderVisitor.prototype.visitState = /** |
| * @param {?} ast |
| * @param {?} context |
| * @return {?} |
| */ |
| function (ast, context) { |
| // these values are not visited in this AST |
| }; |
| /** |
| * @param {?} ast |
| * @param {?} context |
| * @return {?} |
| */ |
| AnimationTimelineBuilderVisitor.prototype.visitTransition = /** |
| * @param {?} ast |
| * @param {?} context |
| * @return {?} |
| */ |
| function (ast, context) { |
| // these values are not visited in this AST |
| }; |
| /** |
| * @param {?} ast |
| * @param {?} context |
| * @return {?} |
| */ |
| AnimationTimelineBuilderVisitor.prototype.visitAnimateChild = /** |
| * @param {?} ast |
| * @param {?} context |
| * @return {?} |
| */ |
| function (ast, context) { |
| var /** @type {?} */ elementInstructions = context.subInstructions.consume(context.element); |
| if (elementInstructions) { |
| var /** @type {?} */ innerContext = context.createSubContext(ast.options); |
| var /** @type {?} */ startTime = context.currentTimeline.currentTime; |
| var /** @type {?} */ endTime = this._visitSubInstructions(elementInstructions, innerContext, /** @type {?} */ (innerContext.options)); |
| if (startTime != endTime) { |
| // we do this on the upper context because we created a sub context for |
| // the sub child animations |
| context.transformIntoNewTimeline(endTime); |
| } |
| } |
| context.previousNode = ast; |
| }; |
| /** |
| * @param {?} ast |
| * @param {?} context |
| * @return {?} |
| */ |
| AnimationTimelineBuilderVisitor.prototype.visitAnimateRef = /** |
| * @param {?} ast |
| * @param {?} context |
| * @return {?} |
| */ |
| function (ast, context) { |
| var /** @type {?} */ innerContext = context.createSubContext(ast.options); |
| innerContext.transformIntoNewTimeline(); |
| this.visitReference(ast.animation, innerContext); |
| context.transformIntoNewTimeline(innerContext.currentTimeline.currentTime); |
| context.previousNode = ast; |
| }; |
| /** |
| * @param {?} instructions |
| * @param {?} context |
| * @param {?} options |
| * @return {?} |
| */ |
| AnimationTimelineBuilderVisitor.prototype._visitSubInstructions = /** |
| * @param {?} instructions |
| * @param {?} context |
| * @param {?} options |
| * @return {?} |
| */ |
| function (instructions, context, options) { |
| var /** @type {?} */ startTime = context.currentTimeline.currentTime; |
| var /** @type {?} */ furthestTime = startTime; |
| // this is a special-case for when a user wants to skip a sub |
| // animation from being fired entirely. |
| var /** @type {?} */ duration = options.duration != null ? resolveTimingValue(options.duration) : null; |
| var /** @type {?} */ delay = options.delay != null ? resolveTimingValue(options.delay) : null; |
| if (duration !== 0) { |
| instructions.forEach(function (instruction) { |
| var /** @type {?} */ instructionTimings = context.appendInstructionToTimeline(instruction, duration, delay); |
| furthestTime = |
| Math.max(furthestTime, instructionTimings.duration + instructionTimings.delay); |
| }); |
| } |
| return furthestTime; |
| }; |
| /** |
| * @param {?} ast |
| * @param {?} context |
| * @return {?} |
| */ |
| AnimationTimelineBuilderVisitor.prototype.visitReference = /** |
| * @param {?} ast |
| * @param {?} context |
| * @return {?} |
| */ |
| function (ast, context) { |
| context.updateOptions(ast.options, true); |
| visitDslNode(this, ast.animation, context); |
| context.previousNode = ast; |
| }; |
| /** |
| * @param {?} ast |
| * @param {?} context |
| * @return {?} |
| */ |
| AnimationTimelineBuilderVisitor.prototype.visitSequence = /** |
| * @param {?} ast |
| * @param {?} context |
| * @return {?} |
| */ |
| function (ast, context) { |
| var _this = this; |
| var /** @type {?} */ subContextCount = context.subContextCount; |
| var /** @type {?} */ ctx = context; |
| var /** @type {?} */ options = ast.options; |
| if (options && (options.params || options.delay)) { |
| ctx = context.createSubContext(options); |
| ctx.transformIntoNewTimeline(); |
| if (options.delay != null) { |
| if (ctx.previousNode.type == 6 /* Style */) { |
| ctx.currentTimeline.snapshotCurrentStyles(); |
| ctx.previousNode = DEFAULT_NOOP_PREVIOUS_NODE; |
| } |
| var /** @type {?} */ delay = resolveTimingValue(options.delay); |
| ctx.delayNextStep(delay); |
| } |
| } |
| if (ast.steps.length) { |
| ast.steps.forEach(function (s) { return visitDslNode(_this, s, ctx); }); |
| // this is here just incase the inner steps only contain or end with a style() call |
| ctx.currentTimeline.applyStylesToKeyframe(); |
| // this means that some animation function within the sequence |
| // ended up creating a sub timeline (which means the current |
| // timeline cannot overlap with the contents of the sequence) |
| if (ctx.subContextCount > subContextCount) { |
| ctx.transformIntoNewTimeline(); |
| } |
| } |
| context.previousNode = ast; |
| }; |
| /** |
| * @param {?} ast |
| * @param {?} context |
| * @return {?} |
| */ |
| AnimationTimelineBuilderVisitor.prototype.visitGroup = /** |
| * @param {?} ast |
| * @param {?} context |
| * @return {?} |
| */ |
| function (ast, context) { |
| var _this = this; |
| var /** @type {?} */ innerTimelines = []; |
| var /** @type {?} */ furthestTime = context.currentTimeline.currentTime; |
| var /** @type {?} */ delay = ast.options && ast.options.delay ? resolveTimingValue(ast.options.delay) : 0; |
| ast.steps.forEach(function (s) { |
| var /** @type {?} */ innerContext = context.createSubContext(ast.options); |
| if (delay) { |
| innerContext.delayNextStep(delay); |
| } |
| visitDslNode(_this, s, innerContext); |
| furthestTime = Math.max(furthestTime, innerContext.currentTimeline.currentTime); |
| innerTimelines.push(innerContext.currentTimeline); |
| }); |
| // this operation is run after the AST loop because otherwise |
| // if the parent timeline's collected styles were updated then |
| // it would pass in invalid data into the new-to-be forked items |
| innerTimelines.forEach(function (timeline) { return context.currentTimeline.mergeTimelineCollectedStyles(timeline); }); |
| context.transformIntoNewTimeline(furthestTime); |
| context.previousNode = ast; |
| }; |
| /** |
| * @param {?} ast |
| * @param {?} context |
| * @return {?} |
| */ |
| AnimationTimelineBuilderVisitor.prototype._visitTiming = /** |
| * @param {?} ast |
| * @param {?} context |
| * @return {?} |
| */ |
| function (ast, context) { |
| if ((/** @type {?} */ (ast)).dynamic) { |
| var /** @type {?} */ strValue = (/** @type {?} */ (ast)).strValue; |
| var /** @type {?} */ timingValue = context.params ? interpolateParams(strValue, context.params, context.errors) : strValue; |
| return resolveTiming(timingValue, context.errors); |
| } |
| else { |
| return { duration: ast.duration, delay: ast.delay, easing: ast.easing }; |
| } |
| }; |
| /** |
| * @param {?} ast |
| * @param {?} context |
| * @return {?} |
| */ |
| AnimationTimelineBuilderVisitor.prototype.visitAnimate = /** |
| * @param {?} ast |
| * @param {?} context |
| * @return {?} |
| */ |
| function (ast, context) { |
| var /** @type {?} */ timings = context.currentAnimateTimings = this._visitTiming(ast.timings, context); |
| var /** @type {?} */ timeline = context.currentTimeline; |
| if (timings.delay) { |
| context.incrementTime(timings.delay); |
| timeline.snapshotCurrentStyles(); |
| } |
| var /** @type {?} */ style$$1 = ast.style; |
| if (style$$1.type == 5 /* Keyframes */) { |
| this.visitKeyframes(style$$1, context); |
| } |
| else { |
| context.incrementTime(timings.duration); |
| this.visitStyle(/** @type {?} */ (style$$1), context); |
| timeline.applyStylesToKeyframe(); |
| } |
| context.currentAnimateTimings = null; |
| context.previousNode = ast; |
| }; |
| /** |
| * @param {?} ast |
| * @param {?} context |
| * @return {?} |
| */ |
| AnimationTimelineBuilderVisitor.prototype.visitStyle = /** |
| * @param {?} ast |
| * @param {?} context |
| * @return {?} |
| */ |
| function (ast, context) { |
| var /** @type {?} */ timeline = context.currentTimeline; |
| var /** @type {?} */ timings = /** @type {?} */ ((context.currentAnimateTimings)); |
| // this is a special case for when a style() call |
| // directly follows an animate() call (but not inside of an animate() call) |
| if (!timings && timeline.getCurrentStyleProperties().length) { |
| timeline.forwardFrame(); |
| } |
| var /** @type {?} */ easing = (timings && timings.easing) || ast.easing; |
| if (ast.isEmptyStep) { |
| timeline.applyEmptyStep(easing); |
| } |
| else { |
| timeline.setStyles(ast.styles, easing, context.errors, context.options); |
| } |
| context.previousNode = ast; |
| }; |
| /** |
| * @param {?} ast |
| * @param {?} context |
| * @return {?} |
| */ |
| AnimationTimelineBuilderVisitor.prototype.visitKeyframes = /** |
| * @param {?} ast |
| * @param {?} context |
| * @return {?} |
| */ |
| function (ast, context) { |
| var /** @type {?} */ currentAnimateTimings = /** @type {?} */ ((context.currentAnimateTimings)); |
| var /** @type {?} */ startTime = (/** @type {?} */ ((context.currentTimeline))).duration; |
| var /** @type {?} */ duration = currentAnimateTimings.duration; |
| var /** @type {?} */ innerContext = context.createSubContext(); |
| var /** @type {?} */ innerTimeline = innerContext.currentTimeline; |
| innerTimeline.easing = currentAnimateTimings.easing; |
| ast.styles.forEach(function (step) { |
| var /** @type {?} */ offset = step.offset || 0; |
| innerTimeline.forwardTime(offset * duration); |
| innerTimeline.setStyles(step.styles, step.easing, context.errors, context.options); |
| innerTimeline.applyStylesToKeyframe(); |
| }); |
| // this will ensure that the parent timeline gets all the styles from |
| // the child even if the new timeline below is not used |
| context.currentTimeline.mergeTimelineCollectedStyles(innerTimeline); |
| // we do this because the window between this timeline and the sub timeline |
| // should ensure that the styles within are exactly the same as they were before |
| context.transformIntoNewTimeline(startTime + duration); |
| context.previousNode = ast; |
| }; |
| /** |
| * @param {?} ast |
| * @param {?} context |
| * @return {?} |
| */ |
| AnimationTimelineBuilderVisitor.prototype.visitQuery = /** |
| * @param {?} ast |
| * @param {?} context |
| * @return {?} |
| */ |
| function (ast, context) { |
| var _this = this; |
| // in the event that the first step before this is a style step we need |
| // to ensure the styles are applied before the children are animated |
| var /** @type {?} */ startTime = context.currentTimeline.currentTime; |
| var /** @type {?} */ options = /** @type {?} */ ((ast.options || {})); |
| var /** @type {?} */ delay = options.delay ? resolveTimingValue(options.delay) : 0; |
| if (delay && (context.previousNode.type === 6 /* Style */ || |
| (startTime == 0 && context.currentTimeline.getCurrentStyleProperties().length))) { |
| context.currentTimeline.snapshotCurrentStyles(); |
| context.previousNode = DEFAULT_NOOP_PREVIOUS_NODE; |
| } |
| var /** @type {?} */ furthestTime = startTime; |
| var /** @type {?} */ elms = context.invokeQuery(ast.selector, ast.originalSelector, ast.limit, ast.includeSelf, options.optional ? true : false, context.errors); |
| context.currentQueryTotal = elms.length; |
| var /** @type {?} */ sameElementTimeline = null; |
| elms.forEach(function (element, i) { |
| context.currentQueryIndex = i; |
| var /** @type {?} */ innerContext = context.createSubContext(ast.options, element); |
| if (delay) { |
| innerContext.delayNextStep(delay); |
| } |
| if (element === context.element) { |
| sameElementTimeline = innerContext.currentTimeline; |
| } |
| visitDslNode(_this, ast.animation, innerContext); |
| // this is here just incase the inner steps only contain or end |
| // with a style() call (which is here to signal that this is a preparatory |
| // call to style an element before it is animated again) |
| innerContext.currentTimeline.applyStylesToKeyframe(); |
| var /** @type {?} */ endTime = innerContext.currentTimeline.currentTime; |
| furthestTime = Math.max(furthestTime, endTime); |
| }); |
| context.currentQueryIndex = 0; |
| context.currentQueryTotal = 0; |
| context.transformIntoNewTimeline(furthestTime); |
| if (sameElementTimeline) { |
| context.currentTimeline.mergeTimelineCollectedStyles(sameElementTimeline); |
| context.currentTimeline.snapshotCurrentStyles(); |
| } |
| context.previousNode = ast; |
| }; |
| /** |
| * @param {?} ast |
| * @param {?} context |
| * @return {?} |
| */ |
| AnimationTimelineBuilderVisitor.prototype.visitStagger = /** |
| * @param {?} ast |
| * @param {?} context |
| * @return {?} |
| */ |
| function (ast, context) { |
| var /** @type {?} */ parentContext = /** @type {?} */ ((context.parentContext)); |
| var /** @type {?} */ tl = context.currentTimeline; |
| var /** @type {?} */ timings = ast.timings; |
| var /** @type {?} */ duration = Math.abs(timings.duration); |
| var /** @type {?} */ maxTime = duration * (context.currentQueryTotal - 1); |
| var /** @type {?} */ delay = duration * context.currentQueryIndex; |
| var /** @type {?} */ staggerTransformer = timings.duration < 0 ? 'reverse' : timings.easing; |
| switch (staggerTransformer) { |
| case 'reverse': |
| delay = maxTime - delay; |
| break; |
| case 'full': |
| delay = parentContext.currentStaggerTime; |
| break; |
| } |
| var /** @type {?} */ timeline = context.currentTimeline; |
| if (delay) { |
| timeline.delayNextStep(delay); |
| } |
| var /** @type {?} */ startingTime = timeline.currentTime; |
| visitDslNode(this, ast.animation, context); |
| context.previousNode = ast; |
| // time = duration + delay |
| // the reason why this computation is so complex is because |
| // the inner timeline may either have a delay value or a stretched |
| // keyframe depending on if a subtimeline is not used or is used. |
| parentContext.currentStaggerTime = |
| (tl.currentTime - startingTime) + (tl.startTime - parentContext.currentTimeline.startTime); |
| }; |
| return AnimationTimelineBuilderVisitor; |
| }()); |
| var DEFAULT_NOOP_PREVIOUS_NODE = /** @type {?} */ ({}); |
| var AnimationTimelineContext = /** @class */ (function () { |
| function AnimationTimelineContext(_driver, element, subInstructions, _enterClassName, _leaveClassName, errors, timelines, initialTimeline) { |
| this._driver = _driver; |
| this.element = element; |
| this.subInstructions = subInstructions; |
| this._enterClassName = _enterClassName; |
| this._leaveClassName = _leaveClassName; |
| this.errors = errors; |
| this.timelines = timelines; |
| this.parentContext = null; |
| this.currentAnimateTimings = null; |
| this.previousNode = DEFAULT_NOOP_PREVIOUS_NODE; |
| this.subContextCount = 0; |
| this.options = {}; |
| this.currentQueryIndex = 0; |
| this.currentQueryTotal = 0; |
| this.currentStaggerTime = 0; |
| this.currentTimeline = initialTimeline || new TimelineBuilder(this._driver, element, 0); |
| timelines.push(this.currentTimeline); |
| } |
| Object.defineProperty(AnimationTimelineContext.prototype, "params", { |
| get: /** |
| * @return {?} |
| */ |
| function () { return this.options.params; }, |
| enumerable: true, |
| configurable: true |
| }); |
| /** |
| * @param {?} options |
| * @param {?=} skipIfExists |
| * @return {?} |
| */ |
| AnimationTimelineContext.prototype.updateOptions = /** |
| * @param {?} options |
| * @param {?=} skipIfExists |
| * @return {?} |
| */ |
| function (options, skipIfExists) { |
| var _this = this; |
| if (!options) |
| return; |
| var /** @type {?} */ newOptions = /** @type {?} */ (options); |
| var /** @type {?} */ optionsToUpdate = this.options; |
| // NOTE: this will get patched up when other animation methods support duration overrides |
| if (newOptions.duration != null) { |
| (/** @type {?} */ (optionsToUpdate)).duration = resolveTimingValue(newOptions.duration); |
| } |
| if (newOptions.delay != null) { |
| optionsToUpdate.delay = resolveTimingValue(newOptions.delay); |
| } |
| var /** @type {?} */ newParams = newOptions.params; |
| if (newParams) { |
| var /** @type {?} */ paramsToUpdate_1 = /** @type {?} */ ((optionsToUpdate.params)); |
| if (!paramsToUpdate_1) { |
| paramsToUpdate_1 = this.options.params = {}; |
| } |
| Object.keys(newParams).forEach(function (name) { |
| if (!skipIfExists || !paramsToUpdate_1.hasOwnProperty(name)) { |
| paramsToUpdate_1[name] = interpolateParams(newParams[name], paramsToUpdate_1, _this.errors); |
| } |
| }); |
| } |
| }; |
| /** |
| * @return {?} |
| */ |
| AnimationTimelineContext.prototype._copyOptions = /** |
| * @return {?} |
| */ |
| function () { |
| var /** @type {?} */ options = {}; |
| if (this.options) { |
| var /** @type {?} */ oldParams_1 = this.options.params; |
| if (oldParams_1) { |
| var /** @type {?} */ params_1 = options['params'] = {}; |
| Object.keys(oldParams_1).forEach(function (name) { params_1[name] = oldParams_1[name]; }); |
| } |
| } |
| return options; |
| }; |
| /** |
| * @param {?=} options |
| * @param {?=} element |
| * @param {?=} newTime |
| * @return {?} |
| */ |
| AnimationTimelineContext.prototype.createSubContext = /** |
| * @param {?=} options |
| * @param {?=} element |
| * @param {?=} newTime |
| * @return {?} |
| */ |
| function (options, element, newTime) { |
| if (options === void 0) { options = null; } |
| var /** @type {?} */ target = element || this.element; |
| var /** @type {?} */ context = new AnimationTimelineContext(this._driver, target, this.subInstructions, this._enterClassName, this._leaveClassName, this.errors, this.timelines, this.currentTimeline.fork(target, newTime || 0)); |
| context.previousNode = this.previousNode; |
| context.currentAnimateTimings = this.currentAnimateTimings; |
| context.options = this._copyOptions(); |
| context.updateOptions(options); |
| context.currentQueryIndex = this.currentQueryIndex; |
| context.currentQueryTotal = this.currentQueryTotal; |
| context.parentContext = this; |
| this.subContextCount++; |
| return context; |
| }; |
| /** |
| * @param {?=} newTime |
| * @return {?} |
| */ |
| AnimationTimelineContext.prototype.transformIntoNewTimeline = /** |
| * @param {?=} newTime |
| * @return {?} |
| */ |
| function (newTime) { |
| this.previousNode = DEFAULT_NOOP_PREVIOUS_NODE; |
| this.currentTimeline = this.currentTimeline.fork(this.element, newTime); |
| this.timelines.push(this.currentTimeline); |
| return this.currentTimeline; |
| }; |
| /** |
| * @param {?} instruction |
| * @param {?} duration |
| * @param {?} delay |
| * @return {?} |
| */ |
| AnimationTimelineContext.prototype.appendInstructionToTimeline = /** |
| * @param {?} instruction |
| * @param {?} duration |
| * @param {?} delay |
| * @return {?} |
| */ |
| function (instruction, duration, delay) { |
| var /** @type {?} */ updatedTimings = { |
| duration: duration != null ? duration : instruction.duration, |
| delay: this.currentTimeline.currentTime + (delay != null ? delay : 0) + instruction.delay, |
| easing: '' |
| }; |
| var /** @type {?} */ builder = new SubTimelineBuilder(this._driver, instruction.element, instruction.keyframes, instruction.preStyleProps, instruction.postStyleProps, updatedTimings, instruction.stretchStartingKeyframe); |
| this.timelines.push(builder); |
| return updatedTimings; |
| }; |
| /** |
| * @param {?} time |
| * @return {?} |
| */ |
| AnimationTimelineContext.prototype.incrementTime = /** |
| * @param {?} time |
| * @return {?} |
| */ |
| function (time) { |
| this.currentTimeline.forwardTime(this.currentTimeline.duration + time); |
| }; |
| /** |
| * @param {?} delay |
| * @return {?} |
| */ |
| AnimationTimelineContext.prototype.delayNextStep = /** |
| * @param {?} delay |
| * @return {?} |
| */ |
| function (delay) { |
| // negative delays are not yet supported |
| if (delay > 0) { |
| this.currentTimeline.delayNextStep(delay); |
| } |
| }; |
| /** |
| * @param {?} selector |
| * @param {?} originalSelector |
| * @param {?} limit |
| * @param {?} includeSelf |
| * @param {?} optional |
| * @param {?} errors |
| * @return {?} |
| */ |
| AnimationTimelineContext.prototype.invokeQuery = /** |
| * @param {?} selector |
| * @param {?} originalSelector |
| * @param {?} limit |
| * @param {?} includeSelf |
| * @param {?} optional |
| * @param {?} errors |
| * @return {?} |
| */ |
| function (selector, originalSelector, limit, includeSelf, optional, errors) { |
| var /** @type {?} */ results = []; |
| if (includeSelf) { |
| results.push(this.element); |
| } |
| if (selector.length > 0) { |
| // if :self is only used then the selector is empty |
| selector = selector.replace(ENTER_TOKEN_REGEX, '.' + this._enterClassName); |
| selector = selector.replace(LEAVE_TOKEN_REGEX, '.' + this._leaveClassName); |
| var /** @type {?} */ multi = limit != 1; |
| var /** @type {?} */ elements = this._driver.query(this.element, selector, multi); |
| if (limit !== 0) { |
| elements = limit < 0 ? elements.slice(elements.length + limit, elements.length) : |
| elements.slice(0, limit); |
| } |
| results.push.apply(results, elements); |
| } |
| if (!optional && results.length == 0) { |
| errors.push("`query(\"" + originalSelector + "\")` returned zero elements. (Use `query(\"" + originalSelector + "\", { optional: true })` if you wish to allow this.)"); |
| } |
| return results; |
| }; |
| return AnimationTimelineContext; |
| }()); |
| var TimelineBuilder = /** @class */ (function () { |
| function TimelineBuilder(_driver, element, startTime, _elementTimelineStylesLookup) { |
| this._driver = _driver; |
| this.element = element; |
| this.startTime = startTime; |
| this._elementTimelineStylesLookup = _elementTimelineStylesLookup; |
| this.duration = 0; |
| this._previousKeyframe = {}; |
| this._currentKeyframe = {}; |
| this._keyframes = new Map(); |
| this._styleSummary = {}; |
| this._pendingStyles = {}; |
| this._backFill = {}; |
| this._currentEmptyStepKeyframe = null; |
| if (!this._elementTimelineStylesLookup) { |
| this._elementTimelineStylesLookup = new Map(); |
| } |
| this._localTimelineStyles = Object.create(this._backFill, {}); |
| this._globalTimelineStyles = /** @type {?} */ ((this._elementTimelineStylesLookup.get(element))); |
| if (!this._globalTimelineStyles) { |
| this._globalTimelineStyles = this._localTimelineStyles; |
| this._elementTimelineStylesLookup.set(element, this._localTimelineStyles); |
| } |
| this._loadKeyframe(); |
| } |
| /** |
| * @return {?} |
| */ |
| TimelineBuilder.prototype.containsAnimation = /** |
| * @return {?} |
| */ |
| function () { |
| switch (this._keyframes.size) { |
| case 0: |
| return false; |
| case 1: |
| return this.getCurrentStyleProperties().length > 0; |
| default: |
| return true; |
| } |
| }; |
| /** |
| * @return {?} |
| */ |
| TimelineBuilder.prototype.getCurrentStyleProperties = /** |
| * @return {?} |
| */ |
| function () { return Object.keys(this._currentKeyframe); }; |
| Object.defineProperty(TimelineBuilder.prototype, "currentTime", { |
| get: /** |
| * @return {?} |
| */ |
| function () { return this.startTime + this.duration; }, |
| enumerable: true, |
| configurable: true |
| }); |
| /** |
| * @param {?} delay |
| * @return {?} |
| */ |
| TimelineBuilder.prototype.delayNextStep = /** |
| * @param {?} delay |
| * @return {?} |
| */ |
| function (delay) { |
| // in the event that a style() step is placed right before a stagger() |
| // and that style() step is the very first style() value in the animation |
| // then we need to make a copy of the keyframe [0, copy, 1] so that the delay |
| // properly applies the style() values to work with the stagger... |
| var /** @type {?} */ hasPreStyleStep = this._keyframes.size == 1 && Object.keys(this._pendingStyles).length; |
| if (this.duration || hasPreStyleStep) { |
| this.forwardTime(this.currentTime + delay); |
| if (hasPreStyleStep) { |
| this.snapshotCurrentStyles(); |
| } |
| } |
| else { |
| this.startTime += delay; |
| } |
| }; |
| /** |
| * @param {?} element |
| * @param {?=} currentTime |
| * @return {?} |
| */ |
| TimelineBuilder.prototype.fork = /** |
| * @param {?} element |
| * @param {?=} currentTime |
| * @return {?} |
| */ |
| function (element, currentTime) { |
| this.applyStylesToKeyframe(); |
| return new TimelineBuilder(this._driver, element, currentTime || this.currentTime, this._elementTimelineStylesLookup); |
| }; |
| /** |
| * @return {?} |
| */ |
| TimelineBuilder.prototype._loadKeyframe = /** |
| * @return {?} |
| */ |
| function () { |
| if (this._currentKeyframe) { |
| this._previousKeyframe = this._currentKeyframe; |
| } |
| this._currentKeyframe = /** @type {?} */ ((this._keyframes.get(this.duration))); |
| if (!this._currentKeyframe) { |
| this._currentKeyframe = Object.create(this._backFill, {}); |
| this._keyframes.set(this.duration, this._currentKeyframe); |
| } |
| }; |
| /** |
| * @return {?} |
| */ |
| TimelineBuilder.prototype.forwardFrame = /** |
| * @return {?} |
| */ |
| function () { |
| this.duration += ONE_FRAME_IN_MILLISECONDS; |
| this._loadKeyframe(); |
| }; |
| /** |
| * @param {?} time |
| * @return {?} |
| */ |
| TimelineBuilder.prototype.forwardTime = /** |
| * @param {?} time |
| * @return {?} |
| */ |
| function (time) { |
| this.applyStylesToKeyframe(); |
| this.duration = time; |
| this._loadKeyframe(); |
| }; |
| /** |
| * @param {?} prop |
| * @param {?} value |
| * @return {?} |
| */ |
| TimelineBuilder.prototype._updateStyle = /** |
| * @param {?} prop |
| * @param {?} value |
| * @return {?} |
| */ |
| function (prop, value) { |
| this._localTimelineStyles[prop] = value; |
| this._globalTimelineStyles[prop] = value; |
| this._styleSummary[prop] = { time: this.currentTime, value: value }; |
| }; |
| /** |
| * @return {?} |
| */ |
| TimelineBuilder.prototype.allowOnlyTimelineStyles = /** |
| * @return {?} |
| */ |
| function () { return this._currentEmptyStepKeyframe !== this._currentKeyframe; }; |
| /** |
| * @param {?} easing |
| * @return {?} |
| */ |
| TimelineBuilder.prototype.applyEmptyStep = /** |
| * @param {?} easing |
| * @return {?} |
| */ |
| function (easing) { |
| var _this = this; |
| if (easing) { |
| this._previousKeyframe['easing'] = easing; |
| } |
| // special case for animate(duration): |
| // all missing styles are filled with a `*` value then |
| // if any destination styles are filled in later on the same |
| // keyframe then they will override the overridden styles |
| // We use `_globalTimelineStyles` here because there may be |
| // styles in previous keyframes that are not present in this timeline |
| Object.keys(this._globalTimelineStyles).forEach(function (prop) { |
| _this._backFill[prop] = _this._globalTimelineStyles[prop] || AUTO_STYLE; |
| _this._currentKeyframe[prop] = AUTO_STYLE; |
| }); |
| this._currentEmptyStepKeyframe = this._currentKeyframe; |
| }; |
| /** |
| * @param {?} input |
| * @param {?} easing |
| * @param {?} errors |
| * @param {?=} options |
| * @return {?} |
| */ |
| TimelineBuilder.prototype.setStyles = /** |
| * @param {?} input |
| * @param {?} easing |
| * @param {?} errors |
| * @param {?=} options |
| * @return {?} |
| */ |
| function (input, easing, errors, options) { |
| var _this = this; |
| if (easing) { |
| this._previousKeyframe['easing'] = easing; |
| } |
| var /** @type {?} */ params = (options && options.params) || {}; |
| var /** @type {?} */ styles = flattenStyles(input, this._globalTimelineStyles); |
| Object.keys(styles).forEach(function (prop) { |
| var /** @type {?} */ val = interpolateParams(styles[prop], params, errors); |
| _this._pendingStyles[prop] = val; |
| if (!_this._localTimelineStyles.hasOwnProperty(prop)) { |
| _this._backFill[prop] = _this._globalTimelineStyles.hasOwnProperty(prop) ? |
| _this._globalTimelineStyles[prop] : |
| AUTO_STYLE; |
| } |
| _this._updateStyle(prop, val); |
| }); |
| }; |
| /** |
| * @return {?} |
| */ |
| TimelineBuilder.prototype.applyStylesToKeyframe = /** |
| * @return {?} |
| */ |
| function () { |
| var _this = this; |
| var /** @type {?} */ styles = this._pendingStyles; |
| var /** @type {?} */ props = Object.keys(styles); |
| if (props.length == 0) |
| return; |
| this._pendingStyles = {}; |
| props.forEach(function (prop) { |
| var /** @type {?} */ val = styles[prop]; |
| _this._currentKeyframe[prop] = val; |
| }); |
| Object.keys(this._localTimelineStyles).forEach(function (prop) { |
| if (!_this._currentKeyframe.hasOwnProperty(prop)) { |
| _this._currentKeyframe[prop] = _this._localTimelineStyles[prop]; |
| } |
| }); |
| }; |
| /** |
| * @return {?} |
| */ |
| TimelineBuilder.prototype.snapshotCurrentStyles = /** |
| * @return {?} |
| */ |
| function () { |
| var _this = this; |
| Object.keys(this._localTimelineStyles).forEach(function (prop) { |
| var /** @type {?} */ val = _this._localTimelineStyles[prop]; |
| _this._pendingStyles[prop] = val; |
| _this._updateStyle(prop, val); |
| }); |
| }; |
| /** |
| * @return {?} |
| */ |
| TimelineBuilder.prototype.getFinalKeyframe = /** |
| * @return {?} |
| */ |
| function () { return this._keyframes.get(this.duration); }; |
| Object.defineProperty(TimelineBuilder.prototype, "properties", { |
| get: /** |
| * @return {?} |
| */ |
| function () { |
| var /** @type {?} */ properties = []; |
| for (var /** @type {?} */ prop in this._currentKeyframe) { |
| properties.push(prop); |
| } |
| return properties; |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| /** |
| * @param {?} timeline |
| * @return {?} |
| */ |
| TimelineBuilder.prototype.mergeTimelineCollectedStyles = /** |
| * @param {?} timeline |
| * @return {?} |
| */ |
| function (timeline) { |
| var _this = this; |
| Object.keys(timeline._styleSummary).forEach(function (prop) { |
| var /** @type {?} */ details0 = _this._styleSummary[prop]; |
| var /** @type {?} */ details1 = timeline._styleSummary[prop]; |
| if (!details0 || details1.time > details0.time) { |
| _this._updateStyle(prop, details1.value); |
| } |
| }); |
| }; |
| /** |
| * @return {?} |
| */ |
| TimelineBuilder.prototype.buildKeyframes = /** |
| * @return {?} |
| */ |
| function () { |
| var _this = this; |
| this.applyStylesToKeyframe(); |
| var /** @type {?} */ preStyleProps = new Set(); |
| var /** @type {?} */ postStyleProps = new Set(); |
| var /** @type {?} */ isEmpty = this._keyframes.size === 1 && this.duration === 0; |
| var /** @type {?} */ finalKeyframes = []; |
| this._keyframes.forEach(function (keyframe, time) { |
| var /** @type {?} */ finalKeyframe = copyStyles(keyframe, true); |
| Object.keys(finalKeyframe).forEach(function (prop) { |
| var /** @type {?} */ value = finalKeyframe[prop]; |
| if (value == ɵPRE_STYLE) { |
| preStyleProps.add(prop); |
| } |
| else if (value == AUTO_STYLE) { |
| postStyleProps.add(prop); |
| } |
| }); |
| if (!isEmpty) { |
| finalKeyframe['offset'] = time / _this.duration; |
| } |
| finalKeyframes.push(finalKeyframe); |
| }); |
| var /** @type {?} */ preProps = preStyleProps.size ? iteratorToArray(preStyleProps.values()) : []; |
| var /** @type {?} */ postProps = postStyleProps.size ? iteratorToArray(postStyleProps.values()) : []; |
| // special case for a 0-second animation (which is designed just to place styles onscreen) |
| if (isEmpty) { |
| var /** @type {?} */ kf0 = finalKeyframes[0]; |
| var /** @type {?} */ kf1 = copyObj(kf0); |
| kf0['offset'] = 0; |
| kf1['offset'] = 1; |
| finalKeyframes = [kf0, kf1]; |
| } |
| return createTimelineInstruction(this.element, finalKeyframes, preProps, postProps, this.duration, this.startTime, this.easing, false); |
| }; |
| return TimelineBuilder; |
| }()); |
| var SubTimelineBuilder = /** @class */ (function (_super) { |
| __extends(SubTimelineBuilder, _super); |
| function SubTimelineBuilder(driver, element, keyframes, preStyleProps, postStyleProps, timings, _stretchStartingKeyframe) { |
| if (_stretchStartingKeyframe === void 0) { _stretchStartingKeyframe = false; } |
| var _this = _super.call(this, driver, element, timings.delay) || this; |
| _this.element = element; |
| _this.keyframes = keyframes; |
| _this.preStyleProps = preStyleProps; |
| _this.postStyleProps = postStyleProps; |
| _this._stretchStartingKeyframe = _stretchStartingKeyframe; |
| _this.timings = { duration: timings.duration, delay: timings.delay, easing: timings.easing }; |
| return _this; |
| } |
| /** |
| * @return {?} |
| */ |
| SubTimelineBuilder.prototype.containsAnimation = /** |
| * @return {?} |
| */ |
| function () { return this.keyframes.length > 1; }; |
| /** |
| * @return {?} |
| */ |
| SubTimelineBuilder.prototype.buildKeyframes = /** |
| * @return {?} |
| */ |
| function () { |
| var /** @type {?} */ keyframes = this.keyframes; |
| var _a = this.timings, delay = _a.delay, duration = _a.duration, easing = _a.easing; |
| if (this._stretchStartingKeyframe && delay) { |
| var /** @type {?} */ newKeyframes = []; |
| var /** @type {?} */ totalTime = duration + delay; |
| var /** @type {?} */ startingGap = delay / totalTime; |
| // the original starting keyframe now starts once the delay is done |
| var /** @type {?} */ newFirstKeyframe = copyStyles(keyframes[0], false); |
| newFirstKeyframe['offset'] = 0; |
| newKeyframes.push(newFirstKeyframe); |
| var /** @type {?} */ oldFirstKeyframe = copyStyles(keyframes[0], false); |
| oldFirstKeyframe['offset'] = roundOffset(startingGap); |
| newKeyframes.push(oldFirstKeyframe); |
| /* |
| When the keyframe is stretched then it means that the delay before the animation |
| starts is gone. Instead the first keyframe is placed at the start of the animation |
| and it is then copied to where it starts when the original delay is over. This basically |
| means nothing animates during that delay, but the styles are still renderered. For this |
| to work the original offset values that exist in the original keyframes must be "warped" |
| so that they can take the new keyframe + delay into account. |
| |
| delay=1000, duration=1000, keyframes = 0 .5 1 |
| |
| turns into |
| |
| delay=0, duration=2000, keyframes = 0 .33 .66 1 |
| */ |
| // offsets between 1 ... n -1 are all warped by the keyframe stretch |
| var /** @type {?} */ limit = keyframes.length - 1; |
| for (var /** @type {?} */ i = 1; i <= limit; i++) { |
| var /** @type {?} */ kf = copyStyles(keyframes[i], false); |
| var /** @type {?} */ oldOffset = /** @type {?} */ (kf['offset']); |
| var /** @type {?} */ timeAtKeyframe = delay + oldOffset * duration; |
| kf['offset'] = roundOffset(timeAtKeyframe / totalTime); |
| newKeyframes.push(kf); |
| } |
| // the new starting keyframe should be added at the start |
| duration = totalTime; |
| delay = 0; |
| easing = ''; |
| keyframes = newKeyframes; |
| } |
| return createTimelineInstruction(this.element, keyframes, this.preStyleProps, this.postStyleProps, duration, delay, easing, true); |
| }; |
| return SubTimelineBuilder; |
| }(TimelineBuilder)); |
| /** |
| * @param {?} offset |
| * @param {?=} decimalPoints |
| * @return {?} |
| */ |
| function roundOffset(offset, decimalPoints) { |
| if (decimalPoints === void 0) { decimalPoints = 3; } |
| var /** @type {?} */ mult = Math.pow(10, decimalPoints - 1); |
| return Math.round(offset * mult) / mult; |
| } |
| /** |
| * @param {?} input |
| * @param {?} allStyles |
| * @return {?} |
| */ |
| function flattenStyles(input, allStyles) { |
| var /** @type {?} */ styles = {}; |
| var /** @type {?} */ allProperties; |
| input.forEach(function (token) { |
| if (token === '*') { |
| allProperties = allProperties || Object.keys(allStyles); |
| allProperties.forEach(function (prop) { styles[prop] = AUTO_STYLE; }); |
| } |
| else { |
| copyStyles(/** @type {?} */ (token), false, styles); |
| } |
| }); |
| return styles; |
| } |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes} checked by tsc |
| */ |
| var Animation = /** @class */ (function () { |
| function Animation(_driver, input) { |
| this._driver = _driver; |
| var /** @type {?} */ errors = []; |
| var /** @type {?} */ ast = buildAnimationAst(_driver, input, errors); |
| if (errors.length) { |
| var /** @type {?} */ errorMessage = "animation validation failed:\n" + errors.join("\n"); |
| throw new Error(errorMessage); |
| } |
| this._animationAst = ast; |
| } |
| /** |
| * @param {?} element |
| * @param {?} startingStyles |
| * @param {?} destinationStyles |
| * @param {?} options |
| * @param {?=} subInstructions |
| * @return {?} |
| */ |
| Animation.prototype.buildTimelines = /** |
| * @param {?} element |
| * @param {?} startingStyles |
| * @param {?} destinationStyles |
| * @param {?} options |
| * @param {?=} subInstructions |
| * @return {?} |
| */ |
| function (element, startingStyles, destinationStyles, options, subInstructions) { |
| var /** @type {?} */ start = Array.isArray(startingStyles) ? normalizeStyles(startingStyles) : /** @type {?} */ (startingStyles); |
| var /** @type {?} */ dest = Array.isArray(destinationStyles) ? normalizeStyles(destinationStyles) : /** @type {?} */ (destinationStyles); |
| var /** @type {?} */ errors = []; |
| subInstructions = subInstructions || new ElementInstructionMap(); |
| var /** @type {?} */ result = buildAnimationTimelines(this._driver, element, this._animationAst, ENTER_CLASSNAME, LEAVE_CLASSNAME, start, dest, options, subInstructions, errors); |
| if (errors.length) { |
| var /** @type {?} */ errorMessage = "animation building failed:\n" + errors.join("\n"); |
| throw new Error(errorMessage); |
| } |
| return result; |
| }; |
| return Animation; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes} checked by tsc |
| */ |
| /** |
| * @license |
| * Copyright Google Inc. All Rights Reserved. |
| * |
| * Use of this source code is governed by an MIT-style license that can be |
| * found in the LICENSE file at https://angular.io/license |
| */ |
| /** |
| * \@experimental Animation support is experimental. |
| * @abstract |
| */ |
| var AnimationStyleNormalizer = /** @class */ (function () { |
| function AnimationStyleNormalizer() { |
| } |
| return AnimationStyleNormalizer; |
| }()); |
| /** |
| * \@experimental Animation support is experimental. |
| */ |
| var NoopAnimationStyleNormalizer = /** @class */ (function () { |
| function NoopAnimationStyleNormalizer() { |
| } |
| /** |
| * @param {?} propertyName |
| * @param {?} errors |
| * @return {?} |
| */ |
| NoopAnimationStyleNormalizer.prototype.normalizePropertyName = /** |
| * @param {?} propertyName |
| * @param {?} errors |
| * @return {?} |
| */ |
| function (propertyName, errors) { return propertyName; }; |
| /** |
| * @param {?} userProvidedProperty |
| * @param {?} normalizedProperty |
| * @param {?} value |
| * @param {?} errors |
| * @return {?} |
| */ |
| NoopAnimationStyleNormalizer.prototype.normalizeStyleValue = /** |
| * @param {?} userProvidedProperty |
| * @param {?} normalizedProperty |
| * @param {?} value |
| * @param {?} errors |
| * @return {?} |
| */ |
| function (userProvidedProperty, normalizedProperty, value, errors) { |
| return /** @type {?} */ (value); |
| }; |
| return NoopAnimationStyleNormalizer; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes} checked by tsc |
| */ |
| var WebAnimationsStyleNormalizer = /** @class */ (function (_super) { |
| __extends(WebAnimationsStyleNormalizer, _super); |
| function WebAnimationsStyleNormalizer() { |
| return _super !== null && _super.apply(this, arguments) || this; |
| } |
| /** |
| * @param {?} propertyName |
| * @param {?} errors |
| * @return {?} |
| */ |
| WebAnimationsStyleNormalizer.prototype.normalizePropertyName = /** |
| * @param {?} propertyName |
| * @param {?} errors |
| * @return {?} |
| */ |
| function (propertyName, errors) { |
| return dashCaseToCamelCase(propertyName); |
| }; |
| /** |
| * @param {?} userProvidedProperty |
| * @param {?} normalizedProperty |
| * @param {?} value |
| * @param {?} errors |
| * @return {?} |
| */ |
| WebAnimationsStyleNormalizer.prototype.normalizeStyleValue = /** |
| * @param {?} userProvidedProperty |
| * @param {?} normalizedProperty |
| * @param {?} value |
| * @param {?} errors |
| * @return {?} |
| */ |
| function (userProvidedProperty, normalizedProperty, value, errors) { |
| var /** @type {?} */ unit = ''; |
| var /** @type {?} */ strVal = value.toString().trim(); |
| if (DIMENSIONAL_PROP_MAP[normalizedProperty] && value !== 0 && value !== '0') { |
| if (typeof value === 'number') { |
| unit = 'px'; |
| } |
| else { |
| var /** @type {?} */ valAndSuffixMatch = value.match(/^[+-]?[\d\.]+([a-z]*)$/); |
| if (valAndSuffixMatch && valAndSuffixMatch[1].length == 0) { |
| errors.push("Please provide a CSS unit value for " + userProvidedProperty + ":" + value); |
| } |
| } |
| } |
| return strVal + unit; |
| }; |
| return WebAnimationsStyleNormalizer; |
| }(AnimationStyleNormalizer)); |
| var DIMENSIONAL_PROP_MAP = makeBooleanMap('width,height,minWidth,minHeight,maxWidth,maxHeight,left,top,bottom,right,fontSize,outlineWidth,outlineOffset,paddingTop,paddingLeft,paddingBottom,paddingRight,marginTop,marginLeft,marginBottom,marginRight,borderRadius,borderWidth,borderTopWidth,borderLeftWidth,borderRightWidth,borderBottomWidth,textIndent,perspective' |
| .split(',')); |
| /** |
| * @param {?} keys |
| * @return {?} |
| */ |
| function makeBooleanMap(keys) { |
| var /** @type {?} */ map = {}; |
| keys.forEach(function (key) { return map[key] = true; }); |
| return map; |
| } |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes} checked by tsc |
| */ |
| /** |
| * @record |
| */ |
| |
| /** |
| * @param {?} element |
| * @param {?} triggerName |
| * @param {?} fromState |
| * @param {?} toState |
| * @param {?} isRemovalTransition |
| * @param {?} fromStyles |
| * @param {?} toStyles |
| * @param {?} timelines |
| * @param {?} queriedElements |
| * @param {?} preStyleProps |
| * @param {?} postStyleProps |
| * @param {?=} errors |
| * @return {?} |
| */ |
| function createTransitionInstruction(element, triggerName, fromState, toState, isRemovalTransition, fromStyles, toStyles, timelines, queriedElements, preStyleProps, postStyleProps, errors) { |
| return { |
| type: 0 /* TransitionAnimation */, |
| element: element, |
| triggerName: triggerName, |
| isRemovalTransition: isRemovalTransition, |
| fromState: fromState, |
| fromStyles: fromStyles, |
| toState: toState, |
| toStyles: toStyles, |
| timelines: timelines, |
| queriedElements: queriedElements, |
| preStyleProps: preStyleProps, |
| postStyleProps: postStyleProps, |
| errors: errors |
| }; |
| } |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes} checked by tsc |
| */ |
| var EMPTY_OBJECT = {}; |
| var AnimationTransitionFactory = /** @class */ (function () { |
| function AnimationTransitionFactory(_triggerName, ast, _stateStyles) { |
| this._triggerName = _triggerName; |
| this.ast = ast; |
| this._stateStyles = _stateStyles; |
| } |
| /** |
| * @param {?} currentState |
| * @param {?} nextState |
| * @return {?} |
| */ |
| AnimationTransitionFactory.prototype.match = /** |
| * @param {?} currentState |
| * @param {?} nextState |
| * @return {?} |
| */ |
| function (currentState, nextState) { |
| return oneOrMoreTransitionsMatch(this.ast.matchers, currentState, nextState); |
| }; |
| /** |
| * @param {?} stateName |
| * @param {?} params |
| * @param {?} errors |
| * @return {?} |
| */ |
| AnimationTransitionFactory.prototype.buildStyles = /** |
| * @param {?} stateName |
| * @param {?} params |
| * @param {?} errors |
| * @return {?} |
| */ |
| function (stateName, params, errors) { |
| var /** @type {?} */ backupStateStyler = this._stateStyles['*']; |
| var /** @type {?} */ stateStyler = this._stateStyles[stateName]; |
| var /** @type {?} */ backupStyles = backupStateStyler ? backupStateStyler.buildStyles(params, errors) : {}; |
| return stateStyler ? stateStyler.buildStyles(params, errors) : backupStyles; |
| }; |
| /** |
| * @param {?} driver |
| * @param {?} element |
| * @param {?} currentState |
| * @param {?} nextState |
| * @param {?} enterClassName |
| * @param {?} leaveClassName |
| * @param {?=} currentOptions |
| * @param {?=} nextOptions |
| * @param {?=} subInstructions |
| * @return {?} |
| */ |
| AnimationTransitionFactory.prototype.build = /** |
| * @param {?} driver |
| * @param {?} element |
| * @param {?} currentState |
| * @param {?} nextState |
| * @param {?} enterClassName |
| * @param {?} leaveClassName |
| * @param {?=} currentOptions |
| * @param {?=} nextOptions |
| * @param {?=} subInstructions |
| * @return {?} |
| */ |
| function (driver, element, currentState, nextState, enterClassName, leaveClassName, currentOptions, nextOptions, subInstructions) { |
| var /** @type {?} */ errors = []; |
| var /** @type {?} */ transitionAnimationParams = this.ast.options && this.ast.options.params || EMPTY_OBJECT; |
| var /** @type {?} */ currentAnimationParams = currentOptions && currentOptions.params || EMPTY_OBJECT; |
| var /** @type {?} */ currentStateStyles = this.buildStyles(currentState, currentAnimationParams, errors); |
| var /** @type {?} */ nextAnimationParams = nextOptions && nextOptions.params || EMPTY_OBJECT; |
| var /** @type {?} */ nextStateStyles = this.buildStyles(nextState, nextAnimationParams, errors); |
| var /** @type {?} */ queriedElements = new Set(); |
| var /** @type {?} */ preStyleMap = new Map(); |
| var /** @type {?} */ postStyleMap = new Map(); |
| var /** @type {?} */ isRemoval = nextState === 'void'; |
| var /** @type {?} */ animationOptions = { params: __assign({}, transitionAnimationParams, nextAnimationParams) }; |
| var /** @type {?} */ timelines = buildAnimationTimelines(driver, element, this.ast.animation, enterClassName, leaveClassName, currentStateStyles, nextStateStyles, animationOptions, subInstructions, errors); |
| if (errors.length) { |
| return createTransitionInstruction(element, this._triggerName, currentState, nextState, isRemoval, currentStateStyles, nextStateStyles, [], [], preStyleMap, postStyleMap, errors); |
| } |
| timelines.forEach(function (tl) { |
| var /** @type {?} */ elm = tl.element; |
| var /** @type {?} */ preProps = getOrSetAsInMap(preStyleMap, elm, {}); |
| tl.preStyleProps.forEach(function (prop) { return preProps[prop] = true; }); |
| var /** @type {?} */ postProps = getOrSetAsInMap(postStyleMap, elm, {}); |
| tl.postStyleProps.forEach(function (prop) { return postProps[prop] = true; }); |
| if (elm !== element) { |
| queriedElements.add(elm); |
| } |
| }); |
| var /** @type {?} */ queriedElementsList = iteratorToArray(queriedElements.values()); |
| return createTransitionInstruction(element, this._triggerName, currentState, nextState, isRemoval, currentStateStyles, nextStateStyles, timelines, queriedElementsList, preStyleMap, postStyleMap); |
| }; |
| return AnimationTransitionFactory; |
| }()); |
| /** |
| * @param {?} matchFns |
| * @param {?} currentState |
| * @param {?} nextState |
| * @return {?} |
| */ |
| function oneOrMoreTransitionsMatch(matchFns, currentState, nextState) { |
| return matchFns.some(function (fn) { return fn(currentState, nextState); }); |
| } |
| var AnimationStateStyles = /** @class */ (function () { |
| function AnimationStateStyles(styles, defaultParams) { |
| this.styles = styles; |
| this.defaultParams = defaultParams; |
| } |
| /** |
| * @param {?} params |
| * @param {?} errors |
| * @return {?} |
| */ |
| AnimationStateStyles.prototype.buildStyles = /** |
| * @param {?} params |
| * @param {?} errors |
| * @return {?} |
| */ |
| function (params, errors) { |
| var /** @type {?} */ finalStyles = {}; |
| var /** @type {?} */ combinedParams = copyObj(this.defaultParams); |
| Object.keys(params).forEach(function (key) { |
| var /** @type {?} */ value = params[key]; |
| if (value != null) { |
| combinedParams[key] = value; |
| } |
| }); |
| this.styles.styles.forEach(function (value) { |
| if (typeof value !== 'string') { |
| var /** @type {?} */ styleObj_1 = /** @type {?} */ (value); |
| Object.keys(styleObj_1).forEach(function (prop) { |
| var /** @type {?} */ val = styleObj_1[prop]; |
| if (val.length > 1) { |
| val = interpolateParams(val, combinedParams, errors); |
| } |
| finalStyles[prop] = val; |
| }); |
| } |
| }); |
| return finalStyles; |
| }; |
| return AnimationStateStyles; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes} checked by tsc |
| */ |
| /** |
| * \@experimental Animation support is experimental. |
| * @param {?} name |
| * @param {?} ast |
| * @return {?} |
| */ |
| function buildTrigger(name, ast) { |
| return new AnimationTrigger(name, ast); |
| } |
| /** |
| * \@experimental Animation support is experimental. |
| */ |
| var AnimationTrigger = /** @class */ (function () { |
| function AnimationTrigger(name, ast) { |
| var _this = this; |
| this.name = name; |
| this.ast = ast; |
| this.transitionFactories = []; |
| this.states = {}; |
| ast.states.forEach(function (ast) { |
| var /** @type {?} */ defaultParams = (ast.options && ast.options.params) || {}; |
| _this.states[ast.name] = new AnimationStateStyles(ast.style, defaultParams); |
| }); |
| balanceProperties(this.states, 'true', '1'); |
| balanceProperties(this.states, 'false', '0'); |
| ast.transitions.forEach(function (ast) { |
| _this.transitionFactories.push(new AnimationTransitionFactory(name, ast, _this.states)); |
| }); |
| this.fallbackTransition = createFallbackTransition(name, this.states); |
| } |
| Object.defineProperty(AnimationTrigger.prototype, "containsQueries", { |
| get: /** |
| * @return {?} |
| */ |
| function () { return this.ast.queryCount > 0; }, |
| enumerable: true, |
| configurable: true |
| }); |
| /** |
| * @param {?} currentState |
| * @param {?} nextState |
| * @return {?} |
| */ |
| AnimationTrigger.prototype.matchTransition = /** |
| * @param {?} currentState |
| * @param {?} nextState |
| * @return {?} |
| */ |
| function (currentState, nextState) { |
| var /** @type {?} */ entry = this.transitionFactories.find(function (f) { return f.match(currentState, nextState); }); |
| return entry || null; |
| }; |
| /** |
| * @param {?} currentState |
| * @param {?} params |
| * @param {?} errors |
| * @return {?} |
| */ |
| AnimationTrigger.prototype.matchStyles = /** |
| * @param {?} currentState |
| * @param {?} params |
| * @param {?} errors |
| * @return {?} |
| */ |
| function (currentState, params, errors) { |
| return this.fallbackTransition.buildStyles(currentState, params, errors); |
| }; |
| return AnimationTrigger; |
| }()); |
| /** |
| * @param {?} triggerName |
| * @param {?} states |
| * @return {?} |
| */ |
| function createFallbackTransition(triggerName, states) { |
| var /** @type {?} */ matchers = [function (fromState, toState) { return true; }]; |
| var /** @type {?} */ animation = { type: 2 /* Sequence */, steps: [], options: null }; |
| var /** @type {?} */ transition = { |
| type: 1 /* Transition */, |
| animation: animation, |
| matchers: matchers, |
| options: null, |
| queryCount: 0, |
| depCount: 0 |
| }; |
| return new AnimationTransitionFactory(triggerName, transition, states); |
| } |
| /** |
| * @param {?} obj |
| * @param {?} key1 |
| * @param {?} key2 |
| * @return {?} |
| */ |
| function balanceProperties(obj, key1, key2) { |
| if (obj.hasOwnProperty(key1)) { |
| if (!obj.hasOwnProperty(key2)) { |
| obj[key2] = obj[key1]; |
| } |
| } |
| else if (obj.hasOwnProperty(key2)) { |
| obj[key1] = obj[key2]; |
| } |
| } |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes} checked by tsc |
| */ |
| var EMPTY_INSTRUCTION_MAP = new ElementInstructionMap(); |
| var TimelineAnimationEngine = /** @class */ (function () { |
| function TimelineAnimationEngine(_driver, _normalizer) { |
| this._driver = _driver; |
| this._normalizer = _normalizer; |
| this._animations = {}; |
| this._playersById = {}; |
| this.players = []; |
| } |
| /** |
| * @param {?} id |
| * @param {?} metadata |
| * @return {?} |
| */ |
| TimelineAnimationEngine.prototype.register = /** |
| * @param {?} id |
| * @param {?} metadata |
| * @return {?} |
| */ |
| function (id, metadata) { |
| var /** @type {?} */ errors = []; |
| var /** @type {?} */ ast = buildAnimationAst(this._driver, metadata, errors); |
| if (errors.length) { |
| throw new Error("Unable to build the animation due to the following errors: " + errors.join("\n")); |
| } |
| else { |
| this._animations[id] = ast; |
| } |
| }; |
| /** |
| * @param {?} i |
| * @param {?} preStyles |
| * @param {?=} postStyles |
| * @return {?} |
| */ |
| TimelineAnimationEngine.prototype._buildPlayer = /** |
| * @param {?} i |
| * @param {?} preStyles |
| * @param {?=} postStyles |
| * @return {?} |
| */ |
| function (i, preStyles, postStyles) { |
| var /** @type {?} */ element = i.element; |
| var /** @type {?} */ keyframes = normalizeKeyframes(this._driver, this._normalizer, element, i.keyframes, preStyles, postStyles); |
| return this._driver.animate(element, keyframes, i.duration, i.delay, i.easing, []); |
| }; |
| /** |
| * @param {?} id |
| * @param {?} element |
| * @param {?=} options |
| * @return {?} |
| */ |
| TimelineAnimationEngine.prototype.create = /** |
| * @param {?} id |
| * @param {?} element |
| * @param {?=} options |
| * @return {?} |
| */ |
| function (id, element, options) { |
| var _this = this; |
| if (options === void 0) { options = {}; } |
| var /** @type {?} */ errors = []; |
| var /** @type {?} */ ast = this._animations[id]; |
| var /** @type {?} */ instructions; |
| var /** @type {?} */ autoStylesMap = new Map(); |
| if (ast) { |
| instructions = buildAnimationTimelines(this._driver, element, ast, ENTER_CLASSNAME, LEAVE_CLASSNAME, {}, {}, options, EMPTY_INSTRUCTION_MAP, errors); |
| instructions.forEach(function (inst) { |
| var /** @type {?} */ styles = getOrSetAsInMap(autoStylesMap, inst.element, {}); |
| inst.postStyleProps.forEach(function (prop) { return styles[prop] = null; }); |
| }); |
| } |
| else { |
| errors.push('The requested animation doesn\'t exist or has already been destroyed'); |
| instructions = []; |
| } |
| if (errors.length) { |
| throw new Error("Unable to create the animation due to the following errors: " + errors.join("\n")); |
| } |
| autoStylesMap.forEach(function (styles, element) { |
| Object.keys(styles).forEach(function (prop) { styles[prop] = _this._driver.computeStyle(element, prop, AUTO_STYLE); }); |
| }); |
| var /** @type {?} */ players = instructions.map(function (i) { |
| var /** @type {?} */ styles = autoStylesMap.get(i.element); |
| return _this._buildPlayer(i, {}, styles); |
| }); |
| var /** @type {?} */ player = optimizeGroupPlayer(players); |
| this._playersById[id] = player; |
| player.onDestroy(function () { return _this.destroy(id); }); |
| this.players.push(player); |
| return player; |
| }; |
| /** |
| * @param {?} id |
| * @return {?} |
| */ |
| TimelineAnimationEngine.prototype.destroy = /** |
| * @param {?} id |
| * @return {?} |
| */ |
| function (id) { |
| var /** @type {?} */ player = this._getPlayer(id); |
| player.destroy(); |
| delete this._playersById[id]; |
| var /** @type {?} */ index = this.players.indexOf(player); |
| if (index >= 0) { |
| this.players.splice(index, 1); |
| } |
| }; |
| /** |
| * @param {?} id |
| * @return {?} |
| */ |
| TimelineAnimationEngine.prototype._getPlayer = /** |
| * @param {?} id |
| * @return {?} |
| */ |
| function (id) { |
| var /** @type {?} */ player = this._playersById[id]; |
| if (!player) { |
| throw new Error("Unable to find the timeline player referenced by " + id); |
| } |
| return player; |
| }; |
| /** |
| * @param {?} id |
| * @param {?} element |
| * @param {?} eventName |
| * @param {?} callback |
| * @return {?} |
| */ |
| TimelineAnimationEngine.prototype.listen = /** |
| * @param {?} id |
| * @param {?} element |
| * @param {?} eventName |
| * @param {?} callback |
| * @return {?} |
| */ |
| function (id, element, eventName, callback) { |
| // triggerName, fromState, toState are all ignored for timeline animations |
| var /** @type {?} */ baseEvent = makeAnimationEvent(element, '', '', ''); |
| listenOnPlayer(this._getPlayer(id), eventName, baseEvent, callback); |
| return function () { }; |
| }; |
| /** |
| * @param {?} id |
| * @param {?} element |
| * @param {?} command |
| * @param {?} args |
| * @return {?} |
| */ |
| TimelineAnimationEngine.prototype.command = /** |
| * @param {?} id |
| * @param {?} element |
| * @param {?} command |
| * @param {?} args |
| * @return {?} |
| */ |
| function (id, element, command, args) { |
| if (command == 'register') { |
| this.register(id, /** @type {?} */ (args[0])); |
| return; |
| } |
| if (command == 'create') { |
| var /** @type {?} */ options = /** @type {?} */ ((args[0] || {})); |
| this.create(id, element, options); |
| return; |
| } |
| var /** @type {?} */ player = this._getPlayer(id); |
| switch (command) { |
| case 'play': |
| player.play(); |
| break; |
| case 'pause': |
| player.pause(); |
| break; |
| case 'reset': |
| player.reset(); |
| break; |
| case 'restart': |
| player.restart(); |
| break; |
| case 'finish': |
| player.finish(); |
| break; |
| case 'init': |
| player.init(); |
| break; |
| case 'setPosition': |
| player.setPosition(parseFloat(/** @type {?} */ (args[0]))); |
| break; |
| case 'destroy': |
| this.destroy(id); |
| break; |
| } |
| }; |
| return TimelineAnimationEngine; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes} checked by tsc |
| */ |
| var QUEUED_CLASSNAME = 'ng-animate-queued'; |
| var QUEUED_SELECTOR = '.ng-animate-queued'; |
| var DISABLED_CLASSNAME = 'ng-animate-disabled'; |
| var DISABLED_SELECTOR = '.ng-animate-disabled'; |
| var STAR_CLASSNAME = 'ng-star-inserted'; |
| var STAR_SELECTOR = '.ng-star-inserted'; |
| var EMPTY_PLAYER_ARRAY = []; |
| var NULL_REMOVAL_STATE = { |
| namespaceId: '', |
| setForRemoval: null, |
| hasAnimation: false, |
| removedBeforeQueried: false |
| }; |
| var NULL_REMOVED_QUERIED_STATE = { |
| namespaceId: '', |
| setForRemoval: null, |
| hasAnimation: false, |
| removedBeforeQueried: true |
| }; |
| /** |
| * @record |
| */ |
| |
| var REMOVAL_FLAG = '__ng_removed'; |
| /** |
| * @record |
| */ |
| |
| var StateValue = /** @class */ (function () { |
| function StateValue(input, namespaceId) { |
| if (namespaceId === void 0) { namespaceId = ''; } |
| this.namespaceId = namespaceId; |
| var /** @type {?} */ isObj = input && input.hasOwnProperty('value'); |
| var /** @type {?} */ value = isObj ? input['value'] : input; |
| this.value = normalizeTriggerValue(value); |
| if (isObj) { |
| var /** @type {?} */ options = copyObj(/** @type {?} */ (input)); |
| delete options['value']; |
| this.options = /** @type {?} */ (options); |
| } |
| else { |
| this.options = {}; |
| } |
| if (!this.options.params) { |
| this.options.params = {}; |
| } |
| } |
| Object.defineProperty(StateValue.prototype, "params", { |
| get: /** |
| * @return {?} |
| */ |
| function () { return /** @type {?} */ (this.options.params); }, |
| enumerable: true, |
| configurable: true |
| }); |
| /** |
| * @param {?} options |
| * @return {?} |
| */ |
| StateValue.prototype.absorbOptions = /** |
| * @param {?} options |
| * @return {?} |
| */ |
| function (options) { |
| var /** @type {?} */ newParams = options.params; |
| if (newParams) { |
| var /** @type {?} */ oldParams_1 = /** @type {?} */ ((this.options.params)); |
| Object.keys(newParams).forEach(function (prop) { |
| if (oldParams_1[prop] == null) { |
| oldParams_1[prop] = newParams[prop]; |
| } |
| }); |
| } |
| }; |
| return StateValue; |
| }()); |
| var VOID_VALUE = 'void'; |
| var DEFAULT_STATE_VALUE = new StateValue(VOID_VALUE); |
| var DELETED_STATE_VALUE = new StateValue('DELETED'); |
| var AnimationTransitionNamespace = /** @class */ (function () { |
| function AnimationTransitionNamespace(id, hostElement, _engine) { |
| this.id = id; |
| this.hostElement = hostElement; |
| this._engine = _engine; |
| this.players = []; |
| this._triggers = {}; |
| this._queue = []; |
| this._elementListeners = new Map(); |
| this._hostClassName = 'ng-tns-' + id; |
| addClass(hostElement, this._hostClassName); |
| } |
| /** |
| * @param {?} element |
| * @param {?} name |
| * @param {?} phase |
| * @param {?} callback |
| * @return {?} |
| */ |
| AnimationTransitionNamespace.prototype.listen = /** |
| * @param {?} element |
| * @param {?} name |
| * @param {?} phase |
| * @param {?} callback |
| * @return {?} |
| */ |
| function (element, name, phase, callback) { |
| var _this = this; |
| if (!this._triggers.hasOwnProperty(name)) { |
| throw new Error("Unable to listen on the animation trigger event \"" + phase + "\" because the animation trigger \"" + name + "\" doesn't exist!"); |
| } |
| if (phase == null || phase.length == 0) { |
| throw new Error("Unable to listen on the animation trigger \"" + name + "\" because the provided event is undefined!"); |
| } |
| if (!isTriggerEventValid(phase)) { |
| throw new Error("The provided animation trigger event \"" + phase + "\" for the animation trigger \"" + name + "\" is not supported!"); |
| } |
| var /** @type {?} */ listeners = getOrSetAsInMap(this._elementListeners, element, []); |
| var /** @type {?} */ data = { name: name, phase: phase, callback: callback }; |
| listeners.push(data); |
| var /** @type {?} */ triggersWithStates = getOrSetAsInMap(this._engine.statesByElement, element, {}); |
| if (!triggersWithStates.hasOwnProperty(name)) { |
| addClass(element, NG_TRIGGER_CLASSNAME); |
| addClass(element, NG_TRIGGER_CLASSNAME + '-' + name); |
| triggersWithStates[name] = DEFAULT_STATE_VALUE; |
| } |
| return function () { |
| // the event listener is removed AFTER the flush has occurred such |
| // that leave animations callbacks can fire (otherwise if the node |
| // is removed in between then the listeners would be deregistered) |
| // the event listener is removed AFTER the flush has occurred such |
| // that leave animations callbacks can fire (otherwise if the node |
| // is removed in between then the listeners would be deregistered) |
| _this._engine.afterFlush(function () { |
| var /** @type {?} */ index = listeners.indexOf(data); |
| if (index >= 0) { |
| listeners.splice(index, 1); |
| } |
| if (!_this._triggers[name]) { |
| delete triggersWithStates[name]; |
| } |
| }); |
| }; |
| }; |
| /** |
| * @param {?} name |
| * @param {?} ast |
| * @return {?} |
| */ |
| AnimationTransitionNamespace.prototype.register = /** |
| * @param {?} name |
| * @param {?} ast |
| * @return {?} |
| */ |
| function (name, ast) { |
| if (this._triggers[name]) { |
| // throw |
| return false; |
| } |
| else { |
| this._triggers[name] = ast; |
| return true; |
| } |
| }; |
| /** |
| * @param {?} name |
| * @return {?} |
| */ |
| AnimationTransitionNamespace.prototype._getTrigger = /** |
| * @param {?} name |
| * @return {?} |
| */ |
| function (name) { |
| var /** @type {?} */ trigger = this._triggers[name]; |
| if (!trigger) { |
| throw new Error("The provided animation trigger \"" + name + "\" has not been registered!"); |
| } |
| return trigger; |
| }; |
| /** |
| * @param {?} element |
| * @param {?} triggerName |
| * @param {?} value |
| * @param {?=} defaultToFallback |
| * @return {?} |
| */ |
| AnimationTransitionNamespace.prototype.trigger = /** |
| * @param {?} element |
| * @param {?} triggerName |
| * @param {?} value |
| * @param {?=} defaultToFallback |
| * @return {?} |
| */ |
| function (element, triggerName, value, defaultToFallback) { |
| var _this = this; |
| if (defaultToFallback === void 0) { defaultToFallback = true; } |
| var /** @type {?} */ trigger = this._getTrigger(triggerName); |
| var /** @type {?} */ player = new TransitionAnimationPlayer(this.id, triggerName, element); |
| var /** @type {?} */ triggersWithStates = this._engine.statesByElement.get(element); |
| if (!triggersWithStates) { |
| addClass(element, NG_TRIGGER_CLASSNAME); |
| addClass(element, NG_TRIGGER_CLASSNAME + '-' + triggerName); |
| this._engine.statesByElement.set(element, triggersWithStates = {}); |
| } |
| var /** @type {?} */ fromState = triggersWithStates[triggerName]; |
| var /** @type {?} */ toState = new StateValue(value, this.id); |
| var /** @type {?} */ isObj = value && value.hasOwnProperty('value'); |
| if (!isObj && fromState) { |
| toState.absorbOptions(fromState.options); |
| } |
| triggersWithStates[triggerName] = toState; |
| if (!fromState) { |
| fromState = DEFAULT_STATE_VALUE; |
| } |
| else if (fromState === DELETED_STATE_VALUE) { |
| return player; |
| } |
| var /** @type {?} */ isRemoval = toState.value === VOID_VALUE; |
| // normally this isn't reached by here, however, if an object expression |
| // is passed in then it may be a new object each time. Comparing the value |
| // is important since that will stay the same despite there being a new object. |
| // The removal arc here is special cased because the same element is triggered |
| // twice in the event that it contains animations on the outer/inner portions |
| // of the host container |
| if (!isRemoval && fromState.value === toState.value) { |
| // this means that despite the value not changing, some inner params |
| // have changed which means that the animation final styles need to be applied |
| if (!objEquals(fromState.params, toState.params)) { |
| var /** @type {?} */ errors = []; |
| var /** @type {?} */ fromStyles_1 = trigger.matchStyles(fromState.value, fromState.params, errors); |
| var /** @type {?} */ toStyles_1 = trigger.matchStyles(toState.value, toState.params, errors); |
| if (errors.length) { |
| this._engine.reportError(errors); |
| } |
| else { |
| this._engine.afterFlush(function () { |
| eraseStyles(element, fromStyles_1); |
| setStyles(element, toStyles_1); |
| }); |
| } |
| } |
| return; |
| } |
| var /** @type {?} */ playersOnElement = getOrSetAsInMap(this._engine.playersByElement, element, []); |
| playersOnElement.forEach(function (player) { |
| // only remove the player if it is queued on the EXACT same trigger/namespace |
| // we only also deal with queued players here because if the animation has |
| // started then we want to keep the player alive until the flush happens |
| // (which is where the previousPlayers are passed into the new palyer) |
| if (player.namespaceId == _this.id && player.triggerName == triggerName && player.queued) { |
| player.destroy(); |
| } |
| }); |
| var /** @type {?} */ transition = trigger.matchTransition(fromState.value, toState.value); |
| var /** @type {?} */ isFallbackTransition = false; |
| if (!transition) { |
| if (!defaultToFallback) |
| return; |
| transition = trigger.fallbackTransition; |
| isFallbackTransition = true; |
| } |
| this._engine.totalQueuedPlayers++; |
| this._queue.push({ element: element, triggerName: triggerName, transition: transition, fromState: fromState, toState: toState, player: player, isFallbackTransition: isFallbackTransition }); |
| if (!isFallbackTransition) { |
| addClass(element, QUEUED_CLASSNAME); |
| player.onStart(function () { removeClass(element, QUEUED_CLASSNAME); }); |
| } |
| player.onDone(function () { |
| var /** @type {?} */ index = _this.players.indexOf(player); |
| if (index >= 0) { |
| _this.players.splice(index, 1); |
| } |
| var /** @type {?} */ players = _this._engine.playersByElement.get(element); |
| if (players) { |
| var /** @type {?} */ index_1 = players.indexOf(player); |
| if (index_1 >= 0) { |
| players.splice(index_1, 1); |
| } |
| } |
| }); |
| this.players.push(player); |
| playersOnElement.push(player); |
| return player; |
| }; |
| /** |
| * @param {?} name |
| * @return {?} |
| */ |
| AnimationTransitionNamespace.prototype.deregister = /** |
| * @param {?} name |
| * @return {?} |
| */ |
| function (name) { |
| var _this = this; |
| delete this._triggers[name]; |
| this._engine.statesByElement.forEach(function (stateMap, element) { delete stateMap[name]; }); |
| this._elementListeners.forEach(function (listeners, element) { |
| _this._elementListeners.set(element, listeners.filter(function (entry) { return entry.name != name; })); |
| }); |
| }; |
| /** |
| * @param {?} element |
| * @return {?} |
| */ |
| AnimationTransitionNamespace.prototype.clearElementCache = /** |
| * @param {?} element |
| * @return {?} |
| */ |
| function (element) { |
| this._engine.statesByElement.delete(element); |
| this._elementListeners.delete(element); |
| var /** @type {?} */ elementPlayers = this._engine.playersByElement.get(element); |
| if (elementPlayers) { |
| elementPlayers.forEach(function (player) { return player.destroy(); }); |
| this._engine.playersByElement.delete(element); |
| } |
| }; |
| /** |
| * @param {?} rootElement |
| * @param {?} context |
| * @param {?=} animate |
| * @return {?} |
| */ |
| AnimationTransitionNamespace.prototype._signalRemovalForInnerTriggers = /** |
| * @param {?} rootElement |
| * @param {?} context |
| * @param {?=} animate |
| * @return {?} |
| */ |
| function (rootElement, context, animate) { |
| var _this = this; |
| if (animate === void 0) { animate = false; } |
| // emulate a leave animation for all inner nodes within this node. |
| // If there are no animations found for any of the nodes then clear the cache |
| // for the element. |
| this._engine.driver.query(rootElement, NG_TRIGGER_SELECTOR, true).forEach(function (elm) { |
| // this means that an inner remove() operation has already kicked off |
| // the animation on this element... |
| if (elm[REMOVAL_FLAG]) |
| return; |
| var /** @type {?} */ namespaces = _this._engine.fetchNamespacesByElement(elm); |
| if (namespaces.size) { |
| namespaces.forEach(function (ns) { return ns.triggerLeaveAnimation(elm, context, false, true); }); |
| } |
| else { |
| _this.clearElementCache(elm); |
| } |
| }); |
| }; |
| /** |
| * @param {?} element |
| * @param {?} context |
| * @param {?=} destroyAfterComplete |
| * @param {?=} defaultToFallback |
| * @return {?} |
| */ |
| AnimationTransitionNamespace.prototype.triggerLeaveAnimation = /** |
| * @param {?} element |
| * @param {?} context |
| * @param {?=} destroyAfterComplete |
| * @param {?=} defaultToFallback |
| * @return {?} |
| */ |
| function (element, context, destroyAfterComplete, defaultToFallback) { |
| var _this = this; |
| var /** @type {?} */ triggerStates = this._engine.statesByElement.get(element); |
| if (triggerStates) { |
| var /** @type {?} */ players_1 = []; |
| Object.keys(triggerStates).forEach(function (triggerName) { |
| // this check is here in the event that an element is removed |
| // twice (both on the host level and the component level) |
| if (_this._triggers[triggerName]) { |
| var /** @type {?} */ player = _this.trigger(element, triggerName, VOID_VALUE, defaultToFallback); |
| if (player) { |
| players_1.push(player); |
| } |
| } |
| }); |
| if (players_1.length) { |
| this._engine.markElementAsRemoved(this.id, element, true, context); |
| if (destroyAfterComplete) { |
| optimizeGroupPlayer(players_1).onDone(function () { return _this._engine.processLeaveNode(element); }); |
| } |
| return true; |
| } |
| } |
| return false; |
| }; |
| /** |
| * @param {?} element |
| * @return {?} |
| */ |
| AnimationTransitionNamespace.prototype.prepareLeaveAnimationListeners = /** |
| * @param {?} element |
| * @return {?} |
| */ |
| function (element) { |
| var _this = this; |
| var /** @type {?} */ listeners = this._elementListeners.get(element); |
| if (listeners) { |
| var /** @type {?} */ visitedTriggers_1 = new Set(); |
| listeners.forEach(function (listener) { |
| var /** @type {?} */ triggerName = listener.name; |
| if (visitedTriggers_1.has(triggerName)) |
| return; |
| visitedTriggers_1.add(triggerName); |
| var /** @type {?} */ trigger = _this._triggers[triggerName]; |
| var /** @type {?} */ transition = trigger.fallbackTransition; |
| var /** @type {?} */ elementStates = /** @type {?} */ ((_this._engine.statesByElement.get(element))); |
| var /** @type {?} */ fromState = elementStates[triggerName] || DEFAULT_STATE_VALUE; |
| var /** @type {?} */ toState = new StateValue(VOID_VALUE); |
| var /** @type {?} */ player = new TransitionAnimationPlayer(_this.id, triggerName, element); |
| _this._engine.totalQueuedPlayers++; |
| _this._queue.push({ |
| element: element, |
| triggerName: triggerName, |
| transition: transition, |
| fromState: fromState, |
| toState: toState, |
| player: player, |
| isFallbackTransition: true |
| }); |
| }); |
| } |
| }; |
| /** |
| * @param {?} element |
| * @param {?} context |
| * @return {?} |
| */ |
| AnimationTransitionNamespace.prototype.removeNode = /** |
| * @param {?} element |
| * @param {?} context |
| * @return {?} |
| */ |
| function (element, context) { |
| var _this = this; |
| var /** @type {?} */ engine = this._engine; |
| if (element.childElementCount) { |
| this._signalRemovalForInnerTriggers(element, context, true); |
| } |
| // this means that a * => VOID animation was detected and kicked off |
| if (this.triggerLeaveAnimation(element, context, true)) |
| return; |
| // find the player that is animating and make sure that the |
| // removal is delayed until that player has completed |
| var /** @type {?} */ containsPotentialParentTransition = false; |
| if (engine.totalAnimations) { |
| var /** @type {?} */ currentPlayers = engine.players.length ? engine.playersByQueriedElement.get(element) : []; |
| // when this `if statement` does not continue forward it means that |
| // a previous animation query has selected the current element and |
| // is animating it. In this situation want to continue fowards and |
| // allow the element to be queued up for animation later. |
| if (currentPlayers && currentPlayers.length) { |
| containsPotentialParentTransition = true; |
| } |
| else { |
| var /** @type {?} */ parent_1 = element; |
| while (parent_1 = parent_1.parentNode) { |
| var /** @type {?} */ triggers = engine.statesByElement.get(parent_1); |
| if (triggers) { |
| containsPotentialParentTransition = true; |
| break; |
| } |
| } |
| } |
| } |
| // at this stage we know that the element will either get removed |
| // during flush or will be picked up by a parent query. Either way |
| // we need to fire the listeners for this element when it DOES get |
| // removed (once the query parent animation is done or after flush) |
| this.prepareLeaveAnimationListeners(element); |
| // whether or not a parent has an animation we need to delay the deferral of the leave |
| // operation until we have more information (which we do after flush() has been called) |
| if (containsPotentialParentTransition) { |
| engine.markElementAsRemoved(this.id, element, false, context); |
| } |
| else { |
| // we do this after the flush has occurred such |
| // that the callbacks can be fired |
| engine.afterFlush(function () { return _this.clearElementCache(element); }); |
| engine.destroyInnerAnimations(element); |
| engine._onRemovalComplete(element, context); |
| } |
| }; |
| /** |
| * @param {?} element |
| * @param {?} parent |
| * @return {?} |
| */ |
| AnimationTransitionNamespace.prototype.insertNode = /** |
| * @param {?} element |
| * @param {?} parent |
| * @return {?} |
| */ |
| function (element, parent) { addClass(element, this._hostClassName); }; |
| /** |
| * @param {?} microtaskId |
| * @return {?} |
| */ |
| AnimationTransitionNamespace.prototype.drainQueuedTransitions = /** |
| * @param {?} microtaskId |
| * @return {?} |
| */ |
| function (microtaskId) { |
| var _this = this; |
| var /** @type {?} */ instructions = []; |
| this._queue.forEach(function (entry) { |
| var /** @type {?} */ player = entry.player; |
| if (player.destroyed) |
| return; |
| var /** @type {?} */ element = entry.element; |
| var /** @type {?} */ listeners = _this._elementListeners.get(element); |
| if (listeners) { |
| listeners.forEach(function (listener) { |
| if (listener.name == entry.triggerName) { |
| var /** @type {?} */ baseEvent = makeAnimationEvent(element, entry.triggerName, entry.fromState.value, entry.toState.value); |
| (/** @type {?} */ (baseEvent))['_data'] = microtaskId; |
| listenOnPlayer(entry.player, listener.phase, baseEvent, listener.callback); |
| } |
| }); |
| } |
| if (player.markedForDestroy) { |
| _this._engine.afterFlush(function () { |
| // now we can destroy the element properly since the event listeners have |
| // been bound to the player |
| player.destroy(); |
| }); |
| } |
| else { |
| instructions.push(entry); |
| } |
| }); |
| this._queue = []; |
| return instructions.sort(function (a, b) { |
| // if depCount == 0 them move to front |
| // otherwise if a contains b then move back |
| var /** @type {?} */ d0 = a.transition.ast.depCount; |
| var /** @type {?} */ d1 = b.transition.ast.depCount; |
| if (d0 == 0 || d1 == 0) { |
| return d0 - d1; |
| } |
| return _this._engine.driver.containsElement(a.element, b.element) ? 1 : -1; |
| }); |
| }; |
| /** |
| * @param {?} context |
| * @return {?} |
| */ |
| AnimationTransitionNamespace.prototype.destroy = /** |
| * @param {?} context |
| * @return {?} |
| */ |
| function (context) { |
| this.players.forEach(function (p) { return p.destroy(); }); |
| this._signalRemovalForInnerTriggers(this.hostElement, context); |
| }; |
| /** |
| * @param {?} element |
| * @return {?} |
| */ |
| AnimationTransitionNamespace.prototype.elementContainsData = /** |
| * @param {?} element |
| * @return {?} |
| */ |
| function (element) { |
| var /** @type {?} */ containsData = false; |
| if (this._elementListeners.has(element)) |
| containsData = true; |
| containsData = |
| (this._queue.find(function (entry) { return entry.element === element; }) ? true : false) || containsData; |
| return containsData; |
| }; |
| return AnimationTransitionNamespace; |
| }()); |
| /** |
| * @record |
| */ |
| |
| var TransitionAnimationEngine = /** @class */ (function () { |
| function TransitionAnimationEngine(driver, _normalizer) { |
| this.driver = driver; |
| this._normalizer = _normalizer; |
| this.players = []; |
| this.newHostElements = new Map(); |
| this.playersByElement = new Map(); |
| this.playersByQueriedElement = new Map(); |
| this.statesByElement = new Map(); |
| this.disabledNodes = new Set(); |
| this.totalAnimations = 0; |
| this.totalQueuedPlayers = 0; |
| this._namespaceLookup = {}; |
| this._namespaceList = []; |
| this._flushFns = []; |
| this._whenQuietFns = []; |
| this.namespacesByHostElement = new Map(); |
| this.collectedEnterElements = []; |
| this.collectedLeaveElements = []; |
| this.onRemovalComplete = function (element, context) { }; |
| } |
| /** @internal */ |
| /** |
| * \@internal |
| * @param {?} element |
| * @param {?} context |
| * @return {?} |
| */ |
| TransitionAnimationEngine.prototype._onRemovalComplete = /** |
| * \@internal |
| * @param {?} element |
| * @param {?} context |
| * @return {?} |
| */ |
| function (element, context) { this.onRemovalComplete(element, context); }; |
| Object.defineProperty(TransitionAnimationEngine.prototype, "queuedPlayers", { |
| get: /** |
| * @return {?} |
| */ |
| function () { |
| var /** @type {?} */ players = []; |
| this._namespaceList.forEach(function (ns) { |
| ns.players.forEach(function (player) { |
| if (player.queued) { |
| players.push(player); |
| } |
| }); |
| }); |
| return players; |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| /** |
| * @param {?} namespaceId |
| * @param {?} hostElement |
| * @return {?} |
| */ |
| TransitionAnimationEngine.prototype.createNamespace = /** |
| * @param {?} namespaceId |
| * @param {?} hostElement |
| * @return {?} |
| */ |
| function (namespaceId, hostElement) { |
| var /** @type {?} */ ns = new AnimationTransitionNamespace(namespaceId, hostElement, this); |
| if (hostElement.parentNode) { |
| this._balanceNamespaceList(ns, hostElement); |
| } |
| else { |
| // defer this later until flush during when the host element has |
| // been inserted so that we know exactly where to place it in |
| // the namespace list |
| this.newHostElements.set(hostElement, ns); |
| // given that this host element is apart of the animation code, it |
| // may or may not be inserted by a parent node that is an of an |
| // animation renderer type. If this happens then we can still have |
| // access to this item when we query for :enter nodes. If the parent |
| // is a renderer then the set data-structure will normalize the entry |
| this.collectEnterElement(hostElement); |
| } |
| return this._namespaceLookup[namespaceId] = ns; |
| }; |
| /** |
| * @param {?} ns |
| * @param {?} hostElement |
| * @return {?} |
| */ |
| TransitionAnimationEngine.prototype._balanceNamespaceList = /** |
| * @param {?} ns |
| * @param {?} hostElement |
| * @return {?} |
| */ |
| function (ns, hostElement) { |
| var /** @type {?} */ limit = this._namespaceList.length - 1; |
| if (limit >= 0) { |
| var /** @type {?} */ found = false; |
| for (var /** @type {?} */ i = limit; i >= 0; i--) { |
| var /** @type {?} */ nextNamespace = this._namespaceList[i]; |
| if (this.driver.containsElement(nextNamespace.hostElement, hostElement)) { |
| this._namespaceList.splice(i + 1, 0, ns); |
| found = true; |
| break; |
| } |
| } |
| if (!found) { |
| this._namespaceList.splice(0, 0, ns); |
| } |
| } |
| else { |
| this._namespaceList.push(ns); |
| } |
| this.namespacesByHostElement.set(hostElement, ns); |
| return ns; |
| }; |
| /** |
| * @param {?} namespaceId |
| * @param {?} hostElement |
| * @return {?} |
| */ |
| TransitionAnimationEngine.prototype.register = /** |
| * @param {?} namespaceId |
| * @param {?} hostElement |
| * @return {?} |
| */ |
| function (namespaceId, hostElement) { |
| var /** @type {?} */ ns = this._namespaceLookup[namespaceId]; |
| if (!ns) { |
| ns = this.createNamespace(namespaceId, hostElement); |
| } |
| return ns; |
| }; |
| /** |
| * @param {?} namespaceId |
| * @param {?} name |
| * @param {?} trigger |
| * @return {?} |
| */ |
| TransitionAnimationEngine.prototype.registerTrigger = /** |
| * @param {?} namespaceId |
| * @param {?} name |
| * @param {?} trigger |
| * @return {?} |
| */ |
| function (namespaceId, name, trigger) { |
| var /** @type {?} */ ns = this._namespaceLookup[namespaceId]; |
| if (ns && ns.register(name, trigger)) { |
| this.totalAnimations++; |
| } |
| }; |
| /** |
| * @param {?} namespaceId |
| * @param {?} context |
| * @return {?} |
| */ |
| TransitionAnimationEngine.prototype.destroy = /** |
| * @param {?} namespaceId |
| * @param {?} context |
| * @return {?} |
| */ |
| function (namespaceId, context) { |
| var _this = this; |
| if (!namespaceId) |
| return; |
| var /** @type {?} */ ns = this._fetchNamespace(namespaceId); |
| this.afterFlush(function () { |
| _this.namespacesByHostElement.delete(ns.hostElement); |
| delete _this._namespaceLookup[namespaceId]; |
| var /** @type {?} */ index = _this._namespaceList.indexOf(ns); |
| if (index >= 0) { |
| _this._namespaceList.splice(index, 1); |
| } |
| }); |
| this.afterFlushAnimationsDone(function () { return ns.destroy(context); }); |
| }; |
| /** |
| * @param {?} id |
| * @return {?} |
| */ |
| TransitionAnimationEngine.prototype._fetchNamespace = /** |
| * @param {?} id |
| * @return {?} |
| */ |
| function (id) { return this._namespaceLookup[id]; }; |
| /** |
| * @param {?} element |
| * @return {?} |
| */ |
| TransitionAnimationEngine.prototype.fetchNamespacesByElement = /** |
| * @param {?} element |
| * @return {?} |
| */ |
| function (element) { |
| // normally there should only be one namespace per element, however |
| // if @triggers are placed on both the component element and then |
| // its host element (within the component code) then there will be |
| // two namespaces returned. We use a set here to simply the dedupe |
| // of namespaces incase there are multiple triggers both the elm and host |
| var /** @type {?} */ namespaces = new Set(); |
| var /** @type {?} */ elementStates = this.statesByElement.get(element); |
| if (elementStates) { |
| var /** @type {?} */ keys = Object.keys(elementStates); |
| for (var /** @type {?} */ i = 0; i < keys.length; i++) { |
| var /** @type {?} */ nsId = elementStates[keys[i]].namespaceId; |
| if (nsId) { |
| var /** @type {?} */ ns = this._fetchNamespace(nsId); |
| if (ns) { |
| namespaces.add(ns); |
| } |
| } |
| } |
| } |
| return namespaces; |
| }; |
| /** |
| * @param {?} namespaceId |
| * @param {?} element |
| * @param {?} name |
| * @param {?} value |
| * @return {?} |
| */ |
| TransitionAnimationEngine.prototype.trigger = /** |
| * @param {?} namespaceId |
| * @param {?} element |
| * @param {?} name |
| * @param {?} value |
| * @return {?} |
| */ |
| function (namespaceId, element, name, value) { |
| if (isElementNode(element)) { |
| this._fetchNamespace(namespaceId).trigger(element, name, value); |
| return true; |
| } |
| return false; |
| }; |
| /** |
| * @param {?} namespaceId |
| * @param {?} element |
| * @param {?} parent |
| * @param {?} insertBefore |
| * @return {?} |
| */ |
| TransitionAnimationEngine.prototype.insertNode = /** |
| * @param {?} namespaceId |
| * @param {?} element |
| * @param {?} parent |
| * @param {?} insertBefore |
| * @return {?} |
| */ |
| function (namespaceId, element, parent, insertBefore) { |
| if (!isElementNode(element)) |
| return; |
| // special case for when an element is removed and reinserted (move operation) |
| // when this occurs we do not want to use the element for deletion later |
| var /** @type {?} */ details = /** @type {?} */ (element[REMOVAL_FLAG]); |
| if (details && details.setForRemoval) { |
| details.setForRemoval = false; |
| } |
| // in the event that the namespaceId is blank then the caller |
| // code does not contain any animation code in it, but it is |
| // just being called so that the node is marked as being inserted |
| if (namespaceId) { |
| this._fetchNamespace(namespaceId).insertNode(element, parent); |
| } |
| // only *directives and host elements are inserted before |
| if (insertBefore) { |
| this.collectEnterElement(element); |
| } |
| }; |
| /** |
| * @param {?} element |
| * @return {?} |
| */ |
| TransitionAnimationEngine.prototype.collectEnterElement = /** |
| * @param {?} element |
| * @return {?} |
| */ |
| function (element) { this.collectedEnterElements.push(element); }; |
| /** |
| * @param {?} element |
| * @param {?} value |
| * @return {?} |
| */ |
| TransitionAnimationEngine.prototype.markElementAsDisabled = /** |
| * @param {?} element |
| * @param {?} value |
| * @return {?} |
| */ |
| function (element, value) { |
| if (value) { |
| if (!this.disabledNodes.has(element)) { |
| this.disabledNodes.add(element); |
| addClass(element, DISABLED_CLASSNAME); |
| } |
| } |
| else if (this.disabledNodes.has(element)) { |
| this.disabledNodes.delete(element); |
| removeClass(element, DISABLED_CLASSNAME); |
| } |
| }; |
| /** |
| * @param {?} namespaceId |
| * @param {?} element |
| * @param {?} context |
| * @return {?} |
| */ |
| TransitionAnimationEngine.prototype.removeNode = /** |
| * @param {?} namespaceId |
| * @param {?} element |
| * @param {?} context |
| * @return {?} |
| */ |
| function (namespaceId, element, context) { |
| if (!isElementNode(element)) { |
| this._onRemovalComplete(element, context); |
| return; |
| } |
| var /** @type {?} */ ns = namespaceId ? this._fetchNamespace(namespaceId) : null; |
| if (ns) { |
| ns.removeNode(element, context); |
| } |
| else { |
| this.markElementAsRemoved(namespaceId, element, false, context); |
| } |
| }; |
| /** |
| * @param {?} namespaceId |
| * @param {?} element |
| * @param {?=} hasAnimation |
| * @param {?=} context |
| * @return {?} |
| */ |
| TransitionAnimationEngine.prototype.markElementAsRemoved = /** |
| * @param {?} namespaceId |
| * @param {?} element |
| * @param {?=} hasAnimation |
| * @param {?=} context |
| * @return {?} |
| */ |
| function (namespaceId, element, hasAnimation, context) { |
| this.collectedLeaveElements.push(element); |
| element[REMOVAL_FLAG] = { |
| namespaceId: namespaceId, |
| setForRemoval: context, hasAnimation: hasAnimation, |
| removedBeforeQueried: false |
| }; |
| }; |
| /** |
| * @param {?} namespaceId |
| * @param {?} element |
| * @param {?} name |
| * @param {?} phase |
| * @param {?} callback |
| * @return {?} |
| */ |
| TransitionAnimationEngine.prototype.listen = /** |
| * @param {?} namespaceId |
| * @param {?} element |
| * @param {?} name |
| * @param {?} phase |
| * @param {?} callback |
| * @return {?} |
| */ |
| function (namespaceId, element, name, phase, callback) { |
| if (isElementNode(element)) { |
| return this._fetchNamespace(namespaceId).listen(element, name, phase, callback); |
| } |
| return function () { }; |
| }; |
| /** |
| * @param {?} entry |
| * @param {?} subTimelines |
| * @param {?} enterClassName |
| * @param {?} leaveClassName |
| * @return {?} |
| */ |
| TransitionAnimationEngine.prototype._buildInstruction = /** |
| * @param {?} entry |
| * @param {?} subTimelines |
| * @param {?} enterClassName |
| * @param {?} leaveClassName |
| * @return {?} |
| */ |
| function (entry, subTimelines, enterClassName, leaveClassName) { |
| return entry.transition.build(this.driver, entry.element, entry.fromState.value, entry.toState.value, enterClassName, leaveClassName, entry.fromState.options, entry.toState.options, subTimelines); |
| }; |
| /** |
| * @param {?} containerElement |
| * @return {?} |
| */ |
| TransitionAnimationEngine.prototype.destroyInnerAnimations = /** |
| * @param {?} containerElement |
| * @return {?} |
| */ |
| function (containerElement) { |
| var _this = this; |
| var /** @type {?} */ elements = this.driver.query(containerElement, NG_TRIGGER_SELECTOR, true); |
| elements.forEach(function (element) { return _this.destroyActiveAnimationsForElement(element); }); |
| if (this.playersByQueriedElement.size == 0) |
| return; |
| elements = this.driver.query(containerElement, NG_ANIMATING_SELECTOR, true); |
| elements.forEach(function (element) { return _this.finishActiveQueriedAnimationOnElement(element); }); |
| }; |
| /** |
| * @param {?} element |
| * @return {?} |
| */ |
| TransitionAnimationEngine.prototype.destroyActiveAnimationsForElement = /** |
| * @param {?} element |
| * @return {?} |
| */ |
| function (element) { |
| var /** @type {?} */ players = this.playersByElement.get(element); |
| if (players) { |
| players.forEach(function (player) { |
| // special case for when an element is set for destruction, but hasn't started. |
| // in this situation we want to delay the destruction until the flush occurs |
| // so that any event listeners attached to the player are triggered. |
| if (player.queued) { |
| player.markedForDestroy = true; |
| } |
| else { |
| player.destroy(); |
| } |
| }); |
| } |
| var /** @type {?} */ stateMap = this.statesByElement.get(element); |
| if (stateMap) { |
| Object.keys(stateMap).forEach(function (triggerName) { return stateMap[triggerName] = DELETED_STATE_VALUE; }); |
| } |
| }; |
| /** |
| * @param {?} element |
| * @return {?} |
| */ |
| TransitionAnimationEngine.prototype.finishActiveQueriedAnimationOnElement = /** |
| * @param {?} element |
| * @return {?} |
| */ |
| function (element) { |
| var /** @type {?} */ players = this.playersByQueriedElement.get(element); |
| if (players) { |
| players.forEach(function (player) { return player.finish(); }); |
| } |
| }; |
| /** |
| * @return {?} |
| */ |
| TransitionAnimationEngine.prototype.whenRenderingDone = /** |
| * @return {?} |
| */ |
| function () { |
| var _this = this; |
| return new Promise(function (resolve) { |
| if (_this.players.length) { |
| return optimizeGroupPlayer(_this.players).onDone(function () { return resolve(); }); |
| } |
| else { |
| resolve(); |
| } |
| }); |
| }; |
| /** |
| * @param {?} element |
| * @return {?} |
| */ |
| TransitionAnimationEngine.prototype.processLeaveNode = /** |
| * @param {?} element |
| * @return {?} |
| */ |
| function (element) { |
| var _this = this; |
| var /** @type {?} */ details = /** @type {?} */ (element[REMOVAL_FLAG]); |
| if (details && details.setForRemoval) { |
| // this will prevent it from removing it twice |
| element[REMOVAL_FLAG] = NULL_REMOVAL_STATE; |
| if (details.namespaceId) { |
| this.destroyInnerAnimations(element); |
| var /** @type {?} */ ns = this._fetchNamespace(details.namespaceId); |
| if (ns) { |
| ns.clearElementCache(element); |
| } |
| } |
| this._onRemovalComplete(element, details.setForRemoval); |
| } |
| if (this.driver.matchesElement(element, DISABLED_SELECTOR)) { |
| this.markElementAsDisabled(element, false); |
| } |
| this.driver.query(element, DISABLED_SELECTOR, true).forEach(function (node) { |
| _this.markElementAsDisabled(element, false); |
| }); |
| }; |
| /** |
| * @param {?=} microtaskId |
| * @return {?} |
| */ |
| TransitionAnimationEngine.prototype.flush = /** |
| * @param {?=} microtaskId |
| * @return {?} |
| */ |
| function (microtaskId) { |
| var _this = this; |
| if (microtaskId === void 0) { microtaskId = -1; } |
| var /** @type {?} */ players = []; |
| if (this.newHostElements.size) { |
| this.newHostElements.forEach(function (ns, element) { return _this._balanceNamespaceList(ns, element); }); |
| this.newHostElements.clear(); |
| } |
| if (this.totalAnimations && this.collectedEnterElements.length) { |
| for (var /** @type {?} */ i = 0; i < this.collectedEnterElements.length; i++) { |
| var /** @type {?} */ elm = this.collectedEnterElements[i]; |
| addClass(elm, STAR_CLASSNAME); |
| } |
| } |
| if (this._namespaceList.length && |
| (this.totalQueuedPlayers || this.collectedLeaveElements.length)) { |
| var /** @type {?} */ cleanupFns = []; |
| try { |
| players = this._flushAnimations(cleanupFns, microtaskId); |
| } |
| finally { |
| for (var /** @type {?} */ i = 0; i < cleanupFns.length; i++) { |
| cleanupFns[i](); |
| } |
| } |
| } |
| else { |
| for (var /** @type {?} */ i = 0; i < this.collectedLeaveElements.length; i++) { |
| var /** @type {?} */ element = this.collectedLeaveElements[i]; |
| this.processLeaveNode(element); |
| } |
| } |
| this.totalQueuedPlayers = 0; |
| this.collectedEnterElements.length = 0; |
| this.collectedLeaveElements.length = 0; |
| this._flushFns.forEach(function (fn) { return fn(); }); |
| this._flushFns = []; |
| if (this._whenQuietFns.length) { |
| // we move these over to a variable so that |
| // if any new callbacks are registered in another |
| // flush they do not populate the existing set |
| var /** @type {?} */ quietFns_1 = this._whenQuietFns; |
| this._whenQuietFns = []; |
| if (players.length) { |
| optimizeGroupPlayer(players).onDone(function () { quietFns_1.forEach(function (fn) { return fn(); }); }); |
| } |
| else { |
| quietFns_1.forEach(function (fn) { return fn(); }); |
| } |
| } |
| }; |
| /** |
| * @param {?} errors |
| * @return {?} |
| */ |
| TransitionAnimationEngine.prototype.reportError = /** |
| * @param {?} errors |
| * @return {?} |
| */ |
| function (errors) { |
| throw new Error("Unable to process animations due to the following failed trigger transitions\n " + errors.join('\n')); |
| }; |
| /** |
| * @param {?} cleanupFns |
| * @param {?} microtaskId |
| * @return {?} |
| */ |
| TransitionAnimationEngine.prototype._flushAnimations = /** |
| * @param {?} cleanupFns |
| * @param {?} microtaskId |
| * @return {?} |
| */ |
| function (cleanupFns, microtaskId) { |
| var _this = this; |
| var /** @type {?} */ subTimelines = new ElementInstructionMap(); |
| var /** @type {?} */ skippedPlayers = []; |
| var /** @type {?} */ skippedPlayersMap = new Map(); |
| var /** @type {?} */ queuedInstructions = []; |
| var /** @type {?} */ queriedElements = new Map(); |
| var /** @type {?} */ allPreStyleElements = new Map(); |
| var /** @type {?} */ allPostStyleElements = new Map(); |
| var /** @type {?} */ disabledElementsSet = new Set(); |
| this.disabledNodes.forEach(function (node) { |
| disabledElementsSet.add(node); |
| var /** @type {?} */ nodesThatAreDisabled = _this.driver.query(node, QUEUED_SELECTOR, true); |
| for (var /** @type {?} */ i_1 = 0; i_1 < nodesThatAreDisabled.length; i_1++) { |
| disabledElementsSet.add(nodesThatAreDisabled[i_1]); |
| } |
| }); |
| var /** @type {?} */ bodyNode = getBodyNode(); |
| var /** @type {?} */ allTriggerElements = Array.from(this.statesByElement.keys()); |
| var /** @type {?} */ enterNodeMap = buildRootMap(allTriggerElements, this.collectedEnterElements); |
| // this must occur before the instructions are built below such that |
| // the :enter queries match the elements (since the timeline queries |
| // are fired during instruction building). |
| var /** @type {?} */ enterNodeMapIds = new Map(); |
| var /** @type {?} */ i = 0; |
| enterNodeMap.forEach(function (nodes, root) { |
| var /** @type {?} */ className = ENTER_CLASSNAME + i++; |
| enterNodeMapIds.set(root, className); |
| nodes.forEach(function (node) { return addClass(node, className); }); |
| }); |
| var /** @type {?} */ allLeaveNodes = []; |
| var /** @type {?} */ mergedLeaveNodes = new Set(); |
| var /** @type {?} */ leaveNodesWithoutAnimations = new Set(); |
| for (var /** @type {?} */ i_2 = 0; i_2 < this.collectedLeaveElements.length; i_2++) { |
| var /** @type {?} */ element = this.collectedLeaveElements[i_2]; |
| var /** @type {?} */ details = /** @type {?} */ (element[REMOVAL_FLAG]); |
| if (details && details.setForRemoval) { |
| allLeaveNodes.push(element); |
| mergedLeaveNodes.add(element); |
| if (details.hasAnimation) { |
| this.driver.query(element, STAR_SELECTOR, true).forEach(function (elm) { return mergedLeaveNodes.add(elm); }); |
| } |
| else { |
| leaveNodesWithoutAnimations.add(element); |
| } |
| } |
| } |
| var /** @type {?} */ leaveNodeMapIds = new Map(); |
| var /** @type {?} */ leaveNodeMap = buildRootMap(allTriggerElements, Array.from(mergedLeaveNodes)); |
| leaveNodeMap.forEach(function (nodes, root) { |
| var /** @type {?} */ className = LEAVE_CLASSNAME + i++; |
| leaveNodeMapIds.set(root, className); |
| nodes.forEach(function (node) { return addClass(node, className); }); |
| }); |
| cleanupFns.push(function () { |
| enterNodeMap.forEach(function (nodes, root) { |
| var /** @type {?} */ className = /** @type {?} */ ((enterNodeMapIds.get(root))); |
| nodes.forEach(function (node) { return removeClass(node, className); }); |
| }); |
| leaveNodeMap.forEach(function (nodes, root) { |
| var /** @type {?} */ className = /** @type {?} */ ((leaveNodeMapIds.get(root))); |
| nodes.forEach(function (node) { return removeClass(node, className); }); |
| }); |
| allLeaveNodes.forEach(function (element) { _this.processLeaveNode(element); }); |
| }); |
| var /** @type {?} */ allPlayers = []; |
| var /** @type {?} */ erroneousTransitions = []; |
| for (var /** @type {?} */ i_3 = this._namespaceList.length - 1; i_3 >= 0; i_3--) { |
| var /** @type {?} */ ns = this._namespaceList[i_3]; |
| ns.drainQueuedTransitions(microtaskId).forEach(function (entry) { |
| var /** @type {?} */ player = entry.player; |
| allPlayers.push(player); |
| var /** @type {?} */ element = entry.element; |
| if (!bodyNode || !_this.driver.containsElement(bodyNode, element)) { |
| player.destroy(); |
| return; |
| } |
| var /** @type {?} */ leaveClassName = /** @type {?} */ ((leaveNodeMapIds.get(element))); |
| var /** @type {?} */ enterClassName = /** @type {?} */ ((enterNodeMapIds.get(element))); |
| var /** @type {?} */ instruction = /** @type {?} */ ((_this._buildInstruction(entry, subTimelines, enterClassName, leaveClassName))); |
| if (instruction.errors && instruction.errors.length) { |
| erroneousTransitions.push(instruction); |
| return; |
| } |
| // if a unmatched transition is queued to go then it SHOULD NOT render |
| // an animation and cancel the previously running animations. |
| if (entry.isFallbackTransition) { |
| player.onStart(function () { return eraseStyles(element, instruction.fromStyles); }); |
| player.onDestroy(function () { return setStyles(element, instruction.toStyles); }); |
| skippedPlayers.push(player); |
| return; |
| } |
| // this means that if a parent animation uses this animation as a sub trigger |
| // then it will instruct the timeline builder to not add a player delay, but |
| // instead stretch the first keyframe gap up until the animation starts. The |
| // reason this is important is to prevent extra initialization styles from being |
| // required by the user in the animation. |
| instruction.timelines.forEach(function (tl) { return tl.stretchStartingKeyframe = true; }); |
| subTimelines.append(element, instruction.timelines); |
| var /** @type {?} */ tuple = { instruction: instruction, player: player, element: element }; |
| queuedInstructions.push(tuple); |
| instruction.queriedElements.forEach(function (element) { return getOrSetAsInMap(queriedElements, element, []).push(player); }); |
| instruction.preStyleProps.forEach(function (stringMap, element) { |
| var /** @type {?} */ props = Object.keys(stringMap); |
| if (props.length) { |
| var /** @type {?} */ setVal_1 = /** @type {?} */ ((allPreStyleElements.get(element))); |
| if (!setVal_1) { |
| allPreStyleElements.set(element, setVal_1 = new Set()); |
| } |
| props.forEach(function (prop) { return setVal_1.add(prop); }); |
| } |
| }); |
| instruction.postStyleProps.forEach(function (stringMap, element) { |
| var /** @type {?} */ props = Object.keys(stringMap); |
| var /** @type {?} */ setVal = /** @type {?} */ ((allPostStyleElements.get(element))); |
| if (!setVal) { |
| allPostStyleElements.set(element, setVal = new Set()); |
| } |
| props.forEach(function (prop) { return setVal.add(prop); }); |
| }); |
| }); |
| } |
| if (erroneousTransitions.length) { |
| var /** @type {?} */ errors_1 = []; |
| erroneousTransitions.forEach(function (instruction) { |
| errors_1.push("@" + instruction.triggerName + " has failed due to:\n"); /** @type {?} */ |
| ((instruction.errors)).forEach(function (error) { return errors_1.push("- " + error + "\n"); }); |
| }); |
| allPlayers.forEach(function (player) { return player.destroy(); }); |
| this.reportError(errors_1); |
| } |
| var /** @type {?} */ allPreviousPlayersMap = new Map(); |
| // this map works to tell which element in the DOM tree is contained by |
| // which animation. Further down below this map will get populated once |
| // the players are built and in doing so it can efficiently figure out |
| // if a sub player is skipped due to a parent player having priority. |
| var /** @type {?} */ animationElementMap = new Map(); |
| queuedInstructions.forEach(function (entry) { |
| var /** @type {?} */ element = entry.element; |
| if (subTimelines.has(element)) { |
| animationElementMap.set(element, element); |
| _this._beforeAnimationBuild(entry.player.namespaceId, entry.instruction, allPreviousPlayersMap); |
| } |
| }); |
| skippedPlayers.forEach(function (player) { |
| var /** @type {?} */ element = player.element; |
| var /** @type {?} */ previousPlayers = _this._getPreviousPlayers(element, false, player.namespaceId, player.triggerName, null); |
| previousPlayers.forEach(function (prevPlayer) { |
| getOrSetAsInMap(allPreviousPlayersMap, element, []).push(prevPlayer); |
| prevPlayer.destroy(); |
| }); |
| }); |
| // this is a special case for nodes that will be removed (either by) |
| // having their own leave animations or by being queried in a container |
| // that will be removed once a parent animation is complete. The idea |
| // here is that * styles must be identical to ! styles because of |
| // backwards compatibility (* is also filled in by default in many places). |
| // Otherwise * styles will return an empty value or auto since the element |
| // that is being getComputedStyle'd will not be visible (since * = destination) |
| var /** @type {?} */ replaceNodes = allLeaveNodes.filter(function (node) { |
| return replacePostStylesAsPre(node, allPreStyleElements, allPostStyleElements); |
| }); |
| // POST STAGE: fill the * styles |
| var /** @type {?} */ postStylesMap = new Map(); |
| var /** @type {?} */ allLeaveQueriedNodes = cloakAndComputeStyles(postStylesMap, this.driver, leaveNodesWithoutAnimations, allPostStyleElements, AUTO_STYLE); |
| allLeaveQueriedNodes.forEach(function (node) { |
| if (replacePostStylesAsPre(node, allPreStyleElements, allPostStyleElements)) { |
| replaceNodes.push(node); |
| } |
| }); |
| // PRE STAGE: fill the ! styles |
| var /** @type {?} */ preStylesMap = new Map(); |
| enterNodeMap.forEach(function (nodes, root) { |
| cloakAndComputeStyles(preStylesMap, _this.driver, new Set(nodes), allPreStyleElements, ɵPRE_STYLE); |
| }); |
| replaceNodes.forEach(function (node) { |
| var /** @type {?} */ post = postStylesMap.get(node); |
| var /** @type {?} */ pre = preStylesMap.get(node); |
| postStylesMap.set(node, /** @type {?} */ (__assign({}, post, pre))); |
| }); |
| var /** @type {?} */ rootPlayers = []; |
| var /** @type {?} */ subPlayers = []; |
| var /** @type {?} */ NO_PARENT_ANIMATION_ELEMENT_DETECTED = {}; |
| queuedInstructions.forEach(function (entry) { |
| var element = entry.element, player = entry.player, instruction = entry.instruction; |
| // this means that it was never consumed by a parent animation which |
| // means that it is independent and therefore should be set for animation |
| if (subTimelines.has(element)) { |
| if (disabledElementsSet.has(element)) { |
| player.onDestroy(function () { return setStyles(element, instruction.toStyles); }); |
| skippedPlayers.push(player); |
| return; |
| } |
| // this will flow up the DOM and query the map to figure out |
| // if a parent animation has priority over it. In the situation |
| // that a parent is detected then it will cancel the loop. If |
| // nothing is detected, or it takes a few hops to find a parent, |
| // then it will fill in the missing nodes and signal them as having |
| // a detected parent (or a NO_PARENT value via a special constant). |
| var /** @type {?} */ parentWithAnimation_1 = NO_PARENT_ANIMATION_ELEMENT_DETECTED; |
| if (animationElementMap.size > 1) { |
| var /** @type {?} */ elm = element; |
| var /** @type {?} */ parentsToAdd = []; |
| while (elm = elm.parentNode) { |
| var /** @type {?} */ detectedParent = animationElementMap.get(elm); |
| if (detectedParent) { |
| parentWithAnimation_1 = detectedParent; |
| break; |
| } |
| parentsToAdd.push(elm); |
| } |
| parentsToAdd.forEach(function (parent) { return animationElementMap.set(parent, parentWithAnimation_1); }); |
| } |
| var /** @type {?} */ innerPlayer = _this._buildAnimation(player.namespaceId, instruction, allPreviousPlayersMap, skippedPlayersMap, preStylesMap, postStylesMap); |
| player.setRealPlayer(innerPlayer); |
| if (parentWithAnimation_1 === NO_PARENT_ANIMATION_ELEMENT_DETECTED) { |
| rootPlayers.push(player); |
| } |
| else { |
| var /** @type {?} */ parentPlayers = _this.playersByElement.get(parentWithAnimation_1); |
| if (parentPlayers && parentPlayers.length) { |
| player.parentPlayer = optimizeGroupPlayer(parentPlayers); |
| } |
| skippedPlayers.push(player); |
| } |
| } |
| else { |
| eraseStyles(element, instruction.fromStyles); |
| player.onDestroy(function () { return setStyles(element, instruction.toStyles); }); |
| // there still might be a ancestor player animating this |
| // element therefore we will still add it as a sub player |
| // even if its animation may be disabled |
| subPlayers.push(player); |
| if (disabledElementsSet.has(element)) { |
| skippedPlayers.push(player); |
| } |
| } |
| }); |
| // find all of the sub players' corresponding inner animation player |
| subPlayers.forEach(function (player) { |
| // even if any players are not found for a sub animation then it |
| // will still complete itself after the next tick since it's Noop |
| var /** @type {?} */ playersForElement = skippedPlayersMap.get(player.element); |
| if (playersForElement && playersForElement.length) { |
| var /** @type {?} */ innerPlayer = optimizeGroupPlayer(playersForElement); |
| player.setRealPlayer(innerPlayer); |
| } |
| }); |
| // the reason why we don't actually play the animation is |
| // because all that a skipped player is designed to do is to |
| // fire the start/done transition callback events |
| skippedPlayers.forEach(function (player) { |
| if (player.parentPlayer) { |
| player.syncPlayerEvents(player.parentPlayer); |
| } |
| else { |
| player.destroy(); |
| } |
| }); |
| // run through all of the queued removals and see if they |
| // were picked up by a query. If not then perform the removal |
| // operation right away unless a parent animation is ongoing. |
| for (var /** @type {?} */ i_4 = 0; i_4 < allLeaveNodes.length; i_4++) { |
| var /** @type {?} */ element = allLeaveNodes[i_4]; |
| var /** @type {?} */ details = /** @type {?} */ (element[REMOVAL_FLAG]); |
| removeClass(element, LEAVE_CLASSNAME); |
| // this means the element has a removal animation that is being |
| // taken care of and therefore the inner elements will hang around |
| // until that animation is over (or the parent queried animation) |
| if (details && details.hasAnimation) |
| continue; |
| var /** @type {?} */ players = []; |
| // if this element is queried or if it contains queried children |
| // then we want for the element not to be removed from the page |
| // until the queried animations have finished |
| if (queriedElements.size) { |
| var /** @type {?} */ queriedPlayerResults = queriedElements.get(element); |
| if (queriedPlayerResults && queriedPlayerResults.length) { |
| players.push.apply(players, queriedPlayerResults); |
| } |
| var /** @type {?} */ queriedInnerElements = this.driver.query(element, NG_ANIMATING_SELECTOR, true); |
| for (var /** @type {?} */ j = 0; j < queriedInnerElements.length; j++) { |
| var /** @type {?} */ queriedPlayers = queriedElements.get(queriedInnerElements[j]); |
| if (queriedPlayers && queriedPlayers.length) { |
| players.push.apply(players, queriedPlayers); |
| } |
| } |
| } |
| var /** @type {?} */ activePlayers = players.filter(function (p) { return !p.destroyed; }); |
| if (activePlayers.length) { |
| removeNodesAfterAnimationDone(this, element, activePlayers); |
| } |
| else { |
| this.processLeaveNode(element); |
| } |
| } |
| // this is required so the cleanup method doesn't remove them |
| allLeaveNodes.length = 0; |
| rootPlayers.forEach(function (player) { |
| _this.players.push(player); |
| player.onDone(function () { |
| player.destroy(); |
| var /** @type {?} */ index = _this.players.indexOf(player); |
| _this.players.splice(index, 1); |
| }); |
| player.play(); |
| }); |
| return rootPlayers; |
| }; |
| /** |
| * @param {?} namespaceId |
| * @param {?} element |
| * @return {?} |
| */ |
| TransitionAnimationEngine.prototype.elementContainsData = /** |
| * @param {?} namespaceId |
| * @param {?} element |
| * @return {?} |
| */ |
| function (namespaceId, element) { |
| var /** @type {?} */ containsData = false; |
| var /** @type {?} */ details = /** @type {?} */ (element[REMOVAL_FLAG]); |
| if (details && details.setForRemoval) |
| containsData = true; |
| if (this.playersByElement.has(element)) |
| containsData = true; |
| if (this.playersByQueriedElement.has(element)) |
| containsData = true; |
| if (this.statesByElement.has(element)) |
| containsData = true; |
| return this._fetchNamespace(namespaceId).elementContainsData(element) || containsData; |
| }; |
| /** |
| * @param {?} callback |
| * @return {?} |
| */ |
| TransitionAnimationEngine.prototype.afterFlush = /** |
| * @param {?} callback |
| * @return {?} |
| */ |
| function (callback) { this._flushFns.push(callback); }; |
| /** |
| * @param {?} callback |
| * @return {?} |
| */ |
| TransitionAnimationEngine.prototype.afterFlushAnimationsDone = /** |
| * @param {?} callback |
| * @return {?} |
| */ |
| function (callback) { this._whenQuietFns.push(callback); }; |
| /** |
| * @param {?} element |
| * @param {?} isQueriedElement |
| * @param {?=} namespaceId |
| * @param {?=} triggerName |
| * @param {?=} toStateValue |
| * @return {?} |
| */ |
| TransitionAnimationEngine.prototype._getPreviousPlayers = /** |
| * @param {?} element |
| * @param {?} isQueriedElement |
| * @param {?=} namespaceId |
| * @param {?=} triggerName |
| * @param {?=} toStateValue |
| * @return {?} |
| */ |
| function (element, isQueriedElement, namespaceId, triggerName, toStateValue) { |
| var /** @type {?} */ players = []; |
| if (isQueriedElement) { |
| var /** @type {?} */ queriedElementPlayers = this.playersByQueriedElement.get(element); |
| if (queriedElementPlayers) { |
| players = queriedElementPlayers; |
| } |
| } |
| else { |
| var /** @type {?} */ elementPlayers = this.playersByElement.get(element); |
| if (elementPlayers) { |
| var /** @type {?} */ isRemovalAnimation_1 = !toStateValue || toStateValue == VOID_VALUE; |
| elementPlayers.forEach(function (player) { |
| if (player.queued) |
| return; |
| if (!isRemovalAnimation_1 && player.triggerName != triggerName) |
| return; |
| players.push(player); |
| }); |
| } |
| } |
| if (namespaceId || triggerName) { |
| players = players.filter(function (player) { |
| if (namespaceId && namespaceId != player.namespaceId) |
| return false; |
| if (triggerName && triggerName != player.triggerName) |
| return false; |
| return true; |
| }); |
| } |
| return players; |
| }; |
| /** |
| * @param {?} namespaceId |
| * @param {?} instruction |
| * @param {?} allPreviousPlayersMap |
| * @return {?} |
| */ |
| TransitionAnimationEngine.prototype._beforeAnimationBuild = /** |
| * @param {?} namespaceId |
| * @param {?} instruction |
| * @param {?} allPreviousPlayersMap |
| * @return {?} |
| */ |
| function (namespaceId, instruction, allPreviousPlayersMap) { |
| var /** @type {?} */ triggerName = instruction.triggerName; |
| var /** @type {?} */ rootElement = instruction.element; |
| // when a removal animation occurs, ALL previous players are collected |
| // and destroyed (even if they are outside of the current namespace) |
| var /** @type {?} */ targetNameSpaceId = instruction.isRemovalTransition ? undefined : namespaceId; |
| var /** @type {?} */ targetTriggerName = instruction.isRemovalTransition ? undefined : triggerName; |
| var _loop_1 = function (timelineInstruction) { |
| var /** @type {?} */ element = timelineInstruction.element; |
| var /** @type {?} */ isQueriedElement = element !== rootElement; |
| var /** @type {?} */ players = getOrSetAsInMap(allPreviousPlayersMap, element, []); |
| var /** @type {?} */ previousPlayers = this_1._getPreviousPlayers(element, isQueriedElement, targetNameSpaceId, targetTriggerName, instruction.toState); |
| previousPlayers.forEach(function (player) { |
| var /** @type {?} */ realPlayer = /** @type {?} */ (player.getRealPlayer()); |
| if (realPlayer.beforeDestroy) { |
| realPlayer.beforeDestroy(); |
| } |
| player.destroy(); |
| players.push(player); |
| }); |
| }; |
| var this_1 = this; |
| for (var _i = 0, _a = instruction.timelines; _i < _a.length; _i++) { |
| var timelineInstruction = _a[_i]; |
| _loop_1(timelineInstruction); |
| } |
| // this needs to be done so that the PRE/POST styles can be |
| // computed properly without interfering with the previous animation |
| eraseStyles(rootElement, instruction.fromStyles); |
| }; |
| /** |
| * @param {?} namespaceId |
| * @param {?} instruction |
| * @param {?} allPreviousPlayersMap |
| * @param {?} skippedPlayersMap |
| * @param {?} preStylesMap |
| * @param {?} postStylesMap |
| * @return {?} |
| */ |
| TransitionAnimationEngine.prototype._buildAnimation = /** |
| * @param {?} namespaceId |
| * @param {?} instruction |
| * @param {?} allPreviousPlayersMap |
| * @param {?} skippedPlayersMap |
| * @param {?} preStylesMap |
| * @param {?} postStylesMap |
| * @return {?} |
| */ |
| function (namespaceId, instruction, allPreviousPlayersMap, skippedPlayersMap, preStylesMap, postStylesMap) { |
| var _this = this; |
| var /** @type {?} */ triggerName = instruction.triggerName; |
| var /** @type {?} */ rootElement = instruction.element; |
| // we first run this so that the previous animation player |
| // data can be passed into the successive animation players |
| var /** @type {?} */ allQueriedPlayers = []; |
| var /** @type {?} */ allConsumedElements = new Set(); |
| var /** @type {?} */ allSubElements = new Set(); |
| var /** @type {?} */ allNewPlayers = instruction.timelines.map(function (timelineInstruction) { |
| var /** @type {?} */ element = timelineInstruction.element; |
| allConsumedElements.add(element); |
| // FIXME (matsko): make sure to-be-removed animations are removed properly |
| var /** @type {?} */ details = element[REMOVAL_FLAG]; |
| if (details && details.removedBeforeQueried) |
| return new NoopAnimationPlayer(); |
| var /** @type {?} */ isQueriedElement = element !== rootElement; |
| var /** @type {?} */ previousPlayers = flattenGroupPlayers((allPreviousPlayersMap.get(element) || EMPTY_PLAYER_ARRAY) |
| .map(function (p) { return p.getRealPlayer(); })) |
| .filter(function (p) { |
| // the `element` is not apart of the AnimationPlayer definition, but |
| // Mock/WebAnimations |
| // use the element within their implementation. This will be added in Angular5 to |
| // AnimationPlayer |
| var /** @type {?} */ pp = /** @type {?} */ (p); |
| return pp.element ? pp.element === element : false; |
| }); |
| var /** @type {?} */ preStyles = preStylesMap.get(element); |
| var /** @type {?} */ postStyles = postStylesMap.get(element); |
| var /** @type {?} */ keyframes = normalizeKeyframes(_this.driver, _this._normalizer, element, timelineInstruction.keyframes, preStyles, postStyles); |
| var /** @type {?} */ player = _this._buildPlayer(timelineInstruction, keyframes, previousPlayers); |
| // this means that this particular player belongs to a sub trigger. It is |
| // important that we match this player up with the corresponding (@trigger.listener) |
| if (timelineInstruction.subTimeline && skippedPlayersMap) { |
| allSubElements.add(element); |
| } |
| if (isQueriedElement) { |
| var /** @type {?} */ wrappedPlayer = new TransitionAnimationPlayer(namespaceId, triggerName, element); |
| wrappedPlayer.setRealPlayer(player); |
| allQueriedPlayers.push(wrappedPlayer); |
| } |
| return player; |
| }); |
| allQueriedPlayers.forEach(function (player) { |
| getOrSetAsInMap(_this.playersByQueriedElement, player.element, []).push(player); |
| player.onDone(function () { return deleteOrUnsetInMap(_this.playersByQueriedElement, player.element, player); }); |
| }); |
| allConsumedElements.forEach(function (element) { return addClass(element, NG_ANIMATING_CLASSNAME); }); |
| var /** @type {?} */ player = optimizeGroupPlayer(allNewPlayers); |
| player.onDestroy(function () { |
| allConsumedElements.forEach(function (element) { return removeClass(element, NG_ANIMATING_CLASSNAME); }); |
| setStyles(rootElement, instruction.toStyles); |
| }); |
| // this basically makes all of the callbacks for sub element animations |
| // be dependent on the upper players for when they finish |
| allSubElements.forEach(function (element) { getOrSetAsInMap(skippedPlayersMap, element, []).push(player); }); |
| return player; |
| }; |
| /** |
| * @param {?} instruction |
| * @param {?} keyframes |
| * @param {?} previousPlayers |
| * @return {?} |
| */ |
| TransitionAnimationEngine.prototype._buildPlayer = /** |
| * @param {?} instruction |
| * @param {?} keyframes |
| * @param {?} previousPlayers |
| * @return {?} |
| */ |
| function (instruction, keyframes, previousPlayers) { |
| if (keyframes.length > 0) { |
| return this.driver.animate(instruction.element, keyframes, instruction.duration, instruction.delay, instruction.easing, previousPlayers); |
| } |
| // special case for when an empty transition|definition is provided |
| // ... there is no point in rendering an empty animation |
| return new NoopAnimationPlayer(); |
| }; |
| return TransitionAnimationEngine; |
| }()); |
| var TransitionAnimationPlayer = /** @class */ (function () { |
| function TransitionAnimationPlayer(namespaceId, triggerName, element) { |
| this.namespaceId = namespaceId; |
| this.triggerName = triggerName; |
| this.element = element; |
| this._player = new NoopAnimationPlayer(); |
| this._containsRealPlayer = false; |
| this._queuedCallbacks = {}; |
| this.destroyed = false; |
| this.markedForDestroy = false; |
| this.queued = true; |
| } |
| /** |
| * @param {?} player |
| * @return {?} |
| */ |
| TransitionAnimationPlayer.prototype.setRealPlayer = /** |
| * @param {?} player |
| * @return {?} |
| */ |
| function (player) { |
| var _this = this; |
| if (this._containsRealPlayer) |
| return; |
| this._player = player; |
| Object.keys(this._queuedCallbacks).forEach(function (phase) { |
| _this._queuedCallbacks[phase].forEach(function (callback) { return listenOnPlayer(player, phase, undefined, callback); }); |
| }); |
| this._queuedCallbacks = {}; |
| this._containsRealPlayer = true; |
| (/** @type {?} */ (this)).queued = false; |
| }; |
| /** |
| * @return {?} |
| */ |
| TransitionAnimationPlayer.prototype.getRealPlayer = /** |
| * @return {?} |
| */ |
| function () { return this._player; }; |
| /** |
| * @param {?} player |
| * @return {?} |
| */ |
| TransitionAnimationPlayer.prototype.syncPlayerEvents = /** |
| * @param {?} player |
| * @return {?} |
| */ |
| function (player) { |
| var _this = this; |
| var /** @type {?} */ p = /** @type {?} */ (this._player); |
| if (p.triggerCallback) { |
| player.onStart(function () { return p.triggerCallback('start'); }); |
| } |
| player.onDone(function () { return _this.finish(); }); |
| player.onDestroy(function () { return _this.destroy(); }); |
| }; |
| /** |
| * @param {?} name |
| * @param {?} callback |
| * @return {?} |
| */ |
| TransitionAnimationPlayer.prototype._queueEvent = /** |
| * @param {?} name |
| * @param {?} callback |
| * @return {?} |
| */ |
| function (name, callback) { |
| getOrSetAsInMap(this._queuedCallbacks, name, []).push(callback); |
| }; |
| /** |
| * @param {?} fn |
| * @return {?} |
| */ |
| TransitionAnimationPlayer.prototype.onDone = /** |
| * @param {?} fn |
| * @return {?} |
| */ |
| function (fn) { |
| if (this.queued) { |
| this._queueEvent('done', fn); |
| } |
| this._player.onDone(fn); |
| }; |
| /** |
| * @param {?} fn |
| * @return {?} |
| */ |
| TransitionAnimationPlayer.prototype.onStart = /** |
| * @param {?} fn |
| * @return {?} |
| */ |
| function (fn) { |
| if (this.queued) { |
| this._queueEvent('start', fn); |
| } |
| this._player.onStart(fn); |
| }; |
| /** |
| * @param {?} fn |
| * @return {?} |
| */ |
| TransitionAnimationPlayer.prototype.onDestroy = /** |
| * @param {?} fn |
| * @return {?} |
| */ |
| function (fn) { |
| if (this.queued) { |
| this._queueEvent('destroy', fn); |
| } |
| this._player.onDestroy(fn); |
| }; |
| /** |
| * @return {?} |
| */ |
| TransitionAnimationPlayer.prototype.init = /** |
| * @return {?} |
| */ |
| function () { this._player.init(); }; |
| /** |
| * @return {?} |
| */ |
| TransitionAnimationPlayer.prototype.hasStarted = /** |
| * @return {?} |
| */ |
| function () { return this.queued ? false : this._player.hasStarted(); }; |
| /** |
| * @return {?} |
| */ |
| TransitionAnimationPlayer.prototype.play = /** |
| * @return {?} |
| */ |
| function () { !this.queued && this._player.play(); }; |
| /** |
| * @return {?} |
| */ |
| TransitionAnimationPlayer.prototype.pause = /** |
| * @return {?} |
| */ |
| function () { !this.queued && this._player.pause(); }; |
| /** |
| * @return {?} |
| */ |
| TransitionAnimationPlayer.prototype.restart = /** |
| * @return {?} |
| */ |
| function () { !this.queued && this._player.restart(); }; |
| /** |
| * @return {?} |
| */ |
| TransitionAnimationPlayer.prototype.finish = /** |
| * @return {?} |
| */ |
| function () { this._player.finish(); }; |
| /** |
| * @return {?} |
| */ |
| TransitionAnimationPlayer.prototype.destroy = /** |
| * @return {?} |
| */ |
| function () { |
| (/** @type {?} */ (this)).destroyed = true; |
| this._player.destroy(); |
| }; |
| /** |
| * @return {?} |
| */ |
| TransitionAnimationPlayer.prototype.reset = /** |
| * @return {?} |
| */ |
| function () { !this.queued && this._player.reset(); }; |
| /** |
| * @param {?} p |
| * @return {?} |
| */ |
| TransitionAnimationPlayer.prototype.setPosition = /** |
| * @param {?} p |
| * @return {?} |
| */ |
| function (p) { |
| if (!this.queued) { |
| this._player.setPosition(p); |
| } |
| }; |
| /** |
| * @return {?} |
| */ |
| TransitionAnimationPlayer.prototype.getPosition = /** |
| * @return {?} |
| */ |
| function () { return this.queued ? 0 : this._player.getPosition(); }; |
| Object.defineProperty(TransitionAnimationPlayer.prototype, "totalTime", { |
| get: /** |
| * @return {?} |
| */ |
| function () { return this._player.totalTime; }, |
| enumerable: true, |
| configurable: true |
| }); |
| /* @internal */ |
| /** |
| * @param {?} phaseName |
| * @return {?} |
| */ |
| TransitionAnimationPlayer.prototype.triggerCallback = /** |
| * @param {?} phaseName |
| * @return {?} |
| */ |
| function (phaseName) { |
| var /** @type {?} */ p = /** @type {?} */ (this._player); |
| if (p.triggerCallback) { |
| p.triggerCallback(phaseName); |
| } |
| }; |
| return TransitionAnimationPlayer; |
| }()); |
| /** |
| * @param {?} map |
| * @param {?} key |
| * @param {?} value |
| * @return {?} |
| */ |
| function deleteOrUnsetInMap(map, key, value) { |
| var /** @type {?} */ currentValues; |
| if (map instanceof Map) { |
| currentValues = map.get(key); |
| if (currentValues) { |
| if (currentValues.length) { |
| var /** @type {?} */ index = currentValues.indexOf(value); |
| currentValues.splice(index, 1); |
| } |
| if (currentValues.length == 0) { |
| map.delete(key); |
| } |
| } |
| } |
| else { |
| currentValues = map[key]; |
| if (currentValues) { |
| if (currentValues.length) { |
| var /** @type {?} */ index = currentValues.indexOf(value); |
| currentValues.splice(index, 1); |
| } |
| if (currentValues.length == 0) { |
| delete map[key]; |
| } |
| } |
| } |
| return currentValues; |
| } |
| /** |
| * @param {?} value |
| * @return {?} |
| */ |
| function normalizeTriggerValue(value) { |
| // we use `!= null` here because it's the most simple |
| // way to test against a "falsy" value without mixing |
| // in empty strings or a zero value. DO NOT OPTIMIZE. |
| return value != null ? value : null; |
| } |
| /** |
| * @param {?} node |
| * @return {?} |
| */ |
| function isElementNode(node) { |
| return node && node['nodeType'] === 1; |
| } |
| /** |
| * @param {?} eventName |
| * @return {?} |
| */ |
| function isTriggerEventValid(eventName) { |
| return eventName == 'start' || eventName == 'done'; |
| } |
| /** |
| * @param {?} element |
| * @param {?=} value |
| * @return {?} |
| */ |
| function cloakElement(element, value) { |
| var /** @type {?} */ oldValue = element.style.display; |
| element.style.display = value != null ? value : 'none'; |
| return oldValue; |
| } |
| /** |
| * @param {?} valuesMap |
| * @param {?} driver |
| * @param {?} elements |
| * @param {?} elementPropsMap |
| * @param {?} defaultStyle |
| * @return {?} |
| */ |
| function cloakAndComputeStyles(valuesMap, driver, elements, elementPropsMap, defaultStyle) { |
| var /** @type {?} */ cloakVals = []; |
| elements.forEach(function (element) { return cloakVals.push(cloakElement(element)); }); |
| var /** @type {?} */ failedElements = []; |
| elementPropsMap.forEach(function (props, element) { |
| var /** @type {?} */ styles = {}; |
| props.forEach(function (prop) { |
| var /** @type {?} */ value = styles[prop] = driver.computeStyle(element, prop, defaultStyle); |
| // there is no easy way to detect this because a sub element could be removed |
| // by a parent animation element being detached. |
| if (!value || value.length == 0) { |
| element[REMOVAL_FLAG] = NULL_REMOVED_QUERIED_STATE; |
| failedElements.push(element); |
| } |
| }); |
| valuesMap.set(element, styles); |
| }); |
| // we use a index variable here since Set.forEach(a, i) does not return |
| // an index value for the closure (but instead just the value) |
| var /** @type {?} */ i = 0; |
| elements.forEach(function (element) { return cloakElement(element, cloakVals[i++]); }); |
| return failedElements; |
| } |
| /** |
| * @param {?} roots |
| * @param {?} nodes |
| * @return {?} |
| */ |
| function buildRootMap(roots, nodes) { |
| var /** @type {?} */ rootMap = new Map(); |
| roots.forEach(function (root) { return rootMap.set(root, []); }); |
| if (nodes.length == 0) |
| return rootMap; |
| var /** @type {?} */ NULL_NODE = 1; |
| var /** @type {?} */ nodeSet = new Set(nodes); |
| var /** @type {?} */ localRootMap = new Map(); |
| /** |
| * @param {?} node |
| * @return {?} |
| */ |
| function getRoot(node) { |
| if (!node) |
| return NULL_NODE; |
| var /** @type {?} */ root = localRootMap.get(node); |
| if (root) |
| return root; |
| var /** @type {?} */ parent = node.parentNode; |
| if (rootMap.has(parent)) { |
| // ngIf inside @trigger |
| root = parent; |
| } |
| else if (nodeSet.has(parent)) { |
| // ngIf inside ngIf |
| root = NULL_NODE; |
| } |
| else { |
| // recurse upwards |
| root = getRoot(parent); |
| } |
| localRootMap.set(node, root); |
| return root; |
| } |
| nodes.forEach(function (node) { |
| var /** @type {?} */ root = getRoot(node); |
| if (root !== NULL_NODE) { |
| /** @type {?} */ ((rootMap.get(root))).push(node); |
| } |
| }); |
| return rootMap; |
| } |
| var CLASSES_CACHE_KEY = '$$classes'; |
| /** |
| * @param {?} element |
| * @param {?} className |
| * @return {?} |
| */ |
| function addClass(element, className) { |
| if (element.classList) { |
| element.classList.add(className); |
| } |
| else { |
| var /** @type {?} */ classes = element[CLASSES_CACHE_KEY]; |
| if (!classes) { |
| classes = element[CLASSES_CACHE_KEY] = {}; |
| } |
| classes[className] = true; |
| } |
| } |
| /** |
| * @param {?} element |
| * @param {?} className |
| * @return {?} |
| */ |
| function removeClass(element, className) { |
| if (element.classList) { |
| element.classList.remove(className); |
| } |
| else { |
| var /** @type {?} */ classes = element[CLASSES_CACHE_KEY]; |
| if (classes) { |
| delete classes[className]; |
| } |
| } |
| } |
| /** |
| * @param {?} engine |
| * @param {?} element |
| * @param {?} players |
| * @return {?} |
| */ |
| function removeNodesAfterAnimationDone(engine, element, players) { |
| optimizeGroupPlayer(players).onDone(function () { return engine.processLeaveNode(element); }); |
| } |
| /** |
| * @param {?} players |
| * @return {?} |
| */ |
| function flattenGroupPlayers(players) { |
| var /** @type {?} */ finalPlayers = []; |
| _flattenGroupPlayersRecur(players, finalPlayers); |
| return finalPlayers; |
| } |
| /** |
| * @param {?} players |
| * @param {?} finalPlayers |
| * @return {?} |
| */ |
| function _flattenGroupPlayersRecur(players, finalPlayers) { |
| for (var /** @type {?} */ i = 0; i < players.length; i++) { |
| var /** @type {?} */ player = players[i]; |
| if (player instanceof ɵAnimationGroupPlayer) { |
| _flattenGroupPlayersRecur(player.players, finalPlayers); |
| } |
| else { |
| finalPlayers.push(/** @type {?} */ (player)); |
| } |
| } |
| } |
| /** |
| * @param {?} a |
| * @param {?} b |
| * @return {?} |
| */ |
| function objEquals(a, b) { |
| var /** @type {?} */ k1 = Object.keys(a); |
| var /** @type {?} */ k2 = Object.keys(b); |
| if (k1.length != k2.length) |
| return false; |
| for (var /** @type {?} */ i = 0; i < k1.length; i++) { |
| var /** @type {?} */ prop = k1[i]; |
| if (!b.hasOwnProperty(prop) || a[prop] !== b[prop]) |
| return false; |
| } |
| return true; |
| } |
| /** |
| * @param {?} element |
| * @param {?} allPreStyleElements |
| * @param {?} allPostStyleElements |
| * @return {?} |
| */ |
| function replacePostStylesAsPre(element, allPreStyleElements, allPostStyleElements) { |
| var /** @type {?} */ postEntry = allPostStyleElements.get(element); |
| if (!postEntry) |
| return false; |
| var /** @type {?} */ preEntry = allPreStyleElements.get(element); |
| if (preEntry) { |
| postEntry.forEach(function (data) { return ((preEntry)).add(data); }); |
| } |
| else { |
| allPreStyleElements.set(element, postEntry); |
| } |
| allPostStyleElements.delete(element); |
| return true; |
| } |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes} checked by tsc |
| */ |
| var AnimationEngine = /** @class */ (function () { |
| function AnimationEngine(_driver, normalizer) { |
| var _this = this; |
| this._driver = _driver; |
| this._triggerCache = {}; |
| this.onRemovalComplete = function (element, context) { }; |
| this._transitionEngine = new TransitionAnimationEngine(_driver, normalizer); |
| this._timelineEngine = new TimelineAnimationEngine(_driver, normalizer); |
| this._transitionEngine.onRemovalComplete = function (element, context) { |
| return _this.onRemovalComplete(element, context); |
| }; |
| } |
| /** |
| * @param {?} componentId |
| * @param {?} namespaceId |
| * @param {?} hostElement |
| * @param {?} name |
| * @param {?} metadata |
| * @return {?} |
| */ |
| AnimationEngine.prototype.registerTrigger = /** |
| * @param {?} componentId |
| * @param {?} namespaceId |
| * @param {?} hostElement |
| * @param {?} name |
| * @param {?} metadata |
| * @return {?} |
| */ |
| function (componentId, namespaceId, hostElement, name, metadata) { |
| var /** @type {?} */ cacheKey = componentId + '-' + name; |
| var /** @type {?} */ trigger = this._triggerCache[cacheKey]; |
| if (!trigger) { |
| var /** @type {?} */ errors = []; |
| var /** @type {?} */ ast = /** @type {?} */ (buildAnimationAst(this._driver, /** @type {?} */ (metadata), errors)); |
| if (errors.length) { |
| throw new Error("The animation trigger \"" + name + "\" has failed to build due to the following errors:\n - " + errors.join("\n - ")); |
| } |
| trigger = buildTrigger(name, ast); |
| this._triggerCache[cacheKey] = trigger; |
| } |
| this._transitionEngine.registerTrigger(namespaceId, name, trigger); |
| }; |
| /** |
| * @param {?} namespaceId |
| * @param {?} hostElement |
| * @return {?} |
| */ |
| AnimationEngine.prototype.register = /** |
| * @param {?} namespaceId |
| * @param {?} hostElement |
| * @return {?} |
| */ |
| function (namespaceId, hostElement) { |
| this._transitionEngine.register(namespaceId, hostElement); |
| }; |
| /** |
| * @param {?} namespaceId |
| * @param {?} context |
| * @return {?} |
| */ |
| AnimationEngine.prototype.destroy = /** |
| * @param {?} namespaceId |
| * @param {?} context |
| * @return {?} |
| */ |
| function (namespaceId, context) { |
| this._transitionEngine.destroy(namespaceId, context); |
| }; |
| /** |
| * @param {?} namespaceId |
| * @param {?} element |
| * @param {?} parent |
| * @param {?} insertBefore |
| * @return {?} |
| */ |
| AnimationEngine.prototype.onInsert = /** |
| * @param {?} namespaceId |
| * @param {?} element |
| * @param {?} parent |
| * @param {?} insertBefore |
| * @return {?} |
| */ |
| function (namespaceId, element, parent, insertBefore) { |
| this._transitionEngine.insertNode(namespaceId, element, parent, insertBefore); |
| }; |
| /** |
| * @param {?} namespaceId |
| * @param {?} element |
| * @param {?} context |
| * @return {?} |
| */ |
| AnimationEngine.prototype.onRemove = /** |
| * @param {?} namespaceId |
| * @param {?} element |
| * @param {?} context |
| * @return {?} |
| */ |
| function (namespaceId, element, context) { |
| this._transitionEngine.removeNode(namespaceId, element, context); |
| }; |
| /** |
| * @param {?} element |
| * @param {?} disable |
| * @return {?} |
| */ |
| AnimationEngine.prototype.disableAnimations = /** |
| * @param {?} element |
| * @param {?} disable |
| * @return {?} |
| */ |
| function (element, disable) { |
| this._transitionEngine.markElementAsDisabled(element, disable); |
| }; |
| /** |
| * @param {?} namespaceId |
| * @param {?} element |
| * @param {?} property |
| * @param {?} value |
| * @return {?} |
| */ |
| AnimationEngine.prototype.process = /** |
| * @param {?} namespaceId |
| * @param {?} element |
| * @param {?} property |
| * @param {?} value |
| * @return {?} |
| */ |
| function (namespaceId, element, property, value) { |
| if (property.charAt(0) == '@') { |
| var _a = parseTimelineCommand(property), id = _a[0], action = _a[1]; |
| var /** @type {?} */ args = /** @type {?} */ (value); |
| this._timelineEngine.command(id, element, action, args); |
| } |
| else { |
| this._transitionEngine.trigger(namespaceId, element, property, value); |
| } |
| }; |
| /** |
| * @param {?} namespaceId |
| * @param {?} element |
| * @param {?} eventName |
| * @param {?} eventPhase |
| * @param {?} callback |
| * @return {?} |
| */ |
| AnimationEngine.prototype.listen = /** |
| * @param {?} namespaceId |
| * @param {?} element |
| * @param {?} eventName |
| * @param {?} eventPhase |
| * @param {?} callback |
| * @return {?} |
| */ |
| function (namespaceId, element, eventName, eventPhase, callback) { |
| // @@listen |
| if (eventName.charAt(0) == '@') { |
| var _a = parseTimelineCommand(eventName), id = _a[0], action = _a[1]; |
| return this._timelineEngine.listen(id, element, action, callback); |
| } |
| return this._transitionEngine.listen(namespaceId, element, eventName, eventPhase, callback); |
| }; |
| /** |
| * @param {?=} microtaskId |
| * @return {?} |
| */ |
| AnimationEngine.prototype.flush = /** |
| * @param {?=} microtaskId |
| * @return {?} |
| */ |
| function (microtaskId) { |
| if (microtaskId === void 0) { microtaskId = -1; } |
| this._transitionEngine.flush(microtaskId); |
| }; |
| Object.defineProperty(AnimationEngine.prototype, "players", { |
| get: /** |
| * @return {?} |
| */ |
| function () { |
| return (/** @type {?} */ (this._transitionEngine.players)) |
| .concat(/** @type {?} */ (this._timelineEngine.players)); |
| }, |
| enumerable: true, |
| configurable: true |
| }); |
| /** |
| * @return {?} |
| */ |
| AnimationEngine.prototype.whenRenderingDone = /** |
| * @return {?} |
| */ |
| function () { return this._transitionEngine.whenRenderingDone(); }; |
| return AnimationEngine; |
| }()); |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes} checked by tsc |
| */ |
| var WebAnimationsPlayer = /** @class */ (function () { |
| function WebAnimationsPlayer(element, keyframes, options, previousPlayers) { |
| if (previousPlayers === void 0) { previousPlayers = []; } |
| var _this = this; |
| this.element = element; |
| this.keyframes = keyframes; |
| this.options = options; |
| this.previousPlayers = previousPlayers; |
| this._onDoneFns = []; |
| this._onStartFns = []; |
| this._onDestroyFns = []; |
| this._initialized = false; |
| this._finished = false; |
| this._started = false; |
| this._destroyed = false; |
| this.time = 0; |
| this.parentPlayer = null; |
| this.previousStyles = {}; |
| this.currentSnapshot = {}; |
| this._duration = /** @type {?} */ (options['duration']); |
| this._delay = /** @type {?} */ (options['delay']) || 0; |
| this.time = this._duration + this._delay; |
| if (allowPreviousPlayerStylesMerge(this._duration, this._delay)) { |
| previousPlayers.forEach(function (player) { |
| var /** @type {?} */ styles = player.currentSnapshot; |
| Object.keys(styles).forEach(function (prop) { return _this.previousStyles[prop] = styles[prop]; }); |
| }); |
| } |
| } |
| /** |
| * @return {?} |
| */ |
| WebAnimationsPlayer.prototype._onFinish = /** |
| * @return {?} |
| */ |
| function () { |
| if (!this._finished) { |
| this._finished = true; |
| this._onDoneFns.forEach(function (fn) { return fn(); }); |
| this._onDoneFns = []; |
| } |
| }; |
| /** |
| * @return {?} |
| */ |
| WebAnimationsPlayer.prototype.init = /** |
| * @return {?} |
| */ |
| function () { |
| this._buildPlayer(); |
| this._preparePlayerBeforeStart(); |
| }; |
| /** |
| * @return {?} |
| */ |
| WebAnimationsPlayer.prototype._buildPlayer = /** |
| * @return {?} |
| */ |
| function () { |
| var _this = this; |
| if (this._initialized) |
| return; |
| this._initialized = true; |
| var /** @type {?} */ keyframes = this.keyframes.map(function (styles) { return copyStyles(styles, false); }); |
| var /** @type {?} */ previousStyleProps = Object.keys(this.previousStyles); |
| if (previousStyleProps.length && keyframes.length) { |
| var /** @type {?} */ startingKeyframe_1 = keyframes[0]; |
| var /** @type {?} */ missingStyleProps_1 = []; |
| previousStyleProps.forEach(function (prop) { |
| if (!startingKeyframe_1.hasOwnProperty(prop)) { |
| missingStyleProps_1.push(prop); |
| } |
| startingKeyframe_1[prop] = _this.previousStyles[prop]; |
| }); |
| if (missingStyleProps_1.length) { |
| var /** @type {?} */ self_1 = this; |
| var _loop_1 = function () { |
| var /** @type {?} */ kf = keyframes[i]; |
| missingStyleProps_1.forEach(function (prop) { |
| kf[prop] = _computeStyle(self_1.element, prop); |
| }); |
| }; |
| // tslint:disable-next-line |
| for (var /** @type {?} */ i = 1; i < keyframes.length; i++) { |
| _loop_1(); |
| } |
| } |
| } |
| (/** @type {?} */ (this)).domPlayer = |
| this._triggerWebAnimation(this.element, keyframes, this.options); |
| this._finalKeyframe = keyframes.length ? keyframes[keyframes.length - 1] : {}; |
| this.domPlayer.addEventListener('finish', function () { return _this._onFinish(); }); |
| }; |
| /** |
| * @return {?} |
| */ |
| WebAnimationsPlayer.prototype._preparePlayerBeforeStart = /** |
| * @return {?} |
| */ |
| function () { |
| // this is required so that the player doesn't start to animate right away |
| if (this._delay) { |
| this._resetDomPlayerState(); |
| } |
| else { |
| this.domPlayer.pause(); |
| } |
| }; |
| /** @internal */ |
| /** |
| * \@internal |
| * @param {?} element |
| * @param {?} keyframes |
| * @param {?} options |
| * @return {?} |
| */ |
| WebAnimationsPlayer.prototype._triggerWebAnimation = /** |
| * \@internal |
| * @param {?} element |
| * @param {?} keyframes |
| * @param {?} options |
| * @return {?} |
| */ |
| function (element, keyframes, options) { |
| // jscompiler doesn't seem to know animate is a native property because it's not fully |
| // supported yet across common browsers (we polyfill it for Edge/Safari) [CL #143630929] |
| return /** @type {?} */ (element['animate'](keyframes, options)); |
| }; |
| /** |
| * @param {?} fn |
| * @return {?} |
| */ |
| WebAnimationsPlayer.prototype.onStart = /** |
| * @param {?} fn |
| * @return {?} |
| */ |
| function (fn) { this._onStartFns.push(fn); }; |
| /** |
| * @param {?} fn |
| * @return {?} |
| */ |
| WebAnimationsPlayer.prototype.onDone = /** |
| * @param {?} fn |
| * @return {?} |
| */ |
| function (fn) { this._onDoneFns.push(fn); }; |
| /** |
| * @param {?} fn |
| * @return {?} |
| */ |
| WebAnimationsPlayer.prototype.onDestroy = /** |
| * @param {?} fn |
| * @return {?} |
| */ |
| function (fn) { this._onDestroyFns.push(fn); }; |
| /** |
| * @return {?} |
| */ |
| WebAnimationsPlayer.prototype.play = /** |
| * @return {?} |
| */ |
| function () { |
| this._buildPlayer(); |
| if (!this.hasStarted()) { |
| this._onStartFns.forEach(function (fn) { return fn(); }); |
| this._onStartFns = []; |
| this._started = true; |
| } |
| this.domPlayer.play(); |
| }; |
| /** |
| * @return {?} |
| */ |
| WebAnimationsPlayer.prototype.pause = /** |
| * @return {?} |
| */ |
| function () { |
| this.init(); |
| this.domPlayer.pause(); |
| }; |
| /** |
| * @return {?} |
| */ |
| WebAnimationsPlayer.prototype.finish = /** |
| * @return {?} |
| */ |
| function () { |
| this.init(); |
| this._onFinish(); |
| this.domPlayer.finish(); |
| }; |
| /** |
| * @return {?} |
| */ |
| WebAnimationsPlayer.prototype.reset = /** |
| * @return {?} |
| */ |
| function () { |
| this._resetDomPlayerState(); |
| this._destroyed = false; |
| this._finished = false; |
| this._started = false; |
| }; |
| /** |
| * @return {?} |
| */ |
| WebAnimationsPlayer.prototype._resetDomPlayerState = /** |
| * @return {?} |
| */ |
| function () { |
| if (this.domPlayer) { |
| this.domPlayer.cancel(); |
| } |
| }; |
| /** |
| * @return {?} |
| */ |
| WebAnimationsPlayer.prototype.restart = /** |
| * @return {?} |
| */ |
| function () { |
| this.reset(); |
| this.play(); |
| }; |
| /** |
| * @return {?} |
| */ |
| WebAnimationsPlayer.prototype.hasStarted = /** |
| * @return {?} |
| */ |
| function () { return this._started; }; |
| /** |
| * @return {?} |
| */ |
| WebAnimationsPlayer.prototype.destroy = /** |
| * @return {?} |
| */ |
| function () { |
| if (!this._destroyed) { |
| this._destroyed = true; |
| this._resetDomPlayerState(); |
| this._onFinish(); |
| this._onDestroyFns.forEach(function (fn) { return fn(); }); |
| this._onDestroyFns = []; |
| } |
| }; |
| /** |
| * @param {?} p |
| * @return {?} |
| */ |
| WebAnimationsPlayer.prototype.setPosition = /** |
| * @param {?} p |
| * @return {?} |
| */ |
| function (p) { this.domPlayer.currentTime = p * this.time; }; |
| /** |
| * @return {?} |
| */ |
| WebAnimationsPlayer.prototype.getPosition = /** |
| * @return {?} |
| */ |
| function () { return this.domPlayer.currentTime / this.time; }; |
| Object.defineProperty(WebAnimationsPlayer.prototype, "totalTime", { |
| get: /** |
| * @return {?} |
| */ |
| function () { return this._delay + this._duration; }, |
| enumerable: true, |
| configurable: true |
| }); |
| /** |
| * @return {?} |
| */ |
| WebAnimationsPlayer.prototype.beforeDestroy = /** |
| * @return {?} |
| */ |
| function () { |
| var _this = this; |
| var /** @type {?} */ styles = {}; |
| if (this.hasStarted()) { |
| Object.keys(this._finalKeyframe).forEach(function (prop) { |
| if (prop != 'offset') { |
| styles[prop] = |
| _this._finished ? _this._finalKeyframe[prop] : _computeStyle(_this.element, prop); |
| } |
| }); |
| } |
| this.currentSnapshot = styles; |
| }; |
| /* @internal */ |
| /** |
| * @param {?} phaseName |
| * @return {?} |
| */ |
| WebAnimationsPlayer.prototype.triggerCallback = /** |
| * @param {?} phaseName |
| * @return {?} |
| */ |
| function (phaseName) { |
| var /** @type {?} */ methods = phaseName == 'start' ? this._onStartFns : this._onDoneFns; |
| methods.forEach(function (fn) { return fn(); }); |
| methods.length = 0; |
| }; |
| return WebAnimationsPlayer; |
| }()); |
| /** |
| * @param {?} element |
| * @param {?} prop |
| * @return {?} |
| */ |
| function _computeStyle(element, prop) { |
| return (/** @type {?} */ (window.getComputedStyle(element)))[prop]; |
| } |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes} checked by tsc |
| */ |
| var WebAnimationsDriver = /** @class */ (function () { |
| function WebAnimationsDriver() { |
| } |
| /** |
| * @param {?} prop |
| * @return {?} |
| */ |
| WebAnimationsDriver.prototype.validateStyleProperty = /** |
| * @param {?} prop |
| * @return {?} |
| */ |
| function (prop) { return validateStyleProperty(prop); }; |
| /** |
| * @param {?} element |
| * @param {?} selector |
| * @return {?} |
| */ |
| WebAnimationsDriver.prototype.matchesElement = /** |
| * @param {?} element |
| * @param {?} selector |
| * @return {?} |
| */ |
| function (element, selector) { |
| return matchesElement(element, selector); |
| }; |
| /** |
| * @param {?} elm1 |
| * @param {?} elm2 |
| * @return {?} |
| */ |
| WebAnimationsDriver.prototype.containsElement = /** |
| * @param {?} elm1 |
| * @param {?} elm2 |
| * @return {?} |
| */ |
| function (elm1, elm2) { return containsElement(elm1, elm2); }; |
| /** |
| * @param {?} element |
| * @param {?} selector |
| * @param {?} multi |
| * @return {?} |
| */ |
| WebAnimationsDriver.prototype.query = /** |
| * @param {?} element |
| * @param {?} selector |
| * @param {?} multi |
| * @return {?} |
| */ |
| function (element, selector, multi) { |
| return invokeQuery(element, selector, multi); |
| }; |
| /** |
| * @param {?} element |
| * @param {?} prop |
| * @param {?=} defaultValue |
| * @return {?} |
| */ |
| WebAnimationsDriver.prototype.computeStyle = /** |
| * @param {?} element |
| * @param {?} prop |
| * @param {?=} defaultValue |
| * @return {?} |
| */ |
| function (element, prop, defaultValue) { |
| return /** @type {?} */ ((/** @type {?} */ (window.getComputedStyle(element)))[prop]); |
| }; |
| /** |
| * @param {?} element |
| * @param {?} keyframes |
| * @param {?} duration |
| * @param {?} delay |
| * @param {?} easing |
| * @param {?=} previousPlayers |
| * @return {?} |
| */ |
| WebAnimationsDriver.prototype.animate = /** |
| * @param {?} element |
| * @param {?} keyframes |
| * @param {?} duration |
| * @param {?} delay |
| * @param {?} easing |
| * @param {?=} previousPlayers |
| * @return {?} |
| */ |
| function (element, keyframes, duration, delay, easing, previousPlayers) { |
| if (previousPlayers === void 0) { previousPlayers = []; } |
| var /** @type {?} */ fill = delay == 0 ? 'both' : 'forwards'; |
| var /** @type {?} */ playerOptions = { duration: duration, delay: delay, fill: fill }; |
| // we check for this to avoid having a null|undefined value be present |
| // for the easing (which results in an error for certain browsers #9752) |
| if (easing) { |
| playerOptions['easing'] = easing; |
| } |
| var /** @type {?} */ previousWebAnimationPlayers = /** @type {?} */ (previousPlayers.filter(function (player) { return player instanceof WebAnimationsPlayer; })); |
| return new WebAnimationsPlayer(element, keyframes, playerOptions, previousWebAnimationPlayers); |
| }; |
| return WebAnimationsDriver; |
| }()); |
| /** |
| * @return {?} |
| */ |
| function supportsWebAnimations() { |
| return typeof Element !== 'undefined' && typeof (/** @type {?} */ (Element)).prototype['animate'] === 'function'; |
| } |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes} checked by tsc |
| */ |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes} checked by tsc |
| */ |
| /** |
| * @license |
| * Copyright Google Inc. All Rights Reserved. |
| * |
| * Use of this source code is governed by an MIT-style license that can be |
| * found in the LICENSE file at https://angular.io/license |
| */ |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes} checked by tsc |
| */ |
| /** |
| * @license |
| * Copyright Google Inc. All Rights Reserved. |
| * |
| * Use of this source code is governed by an MIT-style license that can be |
| * found in the LICENSE file at https://angular.io/license |
| */ |
| /** |
| * @module |
| * @description |
| * Entry point for all public APIs of this package. |
| */ |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes} checked by tsc |
| */ |
| /** |
| * Generated bundle index. Do not edit. |
| */ |
| |
| export { AnimationDriver, Animation as ɵAnimation, AnimationStyleNormalizer as ɵAnimationStyleNormalizer, NoopAnimationStyleNormalizer as ɵNoopAnimationStyleNormalizer, WebAnimationsStyleNormalizer as ɵWebAnimationsStyleNormalizer, NoopAnimationDriver as ɵNoopAnimationDriver, AnimationEngine as ɵAnimationEngine, WebAnimationsDriver as ɵWebAnimationsDriver, supportsWebAnimations as ɵsupportsWebAnimations, WebAnimationsPlayer as ɵWebAnimationsPlayer }; |
| //# sourceMappingURL=browser.js.map |