Skip to content

Commit 3a86a5a

Browse files
AnthonyNahasAnthonyNahas
committed
feat(demo): added examples module to explore the library
1 parent 1e38cea commit 3a86a5a

17 files changed

+349
-42
lines changed

‎demo/src/app/app-routing.module.ts‎

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,24 @@
1-
import { NgModule } from '@angular/core';
2-
import { Routes, RouterModule } from '@angular/router';
1+
import {NgModule} from '@angular/core';
2+
import {Routes, RouterModule} from '@angular/router';
33

44
const routes: Routes = [
5-
{
6-
path: '',
7-
redirectTo: 'home',
8-
pathMatch: 'full'
9-
},
10-
{
11-
path: 'getting-started',
12-
loadChildren: 'app/getting-started/getting-started.module#GettingStartedModule'
13-
}
14-
];
5+
{
6+
path: '',
7+
redirectTo: 'home',
8+
pathMatch: 'full'
9+
},
10+
{
11+
path: 'getting-started',
12+
loadChildren: 'app/getting-started/getting-started.module#GettingStartedModule'
13+
},
14+
{
15+
path: 'examples',
16+
loadChildren: 'app/examples/examples.module#ExamplesModule'
17+
}];
1518

1619
@NgModule({
17-
imports: [RouterModule.forRoot(routes)],
18-
exports: [RouterModule]
20+
imports: [RouterModule.forRoot(routes)],
21+
exports: [RouterModule]
1922
})
20-
export class AppRoutingModule { }
23+
export class AppRoutingModule {
24+
}

‎demo/src/app/app.module.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,9 @@ import {HomeModule} from './home/home.module';
99
import {AppComponent} from './app.component';
1010
import {environment} from '../environments/environment';
1111
import {ServiceWorkerModule} from '@angular/service-worker';
12-
import {HttpClientModule} from '@angular/common/http';
12+
import {HttpClient, HttpClientModule} from '@angular/common/http';
1313
import {MatInputModule} from '@angular/material';
14+
import {MarkdownModule} from 'ngx-markdown';
1415

1516
@NgModule({
1617
declarations: [
@@ -22,6 +23,7 @@ import {MatInputModule} from '@angular/material';
2223
// the page.
2324
BrowserModule.withServerTransition({appId: '@angular-material-extensions/password-strength-demo-id'}),
2425
ServiceWorkerModule.register('/ngsw-worker.js', {enabled: environment.production}),
26+
MarkdownModule.forRoot({loader: HttpClient}),
2527
BrowserAnimationsModule,
2628
FormsModule,
2729
HttpClientModule,

‎demo/src/app/examples/examples-routing.module.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import {RouterModule} from '@angular/router';
2+
import {NgModule} from '@angular/core';
3+
import {ExamplesComponent} from './examples.component';
4+
5+
@NgModule({
6+
imports: [RouterModule.forChild([
7+
{path: '', component: ExamplesComponent}
8+
])],
9+
exports: [RouterModule]
10+
})
11+
export class ExamplesRoutingModule {
12+
}

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

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
<div class="jumbotron jumbotron-fluid">
2+
<div class="container">
3+
<h1>Explore the library and try these examples <3</h1>
4+
</div>
5+
</div>
6+
7+
<section class="home">
8+
<div class="container">
9+
10+
<mat-card>
11+
<mat-card-title>#1</mat-card-title>
12+
<mat-card-subtitle>stand alone password component, digit char is optional</mat-card-subtitle>
13+
14+
<mat-slide-toggle #toggle1>Show Password Details</mat-slide-toggle>
15+
16+
<mat-card-content>
17+
<!--password input filed-->
18+
<mat-form-field appearance="outline" style="width: 100%" [color]="passwordComponent1.color">
19+
<mat-label>Password</mat-label>
20+
<input matInput #password
21+
type="password"
22+
placeholder="Password">
23+
<mat-hint align="end" aria-live="polite">
24+
{{password.value.length}} / {{passwordComponent1.max}}
25+
</mat-hint>
26+
</mat-form-field>
27+
28+
<!--@angular-material-extensions/password-strength's main component-->
29+
<mat-password-strength #passwordComponent1
30+
[enableDigitRule]="false"
31+
(onStrengthChanged)="onStrengthChanged($event)"
32+
[password]="password.value">
33+
</mat-password-strength>
34+
<!--Password's strength info-->
35+
<mat-password-strength-info
36+
*ngIf="toggle1.checked"
37+
[passwordComponent]="passwordComponent1">
38+
</mat-password-strength-info>
39+
</mat-card-content>
40+
41+
<mat-card class="mt-2">
42+
<mat-card-title>code</mat-card-title>
43+
<mat-card-content>
44+
<markdown src="assets/md/examples/e1.md"></markdown>
45+
</mat-card-content>
46+
</mat-card>
47+
</mat-card>
48+
49+
50+
<!-- #2 -->
51+
<mat-card class="mt-4">
52+
<mat-card-title>#2</mat-card-title>
53+
<mat-card-subtitle>stand alone password component, special char and lower case are optional</mat-card-subtitle>
54+
55+
<mat-slide-toggle #toggle2>Show Password Details</mat-slide-toggle>
56+
57+
<mat-card-content>
58+
<!--password input filed-->
59+
<mat-form-field appearance="outline" style="width: 100%" [color]="passwordComponent2.color">
60+
<mat-label>Password</mat-label>
61+
<input matInput #password2
62+
type="password"
63+
placeholder="Password">
64+
<mat-hint align="end" aria-live="polite">
65+
{{password2.value.length}} / {{passwordComponent2.max}}
66+
</mat-hint>
67+
</mat-form-field>
68+
69+
<!--@angular-material-extensions/password-strength's main component-->
70+
<mat-password-strength #passwordComponent2
71+
[enableLowerCaseLetterRule]="false"
72+
[enableSpecialCharRule]="false"
73+
(onStrengthChanged)="onStrengthChanged($event)"
74+
[password]="password2.value">
75+
</mat-password-strength>
76+
<!--Password's strength info-->
77+
<mat-password-strength-info
78+
*ngIf="toggle2.checked"
79+
[passwordComponent]="passwordComponent2">
80+
</mat-password-strength-info>
81+
</mat-card-content>
82+
83+
<mat-card class="mt-2">
84+
<mat-card-title>code</mat-card-title>
85+
<mat-card-content>
86+
<markdown src="assets/md/examples/e2.md"></markdown>
87+
</mat-card-content>
88+
</mat-card>
89+
</mat-card>
90+
91+
<!-- #3 -->
92+
<mat-card class="mt-4">
93+
<mat-card-title>#3</mat-card-title>
94+
<mat-card-subtitle>stand alone password component, the length of the password and an upper case char are
95+
optional
96+
</mat-card-subtitle>
97+
98+
<mat-slide-toggle #toggle3>Show Password Details</mat-slide-toggle>
99+
100+
<mat-card-content>
101+
<!--password input filed-->
102+
<mat-form-field appearance="outline" style="width: 100%" [color]="passwordComponent3.color">
103+
<mat-label>Password</mat-label>
104+
<input matInput #password3
105+
type="password"
106+
placeholder="Password">
107+
<mat-hint align="end" aria-live="polite">
108+
{{password3.value.length}} / {{passwordComponent3.max}}
109+
</mat-hint>
110+
</mat-form-field>
111+
112+
<!--@angular-material-extensions/password-strength's main component-->
113+
<mat-password-strength #passwordComponent3
114+
[enableLengthRule]="false"
115+
[enableUpperCaseLetterRule]="false"
116+
(onStrengthChanged)="onStrengthChanged($event)"
117+
[password]="password3.value">
118+
</mat-password-strength>
119+
<!--Password's strength info-->
120+
<mat-password-strength-info
121+
*ngIf="toggle3.checked"
122+
[passwordComponent]="passwordComponent3">
123+
</mat-password-strength-info>
124+
</mat-card-content>
125+
126+
<mat-card class="mt-2">
127+
<mat-card-title>code</mat-card-title>
128+
<mat-card-content>
129+
<markdown src="assets/md/examples/e3.md"></markdown>
130+
</mat-card-content>
131+
</mat-card>
132+
</mat-card>
133+
134+
<!-- #4 -->
135+
<mat-card class="mt-4">
136+
<mat-card-title>#4</mat-card-title>
137+
<mat-card-subtitle>stand alone password component, min length = 6 and the max is = 12
138+
optional
139+
</mat-card-subtitle>
140+
141+
<mat-slide-toggle #toggle4>Show Password Details</mat-slide-toggle>
142+
143+
<mat-card-content>
144+
<!--password input filed-->
145+
<mat-form-field appearance="outline" style="width: 100%" [color]="passwordComponent4.color">
146+
<mat-label>Password</mat-label>
147+
<input matInput #password4
148+
type="password"
149+
placeholder="Password">
150+
<mat-hint align="end" aria-live="polite">
151+
{{password4.value.length}} / {{passwordComponent4.max}}
152+
</mat-hint>
153+
</mat-form-field>
154+
155+
<!--@angular-material-extensions/password-strength's main component-->
156+
<mat-password-strength #passwordComponent4
157+
[min]="6"
158+
[max]="12"
159+
(onStrengthChanged)="onStrengthChanged($event)"
160+
[password]="password4.value">
161+
</mat-password-strength>
162+
<!--Password's strength info-->
163+
<mat-password-strength-info
164+
*ngIf="toggle4.checked"
165+
[passwordComponent]="passwordComponent4">
166+
</mat-password-strength-info>
167+
</mat-card-content>
168+
169+
<mat-card class="mt-2">
170+
<mat-card-title>code</mat-card-title>
171+
<mat-card-content>
172+
<markdown src="assets/md/examples/e4.md"></markdown>
173+
</mat-card-content>
174+
</mat-card>
175+
</mat-card>
176+
177+
</div>
178+
</section>

‎demo/src/app/examples/examples.component.scss‎

Whitespace-only changes.

‎demo/src/app/examples/examples.component.spec.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { ExamplesComponent } from './examples.component';
4+
5+
describe('ExampleComponent', () => {
6+
let component: ExamplesComponent;
7+
let fixture: ComponentFixture<ExamplesComponent>;
8+
9+
beforeEach(async(() => {
10+
TestBed.configureTestingModule({
11+
declarations: [ ExamplesComponent ]
12+
})
13+
.compileComponents();
14+
}));
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(ExamplesComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

‎demo/src/app/examples/examples.component.ts‎

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

‎demo/src/app/examples/examples.module.spec.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { ExamplesModule } from './examples.module';
2+
3+
describe('ExamplesModule', () => {
4+
let exampleModule: ExamplesModule;
5+
6+
beforeEach(() => {
7+
exampleModule = new ExamplesModule();
8+
});
9+
10+
it('should create an instance', () => {
11+
expect(exampleModule).toBeTruthy();
12+
});
13+
});

‎demo/src/app/examples/examples.module.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import {NgModule} from '@angular/core';
2+
import {CommonModule} from '@angular/common';
3+
import {ExamplesComponent} from './examples.component';
4+
import {ExamplesRoutingModule} from './examples-routing.module';
5+
import {AppSharedModule} from '../shared';
6+
import {MarkdownModule} from 'ngx-markdown';
7+
8+
@NgModule({
9+
imports: [
10+
CommonModule,
11+
MarkdownModule.forChild(),
12+
ExamplesRoutingModule,
13+
AppSharedModule
14+
],
15+
declarations: [ExamplesComponent]
16+
})
17+
export class ExamplesModule {
18+
}

‎demo/src/app/home/home-routing.module.ts‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
import { RouterModule } from '@angular/router';
2-
import { NgModule } from '@angular/core';
3-
import { HomeComponent } from './home.component';
1+
import {RouterModule} from '@angular/router';
2+
import {NgModule} from '@angular/core';
3+
import {HomeComponent} from './home.component';
44

55
@NgModule({
6-
imports: [RouterModule.forChild([
7-
{ path: 'home', component: HomeComponent }
8-
])],
9-
exports: [RouterModule]
10-
})
11-
export class HomeRoutingModule {}
6+
imports: [RouterModule.forChild([
7+
{path: 'home', component: HomeComponent}
8+
])],
9+
exports: [RouterModule]
10+
})
11+
export class HomeRoutingModule {
12+
}

0 commit comments

Comments
 (0)