Skip to content

Commit e164e23

Browse files
crisbetocrisbeto
committed
fix(material/expansion): remove remaining animation dependencies
Removes the remaning dependencies on `@angular/animations` from the package.
1 parent 71c71be commit e164e23

File tree

3 files changed

+80
-36
lines changed

3 files changed

+80
-36
lines changed

‎src/material/expansion/BUILD.bazel

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@ ng_module(
2828
"//src/cdk/keycodes",
2929
"//src/cdk/portal",
3030
"//src/material/core",
31-
"@npm//@angular/animations",
3231
"@npm//@angular/core",
3332
"@npm//@angular/platform-browser",
3433
"@npm//rxjs",

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

Lines changed: 77 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,12 @@
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-
AnimationTriggerMetadata,
11-
state,
12-
style,
13-
transition,
14-
trigger,
15-
} from '@angular/animations';
168

17-
/** Time and timing curve for expansion panel animations. */
18-
// Note: Keep this in sync with the Sass variable for the panel header animation.
9+
/**
10+
* Time and timing curve for expansion panel animations.
11+
* @deprecated No longer used. Will be removed.
12+
* @breaking-change 21.0.0
13+
*/
1914
export const EXPANSION_PANEL_ANIMATION_TIMING = '225ms cubic-bezier(0.4,0.0,0.2,1)';
2015

2116
/**
@@ -43,28 +38,79 @@ export const EXPANSION_PANEL_ANIMATION_TIMING = '225ms cubic-bezier(0.4,0.0,0.2,
4338
* @breaking-change 21.0.0
4439
*/
4540
export const matExpansionAnimations: {
46-
readonly indicatorRotate: AnimationTriggerMetadata;
47-
readonly bodyExpansion: AnimationTriggerMetadata;
41+
readonly indicatorRotate: any;
42+
readonly bodyExpansion: any;
4843
} = {
44+
// Represents:
45+
// trigger('indicatorRotate', [
46+
// state('collapsed, void', style({transform: 'rotate(0deg)'})),
47+
// state('expanded', style({transform: 'rotate(180deg)'})),
48+
// transition(
49+
// 'expanded <=> collapsed, void => collapsed',
50+
// animate(EXPANSION_PANEL_ANIMATION_TIMING),
51+
// ),
52+
// ])
53+
4954
/** Animation that rotates the indicator arrow. */
50-
indicatorRotate: trigger('indicatorRotate', [
51-
state('collapsed, void', style({transform: 'rotate(0deg)'})),
52-
state('expanded', style({transform: 'rotate(180deg)'})),
53-
transition(
54-
'expanded <=> collapsed, void => collapsed',
55-
animate(EXPANSION_PANEL_ANIMATION_TIMING),
56-
),
57-
]),
55+
indicatorRotate: {
56+
type: 7,
57+
name: 'indicatorRotate',
58+
definitions: [
59+
{
60+
type: 0,
61+
name: 'collapsed, void',
62+
styles: {type: 6, styles: {transform: 'rotate(0deg)'}, offset: null},
63+
},
64+
{
65+
type: 0,
66+
name: 'expanded',
67+
styles: {type: 6, styles: {transform: 'rotate(180deg)'}, offset: null},
68+
},
69+
{
70+
type: 1,
71+
expr: 'expanded <=> collapsed, void => collapsed',
72+
animation: {type: 4, styles: null, timings: '225ms cubic-bezier(0.4,0.0,0.2,1)'},
73+
options: null,
74+
},
75+
],
76+
options: {},
77+
},
78+
79+
// Represents:
80+
// trigger('bodyExpansion', [
81+
// state('collapsed, void', style({height: '0px', visibility: 'hidden'})),
82+
// // Clear the `visibility` while open, otherwise the content will be visible when placed in
83+
// // a parent that's `visibility: hidden`, because `visibility` doesn't apply to descendants
84+
// // that have a `visibility` of their own (see #27436).
85+
// state('expanded', style({height: '*', visibility: ''})),
86+
// transition(
87+
// 'expanded <=> collapsed, void => collapsed',
88+
// animate(EXPANSION_PANEL_ANIMATION_TIMING),
89+
// ),
90+
// ])
91+
5892
/** Animation that expands and collapses the panel content. */
59-
bodyExpansion: trigger('bodyExpansion', [
60-
state('collapsed, void', style({height: '0px', visibility: 'hidden'})),
61-
// Clear the `visibility` while open, otherwise the content will be visible when placed in
62-
// a parent that's `visibility: hidden`, because `visibility` doesn't apply to descendants
63-
// that have a `visibility` of their own (see #27436).
64-
state('expanded', style({height: '*', visibility: ''})),
65-
transition(
66-
'expanded <=> collapsed, void => collapsed',
67-
animate(EXPANSION_PANEL_ANIMATION_TIMING),
68-
),
69-
]),
93+
bodyExpansion: {
94+
type: 7,
95+
name: 'bodyExpansion',
96+
definitions: [
97+
{
98+
type: 0,
99+
name: 'collapsed, void',
100+
styles: {type: 6, styles: {'height': '0px', 'visibility': 'hidden'}, offset: null},
101+
},
102+
{
103+
type: 0,
104+
name: 'expanded',
105+
styles: {type: 6, styles: {'height': '*', 'visibility': ''}, offset: null},
106+
},
107+
{
108+
type: 1,
109+
expr: 'expanded <=> collapsed, void => collapsed',
110+
animation: {type: 4, styles: null, timings: '225ms cubic-bezier(0.4,0.0,0.2,1)'},
111+
options: null,
112+
},
113+
],
114+
options: {},
115+
},
70116
};

‎tools/public_api_guard/material/expansion.md

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66

77
import { AfterContentInit } from '@angular/core';
88
import { AfterViewInit } from '@angular/core';
9-
import { AnimationTriggerMetadata } from '@angular/animations';
109
import { CdkAccordion } from '@angular/cdk/accordion';
1110
import { CdkAccordionItem } from '@angular/cdk/accordion';
1211
import { ElementRef } from '@angular/core';
@@ -26,7 +25,7 @@ import { Subject } from 'rxjs';
2625
import { TemplatePortal } from '@angular/cdk/portal';
2726
import { TemplateRef } from '@angular/core';
2827

29-
// @public
28+
// @public @deprecated
3029
export const EXPANSION_PANEL_ANIMATION_TIMING = "225ms cubic-bezier(0.4,0.0,0.2,1)";
3130

3231
// @public
@@ -76,8 +75,8 @@ export type MatAccordionTogglePosition = 'before' | 'after';
7675

7776
// @public @deprecated
7877
export const matExpansionAnimations: {
79-
readonly indicatorRotate: AnimationTriggerMetadata;
80-
readonly bodyExpansion: AnimationTriggerMetadata;
78+
readonly indicatorRotate: any;
79+
readonly bodyExpansion: any;
8180
};
8281

8382
// @public (undocumented)

0 commit comments

Comments
 (0)