http-request-manager 18.0.13 → 18.1.1

package/fesm2022/http-request-manager.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, APP_ID, Inject, InjectionToken, Injector, Optional, EventEmitter, Component, ViewEncapsulation, Input, Output, ViewChild, NgModule } from '@angular/core';
+import { inject, Injectable, APP_ID, Inject, InjectionToken, Injector, Optional, signal, computed, effect, EventEmitter, Component, ViewEncapsulation, Input, Output, ViewChild, NgModule } from '@angular/core';
 import { ComponentStore } from '@ngrx/component-store';
 import { map, catchError, filter, delay, finalize, takeWhile, retry, startWith, tap, mergeMap, takeUntil, withLatestFrom, switchMap, concatMap, scan, distinctUntilChanged } from 'rxjs/operators';
 import { HttpClient, HttpHeaders, HttpEventType, HttpHeaderResponse, HttpErrorResponse, HTTP_INTERCEPTORS } from '@angular/common/http';
@@ -59,7 +59,11 @@ class SettingOptions {
         this.encrypted = encrypted;
     }
     static adapt(item) {
-        return new SettingOptions((item?.storage) ? item.storage : StorageType.GLOBAL, (item?.expires) ? item.expires : 0, (item?.expiresIn) ? item.expiresIn : '', (item?.encrypted) ? item?.encrypted : false);
+        const storage = (typeof item?.storage !== 'undefined' && item?.storage !== null) ? Number(item.storage) : StorageType.GLOBAL;
+        const expires = (typeof item?.expires !== 'undefined' && item?.expires !== null) ? Number(item.expires) : 0;
+        const expiresIn = (typeof item?.expiresIn !== 'undefined' && item?.expiresIn !== null) ? item.expiresIn : '';
+        const encrypted = (typeof item?.encrypted !== 'undefined' && item?.encrypted !== null) ? Boolean(item.encrypted) : false;
+        return new SettingOptions(storage, expires, expiresIn, encrypted);
     }
 }
 
@@ -902,15 +906,34 @@ function delayedRetry(delayMs, maxRetry = DEFAULT_MAX_RETRIES) {
     }));
 }
 
-/**
- * @param pollInterval
- * @param stopCondition$
- * @param isPending$
- */
 function requestPolling(pollInterval, stopCondition$, isPending$) {
     return (source) => {
         return interval(pollInterval * 1000)
-            .pipe(startWith(0), tap(() => isPending$.next(true)), mergeMap(() => source), tap(() => isPending$.next(false)), takeUntil(stopCondition$));
+            .pipe(startWith(0), tap(() => {
+            try {
+                if (isPending$ && typeof isPending$.next === 'function') {
+                    isPending$.next(true);
+                }
+                else if (isPending$ && typeof isPending$.set === 'function') {
+                    isPending$.set(true);
+                }
+            }
+            catch (e) {
+                // no-op if setting fails
+            }
+        }), mergeMap(() => source), tap(() => {
+            try {
+                if (isPending$ && typeof isPending$.next === 'function') {
+                    isPending$.next(false);
+                }
+                else if (isPending$ && typeof isPending$.set === 'function') {
+                    isPending$.set(false);
+                }
+            }
+            catch (e) {
+                // no-op if setting fails
+            }
+        }), takeUntil(stopCondition$));
     };
 }
 
@@ -1206,6 +1229,7 @@ class RequestOptions {
 class ObjectMergerService {
     constructor(configOptions) {
         this.configOptions = configOptions;
+        this.utils = inject(UtilsService);
         if (!this.configOptions)
             this.configOptions = ConfigOptions.adapt();
     }
@@ -1225,10 +1249,28 @@ class ObjectMergerService {
         const configForRoot = (this.configOptions?.LocalStorageOptions) ? this.configOptions.LocalStorageOptions : LocalStorageOptions.adapt();
         const configForRootOptions = configForRoot.options || LocalStorageOptions.adapt().options;
         const mergedOptions = SettingOptions.adapt(options);
-        mergedOptions.storage = (options && options.storage === 0) ? configForRootOptions?.storage || 0 : options.storage;
-        mergedOptions.expires = (options && options.expires === 0) ? configForRootOptions?.expires || 0 : options.expires;
-        mergedOptions.expiresIn = (options && options.expiresIn === '') ? configForRootOptions?.expiresIn || '' : options.expiresIn;
-        mergedOptions.encrypted = (options && !options.encrypted) ? configForRootOptions?.encrypted || false : options.encrypted;
+        // storage type
+        mergedOptions.storage = (options && (typeof options.storage !== 'undefined')) ? options.storage : (configForRootOptions?.storage ?? 0);
+        // expires: prefer explicit numeric expires; if not provided, compute from expiresIn string; otherwise use config default
+        // if an explicit, non-zero numeric expires is provided, use it
+        if (options && (typeof options.expires !== 'undefined') && options.expires !== null && Number(options.expires) > 0) {
+            mergedOptions.expires = Number(options.expires);
+        }
+        else if (options && options.expiresIn) {
+            // compute numeric epoch from expiresIn string using UtilsService if available
+            try {
+                mergedOptions.expires = this.utils ? this.utils.expires(options.expiresIn) : 0;
+            }
+            catch {
+                mergedOptions.expires = 0;
+            }
+        }
+        else {
+            mergedOptions.expires = configForRootOptions?.expires ?? 0;
+        }
+        // keep expiresIn string if explicitly provided, otherwise use config default
+        mergedOptions.expiresIn = (options && (typeof options.expiresIn !== 'undefined')) ? options.expiresIn : (configForRootOptions?.expiresIn || '');
+        mergedOptions.encrypted = (options && (typeof options.encrypted !== 'undefined')) ? options.encrypted : (configForRootOptions?.encrypted || false);
         return mergedOptions;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ObjectMergerService, deps: [{ token: CONFIG_SETTINGS_TOKEN, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -1534,6 +1576,272 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     args: [CONFIG_SETTINGS_TOKEN]
                 }] }] });
 
+const initialState = {
+    localStores: [],
+    sessionStores: [],
+    settings: [],
+};
+class LocalStorageSignalsManagerService {
+    constructor(configOptions) {
+        this.configOptions = configOptions;
+        this.state = signal(initialState);
+        this.storageName = 'storage';
+        this.storageSettingsName = 'global-storage';
+        this.defaultOptions = SettingOptions.adapt();
+        this.stateRetrieved = false;
+        this.encrypted = false;
+        this.app = inject(AppService);
+        this.utils = inject(UtilsService);
+        this.objectMergerService = inject(ObjectMergerService);
+        this.encryption = inject(SymmetricalEncryptionService);
+        this.encryptionTest = inject(EncryptionTestService);
+        // --- SELECTORS ---
+        this.stores = computed(() => this.state().settings);
+        this.storeExists = (store) => computed(() => !!this.state().settings.find(item => item.name === store));
+        this.store = (store) => computed(() => {
+            const data = this.state();
+            const foundStore = data.settings.find(item => item.name === store);
+            if (!foundStore)
+                return null;
+            const options = SettingOptions.adapt(foundStore.options);
+            const found = options.storage === StorageType.GLOBAL
+                ? data.localStores.find(item => item.id === foundStore.id)
+                : data.sessionStores.find(item => item.id === foundStore.id);
+            if (!found) {
+                this.deleteStore({ name: store });
+                return null;
+            }
+            if (!this.app?.appID) {
+                console.warn('No App ID found - AppId not Provided');
+                return null;
+            }
+            const storageData = options.encrypted
+                ? this.encryption.decrypt(found.data, this.app.appID)
+                : found.data;
+            return this.isString(storageData) ? JSON.parse(storageData) : storageData;
+        });
+        this.settings = computed(() => this.state().settings);
+        this.setting = (store) => computed(() => this.state().settings.find(item => item.name === store) ?? null);
+        this.storageName = configOptions?.LocalStorageOptions?.storageName || this.storageName;
+        this.storageSettingsName = configOptions?.LocalStorageOptions?.storageSettingsName || this.storageSettingsName;
+        this.defaultOptions = configOptions?.LocalStorageOptions?.options || this.defaultOptions;
+        this.retrieveState();
+        // Auto-persist when state changes
+        effect(() => {
+            if (this.stateRetrieved) {
+                this.persistState(this.state());
+            }
+        });
+        // Expiration timer every 3s
+        setInterval(() => {
+            const state = this.state();
+            const expired = this.expired(state);
+            if (expired.length > 0) {
+                const ids = expired.map(i => i.id);
+                const updated = {
+                    ...state,
+                    localStores: state.localStores.filter(i => !ids.includes(i.id)),
+                    sessionStores: state.sessionStores.filter(i => !ids.includes(i.id)),
+                    settings: state.settings.filter(i => !ids.includes(i.id)),
+                };
+                this.state.set(updated);
+                this.persistState(updated);
+            }
+        }, 3000);
+    }
+    // --- STATE MUTATORS ---
+    setStore(store) {
+        this.state.update(state => {
+            const settings = StorageOption.adapt(store);
+            settings.options = this.objectMergerService.mergeStorageOptions(settings.options);
+            store.name = this.validStoreName(store.name);
+            const str = this.encryptionTest.isEncrypted(store.data) ? store.data : JSON.stringify(store.data);
+            const dataStr = this.isObjectOrArray(str) && store.options.encrypted
+                ? this.encryption.encrypt(str, this.app.appID)
+                : store.data;
+            const localData = dataStr && settings.options?.storage === StorageType.GLOBAL
+                ? [{ data: dataStr, id: settings.id }]
+                : [];
+            const sessionData = dataStr && settings.options?.storage === StorageType.SESSION
+                ? [{ data: dataStr, id: settings.id }]
+                : [];
+            return {
+                ...state,
+                localStores: [...state.localStores, ...localData],
+                sessionStores: [...state.sessionStores, ...sessionData],
+                settings: [...state.settings, settings],
+            };
+        });
+    }
+    createStore(store) {
+        this.state.update(state => {
+            const settings = StorageOption.adapt(store);
+            settings.options = this.objectMergerService.mergeStorageOptions(settings.options);
+            if (state.settings.some(item => item.name === store.name)) {
+                return state;
+            }
+            if (!this.isObjectOrArray(store.data)) {
+                console.warn('Data must be an Object or Array');
+                return state;
+            }
+            const dataStr = store.options.encrypted ? this.encryption.encrypt(store.data, this.app.appID) : store.data;
+            const localData = settings.options?.storage === StorageType.GLOBAL ? [{ data: dataStr, id: settings.id }] : [];
+            const sessionData = settings.options?.storage === StorageType.SESSION ? [{ data: dataStr, id: settings.id }] : [];
+            return {
+                ...state,
+                localStores: [...state.localStores, ...localData],
+                sessionStores: [...state.sessionStores, ...sessionData],
+                settings: [...state.settings, settings],
+            };
+        });
+    }
+    updateStore(store) {
+        this.state.update(state => {
+            const settings = state.settings.find(item => item.name === store.name);
+            if (!settings)
+                return state;
+            const dataStr = settings.options?.encrypted
+                ? this.encryption.encrypt(store.data, this.app.appID)
+                : store.data;
+            const localData = settings.options?.storage === StorageType.GLOBAL ? [{ data: dataStr, id: settings.id }] : [];
+            const sessionData = settings.options?.storage === StorageType.SESSION ? [{ data: dataStr, id: settings.id }] : [];
+            return {
+                ...state,
+                localStores: [...state.localStores.filter(i => i.id !== settings.id), ...localData],
+                sessionStores: [...state.sessionStores.filter(i => i.id !== settings.id), ...sessionData],
+            };
+        });
+    }
+    deleteStore(store) {
+        this.state.update(state => {
+            const id = state.settings.find(item => item.name === store.name)?.id;
+            if (!id)
+                return state;
+            return {
+                ...state,
+                localStores: state.localStores.filter(i => i.id !== id),
+                sessionStores: state.sessionStores.filter(i => i.id !== id),
+                settings: state.settings.filter(i => i.id !== id),
+            };
+        });
+    }
+    resetStore() {
+        const cleared = { localStores: [], sessionStores: [], settings: [] };
+        this.state.set(cleared);
+        this.persistState(cleared);
+    }
+    // --- HELPERS ---
+    persistState(state) {
+        localStorage.setItem(this.storageName, JSON.stringify(state.localStores));
+        sessionStorage.setItem(this.storageName, JSON.stringify(state.sessionStores));
+        const settingsStr = this.encryption.encrypt(state.settings, this.app.appID);
+        localStorage.setItem(this.storageSettingsName, settingsStr || '');
+    }
+    expired(state) {
+        return state.settings.filter(s => (s.options?.expires || 0) > 0 && this.utils.hasExpired(s.options?.expires));
+    }
+    retrieveState() {
+        const str = localStorage.getItem(this.storageSettingsName);
+        const localStr = localStorage.getItem(this.storageName);
+        const sessionStr = sessionStorage.getItem(this.storageName);
+        const localData = localStr ? JSON.parse(localStr) : [];
+        const sessionData = sessionStr ? JSON.parse(sessionStr) : [];
+        const decryptedStr = str ? this.encryption.decrypt(str, this.app.appID) : null;
+        const settings = decryptedStr ? JSON.parse(decryptedStr) : [];
+        settings.forEach(store => {
+            // normalize options so we compare numbers and compute expires correctly
+            const options = SettingOptions.adapt(store.options);
+            // if persisted data included expiresIn but not numeric expires, compute it now
+            if ((!options.expires || options.expires === 0) && options.expiresIn) {
+                try {
+                    const computed = this.utils.expires(options.expiresIn);
+                    options.expires = computed || 0;
+                }
+                catch {
+                    options.expires = 0;
+                }
+            }
+            const expired = (options.expires || 0) > 0 && this.utils.hasExpired(options.expires || 0);
+            if (!expired) {
+                const hasStorage = this.hasGlobalStorage(options.storage, store.id || '');
+                if (!hasStorage) {
+                    this.createStore({ id: store.id, name: store.name, data: [], options });
+                }
+                else {
+                    const storeData = (options.storage === StorageType.GLOBAL)
+                        ? localData.find(item => item.id === store.id)
+                        : sessionData.find(item => item.id === store.id);
+                    this.setStore({ id: store.id || '', name: store.name, data: storeData?.data, options });
+                }
+            }
+        });
+        this.stateRetrieved = true;
+        // Ensure all stored settings have numeric expires computed and persisted
+        try {
+            const current = this.state();
+            let changed = false;
+            const normalizedSettings = current.settings.map(s => {
+                const opts = SettingOptions.adapt(s.options);
+                if ((!opts.expires || opts.expires === 0) && opts.expiresIn) {
+                    const computed = this.utils.expires(opts.expiresIn) || 0;
+                    if (computed && computed !== opts.expires) {
+                        opts.expires = computed;
+                        changed = true;
+                    }
+                }
+                return { ...s, options: opts };
+            });
+            if (changed) {
+                const updated = { ...current, settings: normalizedSettings };
+                this.state.set(updated);
+                this.persistState(updated);
+            }
+        }
+        catch (e) {
+            // swallow normalization errors to avoid breaking init
+        }
+    }
+    hasGlobalStorage(type = StorageType.GLOBAL, id) {
+        const strData = [];
+        if (type === StorageType.GLOBAL) {
+            const str = localStorage.getItem(this.storageName);
+            strData.push(...(str ? JSON.parse(str) : []));
+        }
+        else {
+            const str = sessionStorage.getItem(this.storageName);
+            strData.push(...(str ? JSON.parse(str) : []));
+        }
+        const found = strData.find(store => store.id === id);
+        return !!found;
+    }
+    isObjectOrArray(obj) {
+        try {
+            const parsed = typeof obj === 'object' ? obj : JSON.parse(obj);
+            return typeof parsed === 'object' && parsed !== null;
+        }
+        catch {
+            return false;
+        }
+    }
+    isString(obj) {
+        return Object.prototype.toString.call(obj) === '[object String]';
+    }
+    validStoreName(str) {
+        return str.toLowerCase().replace(/\s+/g, '_').replace(/[^ -~]/g, '');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LocalStorageSignalsManagerService, deps: [{ token: CONFIG_SETTINGS_TOKEN, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LocalStorageSignalsManagerService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LocalStorageSignalsManagerService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: ConfigOptions, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [CONFIG_SETTINGS_TOKEN]
+                }] }] });
+
 const API_OPTS = new InjectionToken('API_OPTS');
 const defaultState = {
     data: [],
@@ -2891,14 +3199,180 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     args: [PROXY_CONFIG]
                 }] }] });
 
+class LocalStorageSignalsDemoComponent {
+    // store type is driven by the form control
+    get type() {
+        return (this.typeControl.value) ? +this.typeControl.value : 0;
+    }
+    get isValid() {
+        return this.newStoreForm.valid;
+    }
+    get isValidData() {
+        return this.storageForm.valid;
+    }
+    settingFor(name) {
+        const c = this.localStorageManagerService.setting(name);
+        return c ? c() : null;
+    }
+    constructor(configOptions) {
+        this.configOptions = configOptions;
+        this.fb = inject(FormBuilder);
+        this.utils = inject(UtilsService);
+        this.typeControl = this.fb.control(StorageType.GLOBAL.toString());
+        this.localStorageManagerService = inject(LocalStorageSignalsManagerService);
+        // Use signals directly and computed values for template binding
+        this.settings = computed(() => this.localStorageManagerService.settings());
+        // selected store (signal) and its JSON data for template
+        this.storeSelected = signal(null);
+        this.selectedStoreData = computed(() => {
+            const s = this.storeSelected();
+            if (!s)
+                return '';
+            const computed = this.localStorageManagerService.store(s.name);
+            return computed ? JSON.stringify(computed()) : '';
+        });
+        // filtered settings by selected type
+        this.selectedType = signal(StorageType.GLOBAL);
+        this.filteredSettings = computed(() => {
+            const values = this.settings() || [];
+            return values.filter((item) => item.options.storage === +this.selectedType());
+        });
+        this.storageForm = this.fb.group({
+            store: this.fb.control(null),
+            type: 'local',
+            settingType: 'local',
+            encrypted: false,
+            data: this.fb.control('', Validators.required),
+        });
+        this.newStoreForm = this.fb.group({
+            name: this.fb.control(null, Validators.required),
+            storage: 'local',
+            encrypted: false,
+            data: this.fb.control('', Validators.required),
+            expiresIn: this.fb.control('0')
+        });
+        // no RxJS Observables here; template uses signals/computed directly
+        this.expiresIn = (epoch) => this.utils.expiresIn(epoch);
+        this.isValidJSON = (str) => {
+            try {
+                JSON.parse(str);
+                return true;
+            }
+            catch (e) {
+                return false;
+            }
+        };
+        this.displayedColumns = ['name', 'id', 'encrypted', 'expires', "option"];
+        this.filterData = (values) => {
+            if (!values)
+                return [];
+            return values.filter((item) => item.options && item.options.storage === +this.type);
+        };
+        this.create = false;
+    }
+    ngOnInit() {
+        this.storeProps = this.configOptions?.LocalStorageOptions;
+        this.options = this.storeProps?.options;
+        if (this.options?.storage) {
+            this.typeControl.patchValue(this.options.storage.toString());
+            this.typeControl.disable();
+        }
+        else {
+            this.typeControl.enable();
+        }
+        if (this.options?.expiresIn) {
+            this.newStoreForm.get('expiresIn')?.patchValue(this.options.expiresIn);
+            this.newStoreForm.get('expiresIn')?.disable();
+        }
+        else {
+            this.newStoreForm.get('expiresIn')?.enable();
+        }
+        if (this.options?.encrypted) {
+            this.newStoreForm.get('encrypted')?.patchValue(this.options.encrypted);
+            this.newStoreForm.get('encrypted')?.disable();
+        }
+        else {
+            this.newStoreForm.get('encrypted')?.enable();
+        }
+        // nothing to synchronize - templates read computed signals directly
+    }
+    onCreateStore() {
+        if (!this.isValid)
+            return;
+        const store = this.newStoreForm.value;
+        if (!store.name || store.name === '')
+            return;
+        const options = { storage: this.type, encrypted: store.encrypted, expiresIn: store.expiresIn };
+        this.localStorageManagerService.createStore({
+            name: store.name,
+            data: store.data,
+            options: SettingOptions.adapt(options)
+        });
+        this.newStoreForm.reset();
+        this.create = false;
+    }
+    onUpdateStore(store) {
+        if (!this.storageForm.valid)
+            return;
+        const storeData = this.storageForm.value;
+        const data = JSON.parse(storeData.data || '');
+        const type = (storeData.type === 'local') ? StorageType.GLOBAL : StorageType.SESSION;
+        this.localStorageManagerService.updateStore({
+            name: store.name,
+            data
+        });
+    }
+    onSelectedRow(store) {
+        this.store = store;
+        this.storeSelected.set(store);
+        this.create = false;
+    }
+    onCreate() {
+        this.onCancel();
+        this.create = true;
+    }
+    onDelete(store) {
+        this.localStorageManagerService.deleteStore({
+            name: store.name,
+        });
+        this.onCancel();
+    }
+    onCancel() {
+        this.storeSelected.set(null);
+        this.store = null;
+        this.create = false;
+    }
+    onUpdate(store, data) {
+        this.localStorageManagerService.updateStore({
+            name: store.name,
+            data: JSON.parse(data)
+        });
+        this.onCancel();
+    }
+    onReset() {
+        this.localStorageManagerService.resetStore();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LocalStorageSignalsDemoComponent, deps: [{ token: CONFIG_SETTINGS_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LocalStorageSignalsDemoComponent, selector: "app-local-storage-signals-demo", ngImport: i0, template: "<div style=\"margin: 2rem;\">\n\n  <div style=\"display: flex; gap: 1rem\">\n    <h2 style=\"padding-top: .5rem; display: flex;\">\n      <div style=\"padding-top: .5rem;\">Local Storage Manager</div>\n      <div>\n        <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n          <mat-icon>info</mat-icon>\n        </button>\n      </div>\n    </h2>\n    <span style=\"flex:1\"></span>\n    <div style=\"padding-top: .25rem;\">\n      <mat-button-toggle-group name=\"storage\" [formControl]=\"typeControl\" (change)=\"onCancel()\">\n        <mat-button-toggle value=\"0\">Local Storage</mat-button-toggle>\n        <mat-button-toggle value=\"1\">Session Storage</mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n    <div style=\"margin-top: .25rem;\">\n      <button mat-icon-button (click)=\"onCreate()\">\n        <mat-icon>add</mat-icon>\n      </button>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"storeProps?.storageName || storeProps?.storageSettingsName\">\n    <div style=\"display: flex; gap: .5rem; flex-direction: column; border: gray solid thin; background-color: whitesmoke; padding: 1rem;\"\n    >\n      <div style=\"display: flex;\">\n        <div *ngIf=\"storeProps?.storageSettingsName\" style=\"flex:1\">\n          Database: <b>{{ storeProps?.storageSettingsName }}</b>\n        </div>\n        <div *ngIf=\"storeProps?.storageName\" style=\"flex:1\">\n          Data: <b>{{ storeProps?.storageName }}</b>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <div style=\"margin-top: 2rem;\" [formGroup]=\"newStoreForm\" *ngIf=\"create; else LIST\">\n\n    <h2>Create Store</h2>\n\n    <div style=\"display: flex; gap: 1rem;\">\n      <div style=\"flex:1\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Store Name</mat-label>\n          <input matInput placeholder=\"sample\" formControlName=\"name\">\n        </mat-form-field>\n      </div>\n      <div>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Expires In...</mat-label>\n          <mat-select formControlName=\"expiresIn\">\n            <mat-option value=\"0\">None</mat-option>\n            <mat-option value=\"30s\">30 Seconds</mat-option>\n            <mat-option value=\"1mn\">1 Minute</mat-option>\n            <mat-option value=\"1hr\">1 Hour</mat-option>\n            <mat-option value=\"1d\">1 Day</mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <div style=\"margin-top: 1rem;\">\n        <mat-slide-toggle formControlName=\"encrypted\">Encrypted</mat-slide-toggle>\n      </div>\n    </div>\n\n    <div style=\"display: flex;\">\n      <mat-form-field appearance=\"outline\" style=\"flex: 1;\">\n        <mat-label>Data (Must be an Object or Array of any)</mat-label>\n        <textarea matInput placeholder=\"[]\" formControlName=\"data\" #json></textarea>\n      </mat-form-field>\n    </div>\n    <mat-error *ngIf=\"!isValidJSON(json.value)\">Not Valid Data</mat-error>\n\n    <div style=\"display: flex;\">\n      <span style=\"flex:1\"></span>\n      <button mat-stroked-button (click)=\"onCreateStore()\" [disabled]=\"!(isValid && isValidJSON(json.value))\">\n        Save Store\n      </button>\n    </div>\n\n  </div>\n\n  <ng-template #LIST>\n\n    <div style=\"margin-top: 1rem;\">\n      <mat-divider></mat-divider>\n    </div>\n{{ settings() | json }}\n  <div *ngIf=\"filterData(settings()) as data\">\n      <ng-container *ngIf=\"data.length > 0; else NO_DATA\">\n        <table mat-table [dataSource]=\"data\">\n          <ng-container matColumnDef=\"name\">\n            <th mat-header-cell *matHeaderCellDef> Store </th>\n            <td mat-cell *matCellDef=\"let element\" style=\"font-weight: bold; text-transform: uppercase;\"> {{element.name}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"id\">\n            <th mat-header-cell *matHeaderCellDef> ID </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.id}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"encrypted\">\n            <th mat-header-cell *matHeaderCellDef style=\"text-align: center;\"> Encrypted </th>\n            <td mat-cell *matCellDef=\"let element\" style=\"text-align: center;\">\n              <ng-container *ngIf=\"element.options.encrypted; else NO\">YES</ng-container>\n              <ng-template #NO><span style=\"color:gray\">NO</span></ng-template>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"expires\">\n            <th mat-header-cell *matHeaderCellDef style=\"text-align: center;\"> Expires </th>\n            <td mat-cell *matCellDef=\"let element\" style=\"text-align: center;\">\n              <ng-container *ngIf=\"element.options.expires !== 0; else NO_DATA\">\n                {{expiresIn(element.options.expires)}}\n              </ng-container>\n              <ng-template #NO_DATA>\n                \u221E\n              </ng-template>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"option\">\n            <th mat-header-cell *matHeaderCellDef></th>\n            <td mat-cell *matCellDef=\"let element\" style=\"padding-right: 0;\">\n              <div style=\"display: flex;justify-content: flex-end;\">\n                <button mat-icon-button color=\"warn\" (click)=\"onDelete(element); $event.stopPropagation()\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </div>\n            </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" (click)=\"onSelectedRow(row)\"></tr>\n        </table>\n      </ng-container>\n\n      <ng-template #NO_DATA>\n        <h3 style=\"margin-top: 1rem;\">No Data</h3>\n      </ng-template>\n\n  <div *ngIf=\"storeSelected() as selectedStore\" style=\"margin-top: 2rem;\">\n        <div style=\"margin-bottom: 1rem;\">\n          <mat-divider></mat-divider>\n        </div>\n\n  <h3>STORE: <span style=\"font-weight: bold;\">{{ selectedStore.name | uppercase }}</span></h3>\n  <h3>SETTINGS: {{ localStorageManagerService.setting(selectedStore.name) ? (localStorageManagerService.setting(selectedStore.name)() | json) : '{}' }}</h3>\n        <div style=\"display: flex;\">\n          <mat-form-field appearance=\"outline\" style=\"flex: 1;\">\n            <mat-label>Data (Must be an Object or Array of any)</mat-label>\n            <textarea matInput placeholder=\"[]\" #json [value]=\"selectedStoreData()\"></textarea>\n          </mat-form-field>\n        </div>\n        <mat-error *ngIf=\"!isValidJSON(json.value)\">Not Valid Data</mat-error>\n\n        <div style=\"display: flex; gap: .5rem;\">\n          <span style=\"flex:1\"></span>\n          <button mat-stroked-button (click)=\"onCancel()\">Cancel</button>\n          <button mat-stroked-button (click)=\"onUpdate(selectedStore, json.value)\" [disabled]=\"!(isValidJSON(json.value))\">Update</button>\n        </div>\n      </div>\n    </div>\n\n  </ng-template>\n\n  <div style=\"margin-top: 1rem;\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 1rem;\">\n    <button mat-stroked-button (click)=\"onReset()\">Delete All Stores</button>\n  </div>\n\n</div>\n\n\n<mat-menu #menu=\"matMenu\">\n  <div style=\"padding: 1rem;\">\n    <p>Please note that the LocalStorage (encryption) and management of data is dependant on initializing the APP_ID</p>\n    <p>Must provide a value for <b>APP_ID</b> in AppModule->Providers</p>\n    <mat-divider></mat-divider>\n  <div style=\"font-size: smaller; margin-top: .5rem;\">\n    <p>Example: UUID (self.crypto.randomUUID() to generate)</p>\n    <div style=\"background-color: whitesmoke; padding: 1rem;\">\n      &#123;<br>\n        provide: APP_ID,<br>\n        useValue: \"056991ac-3537-43ab-b5b9-83edf6554eff\",<br>\n      &#125;\n    </div>\n  </div>\n  </div>\n</mat-menu>\n", styles: [".mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor}.demo-row-is-clicked{font-weight:700}.mat-mdc-menu-panel.mat-mdc-menu-panel{max-width:280px!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i10$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i10$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i11.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i12.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i13.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "pipe", type: i1$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LocalStorageSignalsDemoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-local-storage-signals-demo', encapsulation: ViewEncapsulation.None, template: "<div style=\"margin: 2rem;\">\n\n  <div style=\"display: flex; gap: 1rem\">\n    <h2 style=\"padding-top: .5rem; display: flex;\">\n      <div style=\"padding-top: .5rem;\">Local Storage Manager</div>\n      <div>\n        <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n          <mat-icon>info</mat-icon>\n        </button>\n      </div>\n    </h2>\n    <span style=\"flex:1\"></span>\n    <div style=\"padding-top: .25rem;\">\n      <mat-button-toggle-group name=\"storage\" [formControl]=\"typeControl\" (change)=\"onCancel()\">\n        <mat-button-toggle value=\"0\">Local Storage</mat-button-toggle>\n        <mat-button-toggle value=\"1\">Session Storage</mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n    <div style=\"margin-top: .25rem;\">\n      <button mat-icon-button (click)=\"onCreate()\">\n        <mat-icon>add</mat-icon>\n      </button>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"storeProps?.storageName || storeProps?.storageSettingsName\">\n    <div style=\"display: flex; gap: .5rem; flex-direction: column; border: gray solid thin; background-color: whitesmoke; padding: 1rem;\"\n    >\n      <div style=\"display: flex;\">\n        <div *ngIf=\"storeProps?.storageSettingsName\" style=\"flex:1\">\n          Database: <b>{{ storeProps?.storageSettingsName }}</b>\n        </div>\n        <div *ngIf=\"storeProps?.storageName\" style=\"flex:1\">\n          Data: <b>{{ storeProps?.storageName }}</b>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <div style=\"margin-top: 2rem;\" [formGroup]=\"newStoreForm\" *ngIf=\"create; else LIST\">\n\n    <h2>Create Store</h2>\n\n    <div style=\"display: flex; gap: 1rem;\">\n      <div style=\"flex:1\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Store Name</mat-label>\n          <input matInput placeholder=\"sample\" formControlName=\"name\">\n        </mat-form-field>\n      </div>\n      <div>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Expires In...</mat-label>\n          <mat-select formControlName=\"expiresIn\">\n            <mat-option value=\"0\">None</mat-option>\n            <mat-option value=\"30s\">30 Seconds</mat-option>\n            <mat-option value=\"1mn\">1 Minute</mat-option>\n            <mat-option value=\"1hr\">1 Hour</mat-option>\n            <mat-option value=\"1d\">1 Day</mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <div style=\"margin-top: 1rem;\">\n        <mat-slide-toggle formControlName=\"encrypted\">Encrypted</mat-slide-toggle>\n      </div>\n    </div>\n\n    <div style=\"display: flex;\">\n      <mat-form-field appearance=\"outline\" style=\"flex: 1;\">\n        <mat-label>Data (Must be an Object or Array of any)</mat-label>\n        <textarea matInput placeholder=\"[]\" formControlName=\"data\" #json></textarea>\n      </mat-form-field>\n    </div>\n    <mat-error *ngIf=\"!isValidJSON(json.value)\">Not Valid Data</mat-error>\n\n    <div style=\"display: flex;\">\n      <span style=\"flex:1\"></span>\n      <button mat-stroked-button (click)=\"onCreateStore()\" [disabled]=\"!(isValid && isValidJSON(json.value))\">\n        Save Store\n      </button>\n    </div>\n\n  </div>\n\n  <ng-template #LIST>\n\n    <div style=\"margin-top: 1rem;\">\n      <mat-divider></mat-divider>\n    </div>\n{{ settings() | json }}\n  <div *ngIf=\"filterData(settings()) as data\">\n      <ng-container *ngIf=\"data.length > 0; else NO_DATA\">\n        <table mat-table [dataSource]=\"data\">\n          <ng-container matColumnDef=\"name\">\n            <th mat-header-cell *matHeaderCellDef> Store </th>\n            <td mat-cell *matCellDef=\"let element\" style=\"font-weight: bold; text-transform: uppercase;\"> {{element.name}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"id\">\n            <th mat-header-cell *matHeaderCellDef> ID </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.id}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"encrypted\">\n            <th mat-header-cell *matHeaderCellDef style=\"text-align: center;\"> Encrypted </th>\n            <td mat-cell *matCellDef=\"let element\" style=\"text-align: center;\">\n              <ng-container *ngIf=\"element.options.encrypted; else NO\">YES</ng-container>\n              <ng-template #NO><span style=\"color:gray\">NO</span></ng-template>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"expires\">\n            <th mat-header-cell *matHeaderCellDef style=\"text-align: center;\"> Expires </th>\n            <td mat-cell *matCellDef=\"let element\" style=\"text-align: center;\">\n              <ng-container *ngIf=\"element.options.expires !== 0; else NO_DATA\">\n                {{expiresIn(element.options.expires)}}\n              </ng-container>\n              <ng-template #NO_DATA>\n                \u221E\n              </ng-template>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"option\">\n            <th mat-header-cell *matHeaderCellDef></th>\n            <td mat-cell *matCellDef=\"let element\" style=\"padding-right: 0;\">\n              <div style=\"display: flex;justify-content: flex-end;\">\n                <button mat-icon-button color=\"warn\" (click)=\"onDelete(element); $event.stopPropagation()\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </div>\n            </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" (click)=\"onSelectedRow(row)\"></tr>\n        </table>\n      </ng-container>\n\n      <ng-template #NO_DATA>\n        <h3 style=\"margin-top: 1rem;\">No Data</h3>\n      </ng-template>\n\n  <div *ngIf=\"storeSelected() as selectedStore\" style=\"margin-top: 2rem;\">\n        <div style=\"margin-bottom: 1rem;\">\n          <mat-divider></mat-divider>\n        </div>\n\n  <h3>STORE: <span style=\"font-weight: bold;\">{{ selectedStore.name | uppercase }}</span></h3>\n  <h3>SETTINGS: {{ localStorageManagerService.setting(selectedStore.name) ? (localStorageManagerService.setting(selectedStore.name)() | json) : '{}' }}</h3>\n        <div style=\"display: flex;\">\n          <mat-form-field appearance=\"outline\" style=\"flex: 1;\">\n            <mat-label>Data (Must be an Object or Array of any)</mat-label>\n            <textarea matInput placeholder=\"[]\" #json [value]=\"selectedStoreData()\"></textarea>\n          </mat-form-field>\n        </div>\n        <mat-error *ngIf=\"!isValidJSON(json.value)\">Not Valid Data</mat-error>\n\n        <div style=\"display: flex; gap: .5rem;\">\n          <span style=\"flex:1\"></span>\n          <button mat-stroked-button (click)=\"onCancel()\">Cancel</button>\n          <button mat-stroked-button (click)=\"onUpdate(selectedStore, json.value)\" [disabled]=\"!(isValidJSON(json.value))\">Update</button>\n        </div>\n      </div>\n    </div>\n\n  </ng-template>\n\n  <div style=\"margin-top: 1rem;\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 1rem;\">\n    <button mat-stroked-button (click)=\"onReset()\">Delete All Stores</button>\n  </div>\n\n</div>\n\n\n<mat-menu #menu=\"matMenu\">\n  <div style=\"padding: 1rem;\">\n    <p>Please note that the LocalStorage (encryption) and management of data is dependant on initializing the APP_ID</p>\n    <p>Must provide a value for <b>APP_ID</b> in AppModule->Providers</p>\n    <mat-divider></mat-divider>\n  <div style=\"font-size: smaller; margin-top: .5rem;\">\n    <p>Example: UUID (self.crypto.randomUUID() to generate)</p>\n    <div style=\"background-color: whitesmoke; padding: 1rem;\">\n      &#123;<br>\n        provide: APP_ID,<br>\n        useValue: \"056991ac-3537-43ab-b5b9-83edf6554eff\",<br>\n      &#125;\n    </div>\n  </div>\n  </div>\n</mat-menu>\n", styles: [".mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor}.demo-row-is-clicked{font-weight:700}.mat-mdc-menu-panel.mat-mdc-menu-panel{max-width:280px!important}\n"] }]
+        }], ctorParameters: () => [{ type: ConfigOptions, decorators: [{
+                    type: Inject,
+                    args: [CONFIG_SETTINGS_TOKEN]
+                }] }] });
+
 class HttpRequestServicesDemoComponent {
     constructor(configOptions) {
         this.configOptions = configOptions;
         this.requestTypes = [
             { name: "Http Service", value: 'http_service' },
+            { name: "Http Signals Service", value: 'http-signals_service' },
             { name: "Http State Service", value: 'http_state_service' },
             { name: "Database Service", value: 'database_service', divider: true, disabled: true },
             { name: "Local Storage Service", value: 'local_storage_service' },
+            { name: "Local Signals Storage Service", value: 'local_storage_signals_service' },
         ];
         this.selectedService = this.requestTypes[0].value;
     }
@@ -2910,11 +3384,11 @@ class HttpRequestServicesDemoComponent {
         this.selectedService = this.requestTypes[type].value;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HttpRequestServicesDemoComponent, deps: [{ token: CONFIG_SETTINGS_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: HttpRequestServicesDemoComponent, selector: "app-http-request-services-demo", ngImport: i0, template: "<mat-toolbar  style=\"display:flex\">\n  <div>Http Request Manager Services</div>\n  <div style=\"flex:1\"></div>\n  <button mat-stroked-button [matMenuTriggerFor]=\"menu\">Services</button>\n  <mat-menu #menu=\"matMenu\">\n    <ng-container *ngFor=\"let type of requestTypes; index as i\">\n      <div\n        *ngIf=\"type?.divider\"\n        style=\"margin-top: .5rem; margin-bottom: .5rem;\"\n      >\n        <mat-divider></mat-divider>\n      </div>\n      <button\n        mat-menu-item\n        (click)=\"onSelected(i)\"\n        [disabled]=\"type.disabled\"\n        >\n        {{ type.name }}\n      </button>\n    </ng-container>\n\n  </mat-menu>\n</mat-toolbar>\n\n<span [ngSwitch]=\"selectedService\">\n  <p *ngSwitchCase=\"'http_service'\">\n    <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n    <app-request-manager-demo></app-request-manager-demo>\n  </p>\n  <p *ngSwitchCase=\"'http_state_service'\">\n    <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n    <app-request-manager-state-demo></app-request-manager-state-demo>\n  </p>\n  <p *ngSwitchCase=\"'database_service'\">\n    <!-- <app-database-data-demo></app-database-data-demo> -->\n  </p>\n  <p *ngSwitchCase=\"'local_storage_service'\">\n    <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n    <app-local-storage-demo></app-local-storage-demo>\n  </p>\n  <p *ngSwitchDefault>\n    Other\n  </p>\n</span>\n\n<ng-template #HTTP_OPTIONS>\n  <ng-container *ngIf=\"injectionOptions?.httpRequestOptions\">\n    <div class=\"box\">\n      <h3 style=\"font-weight: bold;\">Injection Token Detected - HTTP Options</h3>\n      {{ injectionOptions?.httpRequestOptions| json }}\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #LOCAL_OPTIONS>\n  <ng-container class=\"box\" *ngIf=\"injectionOptions?.LocalStorageOptions\">\n    <div class=\"box\">\n      <h3 style=\"font-weight: bold;\">Injection Token Detected - LocalStorage Options</h3>\n      {{ injectionOptions?.LocalStorageOptions| json }}\n    </div>\n  </ng-container>\n</ng-template>\n\n\n", styles: [".box{padding:1rem;background-color:#f5f5f5;border:thin gray solid;margin-top:1rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i12.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i5$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: RequestManagerStateDemoComponent, selector: "app-request-manager-state-demo" }, { kind: "component", type: RequestManagerDemoComponent, selector: "app-request-manager-demo" }, { kind: "component", type: LocalStorageDemoComponent, selector: "app-local-storage-demo" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: HttpRequestServicesDemoComponent, selector: "app-http-request-services-demo", ngImport: i0, template: "<mat-toolbar  style=\"display:flex\">\n  <div>Http Request Manager Services</div>\n  <div style=\"flex:1\"></div>\n  <button mat-stroked-button [matMenuTriggerFor]=\"menu\">Services</button>\n  <mat-menu #menu=\"matMenu\">\n    <ng-container *ngFor=\"let type of requestTypes; index as i\">\n      <div\n        *ngIf=\"type?.divider\"\n        style=\"margin-top: .5rem; margin-bottom: .5rem;\"\n      >\n        <mat-divider></mat-divider>\n      </div>\n      <button\n        mat-menu-item\n        (click)=\"onSelected(i)\"\n        [disabled]=\"type.disabled\"\n        >\n        {{ type.name }}\n      </button>\n    </ng-container>\n\n  </mat-menu>\n</mat-toolbar>\n\n<span [ngSwitch]=\"selectedService\">\n  <p *ngSwitchCase=\"'http_service'\">\n    <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n    <app-request-manager-demo></app-request-manager-demo>\n  </p>\n  <p *ngSwitchCase=\"'http_signals_service'\">\n    <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n    <!-- <app-request-signals-manager-demo></app-request-signals-manager-demo> -->\n  </p>\n  <p *ngSwitchCase=\"'http_state_service'\">\n    <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n    <app-request-manager-state-demo></app-request-manager-state-demo>\n  </p>\n  <p *ngSwitchCase=\"'database_service'\">\n    <!-- <app-database-data-demo></app-database-data-demo> -->\n  </p>\n  <p *ngSwitchCase=\"'local_storage_service'\">\n    <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n    <app-local-storage-demo></app-local-storage-demo>\n  </p>\n  <p *ngSwitchCase=\"'local_storage_signals_service'\">\n    <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n    <app-local-storage-signals-demo></app-local-storage-signals-demo>\n  </p>\n  <p *ngSwitchDefault>\n    Other\n  </p>\n</span>\n\n<ng-template #HTTP_OPTIONS>\n  <ng-container *ngIf=\"injectionOptions?.httpRequestOptions\">\n    <div class=\"box\">\n      <h3 style=\"font-weight: bold;\">Injection Token Detected - HTTP Options</h3>\n      {{ injectionOptions?.httpRequestOptions| json }}\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #LOCAL_OPTIONS>\n  <ng-container class=\"box\" *ngIf=\"injectionOptions?.LocalStorageOptions\">\n    <div class=\"box\">\n      <h3 style=\"font-weight: bold;\">Injection Token Detected - LocalStorage Options</h3>\n      {{ injectionOptions?.LocalStorageOptions| json }}\n    </div>\n  </ng-container>\n</ng-template>\n\n\n", styles: [".box{padding:1rem;background-color:#f5f5f5;border:thin gray solid;margin-top:1rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i12.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i5$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: RequestManagerStateDemoComponent, selector: "app-request-manager-state-demo" }, { kind: "component", type: RequestManagerDemoComponent, selector: "app-request-manager-demo" }, { kind: "component", type: LocalStorageDemoComponent, selector: "app-local-storage-demo" }, { kind: "component", type: LocalStorageSignalsDemoComponent, selector: "app-local-storage-signals-demo" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HttpRequestServicesDemoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-http-request-services-demo', template: "<mat-toolbar  style=\"display:flex\">\n  <div>Http Request Manager Services</div>\n  <div style=\"flex:1\"></div>\n  <button mat-stroked-button [matMenuTriggerFor]=\"menu\">Services</button>\n  <mat-menu #menu=\"matMenu\">\n    <ng-container *ngFor=\"let type of requestTypes; index as i\">\n      <div\n        *ngIf=\"type?.divider\"\n        style=\"margin-top: .5rem; margin-bottom: .5rem;\"\n      >\n        <mat-divider></mat-divider>\n      </div>\n      <button\n        mat-menu-item\n        (click)=\"onSelected(i)\"\n        [disabled]=\"type.disabled\"\n        >\n        {{ type.name }}\n      </button>\n    </ng-container>\n\n  </mat-menu>\n</mat-toolbar>\n\n<span [ngSwitch]=\"selectedService\">\n  <p *ngSwitchCase=\"'http_service'\">\n    <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n    <app-request-manager-demo></app-request-manager-demo>\n  </p>\n  <p *ngSwitchCase=\"'http_state_service'\">\n    <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n    <app-request-manager-state-demo></app-request-manager-state-demo>\n  </p>\n  <p *ngSwitchCase=\"'database_service'\">\n    <!-- <app-database-data-demo></app-database-data-demo> -->\n  </p>\n  <p *ngSwitchCase=\"'local_storage_service'\">\n    <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n    <app-local-storage-demo></app-local-storage-demo>\n  </p>\n  <p *ngSwitchDefault>\n    Other\n  </p>\n</span>\n\n<ng-template #HTTP_OPTIONS>\n  <ng-container *ngIf=\"injectionOptions?.httpRequestOptions\">\n    <div class=\"box\">\n      <h3 style=\"font-weight: bold;\">Injection Token Detected - HTTP Options</h3>\n      {{ injectionOptions?.httpRequestOptions| json }}\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #LOCAL_OPTIONS>\n  <ng-container class=\"box\" *ngIf=\"injectionOptions?.LocalStorageOptions\">\n    <div class=\"box\">\n      <h3 style=\"font-weight: bold;\">Injection Token Detected - LocalStorage Options</h3>\n      {{ injectionOptions?.LocalStorageOptions| json }}\n    </div>\n  </ng-container>\n</ng-template>\n\n\n", styles: [".box{padding:1rem;background-color:#f5f5f5;border:thin gray solid;margin-top:1rem}\n"] }]
+            args: [{ selector: 'app-http-request-services-demo', template: "<mat-toolbar  style=\"display:flex\">\n  <div>Http Request Manager Services</div>\n  <div style=\"flex:1\"></div>\n  <button mat-stroked-button [matMenuTriggerFor]=\"menu\">Services</button>\n  <mat-menu #menu=\"matMenu\">\n    <ng-container *ngFor=\"let type of requestTypes; index as i\">\n      <div\n        *ngIf=\"type?.divider\"\n        style=\"margin-top: .5rem; margin-bottom: .5rem;\"\n      >\n        <mat-divider></mat-divider>\n      </div>\n      <button\n        mat-menu-item\n        (click)=\"onSelected(i)\"\n        [disabled]=\"type.disabled\"\n        >\n        {{ type.name }}\n      </button>\n    </ng-container>\n\n  </mat-menu>\n</mat-toolbar>\n\n<span [ngSwitch]=\"selectedService\">\n  <p *ngSwitchCase=\"'http_service'\">\n    <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n    <app-request-manager-demo></app-request-manager-demo>\n  </p>\n  <p *ngSwitchCase=\"'http_signals_service'\">\n    <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n    <!-- <app-request-signals-manager-demo></app-request-signals-manager-demo> -->\n  </p>\n  <p *ngSwitchCase=\"'http_state_service'\">\n    <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n    <app-request-manager-state-demo></app-request-manager-state-demo>\n  </p>\n  <p *ngSwitchCase=\"'database_service'\">\n    <!-- <app-database-data-demo></app-database-data-demo> -->\n  </p>\n  <p *ngSwitchCase=\"'local_storage_service'\">\n    <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n    <app-local-storage-demo></app-local-storage-demo>\n  </p>\n  <p *ngSwitchCase=\"'local_storage_signals_service'\">\n    <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n    <app-local-storage-signals-demo></app-local-storage-signals-demo>\n  </p>\n  <p *ngSwitchDefault>\n    Other\n  </p>\n</span>\n\n<ng-template #HTTP_OPTIONS>\n  <ng-container *ngIf=\"injectionOptions?.httpRequestOptions\">\n    <div class=\"box\">\n      <h3 style=\"font-weight: bold;\">Injection Token Detected - HTTP Options</h3>\n      {{ injectionOptions?.httpRequestOptions| json }}\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #LOCAL_OPTIONS>\n  <ng-container class=\"box\" *ngIf=\"injectionOptions?.LocalStorageOptions\">\n    <div class=\"box\">\n      <h3 style=\"font-weight: bold;\">Injection Token Detected - LocalStorage Options</h3>\n      {{ injectionOptions?.LocalStorageOptions| json }}\n    </div>\n  </ng-container>\n</ng-template>\n\n\n", styles: [".box{padding:1rem;background-color:#f5f5f5;border:thin gray solid;margin-top:1rem}\n"] }]
         }], ctorParameters: () => [{ type: ConfigOptions, decorators: [{
                     type: Inject,
                     args: [CONFIG_SETTINGS_TOKEN]
@@ -2993,9 +3467,8 @@ class HttpRequestManagerModule {
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: HttpRequestManagerModule, declarations: [HttpRequestServicesDemoComponent,
             RequestManagerStateDemoComponent,
             RequestManagerDemoComponent,
-            LocalStorageDemoComponent
-            // DatabaseDataDemoComponent,
-        ], imports: [CommonModule,
+            LocalStorageDemoComponent,
+            LocalStorageSignalsDemoComponent], imports: [CommonModule,
             ToastMessageDisplayModule,
             FormsModule,
             ReactiveFormsModule,
@@ -3014,7 +3487,19 @@ class HttpRequestManagerModule {
             MatInputModule,
             MatToolbarModule,
             MatSlideToggleModule, i1.TranslateModule, MatSidenavModule,
-            FileDownloaderModule], exports: [HttpRequestServicesDemoComponent] }); }
+            FileDownloaderModule], exports: [HttpRequestServicesDemoComponent,
+            // Re-export commonly used modules so demo component templates have access to
+            // Angular common pipes and Material components when the library is imported.
+            CommonModule,
+            MatButtonToggleModule,
+            MatFormFieldModule,
+            MatSelectModule,
+            MatInputModule,
+            MatIconModule,
+            MatTableModule,
+            MatSlideToggleModule,
+            MatProgressBarModule,
+            MatDividerModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HttpRequestManagerModule, providers: [
             { provide: HTTP_INTERCEPTORS, useClass: WithCredentialsInterceptor, multi: true },
             { provide: HTTP_INTERCEPTORS, useClass: RequestHeadersInterceptor, multi: true },
@@ -3042,7 +3527,19 @@ class HttpRequestManagerModule {
             MatSlideToggleModule,
             TranslateModule.forRoot(),
             MatSidenavModule,
-            FileDownloaderModule] }); }
+            FileDownloaderModule, 
+            // Re-export commonly used modules so demo component templates have access to
+            // Angular common pipes and Material components when the library is imported.
+            CommonModule,
+            MatButtonToggleModule,
+            MatFormFieldModule,
+            MatSelectModule,
+            MatInputModule,
+            MatIconModule,
+            MatTableModule,
+            MatSlideToggleModule,
+            MatProgressBarModule,
+            MatDividerModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HttpRequestManagerModule, decorators: [{
             type: NgModule,
@@ -3075,11 +3572,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         HttpRequestServicesDemoComponent,
                         RequestManagerStateDemoComponent,
                         RequestManagerDemoComponent,
-                        LocalStorageDemoComponent
+                        LocalStorageDemoComponent,
+                        LocalStorageSignalsDemoComponent,
                         // DatabaseDataDemoComponent,
                     ],
                     exports: [
                         HttpRequestServicesDemoComponent,
+                        // Re-export commonly used modules so demo component templates have access to
+                        // Angular common pipes and Material components when the library is imported.
+                        CommonModule,
+                        MatButtonToggleModule,
+                        MatFormFieldModule,
+                        MatSelectModule,
+                        MatInputModule,
+                        MatIconModule,
+                        MatTableModule,
+                        MatSlideToggleModule,
+                        MatProgressBarModule,
+                        MatDividerModule,
                     ],
                     providers: [
                         { provide: HTTP_INTERCEPTORS, useClass: WithCredentialsInterceptor, multi: true },
@@ -3440,5 +3950,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ApiRequest, AppService, AsymmetricalEncryptionService, ConfigHTTPOptions, ConfigOptions, DataType, DatabaseDataDemoComponent, DatabaseStorage, ErrorDisplaySettings, GlobalStoreOptions, HTTPManagerService, HTTPManagerStateService, HeadersService, HttpRequestManagerModule, HttpRequestServicesDemoComponent, LocalStorageDemoComponent, LocalStorageManagerService, LocalStorageOptions, PathQueryService, Random, RandomNumber, RandomNumbers, RandomNumbersUnique, RandomSignature, RandomStr, RequestErrorInterceptor, RequestHeadersInterceptor, RequestManagerDemoComponent, RequestManagerStateDemoComponent, RequestOptions, RetryOptions, SettingOptions, StorageData, StorageOption, StorageType, SymmetricalEncryptionService, UUID, UtilsService, WithCredentialsInterceptor, countdown, delayedRetry, requestPolling, requestStreaming };
+export { ApiRequest, AppService, AsymmetricalEncryptionService, ConfigHTTPOptions, ConfigOptions, DataType, DatabaseDataDemoComponent, DatabaseStorage, ErrorDisplaySettings, GlobalStoreOptions, HTTPManagerService, HTTPManagerStateService, HeadersService, HttpRequestManagerModule, HttpRequestServicesDemoComponent, LocalStorageDemoComponent, LocalStorageManagerService, LocalStorageOptions, LocalStorageSignalsManagerService, PathQueryService, Random, RandomNumber, RandomNumbers, RandomNumbersUnique, RandomSignature, RandomStr, RequestErrorInterceptor, RequestHeadersInterceptor, RequestManagerDemoComponent, RequestManagerStateDemoComponent, RequestOptions, RetryOptions, SettingOptions, StorageData, StorageOption, StorageType, SymmetricalEncryptionService, UUID, UtilsService, WithCredentialsInterceptor, countdown, delayedRetry, requestPolling, requestStreaming };
 //# sourceMappingURL=http-request-manager.mjs.map