Skip to content

Commit 912db7d

Browse files
AnthonyNahasAnthonyNahas
committed
fix(demo): updated the first example in the home component
1 parent 6e48f2f commit 912db7d

File tree

5 files changed

+128
-117
lines changed

5 files changed

+128
-117
lines changed

‎demo/src/app/home/home.component.html

Lines changed: 59 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -25,73 +25,72 @@ <h1>@angular-material-extensions/password-strength</h1>
2525
<section class="home">
2626
<div class="container">
2727

28-
<!-- <div fxLayout="column">-->
29-
<!-- <mat-toolbar>-->
30-
<!-- @angular-material-extensions/password-strength-->
31-
<!-- <span fxFlex></span>-->
28+
<div fxLayout="column">
29+
<mat-toolbar>
30+
@angular-material-extensions/password-strength
31+
<span fxFlex></span>
3232

33-
<!-- <button mat-icon-button-->
34-
<!-- color="accent"-->
35-
<!-- matTooltip="view source"-->
36-
<!-- (click)="viewSource2 = !viewSource2">-->
37-
<!-- <mat-icon>code</mat-icon>-->
38-
<!-- </button>-->
39-
<!-- </mat-toolbar>-->
40-
<!-- <mat-card>-->
41-
<!-- <mat-card-subtitle>-->
42-
<!-- stand alone password component-->
43-
<!-- </mat-card-subtitle>-->
33+
<button mat-icon-button
34+
color="accent"
35+
matTooltip="view source"
36+
(click)="viewSource2 = !viewSource2">
37+
<mat-icon>code</mat-icon>
38+
</button>
39+
</mat-toolbar>
40+
<mat-card>
41+
<mat-card-subtitle>
42+
stand alone password component
43+
</mat-card-subtitle>
4444

4545

46-
<!-- <mat-card-content *ngIf="viewSource2">-->
47-
<!-- <mat-tab-group>-->
48-
<!-- &lt;!&ndash;tab 1&ndash;&gt;-->
49-
<!-- <mat-tab>-->
50-
<!-- <ng-template mat-tab-label>HTML</ng-template>-->
51-
<!-- <pre><code highlight [highlight]="html1"></code></pre>-->
52-
<!-- </mat-tab>-->
46+
<mat-card-content *ngIf="viewSource2">
47+
<mat-tab-group>
48+
<!--tab 1-->
49+
<mat-tab>
50+
<ng-template mat-tab-label>HTML</ng-template>
51+
<markdown src="assets/md/home/e1/html.md"></markdown>
52+
</mat-tab>
5353

54-
<!-- <mat-tab>-->
55-
<!-- <ng-template mat-tab-label>TS</ng-template>-->
56-
<!-- <pre><code highlight [highlight]="ts"></code></pre>-->
57-
<!-- </mat-tab>-->
58-
<!-- </mat-tab-group>-->
59-
<!-- </mat-card-content>-->
54+
<mat-tab>
55+
<ng-template mat-tab-label>TS</ng-template>
56+
<markdown src="assets/md/home/e1/ts.md"></markdown>
57+
</mat-tab>
58+
</mat-tab-group>
59+
</mat-card-content>
6060

61-
<!-- <mat-card-subtitle>-->
62-
<!-- <mat-slide-toggle [(ngModel)]="showDetails">Show Password Details</mat-slide-toggle>-->
63-
<!-- </mat-card-subtitle>-->
61+
<mat-card-subtitle>
62+
<mat-slide-toggle [(ngModel)]="showDetails">Show Password Details</mat-slide-toggle>
63+
</mat-card-subtitle>
6464

65-
<!-- <mat-card-content>-->
66-
<!-- &lt;!&ndash;password input filed&ndash;&gt;-->
67-
<!-- <mat-form-field appearance="outline" style="width: 100%" [color]="passwordComponent.color">-->
68-
<!-- <mat-label>Password</mat-label>-->
69-
<!-- <mat-pass-toggle-visibility #toggle matSuffix></mat-pass-toggle-visibility>-->
70-
<!-- <input matInput #password-->
71-
<!-- [type]="toggle.type"-->
72-
<!-- required-->
73-
<!-- placeholder="Password">-->
74-
<!-- <mat-hint align="end" aria-live="polite">-->
75-
<!-- {{password.value.length}} / 25-->
76-
<!-- </mat-hint>-->
77-
<!-- </mat-form-field>-->
65+
<mat-card-content>
66+
<!--password input filed-->
67+
<mat-form-field appearance="outline" style="width: 100%" [color]="passwordComponent.color">
68+
<mat-label>Password</mat-label>
69+
<mat-pass-toggle-visibility #toggle matSuffix></mat-pass-toggle-visibility>
70+
<input matInput #password
71+
[type]="toggle.type"
72+
required
73+
placeholder="Password">
74+
<mat-hint align="end" aria-live="polite">
75+
{{password.value.length}} / {{passwordComponent.max}}
76+
</mat-hint>
77+
</mat-form-field>
7878

79-
<!-- &lt;!&ndash;@angular-material-extensions/password-strength's main component&ndash;&gt;-->
80-
<!-- <mat-password-strength #passwordComponent-->
81-
<!-- [enableDigitRule]="true"-->
82-
<!-- (onStrengthChanged)="onStrengthChanged($event)"-->
83-
<!-- [password]="password.value">-->
84-
<!-- </mat-password-strength>-->
79+
<!--@angular-material-extensions/password-strength's main component-->
80+
<mat-password-strength #passwordComponent
81+
(onStrengthChanged)="onStrengthChanged($event)"
82+
[password]="password.value">
83+
</mat-password-strength>
8584

86-
<!-- &lt;!&ndash;Password's strength info&ndash;&gt;-->
87-
<!-- <mat-password-strength-info-->
88-
<!-- *ngIf="showDetails"-->
89-
<!-- [passwordComponent]="passwordComponent">-->
90-
<!-- </mat-password-strength-info>-->
85+
<!--Password's strength info-->
86+
<mat-password-strength-info
87+
*ngIf="showDetails"
88+
[passwordComponent]="passwordComponent">
89+
</mat-password-strength-info>
9190

92-
<!-- </mat-card-content>-->
93-
<!-- </mat-card>-->
94-
<!-- </div>-->
91+
</mat-card-content>
92+
</mat-card>
93+
</div>
9594
<!--NGX-MATERIAL-PASSWORD-STRENGTH WITH VALIDATION AND FORM CONTROLLER-->
9695

9796
<!-- <div fxLayout="column" class="mt-3">-->
@@ -276,7 +275,8 @@ <h1>@angular-material-extensions/password-strength</h1>
276275
<mat-error *ngIf="passwordComponentWithValidation2.passwordConfirmationFormControl.hasError('required')">
277276
Password confirmation is required
278277
</mat-error>
279-
<mat-error *ngIf="passwordComponentWithValidation2.passwordConfirmationFormControl.hasError('notConfirmed')">
278+
<mat-error
279+
*ngIf="passwordComponentWithValidation2.passwordConfirmationFormControl.hasError('notConfirmed')">
280280
Password is not the same
281281
</mat-error>
282282

‎demo/src/assets/md/home/e1/html.md

Lines changed: 24 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,26 @@
11
```html
2-
<mat-card fxFlex>
3-
<mat-card-title>
4-
@angular-material-extensions/password-strength
5-
</mat-card-title>
6-
<mat-card-subtitle>
7-
stand alone password component
8-
</mat-card-subtitle>
9-
10-
<mat-card-subtitle>
11-
<mat-slide-toggle [(ngModel)]="showDetails">Show Password Details</mat-slide-toggle>
12-
</mat-card-subtitle>
13-
14-
<mat-card-content>
15-
<div fxFlex>
16-
17-
<!--password input filed-->
18-
<mat-form-field appearance="outline" style="width: 100%" [color]="passwordComponent.color">
19-
<mat-label>Password</mat-label>
20-
<mat-pass-toggle-visibility #toggle matSuffix></mat-pass-toggle-visibility>
21-
<input matInput #password
22-
[type]="toggle.type"
23-
required
24-
placeholder="Password">
25-
<mat-hint align="end" aria-live="polite">
26-
{{password.value.length}} / 25
27-
</mat-hint>
28-
</mat-form-field>
29-
30-
<!--@angular-material-extensions/password-strength's main component-->
31-
<mat-password-strength #passwordComponent
32-
(onStrengthChanged)="onStrengthChanged($event)"
33-
[password]="password.value">
34-
</mat-password-strength>
35-
36-
<!--Password's strength info-->
37-
<mat-password-strength-info
38-
*ngIf="showDetails"
39-
[passwordComponent]="passwordComponent">
40-
</mat-password-strength-info>
41-
42-
</div>
43-
</mat-card-content>
44-
</mat-card>
2+
<div fxFlex>
3+
<!--password input filed-->
4+
<mat-form-field appearance="outline" style="width: 100%" [color]="passwordComponent.color">
5+
<mat-label>Password</mat-label>
6+
<mat-pass-toggle-visibility #toggle matSuffix></mat-pass-toggle-visibility>
7+
<input matInput #password
8+
[type]="toggle.type"
9+
required
10+
placeholder="Password">
11+
<mat-hint align="end" aria-live="polite">
12+
{{password.value.length}} / {{passwordComponent.max}}
13+
</mat-hint>
14+
</mat-form-field>
15+
<!--@angular-material-extensions/password-strength's main component-->
16+
<mat-password-strength #passwordComponent
17+
(onStrengthChanged)="onStrengthChanged($event)"
18+
[password]="password.value">
19+
</mat-password-strength>
20+
<!--Password's strength info-->
21+
<mat-password-strength-info
22+
*ngIf="showDetails"
23+
[passwordComponent]="passwordComponent">
24+
</mat-password-strength-info>
25+
</div>
4526
```

‎demo/src/assets/md/home/e1/ts.md

Lines changed: 1 addition & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
```typescript
2-
import {Component, OnInit, ViewEncapsulation} from '@angular/core';
3-
import {Title} from '@angular/platform-browser';
4-
import {MatSlideToggleChange} from '@angular/material';
2+
import {Component, OnInit} from '@angular/core';
53

64
@Component({
75
selector: 'app-home',
@@ -10,19 +8,7 @@ import {MatSlideToggleChange} from '@angular/material';
108
})
119
export class HomeComponent implements OnInit {
1210

13-
password: string;
14-
showDetails: boolean;
15-
showDetails2: boolean;
16-
17-
viewSource: boolean;
18-
viewSource2: boolean;
19-
color = '';
20-
21-
constructor(private titleService: Title) {
22-
}
23-
2411
ngOnInit() {
25-
this.titleService.setTitle('Home | @angular-material-extensions/password-strength');
2612
}
2713

2814
onStrengthChanged(strength: number) {

‎demo/src/assets/md/home/e2/html.md

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
```html
2+
<div fxFlex>
3+
<!--password input filed-->
4+
<mat-form-field appearance="outline" style="width: 100%" [color]="passwordComponent.color">
5+
<mat-label>Password</mat-label>
6+
<mat-pass-toggle-visibility #toggle matSuffix></mat-pass-toggle-visibility>
7+
<input matInput #password
8+
[type]="toggle.type"
9+
required
10+
placeholder="Password">
11+
<mat-hint align="end" aria-live="polite">
12+
{{password.value.length}} / 25
13+
</mat-hint>
14+
</mat-form-field>
15+
<!--@angular-material-extensions/password-strength's main component-->
16+
<mat-password-strength #passwordComponent
17+
(onStrengthChanged)="onStrengthChanged($event)"
18+
[password]="password.value">
19+
</mat-password-strength>
20+
<!--Password's strength info-->
21+
<mat-password-strength-info
22+
*ngIf="showDetails"
23+
[passwordComponent]="passwordComponent">
24+
</mat-password-strength-info>
25+
</div>
26+
```

‎demo/src/assets/md/home/e2/ts.md

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
```typescript
2+
import {Component, OnInit} from '@angular/core';
3+
4+
@Component({
5+
selector: 'app-home',
6+
templateUrl: './home.component.html',
7+
styleUrls: ['./home.component.scss']
8+
})
9+
export class HomeComponent implements OnInit {
10+
11+
ngOnInit() {
12+
}
13+
14+
onStrengthChanged(strength: number) {
15+
console.log('password strength = ', strength);
16+
}
17+
}
18+
```

0 commit comments

Comments
 (0)