feat(showcase): add the ngx-form-errors to the showcase

showcase/package.json

@@ -120,9 +120,10 @@
     "@angular/platform-server": "^8.2.0",
     "@angular/router": "^8.2.0",
     "@nationalbankbelgium/code-style": "^1.5.0",
-    "@nationalbankbelgium/stark-core": "file:../dist/packages-dist/stark-core/nationalbankbelgium-stark-core-10.2.0-4c6c9a6d.tgz",
-    "@nationalbankbelgium/stark-rbac": "file:../dist/packages-dist/stark-rbac/nationalbankbelgium-stark-rbac-10.2.0-4c6c9a6d.tgz",
-    "@nationalbankbelgium/stark-ui": "file:../dist/packages-dist/stark-ui/nationalbankbelgium-stark-ui-10.2.0-4c6c9a6d.tgz",
+    "@nationalbankbelgium/ngx-form-errors": "^1.0.0",
+    "@nationalbankbelgium/stark-core": "file:../dist/packages-dist/stark-core/nationalbankbelgium-stark-core-10.2.0-092ad9c6.tgz",
+    "@nationalbankbelgium/stark-rbac": "file:../dist/packages-dist/stark-rbac/nationalbankbelgium-stark-rbac-10.2.0-092ad9c6.tgz",
+    "@nationalbankbelgium/stark-ui": "file:../dist/packages-dist/stark-ui/nationalbankbelgium-stark-ui-10.2.0-092ad9c6.tgz",
     "@uirouter/visualizer": "~7.2.1",
     "angular-in-memory-web-api": "~0.9.0",
     "basscss": "~8.1.0",
@@ -138,8 +139,8 @@
   },
   "devDependencies": {
     "@compodoc/compodoc": "~1.1.11",
-    "@nationalbankbelgium/stark-build": "file:../dist/packages-dist/stark-build/nationalbankbelgium-stark-build-10.2.0-4c6c9a6d.tgz",
-    "@nationalbankbelgium/stark-testing": "file:../dist/packages-dist/stark-testing/nationalbankbelgium-stark-testing-10.2.0-4c6c9a6d.tgz",
+    "@nationalbankbelgium/stark-build": "file:../dist/packages-dist/stark-build/nationalbankbelgium-stark-build-10.2.0-092ad9c6.tgz",
+    "@nationalbankbelgium/stark-testing": "file:../dist/packages-dist/stark-testing/nationalbankbelgium-stark-testing-10.2.0-092ad9c6.tgz",
     "@types/core-js": "~2.5.4",
     "@types/hammerjs": "~2.0.39",
     "@types/node": "~10.17.56",

showcase/src/app/app-menu.config.ts

@@ -26,6 +26,13 @@ export const APP_MENU_CONFIG: StarkMenuConfig = {
 					isVisible: true,
 					isEnabled: true,
 					targetState: "news"
+				},
+				{
+					id: "reactive-form-errors",
+					label: "SHOWCASE.NGX_FORM_ERRORS.TITLE",
+					isVisible: true,
+					isEnabled: true,
+					targetState: "reactive-form-errors"
 				}
 			]
 		},

showcase/src/app/welcome/pages/index.ts

@@ -2,3 +2,4 @@ export * from "./getting-started";
 export * from "./home";
 export * from "./news";
 export * from "./no-content";
+export * from "./reactive-form-errors";

showcase/src/app/welcome/pages/reactive-form-errors/components/card/card.component.html

@@ -0,0 +1,3 @@
+<mat-card>
+	<ng-content></ng-content>
+</mat-card>

showcase/src/app/welcome/pages/reactive-form-errors/components/card/card.component.scss

@@ -0,0 +1,5 @@
+:host mat-card {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 100%;
+}

showcase/src/app/welcome/pages/reactive-form-errors/components/card/card.component.ts

@@ -0,0 +1,46 @@
+import { Component, HostBinding, Input } from "@angular/core";
+
+type Colors = "primary" | "accent" | "warning" | "success";
+
+@Component({
+	selector: "app-card",
+	templateUrl: "./card.component.html",
+	styleUrls: ["./card.component.scss"]
+})
+export class CardComponent {
+	@HostBinding("class.app-card")
+	public cssClass = true;
+	@HostBinding("class.app-color-primary")
+	public primaryColor!: boolean;
+	@HostBinding("class.app-color-accent")
+	public accentColor!: boolean;
+	@HostBinding("class.app-color-warning")
+	public warningColor!: boolean;
+	@HostBinding("class.app-color-success")
+	public successColor!: boolean;
+
+	@Input()
+	public set color(color: Colors) {
+		this.primaryColor = false;
+		this.accentColor = false;
+		this.warningColor = false;
+		this.successColor = false;
+
+		switch (color) {
+			case "primary":
+				this.primaryColor = true;
+				break;
+			case "accent":
+				this.accentColor = true;
+				break;
+			case "warning":
+				this.warningColor = true;
+				break;
+			case "success":
+				this.successColor = true;
+				break;
+			default:
+				break;
+		}
+	}
+}

showcase/src/app/welcome/pages/reactive-form-errors/components/card/card.theme.scss

@@ -0,0 +1,20 @@
+.app-card.app-color-primary mat-card {
+  background-color: mat-color($primary-palette, 500);
+  color: mat-contrast($primary-palette, 500);
+}
+
+.app-card.app-color-accent mat-card {
+  background-color: mat-color($primary-palette, 500);
+  color: mat-contrast($primary-palette, 500);
+}
+
+.app-card.app-color-warning mat-card {
+  background-color: mat-color($warning-palette, 500);
+  color: mat-contrast($warning-palette, 500);
+}
+
+.app-card.app-color-success mat-card {
+  /*Themes do not have a success map by default*/
+  background-color: mat-color($success-palette, 500);
+  color: mat-contrast($success-palette, 500);
+}

showcase/src/app/welcome/pages/reactive-form-errors/components/card/index.ts

@@ -0,0 +1 @@
+export * from "./card.component";

showcase/src/app/welcome/pages/reactive-form-errors/components/index.ts

@@ -0,0 +1,2 @@
+export * from "./card";
+export * from "./translated-form-error";

showcase/src/app/welcome/pages/reactive-form-errors/components/translated-form-error/index.ts

@@ -0,0 +1 @@
+export * from "./translated-form-error.component";

showcase/src/app/welcome/pages/reactive-form-errors/components/translated-form-error/translated-form-error.component.html

@@ -0,0 +1 @@
+<div *ngFor="let error of errors; trackBy: trackError">{{ error.message | translate: error.params }}</div>

showcase/src/app/welcome/pages/reactive-form-errors/components/translated-form-error/translated-form-error.component.ts

@@ -0,0 +1,47 @@
+import { Component, HostBinding, OnInit } from "@angular/core";
+import { LangChangeEvent, TranslateService } from "@ngx-translate/core";
+import { Observable } from "rxjs";
+import { NgxFormErrorComponent, NgxFormFieldError } from "@nationalbankbelgium/ngx-form-errors";
+
+@Component({
+	selector: "app-translated-form-error",
+	templateUrl: "./translated-form-error.component.html"
+})
+export class TranslatedFormErrorComponent implements NgxFormErrorComponent, OnInit {
+	@HostBinding("class")
+	public cssClass = "translated-form-error";
+
+	public errors: NgxFormFieldError[] = [];
+	public errors$!: Observable<NgxFormFieldError[]>;
+	public fieldName!: string;
+
+	public constructor(public translateService: TranslateService) {}
+
+	public ngOnInit(): void {
+		this.translateService.onLangChange.subscribe((_ev: LangChangeEvent) => {
+			this.updateTranslateFieldName(this.translateService.instant(this.fieldName));
+		});
+	}
+
+	public subscribeToErrors(): void {
+		this.errors$.subscribe((errors: NgxFormFieldError[]) => {
+			this.errors = errors;
+
+			if (errors.length) {
+				// the formField can be retrieved from the "fieldName" param of any of the errors
+				this.fieldName = errors[0].params.fieldName;
+				this.updateTranslateFieldName(this.translateService.instant(this.fieldName));
+			}
+		});
+	}
+
+	public updateTranslateFieldName(translatedFieldName: string): void {
+		for (const error of this.errors) {
+			error.params = { ...error.params, fieldName: translatedFieldName };
+		}
+	}
+
+	public trackError(index: number): number {
+		return index;
+	}
+}

showcase/src/app/welcome/pages/reactive-form-errors/index.ts

@@ -0,0 +1 @@
+export * from "./reactive-form-errors-page.component";