From 157eb762da6dcc04b5875479a946228e2440c927 Mon Sep 17 00:00:00 2001
From: Alexis Georges <alexis@georges.brussels>
Date: Wed, 13 Dec 2023 23:27:50 +0100
Subject: [PATCH] style(demo): reformat demo code thanks to `prettier`

---
 demo-app/ng12/angular.json                    |  33 +-
 demo-app/ng12/src/app/app.component.spec.ts   |  58 ++--
 demo-app/ng12/src/app/app.module.ts           |  44 +--
 .../src/app/components/card/card.component.ts |   1 -
 .../src/app/components/card/card.theme.scss   |   2 +-
 .../language-selector.theme.scss              |   2 +-
 .../navigation/navigation.component.ts        |   1 -
 .../navigation/navigation.theme.scss          |   2 +-
 .../reactive-forms-example.component.html     | 320 +++++++++---------
 .../src/app/parent-error-state-matcher.ts     |   3 +-
 demo-app/ng12/src/app/password-validator.ts   |   2 +-
 demo-app/ng13/src/app/app.component.spec.ts   |  20 +-
 .../reactive-forms-example.component.html     | 320 +++++++++---------
 13 files changed, 387 insertions(+), 421 deletions(-)

diff --git a/demo-app/ng12/angular.json b/demo-app/ng12/angular.json
index 974f1ca..22ebdd4 100644
--- a/demo-app/ng12/angular.json
+++ b/demo-app/ng12/angular.json
@@ -22,18 +22,10 @@
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "node_modules/normalize.css/normalize.css",
-              "src/styles/styles.scss"
-            ],
+            "assets": ["src/favicon.ico", "src/assets"],
+            "styles": ["node_modules/normalize.css/normalize.css", "src/styles/styles.scss"],
             "stylePreprocessorOptions": {
-              "includePaths": [
-                "src/styles"
-              ]
+              "includePaths": ["src/styles"]
             },
             "scripts": [],
             "vendorChunk": true,
@@ -100,29 +92,18 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
-            "styles": [
-              "node_modules/normalize.css/normalize.css",
-              "src/styles/styles.scss"
-            ],
+            "styles": ["node_modules/normalize.css/normalize.css", "src/styles/styles.scss"],
             "stylePreprocessorOptions": {
-              "includePaths": [
-                "src/styles"
-              ]
+              "includePaths": ["src/styles"]
             },
             "scripts": [],
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ]
+            "assets": ["src/favicon.ico", "src/assets"]
           }
         },
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
-            "lintFilePatterns": [
-              "src/**/*.ts",
-              "src/**/*.html"
-            ]
+            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
           }
         },
         "e2e": {
diff --git a/demo-app/ng12/src/app/app.component.spec.ts b/demo-app/ng12/src/app/app.component.spec.ts
index c2ffbc9..daeee35 100644
--- a/demo-app/ng12/src/app/app.component.spec.ts
+++ b/demo-app/ng12/src/app/app.component.spec.ts
@@ -1,41 +1,37 @@
-import { ComponentFixture, TestBed, waitForAsync} from "@angular/core/testing";
+import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
 import { AppComponent } from "./app.component";
 import { RouterTestingModule } from "@angular/router/testing";
 import { NO_ERRORS_SCHEMA } from "@angular/core";
 
 describe("AppComponent", () => {
-  let fixture: ComponentFixture<AppComponent>;
-  let component: AppComponent;
+	let fixture: ComponentFixture<AppComponent>;
+	let component: AppComponent;
 
-  beforeEach(waitForAsync(() => {
-    return TestBed.configureTestingModule({
-      imports: [
-        RouterTestingModule
-      ],
-      declarations: [
-        AppComponent
-      ],
-      schemas: [ NO_ERRORS_SCHEMA ]
-    }).compileComponents();
-  }));
+	beforeEach(waitForAsync(() => {
+		return TestBed.configureTestingModule({
+			imports: [RouterTestingModule],
+			declarations: [AppComponent],
+			schemas: [NO_ERRORS_SCHEMA]
+		}).compileComponents();
+	}));
 
-  beforeEach(() => {
-    fixture = TestBed.createComponent(AppComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
+	beforeEach(() => {
+		fixture = TestBed.createComponent(AppComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
 
-  it("should create the app", () => {
-    expect(fixture).toBeDefined();
-    expect(component).toBeDefined();
-  });
+	it("should create the app", () => {
+		expect(fixture).toBeDefined();
+		expect(component).toBeDefined();
+	});
 
-  it("should render title in a h1 tag", () => {
-    fixture.detectChanges();
-    const compiled: HTMLElement = fixture.debugElement.nativeElement;
-    const h1Element = compiled.querySelector("h1");
-    expect(h1Element).toBeTruthy();
-    // tslint:disable-next-line:no-non-null-assertion
-    expect(h1Element!.textContent).toContain("Ngx-Form-Errors");
-  });
+	it("should render title in a h1 tag", () => {
+		fixture.detectChanges();
+		const compiled: HTMLElement = fixture.debugElement.nativeElement;
+		const h1Element = compiled.querySelector("h1");
+		expect(h1Element).toBeTruthy();
+		// tslint:disable-next-line:no-non-null-assertion
+		expect(h1Element!.textContent).toContain("Ngx-Form-Errors");
+	});
 });
diff --git a/demo-app/ng12/src/app/app.module.ts b/demo-app/ng12/src/app/app.module.ts
index 563365a..bfae69d 100644
--- a/demo-app/ng12/src/app/app.module.ts
+++ b/demo-app/ng12/src/app/app.module.ts
@@ -39,28 +39,28 @@ import { NgxFormsExampleComponent, ReactiveFormsExampleComponent, TemplateDriven
 		NavigationComponent,
 		CardComponent
 	],
-  imports: [
-    BrowserModule,
-    BrowserAnimationsModule,
-    AppRoutingModule,
-    FormsModule,
-    HttpClientModule,
-    MatButtonModule,
-    MatButtonToggleModule,
-    MatCardModule,
-    MatFormFieldModule,
-    MatGridListModule,
-    MatInputModule,
-    MatToolbarModule,
-    MatListModule,
-    MatSidenavModule,
-    MatIconModule,
-    ReactiveFormsModule,
-    TranslateModule.forRoot(),
-    NgxFormErrorsModule.forRoot({
-      formErrorComponent: TranslatedFormErrorComponent
-    })
-  ],
+	imports: [
+		BrowserModule,
+		BrowserAnimationsModule,
+		AppRoutingModule,
+		FormsModule,
+		HttpClientModule,
+		MatButtonModule,
+		MatButtonToggleModule,
+		MatCardModule,
+		MatFormFieldModule,
+		MatGridListModule,
+		MatInputModule,
+		MatToolbarModule,
+		MatListModule,
+		MatSidenavModule,
+		MatIconModule,
+		ReactiveFormsModule,
+		TranslateModule.forRoot(),
+		NgxFormErrorsModule.forRoot({
+			formErrorComponent: TranslatedFormErrorComponent
+		})
+	],
 	exports: [LanguageSelectorComponent],
 	providers: [],
 	entryComponents: [SimpleFormErrorComponent, TranslatedFormErrorComponent],
diff --git a/demo-app/ng12/src/app/components/card/card.component.ts b/demo-app/ng12/src/app/components/card/card.component.ts
index 228b209..b5091e5 100644
--- a/demo-app/ng12/src/app/components/card/card.component.ts
+++ b/demo-app/ng12/src/app/components/card/card.component.ts
@@ -39,5 +39,4 @@ export class CardComponent {
 				break;
 		}
 	}
-
 }
diff --git a/demo-app/ng12/src/app/components/card/card.theme.scss b/demo-app/ng12/src/app/components/card/card.theme.scss
index ade2e7c..183b662 100644
--- a/demo-app/ng12/src/app/components/card/card.theme.scss
+++ b/demo-app/ng12/src/app/components/card/card.theme.scss
@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use "~@angular/material" as mat;
 @mixin card-theme($theme) {
   $primary: map-get($theme, primary);
   $accent: map-get($theme, accent);
diff --git a/demo-app/ng12/src/app/components/language-selector/language-selector.theme.scss b/demo-app/ng12/src/app/components/language-selector/language-selector.theme.scss
index dec85fe..7ee9205 100644
--- a/demo-app/ng12/src/app/components/language-selector/language-selector.theme.scss
+++ b/demo-app/ng12/src/app/components/language-selector/language-selector.theme.scss
@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use "~@angular/material" as mat;
 @mixin language-selector-theme($theme) {
   $primary: map-get($theme, primary);
 
diff --git a/demo-app/ng12/src/app/components/navigation/navigation.component.ts b/demo-app/ng12/src/app/components/navigation/navigation.component.ts
index 26f65f7..182f203 100644
--- a/demo-app/ng12/src/app/components/navigation/navigation.component.ts
+++ b/demo-app/ng12/src/app/components/navigation/navigation.component.ts
@@ -10,5 +10,4 @@ const componentName = "navigation";
 export class NavigationComponent {
 	@HostBinding("class")
 	public cssClass: string = componentName;
-
 }
diff --git a/demo-app/ng12/src/app/components/navigation/navigation.theme.scss b/demo-app/ng12/src/app/components/navigation/navigation.theme.scss
index 1c0334d..2c37122 100644
--- a/demo-app/ng12/src/app/components/navigation/navigation.theme.scss
+++ b/demo-app/ng12/src/app/components/navigation/navigation.theme.scss
@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use "~@angular/material" as mat;
 @mixin app-navigation-theme($theme) {
   $primary: map-get($theme, primary);
   $accent: map-get($theme, accent);
diff --git a/demo-app/ng12/src/app/pages/reactive-forms-example/reactive-forms-example.component.html b/demo-app/ng12/src/app/pages/reactive-forms-example/reactive-forms-example.component.html
index c3ca6b1..a0fa0f7 100644
--- a/demo-app/ng12/src/app/pages/reactive-forms-example/reactive-forms-example.component.html
+++ b/demo-app/ng12/src/app/pages/reactive-forms-example/reactive-forms-example.component.html
@@ -1,201 +1,199 @@
 <div class="container">
-  <div class="mat-display-1">Reactive Forms (Model Driven Forms)</div>
+	<div class="mat-display-1">Reactive Forms (Model Driven Forms)</div>
 
-  <form [formGroup]="formGroup" (ngSubmit)="onSubmitUserDetails(formGroup)" class="form-group">
-    <div class="grid">
-      <app-card class="form-card">
-        <mat-card-content>
-          <mat-form-field class="username">
-            <input matInput [placeholder]="'DEMO.PLACEHOLDERS.USER_NAME' | translate" formControlName="username" required />
-            <mat-error *ngFor="let validation of validationMessages['username']">
-              <div
-                class="error-message"
-                *ngIf="
+	<form [formGroup]="formGroup" (ngSubmit)="onSubmitUserDetails(formGroup)" class="form-group">
+		<div class="grid">
+			<app-card class="form-card">
+				<mat-card-content>
+					<mat-form-field class="username">
+						<input matInput [placeholder]="'DEMO.PLACEHOLDERS.USER_NAME' | translate" formControlName="username" required />
+						<mat-error *ngFor="let validation of validationMessages['username']">
+							<div
+								class="error-message"
+								*ngIf="
 									formGroup.get('username')!.hasError(validation.type) &&
 									(formGroup.get('username')!.dirty || formGroup.get('username')!.touched)
 								"
-              >
-                {{ validation.message | translate }}
-              </div>
-            </mat-error>
-          </mat-form-field>
+							>
+								{{ validation.message | translate }}
+							</div>
+						</mat-error>
+					</mat-form-field>
 
-          <div formGroupName="matchingPasswords" class="matching-passwords">
-            <mat-form-field class="full-width">
-              <input
-                matInput
-                type="password"
-                [placeholder]="'DEMO.PLACEHOLDERS.PASSWORD' | translate"
-                formControlName="password"
-                required
-              />
-              <mat-error *ngFor="let validation of validationMessages['password']">
-                <div
-                  class="error-message"
-                  *ngIf="
-										formGroup
-											.get('matchingPasswords.password')!.hasError(validation.type) &&
+					<div formGroupName="matchingPasswords" class="matching-passwords">
+						<mat-form-field class="full-width">
+							<input
+								matInput
+								type="password"
+								[placeholder]="'DEMO.PLACEHOLDERS.PASSWORD' | translate"
+								formControlName="password"
+								required
+							/>
+							<mat-error *ngFor="let validation of validationMessages['password']">
+								<div
+									class="error-message"
+									*ngIf="
+										formGroup.get('matchingPasswords.password')!.hasError(validation.type) &&
 										(formGroup.get('matchingPasswords.password')!.dirty ||
 											formGroup.get('matchingPasswords.password')!.touched)
 									"
-                >
-                  {{ validation.message | translate }}
-                </div>
-              </mat-error>
-            </mat-form-field>
+								>
+									{{ validation.message | translate }}
+								</div>
+							</mat-error>
+						</mat-form-field>
 
-            <mat-form-field class="full-width">
-              <input
-                matInput
-                type="password"
-                [placeholder]="'DEMO.PLACEHOLDERS.CONFIRM_PASSWORD' | translate"
-                formControlName="confirmPassword"
-                [errorStateMatcher]="parentErrorStateMatcher"
-                required
-              />
-              <mat-error *ngFor="let validation of validationMessages['confirmPassword']">
-                <div
-                  class="error-message"
-                  *ngIf="
-										(formGroup
-											.get('matchingPasswords.confirmPassword')!.hasError(validation.type) ||
+						<mat-form-field class="full-width">
+							<input
+								matInput
+								type="password"
+								[placeholder]="'DEMO.PLACEHOLDERS.CONFIRM_PASSWORD' | translate"
+								formControlName="confirmPassword"
+								[errorStateMatcher]="parentErrorStateMatcher"
+								required
+							/>
+							<mat-error *ngFor="let validation of validationMessages['confirmPassword']">
+								<div
+									class="error-message"
+									*ngIf="
+										(formGroup.get('matchingPasswords.confirmPassword')!.hasError(validation.type) ||
 											formGroup.get('matchingPasswords')!.hasError(validation.type)) &&
 										(formGroup.get('matchingPasswords.confirmPassword')!.dirty ||
 											formGroup.get('matchingPasswords.confirmPassword')!.touched)
 									"
-                >
-                  {{ validation.message | translate }}
-                </div>
-              </mat-error>
-            </mat-form-field>
-          </div>
-        </mat-card-content>
+								>
+									{{ validation.message | translate }}
+								</div>
+							</mat-error>
+						</mat-form-field>
+					</div>
+				</mat-card-content>
 
-        <mat-card-actions class="form-buttons">
-          <button color="primary" mat-raised-button type="submit" [disabled]="!formGroup.valid">Submit</button>
-          <!--<button color="primary" mat-button type="button" (click)="getFormStatus()">Get Form status</button>-->
-          <button color="primary" mat-button type="button" (click)="toggleValidationDetails()">
-            {{ showValidationDetails ? "Hide validation details" : "Show validation details" }}
-          </button>
-          <button color="primary" mat-button type="button" (click)="toggleValidationSummary()">
-            {{ showValidationSummary ? "Hide validation summary" : "Show validation summary" }}
-          </button>
-        </mat-card-actions>
-      </app-card>
+				<mat-card-actions class="form-buttons">
+					<button color="primary" mat-raised-button type="submit" [disabled]="!formGroup.valid">Submit</button>
+					<!--<button color="primary" mat-button type="button" (click)="getFormStatus()">Get Form status</button>-->
+					<button color="primary" mat-button type="button" (click)="toggleValidationDetails()">
+						{{ showValidationDetails ? "Hide validation details" : "Show validation details" }}
+					</button>
+					<button color="primary" mat-button type="button" (click)="toggleValidationSummary()">
+						{{ showValidationSummary ? "Hide validation summary" : "Show validation summary" }}
+					</button>
+				</mat-card-actions>
+			</app-card>
 
-      <ng-container *ngIf="showValidationDetails">
-        <app-card class="form-field-info" color="accent">
-          <mat-card-title>Username</mat-card-title>
-          <mat-card-content>
-            <div>Has errors: {{ !!formGroup.get("username")!.errors }}</div>
-            <div>Has 'required' error: {{ formGroup.get("username")!.hasError("required") }}</div>
-            <div>
-              'required' error:
-              <pre>{{ formGroup.get("username")!.getError("required") | json }}</pre>
-            </div>
-            <div>Is touched? {{ formGroup.get("username")!.touched }}</div>
-            <div *ngIf="formGroup.get('username')!.errors">
-              Errors:
-              <pre>{{ formGroup.get("username")!.errors | json }}</pre>
-            </div>
-          </mat-card-content>
-        </app-card>
+			<ng-container *ngIf="showValidationDetails">
+				<app-card class="form-field-info" color="accent">
+					<mat-card-title>Username</mat-card-title>
+					<mat-card-content>
+						<div>Has errors: {{ !!formGroup.get("username")!.errors }}</div>
+						<div>Has 'required' error: {{ formGroup.get("username")!.hasError("required") }}</div>
+						<div>
+							'required' error:
+							<pre>{{ formGroup.get("username")!.getError("required") | json }}</pre>
+						</div>
+						<div>Is touched? {{ formGroup.get("username")!.touched }}</div>
+						<div *ngIf="formGroup.get('username')!.errors">
+							Errors:
+							<pre>{{ formGroup.get("username")!.errors | json }}</pre>
+						</div>
+					</mat-card-content>
+				</app-card>
 
-        <app-card class="form-field-info" color="accent">
-          <mat-card-title>Password</mat-card-title>
-          <mat-card-content>
-            <div>Has errors: {{ !!formGroup.get("matchingPasswords.password")!.errors }}</div>
-            <div>Has 'pattern' error: {{ formGroup.get("matchingPasswords.password")!.hasError("pattern") }}</div>
-            <div>Is touched? {{ formGroup.get("matchingPasswords.password")!.touched }}</div>
-            <div>
-              'pattern' error:
-              <pre>{{ formGroup.get("matchingPasswords.password")!.getError("pattern") | json }}</pre>
-            </div>
-            <div *ngIf="formGroup.get('matchingPasswords.password')!.errors">
-              Errors:
-              <pre>{{ formGroup.get("matchingPasswords.password")!.errors | json }}</pre>
-            </div>
-          </mat-card-content>
-        </app-card>
+				<app-card class="form-field-info" color="accent">
+					<mat-card-title>Password</mat-card-title>
+					<mat-card-content>
+						<div>Has errors: {{ !!formGroup.get("matchingPasswords.password")!.errors }}</div>
+						<div>Has 'pattern' error: {{ formGroup.get("matchingPasswords.password")!.hasError("pattern") }}</div>
+						<div>Is touched? {{ formGroup.get("matchingPasswords.password")!.touched }}</div>
+						<div>
+							'pattern' error:
+							<pre>{{ formGroup.get("matchingPasswords.password")!.getError("pattern") | json }}</pre>
+						</div>
+						<div *ngIf="formGroup.get('matchingPasswords.password')!.errors">
+							Errors:
+							<pre>{{ formGroup.get("matchingPasswords.password")!.errors | json }}</pre>
+						</div>
+					</mat-card-content>
+				</app-card>
 
-        <app-card class="form-field-info" color="accent">
-          <mat-card-title>Confirm password</mat-card-title>
-          <mat-card-content>
-            <div>Has errors: {{ !!formGroup.get("matchingPasswords.confirmPassword")!.errors }}</div>
-            <div>Has 'required' error: {{ formGroup.get("matchingPasswords.confirmPassword")!.hasError("required") }}</div>
-            <div>Is touched? {{ formGroup.get("matchingPasswords.confirmPassword")!.touched }}</div>
-            <div>
-              'required' error:
-              <pre>{{ formGroup.get("matchingPasswords.confirmPassword")!.getError("required") | json }}</pre>
-            </div>
-            <div *ngIf="formGroup.get('matchingPasswords.confirmPassword')!.errors">
-              Errors:
-              <pre>{{ formGroup.get("matchingPasswords.confirmPassword")!.errors | json }}</pre>
-            </div>
-          </mat-card-content>
-        </app-card>
-      </ng-container>
+				<app-card class="form-field-info" color="accent">
+					<mat-card-title>Confirm password</mat-card-title>
+					<mat-card-content>
+						<div>Has errors: {{ !!formGroup.get("matchingPasswords.confirmPassword")!.errors }}</div>
+						<div>Has 'required' error: {{ formGroup.get("matchingPasswords.confirmPassword")!.hasError("required") }}</div>
+						<div>Is touched? {{ formGroup.get("matchingPasswords.confirmPassword")!.touched }}</div>
+						<div>
+							'required' error:
+							<pre>{{ formGroup.get("matchingPasswords.confirmPassword")!.getError("required") | json }}</pre>
+						</div>
+						<div *ngIf="formGroup.get('matchingPasswords.confirmPassword')!.errors">
+							Errors:
+							<pre>{{ formGroup.get("matchingPasswords.confirmPassword")!.errors | json }}</pre>
+						</div>
+					</mat-card-content>
+				</app-card>
+			</ng-container>
 
-      <app-card
-        *ngIf="showValidationSummary"
-        class="form-validation-messages"
-        [color]="
+			<app-card
+				*ngIf="showValidationSummary"
+				class="form-validation-messages"
+				[color]="
 					!formGroup.get('username')!.errors &&
 					!formGroup.get('matchingPasswords.password')!.errors &&
 					!formGroup.get('matchingPasswords.confirmPassword')!.errors
 						? 'success'
 						: 'warning'
 				"
-      >
-        <p
-          *ngIf="
+			>
+				<p
+					*ngIf="
 						!formGroup.get('username')!.errors &&
 						!formGroup.get('matchingPasswords.password')!.errors &&
 						!formGroup.get('matchingPasswords.confirmPassword')!.errors
 					"
-        >
-          No validation errors
-        </p>
-        <ul
-          *ngIf="
+				>
+					No validation errors
+				</p>
+				<ul
+					*ngIf="
 						formGroup.get('username')!.errors ||
 						formGroup.get('matchingPasswords.password')!.errors ||
 						formGroup.get('matchingPasswords.confirmPassword')!.errors
 					"
-        >
-          <ng-container *ngIf="formGroup.get('username')!.errors">
-            <ng-container *ngFor="let validation of validationMessages['username']">
-              <li *ngIf="formGroup.get('username')!.errors && formGroup.get('username')!.errors![validation.type]">
-                {{ validation.message | translate }}
-              </li>
-            </ng-container>
-          </ng-container>
-          <ng-container *ngIf="formGroup.get('matchingPasswords.password')!.errors">
-            <ng-container *ngFor="let validation of validationMessages['password']">
-              <li
-                *ngIf="
+				>
+					<ng-container *ngIf="formGroup.get('username')!.errors">
+						<ng-container *ngFor="let validation of validationMessages['username']">
+							<li *ngIf="formGroup.get('username')!.errors && formGroup.get('username')!.errors![validation.type]">
+								{{ validation.message | translate }}
+							</li>
+						</ng-container>
+					</ng-container>
+					<ng-container *ngIf="formGroup.get('matchingPasswords.password')!.errors">
+						<ng-container *ngFor="let validation of validationMessages['password']">
+							<li
+								*ngIf="
 									formGroup.get('matchingPasswords.password')!.errors &&
 									formGroup.get('matchingPasswords.password')!.errors![validation.type]
 								"
-              >
-                {{ validation.message | translate }}
-              </li>
-            </ng-container>
-          </ng-container>
-          <ng-container *ngIf="formGroup.get('matchingPasswords.confirmPassword')!.errors">
-            <ng-container *ngFor="let validation of validationMessages['confirmPassword']">
-              <li
-                *ngIf="
+							>
+								{{ validation.message | translate }}
+							</li>
+						</ng-container>
+					</ng-container>
+					<ng-container *ngIf="formGroup.get('matchingPasswords.confirmPassword')!.errors">
+						<ng-container *ngFor="let validation of validationMessages['confirmPassword']">
+							<li
+								*ngIf="
 									formGroup.get('matchingPasswords.confirmPassword')!.errors &&
 									formGroup.get('matchingPasswords.confirmPassword')!.errors![validation.type]
 								"
-              >
-                {{ validation.message | translate }}
-              </li>
-            </ng-container>
-          </ng-container>
-        </ul>
-      </app-card>
-    </div>
-  </form>
+							>
+								{{ validation.message | translate }}
+							</li>
+						</ng-container>
+					</ng-container>
+				</ul>
+			</app-card>
+		</div>
+	</form>
 </div>
diff --git a/demo-app/ng12/src/app/parent-error-state-matcher.ts b/demo-app/ng12/src/app/parent-error-state-matcher.ts
index de1ba9f..784cf91 100644
--- a/demo-app/ng12/src/app/parent-error-state-matcher.ts
+++ b/demo-app/ng12/src/app/parent-error-state-matcher.ts
@@ -1,6 +1,5 @@
-
 import { FormControl, FormGroupDirective, NgForm } from "@angular/forms";
-import {ErrorStateMatcher} from "@angular/material/core";
+import { ErrorStateMatcher } from "@angular/material/core";
 
 /** Error when invalid control is dirty, touched, or submitted. */
 export class ParentErrorStateMatcher implements ErrorStateMatcher {
diff --git a/demo-app/ng12/src/app/password-validator.ts b/demo-app/ng12/src/app/password-validator.ts
index a02d36c..f48155d 100644
--- a/demo-app/ng12/src/app/password-validator.ts
+++ b/demo-app/ng12/src/app/password-validator.ts
@@ -6,7 +6,7 @@ export class PasswordValidator {
 		let value: string | undefined;
 		let valid = true;
 		for (const key in formGroup.controls) {
-      /* eslint-disable-next-line no-prototype-builtins */
+			/* eslint-disable-next-line no-prototype-builtins */
 			if (formGroup.controls.hasOwnProperty(key)) {
 				const control: FormControl = <FormControl>formGroup.controls[key];
 
diff --git a/demo-app/ng13/src/app/app.component.spec.ts b/demo-app/ng13/src/app/app.component.spec.ts
index 03e6c3c..167312c 100644
--- a/demo-app/ng13/src/app/app.component.spec.ts
+++ b/demo-app/ng13/src/app/app.component.spec.ts
@@ -1,4 +1,4 @@
-import { ComponentFixture, TestBed, waitForAsync} from "@angular/core/testing";
+import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
 import { AppComponent } from "./app.component";
 import { NO_ERRORS_SCHEMA } from "@angular/core";
 import { RouterTestingModule } from "@angular/router/testing";
@@ -6,17 +6,13 @@ import { RouterTestingModule } from "@angular/router/testing";
 describe("AppComponent", () => {
 	let fixture: ComponentFixture<AppComponent>;
 
-  beforeEach(waitForAsync(() => {
-    return TestBed.configureTestingModule({
-      imports: [
-        RouterTestingModule
-      ],
-      declarations: [
-        AppComponent
-      ],
-      schemas: [ NO_ERRORS_SCHEMA ]
-    }).compileComponents();
-  }));
+	beforeEach(waitForAsync(() => {
+		return TestBed.configureTestingModule({
+			imports: [RouterTestingModule],
+			declarations: [AppComponent],
+			schemas: [NO_ERRORS_SCHEMA]
+		}).compileComponents();
+	}));
 
 	beforeEach(() => {
 		fixture = TestBed.createComponent(AppComponent);
diff --git a/demo-app/ng13/src/app/pages/reactive-forms-example/reactive-forms-example.component.html b/demo-app/ng13/src/app/pages/reactive-forms-example/reactive-forms-example.component.html
index c3ca6b1..a0fa0f7 100644
--- a/demo-app/ng13/src/app/pages/reactive-forms-example/reactive-forms-example.component.html
+++ b/demo-app/ng13/src/app/pages/reactive-forms-example/reactive-forms-example.component.html
@@ -1,201 +1,199 @@
 <div class="container">
-  <div class="mat-display-1">Reactive Forms (Model Driven Forms)</div>
+	<div class="mat-display-1">Reactive Forms (Model Driven Forms)</div>
 
-  <form [formGroup]="formGroup" (ngSubmit)="onSubmitUserDetails(formGroup)" class="form-group">
-    <div class="grid">
-      <app-card class="form-card">
-        <mat-card-content>
-          <mat-form-field class="username">
-            <input matInput [placeholder]="'DEMO.PLACEHOLDERS.USER_NAME' | translate" formControlName="username" required />
-            <mat-error *ngFor="let validation of validationMessages['username']">
-              <div
-                class="error-message"
-                *ngIf="
+	<form [formGroup]="formGroup" (ngSubmit)="onSubmitUserDetails(formGroup)" class="form-group">
+		<div class="grid">
+			<app-card class="form-card">
+				<mat-card-content>
+					<mat-form-field class="username">
+						<input matInput [placeholder]="'DEMO.PLACEHOLDERS.USER_NAME' | translate" formControlName="username" required />
+						<mat-error *ngFor="let validation of validationMessages['username']">
+							<div
+								class="error-message"
+								*ngIf="
 									formGroup.get('username')!.hasError(validation.type) &&
 									(formGroup.get('username')!.dirty || formGroup.get('username')!.touched)
 								"
-              >
-                {{ validation.message | translate }}
-              </div>
-            </mat-error>
-          </mat-form-field>
+							>
+								{{ validation.message | translate }}
+							</div>
+						</mat-error>
+					</mat-form-field>
 
-          <div formGroupName="matchingPasswords" class="matching-passwords">
-            <mat-form-field class="full-width">
-              <input
-                matInput
-                type="password"
-                [placeholder]="'DEMO.PLACEHOLDERS.PASSWORD' | translate"
-                formControlName="password"
-                required
-              />
-              <mat-error *ngFor="let validation of validationMessages['password']">
-                <div
-                  class="error-message"
-                  *ngIf="
-										formGroup
-											.get('matchingPasswords.password')!.hasError(validation.type) &&
+					<div formGroupName="matchingPasswords" class="matching-passwords">
+						<mat-form-field class="full-width">
+							<input
+								matInput
+								type="password"
+								[placeholder]="'DEMO.PLACEHOLDERS.PASSWORD' | translate"
+								formControlName="password"
+								required
+							/>
+							<mat-error *ngFor="let validation of validationMessages['password']">
+								<div
+									class="error-message"
+									*ngIf="
+										formGroup.get('matchingPasswords.password')!.hasError(validation.type) &&
 										(formGroup.get('matchingPasswords.password')!.dirty ||
 											formGroup.get('matchingPasswords.password')!.touched)
 									"
-                >
-                  {{ validation.message | translate }}
-                </div>
-              </mat-error>
-            </mat-form-field>
+								>
+									{{ validation.message | translate }}
+								</div>
+							</mat-error>
+						</mat-form-field>
 
-            <mat-form-field class="full-width">
-              <input
-                matInput
-                type="password"
-                [placeholder]="'DEMO.PLACEHOLDERS.CONFIRM_PASSWORD' | translate"
-                formControlName="confirmPassword"
-                [errorStateMatcher]="parentErrorStateMatcher"
-                required
-              />
-              <mat-error *ngFor="let validation of validationMessages['confirmPassword']">
-                <div
-                  class="error-message"
-                  *ngIf="
-										(formGroup
-											.get('matchingPasswords.confirmPassword')!.hasError(validation.type) ||
+						<mat-form-field class="full-width">
+							<input
+								matInput
+								type="password"
+								[placeholder]="'DEMO.PLACEHOLDERS.CONFIRM_PASSWORD' | translate"
+								formControlName="confirmPassword"
+								[errorStateMatcher]="parentErrorStateMatcher"
+								required
+							/>
+							<mat-error *ngFor="let validation of validationMessages['confirmPassword']">
+								<div
+									class="error-message"
+									*ngIf="
+										(formGroup.get('matchingPasswords.confirmPassword')!.hasError(validation.type) ||
 											formGroup.get('matchingPasswords')!.hasError(validation.type)) &&
 										(formGroup.get('matchingPasswords.confirmPassword')!.dirty ||
 											formGroup.get('matchingPasswords.confirmPassword')!.touched)
 									"
-                >
-                  {{ validation.message | translate }}
-                </div>
-              </mat-error>
-            </mat-form-field>
-          </div>
-        </mat-card-content>
+								>
+									{{ validation.message | translate }}
+								</div>
+							</mat-error>
+						</mat-form-field>
+					</div>
+				</mat-card-content>
 
-        <mat-card-actions class="form-buttons">
-          <button color="primary" mat-raised-button type="submit" [disabled]="!formGroup.valid">Submit</button>
-          <!--<button color="primary" mat-button type="button" (click)="getFormStatus()">Get Form status</button>-->
-          <button color="primary" mat-button type="button" (click)="toggleValidationDetails()">
-            {{ showValidationDetails ? "Hide validation details" : "Show validation details" }}
-          </button>
-          <button color="primary" mat-button type="button" (click)="toggleValidationSummary()">
-            {{ showValidationSummary ? "Hide validation summary" : "Show validation summary" }}
-          </button>
-        </mat-card-actions>
-      </app-card>
+				<mat-card-actions class="form-buttons">
+					<button color="primary" mat-raised-button type="submit" [disabled]="!formGroup.valid">Submit</button>
+					<!--<button color="primary" mat-button type="button" (click)="getFormStatus()">Get Form status</button>-->
+					<button color="primary" mat-button type="button" (click)="toggleValidationDetails()">
+						{{ showValidationDetails ? "Hide validation details" : "Show validation details" }}
+					</button>
+					<button color="primary" mat-button type="button" (click)="toggleValidationSummary()">
+						{{ showValidationSummary ? "Hide validation summary" : "Show validation summary" }}
+					</button>
+				</mat-card-actions>
+			</app-card>
 
-      <ng-container *ngIf="showValidationDetails">
-        <app-card class="form-field-info" color="accent">
-          <mat-card-title>Username</mat-card-title>
-          <mat-card-content>
-            <div>Has errors: {{ !!formGroup.get("username")!.errors }}</div>
-            <div>Has 'required' error: {{ formGroup.get("username")!.hasError("required") }}</div>
-            <div>
-              'required' error:
-              <pre>{{ formGroup.get("username")!.getError("required") | json }}</pre>
-            </div>
-            <div>Is touched? {{ formGroup.get("username")!.touched }}</div>
-            <div *ngIf="formGroup.get('username')!.errors">
-              Errors:
-              <pre>{{ formGroup.get("username")!.errors | json }}</pre>
-            </div>
-          </mat-card-content>
-        </app-card>
+			<ng-container *ngIf="showValidationDetails">
+				<app-card class="form-field-info" color="accent">
+					<mat-card-title>Username</mat-card-title>
+					<mat-card-content>
+						<div>Has errors: {{ !!formGroup.get("username")!.errors }}</div>
+						<div>Has 'required' error: {{ formGroup.get("username")!.hasError("required") }}</div>
+						<div>
+							'required' error:
+							<pre>{{ formGroup.get("username")!.getError("required") | json }}</pre>
+						</div>
+						<div>Is touched? {{ formGroup.get("username")!.touched }}</div>
+						<div *ngIf="formGroup.get('username')!.errors">
+							Errors:
+							<pre>{{ formGroup.get("username")!.errors | json }}</pre>
+						</div>
+					</mat-card-content>
+				</app-card>
 
-        <app-card class="form-field-info" color="accent">
-          <mat-card-title>Password</mat-card-title>
-          <mat-card-content>
-            <div>Has errors: {{ !!formGroup.get("matchingPasswords.password")!.errors }}</div>
-            <div>Has 'pattern' error: {{ formGroup.get("matchingPasswords.password")!.hasError("pattern") }}</div>
-            <div>Is touched? {{ formGroup.get("matchingPasswords.password")!.touched }}</div>
-            <div>
-              'pattern' error:
-              <pre>{{ formGroup.get("matchingPasswords.password")!.getError("pattern") | json }}</pre>
-            </div>
-            <div *ngIf="formGroup.get('matchingPasswords.password')!.errors">
-              Errors:
-              <pre>{{ formGroup.get("matchingPasswords.password")!.errors | json }}</pre>
-            </div>
-          </mat-card-content>
-        </app-card>
+				<app-card class="form-field-info" color="accent">
+					<mat-card-title>Password</mat-card-title>
+					<mat-card-content>
+						<div>Has errors: {{ !!formGroup.get("matchingPasswords.password")!.errors }}</div>
+						<div>Has 'pattern' error: {{ formGroup.get("matchingPasswords.password")!.hasError("pattern") }}</div>
+						<div>Is touched? {{ formGroup.get("matchingPasswords.password")!.touched }}</div>
+						<div>
+							'pattern' error:
+							<pre>{{ formGroup.get("matchingPasswords.password")!.getError("pattern") | json }}</pre>
+						</div>
+						<div *ngIf="formGroup.get('matchingPasswords.password')!.errors">
+							Errors:
+							<pre>{{ formGroup.get("matchingPasswords.password")!.errors | json }}</pre>
+						</div>
+					</mat-card-content>
+				</app-card>
 
-        <app-card class="form-field-info" color="accent">
-          <mat-card-title>Confirm password</mat-card-title>
-          <mat-card-content>
-            <div>Has errors: {{ !!formGroup.get("matchingPasswords.confirmPassword")!.errors }}</div>
-            <div>Has 'required' error: {{ formGroup.get("matchingPasswords.confirmPassword")!.hasError("required") }}</div>
-            <div>Is touched? {{ formGroup.get("matchingPasswords.confirmPassword")!.touched }}</div>
-            <div>
-              'required' error:
-              <pre>{{ formGroup.get("matchingPasswords.confirmPassword")!.getError("required") | json }}</pre>
-            </div>
-            <div *ngIf="formGroup.get('matchingPasswords.confirmPassword')!.errors">
-              Errors:
-              <pre>{{ formGroup.get("matchingPasswords.confirmPassword")!.errors | json }}</pre>
-            </div>
-          </mat-card-content>
-        </app-card>
-      </ng-container>
+				<app-card class="form-field-info" color="accent">
+					<mat-card-title>Confirm password</mat-card-title>
+					<mat-card-content>
+						<div>Has errors: {{ !!formGroup.get("matchingPasswords.confirmPassword")!.errors }}</div>
+						<div>Has 'required' error: {{ formGroup.get("matchingPasswords.confirmPassword")!.hasError("required") }}</div>
+						<div>Is touched? {{ formGroup.get("matchingPasswords.confirmPassword")!.touched }}</div>
+						<div>
+							'required' error:
+							<pre>{{ formGroup.get("matchingPasswords.confirmPassword")!.getError("required") | json }}</pre>
+						</div>
+						<div *ngIf="formGroup.get('matchingPasswords.confirmPassword')!.errors">
+							Errors:
+							<pre>{{ formGroup.get("matchingPasswords.confirmPassword")!.errors | json }}</pre>
+						</div>
+					</mat-card-content>
+				</app-card>
+			</ng-container>
 
-      <app-card
-        *ngIf="showValidationSummary"
-        class="form-validation-messages"
-        [color]="
+			<app-card
+				*ngIf="showValidationSummary"
+				class="form-validation-messages"
+				[color]="
 					!formGroup.get('username')!.errors &&
 					!formGroup.get('matchingPasswords.password')!.errors &&
 					!formGroup.get('matchingPasswords.confirmPassword')!.errors
 						? 'success'
 						: 'warning'
 				"
-      >
-        <p
-          *ngIf="
+			>
+				<p
+					*ngIf="
 						!formGroup.get('username')!.errors &&
 						!formGroup.get('matchingPasswords.password')!.errors &&
 						!formGroup.get('matchingPasswords.confirmPassword')!.errors
 					"
-        >
-          No validation errors
-        </p>
-        <ul
-          *ngIf="
+				>
+					No validation errors
+				</p>
+				<ul
+					*ngIf="
 						formGroup.get('username')!.errors ||
 						formGroup.get('matchingPasswords.password')!.errors ||
 						formGroup.get('matchingPasswords.confirmPassword')!.errors
 					"
-        >
-          <ng-container *ngIf="formGroup.get('username')!.errors">
-            <ng-container *ngFor="let validation of validationMessages['username']">
-              <li *ngIf="formGroup.get('username')!.errors && formGroup.get('username')!.errors![validation.type]">
-                {{ validation.message | translate }}
-              </li>
-            </ng-container>
-          </ng-container>
-          <ng-container *ngIf="formGroup.get('matchingPasswords.password')!.errors">
-            <ng-container *ngFor="let validation of validationMessages['password']">
-              <li
-                *ngIf="
+				>
+					<ng-container *ngIf="formGroup.get('username')!.errors">
+						<ng-container *ngFor="let validation of validationMessages['username']">
+							<li *ngIf="formGroup.get('username')!.errors && formGroup.get('username')!.errors![validation.type]">
+								{{ validation.message | translate }}
+							</li>
+						</ng-container>
+					</ng-container>
+					<ng-container *ngIf="formGroup.get('matchingPasswords.password')!.errors">
+						<ng-container *ngFor="let validation of validationMessages['password']">
+							<li
+								*ngIf="
 									formGroup.get('matchingPasswords.password')!.errors &&
 									formGroup.get('matchingPasswords.password')!.errors![validation.type]
 								"
-              >
-                {{ validation.message | translate }}
-              </li>
-            </ng-container>
-          </ng-container>
-          <ng-container *ngIf="formGroup.get('matchingPasswords.confirmPassword')!.errors">
-            <ng-container *ngFor="let validation of validationMessages['confirmPassword']">
-              <li
-                *ngIf="
+							>
+								{{ validation.message | translate }}
+							</li>
+						</ng-container>
+					</ng-container>
+					<ng-container *ngIf="formGroup.get('matchingPasswords.confirmPassword')!.errors">
+						<ng-container *ngFor="let validation of validationMessages['confirmPassword']">
+							<li
+								*ngIf="
 									formGroup.get('matchingPasswords.confirmPassword')!.errors &&
 									formGroup.get('matchingPasswords.confirmPassword')!.errors![validation.type]
 								"
-              >
-                {{ validation.message | translate }}
-              </li>
-            </ng-container>
-          </ng-container>
-        </ul>
-      </app-card>
-    </div>
-  </form>
+							>
+								{{ validation.message | translate }}
+							</li>
+						</ng-container>
+					</ng-container>
+				</ul>
+			</app-card>
+		</div>
+	</form>
 </div>