From 18cfb42f3c2137c36d21a82b4209ba4c9e01f863 Mon Sep 17 00:00:00 2001 From: Roy Ben-Shabat Date: Mon, 27 May 2019 10:33:12 +0300 Subject: MERGE --- .../Converters/JobsCategoryToOpacityConverter.cs | 27 + .../Modules/Tango.PPC.Jobs/Tango.PPC.Jobs.csproj | 4 +- .../Tango.PPC.Jobs/ViewContracts/IJobsView.cs | 14 + .../Tango.PPC.Jobs/ViewModels/JobsViewVM.cs | 65 +- .../PPC/Modules/Tango.PPC.Jobs/Views/JobView.xaml | 1170 +- .../PPC/Modules/Tango.PPC.Jobs/Views/JobsView.xaml | 24 +- .../Modules/Tango.PPC.Jobs/Views/JobsView.xaml.cs | 26 +- .../statistics/statistics.component.html | 19 +- .../statistics/statistics.component.scss | 13 +- .../Components/statistics/statistics.component.ts | 167 +- .../app/components/add-card/add-card.component.ts | 4 +- .../src/app/components/cards/cards.component.ts | 17 +- .../details-card/details-card.component.html | 82 +- .../details-card/details-card.component.scss | 2 +- .../details-card/details-card.component.ts | 37 +- .../app/components/results/results.component.html | 12 +- .../app/components/results/results.component.scss | 2 +- .../app/components/results/results.component.ts | 19 +- .../App/TCC/src/app/models/card.ts | 34 - .../App/TCC/src/app/models/cardDTO.ts | 30 + .../App/TCC/src/app/models/detectionresult.ts | 16 - .../App/TCC/src/app/models/index.ts | 4 +- .../App/TCC/src/app/models/resultDTO.ts | 40 + .../App/TCC/src/app/services/results.service.ts | 239 +- .../TCC/Tango.TCC.Service/App/TCC/src/styles.scss | 8 +- .../Tango.TCC.Service/Bundles/3rdpartylicenses.txt | 3 + .../TCC/Tango.TCC.Service/Bundles/index.html | 4 +- .../Bundles/main.0db0f76af92c5c08ca33.js | 143827 ----------------- .../Bundles/main.0db0f76af92c5c08ca33.js.map | 1 - .../Bundles/main.86efc31000997a17784d.js | 144935 ++++++++++++++++++ .../Bundles/main.86efc31000997a17784d.js.map | 1 + .../Bundles/styles.0749ccafd32cbe8ea501.css | 8822 -- .../Bundles/styles.0749ccafd32cbe8ea501.css.map | 1 - .../Bundles/styles.f1d4bf51e7938d05bd01.css | 8824 ++ .../Bundles/styles.f1d4bf51e7938d05bd01.css.map | 1 + .../Controllers/AccountController.cs | 23 +- .../Controllers/ResultsController.cs | 66 + .../TCC/Tango.TCC.Service/DB/TccDbContext.cs | 26 +- .../TCC/Tango.TCC.Service/DTO/Card.cs | 30 - .../TCC/Tango.TCC.Service/DTO/CardDTO.cs | 36 + .../TCC/Tango.TCC.Service/DTO/DeviceDTO.cs | 24 + .../TCC/Tango.TCC.Service/DTO/ResultDTO.cs | 30 + .../TCC/Tango.TCC.Service/Tango.TCC.Service.csproj | 8 +- .../Visual_Studio/TEMP/Tango.Graphics2D/App.config | 6 + .../Visual_Studio/TEMP/Tango.Graphics2D/App.xaml | 9 + .../TEMP/Tango.Graphics2D/App.xaml.cs | 17 + .../TEMP/Tango.Graphics2D/Drawing2DCanvas.cs | 36 + .../TEMP/Tango.Graphics2D/Drawing2DContext.cs | 27 + .../TEMP/Tango.Graphics2D/Drawing2DHost.cs | 179 + .../TEMP/Tango.Graphics2D/Drawing2DStackPanel.cs | 90 + .../TEMP/Tango.Graphics2D/MainWindow.xaml | 44 + .../TEMP/Tango.Graphics2D/MainWindow.xaml.cs | 47 + .../Visual_Studio/TEMP/Tango.Graphics2D/Person.cs | 25 + .../Tango.Graphics2D/Properties/AssemblyInfo.cs | 55 + .../Properties/Resources.Designer.cs | 71 + .../Tango.Graphics2D/Properties/Resources.resx | 117 + .../Properties/Settings.Designer.cs | 30 + .../Tango.Graphics2D/Properties/Settings.settings | 7 + .../TEMP/Tango.Graphics2D/Tango.Graphics2D.csproj | 103 + .../TEMP/Tango.Graphics2D/Tango.Graphics2D.sln | 25 + .../Components/DefaultCollectionFilter.cs | 30 + .../Tango.Touch/Components/ICollectionFilter.cs | 19 + .../Tango.Touch/Controls/LightTouchDataGrid.cs | 115 +- .../Tango.Touch/Controls/LightTouchDataGrid.xaml | 36 +- .../Tango.Touch/Controls/LightTouchScrollViewer.cs | 9 + .../Controls/TouchVirtualizedContentControl.cs | 122 +- .../Visual_Studio/Tango.Touch/Tango.Touch.csproj | 4 +- 67 files changed, 156194 insertions(+), 153766 deletions(-) create mode 100644 Software/Visual_Studio/PPC/Modules/Tango.PPC.Jobs/Converters/JobsCategoryToOpacityConverter.cs create mode 100644 Software/Visual_Studio/PPC/Modules/Tango.PPC.Jobs/ViewContracts/IJobsView.cs delete mode 100644 Software/Visual_Studio/TCC/Tango.TCC.Service/App/TCC/src/app/models/card.ts create mode 100644 Software/Visual_Studio/TCC/Tango.TCC.Service/App/TCC/src/app/models/cardDTO.ts delete mode 100644 Software/Visual_Studio/TCC/Tango.TCC.Service/App/TCC/src/app/models/detectionresult.ts create mode 100644 Software/Visual_Studio/TCC/Tango.TCC.Service/App/TCC/src/app/models/resultDTO.ts delete mode 100644 Software/Visual_Studio/TCC/Tango.TCC.Service/Bundles/main.0db0f76af92c5c08ca33.js delete mode 100644 Software/Visual_Studio/TCC/Tango.TCC.Service/Bundles/main.0db0f76af92c5c08ca33.js.map create mode 100644 Software/Visual_Studio/TCC/Tango.TCC.Service/Bundles/main.86efc31000997a17784d.js create mode 100644 Software/Visual_Studio/TCC/Tango.TCC.Service/Bundles/main.86efc31000997a17784d.js.map delete mode 100644 Software/Visual_Studio/TCC/Tango.TCC.Service/Bundles/styles.0749ccafd32cbe8ea501.css delete mode 100644 Software/Visual_Studio/TCC/Tango.TCC.Service/Bundles/styles.0749ccafd32cbe8ea501.css.map create mode 100644 Software/Visual_Studio/TCC/Tango.TCC.Service/Bundles/styles.f1d4bf51e7938d05bd01.css create mode 100644 Software/Visual_Studio/TCC/Tango.TCC.Service/Bundles/styles.f1d4bf51e7938d05bd01.css.map create mode 100644 Software/Visual_Studio/TCC/Tango.TCC.Service/Controllers/ResultsController.cs delete mode 100644 Software/Visual_Studio/TCC/Tango.TCC.Service/DTO/Card.cs create mode 100644 Software/Visual_Studio/TCC/Tango.TCC.Service/DTO/CardDTO.cs create mode 100644 Software/Visual_Studio/TCC/Tango.TCC.Service/DTO/DeviceDTO.cs create mode 100644 Software/Visual_Studio/TCC/Tango.TCC.Service/DTO/ResultDTO.cs create mode 100644 Software/Visual_Studio/TEMP/Tango.Graphics2D/App.config create mode 100644 Software/Visual_Studio/TEMP/Tango.Graphics2D/App.xaml create mode 100644 Software/Visual_Studio/TEMP/Tango.Graphics2D/App.xaml.cs create mode 100644 Software/Visual_Studio/TEMP/Tango.Graphics2D/Drawing2DCanvas.cs create mode 100644 Software/Visual_Studio/TEMP/Tango.Graphics2D/Drawing2DContext.cs create mode 100644 Software/Visual_Studio/TEMP/Tango.Graphics2D/Drawing2DHost.cs create mode 100644 Software/Visual_Studio/TEMP/Tango.Graphics2D/Drawing2DStackPanel.cs create mode 100644 Software/Visual_Studio/TEMP/Tango.Graphics2D/MainWindow.xaml create mode 100644 Software/Visual_Studio/TEMP/Tango.Graphics2D/MainWindow.xaml.cs create mode 100644 Software/Visual_Studio/TEMP/Tango.Graphics2D/Person.cs create mode 100644 Software/Visual_Studio/TEMP/Tango.Graphics2D/Properties/AssemblyInfo.cs create mode 100644 Software/Visual_Studio/TEMP/Tango.Graphics2D/Properties/Resources.Designer.cs create mode 100644 Software/Visual_Studio/TEMP/Tango.Graphics2D/Properties/Resources.resx create mode 100644 Software/Visual_Studio/TEMP/Tango.Graphics2D/Properties/Settings.Designer.cs create mode 100644 Software/Visual_Studio/TEMP/Tango.Graphics2D/Properties/Settings.settings create mode 100644 Software/Visual_Studio/TEMP/Tango.Graphics2D/Tango.Graphics2D.csproj create mode 100644 Software/Visual_Studio/TEMP/Tango.Graphics2D/Tango.Graphics2D.sln create mode 100644 Software/Visual_Studio/Tango.Touch/Components/DefaultCollectionFilter.cs create mode 100644 Software/Visual_Studio/Tango.Touch/Components/ICollectionFilter.cs (limited to 'Software/Visual_Studio') diff --git a/Software/Visual_Studio/PPC/Modules/Tango.PPC.Jobs/Converters/JobsCategoryToOpacityConverter.cs b/Software/Visual_Studio/PPC/Modules/Tango.PPC.Jobs/Converters/JobsCategoryToOpacityConverter.cs new file mode 100644 index 000000000..0eaad280a --- /dev/null +++ b/Software/Visual_Studio/PPC/Modules/Tango.PPC.Jobs/Converters/JobsCategoryToOpacityConverter.cs @@ -0,0 +1,27 @@ +using System; +using System.Collections.Generic; +using System.Globalization; +using System.Linq; +using System.Text; +using System.Threading.Tasks; +using System.Windows.Data; +using static Tango.PPC.Jobs.ViewModels.JobsViewVM; + +namespace Tango.PPC.Jobs.Converters +{ + public class JobsCategoryToOpacityConverter : IValueConverter + { + public object Convert(object value, Type targetType, object parameter, CultureInfo culture) + { + JobsCategory selected = (JobsCategory)Enum.Parse(typeof(JobsCategory), parameter.ToString()); + JobsCategory category = (JobsCategory)value; + + return category.Equals(selected) ? 1 : 0; + } + + public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) + { + throw new NotImplementedException(); + } + } +} diff --git a/Software/Visual_Studio/PPC/Modules/Tango.PPC.Jobs/Tango.PPC.Jobs.csproj b/Software/Visual_Studio/PPC/Modules/Tango.PPC.Jobs/Tango.PPC.Jobs.csproj index bbfef32fd..55983118d 100644 --- a/Software/Visual_Studio/PPC/Modules/Tango.PPC.Jobs/Tango.PPC.Jobs.csproj +++ b/Software/Visual_Studio/PPC/Modules/Tango.PPC.Jobs/Tango.PPC.Jobs.csproj @@ -170,6 +170,7 @@ + @@ -231,6 +232,7 @@ Settings.settings True + @@ -449,7 +451,7 @@ - + \ No newline at end of file diff --git a/Software/Visual_Studio/PPC/Modules/Tango.PPC.Jobs/ViewContracts/IJobsView.cs b/Software/Visual_Studio/PPC/Modules/Tango.PPC.Jobs/ViewContracts/IJobsView.cs new file mode 100644 index 000000000..7a8907c36 --- /dev/null +++ b/Software/Visual_Studio/PPC/Modules/Tango.PPC.Jobs/ViewContracts/IJobsView.cs @@ -0,0 +1,14 @@ +using System; +using System.Collections.Generic; +using System.Linq; +using System.Text; +using System.Threading.Tasks; +using Tango.PPC.Common; + +namespace Tango.PPC.Jobs.ViewContracts +{ + public interface IJobsView : IPPCView + { + void ScrollToTop(); + } +} diff --git a/Software/Visual_Studio/PPC/Modules/Tango.PPC.Jobs/ViewModels/JobsViewVM.cs b/Software/Visual_Studio/PPC/Modules/Tango.PPC.Jobs/ViewModels/JobsViewVM.cs index c89db820d..9862a4afb 100644 --- a/Software/Visual_Studio/PPC/Modules/Tango.PPC.Jobs/ViewModels/JobsViewVM.cs +++ b/Software/Visual_Studio/PPC/Modules/Tango.PPC.Jobs/ViewModels/JobsViewVM.cs @@ -33,6 +33,8 @@ using System.Windows.Media; using Tango.PMR.TCC; using Tango.Pulse; using System.Windows.Media.Imaging; +using Tango.Touch.Components; +using Tango.PPC.Jobs.ViewContracts; namespace Tango.PPC.Jobs.ViewModels { @@ -40,7 +42,7 @@ namespace Tango.PPC.Jobs.ViewModels /// Represents the jobs list view model. /// /// - public class JobsViewVM : PPCViewModel + public class JobsViewVM : PPCViewModel { private ObservablesContext _db; //Holds the db context for the job list. @@ -132,7 +134,6 @@ namespace Tango.PPC.Jobs.ViewModels _selectedCategoryIndex = value; RaisePropertyChangedAuto(); RaisePropertyChanged(nameof(SelectedCategory)); - Filter = null; } } @@ -162,6 +163,14 @@ namespace Tango.PPC.Jobs.ViewModels set { _filter = value; RaisePropertyChangedAuto(); OnFilterChanged(); } } + private ICollectionFilter _collectionFilter; + public ICollectionFilter CollectionFilter + { + get { return _collectionFilter; } + set { _collectionFilter = value; RaisePropertyChangedAuto(); } + } + + #endregion #region Commands @@ -231,6 +240,28 @@ namespace Tango.PPC.Jobs.ViewModels RegisterForMessage(HandleJobRemovedMessage); RegisterForMessage(HandleJobSavedMessage); RegisterForMessage((x) => Filter = null); + + CollectionFilter = new DefaultCollectionFilter(); + CollectionFilter.RegisterFilter(item => + { + var job = item as Job; + + if (job != null) + { + if (String.IsNullOrEmpty(Filter)) + { + return true; + } + else + { + return (job.Name.ToLower().StartsWith(Filter) || (job.Customer != null && job.Customer.Name.ToLower().StartsWith(Filter))); + } + } + else + { + return true; + } + }); } #endregion @@ -326,15 +357,7 @@ namespace Tango.PPC.Jobs.ViewModels DraftJobsCollectionView.Filter = new Predicate(x => { var job = x as Job; - - if (String.IsNullOrWhiteSpace(Filter)) - { - return job.JobStatus == JobStatuses.Draft; - } - else - { - return job.JobStatus == JobStatuses.Draft && (job.Name.ToLower().StartsWith(Filter) || (job.Customer != null && job.Customer.Name.ToLower().StartsWith(Filter))); - } + return job.JobStatus == JobStatuses.Draft; }); @@ -343,15 +366,7 @@ namespace Tango.PPC.Jobs.ViewModels HistoryJobsCollectionView.Filter = new Predicate(x => { var job = x as Job; - - if (String.IsNullOrWhiteSpace(Filter)) - { - return job.JobStatus != JobStatuses.Draft; - } - else - { - return job.JobStatus != JobStatuses.Draft && (job.Name.ToLower().StartsWith(Filter) || (job.Customer != null && job.Customer.Name.ToLower().StartsWith(Filter))); - } + return job.JobStatus != JobStatuses.Draft; }); IsLoadingJobs = false; @@ -611,14 +626,8 @@ namespace Tango.PPC.Jobs.ViewModels { if (DraftJobsCollectionView != null && HistoryJobsCollectionView != null) { - if (SelectedCategory == JobsCategory.Draft) - { - DraftJobsCollectionView.Refresh(); - } - else if (SelectedCategory == JobsCategory.History) - { - HistoryJobsCollectionView.Refresh(); - } + CollectionFilter.RaiseFilterChanged(); + View.ScrollToTop(); } } diff --git a/Software/Visual_Studio/PPC/Modules/Tango.PPC.Jobs/Views/JobView.xaml b/Software/Visual_Studio/PPC/Modules/Tango.PPC.Jobs/Views/JobView.xaml index 9448665d0..3e2b6b864 100644 --- a/Software/Visual_Studio/PPC/Modules/Tango.PPC.Jobs/Views/JobView.xaml +++ b/Software/Visual_Studio/PPC/Modules/Tango.PPC.Jobs/Views/JobView.xaml @@ -179,129 +179,169 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + Segment # - - + + - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + - - - - - - - - - - - - - - + + + + + + + + - + + - + - - - + + + + + + + + ADD COLOR - - - + + + - - - - - - - - - - - - - - - - - - - ADD COLOR - - - - - - + + @@ -425,67 +427,69 @@ - - - - - Job Details - - + + + + + + Job Details + + , - - - + + + - - + + - Job name: - + Job name: + - Customer: - + Customer: + - Thread type: - + Thread type: + - Comment: - + Comment: + - - + + - - - - - - - - + + + + + + + + - + - + - + - + - + - + - + - - - - + + + + + @@ -612,75 +616,79 @@ - - - - - Embroidery File - + + + + + + Embroidery File + - - - + + + - - Export the attached embroidery file to storage. - EXPORT FILE - - + + Export the attached embroidery file to storage. + EXPORT FILE + + + - - + + - - - - - Job Summary - + + + + + + Job Summary + - - - - + + + + - + - - + + - - - - - + + + + + (+%) - - + + - - + + - + - + - % + % - - - + + + + - - + + Additional Tools @@ -708,286 +716,202 @@ --> - - - - - Sample Dye - - + + + + + + Sample Dye + + - - - - - - - - - - START - - - - - - - - - - - How to continue? + + + + + + + + + + + + START + + + + - - - - - - DONE - - + + + + + + How to continue? + + + + + + + DONE + + - The sample is approved - + The sample is approved + - - - - - REPEAT - - + + + + + REPEAT + + - Dye more samples - - + Dye more samples + + - - - - + + + + - - - - - - + + + + + + Sample Approved: - - - - - ANOTHER SAMPLE - - - - - - + + + + + ANOTHER SAMPLE + + + + + + + + + + + + + + + + - - - - - - - - - + + - - - + + + You can use the color fine tuning tool to adjust the colors. - + + - - + + + + + + + + + Color Fine Tuning + + - - - - - Color Fine Tuning - - - - - - - - - - - - - - - - - - + - - Reset + + + + + + + + + + + + + + + + + 2 + + How to continue - - - - - REPEAT - - + + + + + + DONE + + - Some color need more fine tuning - - - - - - + All colors are approved + - - - - - - + + + + + REPEAT + + + + Some color need more fine tuning + + + + + + + + + + + + + Colors Approved: - - - - - REPEAT FINE TUNING - - - - - - - - - - - - - + + + + + REPEAT FINE TUNING + + + + + + + + + + + + + + diff --git a/Software/Visual_Studio/PPC/Modules/Tango.PPC.Jobs/Views/JobsView.xaml b/Software/Visual_Studio/PPC/Modules/Tango.PPC.Jobs/Views/JobsView.xaml index 475437cf3..5b9c234f0 100644 --- a/Software/Visual_Studio/PPC/Modules/Tango.PPC.Jobs/Views/JobsView.xaml +++ b/Software/Visual_Studio/PPC/Modules/Tango.PPC.Jobs/Views/JobsView.xaml @@ -2,6 +2,7 @@ xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" + xmlns:controls="clr-namespace:Tango.SharedUI.Controls;assembly=Tango.SharedUI" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="clr-namespace:Tango.PPC.Jobs.Views" xmlns:dragAndDrop="clr-namespace:Tango.DragAndDrop;assembly=Tango.DragAndDrop" @@ -32,6 +33,7 @@ + @@ -172,7 +174,7 @@ - + @@ -212,28 +214,28 @@ - + - + - + - + @@ -284,7 +286,7 @@ - + @@ -312,35 +314,35 @@ - + - + - + - + - + diff --git a/Software/Visual_Studio/PPC/Modules/Tango.PPC.Jobs/Views/JobsView.xaml.cs b/Software/Visual_Studio/PPC/Modules/Tango.PPC.Jobs/Views/JobsView.xaml.cs index d8ef4056c..ceac18e38 100644 --- a/Software/Visual_Studio/PPC/Modules/Tango.PPC.Jobs/Views/JobsView.xaml.cs +++ b/Software/Visual_Studio/PPC/Modules/Tango.PPC.Jobs/Views/JobsView.xaml.cs @@ -12,29 +12,45 @@ using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; +using Tango.Core.DI; +using Tango.PPC.Jobs.ViewContracts; namespace Tango.PPC.Jobs.Views { /// /// Interaction logic for JobsView.xaml /// - public partial class JobsView : UserControl + public partial class JobsView : UserControl, IJobsView { public JobsView() { InitializeComponent(); + TangoIOC.Default.Register(this); } - private async void TouchNavigationLinks_SelectionChanged(object sender, SelectionChangedEventArgs e) + private void TouchNavigationLinks_SelectionChanged(object sender, SelectionChangedEventArgs e) { if (dataGridJobs != null) { - await Task.Delay(200); + //await Task.Delay(200); - dataGridJobs.LayoutRows(false); + //dataGridJobs.LayoutRows(false); + //dataGridJobs.ScrollViewer.ScrollToTop(); + + //dataGridJobsHistory.LayoutRows(false); + //dataGridJobsHistory.ScrollViewer.ScrollToTop(); + } + } + + public void ScrollToTop() + { + if (dataGridJobs != null && dataGridJobs.ScrollViewer != null) + { dataGridJobs.ScrollViewer.ScrollToTop(); + } - dataGridJobsHistory.LayoutRows(false); + if (dataGridJobsHistory != null && dataGridJobsHistory.ScrollViewer != null) + { dataGridJobsHistory.ScrollViewer.ScrollToTop(); } } diff --git a/Software/Visual_Studio/TCC/Tango.TCC.Service/App/TCC/src/app/Components/statistics/statistics.component.html b/Software/Visual_Studio/TCC/Tango.TCC.Service/App/TCC/src/app/Components/statistics/statistics.component.html index fb2b8c6d0..791242d5e 100644 --- a/Software/Visual_Studio/TCC/Tango.TCC.Service/App/TCC/src/app/Components/statistics/statistics.component.html +++ b/Software/Visual_Studio/TCC/Tango.TCC.Service/App/TCC/src/app/Components/statistics/statistics.component.html @@ -1,8 +1,13 @@ -
-
+
+
-
-
+
+
- *
...
- * ``` - * - * ### Using an inline function - * The `transition` animation method also supports reading an inline function which can decide - * if its associated animation should be run. - * - * ```typescript - * // this method is run each time the `myAnimationTrigger` trigger value changes. - * function myInlineMatcherFn(fromState: string, toState: string, element: any, params: {[key: - string]: any}): boolean { - * // notice that `element` and `params` are also available here - * return toState == 'yes-please-animate'; - * } - * - * @Component({ - * selector: 'my-component', - * templateUrl: 'my-component-tpl.html', - * animations: [ - * trigger('myAnimationTrigger', [ - * transition(myInlineMatcherFn, [ - * // the animation sequence code - * ]), - * ]) - * ] - * }) - * class MyComponent { - * myStatusExp = "yes-please-animate"; - * } - * ``` - * - * ### Disabling Animations - * When true, the special animation control binding `@.disabled` binding prevents - * all animations from rendering. - * Place the `@.disabled` binding on an element to disable - * animations on the element itself, as well as any inner animation triggers - * within the element. - * - * The following example shows how to use this feature: - * - * ```typescript - * @Component({ - * selector: 'my-component', - * template: ` - *
- *
- *
- * `, - * animations: [ - * trigger("childAnimation", [ - * // ... - * ]) - * ] - * }) - * class MyComponent { - * isDisabled = true; - * exp = '...'; - * } - * ``` - * - * When `@.disabled` is true, it prevents the `@childAnimation` trigger from animating, - * along with any inner animations. - * - * ### Disable animations application-wide - * When an area of the template is set to have animations disabled, - * **all** inner components have their animations disabled as well. - * This means that you can disable all animations for an app - * by placing a host binding set on `@.disabled` on the topmost Angular component. - * - * ```typescript - * import {Component, HostBinding} from '@angular/core'; - * - * @Component({ - * selector: 'app-component', - * templateUrl: 'app.component.html', - * }) - * class AppComponent { - * @HostBinding('@.disabled') - * public animationsDisabled = true; - * } - * ``` - * - * ### Overriding disablement of inner animations - * Despite inner animations being disabled, a parent animation can `query()` - * for inner elements located in disabled areas of the template and still animate - * them if needed. This is also the case for when a sub animation is - * queried by a parent and then later animated using `animateChild()`. - * - * ### Detecting when an animation is disabled - * If a region of the DOM (or the entire application) has its animations disabled, the animation - * trigger callbacks still fire, but for zero seconds. When the callback fires, it provides - * an instance of an `AnimationEvent`. If animations are disabled, - * the `.disabled` flag on the event is true. - * - * @publicApi - */ -function trigger(name, definitions) { - return { type: 7 /* Trigger */, name: name, definitions: definitions, options: {} }; -} -/** - * Defines an animation step that combines styling information with timing information. - * - * @param timings Sets `AnimateTimings` for the parent animation. - * A string in the format "duration [delay] [easing]". - * - Duration and delay are expressed as a number and optional time unit, - * such as "1s" or "10ms" for one second and 10 milliseconds, respectively. - * The default unit is milliseconds. - * - The easing value controls how the animation accelerates and decelerates - * during its runtime. Value is one of `ease`, `ease-in`, `ease-out`, - * `ease-in-out`, or a `cubic-bezier()` function call. - * If not supplied, no easing is applied. - * - * For example, the string "1s 100ms ease-out" specifies a duration of - * 1000 milliseconds, and delay of 100 ms, and the "ease-out" easing style, - * which decelerates near the end of the duration. - * @param styles Sets AnimationStyles for the parent animation. - * A function call to either `style()` or `keyframes()` - * that returns a collection of CSS style entries to be applied to the parent animation. - * When null, uses the styles from the destination state. - * This is useful when describing an animation step that will complete an animation; - * see "Animating to the final state" in `transitions()`. - * @returns An object that encapsulates the animation step. - * - * @usageNotes - * Call within an animation `sequence()`, `{@link animations/group group()}`, or - * `transition()` call to specify an animation step - * that applies given style data to the parent animation for a given amount of time. - * - * ### Syntax Examples - * **Timing examples** - * - * The following examples show various `timings` specifications. - * - `animate(500)` : Duration is 500 milliseconds. - * - `animate("1s")` : Duration is 1000 milliseconds. - * - `animate("100ms 0.5s")` : Duration is 100 milliseconds, delay is 500 milliseconds. - * - `animate("5s ease-in")` : Duration is 5000 milliseconds, easing in. - * - `animate("5s 10ms cubic-bezier(.17,.67,.88,.1)")` : Duration is 5000 milliseconds, delay is 10 - * milliseconds, easing according to a bezier curve. - * - * **Style examples** - * - * The following example calls `style()` to set a single CSS style. - * ```typescript - * animate(500, style({ background: "red" })) - * ``` - * The following example calls `keyframes()` to set a CSS style - * to different values for successive keyframes. - * ```typescript - * animate(500, keyframes( - * [ - * style({ background: "blue" })), - * style({ background: "red" })) - * ]) - * ``` - * - * @publicApi - */ -function animate(timings, styles) { - if (styles === void 0) { styles = null; } - return { type: 4 /* Animate */, styles: styles, timings: timings }; -} -/** - * @description Defines a list of animation steps to be run in parallel. - * - * @param steps An array of animation step objects. - * - When steps are defined by `style()` or `animate()` - * function calls, each call within the group is executed instantly. - * - To specify offset styles to be applied at a later time, define steps with - * `keyframes()`, or use `animate()` calls with a delay value. - * For example: - * - * ```typescript - * group([ - * animate("1s", style({ background: "black" })), - * animate("2s", style({ color: "white" })) - * ]) - * ``` - * - * @param options An options object containing a delay and - * developer-defined parameters that provide styling defaults and - * can be overridden on invocation. - * - * @return An object that encapsulates the group data. - * - * @usageNotes - * Grouped animations are useful when a series of styles must be - * animated at different starting times and closed off at different ending times. - * - * When called within a `sequence()` or a - * `transition()` call, does not continue to the next - * instruction until all of the inner animation steps have completed. - * - * @publicApi - */ -function group(steps, options) { - if (options === void 0) { options = null; } - return { type: 3 /* Group */, steps: steps, options: options }; -} -/** - * Defines a list of animation steps to be run sequentially, one by one. - * - * @param steps An array of animation step objects. - * - Steps defined by `style()` calls apply the styling data immediately. - * - Steps defined by `animate()` calls apply the styling data over time - * as specified by the timing data. - * - * ```typescript - * sequence([ - * style({ opacity: 0 })), - * animate("1s", style({ opacity: 1 })) - * ]) - * ``` - * - * @param options An options object containing a delay and - * developer-defined parameters that provide styling defaults and - * can be overridden on invocation. - * - * @return An object that encapsulates the sequence data. - * - * @usageNotes - * When you pass an array of steps to a - * `transition()` call, the steps run sequentially by default. - * Compare this to the `{@link animations/group group()}` call, which runs animation steps in parallel. - * - * When a sequence is used within a `{@link animations/group group()}` or a `transition()` call, - * execution continues to the next instruction only after each of the inner animation - * steps have completed. - * - * @publicApi - **/ -function sequence(steps, options) { - if (options === void 0) { options = null; } - return { type: 2 /* Sequence */, steps: steps, options: options }; -} -/** - * Declares a key/value object containing CSS properties/styles that - * can then be used for an animation `state`, within an animation `sequence`, - * or as styling data for calls to `animate()` and `keyframes()`. - * - * @param tokens A set of CSS styles or HTML styles associated with an animation state. - * The value can be any of the following: - * - A key-value style pair associating a CSS property with a value. - * - An array of key-value style pairs. - * - An asterisk (*), to use auto-styling, where styles are derived from the element - * being animated and applied to the animation when it starts. - * - * Auto-styling can be used to define a state that depends on layout or other - * environmental factors. - * - * @return An object that encapsulates the style data. - * - * @usageNotes - * The following examples create animation styles that collect a set of - * CSS property values: - * - * ```typescript - * // string values for CSS properties - * style({ background: "red", color: "blue" }) - * - * // numerical pixel values - * style({ width: 100, height: 0 }) - * ``` - * - * The following example uses auto-styling to allow a component to animate from - * a height of 0 up to the height of the parent element: - * - * ``` - * style({ height: 0 }), - * animate("1s", style({ height: "*" })) - * ``` - * - * @publicApi - **/ -function style(tokens) { - return { type: 6 /* Style */, styles: tokens, offset: null }; -} -/** - * Declares an animation state within a trigger attached to an element. - * - * @param name One or more names for the defined state in a comma-separated string. - * The following reserved state names can be supplied to define a style for specific use - * cases: - * - * - `void` You can associate styles with this name to be used when - * the element is detached from the application. For example, when an `ngIf` evaluates - * to false, the state of the associated element is void. - * - `*` (asterisk) Indicates the default state. You can associate styles with this name - * to be used as the fallback when the state that is being animated is not declared - * within the trigger. - * - * @param styles A set of CSS styles associated with this state, created using the - * `style()` function. - * This set of styles persists on the element once the state has been reached. - * @param options Parameters that can be passed to the state when it is invoked. - * 0 or more key-value pairs. - * @return An object that encapsulates the new state data. - * - * @usageNotes - * Use the `trigger()` function to register states to an animation trigger. - * Use the `transition()` function to animate between states. - * When a state is active within a component, its associated styles persist on the element, - * even when the animation ends. - * - * @publicApi - **/ -function state(name, styles, options) { - return { type: 0 /* State */, name: name, styles: styles, options: options }; -} -/** - * Defines a set of animation styles, associating each style with an optional `offset` value. - * - * @param steps A set of animation styles with optional offset data. - * The optional `offset` value for a style specifies a percentage of the total animation - * time at which that style is applied. - * @returns An object that encapsulates the keyframes data. - * - * @usageNotes - * Use with the `animate()` call. Instead of applying animations - * from the current state - * to the destination state, keyframes describe how each style entry is applied and at what point - * within the animation arc. - * Compare [CSS Keyframe Animations](https://www.w3schools.com/css/css3_animations.asp). - * - * ### Usage - * - * In the following example, the offset values describe - * when each `backgroundColor` value is applied. The color is red at the start, and changes to - * blue when 20% of the total time has elapsed. - * - * ```typescript - * // the provided offset values - * animate("5s", keyframes([ - * style({ backgroundColor: "red", offset: 0 }), - * style({ backgroundColor: "blue", offset: 0.2 }), - * style({ backgroundColor: "orange", offset: 0.3 }), - * style({ backgroundColor: "black", offset: 1 }) - * ])) - * ``` - * - * If there are no `offset` values specified in the style entries, the offsets - * are calculated automatically. - * - * ```typescript - * animate("5s", keyframes([ - * style({ backgroundColor: "red" }) // offset = 0 - * style({ backgroundColor: "blue" }) // offset = 0.33 - * style({ backgroundColor: "orange" }) // offset = 0.66 - * style({ backgroundColor: "black" }) // offset = 1 - * ])) - *``` - - * @publicApi - */ -function keyframes(steps) { - return { type: 5 /* Keyframes */, steps: steps }; -} -/** - * Declares an animation transition as a sequence of animation steps to run when a given - * condition is satisfied. The condition is a Boolean expression or function that compares - * the previous and current animation states, and returns true if this transition should occur. - * When the state criteria of a defined transition are met, the associated animation is - * triggered. - * - * @param stateChangeExpr A Boolean expression or function that compares the previous and current - * animation states, and returns true if this transition should occur. Note that "true" and "false" - * match 1 and 0, respectively. An expression is evaluated each time a state change occurs in the - * animation trigger element. - * The animation steps run when the expression evaluates to true. - * - * - A state-change string takes the form "state1 => state2", where each side is a defined animation - * state, or an asterix (*) to refer to a dynamic start or end state. - * - The expression string can contain multiple comma-separated statements; - * for example "state1 => state2, state3 => state4". - * - Special values `:enter` and `:leave` initiate a transition on the entry and exit states, - * equivalent to "void => *" and "* => void". - * - Special values `:increment` and `:decrement` initiate a transition when a numeric value has - * increased or decreased in value. - * - A function is executed each time a state change occurs in the animation trigger element. - * The animation steps run when the function returns true. - * - * @param steps One or more animation objects, as returned by the `animate()` or - * `sequence()` function, that form a transformation from one state to another. - * A sequence is used by default when you pass an array. - * @param options An options object that can contain a delay value for the start of the animation, - * and additional developer-defined parameters. Provided values for additional parameters are used - * as defaults, and override values can be passed to the caller on invocation. - * @returns An object that encapsulates the transition data. - * - * @usageNotes - * The template associated with a component binds an animation trigger to an element. - * - * ```HTML - * - *
...
- * ``` - * - * All transitions are defined within an animation trigger, - * along with named states that the transitions change to and from. - * - * ```typescript - * trigger("myAnimationTrigger", [ - * // define states - * state("on", style({ background: "green" })), - * state("off", style({ background: "grey" })), - * ...] - * ``` - * - * Note that when you call the `sequence()` function within a `{@link animations/group group()}` - * or a `transition()` call, execution does not continue to the next instruction - * until each of the inner animation steps have completed. - * - * ### Syntax examples - * - * The following examples define transitions between the two defined states (and default states), - * using various options: - * - * ```typescript - * // Transition occurs when the state value - * // bound to "myAnimationTrigger" changes from "on" to "off" - * transition("on => off", animate(500)) - * // Run the same animation for both directions - * transition("on <=> off", animate(500)) - * // Define multiple state-change pairs separated by commas - * transition("on => off, off => void", animate(500)) - * ``` - * - * ### Special values for state-change expressions - * - * - Catch-all state change for when an element is inserted into the page and the - * destination state is unknown: - * - * ```typescript - * transition("void => *", [ - * style({ opacity: 0 }), - * animate(500) - * ]) - * ``` - * - * - Capture a state change between any states: - * - * `transition("* => *", animate("1s 0s"))` - * - * - Entry and exit transitions: - * - * ```typescript - * transition(":enter", [ - * style({ opacity: 0 }), - * animate(500, style({ opacity: 1 })) - * ]), - * transition(":leave", [ - * animate(500, style({ opacity: 0 })) - * ]) - * ``` - * - * - Use `:increment` and `:decrement` to initiate transitions: - * - * ```typescript - * transition(":increment", group([ - * query(':enter', [ - * style({ left: '100%' }), - * animate('0.5s ease-out', style('*')) - * ]), - * query(':leave', [ - * animate('0.5s ease-out', style({ left: '-100%' })) - * ]) - * ])) - * - * transition(":decrement", group([ - * query(':enter', [ - * style({ left: '100%' }), - * animate('0.5s ease-out', style('*')) - * ]), - * query(':leave', [ - * animate('0.5s ease-out', style({ left: '-100%' })) - * ]) - * ])) - * ``` - * - * ### State-change functions - * - * Here is an example of a `fromState` specified as a state-change function that invokes an - * animation when true: - * - * ```typescript - * transition((fromState, toState) => - * { - * return fromState == "off" && toState == "on"; - * }, - * animate("1s 0s")) - * ``` - * - * ### Animating to the final state - * - * If the final step in a transition is a call to `animate()` that uses a timing value - * with no style data, that step is automatically considered the final animation arc, - * for the element to reach the final state. Angular automatically adds or removes - * CSS styles to ensure that the element is in the correct final state. - * - * The following example defines a transition that starts by hiding the element, - * then makes sure that it animates properly to whatever state is currently active for trigger: - * - * ```typescript - * transition("void => *", [ - * style({ opacity: 0 }), - * animate(500) - * ]) - * ``` - * ### Boolean value matching - * If a trigger binding value is a Boolean, it can be matched using a transition expression - * that compares true and false or 1 and 0. For example: - * - * ``` - * // in the template - *
...
- * // in the component metadata - * trigger('openClose', [ - * state('true', style({ height: '*' })), - * state('false', style({ height: '0px' })), - * transition('false <=> true', animate(500)) - * ]) - * ``` - * - * @publicApi - **/ -function transition(stateChangeExpr, steps, options) { - if (options === void 0) { options = null; } - return { type: 1 /* Transition */, expr: stateChangeExpr, animation: steps, options: options }; -} -/** - * Produces a reusable animation that can be invoked in another animation or sequence, - * by calling the `useAnimation()` function. - * - * @param steps One or more animation objects, as returned by the `animate()` - * or `sequence()` function, that form a transformation from one state to another. - * A sequence is used by default when you pass an array. - * @param options An options object that can contain a delay value for the start of the - * animation, and additional developer-defined parameters. - * Provided values for additional parameters are used as defaults, - * and override values can be passed to the caller on invocation. - * @returns An object that encapsulates the animation data. - * - * @usageNotes - * The following example defines a reusable animation, providing some default parameter - * values. - * - * ```typescript - * var fadeAnimation = animation([ - * style({ opacity: '{{ start }}' }), - * animate('{{ time }}', - * style({ opacity: '{{ end }}'})) - * ], - * { params: { time: '1000ms', start: 0, end: 1 }}); - * ``` - * - * The following invokes the defined animation with a call to `useAnimation()`, - * passing in override parameter values. - * - * ```js - * useAnimation(fadeAnimation, { - * params: { - * time: '2s', - * start: 1, - * end: 0 - * } - * }) - * ``` - * - * If any of the passed-in parameter values are missing from this call, - * the default values are used. If one or more parameter values are missing before a step is - * animated, `useAnimation()` throws an error. - * - * @publicApi - */ -function animation(steps, options) { - if (options === void 0) { options = null; } - return { type: 8 /* Reference */, animation: steps, options: options }; -} -/** - * Executes a queried inner animation element within an animation sequence. - * - * @param options An options object that can contain a delay value for the start of the - * animation, and additional override values for developer-defined parameters. - * @return An object that encapsulates the child animation data. - * - * @usageNotes - * Each time an animation is triggered in Angular, the parent animation - * has priority and any child animations are blocked. In order - * for a child animation to run, the parent animation must query each of the elements - * containing child animations, and run them using this function. - * - * Note that this feature is designed to be used with `query()` and it will only work - * with animations that are assigned using the Angular animation library. CSS keyframes - * and transitions are not handled by this API. - * - * @publicApi - */ -function animateChild(options) { - if (options === void 0) { options = null; } - return { type: 9 /* AnimateChild */, options: options }; -} -/** - * Starts a reusable animation that is created using the `animation()` function. - * - * @param animation The reusable animation to start. - * @param options An options object that can contain a delay value for the start of - * the animation, and additional override values for developer-defined parameters. - * @return An object that contains the animation parameters. - * - * @publicApi - */ -function useAnimation(animation, options) { - if (options === void 0) { options = null; } - return { type: 10 /* AnimateRef */, animation: animation, options: options }; -} -/** - * Finds one or more inner elements within the current element that is - * being animated within a sequence. Use with `animate()`. - * - * @param selector The element to query, or a set of elements that contain Angular-specific - * characteristics, specified with one or more of the following tokens. - * - `query(":enter")` or `query(":leave")` : Query for newly inserted/removed elements. - * - `query(":animating")` : Query all currently animating elements. - * - `query("@triggerName")` : Query elements that contain an animation trigger. - * - `query("@*")` : Query all elements that contain an animation triggers. - * - `query(":self")` : Include the current element into the animation sequence. - * - * @param animation One or more animation steps to apply to the queried element or elements. - * An array is treated as an animation sequence. - * @param options An options object. Use the 'limit' field to limit the total number of - * items to collect. - * @return An object that encapsulates the query data. - * - * @usageNotes - * Tokens can be merged into a combined query selector string. For example: - * - * ```typescript - * query(':self, .record:enter, .record:leave, @subTrigger', [...]) - * ``` - * - * The `query()` function collects multiple elements and works internally by using - * `element.querySelectorAll`. Use the `limit` field of an options object to limit - * the total number of items to be collected. For example: - * - * ```js - * query('div', [ - * animate(...), - * animate(...) - * ], { limit: 1 }) - * ``` - * - * By default, throws an error when zero items are found. Set the - * `optional` flag to ignore this error. For example: - * - * ```js - * query('.some-element-that-may-not-be-there', [ - * animate(...), - * animate(...) - * ], { optional: true }) - * ``` - * - * ### Usage Example - * - * The following example queries for inner elements and animates them - * individually using `animate()`. - * - * ```typescript - * @Component({ - * selector: 'inner', - * template: ` - *
- *

Title

- *
- * Blah blah blah - *
- *
- * `, - * animations: [ - * trigger('queryAnimation', [ - * transition('* => goAnimate', [ - * // hide the inner elements - * query('h1', style({ opacity: 0 })), - * query('.content', style({ opacity: 0 })), - * - * // animate the inner elements in, one by one - * query('h1', animate(1000, style({ opacity: 1 })), - * query('.content', animate(1000, style({ opacity: 1 })), - * ]) - * ]) - * ] - * }) - * class Cmp { - * exp = ''; - * - * goAnimate() { - * this.exp = 'goAnimate'; - * } - * } - * ``` - * - * @publicApi - */ -function query(selector, animation, options) { - if (options === void 0) { options = null; } - return { type: 11 /* Query */, selector: selector, animation: animation, options: options }; -} -/** - * Use within an animation `query()` call to issue a timing gap after - * each queried item is animated. - * - * @param timings A delay value. - * @param animation One ore more animation steps. - * @returns An object that encapsulates the stagger data. - * - * @usageNotes - * In the following example, a container element wraps a list of items stamped out - * by an `ngFor`. The container element contains an animation trigger that will later be set - * to query for each of the inner items. - * - * Each time items are added, the opacity fade-in animation runs, - * and each removed item is faded out. - * When either of these animations occur, the stagger effect is - * applied after each item's animation is started. - * - * ```html - * - * - *
- *
- *
- * {{ item }} - *
- *
- * ``` - * - * Here is the component code: - * - * ```typescript - * import {trigger, transition, style, animate, query, stagger} from '@angular/animations'; - * @Component({ - * templateUrl: 'list.component.html', - * animations: [ - * trigger('listAnimation', [ - * ... - * ]) - * ] - * }) - * class ListComponent { - * items = []; - * - * showItems() { - * this.items = [0,1,2,3,4]; - * } - * - * hideItems() { - * this.items = []; - * } - * - * toggle() { - * this.items.length ? this.hideItems() : this.showItems(); - * } - * } - * ``` - * - * Here is the animation trigger code: - * - * ```typescript - * trigger('listAnimation', [ - * transition('* => *', [ // each time the binding value changes - * query(':leave', [ - * stagger(100, [ - * animate('0.5s', style({ opacity: 0 })) - * ]) - * ]), - * query(':enter', [ - * style({ opacity: 0 }), - * stagger(100, [ - * animate('0.5s', style({ opacity: 1 })) - * ]) - * ]) - * ]) - * ]) - * ``` - * - * @publicApi - */ -function stagger(timings, animation) { - return { type: 12 /* Stagger */, timings: timings, animation: animation }; -} - -/** - * @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 - */ -function scheduleMicroTask(cb) { - Promise.resolve(null).then(cb); -} - -/** - * @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 - */ -/** - * An empty programmatic controller for reusable animations. - * Used internally when animations are disabled, to avoid - * checking for the null case when an animation player is expected. - * - * @see `animate()` - * @see `AnimationPlayer` - * @see `GroupPlayer` - * - * @publicApi - */ -var NoopAnimationPlayer = /** @class */ (function () { - function NoopAnimationPlayer(duration, delay) { - if (duration === void 0) { duration = 0; } - if (delay === void 0) { delay = 0; } - this._onDoneFns = []; - this._onStartFns = []; - this._onDestroyFns = []; - this._started = false; - this._destroyed = false; - this._finished = false; - this.parentPlayer = null; - this.totalTime = duration + delay; - } - NoopAnimationPlayer.prototype._onFinish = function () { - if (!this._finished) { - this._finished = true; - this._onDoneFns.forEach(function (fn) { return fn(); }); - this._onDoneFns = []; - } - }; - NoopAnimationPlayer.prototype.onStart = function (fn) { this._onStartFns.push(fn); }; - NoopAnimationPlayer.prototype.onDone = function (fn) { this._onDoneFns.push(fn); }; - NoopAnimationPlayer.prototype.onDestroy = function (fn) { this._onDestroyFns.push(fn); }; - NoopAnimationPlayer.prototype.hasStarted = function () { return this._started; }; - NoopAnimationPlayer.prototype.init = function () { }; - NoopAnimationPlayer.prototype.play = function () { - if (!this.hasStarted()) { - this._onStart(); - this.triggerMicrotask(); - } - this._started = true; - }; - /** @internal */ - NoopAnimationPlayer.prototype.triggerMicrotask = function () { - var _this = this; - scheduleMicroTask(function () { return _this._onFinish(); }); - }; - NoopAnimationPlayer.prototype._onStart = function () { - this._onStartFns.forEach(function (fn) { return fn(); }); - this._onStartFns = []; - }; - NoopAnimationPlayer.prototype.pause = function () { }; - NoopAnimationPlayer.prototype.restart = function () { }; - NoopAnimationPlayer.prototype.finish = function () { this._onFinish(); }; - NoopAnimationPlayer.prototype.destroy = function () { - if (!this._destroyed) { - this._destroyed = true; - if (!this.hasStarted()) { - this._onStart(); - } - this.finish(); - this._onDestroyFns.forEach(function (fn) { return fn(); }); - this._onDestroyFns = []; - } - }; - NoopAnimationPlayer.prototype.reset = function () { }; - NoopAnimationPlayer.prototype.setPosition = function (position) { }; - NoopAnimationPlayer.prototype.getPosition = function () { return 0; }; - /** @internal */ - NoopAnimationPlayer.prototype.triggerCallback = function (phaseName) { - var methods = phaseName == 'start' ? this._onStartFns : this._onDoneFns; - methods.forEach(function (fn) { return fn(); }); - methods.length = 0; - }; - return NoopAnimationPlayer; -}()); - -/** - * @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 - */ -/** - * A programmatic controller for a group of reusable animations. - * Used internally to control animations. - * - * @see `AnimationPlayer` - * @see `{@link animations/group group()}` - * - */ -var AnimationGroupPlayer = /** @class */ (function () { - function AnimationGroupPlayer(_players) { - var _this = this; - this._onDoneFns = []; - this._onStartFns = []; - this._finished = false; - this._started = false; - this._destroyed = false; - this._onDestroyFns = []; - this.parentPlayer = null; - this.totalTime = 0; - this.players = _players; - var doneCount = 0; - var destroyCount = 0; - var startCount = 0; - var total = this.players.length; - if (total == 0) { - scheduleMicroTask(function () { return _this._onFinish(); }); - } - else { - this.players.forEach(function (player) { - player.onDone(function () { - if (++doneCount == total) { - _this._onFinish(); - } - }); - player.onDestroy(function () { - if (++destroyCount == total) { - _this._onDestroy(); - } - }); - player.onStart(function () { - if (++startCount == total) { - _this._onStart(); - } - }); - }); - } - this.totalTime = this.players.reduce(function (time, player) { return Math.max(time, player.totalTime); }, 0); - } - AnimationGroupPlayer.prototype._onFinish = function () { - if (!this._finished) { - this._finished = true; - this._onDoneFns.forEach(function (fn) { return fn(); }); - this._onDoneFns = []; - } - }; - AnimationGroupPlayer.prototype.init = function () { this.players.forEach(function (player) { return player.init(); }); }; - AnimationGroupPlayer.prototype.onStart = function (fn) { this._onStartFns.push(fn); }; - AnimationGroupPlayer.prototype._onStart = function () { - if (!this.hasStarted()) { - this._started = true; - this._onStartFns.forEach(function (fn) { return fn(); }); - this._onStartFns = []; - } - }; - AnimationGroupPlayer.prototype.onDone = function (fn) { this._onDoneFns.push(fn); }; - AnimationGroupPlayer.prototype.onDestroy = function (fn) { this._onDestroyFns.push(fn); }; - AnimationGroupPlayer.prototype.hasStarted = function () { return this._started; }; - AnimationGroupPlayer.prototype.play = function () { - if (!this.parentPlayer) { - this.init(); - } - this._onStart(); - this.players.forEach(function (player) { return player.play(); }); - }; - AnimationGroupPlayer.prototype.pause = function () { this.players.forEach(function (player) { return player.pause(); }); }; - AnimationGroupPlayer.prototype.restart = function () { this.players.forEach(function (player) { return player.restart(); }); }; - AnimationGroupPlayer.prototype.finish = function () { - this._onFinish(); - this.players.forEach(function (player) { return player.finish(); }); - }; - AnimationGroupPlayer.prototype.destroy = function () { this._onDestroy(); }; - AnimationGroupPlayer.prototype._onDestroy = function () { - if (!this._destroyed) { - this._destroyed = true; - this._onFinish(); - this.players.forEach(function (player) { return player.destroy(); }); - this._onDestroyFns.forEach(function (fn) { return fn(); }); - this._onDestroyFns = []; - } - }; - AnimationGroupPlayer.prototype.reset = function () { - this.players.forEach(function (player) { return player.reset(); }); - this._destroyed = false; - this._finished = false; - this._started = false; - }; - AnimationGroupPlayer.prototype.setPosition = function (p) { - var timeAtPosition = p * this.totalTime; - this.players.forEach(function (player) { - var position = player.totalTime ? Math.min(1, timeAtPosition / player.totalTime) : 1; - player.setPosition(position); - }); - }; - AnimationGroupPlayer.prototype.getPosition = function () { - var min = 0; - this.players.forEach(function (player) { - var p = player.getPosition(); - min = Math.min(p, min); - }); - return min; - }; - AnimationGroupPlayer.prototype.beforeDestroy = function () { - this.players.forEach(function (player) { - if (player.beforeDestroy) { - player.beforeDestroy(); - } - }); - }; - /** @internal */ - AnimationGroupPlayer.prototype.triggerCallback = function (phaseName) { - var methods = phaseName == 'start' ? this._onStartFns : this._onDoneFns; - methods.forEach(function (fn) { return fn(); }); - methods.length = 0; - }; - return AnimationGroupPlayer; -}()); - -/** - * @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 ɵPRE_STYLE = '!'; - -/** - * @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 - */ - -/** - * @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 - */ - -/** - * @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 - */ - -/** - * Generated bundle index. Do not edit. - */ - - -//# sourceMappingURL=animations.js.map - - -/***/ }), - -/***/ "./node_modules/@angular/animations/fesm5/browser.js": -/*!***********************************************************!*\ - !*** ./node_modules/@angular/animations/fesm5/browser.js ***! - \***********************************************************/ -/*! exports provided: ɵangular_packages_animations_browser_browser_a, AnimationDriver, ɵAnimationDriver, ɵAnimation, ɵAnimationStyleNormalizer, ɵNoopAnimationStyleNormalizer, ɵWebAnimationsStyleNormalizer, ɵNoopAnimationDriver, ɵAnimationEngine, ɵCssKeyframesDriver, ɵCssKeyframesPlayer, ɵcontainsElement, ɵinvokeQuery, ɵmatchesElement, ɵvalidateStyleProperty, ɵWebAnimationsDriver, ɵsupportsWebAnimations, ɵWebAnimationsPlayer, ɵallowPreviousPlayerStylesMerge */ -/***/ (function(module, __webpack_exports__, __webpack_require__) { - -"use strict"; -__webpack_require__.r(__webpack_exports__); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ɵangular_packages_animations_browser_browser_a", function() { return SpecialCasedStyles; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AnimationDriver", function() { return AnimationDriver; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ɵAnimationDriver", function() { return AnimationDriver; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ɵAnimation", function() { return Animation; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ɵAnimationStyleNormalizer", function() { return AnimationStyleNormalizer; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ɵNoopAnimationStyleNormalizer", function() { return NoopAnimationStyleNormalizer; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ɵWebAnimationsStyleNormalizer", function() { return WebAnimationsStyleNormalizer; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ɵNoopAnimationDriver", function() { return NoopAnimationDriver; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ɵAnimationEngine", function() { return AnimationEngine; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ɵCssKeyframesDriver", function() { return CssKeyframesDriver; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ɵCssKeyframesPlayer", function() { return CssKeyframesPlayer; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ɵcontainsElement", function() { return containsElement; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ɵinvokeQuery", function() { return invokeQuery; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ɵmatchesElement", function() { return matchesElement; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ɵvalidateStyleProperty", function() { return validateStyleProperty; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ɵWebAnimationsDriver", function() { return WebAnimationsDriver; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ɵsupportsWebAnimations", function() { return supportsWebAnimations; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ɵWebAnimationsPlayer", function() { return WebAnimationsPlayer; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ɵallowPreviousPlayerStylesMerge", function() { return allowPreviousPlayerStylesMerge; }); -/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.js"); -/* harmony import */ var _angular_animations__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @angular/animations */ "./node_modules/@angular/animations/fesm5/animations.js"); -/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @angular/core */ "./node_modules/@angular/core/fesm5/core.js"); -/** - * @license Angular v7.2.13 - * (c) 2010-2019 Google LLC. https://angular.io/ - * License: MIT - */ - - - - - -function isBrowser() { - return (typeof window !== 'undefined' && typeof window.document !== 'undefined'); -} -function isNode() { - return (typeof process !== 'undefined'); -} -function optimizeGroupPlayer(players) { - switch (players.length) { - case 0: - return new _angular_animations__WEBPACK_IMPORTED_MODULE_1__["NoopAnimationPlayer"](); - case 1: - return players[0]; - default: - return new _angular_animations__WEBPACK_IMPORTED_MODULE_1__["ɵAnimationGroupPlayer"](players); - } -} -function normalizeKeyframes(driver, normalizer, element, keyframes, preStyles, postStyles) { - if (preStyles === void 0) { preStyles = {}; } - if (postStyles === void 0) { postStyles = {}; } - var errors = []; - var normalizedKeyframes = []; - var previousOffset = -1; - var previousKeyframe = null; - keyframes.forEach(function (kf) { - var offset = kf['offset']; - var isSameOffset = offset == previousOffset; - var normalizedKeyframe = (isSameOffset && previousKeyframe) || {}; - Object.keys(kf).forEach(function (prop) { - var normalizedProp = prop; - var normalizedValue = kf[prop]; - if (prop !== 'offset') { - normalizedProp = normalizer.normalizePropertyName(normalizedProp, errors); - switch (normalizedValue) { - case _angular_animations__WEBPACK_IMPORTED_MODULE_1__["ɵPRE_STYLE"]: - normalizedValue = preStyles[prop]; - break; - case _angular_animations__WEBPACK_IMPORTED_MODULE_1__["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 LINE_START = '\n - '; - throw new Error("Unable to animate due to the following errors:" + LINE_START + errors.join(LINE_START)); - } - return normalizedKeyframes; -} -function listenOnPlayer(player, eventName, event, callback) { - switch (eventName) { - case 'start': - player.onStart(function () { return callback(event && copyAnimationEvent(event, 'start', player)); }); - break; - case 'done': - player.onDone(function () { return callback(event && copyAnimationEvent(event, 'done', player)); }); - break; - case 'destroy': - player.onDestroy(function () { return callback(event && copyAnimationEvent(event, 'destroy', player)); }); - break; - } -} -function copyAnimationEvent(e, phaseName, player) { - var totalTime = player.totalTime; - var disabled = player.disabled ? true : false; - var event = makeAnimationEvent(e.element, e.triggerName, e.fromState, e.toState, phaseName || e.phaseName, totalTime == undefined ? e.totalTime : totalTime, disabled); - var data = e['_data']; - if (data != null) { - event['_data'] = data; - } - return event; -} -function makeAnimationEvent(element, triggerName, fromState, toState, phaseName, totalTime, disabled) { - if (phaseName === void 0) { phaseName = ''; } - if (totalTime === void 0) { totalTime = 0; } - return { element: element, triggerName: triggerName, fromState: fromState, toState: toState, phaseName: phaseName, totalTime: totalTime, disabled: !!disabled }; -} -function getOrSetAsInMap(map, key, defaultValue) { - var 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; -} -function parseTimelineCommand(command) { - var separatorPos = command.indexOf(':'); - var id = command.substring(1, separatorPos); - var 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 []; -}; -// Define utility methods for browsers and platform-server(domino) where Element -// and utility methods exist. -var _isNode = isNode(); -if (_isNode || typeof Element !== 'undefined') { - // this is well supported in all browsers - _contains = function (elm1, elm2) { return elm1.contains(elm2); }; - if (_isNode || Element.prototype.matches) { - _matches = function (element, selector) { return element.matches(selector); }; - } - else { - var proto = Element.prototype; - var 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 results = []; - if (multi) { - results.push.apply(results, Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__spread"])(element.querySelectorAll(selector))); - } - else { - var elm = element.querySelector(selector); - if (elm) { - results.push(elm); - } - } - return results; - }; -} -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; -function validateStyleProperty(prop) { - if (!_CACHED_BODY) { - _CACHED_BODY = getBodyNode() || {}; - _IS_WEBKIT = _CACHED_BODY.style ? ('WebkitAppearance' in _CACHED_BODY.style) : false; - } - var result = true; - if (_CACHED_BODY.style && !containsVendorPrefix(prop)) { - result = prop in _CACHED_BODY.style; - if (!result && _IS_WEBKIT) { - var camelProp = 'Webkit' + prop.charAt(0).toUpperCase() + prop.substr(1); - result = camelProp in _CACHED_BODY.style; - } - } - return result; -} -function getBodyNode() { - if (typeof document != 'undefined') { - return document.body; - } - return null; -} -var matchesElement = _matches; -var containsElement = _contains; -var invokeQuery = _query; -function hypenatePropsObject(object) { - var newObj = {}; - Object.keys(object).forEach(function (prop) { - var newProp = prop.replace(/([a-z])([A-Z])/g, '$1-$2'); - newObj[newProp] = object[prop]; - }); - return newObj; -} - -/** - * @publicApi - */ -var NoopAnimationDriver = /** @class */ (function () { - function NoopAnimationDriver() { - } - NoopAnimationDriver.prototype.validateStyleProperty = function (prop) { return validateStyleProperty(prop); }; - NoopAnimationDriver.prototype.matchesElement = function (element, selector) { - return matchesElement(element, selector); - }; - NoopAnimationDriver.prototype.containsElement = function (elm1, elm2) { return containsElement(elm1, elm2); }; - NoopAnimationDriver.prototype.query = function (element, selector, multi) { - return invokeQuery(element, selector, multi); - }; - NoopAnimationDriver.prototype.computeStyle = function (element, prop, defaultValue) { - return defaultValue || ''; - }; - NoopAnimationDriver.prototype.animate = function (element, keyframes, duration, delay, easing, previousPlayers, scrubberAccessRequested) { - if (previousPlayers === void 0) { previousPlayers = []; } - return new _angular_animations__WEBPACK_IMPORTED_MODULE_1__["NoopAnimationPlayer"](duration, delay); - }; - NoopAnimationDriver = Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([ - Object(_angular_core__WEBPACK_IMPORTED_MODULE_2__["Injectable"])() - ], NoopAnimationDriver); - return NoopAnimationDriver; -}()); -/** - * @publicApi - */ -var AnimationDriver = /** @class */ (function () { - function AnimationDriver() { - } - AnimationDriver.NOOP = new NoopAnimationDriver(); - return AnimationDriver; -}()); - -/** - * @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 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'; -function resolveTimingValue(value) { - if (typeof value == 'number') - return value; - var matches = value.match(/^(-?[\.\d]+)(m?s)/); - if (!matches || matches.length < 2) - return 0; - return _convertTimeValueToMS(parseFloat(matches[1]), matches[2]); -} -function _convertTimeValueToMS(value, unit) { - switch (unit) { - case 's': - return value * ONE_SECOND; - default: // ms or something else - return value; - } -} -function resolveTiming(timings, errors, allowNegativeValues) { - return timings.hasOwnProperty('duration') ? - timings : - parseTimeExpression(timings, errors, allowNegativeValues); -} -function parseTimeExpression(exp, errors, allowNegativeValues) { - var regex = /^(-?[\.\d]+)(m?s)(?:\s+(-?[\.\d]+)(m?s))?(?:\s+([-a-z]+(?:\(.+?\))?))?$/i; - var duration; - var delay = 0; - var easing = ''; - if (typeof exp === 'string') { - var 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 delayMatch = matches[3]; - if (delayMatch != null) { - delay = _convertTimeValueToMS(parseFloat(delayMatch), matches[4]); - } - var easingVal = matches[5]; - if (easingVal) { - easing = easingVal; - } - } - else { - duration = exp; - } - if (!allowNegativeValues) { - var containsErrors = false; - var 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 }; -} -function copyObj(obj, destination) { - if (destination === void 0) { destination = {}; } - Object.keys(obj).forEach(function (prop) { destination[prop] = obj[prop]; }); - return destination; -} -function normalizeStyles(styles) { - var normalizedStyles = {}; - if (Array.isArray(styles)) { - styles.forEach(function (data) { return copyStyles(data, false, normalizedStyles); }); - } - else { - copyStyles(styles, false, normalizedStyles); - } - return normalizedStyles; -} -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 prop in styles) { - destination[prop] = styles[prop]; - } - } - else { - copyObj(styles, destination); - } - return destination; -} -function getStyleAttributeString(element, key, value) { - // Return the key-value pair string to be added to the style attribute for the - // given CSS style key. - if (value) { - return key + ':' + value + ';'; - } - else { - return ''; - } -} -function writeStyleAttribute(element) { - // Read the style property of the element and manually reflect it to the - // style attribute. This is needed because Domino on platform-server doesn't - // understand the full set of allowed CSS properties and doesn't reflect some - // of them automatically. - var styleAttrValue = ''; - for (var i = 0; i < element.style.length; i++) { - var key = element.style.item(i); - styleAttrValue += getStyleAttributeString(element, key, element.style.getPropertyValue(key)); - } - for (var key in element.style) { - // Skip internal Domino properties that don't need to be reflected. - if (!element.style.hasOwnProperty(key) || key.startsWith('_')) { - continue; - } - var dashKey = camelCaseToDashCase(key); - styleAttrValue += getStyleAttributeString(element, dashKey, element.style[key]); - } - element.setAttribute('style', styleAttrValue); -} -function setStyles(element, styles, formerStyles) { - if (element['style']) { - Object.keys(styles).forEach(function (prop) { - var camelProp = dashCaseToCamelCase(prop); - if (formerStyles && !formerStyles.hasOwnProperty(prop)) { - formerStyles[prop] = element.style[camelProp]; - } - element.style[camelProp] = styles[prop]; - }); - // On the server set the 'style' attribute since it's not automatically reflected. - if (isNode()) { - writeStyleAttribute(element); - } - } -} -function eraseStyles(element, styles) { - if (element['style']) { - Object.keys(styles).forEach(function (prop) { - var camelProp = dashCaseToCamelCase(prop); - element.style[camelProp] = ''; - }); - // On the server set the 'style' attribute since it's not automatically reflected. - if (isNode()) { - writeStyleAttribute(element); - } - } -} -function normalizeAnimationEntry(steps) { - if (Array.isArray(steps)) { - if (steps.length == 1) - return steps[0]; - return Object(_angular_animations__WEBPACK_IMPORTED_MODULE_1__["sequence"])(steps); - } - return steps; -} -function validateStyleParams(value, options, errors) { - var params = options.params || {}; - var 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'); -function extractStyleParams(value) { - var params = []; - if (typeof value === 'string') { - var val = value.toString(); - var match = void 0; - while (match = PARAM_REGEX.exec(val)) { - params.push(match[1]); - } - PARAM_REGEX.lastIndex = 0; - } - return params; -} -function interpolateParams(value, params, errors) { - var original = value.toString(); - var str = original.replace(PARAM_REGEX, function (_, varName) { - var localVal = params[varName]; - // this means that the value was never overridden 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; -} -function iteratorToArray(iterator) { - var arr = []; - var item = iterator.next(); - while (!item.done) { - arr.push(item.value); - item = iterator.next(); - } - return arr; -} -var DASH_CASE_REGEXP = /-+([a-z0-9])/g; -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(); - }); -} -function camelCaseToDashCase(input) { - return input.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase(); -} -function allowPreviousPlayerStylesMerge(duration, delay) { - return duration === 0 || delay === 0; -} -function balancePreviousStylesIntoKeyframes(element, keyframes, previousStyles) { - var previousStyleProps = Object.keys(previousStyles); - if (previousStyleProps.length && keyframes.length) { - var startingKeyframe_1 = keyframes[0]; - var missingStyleProps_1 = []; - previousStyleProps.forEach(function (prop) { - if (!startingKeyframe_1.hasOwnProperty(prop)) { - missingStyleProps_1.push(prop); - } - startingKeyframe_1[prop] = previousStyles[prop]; - }); - if (missingStyleProps_1.length) { - var _loop_1 = function () { - var kf = keyframes[i]; - missingStyleProps_1.forEach(function (prop) { kf[prop] = computeStyle(element, prop); }); - }; - // tslint:disable-next-line - for (var i = 1; i < keyframes.length; i++) { - _loop_1(); - } - } - } - return keyframes; -} -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); - } -} -function computeStyle(element, prop) { - return window.getComputedStyle(element)[prop]; -} - -/** - * @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 = '*'; -function parseTransitionExpr(transitionValue, errors) { - var expressions = []; - if (typeof transitionValue == 'string') { - transitionValue - .split(/\s*,\s*/) - .forEach(function (str) { return parseInnerTransitionStr(str, expressions, errors); }); - } - else { - expressions.push(transitionValue); - } - return expressions; -} -function parseInnerTransitionStr(eventStr, expressions, errors) { - if (eventStr[0] == ':') { - var result = parseAnimationAlias(eventStr, errors); - if (typeof result == 'function') { - expressions.push(result); - return; - } - eventStr = result; - } - var 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 fromState = match[1]; - var separator = match[2]; - var toState = match[3]; - expressions.push(makeLambdaFromStates(fromState, toState)); - var isFullAnyStateExpr = fromState == ANY_STATE && toState == ANY_STATE; - if (separator[0] == '<' && !isFullAnyStateExpr) { - expressions.push(makeLambdaFromStates(toState, fromState)); - } -} -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']); -function makeLambdaFromStates(lhs, rhs) { - var LHS_MATCH_BOOLEAN = TRUE_BOOLEAN_VALUES.has(lhs) || FALSE_BOOLEAN_VALUES.has(lhs); - var RHS_MATCH_BOOLEAN = TRUE_BOOLEAN_VALUES.has(rhs) || FALSE_BOOLEAN_VALUES.has(rhs); - return function (fromState, toState) { - var lhsMatch = lhs == ANY_STATE || lhs == fromState; - var 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; - }; -} - -var SELF_TOKEN = ':self'; -var SELF_TOKEN_REGEX = new RegExp("s*" + SELF_TOKEN + "s*,?", 'g'); -/* - * [Validation] - * The visitor code below will traverse the animation AST generated by the animation verb functions - * (the output is a tree of objects) and attempt to perform a series of validations on the data. The - * following corner-cases will be validated: - * - * 1. Overlap of animations - * Given that a CSS property cannot be animated in more than one place at the same time, it's - * important that this behavior is detected and validated. The way in which this occurs is that - * each time a style property is examined, a string-map containing the property will be updated with - * the start and end times for when the property is used within an animation step. - * - * If there are two or more parallel animations that are currently running (these are invoked by the - * group()) on the same element then the validator will throw an error. Since the start/end timing - * values are collected for each property then if the current animation step is animating the same - * property and its timing values fall anywhere into the window of time that the property is - * currently being animated within then this is what causes an error. - * - * 2. Timing values - * The validator will validate to see if a timing value of `duration delay easing` or - * `durationNumber` is valid or not. - * - * (note that upon validation the code below will replace the timing data with an object containing - * {duration,delay,easing}. - * - * 3. Offset Validation - * Each of the style() calls are allowed to have an offset value when placed inside of keyframes(). - * Offsets within keyframes() are considered valid when: - * - * - No offsets are used at all - * - Each style() entry contains an offset value - * - Each offset is between 0 and 1 - * - Each offset is greater to or equal than the previous one - * - * Otherwise an error will be thrown. - */ -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; - } - AnimationAstBuilderVisitor.prototype.build = function (metadata, errors) { - var context = new AnimationAstBuilderContext(errors); - this._resetContextStyleTimingState(context); - return visitDslNode(this, normalizeAnimationEntry(metadata), context); - }; - AnimationAstBuilderVisitor.prototype._resetContextStyleTimingState = function (context) { - context.currentQuerySelector = ROOT_SELECTOR; - context.collectedStyles = {}; - context.collectedStyles[ROOT_SELECTOR] = {}; - context.currentTime = 0; - }; - AnimationAstBuilderVisitor.prototype.visitTrigger = function (metadata, context) { - var _this = this; - var queryCount = context.queryCount = 0; - var depCount = context.depCount = 0; - var states = []; - var 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 stateDef_1 = def; - var name_1 = stateDef_1.name; - name_1.toString().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 transition = _this.visitTransition(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 - }; - }; - AnimationAstBuilderVisitor.prototype.visitState = function (metadata, context) { - var styleAst = this.visitStyle(metadata.styles, context); - var astParams = (metadata.options && metadata.options.params) || null; - if (styleAst.containsDynamicStyles) { - var missingSubs_1 = new Set(); - var params_1 = astParams || {}; - styleAst.styles.forEach(function (value) { - if (isObject(value)) { - var stylesObj_1 = 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 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 - }; - }; - AnimationAstBuilderVisitor.prototype.visitTransition = function (metadata, context) { - context.queryCount = 0; - context.depCount = 0; - var animation = visitDslNode(this, normalizeAnimationEntry(metadata.animation), context); - var matchers = parseTransitionExpr(metadata.expr, context.errors); - return { - type: 1 /* Transition */, - matchers: matchers, - animation: animation, - queryCount: context.queryCount, - depCount: context.depCount, - options: normalizeAnimationOptions(metadata.options) - }; - }; - AnimationAstBuilderVisitor.prototype.visitSequence = 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) - }; - }; - AnimationAstBuilderVisitor.prototype.visitGroup = function (metadata, context) { - var _this = this; - var currentTime = context.currentTime; - var furthestTime = 0; - var steps = metadata.steps.map(function (step) { - context.currentTime = currentTime; - var 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) - }; - }; - AnimationAstBuilderVisitor.prototype.visitAnimate = function (metadata, context) { - var timingAst = constructTimingAst(metadata.timings, context.errors); - context.currentAnimateTimings = timingAst; - var styleAst; - var styleMetadata = metadata.styles ? metadata.styles : Object(_angular_animations__WEBPACK_IMPORTED_MODULE_1__["style"])({}); - if (styleMetadata.type == 5 /* Keyframes */) { - styleAst = this.visitKeyframes(styleMetadata, context); - } - else { - var styleMetadata_1 = metadata.styles; - var isEmpty = false; - if (!styleMetadata_1) { - isEmpty = true; - var newStyleData = {}; - if (timingAst.easing) { - newStyleData['easing'] = timingAst.easing; - } - styleMetadata_1 = Object(_angular_animations__WEBPACK_IMPORTED_MODULE_1__["style"])(newStyleData); - } - context.currentTime += timingAst.duration + timingAst.delay; - var _styleAst = this.visitStyle(styleMetadata_1, context); - _styleAst.isEmptyStep = isEmpty; - styleAst = _styleAst; - } - context.currentAnimateTimings = null; - return { - type: 4 /* Animate */, - timings: timingAst, - style: styleAst, - options: null - }; - }; - AnimationAstBuilderVisitor.prototype.visitStyle = function (metadata, context) { - var ast = this._makeStyleAst(metadata, context); - this._validateStyleAst(ast, context); - return ast; - }; - AnimationAstBuilderVisitor.prototype._makeStyleAst = function (metadata, context) { - var styles = []; - if (Array.isArray(metadata.styles)) { - metadata.styles.forEach(function (styleTuple) { - if (typeof styleTuple == 'string') { - if (styleTuple == _angular_animations__WEBPACK_IMPORTED_MODULE_1__["AUTO_STYLE"]) { - styles.push(styleTuple); - } - else { - context.errors.push("The provided style string value " + styleTuple + " is not allowed."); - } - } - else { - styles.push(styleTuple); - } - }); - } - else { - styles.push(metadata.styles); - } - var containsDynamicStyles = false; - var collectedEasing = null; - styles.forEach(function (styleData) { - if (isObject(styleData)) { - var styleMap = styleData; - var easing = styleMap['easing']; - if (easing) { - collectedEasing = easing; - delete styleMap['easing']; - } - if (!containsDynamicStyles) { - for (var prop in styleMap) { - var 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 - }; - }; - AnimationAstBuilderVisitor.prototype._validateStyleAst = function (ast, context) { - var _this = this; - var timings = context.currentAnimateTimings; - var endTime = context.currentTime; - var 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 collectedStyles = context.collectedStyles[context.currentQuerySelector]; - var collectedEntry = collectedStyles[prop]; - var 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); - } - }); - }); - }; - AnimationAstBuilderVisitor.prototype.visitKeyframes = function (metadata, context) { - var _this = this; - var 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 MAX_KEYFRAME_OFFSET = 1; - var totalKeyframesWithOffsets = 0; - var offsets = []; - var offsetsOutOfOrder = false; - var keyframesOutOfRange = false; - var previousOffset = 0; - var keyframes = metadata.steps.map(function (styles) { - var style$$1 = _this._makeStyleAst(styles, context); - var offsetVal = style$$1.offset != null ? style$$1.offset : consumeOffset(style$$1.styles); - var 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 length = metadata.steps.length; - var 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 limit = length - 1; - var currentTime = context.currentTime; - var currentAnimateTimings = context.currentAnimateTimings; - var animateDuration = currentAnimateTimings.duration; - keyframes.forEach(function (kf, i) { - var offset = generatedOffset > 0 ? (i == limit ? 1 : (generatedOffset * i)) : offsets[i]; - var 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; - }; - AnimationAstBuilderVisitor.prototype.visitReference = function (metadata, context) { - return { - type: 8 /* Reference */, - animation: visitDslNode(this, normalizeAnimationEntry(metadata.animation), context), - options: normalizeAnimationOptions(metadata.options) - }; - }; - AnimationAstBuilderVisitor.prototype.visitAnimateChild = function (metadata, context) { - context.depCount++; - return { - type: 9 /* AnimateChild */, - options: normalizeAnimationOptions(metadata.options) - }; - }; - AnimationAstBuilderVisitor.prototype.visitAnimateRef = function (metadata, context) { - return { - type: 10 /* AnimateRef */, - animation: this.visitReference(metadata.animation, context), - options: normalizeAnimationOptions(metadata.options) - }; - }; - AnimationAstBuilderVisitor.prototype.visitQuery = function (metadata, context) { - var parentSelector = context.currentQuerySelector; - var options = (metadata.options || {}); - context.queryCount++; - context.currentQuery = metadata; - var _a = Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__read"])(normalizeSelector(metadata.selector), 2), selector = _a[0], includeSelf = _a[1]; - context.currentQuerySelector = - parentSelector.length ? (parentSelector + ' ' + selector) : selector; - getOrSetAsInMap(context.collectedStyles, context.currentQuerySelector, {}); - var 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) - }; - }; - AnimationAstBuilderVisitor.prototype.visitStagger = function (metadata, context) { - if (!context.currentQuery) { - context.errors.push("stagger() can only be used inside of query()"); - } - var 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; -}()); -function normalizeSelector(selector) { - var 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]; -} -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; -}()); -function consumeOffset(styles) { - if (typeof styles == 'string') - return null; - var offset = null; - if (Array.isArray(styles)) { - styles.forEach(function (styleTuple) { - if (isObject(styleTuple) && styleTuple.hasOwnProperty('offset')) { - var obj = styleTuple; - offset = parseFloat(obj['offset']); - delete obj['offset']; - } - }); - } - else if (isObject(styles) && styles.hasOwnProperty('offset')) { - var obj = styles; - offset = parseFloat(obj['offset']); - delete obj['offset']; - } - return offset; -} -function isObject(value) { - return !Array.isArray(value) && typeof value == 'object'; -} -function constructTimingAst(value, errors) { - var timings = null; - if (value.hasOwnProperty('duration')) { - timings = value; - } - else if (typeof value == 'number') { - var duration = resolveTiming(value, errors).duration; - return makeTimingAst(duration, 0, ''); - } - var strValue = value; - var isDynamic = strValue.split(/\s+/).some(function (v) { return v.charAt(0) == '{' && v.charAt(1) == '{'; }); - if (isDynamic) { - var ast = makeTimingAst(0, 0, ''); - ast.dynamic = true; - ast.strValue = strValue; - return ast; - } - timings = timings || resolveTiming(strValue, errors); - return makeTimingAst(timings.duration, timings.delay, timings.easing); -} -function normalizeAnimationOptions(options) { - if (options) { - options = copyObj(options); - if (options['params']) { - options['params'] = normalizeParams(options['params']); - } - } - else { - options = {}; - } - return options; -} -function makeTimingAst(duration, delay, easing) { - return { duration: duration, delay: delay, easing: easing }; -} - -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 - }; -} - -var ElementInstructionMap = /** @class */ (function () { - function ElementInstructionMap() { - this._map = new Map(); - } - ElementInstructionMap.prototype.consume = function (element) { - var instructions = this._map.get(element); - if (instructions) { - this._map.delete(element); - } - else { - instructions = []; - } - return instructions; - }; - ElementInstructionMap.prototype.append = function (element, instructions) { - var existingInstructions = this._map.get(element); - if (!existingInstructions) { - this._map.set(element, existingInstructions = []); - } - existingInstructions.push.apply(existingInstructions, Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__spread"])(instructions)); - }; - ElementInstructionMap.prototype.has = function (element) { return this._map.has(element); }; - ElementInstructionMap.prototype.clear = function () { this._map.clear(); }; - return ElementInstructionMap; -}()); - -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'); -/* - * The code within this file aims to generate web-animations-compatible keyframes from Angular's - * animation DSL code. - * - * The code below will be converted from: - * - * ``` - * sequence([ - * style({ opacity: 0 }), - * animate(1000, style({ opacity: 0 })) - * ]) - * ``` - * - * To: - * ``` - * keyframes = [{ opacity: 0, offset: 0 }, { opacity: 1, offset: 1 }] - * duration = 1000 - * delay = 0 - * easing = '' - * ``` - * - * For this operation to cover the combination of animation verbs (style, animate, group, etc...) a - * combination of prototypical inheritance, AST traversal and merge-sort-like algorithms are used. - * - * [AST Traversal] - * Each of the animation verbs, when executed, will return an string-map object representing what - * type of action it is (style, animate, group, etc...) and the data associated with it. This means - * that when functional composition mix of these functions is evaluated (like in the example above) - * then it will end up producing a tree of objects representing the animation itself. - * - * When this animation object tree is processed by the visitor code below it will visit each of the - * verb statements within the visitor. And during each visit it will build the context of the - * animation keyframes by interacting with the `TimelineBuilder`. - * - * [TimelineBuilder] - * This class is responsible for tracking the styles and building a series of keyframe objects for a - * timeline between a start and end time. The builder starts off with an initial timeline and each - * time the AST comes across a `group()`, `keyframes()` or a combination of the two wihtin a - * `sequence()` then it will generate a sub timeline for each step as well as a new one after - * they are complete. - * - * As the AST is traversed, the timing state on each of the timelines will be incremented. If a sub - * timeline was created (based on one of the cases above) then the parent timeline will attempt to - * merge the styles used within the sub timelines into itself (only with group() this will happen). - * This happens with a merge operation (much like how the merge works in mergesort) and it will only - * copy the most recently used styles from the sub timelines into the parent timeline. This ensures - * that if the styles are used later on in another phase of the animation then they will be the most - * up-to-date values. - * - * [How Missing Styles Are Updated] - * Each timeline has a `backFill` property which is responsible for filling in new styles into - * already processed keyframes if a new style shows up later within the animation sequence. - * - * ``` - * sequence([ - * style({ width: 0 }), - * animate(1000, style({ width: 100 })), - * animate(1000, style({ width: 200 })), - * animate(1000, style({ width: 300 })) - * animate(1000, style({ width: 400, height: 400 })) // notice how `height` doesn't exist anywhere - * else - * ]) - * ``` - * - * What is happening here is that the `height` value is added later in the sequence, but is missing - * from all previous animation steps. Therefore when a keyframe is created it would also be missing - * from all previous keyframes up until where it is first used. For the timeline keyframe generation - * to properly fill in the style it will place the previous value (the value from the parent - * timeline) or a default value of `*` into the backFill object. Given that each of the keyframe - * styles are objects that prototypically inhert from the backFill object, this means that if a - * value is added into the backFill then it will automatically propagate any missing values to all - * keyframes. Therefore the missing `height` value will be properly filled into the already - * processed keyframes. - * - * When a sub-timeline is created it will have its own backFill property. This is done so that - * styles present within the sub-timeline do not accidentally seep into the previous/future timeline - * keyframes - * - * (For prototypically-inherited contents to be detected a `for(i in obj)` loop must be used.) - * - * [Validation] - * The code in this file is not responsible for validation. That functionality happens with within - * the `AnimationValidatorVisitor` code. - */ -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() { - } - AnimationTimelineBuilderVisitor.prototype.buildKeyframes = function (driver, rootElement, ast, enterClassName, leaveClassName, startingStyles, finalStyles, options, subInstructions, errors) { - if (errors === void 0) { errors = []; } - subInstructions = subInstructions || new ElementInstructionMap(); - var 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 timelines = context.timelines.filter(function (timeline) { return timeline.containsAnimation(); }); - if (timelines.length && Object.keys(finalStyles).length) { - var 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)]; - }; - AnimationTimelineBuilderVisitor.prototype.visitTrigger = function (ast, context) { - // these values are not visited in this AST - }; - AnimationTimelineBuilderVisitor.prototype.visitState = function (ast, context) { - // these values are not visited in this AST - }; - AnimationTimelineBuilderVisitor.prototype.visitTransition = function (ast, context) { - // these values are not visited in this AST - }; - AnimationTimelineBuilderVisitor.prototype.visitAnimateChild = function (ast, context) { - var elementInstructions = context.subInstructions.consume(context.element); - if (elementInstructions) { - var innerContext = context.createSubContext(ast.options); - var startTime = context.currentTimeline.currentTime; - var endTime = this._visitSubInstructions(elementInstructions, innerContext, 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; - }; - AnimationTimelineBuilderVisitor.prototype.visitAnimateRef = function (ast, context) { - var innerContext = context.createSubContext(ast.options); - innerContext.transformIntoNewTimeline(); - this.visitReference(ast.animation, innerContext); - context.transformIntoNewTimeline(innerContext.currentTimeline.currentTime); - context.previousNode = ast; - }; - AnimationTimelineBuilderVisitor.prototype._visitSubInstructions = function (instructions, context, options) { - var startTime = context.currentTimeline.currentTime; - var furthestTime = startTime; - // this is a special-case for when a user wants to skip a sub - // animation from being fired entirely. - var duration = options.duration != null ? resolveTimingValue(options.duration) : null; - var delay = options.delay != null ? resolveTimingValue(options.delay) : null; - if (duration !== 0) { - instructions.forEach(function (instruction) { - var instructionTimings = context.appendInstructionToTimeline(instruction, duration, delay); - furthestTime = - Math.max(furthestTime, instructionTimings.duration + instructionTimings.delay); - }); - } - return furthestTime; - }; - AnimationTimelineBuilderVisitor.prototype.visitReference = function (ast, context) { - context.updateOptions(ast.options, true); - visitDslNode(this, ast.animation, context); - context.previousNode = ast; - }; - AnimationTimelineBuilderVisitor.prototype.visitSequence = function (ast, context) { - var _this = this; - var subContextCount = context.subContextCount; - var ctx = context; - var 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 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; - }; - AnimationTimelineBuilderVisitor.prototype.visitGroup = function (ast, context) { - var _this = this; - var innerTimelines = []; - var furthestTime = context.currentTimeline.currentTime; - var delay = ast.options && ast.options.delay ? resolveTimingValue(ast.options.delay) : 0; - ast.steps.forEach(function (s) { - var 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; - }; - AnimationTimelineBuilderVisitor.prototype._visitTiming = function (ast, context) { - if (ast.dynamic) { - var strValue = ast.strValue; - var 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 }; - } - }; - AnimationTimelineBuilderVisitor.prototype.visitAnimate = function (ast, context) { - var timings = context.currentAnimateTimings = this._visitTiming(ast.timings, context); - var timeline = context.currentTimeline; - if (timings.delay) { - context.incrementTime(timings.delay); - timeline.snapshotCurrentStyles(); - } - var style$$1 = ast.style; - if (style$$1.type == 5 /* Keyframes */) { - this.visitKeyframes(style$$1, context); - } - else { - context.incrementTime(timings.duration); - this.visitStyle(style$$1, context); - timeline.applyStylesToKeyframe(); - } - context.currentAnimateTimings = null; - context.previousNode = ast; - }; - AnimationTimelineBuilderVisitor.prototype.visitStyle = function (ast, context) { - var timeline = context.currentTimeline; - var timings = 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 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; - }; - AnimationTimelineBuilderVisitor.prototype.visitKeyframes = function (ast, context) { - var currentAnimateTimings = context.currentAnimateTimings; - var startTime = (context.currentTimeline).duration; - var duration = currentAnimateTimings.duration; - var innerContext = context.createSubContext(); - var innerTimeline = innerContext.currentTimeline; - innerTimeline.easing = currentAnimateTimings.easing; - ast.styles.forEach(function (step) { - var 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; - }; - AnimationTimelineBuilderVisitor.prototype.visitQuery = 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 startTime = context.currentTimeline.currentTime; - var options = (ast.options || {}); - var 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 furthestTime = startTime; - var elms = context.invokeQuery(ast.selector, ast.originalSelector, ast.limit, ast.includeSelf, options.optional ? true : false, context.errors); - context.currentQueryTotal = elms.length; - var sameElementTimeline = null; - elms.forEach(function (element, i) { - context.currentQueryIndex = i; - var 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 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; - }; - AnimationTimelineBuilderVisitor.prototype.visitStagger = function (ast, context) { - var parentContext = context.parentContext; - var tl = context.currentTimeline; - var timings = ast.timings; - var duration = Math.abs(timings.duration); - var maxTime = duration * (context.currentQueryTotal - 1); - var delay = duration * context.currentQueryIndex; - var staggerTransformer = timings.duration < 0 ? 'reverse' : timings.easing; - switch (staggerTransformer) { - case 'reverse': - delay = maxTime - delay; - break; - case 'full': - delay = parentContext.currentStaggerTime; - break; - } - var timeline = context.currentTimeline; - if (delay) { - timeline.delayNextStep(delay); - } - var 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 = {}; -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: function () { return this.options.params; }, - enumerable: true, - configurable: true - }); - AnimationTimelineContext.prototype.updateOptions = function (options, skipIfExists) { - var _this = this; - if (!options) - return; - var newOptions = options; - var optionsToUpdate = this.options; - // NOTE: this will get patched up when other animation methods support duration overrides - if (newOptions.duration != null) { - optionsToUpdate.duration = resolveTimingValue(newOptions.duration); - } - if (newOptions.delay != null) { - optionsToUpdate.delay = resolveTimingValue(newOptions.delay); - } - var newParams = newOptions.params; - if (newParams) { - var paramsToUpdate_1 = 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); - } - }); - } - }; - AnimationTimelineContext.prototype._copyOptions = function () { - var options = {}; - if (this.options) { - var oldParams_1 = this.options.params; - if (oldParams_1) { - var params_1 = options['params'] = {}; - Object.keys(oldParams_1).forEach(function (name) { params_1[name] = oldParams_1[name]; }); - } - } - return options; - }; - AnimationTimelineContext.prototype.createSubContext = function (options, element, newTime) { - if (options === void 0) { options = null; } - var target = element || this.element; - var 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; - }; - AnimationTimelineContext.prototype.transformIntoNewTimeline = function (newTime) { - this.previousNode = DEFAULT_NOOP_PREVIOUS_NODE; - this.currentTimeline = this.currentTimeline.fork(this.element, newTime); - this.timelines.push(this.currentTimeline); - return this.currentTimeline; - }; - AnimationTimelineContext.prototype.appendInstructionToTimeline = function (instruction, duration, delay) { - var updatedTimings = { - duration: duration != null ? duration : instruction.duration, - delay: this.currentTimeline.currentTime + (delay != null ? delay : 0) + instruction.delay, - easing: '' - }; - var builder = new SubTimelineBuilder(this._driver, instruction.element, instruction.keyframes, instruction.preStyleProps, instruction.postStyleProps, updatedTimings, instruction.stretchStartingKeyframe); - this.timelines.push(builder); - return updatedTimings; - }; - AnimationTimelineContext.prototype.incrementTime = function (time) { - this.currentTimeline.forwardTime(this.currentTimeline.duration + time); - }; - AnimationTimelineContext.prototype.delayNextStep = function (delay) { - // negative delays are not yet supported - if (delay > 0) { - this.currentTimeline.delayNextStep(delay); - } - }; - AnimationTimelineContext.prototype.invokeQuery = function (selector, originalSelector, limit, includeSelf, optional, errors) { - var 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 multi = limit != 1; - var 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, Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__spread"])(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 = this._elementTimelineStylesLookup.get(element); - if (!this._globalTimelineStyles) { - this._globalTimelineStyles = this._localTimelineStyles; - this._elementTimelineStylesLookup.set(element, this._localTimelineStyles); - } - this._loadKeyframe(); - } - TimelineBuilder.prototype.containsAnimation = function () { - switch (this._keyframes.size) { - case 0: - return false; - case 1: - return this.getCurrentStyleProperties().length > 0; - default: - return true; - } - }; - TimelineBuilder.prototype.getCurrentStyleProperties = function () { return Object.keys(this._currentKeyframe); }; - Object.defineProperty(TimelineBuilder.prototype, "currentTime", { - get: function () { return this.startTime + this.duration; }, - enumerable: true, - configurable: true - }); - TimelineBuilder.prototype.delayNextStep = 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 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; - } - }; - TimelineBuilder.prototype.fork = function (element, currentTime) { - this.applyStylesToKeyframe(); - return new TimelineBuilder(this._driver, element, currentTime || this.currentTime, this._elementTimelineStylesLookup); - }; - TimelineBuilder.prototype._loadKeyframe = function () { - if (this._currentKeyframe) { - this._previousKeyframe = this._currentKeyframe; - } - this._currentKeyframe = this._keyframes.get(this.duration); - if (!this._currentKeyframe) { - this._currentKeyframe = Object.create(this._backFill, {}); - this._keyframes.set(this.duration, this._currentKeyframe); - } - }; - TimelineBuilder.prototype.forwardFrame = function () { - this.duration += ONE_FRAME_IN_MILLISECONDS; - this._loadKeyframe(); - }; - TimelineBuilder.prototype.forwardTime = function (time) { - this.applyStylesToKeyframe(); - this.duration = time; - this._loadKeyframe(); - }; - TimelineBuilder.prototype._updateStyle = function (prop, value) { - this._localTimelineStyles[prop] = value; - this._globalTimelineStyles[prop] = value; - this._styleSummary[prop] = { time: this.currentTime, value: value }; - }; - TimelineBuilder.prototype.allowOnlyTimelineStyles = function () { return this._currentEmptyStepKeyframe !== this._currentKeyframe; }; - TimelineBuilder.prototype.applyEmptyStep = 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] || _angular_animations__WEBPACK_IMPORTED_MODULE_1__["AUTO_STYLE"]; - _this._currentKeyframe[prop] = _angular_animations__WEBPACK_IMPORTED_MODULE_1__["AUTO_STYLE"]; - }); - this._currentEmptyStepKeyframe = this._currentKeyframe; - }; - TimelineBuilder.prototype.setStyles = function (input, easing, errors, options) { - var _this = this; - if (easing) { - this._previousKeyframe['easing'] = easing; - } - var params = (options && options.params) || {}; - var styles = flattenStyles(input, this._globalTimelineStyles); - Object.keys(styles).forEach(function (prop) { - var 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] : - _angular_animations__WEBPACK_IMPORTED_MODULE_1__["AUTO_STYLE"]; - } - _this._updateStyle(prop, val); - }); - }; - TimelineBuilder.prototype.applyStylesToKeyframe = function () { - var _this = this; - var styles = this._pendingStyles; - var props = Object.keys(styles); - if (props.length == 0) - return; - this._pendingStyles = {}; - props.forEach(function (prop) { - var 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]; - } - }); - }; - TimelineBuilder.prototype.snapshotCurrentStyles = function () { - var _this = this; - Object.keys(this._localTimelineStyles).forEach(function (prop) { - var val = _this._localTimelineStyles[prop]; - _this._pendingStyles[prop] = val; - _this._updateStyle(prop, val); - }); - }; - TimelineBuilder.prototype.getFinalKeyframe = function () { return this._keyframes.get(this.duration); }; - Object.defineProperty(TimelineBuilder.prototype, "properties", { - get: function () { - var properties = []; - for (var prop in this._currentKeyframe) { - properties.push(prop); - } - return properties; - }, - enumerable: true, - configurable: true - }); - TimelineBuilder.prototype.mergeTimelineCollectedStyles = function (timeline) { - var _this = this; - Object.keys(timeline._styleSummary).forEach(function (prop) { - var details0 = _this._styleSummary[prop]; - var details1 = timeline._styleSummary[prop]; - if (!details0 || details1.time > details0.time) { - _this._updateStyle(prop, details1.value); - } - }); - }; - TimelineBuilder.prototype.buildKeyframes = function () { - var _this = this; - this.applyStylesToKeyframe(); - var preStyleProps = new Set(); - var postStyleProps = new Set(); - var isEmpty = this._keyframes.size === 1 && this.duration === 0; - var finalKeyframes = []; - this._keyframes.forEach(function (keyframe, time) { - var finalKeyframe = copyStyles(keyframe, true); - Object.keys(finalKeyframe).forEach(function (prop) { - var value = finalKeyframe[prop]; - if (value == _angular_animations__WEBPACK_IMPORTED_MODULE_1__["ɵPRE_STYLE"]) { - preStyleProps.add(prop); - } - else if (value == _angular_animations__WEBPACK_IMPORTED_MODULE_1__["AUTO_STYLE"]) { - postStyleProps.add(prop); - } - }); - if (!isEmpty) { - finalKeyframe['offset'] = time / _this.duration; - } - finalKeyframes.push(finalKeyframe); - }); - var preProps = preStyleProps.size ? iteratorToArray(preStyleProps.values()) : []; - var postProps = postStyleProps.size ? iteratorToArray(postStyleProps.values()) : []; - // special case for a 0-second animation (which is designed just to place styles onscreen) - if (isEmpty) { - var kf0 = finalKeyframes[0]; - var 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) { - Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__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; - } - SubTimelineBuilder.prototype.containsAnimation = function () { return this.keyframes.length > 1; }; - SubTimelineBuilder.prototype.buildKeyframes = function () { - var keyframes = this.keyframes; - var _a = this.timings, delay = _a.delay, duration = _a.duration, easing = _a.easing; - if (this._stretchStartingKeyframe && delay) { - var newKeyframes = []; - var totalTime = duration + delay; - var startingGap = delay / totalTime; - // the original starting keyframe now starts once the delay is done - var newFirstKeyframe = copyStyles(keyframes[0], false); - newFirstKeyframe['offset'] = 0; - newKeyframes.push(newFirstKeyframe); - var 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 limit = keyframes.length - 1; - for (var i = 1; i <= limit; i++) { - var kf = copyStyles(keyframes[i], false); - var oldOffset = kf['offset']; - var 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)); -function roundOffset(offset, decimalPoints) { - if (decimalPoints === void 0) { decimalPoints = 3; } - var mult = Math.pow(10, decimalPoints - 1); - return Math.round(offset * mult) / mult; -} -function flattenStyles(input, allStyles) { - var styles = {}; - var allProperties; - input.forEach(function (token) { - if (token === '*') { - allProperties = allProperties || Object.keys(allStyles); - allProperties.forEach(function (prop) { styles[prop] = _angular_animations__WEBPACK_IMPORTED_MODULE_1__["AUTO_STYLE"]; }); - } - else { - copyStyles(token, false, styles); - } - }); - return styles; -} - -var Animation = /** @class */ (function () { - function Animation(_driver, input) { - this._driver = _driver; - var errors = []; - var ast = buildAnimationAst(_driver, input, errors); - if (errors.length) { - var errorMessage = "animation validation failed:\n" + errors.join("\n"); - throw new Error(errorMessage); - } - this._animationAst = ast; - } - Animation.prototype.buildTimelines = function (element, startingStyles, destinationStyles, options, subInstructions) { - var start = Array.isArray(startingStyles) ? normalizeStyles(startingStyles) : - startingStyles; - var dest = Array.isArray(destinationStyles) ? normalizeStyles(destinationStyles) : - destinationStyles; - var errors = []; - subInstructions = subInstructions || new ElementInstructionMap(); - var result = buildAnimationTimelines(this._driver, element, this._animationAst, ENTER_CLASSNAME, LEAVE_CLASSNAME, start, dest, options, subInstructions, errors); - if (errors.length) { - var errorMessage = "animation building failed:\n" + errors.join("\n"); - throw new Error(errorMessage); - } - return result; - }; - return Animation; -}()); - -/** - * @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 - */ -/** - * @publicApi - */ -var AnimationStyleNormalizer = /** @class */ (function () { - function AnimationStyleNormalizer() { - } - return AnimationStyleNormalizer; -}()); -/** - * @publicApi - */ -var NoopAnimationStyleNormalizer = /** @class */ (function () { - function NoopAnimationStyleNormalizer() { - } - NoopAnimationStyleNormalizer.prototype.normalizePropertyName = function (propertyName, errors) { return propertyName; }; - NoopAnimationStyleNormalizer.prototype.normalizeStyleValue = function (userProvidedProperty, normalizedProperty, value, errors) { - return value; - }; - return NoopAnimationStyleNormalizer; -}()); - -var WebAnimationsStyleNormalizer = /** @class */ (function (_super) { - Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(WebAnimationsStyleNormalizer, _super); - function WebAnimationsStyleNormalizer() { - return _super !== null && _super.apply(this, arguments) || this; - } - WebAnimationsStyleNormalizer.prototype.normalizePropertyName = function (propertyName, errors) { - return dashCaseToCamelCase(propertyName); - }; - WebAnimationsStyleNormalizer.prototype.normalizeStyleValue = function (userProvidedProperty, normalizedProperty, value, errors) { - var unit = ''; - var strVal = value.toString().trim(); - if (DIMENSIONAL_PROP_MAP[normalizedProperty] && value !== 0 && value !== '0') { - if (typeof value === 'number') { - unit = 'px'; - } - else { - var 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(',')); -function makeBooleanMap(keys) { - var map = {}; - keys.forEach(function (key) { return map[key] = true; }); - return map; -} - -function createTransitionInstruction(element, triggerName, fromState, toState, isRemovalTransition, fromStyles, toStyles, timelines, queriedElements, preStyleProps, postStyleProps, totalTime, 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, - totalTime: totalTime, - errors: errors - }; -} - -var EMPTY_OBJECT = {}; -var AnimationTransitionFactory = /** @class */ (function () { - function AnimationTransitionFactory(_triggerName, ast, _stateStyles) { - this._triggerName = _triggerName; - this.ast = ast; - this._stateStyles = _stateStyles; - } - AnimationTransitionFactory.prototype.match = function (currentState, nextState, element, params) { - return oneOrMoreTransitionsMatch(this.ast.matchers, currentState, nextState, element, params); - }; - AnimationTransitionFactory.prototype.buildStyles = function (stateName, params, errors) { - var backupStateStyler = this._stateStyles['*']; - var stateStyler = this._stateStyles[stateName]; - var backupStyles = backupStateStyler ? backupStateStyler.buildStyles(params, errors) : {}; - return stateStyler ? stateStyler.buildStyles(params, errors) : backupStyles; - }; - AnimationTransitionFactory.prototype.build = function (driver, element, currentState, nextState, enterClassName, leaveClassName, currentOptions, nextOptions, subInstructions, skipAstBuild) { - var errors = []; - var transitionAnimationParams = this.ast.options && this.ast.options.params || EMPTY_OBJECT; - var currentAnimationParams = currentOptions && currentOptions.params || EMPTY_OBJECT; - var currentStateStyles = this.buildStyles(currentState, currentAnimationParams, errors); - var nextAnimationParams = nextOptions && nextOptions.params || EMPTY_OBJECT; - var nextStateStyles = this.buildStyles(nextState, nextAnimationParams, errors); - var queriedElements = new Set(); - var preStyleMap = new Map(); - var postStyleMap = new Map(); - var isRemoval = nextState === 'void'; - var animationOptions = { params: Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__assign"])({}, transitionAnimationParams, nextAnimationParams) }; - var timelines = skipAstBuild ? [] : buildAnimationTimelines(driver, element, this.ast.animation, enterClassName, leaveClassName, currentStateStyles, nextStateStyles, animationOptions, subInstructions, errors); - var totalTime = 0; - timelines.forEach(function (tl) { totalTime = Math.max(tl.duration + tl.delay, totalTime); }); - if (errors.length) { - return createTransitionInstruction(element, this._triggerName, currentState, nextState, isRemoval, currentStateStyles, nextStateStyles, [], [], preStyleMap, postStyleMap, totalTime, errors); - } - timelines.forEach(function (tl) { - var elm = tl.element; - var preProps = getOrSetAsInMap(preStyleMap, elm, {}); - tl.preStyleProps.forEach(function (prop) { return preProps[prop] = true; }); - var postProps = getOrSetAsInMap(postStyleMap, elm, {}); - tl.postStyleProps.forEach(function (prop) { return postProps[prop] = true; }); - if (elm !== element) { - queriedElements.add(elm); - } - }); - var queriedElementsList = iteratorToArray(queriedElements.values()); - return createTransitionInstruction(element, this._triggerName, currentState, nextState, isRemoval, currentStateStyles, nextStateStyles, timelines, queriedElementsList, preStyleMap, postStyleMap, totalTime); - }; - return AnimationTransitionFactory; -}()); -function oneOrMoreTransitionsMatch(matchFns, currentState, nextState, element, params) { - return matchFns.some(function (fn) { return fn(currentState, nextState, element, params); }); -} -var AnimationStateStyles = /** @class */ (function () { - function AnimationStateStyles(styles, defaultParams) { - this.styles = styles; - this.defaultParams = defaultParams; - } - AnimationStateStyles.prototype.buildStyles = function (params, errors) { - var finalStyles = {}; - var combinedParams = copyObj(this.defaultParams); - Object.keys(params).forEach(function (key) { - var value = params[key]; - if (value != null) { - combinedParams[key] = value; - } - }); - this.styles.styles.forEach(function (value) { - if (typeof value !== 'string') { - var styleObj_1 = value; - Object.keys(styleObj_1).forEach(function (prop) { - var val = styleObj_1[prop]; - if (val.length > 1) { - val = interpolateParams(val, combinedParams, errors); - } - finalStyles[prop] = val; - }); - } - }); - return finalStyles; - }; - return AnimationStateStyles; -}()); - -/** - * @publicApi - */ -function buildTrigger(name, ast) { - return new AnimationTrigger(name, ast); -} -/** -* @publicApi -*/ -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 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: function () { return this.ast.queryCount > 0; }, - enumerable: true, - configurable: true - }); - AnimationTrigger.prototype.matchTransition = function (currentState, nextState, element, params) { - var entry = this.transitionFactories.find(function (f) { return f.match(currentState, nextState, element, params); }); - return entry || null; - }; - AnimationTrigger.prototype.matchStyles = function (currentState, params, errors) { - return this.fallbackTransition.buildStyles(currentState, params, errors); - }; - return AnimationTrigger; -}()); -function createFallbackTransition(triggerName, states) { - var matchers = [function (fromState, toState) { return true; }]; - var animation = { type: 2 /* Sequence */, steps: [], options: null }; - var transition = { - type: 1 /* Transition */, - animation: animation, - matchers: matchers, - options: null, - queryCount: 0, - depCount: 0 - }; - return new AnimationTransitionFactory(triggerName, transition, states); -} -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]; - } -} - -/** - * @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 EMPTY_INSTRUCTION_MAP = new ElementInstructionMap(); -var TimelineAnimationEngine = /** @class */ (function () { - function TimelineAnimationEngine(bodyNode, _driver, _normalizer) { - this.bodyNode = bodyNode; - this._driver = _driver; - this._normalizer = _normalizer; - this._animations = {}; - this._playersById = {}; - this.players = []; - } - TimelineAnimationEngine.prototype.register = function (id, metadata) { - var errors = []; - var 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; - } - }; - TimelineAnimationEngine.prototype._buildPlayer = function (i, preStyles, postStyles) { - var element = i.element; - var keyframes = normalizeKeyframes(this._driver, this._normalizer, element, i.keyframes, preStyles, postStyles); - return this._driver.animate(element, keyframes, i.duration, i.delay, i.easing, [], true); - }; - TimelineAnimationEngine.prototype.create = function (id, element, options) { - var _this = this; - if (options === void 0) { options = {}; } - var errors = []; - var ast = this._animations[id]; - var instructions; - var 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 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, _angular_animations__WEBPACK_IMPORTED_MODULE_1__["AUTO_STYLE"]); }); - }); - var players = instructions.map(function (i) { - var styles = autoStylesMap.get(i.element); - return _this._buildPlayer(i, {}, styles); - }); - var player = optimizeGroupPlayer(players); - this._playersById[id] = player; - player.onDestroy(function () { return _this.destroy(id); }); - this.players.push(player); - return player; - }; - TimelineAnimationEngine.prototype.destroy = function (id) { - var player = this._getPlayer(id); - player.destroy(); - delete this._playersById[id]; - var index = this.players.indexOf(player); - if (index >= 0) { - this.players.splice(index, 1); - } - }; - TimelineAnimationEngine.prototype._getPlayer = function (id) { - var player = this._playersById[id]; - if (!player) { - throw new Error("Unable to find the timeline player referenced by " + id); - } - return player; - }; - TimelineAnimationEngine.prototype.listen = function (id, element, eventName, callback) { - // triggerName, fromState, toState are all ignored for timeline animations - var baseEvent = makeAnimationEvent(element, '', '', ''); - listenOnPlayer(this._getPlayer(id), eventName, baseEvent, callback); - return function () { }; - }; - TimelineAnimationEngine.prototype.command = function (id, element, command, args) { - if (command == 'register') { - this.register(id, args[0]); - return; - } - if (command == 'create') { - var options = (args[0] || {}); - this.create(id, element, options); - return; - } - var 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(args[0])); - break; - case 'destroy': - this.destroy(id); - break; - } - }; - return TimelineAnimationEngine; -}()); - -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: false, - setForMove: false, - hasAnimation: false, - removedBeforeQueried: false -}; -var NULL_REMOVED_QUERIED_STATE = { - namespaceId: '', - setForMove: false, - setForRemoval: false, - hasAnimation: false, - removedBeforeQueried: true -}; -var REMOVAL_FLAG = '__ng_removed'; -var StateValue = /** @class */ (function () { - function StateValue(input, namespaceId) { - if (namespaceId === void 0) { namespaceId = ''; } - this.namespaceId = namespaceId; - var isObj = input && input.hasOwnProperty('value'); - var value = isObj ? input['value'] : input; - this.value = normalizeTriggerValue(value); - if (isObj) { - var options = copyObj(input); - delete options['value']; - this.options = options; - } - else { - this.options = {}; - } - if (!this.options.params) { - this.options.params = {}; - } - } - Object.defineProperty(StateValue.prototype, "params", { - get: function () { return this.options.params; }, - enumerable: true, - configurable: true - }); - StateValue.prototype.absorbOptions = function (options) { - var newParams = options.params; - if (newParams) { - var oldParams_1 = 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 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); - } - AnimationTransitionNamespace.prototype.listen = 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 listeners = getOrSetAsInMap(this._elementListeners, element, []); - var data = { name: name, phase: phase, callback: callback }; - listeners.push(data); - var 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) - _this._engine.afterFlush(function () { - var index = listeners.indexOf(data); - if (index >= 0) { - listeners.splice(index, 1); - } - if (!_this._triggers[name]) { - delete triggersWithStates[name]; - } - }); - }; - }; - AnimationTransitionNamespace.prototype.register = function (name, ast) { - if (this._triggers[name]) { - // throw - return false; - } - else { - this._triggers[name] = ast; - return true; - } - }; - AnimationTransitionNamespace.prototype._getTrigger = function (name) { - var trigger = this._triggers[name]; - if (!trigger) { - throw new Error("The provided animation trigger \"" + name + "\" has not been registered!"); - } - return trigger; - }; - AnimationTransitionNamespace.prototype.trigger = function (element, triggerName, value, defaultToFallback) { - var _this = this; - if (defaultToFallback === void 0) { defaultToFallback = true; } - var trigger = this._getTrigger(triggerName); - var player = new TransitionAnimationPlayer(this.id, triggerName, element); - var 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 fromState = triggersWithStates[triggerName]; - var toState = new StateValue(value, this.id); - var isObj = value && value.hasOwnProperty('value'); - if (!isObj && fromState) { - toState.absorbOptions(fromState.options); - } - triggersWithStates[triggerName] = toState; - if (!fromState) { - fromState = DEFAULT_STATE_VALUE; - } - var 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 errors = []; - var fromStyles_1 = trigger.matchStyles(fromState.value, fromState.params, errors); - var 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 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 transition = trigger.matchTransition(fromState.value, toState.value, element, toState.params); - var 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 index = _this.players.indexOf(player); - if (index >= 0) { - _this.players.splice(index, 1); - } - var players = _this._engine.playersByElement.get(element); - if (players) { - var index_1 = players.indexOf(player); - if (index_1 >= 0) { - players.splice(index_1, 1); - } - } - }); - this.players.push(player); - playersOnElement.push(player); - return player; - }; - AnimationTransitionNamespace.prototype.deregister = 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; })); - }); - }; - AnimationTransitionNamespace.prototype.clearElementCache = function (element) { - this._engine.statesByElement.delete(element); - this._elementListeners.delete(element); - var elementPlayers = this._engine.playersByElement.get(element); - if (elementPlayers) { - elementPlayers.forEach(function (player) { return player.destroy(); }); - this._engine.playersByElement.delete(element); - } - }; - AnimationTransitionNamespace.prototype._signalRemovalForInnerTriggers = 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 namespaces = _this._engine.fetchNamespacesByElement(elm); - if (namespaces.size) { - namespaces.forEach(function (ns) { return ns.triggerLeaveAnimation(elm, context, false, true); }); - } - else { - _this.clearElementCache(elm); - } - }); - }; - AnimationTransitionNamespace.prototype.triggerLeaveAnimation = function (element, context, destroyAfterComplete, defaultToFallback) { - var _this = this; - var triggerStates = this._engine.statesByElement.get(element); - if (triggerStates) { - var 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 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; - }; - AnimationTransitionNamespace.prototype.prepareLeaveAnimationListeners = function (element) { - var _this = this; - var listeners = this._elementListeners.get(element); - if (listeners) { - var visitedTriggers_1 = new Set(); - listeners.forEach(function (listener) { - var triggerName = listener.name; - if (visitedTriggers_1.has(triggerName)) - return; - visitedTriggers_1.add(triggerName); - var trigger = _this._triggers[triggerName]; - var transition = trigger.fallbackTransition; - var elementStates = _this._engine.statesByElement.get(element); - var fromState = elementStates[triggerName] || DEFAULT_STATE_VALUE; - var toState = new StateValue(VOID_VALUE); - var 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 - }); - }); - } - }; - AnimationTransitionNamespace.prototype.removeNode = function (element, context) { - var _this = this; - var 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 containsPotentialParentTransition = false; - if (engine.totalAnimations) { - var 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 forwards and - // allow the element to be queued up for animation later. - if (currentPlayers && currentPlayers.length) { - containsPotentialParentTransition = true; - } - else { - var parent_1 = element; - while (parent_1 = parent_1.parentNode) { - var 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); - } - }; - AnimationTransitionNamespace.prototype.insertNode = function (element, parent) { addClass(element, this._hostClassName); }; - AnimationTransitionNamespace.prototype.drainQueuedTransitions = function (microtaskId) { - var _this = this; - var instructions = []; - this._queue.forEach(function (entry) { - var player = entry.player; - if (player.destroyed) - return; - var element = entry.element; - var listeners = _this._elementListeners.get(element); - if (listeners) { - listeners.forEach(function (listener) { - if (listener.name == entry.triggerName) { - var baseEvent = makeAnimationEvent(element, entry.triggerName, entry.fromState.value, entry.toState.value); - 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 d0 = a.transition.ast.depCount; - var d1 = b.transition.ast.depCount; - if (d0 == 0 || d1 == 0) { - return d0 - d1; - } - return _this._engine.driver.containsElement(a.element, b.element) ? 1 : -1; - }); - }; - AnimationTransitionNamespace.prototype.destroy = function (context) { - this.players.forEach(function (p) { return p.destroy(); }); - this._signalRemovalForInnerTriggers(this.hostElement, context); - }; - AnimationTransitionNamespace.prototype.elementContainsData = function (element) { - var 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; -}()); -var TransitionAnimationEngine = /** @class */ (function () { - function TransitionAnimationEngine(bodyNode, driver, _normalizer) { - this.bodyNode = bodyNode; - 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 method is designed to be overridden by the code that uses this engine - this.onRemovalComplete = function (element, context) { }; - } - /** @internal */ - TransitionAnimationEngine.prototype._onRemovalComplete = function (element, context) { this.onRemovalComplete(element, context); }; - Object.defineProperty(TransitionAnimationEngine.prototype, "queuedPlayers", { - get: function () { - var players = []; - this._namespaceList.forEach(function (ns) { - ns.players.forEach(function (player) { - if (player.queued) { - players.push(player); - } - }); - }); - return players; - }, - enumerable: true, - configurable: true - }); - TransitionAnimationEngine.prototype.createNamespace = function (namespaceId, hostElement) { - var 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; - }; - TransitionAnimationEngine.prototype._balanceNamespaceList = function (ns, hostElement) { - var limit = this._namespaceList.length - 1; - if (limit >= 0) { - var found = false; - for (var i = limit; i >= 0; i--) { - var 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; - }; - TransitionAnimationEngine.prototype.register = function (namespaceId, hostElement) { - var ns = this._namespaceLookup[namespaceId]; - if (!ns) { - ns = this.createNamespace(namespaceId, hostElement); - } - return ns; - }; - TransitionAnimationEngine.prototype.registerTrigger = function (namespaceId, name, trigger) { - var ns = this._namespaceLookup[namespaceId]; - if (ns && ns.register(name, trigger)) { - this.totalAnimations++; - } - }; - TransitionAnimationEngine.prototype.destroy = function (namespaceId, context) { - var _this = this; - if (!namespaceId) - return; - var ns = this._fetchNamespace(namespaceId); - this.afterFlush(function () { - _this.namespacesByHostElement.delete(ns.hostElement); - delete _this._namespaceLookup[namespaceId]; - var index = _this._namespaceList.indexOf(ns); - if (index >= 0) { - _this._namespaceList.splice(index, 1); - } - }); - this.afterFlushAnimationsDone(function () { return ns.destroy(context); }); - }; - TransitionAnimationEngine.prototype._fetchNamespace = function (id) { return this._namespaceLookup[id]; }; - TransitionAnimationEngine.prototype.fetchNamespacesByElement = 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 namespaces = new Set(); - var elementStates = this.statesByElement.get(element); - if (elementStates) { - var keys = Object.keys(elementStates); - for (var i = 0; i < keys.length; i++) { - var nsId = elementStates[keys[i]].namespaceId; - if (nsId) { - var ns = this._fetchNamespace(nsId); - if (ns) { - namespaces.add(ns); - } - } - } - } - return namespaces; - }; - TransitionAnimationEngine.prototype.trigger = function (namespaceId, element, name, value) { - if (isElementNode(element)) { - var ns = this._fetchNamespace(namespaceId); - if (ns) { - ns.trigger(element, name, value); - return true; - } - } - return false; - }; - TransitionAnimationEngine.prototype.insertNode = 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 details = element[REMOVAL_FLAG]; - if (details && details.setForRemoval) { - details.setForRemoval = false; - details.setForMove = true; - var index = this.collectedLeaveElements.indexOf(element); - if (index >= 0) { - this.collectedLeaveElements.splice(index, 1); - } - } - // 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) { - var ns = this._fetchNamespace(namespaceId); - // This if-statement is a workaround for router issue #21947. - // The router sometimes hits a race condition where while a route - // is being instantiated a new navigation arrives, triggering leave - // animation of DOM that has not been fully initialized, until this - // is resolved, we need to handle the scenario when DOM is not in a - // consistent state during the animation. - if (ns) { - ns.insertNode(element, parent); - } - } - // only *directives and host elements are inserted before - if (insertBefore) { - this.collectEnterElement(element); - } - }; - TransitionAnimationEngine.prototype.collectEnterElement = function (element) { this.collectedEnterElements.push(element); }; - TransitionAnimationEngine.prototype.markElementAsDisabled = 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); - } - }; - TransitionAnimationEngine.prototype.removeNode = function (namespaceId, element, context) { - if (!isElementNode(element)) { - this._onRemovalComplete(element, context); - return; - } - var ns = namespaceId ? this._fetchNamespace(namespaceId) : null; - if (ns) { - ns.removeNode(element, context); - } - else { - this.markElementAsRemoved(namespaceId, element, false, context); - } - }; - TransitionAnimationEngine.prototype.markElementAsRemoved = function (namespaceId, element, hasAnimation, context) { - this.collectedLeaveElements.push(element); - element[REMOVAL_FLAG] = { - namespaceId: namespaceId, - setForRemoval: context, hasAnimation: hasAnimation, - removedBeforeQueried: false - }; - }; - TransitionAnimationEngine.prototype.listen = function (namespaceId, element, name, phase, callback) { - if (isElementNode(element)) { - return this._fetchNamespace(namespaceId).listen(element, name, phase, callback); - } - return function () { }; - }; - TransitionAnimationEngine.prototype._buildInstruction = function (entry, subTimelines, enterClassName, leaveClassName, skipBuildAst) { - return entry.transition.build(this.driver, entry.element, entry.fromState.value, entry.toState.value, enterClassName, leaveClassName, entry.fromState.options, entry.toState.options, subTimelines, skipBuildAst); - }; - TransitionAnimationEngine.prototype.destroyInnerAnimations = function (containerElement) { - var _this = this; - var 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); }); - }; - TransitionAnimationEngine.prototype.destroyActiveAnimationsForElement = function (element) { - var 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(); - } - }); - } - }; - TransitionAnimationEngine.prototype.finishActiveQueriedAnimationOnElement = function (element) { - var players = this.playersByQueriedElement.get(element); - if (players) { - players.forEach(function (player) { return player.finish(); }); - } - }; - TransitionAnimationEngine.prototype.whenRenderingDone = function () { - var _this = this; - return new Promise(function (resolve) { - if (_this.players.length) { - return optimizeGroupPlayer(_this.players).onDone(function () { return resolve(); }); - } - else { - resolve(); - } - }); - }; - TransitionAnimationEngine.prototype.processLeaveNode = function (element) { - var _this = this; - var details = 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 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(node, false); - }); - }; - TransitionAnimationEngine.prototype.flush = function (microtaskId) { - var _this = this; - if (microtaskId === void 0) { microtaskId = -1; } - var 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 i = 0; i < this.collectedEnterElements.length; i++) { - var elm = this.collectedEnterElements[i]; - addClass(elm, STAR_CLASSNAME); - } - } - if (this._namespaceList.length && - (this.totalQueuedPlayers || this.collectedLeaveElements.length)) { - var cleanupFns = []; - try { - players = this._flushAnimations(cleanupFns, microtaskId); - } - finally { - for (var i = 0; i < cleanupFns.length; i++) { - cleanupFns[i](); - } - } - } - else { - for (var i = 0; i < this.collectedLeaveElements.length; i++) { - var 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 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(); }); - } - } - }; - TransitionAnimationEngine.prototype.reportError = function (errors) { - throw new Error("Unable to process animations due to the following failed trigger transitions\n " + errors.join('\n')); - }; - TransitionAnimationEngine.prototype._flushAnimations = function (cleanupFns, microtaskId) { - var _this = this; - var subTimelines = new ElementInstructionMap(); - var skippedPlayers = []; - var skippedPlayersMap = new Map(); - var queuedInstructions = []; - var queriedElements = new Map(); - var allPreStyleElements = new Map(); - var allPostStyleElements = new Map(); - var disabledElementsSet = new Set(); - this.disabledNodes.forEach(function (node) { - disabledElementsSet.add(node); - var nodesThatAreDisabled = _this.driver.query(node, QUEUED_SELECTOR, true); - for (var i_1 = 0; i_1 < nodesThatAreDisabled.length; i_1++) { - disabledElementsSet.add(nodesThatAreDisabled[i_1]); - } - }); - var bodyNode = this.bodyNode; - var allTriggerElements = Array.from(this.statesByElement.keys()); - var 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 enterNodeMapIds = new Map(); - var i = 0; - enterNodeMap.forEach(function (nodes, root) { - var className = ENTER_CLASSNAME + i++; - enterNodeMapIds.set(root, className); - nodes.forEach(function (node) { return addClass(node, className); }); - }); - var allLeaveNodes = []; - var mergedLeaveNodes = new Set(); - var leaveNodesWithoutAnimations = new Set(); - for (var i_2 = 0; i_2 < this.collectedLeaveElements.length; i_2++) { - var element = this.collectedLeaveElements[i_2]; - var details = 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 leaveNodeMapIds = new Map(); - var leaveNodeMap = buildRootMap(allTriggerElements, Array.from(mergedLeaveNodes)); - leaveNodeMap.forEach(function (nodes, root) { - var 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 className = enterNodeMapIds.get(root); - nodes.forEach(function (node) { return removeClass(node, className); }); - }); - leaveNodeMap.forEach(function (nodes, root) { - var className = leaveNodeMapIds.get(root); - nodes.forEach(function (node) { return removeClass(node, className); }); - }); - allLeaveNodes.forEach(function (element) { _this.processLeaveNode(element); }); - }); - var allPlayers = []; - var erroneousTransitions = []; - for (var i_3 = this._namespaceList.length - 1; i_3 >= 0; i_3--) { - var ns = this._namespaceList[i_3]; - ns.drainQueuedTransitions(microtaskId).forEach(function (entry) { - var player = entry.player; - var element = entry.element; - allPlayers.push(player); - if (_this.collectedEnterElements.length) { - var details = element[REMOVAL_FLAG]; - // move animations are currently not supported... - if (details && details.setForMove) { - player.destroy(); - return; - } - } - var nodeIsOrphaned = !bodyNode || !_this.driver.containsElement(bodyNode, element); - var leaveClassName = leaveNodeMapIds.get(element); - var enterClassName = enterNodeMapIds.get(element); - var instruction = _this._buildInstruction(entry, subTimelines, enterClassName, leaveClassName, nodeIsOrphaned); - if (instruction.errors && instruction.errors.length) { - erroneousTransitions.push(instruction); - return; - } - // even though the element may not be apart of the DOM, it may - // still be added at a later point (due to the mechanics of content - // projection and/or dynamic component insertion) therefore it's - // important we still style the element. - if (nodeIsOrphaned) { - player.onStart(function () { return eraseStyles(element, instruction.fromStyles); }); - player.onDestroy(function () { return setStyles(element, instruction.toStyles); }); - skippedPlayers.push(player); - 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 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 props = Object.keys(stringMap); - if (props.length) { - var setVal_1 = 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 props = Object.keys(stringMap); - var setVal = allPostStyleElements.get(element); - if (!setVal) { - allPostStyleElements.set(element, setVal = new Set()); - } - props.forEach(function (prop) { return setVal.add(prop); }); - }); - }); - } - if (erroneousTransitions.length) { - var errors_1 = []; - erroneousTransitions.forEach(function (instruction) { - errors_1.push("@" + instruction.triggerName + " has failed due to:\n"); - instruction.errors.forEach(function (error) { return errors_1.push("- " + error + "\n"); }); - }); - allPlayers.forEach(function (player) { return player.destroy(); }); - this.reportError(errors_1); - } - var 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 animationElementMap = new Map(); - queuedInstructions.forEach(function (entry) { - var element = entry.element; - if (subTimelines.has(element)) { - animationElementMap.set(element, element); - _this._beforeAnimationBuild(entry.player.namespaceId, entry.instruction, allPreviousPlayersMap); - } - }); - skippedPlayers.forEach(function (player) { - var element = player.element; - var 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 replaceNodes = allLeaveNodes.filter(function (node) { - return replacePostStylesAsPre(node, allPreStyleElements, allPostStyleElements); - }); - // POST STAGE: fill the * styles - var postStylesMap = new Map(); - var allLeaveQueriedNodes = cloakAndComputeStyles(postStylesMap, this.driver, leaveNodesWithoutAnimations, allPostStyleElements, _angular_animations__WEBPACK_IMPORTED_MODULE_1__["AUTO_STYLE"]); - allLeaveQueriedNodes.forEach(function (node) { - if (replacePostStylesAsPre(node, allPreStyleElements, allPostStyleElements)) { - replaceNodes.push(node); - } - }); - // PRE STAGE: fill the ! styles - var preStylesMap = new Map(); - enterNodeMap.forEach(function (nodes, root) { - cloakAndComputeStyles(preStylesMap, _this.driver, new Set(nodes), allPreStyleElements, _angular_animations__WEBPACK_IMPORTED_MODULE_1__["ɵPRE_STYLE"]); - }); - replaceNodes.forEach(function (node) { - var post = postStylesMap.get(node); - var pre = preStylesMap.get(node); - postStylesMap.set(node, Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__assign"])({}, post, pre)); - }); - var rootPlayers = []; - var subPlayers = []; - var 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); }); - player.disabled = true; - player.overrideTotalTime(instruction.totalTime); - 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 parentWithAnimation_1 = NO_PARENT_ANIMATION_ELEMENT_DETECTED; - if (animationElementMap.size > 1) { - var elm = element; - var parentsToAdd = []; - while (elm = elm.parentNode) { - var detectedParent = animationElementMap.get(elm); - if (detectedParent) { - parentWithAnimation_1 = detectedParent; - break; - } - parentsToAdd.push(elm); - } - parentsToAdd.forEach(function (parent) { return animationElementMap.set(parent, parentWithAnimation_1); }); - } - var 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 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 playersForElement = skippedPlayersMap.get(player.element); - if (playersForElement && playersForElement.length) { - var 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 i_4 = 0; i_4 < allLeaveNodes.length; i_4++) { - var element = allLeaveNodes[i_4]; - var details = 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 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 queriedPlayerResults = queriedElements.get(element); - if (queriedPlayerResults && queriedPlayerResults.length) { - players.push.apply(players, Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__spread"])(queriedPlayerResults)); - } - var queriedInnerElements = this.driver.query(element, NG_ANIMATING_SELECTOR, true); - for (var j = 0; j < queriedInnerElements.length; j++) { - var queriedPlayers = queriedElements.get(queriedInnerElements[j]); - if (queriedPlayers && queriedPlayers.length) { - players.push.apply(players, Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__spread"])(queriedPlayers)); - } - } - } - var 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 index = _this.players.indexOf(player); - _this.players.splice(index, 1); - }); - player.play(); - }); - return rootPlayers; - }; - TransitionAnimationEngine.prototype.elementContainsData = function (namespaceId, element) { - var containsData = false; - var details = 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; - }; - TransitionAnimationEngine.prototype.afterFlush = function (callback) { this._flushFns.push(callback); }; - TransitionAnimationEngine.prototype.afterFlushAnimationsDone = function (callback) { this._whenQuietFns.push(callback); }; - TransitionAnimationEngine.prototype._getPreviousPlayers = function (element, isQueriedElement, namespaceId, triggerName, toStateValue) { - var players = []; - if (isQueriedElement) { - var queriedElementPlayers = this.playersByQueriedElement.get(element); - if (queriedElementPlayers) { - players = queriedElementPlayers; - } - } - else { - var elementPlayers = this.playersByElement.get(element); - if (elementPlayers) { - var 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; - }; - TransitionAnimationEngine.prototype._beforeAnimationBuild = function (namespaceId, instruction, allPreviousPlayersMap) { - var e_1, _a; - var triggerName = instruction.triggerName; - var 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 targetNameSpaceId = instruction.isRemovalTransition ? undefined : namespaceId; - var targetTriggerName = instruction.isRemovalTransition ? undefined : triggerName; - var _loop_1 = function (timelineInstruction) { - var element = timelineInstruction.element; - var isQueriedElement = element !== rootElement; - var players = getOrSetAsInMap(allPreviousPlayersMap, element, []); - var previousPlayers = this_1._getPreviousPlayers(element, isQueriedElement, targetNameSpaceId, targetTriggerName, instruction.toState); - previousPlayers.forEach(function (player) { - var realPlayer = player.getRealPlayer(); - if (realPlayer.beforeDestroy) { - realPlayer.beforeDestroy(); - } - player.destroy(); - players.push(player); - }); - }; - var this_1 = this; - try { - for (var _b = Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__values"])(instruction.timelines), _c = _b.next(); !_c.done; _c = _b.next()) { - var timelineInstruction = _c.value; - _loop_1(timelineInstruction); - } - } - catch (e_1_1) { e_1 = { error: e_1_1 }; } - finally { - try { - if (_c && !_c.done && (_a = _b.return)) _a.call(_b); - } - finally { if (e_1) throw e_1.error; } - } - // 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); - }; - TransitionAnimationEngine.prototype._buildAnimation = function (namespaceId, instruction, allPreviousPlayersMap, skippedPlayersMap, preStylesMap, postStylesMap) { - var _this = this; - var triggerName = instruction.triggerName; - var rootElement = instruction.element; - // we first run this so that the previous animation player - // data can be passed into the successive animation players - var allQueriedPlayers = []; - var allConsumedElements = new Set(); - var allSubElements = new Set(); - var allNewPlayers = instruction.timelines.map(function (timelineInstruction) { - var element = timelineInstruction.element; - allConsumedElements.add(element); - // FIXME (matsko): make sure to-be-removed animations are removed properly - var details = element[REMOVAL_FLAG]; - if (details && details.removedBeforeQueried) - return new _angular_animations__WEBPACK_IMPORTED_MODULE_1__["NoopAnimationPlayer"](timelineInstruction.duration, timelineInstruction.delay); - var isQueriedElement = element !== rootElement; - var 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 pp = p; - return pp.element ? pp.element === element : false; - }); - var preStyles = preStylesMap.get(element); - var postStyles = postStylesMap.get(element); - var keyframes = normalizeKeyframes(_this.driver, _this._normalizer, element, timelineInstruction.keyframes, preStyles, postStyles); - var 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 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 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; - }; - TransitionAnimationEngine.prototype._buildPlayer = 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 _angular_animations__WEBPACK_IMPORTED_MODULE_1__["NoopAnimationPlayer"](instruction.duration, instruction.delay); - }; - return TransitionAnimationEngine; -}()); -var TransitionAnimationPlayer = /** @class */ (function () { - function TransitionAnimationPlayer(namespaceId, triggerName, element) { - this.namespaceId = namespaceId; - this.triggerName = triggerName; - this.element = element; - this._player = new _angular_animations__WEBPACK_IMPORTED_MODULE_1__["NoopAnimationPlayer"](); - this._containsRealPlayer = false; - this._queuedCallbacks = {}; - this.destroyed = false; - this.markedForDestroy = false; - this.disabled = false; - this.queued = true; - this.totalTime = 0; - } - TransitionAnimationPlayer.prototype.setRealPlayer = 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; - this.overrideTotalTime(player.totalTime); - this.queued = false; - }; - TransitionAnimationPlayer.prototype.getRealPlayer = function () { return this._player; }; - TransitionAnimationPlayer.prototype.overrideTotalTime = function (totalTime) { this.totalTime = totalTime; }; - TransitionAnimationPlayer.prototype.syncPlayerEvents = function (player) { - var _this = this; - var p = this._player; - if (p.triggerCallback) { - player.onStart(function () { return p.triggerCallback('start'); }); - } - player.onDone(function () { return _this.finish(); }); - player.onDestroy(function () { return _this.destroy(); }); - }; - TransitionAnimationPlayer.prototype._queueEvent = function (name, callback) { - getOrSetAsInMap(this._queuedCallbacks, name, []).push(callback); - }; - TransitionAnimationPlayer.prototype.onDone = function (fn) { - if (this.queued) { - this._queueEvent('done', fn); - } - this._player.onDone(fn); - }; - TransitionAnimationPlayer.prototype.onStart = function (fn) { - if (this.queued) { - this._queueEvent('start', fn); - } - this._player.onStart(fn); - }; - TransitionAnimationPlayer.prototype.onDestroy = function (fn) { - if (this.queued) { - this._queueEvent('destroy', fn); - } - this._player.onDestroy(fn); - }; - TransitionAnimationPlayer.prototype.init = function () { this._player.init(); }; - TransitionAnimationPlayer.prototype.hasStarted = function () { return this.queued ? false : this._player.hasStarted(); }; - TransitionAnimationPlayer.prototype.play = function () { !this.queued && this._player.play(); }; - TransitionAnimationPlayer.prototype.pause = function () { !this.queued && this._player.pause(); }; - TransitionAnimationPlayer.prototype.restart = function () { !this.queued && this._player.restart(); }; - TransitionAnimationPlayer.prototype.finish = function () { this._player.finish(); }; - TransitionAnimationPlayer.prototype.destroy = function () { - this.destroyed = true; - this._player.destroy(); - }; - TransitionAnimationPlayer.prototype.reset = function () { !this.queued && this._player.reset(); }; - TransitionAnimationPlayer.prototype.setPosition = function (p) { - if (!this.queued) { - this._player.setPosition(p); - } - }; - TransitionAnimationPlayer.prototype.getPosition = function () { return this.queued ? 0 : this._player.getPosition(); }; - /** @internal */ - TransitionAnimationPlayer.prototype.triggerCallback = function (phaseName) { - var p = this._player; - if (p.triggerCallback) { - p.triggerCallback(phaseName); - } - }; - return TransitionAnimationPlayer; -}()); -function deleteOrUnsetInMap(map, key, value) { - var currentValues; - if (map instanceof Map) { - currentValues = map.get(key); - if (currentValues) { - if (currentValues.length) { - var 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 index = currentValues.indexOf(value); - currentValues.splice(index, 1); - } - if (currentValues.length == 0) { - delete map[key]; - } - } - } - return currentValues; -} -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; -} -function isElementNode(node) { - return node && node['nodeType'] === 1; -} -function isTriggerEventValid(eventName) { - return eventName == 'start' || eventName == 'done'; -} -function cloakElement(element, value) { - var oldValue = element.style.display; - element.style.display = value != null ? value : 'none'; - return oldValue; -} -function cloakAndComputeStyles(valuesMap, driver, elements, elementPropsMap, defaultStyle) { - var cloakVals = []; - elements.forEach(function (element) { return cloakVals.push(cloakElement(element)); }); - var failedElements = []; - elementPropsMap.forEach(function (props, element) { - var styles = {}; - props.forEach(function (prop) { - var 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 i = 0; - elements.forEach(function (element) { return cloakElement(element, cloakVals[i++]); }); - return failedElements; -} -/* -Since the Angular renderer code will return a collection of inserted -nodes in all areas of a DOM tree, it's up to this algorithm to figure -out which nodes are roots for each animation @trigger. - -By placing each inserted node into a Set and traversing upwards, it -is possible to find the @trigger elements and well any direct *star -insertion nodes, if a @trigger root is found then the enter element -is placed into the Map[@trigger] spot. - */ -function buildRootMap(roots, nodes) { - var rootMap = new Map(); - roots.forEach(function (root) { return rootMap.set(root, []); }); - if (nodes.length == 0) - return rootMap; - var NULL_NODE = 1; - var nodeSet = new Set(nodes); - var localRootMap = new Map(); - function getRoot(node) { - if (!node) - return NULL_NODE; - var root = localRootMap.get(node); - if (root) - return root; - var 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 root = getRoot(node); - if (root !== NULL_NODE) { - rootMap.get(root).push(node); - } - }); - return rootMap; -} -var CLASSES_CACHE_KEY = '$$classes'; -function addClass(element, className) { - if (element.classList) { - element.classList.add(className); - } - else { - var classes = element[CLASSES_CACHE_KEY]; - if (!classes) { - classes = element[CLASSES_CACHE_KEY] = {}; - } - classes[className] = true; - } -} -function removeClass(element, className) { - if (element.classList) { - element.classList.remove(className); - } - else { - var classes = element[CLASSES_CACHE_KEY]; - if (classes) { - delete classes[className]; - } - } -} -function removeNodesAfterAnimationDone(engine, element, players) { - optimizeGroupPlayer(players).onDone(function () { return engine.processLeaveNode(element); }); -} -function flattenGroupPlayers(players) { - var finalPlayers = []; - _flattenGroupPlayersRecur(players, finalPlayers); - return finalPlayers; -} -function _flattenGroupPlayersRecur(players, finalPlayers) { - for (var i = 0; i < players.length; i++) { - var player = players[i]; - if (player instanceof _angular_animations__WEBPACK_IMPORTED_MODULE_1__["ɵAnimationGroupPlayer"]) { - _flattenGroupPlayersRecur(player.players, finalPlayers); - } - else { - finalPlayers.push(player); - } - } -} -function objEquals(a, b) { - var k1 = Object.keys(a); - var k2 = Object.keys(b); - if (k1.length != k2.length) - return false; - for (var i = 0; i < k1.length; i++) { - var prop = k1[i]; - if (!b.hasOwnProperty(prop) || a[prop] !== b[prop]) - return false; - } - return true; -} -function replacePostStylesAsPre(element, allPreStyleElements, allPostStyleElements) { - var postEntry = allPostStyleElements.get(element); - if (!postEntry) - return false; - var preEntry = allPreStyleElements.get(element); - if (preEntry) { - postEntry.forEach(function (data) { return preEntry.add(data); }); - } - else { - allPreStyleElements.set(element, postEntry); - } - allPostStyleElements.delete(element); - return true; -} - -var AnimationEngine = /** @class */ (function () { - function AnimationEngine(bodyNode, _driver, normalizer) { - var _this = this; - this.bodyNode = bodyNode; - this._driver = _driver; - this._triggerCache = {}; - // this method is designed to be overridden by the code that uses this engine - this.onRemovalComplete = function (element, context) { }; - this._transitionEngine = new TransitionAnimationEngine(bodyNode, _driver, normalizer); - this._timelineEngine = new TimelineAnimationEngine(bodyNode, _driver, normalizer); - this._transitionEngine.onRemovalComplete = function (element, context) { - return _this.onRemovalComplete(element, context); - }; - } - AnimationEngine.prototype.registerTrigger = function (componentId, namespaceId, hostElement, name, metadata) { - var cacheKey = componentId + '-' + name; - var trigger = this._triggerCache[cacheKey]; - if (!trigger) { - var errors = []; - var ast = buildAnimationAst(this._driver, 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); - }; - AnimationEngine.prototype.register = function (namespaceId, hostElement) { - this._transitionEngine.register(namespaceId, hostElement); - }; - AnimationEngine.prototype.destroy = function (namespaceId, context) { - this._transitionEngine.destroy(namespaceId, context); - }; - AnimationEngine.prototype.onInsert = function (namespaceId, element, parent, insertBefore) { - this._transitionEngine.insertNode(namespaceId, element, parent, insertBefore); - }; - AnimationEngine.prototype.onRemove = function (namespaceId, element, context) { - this._transitionEngine.removeNode(namespaceId, element, context); - }; - AnimationEngine.prototype.disableAnimations = function (element, disable) { - this._transitionEngine.markElementAsDisabled(element, disable); - }; - AnimationEngine.prototype.process = function (namespaceId, element, property, value) { - if (property.charAt(0) == '@') { - var _a = Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__read"])(parseTimelineCommand(property), 2), id = _a[0], action = _a[1]; - var args = value; - this._timelineEngine.command(id, element, action, args); - } - else { - this._transitionEngine.trigger(namespaceId, element, property, value); - } - }; - AnimationEngine.prototype.listen = function (namespaceId, element, eventName, eventPhase, callback) { - // @@listen - if (eventName.charAt(0) == '@') { - var _a = Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__read"])(parseTimelineCommand(eventName), 2), id = _a[0], action = _a[1]; - return this._timelineEngine.listen(id, element, action, callback); - } - return this._transitionEngine.listen(namespaceId, element, eventName, eventPhase, callback); - }; - AnimationEngine.prototype.flush = function (microtaskId) { - if (microtaskId === void 0) { microtaskId = -1; } - this._transitionEngine.flush(microtaskId); - }; - Object.defineProperty(AnimationEngine.prototype, "players", { - get: function () { - return this._transitionEngine.players - .concat(this._timelineEngine.players); - }, - enumerable: true, - configurable: true - }); - AnimationEngine.prototype.whenRenderingDone = function () { return this._transitionEngine.whenRenderingDone(); }; - return AnimationEngine; -}()); - -/** - * @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 - */ -/** - * Returns an instance of `SpecialCasedStyles` if and when any special (non animateable) styles are - * detected. - * - * In CSS there exist properties that cannot be animated within a keyframe animation - * (whether it be via CSS keyframes or web-animations) and the animation implementation - * will ignore them. This function is designed to detect those special cased styles and - * return a container that will be executed at the start and end of the animation. - * - * @returns an instance of `SpecialCasedStyles` if any special styles are detected otherwise `null` - */ -function packageNonAnimatableStyles(element, styles) { - var startStyles = null; - var endStyles = null; - if (Array.isArray(styles) && styles.length) { - startStyles = filterNonAnimatableStyles(styles[0]); - if (styles.length > 1) { - endStyles = filterNonAnimatableStyles(styles[styles.length - 1]); - } - } - else if (styles) { - startStyles = filterNonAnimatableStyles(styles); - } - return (startStyles || endStyles) ? new SpecialCasedStyles(element, startStyles, endStyles) : - null; -} -/** - * Designed to be executed during a keyframe-based animation to apply any special-cased styles. - * - * When started (when the `start()` method is run) then the provided `startStyles` - * will be applied. When finished (when the `finish()` method is called) the - * `endStyles` will be applied as well any any starting styles. Finally when - * `destroy()` is called then all styles will be removed. - */ -var SpecialCasedStyles = /** @class */ (function () { - function SpecialCasedStyles(_element, _startStyles, _endStyles) { - this._element = _element; - this._startStyles = _startStyles; - this._endStyles = _endStyles; - this._state = 0 /* Pending */; - var initialStyles = SpecialCasedStyles.initialStylesByElement.get(_element); - if (!initialStyles) { - SpecialCasedStyles.initialStylesByElement.set(_element, initialStyles = {}); - } - this._initialStyles = initialStyles; - } - SpecialCasedStyles.prototype.start = function () { - if (this._state < 1 /* Started */) { - if (this._startStyles) { - setStyles(this._element, this._startStyles, this._initialStyles); - } - this._state = 1 /* Started */; - } - }; - SpecialCasedStyles.prototype.finish = function () { - this.start(); - if (this._state < 2 /* Finished */) { - setStyles(this._element, this._initialStyles); - if (this._endStyles) { - setStyles(this._element, this._endStyles); - this._endStyles = null; - } - this._state = 1 /* Started */; - } - }; - SpecialCasedStyles.prototype.destroy = function () { - this.finish(); - if (this._state < 3 /* Destroyed */) { - SpecialCasedStyles.initialStylesByElement.delete(this._element); - if (this._startStyles) { - eraseStyles(this._element, this._startStyles); - this._endStyles = null; - } - if (this._endStyles) { - eraseStyles(this._element, this._endStyles); - this._endStyles = null; - } - setStyles(this._element, this._initialStyles); - this._state = 3 /* Destroyed */; - } - }; - SpecialCasedStyles.initialStylesByElement = new WeakMap(); - return SpecialCasedStyles; -}()); -function filterNonAnimatableStyles(styles) { - var result = null; - var props = Object.keys(styles); - for (var i = 0; i < props.length; i++) { - var prop = props[i]; - if (isNonAnimatableStyle(prop)) { - result = result || {}; - result[prop] = styles[prop]; - } - } - return result; -} -function isNonAnimatableStyle(prop) { - return prop === 'display' || prop === 'position'; -} - -/** - * @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 ELAPSED_TIME_MAX_DECIMAL_PLACES = 3; -var ANIMATION_PROP = 'animation'; -var ANIMATIONEND_EVENT = 'animationend'; -var ONE_SECOND$1 = 1000; -var ElementAnimationStyleHandler = /** @class */ (function () { - function ElementAnimationStyleHandler(_element, _name, _duration, _delay, _easing, _fillMode, _onDoneFn) { - var _this = this; - this._element = _element; - this._name = _name; - this._duration = _duration; - this._delay = _delay; - this._easing = _easing; - this._fillMode = _fillMode; - this._onDoneFn = _onDoneFn; - this._finished = false; - this._destroyed = false; - this._startTime = 0; - this._position = 0; - this._eventFn = function (e) { return _this._handleCallback(e); }; - } - ElementAnimationStyleHandler.prototype.apply = function () { - applyKeyframeAnimation(this._element, this._duration + "ms " + this._easing + " " + this._delay + "ms 1 normal " + this._fillMode + " " + this._name); - addRemoveAnimationEvent(this._element, this._eventFn, false); - this._startTime = Date.now(); - }; - ElementAnimationStyleHandler.prototype.pause = function () { playPauseAnimation(this._element, this._name, 'paused'); }; - ElementAnimationStyleHandler.prototype.resume = function () { playPauseAnimation(this._element, this._name, 'running'); }; - ElementAnimationStyleHandler.prototype.setPosition = function (position) { - var index = findIndexForAnimation(this._element, this._name); - this._position = position * this._duration; - setAnimationStyle(this._element, 'Delay', "-" + this._position + "ms", index); - }; - ElementAnimationStyleHandler.prototype.getPosition = function () { return this._position; }; - ElementAnimationStyleHandler.prototype._handleCallback = function (event) { - var timestamp = event._ngTestManualTimestamp || Date.now(); - var elapsedTime = parseFloat(event.elapsedTime.toFixed(ELAPSED_TIME_MAX_DECIMAL_PLACES)) * ONE_SECOND$1; - if (event.animationName == this._name && - Math.max(timestamp - this._startTime, 0) >= this._delay && elapsedTime >= this._duration) { - this.finish(); - } - }; - ElementAnimationStyleHandler.prototype.finish = function () { - if (this._finished) - return; - this._finished = true; - this._onDoneFn(); - addRemoveAnimationEvent(this._element, this._eventFn, true); - }; - ElementAnimationStyleHandler.prototype.destroy = function () { - if (this._destroyed) - return; - this._destroyed = true; - this.finish(); - removeKeyframeAnimation(this._element, this._name); - }; - return ElementAnimationStyleHandler; -}()); -function playPauseAnimation(element, name, status) { - var index = findIndexForAnimation(element, name); - setAnimationStyle(element, 'PlayState', status, index); -} -function applyKeyframeAnimation(element, value) { - var anim = getAnimationStyle(element, '').trim(); - var index = 0; - if (anim.length) { - index = countChars(anim, ',') + 1; - value = anim + ", " + value; - } - setAnimationStyle(element, '', value); - return index; -} -function removeKeyframeAnimation(element, name) { - var anim = getAnimationStyle(element, ''); - var tokens = anim.split(','); - var index = findMatchingTokenIndex(tokens, name); - if (index >= 0) { - tokens.splice(index, 1); - var newValue = tokens.join(','); - setAnimationStyle(element, '', newValue); - } -} -function findIndexForAnimation(element, value) { - var anim = getAnimationStyle(element, ''); - if (anim.indexOf(',') > 0) { - var tokens = anim.split(','); - return findMatchingTokenIndex(tokens, value); - } - return findMatchingTokenIndex([anim], value); -} -function findMatchingTokenIndex(tokens, searchToken) { - for (var i = 0; i < tokens.length; i++) { - if (tokens[i].indexOf(searchToken) >= 0) { - return i; - } - } - return -1; -} -function addRemoveAnimationEvent(element, fn, doRemove) { - doRemove ? element.removeEventListener(ANIMATIONEND_EVENT, fn) : - element.addEventListener(ANIMATIONEND_EVENT, fn); -} -function setAnimationStyle(element, name, value, index) { - var prop = ANIMATION_PROP + name; - if (index != null) { - var oldValue = element.style[prop]; - if (oldValue.length) { - var tokens = oldValue.split(','); - tokens[index] = value; - value = tokens.join(','); - } - } - element.style[prop] = value; -} -function getAnimationStyle(element, name) { - return element.style[ANIMATION_PROP + name]; -} -function countChars(value, char) { - var count = 0; - for (var i = 0; i < value.length; i++) { - var c = value.charAt(i); - if (c === char) - count++; - } - return count; -} - -var DEFAULT_FILL_MODE = 'forwards'; -var DEFAULT_EASING = 'linear'; -var CssKeyframesPlayer = /** @class */ (function () { - function CssKeyframesPlayer(element, keyframes, animationName, _duration, _delay, easing, _finalStyles, _specialStyles) { - this.element = element; - this.keyframes = keyframes; - this.animationName = animationName; - this._duration = _duration; - this._delay = _delay; - this._finalStyles = _finalStyles; - this._specialStyles = _specialStyles; - this._onDoneFns = []; - this._onStartFns = []; - this._onDestroyFns = []; - this._started = false; - this.currentSnapshot = {}; - this._state = 0; - this.easing = easing || DEFAULT_EASING; - this.totalTime = _duration + _delay; - this._buildStyler(); - } - CssKeyframesPlayer.prototype.onStart = function (fn) { this._onStartFns.push(fn); }; - CssKeyframesPlayer.prototype.onDone = function (fn) { this._onDoneFns.push(fn); }; - CssKeyframesPlayer.prototype.onDestroy = function (fn) { this._onDestroyFns.push(fn); }; - CssKeyframesPlayer.prototype.destroy = function () { - this.init(); - if (this._state >= 4 /* DESTROYED */) - return; - this._state = 4 /* DESTROYED */; - this._styler.destroy(); - this._flushStartFns(); - this._flushDoneFns(); - if (this._specialStyles) { - this._specialStyles.destroy(); - } - this._onDestroyFns.forEach(function (fn) { return fn(); }); - this._onDestroyFns = []; - }; - CssKeyframesPlayer.prototype._flushDoneFns = function () { - this._onDoneFns.forEach(function (fn) { return fn(); }); - this._onDoneFns = []; - }; - CssKeyframesPlayer.prototype._flushStartFns = function () { - this._onStartFns.forEach(function (fn) { return fn(); }); - this._onStartFns = []; - }; - CssKeyframesPlayer.prototype.finish = function () { - this.init(); - if (this._state >= 3 /* FINISHED */) - return; - this._state = 3 /* FINISHED */; - this._styler.finish(); - this._flushStartFns(); - if (this._specialStyles) { - this._specialStyles.finish(); - } - this._flushDoneFns(); - }; - CssKeyframesPlayer.prototype.setPosition = function (value) { this._styler.setPosition(value); }; - CssKeyframesPlayer.prototype.getPosition = function () { return this._styler.getPosition(); }; - CssKeyframesPlayer.prototype.hasStarted = function () { return this._state >= 2 /* STARTED */; }; - CssKeyframesPlayer.prototype.init = function () { - if (this._state >= 1 /* INITIALIZED */) - return; - this._state = 1 /* INITIALIZED */; - var elm = this.element; - this._styler.apply(); - if (this._delay) { - this._styler.pause(); - } - }; - CssKeyframesPlayer.prototype.play = function () { - this.init(); - if (!this.hasStarted()) { - this._flushStartFns(); - this._state = 2 /* STARTED */; - if (this._specialStyles) { - this._specialStyles.start(); - } - } - this._styler.resume(); - }; - CssKeyframesPlayer.prototype.pause = function () { - this.init(); - this._styler.pause(); - }; - CssKeyframesPlayer.prototype.restart = function () { - this.reset(); - this.play(); - }; - CssKeyframesPlayer.prototype.reset = function () { - this._styler.destroy(); - this._buildStyler(); - this._styler.apply(); - }; - CssKeyframesPlayer.prototype._buildStyler = function () { - var _this = this; - this._styler = new ElementAnimationStyleHandler(this.element, this.animationName, this._duration, this._delay, this.easing, DEFAULT_FILL_MODE, function () { return _this.finish(); }); - }; - /** @internal */ - CssKeyframesPlayer.prototype.triggerCallback = function (phaseName) { - var methods = phaseName == 'start' ? this._onStartFns : this._onDoneFns; - methods.forEach(function (fn) { return fn(); }); - methods.length = 0; - }; - CssKeyframesPlayer.prototype.beforeDestroy = function () { - var _this = this; - this.init(); - var styles = {}; - if (this.hasStarted()) { - var finished_1 = this._state >= 3 /* FINISHED */; - Object.keys(this._finalStyles).forEach(function (prop) { - if (prop != 'offset') { - styles[prop] = finished_1 ? _this._finalStyles[prop] : computeStyle(_this.element, prop); - } - }); - } - this.currentSnapshot = styles; - }; - return CssKeyframesPlayer; -}()); - -var DirectStylePlayer = /** @class */ (function (_super) { - Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(DirectStylePlayer, _super); - function DirectStylePlayer(element, styles) { - var _this = _super.call(this) || this; - _this.element = element; - _this._startingStyles = {}; - _this.__initialized = false; - _this._styles = hypenatePropsObject(styles); - return _this; - } - DirectStylePlayer.prototype.init = function () { - var _this = this; - if (this.__initialized || !this._startingStyles) - return; - this.__initialized = true; - Object.keys(this._styles).forEach(function (prop) { - _this._startingStyles[prop] = _this.element.style[prop]; - }); - _super.prototype.init.call(this); - }; - DirectStylePlayer.prototype.play = function () { - var _this = this; - if (!this._startingStyles) - return; - this.init(); - Object.keys(this._styles) - .forEach(function (prop) { return _this.element.style.setProperty(prop, _this._styles[prop]); }); - _super.prototype.play.call(this); - }; - DirectStylePlayer.prototype.destroy = function () { - var _this = this; - if (!this._startingStyles) - return; - Object.keys(this._startingStyles).forEach(function (prop) { - var value = _this._startingStyles[prop]; - if (value) { - _this.element.style.setProperty(prop, value); - } - else { - _this.element.style.removeProperty(prop); - } - }); - this._startingStyles = null; - _super.prototype.destroy.call(this); - }; - return DirectStylePlayer; -}(_angular_animations__WEBPACK_IMPORTED_MODULE_1__["NoopAnimationPlayer"])); - -var KEYFRAMES_NAME_PREFIX = 'gen_css_kf_'; -var TAB_SPACE = ' '; -var CssKeyframesDriver = /** @class */ (function () { - function CssKeyframesDriver() { - this._count = 0; - this._head = document.querySelector('head'); - this._warningIssued = false; - } - CssKeyframesDriver.prototype.validateStyleProperty = function (prop) { return validateStyleProperty(prop); }; - CssKeyframesDriver.prototype.matchesElement = function (element, selector) { - return matchesElement(element, selector); - }; - CssKeyframesDriver.prototype.containsElement = function (elm1, elm2) { return containsElement(elm1, elm2); }; - CssKeyframesDriver.prototype.query = function (element, selector, multi) { - return invokeQuery(element, selector, multi); - }; - CssKeyframesDriver.prototype.computeStyle = function (element, prop, defaultValue) { - return window.getComputedStyle(element)[prop]; - }; - CssKeyframesDriver.prototype.buildKeyframeElement = function (element, name, keyframes) { - keyframes = keyframes.map(function (kf) { return hypenatePropsObject(kf); }); - var keyframeStr = "@keyframes " + name + " {\n"; - var tab = ''; - keyframes.forEach(function (kf) { - tab = TAB_SPACE; - var offset = parseFloat(kf['offset']); - keyframeStr += "" + tab + offset * 100 + "% {\n"; - tab += TAB_SPACE; - Object.keys(kf).forEach(function (prop) { - var value = kf[prop]; - switch (prop) { - case 'offset': - return; - case 'easing': - if (value) { - keyframeStr += tab + "animation-timing-function: " + value + ";\n"; - } - return; - default: - keyframeStr += "" + tab + prop + ": " + value + ";\n"; - return; - } - }); - keyframeStr += tab + "}\n"; - }); - keyframeStr += "}\n"; - var kfElm = document.createElement('style'); - kfElm.innerHTML = keyframeStr; - return kfElm; - }; - CssKeyframesDriver.prototype.animate = function (element, keyframes, duration, delay, easing, previousPlayers, scrubberAccessRequested) { - if (previousPlayers === void 0) { previousPlayers = []; } - if (scrubberAccessRequested) { - this._notifyFaultyScrubber(); - } - var previousCssKeyframePlayers = previousPlayers.filter(function (player) { return player instanceof CssKeyframesPlayer; }); - var previousStyles = {}; - if (allowPreviousPlayerStylesMerge(duration, delay)) { - previousCssKeyframePlayers.forEach(function (player) { - var styles = player.currentSnapshot; - Object.keys(styles).forEach(function (prop) { return previousStyles[prop] = styles[prop]; }); - }); - } - keyframes = balancePreviousStylesIntoKeyframes(element, keyframes, previousStyles); - var finalStyles = flattenKeyframesIntoStyles(keyframes); - // if there is no animation then there is no point in applying - // styles and waiting for an event to get fired. This causes lag. - // It's better to just directly apply the styles to the element - // via the direct styling animation player. - if (duration == 0) { - return new DirectStylePlayer(element, finalStyles); - } - var animationName = "" + KEYFRAMES_NAME_PREFIX + this._count++; - var kfElm = this.buildKeyframeElement(element, animationName, keyframes); - document.querySelector('head').appendChild(kfElm); - var specialStyles = packageNonAnimatableStyles(element, keyframes); - var player = new CssKeyframesPlayer(element, keyframes, animationName, duration, delay, easing, finalStyles, specialStyles); - player.onDestroy(function () { return removeElement(kfElm); }); - return player; - }; - CssKeyframesDriver.prototype._notifyFaultyScrubber = function () { - if (!this._warningIssued) { - console.warn('@angular/animations: please load the web-animations.js polyfill to allow programmatic access...\n', ' visit http://bit.ly/IWukam to learn more about using the web-animation-js polyfill.'); - this._warningIssued = true; - } - }; - return CssKeyframesDriver; -}()); -function flattenKeyframesIntoStyles(keyframes) { - var flatKeyframes = {}; - if (keyframes) { - var kfs = Array.isArray(keyframes) ? keyframes : [keyframes]; - kfs.forEach(function (kf) { - Object.keys(kf).forEach(function (prop) { - if (prop == 'offset' || prop == 'easing') - return; - flatKeyframes[prop] = kf[prop]; - }); - }); - } - return flatKeyframes; -} -function removeElement(node) { - node.parentNode.removeChild(node); -} - -var WebAnimationsPlayer = /** @class */ (function () { - function WebAnimationsPlayer(element, keyframes, options, _specialStyles) { - this.element = element; - this.keyframes = keyframes; - this.options = options; - this._specialStyles = _specialStyles; - 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.currentSnapshot = {}; - this._duration = options['duration']; - this._delay = options['delay'] || 0; - this.time = this._duration + this._delay; - } - WebAnimationsPlayer.prototype._onFinish = function () { - if (!this._finished) { - this._finished = true; - this._onDoneFns.forEach(function (fn) { return fn(); }); - this._onDoneFns = []; - } - }; - WebAnimationsPlayer.prototype.init = function () { - this._buildPlayer(); - this._preparePlayerBeforeStart(); - }; - WebAnimationsPlayer.prototype._buildPlayer = function () { - var _this = this; - if (this._initialized) - return; - this._initialized = true; - var keyframes = this.keyframes; - 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(); }); - }; - WebAnimationsPlayer.prototype._preparePlayerBeforeStart = 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 */ - WebAnimationsPlayer.prototype._triggerWebAnimation = 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 element['animate'](keyframes, options); - }; - WebAnimationsPlayer.prototype.onStart = function (fn) { this._onStartFns.push(fn); }; - WebAnimationsPlayer.prototype.onDone = function (fn) { this._onDoneFns.push(fn); }; - WebAnimationsPlayer.prototype.onDestroy = function (fn) { this._onDestroyFns.push(fn); }; - WebAnimationsPlayer.prototype.play = function () { - this._buildPlayer(); - if (!this.hasStarted()) { - this._onStartFns.forEach(function (fn) { return fn(); }); - this._onStartFns = []; - this._started = true; - if (this._specialStyles) { - this._specialStyles.start(); - } - } - this.domPlayer.play(); - }; - WebAnimationsPlayer.prototype.pause = function () { - this.init(); - this.domPlayer.pause(); - }; - WebAnimationsPlayer.prototype.finish = function () { - this.init(); - if (this._specialStyles) { - this._specialStyles.finish(); - } - this._onFinish(); - this.domPlayer.finish(); - }; - WebAnimationsPlayer.prototype.reset = function () { - this._resetDomPlayerState(); - this._destroyed = false; - this._finished = false; - this._started = false; - }; - WebAnimationsPlayer.prototype._resetDomPlayerState = function () { - if (this.domPlayer) { - this.domPlayer.cancel(); - } - }; - WebAnimationsPlayer.prototype.restart = function () { - this.reset(); - this.play(); - }; - WebAnimationsPlayer.prototype.hasStarted = function () { return this._started; }; - WebAnimationsPlayer.prototype.destroy = function () { - if (!this._destroyed) { - this._destroyed = true; - this._resetDomPlayerState(); - this._onFinish(); - if (this._specialStyles) { - this._specialStyles.destroy(); - } - this._onDestroyFns.forEach(function (fn) { return fn(); }); - this._onDestroyFns = []; - } - }; - WebAnimationsPlayer.prototype.setPosition = function (p) { this.domPlayer.currentTime = p * this.time; }; - WebAnimationsPlayer.prototype.getPosition = function () { return this.domPlayer.currentTime / this.time; }; - Object.defineProperty(WebAnimationsPlayer.prototype, "totalTime", { - get: function () { return this._delay + this._duration; }, - enumerable: true, - configurable: true - }); - WebAnimationsPlayer.prototype.beforeDestroy = function () { - var _this = this; - var 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 */ - WebAnimationsPlayer.prototype.triggerCallback = function (phaseName) { - var methods = phaseName == 'start' ? this._onStartFns : this._onDoneFns; - methods.forEach(function (fn) { return fn(); }); - methods.length = 0; - }; - return WebAnimationsPlayer; -}()); - -var WebAnimationsDriver = /** @class */ (function () { - function WebAnimationsDriver() { - this._isNativeImpl = /\{\s*\[native\s+code\]\s*\}/.test(getElementAnimateFn().toString()); - this._cssKeyframesDriver = new CssKeyframesDriver(); - } - WebAnimationsDriver.prototype.validateStyleProperty = function (prop) { return validateStyleProperty(prop); }; - WebAnimationsDriver.prototype.matchesElement = function (element, selector) { - return matchesElement(element, selector); - }; - WebAnimationsDriver.prototype.containsElement = function (elm1, elm2) { return containsElement(elm1, elm2); }; - WebAnimationsDriver.prototype.query = function (element, selector, multi) { - return invokeQuery(element, selector, multi); - }; - WebAnimationsDriver.prototype.computeStyle = function (element, prop, defaultValue) { - return window.getComputedStyle(element)[prop]; - }; - WebAnimationsDriver.prototype.overrideWebAnimationsSupport = function (supported) { this._isNativeImpl = supported; }; - WebAnimationsDriver.prototype.animate = function (element, keyframes, duration, delay, easing, previousPlayers, scrubberAccessRequested) { - if (previousPlayers === void 0) { previousPlayers = []; } - var useKeyframes = !scrubberAccessRequested && !this._isNativeImpl; - if (useKeyframes) { - return this._cssKeyframesDriver.animate(element, keyframes, duration, delay, easing, previousPlayers); - } - var fill = delay == 0 ? 'both' : 'forwards'; - var 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 previousStyles = {}; - var previousWebAnimationPlayers = previousPlayers.filter(function (player) { return player instanceof WebAnimationsPlayer; }); - if (allowPreviousPlayerStylesMerge(duration, delay)) { - previousWebAnimationPlayers.forEach(function (player) { - var styles = player.currentSnapshot; - Object.keys(styles).forEach(function (prop) { return previousStyles[prop] = styles[prop]; }); - }); - } - keyframes = keyframes.map(function (styles) { return copyStyles(styles, false); }); - keyframes = balancePreviousStylesIntoKeyframes(element, keyframes, previousStyles); - var specialStyles = packageNonAnimatableStyles(element, keyframes); - return new WebAnimationsPlayer(element, keyframes, playerOptions, specialStyles); - }; - return WebAnimationsDriver; -}()); -function supportsWebAnimations() { - return typeof getElementAnimateFn() === 'function'; -} -function getElementAnimateFn() { - return (isBrowser() && Element.prototype['animate']) || {}; -} - -/** - * @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 - */ - -/** - * @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 - */ - -/** - * @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 - */ - -/** - * @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 - */ - -/** - * Generated bundle index. Do not edit. - */ - - -//# sourceMappingURL=browser.js.map - - -/***/ }), - -/***/ "./node_modules/@angular/cdk/esm5/a11y.es5.js": -/*!****************************************************!*\ - !*** ./node_modules/@angular/cdk/esm5/a11y.es5.js ***! - \****************************************************/ -/*! exports provided: ARIA_DESCRIBER_PROVIDER_FACTORY, MESSAGES_CONTAINER_ID, CDK_DESCRIBEDBY_ID_PREFIX, CDK_DESCRIBEDBY_HOST_ATTRIBUTE, AriaDescriber, ARIA_DESCRIBER_PROVIDER, ActiveDescendantKeyManager, FocusKeyManager, ListKeyManager, FocusTrap, FocusTrapFactory, CdkTrapFocus, InteractivityChecker, LIVE_ANNOUNCER_PROVIDER_FACTORY, LiveAnnouncer, CdkAriaLive, LIVE_ANNOUNCER_PROVIDER, LIVE_ANNOUNCER_ELEMENT_TOKEN_FACTORY, LIVE_ANNOUNCER_ELEMENT_TOKEN, FOCUS_MONITOR_PROVIDER_FACTORY, TOUCH_BUFFER_MS, FocusMonitor, CdkMonitorFocus, FOCUS_MONITOR_PROVIDER, isFakeMousedownFromScreenReader, A11yModule */ -/***/ (function(module, __webpack_exports__, __webpack_require__) { - -"use strict"; -__webpack_require__.r(__webpack_exports__); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ARIA_DESCRIBER_PROVIDER_FACTORY", function() { return ARIA_DESCRIBER_PROVIDER_FACTORY; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "MESSAGES_CONTAINER_ID", function() { return MESSAGES_CONTAINER_ID; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CDK_DESCRIBEDBY_ID_PREFIX", function() { return CDK_DESCRIBEDBY_ID_PREFIX; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CDK_DESCRIBEDBY_HOST_ATTRIBUTE", function() { return CDK_DESCRIBEDBY_HOST_ATTRIBUTE; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AriaDescriber", function() { return AriaDescriber; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ARIA_DESCRIBER_PROVIDER", function() { return ARIA_DESCRIBER_PROVIDER; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ActiveDescendantKeyManager", function() { return ActiveDescendantKeyManager; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FocusKeyManager", function() { return FocusKeyManager; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ListKeyManager", function() { return ListKeyManager; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FocusTrap", function() { return FocusTrap; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FocusTrapFactory", function() { return FocusTrapFactory; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CdkTrapFocus", function() { return CdkTrapFocus; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "InteractivityChecker", function() { return InteractivityChecker; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "LIVE_ANNOUNCER_PROVIDER_FACTORY", function() { return LIVE_ANNOUNCER_PROVIDER_FACTORY; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "LiveAnnouncer", function() { return LiveAnnouncer; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CdkAriaLive", function() { return CdkAriaLive; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "LIVE_ANNOUNCER_PROVIDER", function() { return LIVE_ANNOUNCER_PROVIDER; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "LIVE_ANNOUNCER_ELEMENT_TOKEN_FACTORY", function() { return LIVE_ANNOUNCER_ELEMENT_TOKEN_FACTORY; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "LIVE_ANNOUNCER_ELEMENT_TOKEN", function() { return LIVE_ANNOUNCER_ELEMENT_TOKEN; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FOCUS_MONITOR_PROVIDER_FACTORY", function() { return FOCUS_MONITOR_PROVIDER_FACTORY; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "TOUCH_BUFFER_MS", function() { return TOUCH_BUFFER_MS; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FocusMonitor", function() { return FocusMonitor; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CdkMonitorFocus", function() { return CdkMonitorFocus; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FOCUS_MONITOR_PROVIDER", function() { return FOCUS_MONITOR_PROVIDER; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "isFakeMousedownFromScreenReader", function() { return isFakeMousedownFromScreenReader; }); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "A11yModule", function() { return A11yModule; }); -/* harmony import */ var _angular_common__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @angular/common */ "./node_modules/@angular/common/fesm5/common.js"); -/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @angular/core */ "./node_modules/@angular/core/fesm5/core.js"); -/* harmony import */ var rxjs__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! rxjs */ "./node_modules/rxjs/_esm5/index.js"); -/* harmony import */ var _angular_cdk_keycodes__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @angular/cdk/keycodes */ "./node_modules/@angular/cdk/esm5/keycodes.es5.js"); -/* harmony import */ var rxjs_operators__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! rxjs/operators */ "./node_modules/rxjs/_esm5/operators/index.js"); -/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.js"); -/* harmony import */ var _angular_cdk_platform__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @angular/cdk/platform */ "./node_modules/@angular/cdk/esm5/platform.es5.js"); -/* harmony import */ var _angular_cdk_coercion__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @angular/cdk/coercion */ "./node_modules/@angular/cdk/esm5/coercion.es5.js"); -/* harmony import */ var _angular_cdk_observers__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @angular/cdk/observers */ "./node_modules/@angular/cdk/esm5/observers.es5.js"); -/** - * @license - * Copyright Google LLC 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,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc - */ - -/** - * IDs are deliminated by an empty space, as per the spec. - * @type {?} - */ -var ID_DELIMINATOR = ' '; -/** - * Adds the given ID to the specified ARIA attribute on an element. - * Used for attributes such as aria-labelledby, aria-owns, etc. - * @param {?} el - * @param {?} attr - * @param {?} id - * @return {?} - */ -function addAriaReferencedId(el, attr, id) { - /** @type {?} */ - var ids = getAriaReferenceIds(el, attr); - if (ids.some(function (existingId) { return existingId.trim() == id.trim(); })) { - return; - } - ids.push(id.trim()); - el.setAttribute(attr, ids.join(ID_DELIMINATOR)); -} -/** - * Removes the given ID from the specified ARIA attribute on an element. - * Used for attributes such as aria-labelledby, aria-owns, etc. - * @param {?} el - * @param {?} attr - * @param {?} id - * @return {?} - */ -function removeAriaReferencedId(el, attr, id) { - /** @type {?} */ - var ids = getAriaReferenceIds(el, attr); - /** @type {?} */ - var filteredIds = ids.filter(function (val) { return val != id.trim(); }); - el.setAttribute(attr, filteredIds.join(ID_DELIMINATOR)); -} -/** - * Gets the list of IDs referenced by the given ARIA attribute on an element. - * Used for attributes such as aria-labelledby, aria-owns, etc. - * @param {?} el - * @param {?} attr - * @return {?} - */ -function getAriaReferenceIds(el, attr) { - // Get string array of all individual ids (whitespace deliminated) in the attribute value - return (el.getAttribute(attr) || '').match(/\S+/g) || []; -} - -/** - * @fileoverview added by tsickle - * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc - */ -/** - * ID used for the body container where all messages are appended. - * @type {?} - */ -var MESSAGES_CONTAINER_ID = 'cdk-describedby-message-container'; -/** - * ID prefix used for each created message element. - * @type {?} - */ -var CDK_DESCRIBEDBY_ID_PREFIX = 'cdk-describedby-message'; -/** - * Attribute given to each host element that is described by a message element. - * @type {?} - */ -var CDK_DESCRIBEDBY_HOST_ATTRIBUTE = 'cdk-describedby-host'; -/** - * Global incremental identifier for each registered message element. - * @type {?} - */ -var nextId = 0; -/** - * Global map of all registered message elements that have been placed into the document. - * @type {?} - */ -var messageRegistry = new Map(); -/** - * Container for all registered messages. - * @type {?} - */ -var messagesContainer = null; -/** - * Utility that creates visually hidden elements with a message content. Useful for elements that - * want to use aria-describedby to further describe themselves without adding additional visual - * content. - * \@docs-private - */ -var AriaDescriber = /** @class */ (function () { - function AriaDescriber(_document) { - this._document = _document; - } - /** - * Adds to the host element an aria-describedby reference to a hidden element that contains - * the message. If the same message has already been registered, then it will reuse the created - * message element. - */ - /** - * Adds to the host element an aria-describedby reference to a hidden element that contains - * the message. If the same message has already been registered, then it will reuse the created - * message element. - * @param {?} hostElement - * @param {?} message - * @return {?} - */ - AriaDescriber.prototype.describe = /** - * Adds to the host element an aria-describedby reference to a hidden element that contains - * the message. If the same message has already been registered, then it will reuse the created - * message element. - * @param {?} hostElement - * @param {?} message - * @return {?} - */ - function (hostElement, message) { - if (!this._canBeDescribed(hostElement, message)) { - return; - } - if (!messageRegistry.has(message)) { - this._createMessageElement(message); - } - if (!this._isElementDescribedByMessage(hostElement, message)) { - this._addMessageReference(hostElement, message); - } - }; - /** Removes the host element's aria-describedby reference to the message element. */ - /** - * Removes the host element's aria-describedby reference to the message element. - * @param {?} hostElement - * @param {?} message - * @return {?} - */ - AriaDescriber.prototype.removeDescription = /** - * Removes the host element's aria-describedby reference to the message element. - * @param {?} hostElement - * @param {?} message - * @return {?} - */ - function (hostElement, message) { - if (!this._canBeDescribed(hostElement, message)) { - return; - } - if (this._isElementDescribedByMessage(hostElement, message)) { - this._removeMessageReference(hostElement, message); - } - /** @type {?} */ - var registeredMessage = messageRegistry.get(message); - if (registeredMessage && registeredMessage.referenceCount === 0) { - this._deleteMessageElement(message); - } - if (messagesContainer && messagesContainer.childNodes.length === 0) { - this._deleteMessagesContainer(); - } - }; - /** Unregisters all created message elements and removes the message container. */ - /** - * Unregisters all created message elements and removes the message container. - * @return {?} - */ - AriaDescriber.prototype.ngOnDestroy = /** - * Unregisters all created message elements and removes the message container. - * @return {?} - */ - function () { - /** @type {?} */ - var describedElements = this._document.querySelectorAll("[" + CDK_DESCRIBEDBY_HOST_ATTRIBUTE + "]"); - for (var i = 0; i < describedElements.length; i++) { - this._removeCdkDescribedByReferenceIds(describedElements[i]); - describedElements[i].removeAttribute(CDK_DESCRIBEDBY_HOST_ATTRIBUTE); - } - if (messagesContainer) { - this._deleteMessagesContainer(); - } - messageRegistry.clear(); - }; - /** - * Creates a new element in the visually hidden message container element with the message - * as its content and adds it to the message registry. - */ - /** - * Creates a new element in the visually hidden message container element with the message - * as its content and adds it to the message registry. - * @private - * @param {?} message - * @return {?} - */ - AriaDescriber.prototype._createMessageElement = /** - * Creates a new element in the visually hidden message container element with the message - * as its content and adds it to the message registry. - * @private - * @param {?} message - * @return {?} - */ - function (message) { - /** @type {?} */ - var messageElement = this._document.createElement('div'); - messageElement.setAttribute('id', CDK_DESCRIBEDBY_ID_PREFIX + "-" + nextId++); - messageElement.appendChild((/** @type {?} */ (this._document.createTextNode(message)))); - this._createMessagesContainer(); - (/** @type {?} */ (messagesContainer)).appendChild(messageElement); - messageRegistry.set(message, { messageElement: messageElement, referenceCount: 0 }); - }; - /** Deletes the message element from the global messages container. */ - /** - * Deletes the message element from the global messages container. - * @private - * @param {?} message - * @return {?} - */ - AriaDescriber.prototype._deleteMessageElement = /** - * Deletes the message element from the global messages container. - * @private - * @param {?} message - * @return {?} - */ - function (message) { - /** @type {?} */ - var registeredMessage = messageRegistry.get(message); - /** @type {?} */ - var messageElement = registeredMessage && registeredMessage.messageElement; - if (messagesContainer && messageElement) { - messagesContainer.removeChild(messageElement); - } - messageRegistry.delete(message); - }; - /** Creates the global container for all aria-describedby messages. */ - /** - * Creates the global container for all aria-describedby messages. - * @private - * @return {?} - */ - AriaDescriber.prototype._createMessagesContainer = /** - * Creates the global container for all aria-describedby messages. - * @private - * @return {?} - */ - function () { - if (!messagesContainer) { - /** @type {?} */ - var preExistingContainer = this._document.getElementById(MESSAGES_CONTAINER_ID); - // When going from the server to the client, we may end up in a situation where there's - // already a container on the page, but we don't have a reference to it. Clear the - // old container so we don't get duplicates. Doing this, instead of emptying the previous - // container, should be slightly faster. - if (preExistingContainer) { - (/** @type {?} */ (preExistingContainer.parentNode)).removeChild(preExistingContainer); - } - messagesContainer = this._document.createElement('div'); - messagesContainer.id = MESSAGES_CONTAINER_ID; - messagesContainer.setAttribute('aria-hidden', 'true'); - messagesContainer.style.display = 'none'; - this._document.body.appendChild(messagesContainer); - } - }; - /** Deletes the global messages container. */ - /** - * Deletes the global messages container. - * @private - * @return {?} - */ - AriaDescriber.prototype._deleteMessagesContainer = /** - * Deletes the global messages container. - * @private - * @return {?} - */ - function () { - if (messagesContainer && messagesContainer.parentNode) { - messagesContainer.parentNode.removeChild(messagesContainer); - messagesContainer = null; - } - }; - /** Removes all cdk-describedby messages that are hosted through the element. */ - /** - * Removes all cdk-describedby messages that are hosted through the element. - * @private - * @param {?} element - * @return {?} - */ - AriaDescriber.prototype._removeCdkDescribedByReferenceIds = /** - * Removes all cdk-describedby messages that are hosted through the element. - * @private - * @param {?} element - * @return {?} - */ - function (element) { - // Remove all aria-describedby reference IDs that are prefixed by CDK_DESCRIBEDBY_ID_PREFIX - /** @type {?} */ - var originalReferenceIds = getAriaReferenceIds(element, 'aria-describedby') - .filter(function (id) { return id.indexOf(CDK_DESCRIBEDBY_ID_PREFIX) != 0; }); - element.setAttribute('aria-describedby', originalReferenceIds.join(' ')); - }; - /** - * Adds a message reference to the element using aria-describedby and increments the registered - * message's reference count. - */ - /** - * Adds a message reference to the element using aria-describedby and increments the registered - * message's reference count. - * @private - * @param {?} element - * @param {?} message - * @return {?} - */ - AriaDescriber.prototype._addMessageReference = /** - * Adds a message reference to the element using aria-describedby and increments the registered - * message's reference count. - * @private - * @param {?} element - * @param {?} message - * @return {?} - */ - function (element, message) { - /** @type {?} */ - var registeredMessage = (/** @type {?} */ (messageRegistry.get(message))); - // Add the aria-describedby reference and set the - // describedby_host attribute to mark the element. - addAriaReferencedId(element, 'aria-describedby', registeredMessage.messageElement.id); - element.setAttribute(CDK_DESCRIBEDBY_HOST_ATTRIBUTE, ''); - registeredMessage.referenceCount++; - }; - /** - * Removes a message reference from the element using aria-describedby - * and decrements the registered message's reference count. - */ - /** - * Removes a message reference from the element using aria-describedby - * and decrements the registered message's reference count. - * @private - * @param {?} element - * @param {?} message - * @return {?} - */ - AriaDescriber.prototype._removeMessageReference = /** - * Removes a message reference from the element using aria-describedby - * and decrements the registered message's reference count. - * @private - * @param {?} element - * @param {?} message - * @return {?} - */ - function (element, message) { - /** @type {?} */ - var registeredMessage = (/** @type {?} */ (messageRegistry.get(message))); - registeredMessage.referenceCount--; - removeAriaReferencedId(element, 'aria-describedby', registeredMessage.messageElement.id); - element.removeAttribute(CDK_DESCRIBEDBY_HOST_ATTRIBUTE); - }; - /** Returns true if the element has been described by the provided message ID. */ - /** - * Returns true if the element has been described by the provided message ID. - * @private - * @param {?} element - * @param {?} message - * @return {?} - */ - AriaDescriber.prototype._isElementDescribedByMessage = /** - * Returns true if the element has been described by the provided message ID. - * @private - * @param {?} element - * @param {?} message - * @return {?} - */ - function (element, message) { - /** @type {?} */ - var referenceIds = getAriaReferenceIds(element, 'aria-describedby'); - /** @type {?} */ - var registeredMessage = messageRegistry.get(message); - /** @type {?} */ - var messageId = registeredMessage && registeredMessage.messageElement.id; - return !!messageId && referenceIds.indexOf(messageId) != -1; - }; - /** Determines whether a message can be described on a particular element. */ - /** - * Determines whether a message can be described on a particular element. - * @private - * @param {?} element - * @param {?} message - * @return {?} - */ - AriaDescriber.prototype._canBeDescribed = /** - * Determines whether a message can be described on a particular element. - * @private - * @param {?} element - * @param {?} message - * @return {?} - */ - function (element, message) { - return element.nodeType === this._document.ELEMENT_NODE && message != null && - !!("" + message).trim(); - }; - AriaDescriber.decorators = [ - { type: _angular_core__WEBPACK_IMPORTED_MODULE_1__["Injectable"], args: [{ providedIn: 'root' },] }, - ]; - /** @nocollapse */ - AriaDescriber.ctorParameters = function () { return [ - { type: undefined, decorators: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_1__["Inject"], args: [_angular_common__WEBPACK_IMPORTED_MODULE_0__["DOCUMENT"],] }] } - ]; }; - /** @nocollapse */ AriaDescriber.ngInjectableDef = Object(_angular_core__WEBPACK_IMPORTED_MODULE_1__["defineInjectable"])({ factory: function AriaDescriber_Factory() { return new AriaDescriber(Object(_angular_core__WEBPACK_IMPORTED_MODULE_1__["inject"])(_angular_common__WEBPACK_IMPORTED_MODULE_0__["DOCUMENT"])); }, token: AriaDescriber, providedIn: "root" }); - return AriaDescriber; -}()); -/** - * \@docs-private \@deprecated \@breaking-change 8.0.0 - * @param {?} parentDispatcher - * @param {?} _document - * @return {?} - */ -function ARIA_DESCRIBER_PROVIDER_FACTORY(parentDispatcher, _document) { - return parentDispatcher || new AriaDescriber(_document); -} -/** - * \@docs-private \@deprecated \@breaking-change 8.0.0 - * @type {?} - */ -var ARIA_DESCRIBER_PROVIDER = { - // If there is already an AriaDescriber available, use that. Otherwise, provide a new one. - provide: AriaDescriber, - deps: [ - [new _angular_core__WEBPACK_IMPORTED_MODULE_1__["Optional"](), new _angular_core__WEBPACK_IMPORTED_MODULE_1__["SkipSelf"](), AriaDescriber], - (/** @type {?} */ (_angular_common__WEBPACK_IMPORTED_MODULE_0__["DOCUMENT"])) - ], - useFactory: ARIA_DESCRIBER_PROVIDER_FACTORY -}; - -/** - * @fileoverview added by tsickle - * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc - */ -/** - * This class manages keyboard events for selectable lists. If you pass it a query list - * of items, it will set the active item correctly when arrow events occur. - * @template T - */ -var /** - * This class manages keyboard events for selectable lists. If you pass it a query list - * of items, it will set the active item correctly when arrow events occur. - * @template T - */ -ListKeyManager = /** @class */ (function () { - function ListKeyManager(_items) { - var _this = this; - this._items = _items; - this._activeItemIndex = -1; - this._activeItem = null; - this._wrap = false; - this._letterKeyStream = new rxjs__WEBPACK_IMPORTED_MODULE_2__["Subject"](); - this._typeaheadSubscription = rxjs__WEBPACK_IMPORTED_MODULE_2__["Subscription"].EMPTY; - this._vertical = true; - this._allowedModifierKeys = []; - /** - * Predicate function that can be used to check whether an item should be skipped - * by the key manager. By default, disabled items are skipped. - */ - this._skipPredicateFn = function (item) { return item.disabled; }; - // Buffer for the letters that the user has pressed when the typeahead option is turned on. - this._pressedLetters = []; - /** - * Stream that emits any time the TAB key is pressed, so components can react - * when focus is shifted off of the list. - */ - this.tabOut = new rxjs__WEBPACK_IMPORTED_MODULE_2__["Subject"](); - /** - * Stream that emits whenever the active item of the list manager changes. - */ - this.change = new rxjs__WEBPACK_IMPORTED_MODULE_2__["Subject"](); - // We allow for the items to be an array because, in some cases, the consumer may - // not have access to a QueryList of the items they want to manage (e.g. when the - // items aren't being collected via `ViewChildren` or `ContentChildren`). - if (_items instanceof _angular_core__WEBPACK_IMPORTED_MODULE_1__["QueryList"]) { - _items.changes.subscribe(function (newItems) { - if (_this._activeItem) { - /** @type {?} */ - var itemArray = newItems.toArray(); - /** @type {?} */ - var newIndex = itemArray.indexOf(_this._activeItem); - if (newIndex > -1 && newIndex !== _this._activeItemIndex) { - _this._activeItemIndex = newIndex; - } - } - }); - } - } - /** - * Sets the predicate function that determines which items should be skipped by the - * list key manager. - * @param predicate Function that determines whether the given item should be skipped. - */ - /** - * Sets the predicate function that determines which items should be skipped by the - * list key manager. - * @template THIS - * @this {THIS} - * @param {?} predicate Function that determines whether the given item should be skipped. - * @return {THIS} - */ - ListKeyManager.prototype.skipPredicate = /** - * Sets the predicate function that determines which items should be skipped by the - * list key manager. - * @template THIS - * @this {THIS} - * @param {?} predicate Function that determines whether the given item should be skipped. - * @return {THIS} - */ - function (predicate) { - (/** @type {?} */ (this))._skipPredicateFn = predicate; - return (/** @type {?} */ (this)); - }; - /** - * Configures wrapping mode, which determines whether the active item will wrap to - * the other end of list when there are no more items in the given direction. - * @param shouldWrap Whether the list should wrap when reaching the end. - */ - /** - * Configures wrapping mode, which determines whether the active item will wrap to - * the other end of list when there are no more items in the given direction. - * @template THIS - * @this {THIS} - * @param {?=} shouldWrap Whether the list should wrap when reaching the end. - * @return {THIS} - */ - ListKeyManager.prototype.withWrap = /** - * Configures wrapping mode, which determines whether the active item will wrap to - * the other end of list when there are no more items in the given direction. - * @template THIS - * @this {THIS} - * @param {?=} shouldWrap Whether the list should wrap when reaching the end. - * @return {THIS} - */ - function (shouldWrap) { - if (shouldWrap === void 0) { shouldWrap = true; } - (/** @type {?} */ (this))._wrap = shouldWrap; - return (/** @type {?} */ (this)); - }; - /** - * Configures whether the key manager should be able to move the selection vertically. - * @param enabled Whether vertical selection should be enabled. - */ - /** - * Configures whether the key manager should be able to move the selection vertically. - * @template THIS - * @this {THIS} - * @param {?=} enabled Whether vertical selection should be enabled. - * @return {THIS} - */ - ListKeyManager.prototype.withVerticalOrientation = /** - * Configures whether the key manager should be able to move the selection vertically. - * @template THIS - * @this {THIS} - * @param {?=} enabled Whether vertical selection should be enabled. - * @return {THIS} - */ - function (enabled) { - if (enabled === void 0) { enabled = true; } - (/** @type {?} */ (this))._vertical = enabled; - return (/** @type {?} */ (this)); - }; - /** - * Configures the key manager to move the selection horizontally. - * Passing in `null` will disable horizontal movement. - * @param direction Direction in which the selection can be moved. - */ - /** - * Configures the key manager to move the selection horizontally. - * Passing in `null` will disable horizontal movement. - * @template THIS - * @this {THIS} - * @param {?} direction Direction in which the selection can be moved. - * @return {THIS} - */ - ListKeyManager.prototype.withHorizontalOrientation = /** - * Configures the key manager to move the selection horizontally. - * Passing in `null` will disable horizontal movement. - * @template THIS - * @this {THIS} - * @param {?} direction Direction in which the selection can be moved. - * @return {THIS} - */ - function (direction) { - (/** @type {?} */ (this))._horizontal = direction; - return (/** @type {?} */ (this)); - }; - /** - * Modifier keys which are allowed to be held down and whose default actions will be prevented - * as the user is pressing the arrow keys. Defaults to not allowing any modifier keys. - */ - /** - * Modifier keys which are allowed to be held down and whose default actions will be prevented - * as the user is pressing the arrow keys. Defaults to not allowing any modifier keys. - * @template THIS - * @this {THIS} - * @param {?} keys - * @return {THIS} - */ - ListKeyManager.prototype.withAllowedModifierKeys = /** - * Modifier keys which are allowed to be held down and whose default actions will be prevented - * as the user is pressing the arrow keys. Defaults to not allowing any modifier keys. - * @template THIS - * @this {THIS} - * @param {?} keys - * @return {THIS} - */ - function (keys) { - (/** @type {?} */ (this))._allowedModifierKeys = keys; - return (/** @type {?} */ (this)); - }; - /** - * Turns on typeahead mode which allows users to set the active item by typing. - * @param debounceInterval Time to wait after the last keystroke before setting the active item. - */ - /** - * Turns on typeahead mode which allows users to set the active item by typing. - * @template THIS - * @this {THIS} - * @param {?=} debounceInterval Time to wait after the last keystroke before setting the active item. - * @return {THIS} - */ - ListKeyManager.prototype.withTypeAhead = /** - * Turns on typeahead mode which allows users to set the active item by typing. - * @template THIS - * @this {THIS} - * @param {?=} debounceInterval Time to wait after the last keystroke before setting the active item. - * @return {THIS} - */ - function (debounceInterval) { - var _this = this; - if (debounceInterval === void 0) { debounceInterval = 200; } - if ((/** @type {?} */ (this))._items.length && (/** @type {?} */ (this))._items.some(function (item) { return typeof item.getLabel !== 'function'; })) { - throw Error('ListKeyManager items in typeahead mode must implement the `getLabel` method.'); - } - (/** @type {?} */ (this))._typeaheadSubscription.unsubscribe(); - // Debounce the presses of non-navigational keys, collect the ones that correspond to letters - // and convert those letters back into a string. Afterwards find the first item that starts - // with that string and select it. - (/** @type {?} */ (this))._typeaheadSubscription = (/** @type {?} */ (this))._letterKeyStream.pipe(Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_4__["tap"])(function (keyCode) { return (/** @type {?} */ (_this))._pressedLetters.push(keyCode); }), Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_4__["debounceTime"])(debounceInterval), Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_4__["filter"])(function () { return (/** @type {?} */ (_this))._pressedLetters.length > 0; }), Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_4__["map"])(function () { return (/** @type {?} */ (_this))._pressedLetters.join(''); })).subscribe(function (inputString) { - /** @type {?} */ - var items = (/** @type {?} */ (_this))._getItemsArray(); - // Start at 1 because we want to start searching at the item immediately - // following the current active item. - for (var i = 1; i < items.length + 1; i++) { - /** @type {?} */ - var index = ((/** @type {?} */ (_this))._activeItemIndex + i) % items.length; - /** @type {?} */ - var item = items[index]; - if (!(/** @type {?} */ (_this))._skipPredicateFn(item) && - (/** @type {?} */ (item.getLabel))().toUpperCase().trim().indexOf(inputString) === 0) { - (/** @type {?} */ (_this)).setActiveItem(index); - break; - } - } - (/** @type {?} */ (_this))._pressedLetters = []; - }); - return (/** @type {?} */ (this)); - }; - /** - * @param {?} item - * @return {?} - */ - ListKeyManager.prototype.setActiveItem = /** - * @param {?} item - * @return {?} - */ - function (item) { - /** @type {?} */ - var previousIndex = this._activeItemIndex; - this.updateActiveItem(item); - if (this._activeItemIndex !== previousIndex) { - this.change.next(this._activeItemIndex); - } - }; - /** - * Sets the active item depending on the key event passed in. - * @param event Keyboard event to be used for determining which element should be active. - */ - /** - * Sets the active item depending on the key event passed in. - * @param {?} event Keyboard event to be used for determining which element should be active. - * @return {?} - */ - ListKeyManager.prototype.onKeydown = /** - * Sets the active item depending on the key event passed in. - * @param {?} event Keyboard event to be used for determining which element should be active. - * @return {?} - */ - function (event) { - var _this = this; - /** @type {?} */ - var keyCode = event.keyCode; - /** @type {?} */ - var modifiers = ['altKey', 'ctrlKey', 'metaKey', 'shiftKey']; - /** @type {?} */ - var isModifierAllowed = modifiers.every(function (modifier) { - return !event[modifier] || _this._allowedModifierKeys.indexOf(modifier) > -1; - }); - switch (keyCode) { - case _angular_cdk_keycodes__WEBPACK_IMPORTED_MODULE_3__["TAB"]: - this.tabOut.next(); - return; - case _angular_cdk_keycodes__WEBPACK_IMPORTED_MODULE_3__["DOWN_ARROW"]: - if (this._vertical && isModifierAllowed) { - this.setNextItemActive(); - break; - } - else { - return; - } - case _angular_cdk_keycodes__WEBPACK_IMPORTED_MODULE_3__["UP_ARROW"]: - if (this._vertical && isModifierAllowed) { - this.setPreviousItemActive(); - break; - } - else { - return; - } - case _angular_cdk_keycodes__WEBPACK_IMPORTED_MODULE_3__["RIGHT_ARROW"]: - if (this._horizontal && isModifierAllowed) { - this._horizontal === 'rtl' ? this.setPreviousItemActive() : this.setNextItemActive(); - break; - } - else { - return; - } - case _angular_cdk_keycodes__WEBPACK_IMPORTED_MODULE_3__["LEFT_ARROW"]: - if (this._horizontal && isModifierAllowed) { - this._horizontal === 'rtl' ? this.setNextItemActive() : this.setPreviousItemActive(); - break; - } - else { - return; - } - default: - if (isModifierAllowed || Object(_angular_cdk_keycodes__WEBPACK_IMPORTED_MODULE_3__["hasModifierKey"])(event, 'shiftKey')) { - // Attempt to use the `event.key` which also maps it to the user's keyboard language, - // otherwise fall back to resolving alphanumeric characters via the keyCode. - if (event.key && event.key.length === 1) { - this._letterKeyStream.next(event.key.toLocaleUpperCase()); - } - else if ((keyCode >= _angular_cdk_keycodes__WEBPACK_IMPORTED_MODULE_3__["A"] && keyCode <= _angular_cdk_keycodes__WEBPACK_IMPORTED_MODULE_3__["Z"]) || (keyCode >= _angular_cdk_keycodes__WEBPACK_IMPORTED_MODULE_3__["ZERO"] && keyCode <= _angular_cdk_keycodes__WEBPACK_IMPORTED_MODULE_3__["NINE"])) { - this._letterKeyStream.next(String.fromCharCode(keyCode)); - } - } - // Note that we return here, in order to avoid preventing - // the default action of non-navigational keys. - return; - } - this._pressedLetters = []; - event.preventDefault(); - }; - Object.defineProperty(ListKeyManager.prototype, "activeItemIndex", { - /** Index of the currently active item. */ - get: /** - * Index of the currently active item. - * @return {?} - */ - function () { - return this._activeItemIndex; - }, - enumerable: true, - configurable: true - }); - Object.defineProperty(ListKeyManager.prototype, "activeItem", { - /** The active item. */ - get: /** - * The active item. - * @return {?} - */ - function () { - return this._activeItem; - }, - enumerable: true, - configurable: true - }); - /** Sets the active item to the first enabled item in the list. */ - /** - * Sets the active item to the first enabled item in the list. - * @return {?} - */ - ListKeyManager.prototype.setFirstItemActive = /** - * Sets the active item to the first enabled item in the list. - * @return {?} - */ - function () { - this._setActiveItemByIndex(0, 1); - }; - /** Sets the active item to the last enabled item in the list. */ - /** - * Sets the active item to the last enabled item in the list. - * @return {?} - */ - ListKeyManager.prototype.setLastItemActive = /** - * Sets the active item to the last enabled item in the list. - * @return {?} - */ - function () { - this._setActiveItemByIndex(this._items.length - 1, -1); - }; - /** Sets the active item to the next enabled item in the list. */ - /** - * Sets the active item to the next enabled item in the list. - * @return {?} - */ - ListKeyManager.prototype.setNextItemActive = /** - * Sets the active item to the next enabled item in the list. - * @return {?} - */ - function () { - this._activeItemIndex < 0 ? this.setFirstItemActive() : this._setActiveItemByDelta(1); - }; - /** Sets the active item to a previous enabled item in the list. */ - /** - * Sets the active item to a previous enabled item in the list. - * @return {?} - */ - ListKeyManager.prototype.setPreviousItemActive = /** - * Sets the active item to a previous enabled item in the list. - * @return {?} - */ - function () { - this._activeItemIndex < 0 && this._wrap ? this.setLastItemActive() - : this._setActiveItemByDelta(-1); - }; - /** - * @param {?} item - * @return {?} - */ - ListKeyManager.prototype.updateActiveItem = /** - * @param {?} item - * @return {?} - */ - function (item) { - /** @type {?} */ - var itemArray = this._getItemsArray(); - /** @type {?} */ - var index = typeof item === 'number' ? item : itemArray.indexOf(item); - /** @type {?} */ - var activeItem = itemArray[index]; - // Explicitly check for `null` and `undefined` because other falsy values are valid. - this._activeItem = activeItem == null ? null : activeItem; - this._activeItemIndex = index; - }; - /** - * Allows setting of the activeItemIndex without any other effects. - * @param index The new activeItemIndex. - * @deprecated Use `updateActiveItem` instead. - * @breaking-change 8.0.0 - */ - /** - * Allows setting of the activeItemIndex without any other effects. - * @deprecated Use `updateActiveItem` instead. - * \@breaking-change 8.0.0 - * @param {?} index The new activeItemIndex. - * @return {?} - */ - ListKeyManager.prototype.updateActiveItemIndex = /** - * Allows setting of the activeItemIndex without any other effects. - * @deprecated Use `updateActiveItem` instead. - * \@breaking-change 8.0.0 - * @param {?} index The new activeItemIndex. - * @return {?} - */ - function (index) { - this.updateActiveItem(index); - }; - /** - * This method sets the active item, given a list of items and the delta between the - * currently active item and the new active item. It will calculate differently - * depending on whether wrap mode is turned on. - */ - /** - * This method sets the active item, given a list of items and the delta between the - * currently active item and the new active item. It will calculate differently - * depending on whether wrap mode is turned on. - * @private - * @param {?} delta - * @return {?} - */ - ListKeyManager.prototype._setActiveItemByDelta = /** - * This method sets the active item, given a list of items and the delta between the - * currently active item and the new active item. It will calculate differently - * depending on whether wrap mode is turned on. - * @private - * @param {?} delta - * @return {?} - */ - function (delta) { - this._wrap ? this._setActiveInWrapMode(delta) : this._setActiveInDefaultMode(delta); - }; - /** - * Sets the active item properly given "wrap" mode. In other words, it will continue to move - * down the list until it finds an item that is not disabled, and it will wrap if it - * encounters either end of the list. - */ - /** - * Sets the active item properly given "wrap" mode. In other words, it will continue to move - * down the list until it finds an item that is not disabled, and it will wrap if it - * encounters either end of the list. - * @private - * @param {?} delta - * @return {?} - */ - ListKeyManager.prototype._setActiveInWrapMode = /** - * Sets the active item properly given "wrap" mode. In other words, it will continue to move - * down the list until it finds an item that is not disabled, and it will wrap if it - * encounters either end of the list. - * @private - * @param {?} delta - * @return {?} - */ - function (delta) { - /** @type {?} */ - var items = this._getItemsArray(); - for (var i = 1; i <= items.length; i++) { - /** @type {?} */ - var index = (this._activeItemIndex + (delta * i) + items.length) % items.length; - /** @type {?} */ - var item = items[index]; - if (!this._skipPredicateFn(item)) { - this.setActiveItem(index); - return; - } - } - }; - /** - * Sets the active item properly given the default mode. In other words, it will - * continue to move down the list until it finds an item that is not disabled. If - * it encounters either end of the list, it will stop and not wrap. - */ - /** - * Sets the active item properly given the default mode. In other words, it will - * continue to move down the list until it finds an item that is not disabled. If - * it encounters either end of the list, it will stop and not wrap. - * @private - * @param {?} delta - * @return {?} - */ - ListKeyManager.prototype._setActiveInDefaultMode = /** - * Sets the active item properly given the default mode. In other words, it will - * continue to move down the list until it finds an item that is not disabled. If - * it encounters either end of the list, it will stop and not wrap. - * @private - * @param {?} delta - * @return {?} - */ - function (delta) { - this._setActiveItemByIndex(this._activeItemIndex + delta, delta); - }; - /** - * Sets the active item to the first enabled item starting at the index specified. If the - * item is disabled, it will move in the fallbackDelta direction until it either - * finds an enabled item or encounters the end of the list. - */ - /** - * Sets the active item to the first enabled item starting at the index specified. If the - * item is disabled, it will move in the fallbackDelta direction until it either - * finds an enabled item or encounters the end of the list. - * @private - * @param {?} index - * @param {?} fallbackDelta - * @return {?} - */ - ListKeyManager.prototype._setActiveItemByIndex = /** - * Sets the active item to the first enabled item starting at the index specified. If the - * item is disabled, it will move in the fallbackDelta direction until it either - * finds an enabled item or encounters the end of the list. - * @private - * @param {?} index - * @param {?} fallbackDelta - * @return {?} - */ - function (index, fallbackDelta) { - /** @type {?} */ - var items = this._getItemsArray(); - if (!items[index]) { - return; - } - while (this._skipPredicateFn(items[index])) { - index += fallbackDelta; - if (!items[index]) { - return; - } - } - this.setActiveItem(index); - }; - /** Returns the items as an array. */ - /** - * Returns the items as an array. - * @private - * @return {?} - */ - ListKeyManager.prototype._getItemsArray = /** - * Returns the items as an array. - * @private - * @return {?} - */ - function () { - return this._items instanceof _angular_core__WEBPACK_IMPORTED_MODULE_1__["QueryList"] ? this._items.toArray() : this._items; - }; - return ListKeyManager; -}()); - -/** - * @fileoverview added by tsickle - * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc - */ -/** - * @template T - */ -var /** - * @template T - */ -ActiveDescendantKeyManager = /** @class */ (function (_super) { - Object(tslib__WEBPACK_IMPORTED_MODULE_5__["__extends"])(ActiveDescendantKeyManager, _super); - function ActiveDescendantKeyManager() { - return _super !== null && _super.apply(this, arguments) || this; - } - /** - * @param {?} index - * @return {?} - */ - ActiveDescendantKeyManager.prototype.setActiveItem = /** - * @param {?} index - * @return {?} - */ - function (index) { - if (this.activeItem) { - this.activeItem.setInactiveStyles(); - } - _super.prototype.setActiveItem.call(this, index); - if (this.activeItem) { - this.activeItem.setActiveStyles(); - } - }; - return ActiveDescendantKeyManager; -}(ListKeyManager)); - -/** - * @fileoverview added by tsickle - * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc - */ -/** - * @template T - */ -var /** - * @template T - */ -FocusKeyManager = /** @class */ (function (_super) { - Object(tslib__WEBPACK_IMPORTED_MODULE_5__["__extends"])(FocusKeyManager, _super); - function FocusKeyManager() { - var _this = _super !== null && _super.apply(this, arguments) || this; - _this._origin = 'program'; - return _this; - } - /** - * Sets the focus origin that will be passed in to the items for any subsequent `focus` calls. - * @param origin Focus origin to be used when focusing items. - */ - /** - * Sets the focus origin that will be passed in to the items for any subsequent `focus` calls. - * @template THIS - * @this {THIS} - * @param {?} origin Focus origin to be used when focusing items. - * @return {THIS} - */ - FocusKeyManager.prototype.setFocusOrigin = /** - * Sets the focus origin that will be passed in to the items for any subsequent `focus` calls. - * @template THIS - * @this {THIS} - * @param {?} origin Focus origin to be used when focusing items. - * @return {THIS} - */ - function (origin) { - (/** @type {?} */ (this))._origin = origin; - return (/** @type {?} */ (this)); - }; - /** - * @param {?} item - * @return {?} - */ - FocusKeyManager.prototype.setActiveItem = /** - * @param {?} item - * @return {?} - */ - function (item) { - _super.prototype.setActiveItem.call(this, item); - if (this.activeItem) { - this.activeItem.focus(this._origin); - } - }; - return FocusKeyManager; -}(ListKeyManager)); - -/** - * @fileoverview added by tsickle - * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc - */ -// The InteractivityChecker leans heavily on the ally.js accessibility utilities. -// Methods like `isTabbable` are only covering specific edge-cases for the browsers which are -// supported. -/** - * Utility for checking the interactivity of an element, such as whether is is focusable or - * tabbable. - */ -var InteractivityChecker = /** @class */ (function () { - function InteractivityChecker(_platform) { - this._platform = _platform; - } - /** - * Gets whether an element is disabled. - * - * @param element Element to be checked. - * @returns Whether the element is disabled. - */ - /** - * Gets whether an element is disabled. - * - * @param {?} element Element to be checked. - * @return {?} Whether the element is disabled. - */ - InteractivityChecker.prototype.isDisabled = /** - * Gets whether an element is disabled. - * - * @param {?} element Element to be checked. - * @return {?} Whether the element is disabled. - */ - function (element) { - // This does not capture some cases, such as a non-form control with a disabled attribute or - // a form control inside of a disabled form, but should capture the most common cases. - return element.hasAttribute('disabled'); - }; - /** - * Gets whether an element is visible for the purposes of interactivity. - * - * This will capture states like `display: none` and `visibility: hidden`, but not things like - * being clipped by an `overflow: hidden` parent or being outside the viewport. - * - * @returns Whether the element is visible. - */ - /** - * Gets whether an element is visible for the purposes of interactivity. - * - * This will capture states like `display: none` and `visibility: hidden`, but not things like - * being clipped by an `overflow: hidden` parent or being outside the viewport. - * - * @param {?} element - * @return {?} Whether the element is visible. - */ - InteractivityChecker.prototype.isVisible = /** - * Gets whether an element is visible for the purposes of interactivity. - * - * This will capture states like `display: none` and `visibility: hidden`, but not things like - * being clipped by an `overflow: hidden` parent or being outside the viewport. - * - * @param {?} element - * @return {?} Whether the element is visible. - */ - function (element) { - return hasGeometry(element) && getComputedStyle(element).visibility === 'visible'; - }; - /** - * Gets whether an element can be reached via Tab key. - * Assumes that the element has already been checked with isFocusable. - * - * @param element Element to be checked. - * @returns Whether the element is tabbable. - */ - /** - * Gets whether an element can be reached via Tab key. - * Assumes that the element has already been checked with isFocusable. - * - * @param {?} element Element to be checked. - * @return {?} Whether the element is tabbable. - */ - InteractivityChecker.prototype.isTabbable = /** - * Gets whether an element can be reached via Tab key. - * Assumes that the element has already been checked with isFocusable. - * - * @param {?} element Element to be checked. - * @return {?} Whether the element is tabbable. - */ - function (element) { - // Nothing is tabbable on the server 😎 - if (!this._platform.isBrowser) { - return false; - } - /** @type {?} */ - var frameElement = getFrameElement(getWindow(element)); - if (frameElement) { - /** @type {?} */ - var frameType = frameElement && frameElement.nodeName.toLowerCase(); - // Frame elements inherit their tabindex onto all child elements. - if (getTabIndexValue(frameElement) === -1) { - return false; - } - // Webkit and Blink consider anything inside of an element as non-tabbable. - if ((this._platform.BLINK || this._platform.WEBKIT) && frameType === 'object') { - return false; - } - // Webkit and Blink disable tabbing to an element inside of an invisible frame. - if ((this._platform.BLINK || this._platform.WEBKIT) && !this.isVisible(frameElement)) { - return false; - } - } - /** @type {?} */ - var nodeName = element.nodeName.toLowerCase(); - /** @type {?} */ - var tabIndexValue = getTabIndexValue(element); - if (element.hasAttribute('contenteditable')) { - return tabIndexValue !== -1; - } - if (nodeName === 'iframe') { - // The frames may be tabbable depending on content, but it's not possibly to reliably - // investigate the content of the frames. - return false; - } - if (nodeName === 'audio') { - if (!element.hasAttribute('controls')) { - // By default an