@acorex/platform 20.6.0-next.13 → 20.6.0-next.14

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

@@ -10,11 +10,10 @@ import * as i0 from '@angular/core';
 import { computed, inject, Component, InjectionToken, Injectable, signal, ChangeDetectionStrategy, effect, Input, Injector, NgModule } from '@angular/core';
 import { AXPSettingService, AXP_SETTING_DEFINITION_PROVIDER } from '@acorex/platform/common';
 import * as i1$2 from '@acorex/platform/core';
-import { AXPPlatformScope } from '@acorex/platform/core';
+import { AXPScreenSize, AXPPlatformScope } from '@acorex/platform/core';
 import { HttpClient } from '@angular/common/http';
 import { signalStore, withState, withComputed, withMethods, patchState, withHooks } from '@ngrx/signals';
-import { timer, firstValueFrom, fromEvent, Subscription, filter } from 'rxjs';
-import { debounceTime } from 'rxjs/operators';
+import { timer, firstValueFrom, filter } from 'rxjs';
 import * as i5 from '@acorex/core/translation';
 import { AXTranslationModule } from '@acorex/core/translation';
 import * as i3$1 from '@acorex/platform/layout/widget-core';
@@ -57,20 +56,6 @@ var AXPThemeMode;
     AXPThemeMode["Dark"] = "dark";
     AXPThemeMode["System"] = "system";
 })(AXPThemeMode || (AXPThemeMode = {}));
-// Screen Size Enum
-var AXPScreenSize;
-(function (AXPScreenSize) {
-    AXPScreenSize["Small"] = "small";
-    AXPScreenSize["Medium"] = "medium";
-    AXPScreenSize["Large"] = "large";
-})(AXPScreenSize || (AXPScreenSize = {}));
-// Device Type Enum
-var AXPDeviceType;
-(function (AXPDeviceType) {
-    AXPDeviceType["Mobile"] = "mobile";
-    AXPDeviceType["Tablet"] = "tablet";
-    AXPDeviceType["Desktop"] = "desktop";
-})(AXPDeviceType || (AXPDeviceType = {}));
 // Side Menu State Enum
 var AXPSideMenuState;
 (function (AXPSideMenuState) {
@@ -89,8 +74,8 @@ const AXPLayoutThemeService = signalStore({ providedIn: 'root' },
 // Initial State
 withState(() => {
     const isSystemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-    // Helper function to get the initial screen size
-    const getScreenSize = () => {
+    // Helper function to get the initial screen size for side menu initialization
+    const getInitialScreenSize = () => {
         const width = window.innerWidth;
         if (width <= 600)
             return AXPScreenSize.Small;
@@ -98,21 +83,6 @@ withState(() => {
             return AXPScreenSize.Medium;
         return AXPScreenSize.Large;
     };
-    // Helper function to determine device type (based on viewport width for reactivity)
-    const getDeviceType = () => {
-        const width = window.innerWidth;
-        if (width <= 600) {
-            return AXPDeviceType.Mobile;
-        }
-        else if (width <= 1024) {
-            return AXPDeviceType.Tablet;
-        }
-        return AXPDeviceType.Desktop;
-    };
-    // Helper function to determine if the device supports touch
-    const isTouchDevice = () => {
-        return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
-    };
     const state = {
         currentMode: AXPThemeMode.System,
         currentPalette: 'default',
@@ -121,26 +91,22 @@ withState(() => {
             family: 'system-ui',
             size: 'medium',
         },
-        screenSize: getScreenSize(),
-        deviceType: getDeviceType(),
-        isTouchDevice: isTouchDevice(),
         overlayLoading: false,
         navigationLoading: false,
         overlayLoadingTaskCount: 0,
         navigationLoadingTaskCount: 0,
-        sideMenuState: (getScreenSize() === AXPScreenSize.Large
+        sideMenuState: (getInitialScreenSize() === AXPScreenSize.Large
             ? AXPSideMenuState.Opened
             : AXPSideMenuState.Closed),
         sideMenuWidth: 288,
         menuOrientation: 'vertical',
         _listener: null,
-        _resizeListener: null,
         isPrinting: false,
     };
     return state;
 }), 
 // Computed Signals
-withComputed(({ currentMode: currentTheme, systemThemeMode: systemTheme, screenSize, deviceType, isTouchDevice, sideMenuState, overlayLoading, navigationLoading, menuOrientation, isPrinting, }) => ({
+withComputed(({ currentMode: currentTheme, systemThemeMode: systemTheme, sideMenuState, overlayLoading, navigationLoading, menuOrientation, isPrinting, }) => ({
     isDarkMode: computed(() => {
         if (isPrinting()) {
             return false;
@@ -152,14 +118,6 @@ withComputed(({ currentMode: currentTheme, systemThemeMode: systemTheme, screenS
         (currentTheme() === AXPThemeMode.System && systemTheme() === AXPThemeMode.Light)),
     isSystemMode: computed(() => currentTheme() === AXPThemeMode.System),
     isSideMenuOpen: computed(() => sideMenuState() === AXPSideMenuState.Opened),
-    isSideMenuOverlay: computed(() => screenSize() === AXPScreenSize.Small || screenSize() === AXPScreenSize.Medium),
-    isSmall: computed(() => screenSize() === AXPScreenSize.Small),
-    isMedium: computed(() => screenSize() === AXPScreenSize.Medium),
-    isLarge: computed(() => screenSize() === AXPScreenSize.Large),
-    isMobileDevice: computed(() => deviceType() === AXPDeviceType.Mobile),
-    isTabletDevice: computed(() => deviceType() === AXPDeviceType.Tablet),
-    isDesktopDevice: computed(() => deviceType() === AXPDeviceType.Desktop),
-    isTouchScreen: computed(() => isTouchDevice()),
     isOverlayLoading: computed(() => overlayLoading()),
     isNavigationLoading: computed(() => navigationLoading()),
     isMenuHorizontal: computed(() => menuOrientation() === AXPMenuOrientation.Horizontal),
@@ -200,38 +158,6 @@ withMethods((store, http = inject(HttpClient), settingService = inject(AXPSettin
         //
         await _applyThemePalette(store.currentPalette());
     };
-    // Update screen size based on window width
-    const _updateScreenSize = () => {
-        const width = window.innerWidth;
-        let newScreenSize;
-        if (width <= 600) {
-            newScreenSize = AXPScreenSize.Small;
-        }
-        else if (width <= 1024) {
-            newScreenSize = AXPScreenSize.Medium;
-        }
-        else {
-            newScreenSize = AXPScreenSize.Large;
-        }
-        // Determine device type based on width to keep it reactive to devtools emulation
-        let newDeviceType;
-        if (width <= 600) {
-            newDeviceType = AXPDeviceType.Mobile;
-        }
-        else if (width <= 1024) {
-            newDeviceType = AXPDeviceType.Tablet;
-        }
-        else {
-            newDeviceType = AXPDeviceType.Desktop;
-        }
-        if (newScreenSize !== store.screenSize() || newDeviceType !== store.deviceType()) {
-            patchState(store, { screenSize: newScreenSize, deviceType: newDeviceType });
-            if (!store.isLarge()) {
-                patchState(store, { sideMenuState: AXPSideMenuState.Closed });
-                settingService.scope(AXPPlatformScope.User).set(AXPThemeLayoutSetting.SideMenuStatus, store.sideMenuState());
-            }
-        }
-    };
     const _setOverlayLoading = async (value, delay = 0) => {
         if (value) {
             let timeoutId = null;
@@ -373,21 +299,6 @@ withMethods((store, http = inject(HttpClient), settingService = inject(AXPSettin
             const mediaQueryList = window.matchMedia('(prefers-color-scheme: dark)');
             mediaQueryList.removeEventListener('change', listener);
         },
-        // Set up event listener for window resize
-        _setupResizeListener() {
-            const subscription = fromEvent(window, 'resize')
-                .pipe(debounceTime(250))
-                .subscribe(() => {
-                _updateScreenSize();
-            });
-            return subscription;
-        },
-        // Remove event listener for window resize
-        _removeResizeListener(subscription) {
-            if (subscription) {
-                subscription.unsubscribe();
-            }
-        },
     };
 }), 
 // Lifecycle Hooks
@@ -397,19 +308,16 @@ withHooks((store, settingService = inject(AXPSettingService)) => ({
         settingService.onChanged.pipe(filter((c) => c.scope == AXPPlatformScope.User)).subscribe(async (changes) => {
             const keys = Object.values(AXPThemeLayoutSetting);
             if (changes.keys.some((key) => keys.includes(key))) {
-                await store.loadSettings();
+                await store['loadSettings']();
             }
         });
         //
         settingService.onLoaded.subscribe(async () => {
-            await store.loadSettings();
+            await store['loadSettings']();
         });
         // Set up event listener for system theme changes
-        const listener = store._setupSystemColorListener();
+        const listener = store['_setupSystemColorListener']();
         patchState(store, { _listener: listener });
-        // Set up event listener for window resize
-        const resizeSubscription = store._setupResizeListener();
-        patchState(store, { _resizeListener: resizeSubscription });
         window.addEventListener('beforeprint', () => {
             patchState(store, { isPrinting: true });
             store._internal_updateHtmlClass();
@@ -421,12 +329,9 @@ withHooks((store, settingService = inject(AXPSettingService)) => ({
     },
     onDestroy() {
         // Clean up event listeners when store is destroyed
-        const { _listener: listener, _resizeListener: resizeListener } = store;
+        const { _listener: listener } = store;
         if (listener) {
-            store._removeSystemColorListener(listener);
-        }
-        if (resizeListener instanceof Subscription) {
-            store._removeResizeListener(resizeListener);
+            store['_removeSystemColorListener'](listener);
         }
     },
 })));
@@ -2214,5 +2119,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AXPDeviceType, AXPLayoutThemeService, AXPMenuOrientation, AXPScreenSize, AXPSideMenuState, AXPThemeLayoutSetting, AXPThemeMode, AXPThemePaletteProviderDefault, AXPThemeSlotComponent, AXPThemesSharedModule, AXP_THEME_PALETTE_PROVIDER };
+export { AXPLayoutThemeService, AXPMenuOrientation, AXPSideMenuState, AXPThemeLayoutSetting, AXPThemeMode, AXPThemePaletteProviderDefault, AXPThemeSlotComponent, AXPThemesSharedModule, AXP_THEME_PALETTE_PROVIDER };
 //# sourceMappingURL=acorex-platform-themes-shared.mjs.map