aril 0.0.45 → 0.0.47

package/keycloak/src/auth.interceptor.ts

@@ -0,0 +1,13 @@
+import { HttpHandlerFn, HttpInterceptorFn, HttpRequest } from '@angular/common/http';
+
+export const authInterceptor: HttpInterceptorFn = (req: HttpRequest<unknown>, next: HttpHandlerFn) => {
+	const token = (<any>globalThis).keycloakService?._instance?.token;
+
+	const authReq = req.clone({
+		setHeaders: {
+			Authorization: `Bearer ${token}`
+		}
+	});
+
+	return next(authReq);
+};

package/keycloak/src/keycloak.manager.ts

@@ -0,0 +1,89 @@
+import { HttpHeaders } from '@angular/common/http';
+import { Injectable, inject } from '@angular/core';
+
+import { KeycloakEventType, KeycloakOptions, KeycloakService } from 'keycloak-angular';
+import { KeycloakLoginOptions } from 'keycloak-js';
+import { Observable } from 'rxjs';
+
+@Injectable({ providedIn: 'root' })
+export class KeycloakManager {
+	constructor() {
+		this.keycloak.keycloakEvents$.subscribe((event) => {
+			console.log('keycloakEvents', event);
+
+			switch (event.type) {
+				case KeycloakEventType.OnReady:
+					(<any>globalThis).keycloakService = this.keycloak;
+					break;
+				case KeycloakEventType.OnAuthError:
+				case KeycloakEventType.OnAuthLogout:
+				case KeycloakEventType.OnAuthRefreshError:
+					(<any>globalThis).keycloakService = null;
+					// this.keycloak.clearToken();
+					break;
+				// case KeycloakEventType.OnTokenExpired:
+				// 	this.keycloak.updateToken();
+				// 	break;
+			}
+		});
+	}
+	public readonly keycloak = inject(KeycloakService);
+
+	private defaultOptions: KeycloakOptions = {
+		loadUserProfileAtStartUp: true,
+		initOptions: { onLoad: 'login-required' },
+		bearerExcludedUrls: ['/assets']
+	};
+
+	init(configs: any): Promise<boolean> {
+		return this.keycloak.init({ ...this.defaultOptions, config: configs });
+	}
+
+	login(options?: KeycloakLoginOptions): Promise<void> {
+		return this.keycloak.login(options);
+	}
+
+	logout(redirectUri?: string): Promise<void> {
+		return this.keycloak.logout(redirectUri); // window.location.origin
+	}
+
+	isUserInRole(role: string, resource?: string): boolean {
+		return this.keycloak.isUserInRole(role, resource);
+	}
+
+	getUserRoles(realmRoles?: boolean, resource?: string): string[] {
+		return this.keycloak.getUserRoles(realmRoles, resource);
+	}
+
+	isLoggedIn(): boolean {
+		return this.keycloak.isLoggedIn();
+	}
+
+	isTokenExpired(minValidity?: number): boolean {
+		return this.keycloak.isTokenExpired(minValidity);
+	}
+
+	updateToken(minValidity?: number): Promise<boolean> {
+		return this.keycloak.updateToken(minValidity);
+	}
+
+	loadUserProfile(forceReload?: boolean): Promise<any> {
+		return this.keycloak.loadUserProfile(forceReload);
+	}
+
+	getToken(): Promise<string> {
+		return this.keycloak.getToken();
+	}
+
+	getUsername(): string {
+		return this.keycloak.getUsername();
+	}
+
+	clearToken(): void {
+		this.keycloak.clearToken();
+	}
+
+	addTokenToHeader(headers?: HttpHeaders): Observable<HttpHeaders> {
+		return this.keycloak.addTokenToHeader(headers);
+	}
+}

package/ng-package.json

@@ -0,0 +1,14 @@
+{
+	"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+	"dest": "../../dist",
+	"lib": {
+		"entryFile": "./public-api.ts"
+	},
+	"assets": [
+		{ "glob": "**/*", "input": "theme", "output": "theme" },
+		{ "glob": "ui.common.scss", "input": "ui/styles", "output": "/styles/ui" },
+		{ "glob": "blockui.css", "input": "util/block/src", "output": "/styles/util" },
+		{ "glob": "blockui.min.js", "input": "util/block/src", "output": "/scripts/util" },
+		{ "glob": "api.sample.json", "input": "boot/config/api/src", "output": "/boot/config" }
+	]
+}

package/package.json

@@ -1,314 +1,31 @@
-{
-  "name": "aril",
-  "version": "0.0.45",
-  "peerDependencies": {
-    "@angular/common": "^17.1.0",
-    "@angular/core": "^17.1.0",
-    "@ngneat/transloco": "^6.0.4",
-    "primeflex": "^3.3.1",
-    "primeicons": "^6.0.1",
-    "primeng": "^17.4.0",
-    "devextreme": "^23.2.4",
-    "devextreme-angular": "^23.2.4",
-    "number-format.js": "^2.0.9",
-    "file-saver": "^2.0.5",
-    "xlsx": "^0.18.5",
-    "keycloak-js": "^24.0.2",
-    "keycloak-angular": "^15.2.1",
-    "jspdf": "^2.4.0",
-    "jspdf-autotable": "^3.8.2"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "sideEffects": false,
-  "module": "fesm2022/aril.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/aril.mjs",
-      "esm": "./esm2022/aril.mjs",
-      "default": "./fesm2022/aril.mjs"
-    },
-    "./boot": {
-      "types": "./boot/index.d.ts",
-      "esm2022": "./esm2022/boot/aril-boot.mjs",
-      "esm": "./esm2022/boot/aril-boot.mjs",
-      "default": "./fesm2022/aril-boot.mjs"
-    },
-    "./http": {
-      "types": "./http/index.d.ts",
-      "esm2022": "./esm2022/http/aril-http.mjs",
-      "esm": "./esm2022/http/aril-http.mjs",
-      "default": "./fesm2022/aril-http.mjs"
-    },
-    "./i18n": {
-      "types": "./i18n/index.d.ts",
-      "esm2022": "./esm2022/i18n/aril-i18n.mjs",
-      "esm": "./esm2022/i18n/aril-i18n.mjs",
-      "default": "./fesm2022/aril-i18n.mjs"
-    },
-    "./keycloak": {
-      "types": "./keycloak/index.d.ts",
-      "esm2022": "./esm2022/keycloak/aril-keycloak.mjs",
-      "esm": "./esm2022/keycloak/aril-keycloak.mjs",
-      "default": "./fesm2022/aril-keycloak.mjs"
-    },
-    "./theme": {
-      "types": "./theme/index.d.ts",
-      "esm2022": "./esm2022/theme/aril-theme.mjs",
-      "esm": "./esm2022/theme/aril-theme.mjs",
-      "default": "./fesm2022/aril-theme.mjs"
-    },
-    "./ui": {
-      "types": "./ui/index.d.ts",
-      "esm2022": "./esm2022/ui/aril-ui.mjs",
-      "esm": "./esm2022/ui/aril-ui.mjs",
-      "default": "./fesm2022/aril-ui.mjs"
-    },
-    "./util": {
-      "types": "./util/index.d.ts",
-      "esm2022": "./esm2022/util/aril-util.mjs",
-      "esm": "./esm2022/util/aril-util.mjs",
-      "default": "./fesm2022/aril-util.mjs"
-    },
-    "./boot/host": {
-      "types": "./boot/host/index.d.ts",
-      "esm2022": "./esm2022/boot/host/aril-boot-host.mjs",
-      "esm": "./esm2022/boot/host/aril-boot-host.mjs",
-      "default": "./fesm2022/aril-boot-host.mjs"
-    },
-    "./boot/mfe": {
-      "types": "./boot/mfe/index.d.ts",
-      "esm2022": "./esm2022/boot/mfe/aril-boot-mfe.mjs",
-      "esm": "./esm2022/boot/mfe/aril-boot-mfe.mjs",
-      "default": "./fesm2022/aril-boot-mfe.mjs"
-    },
-    "./theme/layout": {
-      "types": "./theme/layout/index.d.ts",
-      "esm2022": "./esm2022/theme/layout/aril-theme-layout.mjs",
-      "esm": "./esm2022/theme/layout/aril-theme-layout.mjs",
-      "default": "./fesm2022/aril-theme-layout.mjs"
-    },
-    "./ui/autoComplete": {
-      "types": "./ui/autoComplete/index.d.ts",
-      "esm2022": "./esm2022/ui/autoComplete/aril-ui-autoComplete.mjs",
-      "esm": "./esm2022/ui/autoComplete/aril-ui-autoComplete.mjs",
-      "default": "./fesm2022/aril-ui-autoComplete.mjs"
-    },
-    "./ui/badge": {
-      "types": "./ui/badge/index.d.ts",
-      "esm2022": "./esm2022/ui/badge/aril-ui-badge.mjs",
-      "esm": "./esm2022/ui/badge/aril-ui-badge.mjs",
-      "default": "./fesm2022/aril-ui-badge.mjs"
-    },
-    "./ui/button": {
-      "types": "./ui/button/index.d.ts",
-      "esm2022": "./esm2022/ui/button/aril-ui-button.mjs",
-      "esm": "./esm2022/ui/button/aril-ui-button.mjs",
-      "default": "./fesm2022/aril-ui-button.mjs"
-    },
-    "./ui/calendar": {
-      "types": "./ui/calendar/index.d.ts",
-      "esm2022": "./esm2022/ui/calendar/aril-ui-calendar.mjs",
-      "esm": "./esm2022/ui/calendar/aril-ui-calendar.mjs",
-      "default": "./fesm2022/aril-ui-calendar.mjs"
-    },
-    "./ui/checkbox": {
-      "types": "./ui/checkbox/index.d.ts",
-      "esm2022": "./esm2022/ui/checkbox/aril-ui-checkbox.mjs",
-      "esm": "./esm2022/ui/checkbox/aril-ui-checkbox.mjs",
-      "default": "./fesm2022/aril-ui-checkbox.mjs"
-    },
-    "./ui/dxField": {
-      "types": "./ui/dxField/index.d.ts",
-      "esm2022": "./esm2022/ui/dxField/aril-ui-dxField.mjs",
-      "esm": "./esm2022/ui/dxField/aril-ui-dxField.mjs",
-      "default": "./fesm2022/aril-ui-dxField.mjs"
-    },
-    "./ui/field": {
-      "types": "./ui/field/index.d.ts",
-      "esm2022": "./esm2022/ui/field/aril-ui-field.mjs",
-      "esm": "./esm2022/ui/field/aril-ui-field.mjs",
-      "default": "./fesm2022/aril-ui-field.mjs"
-    },
-    "./ui/fileUpload": {
-      "types": "./ui/fileUpload/index.d.ts",
-      "esm2022": "./esm2022/ui/fileUpload/aril-ui-fileUpload.mjs",
-      "esm": "./esm2022/ui/fileUpload/aril-ui-fileUpload.mjs",
-      "default": "./fesm2022/aril-ui-fileUpload.mjs"
-    },
-    "./ui/form": {
-      "types": "./ui/form/index.d.ts",
-      "esm2022": "./esm2022/ui/form/aril-ui-form.mjs",
-      "esm": "./esm2022/ui/form/aril-ui-form.mjs",
-      "default": "./fesm2022/aril-ui-form.mjs"
-    },
-    "./ui/lib": {
-      "types": "./ui/lib/index.d.ts",
-      "esm2022": "./esm2022/ui/lib/aril-ui-lib.mjs",
-      "esm": "./esm2022/ui/lib/aril-ui-lib.mjs",
-      "default": "./fesm2022/aril-ui-lib.mjs"
-    },
-    "./ui/mask": {
-      "types": "./ui/mask/index.d.ts",
-      "esm2022": "./esm2022/ui/mask/aril-ui-mask.mjs",
-      "esm": "./esm2022/ui/mask/aril-ui-mask.mjs",
-      "default": "./fesm2022/aril-ui-mask.mjs"
-    },
-    "./ui/number": {
-      "types": "./ui/number/index.d.ts",
-      "esm2022": "./esm2022/ui/number/aril-ui-number.mjs",
-      "esm": "./esm2022/ui/number/aril-ui-number.mjs",
-      "default": "./fesm2022/aril-ui-number.mjs"
-    },
-    "./ui/overlayPanel": {
-      "types": "./ui/overlayPanel/index.d.ts",
-      "esm2022": "./esm2022/ui/overlayPanel/aril-ui-overlayPanel.mjs",
-      "esm": "./esm2022/ui/overlayPanel/aril-ui-overlayPanel.mjs",
-      "default": "./fesm2022/aril-ui-overlayPanel.mjs"
-    },
-    "./ui/panel": {
-      "types": "./ui/panel/index.d.ts",
-      "esm2022": "./esm2022/ui/panel/aril-ui-panel.mjs",
-      "esm": "./esm2022/ui/panel/aril-ui-panel.mjs",
-      "default": "./fesm2022/aril-ui-panel.mjs"
-    },
-    "./ui/radioButton": {
-      "types": "./ui/radioButton/index.d.ts",
-      "esm2022": "./esm2022/ui/radioButton/aril-ui-radioButton.mjs",
-      "esm": "./esm2022/ui/radioButton/aril-ui-radioButton.mjs",
-      "default": "./fesm2022/aril-ui-radioButton.mjs"
-    },
-    "./ui/password": {
-      "types": "./ui/password/index.d.ts",
-      "esm2022": "./esm2022/ui/password/aril-ui-password.mjs",
-      "esm": "./esm2022/ui/password/aril-ui-password.mjs",
-      "default": "./fesm2022/aril-ui-password.mjs"
-    },
-    "./ui/selectBox": {
-      "types": "./ui/selectBox/index.d.ts",
-      "esm2022": "./esm2022/ui/selectBox/aril-ui-selectBox.mjs",
-      "esm": "./esm2022/ui/selectBox/aril-ui-selectBox.mjs",
-      "default": "./fesm2022/aril-ui-selectBox.mjs"
-    },
-    "./ui/table": {
-      "types": "./ui/table/index.d.ts",
-      "esm2022": "./esm2022/ui/table/aril-ui-table.mjs",
-      "esm": "./esm2022/ui/table/aril-ui-table.mjs",
-      "default": "./fesm2022/aril-ui-table.mjs"
-    },
-    "./ui/switch": {
-      "types": "./ui/switch/index.d.ts",
-      "esm2022": "./esm2022/ui/switch/aril-ui-switch.mjs",
-      "esm": "./esm2022/ui/switch/aril-ui-switch.mjs",
-      "default": "./fesm2022/aril-ui-switch.mjs"
-    },
-    "./ui/tagBox": {
-      "types": "./ui/tagBox/index.d.ts",
-      "esm2022": "./esm2022/ui/tagBox/aril-ui-tagBox.mjs",
-      "esm": "./esm2022/ui/tagBox/aril-ui-tagBox.mjs",
-      "default": "./fesm2022/aril-ui-tagBox.mjs"
-    },
-    "./ui/text": {
-      "types": "./ui/text/index.d.ts",
-      "esm2022": "./esm2022/ui/text/aril-ui-text.mjs",
-      "esm": "./esm2022/ui/text/aril-ui-text.mjs",
-      "default": "./fesm2022/aril-ui-text.mjs"
-    },
-    "./ui/textArea": {
-      "types": "./ui/textArea/index.d.ts",
-      "esm2022": "./esm2022/ui/textArea/aril-ui-textArea.mjs",
-      "esm": "./esm2022/ui/textArea/aril-ui-textArea.mjs",
-      "default": "./fesm2022/aril-ui-textArea.mjs"
-    },
-    "./ui/toggle-button": {
-      "types": "./ui/toggle-button/index.d.ts",
-      "esm2022": "./esm2022/ui/toggle-button/aril-ui-toggle-button.mjs",
-      "esm": "./esm2022/ui/toggle-button/aril-ui-toggle-button.mjs",
-      "default": "./fesm2022/aril-ui-toggle-button.mjs"
-    },
-    "./ui/tree": {
-      "types": "./ui/tree/index.d.ts",
-      "esm2022": "./esm2022/ui/tree/aril-ui-tree.mjs",
-      "esm": "./esm2022/ui/tree/aril-ui-tree.mjs",
-      "default": "./fesm2022/aril-ui-tree.mjs"
-    },
-    "./ui/treeTable": {
-      "types": "./ui/treeTable/index.d.ts",
-      "esm2022": "./esm2022/ui/treeTable/aril-ui-treeTable.mjs",
-      "esm": "./esm2022/ui/treeTable/aril-ui-treeTable.mjs",
-      "default": "./fesm2022/aril-ui-treeTable.mjs"
-    },
-    "./ui/value": {
-      "types": "./ui/value/index.d.ts",
-      "esm2022": "./esm2022/ui/value/aril-ui-value.mjs",
-      "esm": "./esm2022/ui/value/aril-ui-value.mjs",
-      "default": "./fesm2022/aril-ui-value.mjs"
-    },
-    "./util/custom_pages": {
-      "types": "./util/custom_pages/index.d.ts",
-      "esm2022": "./esm2022/util/custom_pages/aril-util-custom_pages.mjs",
-      "esm": "./esm2022/util/custom_pages/aril-util-custom_pages.mjs",
-      "default": "./fesm2022/aril-util-custom_pages.mjs"
-    },
-    "./util/block": {
-      "types": "./util/block/index.d.ts",
-      "esm2022": "./esm2022/util/block/aril-util-block.mjs",
-      "esm": "./esm2022/util/block/aril-util-block.mjs",
-      "default": "./fesm2022/aril-util-block.mjs"
-    },
-    "./util/init-event": {
-      "types": "./util/init-event/index.d.ts",
-      "esm2022": "./esm2022/util/init-event/aril-util-init-event.mjs",
-      "esm": "./esm2022/util/init-event/aril-util-init-event.mjs",
-      "default": "./fesm2022/aril-util-init-event.mjs"
-    },
-    "./util/lib": {
-      "types": "./util/lib/index.d.ts",
-      "esm2022": "./esm2022/util/lib/aril-util-lib.mjs",
-      "esm": "./esm2022/util/lib/aril-util-lib.mjs",
-      "default": "./fesm2022/aril-util-lib.mjs"
-    },
-    "./util/loaders": {
-      "types": "./util/loaders/index.d.ts",
-      "esm2022": "./esm2022/util/loaders/aril-util-loaders.mjs",
-      "esm": "./esm2022/util/loaders/aril-util-loaders.mjs",
-      "default": "./fesm2022/aril-util-loaders.mjs"
-    },
-    "./util/primitive-extensions": {
-      "types": "./util/primitive-extensions/index.d.ts",
-      "esm2022": "./esm2022/util/primitive-extensions/aril-util-primitive-extensions.mjs",
-      "esm": "./esm2022/util/primitive-extensions/aril-util-primitive-extensions.mjs",
-      "default": "./fesm2022/aril-util-primitive-extensions.mjs"
-    },
-    "./util/pub-sub": {
-      "types": "./util/pub-sub/index.d.ts",
-      "esm2022": "./esm2022/util/pub-sub/aril-util-pub-sub.mjs",
-      "esm": "./esm2022/util/pub-sub/aril-util-pub-sub.mjs",
-      "default": "./fesm2022/aril-util-pub-sub.mjs"
-    },
-    "./boot/config/api": {
-      "types": "./boot/config/api/index.d.ts",
-      "esm2022": "./esm2022/boot/config/api/aril-boot-config-api.mjs",
-      "esm": "./esm2022/boot/config/api/aril-boot-config-api.mjs",
-      "default": "./fesm2022/aril-boot-config-api.mjs"
-    },
-    "./boot/config/apps": {
-      "types": "./boot/config/apps/index.d.ts",
-      "esm2022": "./esm2022/boot/config/apps/aril-boot-config-apps.mjs",
-      "esm": "./esm2022/boot/config/apps/aril-boot-config-apps.mjs",
-      "default": "./fesm2022/aril-boot-config-apps.mjs"
-    },
-    "./boot/config/plugins": {
-      "types": "./boot/config/plugins/index.d.ts",
-      "esm2022": "./esm2022/boot/config/plugins/aril-boot-config-plugins.mjs",
-      "esm": "./esm2022/boot/config/plugins/aril-boot-config-plugins.mjs",
-      "default": "./fesm2022/aril-boot-config-plugins.mjs"
-    }
-  }
-}
+{
+	"name": "aril",
+	"version": "0.0.47",
+	"scripts": {
+		"build": "nx run aril:build:production --skip-nx-cache=true",
+		"create-pack": "npm run build && cd ../../dist && npm pack",
+		"prepublish": "npm run build",
+		"publish": "npm publish ../../dist/"
+	},
+	"peerDependencies": {
+		"@angular/common": "^17.1.0",
+		"@angular/core": "^17.1.0",
+		"@ngneat/transloco": "^6.0.4",
+		"primeflex": "^3.3.1",
+		"primeicons": "^6.0.1",
+		"primeng": "^17.4.0",
+		"devextreme": "^23.2.4",
+		"devextreme-angular": "^23.2.4",
+		"number-format.js": "^2.0.9",
+		"file-saver": "^2.0.5",
+		"xlsx": "^0.18.5",
+		"keycloak-js": "^24.0.2",
+		"keycloak-angular": "^15.2.1",
+		"jspdf": "^2.4.0",
+		"jspdf-autotable": "^3.8.2"
+	},
+	"dependencies": {
+		"tslib": "^2.3.0"
+	},
+	"sideEffects": false
+}

package/project.json

@@ -0,0 +1,39 @@
+{
+	"$schema": "../../node_modules/nx/schemas/project-schema.json",
+	"name": "aril",
+	"projectType": "library",
+	"sourceRoot": "projects/aril/src",
+	"prefix": "aril",
+	"targets": {
+		"build": {
+			"executor": "@angular-devkit/build-angular:ng-packagr",
+			"options": {
+				"project": "projects/aril/ng-package.json"
+			},
+			"configurations": {
+				"production": {
+					"tsConfig": "projects/aril/tsconfig.lib.prod.json"
+				},
+				"development": {
+					"tsConfig": "projects/aril/tsconfig.lib.json"
+				}
+			},
+			"defaultConfiguration": "production",
+			"outputs": ["{workspaceRoot}/dist"]
+		},
+		"test": {
+			"executor": "@angular-devkit/build-angular:karma",
+			"options": {
+				"tsConfig": "projects/aril/tsconfig.spec.json",
+				"polyfills": ["zone.js", "zone.js/testing"]
+			}
+		},
+		"lint": {
+			"executor": "@angular-eslint/builder:lint",
+			"options": {
+				"lintFilePatterns": ["projects/aril/**/*.ts", "projects/aril/**/*.html"]
+			},
+			"outputs": ["{options.outputFile}"]
+		}
+	}
+}

package/{public-api.d.ts → public-api.ts}

@@ -1,2 +1,2 @@
-import './boot/host/index';
-import './boot/mfe/index';
+import './boot/host/index';
+import './boot/mfe/index';

package/theme/index.ts

@@ -1 +1 @@
-export const aril_theme = 'ARiL-THEME';
+export const aril_theme = 'ARiL-THEME';

package/theme/layout/app/breadcrumb/app.breadcrumb.component.html

@@ -1,10 +1,17 @@
-<nav class="layout-breadcrumb">
-	<ol>
-		@for (item of breadcrumbs$ | async; track item; let last = $last) {
-			<li>{{ item.label }}</li>
-			@if (!last) {
-				<li class="layout-breadcrumb-chevron">/</li>
-			}
-		}
-	</ol>
-</nav>
+<nav class="layout-breadcrumb">
+	<ol>
+		<i class="pi pi-home text-xl"></i>
+		@for (item of breadcrumbs$ | async; track item; let last = $last) {
+			<li class="border-bottom-1">
+				<a [routerLink]="item.url" class="no-underline">
+					<span class="text-gray-900 text-lg">{{ item.label }}</span>
+				</a>
+			</li>
+			@if (!last) {
+				<li class="layout-breadcrumb-chevron ">
+					<i class="pi pi-chevron-right font-semibold text-lg text-gray-900"></i>
+				</li>
+			}
+		}
+	</ol>
+</nav>

package/theme/layout/app/breadcrumb/app.breadcrumb.component.ts

@@ -1,50 +1,50 @@
-import { AsyncPipe, NgTemplateOutlet } from '@angular/common';
-import { Component } from '@angular/core';
-import { ActivatedRouteSnapshot, NavigationEnd, Router } from '@angular/router';
-
-import { BehaviorSubject } from 'rxjs';
-import { filter } from 'rxjs/operators';
-
-interface Breadcrumb {
-	label: string;
-	url?: string;
-}
-
-@Component({
-	standalone: true,
-	selector: 'app-breadcrumb',
-	imports: [NgTemplateOutlet, AsyncPipe],
-	templateUrl: './app.breadcrumb.component.html'
-})
-export class AppBreadcrumbComponent {
-	private readonly _breadcrumbs$ = new BehaviorSubject<Breadcrumb[]>([]);
-
-	readonly breadcrumbs$ = this._breadcrumbs$.asObservable();
-
-	constructor(private router: Router) {
-		this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe((event) => {
-			const root = this.router.routerState.snapshot.root;
-			const breadcrumbs: Breadcrumb[] = [];
-			this.addBreadcrumb(root, [], breadcrumbs);
-
-			this._breadcrumbs$.next(breadcrumbs);
-		});
-	}
-
-	private addBreadcrumb(route: ActivatedRouteSnapshot, parentUrl: string[], breadcrumbs: Breadcrumb[]) {
-		const routeUrl = parentUrl.concat(route.url.map((url) => url.path));
-		const breadcrumb = route.data['breadcrumb'];
-		const parentBreadcrumb = route.parent && route.parent.data ? route.parent.data['breadcrumb'] : null;
-
-		if (breadcrumb && breadcrumb !== parentBreadcrumb) {
-			breadcrumbs.push({
-				label: route.data['breadcrumb'],
-				url: '/' + routeUrl.join('/')
-			});
-		}
-
-		if (route.firstChild) {
-			this.addBreadcrumb(route.firstChild, routeUrl, breadcrumbs);
-		}
-	}
-}
+import { AsyncPipe, NgTemplateOutlet } from '@angular/common';
+import { Component } from '@angular/core';
+import { ActivatedRouteSnapshot, NavigationEnd, Router, RouterLink } from '@angular/router';
+
+import { BehaviorSubject } from 'rxjs';
+import { filter } from 'rxjs/operators';
+
+interface Breadcrumb {
+	label: string;
+	url?: string;
+}
+
+@Component({
+	standalone: true,
+	selector: 'app-breadcrumb',
+	imports: [NgTemplateOutlet, AsyncPipe, RouterLink],
+	templateUrl: './app.breadcrumb.component.html'
+})
+export class AppBreadcrumbComponent {
+	private readonly _breadcrumbs$ = new BehaviorSubject<Breadcrumb[]>([]);
+
+	readonly breadcrumbs$ = this._breadcrumbs$.asObservable();
+
+	constructor(private router: Router) {
+		this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe((event) => {
+			const root = this.router.routerState.snapshot.root;
+			const breadcrumbs: Breadcrumb[] = [];
+			this.addBreadcrumb(root, [], breadcrumbs);
+
+			this._breadcrumbs$.next(breadcrumbs);
+		});
+	}
+
+	private addBreadcrumb(route: ActivatedRouteSnapshot, parentUrl: string[], breadcrumbs: Breadcrumb[]) {
+		const routeUrl = parentUrl.concat(route.url.map((url) => url.path));
+		const breadcrumb = route.data['breadcrumb'];
+		const parentBreadcrumb = route.parent && route.parent.data ? route.parent.data['breadcrumb'] : null;
+
+		if (breadcrumb && breadcrumb !== parentBreadcrumb) {
+			breadcrumbs.push({
+				label: route.data['breadcrumb'],
+				url: '/' + routeUrl.join('/')
+			});
+		}
+
+		if (route.firstChild) {
+			this.addBreadcrumb(route.firstChild, routeUrl, breadcrumbs);
+		}
+	}
+}