fix(animations): fix stagger timing not handling params

packages/animations/browser/src/dsl/animation_ast_builder.ts

@@ -473,7 +473,7 @@ export class AnimationAstBuilderVisitor implements AnimationDslVisitor {
     }
     const timings = metadata.timings === 'full' ?
         {duration: 0, delay: 0, easing: 'full'} :
-        resolveTiming(metadata.timings, context.errors, true);
+        constructTimingAst(metadata.timings, context.errors);
 
     return {
       type: AnimationMetadataType.Stagger,

packages/animations/browser/src/dsl/animation_timeline_builder.ts

@@ -278,12 +278,14 @@ export class AnimationTimelineBuilderVisitor implements AstVisitor {
     context.previousNode = ast;
   }
 
-  private _visitTiming(ast: TimingAst, context: AnimationTimelineContext): AnimateTimings {
+  private _visitTiming(
+      ast: TimingAst, context: AnimationTimelineContext,
+      allowNegativeValues = false): AnimateTimings {
     if ((ast as DynamicTimingAst).dynamic) {
       const strValue = (ast as DynamicTimingAst).strValue;
       const timingValue =
           context.params ? interpolateParams(strValue, context.params, context.errors) : strValue;
-      return resolveTiming(timingValue, context.errors);
+      return resolveTiming(timingValue, context.errors, allowNegativeValues);
     } else {
       return {duration: ast.duration, delay: ast.delay, easing: ast.easing};
     }
@@ -413,7 +415,8 @@ export class AnimationTimelineBuilderVisitor implements AstVisitor {
   visitStagger(ast: StaggerAst, context: AnimationTimelineContext) {
     const parentContext = context.parentContext!;
     const tl = context.currentTimeline;
-    const timings = ast.timings;
+    const timings = this._visitTiming(ast.timings, context, true);
+
     const duration = Math.abs(timings.duration);
     const maxTime = duration * (context.currentQueryTotal - 1);
     let delay = duration * context.currentQueryIndex;

packages/core/test/animation/animation_query_integration_spec.ts

@@ -742,6 +742,105 @@ describe('animation query tests', function() {
       expect(p5.delay).toEqual(6000);
     });
 
+    it(`should handle params used in the stagger's timing argument`, () => {
+      @Component({
+          selector: 'ani-cmp',
+          template: `
+          <div [@myAnimation]="exp">
+            <div *ngFor="let item of items" class="item">
+              {{ item }}
+            </div>
+          </div>
+        `,
+          animations: [
+            trigger('myAnimation', [
+              transition('* => go', [
+                query('.item', [
+                  stagger('{{staggerDelay}}ms',[
+                    style({opacity: 0}), animate(1000, style({opacity: .5})),
+                    animate(500, style({opacity: 1}))
+                  ])
+                ])
+              ], {params: { staggerDelay: '1111' }})
+            ])
+          ]
+        })
+        class Cmp {
+        public exp: any;
+        public items: any[] = [0, 1, 2, 3, 4];
+      }
+
+      TestBed.configureTestingModule({declarations: [Cmp]});
+
+      const engine = TestBed.inject(ɵAnimationEngine);
+      const fixture = TestBed.createComponent(Cmp);
+      const cmp = fixture.componentInstance;
+
+      cmp.exp = 'go';
+      fixture.detectChanges();
+      engine.flush();
+
+      const players = getLog();
+      expect(players.length).toEqual(5);
+
+      const [p1, p2, p3, p4, p5] = players;
+      expect(p1.delay).toEqual(0);
+      expect(p2.delay).toEqual(1111);
+      expect(p3.delay).toEqual(2222);
+      expect(p4.delay).toEqual(3333);
+      expect(p5.delay).toEqual(4444);
+    });
+
+    it(`should handle params used in the stagger's timing argument producing a negative value`,
+       () => {
+         @Component({
+          selector: 'ani-cmp',
+          template: `
+          <div [@myAnimation]="exp">
+            <div *ngFor="let item of items" class="item">
+              {{ item }}
+            </div>
+          </div>
+        `,
+          animations: [
+            trigger('myAnimation', [
+              transition('* => go', [
+                query('.item', [
+                  stagger('{{staggerDelay}}ms',[
+                    style({opacity: 0}), animate(1000, style({opacity: .5})),
+                    animate(500, style({opacity: 1}))
+                  ])
+                ])
+              ], {params: { staggerDelay: -1111 }})
+            ])
+          ]
+        })
+        class Cmp {
+           public exp: any;
+           public items: any[] = [0, 1, 2, 3, 4];
+         }
+
+         TestBed.configureTestingModule({declarations: [Cmp]});
+
+         const engine = TestBed.inject(ɵAnimationEngine);
+         const fixture = TestBed.createComponent(Cmp);
+         const cmp = fixture.componentInstance;
+
+         cmp.exp = 'go';
+         fixture.detectChanges();
+         engine.flush();
+
+         const players = getLog();
+         expect(players.length).toEqual(5);
+
+         const [p1, p2, p3, p4, p5] = players;
+         expect(p5.delay).toEqual(0);
+         expect(p4.delay).toEqual(1111);
+         expect(p3.delay).toEqual(2222);
+         expect(p2.delay).toEqual(3333);
+         expect(p1.delay).toEqual(4444);
+       });
+
     it('should persist inner sub trigger styles once their animation is complete', () => {
       @Component({
         selector: 'ani-cmp',

packages/core/test/bundling/animations/bundle.golden_symbols.json

@@ -647,6 +647,9 @@
   {
     "name": "connectableObservableDescriptor"
   },
+  {
+    "name": "constructTimingAst"
+  },
   {
     "name": "containsElement"
   },