Skip to content

Commit 212c354

Browse files
crisbetocrisbeto
committed
fix(material/datepicker): remove remaining animation dependencies
Removes the remaning dependencies on `@angular/animations` from the package.
1 parent 5423dd2 commit 212c354

File tree

3 files changed

+107
-46
lines changed

3 files changed

+107
-46
lines changed

‎src/material/datepicker/BUILD.bazel

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,6 @@ ng_module(
3838
"//src/material/core",
3939
"//src/material/form-field",
4040
"//src/material/input",
41-
"@npm//@angular/animations",
4241
"@npm//@angular/common",
4342
"@npm//@angular/core",
4443
"@npm//@angular/forms",

‎src/material/datepicker/datepicker-animations.ts

Lines changed: 105 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,6 @@
55
* Use of this source code is governed by an MIT-style license that can be
66
* found in the LICENSE file at https://angular.dev/license
77
*/
8-
import {
9-
animate,
10-
state,
11-
style,
12-
transition,
13-
trigger,
14-
keyframes,
15-
AnimationTriggerMetadata,
16-
} from '@angular/animations';
178

189
/**
1910
* Animations used by the Material datepicker.
@@ -22,41 +13,113 @@ import {
2213
* @breaking-change 21.0.0
2314
*/
2415
export const matDatepickerAnimations: {
25-
readonly transformPanel: AnimationTriggerMetadata;
26-
readonly fadeInCalendar: AnimationTriggerMetadata;
16+
readonly transformPanel: any;
17+
readonly fadeInCalendar: any;
2718
} = {
19+
// Represents:
20+
// trigger('transformPanel', [
21+
// transition(
22+
// 'void => enter-dropdown',
23+
// animate(
24+
// '120ms cubic-bezier(0, 0, 0.2, 1)',
25+
// keyframes([
26+
// style({opacity: 0, transform: 'scale(1, 0.8)'}),
27+
// style({opacity: 1, transform: 'scale(1, 1)'}),
28+
// ]),
29+
// ),
30+
// ),
31+
// transition(
32+
// 'void => enter-dialog',
33+
// animate(
34+
// '150ms cubic-bezier(0, 0, 0.2, 1)',
35+
// keyframes([
36+
// style({opacity: 0, transform: 'scale(0.7)'}),
37+
// style({transform: 'none', opacity: 1}),
38+
// ]),
39+
// ),
40+
// ),
41+
// transition('* => void', animate('100ms linear', style({opacity: 0}))),
42+
// ])
43+
2844
/** Transforms the height of the datepicker's calendar. */
29-
transformPanel: trigger('transformPanel', [
30-
transition(
31-
'void => enter-dropdown',
32-
animate(
33-
'120ms cubic-bezier(0, 0, 0.2, 1)',
34-
keyframes([
35-
style({opacity: 0, transform: 'scale(1, 0.8)'}),
36-
style({opacity: 1, transform: 'scale(1, 1)'}),
37-
]),
38-
),
39-
),
40-
transition(
41-
'void => enter-dialog',
42-
animate(
43-
'150ms cubic-bezier(0, 0, 0.2, 1)',
44-
keyframes([
45-
style({opacity: 0, transform: 'scale(0.7)'}),
46-
style({transform: 'none', opacity: 1}),
47-
]),
48-
),
49-
),
50-
transition('* => void', animate('100ms linear', style({opacity: 0}))),
51-
]),
45+
transformPanel: {
46+
type: 7,
47+
name: 'transformPanel',
48+
definitions: [
49+
{
50+
type: 1,
51+
expr: 'void => enter-dropdown',
52+
animation: {
53+
type: 4,
54+
styles: {
55+
type: 5,
56+
steps: [
57+
{type: 6, styles: {opacity: 0, transform: 'scale(1, 0.8)'}, offset: null},
58+
{type: 6, styles: {opacity: 1, transform: 'scale(1, 1)'}, offset: null},
59+
],
60+
},
61+
timings: '120ms cubic-bezier(0, 0, 0.2, 1)',
62+
},
63+
options: null,
64+
},
65+
{
66+
type: 1,
67+
expr: 'void => enter-dialog',
68+
animation: {
69+
type: 4,
70+
styles: {
71+
type: 5,
72+
steps: [
73+
{type: 6, styles: {opacity: 0, transform: 'scale(0.7)'}, offset: null},
74+
{type: 6, styles: {transform: 'none', opacity: 1}, offset: null},
75+
],
76+
},
77+
timings: '150ms cubic-bezier(0, 0, 0.2, 1)',
78+
},
79+
options: null,
80+
},
81+
{
82+
type: 1,
83+
expr: '* => void',
84+
animation: {
85+
type: 4,
86+
styles: {type: 6, styles: {opacity: 0}, offset: null},
87+
timings: '100ms linear',
88+
},
89+
options: null,
90+
},
91+
],
92+
options: {},
93+
},
5294

53-
/** Fades in the content of the calendar. */
54-
fadeInCalendar: trigger('fadeInCalendar', [
55-
state('void', style({opacity: 0})),
56-
state('enter', style({opacity: 1})),
95+
// Represents:
96+
// trigger('fadeInCalendar', [
97+
// state('void', style({opacity: 0})),
98+
// state('enter', style({opacity: 1})),
5799

58-
// TODO(crisbeto): this animation should be removed since it isn't quite on spec, but we
59-
// need to keep it until #12440 gets in, otherwise the exit animation will look glitchy.
60-
transition('void => *', animate('120ms 100ms cubic-bezier(0.55, 0, 0.55, 0.2)')),
61-
]),
100+
// // TODO(crisbeto): this animation should be removed since it isn't quite on spec, but we
101+
// // need to keep it until #12440 gets in, otherwise the exit animation will look glitchy.
102+
// transition('void => *', animate('120ms 100ms cubic-bezier(0.55, 0, 0.55, 0.2)')),
103+
// ])
104+
105+
/** Fades in the content of the calendar. */
106+
fadeInCalendar: {
107+
type: 7,
108+
name: 'fadeInCalendar',
109+
definitions: [
110+
{type: 0, name: 'void', styles: {type: 6, styles: {opacity: 0}, offset: null}},
111+
{type: 0, name: 'enter', styles: {type: 6, styles: {opacity: 1}, offset: null}},
112+
{
113+
type: 1,
114+
expr: 'void => *',
115+
animation: {
116+
type: 4,
117+
styles: null,
118+
timings: '120ms 100ms cubic-bezier(0.55, 0, 0.55, 0.2)',
119+
},
120+
options: null,
121+
},
122+
],
123+
options: {},
124+
},
62125
};

‎tools/public_api_guard/material/datepicker.md

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import { AbstractControl } from '@angular/forms';
88
import { AfterContentInit } from '@angular/core';
99
import { AfterViewChecked } from '@angular/core';
1010
import { AfterViewInit } from '@angular/core';
11-
import { AnimationTriggerMetadata } from '@angular/animations';
1211
import { ChangeDetectorRef } from '@angular/core';
1312
import { ComponentType } from '@angular/cdk/portal';
1413
import { ControlValueAccessor } from '@angular/forms';
@@ -339,8 +338,8 @@ export class MatDatepickerActions implements AfterViewInit, OnDestroy {
339338

340339
// @public @deprecated
341340
export const matDatepickerAnimations: {
342-
readonly transformPanel: AnimationTriggerMetadata;
343-
readonly fadeInCalendar: AnimationTriggerMetadata;
341+
readonly transformPanel: any;
342+
readonly fadeInCalendar: any;
344343
};
345344

346345
// @public

0 commit comments

Comments
 (0)