fix(material/datepicker): remove remaining animation dependencies

Removes the remaning dependencies on `@angular/animations` from the package.
angular · Feb 3, 2025 · 212c354 · 212c354
1 parent 5423dd2
commit 212c354
Show file tree

Hide file tree

Showing 3 changed files with 107 additions and 46 deletions.
diff --git a/src/material/datepicker/BUILD.bazel b/src/material/datepicker/BUILD.bazel
@@ -38,7 +38,6 @@ ng_module(
         "//src/material/core",
         "//src/material/form-field",
         "//src/material/input",
-        "@npm//@angular/animations",
         "@npm//@angular/common",
         "@npm//@angular/core",
         "@npm//@angular/forms",

diff --git a/src/material/datepicker/datepicker-animations.ts b/src/material/datepicker/datepicker-animations.ts
@@ -5,15 +5,6 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.dev/license
  */
-import {
-  animate,
-  state,
-  style,
-  transition,
-  trigger,
-  keyframes,
-  AnimationTriggerMetadata,
-} from '@angular/animations';
 
 /**
  * Animations used by the Material datepicker.
@@ -22,41 +13,113 @@ import {
  * @breaking-change 21.0.0
  */
 export const matDatepickerAnimations: {
-  readonly transformPanel: AnimationTriggerMetadata;
-  readonly fadeInCalendar: AnimationTriggerMetadata;
+  readonly transformPanel: any;
+  readonly fadeInCalendar: any;
 } = {
+  // Represents:
+  // trigger('transformPanel', [
+  //   transition(
+  //     'void => enter-dropdown',
+  //     animate(
+  //       '120ms cubic-bezier(0, 0, 0.2, 1)',
+  //       keyframes([
+  //         style({opacity: 0, transform: 'scale(1, 0.8)'}),
+  //         style({opacity: 1, transform: 'scale(1, 1)'}),
+  //       ]),
+  //     ),
+  //   ),
+  //   transition(
+  //     'void => enter-dialog',
+  //     animate(
+  //       '150ms cubic-bezier(0, 0, 0.2, 1)',
+  //       keyframes([
+  //         style({opacity: 0, transform: 'scale(0.7)'}),
+  //         style({transform: 'none', opacity: 1}),
+  //       ]),
+  //     ),
+  //   ),
+  //   transition('* => void', animate('100ms linear', style({opacity: 0}))),
+  // ])
+
   /** Transforms the height of the datepicker's calendar. */
-  transformPanel: trigger('transformPanel', [
-    transition(
-      'void => enter-dropdown',
-      animate(
-        '120ms cubic-bezier(0, 0, 0.2, 1)',
-        keyframes([
-          style({opacity: 0, transform: 'scale(1, 0.8)'}),
-          style({opacity: 1, transform: 'scale(1, 1)'}),
-        ]),
-      ),
-    ),
-    transition(
-      'void => enter-dialog',
-      animate(
-        '150ms cubic-bezier(0, 0, 0.2, 1)',
-        keyframes([
-          style({opacity: 0, transform: 'scale(0.7)'}),
-          style({transform: 'none', opacity: 1}),
-        ]),
-      ),
-    ),
-    transition('* => void', animate('100ms linear', style({opacity: 0}))),
-  ]),
+  transformPanel: {
+    type: 7,
+    name: 'transformPanel',
+    definitions: [
+      {
+        type: 1,
+        expr: 'void => enter-dropdown',
+        animation: {
+          type: 4,
+          styles: {
+            type: 5,
+            steps: [
+              {type: 6, styles: {opacity: 0, transform: 'scale(1, 0.8)'}, offset: null},
+              {type: 6, styles: {opacity: 1, transform: 'scale(1, 1)'}, offset: null},
+            ],
+          },
+          timings: '120ms cubic-bezier(0, 0, 0.2, 1)',
+        },
+        options: null,
+      },
+      {
+        type: 1,
+        expr: 'void => enter-dialog',
+        animation: {
+          type: 4,
+          styles: {
+            type: 5,
+            steps: [
+              {type: 6, styles: {opacity: 0, transform: 'scale(0.7)'}, offset: null},
+              {type: 6, styles: {transform: 'none', opacity: 1}, offset: null},
+            ],
+          },
+          timings: '150ms cubic-bezier(0, 0, 0.2, 1)',
+        },
+        options: null,
+      },
+      {
+        type: 1,
+        expr: '* => void',
+        animation: {
+          type: 4,
+          styles: {type: 6, styles: {opacity: 0}, offset: null},
+          timings: '100ms linear',
+        },
+        options: null,
+      },
+    ],
+    options: {},
+  },
 
-  /** Fades in the content of the calendar. */
-  fadeInCalendar: trigger('fadeInCalendar', [
-    state('void', style({opacity: 0})),
-    state('enter', style({opacity: 1})),
+  // Represents:
+  // trigger('fadeInCalendar', [
+  //   state('void', style({opacity: 0})),
+  //   state('enter', style({opacity: 1})),
 
-    // TODO(crisbeto): this animation should be removed since it isn't quite on spec, but we
-    // need to keep it until #12440 gets in, otherwise the exit animation will look glitchy.
-    transition('void => *', animate('120ms 100ms cubic-bezier(0.55, 0, 0.55, 0.2)')),
-  ]),
+  //   // TODO(crisbeto): this animation should be removed since it isn't quite on spec, but we
+  //   // need to keep it until #12440 gets in, otherwise the exit animation will look glitchy.
+  //   transition('void => *', animate('120ms 100ms cubic-bezier(0.55, 0, 0.55, 0.2)')),
+  // ])
+
+  /** Fades in the content of the calendar. */
+  fadeInCalendar: {
+    type: 7,
+    name: 'fadeInCalendar',
+    definitions: [
+      {type: 0, name: 'void', styles: {type: 6, styles: {opacity: 0}, offset: null}},
+      {type: 0, name: 'enter', styles: {type: 6, styles: {opacity: 1}, offset: null}},
+      {
+        type: 1,
+        expr: 'void => *',
+        animation: {
+          type: 4,
+          styles: null,
+          timings: '120ms 100ms cubic-bezier(0.55, 0, 0.55, 0.2)',
+        },
+        options: null,
+      },
+    ],
+    options: {},
+  },
 };
diff --git a/tools/public_api_guard/material/datepicker.md b/tools/public_api_guard/material/datepicker.md
@@ -8,7 +8,6 @@ import { AbstractControl } from '@angular/forms';
 import { AfterContentInit } from '@angular/core';
 import { AfterViewChecked } from '@angular/core';
 import { AfterViewInit } from '@angular/core';
-import { AnimationTriggerMetadata } from '@angular/animations';
 import { ChangeDetectorRef } from '@angular/core';
 import { ComponentType } from '@angular/cdk/portal';
 import { ControlValueAccessor } from '@angular/forms';
@@ -339,8 +338,8 @@ export class MatDatepickerActions implements AfterViewInit, OnDestroy {
 
 // @public @deprecated
 export const matDatepickerAnimations: {
-    readonly transformPanel: AnimationTriggerMetadata;
-    readonly fadeInCalendar: AnimationTriggerMetadata;
+    readonly transformPanel: any;
+    readonly fadeInCalendar: any;
 };
 
 // @public