@cadriciel/layout-cerema 0.0.4

package/fesm2022/cadriciel-layout-cerema.mjs

@@ -0,0 +1,1576 @@
+import * as i0 from '@angular/core';
+import { Injectable, inject, effect, ViewChild, Component, PLATFORM_ID, computed, Input, HostBinding, ElementRef } from '@angular/core';
+import * as i2$1 from '@angular/common';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
+import * as i2 from '@angular/router';
+import { RouterModule, Router, NavigationEnd } from '@angular/router';
+import { Subject, BehaviorSubject, filter as filter$1 } from 'rxjs';
+import * as i3 from 'primeng/styleclass';
+import { StyleClassModule } from 'primeng/styleclass';
+import { LayoutService as LayoutService$1, UserService, MenuService } from '@cadriciel/core';
+import * as i4$2 from 'primeng/ripple';
+import { Ripple, RippleModule } from 'primeng/ripple';
+import { InputText } from 'primeng/inputtext';
+import * as i4 from 'primeng/button';
+import { ButtonModule } from 'primeng/button';
+import { IconField } from 'primeng/iconfield';
+import { InputIcon } from 'primeng/inputicon';
+import * as i2$2 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { updatePreset, updateSurfacePalette, $t } from '@primeng/themes';
+import Aura from '@primeng/themes/aura';
+import Lara from '@primeng/themes/lara';
+import { PrimeNG } from 'primeng/config';
+import * as i3$1 from 'primeng/selectbutton';
+import { SelectButtonModule } from 'primeng/selectbutton';
+import * as i4$1 from 'primeng/drawer';
+import { DrawerModule } from 'primeng/drawer';
+import { ToggleSwitchModule } from 'primeng/toggleswitch';
+import * as i5 from 'primeng/radiobutton';
+import { RadioButtonModule } from 'primeng/radiobutton';
+import { filter } from 'rxjs/operators';
+import { trigger, state, style, transition, animate } from '@angular/animations';
+import * as i5$1 from 'primeng/tooltip';
+import { TooltipModule } from 'primeng/tooltip';
+
+class LayoutService extends LayoutService$1 {
+    menuSource = new Subject();
+    tabOpen = new Subject();
+    tabClose = new Subject();
+    tabs = [];
+    menuSource$ = this.menuSource.asObservable();
+    tabOpen$ = this.tabOpen.asObservable();
+    tabClose$ = this.tabClose.asObservable();
+    constructor() {
+        super();
+    }
+    onMenuStateChange(event) {
+        this.menuSource.next(event);
+    }
+    showProfileSidebar() {
+        this.layoutState.update((prev) => ({ ...prev, profileSidebarVisible: true }));
+    }
+    onTabOpen(value) {
+        this.tabOpen.next(value);
+    }
+    openTab(value) {
+        this.tabs = [...this.tabs, value];
+    }
+    onTabClose(value, index) {
+        this.tabClose.next({ tab: value, index: index });
+    }
+    closeTab(index) {
+        this.tabs.splice(index, 1);
+        this.tabs = [...this.tabs];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: LayoutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: LayoutService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: LayoutService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class AppTopbar {
+    menu = [];
+    searchInput;
+    menuButton;
+    searchActive = false;
+    layoutService = inject(LayoutService);
+    userService = inject(UserService);
+    constructor() {
+        effect(() => {
+            console.log('AppTopbar: layoutConfig appName:', this.layoutService.layoutConfig().appName);
+            console.log('AppTopbar: layoutConfig logoUrl:', this.layoutService.layoutConfig().logoUrl);
+            console.log('AppTopbar: layoutConfig full:', this.layoutService.layoutConfig());
+        });
+    }
+    // Expose the signal directly for the template
+    currentUserSignal = this.userService.currentUser;
+    formatRoles(roles) {
+        if (!roles || roles.length === 0)
+            return 'Utilisateur';
+        return roles.join(', ');
+    }
+    get userInitials() {
+        const user = this.currentUserSignal();
+        if (!user)
+            return 'CK';
+        const fp = user.prenom ? user.prenom.charAt(0).toUpperCase() : '';
+        const fn = user.nom ? user.nom.charAt(0).toUpperCase() : '';
+        return `${fp}${fn}`;
+    }
+    onMenuButtonClick() {
+        this.layoutService.onMenuToggle();
+    }
+    activateSearch() {
+        this.searchActive = true;
+        setTimeout(() => {
+            this.searchInput.nativeElement.focus();
+        }, 100);
+    }
+    deactivateSearch() {
+        this.searchActive = false;
+    }
+    removeTab(event, item, index) {
+        this.layoutService.onTabClose(item, index);
+        event.preventDefault();
+    }
+    get layoutTheme() {
+        return this.layoutService.layoutConfig().layoutTheme;
+    }
+    set layoutTheme(value) {
+        this.layoutService.layoutConfig.update((state) => ({ ...state, layoutTheme: value }));
+    }
+    get logo() {
+        const path = 'assets/layout/images/logo-';
+        const logo = this.layoutService.isDarkTheme() || this.layoutService.layoutConfig().layoutTheme === 'primaryColor' ? 'light.svg' : 'dark.svg';
+        return path + logo;
+    }
+    get tabs() {
+        return this.layoutService.tabs;
+    }
+    onConfigButtonClick() {
+        this.layoutService.showConfigSidebar();
+    }
+    toggleConfigSidebar() {
+        let layoutState = this.layoutService.layoutState();
+        if (this.layoutService.isSidebarActive()) {
+            layoutState.overlayMenuActive = false;
+            layoutState.overlaySubmenuActive = false;
+            layoutState.staticMenuMobileActive = false;
+            layoutState.menuHoverActive = false;
+            layoutState.configSidebarVisible = false;
+        }
+        layoutState.configSidebarVisible = !layoutState.configSidebarVisible;
+        this.layoutService.layoutState.set(layoutState);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AppTopbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: AppTopbar, isStandalone: true, selector: "[app-topbar]", host: { classAttribute: "layout-topbar" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchinput"], descendants: true }, { propertyName: "menuButton", first: true, predicate: ["menubutton"], descendants: true }], ngImport: i0, template: `
+        <div class="layout-topbar">
+            <a class="app-logo" routerLink="/">
+                <div class="logo-container">
+                    <img src="assets/layout/images/logo-cadriciel.png" alt="Cadriciel Logo" class="cerema-logo" />
+                    <div class="separator" *ngIf="layoutService.layoutConfig().logoUrl"></div>
+                    <img *ngIf="layoutService.layoutConfig().logoUrl" [src]="layoutService.layoutConfig().logoUrl" [alt]="layoutService.layoutConfig().logoAlt" class="app-logo-img" />
+                </div>
+                <div class="flex flex-col justify-center ml-2">
+                    <span class="app-name leading-none">{{ layoutService.layoutConfig().appName || 'Cadriciel' }}</span>
+                    <span class="text-sm text-surface-500 dark:text-surface-400 leading-none mt-1" *ngIf="layoutService.layoutConfig().appDescription">{{ layoutService.layoutConfig().appDescription }}</span>
+                </div>
+            </a>
+
+            <button #menubutton class="topbar-menubutton p-link" type="button" (click)="onMenuButtonClick()">
+                <span></span>
+            </button>
+
+            <ul class="topbar-menu">
+                <li *ngFor="let item of tabs; let i = index">
+                    <a
+                        [routerLink]="item.routerLink"
+                        routerLinkActive="active-route"
+                        [routerLinkActiveOptions]="item.routerLinkActiveOptions || { paths: 'exact', queryParams: 'ignored', fragment: 'ignored', matrixParams: 'ignored' }"
+                        [fragment]="item.fragment"
+                        [queryParamsHandling]="item.queryParamsHandling"
+                        [preserveFragment]="item.preserveFragment!"
+                        [skipLocationChange]="item.skipLocationChange!"
+                        [replaceUrl]="item.replaceUrl!"
+                        [state]="item.state"
+                        [queryParams]="item.queryParams"
+                    >
+                        <span>{{ item.label }}</span>
+                    </a>
+                    <i class="pi pi-times" (click)="removeTab($event, item, i)"></i>
+                </li>
+                <li *ngIf="!tabs || tabs.length === 0" class="topbar-menu-empty">Use (cmd + click) on a menu item to open a tab</li>
+            </ul>
+
+            <div class="topbar-actions">
+                <p-button icon="pi pi-palette" rounded (onClick)="layoutService.showConfigSidebar()"></p-button>
+                <div class="topbar-search" [ngClass]="{ 'topbar-search-active': searchActive }">
+                    <button pButton [rounded]="true" severity="secondary" type="button" icon="pi pi-search" (click)="activateSearch()"></button>
+
+                    <div class="search-input-wrapper">
+                        <p-icon-field>
+                            <input #searchinput type="text" pInputText placeholder="Search" (blur)="deactivateSearch()" (keydown.escape)="deactivateSearch()" />
+                            <p-inputicon class="pi pi-search" />
+                        </p-icon-field>
+                    </div>
+                </div>
+
+                <div class="topbar-profile">
+                    <button class="topbar-profile-button" type="button" pStyleClass="@next" enterFromClass="hidden" enterActiveClass="animate-scalein" leaveToClass="hidden" leaveActiveClass="animate-fadeout" [hideOnOutsideClick]="true">
+                        @if (layoutService.layoutState().userAvatarUrl) {
+                            <img alt="avatar" [src]="layoutService.layoutState().userAvatarUrl" />
+                        } @else {
+                            <div class="flex items-center justify-center w-8 h-8 rounded-full bg-primary text-primary-contrast font-bold text-sm shrink-0 mr-2">
+                                {{ userInitials }}
+                            </div>
+                        }
+
+                        <span class="profile-details">
+                            <span class="profile-name">{{ currentUserSignal()?.prenom }} {{ currentUserSignal()?.nom }}</span>
+                            <span class="profile-job">{{ formatRoles(currentUserSignal()?.roleActifList) }}</span>
+                        </span>
+                        <i class="pi pi-angle-down"></i>
+                    </button>
+                    <ul class="list-none p-4 m-0 rounded-border shadow hidden absolute bg-surface-0 dark:bg-surface-900 origin-top w-full sm:w-48 mt-2 right-0 top-auto">
+                        <li>
+                            <a pRipple class="flex p-2 rounded-border items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer">
+                                <i class="pi pi-user !mr-4"></i>
+                                <span class="hidden sm:inline">Profile</span>
+                            </a>
+                            <a pRipple class="flex p-2 rounded-border items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer">
+                                <i class="pi pi-inbox !mr-4"></i>
+                                <span class="hidden sm:inline">Inbox</span>
+                            </a>
+                            <a pRipple class="flex p-2 rounded-border items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer">
+                                <i class="pi pi-cog !mr-4"></i>
+                                <span class="hidden sm:inline">Settings</span>
+                            </a>
+                            <a pRipple class="flex p-2 rounded-border items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer">
+                                <i class="pi pi-power-off !mr-4"></i>
+                                <span class="hidden sm:inline">Sign Out</span>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i3.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape", "hideOnResize", "resizeSelector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: Ripple, selector: "[pRipple]" }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: i4.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AppTopbar, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[app-topbar]',
+                    standalone: true,
+                    imports: [RouterModule, CommonModule, StyleClassModule, FormsModule, Ripple, InputText, ButtonModule, IconField, InputIcon],
+                    template: `
+        <div class="layout-topbar">
+            <a class="app-logo" routerLink="/">
+                <div class="logo-container">
+                    <img src="assets/layout/images/logo-cadriciel.png" alt="Cadriciel Logo" class="cerema-logo" />
+                    <div class="separator" *ngIf="layoutService.layoutConfig().logoUrl"></div>
+                    <img *ngIf="layoutService.layoutConfig().logoUrl" [src]="layoutService.layoutConfig().logoUrl" [alt]="layoutService.layoutConfig().logoAlt" class="app-logo-img" />
+                </div>
+                <div class="flex flex-col justify-center ml-2">
+                    <span class="app-name leading-none">{{ layoutService.layoutConfig().appName || 'Cadriciel' }}</span>
+                    <span class="text-sm text-surface-500 dark:text-surface-400 leading-none mt-1" *ngIf="layoutService.layoutConfig().appDescription">{{ layoutService.layoutConfig().appDescription }}</span>
+                </div>
+            </a>
+
+            <button #menubutton class="topbar-menubutton p-link" type="button" (click)="onMenuButtonClick()">
+                <span></span>
+            </button>
+
+            <ul class="topbar-menu">
+                <li *ngFor="let item of tabs; let i = index">
+                    <a
+                        [routerLink]="item.routerLink"
+                        routerLinkActive="active-route"
+                        [routerLinkActiveOptions]="item.routerLinkActiveOptions || { paths: 'exact', queryParams: 'ignored', fragment: 'ignored', matrixParams: 'ignored' }"
+                        [fragment]="item.fragment"
+                        [queryParamsHandling]="item.queryParamsHandling"
+                        [preserveFragment]="item.preserveFragment!"
+                        [skipLocationChange]="item.skipLocationChange!"
+                        [replaceUrl]="item.replaceUrl!"
+                        [state]="item.state"
+                        [queryParams]="item.queryParams"
+                    >
+                        <span>{{ item.label }}</span>
+                    </a>
+                    <i class="pi pi-times" (click)="removeTab($event, item, i)"></i>
+                </li>
+                <li *ngIf="!tabs || tabs.length === 0" class="topbar-menu-empty">Use (cmd + click) on a menu item to open a tab</li>
+            </ul>
+
+            <div class="topbar-actions">
+                <p-button icon="pi pi-palette" rounded (onClick)="layoutService.showConfigSidebar()"></p-button>
+                <div class="topbar-search" [ngClass]="{ 'topbar-search-active': searchActive }">
+                    <button pButton [rounded]="true" severity="secondary" type="button" icon="pi pi-search" (click)="activateSearch()"></button>
+
+                    <div class="search-input-wrapper">
+                        <p-icon-field>
+                            <input #searchinput type="text" pInputText placeholder="Search" (blur)="deactivateSearch()" (keydown.escape)="deactivateSearch()" />
+                            <p-inputicon class="pi pi-search" />
+                        </p-icon-field>
+                    </div>
+                </div>
+
+                <div class="topbar-profile">
+                    <button class="topbar-profile-button" type="button" pStyleClass="@next" enterFromClass="hidden" enterActiveClass="animate-scalein" leaveToClass="hidden" leaveActiveClass="animate-fadeout" [hideOnOutsideClick]="true">
+                        @if (layoutService.layoutState().userAvatarUrl) {
+                            <img alt="avatar" [src]="layoutService.layoutState().userAvatarUrl" />
+                        } @else {
+                            <div class="flex items-center justify-center w-8 h-8 rounded-full bg-primary text-primary-contrast font-bold text-sm shrink-0 mr-2">
+                                {{ userInitials }}
+                            </div>
+                        }
+
+                        <span class="profile-details">
+                            <span class="profile-name">{{ currentUserSignal()?.prenom }} {{ currentUserSignal()?.nom }}</span>
+                            <span class="profile-job">{{ formatRoles(currentUserSignal()?.roleActifList) }}</span>
+                        </span>
+                        <i class="pi pi-angle-down"></i>
+                    </button>
+                    <ul class="list-none p-4 m-0 rounded-border shadow hidden absolute bg-surface-0 dark:bg-surface-900 origin-top w-full sm:w-48 mt-2 right-0 top-auto">
+                        <li>
+                            <a pRipple class="flex p-2 rounded-border items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer">
+                                <i class="pi pi-user !mr-4"></i>
+                                <span class="hidden sm:inline">Profile</span>
+                            </a>
+                            <a pRipple class="flex p-2 rounded-border items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer">
+                                <i class="pi pi-inbox !mr-4"></i>
+                                <span class="hidden sm:inline">Inbox</span>
+                            </a>
+                            <a pRipple class="flex p-2 rounded-border items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer">
+                                <i class="pi pi-cog !mr-4"></i>
+                                <span class="hidden sm:inline">Settings</span>
+                            </a>
+                            <a pRipple class="flex p-2 rounded-border items-center hover:bg-emphasis transition-colors duration-150 cursor-pointer">
+                                <i class="pi pi-power-off !mr-4"></i>
+                                <span class="hidden sm:inline">Sign Out</span>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    `,
+                    host: {
+                        class: 'layout-topbar'
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { searchInput: [{
+                type: ViewChild,
+                args: ['searchinput']
+            }], menuButton: [{
+                type: ViewChild,
+                args: ['menubutton']
+            }] } });
+
+class AppFooter {
+    layoutService = inject(LayoutService);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AppFooter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: AppFooter, isStandalone: true, selector: "[app-footer]", host: { classAttribute: "layout-footer" }, ngImport: i0, template: ` <div class="footer-start">
+            <img src="assets/layout/images/logo-dark.svg" alt="logo" />
+            <span class="app-name">Cerema</span>
+        </div>
+        <div class="footer-right">
+            <span>v{{ layoutService.layoutConfig().appVersion || '0.0.0' }}</span>
+        </div>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AppFooter, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: '[app-footer]',
+                    template: ` <div class="footer-start">
+            <img src="assets/layout/images/logo-dark.svg" alt="logo" />
+            <span class="app-name">Cerema</span>
+        </div>
+        <div class="footer-right">
+            <span>v{{ layoutService.layoutConfig().appVersion || '0.0.0' }}</span>
+        </div>`,
+                    host: {
+                        class: 'layout-footer'
+                    }
+                }]
+        }] });
+
+const presets = {
+    Aura,
+    Lara
+};
+class AppConfigurator {
+    simple = false;
+    router = inject(Router);
+    config = inject(PrimeNG);
+    layoutService = inject(LayoutService);
+    platformId = inject(PLATFORM_ID);
+    primeng = inject(PrimeNG);
+    presets = Object.keys(presets);
+    themeOptions = [
+        { name: 'Light', value: false },
+        { name: 'Dark', value: true }
+    ];
+    ngOnInit() {
+        if (isPlatformBrowser(this.platformId)) {
+            this.onPresetChange(this.layoutService.layoutConfig().preset);
+        }
+    }
+    surfaces = [
+        {
+            name: 'slate',
+            palette: {
+                0: '#ffffff',
+                50: '#f8fafc',
+                100: '#f1f5f9',
+                200: '#e2e8f0',
+                300: '#cbd5e1',
+                400: '#94a3b8',
+                500: '#64748b',
+                600: '#475569',
+                700: '#334155',
+                800: '#1e293b',
+                900: '#0f172a',
+                950: '#020617'
+            }
+        },
+        {
+            name: 'gray',
+            palette: {
+                0: '#ffffff',
+                50: '#f9fafb',
+                100: '#f3f4f6',
+                200: '#e5e7eb',
+                300: '#d1d5db',
+                400: '#9ca3af',
+                500: '#6b7280',
+                600: '#4b5563',
+                700: '#374151',
+                800: '#1f2937',
+                900: '#111827',
+                950: '#030712'
+            }
+        },
+        {
+            name: 'zinc',
+            palette: {
+                0: '#ffffff',
+                50: '#fafafa',
+                100: '#f4f4f5',
+                200: '#e4e4e7',
+                300: '#d4d4d8',
+                400: '#a1a1aa',
+                500: '#71717a',
+                600: '#52525b',
+                700: '#3f3f46',
+                800: '#27272a',
+                900: '#18181b',
+                950: '#09090b'
+            }
+        },
+        {
+            name: 'neutral',
+            palette: {
+                0: '#ffffff',
+                50: '#fafafa',
+                100: '#f5f5f5',
+                200: '#e5e5e5',
+                300: '#d4d4d4',
+                400: '#a3a3a3',
+                500: '#737373',
+                600: '#525252',
+                700: '#404040',
+                800: '#262626',
+                900: '#171717',
+                950: '#0a0a0a'
+            }
+        },
+        {
+            name: 'stone',
+            palette: {
+                0: '#ffffff',
+                50: '#fafaf9',
+                100: '#f5f5f4',
+                200: '#e7e5e4',
+                300: '#d6d3d1',
+                400: '#a8a29e',
+                500: '#78716c',
+                600: '#57534e',
+                700: '#44403c',
+                800: '#292524',
+                900: '#1c1917',
+                950: '#0c0a09'
+            }
+        },
+        {
+            name: 'soho',
+            palette: {
+                0: '#ffffff',
+                50: '#ececec',
+                100: '#dedfdf',
+                200: '#c4c4c6',
+                300: '#adaeb0',
+                400: '#97979b',
+                500: '#7f8084',
+                600: '#6a6b70',
+                700: '#55565b',
+                800: '#3f4046',
+                900: '#2c2c34',
+                950: '#16161d'
+            }
+        },
+        {
+            name: 'viva',
+            palette: {
+                0: '#ffffff',
+                50: '#f3f3f3',
+                100: '#e7e7e8',
+                200: '#cfd0d0',
+                300: '#b7b8b9',
+                400: '#9fa1a1',
+                500: '#87898a',
+                600: '#6e7173',
+                700: '#565a5b',
+                800: '#3e4244',
+                900: '#262b2c',
+                950: '#0e1315'
+            }
+        },
+        {
+            name: 'ocean',
+            palette: {
+                0: '#ffffff',
+                50: '#fbfcfc',
+                100: '#F7F9F8',
+                200: '#EFF3F2',
+                300: '#DADEDD',
+                400: '#B1B7B6',
+                500: '#828787',
+                600: '#5F7274',
+                700: '#415B61',
+                800: '#29444E',
+                900: '#183240',
+                950: '#0c1920'
+            }
+        }
+    ];
+    selectedPrimaryColor = computed(() => {
+        return this.layoutService.layoutConfig().primary;
+    }, ...(ngDevMode ? [{ debugName: "selectedPrimaryColor" }] : []));
+    selectedSurfaceColor = computed(() => this.layoutService.layoutConfig().surface, ...(ngDevMode ? [{ debugName: "selectedSurfaceColor" }] : []));
+    selectedPreset = computed(() => this.layoutService.layoutConfig().preset, ...(ngDevMode ? [{ debugName: "selectedPreset" }] : []));
+    get menuMode() {
+        return this.layoutService.layoutConfig().menuMode;
+    }
+    set menuMode(val) {
+        this.layoutService.layoutConfig.update((state) => ({
+            ...state,
+            menuMode: val
+        }));
+    }
+    get visible() {
+        return this.layoutService.layoutState().configSidebarVisible;
+    }
+    set visible(val) {
+        this.layoutService.layoutState.update((state) => ({
+            ...state,
+            configSidebarVisible: val
+        }));
+    }
+    darkTheme = computed(() => this.layoutService.layoutConfig().darkTheme, ...(ngDevMode ? [{ debugName: "darkTheme" }] : []));
+    selectedSurface = computed(() => this.layoutService.layoutConfig().surface, ...(ngDevMode ? [{ debugName: "selectedSurface" }] : []));
+    primaryColors = computed(() => {
+        const presetPalette = presets[this.layoutService.layoutConfig().preset].primitive;
+        const colors = ['emerald', 'green', 'lime', 'orange', 'amber', 'yellow', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose'];
+        const palettes = [{ name: 'noir', palette: {} }];
+        colors.forEach((color) => {
+            palettes.push({
+                name: color,
+                palette: presetPalette?.[color]
+            });
+        });
+        return palettes;
+    }, ...(ngDevMode ? [{ debugName: "primaryColors" }] : []));
+    layoutTheme = computed(() => {
+        return this.layoutService.layoutConfig().layoutTheme;
+    }, ...(ngDevMode ? [{ debugName: "layoutTheme" }] : []));
+    onLayoutThemeChange(theme) {
+        this.layoutService.layoutConfig.update((state) => ({
+            ...state,
+            layoutTheme: theme
+        }));
+    }
+    getPresetExt() {
+        const color = this.primaryColors().find((c) => c.name === this.selectedPrimaryColor()) || {};
+        if (color.name === 'noir') {
+            return {
+                semantic: {
+                    primary: {
+                        50: '{surface.50}',
+                        100: '{surface.100}',
+                        200: '{surface.200}',
+                        300: '{surface.300}',
+                        400: '{surface.400}',
+                        500: '{surface.500}',
+                        600: '{surface.600}',
+                        700: '{surface.700}',
+                        800: '{surface.800}',
+                        900: '{surface.900}',
+                        950: '{surface.950}'
+                    },
+                    colorScheme: {
+                        light: {
+                            primary: {
+                                color: '{primary.950}',
+                                contrastColor: '#ffffff',
+                                hoverColor: '{primary.800}',
+                                activeColor: '{primary.700}'
+                            },
+                            highlight: {
+                                background: '{primary.950}',
+                                focusBackground: '{primary.700}',
+                                color: '#ffffff',
+                                focusColor: '#ffffff'
+                            }
+                        },
+                        dark: {
+                            primary: {
+                                color: '{primary.50}',
+                                contrastColor: '{primary.950}',
+                                hoverColor: '{primary.200}',
+                                activeColor: '{primary.300}'
+                            },
+                            highlight: {
+                                background: '{primary.50}',
+                                focusBackground: '{primary.300}',
+                                color: '{primary.950}',
+                                focusColor: '{primary.950}'
+                            }
+                        }
+                    }
+                }
+            };
+        }
+        else {
+            return {
+                semantic: {
+                    primary: color.palette,
+                    colorScheme: {
+                        light: {
+                            primary: {
+                                color: '{primary.500}',
+                                contrastColor: '#ffffff',
+                                hoverColor: '{primary.600}',
+                                activeColor: '{primary.700}'
+                            },
+                            highlight: {
+                                background: '{primary.50}',
+                                focusBackground: '{primary.100}',
+                                color: '{primary.700}',
+                                focusColor: '{primary.800}'
+                            }
+                        },
+                        dark: {
+                            primary: {
+                                color: '{primary.400}',
+                                contrastColor: '{surface.900}',
+                                hoverColor: '{primary.300}',
+                                activeColor: '{primary.200}'
+                            },
+                            highlight: {
+                                background: 'color-mix(in srgb, {primary.400}, transparent 84%)',
+                                focusBackground: 'color-mix(in srgb, {primary.400}, transparent 76%)',
+                                color: 'rgba(255,255,255,.87)',
+                                focusColor: 'rgba(255,255,255,.87)'
+                            }
+                        }
+                    }
+                }
+            };
+        }
+    }
+    updateColors(event, type, color) {
+        if (type === 'primary') {
+            this.layoutService.layoutConfig.update((state) => ({
+                ...state,
+                primary: color.name
+            }));
+        }
+        else if (type === 'surface') {
+            this.layoutService.layoutConfig.update((state) => ({
+                ...state,
+                surface: color.name
+            }));
+        }
+        this.applyTheme(type, color);
+        event.stopPropagation();
+    }
+    applyTheme(type, color) {
+        if (type === 'primary') {
+            updatePreset(this.getPresetExt());
+        }
+        else if (type === 'surface') {
+            updateSurfacePalette(color.palette);
+        }
+    }
+    onPresetChange(event) {
+        this.layoutService.layoutConfig.update((state) => ({
+            ...state,
+            preset: event
+        }));
+        const preset = presets[event];
+        const surfacePalette = this.surfaces.find((s) => s.name === this.selectedSurfaceColor())?.palette;
+        $t().preset(preset).preset(this.getPresetExt()).surfacePalette(surfacePalette).use({ useDefaultOptions: true });
+    }
+    toggleDarkMode() {
+        this.executeDarkModeToggle();
+    }
+    executeDarkModeToggle() {
+        this.layoutService.layoutConfig.update((state) => ({
+            ...state,
+            darkTheme: !state.darkTheme,
+            layoutTheme: state.layoutTheme === 'primaryColor' && !state.darkTheme ? 'colorScheme' : state.layoutTheme
+        }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AppConfigurator, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: AppConfigurator, isStandalone: true, selector: "app-configurator", inputs: { simple: "simple" }, ngImport: i0, template: `
+        <p-drawer [(visible)]="visible" (onHide)="layoutService.hideConfigSidebar()" position="right" [transitionOptions]="'.3s cubic-bezier(0, 0, 0.2, 1)'" styleClass="layout-config-sidebar w-80" header="Settings">
+            <div class="flex flex-col gap-4">
+                <div>
+                    <span class="text-lg font-semibold">Primary</span>
+                    <div class="pt-2 flex gap-2 flex-wrap">
+                        @for (primaryColor of primaryColors(); track primaryColor.name) {
+                            <button
+                                type="button"
+                                [title]="primaryColor.name"
+                                (click)="updateColors($event, 'primary', primaryColor)"
+                                [ngClass]="{
+                                    'outline-primary': primaryColor.name === selectedPrimaryColor()
+                                }"
+                                class="cursor-pointer w-6 h-6 rounded-full flex flex-shrink-0 items-center justify-center p-0 outline-none outline-offset-1"
+                                [style]="{
+                                    'background-color': primaryColor?.name === 'noir' ? 'var(--text-color)' : primaryColor?.palette?.['500']
+                                }"
+                            ></button>
+                        }
+                    </div>
+                </div>
+
+                <div>
+                    <span class="text-lg font-semibold">Surface</span>
+                    <div class="pt-2 flex gap-2 flex-wrap">
+                        @for (surface of surfaces; track surface.name) {
+                            <button
+                                type="button"
+                                [title]="surface.name"
+                                (click)="updateColors($event, 'surface', surface)"
+                                class="cursor-pointer w-6 h-6 rounded-full flex flex-shrink-0 items-center justify-center p-0 outline-none outline-offset-1"
+                                [ngClass]="{
+                                    'outline-primary': selectedSurface() ? selectedSurface() === surface.name : darkTheme() ? surface.name === 'zinc' : surface.name === 'slate'
+                                }"
+                                [style]="{
+                                    'background-color': surface?.palette?.['500']
+                                }"
+                            ></button>
+                        }
+                    </div>
+                </div>
+
+                <div class="flex flex-col gap-2">
+                    <span class="text-lg font-semibold">Presets</span>
+                    <p-selectbutton [options]="presets" [ngModel]="selectedPreset()" (ngModelChange)="onPresetChange($event)" [allowEmpty]="false" size="small"></p-selectbutton>
+                </div>
+
+                <!-- 'Color Scheme' Section -->
+                <div class="flex flex-col gap-2">
+                    <span class="text-lg font-semibold">Color Scheme</span>
+                    <p-selectbutton [ngModel]="darkTheme()" (ngModelChange)="toggleDarkMode()" [options]="themeOptions" optionLabel="name" optionValue="value" [allowEmpty]="false"></p-selectbutton>
+                </div>
+
+                <div class="flex flex-col gap-2">
+                    <span class="text-lg font-semibold">Menu Type</span>
+                    <div class="flex flex-wrap flex-col gap-3">
+                        <div class="flex">
+                            <div class="flex items-center gap-2 w-1/2">
+                                <p-radio-button name="menuMode" value="static" [(ngModel)]="menuMode"></p-radio-button>
+                                <label for="static">Static</label>
+                            </div>
+
+                            <div class="flex items-center gap-2 w-1/2">
+                                <p-radio-button name="menuMode" value="overlay" [(ngModel)]="menuMode"></p-radio-button>
+                                <label for="overlay">Overlay</label>
+                            </div>
+                        </div>
+                        <div class="flex">
+                            <div class="flex items-center gap-2 w-1/2">
+                                <p-radio-button name="menuMode" value="slim" [(ngModel)]="menuMode"></p-radio-button>
+                                <label for="slim">Slim</label>
+                            </div>
+                            <div class="flex items-center gap-2 w-1/2">
+                                <p-radio-button name="menuMode" value="slim-plus" [(ngModel)]="menuMode" inputId="slim-plus"></p-radio-button>
+                                <label for="slim-plus">Slim+</label>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="flex flex-col gap-2">
+                    <span class="text-lg font-semibold">Layout Theme</span>
+                    <div class="flex flex-col gap-4">
+                        <div class="flex items-center gap-2">
+                            <p-radio-button name="layoutTheme" value="colorScheme" [ngModel]="layoutTheme()" inputId="colorScheme" (ngModelChange)="onLayoutThemeChange('colorScheme')"></p-radio-button>
+                            <label for="colorScheme">Color Scheme</label>
+                        </div>
+                        <div class="flex items-center gap-2">
+                            <p-radio-button name="layoutTheme" value="primaryColor" [ngModel]="layoutTheme()" (ngModelChange)="onLayoutThemeChange('primaryColor')" inputId="primaryColor" [disabled]="layoutService.isDarkTheme()"></p-radio-button>
+                            <label for="primaryColor">Primary Color (Light Only)</label>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </p-drawer>
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i3$1.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i4$1.Drawer, selector: "p-drawer", inputs: ["appendTo", "motionOptions", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "ngmodule", type: RadioButtonModule }, { kind: "component", type: i5.RadioButton, selector: "p-radioButton, p-radiobutton, p-radio-button", inputs: ["value", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "styleClass", "autofocus", "binary", "variant", "size"], outputs: ["onClick", "onFocus", "onBlur"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AppConfigurator, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-configurator',
+                    standalone: true,
+                    imports: [CommonModule, FormsModule, SelectButtonModule, DrawerModule, ToggleSwitchModule, RadioButtonModule],
+                    template: `
+        <p-drawer [(visible)]="visible" (onHide)="layoutService.hideConfigSidebar()" position="right" [transitionOptions]="'.3s cubic-bezier(0, 0, 0.2, 1)'" styleClass="layout-config-sidebar w-80" header="Settings">
+            <div class="flex flex-col gap-4">
+                <div>
+                    <span class="text-lg font-semibold">Primary</span>
+                    <div class="pt-2 flex gap-2 flex-wrap">
+                        @for (primaryColor of primaryColors(); track primaryColor.name) {
+                            <button
+                                type="button"
+                                [title]="primaryColor.name"
+                                (click)="updateColors($event, 'primary', primaryColor)"
+                                [ngClass]="{
+                                    'outline-primary': primaryColor.name === selectedPrimaryColor()
+                                }"
+                                class="cursor-pointer w-6 h-6 rounded-full flex flex-shrink-0 items-center justify-center p-0 outline-none outline-offset-1"
+                                [style]="{
+                                    'background-color': primaryColor?.name === 'noir' ? 'var(--text-color)' : primaryColor?.palette?.['500']
+                                }"
+                            ></button>
+                        }
+                    </div>
+                </div>
+
+                <div>
+                    <span class="text-lg font-semibold">Surface</span>
+                    <div class="pt-2 flex gap-2 flex-wrap">
+                        @for (surface of surfaces; track surface.name) {
+                            <button
+                                type="button"
+                                [title]="surface.name"
+                                (click)="updateColors($event, 'surface', surface)"
+                                class="cursor-pointer w-6 h-6 rounded-full flex flex-shrink-0 items-center justify-center p-0 outline-none outline-offset-1"
+                                [ngClass]="{
+                                    'outline-primary': selectedSurface() ? selectedSurface() === surface.name : darkTheme() ? surface.name === 'zinc' : surface.name === 'slate'
+                                }"
+                                [style]="{
+                                    'background-color': surface?.palette?.['500']
+                                }"
+                            ></button>
+                        }
+                    </div>
+                </div>
+
+                <div class="flex flex-col gap-2">
+                    <span class="text-lg font-semibold">Presets</span>
+                    <p-selectbutton [options]="presets" [ngModel]="selectedPreset()" (ngModelChange)="onPresetChange($event)" [allowEmpty]="false" size="small"></p-selectbutton>
+                </div>
+
+                <!-- 'Color Scheme' Section -->
+                <div class="flex flex-col gap-2">
+                    <span class="text-lg font-semibold">Color Scheme</span>
+                    <p-selectbutton [ngModel]="darkTheme()" (ngModelChange)="toggleDarkMode()" [options]="themeOptions" optionLabel="name" optionValue="value" [allowEmpty]="false"></p-selectbutton>
+                </div>
+
+                <div class="flex flex-col gap-2">
+                    <span class="text-lg font-semibold">Menu Type</span>
+                    <div class="flex flex-wrap flex-col gap-3">
+                        <div class="flex">
+                            <div class="flex items-center gap-2 w-1/2">
+                                <p-radio-button name="menuMode" value="static" [(ngModel)]="menuMode"></p-radio-button>
+                                <label for="static">Static</label>
+                            </div>
+
+                            <div class="flex items-center gap-2 w-1/2">
+                                <p-radio-button name="menuMode" value="overlay" [(ngModel)]="menuMode"></p-radio-button>
+                                <label for="overlay">Overlay</label>
+                            </div>
+                        </div>
+                        <div class="flex">
+                            <div class="flex items-center gap-2 w-1/2">
+                                <p-radio-button name="menuMode" value="slim" [(ngModel)]="menuMode"></p-radio-button>
+                                <label for="slim">Slim</label>
+                            </div>
+                            <div class="flex items-center gap-2 w-1/2">
+                                <p-radio-button name="menuMode" value="slim-plus" [(ngModel)]="menuMode" inputId="slim-plus"></p-radio-button>
+                                <label for="slim-plus">Slim+</label>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="flex flex-col gap-2">
+                    <span class="text-lg font-semibold">Layout Theme</span>
+                    <div class="flex flex-col gap-4">
+                        <div class="flex items-center gap-2">
+                            <p-radio-button name="layoutTheme" value="colorScheme" [ngModel]="layoutTheme()" inputId="colorScheme" (ngModelChange)="onLayoutThemeChange('colorScheme')"></p-radio-button>
+                            <label for="colorScheme">Color Scheme</label>
+                        </div>
+                        <div class="flex items-center gap-2">
+                            <p-radio-button name="layoutTheme" value="primaryColor" [ngModel]="layoutTheme()" (ngModelChange)="onLayoutThemeChange('primaryColor')" inputId="primaryColor" [disabled]="layoutService.isDarkTheme()"></p-radio-button>
+                            <label for="primaryColor">Primary Color (Light Only)</label>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </p-drawer>
+    `
+                }]
+        }], propDecorators: { simple: [{
+                type: Input
+            }] } });
+
+class AppBreadcrumb {
+    router;
+    _breadcrumbs$ = new BehaviorSubject([]);
+    breadcrumbs$ = this._breadcrumbs$.asObservable();
+    constructor(router) {
+        this.router = router;
+        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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AppBreadcrumb, deps: [{ token: i2.Router }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: AppBreadcrumb, isStandalone: true, selector: "[app-breadcrumb]", host: { classAttribute: "layout-breadcrumb" }, ngImport: i0, template: ` <ol>
+        <li>
+            <a [routerLink]="['/']">
+                <i class="pi pi-home"></i>
+            </a>
+        </li>
+        <li class="layout-breadcrumb-chevron">/</li>
+        <ng-template ngFor let-item let-last="last" [ngForOf]="breadcrumbs$ | async">
+            <li style="cursor: pointer;">{{ item.label }}</li>
+            <li *ngIf="!last" class="layout-breadcrumb-chevron">/</li>
+        </ng-template>
+    </ol>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AppBreadcrumb, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[app-breadcrumb]',
+                    standalone: true,
+                    imports: [CommonModule, RouterModule],
+                    template: ` <ol>
+        <li>
+            <a [routerLink]="['/']">
+                <i class="pi pi-home"></i>
+            </a>
+        </li>
+        <li class="layout-breadcrumb-chevron">/</li>
+        <ng-template ngFor let-item let-last="last" [ngForOf]="breadcrumbs$ | async">
+            <li style="cursor: pointer;">{{ item.label }}</li>
+            <li *ngIf="!last" class="layout-breadcrumb-chevron">/</li>
+        </ng-template>
+    </ol>`,
+                    host: {
+                        class: 'layout-breadcrumb'
+                    }
+                }]
+        }], ctorParameters: () => [{ type: i2.Router }] });
+
+class AppMenuitem {
+    layoutService;
+    router;
+    item;
+    index;
+    root;
+    parentKey;
+    submenu;
+    get activeClass() {
+        return this.active;
+    }
+    active = false;
+    menuSourceSubscription;
+    menuResetSubscription;
+    key = '';
+    get submenuAnimation() {
+        if (this.layoutService.isDesktop() && (this.layoutService.isHorizontal() || this.layoutService.isSlim() || this.layoutService.isSlimPlus())) {
+            return this.active ? 'visible' : 'hidden';
+        }
+        else
+            return this.root ? 'expanded' : this.active ? 'expanded' : 'collapsed';
+    }
+    isSlim = computed(() => this.layoutService.isSlim(), ...(ngDevMode ? [{ debugName: "isSlim" }] : []));
+    isSlimPlus = computed(() => this.layoutService.isSlimPlus(), ...(ngDevMode ? [{ debugName: "isSlimPlus" }] : []));
+    isHorizontal = computed(() => this.layoutService.isHorizontal(), ...(ngDevMode ? [{ debugName: "isHorizontal" }] : []));
+    get isDesktop() {
+        return this.layoutService.isDesktop();
+    }
+    get isMobile() {
+        return this.layoutService.isMobile();
+    }
+    constructor(layoutService, router) {
+        this.layoutService = layoutService;
+        this.router = router;
+        this.menuSourceSubscription = this.layoutService.menuSource$.subscribe((value) => {
+            Promise.resolve(null).then(() => {
+                if (value.routeEvent) {
+                    this.active = value.key === this.key || value.key.startsWith(this.key + '-') ? true : false;
+                }
+                else {
+                    if (value.key !== this.key && !value.key.startsWith(this.key + '-')) {
+                        this.active = false;
+                    }
+                }
+            });
+        });
+        this.menuResetSubscription = this.layoutService.resetSource$.subscribe(() => {
+            this.active = false;
+        });
+        this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe((params) => {
+            if (this.isSlimPlus() || this.isSlim() || this.isHorizontal()) {
+                this.active = false;
+            }
+            else {
+                if (this.item.routerLink) {
+                    this.updateActiveStateFromRoute();
+                }
+            }
+        });
+    }
+    ngOnInit() {
+        this.key = this.parentKey ? this.parentKey + '-' + this.index : String(this.index);
+        if (!(this.isSlimPlus() || this.isSlim() || this.isHorizontal()) && this.item.routerLink) {
+            this.updateActiveStateFromRoute();
+        }
+    }
+    ngAfterViewChecked() {
+        if (this.root && this.active && this.isDesktop && (this.isHorizontal() || this.isSlim() || this.isSlimPlus())) {
+            this.calculatePosition(this.submenu?.nativeElement, this.submenu?.nativeElement.parentElement);
+        }
+    }
+    updateActiveStateFromRoute() {
+        let activeRoute = this.router.isActive(this.item.routerLink[0], {
+            paths: 'exact',
+            queryParams: 'ignored',
+            matrixParams: 'ignored',
+            fragment: 'ignored'
+        });
+        if (activeRoute) {
+            this.layoutService.onMenuStateChange({
+                key: this.key,
+                routeEvent: true
+            });
+        }
+    }
+    onSubmenuAnimated(event) {
+        if (event.toState === 'visible' && this.isDesktop && (this.isHorizontal() || this.isSlim() || this.isSlimPlus())) {
+            const el = event.element;
+            const elParent = el.parentElement;
+            this.calculatePosition(el, elParent);
+        }
+    }
+    calculatePosition(overlay, target) {
+        if (overlay) {
+            const { left, top } = target.getBoundingClientRect();
+            const vHeight = window.innerHeight;
+            const oHeight = overlay.offsetHeight;
+            const topbarEl = document.querySelector('.layout-topbar');
+            const topbarHeight = topbarEl?.offsetHeight || 0;
+            // reset
+            overlay.style.top = '';
+            overlay.style.left = '';
+            if (this.layoutService.isSlim() || this.layoutService.isSlimPlus()) {
+                const topOffset = top - topbarHeight;
+                const height = topOffset + oHeight + topbarHeight;
+                overlay.style.top = vHeight < height ? `${topOffset - (height - vHeight)}px` : `${topOffset}px`;
+            }
+        }
+    }
+    itemClick(event) {
+        // avoid processing disabled items
+        if (this.item.disabled) {
+            event.preventDefault();
+            return;
+        }
+        // navigate with hover
+        if ((this.root && this.isSlim()) || this.isHorizontal() || this.isSlimPlus()) {
+            this.layoutService.layoutState.update((val) => ({
+                ...val,
+                menuHoverActive: !val.menuHoverActive
+            }));
+        }
+        // execute command
+        if (this.item.command) {
+            this.item.command({ originalEvent: event, item: this.item });
+        }
+        // add tab
+        if ((event.metaKey || event.ctrlKey) && this.item.routerLink && (!this.item.data || !this.item.data.fullPage)) {
+            this.layoutService.onTabOpen(this.item);
+            event.preventDefault();
+        }
+        // toggle active state
+        if (this.item.items) {
+            this.active = !this.active;
+            if (this.root && this.active && (this.isSlim() || this.isHorizontal() || this.isSlimPlus())) {
+                this.layoutService.onOverlaySubmenuOpen();
+            }
+        }
+        else {
+            if (this.layoutService.isMobile()) {
+                this.layoutService.layoutState.update((val) => ({
+                    ...val,
+                    staticMenuMobileActive: false
+                }));
+            }
+            if (this.isSlim() || this.isHorizontal() || this.isSlimPlus()) {
+                this.layoutService.reset();
+                this.layoutService.layoutState.update((val) => ({
+                    ...val,
+                    menuHoverActive: false
+                }));
+            }
+        }
+        this.layoutService.onMenuStateChange({ key: this.key });
+    }
+    onMouseEnter() {
+        // activate item on hover
+        if (this.root && (this.isSlim() || this.isHorizontal() || this.isSlimPlus()) && this.layoutService.isDesktop()) {
+            if (this.layoutService.layoutState().menuHoverActive) {
+                this.active = true;
+                this.layoutService.onMenuStateChange({ key: this.key });
+            }
+        }
+    }
+    ngOnDestroy() {
+        if (this.menuSourceSubscription) {
+            this.menuSourceSubscription.unsubscribe();
+        }
+        if (this.menuResetSubscription) {
+            this.menuResetSubscription.unsubscribe();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AppMenuitem, deps: [{ token: LayoutService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: AppMenuitem, 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>
+            <div *ngIf="root && item.visible !== false" class="layout-menuitem-root-text">
+                {{ item.label }}
+            </div>
+            <a
+                *ngIf="(!item.routerLink || item.items) && item.visible !== false"
+                [attr.href]="item.url"
+                (click)="itemClick($event)"
+                (mouseenter)="onMouseEnter()"
+                [ngClass]="item.class"
+                [attr.target]="item.target"
+                tabindex="0"
+                pRipple
+                [pTooltip]="item.label"
+                [tooltipDisabled]="!(isSlim() && root && !active)"
+            >
+                <i [ngClass]="item.icon" class="layout-menuitem-icon"></i>
+                <span class="layout-menuitem-text">{{ item.label }}</span>
+                <i class="pi pi-fw pi-angle-down layout-submenu-toggler" *ngIf="item.items"></i>
+            </a>
+            <a
+                *ngIf="item.routerLink && !item.items && item.visible !== false"
+                (click)="itemClick($event)"
+                (mouseenter)="onMouseEnter()"
+                [ngClass]="item.class"
+                [routerLink]="item.routerLink"
+                routerLinkActive="active-route"
+                [routerLinkActiveOptions]="
+                    item.routerLinkActiveOptions || {
+                        paths: 'exact',
+                        queryParams: 'ignored',
+                        matrixParams: 'ignored',
+                        fragment: 'ignored'
+                    }
+                "
+                [fragment]="item.fragment"
+                [queryParamsHandling]="item.queryParamsHandling"
+                [preserveFragment]="item.preserveFragment"
+                [skipLocationChange]="item.skipLocationChange"
+                [replaceUrl]="item.replaceUrl"
+                [state]="item.state"
+                [queryParams]="item.queryParams"
+                [attr.target]="item.target"
+                tabindex="0"
+                pRipple
+                [pTooltip]="item.label"
+                [tooltipDisabled]="!(isSlim() && root)"
+            >
+                <i [ngClass]="item.icon" class="layout-menuitem-icon"></i>
+                <span class="layout-menuitem-text">{{ item.label }}</span>
+                <i class="pi pi-fw pi-angle-down layout-submenu-toggler" *ngIf="item.items"></i>
+            </a>
+
+            <ul #submenu *ngIf="item.items && item.visible !== false" [@children]="submenuAnimation" (@children.done)="onSubmenuAnimated($event)">
+                <ng-template ngFor let-child let-i="index" [ngForOf]="item.items">
+                    <li app-menuitem [item]="child" [index]="i" [parentKey]="key" [class]="child['badgeClass']"></li>
+                </ng-template>
+            </ul>
+        </ng-container>
+    `, isInline: true, dependencies: [{ kind: "component", type: AppMenuitem, selector: "[app-menuitem]", inputs: ["item", "index", "root", "parentKey"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i4$2.Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }], animations: [
+            trigger('children', [
+                state('collapsed', style({
+                    height: '0'
+                })),
+                state('expanded', style({
+                    height: '*'
+                })),
+                state('hidden', style({
+                    display: 'none'
+                })),
+                state('visible', style({
+                    display: 'block'
+                })),
+                transition('collapsed <=> expanded', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
+            ])
+        ] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AppMenuitem, decorators: [{
+            type: Component,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: '[app-menuitem]',
+                    imports: [CommonModule, RouterModule, RippleModule, TooltipModule],
+                    template: `
+        <ng-container>
+            <div *ngIf="root && item.visible !== false" class="layout-menuitem-root-text">
+                {{ item.label }}
+            </div>
+            <a
+                *ngIf="(!item.routerLink || item.items) && item.visible !== false"
+                [attr.href]="item.url"
+                (click)="itemClick($event)"
+                (mouseenter)="onMouseEnter()"
+                [ngClass]="item.class"
+                [attr.target]="item.target"
+                tabindex="0"
+                pRipple
+                [pTooltip]="item.label"
+                [tooltipDisabled]="!(isSlim() && root && !active)"
+            >
+                <i [ngClass]="item.icon" class="layout-menuitem-icon"></i>
+                <span class="layout-menuitem-text">{{ item.label }}</span>
+                <i class="pi pi-fw pi-angle-down layout-submenu-toggler" *ngIf="item.items"></i>
+            </a>
+            <a
+                *ngIf="item.routerLink && !item.items && item.visible !== false"
+                (click)="itemClick($event)"
+                (mouseenter)="onMouseEnter()"
+                [ngClass]="item.class"
+                [routerLink]="item.routerLink"
+                routerLinkActive="active-route"
+                [routerLinkActiveOptions]="
+                    item.routerLinkActiveOptions || {
+                        paths: 'exact',
+                        queryParams: 'ignored',
+                        matrixParams: 'ignored',
+                        fragment: 'ignored'
+                    }
+                "
+                [fragment]="item.fragment"
+                [queryParamsHandling]="item.queryParamsHandling"
+                [preserveFragment]="item.preserveFragment"
+                [skipLocationChange]="item.skipLocationChange"
+                [replaceUrl]="item.replaceUrl"
+                [state]="item.state"
+                [queryParams]="item.queryParams"
+                [attr.target]="item.target"
+                tabindex="0"
+                pRipple
+                [pTooltip]="item.label"
+                [tooltipDisabled]="!(isSlim() && root)"
+            >
+                <i [ngClass]="item.icon" class="layout-menuitem-icon"></i>
+                <span class="layout-menuitem-text">{{ item.label }}</span>
+                <i class="pi pi-fw pi-angle-down layout-submenu-toggler" *ngIf="item.items"></i>
+            </a>
+
+            <ul #submenu *ngIf="item.items && item.visible !== false" [@children]="submenuAnimation" (@children.done)="onSubmenuAnimated($event)">
+                <ng-template ngFor let-child let-i="index" [ngForOf]="item.items">
+                    <li app-menuitem [item]="child" [index]="i" [parentKey]="key" [class]="child['badgeClass']"></li>
+                </ng-template>
+            </ul>
+        </ng-container>
+    `,
+                    animations: [
+                        trigger('children', [
+                            state('collapsed', style({
+                                height: '0'
+                            })),
+                            state('expanded', style({
+                                height: '*'
+                            })),
+                            state('hidden', style({
+                                display: 'none'
+                            })),
+                            state('visible', style({
+                                display: 'block'
+                            })),
+                            transition('collapsed <=> expanded', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
+                        ])
+                    ],
+                }]
+        }], ctorParameters: () => [{ type: LayoutService }, { type: i2.Router }], propDecorators: { item: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], root: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.layout-root-menuitem']
+            }], parentKey: [{
+                type: Input
+            }], submenu: [{
+                type: ViewChild,
+                args: ['submenu']
+            }], activeClass: [{
+                type: HostBinding,
+                args: ['class.active-menuitem']
+            }] } });
+
+class AppMenu {
+    el = inject(ElementRef);
+    menuService = inject(MenuService);
+    menuContainer;
+    model = [];
+    ngOnInit() {
+        this.model = this.menuService.getMenu();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AppMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: AppMenu, isStandalone: true, selector: "[app-menu]", viewQueries: [{ propertyName: "menuContainer", first: true, predicate: ["menuContainer"], descendants: true }], ngImport: i0, template: `<div class="layout-menu-container" #menuContainer>
+        <ul class="layout-menu">
+            <ng-container *ngFor="let item of model; let i = index">
+                <li app-menuitem *ngIf="!item.separator" [item]="item" [index]="i" [root]="true"></li>
+                <li *ngIf="item.separator" class="menu-separator"></li>
+            </ng-container>
+        </ul>
+    </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AppMenuitem, selector: "[app-menuitem]", inputs: ["item", "index", "root", "parentKey"] }, { kind: "ngmodule", type: RouterModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AppMenu, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[app-menu]',
+                    standalone: true,
+                    imports: [CommonModule, AppMenuitem, RouterModule],
+                    template: `<div class="layout-menu-container" #menuContainer>
+        <ul class="layout-menu">
+            <ng-container *ngFor="let item of model; let i = index">
+                <li app-menuitem *ngIf="!item.separator" [item]="item" [index]="i" [root]="true"></li>
+                <li *ngIf="item.separator" class="menu-separator"></li>
+            </ng-container>
+        </ul>
+    </div>`
+                }]
+        }], propDecorators: { menuContainer: [{
+                type: ViewChild,
+                args: ['menuContainer']
+            }] } });
+
+class AppSidebar {
+    el = inject(ElementRef);
+    appMenu;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AppSidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: AppSidebar, isStandalone: true, selector: "[app-sidebar]", viewQueries: [{ propertyName: "appMenu", first: true, predicate: AppMenu, descendants: true }], ngImport: i0, template: `<div app-menu class="layout-sidebar"></div>`, isInline: true, dependencies: [{ kind: "component", type: AppMenu, selector: "[app-menu]" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AppSidebar, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[app-sidebar]',
+                    standalone: true,
+                    imports: [AppMenu],
+                    template: `<div app-menu class="layout-sidebar"></div>`,
+                }]
+        }], propDecorators: { appMenu: [{
+                type: ViewChild,
+                args: [AppMenu]
+            }] } });
+
+class AppLayout {
+    layoutService;
+    renderer;
+    router;
+    overlayMenuOpenSubscription;
+    tabOpenSubscription;
+    tabCloseSubscription;
+    menuOutsideClickListener;
+    menuScrollListener;
+    appSidebar;
+    appTopbar;
+    constructor(layoutService, renderer, router) {
+        this.layoutService = layoutService;
+        this.renderer = renderer;
+        this.router = router;
+        this.overlayMenuOpenSubscription = this.layoutService.overlayOpen$.subscribe(() => {
+            if (!this.menuOutsideClickListener) {
+                this.menuOutsideClickListener = this.renderer.listen('document', 'click', (event) => {
+                    const isOutsideClicked = !(this.appSidebar.appMenu.el.nativeElement.isSameNode(event.target) ||
+                        this.appSidebar.appMenu.el.nativeElement.contains(event.target) ||
+                        this.appTopbar.menuButton.nativeElement.isSameNode(event.target) ||
+                        this.appTopbar.menuButton.nativeElement.contains(event.target));
+                    if (isOutsideClicked) {
+                        this.hideMenu();
+                    }
+                });
+            }
+            if ((this.layoutService.isSlim() || this.layoutService.isSlimPlus()) && !this.menuScrollListener) {
+                this.menuScrollListener = this.renderer.listen(this.appSidebar.appMenu.menuContainer.nativeElement, 'scroll', (event) => {
+                    if (this.layoutService.isDesktop()) {
+                        this.hideMenu();
+                    }
+                });
+            }
+            if (this.layoutService.layoutState().staticMenuMobileActive) {
+                this.blockBodyScroll();
+            }
+        });
+        this.router.events.pipe(filter$1((event) => event instanceof NavigationEnd)).subscribe(() => {
+            this.hideMenu();
+        });
+        this.tabOpenSubscription = this.layoutService.tabOpen$.subscribe((tab) => {
+            this.router.navigate(tab.routerLink);
+            this.layoutService.openTab(tab);
+        });
+        this.tabCloseSubscription = this.layoutService.tabClose$.subscribe((event) => {
+            if (this.router.isActive(event.tab.routerLink[0], { paths: 'subset', queryParams: 'subset', fragment: 'ignored', matrixParams: 'ignored' })) {
+                const tabs = this.layoutService.tabs;
+                if (tabs.length > 1) {
+                    if (event.index === tabs.length - 1)
+                        this.router.navigate(tabs[tabs.length - 2].routerLink);
+                    else
+                        this.router.navigate(tabs[event.index + 1].routerLink);
+                }
+                else {
+                    this.router.navigate(['/']);
+                }
+            }
+            this.layoutService.closeTab(event.index);
+        });
+    }
+    blockBodyScroll() {
+        if (document.body.classList) {
+            document.body.classList.add('blocked-scroll');
+        }
+        else {
+            document.body.className += ' blocked-scroll';
+        }
+    }
+    unblockBodyScroll() {
+        if (document.body.classList) {
+            document.body.classList.remove('blocked-scroll');
+        }
+        else {
+            document.body.className = document.body.className.replace(new RegExp('(^|\\b)' + 'blocked-scroll'.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
+        }
+    }
+    hideMenu() {
+        this.layoutService.layoutState.update((prev) => ({ ...prev, overlayMenuActive: false, staticMenuMobileActive: false, menuHoverActive: false }));
+        this.layoutService.reset();
+        if (this.menuOutsideClickListener) {
+            this.menuOutsideClickListener();
+            this.menuOutsideClickListener = null;
+        }
+        if (this.menuScrollListener) {
+            this.menuScrollListener();
+            this.menuScrollListener = null;
+        }
+        this.unblockBodyScroll();
+    }
+    get containerClass() {
+        return {
+            'layout-slim': this.layoutService.layoutConfig().menuMode === 'slim',
+            'layout-slim-plus': this.layoutService.layoutConfig().menuMode === 'slim-plus',
+            'layout-static': this.layoutService.layoutConfig().menuMode === 'static',
+            'layout-overlay': this.layoutService.layoutConfig().menuMode === 'overlay',
+            'layout-overlay-active': this.layoutService.layoutState().overlayMenuActive,
+            'layout-mobile-active': this.layoutService.layoutState().staticMenuMobileActive,
+            'layout-static-inactive': this.layoutService.layoutState().staticMenuDesktopInactive && this.layoutService.layoutConfig().menuMode === 'static',
+            'layout-light': this.layoutService.layoutConfig().layoutTheme === 'colorScheme' && !this.layoutService.isDarkTheme(),
+            'layout-dark': this.layoutService.layoutConfig().layoutTheme === 'colorScheme' && this.layoutService.isDarkTheme(),
+            'layout-primary': !this.layoutService.isDarkTheme() && this.layoutService.layoutConfig().layoutTheme === 'primaryColor'
+        };
+    }
+    ngOnDestroy() {
+        if (this.overlayMenuOpenSubscription) {
+            this.overlayMenuOpenSubscription.unsubscribe();
+        }
+        if (this.menuOutsideClickListener) {
+            this.menuOutsideClickListener();
+        }
+        if (this.tabOpenSubscription) {
+            this.tabOpenSubscription.unsubscribe();
+        }
+        if (this.tabCloseSubscription) {
+            this.tabCloseSubscription.unsubscribe();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AppLayout, deps: [{ token: LayoutService }, { token: i0.Renderer2 }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: AppLayout, isStandalone: true, selector: "app-layout", viewQueries: [{ propertyName: "appSidebar", first: true, predicate: AppSidebar, descendants: true }, { propertyName: "appTopbar", first: true, predicate: AppTopbar, descendants: true }], ngImport: i0, template: `
+        <div class="layout-container" [ngClass]="containerClass">
+            <div app-topbar></div>
+            <div app-sidebar></div>
+            <div class="layout-content-wrapper">
+                <div class="layout-content">
+                    <div class="layout-content-inner">
+                        <nav app-breadcrumb></nav>
+                        <router-outlet></router-outlet>
+                        <div app-footer></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <app-configurator />
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AppTopbar, selector: "[app-topbar]" }, { kind: "component", type: AppSidebar, selector: "[app-sidebar]" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: AppFooter, selector: "[app-footer]" }, { kind: "component", type: AppConfigurator, selector: "app-configurator", inputs: ["simple"] }, { kind: "component", type: AppBreadcrumb, selector: "[app-breadcrumb]" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AppLayout, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-layout',
+                    standalone: true,
+                    imports: [CommonModule, AppTopbar, AppSidebar, RouterModule, AppFooter, AppConfigurator, AppBreadcrumb],
+                    template: `
+        <div class="layout-container" [ngClass]="containerClass">
+            <div app-topbar></div>
+            <div app-sidebar></div>
+            <div class="layout-content-wrapper">
+                <div class="layout-content">
+                    <div class="layout-content-inner">
+                        <nav app-breadcrumb></nav>
+                        <router-outlet></router-outlet>
+                        <div app-footer></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <app-configurator />
+    `,
+                }]
+        }], ctorParameters: () => [{ type: LayoutService }, { type: i0.Renderer2 }, { type: i2.Router }], propDecorators: { appSidebar: [{
+                type: ViewChild,
+                args: [AppSidebar]
+            }], appTopbar: [{
+                type: ViewChild,
+                args: [AppTopbar]
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AppLayout, LayoutService };
+//# sourceMappingURL=cadriciel-layout-cerema.mjs.map