http-request-manager 4.1.4 → 4.1.7

package/fesm2022/http-request-manager.mjs

@@ -5,7 +5,7 @@ import { map, catchError, filter, finalize, takeWhile, retry, startWith, tap, me
 import { HttpClient, HttpHeaders, HttpEventType, 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 } from 'rxjs';
-import { ToastMessageService, ToastDisplay, ToastColors, ToastMessageModule } from 'toast-message-display';
+import { ToastMessageDisplayService, ToastDisplay, ToastColors, ToastMessageDisplayModule } from 'toast-message-display';
 import * as i1 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
 import * as i1$1 from '@angular/common';
@@ -29,7 +29,7 @@ import { MatProgressBarModule } from '@angular/material/progress-bar';
 import * as i5 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSidenavModule } from '@angular/material/sidenav';
-import * as i10$1 from '@angular/material/slide-toggle';
+import * as i10 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import * as i3$2 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
@@ -37,7 +37,7 @@ import * as i4$1 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import * as i8 from '@angular/material/table';
 import { MatTableModule } from '@angular/material/table';
-import * as i10 from '@angular/material/button-toggle';
+import * as i10$1 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import * as i3 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
@@ -1045,7 +1045,7 @@ class HTTPManagerService extends RequestService {
     constructor(configOptions) {
         super();
         this.configOptions = configOptions;
-        this.toastMessage = inject(ToastMessageService);
+        this.toastMessage = inject(ToastMessageDisplayService);
         this.ng_injector = inject(Injector);
         this.objectMergerService = inject(ObjectMergerService);
         this.countdown = new BehaviorSubject(0);
@@ -1853,7 +1853,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 class RequestErrorInterceptor {
     constructor() {
-        this.toastMessage = inject(ToastMessageService);
+        this.toastMessage = inject(ToastMessageDisplayService);
     }
     intercept(req, next) {
         return next.handle(req).pipe(catchError$1((error) => {
@@ -2159,159 +2159,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
-class LocalStorageDemoComponent {
-    get type() {
-        return (this.typeControl.value) ? +this.typeControl.value : 0;
-    }
-    get isValid() {
-        return this.newStoreForm.valid;
-    }
-    get isValidData() {
-        return this.storageForm.valid;
-    }
-    constructor(configOptions) {
-        this.configOptions = configOptions;
-        this.fb = inject(FormBuilder);
-        this.utils = inject(UtilsService);
-        this.type$ = new BehaviorSubject(StorageType.GLOBAL);
-        this.typeControl = this.fb.control(StorageType.GLOBAL.toString());
-        this.localStorageManagerService = inject(LocalStorageManagerService);
-        this.settings$ = this.localStorageManagerService.settings$;
-        this.setting$ = (store) => this.localStorageManagerService.setting$(store);
-        this.storageForm = this.fb.group({
-            store: this.fb.control(null),
-            type: 'local',
-            settingType: 'local',
-            encrypted: false,
-            data: this.fb.control('', Validators.required),
-        });
-        this.newStoreForm = this.fb.group({
-            name: this.fb.control(null, Validators.required),
-            storage: 'local',
-            encrypted: false,
-            data: this.fb.control('', Validators.required),
-            expiresIn: this.fb.control('0')
-        });
-        this.storeData$ = this.storageForm.get('store')?.valueChanges
-            .pipe(switchMap((data) => {
-            return data
-                ? this.localStorageManagerService.store$(data.name)
-                : of('');
-        }), tap(data => {
-            this.storageForm.get('data')?.patchValue(data, { emitEvent: false });
-        }));
-        this.expiresIn = (epoch) => this.utils.expiresIn(epoch);
-        this.isValidJSON = (str) => {
-            try {
-                JSON.parse(str);
-                return true;
-            }
-            catch (e) {
-                return false;
-            }
-        };
-        this.displayedColumns = ['name', 'id', 'encrypted', 'expires', "option"];
-        this.filterData = (values) => {
-            if (!values)
-                return [];
-            return values.filter((item) => item.options.storage === +this.type);
-        };
-        this.create = false;
-    }
-    ngOnInit() {
-        this.storeProps = this.configOptions?.LocalStorageOptions;
-        this.options = this.storeProps?.options;
-        if (this.options?.storage) {
-            this.typeControl.patchValue(this.options.storage.toString());
-            this.typeControl.disable();
-        }
-        else {
-            this.typeControl.enable();
-        }
-        if (this.options?.expiresIn) {
-            this.newStoreForm.get('expiresIn')?.patchValue(this.options.expiresIn);
-            this.newStoreForm.get('expiresIn')?.disable();
-        }
-        else {
-            this.newStoreForm.get('expiresIn')?.enable();
-        }
-        if (this.options?.encrypted) {
-            this.newStoreForm.get('encrypted')?.patchValue(this.options.encrypted);
-            this.newStoreForm.get('encrypted')?.disable();
-        }
-        else {
-            this.newStoreForm.get('encrypted')?.enable();
-        }
-    }
-    onCreateStore() {
-        if (!this.isValid)
-            return;
-        const store = this.newStoreForm.value;
-        if (!store.name || store.name === '')
-            return;
-        const options = { storage: this.type, encrypted: store.encrypted, expiresIn: store.expiresIn };
-        this.localStorageManagerService.createStore({
-            name: store.name,
-            data: store.data,
-            options: SettingOptions.adapt(options)
-        });
-        this.newStoreForm.reset();
-        this.create = false;
-    }
-    onUpdateStore(store) {
-        if (!this.storageForm.valid)
-            return;
-        const storeData = this.storageForm.value;
-        const data = JSON.parse(storeData.data || '');
-        const type = (storeData.type === 'local') ? StorageType.GLOBAL : StorageType.SESSION;
-        const options = { storage: type, encrypted: storeData.encrypted };
-        this.localStorageManagerService.updateStore({
-            name: store.name,
-            data
-        });
-    }
-    onSelectedRow(store) {
-        this.store = store;
-        this.data$ = this.localStorageManagerService.store$(store.name).pipe(map(item => JSON.stringify(item)));
-        this.create = false;
-    }
-    onCreate() {
-        this.onCancel();
-        this.create = true;
-    }
-    onDelete(store) {
-        console.log('DELETED STORE:', store);
-        this.localStorageManagerService.deleteStore({
-            name: store.name,
-        });
-        this.onCancel();
-    }
-    onCancel() {
-        this.data$ = EMPTY;
-        this.store = null;
-        this.create = false;
-    }
-    onUpdate(store, data) {
-        this.localStorageManagerService.updateStore({
-            name: store.name,
-            data: JSON.parse(data)
-        });
-        this.onCancel();
-    }
-    onReset() {
-        this.localStorageManagerService.resetStore();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalStorageDemoComponent, deps: [{ token: CONFIG_SETTINGS_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LocalStorageDemoComponent, selector: "app-local-storage-demo", ngImport: i0, template: "<div style=\"margin: 2rem;\">\n\n  <div style=\"display: flex; gap: 1rem\">\n    <h2 style=\"padding-top: .5rem; display: flex;\">\n      <div style=\"padding-top: .5rem;\">Local Storage Manager</div>\n      <div>\n        <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n          <mat-icon>info</mat-icon>\n        </button>\n      </div>\n    </h2>\n    <span style=\"flex:1\"></span>\n    <div style=\"padding-top: .25rem;\">\n      <mat-button-toggle-group name=\"storage\" [formControl]=\"typeControl\" (change)=\"onCancel()\">\n        <mat-button-toggle value=\"0\">Local Storage</mat-button-toggle>\n        <mat-button-toggle value=\"1\">Session Storage</mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n    <div style=\"margin-top: .25rem;\">\n      <button mat-icon-button (click)=\"onCreate()\">\n        <mat-icon>add</mat-icon>\n      </button>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"storeProps?.storageName || storeProps?.storageSettingsName\">\n    <div style=\"display: flex; gap: .5rem; flex-direction: column; border: gray solid thin; background-color: whitesmoke; padding: 1rem;\"\n    >\n      <div style=\"display: flex;\">\n        <div *ngIf=\"storeProps?.storageSettingsName\" style=\"flex:1\">\n          Database: <b>{{ storeProps?.storageSettingsName }}</b>\n        </div>\n        <div *ngIf=\"storeProps?.storageName\" style=\"flex:1\">\n          Data: <b>{{ storeProps?.storageName }}</b>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <div style=\"margin-top: 2rem;\" [formGroup]=\"newStoreForm\" *ngIf=\"create; else LIST\">\n\n    <h2>Create Store</h2>\n\n    <div style=\"display: flex; gap: 1rem;\">\n      <div style=\"flex:1\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Store Name</mat-label>\n          <input matInput placeholder=\"sample\" formControlName=\"name\">\n        </mat-form-field>\n      </div>\n      <div>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Expires In...</mat-label>\n          <mat-select formControlName=\"expiresIn\">\n            <mat-option value=\"0\">None</mat-option>\n            <mat-option value=\"30s\">30 Seconds</mat-option>\n            <mat-option value=\"1mn\">1 Minute</mat-option>\n            <mat-option value=\"1hr\">1 Hour</mat-option>\n            <mat-option value=\"1d\">1 Day</mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <div style=\"margin-top: 1rem;\">\n        <mat-slide-toggle formControlName=\"encrypted\">Encrypted</mat-slide-toggle>\n      </div>\n    </div>\n\n    <div style=\"display: flex;\">\n      <mat-form-field appearance=\"outline\" style=\"flex: 1;\">\n        <mat-label>Data (Must be an Object or Array of any)</mat-label>\n        <textarea matInput placeholder=\"[]\" formControlName=\"data\" #json></textarea>\n      </mat-form-field>\n    </div>\n    <mat-error *ngIf=\"!isValidJSON(json.value)\">Not Valid Data</mat-error>\n\n    <div style=\"display: flex;\">\n      <span style=\"flex:1\"></span>\n      <button mat-stroked-button (click)=\"onCreateStore()\" [disabled]=\"!(isValid && isValidJSON(json.value))\">\n        Save Store\n      </button>\n    </div>\n\n  </div>\n\n  <ng-template #LIST>\n\n    <div style=\"margin-top: 1rem;\">\n      <mat-divider></mat-divider>\n    </div>\n{{ settings$ | async | json }}\n    <div *ngIf=\"filterData(settings$ | async) as data\">\n      <ng-container *ngIf=\"data.length > 0; else NO_DATA\">\n        <table mat-table [dataSource]=\"data\">\n          <ng-container matColumnDef=\"name\">\n            <th mat-header-cell *matHeaderCellDef> Store </th>\n            <td mat-cell *matCellDef=\"let element\" style=\"font-weight: bold; text-transform: uppercase;\"> {{element.name}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"id\">\n            <th mat-header-cell *matHeaderCellDef> ID </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.id}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"encrypted\">\n            <th mat-header-cell *matHeaderCellDef style=\"text-align: center;\"> Encrypted </th>\n            <td mat-cell *matCellDef=\"let element\" style=\"text-align: center;\">\n              <ng-container *ngIf=\"element.options.encrypted; else NO\">YES</ng-container>\n              <ng-template #NO><span style=\"color:gray\">NO</span></ng-template>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"expires\">\n            <th mat-header-cell *matHeaderCellDef style=\"text-align: center;\"> Expires </th>\n            <td mat-cell *matCellDef=\"let element\" style=\"text-align: center;\">\n              <ng-container *ngIf=\"element.options.expires !== 0; else NO_DATA\">\n                {{expiresIn(element.options.expires)}}\n              </ng-container>\n              <ng-template #NO_DATA>\n                \u221E\n              </ng-template>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"option\">\n            <th mat-header-cell *matHeaderCellDef></th>\n            <td mat-cell *matCellDef=\"let element\" style=\"padding-right: 0;\">\n              <div style=\"display: flex;justify-content: flex-end;\">\n                <button mat-icon-button color=\"warn\" (click)=\"onDelete(element); $event.stopPropagation()\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </div>\n            </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" (click)=\"onSelectedRow(row)\"></tr>\n        </table>\n      </ng-container>\n\n      <ng-template #NO_DATA>\n        <h3 style=\"margin-top: 1rem;\">No Data</h3>\n      </ng-template>\n\n      <div *ngIf=\"(data$ | async) as data\" style=\"margin-top: 2rem;\">\n        <div style=\"margin-bottom: 1rem;\">\n          <mat-divider></mat-divider>\n        </div>\n\n        <h3>STORE: <span style=\"font-weight: bold;\">{{ store.name | uppercase }}</span></h3>\n        <h3>SETTINGS: {{ setting$(store.name) | async | json }}</h3>\n        <div style=\"display: flex;\">\n          <mat-form-field appearance=\"outline\" style=\"flex: 1;\">\n            <mat-label>Data (Must be an Object or Array of any)</mat-label>\n            <textarea matInput placeholder=\"[]\" #json [value]=\"data\"></textarea>\n          </mat-form-field>\n        </div>\n        <mat-error *ngIf=\"!isValidJSON(json.value)\">Not Valid Data</mat-error>\n\n        <div style=\"display: flex; gap: .5rem;\">\n          <span style=\"flex:1\"></span>\n          <button mat-stroked-button (click)=\"onCancel()\">Cancel</button>\n          <button mat-stroked-button (click)=\"onUpdate(store, json.value)\" [disabled]=\"!(isValidJSON(json.value))\">Update</button>\n        </div>\n      </div>\n    </div>\n\n  </ng-template>\n\n  <div style=\"margin-top: 1rem;\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 1rem;\">\n    <button mat-stroked-button (click)=\"onReset()\">Delete All Stores</button>\n  </div>\n\n</div>\n\n\n<mat-menu #menu=\"matMenu\">\n  <div style=\"padding: 1rem;\">\n    <p>Please note that the LocalStorage (encryption) and management of data is dependant on initializing the APP_ID</p>\n    <p>Must provide a value for <b>APP_ID</b> in AppModule->Providers</p>\n    <mat-divider></mat-divider>\n  <div style=\"font-size: smaller; margin-top: .5rem;\">\n    <p>Example: UUID (self.crypto.randomUUID() to generate)</p>\n    <div style=\"background-color: whitesmoke; padding: 1rem;\">\n      &#123;<br>\n        provide: APP_ID,<br>\n        useValue: \"056991ac-3537-43ab-b5b9-83edf6554eff\",<br>\n      &#125;\n    </div>\n  </div>\n  </div>\n</mat-menu>\n", styles: [".mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor}.demo-row-is-clicked{font-weight:700}.mat-mdc-menu-panel.mat-mdc-menu-panel{max-width:280px!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i3$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i8.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i8.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i8.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i8.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i10.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i10.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i10$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i11.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i12.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }], encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalStorageDemoComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-local-storage-demo', encapsulation: ViewEncapsulation.None, template: "<div style=\"margin: 2rem;\">\n\n  <div style=\"display: flex; gap: 1rem\">\n    <h2 style=\"padding-top: .5rem; display: flex;\">\n      <div style=\"padding-top: .5rem;\">Local Storage Manager</div>\n      <div>\n        <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n          <mat-icon>info</mat-icon>\n        </button>\n      </div>\n    </h2>\n    <span style=\"flex:1\"></span>\n    <div style=\"padding-top: .25rem;\">\n      <mat-button-toggle-group name=\"storage\" [formControl]=\"typeControl\" (change)=\"onCancel()\">\n        <mat-button-toggle value=\"0\">Local Storage</mat-button-toggle>\n        <mat-button-toggle value=\"1\">Session Storage</mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n    <div style=\"margin-top: .25rem;\">\n      <button mat-icon-button (click)=\"onCreate()\">\n        <mat-icon>add</mat-icon>\n      </button>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"storeProps?.storageName || storeProps?.storageSettingsName\">\n    <div style=\"display: flex; gap: .5rem; flex-direction: column; border: gray solid thin; background-color: whitesmoke; padding: 1rem;\"\n    >\n      <div style=\"display: flex;\">\n        <div *ngIf=\"storeProps?.storageSettingsName\" style=\"flex:1\">\n          Database: <b>{{ storeProps?.storageSettingsName }}</b>\n        </div>\n        <div *ngIf=\"storeProps?.storageName\" style=\"flex:1\">\n          Data: <b>{{ storeProps?.storageName }}</b>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <div style=\"margin-top: 2rem;\" [formGroup]=\"newStoreForm\" *ngIf=\"create; else LIST\">\n\n    <h2>Create Store</h2>\n\n    <div style=\"display: flex; gap: 1rem;\">\n      <div style=\"flex:1\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Store Name</mat-label>\n          <input matInput placeholder=\"sample\" formControlName=\"name\">\n        </mat-form-field>\n      </div>\n      <div>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Expires In...</mat-label>\n          <mat-select formControlName=\"expiresIn\">\n            <mat-option value=\"0\">None</mat-option>\n            <mat-option value=\"30s\">30 Seconds</mat-option>\n            <mat-option value=\"1mn\">1 Minute</mat-option>\n            <mat-option value=\"1hr\">1 Hour</mat-option>\n            <mat-option value=\"1d\">1 Day</mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <div style=\"margin-top: 1rem;\">\n        <mat-slide-toggle formControlName=\"encrypted\">Encrypted</mat-slide-toggle>\n      </div>\n    </div>\n\n    <div style=\"display: flex;\">\n      <mat-form-field appearance=\"outline\" style=\"flex: 1;\">\n        <mat-label>Data (Must be an Object or Array of any)</mat-label>\n        <textarea matInput placeholder=\"[]\" formControlName=\"data\" #json></textarea>\n      </mat-form-field>\n    </div>\n    <mat-error *ngIf=\"!isValidJSON(json.value)\">Not Valid Data</mat-error>\n\n    <div style=\"display: flex;\">\n      <span style=\"flex:1\"></span>\n      <button mat-stroked-button (click)=\"onCreateStore()\" [disabled]=\"!(isValid && isValidJSON(json.value))\">\n        Save Store\n      </button>\n    </div>\n\n  </div>\n\n  <ng-template #LIST>\n\n    <div style=\"margin-top: 1rem;\">\n      <mat-divider></mat-divider>\n    </div>\n{{ settings$ | async | json }}\n    <div *ngIf=\"filterData(settings$ | async) as data\">\n      <ng-container *ngIf=\"data.length > 0; else NO_DATA\">\n        <table mat-table [dataSource]=\"data\">\n          <ng-container matColumnDef=\"name\">\n            <th mat-header-cell *matHeaderCellDef> Store </th>\n            <td mat-cell *matCellDef=\"let element\" style=\"font-weight: bold; text-transform: uppercase;\"> {{element.name}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"id\">\n            <th mat-header-cell *matHeaderCellDef> ID </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.id}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"encrypted\">\n            <th mat-header-cell *matHeaderCellDef style=\"text-align: center;\"> Encrypted </th>\n            <td mat-cell *matCellDef=\"let element\" style=\"text-align: center;\">\n              <ng-container *ngIf=\"element.options.encrypted; else NO\">YES</ng-container>\n              <ng-template #NO><span style=\"color:gray\">NO</span></ng-template>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"expires\">\n            <th mat-header-cell *matHeaderCellDef style=\"text-align: center;\"> Expires </th>\n            <td mat-cell *matCellDef=\"let element\" style=\"text-align: center;\">\n              <ng-container *ngIf=\"element.options.expires !== 0; else NO_DATA\">\n                {{expiresIn(element.options.expires)}}\n              </ng-container>\n              <ng-template #NO_DATA>\n                \u221E\n              </ng-template>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"option\">\n            <th mat-header-cell *matHeaderCellDef></th>\n            <td mat-cell *matCellDef=\"let element\" style=\"padding-right: 0;\">\n              <div style=\"display: flex;justify-content: flex-end;\">\n                <button mat-icon-button color=\"warn\" (click)=\"onDelete(element); $event.stopPropagation()\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </div>\n            </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" (click)=\"onSelectedRow(row)\"></tr>\n        </table>\n      </ng-container>\n\n      <ng-template #NO_DATA>\n        <h3 style=\"margin-top: 1rem;\">No Data</h3>\n      </ng-template>\n\n      <div *ngIf=\"(data$ | async) as data\" style=\"margin-top: 2rem;\">\n        <div style=\"margin-bottom: 1rem;\">\n          <mat-divider></mat-divider>\n        </div>\n\n        <h3>STORE: <span style=\"font-weight: bold;\">{{ store.name | uppercase }}</span></h3>\n        <h3>SETTINGS: {{ setting$(store.name) | async | json }}</h3>\n        <div style=\"display: flex;\">\n          <mat-form-field appearance=\"outline\" style=\"flex: 1;\">\n            <mat-label>Data (Must be an Object or Array of any)</mat-label>\n            <textarea matInput placeholder=\"[]\" #json [value]=\"data\"></textarea>\n          </mat-form-field>\n        </div>\n        <mat-error *ngIf=\"!isValidJSON(json.value)\">Not Valid Data</mat-error>\n\n        <div style=\"display: flex; gap: .5rem;\">\n          <span style=\"flex:1\"></span>\n          <button mat-stroked-button (click)=\"onCancel()\">Cancel</button>\n          <button mat-stroked-button (click)=\"onUpdate(store, json.value)\" [disabled]=\"!(isValidJSON(json.value))\">Update</button>\n        </div>\n      </div>\n    </div>\n\n  </ng-template>\n\n  <div style=\"margin-top: 1rem;\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 1rem;\">\n    <button mat-stroked-button (click)=\"onReset()\">Delete All Stores</button>\n  </div>\n\n</div>\n\n\n<mat-menu #menu=\"matMenu\">\n  <div style=\"padding: 1rem;\">\n    <p>Please note that the LocalStorage (encryption) and management of data is dependant on initializing the APP_ID</p>\n    <p>Must provide a value for <b>APP_ID</b> in AppModule->Providers</p>\n    <mat-divider></mat-divider>\n  <div style=\"font-size: smaller; margin-top: .5rem;\">\n    <p>Example: UUID (self.crypto.randomUUID() to generate)</p>\n    <div style=\"background-color: whitesmoke; padding: 1rem;\">\n      &#123;<br>\n        provide: APP_ID,<br>\n        useValue: \"056991ac-3537-43ab-b5b9-83edf6554eff\",<br>\n      &#125;\n    </div>\n  </div>\n  </div>\n</mat-menu>\n", styles: [".mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor}.demo-row-is-clicked{font-weight:700}.mat-mdc-menu-panel.mat-mdc-menu-panel{max-width:280px!important}\n"] }]
-        }], ctorParameters: function () { return [{ type: ConfigOptions, decorators: [{
-                    type: Inject,
-                    args: [CONFIG_SETTINGS_TOKEN]
-                }] }]; } });
-
 class ClientInfo {
     constructor(domain = '', service = '', id = 0, name = '') {
         this.domain = domain;
@@ -2324,277 +2171,15 @@ class ClientInfo {
     }
 }
 
-class ClientInfoMapper {
-    constructor(id = 0, name = '') {
-        this.id = id;
-        this.name = name;
-    }
-    static adapt(item) {
-        return new ClientInfoMapper(item?.id, item?.name);
-    }
-}
-
-class AIPrompt {
-    constructor(response = '') {
-        this.response = response;
-    }
-    static adapt(item) {
-        return new AIPrompt(item?.response);
-    }
-}
-
-class RequestManagerDemoComponent {
-    get retry() {
-        return this.requestForm.get('retry')?.value;
-    }
-    get headers() {
-        return this.requestForm.get('headers');
-    }
-    get isValid() {
-        this.requestForm.markAllAsTouched();
-        return this.requestForm.valid;
-    }
-    constructor() {
-        this.displayedColumns = ['id', 'name', 'lastName', 'age'];
-        this.fb = inject(FormBuilder);
-        this.toastMessage = inject(ToastMessageService);
-        this.httpManagerService = inject(HTTPManagerService);
-        this.isPending$ = this.httpManagerService.isPending$;
-        this.countdown$ = this.httpManagerService.countdown$;
-        this.GET_error$ = new BehaviorSubject('');
-        this.POST_error$ = new BehaviorSubject('');
-        this.PUT_error$ = new BehaviorSubject('');
-        this.DELETE_error$ = new BehaviorSubject('');
-        this.STREAM_error$ = new BehaviorSubject('');
-        this.STREAM_AI_error$ = new BehaviorSubject('');
-        this.requestParams = {
-            GET: ApiRequest.adapt(),
-            POST: ApiRequest.adapt(),
-            PUT: ApiRequest.adapt(),
-            DELETE: ApiRequest.adapt(),
-            STREAM: ApiRequest.adapt(),
-        };
-        this.questionControl = this.fb.control("", [Validators.required]);
-        this.downloadRequest = ApiRequest.adapt({
-            server: 'http://localhost:4200/assets',
-            path: ['icons1.svg']
-        });
-        this.sampleClientData = {
-            id: 0,
-            name: "Old School Dates",
-            domain: "osd.com",
-            service: "osd",
-            spiffe: "osd.com/osd",
-            secret: "SMOPECXP-OS4P-USOG-X2II-3XMD1FQDR3IJX",
-            created: 1693003138,
-            modified: 1693003138,
-            icon: "",
-            imageFile: "",
-        };
-        this.requestForm = this.fb.group({
-            path: this.fb.control(""),
-            headers: this.fb.array([]),
-            adapter: [null],
-            retry: this.fb.group({
-                times: [3],
-                delay: [3],
-            }),
-            polling: [3],
-        });
-        this.sampleAdaptors = [
-            { label: "ClientInfo Basic", value: ClientInfo.adapt },
-            { label: "AI Prompt", value: AIPrompt.adapt },
-        ];
-        this.sampleMappers = [
-            { label: "Mapper Basic", value: ClientInfoMapper.adapt },
-            { label: "AI Prompt", value: AIPrompt.adapt },
-        ];
-        // server = `http://sample-endpoint/as/authorization.oauth2`
-        this.arrayObjectsToObjects = (arr) => {
-            return Array.isArray(arr) ? arr.reduce((obj, item) => Object.assign(obj, { [item.key]: item.value }), {}) : {};
-        };
-    }
-    ngOnInit() {
-        // const reqGet2 = ApiRequest.adapt({
-        //   server,
-        //   path: ['clients'],
-        //   headers: { authentication: "Bearer <KEY>" },
-        //   adapter: ClientInfo,
-        //   dataType: DataType.OBJECT,
-        //   // concurrent: false,
-        //   // polling: 3, //seconds
-        // });
-        // const req2 = [1024,1025,1026].map(item => {
-        //   return this.httpManagerService.getRequest<ClientInfo[]>(reqGet2, [item])
-        //   .pipe(
-        //     catchError(error => {
-        //       return throwError(() => new Error(error.error.message));
-        //     })
-        //   )
-        // })
-        // forkJoin(req2)
-        // .subscribe(res => console.log(res))
-    }
-    addHeader() {
-        const header = this.fb.group({
-            key: ['', Validators.required],
-            value: ['']
-        });
-        this.headers.push(header);
-    }
-    removeHeader(index) {
-        this.headers.removeAt(index);
-    }
-    compileRequest() {
-        const requestParams = this.requestForm.value;
-        requestParams.headers = this.arrayObjectsToObjects(requestParams.headers || []);
-        const pathReq = (requestParams.path === "") ? [] : (requestParams.path || "").split("/");
-        if (!this.pollingState.checked)
-            requestParams.polling = 0;
-        if (!this.failedState.checked) {
-            requestParams.retry = { times: 0, delay: 0 };
-        }
-        return ApiRequest.adapt({
-            ...requestParams,
-            // ...{ path: pathReq, server: this.server },
-            ...{ path: pathReq },
-        });
-    }
-    onGetRequest() {
-        if (!this.isValid)
-            return;
-        const reqParams = this.compileRequest();
-        this.requestParams.GET = reqParams;
-        this.GET$ = EMPTY; //Cancels Previous
-        this.GET_error$.next('');
-        this.GET$ = this.httpManagerService.getRequest(reqParams)
-            .pipe(
-        // tap((data) => console.log("API GET response", data)),
-        catchError(error => {
-            return throwError(() => this.errorHandling(error, 'GET'));
-        }));
-    }
-    onCreateRequest() {
-        if (!this.isValid)
-            return;
-        const reqParams = this.compileRequest();
-        this.requestParams.POST = reqParams;
-        this.POST$ = EMPTY; //Cancels Previous
-        this.POST_error$.next('');
-        this.POST$ = this.httpManagerService.postRequest(this.sampleClientData, reqParams)
-            .pipe(
-        // tap((data) => console.log("API POST response", data)),
-        catchError(error => {
-            return throwError(() => this.errorHandling(error, 'POST'));
-        }));
-    }
-    onUpdateRequest() {
-        if (!this.isValid)
-            return;
-        const reqParams = this.compileRequest();
-        this.sampleClientData.id = reqParams.path[reqParams.path.length - 1];
-        this.requestParams.PUT = reqParams;
-        this.PUT$ = EMPTY; //Cancels Previous
-        this.PUT_error$.next('');
-        this.PUT$ = this.httpManagerService.putRequest(this.sampleClientData, reqParams)
-            .pipe(
-        // tap((data) => console.log("API PUT response", data)),
-        catchError(error => {
-            return throwError(() => this.errorHandling(error, 'PUT'));
-        }));
-    }
-    onDeleteRequest() {
-        if (!this.isValid)
-            return;
-        const reqParams = this.compileRequest();
-        this.requestParams.DELETE = reqParams;
-        this.DELETE$ = EMPTY; //Cancels Previous
-        this.DELETE_error$.next('');
-        this.DELETE$ = this.httpManagerService.deleteRequest(reqParams)
-            .pipe(
-        // tap((data) => console.log("API DELETE response", data)),
-        catchError(error => {
-            return throwError(() => this.errorHandling(error, 'DELETE'));
-        }));
-    }
-    onStreamPostRequest() {
-        if (!this.isValid)
-            return;
-        const reqParams = this.compileRequest();
-        reqParams.server = "http://localhost:11434/api";
-        reqParams.path = ["generate"];
-        reqParams.stream = true;
-        const payload = {
-            model: "mistral",
-            prompt: this.questionControl.value,
-            stream: reqParams.stream
-        };
-        this.requestParams.STREAM = reqParams;
-        this.STREAM_AI$ = EMPTY;
-        this.STREAM_AI_error$.next('');
-        this.STREAM_AI$ = this.httpManagerService.postRequest(payload, reqParams)
-            .pipe(map(items => items.map((word) => word.response).flat().join('')), tap(() => this.questionControl.reset()), catchError(error => {
-            return throwError(() => this.errorHandling(error, 'STREAM'));
-        }));
-    }
-    onStreamRequest() {
-        if (!this.isValid)
-            return;
-        const reqParams = this.compileRequest();
-        reqParams.server = "oidc";
-        reqParams.stream = true;
-        this.STREAM$ = this.httpManagerService.getRequest(reqParams)
-            .pipe(
-        // tap((data) => console.log("API STREAM response", data)),
-        catchError(error => {
-            return throwError(() => this.errorHandling(error, 'STREAM'));
-        }));
-    }
-    onDownloadCompleted() {
-        const message = "Download Completed";
-        const display = ToastDisplay.adapt({
-            message,
-            action: 'Ok',
-            color: ToastColors.SUCCESS,
-            icon: 'sentiment_satisfied_alt',
-        });
-        this.toastMessage.toastMessage(display);
-    }
-    onDownloadFailed(err) {
-        const message = "Download Failed";
-        const display = ToastDisplay.adapt({
-            message,
-            action: 'Ok',
-            color: ToastColors.ERROR,
-            icon: 'warning',
-        });
-        this.toastMessage.toastMessage(display);
+class ClientInfoMapper {
+    constructor(id = 0, name = '') {
+        this.id = id;
+        this.name = name;
     }
-    errorHandling(err, type) {
-        if (type === 'GET')
-            this.GET_error$.next(err.message);
-        if (type === 'POST')
-            this.POST_error$.next(err.message);
-        if (type === 'PUT')
-            this.PUT_error$.next(err.message);
-        if (type === 'DELETE')
-            this.DELETE_error$.next(err.message);
-        if (type === 'STREAM')
-            this.STREAM_error$.next(err.message);
+    static adapt(item) {
+        return new ClientInfoMapper(item?.id, item?.name);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RequestManagerDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RequestManagerDemoComponent, selector: "app-request-manager-demo", viewQueries: [{ propertyName: "failedState", first: true, predicate: ["failedState"], descendants: true, static: true }, { propertyName: "pollingState", first: true, predicate: ["pollingState"], descendants: true, static: true }], ngImport: i0, template: "<div style=\"margin: 2rem;\">\n\n  <h2>\n    HTTP Request Manager\n  </h2>\n\n  <div [formGroup]=\"requestForm\" style=\"margin-top: 2rem;\">\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Adapter (Model)</mat-label>\n        <mat-select formControlName=\"adapter\">\n          <mat-option>None</mat-option>\n          <mat-option *ngFor=\"let adapter of sampleAdaptors\" [value]=\"adapter.value\">\n            {{adapter.label}}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Mapper (Model)</mat-label>\n        <mat-select formControlName=\"adapter\">\n          <mat-option>None</mat-option>\n          <mat-option *ngFor=\"let mapper of sampleMappers\" [value]=\"mapper.value\">\n            {{mapper.label}}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <div>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>RestPath (/ delimited)</mat-label>\n        <input matInput placeholder=\"clients/list\" formControlName=\"path\">\n      </mat-form-field>\n    </div>\n    <div>\n      <div formArrayName=\"headers\">\n        <div *ngFor=\"let task of headers.controls; let i = index\" [formGroupName]=\"i\">\n          <div style=\"display: flex; gap: .5rem\">\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Key</mat-label>\n              <input matInput placeholder=\"authentication\" formControlName=\"key\">\n            </mat-form-field>\n            <mat-form-field appearance=\"outline\" style=\"flex:1\">\n              <mat-label>Value</mat-label>\n              <input matInput placeholder=\"sample\" formControlName=\"value\">\n            </mat-form-field>\n            <div style=\"margin-top: .5rem;\">\n              <button mat-icon-button (click)=\"removeHeader(i)\">\n                  <mat-icon>close</mat-icon>\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n      <button mat-stroked-button (click)=\"addHeader()\" class=\"btn\">Add Header</button>\n    </div>\n    <div style=\"margin-top: 2rem; display: flex; flex-direction:column; gap: 1rem;\">\n      <div>\n        <mat-slide-toggle #failedState>Retry on Failed</mat-slide-toggle>\n        <div *ngIf=\"failedState.checked\" style=\"display: flex; gap: .5rem; margin-top: 1rem;\" formGroupName=\"retry\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>#of Times</mat-label>\n            <input matInput placeholder=\"3\" formControlName=\"times\" value=\"3\">\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Delay Until Next</mat-label>\n            <input matInput placeholder=\"3\" formControlName=\"delay\" value=\"3\">\n          </mat-form-field>\n        </div>\n      </div>\n      <div>\n        <mat-slide-toggle #pollingState>Polling</mat-slide-toggle>\n        <div *ngIf=\"pollingState.checked\">\n          <mat-form-field appearance=\"outline\" style=\"margin-top: 1rem\">\n            <mat-label>#of Seconds</mat-label>\n            <input matInput placeholder=\"3\" formControlName=\"polling\" value=\"3\">\n          </mat-form-field>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div style=\"margin-bottom: 1rem; margin-top: 2rem;\">\n    <mat-progress-bar mode=\"indeterminate\"\n      *ngIf=\"(isPending$ | async)\"\n    ></mat-progress-bar>\n    <mat-progress-bar mode=\"determinate\"\n      *ngIf=\"pollingState.checked && !(isPending$ | async)\"\n      [value]=\"(this.countdown$ | async)\"\n    ></mat-progress-bar>\n  </div>\n\n  <div style=\"margin-top: 1rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">GET Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onGetRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(GET_error$ | async) as get_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ get_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\" *ngIf=\"(GET$ | async) as dataRecord\">\n      <!-- <div [innerHTML]=\"(GET$ | async) | jsonv\"></div> -->\n      {{ dataRecord | json }}\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">POST Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onCreateRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(POST_error$ | async) as post_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ post_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\" *ngIf=\"(POST$ | async) as dataRecord\">\n      <!-- <div [innerHTML]=\"(POST$ | async) | jsonv\"></div> -->\n      {{ dataRecord | json }}\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">PUT Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onUpdateRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(PUT_error$ | async) as put_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ put_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\" *ngIf=\"(PUT$ | async) as dataRecord\">\n      <!-- <div [innerHTML]=\"(PUT$ | async) | jsonv\"></div> -->\n       {{ dataRecord | json }}\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">DELETE Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onDeleteRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(DELETE_error$ | async) as delete_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ delete_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\" *ngIf=\"(DELETE$ | async) as dataRecord\">\n      <!-- <div [innerHTML]=\"(DELETE$ | async) | jsonv\"></div> -->\n      {{ dataRecord | json }}\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">Streaming GET Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onStreamRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(STREAM_error$ | async) as stream_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ stream_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\">\n      <div *ngIf=\"(STREAM$ | async) as data\" class=\"container\">\n        <table mat-table [dataSource]=\"data\">\n          <ng-container matColumnDef=\"id\">\n            <th mat-header-cell *matHeaderCellDef> ID </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.id}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"name\">\n            <th mat-header-cell *matHeaderCellDef> First Name </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.name}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"lastName\">\n            <th mat-header-cell *matHeaderCellDef> Last Name </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.lastName}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"age\">\n            <th mat-header-cell *matHeaderCellDef> Age </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.age}} </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n        </table>\n      </div>\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">STREAMING POST Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onStreamPostRequest()\" class=\"btn\">Ask Me</button>\n      </div>\n    </div>\n\n    <div style=\"display: flex;\">\n      <mat-form-field appearance=\"outline\" style=\"flex:1\">\n        <mat-label>Ask me a Question</mat-label>\n        <textarea matInput placeholder=\"Why is the sky blue?\" [formControl]=\"questionControl\"></textarea>\n      </mat-form-field>\n    </div>\n\n    <div *ngIf=\"(STREAM_AI_error$ | async) as stream_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ stream_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\">\n      <div *ngIf=\"(STREAM_AI$ | async) as data\">\n        <p style=\"margin-bottom: .5rem; white-space:pre-wrap;\">{{data}}</p>\n      </div>\n    </div>\n\n  </div>\n\n  <div>\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1; margin-bottom: 0; padding-top: .5rem; display: flex;\">\n        <div>\n          Download File\n        </div>\n        <div style=\"flex:1; margin-left: 1rem;\">\n          <mat-slide-toggle #disable>\n            <span *ngIf=\"disable.checked; else DISABLE\">\n              Enable\n            </span>\n            <ng-template #DISABLE>Disable</ng-template>\n          </mat-slide-toggle>\n        </div>\n      </h2>\n      <div>\n        <app-file-downloader\n          [disabled]=\"disable.checked\"\n          [delayError]=\"3\"\n          [apiRequest]=\"downloadRequest\"\n          (completed)=\"onDownloadCompleted()\"\n          (failed)=\"onDownloadFailed($event)\"\n        ></app-file-downloader>\n      </div>\n    </div>\n  </div>\n\n</div>\n", styles: [".btn{min-width:120px}.mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor;background-color:#f5f5f5}.container{height:400px;overflow:auto}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i8.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i8.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i8.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i8.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i10$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i11.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i12.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: FileDownloaderComponent, selector: "app-file-downloader", inputs: ["delayError", "apiRequest", "displayErrorMessage", "labels", "disabled"], outputs: ["completed", "failed"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RequestManagerDemoComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-request-manager-demo', template: "<div style=\"margin: 2rem;\">\n\n  <h2>\n    HTTP Request Manager\n  </h2>\n\n  <div [formGroup]=\"requestForm\" style=\"margin-top: 2rem;\">\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Adapter (Model)</mat-label>\n        <mat-select formControlName=\"adapter\">\n          <mat-option>None</mat-option>\n          <mat-option *ngFor=\"let adapter of sampleAdaptors\" [value]=\"adapter.value\">\n            {{adapter.label}}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Mapper (Model)</mat-label>\n        <mat-select formControlName=\"adapter\">\n          <mat-option>None</mat-option>\n          <mat-option *ngFor=\"let mapper of sampleMappers\" [value]=\"mapper.value\">\n            {{mapper.label}}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <div>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>RestPath (/ delimited)</mat-label>\n        <input matInput placeholder=\"clients/list\" formControlName=\"path\">\n      </mat-form-field>\n    </div>\n    <div>\n      <div formArrayName=\"headers\">\n        <div *ngFor=\"let task of headers.controls; let i = index\" [formGroupName]=\"i\">\n          <div style=\"display: flex; gap: .5rem\">\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Key</mat-label>\n              <input matInput placeholder=\"authentication\" formControlName=\"key\">\n            </mat-form-field>\n            <mat-form-field appearance=\"outline\" style=\"flex:1\">\n              <mat-label>Value</mat-label>\n              <input matInput placeholder=\"sample\" formControlName=\"value\">\n            </mat-form-field>\n            <div style=\"margin-top: .5rem;\">\n              <button mat-icon-button (click)=\"removeHeader(i)\">\n                  <mat-icon>close</mat-icon>\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n      <button mat-stroked-button (click)=\"addHeader()\" class=\"btn\">Add Header</button>\n    </div>\n    <div style=\"margin-top: 2rem; display: flex; flex-direction:column; gap: 1rem;\">\n      <div>\n        <mat-slide-toggle #failedState>Retry on Failed</mat-slide-toggle>\n        <div *ngIf=\"failedState.checked\" style=\"display: flex; gap: .5rem; margin-top: 1rem;\" formGroupName=\"retry\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>#of Times</mat-label>\n            <input matInput placeholder=\"3\" formControlName=\"times\" value=\"3\">\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Delay Until Next</mat-label>\n            <input matInput placeholder=\"3\" formControlName=\"delay\" value=\"3\">\n          </mat-form-field>\n        </div>\n      </div>\n      <div>\n        <mat-slide-toggle #pollingState>Polling</mat-slide-toggle>\n        <div *ngIf=\"pollingState.checked\">\n          <mat-form-field appearance=\"outline\" style=\"margin-top: 1rem\">\n            <mat-label>#of Seconds</mat-label>\n            <input matInput placeholder=\"3\" formControlName=\"polling\" value=\"3\">\n          </mat-form-field>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div style=\"margin-bottom: 1rem; margin-top: 2rem;\">\n    <mat-progress-bar mode=\"indeterminate\"\n      *ngIf=\"(isPending$ | async)\"\n    ></mat-progress-bar>\n    <mat-progress-bar mode=\"determinate\"\n      *ngIf=\"pollingState.checked && !(isPending$ | async)\"\n      [value]=\"(this.countdown$ | async)\"\n    ></mat-progress-bar>\n  </div>\n\n  <div style=\"margin-top: 1rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">GET Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onGetRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(GET_error$ | async) as get_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ get_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\" *ngIf=\"(GET$ | async) as dataRecord\">\n      <!-- <div [innerHTML]=\"(GET$ | async) | jsonv\"></div> -->\n      {{ dataRecord | json }}\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">POST Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onCreateRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(POST_error$ | async) as post_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ post_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\" *ngIf=\"(POST$ | async) as dataRecord\">\n      <!-- <div [innerHTML]=\"(POST$ | async) | jsonv\"></div> -->\n      {{ dataRecord | json }}\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">PUT Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onUpdateRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(PUT_error$ | async) as put_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ put_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\" *ngIf=\"(PUT$ | async) as dataRecord\">\n      <!-- <div [innerHTML]=\"(PUT$ | async) | jsonv\"></div> -->\n       {{ dataRecord | json }}\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">DELETE Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onDeleteRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(DELETE_error$ | async) as delete_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ delete_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\" *ngIf=\"(DELETE$ | async) as dataRecord\">\n      <!-- <div [innerHTML]=\"(DELETE$ | async) | jsonv\"></div> -->\n      {{ dataRecord | json }}\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">Streaming GET Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onStreamRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(STREAM_error$ | async) as stream_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ stream_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\">\n      <div *ngIf=\"(STREAM$ | async) as data\" class=\"container\">\n        <table mat-table [dataSource]=\"data\">\n          <ng-container matColumnDef=\"id\">\n            <th mat-header-cell *matHeaderCellDef> ID </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.id}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"name\">\n            <th mat-header-cell *matHeaderCellDef> First Name </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.name}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"lastName\">\n            <th mat-header-cell *matHeaderCellDef> Last Name </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.lastName}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"age\">\n            <th mat-header-cell *matHeaderCellDef> Age </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.age}} </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n        </table>\n      </div>\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">STREAMING POST Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onStreamPostRequest()\" class=\"btn\">Ask Me</button>\n      </div>\n    </div>\n\n    <div style=\"display: flex;\">\n      <mat-form-field appearance=\"outline\" style=\"flex:1\">\n        <mat-label>Ask me a Question</mat-label>\n        <textarea matInput placeholder=\"Why is the sky blue?\" [formControl]=\"questionControl\"></textarea>\n      </mat-form-field>\n    </div>\n\n    <div *ngIf=\"(STREAM_AI_error$ | async) as stream_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ stream_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\">\n      <div *ngIf=\"(STREAM_AI$ | async) as data\">\n        <p style=\"margin-bottom: .5rem; white-space:pre-wrap;\">{{data}}</p>\n      </div>\n    </div>\n\n  </div>\n\n  <div>\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1; margin-bottom: 0; padding-top: .5rem; display: flex;\">\n        <div>\n          Download File\n        </div>\n        <div style=\"flex:1; margin-left: 1rem;\">\n          <mat-slide-toggle #disable>\n            <span *ngIf=\"disable.checked; else DISABLE\">\n              Enable\n            </span>\n            <ng-template #DISABLE>Disable</ng-template>\n          </mat-slide-toggle>\n        </div>\n      </h2>\n      <div>\n        <app-file-downloader\n          [disabled]=\"disable.checked\"\n          [delayError]=\"3\"\n          [apiRequest]=\"downloadRequest\"\n          (completed)=\"onDownloadCompleted()\"\n          (failed)=\"onDownloadFailed($event)\"\n        ></app-file-downloader>\n      </div>\n    </div>\n  </div>\n\n</div>\n", styles: [".btn{min-width:120px}.mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor;background-color:#f5f5f5}.container{height:400px;overflow:auto}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { failedState: [{
-                type: ViewChild,
-                args: ["failedState", { static: true }]
-            }], pollingState: [{
-                type: ViewChild,
-                args: ["pollingState", { static: true }]
-            }] } });
 
 class StateManagerDemoService extends HTTPManagerStateService {
     constructor() {
@@ -2665,6 +2250,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }], ctorParameters: function () { return []; } });
 
+class AIPrompt {
+    constructor(response = '') {
+        this.response = response;
+    }
+    static adapt(item) {
+        return new AIPrompt(item?.response);
+    }
+}
+
 class RequestManagerStateDemoComponent {
     get dataObservable$() {
         switch (this.requestType) {
@@ -2860,28 +2454,281 @@ class RequestManagerStateDemoComponent {
     onStreamPostRequest() {
         if (!this.isValid)
             return;
-        this.requestType = 'STREAM_AI';
+        this.requestType = 'STREAM_AI';
+        const reqParams = this.compileRequest();
+        reqParams.server = "http://localhost:11434/api";
+        reqParams.path = ["generate"];
+        reqParams.stream = true;
+        this.stateManagerDemoService.setAPIOptions(reqParams, DataType.ARRAY);
+        const payload = {
+            model: "mistral",
+            prompt: this.questionControl.value,
+            stream: reqParams.stream
+        };
+        this.stateManagerDemoService.streamAIRequest(payload);
+    }
+    onStreamRequest() {
+        if (!this.isValid)
+            return;
+        this.requestType = 'STREAM';
+        const reqParams = this.compileRequest();
+        reqParams.server = "oidc";
+        reqParams.stream = true;
+        this.stateManagerDemoService.setAPIOptions(reqParams, DataType.ARRAY);
+        this.stateManagerDemoService.streamRequest();
+    }
+    errorHandling(err, type) {
+        if (type === 'GET')
+            this.GET_error$.next(err.message);
+        if (type === 'POST')
+            this.POST_error$.next(err.message);
+        if (type === 'PUT')
+            this.PUT_error$.next(err.message);
+        if (type === 'DELETE')
+            this.DELETE_error$.next(err.message);
+        if (type === 'STREAM')
+            this.STREAM_error$.next(err.message);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RequestManagerStateDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RequestManagerStateDemoComponent, selector: "app-request-manager-state-demo", viewQueries: [{ propertyName: "failedState", first: true, predicate: ["failedState"], descendants: true, static: true }, { propertyName: "pollingState", first: true, predicate: ["pollingState"], descendants: true, static: true }], ngImport: i0, template: "<div style=\"margin: 2rem;\">\n\n  <h2>\n    HTTP Request State Manager\n  </h2>\n\n  <div [formGroup]=\"requestForm\" style=\"margin-top: 2rem;\">\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>State Data Type</mat-label>\n        <mat-select formControlName=\"datatype\">\n          <mat-option value=\"ARRAY\">Array</mat-option>\n          <mat-option value=\"OBJECT\">Object</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Adapter (Model)</mat-label>\n        <mat-select formControlName=\"adapter\">\n          <mat-option>None</mat-option>\n          <mat-option *ngFor=\"let adapter of sampleAdaptors\" [value]=\"adapter.value\">\n            {{adapter.label}}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Mapper (Model)</mat-label>\n        <mat-select formControlName=\"mapper\">\n          <mat-option>None</mat-option>\n          <mat-option *ngFor=\"let mapper of sampleMappers\" [value]=\"mapper.value\">\n            {{mapper.label}}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <div>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>RestPath (/ delimited)</mat-label>\n        <input matInput placeholder=\"clients/list\" formControlName=\"path\">\n      </mat-form-field>\n    </div>\n    <div>\n      <div formArrayName=\"headers\">\n        <div *ngFor=\"let task of headers.controls; let i = index\" [formGroupName]=\"i\">\n          <div style=\"display: flex; gap: .5rem\">\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Key</mat-label>\n              <input matInput placeholder=\"authentication\" formControlName=\"key\">\n            </mat-form-field>\n            <mat-form-field appearance=\"outline\" style=\"flex:1\">\n              <mat-label>Value</mat-label>\n              <input matInput placeholder=\"sample\" formControlName=\"value\">\n            </mat-form-field>\n            <div style=\"margin-top: .5rem;\">\n              <button mat-icon-button (click)=\"removeHeader(i)\">\n                  <mat-icon>close</mat-icon>\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n      <button mat-stroked-button (click)=\"addHeader()\">Add Header</button>\n    </div>\n    <div style=\"margin-top: 2rem; display: flex; flex-direction:column; gap: 1rem;\">\n      <div>\n        <mat-slide-toggle #failedState>Retry on Failed</mat-slide-toggle>\n        <div *ngIf=\"failedState.checked\" style=\"display: flex; gap: .5rem; margin-top: 1rem;\" formGroupName=\"retry\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>#of Times</mat-label>\n            <input matInput placeholder=\"3\" formControlName=\"times\" value=\"3\">\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Delay Until Next</mat-label>\n            <input matInput placeholder=\"3\" formControlName=\"delay\" value=\"3\">\n          </mat-form-field>\n        </div>\n      </div>\n      <div>\n        <mat-slide-toggle #pollingState>Polling</mat-slide-toggle>\n        <div *ngIf=\"pollingState.checked\">\n          <mat-form-field appearance=\"outline\" style=\"margin-top: 1rem\">\n            <mat-label>#of Seconds</mat-label>\n            <input matInput placeholder=\"3\" formControlName=\"polling\" value=\"3\">\n          </mat-form-field>\n        </div>\n      </div>\n      <div>\n        <mat-slide-toggle #DBState>Database Storage</mat-slide-toggle>\n        <div *ngIf=\"DBState.checked\" style=\"display: flex; gap: .5rem; margin-top: 1rem\" formGroupName=\"database\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Table Name</mat-label>\n            <input matInput placeholder=\"table\" formControlName=\"table\" value=\"\">\n          </mat-form-field>\n          <div>\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Expires In</mat-label>\n              <mat-select formControlName=\"expiresIn\">\n                <mat-option value=\"1m\">One Minute</mat-option>\n                <mat-option value=\"1h\">One Hour</mat-option>\n                <mat-option value=\"1d\">One Day</mat-option>\n              </mat-select>\n            </mat-form-field>\n          </div>\n        </div>\n      </div>\n      <div style=\"margin-top: 1rem; display: flex;\">\n        <span style=\"flex:1\"></span>\n        <button mat-stroked-button (click)=\"onSetStateOptions()\" [disabled]=\"!hasChanged\">\n          Set API Request Options\n        </button>\n      </div>\n      <div>\n        <mat-error *ngIf=\"(error$ | async) as error\">\n          {{ error | json }}\n        </mat-error>\n      </div>\n    </div>\n  </div>\n\n  <div style=\"margin-bottom: 1rem; margin-top: 2rem;\">\n    <mat-progress-bar mode=\"indeterminate\" \n      *ngIf=\"(isPending$ | async)\"\n    ></mat-progress-bar>\n    <div *ngIf=\"pollingState.checked\">\n      <mat-progress-bar mode=\"determinate\" \n      *ngIf=\"!(isPending$ | async) && (this.countdown$ | async) || -1 > 0\" \n      [value]=\"(this.countdown$ | async)\"\n      ></mat-progress-bar>\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\" *ngIf=\"(GET$ | async) as data\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1;\">CURRENT STATE ({{ dataType }})</h2>\n    </div>\n    <div *ngIf=\"data.length > 1\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Records</mat-label>\n        <mat-select [formControl]=\"selectedRecord\" [disabled]=\"data === null && data?.length === 0\">\n          <mat-option [value]=\"\">None</mat-option>\n          <mat-option *ngFor=\"let item of data\" [value]=\"item\">\n            {{item.domain}}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <div *ngIf=\"(dataObservable$ | async) as dataRecord\">\n      <div *ngIf=\"(selectedRecord$ | async) as record; else NO_RECORD\">\n        {{ record | json }}\n      </div>\n      <ng-template #NO_RECORD>No Record Selected from State</ng-template>\n      \n    </div>\n    <div style=\"margin-top: 1rem;\">\n      <span *ngIf=\"data !== null && data?.length > 0; else NO_DATA\">\n        State contains a Total of {{ data.length }} Records\n      </span>\n      <ng-template #NO_DATA>No Records</ng-template>\n      <div style=\"display: flex; gap: .5rem; text-align: end; justify-content: flex-end;\">\n        <button class=\"btn\" mat-stroked-button (click)=\"onClearRecords()\">Clear</button>\n        <button class=\"btn\" mat-stroked-button (click)=\"onRefreshRecords()\">Refresh</button>\n      </div>\n    </div>\n  </div>\n\n\n\n\n  <div style=\"margin-top: 1rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">GET Request ({{ dataType }})</h2>\n      <div>\n        <button mat-raised-button (click)=\"onGetRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(GET_error$ | async) as get_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ get_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(GET$ | async) | jsonv\"></div> -->\n      <div>{{ (GET$ | async) | json }}</div>\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">POST Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onCreateRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(POST_error$ | async) as post_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ post_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(POST$ | async) | jsonv\"></div> -->\n      <div>{{ (POST$ | async) | json }}</div>\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">PUT Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onUpdateRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(PUT_error$ | async) as put_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ put_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(PUT$ | async) | jsonv\"></div> -->\n      <div>{{ (PUT$ | async) | json }}</div>\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">DELETE Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onDeleteRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(DELETE_error$ | async) as delete_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ delete_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(DELETE$ | async) | jsonv\"></div> -->\n      <div>{{ (DELETE$ | async) | json }}</div>\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n  \n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">Streaming GET Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onStreamRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(STREAM_error$ | async) as stream_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ stream_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\">\n      <div *ngIf=\"(STREAM$ | async) as data\" class=\"container\">\n        <table mat-table [dataSource]=\"data\">\n          <ng-container matColumnDef=\"id\">\n            <th mat-header-cell *matHeaderCellDef> ID </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.id}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"name\">\n            <th mat-header-cell *matHeaderCellDef> First Name </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.name}} </td>\n          </ng-container>\n        \n          <ng-container matColumnDef=\"lastName\">\n            <th mat-header-cell *matHeaderCellDef> Last Name </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.lastName}} </td>\n          </ng-container>\n        \n          <ng-container matColumnDef=\"age\">\n            <th mat-header-cell *matHeaderCellDef> Age </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.age}} </td>\n          </ng-container>\n        \n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n        </table>\n      </div>\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">STREAMING POST Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onStreamPostRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Ask Me</button>\n      </div>\n    </div>\n\n    <div style=\"display: flex;\">\n      <mat-form-field appearance=\"outline\" style=\"flex:1\">\n        <mat-label>Ask me a Question</mat-label>\n        <textarea matInput placeholder=\"Why is the sky blue?\" [formControl]=\"questionControl\"></textarea>\n      </mat-form-field>\n    </div>\n\n    <div *ngIf=\"(STREAM_error$ | async) as stream_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ stream_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\">\n      <div *ngIf=\"(STREAM_AI$ | async) as data\">\n        <p style=\"margin-bottom: .5rem; white-space:pre-wrap;\">{{data}}</p>\n      </div>\n    </div>\n\n  </div>\n\n</div>", styles: [".btn{min-width:120px}.mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor;background-color:#f5f5f5}.container{height:400px;overflow:auto}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i8.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i8.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i8.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i8.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i10.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i11.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i12.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RequestManagerStateDemoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-request-manager-state-demo', template: "<div style=\"margin: 2rem;\">\n\n  <h2>\n    HTTP Request State Manager\n  </h2>\n\n  <div [formGroup]=\"requestForm\" style=\"margin-top: 2rem;\">\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>State Data Type</mat-label>\n        <mat-select formControlName=\"datatype\">\n          <mat-option value=\"ARRAY\">Array</mat-option>\n          <mat-option value=\"OBJECT\">Object</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Adapter (Model)</mat-label>\n        <mat-select formControlName=\"adapter\">\n          <mat-option>None</mat-option>\n          <mat-option *ngFor=\"let adapter of sampleAdaptors\" [value]=\"adapter.value\">\n            {{adapter.label}}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Mapper (Model)</mat-label>\n        <mat-select formControlName=\"mapper\">\n          <mat-option>None</mat-option>\n          <mat-option *ngFor=\"let mapper of sampleMappers\" [value]=\"mapper.value\">\n            {{mapper.label}}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <div>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>RestPath (/ delimited)</mat-label>\n        <input matInput placeholder=\"clients/list\" formControlName=\"path\">\n      </mat-form-field>\n    </div>\n    <div>\n      <div formArrayName=\"headers\">\n        <div *ngFor=\"let task of headers.controls; let i = index\" [formGroupName]=\"i\">\n          <div style=\"display: flex; gap: .5rem\">\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Key</mat-label>\n              <input matInput placeholder=\"authentication\" formControlName=\"key\">\n            </mat-form-field>\n            <mat-form-field appearance=\"outline\" style=\"flex:1\">\n              <mat-label>Value</mat-label>\n              <input matInput placeholder=\"sample\" formControlName=\"value\">\n            </mat-form-field>\n            <div style=\"margin-top: .5rem;\">\n              <button mat-icon-button (click)=\"removeHeader(i)\">\n                  <mat-icon>close</mat-icon>\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n      <button mat-stroked-button (click)=\"addHeader()\">Add Header</button>\n    </div>\n    <div style=\"margin-top: 2rem; display: flex; flex-direction:column; gap: 1rem;\">\n      <div>\n        <mat-slide-toggle #failedState>Retry on Failed</mat-slide-toggle>\n        <div *ngIf=\"failedState.checked\" style=\"display: flex; gap: .5rem; margin-top: 1rem;\" formGroupName=\"retry\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>#of Times</mat-label>\n            <input matInput placeholder=\"3\" formControlName=\"times\" value=\"3\">\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Delay Until Next</mat-label>\n            <input matInput placeholder=\"3\" formControlName=\"delay\" value=\"3\">\n          </mat-form-field>\n        </div>\n      </div>\n      <div>\n        <mat-slide-toggle #pollingState>Polling</mat-slide-toggle>\n        <div *ngIf=\"pollingState.checked\">\n          <mat-form-field appearance=\"outline\" style=\"margin-top: 1rem\">\n            <mat-label>#of Seconds</mat-label>\n            <input matInput placeholder=\"3\" formControlName=\"polling\" value=\"3\">\n          </mat-form-field>\n        </div>\n      </div>\n      <div>\n        <mat-slide-toggle #DBState>Database Storage</mat-slide-toggle>\n        <div *ngIf=\"DBState.checked\" style=\"display: flex; gap: .5rem; margin-top: 1rem\" formGroupName=\"database\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Table Name</mat-label>\n            <input matInput placeholder=\"table\" formControlName=\"table\" value=\"\">\n          </mat-form-field>\n          <div>\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Expires In</mat-label>\n              <mat-select formControlName=\"expiresIn\">\n                <mat-option value=\"1m\">One Minute</mat-option>\n                <mat-option value=\"1h\">One Hour</mat-option>\n                <mat-option value=\"1d\">One Day</mat-option>\n              </mat-select>\n            </mat-form-field>\n          </div>\n        </div>\n      </div>\n      <div style=\"margin-top: 1rem; display: flex;\">\n        <span style=\"flex:1\"></span>\n        <button mat-stroked-button (click)=\"onSetStateOptions()\" [disabled]=\"!hasChanged\">\n          Set API Request Options\n        </button>\n      </div>\n      <div>\n        <mat-error *ngIf=\"(error$ | async) as error\">\n          {{ error | json }}\n        </mat-error>\n      </div>\n    </div>\n  </div>\n\n  <div style=\"margin-bottom: 1rem; margin-top: 2rem;\">\n    <mat-progress-bar mode=\"indeterminate\" \n      *ngIf=\"(isPending$ | async)\"\n    ></mat-progress-bar>\n    <div *ngIf=\"pollingState.checked\">\n      <mat-progress-bar mode=\"determinate\" \n      *ngIf=\"!(isPending$ | async) && (this.countdown$ | async) || -1 > 0\" \n      [value]=\"(this.countdown$ | async)\"\n      ></mat-progress-bar>\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\" *ngIf=\"(GET$ | async) as data\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1;\">CURRENT STATE ({{ dataType }})</h2>\n    </div>\n    <div *ngIf=\"data.length > 1\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Records</mat-label>\n        <mat-select [formControl]=\"selectedRecord\" [disabled]=\"data === null && data?.length === 0\">\n          <mat-option [value]=\"\">None</mat-option>\n          <mat-option *ngFor=\"let item of data\" [value]=\"item\">\n            {{item.domain}}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <div *ngIf=\"(dataObservable$ | async) as dataRecord\">\n      <div *ngIf=\"(selectedRecord$ | async) as record; else NO_RECORD\">\n        {{ record | json }}\n      </div>\n      <ng-template #NO_RECORD>No Record Selected from State</ng-template>\n      \n    </div>\n    <div style=\"margin-top: 1rem;\">\n      <span *ngIf=\"data !== null && data?.length > 0; else NO_DATA\">\n        State contains a Total of {{ data.length }} Records\n      </span>\n      <ng-template #NO_DATA>No Records</ng-template>\n      <div style=\"display: flex; gap: .5rem; text-align: end; justify-content: flex-end;\">\n        <button class=\"btn\" mat-stroked-button (click)=\"onClearRecords()\">Clear</button>\n        <button class=\"btn\" mat-stroked-button (click)=\"onRefreshRecords()\">Refresh</button>\n      </div>\n    </div>\n  </div>\n\n\n\n\n  <div style=\"margin-top: 1rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">GET Request ({{ dataType }})</h2>\n      <div>\n        <button mat-raised-button (click)=\"onGetRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(GET_error$ | async) as get_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ get_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(GET$ | async) | jsonv\"></div> -->\n      <div>{{ (GET$ | async) | json }}</div>\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">POST Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onCreateRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(POST_error$ | async) as post_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ post_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(POST$ | async) | jsonv\"></div> -->\n      <div>{{ (POST$ | async) | json }}</div>\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">PUT Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onUpdateRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(PUT_error$ | async) as put_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ put_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(PUT$ | async) | jsonv\"></div> -->\n      <div>{{ (PUT$ | async) | json }}</div>\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">DELETE Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onDeleteRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(DELETE_error$ | async) as delete_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ delete_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(DELETE$ | async) | jsonv\"></div> -->\n      <div>{{ (DELETE$ | async) | json }}</div>\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n  \n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">Streaming GET Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onStreamRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(STREAM_error$ | async) as stream_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ stream_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\">\n      <div *ngIf=\"(STREAM$ | async) as data\" class=\"container\">\n        <table mat-table [dataSource]=\"data\">\n          <ng-container matColumnDef=\"id\">\n            <th mat-header-cell *matHeaderCellDef> ID </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.id}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"name\">\n            <th mat-header-cell *matHeaderCellDef> First Name </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.name}} </td>\n          </ng-container>\n        \n          <ng-container matColumnDef=\"lastName\">\n            <th mat-header-cell *matHeaderCellDef> Last Name </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.lastName}} </td>\n          </ng-container>\n        \n          <ng-container matColumnDef=\"age\">\n            <th mat-header-cell *matHeaderCellDef> Age </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.age}} </td>\n          </ng-container>\n        \n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n        </table>\n      </div>\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">STREAMING POST Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onStreamPostRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Ask Me</button>\n      </div>\n    </div>\n\n    <div style=\"display: flex;\">\n      <mat-form-field appearance=\"outline\" style=\"flex:1\">\n        <mat-label>Ask me a Question</mat-label>\n        <textarea matInput placeholder=\"Why is the sky blue?\" [formControl]=\"questionControl\"></textarea>\n      </mat-form-field>\n    </div>\n\n    <div *ngIf=\"(STREAM_error$ | async) as stream_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ stream_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\">\n      <div *ngIf=\"(STREAM_AI$ | async) as data\">\n        <p style=\"margin-bottom: .5rem; white-space:pre-wrap;\">{{data}}</p>\n      </div>\n    </div>\n\n  </div>\n\n</div>", styles: [".btn{min-width:120px}.mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor;background-color:#f5f5f5}.container{height:400px;overflow:auto}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { failedState: [{
+                type: ViewChild,
+                args: ["failedState", { static: true }]
+            }], pollingState: [{
+                type: ViewChild,
+                args: ["pollingState", { static: true }]
+            }] } });
+
+class 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: 'http://localhost:4200/assets',
+            path: ['icons1.svg']
+        });
+        this.sampleClientData = {
+            id: 0,
+            name: "Old School Dates",
+            domain: "osd.com",
+            service: "osd",
+            spiffe: "osd.com/osd",
+            secret: "SMOPECXP-OS4P-USOG-X2II-3XMD1FQDR3IJX",
+            created: 1693003138,
+            modified: 1693003138,
+            icon: "",
+            imageFile: "",
+        };
+        this.requestForm = this.fb.group({
+            path: this.fb.control(""),
+            headers: this.fb.array([]),
+            adapter: [null],
+            retry: this.fb.group({
+                times: [3],
+                delay: [3],
+            }),
+            polling: [3],
+        });
+        this.sampleAdaptors = [
+            { label: "ClientInfo Basic", value: ClientInfo.adapt },
+            { label: "AI Prompt", value: AIPrompt.adapt },
+        ];
+        this.sampleMappers = [
+            { label: "Mapper Basic", value: ClientInfoMapper.adapt },
+            { label: "AI Prompt", value: AIPrompt.adapt },
+        ];
+        // server = `http://sample-endpoint/as/authorization.oauth2`
+        this.arrayObjectsToObjects = (arr) => {
+            return Array.isArray(arr) ? arr.reduce((obj, item) => Object.assign(obj, { [item.key]: item.value }), {}) : {};
+        };
+    }
+    ngOnInit() {
+        // const reqGet2 = ApiRequest.adapt({
+        //   server,
+        //   path: ['clients'],
+        //   headers: { authentication: "Bearer <KEY>" },
+        //   adapter: ClientInfo,
+        //   dataType: DataType.OBJECT,
+        //   // concurrent: false,
+        //   // polling: 3, //seconds
+        // });
+        // const req2 = [1024,1025,1026].map(item => {
+        //   return this.httpManagerService.getRequest<ClientInfo[]>(reqGet2, [item])
+        //   .pipe(
+        //     catchError(error => {
+        //       return throwError(() => new Error(error.error.message));
+        //     })
+        //   )
+        // })
+        // forkJoin(req2)
+        // .subscribe(res => console.log(res))
+    }
+    addHeader() {
+        const header = this.fb.group({
+            key: ['', Validators.required],
+            value: ['']
+        });
+        this.headers.push(header);
+    }
+    removeHeader(index) {
+        this.headers.removeAt(index);
+    }
+    compileRequest() {
+        const requestParams = this.requestForm.value;
+        requestParams.headers = this.arrayObjectsToObjects(requestParams.headers || []);
+        const pathReq = (requestParams.path === "") ? [] : (requestParams.path || "").split("/");
+        if (!this.pollingState.checked)
+            requestParams.polling = 0;
+        if (!this.failedState.checked) {
+            requestParams.retry = { times: 0, delay: 0 };
+        }
+        return ApiRequest.adapt({
+            ...requestParams,
+            // ...{ path: pathReq, server: this.server },
+            ...{ path: pathReq },
+        });
+    }
+    onGetRequest() {
+        if (!this.isValid)
+            return;
+        const reqParams = this.compileRequest();
+        this.requestParams.GET = reqParams;
+        this.GET$ = EMPTY; //Cancels Previous
+        this.GET_error$.next('');
+        this.GET$ = this.httpManagerService.getRequest(reqParams)
+            .pipe(
+        // tap((data) => console.log("API GET response", data)),
+        catchError(error => {
+            return throwError(() => this.errorHandling(error, 'GET'));
+        }));
+    }
+    onCreateRequest() {
+        if (!this.isValid)
+            return;
+        const reqParams = this.compileRequest();
+        this.requestParams.POST = reqParams;
+        this.POST$ = EMPTY; //Cancels Previous
+        this.POST_error$.next('');
+        this.POST$ = this.httpManagerService.postRequest(this.sampleClientData, reqParams)
+            .pipe(
+        // tap((data) => console.log("API POST response", data)),
+        catchError(error => {
+            return throwError(() => this.errorHandling(error, 'POST'));
+        }));
+    }
+    onUpdateRequest() {
+        if (!this.isValid)
+            return;
+        const reqParams = this.compileRequest();
+        this.sampleClientData.id = reqParams.path[reqParams.path.length - 1];
+        this.requestParams.PUT = reqParams;
+        this.PUT$ = EMPTY; //Cancels Previous
+        this.PUT_error$.next('');
+        this.PUT$ = this.httpManagerService.putRequest(this.sampleClientData, reqParams)
+            .pipe(
+        // tap((data) => console.log("API PUT response", data)),
+        catchError(error => {
+            return throwError(() => this.errorHandling(error, 'PUT'));
+        }));
+    }
+    onDeleteRequest() {
+        if (!this.isValid)
+            return;
+        const reqParams = this.compileRequest();
+        this.requestParams.DELETE = reqParams;
+        this.DELETE$ = EMPTY; //Cancels Previous
+        this.DELETE_error$.next('');
+        this.DELETE$ = this.httpManagerService.deleteRequest(reqParams)
+            .pipe(
+        // tap((data) => console.log("API DELETE response", data)),
+        catchError(error => {
+            return throwError(() => this.errorHandling(error, 'DELETE'));
+        }));
+    }
+    onStreamPostRequest() {
+        if (!this.isValid)
+            return;
         const reqParams = this.compileRequest();
         reqParams.server = "http://localhost:11434/api";
         reqParams.path = ["generate"];
         reqParams.stream = true;
-        this.stateManagerDemoService.setAPIOptions(reqParams, DataType.ARRAY);
         const payload = {
             model: "mistral",
             prompt: this.questionControl.value,
             stream: reqParams.stream
         };
-        this.stateManagerDemoService.streamAIRequest(payload);
+        this.requestParams.STREAM = reqParams;
+        this.STREAM_AI$ = EMPTY;
+        this.STREAM_AI_error$.next('');
+        this.STREAM_AI$ = this.httpManagerService.postRequest(payload, reqParams)
+            .pipe(map(items => items.map((word) => word.response).flat().join('')), tap(() => this.questionControl.reset()), catchError(error => {
+            return throwError(() => this.errorHandling(error, 'STREAM'));
+        }));
     }
     onStreamRequest() {
         if (!this.isValid)
             return;
-        this.requestType = 'STREAM';
         const reqParams = this.compileRequest();
         reqParams.server = "oidc";
         reqParams.stream = true;
-        this.stateManagerDemoService.setAPIOptions(reqParams, DataType.ARRAY);
-        this.stateManagerDemoService.streamRequest();
+        this.STREAM$ = this.httpManagerService.getRequest(reqParams)
+            .pipe(
+        // tap((data) => console.log("API STREAM response", data)),
+        catchError(error => {
+            return throwError(() => this.errorHandling(error, 'STREAM'));
+        }));
+    }
+    onDownloadCompleted() {
+        const message = "Download Completed";
+        const display = ToastDisplay.adapt({
+            message,
+            action: 'Ok',
+            color: ToastColors.SUCCESS,
+            icon: 'sentiment_satisfied_alt',
+        });
+        this.toastMessage.toastMessage(display);
+    }
+    onDownloadFailed(err) {
+        const message = "Download Failed";
+        const display = ToastDisplay.adapt({
+            message,
+            action: 'Ok',
+            color: ToastColors.ERROR,
+            icon: 'warning',
+        });
+        this.toastMessage.toastMessage(display);
     }
     errorHandling(err, type) {
         if (type === 'GET')
@@ -2895,12 +2742,12 @@ class RequestManagerStateDemoComponent {
         if (type === 'STREAM')
             this.STREAM_error$.next(err.message);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RequestManagerStateDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RequestManagerStateDemoComponent, selector: "app-request-manager-state-demo", viewQueries: [{ propertyName: "failedState", first: true, predicate: ["failedState"], descendants: true, static: true }, { propertyName: "pollingState", first: true, predicate: ["pollingState"], descendants: true, static: true }], ngImport: i0, template: "<div style=\"margin: 2rem;\">\n\n  <h2>\n    HTTP Request State Manager\n  </h2>\n\n  <div [formGroup]=\"requestForm\" style=\"margin-top: 2rem;\">\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>State Data Type</mat-label>\n        <mat-select formControlName=\"datatype\">\n          <mat-option value=\"ARRAY\">Array</mat-option>\n          <mat-option value=\"OBJECT\">Object</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Adapter (Model)</mat-label>\n        <mat-select formControlName=\"adapter\">\n          <mat-option>None</mat-option>\n          <mat-option *ngFor=\"let adapter of sampleAdaptors\" [value]=\"adapter.value\">\n            {{adapter.label}}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Mapper (Model)</mat-label>\n        <mat-select formControlName=\"mapper\">\n          <mat-option>None</mat-option>\n          <mat-option *ngFor=\"let mapper of sampleMappers\" [value]=\"mapper.value\">\n            {{mapper.label}}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <div>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>RestPath (/ delimited)</mat-label>\n        <input matInput placeholder=\"clients/list\" formControlName=\"path\">\n      </mat-form-field>\n    </div>\n    <div>\n      <div formArrayName=\"headers\">\n        <div *ngFor=\"let task of headers.controls; let i = index\" [formGroupName]=\"i\">\n          <div style=\"display: flex; gap: .5rem\">\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Key</mat-label>\n              <input matInput placeholder=\"authentication\" formControlName=\"key\">\n            </mat-form-field>\n            <mat-form-field appearance=\"outline\" style=\"flex:1\">\n              <mat-label>Value</mat-label>\n              <input matInput placeholder=\"sample\" formControlName=\"value\">\n            </mat-form-field>\n            <div style=\"margin-top: .5rem;\">\n              <button mat-icon-button (click)=\"removeHeader(i)\">\n                  <mat-icon>close</mat-icon>\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n      <button mat-stroked-button (click)=\"addHeader()\">Add Header</button>\n    </div>\n    <div style=\"margin-top: 2rem; display: flex; flex-direction:column; gap: 1rem;\">\n      <div>\n        <mat-slide-toggle #failedState>Retry on Failed</mat-slide-toggle>\n        <div *ngIf=\"failedState.checked\" style=\"display: flex; gap: .5rem; margin-top: 1rem;\" formGroupName=\"retry\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>#of Times</mat-label>\n            <input matInput placeholder=\"3\" formControlName=\"times\" value=\"3\">\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Delay Until Next</mat-label>\n            <input matInput placeholder=\"3\" formControlName=\"delay\" value=\"3\">\n          </mat-form-field>\n        </div>\n      </div>\n      <div>\n        <mat-slide-toggle #pollingState>Polling</mat-slide-toggle>\n        <div *ngIf=\"pollingState.checked\">\n          <mat-form-field appearance=\"outline\" style=\"margin-top: 1rem\">\n            <mat-label>#of Seconds</mat-label>\n            <input matInput placeholder=\"3\" formControlName=\"polling\" value=\"3\">\n          </mat-form-field>\n        </div>\n      </div>\n      <div>\n        <mat-slide-toggle #DBState>Database Storage</mat-slide-toggle>\n        <div *ngIf=\"DBState.checked\" style=\"display: flex; gap: .5rem; margin-top: 1rem\" formGroupName=\"database\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Table Name</mat-label>\n            <input matInput placeholder=\"table\" formControlName=\"table\" value=\"\">\n          </mat-form-field>\n          <div>\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Expires In</mat-label>\n              <mat-select formControlName=\"expiresIn\">\n                <mat-option value=\"1m\">One Minute</mat-option>\n                <mat-option value=\"1h\">One Hour</mat-option>\n                <mat-option value=\"1d\">One Day</mat-option>\n              </mat-select>\n            </mat-form-field>\n          </div>\n        </div>\n      </div>\n      <div style=\"margin-top: 1rem; display: flex;\">\n        <span style=\"flex:1\"></span>\n        <button mat-stroked-button (click)=\"onSetStateOptions()\" [disabled]=\"!hasChanged\">\n          Set API Request Options\n        </button>\n      </div>\n      <div>\n        <mat-error *ngIf=\"(error$ | async) as error\">\n          {{ error | json }}\n        </mat-error>\n      </div>\n    </div>\n  </div>\n\n  <div style=\"margin-bottom: 1rem; margin-top: 2rem;\">\n    <mat-progress-bar mode=\"indeterminate\" \n      *ngIf=\"(isPending$ | async)\"\n    ></mat-progress-bar>\n    <div *ngIf=\"pollingState.checked\">\n      <mat-progress-bar mode=\"determinate\" \n      *ngIf=\"!(isPending$ | async) && (this.countdown$ | async) || -1 > 0\" \n      [value]=\"(this.countdown$ | async)\"\n      ></mat-progress-bar>\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\" *ngIf=\"(GET$ | async) as data\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1;\">CURRENT STATE ({{ dataType }})</h2>\n    </div>\n    <div *ngIf=\"data.length > 1\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Records</mat-label>\n        <mat-select [formControl]=\"selectedRecord\" [disabled]=\"data === null && data?.length === 0\">\n          <mat-option [value]=\"\">None</mat-option>\n          <mat-option *ngFor=\"let item of data\" [value]=\"item\">\n            {{item.domain}}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <div *ngIf=\"(dataObservable$ | async) as dataRecord\">\n      <div *ngIf=\"(selectedRecord$ | async) as record; else NO_RECORD\">\n        {{ record | json }}\n      </div>\n      <ng-template #NO_RECORD>No Record Selected from State</ng-template>\n      \n    </div>\n    <div style=\"margin-top: 1rem;\">\n      <span *ngIf=\"data !== null && data?.length > 0; else NO_DATA\">\n        State contains a Total of {{ data.length }} Records\n      </span>\n      <ng-template #NO_DATA>No Records</ng-template>\n      <div style=\"display: flex; gap: .5rem; text-align: end; justify-content: flex-end;\">\n        <button class=\"btn\" mat-stroked-button (click)=\"onClearRecords()\">Clear</button>\n        <button class=\"btn\" mat-stroked-button (click)=\"onRefreshRecords()\">Refresh</button>\n      </div>\n    </div>\n  </div>\n\n\n\n\n  <div style=\"margin-top: 1rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">GET Request ({{ dataType }})</h2>\n      <div>\n        <button mat-raised-button (click)=\"onGetRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(GET_error$ | async) as get_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ get_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(GET$ | async) | jsonv\"></div> -->\n      <div>{{ (GET$ | async) | json }}</div>\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">POST Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onCreateRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(POST_error$ | async) as post_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ post_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(POST$ | async) | jsonv\"></div> -->\n      <div>{{ (POST$ | async) | json }}</div>\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">PUT Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onUpdateRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(PUT_error$ | async) as put_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ put_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(PUT$ | async) | jsonv\"></div> -->\n      <div>{{ (PUT$ | async) | json }}</div>\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">DELETE Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onDeleteRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(DELETE_error$ | async) as delete_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ delete_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(DELETE$ | async) | jsonv\"></div> -->\n      <div>{{ (DELETE$ | async) | json }}</div>\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n  \n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">Streaming GET Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onStreamRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(STREAM_error$ | async) as stream_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ stream_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\">\n      <div *ngIf=\"(STREAM$ | async) as data\" class=\"container\">\n        <table mat-table [dataSource]=\"data\">\n          <ng-container matColumnDef=\"id\">\n            <th mat-header-cell *matHeaderCellDef> ID </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.id}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"name\">\n            <th mat-header-cell *matHeaderCellDef> First Name </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.name}} </td>\n          </ng-container>\n        \n          <ng-container matColumnDef=\"lastName\">\n            <th mat-header-cell *matHeaderCellDef> Last Name </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.lastName}} </td>\n          </ng-container>\n        \n          <ng-container matColumnDef=\"age\">\n            <th mat-header-cell *matHeaderCellDef> Age </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.age}} </td>\n          </ng-container>\n        \n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n        </table>\n      </div>\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">STREAMING POST Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onStreamPostRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Ask Me</button>\n      </div>\n    </div>\n\n    <div style=\"display: flex;\">\n      <mat-form-field appearance=\"outline\" style=\"flex:1\">\n        <mat-label>Ask me a Question</mat-label>\n        <textarea matInput placeholder=\"Why is the sky blue?\" [formControl]=\"questionControl\"></textarea>\n      </mat-form-field>\n    </div>\n\n    <div *ngIf=\"(STREAM_error$ | async) as stream_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ stream_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\">\n      <div *ngIf=\"(STREAM_AI$ | async) as data\">\n        <p style=\"margin-bottom: .5rem; white-space:pre-wrap;\">{{data}}</p>\n      </div>\n    </div>\n\n  </div>\n\n</div>", styles: [".btn{min-width:120px}.mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor;background-color:#f5f5f5}.container{height:400px;overflow:auto}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i8.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i8.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i8.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i8.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i10$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i11.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i12.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RequestManagerDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RequestManagerDemoComponent, selector: "app-request-manager-demo", viewQueries: [{ propertyName: "failedState", first: true, predicate: ["failedState"], descendants: true, static: true }, { propertyName: "pollingState", first: true, predicate: ["pollingState"], descendants: true, static: true }], ngImport: i0, template: "<div style=\"margin: 2rem;\">\n\n  <h2>\n    HTTP Request Manager\n  </h2>\n\n  <div [formGroup]=\"requestForm\" style=\"margin-top: 2rem;\">\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Adapter (Model)</mat-label>\n        <mat-select formControlName=\"adapter\">\n          <mat-option>None</mat-option>\n          <mat-option *ngFor=\"let adapter of sampleAdaptors\" [value]=\"adapter.value\">\n            {{adapter.label}}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Mapper (Model)</mat-label>\n        <mat-select formControlName=\"adapter\">\n          <mat-option>None</mat-option>\n          <mat-option *ngFor=\"let mapper of sampleMappers\" [value]=\"mapper.value\">\n            {{mapper.label}}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <div>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>RestPath (/ delimited)</mat-label>\n        <input matInput placeholder=\"clients/list\" formControlName=\"path\">\n      </mat-form-field>\n    </div>\n    <div>\n      <div formArrayName=\"headers\">\n        <div *ngFor=\"let task of headers.controls; let i = index\" [formGroupName]=\"i\">\n          <div style=\"display: flex; gap: .5rem\">\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Key</mat-label>\n              <input matInput placeholder=\"authentication\" formControlName=\"key\">\n            </mat-form-field>\n            <mat-form-field appearance=\"outline\" style=\"flex:1\">\n              <mat-label>Value</mat-label>\n              <input matInput placeholder=\"sample\" formControlName=\"value\">\n            </mat-form-field>\n            <div style=\"margin-top: .5rem;\">\n              <button mat-icon-button (click)=\"removeHeader(i)\">\n                  <mat-icon>close</mat-icon>\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n      <button mat-stroked-button (click)=\"addHeader()\" class=\"btn\">Add Header</button>\n    </div>\n    <div style=\"margin-top: 2rem; display: flex; flex-direction:column; gap: 1rem;\">\n      <div>\n        <mat-slide-toggle #failedState>Retry on Failed</mat-slide-toggle>\n        <div *ngIf=\"failedState.checked\" style=\"display: flex; gap: .5rem; margin-top: 1rem;\" formGroupName=\"retry\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>#of Times</mat-label>\n            <input matInput placeholder=\"3\" formControlName=\"times\" value=\"3\">\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Delay Until Next</mat-label>\n            <input matInput placeholder=\"3\" formControlName=\"delay\" value=\"3\">\n          </mat-form-field>\n        </div>\n      </div>\n      <div>\n        <mat-slide-toggle #pollingState>Polling</mat-slide-toggle>\n        <div *ngIf=\"pollingState.checked\">\n          <mat-form-field appearance=\"outline\" style=\"margin-top: 1rem\">\n            <mat-label>#of Seconds</mat-label>\n            <input matInput placeholder=\"3\" formControlName=\"polling\" value=\"3\">\n          </mat-form-field>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div style=\"margin-bottom: 1rem; margin-top: 2rem;\">\n    <mat-progress-bar mode=\"indeterminate\"\n      *ngIf=\"(isPending$ | async)\"\n    ></mat-progress-bar>\n    <mat-progress-bar mode=\"determinate\"\n      *ngIf=\"pollingState.checked && !(isPending$ | async)\"\n      [value]=\"(this.countdown$ | async)\"\n    ></mat-progress-bar>\n  </div>\n\n  <div style=\"margin-top: 1rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">GET Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onGetRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(GET_error$ | async) as get_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ get_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\" *ngIf=\"(GET$ | async) as dataRecord\">\n      <!-- <div [innerHTML]=\"(GET$ | async) | jsonv\"></div> -->\n      {{ dataRecord | json }}\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">POST Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onCreateRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(POST_error$ | async) as post_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ post_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\" *ngIf=\"(POST$ | async) as dataRecord\">\n      <!-- <div [innerHTML]=\"(POST$ | async) | jsonv\"></div> -->\n      {{ dataRecord | json }}\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">PUT Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onUpdateRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(PUT_error$ | async) as put_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ put_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\" *ngIf=\"(PUT$ | async) as dataRecord\">\n      <!-- <div [innerHTML]=\"(PUT$ | async) | jsonv\"></div> -->\n       {{ dataRecord | json }}\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">DELETE Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onDeleteRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(DELETE_error$ | async) as delete_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ delete_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\" *ngIf=\"(DELETE$ | async) as dataRecord\">\n      <!-- <div [innerHTML]=\"(DELETE$ | async) | jsonv\"></div> -->\n      {{ dataRecord | json }}\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">Streaming GET Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onStreamRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(STREAM_error$ | async) as stream_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ stream_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\">\n      <div *ngIf=\"(STREAM$ | async) as data\" class=\"container\">\n        <table mat-table [dataSource]=\"data\">\n          <ng-container matColumnDef=\"id\">\n            <th mat-header-cell *matHeaderCellDef> ID </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.id}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"name\">\n            <th mat-header-cell *matHeaderCellDef> First Name </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.name}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"lastName\">\n            <th mat-header-cell *matHeaderCellDef> Last Name </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.lastName}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"age\">\n            <th mat-header-cell *matHeaderCellDef> Age </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.age}} </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n        </table>\n      </div>\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">STREAMING POST Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onStreamPostRequest()\" class=\"btn\">Ask Me</button>\n      </div>\n    </div>\n\n    <div style=\"display: flex;\">\n      <mat-form-field appearance=\"outline\" style=\"flex:1\">\n        <mat-label>Ask me a Question</mat-label>\n        <textarea matInput placeholder=\"Why is the sky blue?\" [formControl]=\"questionControl\"></textarea>\n      </mat-form-field>\n    </div>\n\n    <div *ngIf=\"(STREAM_AI_error$ | async) as stream_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ stream_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\">\n      <div *ngIf=\"(STREAM_AI$ | async) as data\">\n        <p style=\"margin-bottom: .5rem; white-space:pre-wrap;\">{{data}}</p>\n      </div>\n    </div>\n\n  </div>\n\n  <div>\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1; margin-bottom: 0; padding-top: .5rem; display: flex;\">\n        <div>\n          Download File\n        </div>\n        <div style=\"flex:1; margin-left: 1rem;\">\n          <mat-slide-toggle #disable>\n            <span *ngIf=\"disable.checked; else DISABLE\">\n              Enable\n            </span>\n            <ng-template #DISABLE>Disable</ng-template>\n          </mat-slide-toggle>\n        </div>\n      </h2>\n      <div>\n        <app-file-downloader\n          [disabled]=\"disable.checked\"\n          [delayError]=\"3\"\n          [apiRequest]=\"downloadRequest\"\n          (completed)=\"onDownloadCompleted()\"\n          (failed)=\"onDownloadFailed($event)\"\n        ></app-file-downloader>\n      </div>\n    </div>\n  </div>\n\n</div>\n", styles: [".btn{min-width:120px}.mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor;background-color:#f5f5f5}.container{height:400px;overflow:auto}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i8.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i8.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i8.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i8.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i10.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i11.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i12.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: FileDownloaderComponent, selector: "app-file-downloader", inputs: ["delayError", "apiRequest", "displayErrorMessage", "labels", "disabled"], outputs: ["completed", "failed"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RequestManagerStateDemoComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RequestManagerDemoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-request-manager-state-demo', template: "<div style=\"margin: 2rem;\">\n\n  <h2>\n    HTTP Request State Manager\n  </h2>\n\n  <div [formGroup]=\"requestForm\" style=\"margin-top: 2rem;\">\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>State Data Type</mat-label>\n        <mat-select formControlName=\"datatype\">\n          <mat-option value=\"ARRAY\">Array</mat-option>\n          <mat-option value=\"OBJECT\">Object</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Adapter (Model)</mat-label>\n        <mat-select formControlName=\"adapter\">\n          <mat-option>None</mat-option>\n          <mat-option *ngFor=\"let adapter of sampleAdaptors\" [value]=\"adapter.value\">\n            {{adapter.label}}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Mapper (Model)</mat-label>\n        <mat-select formControlName=\"mapper\">\n          <mat-option>None</mat-option>\n          <mat-option *ngFor=\"let mapper of sampleMappers\" [value]=\"mapper.value\">\n            {{mapper.label}}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <div>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>RestPath (/ delimited)</mat-label>\n        <input matInput placeholder=\"clients/list\" formControlName=\"path\">\n      </mat-form-field>\n    </div>\n    <div>\n      <div formArrayName=\"headers\">\n        <div *ngFor=\"let task of headers.controls; let i = index\" [formGroupName]=\"i\">\n          <div style=\"display: flex; gap: .5rem\">\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Key</mat-label>\n              <input matInput placeholder=\"authentication\" formControlName=\"key\">\n            </mat-form-field>\n            <mat-form-field appearance=\"outline\" style=\"flex:1\">\n              <mat-label>Value</mat-label>\n              <input matInput placeholder=\"sample\" formControlName=\"value\">\n            </mat-form-field>\n            <div style=\"margin-top: .5rem;\">\n              <button mat-icon-button (click)=\"removeHeader(i)\">\n                  <mat-icon>close</mat-icon>\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n      <button mat-stroked-button (click)=\"addHeader()\">Add Header</button>\n    </div>\n    <div style=\"margin-top: 2rem; display: flex; flex-direction:column; gap: 1rem;\">\n      <div>\n        <mat-slide-toggle #failedState>Retry on Failed</mat-slide-toggle>\n        <div *ngIf=\"failedState.checked\" style=\"display: flex; gap: .5rem; margin-top: 1rem;\" formGroupName=\"retry\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>#of Times</mat-label>\n            <input matInput placeholder=\"3\" formControlName=\"times\" value=\"3\">\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Delay Until Next</mat-label>\n            <input matInput placeholder=\"3\" formControlName=\"delay\" value=\"3\">\n          </mat-form-field>\n        </div>\n      </div>\n      <div>\n        <mat-slide-toggle #pollingState>Polling</mat-slide-toggle>\n        <div *ngIf=\"pollingState.checked\">\n          <mat-form-field appearance=\"outline\" style=\"margin-top: 1rem\">\n            <mat-label>#of Seconds</mat-label>\n            <input matInput placeholder=\"3\" formControlName=\"polling\" value=\"3\">\n          </mat-form-field>\n        </div>\n      </div>\n      <div>\n        <mat-slide-toggle #DBState>Database Storage</mat-slide-toggle>\n        <div *ngIf=\"DBState.checked\" style=\"display: flex; gap: .5rem; margin-top: 1rem\" formGroupName=\"database\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Table Name</mat-label>\n            <input matInput placeholder=\"table\" formControlName=\"table\" value=\"\">\n          </mat-form-field>\n          <div>\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Expires In</mat-label>\n              <mat-select formControlName=\"expiresIn\">\n                <mat-option value=\"1m\">One Minute</mat-option>\n                <mat-option value=\"1h\">One Hour</mat-option>\n                <mat-option value=\"1d\">One Day</mat-option>\n              </mat-select>\n            </mat-form-field>\n          </div>\n        </div>\n      </div>\n      <div style=\"margin-top: 1rem; display: flex;\">\n        <span style=\"flex:1\"></span>\n        <button mat-stroked-button (click)=\"onSetStateOptions()\" [disabled]=\"!hasChanged\">\n          Set API Request Options\n        </button>\n      </div>\n      <div>\n        <mat-error *ngIf=\"(error$ | async) as error\">\n          {{ error | json }}\n        </mat-error>\n      </div>\n    </div>\n  </div>\n\n  <div style=\"margin-bottom: 1rem; margin-top: 2rem;\">\n    <mat-progress-bar mode=\"indeterminate\" \n      *ngIf=\"(isPending$ | async)\"\n    ></mat-progress-bar>\n    <div *ngIf=\"pollingState.checked\">\n      <mat-progress-bar mode=\"determinate\" \n      *ngIf=\"!(isPending$ | async) && (this.countdown$ | async) || -1 > 0\" \n      [value]=\"(this.countdown$ | async)\"\n      ></mat-progress-bar>\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\" *ngIf=\"(GET$ | async) as data\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1;\">CURRENT STATE ({{ dataType }})</h2>\n    </div>\n    <div *ngIf=\"data.length > 1\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Records</mat-label>\n        <mat-select [formControl]=\"selectedRecord\" [disabled]=\"data === null && data?.length === 0\">\n          <mat-option [value]=\"\">None</mat-option>\n          <mat-option *ngFor=\"let item of data\" [value]=\"item\">\n            {{item.domain}}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <div *ngIf=\"(dataObservable$ | async) as dataRecord\">\n      <div *ngIf=\"(selectedRecord$ | async) as record; else NO_RECORD\">\n        {{ record | json }}\n      </div>\n      <ng-template #NO_RECORD>No Record Selected from State</ng-template>\n      \n    </div>\n    <div style=\"margin-top: 1rem;\">\n      <span *ngIf=\"data !== null && data?.length > 0; else NO_DATA\">\n        State contains a Total of {{ data.length }} Records\n      </span>\n      <ng-template #NO_DATA>No Records</ng-template>\n      <div style=\"display: flex; gap: .5rem; text-align: end; justify-content: flex-end;\">\n        <button class=\"btn\" mat-stroked-button (click)=\"onClearRecords()\">Clear</button>\n        <button class=\"btn\" mat-stroked-button (click)=\"onRefreshRecords()\">Refresh</button>\n      </div>\n    </div>\n  </div>\n\n\n\n\n  <div style=\"margin-top: 1rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">GET Request ({{ dataType }})</h2>\n      <div>\n        <button mat-raised-button (click)=\"onGetRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(GET_error$ | async) as get_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ get_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(GET$ | async) | jsonv\"></div> -->\n      <div>{{ (GET$ | async) | json }}</div>\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">POST Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onCreateRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(POST_error$ | async) as post_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ post_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(POST$ | async) | jsonv\"></div> -->\n      <div>{{ (POST$ | async) | json }}</div>\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">PUT Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onUpdateRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(PUT_error$ | async) as put_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ put_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(PUT$ | async) | jsonv\"></div> -->\n      <div>{{ (PUT$ | async) | json }}</div>\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">DELETE Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onDeleteRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(DELETE_error$ | async) as delete_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ delete_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(DELETE$ | async) | jsonv\"></div> -->\n      <div>{{ (DELETE$ | async) | json }}</div>\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n  \n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">Streaming GET Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onStreamRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(STREAM_error$ | async) as stream_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ stream_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\">\n      <div *ngIf=\"(STREAM$ | async) as data\" class=\"container\">\n        <table mat-table [dataSource]=\"data\">\n          <ng-container matColumnDef=\"id\">\n            <th mat-header-cell *matHeaderCellDef> ID </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.id}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"name\">\n            <th mat-header-cell *matHeaderCellDef> First Name </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.name}} </td>\n          </ng-container>\n        \n          <ng-container matColumnDef=\"lastName\">\n            <th mat-header-cell *matHeaderCellDef> Last Name </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.lastName}} </td>\n          </ng-container>\n        \n          <ng-container matColumnDef=\"age\">\n            <th mat-header-cell *matHeaderCellDef> Age </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.age}} </td>\n          </ng-container>\n        \n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n        </table>\n      </div>\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">STREAMING POST Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onStreamPostRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Ask Me</button>\n      </div>\n    </div>\n\n    <div style=\"display: flex;\">\n      <mat-form-field appearance=\"outline\" style=\"flex:1\">\n        <mat-label>Ask me a Question</mat-label>\n        <textarea matInput placeholder=\"Why is the sky blue?\" [formControl]=\"questionControl\"></textarea>\n      </mat-form-field>\n    </div>\n\n    <div *ngIf=\"(STREAM_error$ | async) as stream_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ stream_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\">\n      <div *ngIf=\"(STREAM_AI$ | async) as data\">\n        <p style=\"margin-bottom: .5rem; white-space:pre-wrap;\">{{data}}</p>\n      </div>\n    </div>\n\n  </div>\n\n</div>", styles: [".btn{min-width:120px}.mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor;background-color:#f5f5f5}.container{height:400px;overflow:auto}\n"] }]
+            args: [{ selector: 'app-request-manager-demo', template: "<div style=\"margin: 2rem;\">\n\n  <h2>\n    HTTP Request Manager\n  </h2>\n\n  <div [formGroup]=\"requestForm\" style=\"margin-top: 2rem;\">\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Adapter (Model)</mat-label>\n        <mat-select formControlName=\"adapter\">\n          <mat-option>None</mat-option>\n          <mat-option *ngFor=\"let adapter of sampleAdaptors\" [value]=\"adapter.value\">\n            {{adapter.label}}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Mapper (Model)</mat-label>\n        <mat-select formControlName=\"adapter\">\n          <mat-option>None</mat-option>\n          <mat-option *ngFor=\"let mapper of sampleMappers\" [value]=\"mapper.value\">\n            {{mapper.label}}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <div>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>RestPath (/ delimited)</mat-label>\n        <input matInput placeholder=\"clients/list\" formControlName=\"path\">\n      </mat-form-field>\n    </div>\n    <div>\n      <div formArrayName=\"headers\">\n        <div *ngFor=\"let task of headers.controls; let i = index\" [formGroupName]=\"i\">\n          <div style=\"display: flex; gap: .5rem\">\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Key</mat-label>\n              <input matInput placeholder=\"authentication\" formControlName=\"key\">\n            </mat-form-field>\n            <mat-form-field appearance=\"outline\" style=\"flex:1\">\n              <mat-label>Value</mat-label>\n              <input matInput placeholder=\"sample\" formControlName=\"value\">\n            </mat-form-field>\n            <div style=\"margin-top: .5rem;\">\n              <button mat-icon-button (click)=\"removeHeader(i)\">\n                  <mat-icon>close</mat-icon>\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n      <button mat-stroked-button (click)=\"addHeader()\" class=\"btn\">Add Header</button>\n    </div>\n    <div style=\"margin-top: 2rem; display: flex; flex-direction:column; gap: 1rem;\">\n      <div>\n        <mat-slide-toggle #failedState>Retry on Failed</mat-slide-toggle>\n        <div *ngIf=\"failedState.checked\" style=\"display: flex; gap: .5rem; margin-top: 1rem;\" formGroupName=\"retry\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>#of Times</mat-label>\n            <input matInput placeholder=\"3\" formControlName=\"times\" value=\"3\">\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Delay Until Next</mat-label>\n            <input matInput placeholder=\"3\" formControlName=\"delay\" value=\"3\">\n          </mat-form-field>\n        </div>\n      </div>\n      <div>\n        <mat-slide-toggle #pollingState>Polling</mat-slide-toggle>\n        <div *ngIf=\"pollingState.checked\">\n          <mat-form-field appearance=\"outline\" style=\"margin-top: 1rem\">\n            <mat-label>#of Seconds</mat-label>\n            <input matInput placeholder=\"3\" formControlName=\"polling\" value=\"3\">\n          </mat-form-field>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div style=\"margin-bottom: 1rem; margin-top: 2rem;\">\n    <mat-progress-bar mode=\"indeterminate\"\n      *ngIf=\"(isPending$ | async)\"\n    ></mat-progress-bar>\n    <mat-progress-bar mode=\"determinate\"\n      *ngIf=\"pollingState.checked && !(isPending$ | async)\"\n      [value]=\"(this.countdown$ | async)\"\n    ></mat-progress-bar>\n  </div>\n\n  <div style=\"margin-top: 1rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">GET Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onGetRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(GET_error$ | async) as get_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ get_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\" *ngIf=\"(GET$ | async) as dataRecord\">\n      <!-- <div [innerHTML]=\"(GET$ | async) | jsonv\"></div> -->\n      {{ dataRecord | json }}\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">POST Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onCreateRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(POST_error$ | async) as post_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ post_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\" *ngIf=\"(POST$ | async) as dataRecord\">\n      <!-- <div [innerHTML]=\"(POST$ | async) | jsonv\"></div> -->\n      {{ dataRecord | json }}\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">PUT Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onUpdateRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(PUT_error$ | async) as put_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ put_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\" *ngIf=\"(PUT$ | async) as dataRecord\">\n      <!-- <div [innerHTML]=\"(PUT$ | async) | jsonv\"></div> -->\n       {{ dataRecord | json }}\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">DELETE Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onDeleteRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(DELETE_error$ | async) as delete_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ delete_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\" *ngIf=\"(DELETE$ | async) as dataRecord\">\n      <!-- <div [innerHTML]=\"(DELETE$ | async) | jsonv\"></div> -->\n      {{ dataRecord | json }}\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">Streaming GET Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onStreamRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(STREAM_error$ | async) as stream_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ stream_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\">\n      <div *ngIf=\"(STREAM$ | async) as data\" class=\"container\">\n        <table mat-table [dataSource]=\"data\">\n          <ng-container matColumnDef=\"id\">\n            <th mat-header-cell *matHeaderCellDef> ID </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.id}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"name\">\n            <th mat-header-cell *matHeaderCellDef> First Name </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.name}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"lastName\">\n            <th mat-header-cell *matHeaderCellDef> Last Name </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.lastName}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"age\">\n            <th mat-header-cell *matHeaderCellDef> Age </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.age}} </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n        </table>\n      </div>\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">STREAMING POST Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onStreamPostRequest()\" class=\"btn\">Ask Me</button>\n      </div>\n    </div>\n\n    <div style=\"display: flex;\">\n      <mat-form-field appearance=\"outline\" style=\"flex:1\">\n        <mat-label>Ask me a Question</mat-label>\n        <textarea matInput placeholder=\"Why is the sky blue?\" [formControl]=\"questionControl\"></textarea>\n      </mat-form-field>\n    </div>\n\n    <div *ngIf=\"(STREAM_AI_error$ | async) as stream_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ stream_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\">\n      <div *ngIf=\"(STREAM_AI$ | async) as data\">\n        <p style=\"margin-bottom: .5rem; white-space:pre-wrap;\">{{data}}</p>\n      </div>\n    </div>\n\n  </div>\n\n  <div>\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1; margin-bottom: 0; padding-top: .5rem; display: flex;\">\n        <div>\n          Download File\n        </div>\n        <div style=\"flex:1; margin-left: 1rem;\">\n          <mat-slide-toggle #disable>\n            <span *ngIf=\"disable.checked; else DISABLE\">\n              Enable\n            </span>\n            <ng-template #DISABLE>Disable</ng-template>\n          </mat-slide-toggle>\n        </div>\n      </h2>\n      <div>\n        <app-file-downloader\n          [disabled]=\"disable.checked\"\n          [delayError]=\"3\"\n          [apiRequest]=\"downloadRequest\"\n          (completed)=\"onDownloadCompleted()\"\n          (failed)=\"onDownloadFailed($event)\"\n        ></app-file-downloader>\n      </div>\n    </div>\n  </div>\n\n</div>\n", styles: [".btn{min-width:120px}.mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor;background-color:#f5f5f5}.container{height:400px;overflow:auto}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { failedState: [{
                 type: ViewChild,
                 args: ["failedState", { static: true }]
@@ -2909,6 +2756,189 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 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;
+        const options = { storage: type, encrypted: storeData.encrypted };
+        this.localStorageManagerService.updateStore({
+            name: store.name,
+            data
+        });
+    }
+    onSelectedRow(store) {
+        this.store = store;
+        this.data$ = this.localStorageManagerService.store$(store.name).pipe(map(item => JSON.stringify(item)));
+        this.create = false;
+    }
+    onCreate() {
+        this.onCancel();
+        this.create = true;
+    }
+    onDelete(store) {
+        console.log('DELETED STORE:', store);
+        this.localStorageManagerService.deleteStore({
+            name: store.name,
+        });
+        this.onCancel();
+    }
+    onCancel() {
+        this.data$ = EMPTY;
+        this.store = null;
+        this.create = false;
+    }
+    onUpdate(store, data) {
+        this.localStorageManagerService.updateStore({
+            name: store.name,
+            data: JSON.parse(data)
+        });
+        this.onCancel();
+    }
+    onReset() {
+        this.localStorageManagerService.resetStore();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalStorageDemoComponent, deps: [{ token: CONFIG_SETTINGS_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LocalStorageDemoComponent, selector: "app-local-storage-demo", ngImport: i0, template: "<div style=\"margin: 2rem;\">\n\n  <div style=\"display: flex; gap: 1rem\">\n    <h2 style=\"padding-top: .5rem; display: flex;\">\n      <div style=\"padding-top: .5rem;\">Local Storage Manager</div>\n      <div>\n        <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n          <mat-icon>info</mat-icon>\n        </button>\n      </div>\n    </h2>\n    <span style=\"flex:1\"></span>\n    <div style=\"padding-top: .25rem;\">\n      <mat-button-toggle-group name=\"storage\" [formControl]=\"typeControl\" (change)=\"onCancel()\">\n        <mat-button-toggle value=\"0\">Local Storage</mat-button-toggle>\n        <mat-button-toggle value=\"1\">Session Storage</mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n    <div style=\"margin-top: .25rem;\">\n      <button mat-icon-button (click)=\"onCreate()\">\n        <mat-icon>add</mat-icon>\n      </button>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"storeProps?.storageName || storeProps?.storageSettingsName\">\n    <div style=\"display: flex; gap: .5rem; flex-direction: column; border: gray solid thin; background-color: whitesmoke; padding: 1rem;\"\n    >\n      <div style=\"display: flex;\">\n        <div *ngIf=\"storeProps?.storageSettingsName\" style=\"flex:1\">\n          Database: <b>{{ storeProps?.storageSettingsName }}</b>\n        </div>\n        <div *ngIf=\"storeProps?.storageName\" style=\"flex:1\">\n          Data: <b>{{ storeProps?.storageName }}</b>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <div style=\"margin-top: 2rem;\" [formGroup]=\"newStoreForm\" *ngIf=\"create; else LIST\">\n\n    <h2>Create Store</h2>\n\n    <div style=\"display: flex; gap: 1rem;\">\n      <div style=\"flex:1\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Store Name</mat-label>\n          <input matInput placeholder=\"sample\" formControlName=\"name\">\n        </mat-form-field>\n      </div>\n      <div>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Expires In...</mat-label>\n          <mat-select formControlName=\"expiresIn\">\n            <mat-option value=\"0\">None</mat-option>\n            <mat-option value=\"30s\">30 Seconds</mat-option>\n            <mat-option value=\"1mn\">1 Minute</mat-option>\n            <mat-option value=\"1hr\">1 Hour</mat-option>\n            <mat-option value=\"1d\">1 Day</mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <div style=\"margin-top: 1rem;\">\n        <mat-slide-toggle formControlName=\"encrypted\">Encrypted</mat-slide-toggle>\n      </div>\n    </div>\n\n    <div style=\"display: flex;\">\n      <mat-form-field appearance=\"outline\" style=\"flex: 1;\">\n        <mat-label>Data (Must be an Object or Array of any)</mat-label>\n        <textarea matInput placeholder=\"[]\" formControlName=\"data\" #json></textarea>\n      </mat-form-field>\n    </div>\n    <mat-error *ngIf=\"!isValidJSON(json.value)\">Not Valid Data</mat-error>\n\n    <div style=\"display: flex;\">\n      <span style=\"flex:1\"></span>\n      <button mat-stroked-button (click)=\"onCreateStore()\" [disabled]=\"!(isValid && isValidJSON(json.value))\">\n        Save Store\n      </button>\n    </div>\n\n  </div>\n\n  <ng-template #LIST>\n\n    <div style=\"margin-top: 1rem;\">\n      <mat-divider></mat-divider>\n    </div>\n{{ settings$ | async | json }}\n    <div *ngIf=\"filterData(settings$ | async) as data\">\n      <ng-container *ngIf=\"data.length > 0; else NO_DATA\">\n        <table mat-table [dataSource]=\"data\">\n          <ng-container matColumnDef=\"name\">\n            <th mat-header-cell *matHeaderCellDef> Store </th>\n            <td mat-cell *matCellDef=\"let element\" style=\"font-weight: bold; text-transform: uppercase;\"> {{element.name}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"id\">\n            <th mat-header-cell *matHeaderCellDef> ID </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.id}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"encrypted\">\n            <th mat-header-cell *matHeaderCellDef style=\"text-align: center;\"> Encrypted </th>\n            <td mat-cell *matCellDef=\"let element\" style=\"text-align: center;\">\n              <ng-container *ngIf=\"element.options.encrypted; else NO\">YES</ng-container>\n              <ng-template #NO><span style=\"color:gray\">NO</span></ng-template>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"expires\">\n            <th mat-header-cell *matHeaderCellDef style=\"text-align: center;\"> Expires </th>\n            <td mat-cell *matCellDef=\"let element\" style=\"text-align: center;\">\n              <ng-container *ngIf=\"element.options.expires !== 0; else NO_DATA\">\n                {{expiresIn(element.options.expires)}}\n              </ng-container>\n              <ng-template #NO_DATA>\n                \u221E\n              </ng-template>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"option\">\n            <th mat-header-cell *matHeaderCellDef></th>\n            <td mat-cell *matCellDef=\"let element\" style=\"padding-right: 0;\">\n              <div style=\"display: flex;justify-content: flex-end;\">\n                <button mat-icon-button color=\"warn\" (click)=\"onDelete(element); $event.stopPropagation()\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </div>\n            </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" (click)=\"onSelectedRow(row)\"></tr>\n        </table>\n      </ng-container>\n\n      <ng-template #NO_DATA>\n        <h3 style=\"margin-top: 1rem;\">No Data</h3>\n      </ng-template>\n\n      <div *ngIf=\"(data$ | async) as data\" style=\"margin-top: 2rem;\">\n        <div style=\"margin-bottom: 1rem;\">\n          <mat-divider></mat-divider>\n        </div>\n\n        <h3>STORE: <span style=\"font-weight: bold;\">{{ store.name | uppercase }}</span></h3>\n        <h3>SETTINGS: {{ setting$(store.name) | async | json }}</h3>\n        <div style=\"display: flex;\">\n          <mat-form-field appearance=\"outline\" style=\"flex: 1;\">\n            <mat-label>Data (Must be an Object or Array of any)</mat-label>\n            <textarea matInput placeholder=\"[]\" #json [value]=\"data\"></textarea>\n          </mat-form-field>\n        </div>\n        <mat-error *ngIf=\"!isValidJSON(json.value)\">Not Valid Data</mat-error>\n\n        <div style=\"display: flex; gap: .5rem;\">\n          <span style=\"flex:1\"></span>\n          <button mat-stroked-button (click)=\"onCancel()\">Cancel</button>\n          <button mat-stroked-button (click)=\"onUpdate(store, json.value)\" [disabled]=\"!(isValidJSON(json.value))\">Update</button>\n        </div>\n      </div>\n    </div>\n\n  </ng-template>\n\n  <div style=\"margin-top: 1rem;\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 1rem;\">\n    <button mat-stroked-button (click)=\"onReset()\">Delete All Stores</button>\n  </div>\n\n</div>\n\n\n<mat-menu #menu=\"matMenu\">\n  <div style=\"padding: 1rem;\">\n    <p>Please note that the LocalStorage (encryption) and management of data is dependant on initializing the APP_ID</p>\n    <p>Must provide a value for <b>APP_ID</b> in AppModule->Providers</p>\n    <mat-divider></mat-divider>\n  <div style=\"font-size: smaller; margin-top: .5rem;\">\n    <p>Example: UUID (self.crypto.randomUUID() to generate)</p>\n    <div style=\"background-color: whitesmoke; padding: 1rem;\">\n      &#123;<br>\n        provide: APP_ID,<br>\n        useValue: \"056991ac-3537-43ab-b5b9-83edf6554eff\",<br>\n      &#125;\n    </div>\n  </div>\n  </div>\n</mat-menu>\n", styles: [".mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor}.demo-row-is-clicked{font-weight:700}.mat-mdc-menu-panel.mat-mdc-menu-panel{max-width:280px!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i3$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i8.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i8.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i8.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i8.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i10$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: i10.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i11.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i12.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalStorageDemoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-local-storage-demo', encapsulation: ViewEncapsulation.None, template: "<div style=\"margin: 2rem;\">\n\n  <div style=\"display: flex; gap: 1rem\">\n    <h2 style=\"padding-top: .5rem; display: flex;\">\n      <div style=\"padding-top: .5rem;\">Local Storage Manager</div>\n      <div>\n        <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n          <mat-icon>info</mat-icon>\n        </button>\n      </div>\n    </h2>\n    <span style=\"flex:1\"></span>\n    <div style=\"padding-top: .25rem;\">\n      <mat-button-toggle-group name=\"storage\" [formControl]=\"typeControl\" (change)=\"onCancel()\">\n        <mat-button-toggle value=\"0\">Local Storage</mat-button-toggle>\n        <mat-button-toggle value=\"1\">Session Storage</mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n    <div style=\"margin-top: .25rem;\">\n      <button mat-icon-button (click)=\"onCreate()\">\n        <mat-icon>add</mat-icon>\n      </button>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"storeProps?.storageName || storeProps?.storageSettingsName\">\n    <div style=\"display: flex; gap: .5rem; flex-direction: column; border: gray solid thin; background-color: whitesmoke; padding: 1rem;\"\n    >\n      <div style=\"display: flex;\">\n        <div *ngIf=\"storeProps?.storageSettingsName\" style=\"flex:1\">\n          Database: <b>{{ storeProps?.storageSettingsName }}</b>\n        </div>\n        <div *ngIf=\"storeProps?.storageName\" style=\"flex:1\">\n          Data: <b>{{ storeProps?.storageName }}</b>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <div style=\"margin-top: 2rem;\" [formGroup]=\"newStoreForm\" *ngIf=\"create; else LIST\">\n\n    <h2>Create Store</h2>\n\n    <div style=\"display: flex; gap: 1rem;\">\n      <div style=\"flex:1\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Store Name</mat-label>\n          <input matInput placeholder=\"sample\" formControlName=\"name\">\n        </mat-form-field>\n      </div>\n      <div>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Expires In...</mat-label>\n          <mat-select formControlName=\"expiresIn\">\n            <mat-option value=\"0\">None</mat-option>\n            <mat-option value=\"30s\">30 Seconds</mat-option>\n            <mat-option value=\"1mn\">1 Minute</mat-option>\n            <mat-option value=\"1hr\">1 Hour</mat-option>\n            <mat-option value=\"1d\">1 Day</mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <div style=\"margin-top: 1rem;\">\n        <mat-slide-toggle formControlName=\"encrypted\">Encrypted</mat-slide-toggle>\n      </div>\n    </div>\n\n    <div style=\"display: flex;\">\n      <mat-form-field appearance=\"outline\" style=\"flex: 1;\">\n        <mat-label>Data (Must be an Object or Array of any)</mat-label>\n        <textarea matInput placeholder=\"[]\" formControlName=\"data\" #json></textarea>\n      </mat-form-field>\n    </div>\n    <mat-error *ngIf=\"!isValidJSON(json.value)\">Not Valid Data</mat-error>\n\n    <div style=\"display: flex;\">\n      <span style=\"flex:1\"></span>\n      <button mat-stroked-button (click)=\"onCreateStore()\" [disabled]=\"!(isValid && isValidJSON(json.value))\">\n        Save Store\n      </button>\n    </div>\n\n  </div>\n\n  <ng-template #LIST>\n\n    <div style=\"margin-top: 1rem;\">\n      <mat-divider></mat-divider>\n    </div>\n{{ settings$ | async | json }}\n    <div *ngIf=\"filterData(settings$ | async) as data\">\n      <ng-container *ngIf=\"data.length > 0; else NO_DATA\">\n        <table mat-table [dataSource]=\"data\">\n          <ng-container matColumnDef=\"name\">\n            <th mat-header-cell *matHeaderCellDef> Store </th>\n            <td mat-cell *matCellDef=\"let element\" style=\"font-weight: bold; text-transform: uppercase;\"> {{element.name}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"id\">\n            <th mat-header-cell *matHeaderCellDef> ID </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.id}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"encrypted\">\n            <th mat-header-cell *matHeaderCellDef style=\"text-align: center;\"> Encrypted </th>\n            <td mat-cell *matCellDef=\"let element\" style=\"text-align: center;\">\n              <ng-container *ngIf=\"element.options.encrypted; else NO\">YES</ng-container>\n              <ng-template #NO><span style=\"color:gray\">NO</span></ng-template>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"expires\">\n            <th mat-header-cell *matHeaderCellDef style=\"text-align: center;\"> Expires </th>\n            <td mat-cell *matCellDef=\"let element\" style=\"text-align: center;\">\n              <ng-container *ngIf=\"element.options.expires !== 0; else NO_DATA\">\n                {{expiresIn(element.options.expires)}}\n              </ng-container>\n              <ng-template #NO_DATA>\n                \u221E\n              </ng-template>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"option\">\n            <th mat-header-cell *matHeaderCellDef></th>\n            <td mat-cell *matCellDef=\"let element\" style=\"padding-right: 0;\">\n              <div style=\"display: flex;justify-content: flex-end;\">\n                <button mat-icon-button color=\"warn\" (click)=\"onDelete(element); $event.stopPropagation()\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </div>\n            </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" (click)=\"onSelectedRow(row)\"></tr>\n        </table>\n      </ng-container>\n\n      <ng-template #NO_DATA>\n        <h3 style=\"margin-top: 1rem;\">No Data</h3>\n      </ng-template>\n\n      <div *ngIf=\"(data$ | async) as data\" style=\"margin-top: 2rem;\">\n        <div style=\"margin-bottom: 1rem;\">\n          <mat-divider></mat-divider>\n        </div>\n\n        <h3>STORE: <span style=\"font-weight: bold;\">{{ store.name | uppercase }}</span></h3>\n        <h3>SETTINGS: {{ setting$(store.name) | async | json }}</h3>\n        <div style=\"display: flex;\">\n          <mat-form-field appearance=\"outline\" style=\"flex: 1;\">\n            <mat-label>Data (Must be an Object or Array of any)</mat-label>\n            <textarea matInput placeholder=\"[]\" #json [value]=\"data\"></textarea>\n          </mat-form-field>\n        </div>\n        <mat-error *ngIf=\"!isValidJSON(json.value)\">Not Valid Data</mat-error>\n\n        <div style=\"display: flex; gap: .5rem;\">\n          <span style=\"flex:1\"></span>\n          <button mat-stroked-button (click)=\"onCancel()\">Cancel</button>\n          <button mat-stroked-button (click)=\"onUpdate(store, json.value)\" [disabled]=\"!(isValidJSON(json.value))\">Update</button>\n        </div>\n      </div>\n    </div>\n\n  </ng-template>\n\n  <div style=\"margin-top: 1rem;\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 1rem;\">\n    <button mat-stroked-button (click)=\"onReset()\">Delete All Stores</button>\n  </div>\n\n</div>\n\n\n<mat-menu #menu=\"matMenu\">\n  <div style=\"padding: 1rem;\">\n    <p>Please note that the LocalStorage (encryption) and management of data is dependant on initializing the APP_ID</p>\n    <p>Must provide a value for <b>APP_ID</b> in AppModule->Providers</p>\n    <mat-divider></mat-divider>\n  <div style=\"font-size: smaller; margin-top: .5rem;\">\n    <p>Example: UUID (self.crypto.randomUUID() to generate)</p>\n    <div style=\"background-color: whitesmoke; padding: 1rem;\">\n      &#123;<br>\n        provide: APP_ID,<br>\n        useValue: \"056991ac-3537-43ab-b5b9-83edf6554eff\",<br>\n      &#125;\n    </div>\n  </div>\n  </div>\n</mat-menu>\n", styles: [".mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor}.demo-row-is-clicked{font-weight:700}.mat-mdc-menu-panel.mat-mdc-menu-panel{max-width:280px!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: ConfigOptions, decorators: [{
+                    type: Inject,
+                    args: [CONFIG_SETTINGS_TOKEN]
+                }] }]; } });
+
+class HttpRequestServicesDemoComponent {
+    constructor(configOptions) {
+        this.configOptions = configOptions;
+        this.requestTypes = [
+            { name: "Http Service", value: 'http_service' },
+            { name: "Http State Service", value: 'http_state_service' },
+            { name: "Database Service", value: 'database_service', divider: true, disabled: true },
+            { name: "Local Storage Service", value: 'local_storage_service' },
+        ];
+        this.selectedService = this.requestTypes[0].value;
+    }
+    ngOnInit() {
+        if (this.configOptions)
+            this.injectionOptions = this.configOptions;
+    }
+    onSelected(type) {
+        this.selectedService = this.requestTypes[type].value;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HttpRequestServicesDemoComponent, deps: [{ token: CONFIG_SETTINGS_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: HttpRequestServicesDemoComponent, selector: "app-http-request-services-demo", ngImport: i0, template: "<mat-toolbar  style=\"display:flex\">\n  <div>Global Data</div>\n  <div style=\"flex:1\"></div>\n  <button mat-stroked-button [matMenuTriggerFor]=\"menu\">Services</button>\n  <mat-menu #menu=\"matMenu\">\n    <ng-container *ngFor=\"let type of requestTypes; index as i\">\n      <div\n        *ngIf=\"type?.divider\"\n        style=\"margin-top: .5rem; margin-bottom: .5rem;\"\n      >\n        <mat-divider></mat-divider>\n      </div>\n      <button\n        mat-menu-item\n        (click)=\"onSelected(i)\"\n        [disabled]=\"type.disabled\"\n        >\n        {{ type.name }}\n      </button>\n    </ng-container>\n\n  </mat-menu>\n</mat-toolbar>\n\n<span [ngSwitch]=\"selectedService\">\n  <p *ngSwitchCase=\"'http_service'\">\n    <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n    <app-request-manager-demo></app-request-manager-demo>\n  </p>\n  <p *ngSwitchCase=\"'http_state_service'\">\n    <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n    <app-request-manager-state-demo></app-request-manager-state-demo>\n  </p>\n  <p *ngSwitchCase=\"'database_service'\">\n    <!-- <app-database-data-demo></app-database-data-demo> -->\n  </p>\n  <p *ngSwitchCase=\"'local_storage_service'\">\n    <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n    <app-local-storage-demo></app-local-storage-demo>\n  </p>\n  <p *ngSwitchDefault>\n    Other\n  </p>\n</span>\n\n<ng-template #HTTP_OPTIONS>\n  <ng-container *ngIf=\"injectionOptions?.httpRequestOptions\">\n    <div class=\"box\">\n      <h3 style=\"font-weight: bold;\">Injection Token Detected - HTTP Options</h3>\n      {{ injectionOptions?.httpRequestOptions| json }}\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #LOCAL_OPTIONS>\n  <ng-container class=\"box\" *ngIf=\"injectionOptions?.LocalStorageOptions\">\n    <div class=\"box\">\n      <h3 style=\"font-weight: bold;\">Injection Token Detected - LocalStorage Options</h3>\n      {{ injectionOptions?.LocalStorageOptions | json }}\n    </div>\n  </ng-container>\n</ng-template>\n\n\n", styles: [".box{padding:1rem;background-color:#f5f5f5;border:thin gray solid;margin-top:1rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i3$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i4$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i11.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: RequestManagerStateDemoComponent, selector: "app-request-manager-state-demo" }, { kind: "component", type: RequestManagerDemoComponent, selector: "app-request-manager-demo" }, { kind: "component", type: LocalStorageDemoComponent, selector: "app-local-storage-demo" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HttpRequestServicesDemoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-http-request-services-demo', template: "<mat-toolbar  style=\"display:flex\">\n  <div>Global Data</div>\n  <div style=\"flex:1\"></div>\n  <button mat-stroked-button [matMenuTriggerFor]=\"menu\">Services</button>\n  <mat-menu #menu=\"matMenu\">\n    <ng-container *ngFor=\"let type of requestTypes; index as i\">\n      <div\n        *ngIf=\"type?.divider\"\n        style=\"margin-top: .5rem; margin-bottom: .5rem;\"\n      >\n        <mat-divider></mat-divider>\n      </div>\n      <button\n        mat-menu-item\n        (click)=\"onSelected(i)\"\n        [disabled]=\"type.disabled\"\n        >\n        {{ type.name }}\n      </button>\n    </ng-container>\n\n  </mat-menu>\n</mat-toolbar>\n\n<span [ngSwitch]=\"selectedService\">\n  <p *ngSwitchCase=\"'http_service'\">\n    <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n    <app-request-manager-demo></app-request-manager-demo>\n  </p>\n  <p *ngSwitchCase=\"'http_state_service'\">\n    <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n    <app-request-manager-state-demo></app-request-manager-state-demo>\n  </p>\n  <p *ngSwitchCase=\"'database_service'\">\n    <!-- <app-database-data-demo></app-database-data-demo> -->\n  </p>\n  <p *ngSwitchCase=\"'local_storage_service'\">\n    <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n    <app-local-storage-demo></app-local-storage-demo>\n  </p>\n  <p *ngSwitchDefault>\n    Other\n  </p>\n</span>\n\n<ng-template #HTTP_OPTIONS>\n  <ng-container *ngIf=\"injectionOptions?.httpRequestOptions\">\n    <div class=\"box\">\n      <h3 style=\"font-weight: bold;\">Injection Token Detected - HTTP Options</h3>\n      {{ injectionOptions?.httpRequestOptions| json }}\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #LOCAL_OPTIONS>\n  <ng-container class=\"box\" *ngIf=\"injectionOptions?.LocalStorageOptions\">\n    <div class=\"box\">\n      <h3 style=\"font-weight: bold;\">Injection Token Detected - LocalStorage Options</h3>\n      {{ injectionOptions?.LocalStorageOptions | json }}\n    </div>\n  </ng-container>\n</ng-template>\n\n\n", styles: [".box{padding:1rem;background-color:#f5f5f5;border:thin gray solid;margin-top:1rem}\n"] }]
+        }], ctorParameters: function () { return [{ type: ConfigOptions, decorators: [{
+                    type: Inject,
+                    args: [CONFIG_SETTINGS_TOKEN]
+                }] }]; } });
+
+// import { DatabaseDataDemoComponent } from './http-request-services-demo/database-data-demo/database-data-demo.component';
 class HttpRequestManagerModule {
     static forRoot(config = ConfigOptions.adapt()) {
         return {
@@ -2926,7 +2956,7 @@ class HttpRequestManagerModule {
             LocalStorageDemoComponent
             // DatabaseDataDemoComponent,
         ], imports: [CommonModule,
-            ToastMessageModule,
+            ToastMessageDisplayModule,
             FormsModule,
             ReactiveFormsModule,
             MatButtonModule,
@@ -2952,7 +2982,7 @@ class HttpRequestManagerModule {
             { provide: CONFIG_SETTINGS_TOKEN, useValue: ConfigOptions.adapt() },
             HTTPManagerService, LocalStorageManagerService
         ], imports: [CommonModule,
-            ToastMessageModule,
+            ToastMessageDisplayModule,
             FormsModule,
             ReactiveFormsModule,
             MatButtonModule,
@@ -2979,7 +3009,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             args: [{
                     imports: [
                         CommonModule,
-                        ToastMessageModule,
+                        ToastMessageDisplayModule,
                         FormsModule,
                         ReactiveFormsModule,
                         MatButtonModule,
@@ -3021,35 +3051,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
-class HttpRequestServicesDemoComponent {
-    constructor(configOptions) {
-        this.configOptions = configOptions;
-        this.requestTypes = [
-            { name: "Http Service", value: 'http_service' },
-            { name: "Http State Service", value: 'http_state_service' },
-            { name: "Database Service", value: 'database_service', divider: true, disabled: true },
-            { name: "Local Storage Service", value: 'local_storage_service' },
-        ];
-        this.selectedService = this.requestTypes[0].value;
-    }
-    ngOnInit() {
-        if (this.configOptions)
-            this.injectionOptions = this.configOptions;
-    }
-    onSelected(type) {
-        this.selectedService = this.requestTypes[type].value;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HttpRequestServicesDemoComponent, deps: [{ token: CONFIG_SETTINGS_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: HttpRequestServicesDemoComponent, selector: "app-http-request-services-demo", ngImport: i0, template: "<mat-toolbar  style=\"display:flex\">\n  <div>Global Data</div>\n  <div style=\"flex:1\"></div>\n  <button mat-stroked-button [matMenuTriggerFor]=\"menu\">Services</button>\n  <mat-menu #menu=\"matMenu\">\n    <ng-container *ngFor=\"let type of requestTypes; index as i\">\n      <div\n        *ngIf=\"type?.divider\"\n        style=\"margin-top: .5rem; margin-bottom: .5rem;\"\n      >\n        <mat-divider></mat-divider>\n      </div>\n      <button\n        mat-menu-item\n        (click)=\"onSelected(i)\"\n        [disabled]=\"type.disabled\"\n        >\n        {{ type.name }}\n      </button>\n    </ng-container>\n\n  </mat-menu>\n</mat-toolbar>\n\n<span [ngSwitch]=\"selectedService\">\n  <p *ngSwitchCase=\"'http_service'\">\n    <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n    <app-request-manager-demo></app-request-manager-demo>\n  </p>\n  <p *ngSwitchCase=\"'http_state_service'\">\n    <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n    <app-request-manager-state-demo></app-request-manager-state-demo>\n  </p>\n  <p *ngSwitchCase=\"'database_service'\">\n    <!-- <app-database-data-demo></app-database-data-demo> -->\n  </p>\n  <p *ngSwitchCase=\"'local_storage_service'\">\n    <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n    <app-local-storage-demo></app-local-storage-demo>\n  </p>\n  <p *ngSwitchDefault>\n    Other\n  </p>\n</span>\n\n<ng-template #HTTP_OPTIONS>\n  <ng-container *ngIf=\"injectionOptions?.httpRequestOptions\">\n    <div class=\"box\">\n      <h3 style=\"font-weight: bold;\">Injection Token Detected - HTTP Options</h3>\n      {{ injectionOptions?.httpRequestOptions| json }}\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #LOCAL_OPTIONS>\n  <ng-container class=\"box\" *ngIf=\"injectionOptions?.LocalStorageOptions\">\n    <div class=\"box\">\n      <h3 style=\"font-weight: bold;\">Injection Token Detected - LocalStorage Options</h3>\n      {{ injectionOptions?.LocalStorageOptions| json }}\n    </div>\n  </ng-container>\n</ng-template>\n\n\n", styles: [".box{padding:1rem;background-color:#f5f5f5;border:thin gray solid;margin-top:1rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i3$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i4$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i11.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: RequestManagerStateDemoComponent, selector: "app-request-manager-state-demo" }, { kind: "component", type: RequestManagerDemoComponent, selector: "app-request-manager-demo" }, { kind: "component", type: LocalStorageDemoComponent, selector: "app-local-storage-demo" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HttpRequestServicesDemoComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-http-request-services-demo', template: "<mat-toolbar  style=\"display:flex\">\n  <div>Global Data</div>\n  <div style=\"flex:1\"></div>\n  <button mat-stroked-button [matMenuTriggerFor]=\"menu\">Services</button>\n  <mat-menu #menu=\"matMenu\">\n    <ng-container *ngFor=\"let type of requestTypes; index as i\">\n      <div\n        *ngIf=\"type?.divider\"\n        style=\"margin-top: .5rem; margin-bottom: .5rem;\"\n      >\n        <mat-divider></mat-divider>\n      </div>\n      <button\n        mat-menu-item\n        (click)=\"onSelected(i)\"\n        [disabled]=\"type.disabled\"\n        >\n        {{ type.name }}\n      </button>\n    </ng-container>\n\n  </mat-menu>\n</mat-toolbar>\n\n<span [ngSwitch]=\"selectedService\">\n  <p *ngSwitchCase=\"'http_service'\">\n    <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n    <app-request-manager-demo></app-request-manager-demo>\n  </p>\n  <p *ngSwitchCase=\"'http_state_service'\">\n    <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n    <app-request-manager-state-demo></app-request-manager-state-demo>\n  </p>\n  <p *ngSwitchCase=\"'database_service'\">\n    <!-- <app-database-data-demo></app-database-data-demo> -->\n  </p>\n  <p *ngSwitchCase=\"'local_storage_service'\">\n    <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n    <app-local-storage-demo></app-local-storage-demo>\n  </p>\n  <p *ngSwitchDefault>\n    Other\n  </p>\n</span>\n\n<ng-template #HTTP_OPTIONS>\n  <ng-container *ngIf=\"injectionOptions?.httpRequestOptions\">\n    <div class=\"box\">\n      <h3 style=\"font-weight: bold;\">Injection Token Detected - HTTP Options</h3>\n      {{ injectionOptions?.httpRequestOptions| json }}\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #LOCAL_OPTIONS>\n  <ng-container class=\"box\" *ngIf=\"injectionOptions?.LocalStorageOptions\">\n    <div class=\"box\">\n      <h3 style=\"font-weight: bold;\">Injection Token Detected - LocalStorage Options</h3>\n      {{ injectionOptions?.LocalStorageOptions| json }}\n    </div>\n  </ng-container>\n</ng-template>\n\n\n", styles: [".box{padding:1rem;background-color:#f5f5f5;border:thin gray solid;margin-top:1rem}\n"] }]
-        }], ctorParameters: function () { return [{ type: ConfigOptions, decorators: [{
-                    type: Inject,
-                    args: [CONFIG_SETTINGS_TOKEN]
-                }] }]; } });
-
 /*
  * Public API Surface of http-request-manager
  */