feat(showcase): update showcase to angular 15

Refactor Effects classes due to change in `typescript` configuration:
- `"useDefineForClassFields": true`

showcase/base.spec.ts

@@ -31,22 +31,6 @@ globalThis["ENV"] = "development";
 import { getTestBed } from "@angular/core/testing";
 import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from "@angular/platform-browser-dynamic/testing";
 
-// tslint:disable:completed-docs bool-param-default
-declare const require: {
-	context(
-		path: string,
-		deep?: boolean,
-		filter?: RegExp
-	): {
-		keys(): string[];
-		<T>(id: string): T;
-	};
-};
 getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {
-    teardown: { destroyAfterEach: false }
+	teardown: { destroyAfterEach: false }
 });
-
-// Then we find all the tests.
-const context = require.context("./src", true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().forEach(context);

showcase/package.json

@@ -55,9 +55,8 @@
     "karma": "karma",
     "lint": "npm run lint-es && npm run lint-css",
     "lint-css": "stylelint \"./src/**/*.?(pc|sc|c|sa)ss\" --formatter \"string\"",
-    "lint-es": "ng lint",
-    "lint-es:fix": "ng lint --fix",
-    "lint-ts:fix": "node --max_old_space_size=4096 ./node_modules/tslint/bin/tslint --config ./tslint.json --project ./tsconfig.json --format codeFrame --fix",
+    "lint-es": "npm run ng -- lint",
+    "lint-es:fix": "npm run lint-es -- --fix",
     "ng": "node --max_old_space_size=4096 ./node_modules/@angular/cli/bin/ng",
     "ngc": "ngc",
     "ngcc": "ngcc",
@@ -103,25 +102,25 @@
     "webpack-dev-server": "node --max_old_space_size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server.js"
   },
   "dependencies": {
-    "@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",
+    "@angular/animations": "^15.2.10",
+    "@angular/cdk": "^15.2.9",
+    "@angular/cli": "^15.2.11",
+    "@angular/common": "^15.2.10",
+    "@angular/compiler": "^15.2.10",
+    "@angular/compiler-cli": "^15.2.10",
+    "@angular/core": "^15.2.10",
+    "@angular/flex-layout": "^15.0.0-beta.42",
+    "@angular/forms": "^15.2.10",
+    "@angular/material": "^15.2.9",
+    "@angular/platform-browser": "^15.2.10",
+    "@angular/platform-browser-dynamic": "^15.2.10",
+    "@angular/platform-server": "^15.2.10",
+    "@angular/router": "^15.2.10",
+    "@nationalbankbelgium/code-style": "^1.10.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.1-50d54f57-1710243771.tgz",
-    "@nationalbankbelgium/stark-rbac": "file:../dist/packages-dist/stark-rbac/nationalbankbelgium-stark-rbac-12.0.0-beta.1-50d54f57-1710243771.tgz",
-    "@nationalbankbelgium/stark-ui": "file:../dist/packages-dist/stark-ui/nationalbankbelgium-stark-ui-12.0.0-beta.1-50d54f57-1710243771.tgz",
+    "@nationalbankbelgium/stark-core": "file:../dist/packages-dist/stark-core/nationalbankbelgium-stark-core-12.0.0-beta.1-f850ac6f-1715153359.tgz",
+    "@nationalbankbelgium/stark-rbac": "file:../dist/packages-dist/stark-rbac/nationalbankbelgium-stark-rbac-12.0.0-beta.1-f850ac6f-1715153359.tgz",
+    "@nationalbankbelgium/stark-ui": "file:../dist/packages-dist/stark-ui/nationalbankbelgium-stark-ui-12.0.0-beta.1-f850ac6f-1715153359.tgz",
     "@uirouter/visualizer": "~7.2.1",
     "angular-in-memory-web-api": "~0.11.0",
     "basscss": "~8.1.0",
@@ -136,9 +135,9 @@
   },
   "devDependencies": {
     "@compodoc/compodoc": "1.1.19",
-    "@nationalbankbelgium/eslint-config": "^14.0.0-rc.0",
-    "@nationalbankbelgium/stark-build": "file:../dist/packages-dist/stark-build/nationalbankbelgium-stark-build-12.0.0-beta.1-50d54f57-1710243771.tgz",
-    "@nationalbankbelgium/stark-testing": "file:../dist/packages-dist/stark-testing/nationalbankbelgium-stark-testing-12.0.0-beta.1-50d54f57-1710243771.tgz",
+    "@nationalbankbelgium/eslint-config": "15.0.0",
+    "@nationalbankbelgium/stark-build": "file:../dist/packages-dist/stark-build/nationalbankbelgium-stark-build-12.0.0-beta.1-f850ac6f-1715153359.tgz",
+    "@nationalbankbelgium/stark-testing": "file:../dist/packages-dist/stark-testing/nationalbankbelgium-stark-testing-12.0.0-beta.1-f850ac6f-1715153359.tgz",
     "@types/core-js": "~2.5.4",
     "@types/hammerjs": "~2.0.39",
     "@types/node": "^18.19.4",
@@ -152,6 +151,6 @@
     "npm-run-all": "~4.1.5",
     "parse5": "~6.0.1",
     "ts-node": "~10.0.0",
-    "typescript": "~4.6.4"
+    "typescript": "~4.9.5"
   }
 }

showcase/src/app/demo-ui/demo-ui.module.ts

@@ -1,10 +1,10 @@
 import { NgModule } from "@angular/core";
-import { MatOptionModule } from "@angular/material/core";
-import { MatAutocompleteModule } from "@angular/material/autocomplete";
+import { MatLegacyOptionModule as MatOptionModule } from "@angular/material/legacy-core";
+import { MatLegacyAutocompleteModule as MatAutocompleteModule } from "@angular/material/legacy-autocomplete";
 import { MatDividerModule } from "@angular/material/divider";
-import { MatFormFieldModule } from "@angular/material/form-field";
-import { MatInputModule } from "@angular/material/input";
-import { MatSlideToggleModule } from "@angular/material/slide-toggle";
+import { MatLegacyFormFieldModule as MatFormFieldModule } from "@angular/material/legacy-form-field";
+import { MatLegacyInputModule as MatInputModule } from "@angular/material/legacy-input";
+import { MatLegacySlideToggleModule as MatSlideToggleModule } from "@angular/material/legacy-slide-toggle";
 import { StoreModule } from "@ngrx/store";
 import { UIRouterModule } from "@uirouter/angular";
 import {

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

@@ -3,7 +3,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, UntypedFormControl, UntypedFormGroup, ValidationErrors, Validators } from "@angular/forms";
-import { MatCheckboxChange } from "@angular/material/checkbox";
+import { MatLegacyCheckboxChange as MatCheckboxChange } from "@angular/material/legacy-checkbox";
 import { Subscription } from "rxjs";
 import { ReferenceLink } from "../../../shared/components";
 

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

@@ -1,5 +1,5 @@
 import { Component, Inject } from "@angular/core";
-import { MatDialog } from "@angular/material/dialog";
+import { MatLegacyDialog as MatDialog } from "@angular/material/legacy-dialog";
 import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
 import {
 	StarkAlertDialogComponent,

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

@@ -35,13 +35,15 @@ export class DemoGenericSearchFormComponent implements OnInit, StarkSearchFormCo
 	public heroOptions: string[] = [];
 	public movieOptions: string[] = [];
 
-	public searchForm: UntypedFormGroup = this.createSearchForm(this.searchCriteria);
+	public searchForm: UntypedFormGroup;
 
 	public constructor(
 		@Inject(STARK_LOGGING_SERVICE) private logger: StarkLoggingService,
 		private genericService: DemoGenericService,
 		private formBuilder: UntypedFormBuilder
-	) {}
+	) {
+		this.searchForm = this.createSearchForm(this.searchCriteria);
+	}
 
 	public ngOnInit(): void {
 		this.searchForm.valueChanges.subscribe(() => {

showcase/src/app/example-viewer/components/example-viewer.component.spec.ts

@@ -1,9 +1,9 @@
 import { Component, NO_ERRORS_SCHEMA, ViewChild } from "@angular/core";
 import { NoopAnimationsModule } from "@angular/platform-browser/animations";
 import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
-import { MatButtonModule } from "@angular/material/button";
-import { MatTabsModule } from "@angular/material/tabs";
-import { MatTooltipModule } from "@angular/material/tooltip";
+import { MatLegacyButtonModule as MatButtonModule } from "@angular/material/legacy-button";
+import { MatLegacyTabsModule as MatTabsModule } from "@angular/material/legacy-tabs";
+import { MatLegacyTooltipModule as MatTooltipModule } from "@angular/material/legacy-tooltip";
 import { HAMMER_LOADER } from "@angular/platform-browser";
 import { Observable, of, Subject, throwError } from "rxjs";
 import { delay, filter } from "rxjs/operators";

showcase/src/app/shared/effects/stark-error-handling.effects.ts

@@ -1,9 +1,10 @@
 import { Injectable, Injector, NgZone } from "@angular/core";
-import { Actions, createEffect, ofType } from "@ngrx/effects";
+import { Actions, createEffect, CreateEffectMetadata, ofType } from "@ngrx/effects";
 import { map } from "rxjs/operators";
 import { STARK_TOAST_NOTIFICATION_SERVICE, StarkMessageType, StarkToastNotificationService } from "@nationalbankbelgium/stark-ui";
 import { StarkErrorHandlingActions } from "@nationalbankbelgium/stark-core";
 import uniqueId from "lodash-es/uniqueId";
+import { Observable } from "rxjs";
 
 /**
  * This class is used to determine what to do with an error
@@ -22,27 +23,31 @@ export class StarkErrorHandlingEffects {
 		private actions$: Actions,
 		private injector: Injector,
 		private zone: NgZone
-	) {}
+	) {
+		this.starkUnhandledError$ = createEffect(
+			() => {
+				console.log("createEffect called", this.actions$);
+				return this.actions$.pipe(
+					ofType(StarkErrorHandlingActions.unhandledError),
+					map((action) => {
+						this.zone.run(() => {
+							this.toastNotificationService
+								.show({
+									id: uniqueId(),
+									type: StarkMessageType.ERROR,
+									key: action.error.toString(),
+									code: "Unhandled error - no code"
+								})
+								.subscribe();
+						});
+					})
+				);
+			},
+			{ dispatch: false }
+		);
+	}
 
-	public starkUnhandledError$ = createEffect(
-		() =>
-			this.actions$.pipe(
-				ofType(StarkErrorHandlingActions.unhandledError),
-				map((action) => {
-					this.zone.run(() => {
-						this.toastNotificationService
-							.show({
-								id: uniqueId(),
-								type: StarkMessageType.ERROR,
-								key: action.error.toString(),
-								code: "Unhandled error - no code"
-							})
-							.subscribe();
-					});
-				})
-			),
-		{ dispatch: false }
-	);
+	public starkUnhandledError$: Observable<void> & CreateEffectMetadata;
 
 	/**
 	 * Gets the StarkToastNotificationService from the Injector.

showcase/src/app/shared/effects/stark-rbac-unauthorized-navigation.effects.ts

@@ -1,9 +1,10 @@
 import { Injectable, Injector, NgZone } from "@angular/core";
-import { Actions, createEffect, ofType } from "@ngrx/effects";
+import { Actions, createEffect, CreateEffectMetadata, ofType } from "@ngrx/effects";
 import { map } from "rxjs/operators";
 import { StarkRBACAuthorizationActions } from "@nationalbankbelgium/stark-rbac";
 import { STARK_TOAST_NOTIFICATION_SERVICE, StarkMessageType, StarkToastNotificationService } from "@nationalbankbelgium/stark-ui";
 import uniqueId from "lodash-es/uniqueId";
+import { Observable } from "rxjs";
 
 /**
  * This class is used to determine what to do with an error
@@ -22,48 +23,52 @@ export class StarkRbacUnauthorizedNavigationEffects {
 		private actions$: Actions,
 		private injector: Injector,
 		private zone: NgZone
-	) {}
+	) {
+		this.starkRBACNavigationUnauthorized$ = createEffect(
+			() =>
+				this.actions$.pipe(
+					ofType(StarkRBACAuthorizationActions.userNavigationUnauthorized),
+					map((action) => {
+						this.zone.run(() => {
+							this.toastNotificationService
+								.show({
+									id: uniqueId(),
+									type: StarkMessageType.ERROR,
+									key: action.type,
+									code: "Stark-RBAC: unauthorized navigation"
+								})
+								.subscribe();
+						});
+					})
+				),
+			{ dispatch: false }
+		);
 
-	public starkRBACNavigationUnauthorized$ = createEffect(
-		() =>
-			this.actions$.pipe(
-				ofType(StarkRBACAuthorizationActions.userNavigationUnauthorized),
-				map((action) => {
-					this.zone.run(() => {
-						this.toastNotificationService
-							.show({
-								id: uniqueId(),
-								type: StarkMessageType.ERROR,
-								key: action.type,
-								code: "Stark-RBAC: unauthorized navigation"
-							})
-							.subscribe();
-					});
-				})
-			),
-		{ dispatch: false }
-	);
+		this.starkRBACNavigationUnauthorizedRedirected$ = createEffect(
+			() =>
+				this.actions$.pipe(
+					ofType(StarkRBACAuthorizationActions.userNavigationUnauthorizedRedirected),
+					map((action) => {
+						this.zone.run(() => {
+							this.toastNotificationService
+								.show({
+									id: uniqueId(),
+									type: StarkMessageType.WARNING,
+									key: "SHOWCASE.DEMO_RBAC.SERVICES.AUTHORIZATION.REDIRECTION_MESSAGE",
+									interpolateValues: { rbacActionType: action.type },
+									code: "Stark-RBAC: unauthorized navigation redirected"
+								})
+								.subscribe();
+						});
+					})
+				),
+			{ dispatch: false }
+		);
+	}
+
+	public starkRBACNavigationUnauthorized$: Observable<void> & CreateEffectMetadata;
 
-	public starkRBACNavigationUnauthorizedRedirected$ = createEffect(
-		() =>
-			this.actions$.pipe(
-				ofType(StarkRBACAuthorizationActions.userNavigationUnauthorizedRedirected),
-				map((action) => {
-					this.zone.run(() => {
-						this.toastNotificationService
-							.show({
-								id: uniqueId(),
-								type: StarkMessageType.WARNING,
-								key: "SHOWCASE.DEMO_RBAC.SERVICES.AUTHORIZATION.REDIRECTION_MESSAGE",
-								interpolateValues: { rbacActionType: action.type },
-								code: "Stark-RBAC: unauthorized navigation redirected"
-							})
-							.subscribe();
-					});
-				})
-			),
-		{ dispatch: false }
-	);
+	public starkRBACNavigationUnauthorizedRedirected$: Observable<void> & CreateEffectMetadata;
 
 	/**
 	 * Gets the StarkToastNotificationService from the Injector.