aril 0.0.24 → 0.0.26

package/fesm2022/aril-theme-layout.mjs

@@ -1,10 +1,9 @@
-import { NgClass, AsyncPipe, NgTemplateOutlet, NgStyle } from '@angular/common';
+import { AsyncPipe, NgTemplateOutlet, NgStyle, NgClass } from '@angular/common';
 import * as i0 from '@angular/core';
-import { signal, computed, Injectable, effect, Component, Input, HostBinding, ViewChild, inject } from '@angular/core';
-import * as i2 from '@angular/router';
+import { Component, signal, effect, Injectable, computed, Input, HostBinding, ViewChild, inject } from '@angular/core';
+import * as i1 from '@angular/router';
 import { NavigationEnd, RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
-import { Subject, BehaviorSubject, filter as filter$1 } from 'rxjs';
-import * as i4$1 from 'primeng/confirmdialog';
+import * as i4$2 from 'primeng/confirmdialog';
 import { ConfirmDialogModule } from 'primeng/confirmdialog';
 import * as i5$2 from 'primeng/confirmpopup';
 import { ConfirmPopupModule } from 'primeng/confirmpopup';
@@ -14,73 +13,61 @@ import * as i7$1 from 'primeng/messages';
 import { MessagesModule } from 'primeng/messages';
 import * as i8 from 'primeng/toast';
 import { ToastModule } from 'primeng/toast';
-import { trigger, state, style, transition, animate } from '@angular/animations';
-import { DomHandler } from 'primeng/dom';
-import * as i5 from 'primeng/ripple';
-import { RippleModule } from 'primeng/ripple';
-import * as i4 from 'primeng/tooltip';
-import { TooltipModule } from 'primeng/tooltip';
+import { BehaviorSubject, Subject, filter as filter$1 } from 'rxjs';
 import { filter } from 'rxjs/operators';
+import * as i3 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
 import * as i6 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
-import * as i3 from 'primeng/tag';
-import { TagModule } from 'primeng/tag';
-import * as i2$1 from 'primeng/sidebar';
-import { SidebarModule } from 'primeng/sidebar';
-import * as i3$1 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
-import * as i5$1 from 'primeng/radiobutton';
-import { RadioButtonModule } from 'primeng/radiobutton';
 import * as i7 from 'primeng/inputswitch';
 import { InputSwitchModule } from 'primeng/inputswitch';
+import * as i5 from 'primeng/radiobutton';
+import { RadioButtonModule } from 'primeng/radiobutton';
+import * as i4 from 'primeng/sidebar';
+import { SidebarModule } from 'primeng/sidebar';
+import * as i3$1 from 'primeng/tag';
+import { TagModule } from 'primeng/tag';
+import { trigger, state, style, transition, animate } from '@angular/animations';
+import { DomHandler } from 'primeng/dom';
+import * as i5$1 from 'primeng/ripple';
+import { RippleModule } from 'primeng/ripple';
+import * as i4$1 from 'primeng/tooltip';
+import { TooltipModule } from 'primeng/tooltip';
+import { KeycloakManager } from 'aril/keycloak';
 
-class AppMenuService {
-    constructor() {
-        this.menuSource = new Subject();
-        this.resetSource = new Subject();
-        this.menuConfig = signal({ items: [], prefix: undefined });
-        this.subMenuConfig = signal({ items: [], prefix: undefined });
-        this.menuItems = computed(() => {
-            const config = this.menuConfig();
-            if (config.prefix)
-                return config.items.map((item) => this.addPrefix(item, config.prefix));
-            else
-                return config.items;
-        });
-        this.subMenuItems = computed(() => {
-            const config = this.subMenuConfig();
-            if (config.prefix)
-                return config.items.map((item) => this.addPrefix(item, config.prefix));
-            else
-                return config.items;
+class AppBreadcrumbComponent {
+    constructor(router) {
+        this.router = router;
+        this._breadcrumbs$ = new BehaviorSubject([]);
+        this.breadcrumbs$ = this._breadcrumbs$.asObservable();
+        this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe((event) => {
+            const root = this.router.routerState.snapshot.root;
+            const breadcrumbs = [];
+            this.addBreadcrumb(root, [], breadcrumbs);
+            this._breadcrumbs$.next(breadcrumbs);
         });
-        this.menuSource$ = this.menuSource.asObservable();
-        this.resetSource$ = this.resetSource.asObservable();
     }
-    addPrefix(menuItem, appPrefix) {
-        if (menuItem.items) {
-            menuItem.items = menuItem.items.map((item) => this.addPrefix(item, appPrefix));
+    addBreadcrumb(route, parentUrl, breadcrumbs) {
+        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('/')
+            });
         }
-        else {
-            menuItem.routerLink = `/${appPrefix}/${menuItem.routerLink}`;
+        if (route.firstChild) {
+            this.addBreadcrumb(route.firstChild, routeUrl, breadcrumbs);
         }
-        return menuItem;
     }
-    onMenuStateChange(event) {
-        this.menuSource.next(event);
-    }
-    reset() {
-        this.resetSource.next(true);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AppMenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AppMenuService, providedIn: 'root' }); }
+    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\">\n\t<ol>\n\t\t@for (item of breadcrumbs$ | async; track item; let last = $last) {\n\t\t\t<li>{{ item.label }}</li>\n\t\t\t@if (!last) {\n\t\t\t\t<li class=\"layout-breadcrumb-chevron\">/</li>\n\t\t\t}\n\t\t}\n\t</ol>\n</nav>\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AppMenuService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
+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], template: "<nav class=\"layout-breadcrumb\">\n\t<ol>\n\t\t@for (item of breadcrumbs$ | async; track item; let last = $last) {\n\t\t\t<li>{{ item.label }}</li>\n\t\t\t@if (!last) {\n\t\t\t\t<li class=\"layout-breadcrumb-chevron\">/</li>\n\t\t\t}\n\t\t}\n\t</ol>\n</nav>\n" }]
+        }], ctorParameters: () => [{ type: i1.Router }] });
 
 class LayoutService {
     constructor() {
@@ -206,6 +193,189 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
+class AppMenuService {
+    constructor() {
+        this.menuSource = new Subject();
+        this.resetSource = new Subject();
+        this.menuConfig = signal({ items: [], prefix: undefined });
+        this.subMenuConfig = signal({ items: [], prefix: undefined });
+        this.menuItems = computed(() => {
+            const config = this.menuConfig();
+            if (config.prefix)
+                return config.items.map((item) => this.addPrefix(item, config.prefix));
+            else
+                return config.items;
+        });
+        this.subMenuItems = computed(() => {
+            const config = this.subMenuConfig();
+            if (config.prefix)
+                return config.items.map((item) => this.addPrefix(item, config.prefix));
+            else
+                return config.items;
+        });
+        this.menuSource$ = this.menuSource.asObservable();
+        this.resetSource$ = this.resetSource.asObservable();
+    }
+    addPrefix(menuItem, appPrefix) {
+        if (menuItem.items) {
+            menuItem.items = menuItem.items.map((item) => this.addPrefix(item, appPrefix));
+        }
+        else {
+            menuItem.routerLink = `/${appPrefix}/${menuItem.routerLink}`;
+        }
+        return menuItem;
+    }
+    onMenuStateChange(event) {
+        this.menuSource.next(event);
+    }
+    reset() {
+        this.resetSource.next(true);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AppMenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AppMenuService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AppMenuService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class AppConfigComponent {
+    constructor(layoutService, menuService) {
+        this.layoutService = layoutService;
+        this.menuService = menuService;
+        this.minimal = false;
+        this.componentThemes = [];
+        this.scales = [12, 13, 14, 15, 16];
+    }
+    get visible() {
+        return this.layoutService.state.configSidebarVisible;
+    }
+    set visible(_val) {
+        this.layoutService.state.configSidebarVisible = _val;
+    }
+    get scale() {
+        return this.layoutService.config().scale;
+    }
+    set scale(_val) {
+        this.layoutService.config.update((config) => ({
+            ...config,
+            scale: _val
+        }));
+    }
+    get menuMode() {
+        return this.layoutService.config().menuMode;
+    }
+    set menuMode(_val) {
+        this.layoutService.config.update((config) => ({
+            ...config,
+            menuMode: _val
+        }));
+        if (this.layoutService.isSlimPlus() || this.layoutService.isSlim() || this.layoutService.isHorizontal()) {
+            this.menuService.reset();
+        }
+    }
+    get colorScheme() {
+        return this.layoutService.config().colorScheme;
+    }
+    set colorScheme(_val) {
+        this.layoutService.config.update((config) => ({
+            ...config,
+            colorScheme: _val
+        }));
+    }
+    get inputStyle() {
+        return this.layoutService.config().inputStyle;
+    }
+    set inputStyle(_val) {
+        this.layoutService.config.update((config) => ({
+            ...config,
+            inputStyle: _val
+        }));
+    }
+    get ripple() {
+        return this.layoutService.config().ripple;
+    }
+    set ripple(_val) {
+        this.layoutService.config.update((config) => ({
+            ...config,
+            ripple: _val
+        }));
+    }
+    get menuTheme() {
+        return this.layoutService.config().menuTheme;
+    }
+    set menuTheme(_val) {
+        this.layoutService.config.update((config) => ({
+            ...config,
+            menuTheme: _val
+        }));
+    }
+    get theme() {
+        return this.layoutService.config().theme;
+    }
+    set theme(_val) {
+        this.layoutService.config.update((config) => ({
+            ...config,
+            theme: _val
+        }));
+    }
+    ngOnInit() {
+        this.componentThemes = [
+            { name: 'indigo', color: '#6366F1' },
+            { name: 'blue', color: '#3B82F6' },
+            { name: 'purple', color: '#8B5CF6' },
+            { name: 'teal', color: '#14B8A6' },
+            { name: 'cyan', color: '#06b6d4' },
+            { name: 'green', color: '#10b981' },
+            { name: 'orange', color: '#f59e0b' },
+            { name: 'pink', color: '#d946ef' }
+        ];
+    }
+    onConfigButtonClick() {
+        this.layoutService.showConfigSidebar();
+    }
+    changeColorScheme(colorScheme) {
+        this.colorScheme = colorScheme;
+    }
+    changeTheme(theme) {
+        this.theme = theme;
+    }
+    decrementScale() {
+        this.scale--;
+    }
+    incrementScale() {
+        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()\">\n\t<i class=\"pi pi-cog\"></i>\n</button>\n\n<p-sidebar\n\t[(visible)]=\"visible\"\n\tposition=\"right\"\n\t[transitionOptions]=\"'.3s cubic-bezier(0, 0, 0.2, 1)'\"\n\tstyleClass=\"layout-config-sidebar w-18rem\">\n\t<h5>Themes</h5>\n\t<div class=\"flex flex-wrap row-gap-3\">\n\t\t@for (theme of componentThemes; track theme) {\n\t\t\t<div class=\"w-3\">\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\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\"\n\t\t\t\t\t(click)=\"changeTheme(theme.name)\"\n\t\t\t\t\t[ngStyle]=\"{ 'background-color': theme.color }\">\n\t\t\t\t\t@if (theme.name == this.layoutService.config().theme) {\n\t\t\t\t\t\t<i class=\"pi pi-check text-white\"></i>\n\t\t\t\t\t}\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t}\n\t</div>\n\n\t<h5>Scale</h5>\n\t<div class=\"flex align-items-center\">\n\t\t<button\n\t\t\ticon=\"pi pi-minus\"\n\t\t\ttype=\"button\"\n\t\t\tpButton\n\t\t\t(click)=\"decrementScale()\"\n\t\t\tclass=\"p-button-text p-button-rounded w-2rem h-2rem mr-2\"\n\t\t\t[disabled]=\"scale === scales[0]\"></button>\n\t\t<div class=\"flex gap-2 align-items-center\">\n\t\t\t@for (s of scales; track s) {\n\t\t\t\t<i class=\"pi pi-circle-fill text-300\" [ngClass]=\"{ 'text-primary-500': s === scale }\"></i>\n\t\t\t}\n\t\t</div>\n\t\t<button\n\t\t\ticon=\"pi pi-plus\"\n\t\t\ttype=\"button\"\n\t\t\tpButton\n\t\t\t(click)=\"incrementScale()\"\n\t\t\tclass=\"p-button-text p-button-rounded w-2rem h-2rem ml-2\"\n\t\t\t[disabled]=\"scale === scales[scales.length - 1]\"></button>\n\t</div>\n\n\t@if (!minimal) {\n\t\t<h5>Menu Type</h5>\n\t\t<div class=\"flex flex-wrap row-gap-3\">\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"static\" [(ngModel)]=\"menuMode\" inputId=\"mode1\"></p-radioButton>\n\t\t\t\t<label for=\"mode1\">Static</label>\n\t\t\t</div>\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"overlay\" [(ngModel)]=\"menuMode\" inputId=\"mode2\"></p-radioButton>\n\t\t\t\t<label for=\"mode2\">Overlay</label>\n\t\t\t</div>\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"slim\" [(ngModel)]=\"menuMode\" inputId=\"mode3\"></p-radioButton>\n\t\t\t\t<label for=\"mode3\">Slim</label>\n\t\t\t</div>\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"slim-plus\" [(ngModel)]=\"menuMode\" inputId=\"mode4\"></p-radioButton>\n\t\t\t\t<label for=\"mode3\">Slim +</label>\n\t\t\t</div>\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"reveal\" [(ngModel)]=\"menuMode\" inputId=\"mode6\"></p-radioButton>\n\t\t\t\t<label for=\"mode5\">Reveal</label>\n\t\t\t</div>\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"drawer\" [(ngModel)]=\"menuMode\" inputId=\"mode7\"></p-radioButton>\n\t\t\t\t<label for=\"mode6\">Drawer</label>\n\t\t\t</div>\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"horizontal\" [(ngModel)]=\"menuMode\" inputId=\"mode5\"></p-radioButton>\n\t\t\t\t<label for=\"mode4\">Horizontal</label>\n\t\t\t</div>\n\t\t</div>\n\t\t<h5>Menu Theme</h5>\n\t\t<div class=\"field-radiobutton\">\n\t\t\t<p-radioButton\n\t\t\t\tname=\"menuTheme\"\n\t\t\t\tvalue=\"colorScheme\"\n\t\t\t\t[(ngModel)]=\"menuTheme\"\n\t\t\t\tinputId=\"menutheme-colorscheme\"></p-radioButton>\n\t\t\t<label for=\"menutheme-colorscheme\">Color Scheme</label>\n\t\t</div>\n\t\t<div class=\"field-radiobutton\">\n\t\t\t<p-radioButton\n\t\t\t\tname=\"menuTheme\"\n\t\t\t\tvalue=\"primaryColor\"\n\t\t\t\t[(ngModel)]=\"menuTheme\"\n\t\t\t\tinputId=\"menutheme-primarycolor\"></p-radioButton>\n\t\t\t<label for=\"menutheme-primarycolor\">Primary Color</label>\n\t\t</div>\n\t\t<div class=\"field-radiobutton\">\n\t\t\t<p-radioButton\n\t\t\t\tname=\"menuTheme\"\n\t\t\t\tvalue=\"transparent\"\n\t\t\t\t[(ngModel)]=\"menuTheme\"\n\t\t\t\tinputId=\"menutheme-transparent\"></p-radioButton>\n\t\t\t<label for=\"menutheme-transparent\">Transparent</label>\n\t\t</div>\n\t}\n\n\t<h5>Color Scheme</h5>\n\t<div class=\"field-radiobutton\">\n\t\t<p-radioButton name=\"colorScheme\" value=\"light\" [(ngModel)]=\"colorScheme\" inputId=\"mode-light\"></p-radioButton>\n\t\t<label for=\"mode-light\">Light</label>\n\t</div>\n\t<div class=\"field-radiobutton\">\n\t\t<p-radioButton name=\"colorScheme\" value=\"dim\" [(ngModel)]=\"colorScheme\" inputId=\"mode-dim\"></p-radioButton>\n\t\t<label for=\"mode-dim\">Dim</label>\n\t</div>\n\t<div class=\"field-radiobutton\">\n\t\t<p-radioButton name=\"colorScheme\" value=\"dark\" [(ngModel)]=\"colorScheme\" inputId=\"mode-dark\"></p-radioButton>\n\t\t<label for=\"mode-dark\">Dark</label>\n\t</div>\n\n\t@if (!minimal) {\n\t\t<h5>Input Style</h5>\n\t\t<div class=\"flex\">\n\t\t\t<div class=\"field-radiobutton flex-1\">\n\t\t\t\t<p-radioButton\n\t\t\t\t\tname=\"inputStyle\"\n\t\t\t\t\tvalue=\"outlined\"\n\t\t\t\t\t[(ngModel)]=\"inputStyle\"\n\t\t\t\t\tinputId=\"outlined_input\"></p-radioButton>\n\t\t\t\t<label for=\"outlined_input\">Outlined</label>\n\t\t\t</div>\n\t\t\t<div class=\"field-radiobutton flex-1\">\n\t\t\t\t<p-radioButton name=\"inputStyle\" value=\"filled\" [(ngModel)]=\"inputStyle\" inputId=\"filled_input\"></p-radioButton>\n\t\t\t\t<label for=\"filled_input\">Filled</label>\n\t\t\t</div>\n\t\t</div>\n\t\t<h5>Ripple Effect</h5>\n\t\t<p-inputSwitch [(ngModel)]=\"ripple\"></p-inputSwitch>\n\t}\n</p-sidebar>\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", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "labelStyleClass"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i6.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "ngmodule", type: InputSwitchModule }, { kind: "component", type: i7.InputSwitch, selector: "p-inputSwitch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy"], 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,
+            args: [{ standalone: true, selector: 'app-config', imports: [FormsModule, SidebarModule, RadioButtonModule, ButtonModule, InputSwitchModule, NgStyle, NgClass], template: "<button class=\"layout-config-button p-link\" type=\"button\" (click)=\"onConfigButtonClick()\">\n\t<i class=\"pi pi-cog\"></i>\n</button>\n\n<p-sidebar\n\t[(visible)]=\"visible\"\n\tposition=\"right\"\n\t[transitionOptions]=\"'.3s cubic-bezier(0, 0, 0.2, 1)'\"\n\tstyleClass=\"layout-config-sidebar w-18rem\">\n\t<h5>Themes</h5>\n\t<div class=\"flex flex-wrap row-gap-3\">\n\t\t@for (theme of componentThemes; track theme) {\n\t\t\t<div class=\"w-3\">\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\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\"\n\t\t\t\t\t(click)=\"changeTheme(theme.name)\"\n\t\t\t\t\t[ngStyle]=\"{ 'background-color': theme.color }\">\n\t\t\t\t\t@if (theme.name == this.layoutService.config().theme) {\n\t\t\t\t\t\t<i class=\"pi pi-check text-white\"></i>\n\t\t\t\t\t}\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t}\n\t</div>\n\n\t<h5>Scale</h5>\n\t<div class=\"flex align-items-center\">\n\t\t<button\n\t\t\ticon=\"pi pi-minus\"\n\t\t\ttype=\"button\"\n\t\t\tpButton\n\t\t\t(click)=\"decrementScale()\"\n\t\t\tclass=\"p-button-text p-button-rounded w-2rem h-2rem mr-2\"\n\t\t\t[disabled]=\"scale === scales[0]\"></button>\n\t\t<div class=\"flex gap-2 align-items-center\">\n\t\t\t@for (s of scales; track s) {\n\t\t\t\t<i class=\"pi pi-circle-fill text-300\" [ngClass]=\"{ 'text-primary-500': s === scale }\"></i>\n\t\t\t}\n\t\t</div>\n\t\t<button\n\t\t\ticon=\"pi pi-plus\"\n\t\t\ttype=\"button\"\n\t\t\tpButton\n\t\t\t(click)=\"incrementScale()\"\n\t\t\tclass=\"p-button-text p-button-rounded w-2rem h-2rem ml-2\"\n\t\t\t[disabled]=\"scale === scales[scales.length - 1]\"></button>\n\t</div>\n\n\t@if (!minimal) {\n\t\t<h5>Menu Type</h5>\n\t\t<div class=\"flex flex-wrap row-gap-3\">\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"static\" [(ngModel)]=\"menuMode\" inputId=\"mode1\"></p-radioButton>\n\t\t\t\t<label for=\"mode1\">Static</label>\n\t\t\t</div>\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"overlay\" [(ngModel)]=\"menuMode\" inputId=\"mode2\"></p-radioButton>\n\t\t\t\t<label for=\"mode2\">Overlay</label>\n\t\t\t</div>\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"slim\" [(ngModel)]=\"menuMode\" inputId=\"mode3\"></p-radioButton>\n\t\t\t\t<label for=\"mode3\">Slim</label>\n\t\t\t</div>\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"slim-plus\" [(ngModel)]=\"menuMode\" inputId=\"mode4\"></p-radioButton>\n\t\t\t\t<label for=\"mode3\">Slim +</label>\n\t\t\t</div>\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"reveal\" [(ngModel)]=\"menuMode\" inputId=\"mode6\"></p-radioButton>\n\t\t\t\t<label for=\"mode5\">Reveal</label>\n\t\t\t</div>\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"drawer\" [(ngModel)]=\"menuMode\" inputId=\"mode7\"></p-radioButton>\n\t\t\t\t<label for=\"mode6\">Drawer</label>\n\t\t\t</div>\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"horizontal\" [(ngModel)]=\"menuMode\" inputId=\"mode5\"></p-radioButton>\n\t\t\t\t<label for=\"mode4\">Horizontal</label>\n\t\t\t</div>\n\t\t</div>\n\t\t<h5>Menu Theme</h5>\n\t\t<div class=\"field-radiobutton\">\n\t\t\t<p-radioButton\n\t\t\t\tname=\"menuTheme\"\n\t\t\t\tvalue=\"colorScheme\"\n\t\t\t\t[(ngModel)]=\"menuTheme\"\n\t\t\t\tinputId=\"menutheme-colorscheme\"></p-radioButton>\n\t\t\t<label for=\"menutheme-colorscheme\">Color Scheme</label>\n\t\t</div>\n\t\t<div class=\"field-radiobutton\">\n\t\t\t<p-radioButton\n\t\t\t\tname=\"menuTheme\"\n\t\t\t\tvalue=\"primaryColor\"\n\t\t\t\t[(ngModel)]=\"menuTheme\"\n\t\t\t\tinputId=\"menutheme-primarycolor\"></p-radioButton>\n\t\t\t<label for=\"menutheme-primarycolor\">Primary Color</label>\n\t\t</div>\n\t\t<div class=\"field-radiobutton\">\n\t\t\t<p-radioButton\n\t\t\t\tname=\"menuTheme\"\n\t\t\t\tvalue=\"transparent\"\n\t\t\t\t[(ngModel)]=\"menuTheme\"\n\t\t\t\tinputId=\"menutheme-transparent\"></p-radioButton>\n\t\t\t<label for=\"menutheme-transparent\">Transparent</label>\n\t\t</div>\n\t}\n\n\t<h5>Color Scheme</h5>\n\t<div class=\"field-radiobutton\">\n\t\t<p-radioButton name=\"colorScheme\" value=\"light\" [(ngModel)]=\"colorScheme\" inputId=\"mode-light\"></p-radioButton>\n\t\t<label for=\"mode-light\">Light</label>\n\t</div>\n\t<div class=\"field-radiobutton\">\n\t\t<p-radioButton name=\"colorScheme\" value=\"dim\" [(ngModel)]=\"colorScheme\" inputId=\"mode-dim\"></p-radioButton>\n\t\t<label for=\"mode-dim\">Dim</label>\n\t</div>\n\t<div class=\"field-radiobutton\">\n\t\t<p-radioButton name=\"colorScheme\" value=\"dark\" [(ngModel)]=\"colorScheme\" inputId=\"mode-dark\"></p-radioButton>\n\t\t<label for=\"mode-dark\">Dark</label>\n\t</div>\n\n\t@if (!minimal) {\n\t\t<h5>Input Style</h5>\n\t\t<div class=\"flex\">\n\t\t\t<div class=\"field-radiobutton flex-1\">\n\t\t\t\t<p-radioButton\n\t\t\t\t\tname=\"inputStyle\"\n\t\t\t\t\tvalue=\"outlined\"\n\t\t\t\t\t[(ngModel)]=\"inputStyle\"\n\t\t\t\t\tinputId=\"outlined_input\"></p-radioButton>\n\t\t\t\t<label for=\"outlined_input\">Outlined</label>\n\t\t\t</div>\n\t\t\t<div class=\"field-radiobutton flex-1\">\n\t\t\t\t<p-radioButton name=\"inputStyle\" value=\"filled\" [(ngModel)]=\"inputStyle\" inputId=\"filled_input\"></p-radioButton>\n\t\t\t\t<label for=\"filled_input\">Filled</label>\n\t\t\t</div>\n\t\t</div>\n\t\t<h5>Ripple Effect</h5>\n\t\t<p-inputSwitch [(ngModel)]=\"ripple\"></p-inputSwitch>\n\t}\n</p-sidebar>\n" }]
+        }], ctorParameters: () => [{ type: LayoutService }, { type: AppMenuService }], propDecorators: { minimal: [{
+                type: Input
+            }] } });
+
+class AppProfileSidebarComponent {
+    constructor(layoutService) {
+        this.layoutService = layoutService;
+    }
+    get visible() {
+        return this.layoutService.state.profileSidebarVisible;
+    }
+    set visible(_val) {
+        this.layoutService.state.profileSidebarVisible = _val;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AppProfileSidebarComponent, deps: [{ token: LayoutService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: AppProfileSidebarComponent, isStandalone: true, selector: "app-profilemenu", ngImport: i0, template: "<p-sidebar\n\t[(visible)]=\"visible\"\n\tposition=\"right\"\n\t[transitionOptions]=\"'.3s cubic-bezier(0, 0, 0.2, 1)'\"\n\tstyleClass=\"layout-profile-sidebar w-full sm:w-25rem\">\n\t<div class=\"flex flex-column mx-auto md:mx-0\">\n\t\t<span class=\"mb-2 font-semibold\">Welcome</span>\n\t\t<span class=\"text-color-secondary font-medium mb-5\">Isabella Andolini</span>\n\n\t\t<ul class=\"list-none m-0 p-0\">\n\t\t\t<li>\n\t\t\t\t<a\n\t\t\t\t\tclass=\"cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150\">\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<i class=\"pi pi-user text-xl text-primary\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t\t<div class=\"ml-3\">\n\t\t\t\t\t\t<span class=\"mb-2 font-semibold\">Profile</span>\n\t\t\t\t\t\t<p class=\"text-color-secondary m-0\">Lorem ipsum date visale</p>\n\t\t\t\t\t</div>\n\t\t\t\t</a>\n\t\t\t</li>\n\t\t\t<li>\n\t\t\t\t<a\n\t\t\t\t\tclass=\"cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150\">\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<i class=\"pi pi-user text-xl text-primary\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t\t<div class=\"ml-3\">\n\t\t\t\t\t\t<span class=\"mb-2 font-semibold\">Billing</span>\n\t\t\t\t\t\t<p class=\"text-color-secondary m-0\">Amet mimin m\u0131ollit</p>\n\t\t\t\t\t</div>\n\t\t\t\t</a>\n\t\t\t</li>\n\t\t\t<li>\n\t\t\t\t<a\n\t\t\t\t\tclass=\"cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150\">\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<i class=\"pi pi-cog text-xl text-primary\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t\t<div class=\"ml-3\">\n\t\t\t\t\t\t<span class=\"mb-2 font-semibold\">Settings</span>\n\t\t\t\t\t\t<p class=\"text-color-secondary m-0\">Exercitation veniam</p>\n\t\t\t\t\t</div>\n\t\t\t\t</a>\n\t\t\t</li>\n\t\t\t<li>\n\t\t\t\t<a\n\t\t\t\t\tclass=\"cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150\">\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<i class=\"pi pi-power-off text-xl text-primary\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t\t<div class=\"ml-3\">\n\t\t\t\t\t\t<span class=\"mb-2 font-semibold\">Sign Out</span>\n\t\t\t\t\t\t<p class=\"text-color-secondary m-0\">Sed ut perspiciatis</p>\n\t\t\t\t\t</div>\n\t\t\t\t</a>\n\t\t\t</li>\n\t\t</ul>\n\t</div>\n\n\t<div class=\"flex flex-column mt-5 mx-auto md:mx-0\">\n\t\t<span class=\"mb-2 font-semibold\">Notifications</span>\n\t\t<span class=\"text-color-secondary font-medium mb-5\">You have 3 notifications</span>\n\n\t\t<ul class=\"list-none m-0 p-0\">\n\t\t\t<li>\n\t\t\t\t<a\n\t\t\t\t\tclass=\"cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150\">\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<i class=\"pi pi-comment text-xl text-primary\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t\t<div class=\"ml-3\">\n\t\t\t\t\t\t<span class=\"mb-2 font-semibold\">Your post has new comments</span>\n\t\t\t\t\t\t<p class=\"text-color-secondary m-0\">5 min ago</p>\n\t\t\t\t\t</div>\n\t\t\t\t</a>\n\t\t\t</li>\n\t\t\t<li>\n\t\t\t\t<a\n\t\t\t\t\tclass=\"cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150\">\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<i class=\"pi pi-trash text-xl text-primary\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t\t<div class=\"ml-3\">\n\t\t\t\t\t\t<span class=\"mb-2 font-semibold\">Your post has been deleted</span>\n\t\t\t\t\t\t<p class=\"text-color-secondary m-0\">15min ago</p>\n\t\t\t\t\t</div>\n\t\t\t\t</a>\n\t\t\t</li>\n\t\t\t<li>\n\t\t\t\t<a\n\t\t\t\t\tclass=\"cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150\">\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<i class=\"pi pi-folder text-xl text-primary\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t\t<div class=\"ml-3\">\n\t\t\t\t\t\t<span class=\"mb-2 font-semibold\">Post has been updated</span>\n\t\t\t\t\t\t<p class=\"text-color-secondary m-0\">3h ago</p>\n\t\t\t\t\t</div>\n\t\t\t\t</a>\n\t\t\t</li>\n\t\t</ul>\n\t</div>\n\n\t<div class=\"flex flex-column mt-5 mx-auto md:mx-0\">\n\t\t<span class=\"mb-2 font-semibold\">Messages</span>\n\t\t<span class=\"text-color-secondary font-medium mb-5\">You have new messages</span>\n\n\t\t<ul class=\"list-none m-0 p-0\">\n\t\t\t<li>\n\t\t\t\t<a\n\t\t\t\t\tclass=\"cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150\">\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<img src=\"assets/demo/images/avatar/circle/avatar-m-8.png\" alt=\"Avatar\" class=\"w-2rem h-2rem\" />\n\t\t\t\t\t</span>\n\t\t\t\t\t<div class=\"ml-3\">\n\t\t\t\t\t\t<span class=\"mb-2 font-semibold\">James Robinson</span>\n\t\t\t\t\t\t<p class=\"text-color-secondary m-0\">10 min ago</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<p-tag value=\"3\" class=\"ml-auto\"></p-tag>\n\t\t\t\t</a>\n\t\t\t</li>\n\t\t\t<li>\n\t\t\t\t<a\n\t\t\t\t\tclass=\"cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150\">\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<img src=\"assets/demo/images/avatar/circle/avatar-f-8.png\" alt=\"Avatar\" class=\"w-2rem h-2rem\" />\n\t\t\t\t\t</span>\n\t\t\t\t\t<div class=\"ml-3\">\n\t\t\t\t\t\t<span class=\"mb-2 font-semibold\">Mary Watson</span>\n\t\t\t\t\t\t<p class=\"text-color-secondary m-0\">15min ago</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<p-tag value=\"1\" class=\"ml-auto\"></p-tag>\n\t\t\t\t</a>\n\t\t\t</li>\n\t\t\t<li>\n\t\t\t\t<a\n\t\t\t\t\tclass=\"cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150\">\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<img src=\"assets/demo/images/avatar/circle/avatar-f-4.png\" alt=\"Avatar\" class=\"w-2rem h-2rem\" />\n\t\t\t\t\t</span>\n\t\t\t\t\t<div class=\"ml-3\">\n\t\t\t\t\t\t<span class=\"mb-2 font-semibold\">Aisha Webb</span>\n\t\t\t\t\t\t<p class=\"text-color-secondary m-0\">3h ago</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<p-tag value=\"2\" class=\"ml-auto\"></p-tag>\n\t\t\t\t</a>\n\t\t\t</li>\n\t\t</ul>\n\t</div>\n</p-sidebar>\n", dependencies: [{ 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: TagModule }, { kind: "component", type: i3$1.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AppProfileSidebarComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'app-profilemenu', imports: [SidebarModule, TagModule], template: "<p-sidebar\n\t[(visible)]=\"visible\"\n\tposition=\"right\"\n\t[transitionOptions]=\"'.3s cubic-bezier(0, 0, 0.2, 1)'\"\n\tstyleClass=\"layout-profile-sidebar w-full sm:w-25rem\">\n\t<div class=\"flex flex-column mx-auto md:mx-0\">\n\t\t<span class=\"mb-2 font-semibold\">Welcome</span>\n\t\t<span class=\"text-color-secondary font-medium mb-5\">Isabella Andolini</span>\n\n\t\t<ul class=\"list-none m-0 p-0\">\n\t\t\t<li>\n\t\t\t\t<a\n\t\t\t\t\tclass=\"cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150\">\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<i class=\"pi pi-user text-xl text-primary\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t\t<div class=\"ml-3\">\n\t\t\t\t\t\t<span class=\"mb-2 font-semibold\">Profile</span>\n\t\t\t\t\t\t<p class=\"text-color-secondary m-0\">Lorem ipsum date visale</p>\n\t\t\t\t\t</div>\n\t\t\t\t</a>\n\t\t\t</li>\n\t\t\t<li>\n\t\t\t\t<a\n\t\t\t\t\tclass=\"cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150\">\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<i class=\"pi pi-user text-xl text-primary\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t\t<div class=\"ml-3\">\n\t\t\t\t\t\t<span class=\"mb-2 font-semibold\">Billing</span>\n\t\t\t\t\t\t<p class=\"text-color-secondary m-0\">Amet mimin m\u0131ollit</p>\n\t\t\t\t\t</div>\n\t\t\t\t</a>\n\t\t\t</li>\n\t\t\t<li>\n\t\t\t\t<a\n\t\t\t\t\tclass=\"cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150\">\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<i class=\"pi pi-cog text-xl text-primary\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t\t<div class=\"ml-3\">\n\t\t\t\t\t\t<span class=\"mb-2 font-semibold\">Settings</span>\n\t\t\t\t\t\t<p class=\"text-color-secondary m-0\">Exercitation veniam</p>\n\t\t\t\t\t</div>\n\t\t\t\t</a>\n\t\t\t</li>\n\t\t\t<li>\n\t\t\t\t<a\n\t\t\t\t\tclass=\"cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150\">\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<i class=\"pi pi-power-off text-xl text-primary\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t\t<div class=\"ml-3\">\n\t\t\t\t\t\t<span class=\"mb-2 font-semibold\">Sign Out</span>\n\t\t\t\t\t\t<p class=\"text-color-secondary m-0\">Sed ut perspiciatis</p>\n\t\t\t\t\t</div>\n\t\t\t\t</a>\n\t\t\t</li>\n\t\t</ul>\n\t</div>\n\n\t<div class=\"flex flex-column mt-5 mx-auto md:mx-0\">\n\t\t<span class=\"mb-2 font-semibold\">Notifications</span>\n\t\t<span class=\"text-color-secondary font-medium mb-5\">You have 3 notifications</span>\n\n\t\t<ul class=\"list-none m-0 p-0\">\n\t\t\t<li>\n\t\t\t\t<a\n\t\t\t\t\tclass=\"cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150\">\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<i class=\"pi pi-comment text-xl text-primary\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t\t<div class=\"ml-3\">\n\t\t\t\t\t\t<span class=\"mb-2 font-semibold\">Your post has new comments</span>\n\t\t\t\t\t\t<p class=\"text-color-secondary m-0\">5 min ago</p>\n\t\t\t\t\t</div>\n\t\t\t\t</a>\n\t\t\t</li>\n\t\t\t<li>\n\t\t\t\t<a\n\t\t\t\t\tclass=\"cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150\">\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<i class=\"pi pi-trash text-xl text-primary\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t\t<div class=\"ml-3\">\n\t\t\t\t\t\t<span class=\"mb-2 font-semibold\">Your post has been deleted</span>\n\t\t\t\t\t\t<p class=\"text-color-secondary m-0\">15min ago</p>\n\t\t\t\t\t</div>\n\t\t\t\t</a>\n\t\t\t</li>\n\t\t\t<li>\n\t\t\t\t<a\n\t\t\t\t\tclass=\"cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150\">\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<i class=\"pi pi-folder text-xl text-primary\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t\t<div class=\"ml-3\">\n\t\t\t\t\t\t<span class=\"mb-2 font-semibold\">Post has been updated</span>\n\t\t\t\t\t\t<p class=\"text-color-secondary m-0\">3h ago</p>\n\t\t\t\t\t</div>\n\t\t\t\t</a>\n\t\t\t</li>\n\t\t</ul>\n\t</div>\n\n\t<div class=\"flex flex-column mt-5 mx-auto md:mx-0\">\n\t\t<span class=\"mb-2 font-semibold\">Messages</span>\n\t\t<span class=\"text-color-secondary font-medium mb-5\">You have new messages</span>\n\n\t\t<ul class=\"list-none m-0 p-0\">\n\t\t\t<li>\n\t\t\t\t<a\n\t\t\t\t\tclass=\"cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150\">\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<img src=\"assets/demo/images/avatar/circle/avatar-m-8.png\" alt=\"Avatar\" class=\"w-2rem h-2rem\" />\n\t\t\t\t\t</span>\n\t\t\t\t\t<div class=\"ml-3\">\n\t\t\t\t\t\t<span class=\"mb-2 font-semibold\">James Robinson</span>\n\t\t\t\t\t\t<p class=\"text-color-secondary m-0\">10 min ago</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<p-tag value=\"3\" class=\"ml-auto\"></p-tag>\n\t\t\t\t</a>\n\t\t\t</li>\n\t\t\t<li>\n\t\t\t\t<a\n\t\t\t\t\tclass=\"cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150\">\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<img src=\"assets/demo/images/avatar/circle/avatar-f-8.png\" alt=\"Avatar\" class=\"w-2rem h-2rem\" />\n\t\t\t\t\t</span>\n\t\t\t\t\t<div class=\"ml-3\">\n\t\t\t\t\t\t<span class=\"mb-2 font-semibold\">Mary Watson</span>\n\t\t\t\t\t\t<p class=\"text-color-secondary m-0\">15min ago</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<p-tag value=\"1\" class=\"ml-auto\"></p-tag>\n\t\t\t\t</a>\n\t\t\t</li>\n\t\t\t<li>\n\t\t\t\t<a\n\t\t\t\t\tclass=\"cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150\">\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<img src=\"assets/demo/images/avatar/circle/avatar-f-4.png\" alt=\"Avatar\" class=\"w-2rem h-2rem\" />\n\t\t\t\t\t</span>\n\t\t\t\t\t<div class=\"ml-3\">\n\t\t\t\t\t\t<span class=\"mb-2 font-semibold\">Aisha Webb</span>\n\t\t\t\t\t\t<p class=\"text-color-secondary m-0\">3h ago</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<p-tag value=\"2\" class=\"ml-auto\"></p-tag>\n\t\t\t\t</a>\n\t\t\t</li>\n\t\t</ul>\n\t</div>\n</p-sidebar>\n" }]
+        }], ctorParameters: () => [{ type: LayoutService }] });
+
 class AppMenuItemComponent {
     constructor(layoutService, cd, router, menuService) {
         this.layoutService = layoutService;
@@ -364,7 +534,7 @@ class AppMenuItemComponent {
             this.menuResetSubscription.unsubscribe();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AppMenuItemComponent, deps: [{ token: LayoutService }, { token: i0.ChangeDetectorRef }, { token: i2.Router }, { token: AppMenuService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AppMenuItemComponent, deps: [{ token: LayoutService }, { token: i0.ChangeDetectorRef }, { token: i1.Router }, { token: AppMenuService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: AppMenuItemComponent, isStandalone: true, selector: "[app-menuitem]", inputs: { item: "item", index: "index", root: "root", parentKey: "parentKey" }, host: { properties: { "class.layout-root-menuitem": "this.root", "class.active-menuitem": "this.activeClass" } }, viewQueries: [{ propertyName: "submenu", first: true, predicate: ["submenu"], descendants: true }], ngImport: i0, template: `
 		<ng-container>
 			@if (root) {
@@ -432,7 +602,7 @@ class AppMenuItemComponent {
 				</ul>
 			}
 		</ng-container>
-	`, isInline: true, dependencies: [{ kind: "component", type: AppMenuItemComponent, selector: "[app-menuitem]", inputs: ["item", "index", "root", "parentKey"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i5.Ripple, selector: "[pRipple]" }], animations: [
+	`, isInline: true, dependencies: [{ kind: "component", type: AppMenuItemComponent, selector: "[app-menuitem]", inputs: ["item", "index", "root", "parentKey"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i5$1.Ripple, selector: "[pRipple]" }], animations: [
             trigger('children', [
                 state('collapsed', style({
                     height: '0'
@@ -542,7 +712,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                         ])
                     ]
                 }]
-        }], ctorParameters: () => [{ type: LayoutService }, { type: i0.ChangeDetectorRef }, { type: i2.Router }, { type: AppMenuService }], propDecorators: { item: [{
+        }], ctorParameters: () => [{ type: LayoutService }, { type: i0.ChangeDetectorRef }, { type: i1.Router }, { type: AppMenuService }], propDecorators: { item: [{
                 type: Input
             }], index: [{
                 type: Input
@@ -579,11 +749,11 @@ class AppSubMenuComponent {
         return 'app-sub-menu-' + globalThis.activeMF;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AppSubMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: AppSubMenuComponent, isStandalone: true, selector: "app-sub-menu", host: { properties: { "id": "this.id" } }, ngImport: i0, template: "<div class=\"layout-sidebar\">\r\n\t<div #subMenuContainer class=\"layout-menu-container\">\r\n\t\t<ul class=\"layout-menu flex-wrap\">\r\n\t\t\t@for (subItem of menuService.subMenuItems(); track $index) {\r\n\t\t\t\t@if (subItem.separator) {\r\n\t\t\t\t\t<li class=\"menu-separator\"></li>\r\n\t\t\t\t} @else {\r\n\t\t\t\t\t<li app-menuitem [item]=\"subItem\" [index]=\"$index\" [root]=\"true\"></li>\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t</ul>\r\n\t</div>\r\n</div>\r\n", dependencies: [{ kind: "component", type: AppMenuItemComponent, selector: "[app-menuitem]", inputs: ["item", "index", "root", "parentKey"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: AppSubMenuComponent, isStandalone: true, selector: "app-sub-menu", host: { properties: { "id": "this.id" } }, ngImport: i0, template: "<div class=\"layout-sidebar\">\n\t<div #subMenuContainer class=\"layout-menu-container\">\n\t\t<ul class=\"layout-menu flex-wrap\">\n\t\t\t@for (subItem of menuService.subMenuItems(); track $index) {\n\t\t\t\t@if (subItem.separator) {\n\t\t\t\t\t<li class=\"menu-separator\"></li>\n\t\t\t\t} @else {\n\t\t\t\t\t<li app-menuitem [item]=\"subItem\" [index]=\"$index\" [root]=\"true\"></li>\n\t\t\t\t}\n\t\t\t}\n\t\t</ul>\n\t</div>\n</div>\n", dependencies: [{ kind: "component", type: AppMenuItemComponent, selector: "[app-menuitem]", inputs: ["item", "index", "root", "parentKey"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AppSubMenuComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'app-sub-menu', imports: [AppMenuItemComponent], template: "<div class=\"layout-sidebar\">\r\n\t<div #subMenuContainer class=\"layout-menu-container\">\r\n\t\t<ul class=\"layout-menu flex-wrap\">\r\n\t\t\t@for (subItem of menuService.subMenuItems(); track $index) {\r\n\t\t\t\t@if (subItem.separator) {\r\n\t\t\t\t\t<li class=\"menu-separator\"></li>\r\n\t\t\t\t} @else {\r\n\t\t\t\t\t<li app-menuitem [item]=\"subItem\" [index]=\"$index\" [root]=\"true\"></li>\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t</ul>\r\n\t</div>\r\n</div>\r\n" }]
+            args: [{ standalone: true, selector: 'app-sub-menu', imports: [AppMenuItemComponent], template: "<div class=\"layout-sidebar\">\n\t<div #subMenuContainer class=\"layout-menu-container\">\n\t\t<ul class=\"layout-menu flex-wrap\">\n\t\t\t@for (subItem of menuService.subMenuItems(); track $index) {\n\t\t\t\t@if (subItem.separator) {\n\t\t\t\t\t<li class=\"menu-separator\"></li>\n\t\t\t\t} @else {\n\t\t\t\t\t<li app-menuitem [item]=\"subItem\" [index]=\"$index\" [root]=\"true\"></li>\n\t\t\t\t}\n\t\t\t}\n\t\t</ul>\n\t</div>\n</div>\n" }]
         }], propDecorators: { id: [{
                 type: HostBinding,
                 args: ['id']
@@ -625,43 +795,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                 args: ['menuContainer']
             }] } });
 
-class AppBreadcrumbComponent {
-    constructor(router) {
-        this.router = router;
-        this._breadcrumbs$ = new BehaviorSubject([]);
-        this.breadcrumbs$ = this._breadcrumbs$.asObservable();
-        this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe((event) => {
-            const root = this.router.routerState.snapshot.root;
-            const breadcrumbs = [];
-            this.addBreadcrumb(root, [], breadcrumbs);
-            this._breadcrumbs$.next(breadcrumbs);
-        });
-    }
-    addBreadcrumb(route, parentUrl, breadcrumbs) {
-        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);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AppBreadcrumbComponent, deps: [{ token: i2.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\">\n\t<ol>\n\t\t@for (item of breadcrumbs$ | async; track item; let last = $last) {\n\t\t\t<li>{{ item.label }}</li>\n\t\t\t@if (!last) {\n\t\t\t\t<li class=\"layout-breadcrumb-chevron\">/</li>\n\t\t\t}\n\t\t}\n\t</ol>\n</nav>\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }] }); }
-}
-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], template: "<nav class=\"layout-breadcrumb\">\n\t<ol>\n\t\t@for (item of breadcrumbs$ | async; track item; let last = $last) {\n\t\t\t<li>{{ item.label }}</li>\n\t\t\t@if (!last) {\n\t\t\t\t<li class=\"layout-breadcrumb-chevron\">/</li>\n\t\t\t}\n\t\t}\n\t</ol>\n</nav>\n" }]
-        }], ctorParameters: () => [{ type: i2.Router }] });
-
 class AppTopbarComponent {
-    constructor(layoutService) {
-        this.layoutService = layoutService;
+    constructor() {
+        this.layoutService = inject(LayoutService);
+        this.keyCloakManager = inject(KeycloakManager);
     }
     onMenuButtonClick() {
         this.layoutService.onMenuToggle();
@@ -672,152 +809,17 @@ class AppTopbarComponent {
     onConfigButtonClick() {
         this.layoutService.showConfigSidebar();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AppTopbarComponent, deps: [{ token: LayoutService }], 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\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\t\t\t<li class=\"topbar-profile\">\r\n\t\t\t\t<button type=\"button\" class=\"p-link\" (click)=\"onProfileButtonClick()\">\r\n\t\t\t\t\t<img src=\"assets/images/avatar.png\" alt=\"Profile\" />\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 }] }); }
+    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\">\n\t<div class=\"topbar-start\">\n\t\t<button #menubutton type=\"button\" class=\"topbar-menubutton p-link p-trigger\" (click)=\"onMenuButtonClick()\">\n\t\t\t<i class=\"pi pi-bars\"></i>\n\t\t</button>\n\n\t\t<!-- <app-breadcrumb class=\"topbar-breadcrumb\"></app-breadcrumb> -->\n\t</div>\n\n\t<div class=\"topbar-end\">\n\t\t<ul class=\"topbar-menu\">\n\t\t\t<li class=\"topbar-search\">\n\t\t\t\t<span class=\"p-input-icon-left\">\n\t\t\t\t\t<i class=\"pi pi-search\"></i>\n\t\t\t\t\t<input\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\tpInputText\n\t\t\t\t\t\tplaceholder=\"Search\"\n\t\t\t\t\t\tclass=\"p-inputtext p-component p-element w-12rem sm:w-full\" />\n\t\t\t\t</span>\n\t\t\t</li>\n\t\t\t<!-- <li class=\"ml-3\">\n\t\t\t\t<button\n\t\t\t\t\tpButton\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\ticon=\"pi pi-cog\"\n\t\t\t\t\tclass=\"p-button-text p-button-secondary p-button-rounded flex-shrink-0\"\n\t\t\t\t\t(click)=\"onConfigButtonClick()\"></button>\n\t\t\t</li> -->\n\t\t\t<li class=\"ml-3\">\n\t\t\t\t<button\n\t\t\t\t\tpButton\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\ticon=\"pi pi-power-off\"\n\t\t\t\t\tclass=\"p-button-text p-button-secondary p-button-rounded flex-shrink-0\"\n\t\t\t\t\t(click)=\"keyCloakManager.logout()\"></button>\n\t\t\t</li>\n\t\t\t<li class=\"topbar-profile\">\n\t\t\t\t<button type=\"button\" class=\"p-link\" (click)=\"onProfileButtonClick()\">\n\t\t\t\t\t<img src=\"assets/images/avatar.png\" alt=\"Profile\" />\n\t\t\t\t</button>\n\t\t\t</li>\n\t\t</ul>\n\t</div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i6.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }] }); }
 }
 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], 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\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\t\t\t<li class=\"topbar-profile\">\r\n\t\t\t\t<button type=\"button\" class=\"p-link\" (click)=\"onProfileButtonClick()\">\r\n\t\t\t\t\t<img src=\"assets/images/avatar.png\" alt=\"Profile\" />\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" }]
-        }], ctorParameters: () => [{ type: LayoutService }], propDecorators: { menuButton: [{
+            args: [{ standalone: true, selector: 'app-topbar', imports: [ButtonModule, AppBreadcrumbComponent], template: "<div class=\"layout-topbar\">\n\t<div class=\"topbar-start\">\n\t\t<button #menubutton type=\"button\" class=\"topbar-menubutton p-link p-trigger\" (click)=\"onMenuButtonClick()\">\n\t\t\t<i class=\"pi pi-bars\"></i>\n\t\t</button>\n\n\t\t<!-- <app-breadcrumb class=\"topbar-breadcrumb\"></app-breadcrumb> -->\n\t</div>\n\n\t<div class=\"topbar-end\">\n\t\t<ul class=\"topbar-menu\">\n\t\t\t<li class=\"topbar-search\">\n\t\t\t\t<span class=\"p-input-icon-left\">\n\t\t\t\t\t<i class=\"pi pi-search\"></i>\n\t\t\t\t\t<input\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\tpInputText\n\t\t\t\t\t\tplaceholder=\"Search\"\n\t\t\t\t\t\tclass=\"p-inputtext p-component p-element w-12rem sm:w-full\" />\n\t\t\t\t</span>\n\t\t\t</li>\n\t\t\t<!-- <li class=\"ml-3\">\n\t\t\t\t<button\n\t\t\t\t\tpButton\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\ticon=\"pi pi-cog\"\n\t\t\t\t\tclass=\"p-button-text p-button-secondary p-button-rounded flex-shrink-0\"\n\t\t\t\t\t(click)=\"onConfigButtonClick()\"></button>\n\t\t\t</li> -->\n\t\t\t<li class=\"ml-3\">\n\t\t\t\t<button\n\t\t\t\t\tpButton\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\ticon=\"pi pi-power-off\"\n\t\t\t\t\tclass=\"p-button-text p-button-secondary p-button-rounded flex-shrink-0\"\n\t\t\t\t\t(click)=\"keyCloakManager.logout()\"></button>\n\t\t\t</li>\n\t\t\t<li class=\"topbar-profile\">\n\t\t\t\t<button type=\"button\" class=\"p-link\" (click)=\"onProfileButtonClick()\">\n\t\t\t\t\t<img src=\"assets/images/avatar.png\" alt=\"Profile\" />\n\t\t\t\t</button>\n\t\t\t</li>\n\t\t</ul>\n\t</div>\n</div>\n" }]
+        }], propDecorators: { menuButton: [{
                 type: ViewChild,
                 args: ['menubutton']
             }] } });
 
-class AppProfileSidebarComponent {
-    constructor(layoutService) {
-        this.layoutService = layoutService;
-    }
-    get visible() {
-        return this.layoutService.state.profileSidebarVisible;
-    }
-    set visible(_val) {
-        this.layoutService.state.profileSidebarVisible = _val;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AppProfileSidebarComponent, deps: [{ token: LayoutService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: AppProfileSidebarComponent, isStandalone: true, selector: "app-profilemenu", ngImport: i0, template: "<p-sidebar\n\t[(visible)]=\"visible\"\n\tposition=\"right\"\n\t[transitionOptions]=\"'.3s cubic-bezier(0, 0, 0.2, 1)'\"\n\tstyleClass=\"layout-profile-sidebar w-full sm:w-25rem\">\n\t<div class=\"flex flex-column mx-auto md:mx-0\">\n\t\t<span class=\"mb-2 font-semibold\">Welcome</span>\n\t\t<span class=\"text-color-secondary font-medium mb-5\">Isabella Andolini</span>\n\n\t\t<ul class=\"list-none m-0 p-0\">\n\t\t\t<li>\n\t\t\t\t<a\n\t\t\t\t\tclass=\"cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150\">\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<i class=\"pi pi-user text-xl text-primary\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t\t<div class=\"ml-3\">\n\t\t\t\t\t\t<span class=\"mb-2 font-semibold\">Profile</span>\n\t\t\t\t\t\t<p class=\"text-color-secondary m-0\">Lorem ipsum date visale</p>\n\t\t\t\t\t</div>\n\t\t\t\t</a>\n\t\t\t</li>\n\t\t\t<li>\n\t\t\t\t<a\n\t\t\t\t\tclass=\"cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150\">\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<i class=\"pi pi-user text-xl text-primary\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t\t<div class=\"ml-3\">\n\t\t\t\t\t\t<span class=\"mb-2 font-semibold\">Billing</span>\n\t\t\t\t\t\t<p class=\"text-color-secondary m-0\">Amet mimin m\u0131ollit</p>\n\t\t\t\t\t</div>\n\t\t\t\t</a>\n\t\t\t</li>\n\t\t\t<li>\n\t\t\t\t<a\n\t\t\t\t\tclass=\"cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150\">\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<i class=\"pi pi-cog text-xl text-primary\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t\t<div class=\"ml-3\">\n\t\t\t\t\t\t<span class=\"mb-2 font-semibold\">Settings</span>\n\t\t\t\t\t\t<p class=\"text-color-secondary m-0\">Exercitation veniam</p>\n\t\t\t\t\t</div>\n\t\t\t\t</a>\n\t\t\t</li>\n\t\t\t<li>\n\t\t\t\t<a\n\t\t\t\t\tclass=\"cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150\">\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<i class=\"pi pi-power-off text-xl text-primary\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t\t<div class=\"ml-3\">\n\t\t\t\t\t\t<span class=\"mb-2 font-semibold\">Sign Out</span>\n\t\t\t\t\t\t<p class=\"text-color-secondary m-0\">Sed ut perspiciatis</p>\n\t\t\t\t\t</div>\n\t\t\t\t</a>\n\t\t\t</li>\n\t\t</ul>\n\t</div>\n\n\t<div class=\"flex flex-column mt-5 mx-auto md:mx-0\">\n\t\t<span class=\"mb-2 font-semibold\">Notifications</span>\n\t\t<span class=\"text-color-secondary font-medium mb-5\">You have 3 notifications</span>\n\n\t\t<ul class=\"list-none m-0 p-0\">\n\t\t\t<li>\n\t\t\t\t<a\n\t\t\t\t\tclass=\"cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150\">\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<i class=\"pi pi-comment text-xl text-primary\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t\t<div class=\"ml-3\">\n\t\t\t\t\t\t<span class=\"mb-2 font-semibold\">Your post has new comments</span>\n\t\t\t\t\t\t<p class=\"text-color-secondary m-0\">5 min ago</p>\n\t\t\t\t\t</div>\n\t\t\t\t</a>\n\t\t\t</li>\n\t\t\t<li>\n\t\t\t\t<a\n\t\t\t\t\tclass=\"cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150\">\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<i class=\"pi pi-trash text-xl text-primary\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t\t<div class=\"ml-3\">\n\t\t\t\t\t\t<span class=\"mb-2 font-semibold\">Your post has been deleted</span>\n\t\t\t\t\t\t<p class=\"text-color-secondary m-0\">15min ago</p>\n\t\t\t\t\t</div>\n\t\t\t\t</a>\n\t\t\t</li>\n\t\t\t<li>\n\t\t\t\t<a\n\t\t\t\t\tclass=\"cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150\">\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<i class=\"pi pi-folder text-xl text-primary\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t\t<div class=\"ml-3\">\n\t\t\t\t\t\t<span class=\"mb-2 font-semibold\">Post has been updated</span>\n\t\t\t\t\t\t<p class=\"text-color-secondary m-0\">3h ago</p>\n\t\t\t\t\t</div>\n\t\t\t\t</a>\n\t\t\t</li>\n\t\t</ul>\n\t</div>\n\n\t<div class=\"flex flex-column mt-5 mx-auto md:mx-0\">\n\t\t<span class=\"mb-2 font-semibold\">Messages</span>\n\t\t<span class=\"text-color-secondary font-medium mb-5\">You have new messages</span>\n\n\t\t<ul class=\"list-none m-0 p-0\">\n\t\t\t<li>\n\t\t\t\t<a\n\t\t\t\t\tclass=\"cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150\">\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<img src=\"assets/demo/images/avatar/circle/avatar-m-8.png\" alt=\"Avatar\" class=\"w-2rem h-2rem\" />\n\t\t\t\t\t</span>\n\t\t\t\t\t<div class=\"ml-3\">\n\t\t\t\t\t\t<span class=\"mb-2 font-semibold\">James Robinson</span>\n\t\t\t\t\t\t<p class=\"text-color-secondary m-0\">10 min ago</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<p-tag value=\"3\" class=\"ml-auto\"></p-tag>\n\t\t\t\t</a>\n\t\t\t</li>\n\t\t\t<li>\n\t\t\t\t<a\n\t\t\t\t\tclass=\"cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150\">\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<img src=\"assets/demo/images/avatar/circle/avatar-f-8.png\" alt=\"Avatar\" class=\"w-2rem h-2rem\" />\n\t\t\t\t\t</span>\n\t\t\t\t\t<div class=\"ml-3\">\n\t\t\t\t\t\t<span class=\"mb-2 font-semibold\">Mary Watson</span>\n\t\t\t\t\t\t<p class=\"text-color-secondary m-0\">15min ago</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<p-tag value=\"1\" class=\"ml-auto\"></p-tag>\n\t\t\t\t</a>\n\t\t\t</li>\n\t\t\t<li>\n\t\t\t\t<a\n\t\t\t\t\tclass=\"cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150\">\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<img src=\"assets/demo/images/avatar/circle/avatar-f-4.png\" alt=\"Avatar\" class=\"w-2rem h-2rem\" />\n\t\t\t\t\t</span>\n\t\t\t\t\t<div class=\"ml-3\">\n\t\t\t\t\t\t<span class=\"mb-2 font-semibold\">Aisha Webb</span>\n\t\t\t\t\t\t<p class=\"text-color-secondary m-0\">3h ago</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<p-tag value=\"2\" class=\"ml-auto\"></p-tag>\n\t\t\t\t</a>\n\t\t\t</li>\n\t\t</ul>\n\t</div>\n</p-sidebar>\n", dependencies: [{ kind: "ngmodule", type: SidebarModule }, { kind: "component", type: i2$1.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: TagModule }, { kind: "component", type: i3.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AppProfileSidebarComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, selector: 'app-profilemenu', imports: [SidebarModule, TagModule], template: "<p-sidebar\n\t[(visible)]=\"visible\"\n\tposition=\"right\"\n\t[transitionOptions]=\"'.3s cubic-bezier(0, 0, 0.2, 1)'\"\n\tstyleClass=\"layout-profile-sidebar w-full sm:w-25rem\">\n\t<div class=\"flex flex-column mx-auto md:mx-0\">\n\t\t<span class=\"mb-2 font-semibold\">Welcome</span>\n\t\t<span class=\"text-color-secondary font-medium mb-5\">Isabella Andolini</span>\n\n\t\t<ul class=\"list-none m-0 p-0\">\n\t\t\t<li>\n\t\t\t\t<a\n\t\t\t\t\tclass=\"cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150\">\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<i class=\"pi pi-user text-xl text-primary\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t\t<div class=\"ml-3\">\n\t\t\t\t\t\t<span class=\"mb-2 font-semibold\">Profile</span>\n\t\t\t\t\t\t<p class=\"text-color-secondary m-0\">Lorem ipsum date visale</p>\n\t\t\t\t\t</div>\n\t\t\t\t</a>\n\t\t\t</li>\n\t\t\t<li>\n\t\t\t\t<a\n\t\t\t\t\tclass=\"cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150\">\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<i class=\"pi pi-user text-xl text-primary\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t\t<div class=\"ml-3\">\n\t\t\t\t\t\t<span class=\"mb-2 font-semibold\">Billing</span>\n\t\t\t\t\t\t<p class=\"text-color-secondary m-0\">Amet mimin m\u0131ollit</p>\n\t\t\t\t\t</div>\n\t\t\t\t</a>\n\t\t\t</li>\n\t\t\t<li>\n\t\t\t\t<a\n\t\t\t\t\tclass=\"cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150\">\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<i class=\"pi pi-cog text-xl text-primary\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t\t<div class=\"ml-3\">\n\t\t\t\t\t\t<span class=\"mb-2 font-semibold\">Settings</span>\n\t\t\t\t\t\t<p class=\"text-color-secondary m-0\">Exercitation veniam</p>\n\t\t\t\t\t</div>\n\t\t\t\t</a>\n\t\t\t</li>\n\t\t\t<li>\n\t\t\t\t<a\n\t\t\t\t\tclass=\"cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150\">\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<i class=\"pi pi-power-off text-xl text-primary\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t\t<div class=\"ml-3\">\n\t\t\t\t\t\t<span class=\"mb-2 font-semibold\">Sign Out</span>\n\t\t\t\t\t\t<p class=\"text-color-secondary m-0\">Sed ut perspiciatis</p>\n\t\t\t\t\t</div>\n\t\t\t\t</a>\n\t\t\t</li>\n\t\t</ul>\n\t</div>\n\n\t<div class=\"flex flex-column mt-5 mx-auto md:mx-0\">\n\t\t<span class=\"mb-2 font-semibold\">Notifications</span>\n\t\t<span class=\"text-color-secondary font-medium mb-5\">You have 3 notifications</span>\n\n\t\t<ul class=\"list-none m-0 p-0\">\n\t\t\t<li>\n\t\t\t\t<a\n\t\t\t\t\tclass=\"cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150\">\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<i class=\"pi pi-comment text-xl text-primary\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t\t<div class=\"ml-3\">\n\t\t\t\t\t\t<span class=\"mb-2 font-semibold\">Your post has new comments</span>\n\t\t\t\t\t\t<p class=\"text-color-secondary m-0\">5 min ago</p>\n\t\t\t\t\t</div>\n\t\t\t\t</a>\n\t\t\t</li>\n\t\t\t<li>\n\t\t\t\t<a\n\t\t\t\t\tclass=\"cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150\">\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<i class=\"pi pi-trash text-xl text-primary\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t\t<div class=\"ml-3\">\n\t\t\t\t\t\t<span class=\"mb-2 font-semibold\">Your post has been deleted</span>\n\t\t\t\t\t\t<p class=\"text-color-secondary m-0\">15min ago</p>\n\t\t\t\t\t</div>\n\t\t\t\t</a>\n\t\t\t</li>\n\t\t\t<li>\n\t\t\t\t<a\n\t\t\t\t\tclass=\"cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150\">\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<i class=\"pi pi-folder text-xl text-primary\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t\t<div class=\"ml-3\">\n\t\t\t\t\t\t<span class=\"mb-2 font-semibold\">Post has been updated</span>\n\t\t\t\t\t\t<p class=\"text-color-secondary m-0\">3h ago</p>\n\t\t\t\t\t</div>\n\t\t\t\t</a>\n\t\t\t</li>\n\t\t</ul>\n\t</div>\n\n\t<div class=\"flex flex-column mt-5 mx-auto md:mx-0\">\n\t\t<span class=\"mb-2 font-semibold\">Messages</span>\n\t\t<span class=\"text-color-secondary font-medium mb-5\">You have new messages</span>\n\n\t\t<ul class=\"list-none m-0 p-0\">\n\t\t\t<li>\n\t\t\t\t<a\n\t\t\t\t\tclass=\"cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150\">\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<img src=\"assets/demo/images/avatar/circle/avatar-m-8.png\" alt=\"Avatar\" class=\"w-2rem h-2rem\" />\n\t\t\t\t\t</span>\n\t\t\t\t\t<div class=\"ml-3\">\n\t\t\t\t\t\t<span class=\"mb-2 font-semibold\">James Robinson</span>\n\t\t\t\t\t\t<p class=\"text-color-secondary m-0\">10 min ago</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<p-tag value=\"3\" class=\"ml-auto\"></p-tag>\n\t\t\t\t</a>\n\t\t\t</li>\n\t\t\t<li>\n\t\t\t\t<a\n\t\t\t\t\tclass=\"cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150\">\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<img src=\"assets/demo/images/avatar/circle/avatar-f-8.png\" alt=\"Avatar\" class=\"w-2rem h-2rem\" />\n\t\t\t\t\t</span>\n\t\t\t\t\t<div class=\"ml-3\">\n\t\t\t\t\t\t<span class=\"mb-2 font-semibold\">Mary Watson</span>\n\t\t\t\t\t\t<p class=\"text-color-secondary m-0\">15min ago</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<p-tag value=\"1\" class=\"ml-auto\"></p-tag>\n\t\t\t\t</a>\n\t\t\t</li>\n\t\t\t<li>\n\t\t\t\t<a\n\t\t\t\t\tclass=\"cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150\">\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<img src=\"assets/demo/images/avatar/circle/avatar-f-4.png\" alt=\"Avatar\" class=\"w-2rem h-2rem\" />\n\t\t\t\t\t</span>\n\t\t\t\t\t<div class=\"ml-3\">\n\t\t\t\t\t\t<span class=\"mb-2 font-semibold\">Aisha Webb</span>\n\t\t\t\t\t\t<p class=\"text-color-secondary m-0\">3h ago</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<p-tag value=\"2\" class=\"ml-auto\"></p-tag>\n\t\t\t\t</a>\n\t\t\t</li>\n\t\t</ul>\n\t</div>\n</p-sidebar>\n" }]
-        }], ctorParameters: () => [{ type: LayoutService }] });
-
-class AppConfigComponent {
-    constructor(layoutService, menuService) {
-        this.layoutService = layoutService;
-        this.menuService = menuService;
-        this.minimal = false;
-        this.componentThemes = [];
-        this.scales = [12, 13, 14, 15, 16];
-    }
-    get visible() {
-        return this.layoutService.state.configSidebarVisible;
-    }
-    set visible(_val) {
-        this.layoutService.state.configSidebarVisible = _val;
-    }
-    get scale() {
-        return this.layoutService.config().scale;
-    }
-    set scale(_val) {
-        this.layoutService.config.update((config) => ({
-            ...config,
-            scale: _val
-        }));
-    }
-    get menuMode() {
-        return this.layoutService.config().menuMode;
-    }
-    set menuMode(_val) {
-        this.layoutService.config.update((config) => ({
-            ...config,
-            menuMode: _val
-        }));
-        if (this.layoutService.isSlimPlus() || this.layoutService.isSlim() || this.layoutService.isHorizontal()) {
-            this.menuService.reset();
-        }
-    }
-    get colorScheme() {
-        return this.layoutService.config().colorScheme;
-    }
-    set colorScheme(_val) {
-        this.layoutService.config.update((config) => ({
-            ...config,
-            colorScheme: _val
-        }));
-    }
-    get inputStyle() {
-        return this.layoutService.config().inputStyle;
-    }
-    set inputStyle(_val) {
-        this.layoutService.config.update((config) => ({
-            ...config,
-            inputStyle: _val
-        }));
-    }
-    get ripple() {
-        return this.layoutService.config().ripple;
-    }
-    set ripple(_val) {
-        this.layoutService.config.update((config) => ({
-            ...config,
-            ripple: _val
-        }));
-    }
-    get menuTheme() {
-        return this.layoutService.config().menuTheme;
-    }
-    set menuTheme(_val) {
-        this.layoutService.config.update((config) => ({
-            ...config,
-            menuTheme: _val
-        }));
-    }
-    get theme() {
-        return this.layoutService.config().theme;
-    }
-    set theme(_val) {
-        this.layoutService.config.update((config) => ({
-            ...config,
-            theme: _val
-        }));
-    }
-    ngOnInit() {
-        this.componentThemes = [
-            { name: 'indigo', color: '#6366F1' },
-            { name: 'blue', color: '#3B82F6' },
-            { name: 'purple', color: '#8B5CF6' },
-            { name: 'teal', color: '#14B8A6' },
-            { name: 'cyan', color: '#06b6d4' },
-            { name: 'green', color: '#10b981' },
-            { name: 'orange', color: '#f59e0b' },
-            { name: 'pink', color: '#d946ef' }
-        ];
-    }
-    onConfigButtonClick() {
-        this.layoutService.showConfigSidebar();
-    }
-    changeColorScheme(colorScheme) {
-        this.colorScheme = colorScheme;
-    }
-    changeTheme(theme) {
-        this.theme = theme;
-    }
-    decrementScale() {
-        this.scale--;
-    }
-    incrementScale() {
-        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()\">\n\t<i class=\"pi pi-cog\"></i>\n</button>\n\n<p-sidebar\n\t[(visible)]=\"visible\"\n\tposition=\"right\"\n\t[transitionOptions]=\"'.3s cubic-bezier(0, 0, 0.2, 1)'\"\n\tstyleClass=\"layout-config-sidebar w-18rem\">\n\t<h5>Themes</h5>\n\t<div class=\"flex flex-wrap row-gap-3\">\n\t\t@for (theme of componentThemes; track theme) {\n\t\t\t<div class=\"w-3\">\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\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\"\n\t\t\t\t\t(click)=\"changeTheme(theme.name)\"\n\t\t\t\t\t[ngStyle]=\"{ 'background-color': theme.color }\">\n\t\t\t\t\t@if (theme.name == this.layoutService.config().theme) {\n\t\t\t\t\t\t<i class=\"pi pi-check text-white\"></i>\n\t\t\t\t\t}\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t}\n\t</div>\n\n\t<h5>Scale</h5>\n\t<div class=\"flex align-items-center\">\n\t\t<button\n\t\t\ticon=\"pi pi-minus\"\n\t\t\ttype=\"button\"\n\t\t\tpButton\n\t\t\t(click)=\"decrementScale()\"\n\t\t\tclass=\"p-button-text p-button-rounded w-2rem h-2rem mr-2\"\n\t\t\t[disabled]=\"scale === scales[0]\"></button>\n\t\t<div class=\"flex gap-2 align-items-center\">\n\t\t\t@for (s of scales; track s) {\n\t\t\t\t<i class=\"pi pi-circle-fill text-300\" [ngClass]=\"{ 'text-primary-500': s === scale }\"></i>\n\t\t\t}\n\t\t</div>\n\t\t<button\n\t\t\ticon=\"pi pi-plus\"\n\t\t\ttype=\"button\"\n\t\t\tpButton\n\t\t\t(click)=\"incrementScale()\"\n\t\t\tclass=\"p-button-text p-button-rounded w-2rem h-2rem ml-2\"\n\t\t\t[disabled]=\"scale === scales[scales.length - 1]\"></button>\n\t</div>\n\n\t@if (!minimal) {\n\t\t<h5>Menu Type</h5>\n\t\t<div class=\"flex flex-wrap row-gap-3\">\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"static\" [(ngModel)]=\"menuMode\" inputId=\"mode1\"></p-radioButton>\n\t\t\t\t<label for=\"mode1\">Static</label>\n\t\t\t</div>\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"overlay\" [(ngModel)]=\"menuMode\" inputId=\"mode2\"></p-radioButton>\n\t\t\t\t<label for=\"mode2\">Overlay</label>\n\t\t\t</div>\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"slim\" [(ngModel)]=\"menuMode\" inputId=\"mode3\"></p-radioButton>\n\t\t\t\t<label for=\"mode3\">Slim</label>\n\t\t\t</div>\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"slim-plus\" [(ngModel)]=\"menuMode\" inputId=\"mode4\"></p-radioButton>\n\t\t\t\t<label for=\"mode3\">Slim +</label>\n\t\t\t</div>\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"reveal\" [(ngModel)]=\"menuMode\" inputId=\"mode6\"></p-radioButton>\n\t\t\t\t<label for=\"mode5\">Reveal</label>\n\t\t\t</div>\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"drawer\" [(ngModel)]=\"menuMode\" inputId=\"mode7\"></p-radioButton>\n\t\t\t\t<label for=\"mode6\">Drawer</label>\n\t\t\t</div>\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"horizontal\" [(ngModel)]=\"menuMode\" inputId=\"mode5\"></p-radioButton>\n\t\t\t\t<label for=\"mode4\">Horizontal</label>\n\t\t\t</div>\n\t\t</div>\n\t\t<h5>Menu Theme</h5>\n\t\t<div class=\"field-radiobutton\">\n\t\t\t<p-radioButton\n\t\t\t\tname=\"menuTheme\"\n\t\t\t\tvalue=\"colorScheme\"\n\t\t\t\t[(ngModel)]=\"menuTheme\"\n\t\t\t\tinputId=\"menutheme-colorscheme\"></p-radioButton>\n\t\t\t<label for=\"menutheme-colorscheme\">Color Scheme</label>\n\t\t</div>\n\t\t<div class=\"field-radiobutton\">\n\t\t\t<p-radioButton\n\t\t\t\tname=\"menuTheme\"\n\t\t\t\tvalue=\"primaryColor\"\n\t\t\t\t[(ngModel)]=\"menuTheme\"\n\t\t\t\tinputId=\"menutheme-primarycolor\"></p-radioButton>\n\t\t\t<label for=\"menutheme-primarycolor\">Primary Color</label>\n\t\t</div>\n\t\t<div class=\"field-radiobutton\">\n\t\t\t<p-radioButton\n\t\t\t\tname=\"menuTheme\"\n\t\t\t\tvalue=\"transparent\"\n\t\t\t\t[(ngModel)]=\"menuTheme\"\n\t\t\t\tinputId=\"menutheme-transparent\"></p-radioButton>\n\t\t\t<label for=\"menutheme-transparent\">Transparent</label>\n\t\t</div>\n\t}\n\n\t<h5>Color Scheme</h5>\n\t<div class=\"field-radiobutton\">\n\t\t<p-radioButton name=\"colorScheme\" value=\"light\" [(ngModel)]=\"colorScheme\" inputId=\"mode-light\"></p-radioButton>\n\t\t<label for=\"mode-light\">Light</label>\n\t</div>\n\t<div class=\"field-radiobutton\">\n\t\t<p-radioButton name=\"colorScheme\" value=\"dim\" [(ngModel)]=\"colorScheme\" inputId=\"mode-dim\"></p-radioButton>\n\t\t<label for=\"mode-dim\">Dim</label>\n\t</div>\n\t<div class=\"field-radiobutton\">\n\t\t<p-radioButton name=\"colorScheme\" value=\"dark\" [(ngModel)]=\"colorScheme\" inputId=\"mode-dark\"></p-radioButton>\n\t\t<label for=\"mode-dark\">Dark</label>\n\t</div>\n\n\t@if (!minimal) {\n\t\t<h5>Input Style</h5>\n\t\t<div class=\"flex\">\n\t\t\t<div class=\"field-radiobutton flex-1\">\n\t\t\t\t<p-radioButton\n\t\t\t\t\tname=\"inputStyle\"\n\t\t\t\t\tvalue=\"outlined\"\n\t\t\t\t\t[(ngModel)]=\"inputStyle\"\n\t\t\t\t\tinputId=\"outlined_input\"></p-radioButton>\n\t\t\t\t<label for=\"outlined_input\">Outlined</label>\n\t\t\t</div>\n\t\t\t<div class=\"field-radiobutton flex-1\">\n\t\t\t\t<p-radioButton name=\"inputStyle\" value=\"filled\" [(ngModel)]=\"inputStyle\" inputId=\"filled_input\"></p-radioButton>\n\t\t\t\t<label for=\"filled_input\">Filled</label>\n\t\t\t</div>\n\t\t</div>\n\t\t<h5>Ripple Effect</h5>\n\t\t<p-inputSwitch [(ngModel)]=\"ripple\"></p-inputSwitch>\n\t}\n</p-sidebar>\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: i2$1.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$1.RadioButton, selector: "p-radioButton", inputs: ["value", "formControlName", "name", "disabled", "label", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "labelStyleClass"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i6.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "ngmodule", type: InputSwitchModule }, { kind: "component", type: i7.InputSwitch, selector: "p-inputSwitch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy"], 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,
-            args: [{ standalone: true, selector: 'app-config', imports: [FormsModule, SidebarModule, RadioButtonModule, ButtonModule, InputSwitchModule, NgStyle, NgClass], template: "<button class=\"layout-config-button p-link\" type=\"button\" (click)=\"onConfigButtonClick()\">\n\t<i class=\"pi pi-cog\"></i>\n</button>\n\n<p-sidebar\n\t[(visible)]=\"visible\"\n\tposition=\"right\"\n\t[transitionOptions]=\"'.3s cubic-bezier(0, 0, 0.2, 1)'\"\n\tstyleClass=\"layout-config-sidebar w-18rem\">\n\t<h5>Themes</h5>\n\t<div class=\"flex flex-wrap row-gap-3\">\n\t\t@for (theme of componentThemes; track theme) {\n\t\t\t<div class=\"w-3\">\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\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\"\n\t\t\t\t\t(click)=\"changeTheme(theme.name)\"\n\t\t\t\t\t[ngStyle]=\"{ 'background-color': theme.color }\">\n\t\t\t\t\t@if (theme.name == this.layoutService.config().theme) {\n\t\t\t\t\t\t<i class=\"pi pi-check text-white\"></i>\n\t\t\t\t\t}\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t}\n\t</div>\n\n\t<h5>Scale</h5>\n\t<div class=\"flex align-items-center\">\n\t\t<button\n\t\t\ticon=\"pi pi-minus\"\n\t\t\ttype=\"button\"\n\t\t\tpButton\n\t\t\t(click)=\"decrementScale()\"\n\t\t\tclass=\"p-button-text p-button-rounded w-2rem h-2rem mr-2\"\n\t\t\t[disabled]=\"scale === scales[0]\"></button>\n\t\t<div class=\"flex gap-2 align-items-center\">\n\t\t\t@for (s of scales; track s) {\n\t\t\t\t<i class=\"pi pi-circle-fill text-300\" [ngClass]=\"{ 'text-primary-500': s === scale }\"></i>\n\t\t\t}\n\t\t</div>\n\t\t<button\n\t\t\ticon=\"pi pi-plus\"\n\t\t\ttype=\"button\"\n\t\t\tpButton\n\t\t\t(click)=\"incrementScale()\"\n\t\t\tclass=\"p-button-text p-button-rounded w-2rem h-2rem ml-2\"\n\t\t\t[disabled]=\"scale === scales[scales.length - 1]\"></button>\n\t</div>\n\n\t@if (!minimal) {\n\t\t<h5>Menu Type</h5>\n\t\t<div class=\"flex flex-wrap row-gap-3\">\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"static\" [(ngModel)]=\"menuMode\" inputId=\"mode1\"></p-radioButton>\n\t\t\t\t<label for=\"mode1\">Static</label>\n\t\t\t</div>\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"overlay\" [(ngModel)]=\"menuMode\" inputId=\"mode2\"></p-radioButton>\n\t\t\t\t<label for=\"mode2\">Overlay</label>\n\t\t\t</div>\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"slim\" [(ngModel)]=\"menuMode\" inputId=\"mode3\"></p-radioButton>\n\t\t\t\t<label for=\"mode3\">Slim</label>\n\t\t\t</div>\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"slim-plus\" [(ngModel)]=\"menuMode\" inputId=\"mode4\"></p-radioButton>\n\t\t\t\t<label for=\"mode3\">Slim +</label>\n\t\t\t</div>\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"reveal\" [(ngModel)]=\"menuMode\" inputId=\"mode6\"></p-radioButton>\n\t\t\t\t<label for=\"mode5\">Reveal</label>\n\t\t\t</div>\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"drawer\" [(ngModel)]=\"menuMode\" inputId=\"mode7\"></p-radioButton>\n\t\t\t\t<label for=\"mode6\">Drawer</label>\n\t\t\t</div>\n\t\t\t<div class=\"flex align-items-center gap-2 w-6\">\n\t\t\t\t<p-radioButton name=\"menuMode\" value=\"horizontal\" [(ngModel)]=\"menuMode\" inputId=\"mode5\"></p-radioButton>\n\t\t\t\t<label for=\"mode4\">Horizontal</label>\n\t\t\t</div>\n\t\t</div>\n\t\t<h5>Menu Theme</h5>\n\t\t<div class=\"field-radiobutton\">\n\t\t\t<p-radioButton\n\t\t\t\tname=\"menuTheme\"\n\t\t\t\tvalue=\"colorScheme\"\n\t\t\t\t[(ngModel)]=\"menuTheme\"\n\t\t\t\tinputId=\"menutheme-colorscheme\"></p-radioButton>\n\t\t\t<label for=\"menutheme-colorscheme\">Color Scheme</label>\n\t\t</div>\n\t\t<div class=\"field-radiobutton\">\n\t\t\t<p-radioButton\n\t\t\t\tname=\"menuTheme\"\n\t\t\t\tvalue=\"primaryColor\"\n\t\t\t\t[(ngModel)]=\"menuTheme\"\n\t\t\t\tinputId=\"menutheme-primarycolor\"></p-radioButton>\n\t\t\t<label for=\"menutheme-primarycolor\">Primary Color</label>\n\t\t</div>\n\t\t<div class=\"field-radiobutton\">\n\t\t\t<p-radioButton\n\t\t\t\tname=\"menuTheme\"\n\t\t\t\tvalue=\"transparent\"\n\t\t\t\t[(ngModel)]=\"menuTheme\"\n\t\t\t\tinputId=\"menutheme-transparent\"></p-radioButton>\n\t\t\t<label for=\"menutheme-transparent\">Transparent</label>\n\t\t</div>\n\t}\n\n\t<h5>Color Scheme</h5>\n\t<div class=\"field-radiobutton\">\n\t\t<p-radioButton name=\"colorScheme\" value=\"light\" [(ngModel)]=\"colorScheme\" inputId=\"mode-light\"></p-radioButton>\n\t\t<label for=\"mode-light\">Light</label>\n\t</div>\n\t<div class=\"field-radiobutton\">\n\t\t<p-radioButton name=\"colorScheme\" value=\"dim\" [(ngModel)]=\"colorScheme\" inputId=\"mode-dim\"></p-radioButton>\n\t\t<label for=\"mode-dim\">Dim</label>\n\t</div>\n\t<div class=\"field-radiobutton\">\n\t\t<p-radioButton name=\"colorScheme\" value=\"dark\" [(ngModel)]=\"colorScheme\" inputId=\"mode-dark\"></p-radioButton>\n\t\t<label for=\"mode-dark\">Dark</label>\n\t</div>\n\n\t@if (!minimal) {\n\t\t<h5>Input Style</h5>\n\t\t<div class=\"flex\">\n\t\t\t<div class=\"field-radiobutton flex-1\">\n\t\t\t\t<p-radioButton\n\t\t\t\t\tname=\"inputStyle\"\n\t\t\t\t\tvalue=\"outlined\"\n\t\t\t\t\t[(ngModel)]=\"inputStyle\"\n\t\t\t\t\tinputId=\"outlined_input\"></p-radioButton>\n\t\t\t\t<label for=\"outlined_input\">Outlined</label>\n\t\t\t</div>\n\t\t\t<div class=\"field-radiobutton flex-1\">\n\t\t\t\t<p-radioButton name=\"inputStyle\" value=\"filled\" [(ngModel)]=\"inputStyle\" inputId=\"filled_input\"></p-radioButton>\n\t\t\t\t<label for=\"filled_input\">Filled</label>\n\t\t\t</div>\n\t\t</div>\n\t\t<h5>Ripple Effect</h5>\n\t\t<p-inputSwitch [(ngModel)]=\"ripple\"></p-inputSwitch>\n\t}\n</p-sidebar>\n" }]
-        }], ctorParameters: () => [{ type: LayoutService }, { type: AppMenuService }], propDecorators: { minimal: [{
-                type: Input
-            }] } });
-
 class AppLayoutComponent {
     constructor(menuService, layoutService, renderer, router) {
         this.menuService = menuService;
@@ -915,8 +917,8 @@ class AppLayoutComponent {
             this.menuOutsideClickListener();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AppLayoutComponent, deps: [{ token: AppMenuService }, { token: LayoutService }, { token: i0.Renderer2 }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: AppLayoutComponent, isStandalone: true, selector: "app-layout", viewQueries: [{ propertyName: "appSidebar", first: true, predicate: AppSidebarComponent, descendants: true }, { propertyName: "appTopbar", first: true, predicate: AppTopbarComponent, descendants: true }], ngImport: i0, template: "<div class=\"layout-container\" [ngClass]=\"containerClass\">\n\t<app-sidebar></app-sidebar>\n\t<div class=\"layout-content-wrapper\">\n\t\t<app-topbar></app-topbar>\n\t\t<!-- <app-breadcrumb class=\"content-breadcrumb\"></app-breadcrumb> -->\n\t\t<div class=\"layout-content\">\n\t\t\t<router-outlet></router-outlet>\n\t\t</div>\n\t</div>\n\t<app-profilemenu></app-profilemenu>\n\t<app-config></app-config>\n\t<div class=\"layout-mask\"></div>\n</div>\n\n<p-toast key=\"toast-root\"></p-toast>\n<p-dialog key=\"dialog-root\"></p-dialog>\n<p-messages key=\"messages-root\"></p-messages>\n<p-confirmPopup key=\"confirmPopup-root\"></p-confirmPopup>\n<p-confirmDialog key=\"confirmDialog-root\"></p-confirmDialog>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: ConfirmDialogModule }, { kind: "component", type: i4$1.ConfirmDialog, selector: "p-confirmDialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "visible", "position"], outputs: ["onHide"] }, { kind: "ngmodule", type: ConfirmPopupModule }, { kind: "component", type: i5$2.ConfirmPopup, selector: "p-confirmPopup", inputs: ["key", "defaultFocus", "showTransitionOptions", "hideTransitionOptions", "autoZIndex", "baseZIndex", "style", "styleClass", "visible"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i6$1.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: MessagesModule }, { kind: "component", type: i7$1.Messages, selector: "p-messages", inputs: ["value", "closable", "style", "styleClass", "enableService", "key", "escape", "severity", "showTransitionOptions", "hideTransitionOptions"], outputs: ["valueChange"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i8.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: AppSidebarComponent, selector: "app-sidebar" }, { kind: "component", type: AppTopbarComponent, selector: "app-topbar" }, { kind: "component", type: AppProfileSidebarComponent, selector: "app-profilemenu" }, { kind: "component", type: AppConfigComponent, selector: "app-config", inputs: ["minimal"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AppLayoutComponent, deps: [{ token: AppMenuService }, { token: LayoutService }, { token: i0.Renderer2 }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: AppLayoutComponent, isStandalone: true, selector: "app-layout", viewQueries: [{ propertyName: "appSidebar", first: true, predicate: AppSidebarComponent, descendants: true }, { propertyName: "appTopbar", first: true, predicate: AppTopbarComponent, descendants: true }], ngImport: i0, template: "<div class=\"layout-container\" [ngClass]=\"containerClass\">\n\t<app-sidebar></app-sidebar>\n\t<div class=\"layout-content-wrapper\">\n\t\t<app-topbar></app-topbar>\n\t\t<!-- <app-breadcrumb class=\"content-breadcrumb\"></app-breadcrumb> -->\n\t\t<div class=\"layout-content\">\n\t\t\t<router-outlet></router-outlet>\n\t\t</div>\n\t</div>\n\t<app-profilemenu></app-profilemenu>\n\t<app-config></app-config>\n\t<div class=\"layout-mask\"></div>\n</div>\n\n<p-toast key=\"toast-root\"></p-toast>\n<p-dialog key=\"dialog-root\"></p-dialog>\n<p-messages key=\"messages-root\"></p-messages>\n<p-confirmPopup key=\"confirmPopup-root\"></p-confirmPopup>\n<p-confirmDialog key=\"confirmDialog-root\"></p-confirmDialog>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: ConfirmDialogModule }, { kind: "component", type: i4$2.ConfirmDialog, selector: "p-confirmDialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "visible", "position"], outputs: ["onHide"] }, { kind: "ngmodule", type: ConfirmPopupModule }, { kind: "component", type: i5$2.ConfirmPopup, selector: "p-confirmPopup", inputs: ["key", "defaultFocus", "showTransitionOptions", "hideTransitionOptions", "autoZIndex", "baseZIndex", "style", "styleClass", "visible"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i6$1.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: MessagesModule }, { kind: "component", type: i7$1.Messages, selector: "p-messages", inputs: ["value", "closable", "style", "styleClass", "enableService", "key", "escape", "severity", "showTransitionOptions", "hideTransitionOptions"], outputs: ["valueChange"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i8.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: AppSidebarComponent, selector: "app-sidebar" }, { kind: "component", type: AppTopbarComponent, selector: "app-topbar" }, { kind: "component", type: AppProfileSidebarComponent, selector: "app-profilemenu" }, { kind: "component", type: AppConfigComponent, selector: "app-config", inputs: ["minimal"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AppLayoutComponent, decorators: [{
             type: Component,
@@ -934,7 +936,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                         AppProfileSidebarComponent,
                         AppConfigComponent
                     ], template: "<div class=\"layout-container\" [ngClass]=\"containerClass\">\n\t<app-sidebar></app-sidebar>\n\t<div class=\"layout-content-wrapper\">\n\t\t<app-topbar></app-topbar>\n\t\t<!-- <app-breadcrumb class=\"content-breadcrumb\"></app-breadcrumb> -->\n\t\t<div class=\"layout-content\">\n\t\t\t<router-outlet></router-outlet>\n\t\t</div>\n\t</div>\n\t<app-profilemenu></app-profilemenu>\n\t<app-config></app-config>\n\t<div class=\"layout-mask\"></div>\n</div>\n\n<p-toast key=\"toast-root\"></p-toast>\n<p-dialog key=\"dialog-root\"></p-dialog>\n<p-messages key=\"messages-root\"></p-messages>\n<p-confirmPopup key=\"confirmPopup-root\"></p-confirmPopup>\n<p-confirmDialog key=\"confirmDialog-root\"></p-confirmDialog>\n" }]
-        }], ctorParameters: () => [{ type: AppMenuService }, { type: LayoutService }, { type: i0.Renderer2 }, { type: i2.Router }], propDecorators: { appSidebar: [{
+        }], ctorParameters: () => [{ type: AppMenuService }, { type: LayoutService }, { type: i0.Renderer2 }, { type: i1.Router }], propDecorators: { appSidebar: [{
                 type: ViewChild,
                 args: [AppSidebarComponent]
             }], appTopbar: [{
@@ -955,33 +957,33 @@ class MFELayoutComponent {
         document.getElementById('app-sub-menu-' + globalThis.activeMF)?.remove();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: MFELayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: MFELayoutComponent, isStandalone: true, selector: "mfe-layout", ngImport: i0, template: `
-		<app-sub-menu hidden></app-sub-menu>
-
-		<router-outlet />
-
-		<p-toast key="toast-root"></p-toast>
-		<p-dialog key="dialog-root"></p-dialog>
-		<p-messages key="messages-root"></p-messages>
-		<p-confirmPopup key="confirmPopup-root"></p-confirmPopup>
-		<p-confirmDialog key="confirmDialog-root"></p-confirmDialog>
-	`, isInline: true, dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: ConfirmDialogModule }, { kind: "component", type: i4$1.ConfirmDialog, selector: "p-confirmDialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "visible", "position"], outputs: ["onHide"] }, { kind: "ngmodule", type: ConfirmPopupModule }, { kind: "component", type: i5$2.ConfirmPopup, selector: "p-confirmPopup", inputs: ["key", "defaultFocus", "showTransitionOptions", "hideTransitionOptions", "autoZIndex", "baseZIndex", "style", "styleClass", "visible"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i6$1.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: MessagesModule }, { kind: "component", type: i7$1.Messages, selector: "p-messages", inputs: ["value", "closable", "style", "styleClass", "enableService", "key", "escape", "severity", "showTransitionOptions", "hideTransitionOptions"], outputs: ["valueChange"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i8.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: AppSubMenuComponent, selector: "app-sub-menu" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: MFELayoutComponent, isStandalone: true, selector: "mfe-layout", ngImport: i0, template: `
+		<app-sub-menu hidden></app-sub-menu>
+
+		<router-outlet />
+
+		<p-toast key="toast-root"></p-toast>
+		<p-dialog key="dialog-root"></p-dialog>
+		<p-messages key="messages-root"></p-messages>
+		<p-confirmPopup key="confirmPopup-root"></p-confirmPopup>
+		<p-confirmDialog key="confirmDialog-root"></p-confirmDialog>
+	`, isInline: true, dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: ConfirmDialogModule }, { kind: "component", type: i4$2.ConfirmDialog, selector: "p-confirmDialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "visible", "position"], outputs: ["onHide"] }, { kind: "ngmodule", type: ConfirmPopupModule }, { kind: "component", type: i5$2.ConfirmPopup, selector: "p-confirmPopup", inputs: ["key", "defaultFocus", "showTransitionOptions", "hideTransitionOptions", "autoZIndex", "baseZIndex", "style", "styleClass", "visible"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i6$1.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: MessagesModule }, { kind: "component", type: i7$1.Messages, selector: "p-messages", inputs: ["value", "closable", "style", "styleClass", "enableService", "key", "escape", "severity", "showTransitionOptions", "hideTransitionOptions"], outputs: ["valueChange"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i8.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: AppSubMenuComponent, selector: "app-sub-menu" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: MFELayoutComponent, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: 'mfe-layout',
-                    template: `
-		<app-sub-menu hidden></app-sub-menu>
-
-		<router-outlet />
-
-		<p-toast key="toast-root"></p-toast>
-		<p-dialog key="dialog-root"></p-dialog>
-		<p-messages key="messages-root"></p-messages>
-		<p-confirmPopup key="confirmPopup-root"></p-confirmPopup>
-		<p-confirmDialog key="confirmDialog-root"></p-confirmDialog>
+                    template: `
+		<app-sub-menu hidden></app-sub-menu>
+
+		<router-outlet />
+
+		<p-toast key="toast-root"></p-toast>
+		<p-dialog key="dialog-root"></p-dialog>
+		<p-messages key="messages-root"></p-messages>
+		<p-confirmPopup key="confirmPopup-root"></p-confirmPopup>
+		<p-confirmDialog key="confirmDialog-root"></p-confirmDialog>
 	`,
                     imports: [
                         RouterOutlet,