@acorex/platform 21.0.0-next.70 → 21.0.0-next.72

package/fesm2022/acorex-platform-themes-shared.mjs

@@ -7,10 +7,10 @@ import { AXDropdownModule } from '@acorex/components/dropdown';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { computed, inject, ChangeDetectionStrategy, Component, InjectionToken, Injectable, Input, signal, effect, Injector, NgModule } from '@angular/core';
+import { computed, inject, effect, ChangeDetectionStrategy, Component, InjectionToken, Injectable, Input, signal, Injector, NgModule } from '@angular/core';
 import { AXPSettingsService, AXP_SETTING_DEFINITION_PROVIDER } from '@acorex/platform/common';
 import * as i1$3 from '@acorex/platform/core';
-import { AXPScreenSize, AXPPlatformScope, AXPComponentSlotModule } from '@acorex/platform/core';
+import { AXPScreenSize, AXPDeviceService, AXPPlatformScope, AXPComponentSlotModule } from '@acorex/platform/core';
 import { HttpClient } from '@angular/common/http';
 import { signalStore, withState, withComputed, withMethods, patchState, withHooks } from '@ngrx/signals';
 import { timer, firstValueFrom, filter } from 'rxjs';
@@ -116,6 +116,8 @@ withState(() => {
         sideMenuState: (getInitialScreenSize() === AXPScreenSize.Large
             ? AXPSideMenuState.Opened
             : AXPSideMenuState.Closed),
+        /** Ephemeral overlay drawer state on small/medium viewports; never persisted. */
+        overlaySideMenuOpen: false,
         sideMenuWidth: AXP_SIDE_MENU_FULL_DEFAULT_WIDTH,
         sideMenuCompactWidth: AXP_SIDE_MENU_COMPACT_WIDTH,
         menuVerticalMode: AXPMenuVerticalMode.Full,
@@ -126,27 +128,36 @@ withState(() => {
     return state;
 }), 
 // Computed Signals
-withComputed(({ currentMode: currentTheme, systemThemeMode: systemTheme, sideMenuState, overlayLoading, navigationLoading, menuOrientation, menuVerticalMode, sideMenuWidth, sideMenuCompactWidth, isPrinting, }) => ({
-    isDarkMode: computed(() => {
-        if (isPrinting()) {
-            return false;
+withComputed(({ currentMode: currentTheme, systemThemeMode: systemTheme, sideMenuState, overlaySideMenuOpen, overlayLoading, navigationLoading, menuOrientation, menuVerticalMode, sideMenuWidth, sideMenuCompactWidth, isPrinting, }, deviceService = inject(AXPDeviceService)) => {
+    const effectiveMenuVerticalMode = computed(() => {
+        if (!deviceService.isLarge()) {
+            return AXPMenuVerticalMode.Full;
         }
-        return (currentTheme() === AXPThemeMode.Dark ||
-            (currentTheme() === AXPThemeMode.System && systemTheme() === AXPThemeMode.Dark));
-    }),
-    isLightMode: computed(() => currentTheme() === AXPThemeMode.Light ||
-        (currentTheme() === AXPThemeMode.System && systemTheme() === AXPThemeMode.Light)),
-    isSystemMode: computed(() => currentTheme() === AXPThemeMode.System),
-    isSideMenuOpen: computed(() => sideMenuState() === AXPSideMenuState.Opened),
-    isOverlayLoading: computed(() => overlayLoading()),
-    isNavigationLoading: computed(() => navigationLoading()),
-    isMenuHorizontal: computed(() => menuOrientation() === AXPMenuOrientation.Horizontal),
-    sideMenuDrawerWidth: computed(() => normalizeMenuVerticalMode(menuVerticalMode(), AXPMenuVerticalMode.Full) === AXPMenuVerticalMode.Compact
-        ? sideMenuCompactWidth()
-        : sideMenuWidth()),
-})), 
+        return normalizeMenuVerticalMode(menuVerticalMode(), AXPMenuVerticalMode.Full);
+    }, ...(ngDevMode ? [{ debugName: "effectiveMenuVerticalMode" }] : /* istanbul ignore next */ []));
+    return {
+        isDarkMode: computed(() => {
+            if (isPrinting()) {
+                return false;
+            }
+            return (currentTheme() === AXPThemeMode.Dark ||
+                (currentTheme() === AXPThemeMode.System && systemTheme() === AXPThemeMode.Dark));
+        }),
+        isLightMode: computed(() => currentTheme() === AXPThemeMode.Light ||
+            (currentTheme() === AXPThemeMode.System && systemTheme() === AXPThemeMode.Light)),
+        isSystemMode: computed(() => currentTheme() === AXPThemeMode.System),
+        isSideMenuOpen: computed(() => deviceService.isLarge()
+            ? sideMenuState() === AXPSideMenuState.Opened
+            : overlaySideMenuOpen()),
+        isOverlayLoading: computed(() => overlayLoading()),
+        isNavigationLoading: computed(() => navigationLoading()),
+        isMenuHorizontal: computed(() => menuOrientation() === AXPMenuOrientation.Horizontal),
+        effectiveMenuVerticalMode,
+        sideMenuDrawerWidth: computed(() => effectiveMenuVerticalMode() === AXPMenuVerticalMode.Compact ? sideMenuCompactWidth() : sideMenuWidth()),
+    };
+}), 
 // Methods for State Management
-withMethods((store, http = inject(HttpClient), settingsService = inject(AXPSettingsService)) => {
+withMethods((store, http = inject(HttpClient), settingsService = inject(AXPSettingsService), deviceService = inject(AXPDeviceService)) => {
     const _applySettings = async () => {
         // Initialize theme and side menu setting from storage
         const settingThemeMode = (await settingsService.get(AXPThemeLayoutSetting.Mode)) ?? AXPThemeMode.Light;
@@ -273,6 +284,15 @@ withMethods((store, http = inject(HttpClient), settingsService = inject(AXPSetti
         }
     };
     const minimumDisplayTime = 500; // milliseconds
+    const setSideMenuOpen = (opened) => {
+        if (!deviceService.isLarge()) {
+            patchState(store, { overlaySideMenuOpen: opened });
+            return;
+        }
+        const sideMenuState = opened ? AXPSideMenuState.Opened : AXPSideMenuState.Closed;
+        patchState(store, { sideMenuState });
+        settingsService.scope(AXPPlatformScope.User).set(AXPThemeLayoutSetting.SideMenuStatus, sideMenuState);
+    };
     return {
         // Change theme and update HTML class
         changeThemeMode(theme) {
@@ -282,13 +302,11 @@ withMethods((store, http = inject(HttpClient), settingsService = inject(AXPSetti
         },
         // Open side menu
         openSideMenu() {
-            patchState(store, { sideMenuState: AXPSideMenuState.Opened });
-            settingsService.scope(AXPPlatformScope.User).set(AXPThemeLayoutSetting.SideMenuStatus, AXPSideMenuState.Opened);
+            setSideMenuOpen(true);
         },
         // Close side menu
         closeSideMenu() {
-            patchState(store, { sideMenuState: AXPSideMenuState.Closed });
-            settingsService.scope(AXPPlatformScope.User).set(AXPThemeLayoutSetting.SideMenuStatus, AXPSideMenuState.Closed);
+            setSideMenuOpen(false);
         },
         // Set side menu width in full vertical mode
         setSideMenuWidth(width) {
@@ -313,9 +331,7 @@ withMethods((store, http = inject(HttpClient), settingsService = inject(AXPSetti
         },
         // Toggle side menu state
         toggleSideMenu() {
-            const newSideMenuState = store.sideMenuState() === AXPSideMenuState.Opened ? AXPSideMenuState.Closed : AXPSideMenuState.Opened;
-            patchState(store, { sideMenuState: newSideMenuState });
-            settingsService.scope(AXPPlatformScope.User).set(AXPThemeLayoutSetting.SideMenuStatus, newSideMenuState);
+            setSideMenuOpen(!store.isSideMenuOpen());
         },
         // Set navigation loading state with a task counter
         setNavigationLoading(value, delay) {
@@ -348,9 +364,13 @@ withMethods((store, http = inject(HttpClient), settingsService = inject(AXPSetti
     };
 }), 
 // Lifecycle Hooks
-withHooks((store, settingsService = inject(AXPSettingsService)) => ({
+withHooks((store, settingsService = inject(AXPSettingsService), deviceService = inject(AXPDeviceService)) => ({
     onInit() {
-        //
+        effect(() => {
+            if (!deviceService.isLarge()) {
+                patchState(store, { overlaySideMenuOpen: false });
+            }
+        });
         settingsService.onChanged
             .pipe(filter((c) => [AXPPlatformScope.Platform, AXPPlatformScope.Tenant, AXPPlatformScope.User].includes(c.scope)))
             .subscribe(async (changes) => {