http-request-manager 15.0.26 → 18.0.1

package/fesm2022/http-request-manager.mjs

@@ -0,0 +1,3444 @@
+import * as i0 from '@angular/core';
+import { inject, Injectable, APP_ID, Inject, InjectionToken, Injector, Optional, EventEmitter, Component, ViewEncapsulation, Input, Output, ViewChild, NgModule } from '@angular/core';
+import { ComponentStore } from '@ngrx/component-store';
+import { map, catchError, filter, delay, finalize, takeWhile, retry, startWith, tap, mergeMap, takeUntil, withLatestFrom, switchMap, concatMap, scan, distinctUntilChanged } from 'rxjs/operators';
+import { HttpClient, HttpHeaders, HttpEventType, HttpHeaderResponse, HttpErrorResponse, HTTP_INTERCEPTORS } from '@angular/common/http';
+import * as CryptoJS from 'crypto-js';
+import { from, BehaviorSubject, EMPTY, throwError, defer, interval, timer, Subject, of, Subscription, catchError as catchError$1, map as map$1, tap as tap$1 } from 'rxjs';
+import { ToastMessageDisplayService, ToastDisplay, ToastColors, ToastMessageDisplayModule } from 'toast-message-display';
+import * as i1 from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
+import * as i2 from '@angular/forms';
+import { FormBuilder, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i1$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i3$1 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i4 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i5 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i6 from '@angular/material/core';
+import * as i7 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import * as i8 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i9 from '@angular/material/table';
+import { MatTableModule } from '@angular/material/table';
+import * as i10 from '@angular/material/progress-bar';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import * as i11 from '@angular/material/slide-toggle';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import * as i12 from '@angular/material/divider';
+import { MatDividerModule } from '@angular/material/divider';
+import * as i13 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i3 from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import * as i10$1 from '@angular/material/button-toggle';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import * as i5$1 from '@angular/material/toolbar';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import Dexie from 'dexie';
+
+var StorageType;
+(function (StorageType) {
+    StorageType[StorageType["GLOBAL"] = 0] = "GLOBAL";
+    StorageType[StorageType["SESSION"] = 1] = "SESSION";
+    StorageType[StorageType["DB"] = 2] = "DB";
+})(StorageType || (StorageType = {}));
+
+class SettingOptions {
+    constructor(storage, 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 StorageOption {
+    constructor(id, name = 'untitled', options) {
+        this.id = id;
+        this.name = name;
+        this.options = options;
+    }
+    static adapt(item) {
+        return new StorageOption((item?.id) ? item.id : crypto.randomUUID(), item?.name, (item?.options) ? SettingOptions.adapt(item.options) : SettingOptions.adapt());
+    }
+}
+
+class GlobalStoreOptions {
+    constructor(encryption = false, expiresIn, expires, stores = []) {
+        this.encryption = encryption;
+        this.expiresIn = expiresIn;
+        this.expires = expires;
+        this.stores = stores;
+    }
+    static adapt(item) {
+        return new GlobalStoreOptions((item?.encryption) ? item.encryption : false, (item?.expiresIn) ? item.expiresIn : '', (item?.expires) ? item.expires : 0, (item?.stores) ? item.stores.map((item) => StorageOption.adapt(item)) : []);
+    }
+}
+
+class StorageData {
+    constructor(id, data) {
+        this.id = id;
+        this.data = data;
+    }
+    static adapt(item) {
+        return new StorageData((item?.id) ? item.id : crypto.randomUUID(), (item?.data) ? item.data : null);
+    }
+}
+
+class UtilsService {
+    constructor() {
+        this.http = inject(HttpClient);
+        this.lc = (str) => str.toLowerCase().replace(/[^\w\s]/g, '').replace(/\s+/g, '_');
+    }
+    isString(x) {
+        return Object.prototype.toString.call(x) === '[object String]';
+    }
+    isObject(obj) {
+        return Object.prototype.toString.call(obj) === '[object Object]';
+    }
+    JSONToString(value) {
+        return (this.isObject(value)) ? JSON.stringify(value) : value;
+    }
+    stringToJSON(value) {
+        return (this.isJSON(value)) ? JSON.parse(value) : value;
+    }
+    isJSON(str) {
+        try {
+            JSON.parse(str);
+        }
+        catch (e) {
+            return false;
+        }
+        return true;
+    }
+    getValueByProp(obj, prop) {
+        if (typeof obj === 'undefined')
+            return false;
+        return obj[prop];
+    }
+    objectsEqual(x, y) {
+        const ok = Object.keys, tx = typeof x, ty = typeof y;
+        return x && y && tx === 'object' && tx === ty ? (ok(x).length === ok(y).length &&
+            ok(x).every((key) => this.objectsEqual(x[key], y[key]))) : (x === y);
+    }
+    getJSON(file) {
+        return this.http.get(`assets/data/${file}`);
+    }
+    get today() {
+        return new Date().getMilliseconds() / 1000;
+    }
+    base32ToHex(base32) {
+        const base32chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ234567";
+        const charToValue = (char) => base32chars.indexOf(char.toUpperCase());
+        let bits = '';
+        let hex = '';
+        for (let i = 0; i < base32.length; i++) {
+            const val = charToValue(base32.charAt(i));
+            bits += val.toString(2).padStart(5, '0');
+        }
+        for (let i = 0; i + 4 <= bits.length; i += 4) {
+            const chunk = bits.substr(i, 4);
+            hex += parseInt(chunk, 2).toString(16);
+        }
+        return hex.toUpperCase();
+    }
+    binaryToHex(binary) {
+        let hex = '';
+        for (let i = 0; i < binary.length; i += 8) {
+            const byte = binary.substr(i, 8);
+            const decimal = parseInt(byte, 2);
+            hex += decimal.toString(16).padStart(2, '0');
+        }
+        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;
+        const match = str.match(/[^0-9]+$/);
+        const type = (match) ? str.slice(-match[0].length) : 0;
+        const now = Math.floor(new Date().getTime() / 1000);
+        let value = 0;
+        switch (type) {
+            case 'y':
+                const years = parseInt(str.slice(0, -1));
+                value = now + (years * 31556926);
+                break;
+            case 'm':
+                const months = parseInt(str.slice(0, -1));
+                value = now + (months * 2629743);
+                break;
+            case 'w':
+                const weeks = parseInt(str.slice(0, -1));
+                value = now + (weeks * 604800);
+                break;
+            case 'd':
+                const days = parseInt(str.slice(0, -1));
+                value = now + (days * 86400);
+                break;
+            case 'hr':
+                const hrs = parseInt(str.slice(0, -2));
+                value = now + (hrs * 3600);
+                break;
+            case 'mn':
+                const min = parseInt(str.slice(0, -2));
+                value = now + (min * 60);
+                break;
+            default: //seconds
+                const sec = parseInt(str.slice(0, -1));
+                value = now + (sec);
+                break;
+        }
+        return value;
+    }
+    hasExpired(expiryDate) {
+        if (!expiryDate || expiryDate === 0)
+            return false;
+        const currentTime = Math.floor(new Date().getTime() / 1000);
+        return expiryDate < currentTime;
+    }
+    hasExpiry(setting) {
+        return (setting?.expires) ? true : false;
+    }
+    expiresIn(expiryDate) {
+        if (!expiryDate)
+            return;
+        const now = Math.floor(new Date().getTime() / 1000);
+        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' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UtilsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return []; } });
+
+const Random = () => {
+    const typedArray = new Uint8Array(1);
+    const randomValue = crypto.getRandomValues(typedArray)[0];
+    const randomFloat = randomValue / Math.pow(2, 8);
+    return randomFloat;
+};
+const RandomNumber = (min, max) => {
+    return Math.floor(Random() * max) + min;
+};
+const RandomNumbers = (min, max, length) => {
+    const numbers = [];
+    for (let i = 0; i < length; i++)
+        numbers.push(Math.floor(Random() * max) + min);
+    return numbers;
+};
+const RandomNumbersUnique = (min, max, length) => {
+    let count = 0;
+    // Adjust the length if it exceeds the number of unique numbers possible in the range
+    if (length > (max - min + 1)) {
+        console.error('error encountered');
+        length = max - min + 1;
+    }
+    console.log('length', length);
+    const numbers = [];
+    const maxAttempts = length * 100; // Safeguard to prevent infinite loops
+    while (numbers.length < length && count < maxAttempts) {
+        const num = Math.floor(Random() * max) + min;
+        if (!numbers.includes(num)) {
+            numbers.push(num);
+        }
+    }
+    if (count >= maxAttempts) {
+        throw new Error('Maximum attempts exceeded while generating unique numbers');
+    }
+    return numbers;
+};
+const RandomStr = () => {
+    const typedArray = new Uint8Array(8);
+    const array = new Uint32Array(1);
+    crypto.getRandomValues(array);
+    return array[0].toString(36);
+};
+const RandomSignature = () => {
+    const typedArray = new Uint8Array(8);
+    const array = new Uint32Array(1);
+    crypto.getRandomValues(array);
+    return array[0];
+};
+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;
+        this.appID = this.id;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppService, deps: [{ token: APP_ID }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [APP_ID]
+                }] }]; } });
+
+class SymmetricalEncryptionService {
+    constructor() {
+        this.appService = inject(AppService);
+        // TODO: The APP ID is not a string, it is a function
+        this.appID = (this.appService.appID) ? this.appService.appID : '';
+        if (this.appID === '')
+            console.warn('No App Key has been define');
+    }
+    generateCipherKey() {
+        return (RandomSignature().toString() + RandomSignature().toString()).substring(0, 8);
+    }
+    encrypt(str, key = this.appID) {
+        if (!str || key === '')
+            return '';
+        let _key = CryptoJS.enc.Utf8.parse(key);
+        let _iv = CryptoJS.enc.Utf8.parse(key);
+        try {
+            const encrypted = CryptoJS.AES.encrypt(JSON.stringify(str), _key, {
+                keySize: 16,
+                iv: _iv,
+                mode: CryptoJS.mode.ECB,
+                padding: CryptoJS.pad.Pkcs7
+            });
+            return encrypted.toString();
+        }
+        catch (error) {
+            console.log(error);
+        }
+        return;
+    }
+    decrypt(str, key = this.appID) {
+        if (!str || key === '')
+            return;
+        let _key = CryptoJS.enc.Utf8.parse(key);
+        let _iv = CryptoJS.enc.Utf8.parse(key);
+        try {
+            return CryptoJS.AES.decrypt(str, _key, {
+                keySize: 16,
+                iv: _iv,
+                mode: CryptoJS.mode.ECB,
+                padding: CryptoJS.pad.Pkcs7
+            }).toString(CryptoJS.enc.Utf8);
+        }
+        catch (error) {
+            console.log(error);
+        }
+        return;
+    }
+    createSignature(url, len = 16) {
+        const sig = CryptoJS.SHA256(url).toString(CryptoJS.enc.Hex);
+        return sig.substring(0, len).toUpperCase();
+    }
+    normalizeURL(url) {
+        const normalizedURL = url.replace(/(https?:\/\/)?(www\.)?/, '').replace(/\/+$/, '');
+        return normalizedURL;
+    }
+    generateSignature(url) {
+        const normalizedURL = this.normalizeURL(url);
+        const hash = CryptoJS.SHA256(normalizedURL);
+        const signature = hash.toString(CryptoJS.enc.Hex);
+        return signature;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SymmetricalEncryptionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SymmetricalEncryptionService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SymmetricalEncryptionService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class EncryptionTestService {
+    constructor() { }
+    isBase64(str) {
+        const base64Pattern = /^(?:[A-Z0-9+/]{4})*(?:[A-Z0-9+/]{2}==|[A-Z0-9+/]{3}=)?$/i;
+        return base64Pattern.test(str);
+    }
+    isHexadecimal(str) {
+        const hexPattern = /^[0-9a-fA-F]+$/;
+        return hexPattern.test(str) && (str.length % 2 === 0);
+    }
+    hasHighEntropy(str) {
+        const uniqueChars = new Set(str).size;
+        return uniqueChars > str.length * 0.6;
+    }
+    isEncrypted(str) {
+        if (typeof str !== 'string') {
+            return false;
+        }
+        if (this.isBase64(str) || this.isHexadecimal(str)) {
+            return true;
+        }
+        return this.hasHighEntropy(str);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EncryptionTestService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EncryptionTestService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EncryptionTestService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return []; } });
+
+/**
+ * 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 HeadersService {
+    constructor() {
+        this.headers = {};
+    }
+    generateHeaders(headers) {
+        const allHeaders = headers ? { ...this.headers, ...headers } : {};
+        return { headers: new HttpHeaders(allHeaders) };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeadersService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeadersService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeadersService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class PathQueryService {
+    constructor() {
+        this.removeEmptyParams = (obj) => Object.fromEntries(Object.entries(obj)
+            .map(([key, value]) => [key, value && typeof value === 'object' ? this.removeEmptyParams(value) : value])
+            .filter(([_, value]) => value !== undefined && value !== ""));
+    }
+    buildAPIPath(server, params) {
+        server = (Array.isArray(server)) ? server.join('/') : server;
+        const pathObjects = (params) ? params.filter((path) => (!this.isObject(path))) : [];
+        const queryObjects = (params) ? params.filter((path) => (this.isObject(path))) : [];
+        const query = this.removeEmptyParams(queryObjects.reduce((r, c) => {
+            Object.entries(c).forEach(([key, value]) => {
+                r[key] = Array.isArray(value) ? value.join(',') : value;
+            });
+            return r;
+        }, {}));
+        let path = this.buildRestPath(server, pathObjects);
+        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('/'));
+    }
+    buildQueryPath(params) {
+        const searchParams = new URLSearchParams();
+        for (const key in params) {
+            if (Array.isArray(params[key])) {
+                params[key].forEach((value) => searchParams.append(key, value));
+            }
+            else {
+                searchParams.append(key, params[key]);
+            }
+        }
+        return searchParams.toString();
+    }
+    cleanUrlPath(str) {
+        return str.replace(/([^:]\/)\/+/g, "$1").replace(/\/$/, '');
+    }
+    isObject(val) {
+        return (val === null) ? false : ((typeof val === 'function') || (typeof val === 'object'));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PathQueryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PathQueryService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PathQueryService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class AsymmetricalEncryptionService {
+    constructor() { }
+    generateKeyPair(modulusLength = 2048) {
+        // modulusLength - 1024, 2048, 4096
+        // hash - SHA-256
+        return from(crypto.subtle.generateKey({
+            name: "RSA-OAEP",
+            modulusLength,
+            publicExponent: new Uint8Array([1, 0, 1]),
+            hash: { name: "SHA-256" }
+        }, true, // Extractable keys
+        ["encrypt", "decrypt"]));
+    }
+    encryptData(publicKey, data) {
+        const encodedData = new TextEncoder().encode(data);
+        return from(crypto.subtle.encrypt({
+            name: "RSA-OAEP"
+        }, publicKey, encodedData)).pipe(map(enc => this.arrayBufferToBase64(enc)));
+    }
+    decryptData(privateKey, encryptedData) {
+        const encStr = this.base64ToArrayBuffer(encryptedData);
+        return from(crypto.subtle.decrypt({
+            name: "RSA-OAEP"
+        }, privateKey, encStr).then(decryptedData => {
+            return new TextDecoder().decode(decryptedData);
+        }));
+    }
+    pemToArrayBuffer(pem) {
+        const b64 = pem.replace(/(-----BEGIN (RSA )?(PRIVATE|PUBLIC) KEY-----|-----END (RSA )?(PRIVATE|PUBLIC) KEY-----|\n)/g, '');
+        const binaryString = atob(b64);
+        const len = binaryString.length;
+        const buffer = new ArrayBuffer(len);
+        const view = new Uint8Array(buffer);
+        for (let i = 0; i < len; i++) {
+            view[i] = binaryString.charCodeAt(i);
+        }
+        return buffer;
+    }
+    base64ToArrayBuffer(base64) {
+        const binaryString = atob(base64);
+        const len = binaryString.length;
+        const buffer = new ArrayBuffer(len);
+        const view = new Uint8Array(buffer);
+        for (let i = 0; i < len; i++) {
+            view[i] = binaryString.charCodeAt(i);
+        }
+        return buffer;
+    }
+    arrayBufferToBase64(buffer) {
+        let binary = '';
+        const bytes = new Uint8Array(buffer);
+        const len = bytes.byteLength;
+        for (let i = 0; i < len; i++) {
+            binary += String.fromCharCode(bytes[i]);
+        }
+        return window.btoa(binary);
+    }
+    base64ToPEM(base64Key, publicKey = true) {
+        const keyType = (publicKey) ? 'PUBLIC' : 'PRIVATE';
+        const header = `-----BEGIN ${keyType} KEY-----\n`;
+        const footer = `\n-----END ${keyType} KEY-----`;
+        const keyBody = base64Key.match(/.{1,64}/g)?.join("\n") || "";
+        return header + keyBody + footer;
+    }
+    pemToCryptoKey(pem, algorithm, extractable, keyUsages, format = "pkcs8" //"raw" | "pkcs8" | "spki"
+    ) {
+        const buffer = this.pemToArrayBuffer(pem);
+        console.log('buffer found ', buffer);
+        return from(crypto.subtle.importKey(format, buffer, algorithm, extractable, keyUsages));
+    }
+    // TESTING
+    testGenerateKeys() {
+        const testSequence = new BehaviorSubject("");
+        const testSequence$ = testSequence.asObservable();
+        testSequence.next("Test Generating Keys");
+        // GENERATE KEYS
+        this.generateKeyPair().subscribe((data) => {
+            console.log("GEN-GENERATED KEYS: ", data);
+            crypto.subtle.exportKey('spki', data.publicKey)
+                .then(key => {
+                const publicKeyBase64 = this.arrayBufferToBase64(key);
+                console.log("GEN-EXPORT PUBLIC KEY: ", this.base64ToPEM(publicKeyBase64, true));
+            });
+            crypto.subtle.exportKey('pkcs8', data.privateKey)
+                .then(key => {
+                const privateKeyBase64 = this.arrayBufferToBase64(key);
+                console.log("GEN-EXPORT PRIVATE KEY: ", this.base64ToPEM(privateKeyBase64, false));
+            });
+            // TEST WITH GENERATED KEYS
+            this.encryptData(data.publicKey, "Sample Data here - Mike Bonifacio")
+                .subscribe((enc) => {
+                console.log("GEN-ENCRYPT==>: ", enc);
+                this.decryptData(data.privateKey, enc).subscribe((dec) => {
+                    testSequence.next('Test Passed');
+                    testSequence.complete();
+                });
+            });
+        });
+        return testSequence$;
+    }
+    testDecryptionWithKeys() {
+        const testSequence = new BehaviorSubject("");
+        const testSequence$ = testSequence.asObservable();
+        testSequence.next("Test Generating Keys");
+        const privateKey = `-----BEGIN PRIVATE KEY-----
+    MIIEvwIBADANBgkqhkiG9w0BAQEFAASCBKkwggSlAgEAAoIBAQDKVBkCWNb9eHVF
+    twAA5mdAyvXFix3WavdrsoYRkvtCl8ogDBQf8f6N0bRkDF1zcVHRrNAEyozXDtuD
+    kFgSiivBFREI7fiS3sOvduq6FaGXzX0IY6oaVMu8oOPgDvC0yvoohR+0Qxq2d6lP
+    SPyHeKQaxP4KxzCJJzB1XAcbd2eFzUUDv25mNlwdVkmW8FI/sAxnJLgPTW78dzfX
+    Ddfk+nxdIqxVKSLATnL0kMN7aGJx24UozioAIpzvvvF5/+7HTd1gi6NeCqrAYr3g
+    iP364AE26CFwFvHnafO9uNQhlQ+uiNnOoInXByfFGVP+RidSpfLzaxDjs6RDwpol
+    h098btONAgMBAAECggEAAVhHM2OD5IkUtuowwcKNaCTKGmrClRE3gMuzJeBsSJEy
+    uAReUFILZylcnhegDytSti2vDA9T7xqtO6CU0p3V8LpU89JMOPRb/deirI4UXSpx
+    xbNyjirOO6bnrNlOWfKexdQQsikYPzF2iM1Scpr1u9ZDCHZOl1ZYSrkve5My4coP
+    3Gx6tTBqL0jQBfcpf4ES8BH3JSawR/MgqzDS74+bI2VH+kvuPAC1L4fBgaV3VUv0
+    nFzim5A3s5VaXPgJbEIghP9BkYGFkeT9ma3nliEZWc96AzsmowFn1ayCvrNVPo9R
+    ECD2NnttBiCJZt3H93sR9+OTeA8Bls+aZGlKd5mLAQKBgQDpf8nIYUm/Zmls7/lQ
+    QBUSGHEYrbjNsEejQsPgNDtg2EVSxdUkvTn7Wb+HExTk09Z5bNvhaO2532/FH9y8
+    ahSXafiMXpfR2olwXdOB9yXXl4F5C0LGnmzGim4OSeWzAX0JCL470KaS0QN3EmoG
+    9F0YCfMnZXNTweSSx4xvlO6ggQKBgQDd01uIolm7z1DIWCwNERAXP2GDwcvxyzYK
+    YqJfKDeHt2t6yIzZMMotnPDy+OlcdGspIIHkB5a+SZN5Nt7DUKg/MnyOZ3KbVq41
+    k7dR4Ka3LRnGkesy7lSr7ef1rfquyR75OXJQcPWvkFcLu0TMiQhvptatZ8VN+F4n
+    fDQELRotDQKBgQCgN+AUT7VT0QjcCBnRV/ddUEoiPenFsYSmYMSYzh5ESIHg1wB2
+    0iS79Iw4Of6nOTg8X1bM57vfQ5Kk90T2P+/bKYqzfqC8DTErWiYsUpKzyTC9Bt4N
+    /Vz0Kr5zrX8ggg/yp/4oevYhXav8AzWfigNq4EDpMnKc8TlPAf+5/L50gQKBgQC2
+    mLPhPhr1gUszD3l7bA89w7uGlLFHoQoj9FtKTzWervp3QLzIT+QtNeIVb5XQuDg5
+    y3uAdEq+6pvNjMBEMJG+K9Xh9v+dJPYUPjsJ2A4D/MkZ7qWX8B2cxSJK1uLim8W2
+    S3ZxBvsGgJ9WldmlMCvUlJZkeWYtr4P5psC+q02/xQKBgQCDII/jcV2+lRM2iNTe
+    vBijZSaNMEWOK/Y+/HFK8GYKXnB+xNWhrm8rKgWGzpDJAUPMh9Tt+leW9LKEBuzF
+    Y1bGblmGm1zsPWpIx05Fdtv9eOJmFnXbGzIsYyhadZnPcQOWhqxtpVxSuul0Jc7Q
+    XNq4qPaPXhbQAshgtyBt75DMkw==
+    -----END PRIVATE KEY-----`;
+        const pubKey = `-----BEGIN PUBLIC KEY-----
+    MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAylQZAljW/Xh1RbcAAOZn
+    QMr1xYsd1mr3a7KGEZL7QpfKIAwUH/H+jdG0ZAxdc3FR0azQBMqM1w7bg5BYEoor
+    wRURCO34kt7Dr3bquhWhl819CGOqGlTLvKDj4A7wtMr6KIUftEMatnepT0j8h3ik
+    GsT+CscwiScwdVwHG3dnhc1FA79uZjZcHVZJlvBSP7AMZyS4D01u/Hc31w3X5Pp8
+    XSKsVSkiwE5y9JDDe2hicduFKM4qACKc777xef/ux03dYIujXgqqwGK94Ij9+uAB
+    NughcBbx52nzvbjUIZUProjZzqCJ1wcnxRlT/kYnUqXy82sQ47OkQ8KaJYdPfG7T
+    jQIDAQAB
+    -----END PUBLIC KEY-----`;
+        const algorithm = {
+            name: "RSA-OAEP",
+            modulusLength: 2048,
+            publicExponent: new Uint8Array([1, 0, 1]),
+            hash: "SHA-256"
+        };
+        // ENCRYPT
+        this.pemToCryptoKey(pubKey, algorithm, true, ["encrypt"], "spki").subscribe((keyPublic) => {
+            // console.log("PUBLIC KEY: ", keyPublic)
+            this.encryptData(keyPublic, "Sample Data here - Mike Bonifacio")
+                .subscribe((str) => {
+                console.log("ENCRYPTED STRING: ", str);
+                testSequence.next('encrypted string success');
+            });
+        });
+        const enc = "r7UOuEGBZ6jbVTOIBuv9jFOEtRiedmS27hfW40k7XKCTsQ5VhWup0qu2BA2ANZaGKii/uehJ/RSPiyfGbJ6leJrat0mA1hPqH/XodaBzLMDigvdYM1NSXFZMDa40OpLUIXbPlAvybjcGu7Bal+LMA8htHrFu/OmM/fHI66xOzzpuXSYx0OkWjtY81rUQ1FFkvrkx2jGFPZ0p+Nw/v3Q4cJnet6V63vCueFlD749VMcVXo7pvz4AIPpB+IOy3kbxaYTPakLVioJERU6GFMXWkECuRvohhS9CETcORZtRVRkvhcHk3lxgIhfqojUKYgD6K5dDELDPsWIS+iTG1XIQIlg==";
+        // DECRYPTION
+        this.pemToCryptoKey(privateKey, algorithm, false, ["decrypt"], "pkcs8").subscribe((key) => {
+            // console.log("DECRYPT ===", key)
+            this.decryptData(key, enc)
+                .pipe(catchError(err => {
+                console.log("ERROR: ", err);
+                return EMPTY;
+            })).subscribe((str) => {
+                console.log("DECRYPTED STRING: ", str);
+                testSequence.next('decrypted string success');
+            });
+        });
+        return testSequence$;
+    }
+    ;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AsymmetricalEncryptionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AsymmetricalEncryptionService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AsymmetricalEncryptionService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return []; } });
+
+function requestStreaming() {
+    return input$ => input$.pipe(filter((event) => event.type === HttpEventType.DownloadProgress || event.type === HttpEventType.Response), map((event) => {
+        if (event.type === HttpEventType.DownloadProgress) {
+            return event.partialText || '';
+        }
+        else if (event.type === HttpEventType.Response) {
+            return event.body;
+        }
+    }), map((data) => {
+        if (typeof data === 'string') {
+            const matches = data.match(/{[^}]+}/g) || [];
+            return (matches.length > 0) ? matches.map(match => JSON.parse(match)) : data;
+        }
+        return data;
+    }));
+}
+
+class RequestService {
+    constructor() {
+        this.http = inject(HttpClient);
+        this.pathQueryService = inject(PathQueryService);
+        this.headersService = inject(HeadersService);
+        this.isPending = new BehaviorSubject(false);
+        this.isPending$ = this.isPending.asObservable().pipe(delay(1));
+        this.progress = new BehaviorSubject(0);
+        this.progress$ = this.progress.asObservable();
+    }
+    getRecordRequest(options) {
+        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));
+    }
+    createRecordRequest(options, data) {
+        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));
+    }
+    updateRecordRequest(options, data) {
+        const urlPath = this.buildUrlPath(options);
+        const headers = this.buildHeaders(options);
+        this.isPending.next(true);
+        return this.http.put(urlPath, data, headers).pipe(this.request(options));
+    }
+    deleteRecordRequest(options) {
+        const urlPath = this.buildUrlPath(options);
+        const headers = this.buildHeaders(options);
+        this.isPending.next(true);
+        return this.http.delete(urlPath, headers).pipe(this.request(options));
+    }
+    // Helper functions
+    buildUrlPath(options) {
+        return this.pathQueryService.buildAPIPath(options.server, options.path);
+    }
+    buildHeaders(options) {
+        return this.headersService.generateHeaders(options.headers);
+    }
+    buildCombinedHeaders(options) {
+        const headers = this.headersService.generateHeaders(options.headers);
+        return this.combineHeaders(headers, options.stream || false);
+    }
+    request(options) {
+        return (source$) => {
+            return source$.pipe(map(data => {
+                if (options?.adapter) {
+                    return Array.isArray(data)
+                        ? data.map((item) => options.adapter(item))
+                        : options.adapter(data);
+                }
+                return data;
+            }));
+        };
+    }
+    downloadFileRequest(options) {
+        this.isPending.next(true);
+        const urlPath = this.buildUrlPath(options);
+        return this.http.get(urlPath, { responseType: 'blob', observe: 'events', reportProgress: true })
+            .pipe(map((event) => {
+            this.isPending.next(true);
+            if (event instanceof HttpHeaderResponse) {
+                if (event.status !== 200) {
+                    this.isPending.next(false);
+                    throw new Error('Download failed');
+                }
+            }
+            // 0	Sent	Request has been sent.
+            // 1	UploadProgress	Upload is in progress.
+            // 2	ResponseHeader	Response headers received.
+            // 3	DownloadProgress	Download is in progress.
+            // 4	Response	Response is fully received.
+            // 5	User	Custom user 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;
+                case HttpEventType.Response:
+                    try {
+                        const fileNamePath = (options?.saveAs) ? options.saveAs : (options.path) ? options.path[options.path.length - 1] : [];
+                        const header_content = event.headers.get('Content-Disposition') || '';
+                        // 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) : '';
+                        const fileName = (fileNamePath !== '') ? fileNamePath : file;
+                        if (fileName === '') {
+                            this.isPending.next(false);
+                            throw new Error('Save File: (file name and extension) not found in Headers or Path');
+                        }
+                        this.downloadFile(fileName, 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);
+        }));
+    }
+    handleFinalize() {
+        return finalize(() => this.isPending.next(false));
+    }
+    downloadFile(file, fileData) {
+        const navigatorAny = window.navigator;
+        const extension = file.split('.')[1].toLowerCase();
+        var newBlob = new Blob([fileData], { type: this.createFileType(extension) });
+        if (navigatorAny.msSaveOrOpenBlob) {
+            navigatorAny.msSaveOrOpenBlob(newBlob, file);
+        }
+        else {
+            const link = document.createElement('a');
+            const url = window.URL.createObjectURL(newBlob);
+            link.href = url;
+            link.download = file;
+            link.click();
+            window.URL.revokeObjectURL(url);
+        }
+    }
+    createFileType(ext) {
+        let fileType = "";
+        if (ext == 'pdf' || ext == 'csv') {
+            fileType = `application/${ext}`;
+        }
+        else if (ext == 'jpeg' || ext == 'jpg' || ext == 'png') {
+            fileType = `image/${ext}`;
+        }
+        else if (ext == 'txt') {
+            fileType = 'text/plain';
+        }
+        else if (ext == 'ppt' || ext == 'pot' || ext == 'pps' || ext == 'ppa') {
+            fileType = 'application/vnd.ms-powerpoint';
+        }
+        else if (ext == 'pptx') {
+            fileType = 'application/vnd.openxmlformats-officedocument.presentationml.presentation';
+        }
+        else if (ext == 'doc' || ext == 'dot') {
+            fileType = 'application/msword';
+        }
+        else if (ext == 'docx') {
+            fileType = 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
+        }
+        else if (ext == 'xls' || ext == 'xlt' || ext == 'xla') {
+            fileType = 'application/vnd.ms-excel';
+        }
+        else if (ext == 'xlsx') {
+            fileType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
+        }
+        return fileType;
+    }
+    combineHeaders(headers, isStreaming) {
+        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' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RequestService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+function countdown(duration) {
+    return defer(() => {
+        const currentCount = { current: duration };
+        return interval(1000).pipe(map(() => --currentCount.current), takeWhile(count => count >= 0));
+    });
+}
+
+const DEFAULT_MAX_RETRIES = 3;
+function delayedRetry(delayMs, maxRetry = DEFAULT_MAX_RETRIES) {
+    return (src) => src.pipe(retry({
+        count: maxRetry,
+        delay: () => timer(delayMs)
+    }));
+}
+
+/**
+ * @param pollInterval
+ * @param stopCondition$
+ * @param isPending$
+ */
+function requestPolling(pollInterval, stopCondition$, isPending$) {
+    return (source) => {
+        return interval(pollInterval * 1000)
+            .pipe(startWith(0), tap(() => isPending$.next(true)), mergeMap(() => source), tap(() => isPending$.next(false)), takeUntil(stopCondition$));
+    };
+}
+
+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(configOptions) {
+        super();
+        this.configOptions = configOptions;
+        this.toastMessage = inject(ToastMessageDisplayService);
+        this.ng_injector = inject(Injector);
+        this.objectMergerService = inject(ObjectMergerService);
+        this.countdown = new BehaviorSubject(0);
+        this.countdown$ = this.countdown.asObservable();
+        this.error = new BehaviorSubject(false);
+        this.error$ = this.error.asObservable();
+        this.data = new BehaviorSubject(null);
+        this.data$ = this.data.asObservable();
+        this.polling$ = new Subject();
+        this.config = ApiRequest.adapt();
+        this.config = (configOptions) ? ApiRequest.adapt(configOptions.httpRequestOptions) : this.config;
+    }
+    // REQUESTS
+    getRequest(options, params) {
+        this.isPending.next(true);
+        this.data.next(null);
+        const updatedOptions = this.defineReqOptions(options, params);
+        const func = this.getRecordRequest;
+        const requests = this.createRequest(func, updatedOptions);
+        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 = this.defineReqOptions(options, params);
+        const func = this.createRecordRequest;
+        const requests = this.createRequest(func, updatedOptions, 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 = this.defineReqOptions(options, params);
+        const func = this.updateRecordRequest;
+        const requests = this.createRequest(func, updatedOptions, 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 = this.defineReqOptions(options, params);
+        const func = this.deleteRecordRequest;
+        const requests = this.createRequest(func, updatedOptions);
+        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, saveAs) {
+        this.isPending.next(true);
+        const updatedOptions = this.defineReqOptions(options, params);
+        const func = this.downloadFileRequest;
+        const requests = this.createRequest(func, updatedOptions);
+        return this.createObservable(updatedOptions, requests, func.name)
+            .pipe(catchError((err) => {
+            this.error.next(true);
+            this.isPending.next(false);
+            return this.handleError(err);
+        }));
+    }
+    createObservable(options, request$, funcName) {
+        const polling = options.polling ? (options.polling > 0 ? true : false) : false;
+        const isPolling = polling &&
+            !(funcName === 'deleteRecordRequest' || funcName === 'updateRecordRequest' || funcName === 'createRecordRequest')
+            ? true
+            : false;
+        this.polling$.next();
+        const polling$ = (isPolling && options.polling) || 0 >= 3
+            ? request$.pipe(requestPolling((options.polling || 0) + 1, this.polling$, this.isPending), tap(() => this.countdown.next(0)), tap(() => {
+                if (!options.polling)
+                    return;
+                const count = options.polling ? options.polling : 0;
+                // console.log('COUNT:', count);
+                countdown(count)
+                    .pipe(map((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);
+                    this.countdown.next(countDownValue);
+                });
+            }))
+            : request$.pipe(catchError((err) => {
+                if (err instanceof HttpErrorResponse) {
+                    this.error.next(true);
+                    return this.handleError(err);
+                }
+                return throwError(() => err);
+            }));
+        return polling$.pipe(catchError((err, caught) => {
+            if (err instanceof HttpErrorResponse) {
+                this.error.next(true);
+                if (isPolling)
+                    this.stopPolling();
+                return this.handleError(err);
+            }
+            return throwError(() => err);
+        }), (options?.retry && options.retry.times > 0)
+            ? delayedRetry((options.retry.delay || 3) * 1000, (options.retry.times || 0) - 1)
+            : (source) => source);
+    }
+    createRequest(func, options, data) {
+        const dataItem = this.prepareRequestData(options, data, func.name);
+        return func.bind(this)(dataItem.options, dataItem.data);
+    }
+    prepareRequestData(options, data, funcName) {
+        if ((options.mapper && funcName === 'updateRecordRequest') || funcName === 'createRecordRequest') {
+            if (options?.mapper) {
+                data = options.mapper
+                    ? Array.isArray(data)
+                        ? map((item) => options.mapper(item))
+                        : options.mapper(data)
+                    : data;
+            }
+        }
+        else {
+            if (options?.adapter) {
+                data = Array.isArray(data)
+                    ? map((item) => options.adapter(item))
+                    : options.adapter(data);
+            }
+        }
+        return { options: options, data: data };
+    }
+    // MISC
+    handleError(error) {
+        this.error.next(error.message || `${error.status} - ${error.statusText}`);
+        return throwError(() => error);
+    }
+    handleErrorWithSnackBar(error) {
+        const displayError = ToastDisplay.adapt({
+            message: error.message || `${error.status} - ${error.statusText}`,
+            action: 'OK',
+            color: ToastColors.ERROR,
+            icon: 'error',
+            duration: 5 * 1000, //5 seconds
+        });
+        this.toastMessage.toastMessage(displayError);
+    }
+    stopPolling() {
+        this.isPending.next(false);
+        this.polling$.next();
+    }
+    defineReqOptions(options, params) {
+        const req = ApiRequest.adapt(options);
+        if (req?.path)
+            req.path = (params) ? [...req.path, ...params] : req.path;
+        const optionsReq = (req) ? req : ApiRequest.adapt();
+        const updatedOptions = this.objectMergerService.mergeOptions(optionsReq);
+        return updatedOptions;
+    }
+    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: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: ConfigOptions, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [CONFIG_SETTINGS_TOKEN]
+                }] }]; } });
+
+class ApiRequest {
+    constructor(server = '', path, headers, adapter, mapper, polling, retry, stream, displayError, saveAs) {
+        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;
+        this.saveAs = saveAs;
+    }
+    static adapt(item) {
+        const server = Array.isArray(item?.server) ? item.server.join('/') : item?.server || '';
+        return new ApiRequest(server, (item?.path) ? item.path : [], (item?.headers) ? item.headers : {}, item?.adapter, item?.mapper, item?.polling ? Math.floor(item.polling) : 0, item?.retry ? RetryOptions.adapt(item.retry) : RetryOptions.adapt(), (item?.stream) ? item.stream : false, (item?.displayError) ? item.displayError : false, item?.saveAs);
+    }
+}
+
+class RequestOptions {
+    constructor(path = [], headers = {}) {
+        this.path = path;
+        this.headers = headers;
+    }
+    static adapt(item) {
+        return new RequestOptions(item?.path, item?.headers);
+    }
+}
+
+class ObjectMergerService {
+    constructor(configOptions) {
+        this.configOptions = configOptions;
+        if (!this.configOptions)
+            this.configOptions = ConfigOptions.adapt();
+    }
+    mergeOptions(options = ApiRequest.adapt()) {
+        const configForRoot = (this.configOptions?.httpRequestOptions) ? this.configOptions.httpRequestOptions : ConfigHTTPOptions.adapt();
+        const mergedOptions = ApiRequest.adapt(options);
+        mergedOptions.server = (options && options.server === '') ? configForRoot?.server || '' : options.server;
+        mergedOptions.path = [...options.path || [], ...configForRoot?.path || []];
+        mergedOptions.headers = { ...options.headers || {}, ...configForRoot?.headers || {} };
+        mergedOptions.retry = (options && (options?.retry?.times !== 0 || options?.retry?.delay !== 3)) ? options.retry : configForRoot?.retry || { times: 0, delay: 3 };
+        mergedOptions.polling = (options && options?.polling !== 0) ? options.polling : configForRoot?.polling || 0;
+        mergedOptions.displayError = (options && options?.displayError) ? options.displayError : configForRoot?.displayError || false;
+        mergedOptions.stream = (options && options?.stream) ? options.stream : configForRoot?.stream || false;
+        return mergedOptions;
+    }
+    mergeStorageOptions(options = SettingOptions.adapt()) {
+        const configForRoot = (this.configOptions?.LocalStorageOptions) ? this.configOptions.LocalStorageOptions : LocalStorageOptions.adapt();
+        const configForRootOptions = configForRoot.options || LocalStorageOptions.adapt().options;
+        const mergedOptions = SettingOptions.adapt(options);
+        mergedOptions.storage = (options && options.storage === 0) ? configForRootOptions?.storage || 0 : options.storage;
+        mergedOptions.expires = (options && options.expires === 0) ? configForRootOptions?.expires || 0 : options.expires;
+        mergedOptions.expiresIn = (options && options.expiresIn === '') ? configForRootOptions?.expiresIn || '' : options.expiresIn;
+        mergedOptions.encrypted = (options && !options.encrypted) ? configForRootOptions?.encrypted || false : options.encrypted;
+        return mergedOptions;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ObjectMergerService, 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: ObjectMergerService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ObjectMergerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: ConfigOptions, decorators: [{
+                    type: Inject,
+                    args: [CONFIG_SETTINGS_TOKEN]
+                }, {
+                    type: Optional
+                }] }]; } });
+
+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(configOptions) {
+        super(storage);
+        this.configOptions = configOptions;
+        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.mergeStorageOptions(settings.options);
+            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.mergeStorageOptions(settings.options);
+            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 = (typeof obj === 'object') ? obj : 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 = configOptions?.LocalStorageOptions?.storageName || this.storageName;
+        this.storageSettingsName = configOptions?.LocalStorageOptions?.storageSettingsName || this.storageSettingsName;
+        this.defaultOptions = configOptions?.LocalStorageOptions?.options || this.defaultOptions;
+        this.retrieveState();
+        this.startTimer();
+    }
+    resetStore() {
+        const newState = {
+            localStores: [],
+            sessionStores: [],
+            settings: [],
+        };
+        this.updateState(newState);
+        this.persistState(newState);
+    }
+    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 || '');
+    }
+    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;
+    }
+    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, optional: true }], 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: Optional
+                }, {
+                    type: Inject,
+                    args: [CONFIG_SETTINGS_TOKEN]
+                }] }]; } });
+
+const API_OPTS = new InjectionToken('API_OPTS');
+const defaultState = {
+    data: [],
+    dataObject: null,
+};
+class HTTPManagerStateService extends ComponentStore {
+    constructor(apiOptions = ApiRequest.adapt(), dataType, database) {
+        super(defaultState);
+        this.apiOptions = apiOptions;
+        this.dataType = dataType;
+        this.database = database;
+        this.httpManagerService = inject(HTTPManagerService);
+        this.error$ = this.httpManagerService.error$;
+        this.isPending$ = this.httpManagerService.isPending$.pipe(delay(1));
+        // PAGINATION
+        this.page = new BehaviorSubject(0);
+        this.page$ = this.page.asObservable();
+        this.totalPages = new BehaviorSubject(0);
+        this.totalPages$ = this.totalPages.asObservable();
+        this.percentage = new BehaviorSubject(0);
+        this.percentage$ = this.percentage.asObservable();
+        // ----------
+        this.hasDatabase = false;
+        this.streamedResponse = [];
+        // --------------------------------------------------------------------------------------------------
+        // SELECTORS
+        this.data$ = this.select(({ data, dataObject }) => {
+            const isArray = (this.dataType === DataType.ARRAY) ? true : false;
+            return (isArray) ? data : dataObject;
+        });
+        this.selectRecord$ = (id) => this.select(this.data$, (data) => {
+            if (this.dataType === DataType.ARRAY && Array.isArray(data)) {
+                return data.find(item => item.id === id);
+            }
+            else {
+                return data.id === id ? data : null;
+            }
+        });
+        // --------------------------------------------------------------------------------------------------
+        // UPDATERS
+        this.setData$ = this.updater((state, data) => {
+            if (!data)
+                return state;
+            if (this.dataType === DataType.ARRAY) {
+                const dataArray = Array.isArray(data) ? data : [data];
+                const stateDataSample = (state.data.length > 0) ? Object.keys(state.data[0]) : [];
+                const newDataSample = (dataArray.length > 0) ? Object.keys(dataArray[0]) : [];
+                const isSame = (state.data.length === 0) ? false : stateDataSample.every((value, index) => value === newDataSample[index]);
+                const updatedData = (!isSame && dataArray.length !== 0) ? this.updateArrayState([], dataArray) : this.updateArrayState(state.data, dataArray);
+                return { ...state, data: updatedData, dataObject: null };
+            }
+            else {
+                const dataObject = this.isEmpty(data) ? null : data;
+                return { ...state, data: [], dataObject: dataObject };
+            }
+        });
+        this.addData$ = this.updater((state, data) => {
+            if (this.dataType === DataType.ARRAY) {
+                const newState = [...state.data, data];
+                return { ...state, ...{ data: newState } };
+            }
+            else {
+                return { ...state, ...{ dataObject: data } };
+            }
+        });
+        this.deleteData$ = this.updater((state, data) => {
+            if (this.dataType === DataType.ARRAY) {
+                const newState = state.data.filter(item => item.id !== data.id);
+                return { ...state, ...{ data: newState } };
+            }
+            else {
+                return { ...state, ...{ dataObject: null } };
+            }
+        });
+        this.updateData$ = this.updater((state, data) => {
+            if (this.dataType === DataType.ARRAY) {
+                const objIndex = state.data.findIndex(item => item.id === data.id);
+                if (objIndex > -1) {
+                    const newState = [...state.data];
+                    newState[objIndex] = data;
+                    return { ...state, ...{ data: newState } };
+                }
+                return state;
+            }
+            else {
+                return { ...state, ...{ dataObject: data } };
+            }
+        });
+        // --------------------------------------------------------------------------------------------------
+        // EFFECTS
+        this.clearRecords = this.effect(data => data.pipe(tap(() => {
+            if (this.dataType === DataType.ARRAY) {
+                this.setData$([]);
+            }
+            else {
+                this.setData$({});
+            }
+        })));
+        this.refreshData = this.effect(data => data.pipe(tap(() => {
+            // this.apiService.flushDatabase(this.otherOptions.database?.table)
+            this.fetchRecords();
+        })));
+        // --------------------------------------------------------------------------------------------------
+        // CRUD OPERATIONS
+        // FETCH RECORDS
+        this.fetchRecords = (options) => this.effect(() => of(RequestOptions.adapt(options)).pipe(switchMap(() => {
+            this.streamedResponse = [];
+            const requestOptions = this.updateRequestOptions(options?.headers);
+            return this.httpManagerService.getRequest(requestOptions, options?.path)
+                .pipe(tap((data) => {
+                data = (!data) ? (this.dataType === DataType.ARRAY) ? [] : {} : data;
+                this.setData$(data);
+            }));
+        })));
+        // CREATE RECORD
+        this.createRecord = (data, options) => this.effect(() => of(data).pipe(switchMap((data) => {
+            this.streamedResponse = [];
+            const requestOptions = this.updateRequestOptions(options?.headers);
+            return this.httpManagerService.postRequest(data, requestOptions, options?.path)
+                .pipe(tap((data) => {
+                data = (!data) ? (this.dataType === DataType.ARRAY) ? [] : {} : data;
+                this.addData$(data);
+            }));
+        })));
+        // UPDATE RECORD
+        this.updateRecord = (data, options) => this.effect(() => of(data).pipe(concatMap((data) => {
+            this.streamedResponse = [];
+            const requestOptions = this.updateRequestOptions(options?.headers);
+            return this.httpManagerService.putRequest(data, requestOptions, options?.path)
+                .pipe(tap((data) => {
+                data = (!data) ? (this.dataType === DataType.ARRAY) ? [] : {} : data;
+                this.updateData$(data);
+            }));
+        })));
+        // DELETE RECORD
+        this.deleteRecord = (options) => this.effect(() => of(options).pipe(concatMap((data) => {
+            this.streamedResponse = [];
+            const requestOptions = this.updateRequestOptions(options?.headers);
+            return this.httpManagerService.deleteRequest(requestOptions, options?.path)
+                .pipe(tap((data) => {
+                data = (!data) ? (this.dataType === DataType.ARRAY) ? [] : {} : data;
+                this.deleteData$(data);
+            }));
+        })));
+        // --------------------------------------------------------------------------------------------------
+        // FETCH STREAM
+        this.createStream = (data, options) => this.effect(() => of(data).pipe(tap(() => this.httpManagerService.isPending.next(true)), switchMap((data) => {
+            const requestOptions = this.updateRequestOptions(options?.headers);
+            return this.httpManagerService.postRequest(data, requestOptions, options?.path)
+                .pipe(tap((res) => {
+                if (res.length > 0)
+                    this.setData$(res);
+                this.streamedResponse = res;
+            }), scan((acc, res) => {
+                const previous = acc.current;
+                const current = res;
+                return { previous, current };
+            }, { previous: null, current: null }), tap(({ previous, current }) => {
+                if (previous && JSON.stringify(previous) === JSON.stringify(current)) {
+                    this.httpManagerService.isPending.next(false);
+                    this.setData$([]);
+                }
+                else {
+                    this.httpManagerService.isPending.next(true);
+                }
+            }));
+        })));
+        this.fetchStream = (options) => this.effect(() => of(options).pipe(tap(() => this.httpManagerService.isPending.next(true)), switchMap((options) => {
+            const requestOptions = this.updateRequestOptions(options?.headers);
+            requestOptions.stream = true;
+            return this.httpManagerService.getRequest(requestOptions, options?.path)
+                .pipe(tap((res) => {
+                if (res.length > 0)
+                    this.setData$(res);
+                this.streamedResponse = res;
+            }), scan((acc, res) => {
+                const previous = acc.current;
+                const current = res;
+                return { previous, current };
+            }, { previous: null, current: null }), tap(({ previous, current }) => {
+                if (previous && JSON.stringify(previous) === JSON.stringify(current)) {
+                    this.httpManagerService.isPending.next(false);
+                    this.setData$([]);
+                }
+                else {
+                    this.httpManagerService.isPending.next(true);
+                }
+            }));
+        })));
+        this.setApiRequestOptions(apiOptions, dataType, database);
+    }
+    setApiRequestOptions(apiOptions, dataType, database) {
+        this.apiOptions = ApiRequest.adapt(apiOptions);
+        this.dataType = (dataType) ? dataType : DataType.ARRAY;
+        this.hasDatabase = this.database?.table === "" ? false : true;
+        this.database = (this.hasDatabase) ? DatabaseStorage.adapt(database) : undefined;
+    }
+    get ApiRequestOptions() {
+        return this.apiOptions;
+    }
+    initStorage() {
+        // if(this.otherOptions.database) {
+        // console.log('Has Database Option:', this.otherOptions.database.table)
+        // const schema = (this.otherOptions.adapters?.incoming) ? Object.keys(this.otherOptions.adapters.incoming({})).join() : '++id'
+        // this.apiService.initDB(this.otherOptions.database.expiresIn, this.otherOptions.database.table, schema)
+        // }
+    }
+    initializeState(data) {
+        this.setData$(data);
+    }
+    updateArrayState(currentData, newData) {
+        const filterCurrentData = () => {
+            const ids = this.streamedResponse.map((obj) => obj.id);
+            return currentData.filter(obj => (obj.id) ? ids.includes(obj.id) : obj);
+        };
+        const filteredCurrentData = (this.httpManagerService.isPending.value) ? currentData : filterCurrentData();
+        const updatedData = filteredCurrentData.map(item => {
+            const newItem = newData.find(newItem => {
+                const hasId = (newItem?.id && item?.id) ? true : false;
+                return (hasId) ? newItem.id === item.id : JSON.stringify(newItem) === JSON.stringify(item);
+            });
+            return (newItem) ? { ...item, ...newItem } : item;
+        });
+        const addedData = newData.filter(newItem => {
+            return !filteredCurrentData.some(item => {
+                const hasId = (newItem?.id && item?.id) ? true : false;
+                return (hasId) ? item.id === newItem.id : JSON.stringify(newItem) === JSON.stringify(item);
+            });
+        });
+        return [...updatedData, ...addedData];
+    }
+    // --------------------------------------------------------------------------------------------------
+    // MISC
+    isEmpty(obj) {
+        return Object.keys(obj).length === 0;
+    }
+    updateRequestOptions(headers) {
+        const options = ApiRequest.adapt({ ...this.apiOptions });
+        options.headers = (headers)
+            ? { ...options.headers, ...headers }
+            : { ...options.headers };
+        return options;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HTTPManagerStateService, deps: [{ token: API_OPTS }, { token: "dataType" }, { token: "database" }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HTTPManagerStateService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HTTPManagerStateService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [API_OPTS]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ["dataType"]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ["database"]
+                }] }]; } });
+
+// export * from "./database-manager-services/index";
+
+class ErrorDisplaySettings {
+    constructor(displayTime = 3 * 1000, position = 'top') {
+        this.displayTime = displayTime;
+        this.position = position;
+    }
+    static adapt(item) {
+        return new ErrorDisplaySettings((item?.displayTime) ? item.displayTime * 1000 : 3 * 1000, item?.position);
+    }
+}
+
+class WithCredentialsInterceptor {
+    intercept(req, next) {
+        req = req.clone({ withCredentials: true });
+        return next.handle(req);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WithCredentialsInterceptor, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WithCredentialsInterceptor }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WithCredentialsInterceptor, decorators: [{
+            type: Injectable
+        }] });
+
+class RequestHeadersInterceptor {
+    get currentDate() {
+        const date = new Date();
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const day = String(date.getDate()).padStart(2, '0');
+        return `${year}-${month}-${day}`;
+    }
+    constructor(translate) {
+        this.translate = translate;
+        this.subscriptions = new Subscription();
+        this.language = 'en-CA';
+        this.subscriptions.add(this.translate.onLangChange
+            .subscribe((params) => {
+            this.language = `${params.lang}-CA`;
+        }));
+    }
+    intercept(request, next) {
+        request = request.clone({
+            setHeaders: {
+                'Content-Type': 'application/json',
+                'Accept-Language': this.language || 'en-CA',
+                'Current-Date': this.currentDate
+            }
+        });
+        return next.handle(request);
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RequestHeadersInterceptor, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RequestHeadersInterceptor }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RequestHeadersInterceptor, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1.TranslateService }]; } });
+
+class RequestErrorInterceptor {
+    constructor() {
+        this.toastMessage = inject(ToastMessageDisplayService);
+    }
+    intercept(req, next) {
+        return next.handle(req).pipe(catchError$1((error) => {
+            const displayError = ToastDisplay.adapt({
+                message: 'This is a toast message. This is an Error!!',
+                action: 'OK',
+                color: ToastColors.SUCCESS,
+                icon: 'info',
+                duration: 5 * 1000, //5 seconds
+            });
+            if (error.status >= 400 && error.status < 500) {
+                displayError.color = ToastColors.WARN;
+                displayError.message = error.error || `${error.status}: ${error.statusText}`;
+                console.error('Client Error:', {
+                    status: error.status,
+                    message: error.message,
+                    error: error.error,
+                    text: error.statusText,
+                });
+                this.toastMessage.toastMessage(displayError);
+            }
+            else if (error.status >= 500) {
+                displayError.color = ToastColors.ERROR;
+                displayError.message = error.error || `${error.status}: ${error.statusText}`;
+                console.error('Server Error:', {
+                    status: error.status,
+                    message: error.message,
+                    error: error.error,
+                    text: error.statusText,
+                });
+                this.toastMessage.toastMessage(displayError);
+            }
+            return throwError(() => error);
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RequestErrorInterceptor, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RequestErrorInterceptor }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RequestErrorInterceptor, decorators: [{
+            type: Injectable
+        }] });
+
+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?.first_name || item?.last_name) ? `${item?.first_name} ${item?.last_name}` : '');
+    }
+}
+
+class ClientInfoMapper {
+    constructor(id = 0, first_name = '', last_name = '', email = '') {
+        this.id = id;
+        this.first_name = first_name;
+        this.last_name = last_name;
+        this.email = email;
+    }
+    static adapt(item) {
+        const first_name = (item?.name) ? item.name.split(' ')[0] : '';
+        const last_name = (item?.name) ? item.name.split(' ')[1] : '';
+        return new ClientInfoMapper(item?.id, first_name, last_name, item?.email);
+    }
+}
+
+class AIPrompt {
+    constructor(response = '') {
+        this.response = response;
+    }
+    static adapt(item) {
+        return new AIPrompt(item?.response);
+    }
+}
+
+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 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: i8.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 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 throwError(() => err);
+        }), finalize(() => {
+            if (!this.active)
+                return;
+            this.active = false;
+            this.completed.emit();
+        }))
+            .subscribe();
+    }
+    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", saveFileAs: "saveFileAs", 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
+            }], saveFileAs: [{
+                type: Input
+            }], labels: [{
+                type: Input
+            }], completed: [{
+                type: Output
+            }], failed: [{
+                type: Output
+            }], disabled: [{
+                type: Input
+            }] } });
+
+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(ToastMessageDisplayService);
+        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: 'assets/images',
+            path: ['me.jpg'],
+            // saveAs: 'john.jpg' // Optional
+        });
+        // downloadRequest = ApiRequest.adapt({
+        //   server: 'oidc/ai/file'
+        // })
+        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: "",
+            email: "wavecoders@gmail.com"
+        };
+        this.requestForm = this.fb.group({
+            path: this.fb.control("ai/"),
+            headers: this.fb.array([]),
+            adapter: [null],
+            mapper: [null],
+            retry: this.fb.group({
+                times: [3],
+                delay: [3],
+            }),
+            polling: [3],
+        });
+        this.AIType = 0;
+        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 },
+        ];
+        this.hasId = (arr) => {
+            if (arr.length === 0)
+                return false;
+            return !isNaN(arr[arr.length - 1]);
+        };
+        this.props = (adapter) => {
+            return (adapter) ? adapter() : null;
+        };
+        // 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 };
+        }
+        const apiOptions = ApiRequest.adapt(requestParams);
+        apiOptions.path = [];
+        return { apiOptions: apiOptions, path: pathReq };
+    }
+    onGetRequest() {
+        if (!this.isValid)
+            return;
+        const reqParams = this.compileRequest();
+        this.requestParams.GET = reqParams.apiOptions;
+        this.GET$ = EMPTY; //Cancels Previous
+        this.GET_error$.next('');
+        this.GET$ = this.httpManagerService.getRequest(reqParams.apiOptions, reqParams.path)
+            .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.apiOptions;
+        this.POST$ = EMPTY; //Cancels Previous
+        this.POST_error$.next('');
+        console.log("POST", this.sampleClientData);
+        console.log("POST", reqParams.apiOptions);
+        console.log("POST", reqParams.path);
+        this.POST$ = this.httpManagerService.postRequest(this.sampleClientData, reqParams.apiOptions, reqParams.path)
+            .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();
+        if (!this.hasId(reqParams.path)) {
+            console.log("Missing ID");
+            return;
+        }
+        this.sampleClientData.id = parseInt(reqParams.path[reqParams.path.length - 1]);
+        this.requestParams.PUT = reqParams.apiOptions;
+        this.PUT$ = EMPTY; //Cancels Previous
+        this.PUT_error$.next('');
+        this.PUT$ = this.httpManagerService.putRequest(this.sampleClientData, reqParams.apiOptions, reqParams.path)
+            .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.apiOptions;
+        if (!this.hasId(reqParams.path)) {
+            console.log("Missing ID");
+            return;
+        }
+        this.sampleClientData.id = parseInt(reqParams.path[reqParams.path.length - 1]);
+        this.requestParams.DELETE = reqParams.apiOptions;
+        this.DELETE$ = EMPTY; //Cancels Previous
+        this.DELETE_error$.next('');
+        this.DELETE$ = this.httpManagerService.deleteRequest(reqParams.apiOptions, reqParams.path)
+            .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();
+        let payload = {};
+        let apiPath = reqParams.path;
+        let apiOptions = reqParams.apiOptions;
+        let responseMapper = (items) => items.response;
+        if (this.AIType === 0) {
+            // API request
+            payload = { prompt: this.questionControl.value };
+        }
+        else {
+            // Local Ollama request
+            apiOptions.server = "api";
+            apiPath = ["generate"];
+            apiOptions.stream = true;
+            payload = {
+                model: "phi3:latest",
+                prompt: this.questionControl.value,
+                stream: true,
+            };
+            responseMapper = (items) => items.map((word) => word.response).flat().join('');
+        }
+        this.requestParams.STREAM = apiOptions;
+        this.STREAM_AI$ = EMPTY;
+        this.STREAM_AI_error$.next('');
+        this.STREAM_AI$ = this.httpManagerService.postRequest(payload, apiOptions, apiPath).pipe(map(responseMapper), tap(() => this.questionControl.reset()), catchError(error => throwError(() => this.errorHandling(error, 'STREAM'))));
+    }
+    onStreamRequest() {
+        if (!this.isValid)
+            return;
+        const reqParams = this.compileRequest();
+        reqParams.apiOptions.stream = true;
+        this.requestParams.GET = reqParams.apiOptions;
+        this.STREAM$ = this.httpManagerService.getRequest(reqParams.apiOptions, reqParams.path)
+            .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);
+    }
+    onSelectAIType(type) {
+        this.AIType = type;
+    }
+    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\" #adapterSelect>\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\" #mapperSelect>\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 style=\"display: flex; margin-bottom: 2rem;\" *ngIf=\"adapterSelect.value || mapperSelect.value\">\n      <div style=\"flex:1\" class=\"box\">\n        <h3>Adapter (Incoming)</h3>\n        <div *ngIf=\"adapterSelect.value; else NO_ADAPTER\">\n          {{ props(adapterSelect.value) | json }}\n        </div>\n        <ng-template #NO_ADAPTER>No Transformation</ng-template>\n      </div>\n      <div style=\"flex:1\" class=\"box\">\n        <h3>Mapper (Outgoing)</h3>\n        <div *ngIf=\"mapperSelect.value; else NO_MAPPER\">\n          {{ props(mapperSelect.value) | json }}\n        </div>\n        <ng-template #NO_MAPPER>No Transformation</ng-template>\n      </div>\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    <h3>Include Record ID in the RestPath</h3>\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    <h3>Include Record ID in the RestPath</h3>\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; padding-top: .5rem;\">AI -<span *ngIf=\"AIType === 1\">STREAMING</span> POST Request</h2>\n      <div style=\"display: flex; gap: 1rem;\">\n        <button mat-raised-button [matMenuTriggerFor]=\"menu\" style=\"min-width: 120px;\">\n          <mat-icon>lan</mat-icon>\n            <span *ngIf=\"AIType === 0; else LOCAL\">Server</span>\n            <ng-template #LOCAL>\n              Local\n            </ng-template>\n        </button>\n        <mat-menu #menu=\"matMenu\">\n          <button mat-menu-item (click)=\"onSelectAIType(0)\">Server</button>\n          <button mat-menu-item (click)=\"onSelectAIType(1)\">Local</button>\n        </mat-menu>\n        <div>\n          <button mat-raised-button (click)=\"onStreamPostRequest()\" class=\"btn\">Ask Me</button>\n        </div>\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 *ngIf=\"AIType === 1; else ALTERNATIVE\" style=\"color: red;\">\n      You must have Ollama active and the 'phi3:latest' model to use this feature.\n    </div>\n    <ng-template #ALTERNATIVE>\n      <span style=\"color: gray;\">\n        Define the RestPath to the API endpoint that will handle the AI request.\n        Use: 'ai/chat' for server\n      </span>\n    </ng-template>\n\n    <div>\n      <div *ngIf=\"(STREAM_AI$ | async) as data\" style=\"margin-top: 1rem; font-size: 1.2rem; border-radius: 1rem; border: black 1px solid; padding: 2rem;\">\n        <p style=\"margin-bottom: .5rem; white-space:pre-wrap; line-height: 1.6rem;\">{{data}}</p>\n      </div>\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 1.5rem; margin-bottom: 1rem; line-height: 1.5rem;\">\n    <mat-divider></mat-divider>\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}.box{padding:10px;border:1px solid #ccc}\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.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i10.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i11.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i12.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i13.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: FileDownloaderComponent, selector: "app-file-downloader", inputs: ["delayError", "apiRequest", "displayErrorMessage", "saveFileAs", "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\" #adapterSelect>\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\" #mapperSelect>\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 style=\"display: flex; margin-bottom: 2rem;\" *ngIf=\"adapterSelect.value || mapperSelect.value\">\n      <div style=\"flex:1\" class=\"box\">\n        <h3>Adapter (Incoming)</h3>\n        <div *ngIf=\"adapterSelect.value; else NO_ADAPTER\">\n          {{ props(adapterSelect.value) | json }}\n        </div>\n        <ng-template #NO_ADAPTER>No Transformation</ng-template>\n      </div>\n      <div style=\"flex:1\" class=\"box\">\n        <h3>Mapper (Outgoing)</h3>\n        <div *ngIf=\"mapperSelect.value; else NO_MAPPER\">\n          {{ props(mapperSelect.value) | json }}\n        </div>\n        <ng-template #NO_MAPPER>No Transformation</ng-template>\n      </div>\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    <h3>Include Record ID in the RestPath</h3>\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    <h3>Include Record ID in the RestPath</h3>\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; padding-top: .5rem;\">AI -<span *ngIf=\"AIType === 1\">STREAMING</span> POST Request</h2>\n      <div style=\"display: flex; gap: 1rem;\">\n        <button mat-raised-button [matMenuTriggerFor]=\"menu\" style=\"min-width: 120px;\">\n          <mat-icon>lan</mat-icon>\n            <span *ngIf=\"AIType === 0; else LOCAL\">Server</span>\n            <ng-template #LOCAL>\n              Local\n            </ng-template>\n        </button>\n        <mat-menu #menu=\"matMenu\">\n          <button mat-menu-item (click)=\"onSelectAIType(0)\">Server</button>\n          <button mat-menu-item (click)=\"onSelectAIType(1)\">Local</button>\n        </mat-menu>\n        <div>\n          <button mat-raised-button (click)=\"onStreamPostRequest()\" class=\"btn\">Ask Me</button>\n        </div>\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 *ngIf=\"AIType === 1; else ALTERNATIVE\" style=\"color: red;\">\n      You must have Ollama active and the 'phi3:latest' model to use this feature.\n    </div>\n    <ng-template #ALTERNATIVE>\n      <span style=\"color: gray;\">\n        Define the RestPath to the API endpoint that will handle the AI request.\n        Use: 'ai/chat' for server\n      </span>\n    </ng-template>\n\n    <div>\n      <div *ngIf=\"(STREAM_AI$ | async) as data\" style=\"margin-top: 1rem; font-size: 1.2rem; border-radius: 1rem; border: black 1px solid; padding: 2rem;\">\n        <p style=\"margin-bottom: .5rem; white-space:pre-wrap; line-height: 1.6rem;\">{{data}}</p>\n      </div>\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 1.5rem; margin-bottom: 1rem; line-height: 1.5rem;\">\n    <mat-divider></mat-divider>\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}.box{padding:10px;border:1px solid #ccc}\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();
+    }
+    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 || this.requestForm.untouched;
+    }
+    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.STREAM_AI_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([]);
+        this.STREAM_AI$ = this.STREAM_AI.asObservable()
+            .pipe(map$1((items) => (items) ? items.map((item) => item.response) : []), map$1((items) => items.join('\n').trim()));
+        this.questionControl = this.fb.control("", [Validators.required]);
+        this.requestType = '';
+        this.prompts = [];
+        this.AIType = 0;
+        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("ai/"),
+            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 }), {}) : {};
+        };
+        this.props = (adapter) => {
+            return (adapter) ? adapter() : null;
+        };
+    }
+    ngOnInit() {
+        this.stateManagerDemoService.data$.pipe(tap$1((data) => console.log("API STREAM_AI response", data)));
+        this.error$.pipe(tap$1((data) => {
+            debugger;
+            console.log("API STREAM response", data);
+        }), catchError$1(error => {
+            return throwError(() => this.errorHandling(error, 'STREAM'));
+        }));
+        this.selectedRecord.valueChanges
+            .subscribe((data) => {
+            this.selectedRecord$ = (data) ? this.stateManagerDemoService.selectRecord$(data.id) : EMPTY;
+        });
+        this.stateManagerDemoService.data$
+            .pipe(tap$1((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 === "") ? [] : (requestParams.path || "").split("/");
+        if (!this.pollingState.checked)
+            requestParams.polling = 0;
+        if (!this.failedState.checked) {
+            requestParams.retry = { times: 0, delay: 0 };
+        }
+        const currentOptions = ApiRequest.adapt(requestParams);
+        currentOptions.path = [];
+        const apiOptions = ApiRequest.adapt({ ...currentOptions, path: pathReq });
+        return { apiOptions: apiOptions, 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.apiOptions, 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);
+    }
+    onStreamRequest() {
+        if (!this.isValid)
+            return;
+        const reqParams = this.compileRequest();
+        reqParams.apiOptions.stream = true;
+        this.requestType = 'STREAM';
+        this.stateManagerDemoService.streamRequest();
+    }
+    errorHandling(err, type) {
+        console.log(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);
+        if (type === 'STREAM_AI')
+            this.STREAM_AI_error$.next(err.message);
+    }
+    onSelectAIType(type) {
+        this.AIType = type;
+    }
+    onClearHistory() {
+        this.prompts = [];
+    }
+    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\" #adapterSelect>\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\" #mapperSelect>\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\n    <div style=\"display: flex; margin-bottom: 2rem;\" *ngIf=\"adapterSelect.value || mapperSelect.value\">\n      <div style=\"flex:1\" class=\"box\">\n        <h3>Adapter (Incoming)</h3>\n        <div *ngIf=\"adapterSelect.value; else NO_ADAPTER\">\n          {{ props(adapterSelect.value) | json }}\n        </div>\n        <ng-template #NO_ADAPTER>No Transformation</ng-template>\n      </div>\n      <div style=\"flex:1\" class=\"box\">\n        <h3>Mapper (Outgoing)</h3>\n        <div *ngIf=\"mapperSelect.value; else NO_MAPPER\">\n          {{ props(mapperSelect.value) | json }}\n        </div>\n        <ng-template #NO_MAPPER>No Transformation</ng-template>\n      </div>\n    </div>\n\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 }}\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.name || (item.first_name) | titlecase}}\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()\" [disabled]=\"hasChanged\">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 *ngIf=\"(GET$ | async) as getData\">{{ getData | 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 *ngIf=\"(POST$ | async) as postData\">{{ postData | 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 *ngIf=\"(PUT$ | async) as putData\">{{ putData | 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 *ngIf=\"(DELETE$ | async) as deleteData\">{{ deleteData | 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()\" class=\"btn\" [disabled]=\"hasChanged\">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>\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}.box{padding:10px;border:1px solid #ccc}\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: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i10.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i11.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i12.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i13.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }, { kind: "pipe", type: i1$1.TitleCasePipe, name: "titlecase" }] }); }
+}
+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\" #adapterSelect>\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\" #mapperSelect>\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\n    <div style=\"display: flex; margin-bottom: 2rem;\" *ngIf=\"adapterSelect.value || mapperSelect.value\">\n      <div style=\"flex:1\" class=\"box\">\n        <h3>Adapter (Incoming)</h3>\n        <div *ngIf=\"adapterSelect.value; else NO_ADAPTER\">\n          {{ props(adapterSelect.value) | json }}\n        </div>\n        <ng-template #NO_ADAPTER>No Transformation</ng-template>\n      </div>\n      <div style=\"flex:1\" class=\"box\">\n        <h3>Mapper (Outgoing)</h3>\n        <div *ngIf=\"mapperSelect.value; else NO_MAPPER\">\n          {{ props(mapperSelect.value) | json }}\n        </div>\n        <ng-template #NO_MAPPER>No Transformation</ng-template>\n      </div>\n    </div>\n\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 }}\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.name || (item.first_name) | titlecase}}\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()\" [disabled]=\"hasChanged\">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 *ngIf=\"(GET$ | async) as getData\">{{ getData | 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 *ngIf=\"(POST$ | async) as postData\">{{ postData | 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 *ngIf=\"(PUT$ | async) as putData\">{{ putData | 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 *ngIf=\"(DELETE$ | async) as deleteData\">{{ deleteData | 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()\" class=\"btn\" [disabled]=\"hasChanged\">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>\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}.box{padding:10px;border:1px solid #ccc}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { failedState: [{
+                type: ViewChild,
+                args: ["failedState", { static: true }]
+            }], pollingState: [{
+                type: ViewChild,
+                args: ["pollingState", { static: true }]
+            }] } });
+
+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;
+        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) {
+        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: i7.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i10$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i10$1.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: i11.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i12.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i13.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "pipe", type: i1$1.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]
+                }] }]; } });
+
+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 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>Http Request Manager Services</div>\n  <div style=\"flex:1\"></div>\n  <button mat-stroked-button [matMenuTriggerFor]=\"menu\">Services</button>\n  <mat-menu #menu=\"matMenu\">\n    <ng-container *ngFor=\"let type of requestTypes; index as i\">\n      <div\n        *ngIf=\"type?.divider\"\n        style=\"margin-top: .5rem; margin-bottom: .5rem;\"\n      >\n        <mat-divider></mat-divider>\n      </div>\n      <button\n        mat-menu-item\n        (click)=\"onSelected(i)\"\n        [disabled]=\"type.disabled\"\n        >\n        {{ type.name }}\n      </button>\n    </ng-container>\n\n  </mat-menu>\n</mat-toolbar>\n\n<span [ngSwitch]=\"selectedService\">\n  <p *ngSwitchCase=\"'http_service'\">\n    <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n    <app-request-manager-demo></app-request-manager-demo>\n  </p>\n  <p *ngSwitchCase=\"'http_state_service'\">\n    <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n    <app-request-manager-state-demo></app-request-manager-state-demo>\n  </p>\n  <p *ngSwitchCase=\"'database_service'\">\n    <!-- <app-database-data-demo></app-database-data-demo> -->\n  </p>\n  <p *ngSwitchCase=\"'local_storage_service'\">\n    <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n    <app-local-storage-demo></app-local-storage-demo>\n  </p>\n  <p *ngSwitchDefault>\n    Other\n  </p>\n</span>\n\n<ng-template #HTTP_OPTIONS>\n  <ng-container *ngIf=\"injectionOptions?.httpRequestOptions\">\n    <div class=\"box\">\n      <h3 style=\"font-weight: bold;\">Injection Token Detected - HTTP Options</h3>\n      {{ injectionOptions?.httpRequestOptions| json }}\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #LOCAL_OPTIONS>\n  <ng-container class=\"box\" *ngIf=\"injectionOptions?.LocalStorageOptions\">\n    <div class=\"box\">\n      <h3 style=\"font-weight: bold;\">Injection Token Detected - LocalStorage Options</h3>\n      {{ injectionOptions?.LocalStorageOptions| json }}\n    </div>\n  </ng-container>\n</ng-template>\n\n\n", styles: [".box{padding:1rem;background-color:#f5f5f5;border:thin gray solid;margin-top:1rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i12.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i5$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: RequestManagerStateDemoComponent, selector: "app-request-manager-state-demo" }, { kind: "component", type: RequestManagerDemoComponent, selector: "app-request-manager-demo" }, { kind: "component", type: LocalStorageDemoComponent, selector: "app-local-storage-demo" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }] }); }
+}
+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>Http Request Manager Services</div>\n  <div style=\"flex:1\"></div>\n  <button mat-stroked-button [matMenuTriggerFor]=\"menu\">Services</button>\n  <mat-menu #menu=\"matMenu\">\n    <ng-container *ngFor=\"let type of requestTypes; index as i\">\n      <div\n        *ngIf=\"type?.divider\"\n        style=\"margin-top: .5rem; margin-bottom: .5rem;\"\n      >\n        <mat-divider></mat-divider>\n      </div>\n      <button\n        mat-menu-item\n        (click)=\"onSelected(i)\"\n        [disabled]=\"type.disabled\"\n        >\n        {{ type.name }}\n      </button>\n    </ng-container>\n\n  </mat-menu>\n</mat-toolbar>\n\n<span [ngSwitch]=\"selectedService\">\n  <p *ngSwitchCase=\"'http_service'\">\n    <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n    <app-request-manager-demo></app-request-manager-demo>\n  </p>\n  <p *ngSwitchCase=\"'http_state_service'\">\n    <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n    <app-request-manager-state-demo></app-request-manager-state-demo>\n  </p>\n  <p *ngSwitchCase=\"'database_service'\">\n    <!-- <app-database-data-demo></app-database-data-demo> -->\n  </p>\n  <p *ngSwitchCase=\"'local_storage_service'\">\n    <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n    <app-local-storage-demo></app-local-storage-demo>\n  </p>\n  <p *ngSwitchDefault>\n    Other\n  </p>\n</span>\n\n<ng-template #HTTP_OPTIONS>\n  <ng-container *ngIf=\"injectionOptions?.httpRequestOptions\">\n    <div class=\"box\">\n      <h3 style=\"font-weight: bold;\">Injection Token Detected - HTTP Options</h3>\n      {{ injectionOptions?.httpRequestOptions| json }}\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #LOCAL_OPTIONS>\n  <ng-container class=\"box\" *ngIf=\"injectionOptions?.LocalStorageOptions\">\n    <div class=\"box\">\n      <h3 style=\"font-weight: bold;\">Injection Token Detected - LocalStorage Options</h3>\n      {{ injectionOptions?.LocalStorageOptions| json }}\n    </div>\n  </ng-container>\n</ng-template>\n\n\n", styles: [".box{padding:1rem;background-color:#f5f5f5;border:thin gray solid;margin-top:1rem}\n"] }]
+        }], ctorParameters: function () { return [{ type: ConfigOptions, decorators: [{
+                    type: Inject,
+                    args: [CONFIG_SETTINGS_TOKEN]
+                }] }]; } });
+
+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 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,
+            ToastMessageDisplayModule,
+            FormsModule,
+            ReactiveFormsModule,
+            MatButtonModule,
+            MatSelectModule,
+            MatChipsModule,
+            MatMenuModule,
+            MatIconModule,
+            MatTableModule,
+            MatButtonToggleModule,
+            MatAutocompleteModule,
+            MatProgressBarModule,
+            MatSlideToggleModule,
+            MatDividerModule,
+            MatFormFieldModule,
+            MatInputModule,
+            MatToolbarModule,
+            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,
+            ToastMessageDisplayModule,
+            FormsModule,
+            ReactiveFormsModule,
+            MatButtonModule,
+            MatSelectModule,
+            MatChipsModule,
+            MatMenuModule,
+            MatIconModule,
+            MatTableModule,
+            MatButtonToggleModule,
+            MatAutocompleteModule,
+            MatProgressBarModule,
+            MatSlideToggleModule,
+            MatDividerModule,
+            MatFormFieldModule,
+            MatInputModule,
+            MatToolbarModule,
+            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,
+                        ToastMessageDisplayModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MatButtonModule,
+                        MatSelectModule,
+                        MatChipsModule,
+                        MatMenuModule,
+                        MatIconModule,
+                        MatTableModule,
+                        MatButtonToggleModule,
+                        MatAutocompleteModule,
+                        MatProgressBarModule,
+                        MatSlideToggleModule,
+                        MatDividerModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatToolbarModule,
+                        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 TableSchemaDef {
+    constructor(table = 'unknown', schema = '') {
+        this.table = table;
+        this.schema = schema;
+    }
+    static adapt(item) {
+        const schemaArray = (item?.schema && Array.isArray(item.schema)) ? item.schema : item.schema.split(',');
+        const schema = schemaArray.map((item) => this.cleanString(item)).join();
+        return new TableSchemaDef((item?.table) ? this.cleanString(item.table) : 'unknown', schema);
+    }
+    static cleanString(str) {
+        const camelCaseSplit = str.replace(/([a-z])([A-Z])/g, '$1 $2');
+        const cleanStr = camelCaseSplit
+            .replace(/[^a-zA-Z0-9\s]/g, '') // Remove non-alphanumeric characters except spaces
+            .toLowerCase() // Convert to lowercase
+            .trim(); // Trim any leading or trailing spaces
+        return cleanStr;
+    }
+}
+
+class DbService extends Dexie {
+    get vr() {
+        return (this.db.verno === 0) ? 1 : this.db.verno + 1;
+    }
+    get nextVr() {
+        return this.vr + 1;
+    }
+    get getTables() {
+        return this.db.tables.map(item => item.name);
+    }
+    async hasDatabase() {
+        return await Dexie.exists(this.storageDB).then((res) => {
+            this.createNewDatabase();
+            return res;
+        });
+    }
+    constructor() {
+        super("global_storage_db");
+        this.storageDB = "global_storage_db";
+        this.db = new Dexie(this.storageDB);
+        this.getTable = (table) => {
+            return this.db.tables.find(item => item.name === table);
+        };
+        this.tableExists = (table) => {
+            return (this.getTables.find(item => item === table)) ? true : false;
+        };
+        this.db = this;
+        this.open().then(data => {
+        }).catch(err => {
+            this.createNewDatabase();
+        });
+    }
+    async updateTable(table, find, data) {
+        const tableSource = this.getTable(table);
+        if (!tableSource || !find || !(find.key || find.value))
+            return false;
+        await tableSource?.where(find.key).equals(find.value).first()
+            .then(async (rec) => {
+            const newRec = this.updateObjectKeys(rec, data);
+            await tableSource?.update(rec.id, newRec);
+        });
+        return true;
+    }
+    async createNewDatabase() {
+        const db = new Dexie('global_storage_db');
+        if (!await Dexie.exists(db.name)) {
+            db.version(1).stores({});
+        }
+        await db.open();
+    }
+    // async createTable(table: string, schema: string) {
+    async createTable(table, schema) {
+        // console.log('createTable:', table, schema)
+        this.hasDatabase().then(async (res) => {
+            const tableDef = this.normalizeString(table);
+            const schemaDef = this.normalizeString(schema);
+            table = tableDef || '';
+            schema = schemaDef || '';
+            if (table === '' || schema === '')
+                return;
+            if (!this.db.isOpen()) {
+                await this.db.open()
+                    .then(async () => {
+                    this.create(table, schema);
+                    // console.log('OPENED', table)
+                })
+                    .catch(() => {
+                    // console.log('FAILED', table)
+                });
+            }
+            else {
+                this.create(table, schema);
+            }
+            const hasTable = this.getTable(table);
+            if (!hasTable) {
+                setTimeout(() => {
+                    this.createTable.bind(this, table, schema);
+                    this.create(table, schema);
+                }, 300);
+            }
+            // console.log('DB HAS', table, hasTable)
+        });
+    }
+    async create(table, schema) {
+        // console.log('OPEN', this.db.name, this.vr, this.db.verno, 'OPEN',this.db.isOpen())
+        if (!this.tableExists(table)) {
+            if (this.db.isOpen())
+                await this.db.close();
+            const newSchema = { [table]: schema };
+            await this.db.version(this.nextVr).stores(newSchema);
+            // console.log('Created New Table: ', table, schema)
+            if (!this.db.isOpen())
+                await this.db.open();
+        }
+    }
+    updateObjectKeys(obj1, obj2) {
+        return Object.keys(obj1).reduce((updatedObj, key) => {
+            updatedObj[key] = obj2.hasOwnProperty(key) ? obj2[key] : obj1[key];
+            return updatedObj;
+        }, {});
+    }
+    async DBOpened() {
+        if (!this.db.isOpen()) {
+            await this.db.open()
+                .then(async () => {
+                // console.log('OPENED')
+            })
+                .catch(async (err) => {
+                // console.log('OPENED ERR')
+                return false;
+            });
+        }
+        else {
+            // console.log('OPENED')
+        }
+        return true;
+    }
+    normalizeString(item) {
+        if (!item)
+            return;
+        return Array.isArray(item) ?
+            item.map((item) => this.cleanString(item)).join()
+            : item.split(',').map((item) => this.cleanString(item)).join();
+    }
+    cleanString(str) {
+        const cleanStr = str
+            .replace(/[^a-zA-Z0-9\s]/g, '')
+            .replace(/\s+/g, '_');
+        return cleanStr.trim().toLowerCase();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class DatabaseManagerService extends DbService {
+    constructor() {
+        super();
+        this.createNewDatabase();
+    }
+    getDatabaseTables() {
+        return from(this.DBOpened()).pipe(map(() => this.db.tables.map(item => item.name)));
+    }
+    hasDatabaseTable(table) {
+        return from(this.DBOpened()).pipe(map(() => {
+            return this.tableExists(this.clean(table));
+        }));
+    }
+    getDatabaseTable(table) {
+        return from(this.DBOpened()).pipe(map((res) => {
+            this.hasDatabase().then((res) => {
+                const tables = this.db.tables;
+                const found = tables.find(item => item.name === this.clean(table)) || null;
+                if (!found) {
+                    console.warn('No Such Table:', this.clean(table));
+                    return;
+                }
+                else {
+                    return found;
+                }
+            });
+        }));
+    }
+    getDatabaseTableSchema(table) {
+        return from(this.DBOpened()).pipe(mergeMap((res) => this.getDatabaseTable(table)), map((dbTable) => {
+            if (!dbTable)
+                return [];
+            const cols = dbTable.schema.indexes.map((col) => col.name);
+            const pri = dbTable.schema.primKey.name;
+            return [pri, ...cols];
+        }));
+    }
+    createDatabaseTable(tableDef) {
+        this.createTable(tableDef.table, tableDef.schema);
+        return from(this.DBOpened());
+    }
+    updateDatabaseTableSchema(tableDef) {
+    }
+    // CRUD
+    findTableRecords(table, column, value) {
+    }
+    findTableRecord(table, column, value) {
+    }
+    getTableRecords(table) {
+    }
+    getTableRecord(table, id) {
+    }
+    createTableRecord(table, record) {
+        return this.createTableRecords(table, [record])
+            .pipe(map((item) => item ? item[0] : null));
+    }
+    createTableRecords(table, records) {
+        return this.getDatabaseTable(table).pipe(switchMap((tableData) => {
+            if (!tableData)
+                return EMPTY;
+            return this.getDatabaseTableSchema(table).pipe(map((schema) => {
+                const insertRecords = records.map((record) => {
+                    const objectFromSchema = {};
+                    schema.forEach((field) => {
+                        const data = record[field] ?? null;
+                        objectFromSchema[field] = data;
+                    });
+                    return objectFromSchema;
+                });
+                tableData.bulkPut(insertRecords);
+                return insertRecords;
+            }));
+        }));
+    }
+    updateTableRecord(table, record) {
+        return this.updateTableRecords(table, [record])
+            .pipe(map(item => item.length > 0 ? item[0] : null));
+    }
+    updateTableRecords(table, records) {
+        return this.getDatabaseTable(table).pipe(switchMap((tableData) => {
+            return this.getDatabaseTableSchema(table).pipe(map((schema) => {
+                const insertRecords = records.map((record) => {
+                    const objectFromSchema = {};
+                    schema.forEach((field) => {
+                        const data = record[field] ?? null;
+                        objectFromSchema[field] = data;
+                    });
+                    return objectFromSchema;
+                });
+                tableData.bulkPut(insertRecords).then(() => console.log('Updated DB'));
+                return insertRecords;
+            }));
+        }));
+    }
+    deleteTableRecord(table, id) {
+    }
+    clean(str) {
+        const cleanStr = str
+            .replace(/[^a-zA-Z0-9\s]/g, '_') // Replace non-alphanumeric characters except spaces with underscores
+            .replace(/\s+/g, '_') // Replace spaces with underscores
+            .toLowerCase() // Convert to lowercase
+            .trim(); // Trim leading or trailing spaces
+        return cleanStr;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DatabaseManagerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DatabaseManagerService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DatabaseManagerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class DatabaseDataDemoComponent {
+    constructor() {
+        this.db = inject(DatabaseManagerService);
+    }
+    ngOnInit() {
+        const tableDef = TableSchemaDef.adapt({ table: 'Sample Table', schema: ['id', 'lastName', 'age'] });
+        console.log(tableDef);
+        this.createTable(tableDef).subscribe(() => {
+            // hasTable
+            this.db.hasDatabaseTable('Sample Table').subscribe(data => console.log(data));
+            // Tables
+            this.db.getDatabaseTables().subscribe(data => console.log(data));
+            // getTable
+            this.db.getDatabaseTable('Sample Table').subscribe(data => console.log(data));
+            // Table Schema
+            this.db.getDatabaseTableSchema('Sample Table').subscribe(data => console.log(data));
+            // Update Table Schema
+            // const newTableDef = TableSchemaDef.adapt({table: 'sample', schema: ['id', 'name', 'age', 'amount']})
+            // this.db.updateDatabaseTableSchema(newTableDef)
+            // Insert Table Record
+            const record = { id: 12, age: 45, last_name: 'Bonifacio', amount: 1200 };
+            this.db.createTableRecord('Sample Table', record).subscribe(data => console.log(data));
+            // Insert Table Records
+            const records = [
+                { id: 12, age: 12, last_name: 'Bonifacio', amount: 80 },
+                { id: 10, age: 15, last_name: 'Johns', amount: 700 },
+                { id: 1, age: 22, last_name: 'Kims', amount: 234 },
+                { id: 2, age: 45, last_name: 'Harrys', amount: 1200 },
+            ];
+            this.db.createTableRecords('Sample Table', records).subscribe(data => console.log(data));
+            // Update Table Record
+            const recordUpdate = { id: 12, age: 45, last_name: 'Bonifacio', amount: 5000 };
+            this.db.createTableRecord('Sample Table', record).subscribe(data => console.log(data));
+            // Update Table Records
+            // const recordsUpdate = [
+            //   { id: 12, age: 12, last_name: 'Bonifacio', amount: 5000 },
+            //   { id: 10, age: 15, last_name: 'Johns', amount: 5000 },
+            // ]
+            // this.db.updateTableRecords('sample_table', records).subscribe(data => console.log(data))
+        });
+    }
+    createTable(tableDef) {
+        return this.db.createDatabaseTable(tableDef);
+    }
+    // CRUD
+    findTableRecords(table, column, value) {
+    }
+    findTableRecord(table, column, value) {
+    }
+    getTableRecords(table) {
+    }
+    getTableRecord(table, id) {
+    }
+    createTableRecord(table, record) {
+    }
+    updateTableRecord(table, record) {
+    }
+    deleteTableRecord(table, id) {
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DatabaseDataDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DatabaseDataDemoComponent, selector: "app-database-data-demo", ngImport: i0, template: "<p>\n  database-data-demo works!\n</p>\n", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DatabaseDataDemoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-database-data-demo', template: "<p>\n  database-data-demo works!\n</p>\n" }]
+        }], ctorParameters: function () { return []; } });
+
+/*
+ * Public API Surface of http-request-manager
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ApiRequest, AppService, AsymmetricalEncryptionService, ConfigHTTPOptions, ConfigOptions, DataType, DatabaseDataDemoComponent, DatabaseStorage, ErrorDisplaySettings, GlobalStoreOptions, HTTPManagerService, HTTPManagerStateService, HeadersService, HttpRequestManagerModule, HttpRequestServicesDemoComponent, LocalStorageDemoComponent, LocalStorageManagerService, LocalStorageOptions, PathQueryService, Random, RandomNumber, RandomNumbers, RandomNumbersUnique, RandomSignature, RandomStr, RequestErrorInterceptor, RequestHeadersInterceptor, RequestManagerDemoComponent, RequestManagerStateDemoComponent, RequestOptions, RetryOptions, SettingOptions, StorageData, StorageOption, StorageType, SymmetricalEncryptionService, UUID, UtilsService, WithCredentialsInterceptor, countdown, delayedRetry, requestPolling, requestStreaming };
+//# sourceMappingURL=http-request-manager.mjs.map