@edsis/ui 21.3.12 → 21.3.15

package/fesm2022/edsis-ui-nav.mjs

@@ -22,12 +22,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         }] });
 
 const DEFAULT_NAV_ID = 'default';
+const PERSISTED_NAV_ID = 'main';
 const DEFAULT_VERTICAL_APPEARANCE = 'sidebar';
 const DEFAULT_HORIZONTAL_APPEARANCE = 'navbar';
 const DEFAULT_POSITION = 'left';
 const DEFAULT_DOCKBAR_MODE = 'sticky';
-const VERTICAL_APPEARANCE_STORAGE_KEY = 'nav-vertical-appearance';
-const HORIZONTAL_APPEARANCE_STORAGE_KEY = 'nav-horizontal-appearance';
+const INSTANCE_STORAGE_PROPERTIES = ['orientation', 'appearance', 'position', 'collapsed', 'dockbar-mode'];
+const PERSISTED_STORAGE_PROPERTIES = ['orientation', 'appearance', 'position'];
+const APPEARANCE_MODE_STORAGE_KEY = 'nav-appearance-mode';
+const LEGACY_NAV_STORAGE_KEYS = ['nav-vertical-appearance', 'nav-horizontal-appearance'];
+const LEGACY_APPEARANCE_MODE_STORAGE_KEYS = ['nav-collapsed', 'nav-dockbar-mode'];
 class NavService {
     documentRef = inject(DOCUMENT, { optional: true });
     router = inject(Router, { optional: true });
@@ -49,7 +53,7 @@ class NavService {
         matrixParams: 'ignored',
     };
     constructor() {
-        this.ensureAppearanceDefaults();
+        this.cleanupLegacyStorage();
         this.router?.events.pipe(takeUntilDestroyed()).subscribe((event) => {
             if (event instanceof NavigationEnd) {
                 this.routerUrl.set(event.urlAfterRedirects);
@@ -57,7 +61,6 @@ class NavService {
         });
     }
     register(input) {
-        this.ensureAppearanceDefaults();
         const state = this.resolveState(input);
         this.states.update((states) => ({ ...states, [state.id]: state }));
         this.persistState(state);
@@ -217,75 +220,83 @@ class NavService {
     resolveState(input) {
         const id = this.normalizeId(input.id);
         const orientation = input.orientation;
+        const appearance = this.resolveAppearance(id, orientation, input.appearance);
         return {
             id,
             orientation,
-            appearance: this.resolveAppearance(id, orientation, input.appearance),
+            appearance,
             position: this.resolvePosition(id, input.position),
-            collapsed: this.resolveCollapsed(id, input.collapsed),
-            dockbarMode: this.resolveDockbarMode(id, input.dockbarMode),
+            collapsed: this.resolveCollapsed(id, appearance, input.collapsed),
+            dockbarMode: this.resolveDockbarMode(id, appearance, input.dockbarMode),
         };
     }
     resolveAppearance(id, orientation, appearance) {
         if (this.isAppearanceForOrientation(appearance, orientation)) {
             return appearance;
         }
-        const stored = this.readStorage(this.instanceStorageKey(id, 'appearance'));
+        const stored = this.readInstanceStorage(id, 'appearance');
         if (this.isAppearanceForOrientation(stored, orientation)) {
             return stored;
         }
-        return this.readOrientationAppearance(orientation);
+        return this.defaultAppearance(orientation);
     }
     resolvePosition(id, position) {
         if (this.isPosition(position)) {
             return position;
         }
-        const stored = this.readStorage(this.instanceStorageKey(id, 'position'));
+        const stored = this.readInstanceStorage(id, 'position');
         return this.isPosition(stored) ? stored : DEFAULT_POSITION;
     }
-    resolveCollapsed(id, collapsed) {
+    resolveCollapsed(id, appearance, collapsed) {
         if (typeof collapsed === 'boolean') {
             return collapsed;
         }
-        const stored = this.readStorage(this.instanceStorageKey(id, 'collapsed'));
-        if (stored === 'true') {
-            return true;
-        }
-        if (stored === 'false') {
+        if (appearance !== 'sidebar') {
             return false;
         }
-        return false;
+        return this.readPersistedAppearanceMode(id) === 'collapsed';
     }
-    resolveDockbarMode(id, mode) {
+    resolveDockbarMode(id, appearance, mode) {
         if (this.isDockbarMode(mode)) {
             return mode;
         }
-        const stored = this.readStorage(this.instanceStorageKey(id, 'dockbar-mode'));
+        if (appearance !== 'dockbar') {
+            return DEFAULT_DOCKBAR_MODE;
+        }
+        const stored = this.readPersistedAppearanceMode(id);
         return this.isDockbarMode(stored) ? stored : DEFAULT_DOCKBAR_MODE;
     }
     persistState(state) {
-        this.writeStorage(this.instanceStorageKey(state.id, 'orientation'), state.orientation);
-        this.writeStorage(this.instanceStorageKey(state.id, 'appearance'), state.appearance);
-        this.writeStorage(this.instanceStorageKey(state.id, 'position'), state.position);
-        this.writeStorage(this.instanceStorageKey(state.id, 'collapsed'), String(state.collapsed));
-        this.writeStorage(this.instanceStorageKey(state.id, 'dockbar-mode'), state.dockbarMode);
-    }
-    readOrientationAppearance(orientation) {
-        const key = orientation === 'vertical' ? VERTICAL_APPEARANCE_STORAGE_KEY : HORIZONTAL_APPEARANCE_STORAGE_KEY;
-        const fallback = orientation === 'vertical' ? DEFAULT_VERTICAL_APPEARANCE : DEFAULT_HORIZONTAL_APPEARANCE;
-        const stored = this.readStorage(key);
-        if (this.isAppearanceForOrientation(stored, orientation)) {
-            return stored;
+        if (!this.shouldPersistInstanceState(state.id)) {
+            this.clearInstanceStorage(state.id);
+            return;
         }
-        this.writeStorage(key, fallback);
-        return fallback;
+        this.writeStorage(this.persistedStorageKey('orientation'), state.orientation);
+        this.writeStorage(this.persistedStorageKey('appearance'), state.appearance);
+        this.writeStorage(this.persistedStorageKey('position'), state.position);
+        this.writeStorage(APPEARANCE_MODE_STORAGE_KEY, this.persistedAppearanceMode(state));
     }
-    ensureAppearanceDefaults() {
-        if (!this.isVerticalAppearance(this.readStorage(VERTICAL_APPEARANCE_STORAGE_KEY))) {
-            this.writeStorage(VERTICAL_APPEARANCE_STORAGE_KEY, DEFAULT_VERTICAL_APPEARANCE);
+    defaultAppearance(orientation) {
+        return orientation === 'vertical' ? DEFAULT_VERTICAL_APPEARANCE : DEFAULT_HORIZONTAL_APPEARANCE;
+    }
+    cleanupLegacyStorage() {
+        this.migrateLegacyPersistedStorage();
+        for (const key of LEGACY_NAV_STORAGE_KEYS) {
+            this.removeStorage(key);
+        }
+        for (const key of LEGACY_APPEARANCE_MODE_STORAGE_KEYS) {
+            this.removeStorage(key);
         }
-        if (!this.isHorizontalAppearance(this.readStorage(HORIZONTAL_APPEARANCE_STORAGE_KEY))) {
-            this.writeStorage(HORIZONTAL_APPEARANCE_STORAGE_KEY, DEFAULT_HORIZONTAL_APPEARANCE);
+        const storage = this.storage();
+        const keysToRemove = [];
+        for (let index = 0; index < (storage?.length ?? 0); index += 1) {
+            const key = storage?.key(index);
+            if (key && this.isLegacyInstanceStorageKey(key)) {
+                keysToRemove.push(key);
+            }
+        }
+        for (const key of keysToRemove) {
+            this.removeStorage(key);
         }
     }
     storage() {
@@ -304,6 +315,19 @@ class NavService {
             return null;
         }
     }
+    readInstanceStorage(id, property) {
+        if (!this.shouldPersistInstanceState(id)) {
+            return null;
+        }
+        return this.readStorage(this.persistedStorageKey(property));
+    }
+    readPersistedAppearanceMode(id) {
+        if (!this.shouldPersistInstanceState(id)) {
+            return null;
+        }
+        const stored = this.readStorage(APPEARANCE_MODE_STORAGE_KEY);
+        return this.isPersistedAppearanceMode(stored) ? stored : null;
+    }
     writeStorage(key, value) {
         try {
             this.storage()?.setItem(key, value);
@@ -312,9 +336,81 @@ class NavService {
             return;
         }
     }
+    removeStorage(key) {
+        try {
+            this.storage()?.removeItem(key);
+        }
+        catch {
+            return;
+        }
+    }
+    clearInstanceStorage(id) {
+        for (const property of INSTANCE_STORAGE_PROPERTIES) {
+            this.removeStorage(this.instanceStorageKey(id, property));
+        }
+    }
+    migrateLegacyPersistedStorage() {
+        for (const property of PERSISTED_STORAGE_PROPERTIES) {
+            const nextKey = this.persistedStorageKey(property);
+            const legacyKey = this.instanceStorageKey(PERSISTED_NAV_ID, property);
+            const nextValue = this.readStorage(nextKey);
+            const legacyValue = this.readStorage(legacyKey);
+            if (nextValue === null && legacyValue !== null) {
+                this.writeStorage(nextKey, legacyValue);
+            }
+        }
+        if (this.readStorage(APPEARANCE_MODE_STORAGE_KEY) !== null) {
+            return;
+        }
+        const migratedAppearanceMode = this.resolveLegacyAppearanceMode();
+        if (migratedAppearanceMode !== null) {
+            this.writeStorage(APPEARANCE_MODE_STORAGE_KEY, migratedAppearanceMode);
+        }
+    }
     instanceStorageKey(id, property) {
         return `nav:${id}:${property}`;
     }
+    persistedStorageKey(property) {
+        return `nav-${property}`;
+    }
+    persistedAppearanceMode(state) {
+        if (state.appearance === 'dockbar') {
+            return state.dockbarMode;
+        }
+        return state.collapsed ? 'collapsed' : 'default';
+    }
+    resolveLegacyAppearanceMode() {
+        const appearance = this.readStorage(this.persistedStorageKey('appearance')) ??
+            this.readStorage(this.instanceStorageKey(PERSISTED_NAV_ID, 'appearance'));
+        const collapsed = this.readStorage('nav-collapsed') ?? this.readStorage(this.instanceStorageKey(PERSISTED_NAV_ID, 'collapsed'));
+        const dockbarMode = this.readStorage('nav-dockbar-mode') ??
+            this.readStorage(this.instanceStorageKey(PERSISTED_NAV_ID, 'dockbar-mode'));
+        if (appearance === 'dockbar' && this.isDockbarMode(dockbarMode)) {
+            return dockbarMode;
+        }
+        if (appearance === 'sidebar') {
+            return collapsed === 'true' ? 'collapsed' : 'default';
+        }
+        if (this.isDockbarMode(dockbarMode)) {
+            return dockbarMode;
+        }
+        if (collapsed === 'true') {
+            return 'collapsed';
+        }
+        if (collapsed === 'false') {
+            return 'default';
+        }
+        return null;
+    }
+    shouldPersistInstanceState(id) {
+        return id === PERSISTED_NAV_ID;
+    }
+    isLegacyInstanceStorageKey(key) {
+        return key.startsWith('nav:');
+    }
+    isPersistedAppearanceMode(value) {
+        return value === 'default' || value === 'collapsed' || this.isDockbarMode(value);
+    }
     normalizeId(id) {
         return id.trim() || DEFAULT_NAV_ID;
     }