Skip to content

Commit 8723307

Browse files
crisbetocrisbeto
committedFeb 3, 2025
fix(material/stepper): remove remaining animation dependencies
Removes the remaning dependencies on `@angular/animations` from the package.
·
20.0.0-next.519.2.0-next.3
1 parent 25c18bf commit 8723307

File tree

3 files changed

+140
-49
lines changed

3 files changed

+140
-49
lines changed
 

‎src/material/stepper/BUILD.bazel

-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@ ng_module(
2929
"//src/cdk/stepper",
3030
"//src/material/core",
3131
"//src/material/icon",
32-
"@npm//@angular/animations",
3332
"@npm//@angular/common",
3433
"@npm//@angular/core",
3534
"@npm//@angular/forms",

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

+138-45
Original file line numberDiff line numberDiff line change
@@ -5,17 +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-
AnimationTriggerMetadata,
15-
group,
16-
query,
17-
animateChild,
18-
} from '@angular/animations';
198

209
/**
2110
* Animations used by the Material steppers.
@@ -24,46 +13,150 @@ import {
2413
* @breaking-change 21.0.0
2514
*/
2615
export const matStepperAnimations: {
27-
readonly horizontalStepTransition: AnimationTriggerMetadata;
28-
readonly verticalStepTransition: AnimationTriggerMetadata;
16+
readonly horizontalStepTransition: any;
17+
readonly verticalStepTransition: any;
2918
} = {
19+
// Represents:
20+
// trigger('horizontalStepTransition', [
21+
// state('previous', style({transform: 'translate3d(-100%, 0, 0)', visibility: 'hidden'})),
22+
// // Transition to `inherit`, rather than `visible`,
23+
// // because visibility on a child element the one from the parent,
24+
// // making this element focusable inside of a `hidden` element.
25+
// state('current', style({transform: 'none', visibility: 'inherit'})),
26+
// state('next', style({transform: 'translate3d(100%, 0, 0)', visibility: 'hidden'})),
27+
// transition(
28+
// '* => *',
29+
// group([
30+
// animate('{{animationDuration}} cubic-bezier(0.35, 0, 0.25, 1)'),
31+
// query('@*', animateChild(), {optional: true}),
32+
// ]),
33+
// {
34+
// params: {animationDuration: '500ms'},
35+
// },
36+
// ),
37+
// ])
38+
3039
/** Animation that transitions the step along the X axis in a horizontal stepper. */
31-
horizontalStepTransition: trigger('horizontalStepTransition', [
32-
state('previous', style({transform: 'translate3d(-100%, 0, 0)', visibility: 'hidden'})),
33-
// Transition to `inherit`, rather than `visible`,
34-
// because visibility on a child element the one from the parent,
35-
// making this element focusable inside of a `hidden` element.
36-
state('current', style({transform: 'none', visibility: 'inherit'})),
37-
state('next', style({transform: 'translate3d(100%, 0, 0)', visibility: 'hidden'})),
38-
transition(
39-
'* => *',
40-
group([
41-
animate('{{animationDuration}} cubic-bezier(0.35, 0, 0.25, 1)'),
42-
query('@*', animateChild(), {optional: true}),
43-
]),
40+
horizontalStepTransition: {
41+
type: 7,
42+
name: 'horizontalStepTransition',
43+
definitions: [
44+
{
45+
type: 0,
46+
name: 'previous',
47+
styles: {
48+
type: 6,
49+
styles: {transform: 'translate3d(-100%, 0, 0)', visibility: 'hidden'},
50+
offset: null,
51+
},
52+
},
53+
{
54+
type: 0,
55+
name: 'current',
56+
styles: {
57+
type: 6,
58+
styles: {transform: 'none', visibility: 'inherit'},
59+
offset: null,
60+
},
61+
},
62+
{
63+
type: 0,
64+
name: 'next',
65+
styles: {
66+
type: 6,
67+
styles: {transform: 'translate3d(100%, 0, 0)', visibility: 'hidden'},
68+
offset: null,
69+
},
70+
},
4471
{
45-
params: {'animationDuration': '500ms'},
72+
type: 1,
73+
expr: '* => *',
74+
animation: {
75+
type: 3,
76+
steps: [
77+
{
78+
type: 4,
79+
styles: null,
80+
timings: '{{animationDuration}} cubic-bezier(0.35, 0, 0.25, 1)',
81+
},
82+
{
83+
type: 11,
84+
selector: '@*',
85+
animation: {type: 9, options: null},
86+
options: {optional: true},
87+
},
88+
],
89+
options: null,
90+
},
91+
options: {params: {animationDuration: '500ms'}},
4692
},
47-
),
48-
]),
93+
],
94+
options: {},
95+
},
96+
97+
// Represents:
98+
// trigger('verticalStepTransition', [
99+
// state('previous', style({height: '0px', visibility: 'hidden'})),
100+
// state('next', style({height: '0px', visibility: 'hidden'})),
101+
// // Transition to `inherit`, rather than `visible`,
102+
// // because visibility on a child element the one from the parent,
103+
// // making this element focusable inside of a `hidden` element.
104+
// state('current', style({height: '*', visibility: 'inherit'})),
105+
// transition(
106+
// '* <=> current',
107+
// group([
108+
// animate('{{animationDuration}} cubic-bezier(0.4, 0.0, 0.2, 1)'),
109+
// query('@*', animateChild(), {optional: true}),
110+
// ]),
111+
// {
112+
// params: {animationDuration: '225ms'},
113+
// },
114+
// ),
115+
// ])
49116

50117
/** Animation that transitions the step along the Y axis in a vertical stepper. */
51-
verticalStepTransition: trigger('verticalStepTransition', [
52-
state('previous', style({height: '0px', visibility: 'hidden'})),
53-
state('next', style({height: '0px', visibility: 'hidden'})),
54-
// Transition to `inherit`, rather than `visible`,
55-
// because visibility on a child element the one from the parent,
56-
// making this element focusable inside of a `hidden` element.
57-
state('current', style({height: '*', visibility: 'inherit'})),
58-
transition(
59-
'* <=> current',
60-
group([
61-
animate('{{animationDuration}} cubic-bezier(0.4, 0.0, 0.2, 1)'),
62-
query('@*', animateChild(), {optional: true}),
63-
]),
118+
verticalStepTransition: {
119+
type: 7,
120+
name: 'verticalStepTransition',
121+
definitions: [
122+
{
123+
type: 0,
124+
name: 'previous',
125+
styles: {type: 6, styles: {'height': '0px', visibility: 'hidden'}, offset: null},
126+
},
127+
{
128+
type: 0,
129+
name: 'next',
130+
styles: {type: 6, styles: {'height': '0px', visibility: 'hidden'}, offset: null},
131+
},
132+
{
133+
type: 0,
134+
name: 'current',
135+
styles: {type: 6, styles: {'height': '*', visibility: 'inherit'}, offset: null},
136+
},
64137
{
65-
params: {'animationDuration': '225ms'},
138+
type: 1,
139+
expr: '* <=> current',
140+
animation: {
141+
type: 3,
142+
steps: [
143+
{
144+
type: 4,
145+
styles: null,
146+
timings: '{{animationDuration}} cubic-bezier(0.4, 0.0, 0.2, 1)',
147+
},
148+
{
149+
type: 11,
150+
selector: '@*',
151+
animation: {type: 9, options: null},
152+
options: {optional: true},
153+
},
154+
],
155+
options: null,
156+
},
157+
options: {params: {animationDuration: '225ms'}},
66158
},
67-
),
68-
]),
159+
],
160+
options: {},
161+
},
69162
};

‎tools/public_api_guard/material/stepper.md

+2-3
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
import { AbstractControl } from '@angular/forms';
88
import { AfterContentInit } from '@angular/core';
99
import { AfterViewInit } from '@angular/core';
10-
import { AnimationTriggerMetadata } from '@angular/animations';
1110
import { CdkStep } from '@angular/cdk/stepper';
1211
import { CdkStepHeader } from '@angular/cdk/stepper';
1312
import { CdkStepLabel } from '@angular/cdk/stepper';
@@ -153,8 +152,8 @@ export class MatStepper extends CdkStepper implements AfterViewInit, AfterConten
153152

154153
// @public @deprecated
155154
export const matStepperAnimations: {
156-
readonly horizontalStepTransition: AnimationTriggerMetadata;
157-
readonly verticalStepTransition: AnimationTriggerMetadata;
155+
readonly horizontalStepTransition: any;
156+
readonly verticalStepTransition: any;
158157
};
159158

160159
// @public

0 commit comments

Comments
 (0)
Please sign in to comment.