Skip to content

Commit cff9fda

Browse files
AnthonyNahasAnthonyNahas
committed
feat(package): added animations to the mat-password-strength-info component
1 parent c60eb6a commit cff9fda

File tree

3 files changed

+121
-21
lines changed

3 files changed

+121
-21
lines changed

‎src/module/animations/index.ts‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import {animate, animation, AnimationReferenceMetadata, keyframes, style} from '@angular/animations';
2+
3+
export function flipIn(timing: number, rotateX: number, rotateY: number): AnimationReferenceMetadata {
4+
const params = {timing: timing, delay: 0, rotateX, rotateY};
5+
6+
return animation(
7+
[
8+
style({'backface-visibility': 'visible'}),
9+
animate(
10+
'{{ timing }}s {{ delay }}s ease-in',
11+
keyframes([
12+
style({
13+
opacity: 0,
14+
transform:
15+
'perspective(400px) rotate3d({{ rotateX }}, {{ rotateY }}, 0, 90deg)',
16+
offset: 0,
17+
}),
18+
style({
19+
opacity: 1,
20+
transform:
21+
'perspective(400px) rotate3d({{ rotateX }}, {{ rotateY }}, 0, -20deg)',
22+
offset: 0.4,
23+
}),
24+
style({
25+
transform:
26+
'perspective(400px) rotate3d({{ rotateX }}, {{ rotateY }}, 0, 10deg)',
27+
offset: 0.6,
28+
}),
29+
style({
30+
transform:
31+
'perspective(400px) rotate3d({{ rotateX }}, {{ rotateY }}, 0, -5deg)',
32+
offset: 0.8,
33+
}),
34+
style({
35+
transform: 'perspective(400px) rotate3d(0, 0, 0, 0)',
36+
offset: 1,
37+
}),
38+
])
39+
),
40+
],
41+
{params}
42+
);
43+
}
44+
45+
export const flipInX = flipIn(1, 1, 0);
46+
export const flipInY = flipIn(1, 0, 1);
47+
48+
export const shake = animation(
49+
animate(
50+
'{{ timing }}s {{ delay }}s',
51+
keyframes([
52+
style({ transform: 'translate3d(0, 0, 0)', offset: 0 }),
53+
style({ transform: 'translate3d(-10px, 0, 0)', offset: 0.1 }),
54+
style({ transform: 'translate3d(10px, 0, 0)', offset: 0.2 }),
55+
style({ transform: 'translate3d(-10px, 0, 0)', offset: 0.3 }),
56+
style({ transform: 'translate3d(10px, 0, 0)', offset: 0.4 }),
57+
style({ transform: 'translate3d(-10px, 0, 0)', offset: 0.5 }),
58+
style({ transform: 'translate3d(10px, 0, 0)', offset: 0.6 }),
59+
style({ transform: 'translate3d(-10px, 0, 0)', offset: 0.7 }),
60+
style({ transform: 'translate3d(10px, 0, 0)', offset: 0.8 }),
61+
style({ transform: 'translate3d(-10px, 0, 0)', offset: 0.9 }),
62+
style({ transform: 'translate3d(0, 0, 0)', offset: 1 }),
63+
])
64+
),
65+
{ params: { timing: 1, delay: 0 } }
66+
);

‎src/module/component/mat-password-strength-info/mat-password-strength-info.component.html‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,84 @@
1-
<mat-card>
1+
<mat-card @list>
22
<mat-card-content fxLayout="column" fxLayoutAlign="start">
33

4-
<div class="info-row" *ngIf="passwordComponent.enableLowerCaseLetterRule">
5-
<div *ngIf="passwordComponent.containAtLeastOneLowerCaseLetter; then done else error">
4+
<div class="info-row" @items *ngIf="passwordComponent.enableLowerCaseLetterRule">
5+
<div *ngIf="passwordComponent.containAtLeastOneLowerCaseLetter; then done else error" @flipY>
66
</div>
77
<ng-template #done>
8-
<mat-icon color="primary">done</mat-icon>
8+
<mat-icon @positiveState color="primary">done</mat-icon>
99
</ng-template>
1010
<ng-template #error>
11-
<mat-icon color="warn">error</mat-icon>
11+
<mat-icon @negativeState color="warn">error</mat-icon>
1212
</ng-template>
1313
<div>
1414
<p>contains at least one lower character</p>
1515
</div>
1616
</div>
1717

18-
<div class="info-row" *ngIf="passwordComponent.enableUpperCaseLetterRule">
18+
<div class="info-row" @items *ngIf="passwordComponent.enableUpperCaseLetterRule">
1919
<div *ngIf="passwordComponent.containAtLeastOneUpperCaseLetter; then done else error">
2020
</div>
2121
<ng-template #done>
22-
<mat-icon color="primary">done</mat-icon>
22+
<mat-icon @positiveState color="primary">done</mat-icon>
2323
</ng-template>
2424
<ng-template #error>
25-
<mat-icon color="warn">error</mat-icon>
25+
<mat-icon @negativeState color="warn">error</mat-icon>
2626
</ng-template>
2727
<div>
2828
<p>contains at least one upper character</p>
2929
</div>
3030
</div>
3131

32-
<div class="info-row" *ngIf="passwordComponent.enableDigitRule">
32+
<div class="info-row" @items *ngIf="passwordComponent.enableDigitRule">
3333
<div *ngIf="passwordComponent.containAtLeastOneDigit; then done else error">
3434
</div>
3535
<ng-template #done>
36-
<mat-icon color="primary">done</mat-icon>
36+
<mat-icon @positiveState color="primary">done</mat-icon>
3737
</ng-template>
3838
<ng-template #error>
39-
<mat-icon color="warn">error</mat-icon>
39+
<mat-icon @negativeState color="warn">error</mat-icon>
4040
</ng-template>
4141
<div>
4242
<p>contains at least one digit character</p>
4343
</div>
4444
</div>
4545

46-
<div class="info-row" *ngIf="passwordComponent.enableSpecialCharRule">
46+
<div class="info-row" @items *ngIf="passwordComponent.enableSpecialCharRule">
4747
<div *ngIf="passwordComponent.containAtLeastOneSpecialChar; then done else error">
4848
</div>
4949
<ng-template #done>
50-
<mat-icon color="primary">done</mat-icon>
50+
<mat-icon @positiveState color="primary">done</mat-icon>
5151
</ng-template>
5252
<ng-template #error>
53-
<mat-icon color="warn">error</mat-icon>
53+
<mat-icon @negativeState color="warn">error</mat-icon>
5454
</ng-template>
5555
<div>
5656
<p>contains at least one special character</p>
5757
</div>
5858
</div>
5959

60-
<div class="info-row" *ngIf="passwordComponent.enableLengthRule">
60+
<div class="info-row" @items *ngIf="passwordComponent.enableLengthRule">
6161
<div *ngIf="passwordComponent.containAtLeastEightChars; then done else error">
6262
</div>
6363
<ng-template #done>
64-
<mat-icon color="primary">done</mat-icon>
64+
<mat-icon @positiveState color="primary">done</mat-icon>
6565
</ng-template>
6666
<ng-template #error>
67-
<mat-icon color="warn">error</mat-icon>
67+
<mat-icon @negativeState color="warn">error</mat-icon>
6868
</ng-template>
6969
<div>
7070
<p>contains at least {{passwordComponent.min}} characters</p>
7171
</div>
7272
</div>
7373

74-
<div *ngIf="enableScoreInfo" class="info-row">
74+
<div *ngIf="enableScoreInfo" class="info-row" @items>
7575
<div *ngIf="passwordComponent.strength === 100; then done else error">
7676
</div>
7777
<ng-template #done>
78-
<mat-icon color="primary">done</mat-icon>
78+
<mat-icon @positiveState color="primary">done</mat-icon>
7979
</ng-template>
8080
<ng-template #error>
81-
<mat-icon color="warn">error</mat-icon>
81+
<mat-icon @negativeState color="warn">error</mat-icon>
8282
</ng-template>
8383
<div>
8484
<p>Password's strength = {{passwordComponent.strength}} %100</p>

‎src/module/component/mat-password-strength-info/mat-password-strength-info.component.ts‎

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,45 @@
11
import {Component, Input} from '@angular/core';
22
import {MatPasswordStrengthComponent} from '../mat-password-strength/mat-password-strength.component';
3+
import {animate, animateChild, stagger, style, transition, trigger, useAnimation} from '@angular/animations';
4+
import {query} from '@angular/animations';
5+
import {flipInY, shake} from '../../animations';
36

47
@Component({
58
selector: 'mat-password-strength-info',
69
exportAs: 'matPasswordStrengthInfo',
710
templateUrl: './mat-password-strength-info.component.html',
8-
styleUrls: ['./mat-password-strength-info.component.scss']
11+
styleUrls: ['./mat-password-strength-info.component.scss'],
12+
animations: [
13+
// nice stagger effect when showing existing elements
14+
trigger('list', [
15+
transition(':enter', [
16+
// child animation selector + stagger
17+
query('@items',
18+
stagger(300, animateChild())
19+
)
20+
]),
21+
]),
22+
trigger('items', [
23+
// cubic-bezier for a tiny bouncing feel
24+
transition(':enter', [
25+
style({transform: 'scale(0.5)', opacity: 0}),
26+
animate('1s cubic-bezier(.8,-0.6,0.2,1.5)',
27+
style({transform: 'scale(1)', opacity: 1}))
28+
]),
29+
transition(':leave', [
30+
style({transform: 'scale(1)', opacity: 1, height: '*'}),
31+
animate('1s cubic-bezier(.8,-0.6,0.2,1.5)',
32+
style({transform: 'scale(0.5)', opacity: 0, height: '0px', margin: '0px'}))
33+
]),
34+
]),
35+
trigger('positiveState', [
36+
transition(':enter', useAnimation(flipInY)),
37+
// transition(':leave', useAnimation(flipInY)),
38+
]),
39+
trigger('negativeState', [
40+
transition(':enter', useAnimation(shake)),
41+
]),
42+
],
943
})
1044
export class MatPasswordStrengthInfoComponent {
1145

0 commit comments

Comments
 (0)