@flusys/ng-layout 1.0.0-rc → 1.0.1

package/fesm2022/flusys-ng-layout.mjs

@@ -1,6 +1,10 @@
-import { isPlatformBrowser, NgClass, DOCUMENT as DOCUMENT$1 } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, PLATFORM_ID, Injectable, DOCUMENT, signal, computed, effect, afterNextRender, ChangeDetectionStrategy, Component, InjectionToken, DestroyRef, ElementRef, viewChild, input, Renderer2 } from '@angular/core';
+import { inject, PLATFORM_ID, Injectable, DOCUMENT, signal, computed, effect, ChangeDetectionStrategy, Component, afterNextRender, InjectionToken, DestroyRef, ElementRef, viewChild, input, Renderer2 } from '@angular/core';
+import { isPlatformBrowser, NgClass, DOCUMENT as DOCUMENT$1 } from '@angular/common';
+import { APP_CONFIG, DEFAULT_APP_NAME, DEFAULT_AUTHOR, isCompanyFeatureEnabled } from '@flusys/ng-core';
+import * as i2$2 from '@flusys/ng-shared';
+import { evaluateLogicNode, PermissionValidatorService, AngularModule, IconComponent } from '@flusys/ng-shared';
+import { Subject, fromEvent, filter as filter$1 } from 'rxjs';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i1$2 from '@angular/router';
@@ -11,10 +15,6 @@ import Lara from '@primeuix/themes/lara';
 import Nora from '@primeuix/themes/nora';
 import * as i2 from 'primeng/selectbutton';
 import { SelectButtonModule } from 'primeng/selectbutton';
-import { APP_CONFIG, DEFAULT_APP_NAME, DEFAULT_AUTHOR, isCompanyFeatureEnabled } from '@flusys/ng-core';
-import * as i2$2 from '@flusys/ng-shared';
-import { evaluateLogicNode, PermissionValidatorService, AngularModule, IconComponent } from '@flusys/ng-shared';
-import { Subject, fromEvent, filter as filter$1 } from 'rxjs';
 import * as i1$1 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import * as i2$1 from 'primeng/styleclass';
@@ -192,90 +192,61 @@ class LayoutPersistenceService {
         const { _version, ...cleanConfig } = config;
         return cleanConfig;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: LayoutPersistenceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: LayoutPersistenceService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LayoutPersistenceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LayoutPersistenceService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: LayoutPersistenceService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LayoutPersistenceService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
         }] });
 
-/**
- * Service managing layout configuration and state.
- * Provides signals for reactive layout updates.
- */
+/** Layout configuration and state management service */
 class LayoutService {
     document = inject(DOCUMENT);
     platformId = inject(PLATFORM_ID);
     isBrowser = isPlatformBrowser(this.platformId);
     persistence = inject(LayoutPersistenceService);
     appConfig = inject(APP_CONFIG, { optional: true });
-    defaultConfig = {
+    DEFAULT_CONFIG = {
         preset: 'Aura',
         primary: 'emerald',
         surface: null,
         darkTheme: false,
         menuMode: 'static',
     };
-    // Load persisted config merged with defaults
-    initialConfig = (() => {
-        const persisted = this.persistence.load();
-        return persisted
-            ? { ...this.defaultConfig, ...persisted }
-            : this.defaultConfig;
-    })();
-    defaultState = {
+    DEFAULT_STATE = {
         staticMenuDesktopInactive: false,
         overlayMenuActive: false,
         configSidebarVisible: false,
         staticMenuMobileActive: false,
         menuHoverActive: false,
     };
-    // Private writable signals with public readonly accessors
-    _layoutConfig = signal(this.initialConfig, ...(ngDevMode ? [{ debugName: "_layoutConfig" }] : []));
-    _layoutState = signal(this.defaultState, ...(ngDevMode ? [{ debugName: "_layoutState" }] : []));
+    _layoutConfig = signal({
+        ...this.DEFAULT_CONFIG,
+        ...this.persistence.load(),
+    }, ...(ngDevMode ? [{ debugName: "_layoutConfig" }] : []));
+    _layoutState = signal(this.DEFAULT_STATE, ...(ngDevMode ? [{ debugName: "_layoutState" }] : []));
     _transitionComplete = signal(false, ...(ngDevMode ? [{ debugName: "_transitionComplete" }] : []));
     layoutConfig = this._layoutConfig.asReadonly();
     layoutState = this._layoutState.asReadonly();
     transitionComplete = this._transitionComplete.asReadonly();
-    // User Profile Signals (private writable, public readonly)
     _userProfile = signal(null, ...(ngDevMode ? [{ debugName: "_userProfile" }] : []));
     _companyProfile = signal(null, ...(ngDevMode ? [{ debugName: "_companyProfile" }] : []));
-    _appName = signal(this.appConfig?.appName ?? DEFAULT_APP_NAME, ...(ngDevMode ? [{ debugName: "_appName" }] : []));
-    userProfile = this._userProfile.asReadonly();
-    companyProfile = this._companyProfile.asReadonly();
-    appName = this._appName.asReadonly();
-    // Author/Brand Signals (private writable, public readonly)
-    _authorName = signal(this.appConfig?.author?.name ?? DEFAULT_AUTHOR.name, ...(ngDevMode ? [{ debugName: "_authorName" }] : []));
-    _authorUrl = signal(this.appConfig?.author?.url ?? DEFAULT_AUTHOR.url, ...(ngDevMode ? [{ debugName: "_authorUrl" }] : []));
-    authorName = this._authorName.asReadonly();
-    authorUrl = this._authorUrl.asReadonly();
-    // App Launcher Signals
-    _rawApps = signal([], ...(ngDevMode ? [{ debugName: "_rawApps" }] : []));
-    /**
-     * Filtered launcher apps based on user permissions.
-     * Automatically recomputes when raw apps or permissions change.
-     */
-    apps = computed(() => {
-        const raw = this._rawApps();
-        const permission = this.permissionValidator.permissions();
-        return filterAppsByPermissions(raw, permission);
-    }, ...(ngDevMode ? [{ debugName: "apps" }] : []));
-    // Menu Signals
     _rawMenu = signal([], ...(ngDevMode ? [{ debugName: "_rawMenu" }] : []));
+    _rawApps = signal([], ...(ngDevMode ? [{ debugName: "_rawApps" }] : []));
     permissionValidator = inject(PermissionValidatorService);
-    /**
-     * Filtered menu items based on user permissions.
-     * Automatically recomputes when raw menu or permission checker changes.
-     * Role checker is optional - if not set, role-based permissions will be denied.
-     */
-    menu = computed(() => {
-        const raw = this._rawMenu(); // Track permission changes
-        const permission = this.permissionValidator.permissions();
-        return filterMenuByPermissions(raw, permission);
-    }, ...(ngDevMode ? [{ debugName: "menu" }] : []));
+    userProfile = this._userProfile.asReadonly();
+    companyProfile = this._companyProfile.asReadonly();
+    // Static app info from config
+    appName = this.appConfig?.appName ?? DEFAULT_APP_NAME;
+    authorName = this.appConfig?.author?.name ?? DEFAULT_AUTHOR.name;
+    authorUrl = this.appConfig?.author?.url ?? DEFAULT_AUTHOR.url;
+    // Permission-filtered menu and apps
+    menu = computed(() => filterMenuByPermissions(this._rawMenu(), this.permissionValidator.permissions()), ...(ngDevMode ? [{ debugName: "menu" }] : []));
+    apps = computed(() => filterAppsByPermissions(this._rawApps(), this.permissionValidator.permissions()), ...(ngDevMode ? [{ debugName: "apps" }] : []));
+    hasApps = computed(() => this.apps().length > 0, ...(ngDevMode ? [{ debugName: "hasApps" }] : []));
     // Computed signals - Layout
     isSidebarActive = computed(() => this._layoutState().overlayMenuActive ||
         this._layoutState().staticMenuMobileActive, ...(ngDevMode ? [{ debugName: "isSidebarActive" }] : []));
@@ -283,21 +254,17 @@ class LayoutService {
     getPrimary = computed(() => this._layoutConfig().primary, ...(ngDevMode ? [{ debugName: "getPrimary" }] : []));
     getSurface = computed(() => this._layoutConfig().surface, ...(ngDevMode ? [{ debugName: "getSurface" }] : []));
     isOverlay = computed(() => this._layoutConfig().menuMode === 'overlay', ...(ngDevMode ? [{ debugName: "isOverlay" }] : []));
-    // Computed signals - User Profile
+    // User profile computed signals
     userName = computed(() => this._userProfile()?.name ?? 'User', ...(ngDevMode ? [{ debugName: "userName" }] : []));
     userEmail = computed(() => this._userProfile()?.email ?? '', ...(ngDevMode ? [{ debugName: "userEmail" }] : []));
     userProfilePictureUrl = computed(() => this._userProfile()?.profilePictureUrl ?? null, ...(ngDevMode ? [{ debugName: "userProfilePictureUrl" }] : []));
-    companyName = computed(() => {
-        // If company feature is disabled, always show app name
-        if (!this.appConfig || !isCompanyFeatureEnabled(this.appConfig)) {
-            return this._appName();
-        }
-        return this._companyProfile()?.name ?? this._appName();
-    }, ...(ngDevMode ? [{ debugName: "companyName" }] : []));
     companyLogoUrl = computed(() => this._companyProfile()?.logoUrl ?? null, ...(ngDevMode ? [{ debugName: "companyLogoUrl" }] : []));
     isAuthenticated = computed(() => !!this._userProfile(), ...(ngDevMode ? [{ debugName: "isAuthenticated" }] : []));
-    // Computed signals - App Launcher
-    hasApps = computed(() => this.apps().length > 0, ...(ngDevMode ? [{ debugName: "hasApps" }] : []));
+    companyName = computed(() => {
+        if (!this.appConfig || !isCompanyFeatureEnabled(this.appConfig))
+            return this.appName;
+        return this._companyProfile()?.name ?? this.appName;
+    }, ...(ngDevMode ? [{ debugName: "companyName" }] : []));
     // RxJS Subjects for event communication
     configUpdate = new Subject();
     overlayOpen = new Subject();
@@ -311,80 +278,55 @@ class LayoutService {
     constructor() {
         effect(() => {
             const config = this._layoutConfig();
-            if (config) {
-                this.onConfigUpdate();
-            }
-        });
-        effect(() => {
-            const config = this._layoutConfig();
-            if (!this.initialized || !config) {
-                this.initialized = true;
-                return;
-            }
-            this.handleDarkModeTransition(config);
-        });
-        // Auto-save configuration changes to localStorage
-        effect(() => {
-            const config = this._layoutConfig();
-            if (config && this.initialized) {
+            this.configUpdate.next(config);
+            if (this.initialized) {
+                this.handleDarkModeTransition(config);
                 this.persistence.save(config);
             }
+            this.initialized = true;
         });
     }
+    toggleDarkMode(config) {
+        const isDark = (config ?? this._layoutConfig()).darkTheme;
+        this.document.documentElement.classList.toggle('app-dark', isDark);
+    }
     handleDarkModeTransition(config) {
         const doc = this.document;
-        // Check for View Transitions API support (not all browsers support it)
         if ('startViewTransition' in doc && typeof doc.startViewTransition === 'function') {
-            this.startViewTransition(config, doc);
+            doc
+                .startViewTransition(() => this.toggleDarkMode(config))
+                .ready.then(() => this.onTransitionEnd())
+                .catch(() => { });
         }
         else {
             this.toggleDarkMode(config);
             this.onTransitionEnd();
         }
     }
-    startViewTransition(config, doc) {
-        const transition = doc.startViewTransition(() => {
-            this.toggleDarkMode(config);
-        });
-        transition.ready.then(() => this.onTransitionEnd()).catch(() => { });
-    }
-    toggleDarkMode(config) {
-        const _config = config || this._layoutConfig();
-        if (_config.darkTheme) {
-            this.document.documentElement.classList.add('app-dark');
-        }
-        else {
-            this.document.documentElement.classList.remove('app-dark');
-        }
-    }
     onTransitionEnd() {
         this._transitionComplete.set(true);
         setTimeout(() => this._transitionComplete.set(false));
     }
     onMenuToggle() {
+        const state = this._layoutState();
         if (this.isOverlay()) {
-            this._layoutState.update((prev) => ({
-                ...prev,
-                overlayMenuActive: !this._layoutState().overlayMenuActive,
-            }));
-            if (this._layoutState().overlayMenuActive) {
+            const newOverlayActive = !state.overlayMenuActive;
+            this._layoutState.update((prev) => ({ ...prev, overlayMenuActive: newOverlayActive }));
+            if (newOverlayActive)
                 this.overlayOpen.next();
-            }
+            return;
         }
         if (this.isDesktop()) {
             this._layoutState.update((prev) => ({
                 ...prev,
-                staticMenuDesktopInactive: !this._layoutState().staticMenuDesktopInactive,
+                staticMenuDesktopInactive: !state.staticMenuDesktopInactive,
             }));
         }
         else {
-            this._layoutState.update((prev) => ({
-                ...prev,
-                staticMenuMobileActive: !this._layoutState().staticMenuMobileActive,
-            }));
-            if (this._layoutState().staticMenuMobileActive) {
+            const newMobileActive = !state.staticMenuMobileActive;
+            this._layoutState.update((prev) => ({ ...prev, staticMenuMobileActive: newMobileActive }));
+            if (newMobileActive)
                 this.overlayOpen.next();
-            }
         }
     }
     isDesktop() {
@@ -393,94 +335,70 @@ class LayoutService {
     isMobile() {
         return !this.isDesktop();
     }
-    onConfigUpdate() {
-        this.configUpdate.next(this._layoutConfig());
-    }
     onMenuStateChange(event) {
         this.menuSource.next(event);
     }
     reset() {
         this.resetSource.next(true);
     }
-    // ==========================================================================
-    // Layout Config Methods
-    // ==========================================================================
-    /**
-     * Update layout configuration.
-     * Called by configurator component.
-     */
+    // Config & state updates
     updateLayoutConfig(config) {
         this._layoutConfig.update((prev) => ({ ...prev, ...config }));
     }
-    /**
-     * Update layout state.
-     * Called internally and by layout components.
-     */
     updateLayoutState(state) {
         this._layoutState.update((prev) => ({ ...prev, ...state }));
     }
-    // ==========================================================================
-    // User Profile Methods
-    // ==========================================================================
-    /**
-     * Set the current user profile for display in layout.
-     * Called by auth integration to sync user data.
-     */
+    // Profile setters
     setUserProfile(profile) {
         this._userProfile.set(profile);
     }
-    /**
-     * Set the current company profile for display in layout.
-     * Called by auth integration to sync company data.
-     */
     setCompanyProfile(profile) {
         this._companyProfile.set(profile);
     }
-    // ==========================================================================
-    // Menu Methods
-    // ==========================================================================
-    /**
-     * Set the raw menu items (unfiltered).
-     * Menu will be automatically filtered based on permission checker.
-     * Called by app initialization to set menu from IAM or other source.
-     */
+    // Menu & apps
     setMenu(items) {
         this._rawMenu.set(items);
     }
-    /**
-     * Clear menu and permission/role checkers.
-     * Called on logout.
-     */
     clearMenu() {
         this._rawMenu.set([]);
     }
-    // ==========================================================================
-    // App Launcher Methods
-    // ==========================================================================
-    /**
-     * Set launcher apps for display in header.
-     * Apps will be automatically filtered based on user permissions.
-     * If empty after filtering, the app launcher button is hidden.
-     */
     setApps(apps) {
         this._rawApps.set(apps);
     }
-    /**
-     * Clear launcher apps.
-     * Called on logout.
-     */
     clearApps() {
         this._rawApps.set([]);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: LayoutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: LayoutService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LayoutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LayoutService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: LayoutService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LayoutService, decorators: [{
             type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+class AppFooter {
+    layoutService = inject(LayoutService);
+    // Footer shows product branding (appName), not user's company
+    appName = this.layoutService.appName;
+    authorName = this.layoutService.authorName;
+    authorUrl = this.layoutService.authorUrl;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppFooter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: AppFooter, isStandalone: true, selector: "app-footer", ngImport: i0, template: `<div class="layout-footer">
+        {{ appName }} by
+        <a [href]="authorUrl" target="_blank" rel="noopener noreferrer" class="text-primary font-bold hover:underline">{{ authorName }}</a>
+    </div>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppFooter, decorators: [{
+            type: Component,
             args: [{
-                    providedIn: 'root',
+                    selector: 'app-footer',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `<div class="layout-footer">
+        {{ appName }} by
+        <a [href]="authorUrl" target="_blank" rel="noopener noreferrer" class="text-primary font-bold hover:underline">{{ authorName }}</a>
+    </div>`,
                 }]
-        }], ctorParameters: () => [] });
+        }] });
 
 const presets = {
     Aura,
@@ -839,8 +757,8 @@ class AppConfigurator {
     onMenuModeChange(event) {
         this.layoutService.updateLayoutConfig({ menuMode: event });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppConfigurator, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AppConfigurator, isStandalone: true, selector: "app-configurator", host: { styleAttribute: "background-color: var(--surface-overlay)", classAttribute: "hidden absolute top-[3.25rem] right-0 w-[calc(100vw-2rem)] sm:w-72 max-w-72 p-4 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)]" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppConfigurator, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: AppConfigurator, isStandalone: true, selector: "app-configurator", host: { styleAttribute: "background-color: var(--surface-overlay)", classAttribute: "hidden absolute top-[3.25rem] right-0 w-[calc(100vw-2rem)] sm:w-72 max-w-72 p-4 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)]" }, ngImport: i0, template: `
     <div class="flex flex-col gap-4">
       <div>
         <span class="text-sm text-muted-color font-semibold">Primary</span>
@@ -909,11 +827,10 @@ class AppConfigurator {
     </div>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i2.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppConfigurator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppConfigurator, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-configurator',
-                    standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [NgClass, FormsModule, SelectButtonModule],
                     template: `
@@ -998,8 +915,8 @@ class AppFloatingConfigurator {
         const currentDarkTheme = this.layoutService.layoutConfig().darkTheme;
         this.layoutService.updateLayoutConfig({ darkTheme: !currentDarkTheme });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppFloatingConfigurator, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: AppFloatingConfigurator, isStandalone: true, selector: "app-floating-configurator", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppFloatingConfigurator, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: AppFloatingConfigurator, isStandalone: true, selector: "app-floating-configurator", ngImport: i0, template: `
         <div class="fixed flex flex-col md:flex-row gap-2 md:gap-4 top-4 md:top-8 right-2 md:right-8 z-50">
             <p-button type="button" (onClick)="toggleDarkMode()" [rounded]="true" [icon]="isDarkTheme() ? 'pi pi-moon' : 'pi pi-sun'" severity="secondary" />
             <div class="relative">
@@ -1009,11 +926,10 @@ class AppFloatingConfigurator {
         </div>
     `, isInline: true, dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.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: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i2$1.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape", "hideOnResize", "resizeSelector"] }, { kind: "component", type: AppConfigurator, selector: "app-configurator" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppFloatingConfigurator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppFloatingConfigurator, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-floating-configurator',
-                    standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [ButtonModule, StyleClassModule, AppConfigurator],
                     template: `
@@ -1028,31 +944,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                 }]
         }] });
 
-class AppFooter {
-    layoutService = inject(LayoutService);
-    // Footer shows product branding (appName), not user's company
-    appName = this.layoutService.appName;
-    authorName = this.layoutService.authorName;
-    authorUrl = this.layoutService.authorUrl;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppFooter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: AppFooter, isStandalone: true, selector: "app-footer", ngImport: i0, template: `<div class="layout-footer">
-        {{ appName() }} by
-        <a [href]="authorUrl()" target="_blank" rel="noopener noreferrer" class="text-primary font-bold hover:underline">{{ authorName() }}</a>
-    </div>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppFooter, decorators: [{
-            type: Component,
-            args: [{
-                    standalone: true,
-                    selector: 'app-footer',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: `<div class="layout-footer">
-        {{ appName() }} by
-        <a [href]="authorUrl()" target="_blank" rel="noopener noreferrer" class="text-primary font-bold hover:underline">{{ authorName() }}</a>
-    </div>`,
-                }]
-        }] });
-
 const LAYOUT_AUTH_STATE = new InjectionToken('LAYOUT_AUTH_STATE');
 const LAYOUT_AUTH_API = new InjectionToken('LAYOUT_AUTH_API');
 
@@ -1190,8 +1081,8 @@ class AppCompanyBranchSelector {
             },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppCompanyBranchSelector, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AppCompanyBranchSelector, isStandalone: true, selector: "app-company-branch-selector", host: { classAttribute: "relative" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppCompanyBranchSelector, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: AppCompanyBranchSelector, isStandalone: true, selector: "app-company-branch-selector", host: { classAttribute: "relative" }, ngImport: i0, template: `
     <button
       type="button"
       class="layout-topbar-action"
@@ -1266,11 +1157,10 @@ class AppCompanyBranchSelector {
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i2$1.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape", "hideOnResize", "resizeSelector"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.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: "ngmodule", type: SelectModule }, { kind: "component", type: i4.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppCompanyBranchSelector, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppCompanyBranchSelector, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-company-branch-selector',
-                    standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [AngularModule, StyleClassModule, ButtonModule, SelectModule],
                     host: { class: 'relative' },
@@ -1371,8 +1261,8 @@ class AppLauncher {
     togglePanel() {
         this._isActive.update((v) => !v);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppLauncher, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AppLauncher, isStandalone: true, selector: "app-launcher", host: { classAttribute: "relative" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppLauncher, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: AppLauncher, isStandalone: true, selector: "app-launcher", host: { classAttribute: "relative" }, ngImport: i0, template: `
     <button
       type="button"
       class="layout-topbar-action"
@@ -1422,11 +1312,10 @@ class AppLauncher {
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i2$1.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape", "hideOnResize", "resizeSelector"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["icon", "iconType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppLauncher, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppLauncher, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-launcher',
-                    standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [StyleClassModule, IconComponent],
                     host: { class: 'relative' },
@@ -1548,8 +1437,8 @@ class AppProfile {
             });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppProfile, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AppProfile, isStandalone: true, selector: "app-profile", host: { classAttribute: "relative" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppProfile, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: AppProfile, isStandalone: true, selector: "app-profile", host: { classAttribute: "relative" }, ngImport: i0, template: `
     <button
       type="button"
       class="layout-topbar-action"
@@ -1618,11 +1507,10 @@ class AppProfile {
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2$2.IsEmptyImageDirective, selector: "img", inputs: ["src"] }, { kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i2$1.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape", "hideOnResize", "resizeSelector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppProfile, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppProfile, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-profile',
-                    standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [AngularModule, StyleClassModule],
                     host: { class: 'relative' },
@@ -1729,8 +1617,8 @@ class AppTopbar {
             this.activePanel.set(null);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppTopbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AppTopbar, isStandalone: true, selector: "app-topbar", viewQueries: [{ propertyName: "configContainer", first: true, predicate: ["configContainer"], descendants: true, isSignal: true }], ngImport: i0, template: ` <div class="layout-topbar">
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppTopbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: AppTopbar, isStandalone: true, selector: "app-topbar", viewQueries: [{ propertyName: "configContainer", first: true, predicate: ["configContainer"], descendants: true, isSignal: true }], ngImport: i0, template: ` <div class="layout-topbar">
     <div class="layout-topbar-logo-container">
       <button
         class="layout-menu-button layout-topbar-action"
@@ -1800,11 +1688,10 @@ class AppTopbar {
     </div>
   </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i2$1.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape", "hideOnResize", "resizeSelector"] }, { kind: "component", type: AppConfigurator, selector: "app-configurator" }, { kind: "component", type: AppProfile, selector: "app-profile" }, { kind: "component", type: AppCompanyBranchSelector, selector: "app-company-branch-selector" }, { kind: "component", type: AppLauncher, selector: "app-launcher" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppTopbar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppTopbar, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-topbar',
-                    standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [
                         RouterModule,
@@ -1981,8 +1868,8 @@ class AppMenuitem {
         }
         this.layoutService.onMenuStateChange({ key: this.key() });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppMenuitem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AppMenuitem, isStandalone: true, selector: "[app-menuitem]", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null }, parentKey: { classPropertyName: "parentKey", publicName: "parentKey", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.active-menuitem": "active()" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppMenuitem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: AppMenuitem, isStandalone: true, selector: "[app-menuitem]", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null }, parentKey: { classPropertyName: "parentKey", publicName: "parentKey", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.active-menuitem": "active()" } }, ngImport: i0, template: `
     <ng-container>
       @if (item().children?.length) {
         <a (click)="itemClick()" tabindex="0" pRipple>
@@ -2040,9 +1927,9 @@ class AppMenuitem {
     </ng-container>
   `, isInline: true, styles: [":host ul{overflow:hidden;transition:max-height .4s cubic-bezier(.86,0,.07,1)}:host ul.submenu-collapsed{max-height:0}:host ul.submenu-expanded{max-height:1000px}\n"], dependencies: [{ kind: "component", type: AppMenuitem, selector: "[app-menuitem]", inputs: ["item", "index", "parentKey"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["icon", "iconType"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i2$3.Ripple, selector: "[pRipple]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppMenuitem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppMenuitem, decorators: [{
             type: Component,
-            args: [{ selector: '[app-menuitem]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent, RouterModule, RippleModule], template: `
+            args: [{ selector: '[app-menuitem]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent, RouterModule, RippleModule], template: `
     <ng-container>
       @if (item().children?.length) {
         <a (click)="itemClick()" tabindex="0" pRipple>
@@ -2117,8 +2004,8 @@ class AppMenu {
      * - Permission state changes (user permissions updated)
      */
     menuItems = this.layoutService.menu;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AppMenu, isStandalone: true, selector: "app-menu", ngImport: i0, template: `<div class="layout-menu">
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: AppMenu, isStandalone: true, selector: "app-menu", ngImport: i0, template: `<div class="layout-menu">
     <ul>
       @for (
         item of menuItems();
@@ -2130,11 +2017,10 @@ class AppMenu {
     </ul>
   </div>`, isInline: true, dependencies: [{ kind: "component", type: AppMenuitem, selector: "[app-menuitem]", inputs: ["item", "index", "parentKey"] }, { kind: "ngmodule", type: RouterModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppMenu, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppMenu, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-menu',
-                    standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [AppMenuitem, RouterModule],
                     template: `<div class="layout-menu">
@@ -2152,18 +2038,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
         }] });
 
 class AppSidebar {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppSidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: AppSidebar, isStandalone: true, selector: "app-sidebar", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppSidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: AppSidebar, isStandalone: true, selector: "app-sidebar", ngImport: i0, template: `
     <div class="layout-sidebar">
       <app-menu />
     </div>
   `, isInline: true, dependencies: [{ kind: "component", type: AppMenu, selector: "app-menu" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppSidebar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppSidebar, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-sidebar',
-                    standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [AppMenu],
                     template: `
@@ -2238,8 +2123,8 @@ class AppLayout {
             'layout-mobile-active': state.staticMenuMobileActive,
         };
     }, ...(ngDevMode ? [{ debugName: "containerClass" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppLayout, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: AppLayout, isStandalone: true, selector: "app-layout", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppLayout, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: AppLayout, isStandalone: true, selector: "app-layout", ngImport: i0, template: `
     <div class="layout-wrapper" [ngClass]="containerClass()">
       <app-topbar></app-topbar>
       <app-sidebar></app-sidebar>
@@ -2253,11 +2138,10 @@ class AppLayout {
     </div>
   `, isInline: true, dependencies: [{ kind: "directive", type: 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: i1$2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: AppFooter, selector: "app-footer" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AppLayout, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AppLayout, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-layout',
-                    standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [NgClass, AppTopbar, AppSidebar, RouterModule, AppFooter],
                     template: `
@@ -2276,42 +2160,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
-const GreenTheme = definePreset(Material, {
+const NavyBlueTheme = definePreset(Material, {
     semantic: {
         colorScheme: {
             light: {
                 primary: {
-                    color: '#01712c',
-                    inverseColor: '#119744',
-                    hoverColor: '#119744',
-                    activeColor: '#119744',
+                    color: '#3535cd',
+                    inverseColor: '#0707a9',
+                    hoverColor: '#0707a9',
+                    activeColor: '#0707a9',
                 },
                 highlight: {
                     background: '#e2e8f0',
                     focusBackground: '#e2e8f0',
-                    color: '#01712c',
-                    focusColor: '#01712c',
+                    color: '#3535cd',
+                    focusColor: '#3535cd',
                 },
             },
         },
     },
 });
 
-const NavyBlueTheme = definePreset(Material, {
+const GreenTheme = definePreset(Material, {
     semantic: {
         colorScheme: {
             light: {
                 primary: {
-                    color: '#3535cd',
-                    inverseColor: '#0707a9',
-                    hoverColor: '#0707a9',
-                    activeColor: '#0707a9',
+                    color: '#01712c',
+                    inverseColor: '#119744',
+                    hoverColor: '#119744',
+                    activeColor: '#119744',
                 },
                 highlight: {
                     background: '#e2e8f0',
                     focusBackground: '#e2e8f0',
-                    color: '#3535cd',
-                    focusColor: '#3535cd',
+                    color: '#01712c',
+                    focusColor: '#01712c',
                 },
             },
         },