aril 0.0.63 → 0.0.64

package/fesm2022/aril-theme-layout.mjs

@@ -1,4 +1,4 @@
-import { AsyncPipe, NgTemplateOutlet, NgStyle, NgClass, UpperCasePipe } from '@angular/common';
+import { NgClass, NgTemplateOutlet, AsyncPipe, NgStyle, UpperCasePipe } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Component, signal, effect, Injectable, computed, Input, inject, HostBinding, ViewChild } from '@angular/core';
 import * as i1 from '@angular/router';
@@ -14,8 +14,11 @@ import { MessagesModule } from 'primeng/messages';
 import * as i8 from 'primeng/toast';
 import { ToastModule } from 'primeng/toast';
 import { BehaviorSubject, Subject, filter as filter$1 } from 'rxjs';
+import * as i2 from 'primeng/breadcrumb';
+import { BreadcrumbModule } from 'primeng/breadcrumb';
 import { filter } from 'rxjs/operators';
-import * as i3 from '@angular/forms';
+import * as i3 from 'primeng/api';
+import * as i3$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i6 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
@@ -39,6 +42,7 @@ class AppBreadcrumbComponent {
         this.router = router;
         this._breadcrumbs$ = new BehaviorSubject([]);
         this.breadcrumbs$ = this._breadcrumbs$.asObservable();
+        this.breadcrumbs = [];
         this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe((event) => {
             const root = this.router.routerState.snapshot.root;
             const breadcrumbs = [];
@@ -46,6 +50,20 @@ class AppBreadcrumbComponent {
             this._breadcrumbs$.next(breadcrumbs);
         });
     }
+    ngOnInit() {
+        this.breadcrumbsSubscription = this.breadcrumbs$.subscribe(breadcrumbs => {
+            this.breadcrumbs = breadcrumbs.map(breadcrumb => ({
+                label: breadcrumb.label,
+                url: breadcrumb.url,
+            }));
+            this.breadcrumbs.unshift({ icon: 'pi pi-home', url: '/' });
+        });
+    }
+    ngOnDestroy() {
+        if (this.breadcrumbsSubscription) {
+            this.breadcrumbsSubscription.unsubscribe();
+        }
+    }
     addBreadcrumb(route, parentUrl, breadcrumbs) {
         const routeUrl = parentUrl.concat(route.url.map((url) => url.path));
         const breadcrumb = route.data['breadcrumb'];
@@ -61,11 +79,11 @@ class AppBreadcrumbComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AppBreadcrumbComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: AppBreadcrumbComponent, isStandalone: true, selector: "app-breadcrumb", ngImport: i0, template: "<nav class=\"layout-breadcrumb\">\r\n\t<ol>\r\n\t\t<i class=\"pi pi-home text-xl\"></i>\r\n\t\t@for (item of breadcrumbs$ | async; track item; let last = $last) {\r\n\t\t\t<li class=\"border-bottom-1\">\r\n\t\t\t\t<a [routerLink]=\"item.url\" class=\"no-underline\">\r\n\t\t\t\t\t<span class=\"text-gray-900 text-lg\">{{ item.label }}</span>\r\n\t\t\t\t</a>\r\n\t\t\t</li>\r\n\t\t\t@if (!last) {\r\n\t\t\t\t<li class=\"layout-breadcrumb-chevron \">\r\n\t\t\t\t\t<i class=\"pi pi-chevron-right font-semibold text-lg text-gray-900\"></i>\r\n\t\t\t\t</li>\r\n\t\t\t}\r\n\t\t}\r\n\t</ol>\r\n</nav>\r\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: AppBreadcrumbComponent, isStandalone: true, selector: "app-breadcrumb", ngImport: i0, template: "<p-breadcrumb class=\"max-w-full\" [model]=\"breadcrumbs\" [style]=\"{'border':'none', 'background':'#F9FAFB'}\">\r\n  <ng-template pTemplate=\"item\" let-item>\r\n      <a [routerLink]=\"item.url\">\r\n\t\t\t\t<span [ngClass]=\"[item.icon ? item.icon : '', 'text-color']\"></span>\r\n        <span class=\"text-color\">{{ item.label }}</span>\r\n      </a>\r\n  </ng-template>\r\n</p-breadcrumb>\r\n", dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: BreadcrumbModule }, { kind: "component", type: i2.Breadcrumb, selector: "p-breadcrumb", inputs: ["model", "style", "styleClass", "home", "homeAriaLabel"], outputs: ["onItemClick"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AppBreadcrumbComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'app-breadcrumb', imports: [NgTemplateOutlet, AsyncPipe, RouterLink], template: "<nav class=\"layout-breadcrumb\">\r\n\t<ol>\r\n\t\t<i class=\"pi pi-home text-xl\"></i>\r\n\t\t@for (item of breadcrumbs$ | async; track item; let last = $last) {\r\n\t\t\t<li class=\"border-bottom-1\">\r\n\t\t\t\t<a [routerLink]=\"item.url\" class=\"no-underline\">\r\n\t\t\t\t\t<span class=\"text-gray-900 text-lg\">{{ item.label }}</span>\r\n\t\t\t\t</a>\r\n\t\t\t</li>\r\n\t\t\t@if (!last) {\r\n\t\t\t\t<li class=\"layout-breadcrumb-chevron \">\r\n\t\t\t\t\t<i class=\"pi pi-chevron-right font-semibold text-lg text-gray-900\"></i>\r\n\t\t\t\t</li>\r\n\t\t\t}\r\n\t\t}\r\n\t</ol>\r\n</nav>\r\n" }]
+            args: [{ standalone: true, selector: 'app-breadcrumb', imports: [NgTemplateOutlet, AsyncPipe, RouterLink, BreadcrumbModule, NgClass], template: "<p-breadcrumb class=\"max-w-full\" [model]=\"breadcrumbs\" [style]=\"{'border':'none', 'background':'#F9FAFB'}\">\r\n  <ng-template pTemplate=\"item\" let-item>\r\n      <a [routerLink]=\"item.url\">\r\n\t\t\t\t<span [ngClass]=\"[item.icon ? item.icon : '', 'text-color']\"></span>\r\n        <span class=\"text-color\">{{ item.label }}</span>\r\n      </a>\r\n  </ng-template>\r\n</p-breadcrumb>\r\n" }]
         }], ctorParameters: () => [{ type: i1.Router }] });
 
 class LayoutService {
@@ -356,7 +374,7 @@ class AppConfigComponent {
         this.scale++;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AppConfigComponent, deps: [{ token: LayoutService }, { token: AppMenuService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: AppConfigComponent, isStandalone: true, selector: "app-config", inputs: { minimal: "minimal" }, ngImport: i0, template: "<button class=\"layout-config-button p-link\" type=\"button\" (click)=\"onConfigButtonClick()\">\r\n\t<i class=\"pi pi-cog\"></i>\r\n</button>\r\n\r\n<p-sidebar\r\n\t[(visible)]=\"visible\"\r\n\tposition=\"right\"\r\n\t[transitionOptions]=\"'.3s cubic-bezier(0, 0, 0.2, 1)'\"\r\n\tstyleClass=\"layout-config-sidebar w-18rem\">\r\n\t<h5>Themes</h5>\r\n\t<div class=\"flex flex-wrap row-gap-3\">\r\n\t\t@for (theme of componentThemes; track theme) {\r\n\t\t\t<div class=\"w-3\">\r\n\t\t\t\t<button\r\n\t\t\t\t\ttype=\"button\"\r\n\t\t\t\t\tclass=\"cursor-pointer p-link w-2rem h-2rem border-circle flex-shrink-0 flex align-items-center justify-content-center\"\r\n\t\t\t\t\t(click)=\"changeTheme(theme.name)\"\r\n\t\t\t\t\t[ngStyle]=\"{ 'background-color': theme.color }\">\r\n\t\t\t\t\t@if (theme.name == this.layoutService.config().theme) {\r\n\t\t\t\t\t\t<i class=\"pi pi-check text-white\"></i>\r\n\t\t\t\t\t}\r\n\t\t\t\t</button>\r\n\t\t\t</div>\r\n\t\t}\r\n\t</div>\r\n\r\n\t<h5>Scale</h5>\r\n\t<div class=\"flex align-items-center\">\r\n\t\t<button\r\n\t\t\ticon=\"pi pi-minus\"\r\n\t\t\ttype=\"button\"\r\n\t\t\tpButton\r\n\t\t\t(click)=\"decrementScale()\"\r\n\t\t\tclass=\"p-button-text p-button-rounded w-2rem h-2rem mr-2\"\r\n\t\t\t[disabled]=\"scale === scales[0]\"></button>\r\n\t\t<div class=\"flex gap-2 align-items-center\">\r\n\t\t\t@for (s of scales; track s) {\r\n\t\t\t\t<i class=\"pi pi-circle-fill text-300\" [ngClass]=\"{ 'text-primary-500': s === scale }\"></i>\r\n\t\t\t}\r\n\t\t</div>\r\n\t\t<button\r\n\t\t\ticon=\"pi pi-plus\"\r\n\t\t\ttype=\"button\"\r\n\t\t\tpButton\r\n\t\t\t(click)=\"incrementScale()\"\r\n\t\t\tclass=\"p-button-text p-button-rounded w-2rem h-2rem ml-2\"\r\n\t\t\t[disabled]=\"scale === scales[scales.length - 1]\"></button>\r\n\t</div>\r\n\r\n\t@if (!minimal) {\r\n\t\t<h5>Menu Type</h5>\r\n\t\t<div class=\"flex flex-wrap row-gap-3\">\r\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\r\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"static\" [(ngModel)]=\"menuMode\" inputId=\"mode1\"></p-radioButton>\r\n\t\t\t\t<label for=\"mode1\">Static</label>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\r\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"overlay\" [(ngModel)]=\"menuMode\" inputId=\"mode2\"></p-radioButton>\r\n\t\t\t\t<label for=\"mode2\">Overlay</label>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\r\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"slim\" [(ngModel)]=\"menuMode\" inputId=\"mode3\"></p-radioButton>\r\n\t\t\t\t<label for=\"mode3\">Slim</label>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\r\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"slim-plus\" [(ngModel)]=\"menuMode\" inputId=\"mode4\"></p-radioButton>\r\n\t\t\t\t<label for=\"mode3\">Slim +</label>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\r\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"reveal\" [(ngModel)]=\"menuMode\" inputId=\"mode6\"></p-radioButton>\r\n\t\t\t\t<label for=\"mode5\">Reveal</label>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\r\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"drawer\" [(ngModel)]=\"menuMode\" inputId=\"mode7\"></p-radioButton>\r\n\t\t\t\t<label for=\"mode6\">Drawer</label>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\r\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"horizontal\" [(ngModel)]=\"menuMode\" inputId=\"mode5\"></p-radioButton>\r\n\t\t\t\t<label for=\"mode4\">Horizontal</label>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<h5>Menu Theme</h5>\r\n\t\t<div class=\"field-radiobutton\">\r\n\t\t\t<p-radioButton\r\n\t\t\t\tname=\"menuTheme\"\r\n\t\t\t\tvalue=\"colorScheme\"\r\n\t\t\t\t[(ngModel)]=\"menuTheme\"\r\n\t\t\t\tinputId=\"menutheme-colorscheme\"></p-radioButton>\r\n\t\t\t<label for=\"menutheme-colorscheme\">Color Scheme</label>\r\n\t\t</div>\r\n\t\t<div class=\"field-radiobutton\">\r\n\t\t\t<p-radioButton\r\n\t\t\t\tname=\"menuTheme\"\r\n\t\t\t\tvalue=\"primaryColor\"\r\n\t\t\t\t[(ngModel)]=\"menuTheme\"\r\n\t\t\t\tinputId=\"menutheme-primarycolor\"></p-radioButton>\r\n\t\t\t<label for=\"menutheme-primarycolor\">Primary Color</label>\r\n\t\t</div>\r\n\t\t<div class=\"field-radiobutton\">\r\n\t\t\t<p-radioButton\r\n\t\t\t\tname=\"menuTheme\"\r\n\t\t\t\tvalue=\"transparent\"\r\n\t\t\t\t[(ngModel)]=\"menuTheme\"\r\n\t\t\t\tinputId=\"menutheme-transparent\"></p-radioButton>\r\n\t\t\t<label for=\"menutheme-transparent\">Transparent</label>\r\n\t\t</div>\r\n\t}\r\n\r\n\t<h5>Color Scheme</h5>\r\n\t<div class=\"field-radiobutton\">\r\n\t\t<p-radioButton name=\"colorScheme\" value=\"light\" [(ngModel)]=\"colorScheme\" inputId=\"mode-light\"></p-radioButton>\r\n\t\t<label for=\"mode-light\">Light</label>\r\n\t</div>\r\n\t<div class=\"field-radiobutton\">\r\n\t\t<p-radioButton name=\"colorScheme\" value=\"dim\" [(ngModel)]=\"colorScheme\" inputId=\"mode-dim\"></p-radioButton>\r\n\t\t<label for=\"mode-dim\">Dim</label>\r\n\t</div>\r\n\t<div class=\"field-radiobutton\">\r\n\t\t<p-radioButton name=\"colorScheme\" value=\"dark\" [(ngModel)]=\"colorScheme\" inputId=\"mode-dark\"></p-radioButton>\r\n\t\t<label for=\"mode-dark\">Dark</label>\r\n\t</div>\r\n\r\n\t@if (!minimal) {\r\n\t\t<h5>Input Style</h5>\r\n\t\t<div class=\"flex\">\r\n\t\t\t<div class=\"field-radiobutton flex-1\">\r\n\t\t\t\t<p-radioButton\r\n\t\t\t\t\tname=\"inputStyle\"\r\n\t\t\t\t\tvalue=\"outlined\"\r\n\t\t\t\t\t[(ngModel)]=\"inputStyle\"\r\n\t\t\t\t\tinputId=\"outlined_input\"></p-radioButton>\r\n\t\t\t\t<label for=\"outlined_input\">Outlined</label>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"field-radiobutton flex-1\">\r\n\t\t\t\t<p-radioButton name=\"inputStyle\" value=\"filled\" [(ngModel)]=\"inputStyle\" inputId=\"filled_input\"></p-radioButton>\r\n\t\t\t\t<label for=\"filled_input\">Filled</label>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<h5>Ripple Effect</h5>\r\n\t\t<p-inputSwitch [(ngModel)]=\"ripple\"></p-inputSwitch>\r\n\t}\r\n</p-sidebar>\r\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SidebarModule }, { kind: "component", type: i4.Sidebar, selector: "p-sidebar", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "ngmodule", type: RadioButtonModule }, { kind: "component", type: i5.RadioButton, selector: "p-radioButton", inputs: ["value", "formControlName", "name", "disabled", "label", "variant", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "labelStyleClass", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i6.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "ngmodule", type: InputSwitchModule }, { kind: "component", type: i7.InputSwitch, selector: "p-inputSwitch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: AppConfigComponent, isStandalone: true, selector: "app-config", inputs: { minimal: "minimal" }, ngImport: i0, template: "<button class=\"layout-config-button p-link\" type=\"button\" (click)=\"onConfigButtonClick()\">\r\n\t<i class=\"pi pi-cog\"></i>\r\n</button>\r\n\r\n<p-sidebar\r\n\t[(visible)]=\"visible\"\r\n\tposition=\"right\"\r\n\t[transitionOptions]=\"'.3s cubic-bezier(0, 0, 0.2, 1)'\"\r\n\tstyleClass=\"layout-config-sidebar w-18rem\">\r\n\t<h5>Themes</h5>\r\n\t<div class=\"flex flex-wrap row-gap-3\">\r\n\t\t@for (theme of componentThemes; track theme) {\r\n\t\t\t<div class=\"w-3\">\r\n\t\t\t\t<button\r\n\t\t\t\t\ttype=\"button\"\r\n\t\t\t\t\tclass=\"cursor-pointer p-link w-2rem h-2rem border-circle flex-shrink-0 flex align-items-center justify-content-center\"\r\n\t\t\t\t\t(click)=\"changeTheme(theme.name)\"\r\n\t\t\t\t\t[ngStyle]=\"{ 'background-color': theme.color }\">\r\n\t\t\t\t\t@if (theme.name == this.layoutService.config().theme) {\r\n\t\t\t\t\t\t<i class=\"pi pi-check text-white\"></i>\r\n\t\t\t\t\t}\r\n\t\t\t\t</button>\r\n\t\t\t</div>\r\n\t\t}\r\n\t</div>\r\n\r\n\t<h5>Scale</h5>\r\n\t<div class=\"flex align-items-center\">\r\n\t\t<button\r\n\t\t\ticon=\"pi pi-minus\"\r\n\t\t\ttype=\"button\"\r\n\t\t\tpButton\r\n\t\t\t(click)=\"decrementScale()\"\r\n\t\t\tclass=\"p-button-text p-button-rounded w-2rem h-2rem mr-2\"\r\n\t\t\t[disabled]=\"scale === scales[0]\"></button>\r\n\t\t<div class=\"flex gap-2 align-items-center\">\r\n\t\t\t@for (s of scales; track s) {\r\n\t\t\t\t<i class=\"pi pi-circle-fill text-300\" [ngClass]=\"{ 'text-primary-500': s === scale }\"></i>\r\n\t\t\t}\r\n\t\t</div>\r\n\t\t<button\r\n\t\t\ticon=\"pi pi-plus\"\r\n\t\t\ttype=\"button\"\r\n\t\t\tpButton\r\n\t\t\t(click)=\"incrementScale()\"\r\n\t\t\tclass=\"p-button-text p-button-rounded w-2rem h-2rem ml-2\"\r\n\t\t\t[disabled]=\"scale === scales[scales.length - 1]\"></button>\r\n\t</div>\r\n\r\n\t@if (!minimal) {\r\n\t\t<h5>Menu Type</h5>\r\n\t\t<div class=\"flex flex-wrap row-gap-3\">\r\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\r\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"static\" [(ngModel)]=\"menuMode\" inputId=\"mode1\"></p-radioButton>\r\n\t\t\t\t<label for=\"mode1\">Static</label>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\r\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"overlay\" [(ngModel)]=\"menuMode\" inputId=\"mode2\"></p-radioButton>\r\n\t\t\t\t<label for=\"mode2\">Overlay</label>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\r\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"slim\" [(ngModel)]=\"menuMode\" inputId=\"mode3\"></p-radioButton>\r\n\t\t\t\t<label for=\"mode3\">Slim</label>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\r\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"slim-plus\" [(ngModel)]=\"menuMode\" inputId=\"mode4\"></p-radioButton>\r\n\t\t\t\t<label for=\"mode3\">Slim +</label>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\r\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"reveal\" [(ngModel)]=\"menuMode\" inputId=\"mode6\"></p-radioButton>\r\n\t\t\t\t<label for=\"mode5\">Reveal</label>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\r\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"drawer\" [(ngModel)]=\"menuMode\" inputId=\"mode7\"></p-radioButton>\r\n\t\t\t\t<label for=\"mode6\">Drawer</label>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\r\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"horizontal\" [(ngModel)]=\"menuMode\" inputId=\"mode5\"></p-radioButton>\r\n\t\t\t\t<label for=\"mode4\">Horizontal</label>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<h5>Menu Theme</h5>\r\n\t\t<div class=\"field-radiobutton\">\r\n\t\t\t<p-radioButton\r\n\t\t\t\tname=\"menuTheme\"\r\n\t\t\t\tvalue=\"colorScheme\"\r\n\t\t\t\t[(ngModel)]=\"menuTheme\"\r\n\t\t\t\tinputId=\"menutheme-colorscheme\"></p-radioButton>\r\n\t\t\t<label for=\"menutheme-colorscheme\">Color Scheme</label>\r\n\t\t</div>\r\n\t\t<div class=\"field-radiobutton\">\r\n\t\t\t<p-radioButton\r\n\t\t\t\tname=\"menuTheme\"\r\n\t\t\t\tvalue=\"primaryColor\"\r\n\t\t\t\t[(ngModel)]=\"menuTheme\"\r\n\t\t\t\tinputId=\"menutheme-primarycolor\"></p-radioButton>\r\n\t\t\t<label for=\"menutheme-primarycolor\">Primary Color</label>\r\n\t\t</div>\r\n\t\t<div class=\"field-radiobutton\">\r\n\t\t\t<p-radioButton\r\n\t\t\t\tname=\"menuTheme\"\r\n\t\t\t\tvalue=\"transparent\"\r\n\t\t\t\t[(ngModel)]=\"menuTheme\"\r\n\t\t\t\tinputId=\"menutheme-transparent\"></p-radioButton>\r\n\t\t\t<label for=\"menutheme-transparent\">Transparent</label>\r\n\t\t</div>\r\n\t}\r\n\r\n\t<h5>Color Scheme</h5>\r\n\t<div class=\"field-radiobutton\">\r\n\t\t<p-radioButton name=\"colorScheme\" value=\"light\" [(ngModel)]=\"colorScheme\" inputId=\"mode-light\"></p-radioButton>\r\n\t\t<label for=\"mode-light\">Light</label>\r\n\t</div>\r\n\t<div class=\"field-radiobutton\">\r\n\t\t<p-radioButton name=\"colorScheme\" value=\"dim\" [(ngModel)]=\"colorScheme\" inputId=\"mode-dim\"></p-radioButton>\r\n\t\t<label for=\"mode-dim\">Dim</label>\r\n\t</div>\r\n\t<div class=\"field-radiobutton\">\r\n\t\t<p-radioButton name=\"colorScheme\" value=\"dark\" [(ngModel)]=\"colorScheme\" inputId=\"mode-dark\"></p-radioButton>\r\n\t\t<label for=\"mode-dark\">Dark</label>\r\n\t</div>\r\n\r\n\t@if (!minimal) {\r\n\t\t<h5>Input Style</h5>\r\n\t\t<div class=\"flex\">\r\n\t\t\t<div class=\"field-radiobutton flex-1\">\r\n\t\t\t\t<p-radioButton\r\n\t\t\t\t\tname=\"inputStyle\"\r\n\t\t\t\t\tvalue=\"outlined\"\r\n\t\t\t\t\t[(ngModel)]=\"inputStyle\"\r\n\t\t\t\t\tinputId=\"outlined_input\"></p-radioButton>\r\n\t\t\t\t<label for=\"outlined_input\">Outlined</label>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"field-radiobutton flex-1\">\r\n\t\t\t\t<p-radioButton name=\"inputStyle\" value=\"filled\" [(ngModel)]=\"inputStyle\" inputId=\"filled_input\"></p-radioButton>\r\n\t\t\t\t<label for=\"filled_input\">Filled</label>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<h5>Ripple Effect</h5>\r\n\t\t<p-inputSwitch [(ngModel)]=\"ripple\"></p-inputSwitch>\r\n\t}\r\n</p-sidebar>\r\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SidebarModule }, { kind: "component", type: i4.Sidebar, selector: "p-sidebar", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "ngmodule", type: RadioButtonModule }, { kind: "component", type: i5.RadioButton, selector: "p-radioButton", inputs: ["value", "formControlName", "name", "disabled", "label", "variant", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "labelStyleClass", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i6.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "ngmodule", type: InputSwitchModule }, { kind: "component", type: i7.InputSwitch, selector: "p-inputSwitch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AppConfigComponent, decorators: [{
             type: Component,
@@ -822,11 +840,11 @@ class AppTopbarComponent {
         this.layoutService.showConfigSidebar();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AppTopbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: AppTopbarComponent, isStandalone: true, selector: "app-topbar", viewQueries: [{ propertyName: "menuButton", first: true, predicate: ["menubutton"], descendants: true }], ngImport: i0, template: "<div class=\"layout-topbar\">\r\n\t<div class=\"topbar-start\">\r\n\t\t<button #menubutton type=\"button\" class=\"topbar-menubutton p-link p-trigger\" (click)=\"onMenuButtonClick()\">\r\n\t\t\t<i class=\"pi pi-bars\"></i>\r\n\t\t</button>\r\n\r\n\t\t<app-breadcrumb class=\"topbar-breadcrumb\"></app-breadcrumb>\r\n\t</div>\r\n\r\n\t<div class=\"topbar-end\">\r\n\t\t<ul class=\"topbar-menu\">\r\n\t\t\t<li class=\"topbar-search\">\r\n\t\t\t\t<span class=\"p-input-icon-left\">\r\n\t\t\t\t\t<i class=\"pi pi-search\"></i>\r\n\t\t\t\t\t<input\r\n\t\t\t\t\t\ttype=\"text\"\r\n\t\t\t\t\t\tpInputText\r\n\t\t\t\t\t\tplaceholder=\"Search\"\r\n\t\t\t\t\t\tclass=\"p-inputtext p-component p-element w-12rem sm:w-full\" />\r\n\t\t\t\t</span>\r\n\t\t\t</li>\r\n\r\n\t\t\t<li class=\"ml-3\">\r\n\t\t\t\t<button\r\n\t\t\t\t\tpButton\r\n\t\t\t\t\ttype=\"button\"\r\n\t\t\t\t\ticon=\"pi pi-cog\"\r\n\t\t\t\t\tclass=\"p-button-text p-button-secondary p-button-rounded flex-shrink-0\"\r\n\t\t\t\t\t(click)=\"onConfigButtonClick()\"></button>\r\n\t\t\t</li>\r\n\r\n\t\t\t<li class=\"ml-3\">\r\n\t\t\t\t<button\r\n\t\t\t\t\tpButton\r\n\t\t\t\t\ttype=\"button\"\r\n\t\t\t\t\ticon=\"pi pi-bell\"\r\n\t\t\t\t\tclass=\"p-button-text p-button-secondary p-button-rounded flex-shrink-0\"\r\n\t\t\t\t\t(click)=\"onConfigButtonClick()\"></button>\r\n\t\t\t</li>\r\n\r\n\t\t\t<!-- <li class=\"ml-3\" style=\"border: 1px solid crimson; border-radius: 50%\">\r\n\t\t\t\t<button\r\n\t\t\t\t\tpButton\r\n\t\t\t\t\ttype=\"button\"\r\n\t\t\t\t\ticon=\"pi pi-power-off\"\r\n\t\t\t\t\tclass=\"p-button-text p-button-secondary p-button-rounded flex-shrink-0\"\r\n\t\t\t\t\t(click)=\"keyCloakManager.logout()\"></button>\r\n\t\t\t</li> -->\r\n\r\n\t\t\t<li class=\"topbar-profile\">\r\n\t\t\t\t<button type=\"button\" (click)=\"onProfileButtonClick()\" class=\"profile-topbar\"\r\n\t\t\t\tonmouseover=\"this.style.backgroundColor = '#ffffff'; this.style.transform = 'scale(1)'; this.style.color = 'var(--primary-color)';\"\r\n\t\t\t\tonmouseout=\"this.style.backgroundColor = 'var(--primary-color)'; this.style.transform = 'scale(1)'; this.style.color = '#ffffff';\">\r\n\t\t\t\t<!-- <img src=\"assets/images/avatar.png\" alt=\"Profile\" /> -->\r\n\t\t\t\t{{username[0] | uppercase}}\r\n\t\t\t\t</button>\r\n\t\t\t</li>\r\n\t\t</ul>\r\n\t</div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i6.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: AppBreadcrumbComponent, selector: "app-breadcrumb" }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: AppTopbarComponent, isStandalone: true, selector: "app-topbar", viewQueries: [{ propertyName: "menuButton", first: true, predicate: ["menubutton"], descendants: true }], ngImport: i0, template: "<div class=\"layout-topbar\">\r\n\t<div class=\"topbar-start\">\r\n\t\t<button #menubutton type=\"button\" class=\"topbar-menubutton p-link p-trigger\" (click)=\"onMenuButtonClick()\">\r\n\t\t\t<i class=\"pi pi-bars\"></i>\r\n\t\t</button>\r\n\t</div>\r\n\r\n\t<div class=\"topbar-end\">\r\n\t\t<ul class=\"topbar-menu\">\r\n\t\t\t<li class=\"topbar-search\">\r\n\t\t\t\t<span class=\"p-input-icon-left\">\r\n\t\t\t\t\t<i class=\"pi pi-search\"></i>\r\n\t\t\t\t\t<input\r\n\t\t\t\t\t\ttype=\"text\"\r\n\t\t\t\t\t\tpInputText\r\n\t\t\t\t\t\tplaceholder=\"Search\"\r\n\t\t\t\t\t\tclass=\"p-inputtext p-component p-element w-12rem sm:w-full\" />\r\n\t\t\t\t</span>\r\n\t\t\t</li>\r\n\r\n\t\t\t<li class=\"ml-3\">\r\n\t\t\t\t<button\r\n\t\t\t\t\tpButton\r\n\t\t\t\t\ttype=\"button\"\r\n\t\t\t\t\ticon=\"pi pi-cog\"\r\n\t\t\t\t\tclass=\"p-button-text p-button-secondary p-button-rounded flex-shrink-0\"\r\n\t\t\t\t\t(click)=\"onConfigButtonClick()\"></button>\r\n\t\t\t</li>\r\n\r\n\t\t\t<li class=\"ml-3\">\r\n\t\t\t\t<button\r\n\t\t\t\t\tpButton\r\n\t\t\t\t\ttype=\"button\"\r\n\t\t\t\t\ticon=\"pi pi-bell\"\r\n\t\t\t\t\tclass=\"p-button-text p-button-secondary p-button-rounded flex-shrink-0\"\r\n\t\t\t\t\t(click)=\"onConfigButtonClick()\"></button>\r\n\t\t\t</li>\r\n\r\n\t\t\t<!-- <li class=\"ml-3\" style=\"border: 1px solid crimson; border-radius: 50%\">\r\n\t\t\t\t<button\r\n\t\t\t\t\tpButton\r\n\t\t\t\t\ttype=\"button\"\r\n\t\t\t\t\ticon=\"pi pi-power-off\"\r\n\t\t\t\t\tclass=\"p-button-text p-button-secondary p-button-rounded flex-shrink-0\"\r\n\t\t\t\t\t(click)=\"keyCloakManager.logout()\"></button>\r\n\t\t\t</li> -->\r\n\r\n\t\t\t<li class=\"topbar-profile\">\r\n\t\t\t\t<button type=\"button\" (click)=\"onProfileButtonClick()\" class=\"profile-topbar\"\r\n\t\t\t\tonmouseover=\"this.style.backgroundColor = '#ffffff'; this.style.transform = 'scale(1)'; this.style.color = 'var(--primary-color)';\"\r\n\t\t\t\tonmouseout=\"this.style.backgroundColor = 'var(--primary-color)'; this.style.transform = 'scale(1)'; this.style.color = '#ffffff';\">\r\n\t\t\t\t<!-- <img src=\"assets/images/avatar.png\" alt=\"Profile\" /> -->\r\n\t\t\t\t{{username[0] | uppercase}}\r\n\t\t\t\t</button>\r\n\t\t\t</li>\r\n\t\t</ul>\r\n\t</div>\r\n</div>\r\n<app-breadcrumb class=\"topbar-breadcrumb\"></app-breadcrumb>\r\n", dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i6.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: AppBreadcrumbComponent, selector: "app-breadcrumb" }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AppTopbarComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'app-topbar', imports: [ButtonModule, AppBreadcrumbComponent, UpperCasePipe], template: "<div class=\"layout-topbar\">\r\n\t<div class=\"topbar-start\">\r\n\t\t<button #menubutton type=\"button\" class=\"topbar-menubutton p-link p-trigger\" (click)=\"onMenuButtonClick()\">\r\n\t\t\t<i class=\"pi pi-bars\"></i>\r\n\t\t</button>\r\n\r\n\t\t<app-breadcrumb class=\"topbar-breadcrumb\"></app-breadcrumb>\r\n\t</div>\r\n\r\n\t<div class=\"topbar-end\">\r\n\t\t<ul class=\"topbar-menu\">\r\n\t\t\t<li class=\"topbar-search\">\r\n\t\t\t\t<span class=\"p-input-icon-left\">\r\n\t\t\t\t\t<i class=\"pi pi-search\"></i>\r\n\t\t\t\t\t<input\r\n\t\t\t\t\t\ttype=\"text\"\r\n\t\t\t\t\t\tpInputText\r\n\t\t\t\t\t\tplaceholder=\"Search\"\r\n\t\t\t\t\t\tclass=\"p-inputtext p-component p-element w-12rem sm:w-full\" />\r\n\t\t\t\t</span>\r\n\t\t\t</li>\r\n\r\n\t\t\t<li class=\"ml-3\">\r\n\t\t\t\t<button\r\n\t\t\t\t\tpButton\r\n\t\t\t\t\ttype=\"button\"\r\n\t\t\t\t\ticon=\"pi pi-cog\"\r\n\t\t\t\t\tclass=\"p-button-text p-button-secondary p-button-rounded flex-shrink-0\"\r\n\t\t\t\t\t(click)=\"onConfigButtonClick()\"></button>\r\n\t\t\t</li>\r\n\r\n\t\t\t<li class=\"ml-3\">\r\n\t\t\t\t<button\r\n\t\t\t\t\tpButton\r\n\t\t\t\t\ttype=\"button\"\r\n\t\t\t\t\ticon=\"pi pi-bell\"\r\n\t\t\t\t\tclass=\"p-button-text p-button-secondary p-button-rounded flex-shrink-0\"\r\n\t\t\t\t\t(click)=\"onConfigButtonClick()\"></button>\r\n\t\t\t</li>\r\n\r\n\t\t\t<!-- <li class=\"ml-3\" style=\"border: 1px solid crimson; border-radius: 50%\">\r\n\t\t\t\t<button\r\n\t\t\t\t\tpButton\r\n\t\t\t\t\ttype=\"button\"\r\n\t\t\t\t\ticon=\"pi pi-power-off\"\r\n\t\t\t\t\tclass=\"p-button-text p-button-secondary p-button-rounded flex-shrink-0\"\r\n\t\t\t\t\t(click)=\"keyCloakManager.logout()\"></button>\r\n\t\t\t</li> -->\r\n\r\n\t\t\t<li class=\"topbar-profile\">\r\n\t\t\t\t<button type=\"button\" (click)=\"onProfileButtonClick()\" class=\"profile-topbar\"\r\n\t\t\t\tonmouseover=\"this.style.backgroundColor = '#ffffff'; this.style.transform = 'scale(1)'; this.style.color = 'var(--primary-color)';\"\r\n\t\t\t\tonmouseout=\"this.style.backgroundColor = 'var(--primary-color)'; this.style.transform = 'scale(1)'; this.style.color = '#ffffff';\">\r\n\t\t\t\t<!-- <img src=\"assets/images/avatar.png\" alt=\"Profile\" /> -->\r\n\t\t\t\t{{username[0] | uppercase}}\r\n\t\t\t\t</button>\r\n\t\t\t</li>\r\n\t\t</ul>\r\n\t</div>\r\n</div>\r\n" }]
+            args: [{ standalone: true, selector: 'app-topbar', imports: [ButtonModule, AppBreadcrumbComponent, UpperCasePipe], template: "<div class=\"layout-topbar\">\r\n\t<div class=\"topbar-start\">\r\n\t\t<button #menubutton type=\"button\" class=\"topbar-menubutton p-link p-trigger\" (click)=\"onMenuButtonClick()\">\r\n\t\t\t<i class=\"pi pi-bars\"></i>\r\n\t\t</button>\r\n\t</div>\r\n\r\n\t<div class=\"topbar-end\">\r\n\t\t<ul class=\"topbar-menu\">\r\n\t\t\t<li class=\"topbar-search\">\r\n\t\t\t\t<span class=\"p-input-icon-left\">\r\n\t\t\t\t\t<i class=\"pi pi-search\"></i>\r\n\t\t\t\t\t<input\r\n\t\t\t\t\t\ttype=\"text\"\r\n\t\t\t\t\t\tpInputText\r\n\t\t\t\t\t\tplaceholder=\"Search\"\r\n\t\t\t\t\t\tclass=\"p-inputtext p-component p-element w-12rem sm:w-full\" />\r\n\t\t\t\t</span>\r\n\t\t\t</li>\r\n\r\n\t\t\t<li class=\"ml-3\">\r\n\t\t\t\t<button\r\n\t\t\t\t\tpButton\r\n\t\t\t\t\ttype=\"button\"\r\n\t\t\t\t\ticon=\"pi pi-cog\"\r\n\t\t\t\t\tclass=\"p-button-text p-button-secondary p-button-rounded flex-shrink-0\"\r\n\t\t\t\t\t(click)=\"onConfigButtonClick()\"></button>\r\n\t\t\t</li>\r\n\r\n\t\t\t<li class=\"ml-3\">\r\n\t\t\t\t<button\r\n\t\t\t\t\tpButton\r\n\t\t\t\t\ttype=\"button\"\r\n\t\t\t\t\ticon=\"pi pi-bell\"\r\n\t\t\t\t\tclass=\"p-button-text p-button-secondary p-button-rounded flex-shrink-0\"\r\n\t\t\t\t\t(click)=\"onConfigButtonClick()\"></button>\r\n\t\t\t</li>\r\n\r\n\t\t\t<!-- <li class=\"ml-3\" style=\"border: 1px solid crimson; border-radius: 50%\">\r\n\t\t\t\t<button\r\n\t\t\t\t\tpButton\r\n\t\t\t\t\ttype=\"button\"\r\n\t\t\t\t\ticon=\"pi pi-power-off\"\r\n\t\t\t\t\tclass=\"p-button-text p-button-secondary p-button-rounded flex-shrink-0\"\r\n\t\t\t\t\t(click)=\"keyCloakManager.logout()\"></button>\r\n\t\t\t</li> -->\r\n\r\n\t\t\t<li class=\"topbar-profile\">\r\n\t\t\t\t<button type=\"button\" (click)=\"onProfileButtonClick()\" class=\"profile-topbar\"\r\n\t\t\t\tonmouseover=\"this.style.backgroundColor = '#ffffff'; this.style.transform = 'scale(1)'; this.style.color = 'var(--primary-color)';\"\r\n\t\t\t\tonmouseout=\"this.style.backgroundColor = 'var(--primary-color)'; this.style.transform = 'scale(1)'; this.style.color = '#ffffff';\">\r\n\t\t\t\t<!-- <img src=\"assets/images/avatar.png\" alt=\"Profile\" /> -->\r\n\t\t\t\t{{username[0] | uppercase}}\r\n\t\t\t\t</button>\r\n\t\t\t</li>\r\n\t\t</ul>\r\n\t</div>\r\n</div>\r\n<app-breadcrumb class=\"topbar-breadcrumb\"></app-breadcrumb>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { menuButton: [{
                 type: ViewChild,
                 args: ['menubutton']