animations.js 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453
  1. /**
  2. * @license Angular v8.1.3
  3. * (c) 2010-2019 Google LLC. https://angular.io/
  4. * License: MIT
  5. */
  6. import { __extends, __decorate, __param, __metadata, __read, __spread } from 'tslib';
  7. import { ViewEncapsulation, Injectable, Inject, RendererFactory2, NgZone, InjectionToken, NgModule } from '@angular/core';
  8. import { ɵDomRendererFactory2, BrowserModule } from '@angular/platform-browser';
  9. import { sequence, AnimationBuilder, AnimationFactory } from '@angular/animations';
  10. import { ɵAnimationEngine, AnimationDriver, ɵAnimationStyleNormalizer, ɵsupportsWebAnimations, ɵWebAnimationsDriver, ɵCssKeyframesDriver, ɵWebAnimationsStyleNormalizer, ɵNoopAnimationDriver } from '@angular/animations/browser';
  11. import { DOCUMENT } from '@angular/common';
  12. var BrowserAnimationBuilder = /** @class */ (function (_super) {
  13. __extends(BrowserAnimationBuilder, _super);
  14. function BrowserAnimationBuilder(rootRenderer, doc) {
  15. var _this = _super.call(this) || this;
  16. _this._nextAnimationId = 0;
  17. var typeData = {
  18. id: '0',
  19. encapsulation: ViewEncapsulation.None,
  20. styles: [],
  21. data: { animation: [] }
  22. };
  23. _this._renderer = rootRenderer.createRenderer(doc.body, typeData);
  24. return _this;
  25. }
  26. BrowserAnimationBuilder.prototype.build = function (animation) {
  27. var id = this._nextAnimationId.toString();
  28. this._nextAnimationId++;
  29. var entry = Array.isArray(animation) ? sequence(animation) : animation;
  30. issueAnimationCommand(this._renderer, null, id, 'register', [entry]);
  31. return new BrowserAnimationFactory(id, this._renderer);
  32. };
  33. BrowserAnimationBuilder = __decorate([
  34. Injectable(),
  35. __param(1, Inject(DOCUMENT)),
  36. __metadata("design:paramtypes", [RendererFactory2, Object])
  37. ], BrowserAnimationBuilder);
  38. return BrowserAnimationBuilder;
  39. }(AnimationBuilder));
  40. var BrowserAnimationFactory = /** @class */ (function (_super) {
  41. __extends(BrowserAnimationFactory, _super);
  42. function BrowserAnimationFactory(_id, _renderer) {
  43. var _this = _super.call(this) || this;
  44. _this._id = _id;
  45. _this._renderer = _renderer;
  46. return _this;
  47. }
  48. BrowserAnimationFactory.prototype.create = function (element, options) {
  49. return new RendererAnimationPlayer(this._id, element, options || {}, this._renderer);
  50. };
  51. return BrowserAnimationFactory;
  52. }(AnimationFactory));
  53. var RendererAnimationPlayer = /** @class */ (function () {
  54. function RendererAnimationPlayer(id, element, options, _renderer) {
  55. this.id = id;
  56. this.element = element;
  57. this._renderer = _renderer;
  58. this.parentPlayer = null;
  59. this._started = false;
  60. this.totalTime = 0;
  61. this._command('create', options);
  62. }
  63. RendererAnimationPlayer.prototype._listen = function (eventName, callback) {
  64. return this._renderer.listen(this.element, "@@" + this.id + ":" + eventName, callback);
  65. };
  66. RendererAnimationPlayer.prototype._command = function (command) {
  67. var args = [];
  68. for (var _i = 1; _i < arguments.length; _i++) {
  69. args[_i - 1] = arguments[_i];
  70. }
  71. return issueAnimationCommand(this._renderer, this.element, this.id, command, args);
  72. };
  73. RendererAnimationPlayer.prototype.onDone = function (fn) { this._listen('done', fn); };
  74. RendererAnimationPlayer.prototype.onStart = function (fn) { this._listen('start', fn); };
  75. RendererAnimationPlayer.prototype.onDestroy = function (fn) { this._listen('destroy', fn); };
  76. RendererAnimationPlayer.prototype.init = function () { this._command('init'); };
  77. RendererAnimationPlayer.prototype.hasStarted = function () { return this._started; };
  78. RendererAnimationPlayer.prototype.play = function () {
  79. this._command('play');
  80. this._started = true;
  81. };
  82. RendererAnimationPlayer.prototype.pause = function () { this._command('pause'); };
  83. RendererAnimationPlayer.prototype.restart = function () { this._command('restart'); };
  84. RendererAnimationPlayer.prototype.finish = function () { this._command('finish'); };
  85. RendererAnimationPlayer.prototype.destroy = function () { this._command('destroy'); };
  86. RendererAnimationPlayer.prototype.reset = function () { this._command('reset'); };
  87. RendererAnimationPlayer.prototype.setPosition = function (p) { this._command('setPosition', p); };
  88. RendererAnimationPlayer.prototype.getPosition = function () { return 0; };
  89. return RendererAnimationPlayer;
  90. }());
  91. function issueAnimationCommand(renderer, element, id, command, args) {
  92. return renderer.setProperty(element, "@@" + id + ":" + command, args);
  93. }
  94. var ANIMATION_PREFIX = '@';
  95. var DISABLE_ANIMATIONS_FLAG = '@.disabled';
  96. var AnimationRendererFactory = /** @class */ (function () {
  97. function AnimationRendererFactory(delegate, engine, _zone) {
  98. this.delegate = delegate;
  99. this.engine = engine;
  100. this._zone = _zone;
  101. this._currentId = 0;
  102. this._microtaskId = 1;
  103. this._animationCallbacksBuffer = [];
  104. this._rendererCache = new Map();
  105. this._cdRecurDepth = 0;
  106. this.promise = Promise.resolve(0);
  107. engine.onRemovalComplete = function (element, delegate) {
  108. // Note: if an component element has a leave animation, and the component
  109. // a host leave animation, the view engine will call `removeChild` for the parent
  110. // component renderer as well as for the child component renderer.
  111. // Therefore, we need to check if we already removed the element.
  112. if (delegate && delegate.parentNode(element)) {
  113. delegate.removeChild(element.parentNode, element);
  114. }
  115. };
  116. }
  117. AnimationRendererFactory.prototype.createRenderer = function (hostElement, type) {
  118. var _this = this;
  119. var EMPTY_NAMESPACE_ID = '';
  120. // cache the delegates to find out which cached delegate can
  121. // be used by which cached renderer
  122. var delegate = this.delegate.createRenderer(hostElement, type);
  123. if (!hostElement || !type || !type.data || !type.data['animation']) {
  124. var renderer = this._rendererCache.get(delegate);
  125. if (!renderer) {
  126. renderer = new BaseAnimationRenderer(EMPTY_NAMESPACE_ID, delegate, this.engine);
  127. // only cache this result when the base renderer is used
  128. this._rendererCache.set(delegate, renderer);
  129. }
  130. return renderer;
  131. }
  132. var componentId = type.id;
  133. var namespaceId = type.id + '-' + this._currentId;
  134. this._currentId++;
  135. this.engine.register(namespaceId, hostElement);
  136. var animationTriggers = type.data['animation'];
  137. animationTriggers.forEach(function (trigger) { return _this.engine.registerTrigger(componentId, namespaceId, hostElement, trigger.name, trigger); });
  138. return new AnimationRenderer(this, namespaceId, delegate, this.engine);
  139. };
  140. AnimationRendererFactory.prototype.begin = function () {
  141. this._cdRecurDepth++;
  142. if (this.delegate.begin) {
  143. this.delegate.begin();
  144. }
  145. };
  146. AnimationRendererFactory.prototype._scheduleCountTask = function () {
  147. var _this = this;
  148. // always use promise to schedule microtask instead of use Zone
  149. this.promise.then(function () { _this._microtaskId++; });
  150. };
  151. /** @internal */
  152. AnimationRendererFactory.prototype.scheduleListenerCallback = function (count, fn, data) {
  153. var _this = this;
  154. if (count >= 0 && count < this._microtaskId) {
  155. this._zone.run(function () { return fn(data); });
  156. return;
  157. }
  158. if (this._animationCallbacksBuffer.length == 0) {
  159. Promise.resolve(null).then(function () {
  160. _this._zone.run(function () {
  161. _this._animationCallbacksBuffer.forEach(function (tuple) {
  162. var _a = __read(tuple, 2), fn = _a[0], data = _a[1];
  163. fn(data);
  164. });
  165. _this._animationCallbacksBuffer = [];
  166. });
  167. });
  168. }
  169. this._animationCallbacksBuffer.push([fn, data]);
  170. };
  171. AnimationRendererFactory.prototype.end = function () {
  172. var _this = this;
  173. this._cdRecurDepth--;
  174. // this is to prevent animations from running twice when an inner
  175. // component does CD when a parent component instead has inserted it
  176. if (this._cdRecurDepth == 0) {
  177. this._zone.runOutsideAngular(function () {
  178. _this._scheduleCountTask();
  179. _this.engine.flush(_this._microtaskId);
  180. });
  181. }
  182. if (this.delegate.end) {
  183. this.delegate.end();
  184. }
  185. };
  186. AnimationRendererFactory.prototype.whenRenderingDone = function () { return this.engine.whenRenderingDone(); };
  187. AnimationRendererFactory = __decorate([
  188. Injectable(),
  189. __metadata("design:paramtypes", [RendererFactory2, ɵAnimationEngine, NgZone])
  190. ], AnimationRendererFactory);
  191. return AnimationRendererFactory;
  192. }());
  193. var BaseAnimationRenderer = /** @class */ (function () {
  194. function BaseAnimationRenderer(namespaceId, delegate, engine) {
  195. this.namespaceId = namespaceId;
  196. this.delegate = delegate;
  197. this.engine = engine;
  198. this.destroyNode = this.delegate.destroyNode ? function (n) { return delegate.destroyNode(n); } : null;
  199. }
  200. Object.defineProperty(BaseAnimationRenderer.prototype, "data", {
  201. get: function () { return this.delegate.data; },
  202. enumerable: true,
  203. configurable: true
  204. });
  205. BaseAnimationRenderer.prototype.destroy = function () {
  206. this.engine.destroy(this.namespaceId, this.delegate);
  207. this.delegate.destroy();
  208. };
  209. BaseAnimationRenderer.prototype.createElement = function (name, namespace) {
  210. return this.delegate.createElement(name, namespace);
  211. };
  212. BaseAnimationRenderer.prototype.createComment = function (value) { return this.delegate.createComment(value); };
  213. BaseAnimationRenderer.prototype.createText = function (value) { return this.delegate.createText(value); };
  214. BaseAnimationRenderer.prototype.appendChild = function (parent, newChild) {
  215. this.delegate.appendChild(parent, newChild);
  216. this.engine.onInsert(this.namespaceId, newChild, parent, false);
  217. };
  218. BaseAnimationRenderer.prototype.insertBefore = function (parent, newChild, refChild) {
  219. this.delegate.insertBefore(parent, newChild, refChild);
  220. this.engine.onInsert(this.namespaceId, newChild, parent, true);
  221. };
  222. BaseAnimationRenderer.prototype.removeChild = function (parent, oldChild, isHostElement) {
  223. this.engine.onRemove(this.namespaceId, oldChild, this.delegate, isHostElement);
  224. };
  225. BaseAnimationRenderer.prototype.selectRootElement = function (selectorOrNode, preserveContent) {
  226. return this.delegate.selectRootElement(selectorOrNode, preserveContent);
  227. };
  228. BaseAnimationRenderer.prototype.parentNode = function (node) { return this.delegate.parentNode(node); };
  229. BaseAnimationRenderer.prototype.nextSibling = function (node) { return this.delegate.nextSibling(node); };
  230. BaseAnimationRenderer.prototype.setAttribute = function (el, name, value, namespace) {
  231. this.delegate.setAttribute(el, name, value, namespace);
  232. };
  233. BaseAnimationRenderer.prototype.removeAttribute = function (el, name, namespace) {
  234. this.delegate.removeAttribute(el, name, namespace);
  235. };
  236. BaseAnimationRenderer.prototype.addClass = function (el, name) { this.delegate.addClass(el, name); };
  237. BaseAnimationRenderer.prototype.removeClass = function (el, name) { this.delegate.removeClass(el, name); };
  238. BaseAnimationRenderer.prototype.setStyle = function (el, style, value, flags) {
  239. this.delegate.setStyle(el, style, value, flags);
  240. };
  241. BaseAnimationRenderer.prototype.removeStyle = function (el, style, flags) {
  242. this.delegate.removeStyle(el, style, flags);
  243. };
  244. BaseAnimationRenderer.prototype.setProperty = function (el, name, value) {
  245. if (name.charAt(0) == ANIMATION_PREFIX && name == DISABLE_ANIMATIONS_FLAG) {
  246. this.disableAnimations(el, !!value);
  247. }
  248. else {
  249. this.delegate.setProperty(el, name, value);
  250. }
  251. };
  252. BaseAnimationRenderer.prototype.setValue = function (node, value) { this.delegate.setValue(node, value); };
  253. BaseAnimationRenderer.prototype.listen = function (target, eventName, callback) {
  254. return this.delegate.listen(target, eventName, callback);
  255. };
  256. BaseAnimationRenderer.prototype.disableAnimations = function (element, value) {
  257. this.engine.disableAnimations(element, value);
  258. };
  259. return BaseAnimationRenderer;
  260. }());
  261. var AnimationRenderer = /** @class */ (function (_super) {
  262. __extends(AnimationRenderer, _super);
  263. function AnimationRenderer(factory, namespaceId, delegate, engine) {
  264. var _this = _super.call(this, namespaceId, delegate, engine) || this;
  265. _this.factory = factory;
  266. _this.namespaceId = namespaceId;
  267. return _this;
  268. }
  269. AnimationRenderer.prototype.setProperty = function (el, name, value) {
  270. if (name.charAt(0) == ANIMATION_PREFIX) {
  271. if (name.charAt(1) == '.' && name == DISABLE_ANIMATIONS_FLAG) {
  272. value = value === undefined ? true : !!value;
  273. this.disableAnimations(el, value);
  274. }
  275. else {
  276. this.engine.process(this.namespaceId, el, name.substr(1), value);
  277. }
  278. }
  279. else {
  280. this.delegate.setProperty(el, name, value);
  281. }
  282. };
  283. AnimationRenderer.prototype.listen = function (target, eventName, callback) {
  284. var _this = this;
  285. var _a;
  286. if (eventName.charAt(0) == ANIMATION_PREFIX) {
  287. var element = resolveElementFromTarget(target);
  288. var name_1 = eventName.substr(1);
  289. var phase = '';
  290. // @listener.phase is for trigger animation callbacks
  291. // @@listener is for animation builder callbacks
  292. if (name_1.charAt(0) != ANIMATION_PREFIX) {
  293. _a = __read(parseTriggerCallbackName(name_1), 2), name_1 = _a[0], phase = _a[1];
  294. }
  295. return this.engine.listen(this.namespaceId, element, name_1, phase, function (event) {
  296. var countId = event['_data'] || -1;
  297. _this.factory.scheduleListenerCallback(countId, callback, event);
  298. });
  299. }
  300. return this.delegate.listen(target, eventName, callback);
  301. };
  302. return AnimationRenderer;
  303. }(BaseAnimationRenderer));
  304. function resolveElementFromTarget(target) {
  305. switch (target) {
  306. case 'body':
  307. return document.body;
  308. case 'document':
  309. return document;
  310. case 'window':
  311. return window;
  312. default:
  313. return target;
  314. }
  315. }
  316. function parseTriggerCallbackName(triggerName) {
  317. var dotIndex = triggerName.indexOf('.');
  318. var trigger = triggerName.substring(0, dotIndex);
  319. var phase = triggerName.substr(dotIndex + 1);
  320. return [trigger, phase];
  321. }
  322. /**
  323. * @license
  324. * Copyright Google Inc. All Rights Reserved.
  325. *
  326. * Use of this source code is governed by an MIT-style license that can be
  327. * found in the LICENSE file at https://angular.io/license
  328. */
  329. var InjectableAnimationEngine = /** @class */ (function (_super) {
  330. __extends(InjectableAnimationEngine, _super);
  331. function InjectableAnimationEngine(doc, driver, normalizer) {
  332. return _super.call(this, doc.body, driver, normalizer) || this;
  333. }
  334. InjectableAnimationEngine = __decorate([
  335. Injectable(),
  336. __param(0, Inject(DOCUMENT)),
  337. __metadata("design:paramtypes", [Object, AnimationDriver, ɵAnimationStyleNormalizer])
  338. ], InjectableAnimationEngine);
  339. return InjectableAnimationEngine;
  340. }(ɵAnimationEngine));
  341. function instantiateSupportedAnimationDriver() {
  342. return ɵsupportsWebAnimations() ? new ɵWebAnimationsDriver() : new ɵCssKeyframesDriver();
  343. }
  344. function instantiateDefaultStyleNormalizer() {
  345. return new ɵWebAnimationsStyleNormalizer();
  346. }
  347. function instantiateRendererFactory(renderer, engine, zone) {
  348. return new AnimationRendererFactory(renderer, engine, zone);
  349. }
  350. /**
  351. * @publicApi
  352. */
  353. var ANIMATION_MODULE_TYPE = new InjectionToken('AnimationModuleType');
  354. var SHARED_ANIMATION_PROVIDERS = [
  355. { provide: AnimationBuilder, useClass: BrowserAnimationBuilder },
  356. { provide: ɵAnimationStyleNormalizer, useFactory: instantiateDefaultStyleNormalizer },
  357. { provide: ɵAnimationEngine, useClass: InjectableAnimationEngine }, {
  358. provide: RendererFactory2,
  359. useFactory: instantiateRendererFactory,
  360. deps: [ɵDomRendererFactory2, ɵAnimationEngine, NgZone]
  361. }
  362. ];
  363. /**
  364. * Separate providers from the actual module so that we can do a local modification in Google3 to
  365. * include them in the BrowserModule.
  366. */
  367. var BROWSER_ANIMATIONS_PROVIDERS = __spread([
  368. { provide: AnimationDriver, useFactory: instantiateSupportedAnimationDriver },
  369. { provide: ANIMATION_MODULE_TYPE, useValue: 'BrowserAnimations' }
  370. ], SHARED_ANIMATION_PROVIDERS);
  371. /**
  372. * Separate providers from the actual module so that we can do a local modification in Google3 to
  373. * include them in the BrowserTestingModule.
  374. */
  375. var BROWSER_NOOP_ANIMATIONS_PROVIDERS = __spread([
  376. { provide: AnimationDriver, useClass: ɵNoopAnimationDriver },
  377. { provide: ANIMATION_MODULE_TYPE, useValue: 'NoopAnimations' }
  378. ], SHARED_ANIMATION_PROVIDERS);
  379. /**
  380. * Exports `BrowserModule` with additional [dependency-injection providers](guide/glossary#provider)
  381. * for use with animations. See [Animations](guide/animations).
  382. * @publicApi
  383. */
  384. var BrowserAnimationsModule = /** @class */ (function () {
  385. function BrowserAnimationsModule() {
  386. }
  387. BrowserAnimationsModule = __decorate([
  388. NgModule({
  389. exports: [BrowserModule],
  390. providers: BROWSER_ANIMATIONS_PROVIDERS,
  391. })
  392. ], BrowserAnimationsModule);
  393. return BrowserAnimationsModule;
  394. }());
  395. /**
  396. * A null player that must be imported to allow disabling of animations.
  397. * @publicApi
  398. */
  399. var NoopAnimationsModule = /** @class */ (function () {
  400. function NoopAnimationsModule() {
  401. }
  402. NoopAnimationsModule = __decorate([
  403. NgModule({
  404. exports: [BrowserModule],
  405. providers: BROWSER_NOOP_ANIMATIONS_PROVIDERS,
  406. })
  407. ], NoopAnimationsModule);
  408. return NoopAnimationsModule;
  409. }());
  410. /**
  411. * @license
  412. * Copyright Google Inc. All Rights Reserved.
  413. *
  414. * Use of this source code is governed by an MIT-style license that can be
  415. * found in the LICENSE file at https://angular.io/license
  416. */
  417. /**
  418. * @license
  419. * Copyright Google Inc. All Rights Reserved.
  420. *
  421. * Use of this source code is governed by an MIT-style license that can be
  422. * found in the LICENSE file at https://angular.io/license
  423. */
  424. /**
  425. * @license
  426. * Copyright Google Inc. All Rights Reserved.
  427. *
  428. * Use of this source code is governed by an MIT-style license that can be
  429. * found in the LICENSE file at https://angular.io/license
  430. */
  431. /**
  432. * @license
  433. * Copyright Google Inc. All Rights Reserved.
  434. *
  435. * Use of this source code is governed by an MIT-style license that can be
  436. * found in the LICENSE file at https://angular.io/license
  437. */
  438. /**
  439. * Generated bundle index. Do not edit.
  440. */
  441. export { BaseAnimationRenderer as ɵangular_packages_platform_browser_animations_animations_f, BROWSER_ANIMATIONS_PROVIDERS as ɵangular_packages_platform_browser_animations_animations_d, BROWSER_NOOP_ANIMATIONS_PROVIDERS as ɵangular_packages_platform_browser_animations_animations_e, instantiateDefaultStyleNormalizer as ɵangular_packages_platform_browser_animations_animations_b, instantiateRendererFactory as ɵangular_packages_platform_browser_animations_animations_c, instantiateSupportedAnimationDriver as ɵangular_packages_platform_browser_animations_animations_a, BrowserAnimationsModule, NoopAnimationsModule, ANIMATION_MODULE_TYPE, BrowserAnimationBuilder as ɵBrowserAnimationBuilder, BrowserAnimationFactory as ɵBrowserAnimationFactory, AnimationRenderer as ɵAnimationRenderer, AnimationRendererFactory as ɵAnimationRendererFactory, InjectableAnimationEngine as ɵInjectableAnimationEngine };
  442. //# sourceMappingURL=animations.js.map