@shival99/z-ui 2.2.5 → 2.3.0

package/fesm2022/shival99-z-ui-services.mjs

@@ -4,8 +4,7 @@ import { zNormalize, zFormatNumExcel, zConvertColorToArgb } from '@shival99/z-ui
 import { __decorate, __param, __metadata } from 'tslib';
 import { isPlatformBrowser, DOCUMENT } from '@angular/common';
 import { Subject, takeUntil, fromEvent, filter, firstValueFrom, from, switchMap, of, catchError, throwError, tap, map, defer, BehaviorSubject } from 'rxjs';
-import { Overlay, OverlayRef, OverlayConfig } from '@angular/cdk/overlay';
-import { TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
+import { ZOverlayService } from '@shival99/z-ui/components/z-overlay';
 import * as ExcelJS from 'exceljs';
 import { saveAs } from 'file-saver';
 import * as XLSX from 'xlsx';
@@ -14,50 +13,107 @@ import { Router } from '@angular/router';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { TranslateService } from '@ngx-translate/core';
 
-const Z_CACHE_SCOPE_SEPARATOR = '::';
+const Z_CACHE_SCOPE_SEPARATOR = '-';
 const Z_DB_SCOPE_SEPARATOR = '__';
-const Z_SCOPE_FALLBACK = 'global';
-const Z_RUNTIME_SCOPE = (() => {
+const Z_STORAGE_SCOPE_FALLBACK = 'global';
+const Z_CACHE_DEFAULT_PREFIX = 'z_';
+
+const Z_LEGACY_CACHE_SCOPE_SEPARATOR = '::';
+const Z_LEGACY_RUNTIME_SCOPE = (() => {
     if (typeof window === 'undefined') {
-        return Z_SCOPE_FALLBACK;
+        return Z_STORAGE_SCOPE_FALLBACK;
     }
     const origin = zNormalize(window.location.origin);
     const baseHref = typeof document !== 'undefined' ? zNormalize(document.querySelector('base')?.getAttribute('href') ?? '') : '';
     if (!origin && !baseHref) {
-        return Z_SCOPE_FALLBACK;
+        return Z_STORAGE_SCOPE_FALLBACK;
     }
     if (!origin) {
-        return baseHref || Z_SCOPE_FALLBACK;
+        return baseHref || Z_STORAGE_SCOPE_FALLBACK;
     }
     if (!baseHref) {
         return origin;
     }
     return `${origin}__${baseHref}`;
 })();
-const Z_CACHE_SCOPE_SUFFIX = `${Z_CACHE_SCOPE_SEPARATOR}${Z_RUNTIME_SCOPE}`;
-const Z_DB_SCOPE_SUFFIX = `${Z_DB_SCOPE_SEPARATOR}${Z_RUNTIME_SCOPE}`;
-function zAppendScope(value, scopeSuffix) {
-    const trimmed = value.trim();
-    if (!trimmed || trimmed.endsWith(scopeSuffix)) {
-        return value;
-    }
-    return `${trimmed}${scopeSuffix}`;
+const Z_LEGACY_CACHE_SCOPE_SUFFIX = `${Z_LEGACY_CACHE_SCOPE_SEPARATOR}${Z_LEGACY_RUNTIME_SCOPE}`;
+const Z_LEGACY_DB_SCOPE_SUFFIX = `${Z_DB_SCOPE_SEPARATOR}${Z_LEGACY_RUNTIME_SCOPE}`;
+const Z_STORAGE_SCOPE_STATE = {};
+function zNormalizeStorageAppName(appName) {
+    const normalized = (appName ?? '')
+        .trim()
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, Z_CACHE_SCOPE_SEPARATOR)
+        .replace(/^-+|-+$/g, '');
+    return normalized || Z_STORAGE_SCOPE_FALLBACK;
+}
+function zConfigureStorageAppName(appName) {
+    Z_STORAGE_SCOPE_STATE.appName = appName === undefined ? undefined : zNormalizeStorageAppName(appName);
 }
-function zBuildScopedCacheKey(baseKey) {
-    return zAppendScope(baseKey, Z_CACHE_SCOPE_SUFFIX);
+function zGetStorageAppName() {
+    return Z_STORAGE_SCOPE_STATE.appName;
 }
-function zBuildScopedDbName(baseDbName) {
-    return zAppendScope(baseDbName, Z_DB_SCOPE_SUFFIX);
+function zBuildScopedCacheKey(baseKey, appName = zGetStorageAppName()) {
+    if (appName === undefined) {
+        return zBuildLegacyScopedCacheKey(baseKey);
+    }
+    const trimmedKey = baseKey.trim();
+    if (!trimmedKey) {
+        return baseKey;
+    }
+    const scopePrefix = `${zNormalizeStorageAppName(appName)}${Z_CACHE_SCOPE_SEPARATOR}`;
+    if (trimmedKey.startsWith(scopePrefix)) {
+        return trimmedKey;
+    }
+    return `${scopePrefix}${trimmedKey}`;
+}
+function zBuildScopedDbName(baseDbName, appName = zGetStorageAppName()) {
+    if (appName === undefined) {
+        return zBuildLegacyScopedDbName(baseDbName);
+    }
+    const trimmedName = baseDbName.trim();
+    if (!trimmedName) {
+        return baseDbName;
+    }
+    const scopeSuffix = `${Z_DB_SCOPE_SEPARATOR}${zNormalizeStorageAppName(appName)}`;
+    if (trimmedName.endsWith(scopeSuffix)) {
+        return trimmedName;
+    }
+    return `${trimmedName}${scopeSuffix}`;
 }
-function zStripScopedCacheKey(key) {
+function zStripScopedCacheKey(key, appName = zGetStorageAppName()) {
+    if (appName === undefined) {
+        return zStripLegacyScopedCacheKey(key);
+    }
     const normalizedKey = key.trim();
     if (!normalizedKey) {
         return key;
     }
-    if (!normalizedKey.endsWith(Z_CACHE_SCOPE_SUFFIX)) {
+    const scopePrefix = `${zNormalizeStorageAppName(appName)}${Z_CACHE_SCOPE_SEPARATOR}`;
+    if (!normalizedKey.startsWith(scopePrefix)) {
         return normalizedKey;
     }
-    return normalizedKey.slice(0, normalizedKey.length - Z_CACHE_SCOPE_SUFFIX.length);
+    return normalizedKey.slice(scopePrefix.length);
+}
+function zBuildLegacyScopedCacheKey(baseKey) {
+    return zAppendLegacyScope(baseKey, Z_LEGACY_CACHE_SCOPE_SUFFIX);
+}
+function zBuildLegacyScopedDbName(baseDbName) {
+    return zAppendLegacyScope(baseDbName, Z_LEGACY_DB_SCOPE_SUFFIX);
+}
+function zStripLegacyScopedCacheKey(key) {
+    const normalizedKey = key.trim();
+    if (!normalizedKey || !normalizedKey.endsWith(Z_LEGACY_CACHE_SCOPE_SUFFIX)) {
+        return normalizedKey || key;
+    }
+    return normalizedKey.slice(0, normalizedKey.length - Z_LEGACY_CACHE_SCOPE_SUFFIX.length);
+}
+function zAppendLegacyScope(value, scopeSuffix) {
+    const trimmed = value.trim();
+    if (!trimmed || trimmed.endsWith(scopeSuffix)) {
+        return value;
+    }
+    return `${trimmed}${scopeSuffix}`;
 }
 
 /** Injection token for data passed to a dynamic component or template. */
@@ -126,14 +182,17 @@ let ZDynamicRef = class ZDynamicRef {
         this._destroy$.next();
         this._destroy$.complete();
     }
-    /** Updates the overlay position using its configured strategy. */
+    /**
+     * @deprecated Không còn tác dụng — overlay tự do giờ luôn dùng vị trí toàn cục (global),
+     * tự canh giữa bằng CSS, không còn "chiến lược định vị" nào cần cập nhật lại. Giữ lại method
+     * rỗng để không phá vỡ code đang gọi nó.
+     */
     updatePosition() {
-        this._overlayRef?.updatePosition();
+        // no-op — global overlay không có position strategy để cập nhật lại
     }
     /** Updates the overlay pane dimensions. */
     updateSize(width, height) {
-        const sizeConfig = { width, height };
-        this._overlayRef?.updateSize(sizeConfig);
+        this._overlayRef?.updateSize({ width, height });
     }
     /** @internal Used by the service after attaching a component portal. */
     attachComponentRef(componentRef) {
@@ -274,10 +333,11 @@ const Z_LANG_TO_LOCALE = {
 };
 
 class ZCacheService {
-    static _prefix = 'z_';
+    static _prefix = Z_CACHE_DEFAULT_PREFIX;
     static _encrypt = true;
     static configure(config) {
-        if (config.prefix) {
+        zConfigureStorageAppName(config.appName);
+        if (config.prefix !== undefined) {
             ZCacheService._prefix = config.prefix;
         }
         if (config.encrypt !== undefined) {
@@ -310,21 +370,31 @@ class ZCacheService {
         const prefixedKey = `${ZCacheService._prefix}${normalizedKey}`;
         return encrypt ? ZCacheService._encode(prefixedKey) : prefixedKey;
     }
+    static _toLegacyStorageKey(normalizedKey, encrypt) {
+        const prefixedKey = `z_${normalizedKey}`;
+        return encrypt ? ZCacheService._encode(prefixedKey) : prefixedKey;
+    }
     static _getFullKey(key, encrypt) {
         return ZCacheService._toStorageKey(ZCacheService._normalizeKey(key), encrypt);
     }
-    static _getLegacyFullKey(key, encrypt) {
+    static _getLegacyFullKeys(key, encrypt) {
         const legacyNormalized = ZCacheService._normalizeLegacyKey(key);
         const scopedNormalized = ZCacheService._normalizeKey(key);
-        if (legacyNormalized === scopedNormalized) {
-            return null;
+        const legacyLogicalKeys = zGetStorageAppName() === undefined
+            ? [legacyNormalized]
+            : [zBuildLegacyScopedCacheKey(legacyNormalized), legacyNormalized];
+        if (legacyLogicalKeys.includes(scopedNormalized)) {
+            return [];
         }
-        return ZCacheService._toStorageKey(legacyNormalized, encrypt);
+        const legacyKeys = legacyLogicalKeys.flatMap(logicalKey => [
+            ZCacheService._toStorageKey(logicalKey, encrypt),
+            ZCacheService._toLegacyStorageKey(logicalKey, encrypt),
+        ]);
+        return [...new Set(legacyKeys)];
     }
     static _getCandidateStorageKeys(key, encrypt) {
         const scopedKey = ZCacheService._getFullKey(key, encrypt);
-        const legacyKey = ZCacheService._getLegacyFullKey(key, encrypt);
-        return legacyKey ? [scopedKey, legacyKey] : [scopedKey];
+        return [scopedKey, ...ZCacheService._getLegacyFullKeys(key, encrypt)];
     }
     static _decodeStorageKey(storageKey) {
         const decoded = ZCacheService._decode(storageKey);
@@ -334,14 +404,14 @@ class ZCacheService {
         return decoded;
     }
     static _isManagedStorageKey(storageKey) {
-        if (storageKey.startsWith(ZCacheService._prefix)) {
+        if (storageKey.startsWith(ZCacheService._prefix) || storageKey.startsWith('z_')) {
             return true;
         }
         const decoded = ZCacheService._decodeStorageKey(storageKey);
         if (!decoded) {
             return false;
         }
-        return decoded.startsWith(ZCacheService._prefix);
+        return decoded.startsWith(ZCacheService._prefix) || decoded.startsWith('z_');
     }
     static _safeOperation(operation, fallback) {
         try {
@@ -377,12 +447,10 @@ class ZCacheService {
     static set(key, data, encrypt = ZCacheService._encrypt) {
         return ZCacheService._safeOperation(() => {
             const _key = ZCacheService._getFullKey(key, encrypt);
-            const legacyKey = ZCacheService._getLegacyFullKey(key, encrypt);
+            const legacyKeys = ZCacheService._getLegacyFullKeys(key, encrypt);
             const _value = encrypt ? ZCacheService._encode(data) : JSON.stringify(data);
             localStorage.setItem(_key, _value);
-            if (legacyKey) {
-                localStorage.removeItem(legacyKey);
-            }
+            legacyKeys.forEach(legacyKey => localStorage.removeItem(legacyKey));
             return true;
         }, false);
     }
@@ -460,11 +528,23 @@ class ZOverlayZIndexService {
     applyToOverlay(overlayRef) {
         const zIndex = this.next();
         overlayRef.hostElement.style.zIndex = `${zIndex}`;
+        // Lưu ý: với z-modal/z-drawer, dòng dưới đây không còn tác dụng thị giác — `.z-overlay-backdrop`
+        // trong overlay.css đã khoá z-index về 0 bằng !important (xem lịch sử fix bug backdrop đè modal).
+        // Vẫn giữ vì z-command/z-gallery-preview/z-dynamic.service dùng backdrop CDK riêng (.cdk-overlay-backdrop),
+        // không bị CSS đó ảnh hưởng — dòng này vẫn cần thiết cho các consumer đó.
         if (overlayRef.backdropElement) {
             overlayRef.backdropElement.style.zIndex = `${zIndex - 1}`;
         }
         return zIndex;
     }
+    /**
+     * @deprecated Thừa với overlay đã dùng native Popover API (`[popover]` + `showPopover()`):
+     * top layer đã tự xếp overlay hiện gần nhất lên trên cùng, hide+show lại chỉ là restack thủ
+     * công cho hành vi mà trình duyệt đã làm sẵn. CDK 22 cũng mặc định `usePopover: true` nên
+     * z-command/z-gallery-preview cũng đang gọi thừa. Chỉ còn có ý nghĩa làm fallback DOM-reorder
+     * (nhánh `else` trong `moveToTop`) cho trình duyệt KHÔNG hỗ trợ Popover API (Chrome <114,
+     * Firefox <125, Safari <17). Xoá khi dự án xác nhận không còn cần hỗ trợ nhóm trình duyệt đó.
+     */
     deferMoveToTop(overlayRef) {
         if (!isPlatformBrowser(this._platformId)) {
             return;
@@ -473,6 +553,7 @@ class ZOverlayZIndexService {
             this.moveToTop(overlayRef);
         });
     }
+    /** @deprecated Xem ghi chú tại {@link deferMoveToTop}. */
     moveToTop(overlayRef) {
         if (!isPlatformBrowser(this._platformId)) {
             return;
@@ -510,13 +591,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
         }] });
 
 /**
- * Opens components and templates in a bare CDK overlay.
+ * Opens components and templates in a bare global overlay (no anchored positioning).
  *
- * @description The service supplies overlay lifecycle and positioning only. The
- * mounted content owns its complete layout, including close controls and styling.
+ * @description The service supplies overlay lifecycle only. The mounted content owns its
+ * complete layout, including close controls and styling.
  */
 class ZDynamicService {
-    _overlay = inject(Overlay);
+    _overlayService = inject(ZOverlayService);
     _injector = inject(Injector);
     _platformId = inject(PLATFORM_ID);
     _zIndexService = inject(ZOverlayZIndexService);
@@ -524,7 +605,7 @@ class ZDynamicService {
     create(content, options = {}) {
         return this.open(content, options);
     }
-    /** Opens a component or template in a free-form CDK overlay. */
+    /** Opens a component or template in a free-form global overlay. */
     open(content, options = {}) {
         const overlayRef = this._createOverlay(options);
         const dynamicRef = new ZDynamicRef(overlayRef, this._platformId);
@@ -543,18 +624,20 @@ class ZDynamicService {
                 dynamicRef,
                 data: options.data,
             };
-            overlayRef.attach(new TemplatePortal(content, options.viewContainerRef, context));
+            overlayRef.attachTemplate(content, options.viewContainerRef, context);
             return dynamicRef;
         }
         const injector = Injector.create({
             parent: this._injector,
             providers: [
-                { provide: OverlayRef, useValue: overlayRef },
                 { provide: ZDynamicRef, useValue: dynamicRef },
                 { provide: Z_DYNAMIC_DATA, useValue: options.data },
             ],
         });
-        const componentRef = overlayRef.attach(new ComponentPortal(content, options.viewContainerRef, injector));
+        const componentRef = overlayRef.attach(content, {
+            injector,
+            viewContainerRef: options.viewContainerRef,
+        });
         componentRef.changeDetectorRef.detectChanges();
         dynamicRef.attachComponentRef(componentRef);
         return dynamicRef;
@@ -563,20 +646,20 @@ class ZDynamicService {
         if (!isPlatformBrowser(this._platformId)) {
             return undefined;
         }
-        const config = new OverlayConfig({
+        return this._overlayService.createGlobal({
             hasBackdrop: options.hasBackdrop ?? true,
-            backdropClass: options.backdropClass ?? 'cdk-overlay-dark-backdrop',
+            backdropClass: options.backdropClass ?? 'z-modal-backdrop-dark',
             panelClass: options.panelClass,
-            positionStrategy: options.positionStrategy ?? this._overlay.position().global(),
-            scrollStrategy: options.scrollStrategy ?? this._overlay.scrollStrategies.block(),
-            width: options.width,
-            height: options.height,
-            minWidth: options.minWidth,
-            maxWidth: options.maxWidth,
-            minHeight: options.minHeight,
-            maxHeight: options.maxHeight,
+            scrollLock: options.scrollLock ?? true,
+            size: {
+                width: options.width,
+                height: options.height,
+                minWidth: options.minWidth,
+                maxWidth: options.maxWidth,
+                minHeight: options.minHeight,
+                maxHeight: options.maxHeight,
+            },
         });
-        return this._overlay.create(config);
     }
     _isTemplate(content) {
         return content instanceof TemplateRef;
@@ -1251,6 +1334,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
 class ZIndexDbService {
     _db = null;
     _dbName;
+    _appName;
     _legacyDbName = null;
     _version;
     _mode;
@@ -1261,9 +1345,16 @@ class ZIndexDbService {
     _encrypt = true;
     constructor(config = {}) {
         const baseDbName = config.dbName ?? Z_INDEXDB_DEFAULT_CONFIG.dbName;
-        const scopedDbName = zBuildScopedDbName(baseDbName);
+        this._appName = config.appName ?? zGetStorageAppName();
+        if (config.appName !== undefined) {
+            zConfigureStorageAppName(config.appName);
+        }
+        const scopedDbName = this._appName === undefined
+            ? zBuildLegacyScopedDbName(baseDbName)
+            : zBuildScopedDbName(baseDbName, this._appName);
         this._dbName = scopedDbName;
-        this._legacyDbName = scopedDbName === baseDbName ? null : baseDbName;
+        const legacyDbName = this._appName === undefined ? baseDbName : zBuildLegacyScopedDbName(baseDbName);
+        this._legacyDbName = scopedDbName === legacyDbName ? null : legacyDbName;
         this._version = config.version ?? Z_INDEXDB_DEFAULT_CONFIG.version;
         this._mode = config.mode ?? Z_INDEXDB_DEFAULT_CONFIG.mode;
         this._defaultStoreName = config.defaultStore ?? Z_INDEXDB_DEFAULT_CONFIG.defaultStore;
@@ -1297,17 +1388,16 @@ class ZIndexDbService {
         return key.trim().toLowerCase();
     }
     _normalizeKey(key) {
-        return zBuildScopedCacheKey(this._normalizeLegacyKey(key));
-    }
-    _resolveLegacyNormalizedKey(key) {
-        const legacyKey = this._normalizeLegacyKey(key);
-        const scopedKey = this._normalizeKey(key);
-        return legacyKey === scopedKey ? null : legacyKey;
+        const normalizedKey = this._normalizeLegacyKey(key);
+        return this._appName === undefined
+            ? zBuildLegacyScopedCacheKey(normalizedKey)
+            : zBuildScopedCacheKey(normalizedKey, this._appName);
     }
     _buildStorageKeys(key, encrypt) {
+        const normalizedKey = this._normalizeLegacyKey(key);
         const scopedKey = this._normalizeKey(key);
-        const legacyKey = this._resolveLegacyNormalizedKey(key);
-        const logicalKeys = legacyKey ? [scopedKey, legacyKey] : [scopedKey];
+        const legacyLogicalKeys = this._appName === undefined ? [normalizedKey] : [zBuildLegacyScopedCacheKey(normalizedKey), normalizedKey];
+        const logicalKeys = [...new Set([scopedKey, ...legacyLogicalKeys])];
         if (!encrypt) {
             return logicalKeys;
         }
@@ -1531,6 +1621,12 @@ class ZIndexDbService {
         }
         return this._db.objectStoreNames.contains(storeName);
     }
+    _getDbOrThrow() {
+        if (!this._db) {
+            throw new Error('Database not initialized');
+        }
+        return this._db;
+    }
     async get(key, options) {
         const storeConfig = this._getStoreConfig(options?.storeName);
         const shouldEncrypt = this._shouldEncrypt(storeConfig, options?.encrypt);
@@ -1552,34 +1648,44 @@ class ZIndexDbService {
             const storageKeys = this._buildStorageKeys(key, shouldEncrypt);
             return new Promise(resolve => {
                 try {
-                    const transaction = this._db.transaction([storeConfig.name], this._mode);
+                    const transaction = this._getDbOrThrow().transaction([storeConfig.name], this._mode);
                     const store = transaction.objectStore(storeConfig.name);
                     const request = store.get(storageKeys[0]);
                     request.onsuccess = () => {
                         const resolveData = (rawValue) => {
                             try {
-                                if (!rawValue) {
-                                    resolve(defaultValue);
-                                    return;
+                                if (rawValue === undefined) {
+                                    return false;
                                 }
                                 const decrypted = shouldEncrypt ? this._decryptData(rawValue) : rawValue;
+                                if (decrypted === null) {
+                                    return false;
+                                }
                                 resolve(decrypted ?? defaultValue);
+                                return true;
                             }
                             catch {
-                                resolve(defaultValue);
+                                return false;
                             }
                         };
-                        if (request.result) {
-                            resolveData(request.result);
+                        if (resolveData(request.result)) {
                             return;
                         }
-                        if (storageKeys.length < 2) {
-                            resolve(defaultValue);
-                            return;
-                        }
-                        const legacyRequest = store.get(storageKeys[1]);
-                        legacyRequest.onsuccess = () => resolveData(legacyRequest.result);
-                        legacyRequest.onerror = () => resolve(defaultValue);
+                        const readFallback = (index) => {
+                            if (index >= storageKeys.length) {
+                                resolve(defaultValue);
+                                return;
+                            }
+                            const fallbackRequest = store.get(storageKeys[index]);
+                            fallbackRequest.onsuccess = () => {
+                                if (resolveData(fallbackRequest.result)) {
+                                    return;
+                                }
+                                readFallback(index + 1);
+                            };
+                            fallbackRequest.onerror = () => readFallback(index + 1);
+                        };
+                        readFallback(1);
                     };
                     request.onerror = () => resolve(defaultValue);
                     transaction.onerror = () => resolve(defaultValue);
@@ -1612,12 +1718,10 @@ class ZIndexDbService {
             const _value = shouldEncrypt ? this._encryptData(value) : value;
             return new Promise((resolve, reject) => {
                 try {
-                    const transaction = this._db.transaction([storeConfig.name], 'readwrite');
+                    const transaction = this._getDbOrThrow().transaction([storeConfig.name], 'readwrite');
                     const store = transaction.objectStore(storeConfig.name);
                     const request = store.put(_value, _key);
-                    if (storageKeys.length > 1) {
-                        store.delete(storageKeys[1]);
-                    }
+                    storageKeys.slice(1).forEach(item => store.delete(item));
                     request.onerror = () => reject(request.error);
                     transaction.oncomplete = () => resolve();
                     transaction.onerror = () => reject(transaction.error);
@@ -1655,7 +1759,7 @@ class ZIndexDbService {
             const keys = Array.isArray(key) ? key : [key];
             return new Promise((resolve, reject) => {
                 try {
-                    const transaction = this._db.transaction([storeConfig.name], 'readwrite');
+                    const transaction = this._getDbOrThrow().transaction([storeConfig.name], 'readwrite');
                     const store = transaction.objectStore(storeConfig.name);
                     keys.forEach(k => {
                         const plainKeys = this._buildStorageKeys(k, false);
@@ -1688,7 +1792,7 @@ class ZIndexDbService {
             }
             if (protectedKeys.length === 0) {
                 return new Promise((resolve, reject) => {
-                    const transaction = this._db.transaction([storeConfig.name], 'readwrite');
+                    const transaction = this._getDbOrThrow().transaction([storeConfig.name], 'readwrite');
                     const store = transaction.objectStore(storeConfig.name);
                     const request = store.clear();
                     request.onsuccess = () => resolve();
@@ -1697,7 +1801,7 @@ class ZIndexDbService {
             }
             return new Promise((resolve, reject) => {
                 try {
-                    const transaction = this._db.transaction([storeConfig.name], 'readwrite');
+                    const transaction = this._getDbOrThrow().transaction([storeConfig.name], 'readwrite');
                     const store = transaction.objectStore(storeConfig.name);
                     const keyRequest = store.getAllKeys();
                     const protectedSet = new Set();
@@ -1747,7 +1851,7 @@ class ZIndexDbService {
             }
             return new Promise(resolve => {
                 try {
-                    const transaction = this._db.transaction([storeConfig.name], this._mode);
+                    const transaction = this._getDbOrThrow().transaction([storeConfig.name], this._mode);
                     const store = transaction.objectStore(storeConfig.name);
                     const keysRequest = store.getAllKeys();
                     const valuesRequest = store.getAll();
@@ -1761,7 +1865,10 @@ class ZIndexDbService {
                                     const _key = this._shouldEncrypt(storeConfig) ? this._decryptData(key) : key;
                                     const _value = this._shouldEncrypt(storeConfig) ? this._decryptData(values[index]) : values[index];
                                     if (_key && _value !== null) {
-                                        results[zStripScopedCacheKey(_key)] = _value;
+                                        const scopedKey = this._appName === undefined
+                                            ? zStripLegacyScopedCacheKey(_key)
+                                            : zStripScopedCacheKey(_key, this._appName);
+                                        results[zStripLegacyScopedCacheKey(scopedKey)] = _value;
                                     }
                                 }
                                 catch {
@@ -1802,16 +1909,14 @@ class ZIndexDbService {
                     throw new Error(`Store "${storeConfig.name}" does not exist`);
                 }
                 return new Promise((resolve, reject) => {
-                    const transaction = this._db.transaction([storeConfig.name], 'readwrite');
+                    const transaction = this._getDbOrThrow().transaction([storeConfig.name], 'readwrite');
                     const store = transaction.objectStore(storeConfig.name);
                     batch.forEach(([key, value]) => {
                         const storageKeys = this._buildStorageKeys(key, shouldEncrypt);
                         const _key = storageKeys[0];
                         const _value = shouldEncrypt ? this._encryptData(value) : value;
                         store.put(_value, _key);
-                        if (storageKeys.length > 1) {
-                            store.delete(storageKeys[1]);
-                        }
+                        storageKeys.slice(1).forEach(item => store.delete(item));
                     });
                     transaction.oncomplete = () => resolve();
                     transaction.onerror = () => reject(transaction.error);
@@ -2584,5 +2689,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ZCacheService, ZDynamicRef, ZDynamicService, ZExcelService, ZHttpAbstractService, ZIndexDbService, ZOverlayContainerService, ZOverlayZIndexService, ZSubjectService, ZThemeService, ZTranslateService, Z_DEFAULT_THEME, Z_DYNAMIC_DATA, Z_EXCEL_BORDER_THIN, Z_EXCEL_CHAR_WIDTH_MAP, Z_EXCEL_COLORS, Z_EXCEL_DEFAULT_CONFIG, Z_EXCEL_FONT_MULTIPLIERS, Z_EXCEL_WIDTH_LIMITS, Z_HTTP_DEFAULT_CONFIG, Z_INDEXDB_BATCH_SIZE, Z_INDEXDB_DEFAULT_CONFIG, Z_INDEXDB_MAX_VERSION, Z_LANG_CACHE_KEY, Z_LANG_TO_LOCALE, Z_THEME_CONFIG, Z_THEME_CSS_MAP, Z_THEME_PREFERENCES_CACHE_KEY, zBuildScopedCacheKey, zBuildScopedDbName, zStripScopedCacheKey };
+export { ZCacheService, ZDynamicRef, ZDynamicService, ZExcelService, ZHttpAbstractService, ZIndexDbService, ZOverlayContainerService, ZOverlayZIndexService, ZSubjectService, ZThemeService, ZTranslateService, Z_CACHE_DEFAULT_PREFIX, Z_CACHE_SCOPE_SEPARATOR, Z_DB_SCOPE_SEPARATOR, Z_DEFAULT_THEME, Z_DYNAMIC_DATA, Z_EXCEL_BORDER_THIN, Z_EXCEL_CHAR_WIDTH_MAP, Z_EXCEL_COLORS, Z_EXCEL_DEFAULT_CONFIG, Z_EXCEL_FONT_MULTIPLIERS, Z_EXCEL_WIDTH_LIMITS, Z_HTTP_DEFAULT_CONFIG, Z_INDEXDB_BATCH_SIZE, Z_INDEXDB_DEFAULT_CONFIG, Z_INDEXDB_MAX_VERSION, Z_LANG_CACHE_KEY, Z_LANG_TO_LOCALE, Z_STORAGE_SCOPE_FALLBACK, Z_THEME_CONFIG, Z_THEME_CSS_MAP, Z_THEME_PREFERENCES_CACHE_KEY, zBuildLegacyScopedCacheKey, zBuildLegacyScopedDbName, zBuildScopedCacheKey, zBuildScopedDbName, zConfigureStorageAppName, zGetStorageAppName, zNormalizeStorageAppName, zStripLegacyScopedCacheKey, zStripScopedCacheKey };
 //# sourceMappingURL=shival99-z-ui-services.mjs.map