http-request-manager 0.0.20 → 4.1.2

package/fesm2022/http-request-manager.mjs

@@ -1,13 +1,47 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, APP_ID, Inject, Injector, InjectionToken } from '@angular/core';
+import { inject, Injectable, APP_ID, Inject, InjectionToken, Injector, Optional, EventEmitter, Component, ViewEncapsulation, Input, Output, NgModule, ViewChild } from '@angular/core';
 import { ComponentStore } from '@ngrx/component-store';
-import { withLatestFrom, map, tap, catchError, filter, finalize, takeWhile, retryWhen, delay, mergeMap, startWith, takeUntil, switchMap, concatMap, scan, expand } from 'rxjs/operators';
-import { HttpClient, HttpHeaders, HttpEventType, HttpErrorResponse } from '@angular/common/http';
+import { map, catchError, filter, finalize, takeWhile, retry, startWith, tap, mergeMap, takeUntil, withLatestFrom, switchMap, concatMap, scan, distinctUntilChanged } from 'rxjs/operators';
+import { HttpClient, HttpHeaders, HttpEventType, HttpErrorResponse, HTTP_INTERCEPTORS } from '@angular/common/http';
 import * as CryptoJS from 'crypto-js';
-import { interval, from, BehaviorSubject, EMPTY, defer, of, throwError, Subject, Subscription, catchError as catchError$1 } from 'rxjs';
-import { ToastDisplay, ToastColors, ToastMessageService as ToastMessageService$1 } from 'toast-message';
-import { ToastMessageService } from 'toast-message-display';
+import { from, BehaviorSubject, EMPTY, throwError, defer, interval, timer, Subject, of, Subscription, catchError as catchError$1 } from 'rxjs';
+import { ToastMessageService, ToastDisplay, ToastColors, ToastMessageModule } from 'toast-message-display';
 import * as i1 from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
+import * as i1$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2 from '@angular/forms';
+import { FormBuilder, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import * as i3$1 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import { MatChipsModule } from '@angular/material/chips';
+import * as i11 from '@angular/material/divider';
+import { MatDividerModule } from '@angular/material/divider';
+import * as i4 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i7 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i12 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i9 from '@angular/material/progress-bar';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import * as i5 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import * as i10$1 from '@angular/material/slide-toggle';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import * as i3$2 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import * as i4$1 from '@angular/material/toolbar';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import * as i8 from '@angular/material/table';
+import { MatTableModule } from '@angular/material/table';
+import * as i10 from '@angular/material/button-toggle';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import * as i3 from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import * as i6 from '@angular/material/core';
 
 var StorageType;
 (function (StorageType) {
@@ -16,15 +50,15 @@ var StorageType;
     StorageType[StorageType["DB"] = 2] = "DB";
 })(StorageType || (StorageType = {}));
 
-class StorageOptionSettings {
-    constructor(storage = StorageType.GLOBAL, expires, expiresIn, encrypted) {
+class SettingOptions {
+    constructor(storage, expires, expiresIn, encrypted) {
         this.storage = storage;
         this.expires = expires;
         this.expiresIn = expiresIn;
         this.encrypted = encrypted;
     }
     static adapt(item) {
-        return new StorageOptionSettings((item?.storage) ? item.storage : StorageType.GLOBAL, (item?.expires) ? item.expires : 0, (item?.expiresIn) ? item.expiresIn : '', (item?.encrypted) ? item.encrypted : false);
+        return new SettingOptions((item?.storage) ? item.storage : StorageType.GLOBAL, (item?.expires) ? item.expires : 0, (item?.expiresIn) ? item.expiresIn : '', (item?.encrypted) ? item?.encrypted : false);
     }
 }
 
@@ -35,7 +69,7 @@ class StorageOption {
         this.options = options;
     }
     static adapt(item) {
-        return new StorageOption((item?.id) ? item.id : crypto.randomUUID(), item?.name, (item?.options) ? StorageOptionSettings.adapt(item.options) : StorageOptionSettings.adapt());
+        return new StorageOption((item?.id) ? item.id : crypto.randomUUID(), item?.name, (item?.options) ? SettingOptions.adapt(item.options) : SettingOptions.adapt());
     }
 }
 
@@ -51,18 +85,6 @@ class GlobalStoreOptions {
     }
 }
 
-class SettingOptions {
-    constructor(storage = StorageType.GLOBAL, expires, expiresIn, encrypted) {
-        this.storage = storage;
-        this.expires = expires;
-        this.expiresIn = expiresIn;
-        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);
-    }
-}
-
 class StorageData {
     constructor(id, data) {
         this.id = id;
@@ -140,6 +162,7 @@ class UtilsService {
         return hex.padStart(32, '0').substr(0, 32);
     }
     // y = years, m = months, w = weeks, d = days, hr = hours, mn = minutes else seconds
+    // returns epoch time corresponding to the expiry type
     expires(str) {
         if (!str)
             return;
@@ -192,7 +215,27 @@ class UtilsService {
         if (!expiryDate)
             return;
         const now = Math.floor(new Date().getTime() / 1000);
-        return expiryDate - now;
+        let diff = expiryDate - now;
+        if (diff <= 0)
+            return "Expired";
+        const units = [
+            { label: 'y', seconds: 31536000 },
+            { label: 'm', seconds: 2592000 },
+            { label: 'w', seconds: 604800 },
+            { label: 'd', seconds: 86400 },
+            { label: 'h', seconds: 3600 },
+            { label: 'min', seconds: 60 },
+            { label: '', seconds: 1 },
+        ];
+        let result = [];
+        for (const unit of units) {
+            if (diff >= unit.seconds) {
+                const value = Math.floor(diff / unit.seconds);
+                diff %= unit.seconds;
+                result.push(`${value}${unit.label}${value > 1 ? 's' : ''}`);
+            }
+        }
+        return result.join(', ');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UtilsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UtilsService, providedIn: 'root' }); }
@@ -256,6 +299,12 @@ const UUID = () => {
     return self.crypto.randomUUID();
 };
 
+// Must provide a value for APP_ID in AppModule->Providers
+// providers: [
+//   {
+//     provide: APP_ID,
+//     useValue: "056991ac-3537-43ab-b5b9-83edf6554eff",
+//   },
 class AppService {
     constructor(id) {
         this.id = id;
@@ -379,273 +428,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }], ctorParameters: function () { return []; } });
 
-const storage = {
-    localStores: [],
-    sessionStores: [],
-    settings: [],
-};
-class LocalStorageManagerService extends ComponentStore {
-    startTimer() {
-        const timer$ = interval(1000 * 3).pipe(withLatestFrom(this.data$), map(([_, state]) => state), tap((state) => {
-            const expired = this.expired(state) ? this.expired(state) : [];
-            if (expired.length > 0) {
-                const ids = expired.map((item) => item.id);
-                const updatedState = {
-                    ...state,
-                    localStores: state.localStores.filter((item) => !ids.includes(item.id)),
-                    sessionStores: state.sessionStores.filter((item) => !ids.includes(item.id)),
-                    settings: state.settings.filter((item) => !ids.includes(item.id)),
-                };
-                this.persistState(updatedState);
-                this.updateState(updatedState);
-            }
-        }));
-        timer$.subscribe();
-    }
-    constructor() {
-        super(storage);
-        this.storageName = 'storage';
-        this.storageSettingsName = 'global-storage';
-        this.stateRetrieved = false;
-        this.encrypted = false;
-        this.app = inject(AppService);
-        this.utils = inject(UtilsService);
-        this.encryption = inject(SymmetricalEncryptionService);
-        this.encryptionTest = inject(EncryptionTestService);
-        // SELECTORS
-        this.data$ = this.select((state) => state);
-        this.stores$ = this.select((state) => state.settings);
-        this.storeExists$ = (store) => this.select(this.data$, (data) => data.settings.find(item => item.name === store) ? true : false);
-        this.store$ = (store) => this.select(this.data$, (data) => {
-            const foundStore = data.settings.find(item => item.name === store);
-            if (foundStore) {
-                const options = SettingOptions.adapt(foundStore.options);
-                const found = foundStore.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;
-                }
-                const storageData = (options.encrypted) ? this.encryption.decrypt(found.data, this.app.appID) : found.data;
-                return (this.isString(storageData)) ? JSON.parse(storageData) : storageData;
-            }
-            else {
-                return null;
-            }
-        });
-        this.settings$ = this.select((state) => state.settings);
-        this.setting$ = (store) => this.select(this.data$, (state) => {
-            const foundSetting = state.settings.find(item => item.name === store);
-            return (foundSetting) ? foundSetting : null;
-        });
-        this.persistence$ = this.data$
-            .subscribe(data => {
-            if (this.stateRetrieved)
-                this.persistState(data);
-        });
-        this.updateState = this.updater((state, updatedState) => ({
-            ...updatedState,
-        }));
-        this.setStore = this.updater((state, store) => {
-            const settings = StorageOption.adapt(store);
-            const type = store.options.storage;
-            const hasStore = this.hasGlobalStorage(type, store.id);
-            store.name = this.validStoreName(store.name);
-            if (!hasStore) {
-                console.warn(`No such Store: ${store.name}`);
-                return state;
-            }
-            else {
-                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 : 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]],
-                };
-            }
-        });
-        this.createStore = this.updater((state, store) => {
-            const settings = StorageOption.adapt(store);
-            const foundStore = state?.settings.some(item => item.name === store.name);
-            const expires = (settings.options?.expiresIn) ? this.utils.expires(settings.options?.expiresIn) : 0;
-            if (settings.options)
-                settings.options.expires = expires;
-            store.name = this.validStoreName(store.name);
-            if (foundStore) {
-                return state;
-            }
-            else {
-                if (!this.isObjectOrArray(store.data)) {
-                    console.warn('Data must ba an Object or Array');
-                    return;
-                }
-                store.data = (this.isString(store.data)) ? JSON.parse(store.data) : store.data;
-                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]],
-                };
-            }
-        });
-        this.updateStore = this.updater((state, store) => {
-            store.name = this.validStoreName(store.name);
-            const settings = state.settings.find(item => item.name === store.name);
-            if (settings) {
-                const type = settings.options?.storage;
-                const hasStore = this.hasGlobalStorage(type, settings.id || '');
-                if (!hasStore) {
-                    console.warn(`No such Store: ${store.name}`);
-                }
-                else {
-                    const dataStr = (settings.options?.encrypted) ? this.encryption.encrypt(store.data, 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 }] : [];
-                    state.localStores = state.localStores.filter(item => item.id !== settings.id);
-                    state.sessionStores = state.sessionStores.filter(item => item.id !== settings.id);
-                    return {
-                        ...state,
-                        localStores: [...state.localStores, ...localData],
-                        sessionStores: [...state.sessionStores, ...sessionData],
-                    };
+/**
+ * An injection token that provides the configuration settings for the application.
+ * This token can be used to inject the `ConfigSettings` instance into components or services
+ * that require access to the application configuration.
+ */
+const CONFIG_SETTINGS_TOKEN = new InjectionToken('http.config');
+
+class ObjectMergerService {
+    mergeOptions(options, configForRoot) {
+        const merged = configForRoot ? { ...configForRoot } : {};
+        for (const key in options) {
+            if (Object.prototype.hasOwnProperty.call(options, key)) {
+                const value = options[key];
+                if (value !== null &&
+                    value !== undefined &&
+                    !(typeof value === 'number') &&
+                    !(typeof value === 'boolean') &&
+                    !(this.isNonEmptyString(value)) &&
+                    !(Array.isArray(value) && value.length === 0) &&
+                    !(typeof value === 'object' && !Array.isArray(value))) {
+                    merged[key] = value;
                 }
             }
-            return state;
-        });
-        this.deleteStore = this.updater((state, store) => {
-            store.name = this.validStoreName(store.name);
-            const id = state.settings.find(item => item.name === store.name)?.id;
-            if (id) {
-                const settings = state.settings.filter(item => item.id !== id);
-                const localData = state.localStores.filter(item => item.id !== id);
-                const sessionData = state.sessionStores.filter(item => item.id !== id);
-                return {
-                    ...state,
-                    localStores: [...localData],
-                    sessionStores: [...sessionData],
-                    settings: [...settings],
-                };
-            }
-            else {
-                console.warn(`No such Store: ${store.name}`);
-                return state;
-            }
-        });
-        this.isObjectOrArray = (obj) => {
-            try {
-                //obj = (Object.prototype.toString.call(obj) === '[object Object]') ? JSON.parse(obj) : obj
-                return typeof obj === 'object' || Array.isArray(obj);
-            }
-            catch (error) {
-                return false;
-            }
-        };
-        this.retrieveState();
-        this.startTimer();
+        }
+        return merged;
     }
-    resetStore() {
-        const newState = {
-            localStores: [],
-            sessionStores: [],
-            settings: [],
-        };
-        this.updateState(newState);
-        this.persistState(newState);
+    isNonEmptyString(value) {
+        return typeof value === 'string' && value.length === 0;
     }
-    persistState(state) {
-        if (!state)
-            return;
-        const strLocal = JSON.stringify(state.localStores);
-        localStorage.setItem(this.storageName, strLocal);
-        const strSession = JSON.stringify(state.sessionStores);
-        sessionStorage.setItem(this.storageName, strSession);
-        const settingsStr = this.encryption.encrypt(state.settings, this.app.appID);
-        localStorage.setItem(this.storageSettingsName, settingsStr || '');
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ObjectMergerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ObjectMergerService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ObjectMergerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class ApiRequest {
+    constructor(server = '', path = [], headers = {}, adapter, mapper, polling, retry = RetryOptions.adapt(), stream = false, displayError = false) {
+        this.server = server;
+        this.path = path;
+        this.headers = headers;
+        this.adapter = adapter;
+        this.mapper = mapper;
+        this.polling = polling;
+        this.retry = retry;
+        this.stream = stream;
+        this.displayError = displayError;
     }
-    expired(state) {
-        if (!state)
-            return [];
-        return state.settings?.filter(item => (item.options?.expires || 0) > 0 && this.utils.hasExpired(item.options?.expires || 0));
+    static adapt(item) {
+        const server = Array.isArray(item?.server) ? item.server.join('/') : item?.server || '';
+        const retryOptions = item?.retry ? RetryOptions.adapt(item.retry) : RetryOptions.adapt();
+        return new ApiRequest(server, item?.path, (item?.headers) ? item.headers : {}, item?.adapter, item?.mapper, item?.polling ? Math.floor(item.polling) : 0, retryOptions, item?.stream, item?.displayError);
     }
-    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) : null;
-        const sessionData = (sessionStr) ? JSON.parse(sessionStr) : null;
-        const decryptedStr = str ? this.encryption.decrypt(str, this.app.appID) : null;
-        const settings = (decryptedStr && decryptedStr !== null) ? JSON.parse(decryptedStr) : [];
-        settings.forEach(store => {
-            const expired = (store.options?.expires || 0) > 0 && this.utils.hasExpired(store.options?.expires || 0);
-            if (!expired) {
-                const hasStorage = this.hasGlobalStorage(store.options?.storage, store.id || '');
-                if (!hasStorage) {
-                    this.createStore({ id: store.id, name: store.name, data: [], options: SettingOptions.adapt(store.options) });
-                }
-                else {
-                    const storeData = (store.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: SettingOptions.adapt(store.options) });
-                }
-            }
-        });
-        this.stateRetrieved = true;
-    }
-    isString(obj) {
-        return (Object.prototype.toString.call(obj) === '[object String]');
-    }
-    fixAndParseJSON(jsonString) {
-        const fixedString = jsonString
-            .replace(/'/g, '"')
-            .replace(/([{,]\s*)(\w+)\s*:/g, '$1"$2":')
-            .replace(/,\s*(\}|\])/g, '$1');
-        try {
-            return JSON.parse(fixedString);
-        }
-        catch (error) {
-            throw new Error('Failed to parse JSON: ' + error.message);
-        }
-    }
-    validStoreName(str) {
-        return str
-            .toLowerCase() // Convert to lowercase
-            .replace(/\s+/g, '_') // Replace spaces with underscores
-            .replace(/[^ -~]/g, ''); // Remove non-ASCII characters
-    }
-    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) ? true : false;
-    }
-    ngOnDestroy() {
-        this.persistence$.unsubscribe();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalStorageManagerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalStorageManagerService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalStorageManagerService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return []; } });
-
-class HeadersService {
-    constructor() {
-        this.headers = {};
+}
+
+class HeadersService {
+    constructor() {
+        this.headers = {};
     }
     generateHeaders(headers) {
         const allHeaders = headers ? { ...this.headers, ...headers } : {};
@@ -681,6 +524,7 @@ class PathQueryService {
         return (Object.keys(query).length > 0) ? path + '?' + this.buildQueryPath(query) : path;
     }
     buildRestPath(server, params) {
+        server = (server) ? server : '';
         server = (server.charAt(0) === '/') ? server.substring(1) : server;
         return this.cleanUrlPath(server + '/' + params.join('/'));
     }
@@ -922,32 +766,32 @@ class RequestService {
         this.progress$ = this.progress.asObservable();
     }
     getRecordRequest(options) {
-        this.isPending.next(true);
         const urlPath = this.buildUrlPath(options);
         const headers = this.buildCombinedHeaders(options);
+        this.isPending.next(true);
         return (options.stream)
             ? this.http.get(urlPath, headers).pipe(requestStreaming(), this.handleFinalize())
-            : this.http.get(urlPath, headers).pipe(this.request(options), this.handleFinalize());
+            : this.http.get(urlPath, headers).pipe(this.request(options));
     }
     createRecordRequest(options, data) {
-        this.isPending.next(true);
         const urlPath = this.buildUrlPath(options);
         const headers = this.buildCombinedHeaders(options);
+        this.isPending.next(true);
         return (options.stream)
             ? this.http.post(urlPath, data, headers).pipe(requestStreaming(), this.handleFinalize())
-            : this.http.post(urlPath, data, headers).pipe(this.request(options), this.handleFinalize());
+            : this.http.post(urlPath, data, headers).pipe(this.request(options));
     }
     updateRecordRequest(options, data) {
-        this.isPending.next(true);
         const urlPath = this.buildUrlPath(options);
         const headers = this.buildHeaders(options);
-        return this.http.put(urlPath, data, headers).pipe(this.request(options), this.handleFinalize());
+        this.isPending.next(true);
+        return this.http.put(urlPath, data, headers).pipe(this.request(options));
     }
     deleteRecordRequest(options) {
-        this.isPending.next(true);
         const urlPath = this.buildUrlPath(options);
         const headers = this.buildHeaders(options);
-        return this.http.delete(urlPath, headers).pipe(this.handleFinalize());
+        this.isPending.next(true);
+        return this.http.delete(urlPath, headers).pipe(this.request(options));
     }
     // Helper functions
     buildUrlPath(options) {
@@ -957,13 +801,13 @@ class RequestService {
         return this.headersService.generateHeaders(options.headers);
     }
     buildCombinedHeaders(options) {
-        const headers = this.headersService.generateHeaders(options.headers);
-        return this.combineHeaders(headers, options.stream);
+        const headers = this.combineHeaders(options.headers, options.stream);
+        return this.headersService.generateHeaders(headers);
     }
     request(options) {
         return (source$) => {
             return source$.pipe(map(data => {
-                if (options.adapter) {
+                if (options?.adapter) {
                     return Array.isArray(data)
                         ? data.map((item) => options.adapter(item))
                         : options.adapter(data);
@@ -978,23 +822,62 @@ class RequestService {
         return this.http.get(urlPath, { responseType: 'blob', observe: 'events', reportProgress: true })
             .pipe(map((event) => {
             this.isPending.next(true);
+            const info = event;
             switch (event.type) {
                 case HttpEventType.DownloadProgress:
-                    const status = (event.total) ? Math.round(event.loaded / (event.total || 1) * 100) : 100;
-                    this.progress.next(status);
-                    return status;
+                    if (info.status !== 200) {
+                        this.isPending.next(false);
+                        throw new Error('Download failed');
+                        return 0;
+                    }
+                    else {
+                        const status = (event.total) ? Math.round(event.loaded / (event.total || 1) * 100) : 100;
+                        this.progress.next(status);
+                        return status;
+                    }
                 case HttpEventType.Response:
-                    const header_content = event.headers.get('Content-Disposition') || '';
-                    const file = header_content.split('=')[1].substring(0, header_content.split('=')[1].length);
-                    this.downloadFile(file, event.body);
-                    this.isPending.next(false);
-                    return 100;
+                    try {
+                        const header_content = event.headers.get('Content-Disposition') || '';
+                        const fd = this.fileDetails(options.path);
+                        if (!fd) {
+                            this.isPending.next(false);
+                            throw new Error('Save File: (file name and extension) not found in Headers or Path');
+                        }
+                        // checks if header_content is not empty and splits the header_content to get the file name
+                        // otherwise, it will use the fileDownload - contains the file name and extension
+                        const file = (header_content) ? header_content.split('=')[1].substring(0, header_content.split('=')[1].length) : `${fd.file}.${fd.ext}`;
+                        this.downloadFile(file, event.body);
+                        this.isPending.next(false);
+                        return 100;
+                    }
+                    catch (error) {
+                        throw new Error('Download failed');
+                    }
                 default:
                     this.isPending.next(false);
                     return 0;
             }
+        }), catchError(err => {
+            return throwError(() => err);
         }));
     }
+    fileDetails(path) {
+        const combinedPath = Array.isArray(path) ? path.join('/') : path;
+        if (!combinedPath || combinedPath.trim() === '') {
+            return;
+        }
+        const segments = combinedPath.split('/');
+        const fileNameWithExt = segments.pop() || '';
+        if (!fileNameWithExt.includes('.'))
+            return;
+        const dotIndex = fileNameWithExt.lastIndexOf('.');
+        if (fileNameWithExt.lastIndexOf('.') < 1)
+            return;
+        return {
+            file: fileNameWithExt.substring(0, dotIndex),
+            ext: fileNameWithExt.substring(dotIndex + 1),
+        };
+    }
     handleFinalize() {
         return finalize(() => this.isPending.next(false));
     }
@@ -1046,12 +929,15 @@ class RequestService {
         return fileType;
     }
     combineHeaders(headers, isStreaming) {
-        const options = {
-            observe: 'events',
-            responseType: 'text',
-            reportProgress: true,
-        };
-        return (isStreaming) ? { ...headers, ...options } : headers;
+        return (isStreaming) ?
+            {
+                ...headers,
+                observe: 'events',
+                responseType: 'text',
+                reportProgress: true,
+                Accept: 'text/event-stream'
+            }
+            : headers;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RequestService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RequestService, providedIn: 'root' }); }
@@ -1072,8 +958,10 @@ function countdown(duration) {
 
 const DEFAULT_MAX_RETRIES = 3;
 function delayedRetry(delayMs, maxRetry = DEFAULT_MAX_RETRIES) {
-    let retries = maxRetry;
-    return (src) => src.pipe(retryWhen((errors) => errors.pipe(delay(delayMs), mergeMap(error => retries-- > 0 ? of(error) : throwError(error)))));
+    return (src) => src.pipe(retry({
+        count: maxRetry,
+        delay: () => timer(delayMs)
+    }));
 }
 
 /**
@@ -1088,11 +976,78 @@ function requestPolling(pollInterval, stopCondition$, isPending$) {
     };
 }
 
+class DatabaseStorage {
+    constructor(table = '', expiresIn) {
+        this.table = table;
+        this.expiresIn = expiresIn;
+    }
+    static adapt(item) {
+        return new DatabaseStorage(item?.table, item?.expiresIn);
+    }
+}
+
+class RetryOptions {
+    constructor(times = 0, delay = 3) {
+        this.times = times;
+        this.delay = delay;
+    }
+    static adapt(item) {
+        return new RetryOptions(item?.times, item?.delay);
+    }
+}
+
+var DataType;
+(function (DataType) {
+    DataType[DataType["ANY"] = 0] = "ANY";
+    DataType[DataType["ARRAY"] = 1] = "ARRAY";
+    DataType[DataType["OBJECT"] = 2] = "OBJECT";
+})(DataType || (DataType = {}));
+
+class ConfigHTTPOptions {
+    constructor(server = '', path, headers, polling, retry, stream, displayError) {
+        this.server = server;
+        this.path = path;
+        this.headers = headers;
+        this.polling = polling;
+        this.retry = retry;
+        this.stream = stream;
+        this.displayError = displayError;
+    }
+    static adapt(item) {
+        const server = Array.isArray(item?.server) ? item.server.join('/') : item?.server || '';
+        const retryOptions = item?.retry ? RetryOptions.adapt(item.retry) : RetryOptions.adapt();
+        return new ConfigHTTPOptions(server, (item?.path) ? item.path : [], (item?.headers) ? item.headers : {}, item?.polling ? Math.floor(item.polling) : 0, retryOptions, (item?.stream) ? item.stream : false, (item?.displayError) ? item.displayError : false);
+    }
+}
+
+class LocalStorageOptions {
+    constructor(storageName, storageSettingsName, options) {
+        this.storageName = storageName;
+        this.storageSettingsName = storageSettingsName;
+        this.options = options;
+    }
+    static adapt(item) {
+        return new LocalStorageOptions((item?.storageName) ? item.storageName : 'storage', (item?.storageSettingsName) ? item.storageSettingsName : 'global-storage', (item?.options) ? SettingOptions.adapt(item.options) : SettingOptions.adapt());
+    }
+}
+
+class ConfigOptions {
+    constructor(httpRequestOptions, LocalStorageOptions) {
+        this.httpRequestOptions = httpRequestOptions;
+        this.LocalStorageOptions = LocalStorageOptions;
+    }
+    static adapt(item) {
+        return new ConfigOptions((item?.httpRequestOptions) ? ConfigHTTPOptions.adapt(item.httpRequestOptions) : undefined, (item?.LocalStorageOptions) ? LocalStorageOptions.adapt(item.LocalStorageOptions) : undefined);
+    }
+}
+
 class HTTPManagerService extends RequestService {
-    constructor() {
+    constructor(configOptions) {
         super();
+        this.configOptions = configOptions;
         this.toastMessage = inject(ToastMessageService);
         this.ng_injector = inject(Injector);
+        this.objectMergerService = inject(ObjectMergerService);
         this.countdown = new BehaviorSubject(0);
         this.countdown$ = this.countdown.asObservable();
         this.error = new BehaviorSubject(false);
@@ -1100,62 +1055,87 @@ class HTTPManagerService extends RequestService {
         this.data = new BehaviorSubject(null);
         this.data$ = this.data.asObservable();
         this.polling$ = new Subject();
+        this.config = ConfigOptions.adapt();
+        this.config = (configOptions) ? ConfigOptions.adapt(configOptions) : ConfigOptions.adapt();
     }
     // REQUESTS
     getRequest(options, params) {
+        this.isPending.next(true);
         this.data.next(null);
-        const updatedOptions = {
-            ...options,
-            path: params ? [...options.path, ...params] : options.path,
-        };
+        options = (options) ? options : ApiRequest.adapt();
+        const updatedOptions = this.objectMergerService.mergeOptions(options, this.config.httpRequestOptions);
         const func = this.getRecordRequest;
         const requests = this.createRequest(func, updatedOptions);
-        return this.createObservable(options, requests, func.name).pipe(tap(data => this.data.next(data)));
+        return this.createObservable(updatedOptions, requests, func.name).pipe(tap(data => this.data.next(data)))
+            .pipe(finalize(() => this.isPending.next(false)), catchError((err) => {
+            if (updatedOptions.displayError)
+                this.handleErrorWithSnackBar(err);
+            this.isPending.next(false);
+            return this.handleError(err);
+        }));
     }
     postRequest(data, options, params) {
+        this.isPending.next(true);
         this.data.next(null);
-        const updatedOptions = {
-            ...options,
-            path: params ? [...options.path, ...params] : options.path,
-        };
+        options = (options) ? options : ApiRequest.adapt();
+        const updatedOptions = this.objectMergerService.mergeOptions(options, this.config.httpRequestOptions);
         const func = this.createRecordRequest;
         const requests = this.createRequest(func, updatedOptions, data);
-        return this.createObservable(options, requests, func.name).pipe(tap(data => this.data.next(data)));
+        return this.createObservable(updatedOptions, requests, func.name).pipe(tap(data => this.data.next(data)))
+            .pipe(finalize(() => this.isPending.next(false)), catchError((err) => {
+            if (updatedOptions.displayError)
+                this.handleErrorWithSnackBar(err);
+            this.isPending.next(false);
+            return this.handleError(err);
+        }));
     }
     putRequest(data, options, params) {
+        this.isPending.next(true);
         this.data.next(null);
-        const updatedOptions = {
-            ...options,
-            path: params ? [...options.path, ...params] : options.path,
-        };
+        options = (options) ? options : ApiRequest.adapt();
+        const updatedOptions = this.objectMergerService.mergeOptions(options, this.config.httpRequestOptions);
         const func = this.updateRecordRequest;
         const requests = this.createRequest(func, updatedOptions, data);
-        return this.createObservable(options, requests, func.name).pipe(tap(data => this.data.next(data)));
+        return this.createObservable(updatedOptions, requests, func.name).pipe(tap(data => this.data.next(data)))
+            .pipe(finalize(() => this.isPending.next(false)), catchError((err) => {
+            if (updatedOptions.displayError)
+                this.handleErrorWithSnackBar(err);
+            this.isPending.next(false);
+            return this.handleError(err);
+        }));
     }
     deleteRequest(options, params) {
+        this.isPending.next(true);
         this.data.next(null);
-        const updatedOptions = {
-            ...options,
-            path: params ? [...options.path, ...params] : options.path,
-        };
+        options = (options) ? options : ApiRequest.adapt();
+        const updatedOptions = this.objectMergerService.mergeOptions(options, this.config.httpRequestOptions);
         const func = this.deleteRecordRequest;
         const requests = this.createRequest(func, updatedOptions);
-        return this.createObservable(options, requests, func.name).pipe(tap(data => this.data.next(data)));
+        return this.createObservable(updatedOptions, requests, func.name).pipe(tap(data => this.data.next(data)))
+            .pipe(finalize(() => this.isPending.next(false)), catchError((err) => {
+            if (updatedOptions.displayError)
+                this.handleErrorWithSnackBar(err);
+            this.isPending.next(false);
+            return this.handleError(err);
+        }));
     }
     downloadRequest(options, params) {
+        this.isPending.next(true);
+        options = (options) ? options : ApiRequest.adapt();
+        const mergedOptions = this.objectMergerService.mergeOptions(options, this.config.httpRequestOptions);
         const updatedOptions = {
-            ...options,
+            ...mergedOptions,
             path: params ? [...options.path, ...params] : options.path,
         };
         const func = this.downloadFileRequest;
         const requests = this.createRequest(func, updatedOptions);
-        return this.createObservable(options, requests, func.name)
-            .pipe(tap(() => this.error.next(false)), catchError((err) => {
+        return this.createObservable(updatedOptions, requests, func.name)
+            .pipe(catchError((err) => {
             this.error.next(true);
-            return EMPTY;
+            this.isPending.next(false);
+            return this.handleError(err);
         }));
     }
-    // UTILS
     createObservable(options, request$, funcName) {
         const polling = options.polling ? (options.polling > 0 ? true : false) : false;
         const isPolling = polling &&
@@ -1168,36 +1148,35 @@ class HTTPManagerService extends RequestService {
                 if (!options.polling)
                     return;
                 const count = options.polling ? options.polling : 0;
-                console.log('COUNT:', count);
+                // console.log('COUNT:', count);
                 countdown(count)
                     .pipe(map((x) => {
-                    console.log('XX:', count, x);
+                    // console.log('XX:', count, x);
                     const pollingInSec = options.polling || 0;
                     const percentageCompleted = ((pollingInSec - x) / pollingInSec) * 100;
                     return Math.round(percentageCompleted);
                 }))
                     .subscribe((countDownValue) => {
-                    console.log(this.countdown.value, countDownValue);
+                    // console.log(this.countdown.value, countDownValue);
                     this.countdown.next(countDownValue);
                 });
             }))
             : request$.pipe(catchError((err) => {
                 if (err instanceof HttpErrorResponse) {
                     this.error.next(true);
-                    if (options.displayError)
-                        this.handleErrorWithSnackBar(err);
                     return this.handleError(err);
                 }
                 return throwError(() => err);
-            }), finalize(() => this.isPending.next(false)));
+            }));
         return polling$.pipe(catchError((err, caught) => {
             if (err instanceof HttpErrorResponse) {
                 this.error.next(true);
-                this.stopPolling();
+                if (isPolling)
+                    this.stopPolling();
                 return this.handleError(err);
             }
             return throwError(() => err);
-        }), options.retry.times > 0
+        }), options.retry?.times > 0
             ? delayedRetry((options?.retry.delay || 3) * 1000, (options?.retry.times || 0) - 1)
             : (source) => source);
     }
@@ -1207,24 +1186,25 @@ class HTTPManagerService extends RequestService {
     }
     prepareRequestData(options, data, funcName) {
         if ((options.mapper && funcName === 'updateRecordRequest') || funcName === 'createRecordRequest') {
-            data = options.mapper
-                ? Array.isArray(data)
-                    ? map((item) => options.mapper(item))
-                    : options.mapper(data)
-                : data;
+            if (options?.mapper) {
+                data = options.mapper
+                    ? Array.isArray(data)
+                        ? map((item) => options.mapper(item))
+                        : options.mapper(data)
+                    : data;
+            }
         }
         else {
-            data = options.adapter
-                ? Array.isArray(data)
+            if (options?.adapter) {
+                data = Array.isArray(data)
                     ? map((item) => options.adapter(item))
-                    : options.adapter(data)
-                : data;
+                    : options.adapter(data);
+            }
         }
         return { options: options, data: data };
     }
     // MISC
     handleError(error) {
-        this.isPending.next(false);
         return throwError(() => error);
     }
     handleErrorWithSnackBar(error) {
@@ -1241,7 +1221,7 @@ class HTTPManagerService extends RequestService {
         this.isPending.next(false);
         this.polling$.next();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HTTPManagerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HTTPManagerService, deps: [{ token: CONFIG_SETTINGS_TOKEN, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HTTPManagerService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HTTPManagerService, decorators: [{
@@ -1249,53 +1229,298 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: function () { return [{ type: ConfigOptions, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [CONFIG_SETTINGS_TOKEN]
+                }] }]; } });
 
-class DatabaseStorage {
-    constructor(table = '', expiresIn) {
-        this.table = table;
-        this.expiresIn = expiresIn;
+const storage = {
+    localStores: [],
+    sessionStores: [],
+    settings: [],
+};
+class LocalStorageManagerService extends ComponentStore {
+    startTimer() {
+        const timer$ = interval(1000 * 3).pipe(withLatestFrom(this.data$), map(([_, state]) => state), tap((state) => {
+            const expired = this.expired(state) ? this.expired(state) : [];
+            if (expired.length > 0) {
+                const ids = expired.map((item) => item.id);
+                const updatedState = {
+                    ...state,
+                    localStores: state.localStores.filter((item) => !ids.includes(item.id)),
+                    sessionStores: state.sessionStores.filter((item) => !ids.includes(item.id)),
+                    settings: state.settings.filter((item) => !ids.includes(item.id)),
+                };
+                this.persistState(updatedState);
+                this.updateState(updatedState);
+            }
+        }));
+        timer$.subscribe();
     }
-    static adapt(item) {
-        return new DatabaseStorage(item?.table, item?.expiresIn);
+    constructor(config) {
+        super(storage);
+        this.config = config;
+        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.data$ = this.select((state) => state);
+        this.stores$ = this.select((state) => state.settings);
+        this.storeExists$ = (store) => this.select(this.data$, (data) => data.settings.find(item => item.name === store) ? true : false);
+        this.store$ = (store) => this.select(this.data$, (data) => {
+            const foundStore = data.settings.find(item => item.name === store);
+            if (foundStore) {
+                const options = SettingOptions.adapt(foundStore.options);
+                const found = foundStore.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;
+                }
+                if (!this.app?.appID) {
+                    console.warn('No App ID found - AppId not Provided');
+                    return;
+                }
+                const storageData = (options.encrypted) ? this.encryption.decrypt(found.data, this.app.appID) : found.data;
+                return (this.isString(storageData)) ? JSON.parse(storageData) : storageData;
+            }
+            else {
+                return null;
+            }
+        });
+        this.settings$ = this.select(state => (state) ? state.settings : storage.settings);
+        this.setting$ = (store) => this.select(this.data$, (state) => {
+            const foundSetting = state.settings.find(item => item.name === store);
+            return (foundSetting) ? foundSetting : null;
+        });
+        this.persistence$ = this.data$
+            .subscribe(data => {
+            if (this.stateRetrieved)
+                this.persistState(data);
+        });
+        this.updateState = this.updater((state, updatedState) => ({
+            ...updatedState,
+        }));
+        this.setStore = this.updater((state, store) => {
+            const settings = StorageOption.adapt(store);
+            settings.options = this.objectMergerService.mergeOptions(settings.options || this.defaultOptions, this.defaultOptions);
+            const type = store.options.storage;
+            const hasStore = this.hasGlobalStorage(type, store.id);
+            store.name = this.validStoreName(store.name);
+            if (!hasStore) {
+                console.warn(`No such Store: ${store.name}`);
+                return state;
+            }
+            else {
+                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 : 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]],
+                };
+            }
+        });
+        this.createStore = this.updater((state, store) => {
+            const settings = StorageOption.adapt(store);
+            settings.options = this.objectMergerService.mergeOptions(settings.options || this.defaultOptions, this.defaultOptions);
+            const foundStore = state?.settings.some(item => item.name === store.name);
+            const expires = (settings.options?.expiresIn) ? this.utils.expires(settings.options?.expiresIn) : 0;
+            if (settings.options)
+                settings.options.expires = expires;
+            store.name = this.validStoreName(store.name);
+            if (foundStore) {
+                return state;
+            }
+            else {
+                if (!this.isObjectOrArray(store.data)) {
+                    console.warn('Data must ba an Object or Array');
+                    return;
+                }
+                store.data = (this.isString(store.data)) ? JSON.parse(store.data) : store.data;
+                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]],
+                };
+            }
+        });
+        this.updateStore = this.updater((state, store) => {
+            store.name = this.validStoreName(store.name);
+            const settings = state.settings.find(item => item.name === store.name);
+            if (settings) {
+                const type = settings.options?.storage;
+                const hasStore = this.hasGlobalStorage(type, settings.id || '');
+                if (!hasStore) {
+                    console.warn(`No such Store: ${store.name}`);
+                }
+                else {
+                    const dataStr = (settings.options?.encrypted) ? this.encryption.encrypt(store.data, 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 }] : [];
+                    state.localStores = state.localStores.filter(item => item.id !== settings.id);
+                    state.sessionStores = state.sessionStores.filter(item => item.id !== settings.id);
+                    return {
+                        ...state,
+                        localStores: [...state.localStores, ...localData],
+                        sessionStores: [...state.sessionStores, ...sessionData],
+                    };
+                }
+            }
+            return state;
+        });
+        this.deleteStore = this.updater((state, store) => {
+            store.name = this.validStoreName(store.name);
+            const id = state.settings.find(item => item.name === store.name)?.id;
+            if (id) {
+                const settings = state.settings.filter(item => item.id !== id);
+                const localData = state.localStores.filter(item => item.id !== id);
+                const sessionData = state.sessionStores.filter(item => item.id !== id);
+                return {
+                    ...state,
+                    localStores: [...localData],
+                    sessionStores: [...sessionData],
+                    settings: [...settings],
+                };
+            }
+            else {
+                console.warn(`No such Store: ${store.name}`);
+                return state;
+            }
+        });
+        this.isObjectOrArray = (obj) => {
+            let parsed;
+            try {
+                parsed = JSON.parse(obj);
+            }
+            catch (e) {
+                return false;
+            }
+            if (Array.isArray(parsed)) {
+                const allStringsOrObjectsOrNumbers = parsed.every(item => typeof item === 'string' ||
+                    typeof item === 'object' && item !== null ||
+                    typeof item === 'number');
+                return allStringsOrObjectsOrNumbers;
+            }
+            return typeof parsed === 'object' && parsed !== null;
+        };
+        this.storageName = config.LocalStorageOptions?.storageName || this.storageName;
+        this.storageSettingsName = config.LocalStorageOptions?.storageSettingsName || this.storageSettingsName;
+        this.defaultOptions = config.LocalStorageOptions?.options || this.defaultOptions;
+        this.retrieveState();
+        this.startTimer();
     }
-}
-
-class RetryOptions {
-    constructor(times = 0, delay = 0) {
-        this.times = times;
-        this.delay = delay;
+    resetStore() {
+        const newState = {
+            localStores: [],
+            sessionStores: [],
+            settings: [],
+        };
+        this.updateState(newState);
+        this.persistState(newState);
     }
-    static adapt(item) {
-        return new RetryOptions(item?.times ? Math.floor(item.times) : 0, item?.delay ? Math.floor(item.delay) : 0);
+    persistState(state) {
+        if (!state)
+            return;
+        const strLocal = JSON.stringify(state.localStores);
+        localStorage.setItem(this.storageName, strLocal);
+        const strSession = JSON.stringify(state.sessionStores);
+        sessionStorage.setItem(this.storageName, strSession);
+        const settingsStr = this.encryption.encrypt(state.settings, this.app.appID);
+        localStorage.setItem(this.storageSettingsName, settingsStr || '');
     }
-}
-
-var DataType;
-(function (DataType) {
-    DataType[DataType["ANY"] = 0] = "ANY";
-    DataType[DataType["ARRAY"] = 1] = "ARRAY";
-    DataType[DataType["OBJECT"] = 2] = "OBJECT";
-})(DataType || (DataType = {}));
-
-class ApiRequest {
-    constructor(server = '', path = [], headers = {}, adapter, mapper, polling, retry = RetryOptions.adapt(), stream = false, displayError = false) {
-        this.server = server;
-        this.path = path;
-        this.headers = headers;
-        this.adapter = adapter;
-        this.mapper = mapper;
-        this.polling = polling;
-        this.retry = retry;
-        this.stream = stream;
-        this.displayError = displayError;
+    expired(state) {
+        if (!state)
+            return [];
+        return state.settings?.filter(item => (item.options?.expires || 0) > 0 && this.utils.hasExpired(item.options?.expires || 0));
+    }
+    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) : null;
+        const sessionData = (sessionStr) ? JSON.parse(sessionStr) : null;
+        const decryptedStr = str ? this.encryption.decrypt(str, this.app.appID) : null;
+        const settings = (decryptedStr && decryptedStr !== null) ? JSON.parse(decryptedStr) : [];
+        settings.forEach(store => {
+            const expired = (store.options?.expires || 0) > 0 && this.utils.hasExpired(store.options?.expires || 0);
+            if (!expired) {
+                const hasStorage = this.hasGlobalStorage(store.options?.storage, store.id || '');
+                if (!hasStorage) {
+                    this.createStore({ id: store.id, name: store.name, data: [], options: SettingOptions.adapt(store.options) });
+                }
+                else {
+                    const storeData = (store.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: SettingOptions.adapt(store.options) });
+                }
+            }
+        });
+        this.stateRetrieved = true;
+    }
+    isString(obj) {
+        return (Object.prototype.toString.call(obj) === '[object String]');
+    }
+    fixAndParseJSON(jsonString) {
+        const fixedString = jsonString
+            .replace(/'/g, '"')
+            .replace(/([{,]\s*)(\w+)\s*:/g, '$1"$2":')
+            .replace(/,\s*(\}|\])/g, '$1');
+        try {
+            return JSON.parse(fixedString);
+        }
+        catch (error) {
+            throw new Error('Failed to parse JSON: ' + error.message);
+        }
+    }
+    validStoreName(str) {
+        return str
+            .toLowerCase() // Convert to lowercase
+            .replace(/\s+/g, '_') // Replace spaces with underscores
+            .replace(/[^ -~]/g, ''); // Remove non-ASCII characters
+    }
+    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) ? true : false;
     }
-    static adapt(item) {
-        const server = Array.isArray(item?.server) ? item.server.join('/') : item?.server || '';
-        const retryOptions = item?.retry ? RetryOptions.adapt(item.retry) : RetryOptions.adapt();
-        return new ApiRequest(server, item?.path, (item?.headers) ? item.headers : {}, item?.adapter, item?.mapper, item?.polling ? Math.floor(item.polling) : 0, retryOptions, item?.stream, item?.displayError);
+    ngOnDestroy() {
+        this.persistence$.unsubscribe();
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalStorageManagerService, deps: [{ token: CONFIG_SETTINGS_TOKEN }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalStorageManagerService, providedIn: 'root' }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalStorageManagerService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return [{ type: ConfigOptions, decorators: [{
+                    type: Inject,
+                    args: [CONFIG_SETTINGS_TOKEN]
+                }] }]; } });
 
 class RequestOptions {
     constructor(path = [], headers = {}) {
@@ -1313,7 +1538,7 @@ const defaultState = {
     dataObject: null,
 };
 class HTTPManagerStateService extends ComponentStore {
-    constructor(apiOptions, dataType, database) {
+    constructor(apiOptions = ApiRequest.adapt(), dataType, database) {
         super(defaultState);
         this.apiOptions = apiOptions;
         this.dataType = dataType;
@@ -1347,9 +1572,6 @@ class HTTPManagerStateService extends ComponentStore {
         });
         // --------------------------------------------------------------------------------------------------
         // UPDATERS
-        this.resetData$ = this.updater((state) => {
-            return { ...state, data: [], dataObject: null };
-        });
         this.setData$ = this.updater((state, data) => {
             if (!data)
                 return state;
@@ -1498,35 +1720,6 @@ class HTTPManagerStateService extends ComponentStore {
                 }
             }));
         })));
-        // FETCH PAGINATION
-        this.fetchPaginationCancel$ = new Subject();
-        this.fetchPaginationRecords = (size = 10, options) => this.effect(() => {
-            this.fetchPaginationCancel$.next();
-            return of(RequestOptions.adapt(options)).pipe(switchMap(() => {
-                this.resetData$();
-                const requestOptions = this.updateRequestOptions(options?.headers);
-                const updatedPath = [...(options?.path ?? []), { size, page: 1 }];
-                const firstRequestObservable = this.httpManagerService.getRequest(requestOptions, updatedPath).pipe(takeUntil(this.fetchPaginationCancel$), tap(() => this.httpManagerService.isPending.next(true)), tap((data) => {
-                    data = !data ? (this.dataType === DataType.ARRAY ? [] : {}) : data;
-                    this.setData$(data.results);
-                }));
-                return firstRequestObservable.pipe(takeUntil(this.fetchPaginationCancel$), expand((data) => {
-                    this.httpManagerService.isPending.next(true);
-                    const totalPages = data?.totalPages || 1;
-                    const currentPage = data?.page || 1;
-                    if (currentPage < totalPages) {
-                        const nextPage = currentPage + 1;
-                        const updatedPathWithNextPage = [...(options?.path ?? []), { size, page: nextPage }];
-                        const nextRequestObservable = this.httpManagerService.getRequest(requestOptions, updatedPathWithNextPage).pipe(takeUntil(this.fetchPaginationCancel$), tap(() => this.httpManagerService.isPending.next(true)), tap((nextData) => {
-                            nextData = !nextData ? (this.dataType === DataType.ARRAY ? [] : {}) : nextData;
-                            this.setData$(nextData.results);
-                        }));
-                        return nextRequestObservable;
-                    }
-                    return EMPTY;
-                }), takeUntil(this.fetchPaginationCancel$), tap(() => this.httpManagerService.isPending.next(false)));
-            }));
-        });
         this.setApiRequestOptions(apiOptions, dataType, database);
     }
     setApiRequestOptions(apiOptions, dataType, database) {
@@ -1535,7 +1728,7 @@ class HTTPManagerStateService extends ComponentStore {
         this.hasDatabase = this.database?.table === "" ? false : true;
         this.database = (this.hasDatabase) ? DatabaseStorage.adapt(database) : undefined;
     }
-    get apiRequestOptions() {
+    get ApiRequestOptions() {
         return this.apiOptions;
     }
     initStorage() {
@@ -1586,7 +1779,7 @@ class HTTPManagerStateService extends ComponentStore {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HTTPManagerStateService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: ApiRequest, decorators: [{
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [API_OPTS]
                 }] }, { type: undefined, decorators: [{
@@ -1660,7 +1853,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 class RequestErrorInterceptor {
     constructor() {
-        this.toastMessage = inject(ToastMessageService$1);
+        this.toastMessage = inject(ToastMessageService);
     }
     intercept(req, next) {
         return next.handle(req).pipe(catchError$1((error) => {
@@ -1672,8 +1865,8 @@ class RequestErrorInterceptor {
                 duration: 5 * 1000, //5 seconds
             });
             if (error.status >= 400 && error.status < 500) {
-                displayError.color = ToastColors.ERROR;
-                displayError.message = `${error.status}: ${error.statusText}`;
+                displayError.color = ToastColors.WARN;
+                displayError.message = error.error || `${error.status}: ${error.statusText}`;
                 console.error('Client Error:', {
                     status: error.status,
                     message: error.message,
@@ -1684,7 +1877,7 @@ class RequestErrorInterceptor {
             }
             else if (error.status >= 500) {
                 displayError.color = ToastColors.ERROR;
-                displayError.message = `${error.status}: ${error.statusText}`;
+                displayError.message = error.error || `${error.status}: ${error.statusText}`;
                 console.error('Server Error:', {
                     status: error.status,
                     message: error.message,
@@ -1703,6 +1896,1160 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             type: Injectable
         }] });
 
+const PROXY_CONFIG = new InjectionToken('PROXY_CONFIG');
+class ProxyDebuggerInterceptor {
+    constructor(proxyConfig) {
+        this.proxyConfig = proxyConfig;
+    }
+    intercept(req, next) {
+        if (!this.proxyConfig) {
+            return next.handle(req);
+        }
+        const headers = req.headers.keys().reduce((acc, key) => {
+            acc[key] = req.headers.get(key) || '';
+            return acc;
+        }, {});
+        for (const proxyPath in this.proxyConfig) {
+            if (this.proxyConfig.hasOwnProperty(proxyPath)) {
+                const proxyDetails = this.proxyConfig[proxyPath];
+                const regex = new RegExp('^' + proxyPath.replace('/', '').replace('*', '(.*)'));
+                if (regex.test(req.url)) {
+                    const target = proxyDetails.target;
+                    const endpoint = req.url.replace(regex, '$1');
+                    const actualPath = target + '/' + endpoint;
+                    console.log('Request Proxied:', {
+                        requestUrl: req.url,
+                        requestPayload: req.body,
+                        headers: headers,
+                        proxyPath: proxyPath,
+                        actualPath: actualPath,
+                    });
+                }
+            }
+        }
+        return next.handle(req);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProxyDebuggerInterceptor, deps: [{ token: PROXY_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProxyDebuggerInterceptor }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProxyDebuggerInterceptor, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [PROXY_CONFIG]
+                }] }]; } });
+
+class DownloadFileComponent {
+    constructor() {
+        this.subscriptions = new Subscription();
+        this.displayError = 3; // seconds
+        this.diameter = 32;
+        this.mode = 'determinate';
+        this.isPending = false;
+        this.active = false;
+        this.disabled = false;
+        this.error = new EventEmitter();
+        this._progress = 0;
+        this._hasError = false;
+        this.errorTimerActive = false;
+    }
+    set progress(value) {
+        this._progress = value ?? 0;
+    }
+    get progress() {
+        return this._progress;
+    }
+    set hasError(value) {
+        this._hasError = !!value;
+        if (this._hasError && !this.errorTimerActive) {
+            this.errorTimerActive = true;
+            this.active = false;
+            this.error.emit();
+            this.subscriptions.add(timer(this.displayError * 1000)
+                .subscribe((err) => {
+                this._hasError = false;
+                this.errorTimerActive = false;
+            }));
+        }
+    }
+    get hasError() {
+        return this._hasError;
+    }
+    ngOnInit() { }
+    onAction() {
+        this.isPending = false;
+        if (this.event)
+            this.event();
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DownloadFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DownloadFileComponent, selector: "app-download-file", inputs: { event: "event", displayError: "displayError", diameter: "diameter", mode: "mode", isPending: "isPending", active: "active", disabled: "disabled", progress: "progress", hasError: "hasError" }, outputs: { error: "error" }, ngImport: i0, template: "<ng-container *ngIf=\"!isPending; else DOWNLOADING\">\n  <ng-container *ngIf=\"hasError; else NORMAL\">\n    <div class=\"width center-txt\" style=\"margin-bottom: 4px;\">\n      <mat-icon color=\"warn\" class=\"warn-icon\">warning</mat-icon>\n    </div>\n  </ng-container>\n  <ng-template #NORMAL>\n    <ng-container *ngIf=\"active; else ACTION\">\n\n      <div class=\"container-obj\">\n        <div class=\"centered-obj-div\">\n          <mat-progress-spinner\n            color=\"primary\"\n            mode=\"indeterminate\"\n            [diameter]=\"44\"\n          ></mat-progress-spinner>\n        </div>\n      </div>\n\n  </ng-container>\n  <ng-template #ACTION>\n    <button data-tracking=\"export-btn\" mat-icon-button (click)=\"onAction()\" class=\"icon-button\" [disabled]=\"disabled\">\n      <mat-icon class=\"custom-icon\">file_download</mat-icon>\n    </button>\n  </ng-template>\n  </ng-template>\n</ng-container>\n\n<ng-template #DOWNLOADING>\n  <div\n    class=\"spinner-container\"\n    *ngIf=\"(progress > 0 && progress < 100); else INDETERMINATE\"\n  >\n    <div class=\"spinner-background\">\n      {{progress}}%\n    </div>\n    <mat-progress-spinner\n      color=\"primary\"\n      [mode]=\"mode\"\n      [value]=\"progress\"\n      [diameter]=\"44\"\n    ></mat-progress-spinner>\n  </div>\n  <ng-template #INDETERMINATE>\n    <div class=\"container-obj\">\n      <div class=\"centered-obj-div\">\n        <mat-progress-spinner\n          color=\"primary\"\n          mode=\"indeterminate\"\n          [diameter]=\"44\"\n        ></mat-progress-spinner>\n      </div>\n    </div>\n  </ng-template>\n\n</ng-template>\n\n\n\n", styles: [":not(spinner-container).spinner-container{position:relative}:not(spinner-container).spinner-container .spinner-background{position:absolute;width:44px;height:44px;font-size:12px;line-height:32px;text-align:center;overflow:hidden;border-radius:50%;border:solid 5px whitesmoke}.center-txt{align-content:center;text-align:-webkit-center}.width{width:48px;height:48px}.icon-button{display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0}.container-obj{display:flex;justify-content:center;align-items:center;width:48px;height:48px}.centered-obj-div{text-align:center}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DownloadFileComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-download-file', encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"!isPending; else DOWNLOADING\">\n  <ng-container *ngIf=\"hasError; else NORMAL\">\n    <div class=\"width center-txt\" style=\"margin-bottom: 4px;\">\n      <mat-icon color=\"warn\" class=\"warn-icon\">warning</mat-icon>\n    </div>\n  </ng-container>\n  <ng-template #NORMAL>\n    <ng-container *ngIf=\"active; else ACTION\">\n\n      <div class=\"container-obj\">\n        <div class=\"centered-obj-div\">\n          <mat-progress-spinner\n            color=\"primary\"\n            mode=\"indeterminate\"\n            [diameter]=\"44\"\n          ></mat-progress-spinner>\n        </div>\n      </div>\n\n  </ng-container>\n  <ng-template #ACTION>\n    <button data-tracking=\"export-btn\" mat-icon-button (click)=\"onAction()\" class=\"icon-button\" [disabled]=\"disabled\">\n      <mat-icon class=\"custom-icon\">file_download</mat-icon>\n    </button>\n  </ng-template>\n  </ng-template>\n</ng-container>\n\n<ng-template #DOWNLOADING>\n  <div\n    class=\"spinner-container\"\n    *ngIf=\"(progress > 0 && progress < 100); else INDETERMINATE\"\n  >\n    <div class=\"spinner-background\">\n      {{progress}}%\n    </div>\n    <mat-progress-spinner\n      color=\"primary\"\n      [mode]=\"mode\"\n      [value]=\"progress\"\n      [diameter]=\"44\"\n    ></mat-progress-spinner>\n  </div>\n  <ng-template #INDETERMINATE>\n    <div class=\"container-obj\">\n      <div class=\"centered-obj-div\">\n        <mat-progress-spinner\n          color=\"primary\"\n          mode=\"indeterminate\"\n          [diameter]=\"44\"\n        ></mat-progress-spinner>\n      </div>\n    </div>\n  </ng-template>\n\n</ng-template>\n\n\n\n", styles: [":not(spinner-container).spinner-container{position:relative}:not(spinner-container).spinner-container .spinner-background{position:absolute;width:44px;height:44px;font-size:12px;line-height:32px;text-align:center;overflow:hidden;border-radius:50%;border:solid 5px whitesmoke}.center-txt{align-content:center;text-align:-webkit-center}.width{width:48px;height:48px}.icon-button{display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0}.container-obj{display:flex;justify-content:center;align-items:center;width:48px;height:48px}.centered-obj-div{text-align:center}\n"] }]
+        }], propDecorators: { event: [{
+                type: Input
+            }], displayError: [{
+                type: Input
+            }], diameter: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], isPending: [{
+                type: Input
+            }], active: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], error: [{
+                type: Output
+            }], progress: [{
+                type: Input
+            }], hasError: [{
+                type: Input
+            }] } });
+
+class DownloadLabels {
+    constructor(error = '', action = '', icon = 'error') {
+        this.error = error;
+        this.action = action;
+        this.icon = icon;
+    }
+    static adapt(item) {
+        return new DownloadLabels(item?.error, item?.action, item?.icon);
+    }
+}
+
+class FileDownloaderComponent extends HTTPManagerService {
+    set labels(value) {
+        this._labels = (value) ? DownloadLabels.adapt(value) : DownloadLabels.adapt();
+    }
+    get labels() {
+        return this._labels;
+    }
+    constructor() {
+        super();
+        this.delayError = 3;
+        this.apiRequest = ApiRequest.adapt();
+        this.displayErrorMessage = false;
+        this._labels = DownloadLabels.adapt();
+        this.active = false;
+        this.subscription = new Subscription();
+        this.completed = new EventEmitter();
+        this.failed = new EventEmitter();
+        this.disabled = false;
+    }
+    ngOnInit() {
+    }
+    onDownloadStreaming() {
+        if (this.active)
+            return;
+        this.active = true;
+        return this.downloadRequest(this.apiRequest)
+            .pipe(distinctUntilChanged(), catchError((err) => {
+            this.onError(err.message);
+            this.active = false;
+            this.failed.emit(err);
+            return err;
+        })).subscribe((res) => {
+            if (res === 100) {
+                this.active = false;
+                this.completed.emit();
+            }
+        });
+    }
+    onError(message) {
+        if (!message || !this.displayErrorMessage)
+            return;
+        const display = ToastDisplay.adapt({
+            message,
+            action: 'Ok',
+            color: ToastColors.ERROR,
+            icon: 'error',
+        });
+        this.active = false;
+        this.toastMessage.toastMessage(display);
+    }
+    OnDestroy() {
+        this.subscription.unsubscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileDownloaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FileDownloaderComponent, selector: "app-file-downloader", inputs: { delayError: "delayError", apiRequest: "apiRequest", displayErrorMessage: "displayErrorMessage", labels: "labels", disabled: "disabled" }, outputs: { completed: "completed", failed: "failed" }, usesInheritance: true, ngImport: i0, template: "<app-download-file\n  [disabled]=\"disabled\"\n  [displayError]=\"3\"\n  [event]=\"onDownloadStreaming.bind(this)\"\n  [isPending]=\"(isPending$ | async) || false\"\n  [progress]=\"(progress$ | async)\"\n  [hasError]=\"(error$ | async)\"\n  (error)=\"onError(labels.error)\"\n  [active]=\"active\"\n></app-download-file>\n", styles: [".snackBarInfo{background-color:#f44336;color:#fff}.mat-simple-snackbar>span{font-weight:700}.mat-simple-snackbar-action .mat-button .mat-button-wrapper{color:#fff}.cdk-overlay-pane>.mat-snack-bar-container{width:100%}.mat-snack-bar-container{max-width:100%!important;width:100%}\n"], dependencies: [{ kind: "component", type: DownloadFileComponent, selector: "app-download-file", inputs: ["event", "displayError", "diameter", "mode", "isPending", "active", "disabled", "progress", "hasError"], outputs: ["error"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileDownloaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-file-downloader', encapsulation: ViewEncapsulation.None, template: "<app-download-file\n  [disabled]=\"disabled\"\n  [displayError]=\"3\"\n  [event]=\"onDownloadStreaming.bind(this)\"\n  [isPending]=\"(isPending$ | async) || false\"\n  [progress]=\"(progress$ | async)\"\n  [hasError]=\"(error$ | async)\"\n  (error)=\"onError(labels.error)\"\n  [active]=\"active\"\n></app-download-file>\n", styles: [".snackBarInfo{background-color:#f44336;color:#fff}.mat-simple-snackbar>span{font-weight:700}.mat-simple-snackbar-action .mat-button .mat-button-wrapper{color:#fff}.cdk-overlay-pane>.mat-snack-bar-container{width:100%}.mat-snack-bar-container{max-width:100%!important;width:100%}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { delayError: [{
+                type: Input
+            }], apiRequest: [{
+                type: Input
+            }], displayErrorMessage: [{
+                type: Input
+            }], labels: [{
+                type: Input
+            }], completed: [{
+                type: Output
+            }], failed: [{
+                type: Output
+            }], disabled: [{
+                type: Input
+            }] } });
+
+class SpinnerComponent {
+    constructor() {
+        this.value = 0;
+    }
+    ngOnInit() {
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SpinnerComponent, selector: "app-spinner", inputs: { color: "color", diameter: "diameter", display: "display", mode: "mode", strokeWidth: "strokeWidth", value: "value" }, ngImport: i0, template: "<div class=\"spinner-background\">{{display}}</div>\n<mat-progress-spinner\n    [color]=\"color\"\n    [diameter]=\"diameter\"\n    [mode]=\"mode || 'indeterminate'\"\n    [strokeWidth]=\"strokeWidth\"\n    [value]=\"value\">\n</mat-progress-spinner>\n", styles: [".example-h2{margin:24px 0}:not(spinner-container).spinner-container{position:relative}:not(spinner-container).spinner-container .spinner-background{position:absolute;width:80px;height:80px;line-height:80px;text-align:center;overflow:hidden;border-color:#673ab71f;border-radius:50%;border-style:solid;border-width:10px}\n"], dependencies: [{ kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpinnerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-spinner', template: "<div class=\"spinner-background\">{{display}}</div>\n<mat-progress-spinner\n    [color]=\"color\"\n    [diameter]=\"diameter\"\n    [mode]=\"mode || 'indeterminate'\"\n    [strokeWidth]=\"strokeWidth\"\n    [value]=\"value\">\n</mat-progress-spinner>\n", styles: [".example-h2{margin:24px 0}:not(spinner-container).spinner-container{position:relative}:not(spinner-container).spinner-container .spinner-background{position:absolute;width:80px;height:80px;line-height:80px;text-align:center;overflow:hidden;border-color:#673ab71f;border-radius:50%;border-style:solid;border-width:10px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { color: [{
+                type: Input
+            }], diameter: [{
+                type: Input
+            }], display: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], strokeWidth: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }] } });
+
+class FileDownloaderModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileDownloaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: FileDownloaderModule, declarations: [SpinnerComponent,
+            DownloadFileComponent,
+            FileDownloaderComponent], imports: [CommonModule,
+            MatIconModule,
+            MatProgressSpinnerModule,
+            MatButtonModule], exports: [FileDownloaderComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileDownloaderModule, imports: [CommonModule,
+            MatIconModule,
+            MatProgressSpinnerModule,
+            MatButtonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileDownloaderModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        MatIconModule,
+                        MatProgressSpinnerModule,
+                        MatButtonModule,
+                    ],
+                    declarations: [
+                        SpinnerComponent,
+                        DownloadFileComponent,
+                        FileDownloaderComponent,
+                    ],
+                    exports: [
+                        FileDownloaderComponent
+                    ]
+                }]
+        }] });
+
+class LocalStorageDemoComponent {
+    get type() {
+        return (this.typeControl.value) ? +this.typeControl.value : 0;
+    }
+    get isValid() {
+        return this.newStoreForm.valid;
+    }
+    get isValidData() {
+        return this.storageForm.valid;
+    }
+    constructor(configOptions) {
+        this.configOptions = configOptions;
+        this.fb = inject(FormBuilder);
+        this.utils = inject(UtilsService);
+        this.type$ = new BehaviorSubject(StorageType.GLOBAL);
+        this.typeControl = this.fb.control(StorageType.GLOBAL.toString());
+        this.localStorageManagerService = inject(LocalStorageManagerService);
+        this.settings$ = this.localStorageManagerService.settings$;
+        this.setting$ = (store) => this.localStorageManagerService.setting$(store);
+        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')
+        });
+        this.storeData$ = this.storageForm.get('store')?.valueChanges
+            .pipe(switchMap((data) => {
+            return data
+                ? this.localStorageManagerService.store$(data.name)
+                : of('');
+        }), tap(data => {
+            this.storageForm.get('data')?.patchValue(data, { emitEvent: false });
+        }));
+        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.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();
+        }
+    }
+    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;
+        const options = { storage: type, encrypted: storeData.encrypted };
+        this.localStorageManagerService.updateStore({
+            name: store.name,
+            data
+        });
+    }
+    onSelectedRow(store) {
+        this.store = store;
+        this.data$ = this.localStorageManagerService.store$(store.name).pipe(map(item => JSON.stringify(item)));
+        this.create = false;
+    }
+    onCreate() {
+        this.onCancel();
+        this.create = true;
+    }
+    onDelete(store) {
+        console.log('DELETED STORE:', store);
+        this.localStorageManagerService.deleteStore({
+            name: store.name,
+        });
+        this.onCancel();
+    }
+    onCancel() {
+        this.data$ = EMPTY;
+        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: "16.2.12", ngImport: i0, type: LocalStorageDemoComponent, deps: [{ token: CONFIG_SETTINGS_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LocalStorageDemoComponent, selector: "app-local-storage-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$ | async | json }}\n    <div *ngIf=\"filterData(settings$ | async) 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=\"(data$ | async) as data\" 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;\">{{ store.name | uppercase }}</span></h3>\n        <h3>SETTINGS: {{ setting$(store.name) | async | 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]=\"data\"></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(store, 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]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], 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: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i3$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i8.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i8.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i8.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i8.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i10.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i10.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i10$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i11.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i12.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.AsyncPipe, name: "async" }, { 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: "16.2.12", ngImport: i0, type: LocalStorageDemoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-local-storage-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$ | async | json }}\n    <div *ngIf=\"filterData(settings$ | async) 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=\"(data$ | async) as data\" 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;\">{{ store.name | uppercase }}</span></h3>\n        <h3>SETTINGS: {{ setting$(store.name) | async | 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]=\"data\"></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(store, 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: function () { return [{ type: ConfigOptions, decorators: [{
+                    type: Inject,
+                    args: [CONFIG_SETTINGS_TOKEN]
+                }] }]; } });
+
+class ClientInfo {
+    constructor(domain = '', service = '', id = 0, name = '') {
+        this.domain = domain;
+        this.service = service;
+        this.id = id;
+        this.name = name;
+    }
+    static adapt(item) {
+        return new ClientInfo(item?.domain, item?.service, item?.id, item?.name);
+    }
+}
+
+class ClientInfoMapper {
+    constructor(id = 0, name = '') {
+        this.id = id;
+        this.name = name;
+    }
+    static adapt(item) {
+        return new ClientInfoMapper(item?.id, item?.name);
+    }
+}
+
+class AIPrompt {
+    constructor(response = '') {
+        this.response = response;
+    }
+    static adapt(item) {
+        return new AIPrompt(item?.response);
+    }
+}
+
+class RequestManagerDemoComponent {
+    get retry() {
+        return this.requestForm.get('retry')?.value;
+    }
+    get headers() {
+        return this.requestForm.get('headers');
+    }
+    get isValid() {
+        this.requestForm.markAllAsTouched();
+        return this.requestForm.valid;
+    }
+    constructor() {
+        this.displayedColumns = ['id', 'name', 'lastName', 'age'];
+        this.fb = inject(FormBuilder);
+        this.toastMessage = inject(ToastMessageService);
+        this.httpManagerService = inject(HTTPManagerService);
+        this.isPending$ = this.httpManagerService.isPending$;
+        this.countdown$ = this.httpManagerService.countdown$;
+        this.GET_error$ = new BehaviorSubject('');
+        this.POST_error$ = new BehaviorSubject('');
+        this.PUT_error$ = new BehaviorSubject('');
+        this.DELETE_error$ = new BehaviorSubject('');
+        this.STREAM_error$ = new BehaviorSubject('');
+        this.STREAM_AI_error$ = new BehaviorSubject('');
+        this.requestParams = {
+            GET: ApiRequest.adapt(),
+            POST: ApiRequest.adapt(),
+            PUT: ApiRequest.adapt(),
+            DELETE: ApiRequest.adapt(),
+            STREAM: ApiRequest.adapt(),
+        };
+        this.questionControl = this.fb.control("", [Validators.required]);
+        this.downloadRequest = ApiRequest.adapt({
+            server: 'http://localhost:4200/assets',
+            path: ['icons1.svg']
+        });
+        this.sampleClientData = {
+            id: 0,
+            name: "Old School Dates",
+            domain: "osd.com",
+            service: "osd",
+            spiffe: "osd.com/osd",
+            secret: "SMOPECXP-OS4P-USOG-X2II-3XMD1FQDR3IJX",
+            created: 1693003138,
+            modified: 1693003138,
+            icon: "",
+            imageFile: "",
+        };
+        this.requestForm = this.fb.group({
+            path: this.fb.control(""),
+            headers: this.fb.array([]),
+            adapter: [null],
+            retry: this.fb.group({
+                times: [3],
+                delay: [3],
+            }),
+            polling: [3],
+        });
+        this.sampleAdaptors = [
+            { label: "ClientInfo Basic", value: ClientInfo.adapt },
+            { label: "AI Prompt", value: AIPrompt.adapt },
+        ];
+        this.sampleMappers = [
+            { label: "Mapper Basic", value: ClientInfoMapper.adapt },
+            { label: "AI Prompt", value: AIPrompt.adapt },
+        ];
+        // server = `http://sample-endpoint/as/authorization.oauth2`
+        this.arrayObjectsToObjects = (arr) => {
+            return Array.isArray(arr) ? arr.reduce((obj, item) => Object.assign(obj, { [item.key]: item.value }), {}) : {};
+        };
+    }
+    ngOnInit() {
+        // const reqGet2 = ApiRequest.adapt({
+        //   server,
+        //   path: ['clients'],
+        //   headers: { authentication: "Bearer <KEY>" },
+        //   adapter: ClientInfo,
+        //   dataType: DataType.OBJECT,
+        //   // concurrent: false,
+        //   // polling: 3, //seconds
+        // });
+        // const req2 = [1024,1025,1026].map(item => {
+        //   return this.httpManagerService.getRequest<ClientInfo[]>(reqGet2, [item])
+        //   .pipe(
+        //     catchError(error => {
+        //       return throwError(() => new Error(error.error.message));
+        //     })
+        //   )
+        // })
+        // forkJoin(req2)
+        // .subscribe(res => console.log(res))
+    }
+    addHeader() {
+        const header = this.fb.group({
+            key: ['', Validators.required],
+            value: ['']
+        });
+        this.headers.push(header);
+    }
+    removeHeader(index) {
+        this.headers.removeAt(index);
+    }
+    compileRequest() {
+        const requestParams = this.requestForm.value;
+        requestParams.headers = this.arrayObjectsToObjects(requestParams.headers || []);
+        const pathReq = (requestParams.path === "") ? [] : (requestParams.path || "").split("/");
+        if (!this.pollingState.checked)
+            requestParams.polling = 0;
+        if (!this.failedState.checked) {
+            requestParams.retry = { times: 0, delay: 0 };
+        }
+        return ApiRequest.adapt({
+            ...requestParams,
+            // ...{ path: pathReq, server: this.server },
+            ...{ path: pathReq },
+        });
+    }
+    onGetRequest() {
+        if (!this.isValid)
+            return;
+        const reqParams = this.compileRequest();
+        this.requestParams.GET = reqParams;
+        this.GET$ = EMPTY; //Cancels Previous
+        this.GET_error$.next('');
+        this.GET$ = this.httpManagerService.getRequest(reqParams)
+            .pipe(
+        // tap((data) => console.log("API GET response", data)),
+        catchError(error => {
+            return throwError(() => this.errorHandling(error, 'GET'));
+        }));
+    }
+    onCreateRequest() {
+        if (!this.isValid)
+            return;
+        const reqParams = this.compileRequest();
+        this.requestParams.POST = reqParams;
+        this.POST$ = EMPTY; //Cancels Previous
+        this.POST_error$.next('');
+        this.POST$ = this.httpManagerService.postRequest(this.sampleClientData, reqParams)
+            .pipe(
+        // tap((data) => console.log("API POST response", data)),
+        catchError(error => {
+            return throwError(() => this.errorHandling(error, 'POST'));
+        }));
+    }
+    onUpdateRequest() {
+        if (!this.isValid)
+            return;
+        const reqParams = this.compileRequest();
+        this.sampleClientData.id = reqParams.path[reqParams.path.length - 1];
+        this.requestParams.PUT = reqParams;
+        this.PUT$ = EMPTY; //Cancels Previous
+        this.PUT_error$.next('');
+        this.PUT$ = this.httpManagerService.putRequest(this.sampleClientData, reqParams)
+            .pipe(
+        // tap((data) => console.log("API PUT response", data)),
+        catchError(error => {
+            return throwError(() => this.errorHandling(error, 'PUT'));
+        }));
+    }
+    onDeleteRequest() {
+        if (!this.isValid)
+            return;
+        const reqParams = this.compileRequest();
+        this.requestParams.DELETE = reqParams;
+        this.DELETE$ = EMPTY; //Cancels Previous
+        this.DELETE_error$.next('');
+        this.DELETE$ = this.httpManagerService.deleteRequest(reqParams)
+            .pipe(
+        // tap((data) => console.log("API DELETE response", data)),
+        catchError(error => {
+            return throwError(() => this.errorHandling(error, 'DELETE'));
+        }));
+    }
+    onStreamPostRequest() {
+        if (!this.isValid)
+            return;
+        const reqParams = this.compileRequest();
+        reqParams.server = "http://localhost:11434/api";
+        reqParams.path = ["generate"];
+        reqParams.stream = true;
+        const payload = {
+            model: "mistral",
+            prompt: this.questionControl.value,
+            stream: reqParams.stream
+        };
+        this.requestParams.STREAM = reqParams;
+        this.STREAM_AI$ = EMPTY;
+        this.STREAM_AI_error$.next('');
+        this.STREAM_AI$ = this.httpManagerService.postRequest(payload, reqParams)
+            .pipe(map(items => items.map((word) => word.response).flat().join('')), tap(() => this.questionControl.reset()), catchError(error => {
+            return throwError(() => this.errorHandling(error, 'STREAM'));
+        }));
+    }
+    onStreamRequest() {
+        if (!this.isValid)
+            return;
+        const reqParams = this.compileRequest();
+        reqParams.server = "oidc";
+        reqParams.stream = true;
+        this.STREAM$ = this.httpManagerService.getRequest(reqParams)
+            .pipe(
+        // tap((data) => console.log("API STREAM response", data)),
+        catchError(error => {
+            return throwError(() => this.errorHandling(error, 'STREAM'));
+        }));
+    }
+    onDownloadCompleted() {
+        const message = "Download Completed";
+        const display = ToastDisplay.adapt({
+            message,
+            action: 'Ok',
+            color: ToastColors.SUCCESS,
+            icon: 'sentiment_satisfied_alt',
+        });
+        this.toastMessage.toastMessage(display);
+    }
+    onDownloadFailed(err) {
+        const message = "Download Failed";
+        const display = ToastDisplay.adapt({
+            message,
+            action: 'Ok',
+            color: ToastColors.ERROR,
+            icon: 'warning',
+        });
+        this.toastMessage.toastMessage(display);
+    }
+    errorHandling(err, type) {
+        if (type === 'GET')
+            this.GET_error$.next(err.message);
+        if (type === 'POST')
+            this.POST_error$.next(err.message);
+        if (type === 'PUT')
+            this.PUT_error$.next(err.message);
+        if (type === 'DELETE')
+            this.DELETE_error$.next(err.message);
+        if (type === 'STREAM')
+            this.STREAM_error$.next(err.message);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RequestManagerDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RequestManagerDemoComponent, selector: "app-request-manager-demo", viewQueries: [{ propertyName: "failedState", first: true, predicate: ["failedState"], descendants: true, static: true }, { propertyName: "pollingState", first: true, predicate: ["pollingState"], descendants: true, static: true }], ngImport: i0, template: "<div style=\"margin: 2rem;\">\n\n  <h2>\n    HTTP Request Manager\n  </h2>\n\n  <div [formGroup]=\"requestForm\" style=\"margin-top: 2rem;\">\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Adapter (Model)</mat-label>\n        <mat-select formControlName=\"adapter\">\n          <mat-option>None</mat-option>\n          <mat-option *ngFor=\"let adapter of sampleAdaptors\" [value]=\"adapter.value\">\n            {{adapter.label}}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Mapper (Model)</mat-label>\n        <mat-select formControlName=\"adapter\">\n          <mat-option>None</mat-option>\n          <mat-option *ngFor=\"let mapper of sampleMappers\" [value]=\"mapper.value\">\n            {{mapper.label}}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <div>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>RestPath (/ delimited)</mat-label>\n        <input matInput placeholder=\"clients/list\" formControlName=\"path\">\n      </mat-form-field>\n    </div>\n    <div>\n      <div formArrayName=\"headers\">\n        <div *ngFor=\"let task of headers.controls; let i = index\" [formGroupName]=\"i\">\n          <div style=\"display: flex; gap: .5rem\">\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Key</mat-label>\n              <input matInput placeholder=\"authentication\" formControlName=\"key\">\n            </mat-form-field>\n            <mat-form-field appearance=\"outline\" style=\"flex:1\">\n              <mat-label>Value</mat-label>\n              <input matInput placeholder=\"sample\" formControlName=\"value\">\n            </mat-form-field>\n            <div style=\"margin-top: .5rem;\">\n              <button mat-icon-button (click)=\"removeHeader(i)\">\n                  <mat-icon>close</mat-icon>\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n      <button mat-stroked-button (click)=\"addHeader()\" class=\"btn\">Add Header</button>\n    </div>\n    <div style=\"margin-top: 2rem; display: flex; flex-direction:column; gap: 1rem;\">\n      <div>\n        <mat-slide-toggle #failedState>Retry on Failed</mat-slide-toggle>\n        <div *ngIf=\"failedState.checked\" style=\"display: flex; gap: .5rem; margin-top: 1rem;\" formGroupName=\"retry\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>#of Times</mat-label>\n            <input matInput placeholder=\"3\" formControlName=\"times\" value=\"3\">\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Delay Until Next</mat-label>\n            <input matInput placeholder=\"3\" formControlName=\"delay\" value=\"3\">\n          </mat-form-field>\n        </div>\n      </div>\n      <div>\n        <mat-slide-toggle #pollingState>Polling</mat-slide-toggle>\n        <div *ngIf=\"pollingState.checked\">\n          <mat-form-field appearance=\"outline\" style=\"margin-top: 1rem\">\n            <mat-label>#of Seconds</mat-label>\n            <input matInput placeholder=\"3\" formControlName=\"polling\" value=\"3\">\n          </mat-form-field>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div style=\"margin-bottom: 1rem; margin-top: 2rem;\">\n    <mat-progress-bar mode=\"indeterminate\"\n      *ngIf=\"(isPending$ | async)\"\n    ></mat-progress-bar>\n    <mat-progress-bar mode=\"determinate\"\n      *ngIf=\"pollingState.checked && !(isPending$ | async)\"\n      [value]=\"(this.countdown$ | async)\"\n    ></mat-progress-bar>\n  </div>\n\n  <div style=\"margin-top: 1rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">GET Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onGetRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(GET_error$ | async) as get_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ get_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\" *ngIf=\"(GET$ | async) as dataRecord\">\n      <!-- <div [innerHTML]=\"(GET$ | async) | jsonv\"></div> -->\n      {{ dataRecord | json }}\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">POST Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onCreateRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(POST_error$ | async) as post_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ post_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\" *ngIf=\"(POST$ | async) as dataRecord\">\n      <!-- <div [innerHTML]=\"(POST$ | async) | jsonv\"></div> -->\n      {{ dataRecord | json }}\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">PUT Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onUpdateRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(PUT_error$ | async) as put_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ put_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\" *ngIf=\"(PUT$ | async) as dataRecord\">\n      <!-- <div [innerHTML]=\"(PUT$ | async) | jsonv\"></div> -->\n       {{ dataRecord | json }}\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">DELETE Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onDeleteRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(DELETE_error$ | async) as delete_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ delete_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\" *ngIf=\"(DELETE$ | async) as dataRecord\">\n      <!-- <div [innerHTML]=\"(DELETE$ | async) | jsonv\"></div> -->\n      {{ dataRecord | json }}\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">Streaming GET Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onStreamRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(STREAM_error$ | async) as stream_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ stream_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\">\n      <div *ngIf=\"(STREAM$ | async) as data\" class=\"container\">\n        <table mat-table [dataSource]=\"data\">\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=\"name\">\n            <th mat-header-cell *matHeaderCellDef> First Name </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.name}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"lastName\">\n            <th mat-header-cell *matHeaderCellDef> Last Name </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.lastName}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"age\">\n            <th mat-header-cell *matHeaderCellDef> Age </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.age}} </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n        </table>\n      </div>\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">STREAMING POST Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onStreamPostRequest()\" class=\"btn\">Ask Me</button>\n      </div>\n    </div>\n\n    <div style=\"display: flex;\">\n      <mat-form-field appearance=\"outline\" style=\"flex:1\">\n        <mat-label>Ask me a Question</mat-label>\n        <textarea matInput placeholder=\"Why is the sky blue?\" [formControl]=\"questionControl\"></textarea>\n      </mat-form-field>\n    </div>\n\n    <div *ngIf=\"(STREAM_AI_error$ | async) as stream_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ stream_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\">\n      <div *ngIf=\"(STREAM_AI$ | async) as data\">\n        <p style=\"margin-bottom: .5rem; white-space:pre-wrap;\">{{data}}</p>\n      </div>\n    </div>\n\n  </div>\n\n  <div>\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1; margin-bottom: 0; padding-top: .5rem; display: flex;\">\n        <div>\n          Download File\n        </div>\n        <div style=\"flex:1; margin-left: 1rem;\">\n          <mat-slide-toggle #disable>\n            <span *ngIf=\"disable.checked; else DISABLE\">\n              Enable\n            </span>\n            <ng-template #DISABLE>Disable</ng-template>\n          </mat-slide-toggle>\n        </div>\n      </h2>\n      <div>\n        <app-file-downloader\n          [disabled]=\"disable.checked\"\n          [delayError]=\"3\"\n          [apiRequest]=\"downloadRequest\"\n          (completed)=\"onDownloadCompleted()\"\n          (failed)=\"onDownloadFailed($event)\"\n        ></app-file-downloader>\n      </div>\n    </div>\n  </div>\n\n</div>\n", styles: [".btn{min-width:120px}.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;background-color:#f5f5f5}.container{height:400px;overflow:auto}\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: 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: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], 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: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i8.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i8.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i8.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i8.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i10$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i11.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i12.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: "component", type: FileDownloaderComponent, selector: "app-file-downloader", inputs: ["delayError", "apiRequest", "displayErrorMessage", "labels", "disabled"], outputs: ["completed", "failed"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RequestManagerDemoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-request-manager-demo', template: "<div style=\"margin: 2rem;\">\n\n  <h2>\n    HTTP Request Manager\n  </h2>\n\n  <div [formGroup]=\"requestForm\" style=\"margin-top: 2rem;\">\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Adapter (Model)</mat-label>\n        <mat-select formControlName=\"adapter\">\n          <mat-option>None</mat-option>\n          <mat-option *ngFor=\"let adapter of sampleAdaptors\" [value]=\"adapter.value\">\n            {{adapter.label}}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Mapper (Model)</mat-label>\n        <mat-select formControlName=\"adapter\">\n          <mat-option>None</mat-option>\n          <mat-option *ngFor=\"let mapper of sampleMappers\" [value]=\"mapper.value\">\n            {{mapper.label}}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <div>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>RestPath (/ delimited)</mat-label>\n        <input matInput placeholder=\"clients/list\" formControlName=\"path\">\n      </mat-form-field>\n    </div>\n    <div>\n      <div formArrayName=\"headers\">\n        <div *ngFor=\"let task of headers.controls; let i = index\" [formGroupName]=\"i\">\n          <div style=\"display: flex; gap: .5rem\">\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Key</mat-label>\n              <input matInput placeholder=\"authentication\" formControlName=\"key\">\n            </mat-form-field>\n            <mat-form-field appearance=\"outline\" style=\"flex:1\">\n              <mat-label>Value</mat-label>\n              <input matInput placeholder=\"sample\" formControlName=\"value\">\n            </mat-form-field>\n            <div style=\"margin-top: .5rem;\">\n              <button mat-icon-button (click)=\"removeHeader(i)\">\n                  <mat-icon>close</mat-icon>\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n      <button mat-stroked-button (click)=\"addHeader()\" class=\"btn\">Add Header</button>\n    </div>\n    <div style=\"margin-top: 2rem; display: flex; flex-direction:column; gap: 1rem;\">\n      <div>\n        <mat-slide-toggle #failedState>Retry on Failed</mat-slide-toggle>\n        <div *ngIf=\"failedState.checked\" style=\"display: flex; gap: .5rem; margin-top: 1rem;\" formGroupName=\"retry\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>#of Times</mat-label>\n            <input matInput placeholder=\"3\" formControlName=\"times\" value=\"3\">\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Delay Until Next</mat-label>\n            <input matInput placeholder=\"3\" formControlName=\"delay\" value=\"3\">\n          </mat-form-field>\n        </div>\n      </div>\n      <div>\n        <mat-slide-toggle #pollingState>Polling</mat-slide-toggle>\n        <div *ngIf=\"pollingState.checked\">\n          <mat-form-field appearance=\"outline\" style=\"margin-top: 1rem\">\n            <mat-label>#of Seconds</mat-label>\n            <input matInput placeholder=\"3\" formControlName=\"polling\" value=\"3\">\n          </mat-form-field>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div style=\"margin-bottom: 1rem; margin-top: 2rem;\">\n    <mat-progress-bar mode=\"indeterminate\"\n      *ngIf=\"(isPending$ | async)\"\n    ></mat-progress-bar>\n    <mat-progress-bar mode=\"determinate\"\n      *ngIf=\"pollingState.checked && !(isPending$ | async)\"\n      [value]=\"(this.countdown$ | async)\"\n    ></mat-progress-bar>\n  </div>\n\n  <div style=\"margin-top: 1rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">GET Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onGetRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(GET_error$ | async) as get_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ get_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\" *ngIf=\"(GET$ | async) as dataRecord\">\n      <!-- <div [innerHTML]=\"(GET$ | async) | jsonv\"></div> -->\n      {{ dataRecord | json }}\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">POST Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onCreateRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(POST_error$ | async) as post_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ post_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\" *ngIf=\"(POST$ | async) as dataRecord\">\n      <!-- <div [innerHTML]=\"(POST$ | async) | jsonv\"></div> -->\n      {{ dataRecord | json }}\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">PUT Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onUpdateRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(PUT_error$ | async) as put_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ put_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\" *ngIf=\"(PUT$ | async) as dataRecord\">\n      <!-- <div [innerHTML]=\"(PUT$ | async) | jsonv\"></div> -->\n       {{ dataRecord | json }}\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">DELETE Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onDeleteRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(DELETE_error$ | async) as delete_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ delete_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\" *ngIf=\"(DELETE$ | async) as dataRecord\">\n      <!-- <div [innerHTML]=\"(DELETE$ | async) | jsonv\"></div> -->\n      {{ dataRecord | json }}\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">Streaming GET Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onStreamRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(STREAM_error$ | async) as stream_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ stream_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\">\n      <div *ngIf=\"(STREAM$ | async) as data\" class=\"container\">\n        <table mat-table [dataSource]=\"data\">\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=\"name\">\n            <th mat-header-cell *matHeaderCellDef> First Name </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.name}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"lastName\">\n            <th mat-header-cell *matHeaderCellDef> Last Name </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.lastName}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"age\">\n            <th mat-header-cell *matHeaderCellDef> Age </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.age}} </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n        </table>\n      </div>\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">STREAMING POST Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onStreamPostRequest()\" class=\"btn\">Ask Me</button>\n      </div>\n    </div>\n\n    <div style=\"display: flex;\">\n      <mat-form-field appearance=\"outline\" style=\"flex:1\">\n        <mat-label>Ask me a Question</mat-label>\n        <textarea matInput placeholder=\"Why is the sky blue?\" [formControl]=\"questionControl\"></textarea>\n      </mat-form-field>\n    </div>\n\n    <div *ngIf=\"(STREAM_AI_error$ | async) as stream_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ stream_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\">\n      <div *ngIf=\"(STREAM_AI$ | async) as data\">\n        <p style=\"margin-bottom: .5rem; white-space:pre-wrap;\">{{data}}</p>\n      </div>\n    </div>\n\n  </div>\n\n  <div>\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1; margin-bottom: 0; padding-top: .5rem; display: flex;\">\n        <div>\n          Download File\n        </div>\n        <div style=\"flex:1; margin-left: 1rem;\">\n          <mat-slide-toggle #disable>\n            <span *ngIf=\"disable.checked; else DISABLE\">\n              Enable\n            </span>\n            <ng-template #DISABLE>Disable</ng-template>\n          </mat-slide-toggle>\n        </div>\n      </h2>\n      <div>\n        <app-file-downloader\n          [disabled]=\"disable.checked\"\n          [delayError]=\"3\"\n          [apiRequest]=\"downloadRequest\"\n          (completed)=\"onDownloadCompleted()\"\n          (failed)=\"onDownloadFailed($event)\"\n        ></app-file-downloader>\n      </div>\n    </div>\n  </div>\n\n</div>\n", styles: [".btn{min-width:120px}.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;background-color:#f5f5f5}.container{height:400px;overflow:auto}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { failedState: [{
+                type: ViewChild,
+                args: ["failedState", { static: true }]
+            }], pollingState: [{
+                type: ViewChild,
+                args: ["pollingState", { static: true }]
+            }] } });
+
+class StateManagerDemoService extends HTTPManagerStateService {
+    constructor() {
+        super(ApiRequest.adapt({
+            server: "",
+            path: [],
+            headers: {},
+            adapter: ClientInfo.adapt,
+            mapper: ClientInfoMapper.adapt,
+            stream: false,
+        }), DataType.ARRAY, DatabaseStorage.adapt());
+    }
+    setAPIOptions(apiOptions, dataType, database) {
+        this.setApiRequestOptions(apiOptions, dataType, database);
+    }
+    getClients() {
+        // const headers = {
+        //   auth: "sample-auth-token"
+        // }
+        // const sampleOptions = RequestOptions.adapt({ path: ["id", 12], headers, sample: true })
+        this.fetchRecords();
+    }
+    createClient(data) {
+        // const headers = {
+        //   auth: "sample-auth-token"
+        // }
+        // const sampleOptions = RequestOptions.adapt({ path: ["id", 12], headers, sample: true })
+        this.createRecord(data);
+    }
+    updateClient(data) {
+        // const headers = {
+        //   auth: "sample-auth-token"
+        // }
+        data.id = 1031;
+        const sampleOptions = RequestOptions.adapt({ path: [data.id] });
+        this.updateRecord(data, sampleOptions);
+    }
+    deleteClient(data) {
+        // const headers = {
+        //   auth: "sample-auth-token"
+        // }
+        data.id = 1031;
+        const sampleOptions = RequestOptions.adapt({ path: [data.id] });
+        this.deleteRecord(sampleOptions);
+    }
+    streamRequest() {
+        const headers = {
+            auth: "sample-auth-token"
+        };
+        // const sampleOptions = RequestOptions.adapt({ path: [1], headers })
+        this.fetchStream();
+    }
+    streamAIRequest(data) {
+        const headers = {
+            auth: "sample-auth-token"
+        };
+        const sampleOptions = RequestOptions.adapt({ path: [data.id] });
+        this.createStream(data, sampleOptions);
+        // this.fetchStream(sampleOptions)
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StateManagerDemoService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StateManagerDemoService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StateManagerDemoService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class RequestManagerStateDemoComponent {
+    get dataObservable$() {
+        switch (this.requestType) {
+            case 'GET':
+                return this.GET$;
+            case 'PUT':
+                return this.PUT$;
+            case 'POST':
+                return this.POST$;
+            case 'DELETE':
+                return this.DELETE$;
+            case 'STREAM':
+                return this.STREAM;
+            case 'STREAM_AI':
+                return this.STREAM_AI;
+            default:
+                return this.GET$;
+                break;
+        }
+    }
+    get hasChanged() {
+        return this.requestForm.dirty;
+    }
+    get dataType() {
+        return this.requestForm.get("datatype")?.value;
+    }
+    get database() {
+        return this.requestForm.get("database")?.value;
+    }
+    get retry() {
+        return this.requestForm.get("retry")?.value;
+    }
+    get headers() {
+        return this.requestForm.get('headers');
+    }
+    get isValid() {
+        this.requestForm.markAllAsTouched();
+        return this.requestForm.valid;
+    }
+    constructor() {
+        this.stateManagerDemoService = inject(StateManagerDemoService);
+        this.displayedColumns = ['id', 'name', 'lastName', 'age'];
+        this.fb = inject(FormBuilder);
+        this.httpManagerService = inject(HTTPManagerService);
+        this.isPending$ = this.stateManagerDemoService.isPending$;
+        this.error$ = this.stateManagerDemoService.error$;
+        this.countdown$ = this.httpManagerService.countdown$;
+        this.GET_error$ = new BehaviorSubject('');
+        this.POST_error$ = new BehaviorSubject('');
+        this.PUT_error$ = new BehaviorSubject('');
+        this.DELETE_error$ = new BehaviorSubject('');
+        this.STREAM_error$ = new BehaviorSubject('');
+        this.GET$ = new BehaviorSubject(null);
+        this.POST$ = new BehaviorSubject(null);
+        this.PUT$ = new BehaviorSubject(null);
+        this.DELETE$ = new BehaviorSubject(null);
+        this.STREAM = new BehaviorSubject(null);
+        this.STREAM$ = this.STREAM.asObservable();
+        this.STREAM_AI = new BehaviorSubject(null);
+        this.STREAM_AI$ = this.STREAM_AI.asObservable()
+            .pipe(map((items) => (items) ? items.map((item) => item.response) : []), map((items) => items.join('').trim()));
+        this.questionControl = this.fb.control("", [Validators.required]);
+        this.requestType = '';
+        this.sampleClientData = {
+            id: 0,
+            name: "Old School Dates",
+            domain: "osd.com",
+            service: "osd",
+            spiffe: "osd.com/osd",
+            secret: "SMOPECXP-OS4P-USOG-X2II-3XMD1FQDR3IJX",
+            created: 1693003138,
+            modified: 1693003138,
+            icon: "",
+            imageFile: "",
+        };
+        this.selectedRecord = this.fb.control(null);
+        this.requestForm = this.fb.group({
+            datatype: this.fb.control('ARRAY'),
+            path: this.fb.control(""),
+            headers: this.fb.array([]),
+            adapter: [null],
+            mapper: [null],
+            retry: this.fb.group({
+                times: [3],
+                delay: [3],
+            }),
+            polling: [3],
+            database: this.fb.group({
+                table: [''],
+                expiresIn: ['1m'],
+            })
+        });
+        this.sampleAdaptors = [
+            { label: "ClientInfo Basic", value: ClientInfo.adapt },
+            { label: "AI Prompt", value: AIPrompt.adapt },
+        ];
+        this.sampleMappers = [
+            { label: "Mapper Basic", value: ClientInfoMapper.adapt },
+            { label: "AI Prompt", value: AIPrompt.adapt },
+        ];
+        // server = `http://sample-endpoint/as/authorization.oauth2`
+        this.arrayObjectsToObjects = (arr) => {
+            return Array.isArray(arr) ? arr.reduce((obj, item) => Object.assign(obj, { [item.key]: item.value }), {}) : {};
+        };
+    }
+    ngOnInit() {
+        this.selectedRecord.valueChanges
+            .subscribe((data) => {
+            this.selectedRecord$ = (data) ? this.stateManagerDemoService.selectRecord$(data.id) : EMPTY;
+        });
+        this.stateManagerDemoService.data$
+            .pipe(tap((data) => {
+            switch (this.requestType) {
+                case 'GET':
+                    this.GET$.next(data);
+                    break;
+                case 'PUT':
+                    this.PUT$.next(data);
+                    break;
+                case 'POST':
+                    this.POST$.next(data);
+                    break;
+                case 'DELETE':
+                    this.DELETE$.next(data);
+                    break;
+                case 'STREAM':
+                    this.STREAM.next(data);
+                    break;
+                case 'STREAM_AI':
+                    this.STREAM_AI.next(data);
+                    break;
+                default:
+                    break;
+            }
+        })).subscribe();
+    }
+    addHeader() {
+        const header = this.fb.group({
+            key: ['', Validators.required],
+            value: ['']
+        });
+        this.headers.push(header);
+    }
+    removeHeader(index) {
+        this.headers.removeAt(index);
+    }
+    compileRequest() {
+        const requestParams = this.requestForm.value;
+        requestParams.headers = this.arrayObjectsToObjects(requestParams.headers || []);
+        const pathReq = (requestParams.path || "").split("/");
+        if (!this.pollingState.checked)
+            requestParams.polling = 0;
+        if (!this.failedState.checked) {
+            requestParams.retry = { times: 0, delay: 0 };
+        }
+        return ApiRequest.adapt({
+            ...requestParams,
+            // ...{ path: pathReq, server: this.server },
+            ...{ path: pathReq },
+        });
+    }
+    onSetStateOptions() {
+        if (!this.isValid)
+            return;
+        const reqParams = this.compileRequest();
+        const db = DatabaseStorage.adapt(this.database);
+        const type = this.dataType === "ARRAY" ? DataType.ARRAY : DataType.OBJECT;
+        this.stateManagerDemoService.setAPIOptions(reqParams, type, db);
+        this.requestForm.markAsPristine();
+    }
+    onClearRecords() {
+        this.stateManagerDemoService.clearRecords();
+    }
+    onRefreshRecords() {
+        this.stateManagerDemoService.refreshData();
+    }
+    onGetRequest() {
+        this.requestType = 'GET';
+        this.stateManagerDemoService.getClients();
+    }
+    onCreateRequest() {
+        this.requestType = 'POST';
+        this.stateManagerDemoService.createClient(this.sampleClientData);
+    }
+    onUpdateRequest() {
+        this.requestType = 'PUT';
+        this.stateManagerDemoService.updateClient(this.sampleClientData);
+    }
+    onDeleteRequest() {
+        this.requestType = 'DELETE';
+        this.stateManagerDemoService.deleteClient(this.sampleClientData);
+    }
+    onStreamPostRequest() {
+        if (!this.isValid)
+            return;
+        this.requestType = 'STREAM_AI';
+        const reqParams = this.compileRequest();
+        reqParams.server = "http://localhost:11434/api";
+        reqParams.path = ["generate"];
+        reqParams.stream = true;
+        this.stateManagerDemoService.setAPIOptions(reqParams, DataType.ARRAY);
+        const payload = {
+            model: "mistral",
+            prompt: this.questionControl.value,
+            stream: reqParams.stream
+        };
+        this.stateManagerDemoService.streamAIRequest(payload);
+    }
+    onStreamRequest() {
+        if (!this.isValid)
+            return;
+        this.requestType = 'STREAM';
+        const reqParams = this.compileRequest();
+        reqParams.server = "oidc";
+        reqParams.stream = true;
+        this.stateManagerDemoService.setAPIOptions(reqParams, DataType.ARRAY);
+        this.stateManagerDemoService.streamRequest();
+    }
+    errorHandling(err, type) {
+        if (type === 'GET')
+            this.GET_error$.next(err.message);
+        if (type === 'POST')
+            this.POST_error$.next(err.message);
+        if (type === 'PUT')
+            this.PUT_error$.next(err.message);
+        if (type === 'DELETE')
+            this.DELETE_error$.next(err.message);
+        if (type === 'STREAM')
+            this.STREAM_error$.next(err.message);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RequestManagerStateDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RequestManagerStateDemoComponent, selector: "app-request-manager-state-demo", viewQueries: [{ propertyName: "failedState", first: true, predicate: ["failedState"], descendants: true, static: true }, { propertyName: "pollingState", first: true, predicate: ["pollingState"], descendants: true, static: true }], ngImport: i0, template: "<div style=\"margin: 2rem;\">\n\n  <h2>\n    HTTP Request State Manager\n  </h2>\n\n  <div [formGroup]=\"requestForm\" style=\"margin-top: 2rem;\">\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>State Data Type</mat-label>\n        <mat-select formControlName=\"datatype\">\n          <mat-option value=\"ARRAY\">Array</mat-option>\n          <mat-option value=\"OBJECT\">Object</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Adapter (Model)</mat-label>\n        <mat-select formControlName=\"adapter\">\n          <mat-option>None</mat-option>\n          <mat-option *ngFor=\"let adapter of sampleAdaptors\" [value]=\"adapter.value\">\n            {{adapter.label}}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Mapper (Model)</mat-label>\n        <mat-select formControlName=\"mapper\">\n          <mat-option>None</mat-option>\n          <mat-option *ngFor=\"let mapper of sampleMappers\" [value]=\"mapper.value\">\n            {{mapper.label}}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <div>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>RestPath (/ delimited)</mat-label>\n        <input matInput placeholder=\"clients/list\" formControlName=\"path\">\n      </mat-form-field>\n    </div>\n    <div>\n      <div formArrayName=\"headers\">\n        <div *ngFor=\"let task of headers.controls; let i = index\" [formGroupName]=\"i\">\n          <div style=\"display: flex; gap: .5rem\">\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Key</mat-label>\n              <input matInput placeholder=\"authentication\" formControlName=\"key\">\n            </mat-form-field>\n            <mat-form-field appearance=\"outline\" style=\"flex:1\">\n              <mat-label>Value</mat-label>\n              <input matInput placeholder=\"sample\" formControlName=\"value\">\n            </mat-form-field>\n            <div style=\"margin-top: .5rem;\">\n              <button mat-icon-button (click)=\"removeHeader(i)\">\n                  <mat-icon>close</mat-icon>\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n      <button mat-stroked-button (click)=\"addHeader()\">Add Header</button>\n    </div>\n    <div style=\"margin-top: 2rem; display: flex; flex-direction:column; gap: 1rem;\">\n      <div>\n        <mat-slide-toggle #failedState>Retry on Failed</mat-slide-toggle>\n        <div *ngIf=\"failedState.checked\" style=\"display: flex; gap: .5rem; margin-top: 1rem;\" formGroupName=\"retry\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>#of Times</mat-label>\n            <input matInput placeholder=\"3\" formControlName=\"times\" value=\"3\">\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Delay Until Next</mat-label>\n            <input matInput placeholder=\"3\" formControlName=\"delay\" value=\"3\">\n          </mat-form-field>\n        </div>\n      </div>\n      <div>\n        <mat-slide-toggle #pollingState>Polling</mat-slide-toggle>\n        <div *ngIf=\"pollingState.checked\">\n          <mat-form-field appearance=\"outline\" style=\"margin-top: 1rem\">\n            <mat-label>#of Seconds</mat-label>\n            <input matInput placeholder=\"3\" formControlName=\"polling\" value=\"3\">\n          </mat-form-field>\n        </div>\n      </div>\n      <div>\n        <mat-slide-toggle #DBState>Database Storage</mat-slide-toggle>\n        <div *ngIf=\"DBState.checked\" style=\"display: flex; gap: .5rem; margin-top: 1rem\" formGroupName=\"database\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Table Name</mat-label>\n            <input matInput placeholder=\"table\" formControlName=\"table\" value=\"\">\n          </mat-form-field>\n          <div>\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Expires In</mat-label>\n              <mat-select formControlName=\"expiresIn\">\n                <mat-option value=\"1m\">One Minute</mat-option>\n                <mat-option value=\"1h\">One Hour</mat-option>\n                <mat-option value=\"1d\">One Day</mat-option>\n              </mat-select>\n            </mat-form-field>\n          </div>\n        </div>\n      </div>\n      <div style=\"margin-top: 1rem; display: flex;\">\n        <span style=\"flex:1\"></span>\n        <button mat-stroked-button (click)=\"onSetStateOptions()\" [disabled]=\"!hasChanged\">\n          Set API Request Options\n        </button>\n      </div>\n      <div>\n        <mat-error *ngIf=\"(error$ | async) as error\">\n          {{ error | json }}\n        </mat-error>\n      </div>\n    </div>\n  </div>\n\n  <div style=\"margin-bottom: 1rem; margin-top: 2rem;\">\n    <mat-progress-bar mode=\"indeterminate\" \n      *ngIf=\"(isPending$ | async)\"\n    ></mat-progress-bar>\n    <div *ngIf=\"pollingState.checked\">\n      <mat-progress-bar mode=\"determinate\" \n      *ngIf=\"!(isPending$ | async) && (this.countdown$ | async) || -1 > 0\" \n      [value]=\"(this.countdown$ | async)\"\n      ></mat-progress-bar>\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\" *ngIf=\"(GET$ | async) as data\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1;\">CURRENT STATE ({{ dataType }})</h2>\n    </div>\n    <div *ngIf=\"data.length > 1\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Records</mat-label>\n        <mat-select [formControl]=\"selectedRecord\" [disabled]=\"data === null && data?.length === 0\">\n          <mat-option [value]=\"\">None</mat-option>\n          <mat-option *ngFor=\"let item of data\" [value]=\"item\">\n            {{item.domain}}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <div *ngIf=\"(dataObservable$ | async) as dataRecord\">\n      <div *ngIf=\"(selectedRecord$ | async) as record; else NO_RECORD\">\n        {{ record | json }}\n      </div>\n      <ng-template #NO_RECORD>No Record Selected from State</ng-template>\n      \n    </div>\n    <div style=\"margin-top: 1rem;\">\n      <span *ngIf=\"data !== null && data?.length > 0; else NO_DATA\">\n        State contains a Total of {{ data.length }} Records\n      </span>\n      <ng-template #NO_DATA>No Records</ng-template>\n      <div style=\"display: flex; gap: .5rem; text-align: end; justify-content: flex-end;\">\n        <button class=\"btn\" mat-stroked-button (click)=\"onClearRecords()\">Clear</button>\n        <button class=\"btn\" mat-stroked-button (click)=\"onRefreshRecords()\">Refresh</button>\n      </div>\n    </div>\n  </div>\n\n\n\n\n  <div style=\"margin-top: 1rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">GET Request ({{ dataType }})</h2>\n      <div>\n        <button mat-raised-button (click)=\"onGetRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(GET_error$ | async) as get_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ get_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(GET$ | async) | jsonv\"></div> -->\n      <div>{{ (GET$ | async) | json }}</div>\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">POST Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onCreateRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(POST_error$ | async) as post_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ post_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(POST$ | async) | jsonv\"></div> -->\n      <div>{{ (POST$ | async) | json }}</div>\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">PUT Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onUpdateRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(PUT_error$ | async) as put_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ put_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(PUT$ | async) | jsonv\"></div> -->\n      <div>{{ (PUT$ | async) | json }}</div>\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">DELETE Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onDeleteRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(DELETE_error$ | async) as delete_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ delete_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(DELETE$ | async) | jsonv\"></div> -->\n      <div>{{ (DELETE$ | async) | json }}</div>\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n  \n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">Streaming GET Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onStreamRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(STREAM_error$ | async) as stream_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ stream_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\">\n      <div *ngIf=\"(STREAM$ | async) as data\" class=\"container\">\n        <table mat-table [dataSource]=\"data\">\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=\"name\">\n            <th mat-header-cell *matHeaderCellDef> First Name </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.name}} </td>\n          </ng-container>\n        \n          <ng-container matColumnDef=\"lastName\">\n            <th mat-header-cell *matHeaderCellDef> Last Name </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.lastName}} </td>\n          </ng-container>\n        \n          <ng-container matColumnDef=\"age\">\n            <th mat-header-cell *matHeaderCellDef> Age </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.age}} </td>\n          </ng-container>\n        \n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n        </table>\n      </div>\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">STREAMING POST Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onStreamPostRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Ask Me</button>\n      </div>\n    </div>\n\n    <div style=\"display: flex;\">\n      <mat-form-field appearance=\"outline\" style=\"flex:1\">\n        <mat-label>Ask me a Question</mat-label>\n        <textarea matInput placeholder=\"Why is the sky blue?\" [formControl]=\"questionControl\"></textarea>\n      </mat-form-field>\n    </div>\n\n    <div *ngIf=\"(STREAM_error$ | async) as stream_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ stream_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\">\n      <div *ngIf=\"(STREAM_AI$ | async) as data\">\n        <p style=\"margin-bottom: .5rem; white-space:pre-wrap;\">{{data}}</p>\n      </div>\n    </div>\n\n  </div>\n\n</div>", styles: [".btn{min-width:120px}.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;background-color:#f5f5f5}.container{height:400px;overflow:auto}\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: 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: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], 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: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i8.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i8.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i8.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i8.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i10$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i11.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i12.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.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RequestManagerStateDemoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-request-manager-state-demo', template: "<div style=\"margin: 2rem;\">\n\n  <h2>\n    HTTP Request State Manager\n  </h2>\n\n  <div [formGroup]=\"requestForm\" style=\"margin-top: 2rem;\">\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>State Data Type</mat-label>\n        <mat-select formControlName=\"datatype\">\n          <mat-option value=\"ARRAY\">Array</mat-option>\n          <mat-option value=\"OBJECT\">Object</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Adapter (Model)</mat-label>\n        <mat-select formControlName=\"adapter\">\n          <mat-option>None</mat-option>\n          <mat-option *ngFor=\"let adapter of sampleAdaptors\" [value]=\"adapter.value\">\n            {{adapter.label}}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Mapper (Model)</mat-label>\n        <mat-select formControlName=\"mapper\">\n          <mat-option>None</mat-option>\n          <mat-option *ngFor=\"let mapper of sampleMappers\" [value]=\"mapper.value\">\n            {{mapper.label}}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <div>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>RestPath (/ delimited)</mat-label>\n        <input matInput placeholder=\"clients/list\" formControlName=\"path\">\n      </mat-form-field>\n    </div>\n    <div>\n      <div formArrayName=\"headers\">\n        <div *ngFor=\"let task of headers.controls; let i = index\" [formGroupName]=\"i\">\n          <div style=\"display: flex; gap: .5rem\">\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Key</mat-label>\n              <input matInput placeholder=\"authentication\" formControlName=\"key\">\n            </mat-form-field>\n            <mat-form-field appearance=\"outline\" style=\"flex:1\">\n              <mat-label>Value</mat-label>\n              <input matInput placeholder=\"sample\" formControlName=\"value\">\n            </mat-form-field>\n            <div style=\"margin-top: .5rem;\">\n              <button mat-icon-button (click)=\"removeHeader(i)\">\n                  <mat-icon>close</mat-icon>\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n      <button mat-stroked-button (click)=\"addHeader()\">Add Header</button>\n    </div>\n    <div style=\"margin-top: 2rem; display: flex; flex-direction:column; gap: 1rem;\">\n      <div>\n        <mat-slide-toggle #failedState>Retry on Failed</mat-slide-toggle>\n        <div *ngIf=\"failedState.checked\" style=\"display: flex; gap: .5rem; margin-top: 1rem;\" formGroupName=\"retry\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>#of Times</mat-label>\n            <input matInput placeholder=\"3\" formControlName=\"times\" value=\"3\">\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Delay Until Next</mat-label>\n            <input matInput placeholder=\"3\" formControlName=\"delay\" value=\"3\">\n          </mat-form-field>\n        </div>\n      </div>\n      <div>\n        <mat-slide-toggle #pollingState>Polling</mat-slide-toggle>\n        <div *ngIf=\"pollingState.checked\">\n          <mat-form-field appearance=\"outline\" style=\"margin-top: 1rem\">\n            <mat-label>#of Seconds</mat-label>\n            <input matInput placeholder=\"3\" formControlName=\"polling\" value=\"3\">\n          </mat-form-field>\n        </div>\n      </div>\n      <div>\n        <mat-slide-toggle #DBState>Database Storage</mat-slide-toggle>\n        <div *ngIf=\"DBState.checked\" style=\"display: flex; gap: .5rem; margin-top: 1rem\" formGroupName=\"database\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Table Name</mat-label>\n            <input matInput placeholder=\"table\" formControlName=\"table\" value=\"\">\n          </mat-form-field>\n          <div>\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Expires In</mat-label>\n              <mat-select formControlName=\"expiresIn\">\n                <mat-option value=\"1m\">One Minute</mat-option>\n                <mat-option value=\"1h\">One Hour</mat-option>\n                <mat-option value=\"1d\">One Day</mat-option>\n              </mat-select>\n            </mat-form-field>\n          </div>\n        </div>\n      </div>\n      <div style=\"margin-top: 1rem; display: flex;\">\n        <span style=\"flex:1\"></span>\n        <button mat-stroked-button (click)=\"onSetStateOptions()\" [disabled]=\"!hasChanged\">\n          Set API Request Options\n        </button>\n      </div>\n      <div>\n        <mat-error *ngIf=\"(error$ | async) as error\">\n          {{ error | json }}\n        </mat-error>\n      </div>\n    </div>\n  </div>\n\n  <div style=\"margin-bottom: 1rem; margin-top: 2rem;\">\n    <mat-progress-bar mode=\"indeterminate\" \n      *ngIf=\"(isPending$ | async)\"\n    ></mat-progress-bar>\n    <div *ngIf=\"pollingState.checked\">\n      <mat-progress-bar mode=\"determinate\" \n      *ngIf=\"!(isPending$ | async) && (this.countdown$ | async) || -1 > 0\" \n      [value]=\"(this.countdown$ | async)\"\n      ></mat-progress-bar>\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\" *ngIf=\"(GET$ | async) as data\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1;\">CURRENT STATE ({{ dataType }})</h2>\n    </div>\n    <div *ngIf=\"data.length > 1\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Records</mat-label>\n        <mat-select [formControl]=\"selectedRecord\" [disabled]=\"data === null && data?.length === 0\">\n          <mat-option [value]=\"\">None</mat-option>\n          <mat-option *ngFor=\"let item of data\" [value]=\"item\">\n            {{item.domain}}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <div *ngIf=\"(dataObservable$ | async) as dataRecord\">\n      <div *ngIf=\"(selectedRecord$ | async) as record; else NO_RECORD\">\n        {{ record | json }}\n      </div>\n      <ng-template #NO_RECORD>No Record Selected from State</ng-template>\n      \n    </div>\n    <div style=\"margin-top: 1rem;\">\n      <span *ngIf=\"data !== null && data?.length > 0; else NO_DATA\">\n        State contains a Total of {{ data.length }} Records\n      </span>\n      <ng-template #NO_DATA>No Records</ng-template>\n      <div style=\"display: flex; gap: .5rem; text-align: end; justify-content: flex-end;\">\n        <button class=\"btn\" mat-stroked-button (click)=\"onClearRecords()\">Clear</button>\n        <button class=\"btn\" mat-stroked-button (click)=\"onRefreshRecords()\">Refresh</button>\n      </div>\n    </div>\n  </div>\n\n\n\n\n  <div style=\"margin-top: 1rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">GET Request ({{ dataType }})</h2>\n      <div>\n        <button mat-raised-button (click)=\"onGetRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(GET_error$ | async) as get_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ get_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(GET$ | async) | jsonv\"></div> -->\n      <div>{{ (GET$ | async) | json }}</div>\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">POST Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onCreateRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(POST_error$ | async) as post_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ post_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(POST$ | async) | jsonv\"></div> -->\n      <div>{{ (POST$ | async) | json }}</div>\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">PUT Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onUpdateRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(PUT_error$ | async) as put_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ put_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(PUT$ | async) | jsonv\"></div> -->\n      <div>{{ (PUT$ | async) | json }}</div>\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">DELETE Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onDeleteRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(DELETE_error$ | async) as delete_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ delete_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(DELETE$ | async) | jsonv\"></div> -->\n      <div>{{ (DELETE$ | async) | json }}</div>\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n  \n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">Streaming GET Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onStreamRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(STREAM_error$ | async) as stream_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ stream_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\">\n      <div *ngIf=\"(STREAM$ | async) as data\" class=\"container\">\n        <table mat-table [dataSource]=\"data\">\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=\"name\">\n            <th mat-header-cell *matHeaderCellDef> First Name </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.name}} </td>\n          </ng-container>\n        \n          <ng-container matColumnDef=\"lastName\">\n            <th mat-header-cell *matHeaderCellDef> Last Name </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.lastName}} </td>\n          </ng-container>\n        \n          <ng-container matColumnDef=\"age\">\n            <th mat-header-cell *matHeaderCellDef> Age </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.age}} </td>\n          </ng-container>\n        \n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n        </table>\n      </div>\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">STREAMING POST Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onStreamPostRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Ask Me</button>\n      </div>\n    </div>\n\n    <div style=\"display: flex;\">\n      <mat-form-field appearance=\"outline\" style=\"flex:1\">\n        <mat-label>Ask me a Question</mat-label>\n        <textarea matInput placeholder=\"Why is the sky blue?\" [formControl]=\"questionControl\"></textarea>\n      </mat-form-field>\n    </div>\n\n    <div *ngIf=\"(STREAM_error$ | async) as stream_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ stream_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\">\n      <div *ngIf=\"(STREAM_AI$ | async) as data\">\n        <p style=\"margin-bottom: .5rem; white-space:pre-wrap;\">{{data}}</p>\n      </div>\n    </div>\n\n  </div>\n\n</div>", styles: [".btn{min-width:120px}.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;background-color:#f5f5f5}.container{height:400px;overflow:auto}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { failedState: [{
+                type: ViewChild,
+                args: ["failedState", { static: true }]
+            }], pollingState: [{
+                type: ViewChild,
+                args: ["pollingState", { static: true }]
+            }] } });
+
+class HttpRequestManagerModule {
+    static forRoot(config = ConfigOptions.adapt()) {
+        return {
+            ngModule: HttpRequestManagerModule,
+            providers: [
+                { provide: CONFIG_SETTINGS_TOKEN, useValue: ConfigOptions.adapt(config) },
+                HTTPManagerService, LocalStorageManagerService //all services that need access to config
+            ],
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HttpRequestManagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: HttpRequestManagerModule, declarations: [HttpRequestServicesDemoComponent,
+            RequestManagerStateDemoComponent,
+            RequestManagerDemoComponent,
+            LocalStorageDemoComponent
+            // DatabaseDataDemoComponent,
+        ], imports: [CommonModule,
+            ToastMessageModule,
+            FormsModule,
+            ReactiveFormsModule,
+            MatButtonModule,
+            MatSelectModule,
+            MatChipsModule,
+            MatMenuModule,
+            MatIconModule,
+            MatTableModule,
+            MatToolbarModule,
+            MatButtonToggleModule,
+            MatAutocompleteModule,
+            MatProgressBarModule,
+            MatSlideToggleModule,
+            MatDividerModule,
+            MatFormFieldModule,
+            MatInputModule,
+            MatSlideToggleModule, i1.TranslateModule, MatSidenavModule,
+            FileDownloaderModule], exports: [HttpRequestServicesDemoComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HttpRequestManagerModule, providers: [
+            { provide: HTTP_INTERCEPTORS, useClass: WithCredentialsInterceptor, multi: true },
+            { provide: HTTP_INTERCEPTORS, useClass: RequestHeadersInterceptor, multi: true },
+            { provide: HTTP_INTERCEPTORS, useClass: ProxyDebuggerInterceptor, multi: true },
+            { provide: CONFIG_SETTINGS_TOKEN, useValue: ConfigOptions.adapt() },
+            HTTPManagerService, LocalStorageManagerService
+        ], imports: [CommonModule,
+            ToastMessageModule,
+            FormsModule,
+            ReactiveFormsModule,
+            MatButtonModule,
+            MatSelectModule,
+            MatChipsModule,
+            MatMenuModule,
+            MatIconModule,
+            MatTableModule,
+            MatToolbarModule,
+            MatButtonToggleModule,
+            MatAutocompleteModule,
+            MatProgressBarModule,
+            MatSlideToggleModule,
+            MatDividerModule,
+            MatFormFieldModule,
+            MatInputModule,
+            MatSlideToggleModule,
+            TranslateModule.forRoot(),
+            MatSidenavModule,
+            FileDownloaderModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HttpRequestManagerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        ToastMessageModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MatButtonModule,
+                        MatSelectModule,
+                        MatChipsModule,
+                        MatMenuModule,
+                        MatIconModule,
+                        MatTableModule,
+                        MatToolbarModule,
+                        MatButtonToggleModule,
+                        MatAutocompleteModule,
+                        MatProgressBarModule,
+                        MatSlideToggleModule,
+                        MatDividerModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatSlideToggleModule,
+                        TranslateModule.forRoot(),
+                        MatSidenavModule,
+                        FileDownloaderModule,
+                    ],
+                    declarations: [
+                        HttpRequestServicesDemoComponent,
+                        RequestManagerStateDemoComponent,
+                        RequestManagerDemoComponent,
+                        LocalStorageDemoComponent
+                        // DatabaseDataDemoComponent,
+                    ],
+                    exports: [
+                        HttpRequestServicesDemoComponent,
+                    ],
+                    providers: [
+                        { provide: HTTP_INTERCEPTORS, useClass: WithCredentialsInterceptor, multi: true },
+                        { provide: HTTP_INTERCEPTORS, useClass: RequestHeadersInterceptor, multi: true },
+                        { provide: HTTP_INTERCEPTORS, useClass: ProxyDebuggerInterceptor, multi: true },
+                        { provide: CONFIG_SETTINGS_TOKEN, useValue: ConfigOptions.adapt() },
+                        HTTPManagerService, LocalStorageManagerService
+                    ],
+                }]
+        }] });
+
+class HttpRequestServicesDemoComponent {
+    constructor(configOptions) {
+        this.configOptions = configOptions;
+        this.requestTypes = [
+            { name: "Http Service", value: 'http_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' },
+        ];
+        this.selectedService = this.requestTypes[0].value;
+    }
+    ngOnInit() {
+        if (this.configOptions)
+            this.injectionOptions = this.configOptions;
+    }
+    onSelected(type) {
+        this.selectedService = this.requestTypes[type].value;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HttpRequestServicesDemoComponent, deps: [{ token: CONFIG_SETTINGS_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: HttpRequestServicesDemoComponent, selector: "app-http-request-services-demo", ngImport: i0, template: "<mat-toolbar  style=\"display:flex\">\n  <div>Global Data</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]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i3$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i4$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i11.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { 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" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HttpRequestServicesDemoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-http-request-services-demo', template: "<mat-toolbar  style=\"display:flex\">\n  <div>Global Data</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"] }]
+        }], ctorParameters: function () { return [{ type: ConfigOptions, decorators: [{
+                    type: Inject,
+                    args: [CONFIG_SETTINGS_TOKEN]
+                }] }]; } });
+
 /*
  * Public API Surface of http-request-manager
  */
@@ -1711,5 +3058,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ApiRequest, AppService, AsymmetricalEncryptionService, DataType, DatabaseStorage, ErrorDisplaySettings, GlobalStoreOptions, HTTPManagerService, HTTPManagerStateService, HeadersService, LocalStorageManagerService, PathQueryService, Random, RandomNumber, RandomNumbers, RandomNumbersUnique, RandomSignature, RandomStr, RequestErrorInterceptor, RequestHeadersInterceptor, RequestOptions, RetryOptions, SettingOptions, StorageData, StorageOption, StorageOptionSettings, StorageType, SymmetricalEncryptionService, UUID, UtilsService, WithCredentialsInterceptor, countdown, delayedRetry, requestPolling, requestStreaming };
+export { ApiRequest, AppService, AsymmetricalEncryptionService, ConfigHTTPOptions, ConfigOptions, DataType, DatabaseStorage, ErrorDisplaySettings, GlobalStoreOptions, HTTPManagerService, HTTPManagerStateService, HeadersService, HttpRequestManagerModule, HttpRequestServicesDemoComponent, LocalStorageManagerService, LocalStorageOptions, PathQueryService, Random, RandomNumber, RandomNumbers, RandomNumbersUnique, RandomSignature, RandomStr, RequestErrorInterceptor, RequestHeadersInterceptor, RequestOptions, RetryOptions, SettingOptions, StorageData, StorageOption, StorageType, SymmetricalEncryptionService, UUID, UtilsService, WithCredentialsInterceptor, countdown, delayedRetry, requestPolling, requestStreaming };
 //# sourceMappingURL=http-request-manager.mjs.map