Skip to content

Commit d62c805

Browse files
kdinevkdinev
authored
Merge pull request #13494 from IgniteUI/animations-refactor
refactor(animations): igniteui-angular/animations
2 parents 71efb44 + d28f4f5 commit d62c805

File tree

73 files changed

+2215
-1768
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

73 files changed

+2215
-1768
lines changed

‎.eslintrc.json

+3-2
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,10 @@
1414
],
1515
"createDefaultProgram": true
1616
},
17+
"plugins": [
18+
"@typescript-eslint"
19+
],
1720
"extends": [
18-
"eslint:recommended",
19-
"plugin:@typescript-eslint/recommended",
2021
"plugin:@angular-eslint/recommended",
2122
"plugin:@angular-eslint/template/process-inline-templates"
2223
],

‎projects/bundle-test/src/app/app.component.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<!-- Toolbar -->
22
<div role="banner">
3-
<router-outlet></router-outlet>
3+
<igx-chip [resourceStrings]="chipStrings">Chip</igx-chip>
4+
<!-- <router-outlet></router-outlet> -->
45
</div>
56

‎projects/bundle-test/src/app/app.component.ts

+2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import { Component } from '@angular/core';
2+
import { ChipResourceStringsBG } from 'igniteui-angular-i18n';
23

34
@Component({
45
selector: 'app-root',
56
templateUrl: './app.component.html',
67
styleUrls: ['./app.component.scss']
78
})
89
export class AppComponent {
10+
protected chipStrings = ChipResourceStringsBG;
911
}

‎projects/bundle-test/src/app/app.module.ts

+4-2
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,17 @@ import { NgModule } from '@angular/core';
22
import { BrowserModule } from '@angular/platform-browser';
33

44
import { AppComponent } from './app.component';
5-
import { AppRoutingModule } from './app-routing.module';
5+
// import { AppRoutingModule } from './app-routing.module';
6+
import { IgxChipsModule } from 'igniteui-angular';
67

78
@NgModule({
89
declarations: [
910
AppComponent
1011
],
1112
imports: [
1213
BrowserModule,
13-
AppRoutingModule
14+
// AppRoutingModule,
15+
IgxChipsModule
1416
],
1517
providers: [],
1618
bootstrap: [AppComponent]

‎projects/bundle-test/tsconfig.app.json

+3
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@
88
"igniteui-angular": [
99
"dist/igniteui-angular"
1010
],
11+
"igniteui-angular/*": [
12+
"dist/igniteui-angular/*"
13+
],
1114
"igniteui-angular-i18n": [
1215
"dist/igniteui-angular-i18n"
1316
]

‎projects/igniteui-angular/.eslintrc.json

+3
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,9 @@
6363
"files": [
6464
"*.html"
6565
],
66+
"extends": [
67+
"plugin:@angular-eslint/template/recommended"
68+
],
6669
"rules": {}
6770
}
6871
]

‎projects/igniteui-angular/src/lib/animations/README.md ‎projects/igniteui-angular/animations/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ There are three main timing function groups - **EaseIn**, **EaseOut**, and **Eas
6464

6565
To use a specific timing function, import it first:
6666
``` typescript
67-
import { EaseOut } from "igniteui-angular/animations/easings";
67+
import { EaseOut } from "igniteui-angular/animations";
6868
```
6969
and then use it as value for the easing param in any animation:
7070

‎projects/igniteui-angular/animations/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './src/public-api';

‎projects/igniteui-angular/animations/ng-package.json

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"lib": {
3+
"entryFile": "src/public-api.ts"
4+
}
5+
}

‎projects/igniteui-angular/animations/src/easings.ts

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
export const enum EaseIn {
2+
Quad = `cubic-bezier(0.550, 0.085, 0.680, 0.530)`,
3+
Cubic = `cubic-bezier(0.550, 0.055, 0.675, 0.190)`,
4+
Quart = `cubic-bezier(0.895, 0.030, 0.685, 0.220)`,
5+
Quint = `cubic-bezier(0.755, 0.050, 0.855, 0.060)`,
6+
Sine = `cubic-bezier(0.470, 0.000, 0.745, 0.715)`,
7+
Expo = `cubic-bezier(0.950, 0.050, 0.795, 0.035)`,
8+
Circ = `cubic-bezier(0.600, 0.040, 0.980, 0.335)`,
9+
Back = `cubic-bezier(0.600, -0.280, 0.735, 0.045)`
10+
}
11+
12+
export const enum EaseOut {
13+
Quad = `cubic-bezier(0.250, 0.460, 0.450, 0.940)`,
14+
Cubic = `cubic-bezier(0.215, 0.610, 0.355, 1.000)`,
15+
Quart = `cubic-bezier(0.165, 0.840, 0.440, 1.000)`,
16+
Quint = `cubic-bezier(0.230, 1.000, 0.320, 1.000)`,
17+
Sine = `cubic-bezier(0.390, 0.575, 0.565, 1.000)`,
18+
Expo = `cubic-bezier(0.190, 1.000, 0.220, 1.000)`,
19+
Circ = `cubic-bezier(0.075, 0.820, 0.165, 1.000)`,
20+
Back = `cubic-bezier(0.175, 0.885, 0.320, 1.275)`
21+
}
22+
23+
export const enum EaseInOut {
24+
Quad = `cubic-bezier(0.455, 0.030, 0.515, 0.955)`,
25+
Cubic = `cubic-bezier(0.645, 0.045, 0.355, 1.000)`,
26+
Quart = `cubic-bezier(0.770, 0.000, 0.175, 1.000)`,
27+
Quint = `cubic-bezier(0.860, 0.000, 0.070, 1.000)`,
28+
Sine = `cubic-bezier(0.445, 0.050, 0.550, 0.950)`,
29+
Expo = `cubic-bezier(1.000, 0.000, 0.000, 1.000)`,
30+
Circ = `cubic-bezier(0.785, 0.135, 0.150, 0.860)`,
31+
Back = `cubic-bezier(0.680, -0.550, 0.265, 1.550)`
32+
}

‎projects/igniteui-angular/src/lib/animations/fade/README.md ‎projects/igniteui-angular/animations/src/fade/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ const params: IAnimationParams = {
2121
If parameters are attached, they act as default values. When an animation is invoked via [`useAnimation`](https://angular.io/api/animations/useAnimation) then parameter values are allowed to be passed in directly. If any of the passed in parameter values are missing then the default values will be used.
2222

2323
``` typescript
24-
import { fadeIn } from "igniteui-angular/animations/main";
24+
import { fadeIn } from "igniteui-angular/animations";
2525
import { EaseOut } from "ignieui-angular/animations/easings";
2626

2727
useAnimation(fadeIn, {

‎projects/igniteui-angular/animations/src/fade/index.ts

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { animate, animation, AnimationMetadata, style } from '@angular/animations';
2+
import { EaseOut } from '../easings';
3+
4+
const base: AnimationMetadata[] = [
5+
/*@__PURE__*/style({
6+
opacity: `{{startOpacity}}`
7+
}),
8+
/*@__PURE__*/animate(
9+
`{{duration}} {{delay}} {{easing}}`,
10+
/*@__PURE__*/style({
11+
opacity: `{{endOpacity}}`
12+
})
13+
)
14+
];
15+
16+
export const fadeIn = /*@__PURE__*/animation(base, {
17+
params: {
18+
delay: '0s',
19+
duration: '350ms',
20+
easing: EaseOut.Sine,
21+
endOpacity: 1,
22+
startOpacity: 0
23+
}
24+
});
25+
26+
export const fadeOut = /*@__PURE__*/animation(base, {
27+
params: {
28+
delay: '0s',
29+
duration: '350ms',
30+
easing: EaseOut.Sine,
31+
endOpacity: 0,
32+
startOpacity: 1
33+
}
34+
});

‎projects/igniteui-angular/src/lib/animations/flip/README.md ‎projects/igniteui-angular/animations/src/flip/README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const params: IAnimationParams = {
3232
If parameters are attached, they act as default values. When an animation is invoked via [`useAnimation`](https://angular.io/api/animations/useAnimation) then parameter values are allowed to be passed in directly. If any of the passed in parameter values are missing then the default values will be used.
3333

3434
``` typescript
35-
import { flipTop } from "igniteui-angular/animations/main";
35+
import { flipTop } from "igniteui-angular/animations";
3636

3737
useAnimation(fadeIn);
38-
```
38+
```

‎projects/igniteui-angular/animations/src/flip/index.ts

+150
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
import {
2+
animate,
3+
animation,
4+
AnimationMetadata,
5+
keyframes,
6+
style
7+
} from '@angular/animations';
8+
import { EaseOut } from '../easings';
9+
10+
const baseRecipe: AnimationMetadata[] = [
11+
/*@__PURE__*/style({
12+
backfaceVisibility: 'hidden',
13+
transformStyle: 'preserve-3d'
14+
}),
15+
/*@__PURE__*/animate(
16+
`{{duration}} {{delay}} {{easing}}`,
17+
/*@__PURE__*/keyframes([
18+
/*@__PURE__*/style({
19+
offset: 0,
20+
transform: `translateZ({{startDistance}})
21+
rotate3d({{rotateX}}, {{rotateY}}, {{rotateZ}}, {{startAngle}}deg)`
22+
}),
23+
/*@__PURE__*/style({
24+
offset: 1,
25+
transform: `translateZ({{endDistance}})
26+
rotate3d({{rotateX}}, {{rotateY}}, {{rotateZ}}, {{endAngle}}deg)`
27+
})
28+
])
29+
)
30+
];
31+
32+
export const flipTop = /*@__PURE__*/animation(baseRecipe, {
33+
params: {
34+
delay: '0s',
35+
duration: '600ms',
36+
easing: EaseOut.Quad,
37+
endAngle: 180,
38+
endDistance: '0px',
39+
rotateX: 1,
40+
rotateY: 0,
41+
rotateZ: 0,
42+
startAngle: 0,
43+
startDistance: '0px'
44+
}
45+
});
46+
47+
export const flipBottom = /*@__PURE__*/animation(baseRecipe, {
48+
params: {
49+
delay: '0s',
50+
duration: '600ms',
51+
easing: EaseOut.Quad,
52+
endDistance: '0px',
53+
rotateX: 1,
54+
rotateY: 0,
55+
rotateZ: 0,
56+
startAngle: 0,
57+
startDistance: '0px',
58+
endAngle: -180
59+
}
60+
});
61+
62+
export const flipLeft = /*@__PURE__*/animation(baseRecipe, {
63+
params: {
64+
delay: '0s',
65+
duration: '600ms',
66+
easing: EaseOut.Quad,
67+
endAngle: 180,
68+
endDistance: '0px',
69+
rotateZ: 0,
70+
startAngle: 0,
71+
startDistance: '0px',
72+
rotateX: 0,
73+
rotateY: 1
74+
}
75+
});
76+
77+
export const flipRight = /*@__PURE__*/animation(baseRecipe, {
78+
params: {
79+
delay: '0s',
80+
duration: '600ms',
81+
easing: EaseOut.Quad,
82+
endDistance: '0px',
83+
rotateZ: 0,
84+
startAngle: 0,
85+
startDistance: '0px',
86+
endAngle: -180,
87+
rotateX: 0,
88+
rotateY: 1
89+
}
90+
});
91+
92+
export const flipHorFwd = /*@__PURE__*/animation(baseRecipe, {
93+
params: {
94+
delay: '0s',
95+
duration: '600ms',
96+
easing: EaseOut.Quad,
97+
endAngle: 180,
98+
rotateX: 1,
99+
rotateY: 0,
100+
rotateZ: 0,
101+
startAngle: 0,
102+
startDistance: '0px',
103+
endDistance: '170px'
104+
}
105+
});
106+
107+
export const flipHorBck = /*@__PURE__*/animation(baseRecipe, {
108+
params: {
109+
delay: '0s',
110+
duration: '600ms',
111+
easing: EaseOut.Quad,
112+
endAngle: 180,
113+
rotateX: 1,
114+
rotateY: 0,
115+
rotateZ: 0,
116+
startAngle: 0,
117+
startDistance: '0px',
118+
endDistance: '-170px'
119+
}
120+
});
121+
122+
export const flipVerFwd = /*@__PURE__*/animation(baseRecipe, {
123+
params: {
124+
delay: '0s',
125+
duration: '600ms',
126+
easing: EaseOut.Quad,
127+
endAngle: 180,
128+
rotateZ: 0,
129+
startAngle: 0,
130+
startDistance: '0px',
131+
endDistance: '170px',
132+
rotateX: 0,
133+
rotateY: 1
134+
}
135+
});
136+
137+
export const flipVerBck = /*@__PURE__*/animation(baseRecipe, {
138+
params: {
139+
delay: '0s',
140+
duration: '600ms',
141+
easing: EaseOut.Quad,
142+
endAngle: 180,
143+
rotateZ: 0,
144+
startAngle: 0,
145+
startDistance: '0px',
146+
endDistance: '-170px',
147+
rotateX: 0,
148+
rotateY: 1
149+
}
150+
});

‎projects/igniteui-angular/src/lib/animations/grow/index.ts ‎projects/igniteui-angular/animations/src/grow/index.ts

+11-24
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,26 @@
1-
import { animate, animation, AnimationMetadata, AnimationReferenceMetadata, style } from '@angular/animations';
2-
import { EaseIn, EaseOut } from '../easings';
3-
import { IAnimationParams } from '../interface';
1+
import { animate, animation, AnimationMetadata, style } from '@angular/animations';
2+
import { EaseOut } from '../easings';
43

54
const base: AnimationMetadata[] = [
6-
style({
5+
/*@__PURE__*/style({
76
opacity: `{{ startOpacity }}`,
87
height: `{{ startHeight }}`,
98
paddingBlock: `{{ startPadding }}`
109
}),
11-
animate(
10+
/*@__PURE__*/animate(
1211
`{{duration}} {{delay}} {{easing}}`,
13-
style({
12+
/*@__PURE__*/style({
1413
opacity: `{{ endOpacity }}`,
1514
height: `{{ endHeight }}`,
1615
paddingBlock: `{{ endPadding }}`
1716
})
1817
)
1918
];
2019

21-
const baseParams: IAnimationParams = {
22-
delay: '0s',
23-
duration: '350ms',
24-
easing: EaseIn.Quad,
25-
startOpacity: 0,
26-
endOpacity: 1,
27-
startHeight: '',
28-
endHeight: '',
29-
startPadding: '',
30-
endPadding: '',
31-
};
32-
33-
const growVerIn: AnimationReferenceMetadata = animation(base, {
20+
export const growVerIn = /*@__PURE__*/animation(base, {
3421
params: {
35-
...baseParams,
22+
delay: '0s',
23+
duration: '350ms',
3624
easing: EaseOut.Quad,
3725
startOpacity: 0,
3826
endOpacity: 1,
@@ -43,9 +31,10 @@ const growVerIn: AnimationReferenceMetadata = animation(base, {
4331
}
4432
});
4533

46-
const growVerOut: AnimationReferenceMetadata = animation(base, {
34+
export const growVerOut = /*@__PURE__*/animation(base, {
4735
params: {
48-
...baseParams,
36+
delay: '0s',
37+
duration: '350ms',
4938
easing: EaseOut.Quad,
5039
startOpacity: 1,
5140
endOpacity: 0,
@@ -55,5 +44,3 @@ const growVerOut: AnimationReferenceMetadata = animation(base, {
5544
endPadding: '0px'
5645
}
5746
});
58-
59-
export { growVerIn, growVerOut };

‎projects/igniteui-angular/src/lib/animations/interface.ts ‎projects/igniteui-angular/animations/src/interface.ts

File renamed without changes.

0 commit comments

Comments
 (0)