Remove animations dependency from the public API

src/material/bottom-sheet/BUILD.bazel

@@ -32,7 +32,6 @@ ng_module(
         "//src/cdk/platform",
         "//src/cdk/portal",
         "//src/material/core",
-        "@npm//@angular/animations",
         "@npm//@angular/core",
         "@npm//rxjs",
     ],

src/material/bottom-sheet/bottom-sheet-animations.ts

@@ -5,43 +5,87 @@
  * 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,
-  AnimationTriggerMetadata,
-  group,
-  query,
-  animateChild,
-} from '@angular/animations';
 
 /**
  * Animations used by the Material bottom sheet.
  * @deprecated No longer used. Will be removed.
  * @breaking-change 21.0.0
  */
 export const matBottomSheetAnimations: {
-  readonly bottomSheetState: AnimationTriggerMetadata;
+  readonly bottomSheetState: any;
 } = {
+  // Represents the output of:
+  // trigger('state', [
+  //   state('void, hidden', style({transform: 'translateY(100%)'})),
+  //   state('visible', style({transform: 'translateY(0%)'})),
+  //   transition(
+  //     'visible => void, visible => hidden',
+  //     group([
+  //       animate('375ms cubic-bezier(0.4, 0, 1, 1)'),
+  //       query('@*', animateChild(), {optional: true}),
+  //     ]),
+  //   ),
+  //   transition(
+  //     'void => visible',
+  //     group([
+  //       animate('195ms cubic-bezier(0, 0, 0.2, 1)'),
+  //       query('@*', animateChild(), {optional: true}),
+  //     ]),
+  //   ),
+  // ])
+
   /** Animation that shows and hides a bottom sheet. */
-  bottomSheetState: trigger('state', [
-    state('void, hidden', style({transform: 'translateY(100%)'})),
-    state('visible', style({transform: 'translateY(0%)'})),
-    transition(
-      'visible => void, visible => hidden',
-      group([
-        animate('375ms cubic-bezier(0.4, 0, 1, 1)'),
-        query('@*', animateChild(), {optional: true}),
-      ]),
-    ),
-    transition(
-      'void => visible',
-      group([
-        animate('195ms cubic-bezier(0, 0, 0.2, 1)'),
-        query('@*', animateChild(), {optional: true}),
-      ]),
-    ),
-  ]),
+  bottomSheetState: {
+    type: 7,
+    name: 'state',
+    definitions: [
+      {
+        type: 0,
+        name: 'void, hidden',
+        styles: {type: 6, styles: {transform: 'translateY(100%)'}, offset: null},
+      },
+      {
+        type: 0,
+        name: 'visible',
+        styles: {type: 6, styles: {transform: 'translateY(0%)'}, offset: null},
+      },
+      {
+        type: 1,
+        expr: 'visible => void, visible => hidden',
+        animation: {
+          type: 3,
+          steps: [
+            {type: 4, styles: null, timings: '375ms cubic-bezier(0.4, 0, 1, 1)'},
+            {
+              type: 11,
+              selector: '@*',
+              animation: {type: 9, options: null},
+              options: {optional: true},
+            },
+          ],
+          options: null,
+        },
+        options: null,
+      },
+      {
+        type: 1,
+        expr: 'void => visible',
+        animation: {
+          type: 3,
+          steps: [
+            {type: 4, styles: null, timings: '195ms cubic-bezier(0, 0, 0.2, 1)'},
+            {
+              type: 11,
+              selector: '@*',
+              animation: {type: 9, options: null},
+              options: {optional: true},
+            },
+          ],
+          options: null,
+        },
+        options: null,
+      },
+    ],
+    options: {},
+  },
 };

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",

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: {},
+  },
 };