@flusys/ng-layout 5.2.0 → 5.3.0

package/assets/layout/_topbar.scss

@@ -83,8 +83,8 @@
   }
 
   .layout-topbar-action-right {
-    margin-left: auto !important;
-    margin-right: -0.9rem !important;
+    margin-inline-start: auto !important;
+    margin-inline-end: -0.9rem !important;
   }
 
   .layout-menu-button {

package/fesm2022/flusys-ng-layout.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, PLATFORM_ID, Injectable, DOCUMENT, signal, computed, effect, Component, afterNextRender, InjectionToken, input, DestroyRef, viewChild, ElementRef, Renderer2 } from '@angular/core';
+import { inject, PLATFORM_ID, Injectable, DOCUMENT, signal, computed, effect, Component, InjectionToken, input, DestroyRef, viewChild, ElementRef, Renderer2 } from '@angular/core';
 import * as i2$3 from '@flusys/ng-shared';
 import { evaluateLogicNode, PermissionValidatorService, InlineSvgComponent, TranslatePipe, TranslateService, IconComponent, AngularModule, PrimeModule } from '@flusys/ng-shared';
 import { isPlatformBrowser, NgComponentOutlet, DOCUMENT as DOCUMENT$1, NgClass } from '@angular/common';
@@ -9,7 +9,7 @@ import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i1$2 from '@angular/router';
 import { Router, NavigationEnd, RouterModule } from '@angular/router';
-import { updatePreset, updateSurfacePalette, $t, definePreset } from '@primeuix/themes';
+import { definePreset, updatePreset, updateSurfacePalette, $t } from '@primeuix/themes';
 import Aura from '@primeuix/themes/aura';
 import Lara from '@primeuix/themes/lara';
 import Nora from '@primeuix/themes/nora';
@@ -92,36 +92,11 @@ function filterMenuItem(item, permissionCode) {
 
 const STORAGE_KEY = 'flusys.layout.config';
 const STORAGE_VERSION = 1;
-/**
- * Service for persisting layout configuration to localStorage.
- * Handles loading, saving, and validation of layout preferences with SSR-safe checks.
- *
- * @example
- * ```typescript
- * const persistence = inject(LayoutPersistenceService);
- *
- * // Load saved config
- * const config = persistence.load();
- *
- * // Save config
- * persistence.save({ darkTheme: true, preset: 'Aura' });
- *
- * // Clear saved config
- * persistence.clear();
- * ```
- */
 class LayoutPersistenceService {
     platformId = inject(PLATFORM_ID);
     isBrowser = isPlatformBrowser(this.platformId);
     validPresets = ['Aura', 'Lara', 'Nora'];
     validMenuModes = ['static', 'overlay', 'topbar'];
-    /**
-     * Load configuration from localStorage.
-     * Returns null if no saved config or invalid data.
-     * SSR-safe (returns null on server).
-     *
-     * @returns Validated layout configuration or null
-     */
     load() {
         if (!this.isBrowser)
             return null;
@@ -137,12 +112,6 @@ class LayoutPersistenceService {
             return null;
         }
     }
-    /**
-     * Save configuration to localStorage.
-     * SSR-safe (no-op on server).
-     *
-     * @param config Layout configuration to save
-     */
     save(config) {
         if (!this.isBrowser)
             return;
@@ -157,41 +126,25 @@ class LayoutPersistenceService {
             // Silent fail - localStorage may be full or disabled
         }
     }
-    /**
-     * Clear stored configuration.
-     * SSR-safe (no-op on server).
-     */
     clear() {
         if (!this.isBrowser)
             return;
         localStorage.removeItem(STORAGE_KEY);
     }
-    /**
-     * Validate and sanitize configuration.
-     * Returns null if version mismatch.
-     *
-     * @param config Configuration to validate
-     * @returns Validated configuration or null
-     */
     validateConfig(config) {
-        // Version mismatch - clear and return null
         if (config._version && config._version !== STORAGE_VERSION) {
             this.clear();
             return null;
         }
-        // Validate preset - silently fix invalid values
         if (config.preset && !this.validPresets.includes(config.preset)) {
             config.preset = 'Aura';
         }
-        // Validate menuMode - silently fix invalid values
         if (config.menuMode && !this.validMenuModes.includes(config.menuMode)) {
             config.menuMode = 'static';
         }
-        // Validate darkTheme
         if (typeof config.darkTheme !== 'boolean') {
             config.darkTheme = false;
         }
-        // Remove version field from returned config
         const { _version, ...cleanConfig } = config;
         return cleanConfig;
     }
@@ -200,21 +153,18 @@ class LayoutPersistenceService {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LayoutPersistenceService, decorators: [{
             type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
+            args: [{ providedIn: 'root' }]
         }] });
 
-/** 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 });
-    DEFAULT_CONFIG = {
+    DEFAULT_CONFIG = this.appConfig?.layoutConfig ?? {
         preset: 'Aura',
-        primary: 'emerald',
+        primary: 'violet',
         surface: null,
         darkTheme: false,
         menuMode: 'static',
@@ -227,9 +177,10 @@ class LayoutService {
         menuHoverActive: false,
         topbarMenuVisible: true,
     };
+    memorable = this.DEFAULT_CONFIG.isMemorable !== false;
     _layoutConfig = signal({
         ...this.DEFAULT_CONFIG,
-        ...this.persistence.load(),
+        ...(this.memorable ? this.persistence.load() : null),
     }, ...(ngDevMode ? [{ debugName: "_layoutConfig" }] : []));
     _layoutState = signal(this.DEFAULT_STATE, ...(ngDevMode ? [{ debugName: "_layoutState" }] : []));
     _transitionComplete = signal(false, ...(ngDevMode ? [{ debugName: "_transitionComplete" }] : []));
@@ -243,25 +194,19 @@ class LayoutService {
     permissionValidator = inject(PermissionValidatorService);
     userProfile = this._userProfile.asReadonly();
     companyProfile = this._companyProfile.asReadonly();
-    // Static app info from config
     appName = this.appConfig?.appName ?? DEFAULT_APP_NAME;
     appLogo = this.appConfig?.appLogo ?? '';
     isAppLogoSvg = this.appLogo.toLowerCase().endsWith('.svg');
     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" }] : []));
     isDarkTheme = computed(() => this._layoutConfig().darkTheme, ...(ngDevMode ? [{ debugName: "isDarkTheme" }] : []));
-    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" }] : []));
     isTopbar = computed(() => this._layoutConfig().menuMode === 'topbar', ...(ngDevMode ? [{ debugName: "isTopbar" }] : []));
-    // User profile computed signals
     userName = computed(() => this._userProfile()?.name ?? 'Guest', ...(ngDevMode ? [{ debugName: "userName" }] : []));
     userEmail = computed(() => this._userProfile()?.email ?? '', ...(ngDevMode ? [{ debugName: "userEmail" }] : []));
     userProfilePictureUrl = computed(() => this._userProfile()?.profilePictureUrl ?? null, ...(ngDevMode ? [{ debugName: "userProfilePictureUrl" }] : []));
@@ -274,23 +219,20 @@ class LayoutService {
     }, ...(ngDevMode ? [{ debugName: "companyName" }] : []));
     displayLogo = computed(() => this.companyLogoUrl() ?? this.appLogo, ...(ngDevMode ? [{ debugName: "displayLogo" }] : []));
     isDisplayLogoSvg = computed(() => this.displayLogo().toLowerCase().endsWith('.svg'), ...(ngDevMode ? [{ debugName: "isDisplayLogoSvg" }] : []));
-    // RxJS Subjects for event communication
-    configUpdate = new Subject();
     overlayOpen = new Subject();
     menuSource = new Subject();
     resetSource = new Subject();
     menuSource$ = this.menuSource.asObservable();
     resetSource$ = this.resetSource.asObservable();
-    configUpdate$ = this.configUpdate.asObservable();
     overlayOpen$ = this.overlayOpen.asObservable();
     initialized = false;
     constructor() {
         effect(() => {
             const config = this._layoutConfig();
-            this.configUpdate.next(config);
             if (this.initialized) {
                 this.handleDarkModeTransition(config);
-                this.persistence.save(config);
+                if (this.memorable)
+                    this.persistence.save(config);
             }
             this.initialized = true;
         });
@@ -367,21 +309,18 @@ class LayoutService {
     reset() {
         this.resetSource.next(true);
     }
-    // Config & state updates
     updateLayoutConfig(config) {
         this._layoutConfig.update((prev) => ({ ...prev, ...config }));
     }
     updateLayoutState(state) {
         this._layoutState.update((prev) => ({ ...prev, ...state }));
     }
-    // Profile setters
     setUserProfile(profile) {
         this._userProfile.set(profile);
     }
     setCompanyProfile(profile) {
         this._companyProfile.set(profile);
     }
-    // Menu & apps
     setMenu(items) {
         this._rawMenu.set(items);
     }
@@ -457,6 +396,82 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 }]
         }] });
 
+const _presets = { Aura, Lara, Nora };
+const _noirPrimary = {
+    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}',
+};
+const _noraScheme = {
+    light: {
+        primary: { color: '{primary.600}', contrastColor: '#ffffff', hoverColor: '{primary.700}', activeColor: '{primary.800}' },
+        highlight: { background: '{primary.600}', focusBackground: '{primary.700}', color: '#ffffff', focusColor: '#ffffff' },
+    },
+    dark: {
+        primary: { color: '{primary.500}', contrastColor: '{surface.900}', hoverColor: '{primary.400}', activeColor: '{primary.300}' },
+        highlight: { background: '{primary.500}', focusBackground: '{primary.400}', color: '{surface.900}', focusColor: '{surface.900}' },
+    },
+};
+const _defaultScheme = {
+    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)',
+        },
+    },
+};
+function buildSemanticExt(palette, presetName) {
+    if (palette === null) {
+        return {
+            semantic: {
+                primary: _noirPrimary,
+                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}' },
+                    },
+                },
+            },
+        };
+    }
+    return { semantic: { primary: palette, colorScheme: presetName === 'Nora' ? _noraScheme : _defaultScheme } };
+}
+function buildPreset(presetName, primary) {
+    const base = _presets[presetName in _presets ? presetName : 'Aura'];
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const palette = primary === 'noir' ? null : base.primitive?.[primary];
+    if (primary !== 'noir' && !palette)
+        return base;
+    return definePreset(base, buildSemanticExt(palette, presetName));
+}
+function buildBootstrapPreset(envConfig) {
+    const preset = envConfig?.preset ?? 'Aura';
+    const primary = envConfig?.primary ?? 'violet';
+    if (envConfig?.isMemorable !== false) {
+        try {
+            const stored = localStorage.getItem('flusys.layout.config');
+            if (stored) {
+                const parsed = JSON.parse(stored);
+                return buildPreset(parsed.preset ?? preset, parsed.primary ?? primary);
+            }
+        }
+        catch { /* SSR or storage disabled */ }
+    }
+    return buildPreset(preset, primary);
+}
+
 const presets = {
     Aura,
     Lara,
@@ -464,9 +479,8 @@ const presets = {
 };
 class AppConfigurator {
     router = inject(Router);
-    translateAdapter = inject(TranslateService, {
-        optional: true,
-    });
+    translateAdapter = inject(TranslateService, { optional: true });
+    platformId = inject(PLATFORM_ID);
     layoutService = inject(LayoutService);
     presets = Object.keys(presets);
     showMenuModeButton = signal(!this.router.url.includes('auth'), ...(ngDevMode ? [{ debugName: "showMenuModeButton" }] : []));
@@ -481,7 +495,6 @@ class AppConfigurator {
                 value: 'overlay',
             },
         ];
-        // Only show topbar mode on desktop
         if (this.layoutService.isDesktop()) {
             options.push({
                 label: this.translate('layout.configurator.menu.mode.topbar'),
@@ -491,11 +504,10 @@ class AppConfigurator {
         return options;
     }, ...(ngDevMode ? [{ debugName: "menuModeOptions" }] : []));
     constructor() {
-        // Use afterNextRender for browser-only initialization (replaces isServer check)
-        afterNextRender(() => {
+        if (isPlatformBrowser(this.platformId)) {
             const preset = this.layoutService.layoutConfig().preset ?? 'Aura';
             this.onPresetChange(preset);
-        });
+        }
     }
     surfaces = [
         {
@@ -635,9 +647,7 @@ class AppConfigurator {
             },
         },
     ];
-    selectedPrimaryColor = computed(() => {
-        return this.layoutService.layoutConfig().primary;
-    }, ...(ngDevMode ? [{ debugName: "selectedPrimaryColor" }] : []));
+    selectedPrimaryColor = computed(() => this.layoutService.layoutConfig().primary, ...(ngDevMode ? [{ debugName: "selectedPrimaryColor" }] : []));
     selectedSurfaceColor = computed(() => this.layoutService.layoutConfig().surface, ...(ngDevMode ? [{ debugName: "selectedSurfaceColor" }] : []));
     isSurfaceSelected(surfaceName) {
         const selectedSurface = this.selectedSurfaceColor();
@@ -681,133 +691,10 @@ class AppConfigurator {
         return palettes;
     }, ...(ngDevMode ? [{ debugName: "primaryColors" }] : []));
     getPresetExt() {
-        const color = this.primaryColors().find((c) => c.name === this.selectedPrimaryColor()) || {};
-        const preset = this.layoutService.layoutConfig().preset;
-        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 {
-            if (preset === 'Nora') {
-                return {
-                    semantic: {
-                        primary: color.palette,
-                        colorScheme: {
-                            light: {
-                                primary: {
-                                    color: '{primary.600}',
-                                    contrastColor: '#ffffff',
-                                    hoverColor: '{primary.700}',
-                                    activeColor: '{primary.800}',
-                                },
-                                highlight: {
-                                    background: '{primary.600}',
-                                    focusBackground: '{primary.700}',
-                                    color: '#ffffff',
-                                    focusColor: '#ffffff',
-                                },
-                            },
-                            dark: {
-                                primary: {
-                                    color: '{primary.500}',
-                                    contrastColor: '{surface.900}',
-                                    hoverColor: '{primary.400}',
-                                    activeColor: '{primary.300}',
-                                },
-                                highlight: {
-                                    background: '{primary.500}',
-                                    focusBackground: '{primary.400}',
-                                    color: '{surface.900}',
-                                    focusColor: '{surface.900}',
-                                },
-                            },
-                        },
-                    },
-                };
-            }
-            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)',
-                                },
-                            },
-                        },
-                    },
-                };
-            }
-        }
+        const color = this.primaryColors().find(c => c.name === this.selectedPrimaryColor()) ?? {};
+        const preset = this.layoutService.layoutConfig().preset ?? 'Aura';
+        const palette = color.name === 'noir' ? null : (color.palette ?? {});
+        return buildSemanticExt(palette, preset);
     }
     updateColors(event, type, color) {
         if (type === 'primary') {
@@ -3025,8 +2912,13 @@ const LAYOUT_MESSAGES = {
     'menu.forms': 'Forms',
     'menu.email': 'Email',
     'menu.event.manager': 'Event Manager',
+    'menu.task.manager': 'Task Manager',
     'menu.notifications': 'Notifications',
     'menu.localization': 'Localization',
+    'menu.projects': 'Projects',
+    'menu.projects.active': 'Active Projects',
+    'menu.projects.archived': 'Archived',
+    'menu.projects.reports': 'Reports',
     // Those are layout part from notification module, but we put them here to avoid circular dependency between layout and notification module
     // components/notification-bell/notification-bell.component.ts
     'notification.title': 'Notifications',
@@ -3047,5 +2939,5 @@ const LAYOUT_MESSAGES = {
  * Generated bundle index. Do not edit.
  */
 
-export { AppCompanyBranchSelector, AppConfigurator, AppFloatingConfigurator, AppFooter, AppLauncher, AppLayout, AppMenu, AppMenuitem, AppProfile, AppSearchbar, AppSidebar, AppTopbar, GreenTheme, LAYOUT_AUTH_API, LAYOUT_AUTH_STATE, LAYOUT_IS_RTL, LAYOUT_LANGUAGE_SELECTOR, LAYOUT_LANGUAGE_SELECTOR_PANEL, LAYOUT_MESSAGES, LAYOUT_NOTIFICATION_BELL, LAYOUT_SEARCHBAR, LAYOUT_SEARCH_ADAPTER, LayoutPersistenceService, LayoutService, NavyBlueTheme, filterAppsByPermissions, filterMenuByPermissions };
+export { AppCompanyBranchSelector, AppConfigurator, AppFloatingConfigurator, AppFooter, AppLauncher, AppLayout, AppMenu, AppMenuitem, AppProfile, AppSearchbar, AppSidebar, AppTopbar, GreenTheme, LAYOUT_AUTH_API, LAYOUT_AUTH_STATE, LAYOUT_IS_RTL, LAYOUT_LANGUAGE_SELECTOR, LAYOUT_LANGUAGE_SELECTOR_PANEL, LAYOUT_MESSAGES, LAYOUT_NOTIFICATION_BELL, LAYOUT_SEARCHBAR, LAYOUT_SEARCH_ADAPTER, LayoutPersistenceService, LayoutService, NavyBlueTheme, buildBootstrapPreset, buildPreset, buildSemanticExt, filterAppsByPermissions, filterMenuByPermissions };
 //# sourceMappingURL=flusys-ng-layout.mjs.map