feat(showcase): update Angular from 13.0.0 to 14.0.0

showcase/angular.json

@@ -188,7 +188,6 @@
       }
     }
   },
-  "defaultProject": "showcase",
   "schematics": {
     "@schematics/angular:component": {
       "prefix": "showcase",
@@ -199,6 +198,7 @@
     }
   },
   "cli": {
-    "defaultCollection": "@angular-eslint/schematics"
+    "schematicCollections": ["@angular-eslint/schematics"],
+    "analytics": false
   }
 }

showcase/package.json

@@ -103,25 +103,25 @@
     "webpack-dev-server": "node --max_old_space_size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server.js"
   },
   "dependencies": {
-    "@angular/animations": "^13.4.0",
-    "@angular/cdk": "^13.3.9",
-    "@angular/cli": "^13.3.11",
-    "@angular/common": "^13.4.0",
-    "@angular/compiler": "^13.4.0",
-    "@angular/compiler-cli": "^13.4.0",
-    "@angular/core": "^13.4.0",
-    "@angular/flex-layout": "^13.0.0-beta.38",
-    "@angular/forms": "^13.4.0",
-    "@angular/material": "^13.3.9",
-    "@angular/platform-browser": "^13.4.0",
-    "@angular/platform-browser-dynamic": "^13.4.0",
-    "@angular/platform-server": "^13.4.0",
-    "@angular/router": "^13.4.0",
+    "@angular/animations": "^14.3.0",
+    "@angular/cdk": "^14.2.7",
+    "@angular/cli": "^14.2.13",
+    "@angular/common": "^14.3.0",
+    "@angular/compiler": "^14.3.0",
+    "@angular/compiler-cli": "^14.3.0",
+    "@angular/core": "^14.3.0",
+    "@angular/flex-layout": "^14.0.0-beta.41",
+    "@angular/forms": "^14.3.0",
+    "@angular/material": "^14.2.7",
+    "@angular/platform-browser": "^14.3.0",
+    "@angular/platform-browser-dynamic": "^14.3.0",
+    "@angular/platform-server": "^14.3.0",
+    "@angular/router": "^14.3.0",
     "@nationalbankbelgium/code-style": "^1.7.0",
     "@nationalbankbelgium/ngx-form-errors": "2.0.0-rc.0",
-    "@nationalbankbelgium/stark-core": "file:../dist/packages-dist/stark-core/nationalbankbelgium-stark-core-12.0.0-beta.0-a83e0f149-1706533486.tgz",
-    "@nationalbankbelgium/stark-rbac": "file:../dist/packages-dist/stark-rbac/nationalbankbelgium-stark-rbac-12.0.0-beta.0-a83e0f149-1706533486.tgz",
-    "@nationalbankbelgium/stark-ui": "file:../dist/packages-dist/stark-ui/nationalbankbelgium-stark-ui-12.0.0-beta.0-a83e0f149-1706533486.tgz",
+    "@nationalbankbelgium/stark-core": "file:../dist/packages-dist/stark-core/nationalbankbelgium-stark-core-12.0.0-beta.0-ba6dd3a0-1707741040.tgz",
+    "@nationalbankbelgium/stark-rbac": "file:../dist/packages-dist/stark-rbac/nationalbankbelgium-stark-rbac-12.0.0-beta.0-ba6dd3a0-1707741040.tgz",
+    "@nationalbankbelgium/stark-ui": "file:../dist/packages-dist/stark-ui/nationalbankbelgium-stark-ui-12.0.0-beta.0-ba6dd3a0-1707741040.tgz",
     "@uirouter/visualizer": "~7.2.1",
     "angular-in-memory-web-api": "~0.11.0",
     "basscss": "~8.1.0",
@@ -136,9 +136,9 @@
   },
   "devDependencies": {
     "@compodoc/compodoc": "1.1.19",
-    "@nationalbankbelgium/eslint-config": "^13.0.0-rc.0",
-    "@nationalbankbelgium/stark-build": "file:../dist/packages-dist/stark-build/nationalbankbelgium-stark-build-12.0.0-beta.0-a83e0f149-1706533486.tgz",
-    "@nationalbankbelgium/stark-testing": "file:../dist/packages-dist/stark-testing/nationalbankbelgium-stark-testing-12.0.0-beta.0-a83e0f149-1706533486.tgz",
+    "@nationalbankbelgium/eslint-config": "^14.0.0-rc.0",
+    "@nationalbankbelgium/stark-build": "file:../dist/packages-dist/stark-build/nationalbankbelgium-stark-build-12.0.0-beta.0-ba6dd3a0-1707741040.tgz",
+    "@nationalbankbelgium/stark-testing": "file:../dist/packages-dist/stark-testing/nationalbankbelgium-stark-testing-12.0.0-beta.0-ba6dd3a0-1707741040.tgz",
     "@types/core-js": "~2.5.4",
     "@types/hammerjs": "~2.0.39",
     "@types/node": "^18.19.4",
@@ -154,4 +154,4 @@
     "ts-node": "~10.0.0",
     "typescript": "~4.6.4"
   }
-}
+}

showcase/src/app/demo-ui/pages/date-picker/demo-date-picker-page.component.ts

@@ -1,5 +1,5 @@
 import { Component, Inject, OnDestroy } from "@angular/core";
-import { FormControl, Validators } from "@angular/forms";
+import { UntypedFormControl, Validators } from "@angular/forms";
 import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
 import { StarkDatePickerFilter, StarkTimestampMaskConfig } from "@nationalbankbelgium/stark-ui";
 import { ReferenceLink } from "../../../shared/components";
@@ -16,7 +16,7 @@ export class DemoDatePickerPageComponent implements OnDestroy {
 	public maxDate = new Date(Date.now() + 30 * DAY_IN_MILLISECONDS);
 
 	public ngModelDate = new Date();
-	public formControl = new FormControl(new Date(), Validators.required);
+	public formControl = new UntypedFormControl(new Date(), Validators.required);
 
 	public disabled = false;
 	public required = false;
@@ -47,7 +47,7 @@ export class DemoDatePickerPageComponent implements OnDestroy {
 		this.logger.debug("ngModel: ", this.ngModelDate);
 	}
 
-	public toggleFormControlState(formControl: FormControl): void {
+	public toggleFormControlState(formControl: UntypedFormControl): void {
 		// enable/disable the control without emitting a change event since the value did not change (to avoid unnecessary extra calls!)
 		if (formControl.disabled) {
 			formControl.enable({ emitEvent: false });

showcase/src/app/demo-ui/pages/date-range-picker/demo-date-range-picker-page.component.ts

@@ -2,7 +2,7 @@
 import { Component, Inject, OnDestroy } from "@angular/core";
 import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
 import { StarkDateRangePickerEvent } from "@nationalbankbelgium/stark-ui";
-import { AbstractControl, FormControl, FormGroup, ValidationErrors, Validators } from "@angular/forms";
+import { AbstractControl, UntypedFormControl, UntypedFormGroup, ValidationErrors, Validators } from "@angular/forms";
 import { MatCheckboxChange } from "@angular/material/checkbox";
 import { Subscription } from "rxjs";
 import { ReferenceLink } from "../../../shared/components";
@@ -26,12 +26,15 @@ export class DemoDateRangePickerPageComponent implements OnDestroy {
 	public modelDisabled = false;
 
 	// IMPORTANT: if the DateRangePicker should be required, then add the 'required' validator to both form controls too!
-	public dateRangeFormGroup = new FormGroup({
-		startDate: new FormControl(
+	public dateRangeFormGroup = new UntypedFormGroup({
+		startDate: new UntypedFormControl(
 			undefined,
 			Validators.compose([Validators.required, DemoDateRangePickerPageComponent.noFebruaryValidator])
 		),
-		endDate: new FormControl(undefined, Validators.compose([Validators.required, DemoDateRangePickerPageComponent.noFebruaryValidator]))
+		endDate: new UntypedFormControl(
+			undefined,
+			Validators.compose([Validators.required, DemoDateRangePickerPageComponent.noFebruaryValidator])
+		)
 	});
 
 	/**

showcase/src/app/demo-ui/pages/date-time-picker/demo-date-time-picker-page.component.ts

@@ -1,5 +1,5 @@
 import { Component, Inject, OnDestroy } from "@angular/core";
-import { AbstractControl, FormControl, Validators } from "@angular/forms";
+import { AbstractControl, UntypedFormControl, Validators } from "@angular/forms";
 import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
 import { StarkTimestampMaskConfig } from "@nationalbankbelgium/stark-ui";
 import { Subscription } from "rxjs";
@@ -15,7 +15,7 @@ const DAY_IN_MILLISECONDS = 86400000;
 })
 export class DemoDateTimePickerPageComponent implements OnDestroy {
 	public dateTimeModel?: Date;
-	public formControl = new FormControl(new Date(), Validators.required);
+	public formControl = new UntypedFormControl(new Date(), Validators.required);
 	public isDisabled = false;
 
 	public dateMask = { format: "DD/MM/YYYY" };
@@ -51,7 +51,7 @@ export class DemoDateTimePickerPageComponent implements OnDestroy {
 		this._logger.debug("ngModel: ", this.dateTimeModel);
 	}
 
-	public toggleFormControlState(formControl: FormControl): void {
+	public toggleFormControlState(formControl: UntypedFormControl): void {
 		// enable/disable the control without emitting a change event since the value did not change (to avoid unnecessary extra calls!)
 		if (formControl.disabled) {
 			formControl.enable({ emitEvent: false });

showcase/src/app/demo-ui/pages/dropdown/demo-dropdown-page.component.ts

@@ -1,5 +1,5 @@
 import { Component, ViewEncapsulation } from "@angular/core";
-import { FormControl, Validators } from "@angular/forms";
+import { UntypedFormControl, Validators } from "@angular/forms";
 import { ReferenceLink } from "../../../shared/components";
 
 @Component({
@@ -15,7 +15,7 @@ export class DemoDropdownPageComponent {
 		{ id: "IO", value: "SHOWCASE.DEMO.DROPDOWN.IO" },
 		{ id: "CS", value: "SHOWCASE.DEMO.DROPDOWN.CS" }
 	];
-	public serviceFormControl = new FormControl("", Validators.required);
+	public serviceFormControl = new UntypedFormControl("", Validators.required);
 	public selectedService = "";
 
 	public selectedServiceWhiteDropdown = "";

showcase/src/app/demo-ui/pages/generic-search/components/demo-generic-search-form.component.ts

@@ -1,7 +1,7 @@
 import { Component, EventEmitter, Inject, Input, OnInit, Output } from "@angular/core";
 import { StarkSearchFormComponent } from "@nationalbankbelgium/stark-ui";
 import { HeroMovieSearchCriteria } from "../entities";
-import { FormBuilder, FormGroup } from "@angular/forms";
+import { UntypedFormBuilder, UntypedFormGroup } from "@angular/forms";
 import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
 import { DemoGenericService } from "../services";
 import { take } from "rxjs/operators";
@@ -35,12 +35,12 @@ export class DemoGenericSearchFormComponent implements OnInit, StarkSearchFormCo
 	public heroOptions: string[] = [];
 	public movieOptions: string[] = [];
 
-	public searchForm: FormGroup = this.createSearchForm(this.searchCriteria);
+	public searchForm: UntypedFormGroup = this.createSearchForm(this.searchCriteria);
 
 	public constructor(
 		@Inject(STARK_LOGGING_SERVICE) private logger: StarkLoggingService,
 		private genericService: DemoGenericService,
-		private formBuilder: FormBuilder
+		private formBuilder: UntypedFormBuilder
 	) {}
 
 	public ngOnInit(): void {
@@ -65,7 +65,7 @@ export class DemoGenericSearchFormComponent implements OnInit, StarkSearchFormCo
 		this.logger.debug(componentName + " is initialized");
 	}
 
-	public createSearchForm(searchCriteria: HeroMovieSearchCriteria): FormGroup {
+	public createSearchForm(searchCriteria: HeroMovieSearchCriteria): UntypedFormGroup {
 		return this.formBuilder.group({
 			year: searchCriteria.year,
 			hero: searchCriteria.hero,
@@ -85,7 +85,7 @@ export class DemoGenericSearchFormComponent implements OnInit, StarkSearchFormCo
 		);
 	}
 
-	public mapFormGroupToSearchCriteria(formGroup: FormGroup): HeroMovieSearchCriteria {
+	public mapFormGroupToSearchCriteria(formGroup: UntypedFormGroup): HeroMovieSearchCriteria {
 		/// return formGroup.getRawValue();
 
 		return {

showcase/src/app/demo-ui/pages/input-mask-directives/demo-input-mask-directives-page.component.ts

@@ -1,5 +1,5 @@
 import { Component, Inject } from "@angular/core";
-import { FormControl } from "@angular/forms";
+import { UntypedFormControl } from "@angular/forms";
 import { merge } from "rxjs";
 import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
 import { StarkTextMasks, StarkTextMaskConfig, StarkTimestampMaskConfig, StarkNumberMaskConfig } from "@nationalbankbelgium/stark-ui";
@@ -81,10 +81,10 @@ export class DemoInputMaskDirectivesPageComponent {
 	public timestamp = "";
 	public monthDay = "";
 
-	public phoneNumberField = new FormControl();
-	public fullDateField = new FormControl();
-	public timeField = new FormControl();
-	public percentageField = new FormControl();
+	public phoneNumberField = new UntypedFormControl();
+	public fullDateField = new UntypedFormControl();
+	public timeField = new UntypedFormControl();
+	public percentageField = new UntypedFormControl();
 
 	public referenceList: ReferenceLink[] = [
 		{

showcase/src/app/demo-ui/pages/transform-input-directive/demo-transform-input-directive-page.component.ts

@@ -1,6 +1,6 @@
 import { Component, Inject } from "@angular/core";
 import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
-import { FormControl } from "@angular/forms";
+import { UntypedFormControl } from "@angular/forms";
 import { ReferenceLink } from "../../../shared/components";
 
 @Component({
@@ -9,7 +9,7 @@ import { ReferenceLink } from "../../../shared/components";
 })
 export class DemoTransformInputDirectivePageComponent {
 	public value = "";
-	public formControl = new FormControl("");
+	public formControl = new UntypedFormControl("");
 	private _emojiMap = new Map([
 		[":+1:", "👍"],
 		[":-1:", "👎"],

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

@@ -1,15 +1,15 @@
-import { FormControl, FormGroup, ValidationErrors, ValidatorFn } from "@angular/forms";
+import { UntypedFormControl, UntypedFormGroup, ValidationErrors, ValidatorFn } from "@angular/forms";
 
 export class PasswordValidator {
 	// Inspired on: http://plnkr.co/edit/Zcbg2T3tOxYmhxs7vaAm?p=preview
-	public static areEqual(formGroup: FormGroup): ValidationErrors | null {
+	public static areEqual(formGroup: UntypedFormGroup): ValidationErrors | null {
 		let value: string | undefined;
 		let valid = true;
 
 		for (const key in formGroup.controls) {
 			// eslint-disable-next-line no-prototype-builtins
 			if (formGroup.controls.hasOwnProperty(key)) {
-				const control: FormControl = <FormControl>formGroup.controls[key];
+				const control: UntypedFormControl = <UntypedFormControl>formGroup.controls[key];
 
 				if (value === undefined) {
 					value = control.value;
@@ -26,6 +26,6 @@ export class PasswordValidator {
 }
 
 /* eslint-disable-next-line jsdoc/require-jsdoc */
-export function getConfirmPasswordValidator(formGroup: FormGroup): ValidatorFn {
+export function getConfirmPasswordValidator(formGroup: UntypedFormGroup): ValidatorFn {
 	return (): ValidationErrors | null => PasswordValidator.areEqual(formGroup);
 }

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

@@ -1,5 +1,5 @@
 import { Component, Inject } from "@angular/core";
-import { AbstractControl, FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { AbstractControl, UntypedFormBuilder, UntypedFormGroup, Validators } from "@angular/forms";
 import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
 import { getConfirmPasswordValidator } from "./password-validator";
 import { ReferenceLink } from "../../../shared/components/reference-block";
@@ -20,13 +20,13 @@ export class ReactiveFormErrorsPageComponent {
 		}
 	];
 
-	public formGroup: FormGroup;
+	public formGroup: UntypedFormGroup;
 	public passwordPattern = "^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])[a-zA-Z0-9]+$";
 	public showValidationDetails = false;
 	public showValidationSummary = true;
 
 	public constructor(
-		private formBuilder: FormBuilder,
+		private formBuilder: UntypedFormBuilder,
 		@Inject(STARK_LOGGING_SERVICE) public logger: StarkLoggingService
 	) {
 		this.formGroup = this.formBuilder.group({
@@ -52,7 +52,7 @@ export class ReactiveFormErrorsPageComponent {
 		// linked to the "confirmPassword" control because the NgxFormErrors directive is linked to the control and not to the form group!
 		confirmPasswordControl.setValidators([
 			Validators.required,
-			getConfirmPasswordValidator(<FormGroup>this.formGroup.get("matchingPasswords"))
+			getConfirmPasswordValidator(<UntypedFormGroup>this.formGroup.get("matchingPasswords"))
 		]);
 	}
 
@@ -72,7 +72,7 @@ export class ReactiveFormErrorsPageComponent {
 		this.showValidationSummary = !this.showValidationSummary;
 	}
 
-	public onSubmitUserDetails(formGroup: FormGroup): void {
+	public onSubmitUserDetails(formGroup: UntypedFormGroup): void {
 		this.logger.info("Submitted form:", formGroup.value);
 	}
 }

showcase/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "@nationalbankbelgium/code-style/tsconfig/4.4.x/ng13",
+  "extends": "@nationalbankbelgium/code-style/tsconfig/4.6.x/ng14",
   "compilerOptions": {
     "baseUrl": "./src",
     "outDir": "./dist",