http-request-manager 15.0.12 → 15.0.16

package/fesm2022/http-request-manager.mjs

@@ -2,9 +2,9 @@ import * as i0 from '@angular/core';
 import { inject, Injectable, APP_ID, Inject, InjectionToken, Injector, Optional, EventEmitter, Component, ViewEncapsulation, Input, Output, ViewChild, NgModule } from '@angular/core';
 import { ComponentStore } from '@ngrx/component-store';
 import { map, catchError, filter, finalize, takeWhile, retry, startWith, tap, mergeMap, takeUntil, withLatestFrom, switchMap, concatMap, scan, distinctUntilChanged } from 'rxjs/operators';
-import { HttpClient, HttpHeaders, HttpEventType, HttpErrorResponse, HTTP_INTERCEPTORS } from '@angular/common/http';
+import { HttpClient, HttpHeaders, HttpEventType, HttpHeaderResponse, HttpErrorResponse, HTTP_INTERCEPTORS } from '@angular/common/http';
 import * as CryptoJS from 'crypto-js';
-import { from, BehaviorSubject, EMPTY, throwError, defer, interval, timer, Subject, of, Subscription, catchError as catchError$1 } from 'rxjs';
+import { from, BehaviorSubject, EMPTY, throwError, defer, interval, timer, Subject, of, Subscription, catchError as catchError$1, map as map$1, tap as tap$1 } from 'rxjs';
 import { ToastMessageDisplayService, ToastDisplay, ToastColors, ToastMessageDisplayModule } from 'toast-message-display';
 import * as i1 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
@@ -19,22 +19,22 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i5 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import * as i6 from '@angular/material/core';
-import * as i7 from '@angular/material/icon';
+import * as i7 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import * as i8 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i8 from '@angular/material/table';
+import * as i9 from '@angular/material/table';
 import { MatTableModule } from '@angular/material/table';
-import * as i9 from '@angular/material/progress-bar';
+import * as i10 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
-import * as i10 from '@angular/material/slide-toggle';
+import * as i11 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import * as i11 from '@angular/material/divider';
+import * as i12 from '@angular/material/divider';
 import { MatDividerModule } from '@angular/material/divider';
-import * as i12 from '@angular/material/input';
+import * as i13 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import * as i3 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import * as i3$2 from '@angular/material/menu';
-import { MatMenuModule } from '@angular/material/menu';
 import * as i10$1 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
@@ -58,7 +58,7 @@ class SettingOptions {
         this.encrypted = encrypted;
     }
     static adapt(item) {
-        return new SettingOptions((item?.storage) ? item.storage : StorageType.GLOBAL, (item?.expires) ? item.expires : 0, (item?.expiresIn) ? item.expiresIn : '', (item?.encrypted) ? item.encrypted : false);
+        return new SettingOptions((item?.storage) ? item.storage : StorageType.GLOBAL, (item?.expires) ? item.expires : 0, (item?.expiresIn) ? item.expiresIn : '', (item?.encrypted) ? item?.encrypted : false);
     }
 }
 
@@ -435,57 +435,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  */
 const CONFIG_SETTINGS_TOKEN = new InjectionToken('http.config');
 
-class ObjectMergerService {
-    mergeOptions(options, configForRoot) {
-        const merged = configForRoot ? { ...configForRoot } : {};
-        for (const key in options) {
-            if (Object.prototype.hasOwnProperty.call(options, key)) {
-                const value = options[key];
-                if (value !== null &&
-                    value !== undefined &&
-                    !(typeof value === 'number') ||
-                    !(typeof value === 'boolean') ||
-                    !(this.isNonEmptyString(value)) &&
-                        !(Array.isArray(value) && value.length === 0) &&
-                        !(typeof value === 'object' && !Array.isArray(value))) {
-                    merged[key] = value;
-                }
-            }
-        }
-        return merged;
-    }
-    isNonEmptyString(value) {
-        return typeof value === 'string' && value.length === 0;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ObjectMergerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ObjectMergerService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ObjectMergerService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-
-class ApiRequest {
-    constructor(server = '', path = [], headers = {}, adapter, mapper, polling, retry = RetryOptions.adapt(), stream = false, displayError = false) {
-        this.server = server;
-        this.path = path;
-        this.headers = headers;
-        this.adapter = adapter;
-        this.mapper = mapper;
-        this.polling = polling;
-        this.retry = retry;
-        this.stream = stream;
-        this.displayError = displayError;
-    }
-    static adapt(item) {
-        const server = Array.isArray(item?.server) ? item.server.join('/') : item?.server || '';
-        const retryOptions = item?.retry ? RetryOptions.adapt(item.retry) : RetryOptions.adapt();
-        return new ApiRequest(server, item?.path, (item?.headers) ? item.headers : {}, item?.adapter, item?.mapper, item?.polling ? Math.floor(item.polling) : 0, retryOptions, item?.stream, item?.displayError);
-    }
-}
-
 class HeadersService {
     constructor() {
         this.headers = {};
@@ -801,8 +750,8 @@ class RequestService {
         return this.headersService.generateHeaders(options.headers);
     }
     buildCombinedHeaders(options) {
-        const headers = this.combineHeaders(options.headers, options.stream);
-        return this.headersService.generateHeaders(headers);
+        const headers = this.headersService.generateHeaders(options.headers);
+        return this.combineHeaders(headers, options.stream);
     }
     request(options) {
         return (source$) => {
@@ -822,31 +771,36 @@ class RequestService {
         return this.http.get(urlPath, { responseType: 'blob', observe: 'events', reportProgress: true })
             .pipe(map((event) => {
             this.isPending.next(true);
-            const info = event;
+            if (event instanceof HttpHeaderResponse) {
+                if (event.status !== 200) {
+                    this.isPending.next(false);
+                    throw new Error('Download failed');
+                }
+            }
+            // 0	Sent	Request has been sent.
+            // 1	UploadProgress	Upload is in progress.
+            // 2	ResponseHeader	Response headers received.
+            // 3	DownloadProgress	Download is in progress.
+            // 4	Response	Response is fully received.
+            // 5	User	Custom user event.
             switch (event.type) {
                 case HttpEventType.DownloadProgress:
-                    if (info.status !== 200) {
-                        this.isPending.next(false);
-                        throw new Error('Download failed');
-                        return 0;
-                    }
-                    else {
-                        const status = (event.total) ? Math.round(event.loaded / (event.total || 1) * 100) : 100;
-                        this.progress.next(status);
-                        return status;
-                    }
+                    const status = (event.total) ? Math.round(event.loaded / (event.total || 1) * 100) : 100;
+                    this.progress.next(status);
+                    return status;
                 case HttpEventType.Response:
                     try {
+                        const fileNamePath = (options?.saveAs) ? options.saveAs : options.path[options.path.length - 1];
                         const header_content = event.headers.get('Content-Disposition') || '';
-                        const fd = this.fileDetails(options.path);
-                        if (!fd) {
+                        // checks if header_content is not empty and splits the header_content to get the file name
+                        // otherwise, it will use the fileDownload - contains the file name and extension
+                        const file = (header_content) ? header_content.split('=')[1].substring(0, header_content.split('=')[1].length) : '';
+                        const fileName = (fileNamePath !== '') ? fileNamePath : file;
+                        if (fileName === '') {
                             this.isPending.next(false);
                             throw new Error('Save File: (file name and extension) not found in Headers or Path');
                         }
-                        // checks if header_content is not empty and splits the header_content to get the file name
-                        // otherwise, it will use the fileDownload - contains the file name and extension
-                        const file = (header_content) ? header_content.split('=')[1].substring(0, header_content.split('=')[1].length) : `${fd.file}.${fd.ext}`;
-                        this.downloadFile(file, event.body);
+                        this.downloadFile(fileName, event.body);
                         this.isPending.next(false);
                         return 100;
                     }
@@ -861,23 +815,6 @@ class RequestService {
             return throwError(() => err);
         }));
     }
-    fileDetails(path) {
-        const combinedPath = Array.isArray(path) ? path.join('/') : path;
-        if (!combinedPath || combinedPath.trim() === '') {
-            return;
-        }
-        const segments = combinedPath.split('/');
-        const fileNameWithExt = segments.pop() || '';
-        if (!fileNameWithExt.includes('.'))
-            return;
-        const dotIndex = fileNameWithExt.lastIndexOf('.');
-        if (fileNameWithExt.lastIndexOf('.') < 1)
-            return;
-        return {
-            file: fileNameWithExt.substring(0, dotIndex),
-            ext: fileNameWithExt.substring(dotIndex + 1),
-        };
-    }
     handleFinalize() {
         return finalize(() => this.isPending.next(false));
     }
@@ -1055,19 +992,21 @@ class HTTPManagerService extends RequestService {
         this.data = new BehaviorSubject(null);
         this.data$ = this.data.asObservable();
         this.polling$ = new Subject();
-        this.config = ConfigOptions.adapt();
-        this.config = (configOptions) ? ConfigOptions.adapt(configOptions) : ConfigOptions.adapt();
+        this.config = ApiRequest.adapt();
+        this.config = (configOptions) ? ApiRequest.adapt(configOptions.httpRequestOptions) : this.config;
     }
     // REQUESTS
     getRequest(options, params) {
         this.isPending.next(true);
         this.data.next(null);
+        if (options?.path)
+            options.path = (params) ? [...options.path, ...params] : options.path;
         options = (options) ? options : ApiRequest.adapt();
-        const updatedOptions = this.objectMergerService.mergeOptions(options, this.config.httpRequestOptions);
+        const updatedOptions = this.objectMergerService.mergeOptions(options);
         const func = this.getRecordRequest;
         const requests = this.createRequest(func, updatedOptions);
-        return this.createObservable(updatedOptions, requests, func.name).pipe(tap(data => this.data.next(data)))
-            .pipe(finalize(() => this.isPending.next(false)), catchError((err) => {
+        return this.createObservable(updatedOptions, requests, func.name)
+            .pipe(tap(data => this.data.next(data))).pipe(finalize(() => this.isPending.next(false)), catchError((err) => {
             if (updatedOptions.displayError)
                 this.handleErrorWithSnackBar(err);
             this.isPending.next(false);
@@ -1077,8 +1016,10 @@ class HTTPManagerService extends RequestService {
     postRequest(data, options, params) {
         this.isPending.next(true);
         this.data.next(null);
+        if (options?.path)
+            options.path = (params) ? [...options.path, ...params] : options.path;
         options = (options) ? options : ApiRequest.adapt();
-        const updatedOptions = this.objectMergerService.mergeOptions(options, this.config.httpRequestOptions);
+        const updatedOptions = this.objectMergerService.mergeOptions(options);
         const func = this.createRecordRequest;
         const requests = this.createRequest(func, updatedOptions, data);
         return this.createObservable(updatedOptions, requests, func.name).pipe(tap(data => this.data.next(data)))
@@ -1092,8 +1033,10 @@ class HTTPManagerService extends RequestService {
     putRequest(data, options, params) {
         this.isPending.next(true);
         this.data.next(null);
+        if (options?.path)
+            options.path = (params) ? [...options.path, ...params] : options.path;
         options = (options) ? options : ApiRequest.adapt();
-        const updatedOptions = this.objectMergerService.mergeOptions(options, this.config.httpRequestOptions);
+        const updatedOptions = this.objectMergerService.mergeOptions(options);
         const func = this.updateRecordRequest;
         const requests = this.createRequest(func, updatedOptions, data);
         return this.createObservable(updatedOptions, requests, func.name).pipe(tap(data => this.data.next(data)))
@@ -1107,8 +1050,10 @@ class HTTPManagerService extends RequestService {
     deleteRequest(options, params) {
         this.isPending.next(true);
         this.data.next(null);
+        if (options?.path)
+            options.path = (params) ? [...options.path, ...params] : options.path;
         options = (options) ? options : ApiRequest.adapt();
-        const updatedOptions = this.objectMergerService.mergeOptions(options, this.config.httpRequestOptions);
+        const updatedOptions = this.objectMergerService.mergeOptions(options);
         const func = this.deleteRecordRequest;
         const requests = this.createRequest(func, updatedOptions);
         return this.createObservable(updatedOptions, requests, func.name).pipe(tap(data => this.data.next(data)))
@@ -1119,14 +1064,12 @@ class HTTPManagerService extends RequestService {
             return this.handleError(err);
         }));
     }
-    downloadRequest(options, params) {
+    downloadRequest(options, params, saveAs) {
         this.isPending.next(true);
-        options = (options) ? options : ApiRequest.adapt();
-        const mergedOptions = this.objectMergerService.mergeOptions(options, this.config.httpRequestOptions);
-        const updatedOptions = {
-            ...mergedOptions,
-            path: params ? [...options.path, ...params] : options.path,
-        };
+        if (options?.path)
+            options.path = (params) ? [...options.path, ...params] : options.path;
+        options = (options) ? options : ApiRequest.adapt({ saveAs });
+        const updatedOptions = this.objectMergerService.mergeOptions(options);
         const func = this.downloadFileRequest;
         const requests = this.createRequest(func, updatedOptions);
         return this.createObservable(updatedOptions, requests, func.name)
@@ -1176,8 +1119,8 @@ class HTTPManagerService extends RequestService {
                 return this.handleError(err);
             }
             return throwError(() => err);
-        }), options.retry?.times > 0
-            ? delayedRetry((options?.retry.delay || 3) * 1000, (options?.retry.times || 0) - 1)
+        }), (options?.retry && options.retry.times > 0)
+            ? delayedRetry((options.retry.delay || 3) * 1000, (options.retry.times || 0) - 1)
             : (source) => source);
     }
     createRequest(func, options, data) {
@@ -1205,6 +1148,7 @@ class HTTPManagerService extends RequestService {
     }
     // MISC
     handleError(error) {
+        this.error.next(error.message || `${error.status} - ${error.statusText}`);
         return throwError(() => error);
     }
     handleErrorWithSnackBar(error) {
@@ -1236,6 +1180,78 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     args: [CONFIG_SETTINGS_TOKEN]
                 }] }]; } });
 
+class ApiRequest {
+    constructor(server = '', path = [], headers = {}, adapter, mapper, polling, retry, stream = false, displayError = false, saveAs) {
+        this.server = server;
+        this.path = path;
+        this.headers = headers;
+        this.adapter = adapter;
+        this.mapper = mapper;
+        this.polling = polling;
+        this.retry = retry;
+        this.stream = stream;
+        this.displayError = displayError;
+        this.saveAs = saveAs;
+    }
+    static adapt(item) {
+        const server = Array.isArray(item?.server) ? item.server.join('/') : item?.server || '';
+        return new ApiRequest(server, item?.path, (item?.headers) ? item.headers : {}, item?.adapter, item?.mapper, item?.polling ? Math.floor(item.polling) : 0, item?.retry ? RetryOptions.adapt(item.retry) : RetryOptions.adapt(), item?.stream, item?.displayError, item?.saveAs);
+    }
+}
+
+class RequestOptions {
+    constructor(path = [], headers = {}) {
+        this.path = path;
+        this.headers = headers;
+    }
+    static adapt(item) {
+        return new RequestOptions(item?.path, item?.headers);
+    }
+}
+
+class ObjectMergerService {
+    constructor(configOptions) {
+        this.configOptions = configOptions;
+        if (!this.configOptions)
+            this.configOptions = ConfigOptions.adapt();
+    }
+    mergeOptions(options = ApiRequest.adapt()) {
+        const configForRoot = (this.configOptions?.httpRequestOptions) ? this.configOptions.httpRequestOptions : ConfigHTTPOptions.adapt();
+        const mergedOptions = ApiRequest.adapt(options);
+        mergedOptions.server = (options && options.server === '') ? configForRoot?.server || '' : options.server;
+        mergedOptions.path = [...options.path, ...configForRoot?.path || []];
+        mergedOptions.headers = { ...options.headers, ...configForRoot?.headers || {} };
+        mergedOptions.retry = (options && (options?.retry?.times !== 0 || options?.retry?.delay !== 3)) ? options.retry : configForRoot?.retry || { times: 0, delay: 3 };
+        mergedOptions.polling = (options && options?.polling !== 0) ? options.polling : configForRoot?.polling || 0;
+        mergedOptions.displayError = (options && options?.displayError) ? options.displayError : configForRoot?.displayError || false;
+        mergedOptions.stream = (options && options?.stream) ? options.stream : configForRoot?.stream || false;
+        return mergedOptions;
+    }
+    mergeStorageOptions(options = SettingOptions.adapt()) {
+        const configForRoot = (this.configOptions?.LocalStorageOptions) ? this.configOptions.LocalStorageOptions : LocalStorageOptions.adapt();
+        const configForRootOptions = configForRoot.options || LocalStorageOptions.adapt().options;
+        const mergedOptions = SettingOptions.adapt(options);
+        mergedOptions.storage = (options && options.storage === 0) ? configForRootOptions?.storage || 0 : options.storage;
+        mergedOptions.expires = (options && options.expires === 0) ? configForRootOptions?.expires || 0 : options.expires;
+        mergedOptions.expiresIn = (options && options.expiresIn === '') ? configForRootOptions?.expiresIn || '' : options.expiresIn;
+        mergedOptions.encrypted = (options && !options.encrypted) ? configForRootOptions?.encrypted || false : options.encrypted;
+        return mergedOptions;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ObjectMergerService, deps: [{ token: CONFIG_SETTINGS_TOKEN, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ObjectMergerService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ObjectMergerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: ConfigOptions, decorators: [{
+                    type: Inject,
+                    args: [CONFIG_SETTINGS_TOKEN]
+                }, {
+                    type: Optional
+                }] }]; } });
+
 const storage = {
     localStores: [],
     sessionStores: [],
@@ -1259,9 +1275,9 @@ class LocalStorageManagerService extends ComponentStore {
         }));
         timer$.subscribe();
     }
-    constructor(config) {
+    constructor(configOptions) {
         super(storage);
-        this.config = config;
+        this.configOptions = configOptions;
         this.storageName = 'storage';
         this.storageSettingsName = 'global-storage';
         this.defaultOptions = SettingOptions.adapt();
@@ -1313,7 +1329,7 @@ class LocalStorageManagerService extends ComponentStore {
         }));
         this.setStore = this.updater((state, store) => {
             const settings = StorageOption.adapt(store);
-            settings.options = this.objectMergerService.mergeOptions(settings.options || this.defaultOptions, this.defaultOptions);
+            settings.options = this.objectMergerService.mergeStorageOptions(settings.options);
             const type = store.options.storage;
             const hasStore = this.hasGlobalStorage(type, store.id);
             store.name = this.validStoreName(store.name);
@@ -1336,7 +1352,7 @@ class LocalStorageManagerService extends ComponentStore {
         });
         this.createStore = this.updater((state, store) => {
             const settings = StorageOption.adapt(store);
-            settings.options = this.objectMergerService.mergeOptions(settings.options || this.defaultOptions, this.defaultOptions);
+            settings.options = this.objectMergerService.mergeStorageOptions(settings.options);
             const foundStore = state?.settings.some(item => item.name === store.name);
             const expires = (settings.options?.expiresIn) ? this.utils.expires(settings.options?.expiresIn) : 0;
             if (settings.options)
@@ -1421,9 +1437,9 @@ class LocalStorageManagerService extends ComponentStore {
             }
             return typeof parsed === 'object' && parsed !== null;
         };
-        this.storageName = config.LocalStorageOptions?.storageName || this.storageName;
-        this.storageSettingsName = config.LocalStorageOptions?.storageSettingsName || this.storageSettingsName;
-        this.defaultOptions = config.LocalStorageOptions?.options || this.defaultOptions;
+        this.storageName = configOptions?.LocalStorageOptions?.storageName || this.storageName;
+        this.storageSettingsName = configOptions?.LocalStorageOptions?.storageSettingsName || this.storageSettingsName;
+        this.defaultOptions = configOptions?.LocalStorageOptions?.options || this.defaultOptions;
         this.retrieveState();
         this.startTimer();
     }
@@ -1511,27 +1527,19 @@ class LocalStorageManagerService extends ComponentStore {
     ngOnDestroy() {
         this.persistence$.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalStorageManagerService, deps: [{ token: CONFIG_SETTINGS_TOKEN }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalStorageManagerService, deps: [{ token: CONFIG_SETTINGS_TOKEN, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalStorageManagerService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalStorageManagerService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return [{ type: ConfigOptions, decorators: [{
+                    type: Optional
+                }, {
                     type: Inject,
                     args: [CONFIG_SETTINGS_TOKEN]
                 }] }]; } });
 
-class RequestOptions {
-    constructor(path = [], headers = {}) {
-        this.path = path;
-        this.headers = headers;
-    }
-    static adapt(item) {
-        return new RequestOptions(item?.path, item?.headers);
-    }
-}
-
 const API_OPTS = new InjectionToken('API_OPTS');
 const defaultState = {
     data: [],
@@ -1701,6 +1709,7 @@ class HTTPManagerStateService extends ComponentStore {
         })));
         this.fetchStream = (options) => this.effect(() => of(options).pipe(tap(() => this.httpManagerService.isPending.next(true)), switchMap((options) => {
             const requestOptions = this.updateRequestOptions(options?.headers);
+            requestOptions.stream = true;
             return this.httpManagerService.getRequest(requestOptions, options?.path)
                 .pipe(tap((res) => {
                 if (res.length > 0)
@@ -1904,17 +1913,21 @@ class ClientInfo {
         this.name = name;
     }
     static adapt(item) {
-        return new ClientInfo(item?.domain, item?.service, item?.id, item?.name);
+        return new ClientInfo(item?.domain, item?.service, item?.id, (item?.first_name || item?.last_name) ? `${item?.first_name} ${item?.last_name}` : '');
     }
 }
 
 class ClientInfoMapper {
-    constructor(id = 0, name = '') {
+    constructor(id = 0, first_name = '', last_name = '', email = '') {
         this.id = id;
-        this.name = name;
+        this.first_name = first_name;
+        this.last_name = last_name;
+        this.email = email;
     }
     static adapt(item) {
-        return new ClientInfoMapper(item?.id, item?.name);
+        const first_name = (item?.name) ? item.name.split(' ')[0] : '';
+        const last_name = (item?.name) ? item.name.split(' ')[1] : '';
+        return new ClientInfoMapper(item?.id, first_name, last_name, item?.email);
     }
 }
 
@@ -1938,7 +1951,7 @@ class DownloadLabels {
     }
 }
 
-class DownloaderActionComponent {
+class DownloadFileComponent {
     constructor() {
         this.subscriptions = new Subscription();
         this.displayError = 3; // seconds
@@ -1962,6 +1975,7 @@ class DownloaderActionComponent {
         this._hasError = !!value;
         if (this._hasError && !this.errorTimerActive) {
             this.errorTimerActive = true;
+            this.active = false;
             this.error.emit();
             this.subscriptions.add(timer(this.displayError * 1000)
                 .subscribe((err) => {
@@ -1982,12 +1996,12 @@ class DownloaderActionComponent {
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DownloaderActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DownloaderActionComponent, selector: "app-downloader-action", inputs: { event: "event", displayError: "displayError", diameter: "diameter", mode: "mode", isPending: "isPending", active: "active", disabled: "disabled", progress: "progress", hasError: "hasError" }, outputs: { error: "error" }, ngImport: i0, template: "<ng-container *ngIf=\"!isPending; else DOWNLOADING\">\n  <ng-container *ngIf=\"hasError; else NORMAL\">\n    <div class=\"width center-txt\" style=\"margin-bottom: 4px;\">\n      <mat-icon color=\"warn\" class=\"warn-icon\">warning</mat-icon>\n    </div>\n  </ng-container>\n  <ng-template #NORMAL>\n    <ng-container *ngIf=\"active; else ACTION\">\n\n      <div class=\"container-obj\">\n        <div class=\"centered-obj-div\">\n          <mat-progress-spinner\n            color=\"primary\"\n            mode=\"indeterminate\"\n            [diameter]=\"44\"\n          ></mat-progress-spinner>\n        </div>\n      </div>\n\n  </ng-container>\n  <ng-template #ACTION>\n    <button data-tracking=\"export-btn\" mat-icon-button (click)=\"onAction()\" class=\"icon-button\" [disabled]=\"disabled\">\n      <mat-icon class=\"custom-icon\">file_download</mat-icon>\n    </button>\n  </ng-template>\n  </ng-template>\n</ng-container>\n\n<ng-template #DOWNLOADING>\n  <div\n    class=\"spinner-container\"\n    *ngIf=\"(progress > 0 && progress < 100); else INDETERMINATE\"\n  >\n    <div class=\"spinner-background\">\n      {{progress}}%\n    </div>\n    <mat-progress-spinner\n      color=\"primary\"\n      [mode]=\"mode\"\n      [value]=\"progress\"\n      [diameter]=\"44\"\n    ></mat-progress-spinner>\n  </div>\n  <ng-template #INDETERMINATE>\n    <div class=\"container-obj\">\n      <div class=\"centered-obj-div\">\n        <mat-progress-spinner\n          color=\"primary\"\n          mode=\"indeterminate\"\n          [diameter]=\"44\"\n        ></mat-progress-spinner>\n      </div>\n    </div>\n  </ng-template>\n\n</ng-template>\n\n\n\n\n", styles: [":not(spinner-container).spinner-container{position:relative}:not(spinner-container).spinner-container .spinner-background{position:absolute;width:44px;height:44px;font-size:12px;line-height:32px;text-align:center;overflow:hidden;border-radius:50%;border:solid 5px whitesmoke}.center-txt{align-content:center;text-align:-webkit-center}.width{width:48px;height:48px}.icon-button{display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0}.container-obj{display:flex;justify-content:center;align-items:center;width:48px;height:48px}.centered-obj-div{text-align:center}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DownloadFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DownloadFileComponent, selector: "app-download-file", inputs: { event: "event", displayError: "displayError", diameter: "diameter", mode: "mode", isPending: "isPending", active: "active", disabled: "disabled", progress: "progress", hasError: "hasError" }, outputs: { error: "error" }, ngImport: i0, template: "<ng-container *ngIf=\"!isPending; else DOWNLOADING\">\n  <ng-container *ngIf=\"hasError; else NORMAL\">\n    <div class=\"width center-txt\" style=\"margin-bottom: 4px;\">\n      <mat-icon color=\"warn\" class=\"warn-icon\">warning</mat-icon>\n    </div>\n  </ng-container>\n  <ng-template #NORMAL>\n    <ng-container *ngIf=\"active; else ACTION\">\n\n      <div class=\"container-obj\">\n        <div class=\"centered-obj-div\">\n          <mat-progress-spinner\n            color=\"primary\"\n            mode=\"indeterminate\"\n            [diameter]=\"44\"\n          ></mat-progress-spinner>\n        </div>\n      </div>\n\n  </ng-container>\n  <ng-template #ACTION>\n    <button data-tracking=\"export-btn\" mat-icon-button (click)=\"onAction()\" class=\"icon-button\" [disabled]=\"disabled\">\n      <mat-icon class=\"custom-icon\">file_download</mat-icon>\n    </button>\n  </ng-template>\n  </ng-template>\n</ng-container>\n\n<ng-template #DOWNLOADING>\n  <div\n    class=\"spinner-container\"\n    *ngIf=\"(progress > 0 && progress < 100); else INDETERMINATE\"\n  >\n    <div class=\"spinner-background\">\n      {{progress}}%\n    </div>\n    <mat-progress-spinner\n      color=\"primary\"\n      [mode]=\"mode\"\n      [value]=\"progress\"\n      [diameter]=\"44\"\n    ></mat-progress-spinner>\n  </div>\n  <ng-template #INDETERMINATE>\n    <div class=\"container-obj\">\n      <div class=\"centered-obj-div\">\n        <mat-progress-spinner\n          color=\"primary\"\n          mode=\"indeterminate\"\n          [diameter]=\"44\"\n        ></mat-progress-spinner>\n      </div>\n    </div>\n  </ng-template>\n\n</ng-template>\n\n\n\n", styles: [":not(spinner-container).spinner-container{position:relative}:not(spinner-container).spinner-container .spinner-background{position:absolute;width:44px;height:44px;font-size:12px;line-height:32px;text-align:center;overflow:hidden;border-radius:50%;border:solid 5px whitesmoke}.center-txt{align-content:center;text-align:-webkit-center}.width{width:48px;height:48px}.icon-button{display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0}.container-obj{display:flex;justify-content:center;align-items:center;width:48px;height:48px}.centered-obj-div{text-align:center}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DownloaderActionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DownloadFileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-downloader-action', encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"!isPending; else DOWNLOADING\">\n  <ng-container *ngIf=\"hasError; else NORMAL\">\n    <div class=\"width center-txt\" style=\"margin-bottom: 4px;\">\n      <mat-icon color=\"warn\" class=\"warn-icon\">warning</mat-icon>\n    </div>\n  </ng-container>\n  <ng-template #NORMAL>\n    <ng-container *ngIf=\"active; else ACTION\">\n\n      <div class=\"container-obj\">\n        <div class=\"centered-obj-div\">\n          <mat-progress-spinner\n            color=\"primary\"\n            mode=\"indeterminate\"\n            [diameter]=\"44\"\n          ></mat-progress-spinner>\n        </div>\n      </div>\n\n  </ng-container>\n  <ng-template #ACTION>\n    <button data-tracking=\"export-btn\" mat-icon-button (click)=\"onAction()\" class=\"icon-button\" [disabled]=\"disabled\">\n      <mat-icon class=\"custom-icon\">file_download</mat-icon>\n    </button>\n  </ng-template>\n  </ng-template>\n</ng-container>\n\n<ng-template #DOWNLOADING>\n  <div\n    class=\"spinner-container\"\n    *ngIf=\"(progress > 0 && progress < 100); else INDETERMINATE\"\n  >\n    <div class=\"spinner-background\">\n      {{progress}}%\n    </div>\n    <mat-progress-spinner\n      color=\"primary\"\n      [mode]=\"mode\"\n      [value]=\"progress\"\n      [diameter]=\"44\"\n    ></mat-progress-spinner>\n  </div>\n  <ng-template #INDETERMINATE>\n    <div class=\"container-obj\">\n      <div class=\"centered-obj-div\">\n        <mat-progress-spinner\n          color=\"primary\"\n          mode=\"indeterminate\"\n          [diameter]=\"44\"\n        ></mat-progress-spinner>\n      </div>\n    </div>\n  </ng-template>\n\n</ng-template>\n\n\n\n\n", styles: [":not(spinner-container).spinner-container{position:relative}:not(spinner-container).spinner-container .spinner-background{position:absolute;width:44px;height:44px;font-size:12px;line-height:32px;text-align:center;overflow:hidden;border-radius:50%;border:solid 5px whitesmoke}.center-txt{align-content:center;text-align:-webkit-center}.width{width:48px;height:48px}.icon-button{display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0}.container-obj{display:flex;justify-content:center;align-items:center;width:48px;height:48px}.centered-obj-div{text-align:center}\n"] }]
+            args: [{ selector: 'app-download-file', encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"!isPending; else DOWNLOADING\">\n  <ng-container *ngIf=\"hasError; else NORMAL\">\n    <div class=\"width center-txt\" style=\"margin-bottom: 4px;\">\n      <mat-icon color=\"warn\" class=\"warn-icon\">warning</mat-icon>\n    </div>\n  </ng-container>\n  <ng-template #NORMAL>\n    <ng-container *ngIf=\"active; else ACTION\">\n\n      <div class=\"container-obj\">\n        <div class=\"centered-obj-div\">\n          <mat-progress-spinner\n            color=\"primary\"\n            mode=\"indeterminate\"\n            [diameter]=\"44\"\n          ></mat-progress-spinner>\n        </div>\n      </div>\n\n  </ng-container>\n  <ng-template #ACTION>\n    <button data-tracking=\"export-btn\" mat-icon-button (click)=\"onAction()\" class=\"icon-button\" [disabled]=\"disabled\">\n      <mat-icon class=\"custom-icon\">file_download</mat-icon>\n    </button>\n  </ng-template>\n  </ng-template>\n</ng-container>\n\n<ng-template #DOWNLOADING>\n  <div\n    class=\"spinner-container\"\n    *ngIf=\"(progress > 0 && progress < 100); else INDETERMINATE\"\n  >\n    <div class=\"spinner-background\">\n      {{progress}}%\n    </div>\n    <mat-progress-spinner\n      color=\"primary\"\n      [mode]=\"mode\"\n      [value]=\"progress\"\n      [diameter]=\"44\"\n    ></mat-progress-spinner>\n  </div>\n  <ng-template #INDETERMINATE>\n    <div class=\"container-obj\">\n      <div class=\"centered-obj-div\">\n        <mat-progress-spinner\n          color=\"primary\"\n          mode=\"indeterminate\"\n          [diameter]=\"44\"\n        ></mat-progress-spinner>\n      </div>\n    </div>\n  </ng-template>\n\n</ng-template>\n\n\n\n", styles: [":not(spinner-container).spinner-container{position:relative}:not(spinner-container).spinner-container .spinner-background{position:absolute;width:44px;height:44px;font-size:12px;line-height:32px;text-align:center;overflow:hidden;border-radius:50%;border:solid 5px whitesmoke}.center-txt{align-content:center;text-align:-webkit-center}.width{width:48px;height:48px}.icon-button{display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0}.container-obj{display:flex;justify-content:center;align-items:center;width:48px;height:48px}.centered-obj-div{text-align:center}\n"] }]
         }], propDecorators: { event: [{
                 type: Input
             }], displayError: [{
@@ -2010,7 +2024,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
-class FileDownloadActionComponent extends HTTPManagerService {
+class FileDownloaderComponent extends HTTPManagerService {
     set labels(value) {
         this._labels = (value) ? DownloadLabels.adapt(value) : DownloadLabels.adapt();
     }
@@ -2024,28 +2038,30 @@ class FileDownloadActionComponent extends HTTPManagerService {
         this.displayErrorMessage = false;
         this._labels = DownloadLabels.adapt();
         this.active = false;
+        this.subscription = new Subscription();
         this.completed = new EventEmitter();
+        this.failed = new EventEmitter();
         this.disabled = false;
     }
     ngOnInit() {
-        this.error$.subscribe((err) => {
-            console.log('err', err);
-        });
     }
     onDownloadStreaming() {
         if (this.active)
             return;
         this.active = true;
-        return this.downloadRequest(this.apiRequest)
+        return this.downloadRequest(this.apiRequest, [])
             .pipe(distinctUntilChanged(), catchError((err) => {
             this.onError(err.message);
-            return err;
-        })).subscribe((res) => {
-            if (res === 100) {
-                this.active = false;
-                this.completed.emit();
-            }
-        });
+            this.active = false;
+            this.failed.emit(err);
+            return throwError(() => err);
+        }), finalize(() => {
+            if (!this.active)
+                return;
+            this.active = false;
+            this.completed.emit();
+        }))
+            .subscribe();
     }
     onError(message) {
         if (!message || !this.displayErrorMessage)
@@ -2059,22 +2075,29 @@ class FileDownloadActionComponent extends HTTPManagerService {
         this.active = false;
         this.toastMessage.toastMessage(display);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileDownloadActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FileDownloadActionComponent, selector: "app-file-downloader-action", inputs: { delayError: "delayError", apiRequest: "apiRequest", displayErrorMessage: "displayErrorMessage", labels: "labels", disabled: "disabled" }, outputs: { completed: "completed" }, usesInheritance: true, ngImport: i0, template: "<app-downloader-action\n  [disabled]=\"disabled\"\n  [displayError]=\"3\"\n  [event]=\"onDownloadStreaming.bind(this)\"\n  [isPending]=\"(isPending$ | async) || false\"\n  [progress]=\"(progress$ | async)\"\n  [hasError]=\"(error$ | async)\"\n  (error)=\"onError(labels.error)\"\n  [active]=\"active\"\n></app-downloader-action>\n", styles: [".snackBarInfo{background-color:#f44336;color:#fff}.mat-simple-snackbar>span{font-weight:700}.mat-simple-snackbar-action .mat-button .mat-button-wrapper{color:#fff}.cdk-overlay-pane>.mat-snack-bar-container{width:100%}.mat-snack-bar-container{max-width:100%!important;width:100%}\n"], dependencies: [{ kind: "component", type: DownloaderActionComponent, selector: "app-downloader-action", inputs: ["event", "displayError", "diameter", "mode", "isPending", "active", "disabled", "progress", "hasError"], outputs: ["error"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
+    OnDestroy() {
+        this.subscription.unsubscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileDownloaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FileDownloaderComponent, selector: "app-file-downloader", inputs: { delayError: "delayError", apiRequest: "apiRequest", displayErrorMessage: "displayErrorMessage", saveFileAs: "saveFileAs", labels: "labels", disabled: "disabled" }, outputs: { completed: "completed", failed: "failed" }, usesInheritance: true, ngImport: i0, template: "<app-download-file\n  [disabled]=\"disabled\"\n  [displayError]=\"3\"\n  [event]=\"onDownloadStreaming.bind(this)\"\n  [isPending]=\"(isPending$ | async) || false\"\n  [progress]=\"(progress$ | async)\"\n  [hasError]=\"(error$ | async)\"\n  (error)=\"onError(labels.error)\"\n  [active]=\"active\"\n></app-download-file>\n", styles: [".snackBarInfo{background-color:#f44336;color:#fff}.mat-simple-snackbar>span{font-weight:700}.mat-simple-snackbar-action .mat-button .mat-button-wrapper{color:#fff}.cdk-overlay-pane>.mat-snack-bar-container{width:100%}.mat-snack-bar-container{max-width:100%!important;width:100%}\n"], dependencies: [{ kind: "component", type: DownloadFileComponent, selector: "app-download-file", inputs: ["event", "displayError", "diameter", "mode", "isPending", "active", "disabled", "progress", "hasError"], outputs: ["error"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileDownloadActionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileDownloaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-file-downloader-action', encapsulation: ViewEncapsulation.None, template: "<app-downloader-action\n  [disabled]=\"disabled\"\n  [displayError]=\"3\"\n  [event]=\"onDownloadStreaming.bind(this)\"\n  [isPending]=\"(isPending$ | async) || false\"\n  [progress]=\"(progress$ | async)\"\n  [hasError]=\"(error$ | async)\"\n  (error)=\"onError(labels.error)\"\n  [active]=\"active\"\n></app-downloader-action>\n", styles: [".snackBarInfo{background-color:#f44336;color:#fff}.mat-simple-snackbar>span{font-weight:700}.mat-simple-snackbar-action .mat-button .mat-button-wrapper{color:#fff}.cdk-overlay-pane>.mat-snack-bar-container{width:100%}.mat-snack-bar-container{max-width:100%!important;width:100%}\n"] }]
+            args: [{ selector: 'app-file-downloader', encapsulation: ViewEncapsulation.None, template: "<app-download-file\n  [disabled]=\"disabled\"\n  [displayError]=\"3\"\n  [event]=\"onDownloadStreaming.bind(this)\"\n  [isPending]=\"(isPending$ | async) || false\"\n  [progress]=\"(progress$ | async)\"\n  [hasError]=\"(error$ | async)\"\n  (error)=\"onError(labels.error)\"\n  [active]=\"active\"\n></app-download-file>\n", styles: [".snackBarInfo{background-color:#f44336;color:#fff}.mat-simple-snackbar>span{font-weight:700}.mat-simple-snackbar-action .mat-button .mat-button-wrapper{color:#fff}.cdk-overlay-pane>.mat-snack-bar-container{width:100%}.mat-snack-bar-container{max-width:100%!important;width:100%}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { delayError: [{
                 type: Input
             }], apiRequest: [{
                 type: Input
             }], displayErrorMessage: [{
                 type: Input
+            }], saveFileAs: [{
+                type: Input
             }], labels: [{
                 type: Input
             }], completed: [{
                 type: Output
+            }], failed: [{
+                type: Output
             }], disabled: [{
                 type: Input
             }] } });
@@ -2112,9 +2135,13 @@ class RequestManagerDemoComponent {
         };
         this.questionControl = this.fb.control("", [Validators.required]);
         this.downloadRequest = ApiRequest.adapt({
-            server: 'http://localhost:4200/assets',
-            path: ['icons1.svg']
+            server: 'assets/images',
+            path: ['me.jpg'],
+            // saveAs: 'john.jpg' // Optional
         });
+        // downloadRequest = ApiRequest.adapt({
+        //   server: 'oidc/ai/file'
+        // })
         this.sampleClientData = {
             id: 0,
             name: "Old School Dates",
@@ -2126,17 +2153,20 @@ class RequestManagerDemoComponent {
             modified: 1693003138,
             icon: "",
             imageFile: "",
+            email: "wavecoders@gmail.com"
         };
         this.requestForm = this.fb.group({
-            path: this.fb.control(""),
+            path: this.fb.control("ai/"),
             headers: this.fb.array([]),
             adapter: [null],
+            mapper: [null],
             retry: this.fb.group({
                 times: [3],
                 delay: [3],
             }),
             polling: [3],
         });
+        this.AIType = 0;
         this.sampleAdaptors = [
             { label: "ClientInfo Basic", value: ClientInfo.adapt },
             { label: "AI Prompt", value: AIPrompt.adapt },
@@ -2145,6 +2175,14 @@ class RequestManagerDemoComponent {
             { label: "Mapper Basic", value: ClientInfoMapper.adapt },
             { label: "AI Prompt", value: AIPrompt.adapt },
         ];
+        this.hasId = (arr) => {
+            if (arr.length === 0)
+                return false;
+            return !isNaN(arr[arr.length - 1]);
+        };
+        this.props = (adapter) => {
+            return (adapter) ? adapter() : null;
+        };
         // server = `http://sample-endpoint/as/authorization.oauth2`
         this.arrayObjectsToObjects = (arr) => {
             return Array.isArray(arr) ? arr.reduce((obj, item) => Object.assign(obj, { [item.key]: item.value }), {}) : {};
@@ -2159,12 +2197,12 @@ class RequestManagerDemoComponent {
         //   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));
+        //       return throwError(() => new Error(error.error.message))
         //     })
         //   )
         // })
@@ -2190,20 +2228,18 @@ class RequestManagerDemoComponent {
         if (!this.failedState.checked) {
             requestParams.retry = { times: 0, delay: 0 };
         }
-        return ApiRequest.adapt({
-            ...requestParams,
-            // ...{ path: pathReq, server: this.server },
-            ...{ path: pathReq },
-        });
+        const apiOptions = ApiRequest.adapt(requestParams);
+        apiOptions.path = [];
+        return { apiOptions: apiOptions, path: pathReq };
     }
     onGetRequest() {
         if (!this.isValid)
             return;
         const reqParams = this.compileRequest();
-        this.requestParams.GET = reqParams;
+        this.requestParams.GET = reqParams.apiOptions;
         this.GET$ = EMPTY; //Cancels Previous
         this.GET_error$.next('');
-        this.GET$ = this.httpManagerService.getRequest(reqParams)
+        this.GET$ = this.httpManagerService.getRequest(reqParams.apiOptions, reqParams.path)
             .pipe(
         // tap((data) => console.log("API GET response", data)),
         catchError(error => {
@@ -2214,10 +2250,13 @@ class RequestManagerDemoComponent {
         if (!this.isValid)
             return;
         const reqParams = this.compileRequest();
-        this.requestParams.POST = reqParams;
+        this.requestParams.POST = reqParams.apiOptions;
         this.POST$ = EMPTY; //Cancels Previous
         this.POST_error$.next('');
-        this.POST$ = this.httpManagerService.postRequest(this.sampleClientData, reqParams)
+        console.log("POST", this.sampleClientData);
+        console.log("POST", reqParams.apiOptions);
+        console.log("POST", reqParams.path);
+        this.POST$ = this.httpManagerService.postRequest(this.sampleClientData, reqParams.apiOptions, reqParams.path)
             .pipe(
         // tap((data) => console.log("API POST response", data)),
         catchError(error => {
@@ -2228,11 +2267,15 @@ class RequestManagerDemoComponent {
         if (!this.isValid)
             return;
         const reqParams = this.compileRequest();
-        this.sampleClientData.id = reqParams.path[reqParams.path.length - 1];
-        this.requestParams.PUT = reqParams;
+        if (!this.hasId(reqParams.path)) {
+            console.log("Missing ID");
+            return;
+        }
+        this.sampleClientData.id = parseInt(reqParams.path[reqParams.path.length - 1]);
+        this.requestParams.PUT = reqParams.apiOptions;
         this.PUT$ = EMPTY; //Cancels Previous
         this.PUT_error$.next('');
-        this.PUT$ = this.httpManagerService.putRequest(this.sampleClientData, reqParams)
+        this.PUT$ = this.httpManagerService.putRequest(this.sampleClientData, reqParams.apiOptions, reqParams.path)
             .pipe(
         // tap((data) => console.log("API PUT response", data)),
         catchError(error => {
@@ -2243,10 +2286,16 @@ class RequestManagerDemoComponent {
         if (!this.isValid)
             return;
         const reqParams = this.compileRequest();
-        this.requestParams.DELETE = reqParams;
+        this.requestParams.DELETE = reqParams.apiOptions;
+        if (!this.hasId(reqParams.path)) {
+            console.log("Missing ID");
+            return;
+        }
+        this.sampleClientData.id = parseInt(reqParams.path[reqParams.path.length - 1]);
+        this.requestParams.DELETE = reqParams.apiOptions;
         this.DELETE$ = EMPTY; //Cancels Previous
         this.DELETE_error$.next('');
-        this.DELETE$ = this.httpManagerService.deleteRequest(reqParams)
+        this.DELETE$ = this.httpManagerService.deleteRequest(reqParams.apiOptions, reqParams.path)
             .pipe(
         // tap((data) => console.log("API DELETE response", data)),
         catchError(error => {
@@ -2257,29 +2306,38 @@ class RequestManagerDemoComponent {
         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;
+        let payload = {};
+        let apiPath = reqParams.path;
+        let apiOptions = reqParams.apiOptions;
+        let responseMapper = (items) => items.response;
+        if (this.AIType === 0) {
+            // API request
+            payload = { prompt: this.questionControl.value };
+        }
+        else {
+            // Local Ollama request
+            apiOptions.server = "api";
+            apiPath = ["generate"];
+            apiOptions.stream = true;
+            payload = {
+                model: "phi3:latest",
+                prompt: this.questionControl.value,
+                stream: true,
+            };
+            responseMapper = (items) => items.map((word) => word.response).flat().join('');
+        }
+        this.requestParams.STREAM = apiOptions;
         this.STREAM_AI$ = EMPTY;
         this.STREAM_AI_error$.next('');
-        this.STREAM_AI$ = this.httpManagerService.postRequest(payload, reqParams)
-            .pipe(map(items => items.map((word) => word.response).flat().join('')), tap(() => this.questionControl.reset()), catchError(error => {
-            return throwError(() => this.errorHandling(error, 'STREAM'));
-        }));
+        this.STREAM_AI$ = this.httpManagerService.postRequest(payload, apiOptions, apiPath).pipe(map(responseMapper), tap(() => this.questionControl.reset()), catchError(error => throwError(() => this.errorHandling(error, 'STREAM'))));
     }
     onStreamRequest() {
         if (!this.isValid)
             return;
         const reqParams = this.compileRequest();
-        reqParams.server = "oidc";
-        reqParams.stream = true;
-        this.STREAM$ = this.httpManagerService.getRequest(reqParams)
+        reqParams.apiOptions.stream = true;
+        this.requestParams.GET = reqParams.apiOptions;
+        this.STREAM$ = this.httpManagerService.getRequest(reqParams.apiOptions, reqParams.path)
             .pipe(
         // tap((data) => console.log("API STREAM response", data)),
         catchError(error => {
@@ -2318,12 +2376,15 @@ class RequestManagerDemoComponent {
         if (type === 'STREAM')
             this.STREAM_error$.next(err.message);
     }
+    onSelectAIType(type) {
+        this.AIType = type;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RequestManagerDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RequestManagerDemoComponent, selector: "app-request-manager-demo", viewQueries: [{ propertyName: "failedState", first: true, predicate: ["failedState"], descendants: true, static: true }, { propertyName: "pollingState", first: true, predicate: ["pollingState"], descendants: true, static: true }], ngImport: i0, template: "<div style=\"margin: 2rem;\">\n\n  <h2>\n    HTTP Request Manager\n  </h2>\n\n  <div [formGroup]=\"requestForm\" style=\"margin-top: 2rem;\">\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Adapter (Model)</mat-label>\n        <mat-select formControlName=\"adapter\">\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-action\n          [disabled]=\"disable.checked\"\n          [delayError]=\"3\"\n          [apiRequest]=\"downloadRequest\"\n          (completed)=\"onDownloadCompleted()\"\n          (failed)=\"onDownloadFailed($event)\"\n        ></app-file-downloader-action>\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: FileDownloadActionComponent, selector: "app-file-downloader-action", inputs: ["delayError", "apiRequest", "displayErrorMessage", "labels", "disabled"], outputs: ["completed"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RequestManagerDemoComponent, selector: "app-request-manager-demo", viewQueries: [{ propertyName: "failedState", first: true, predicate: ["failedState"], descendants: true, static: true }, { propertyName: "pollingState", first: true, predicate: ["pollingState"], descendants: true, static: true }], ngImport: i0, template: "<div style=\"margin: 2rem;\">\n\n  <h2>\n    HTTP Request Manager\n  </h2>\n\n  <div [formGroup]=\"requestForm\" style=\"margin-top: 2rem;\">\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Adapter (Model)</mat-label>\n        <mat-select formControlName=\"adapter\" #adapterSelect>\n          <mat-option>None</mat-option>\n          <mat-option *ngFor=\"let adapter of sampleAdaptors\" [value]=\"adapter.value\">\n            {{adapter.label}}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Mapper (Model)</mat-label>\n        <mat-select formControlName=\"mapper\" #mapperSelect>\n          <mat-option>None</mat-option>\n          <mat-option *ngFor=\"let mapper of sampleMappers\" [value]=\"mapper.value\">\n            {{mapper.label}}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <div style=\"display: flex; margin-bottom: 2rem;\" *ngIf=\"adapterSelect.value || mapperSelect.value\">\n      <div style=\"flex:1\" class=\"box\">\n        <h3>Adapter (Incoming)</h3>\n        <div *ngIf=\"adapterSelect.value; else NO_ADAPTER\">\n          {{ props(adapterSelect.value) | json }}\n        </div>\n        <ng-template #NO_ADAPTER>No Transformation</ng-template>\n      </div>\n      <div style=\"flex:1\" class=\"box\">\n        <h3>Mapper (Outgoing)</h3>\n        <div *ngIf=\"mapperSelect.value; else NO_MAPPER\">\n          {{ props(mapperSelect.value) | json }}\n        </div>\n        <ng-template #NO_MAPPER>No Transformation</ng-template>\n      </div>\n    </div>\n    <div>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>RestPath (/ delimited)</mat-label>\n        <input matInput placeholder=\"clients/list\" formControlName=\"path\">\n      </mat-form-field>\n    </div>\n    <div>\n      <div formArrayName=\"headers\">\n        <div *ngFor=\"let task of headers.controls; let i = index\" [formGroupName]=\"i\">\n          <div style=\"display: flex; gap: .5rem\">\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Key</mat-label>\n              <input matInput placeholder=\"authentication\" formControlName=\"key\">\n            </mat-form-field>\n            <mat-form-field appearance=\"outline\" style=\"flex:1\">\n              <mat-label>Value</mat-label>\n              <input matInput placeholder=\"sample\" formControlName=\"value\">\n            </mat-form-field>\n            <div style=\"margin-top: .5rem;\">\n              <button mat-icon-button (click)=\"removeHeader(i)\">\n                  <mat-icon>close</mat-icon>\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n      <button mat-stroked-button (click)=\"addHeader()\" class=\"btn\">Add Header</button>\n    </div>\n    <div style=\"margin-top: 2rem; display: flex; flex-direction:column; gap: 1rem;\">\n      <div>\n        <mat-slide-toggle #failedState>Retry on Failed</mat-slide-toggle>\n        <div *ngIf=\"failedState.checked\" style=\"display: flex; gap: .5rem; margin-top: 1rem;\" formGroupName=\"retry\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>#of Times</mat-label>\n            <input matInput placeholder=\"3\" formControlName=\"times\" value=\"3\">\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Delay Until Next</mat-label>\n            <input matInput placeholder=\"3\" formControlName=\"delay\" value=\"3\">\n          </mat-form-field>\n        </div>\n      </div>\n      <div>\n        <mat-slide-toggle #pollingState>Polling</mat-slide-toggle>\n        <div *ngIf=\"pollingState.checked\">\n          <mat-form-field appearance=\"outline\" style=\"margin-top: 1rem\">\n            <mat-label>#of Seconds</mat-label>\n            <input matInput placeholder=\"3\" formControlName=\"polling\" value=\"3\">\n          </mat-form-field>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div style=\"margin-bottom: 1rem; margin-top: 2rem;\">\n    <mat-progress-bar mode=\"indeterminate\"\n      *ngIf=\"(isPending$ | async)\"\n    ></mat-progress-bar>\n    <mat-progress-bar mode=\"determinate\"\n      *ngIf=\"pollingState.checked && !(isPending$ | async)\"\n      [value]=\"(this.countdown$ | async)\"\n    ></mat-progress-bar>\n  </div>\n\n  <div style=\"margin-top: 1rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">GET Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onGetRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(GET_error$ | async) as get_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ get_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\" *ngIf=\"(GET$ | async) as dataRecord\">\n      <!-- <div [innerHTML]=\"(GET$ | async) | jsonv\"></div> -->\n      {{ dataRecord | json }}\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">POST Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onCreateRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(POST_error$ | async) as post_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ post_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\" *ngIf=\"(POST$ | async) as dataRecord\">\n      <!-- <div [innerHTML]=\"(POST$ | async) | jsonv\"></div> -->\n      {{ dataRecord | json }}\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">PUT Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onUpdateRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(PUT_error$ | async) as put_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ put_error }}</mat-error>\n    </div>\n\n    <h3>Include Record ID in the RestPath</h3>\n\n    <div style=\"margin-top: 1rem;\" *ngIf=\"(PUT$ | async) as dataRecord\">\n      <!-- <div [innerHTML]=\"(PUT$ | async) | jsonv\"></div> -->\n       {{ dataRecord | json }}\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">DELETE Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onDeleteRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <h3>Include Record ID in the RestPath</h3>\n\n    <div *ngIf=\"(DELETE_error$ | async) as delete_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ delete_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\" *ngIf=\"(DELETE$ | async) as dataRecord\">\n      <!-- <div [innerHTML]=\"(DELETE$ | async) | jsonv\"></div> -->\n      {{ dataRecord | json }}\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">Streaming GET Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onStreamRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <!-- <div *ngIf=\"(STREAM_error$ | async) as stream_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ stream_error }}</mat-error>\n    </div> -->\n\n    <div style=\"margin-top: 1rem;\">\n      <div *ngIf=\"(STREAM$ | async) as data\" class=\"container\">\n        <table mat-table [dataSource]=\"data\">\n          <ng-container matColumnDef=\"id\">\n            <th mat-header-cell *matHeaderCellDef> ID </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.id}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"name\">\n            <th mat-header-cell *matHeaderCellDef> First Name </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.name}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"lastName\">\n            <th mat-header-cell *matHeaderCellDef> Last Name </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.lastName}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"age\">\n            <th mat-header-cell *matHeaderCellDef> Age </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.age}} </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n        </table>\n      </div>\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1; padding-top: .5rem;\">AI -<span *ngIf=\"AIType === 1\">STREAMING</span> POST Request</h2>\n      <div style=\"display: flex; gap: 1rem;\">\n        <button mat-raised-button [matMenuTriggerFor]=\"menu\" style=\"min-width: 120px;\">\n          <mat-icon>lan</mat-icon>\n            <span *ngIf=\"AIType === 0; else LOCAL\">Server</span>\n            <ng-template #LOCAL>\n              Local\n            </ng-template>\n        </button>\n        <mat-menu #menu=\"matMenu\">\n          <button mat-menu-item (click)=\"onSelectAIType(0)\">Server</button>\n          <button mat-menu-item (click)=\"onSelectAIType(1)\">Local</button>\n        </mat-menu>\n        <div>\n          <button mat-raised-button (click)=\"onStreamPostRequest()\" class=\"btn\">Ask Me</button>\n        </div>\n      </div>\n    </div>\n\n    <div style=\"display: flex;\">\n      <mat-form-field appearance=\"outline\" style=\"flex:1\">\n        <mat-label>Ask me a Question</mat-label>\n        <textarea matInput placeholder=\"Why is the sky blue?\" [formControl]=\"questionControl\"></textarea>\n      </mat-form-field>\n    </div>\n\n    <div *ngIf=\"(STREAM_AI_error$ | async) as stream_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ stream_error }}</mat-error>\n    </div>\n\n    <div *ngIf=\"AIType === 1; else ALTERNATIVE\" style=\"color: red;\">\n      You must have Ollama active and the 'phi3:latest' model to use this feature.\n    </div>\n    <ng-template #ALTERNATIVE>\n      <span style=\"color: gray;\">\n        Define the RestPath to the API endpoint that will handle the AI request.\n        Use: 'ai/chat' for server\n      </span>\n    </ng-template>\n\n    <div>\n      <div *ngIf=\"(STREAM_AI$ | async) as data\" style=\"margin-top: 1rem; font-size: 1.2rem; border-radius: 1rem; border: black 1px solid; padding: 2rem;\">\n        <p style=\"margin-bottom: .5rem; white-space:pre-wrap; line-height: 1.6rem;\">{{data}}</p>\n      </div>\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 1.5rem; margin-bottom: 1rem; line-height: 1.5rem;\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div>\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1; margin-bottom: 0; padding-top: .5rem; display: flex;\">\n        <div>\n          Download File\n        </div>\n        <div style=\"flex:1; margin-left: 1rem;\">\n          <mat-slide-toggle #disable>\n            <span *ngIf=\"disable.checked; else DISABLE\">\n              Enable\n            </span>\n            <ng-template #DISABLE>Disable</ng-template>\n          </mat-slide-toggle>\n        </div>\n      </h2>\n      <div>\n        <app-file-downloader\n          [disabled]=\"disable.checked\"\n          [delayError]=\"3\"\n          [apiRequest]=\"downloadRequest\"\n          (completed)=\"onDownloadCompleted()\"\n          (failed)=\"onDownloadFailed($event)\"\n        ></app-file-downloader>\n      </div>\n    </div>\n  </div>\n\n</div>\n", styles: [".btn{min-width:120px}.mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor;background-color:#f5f5f5}.container{height:400px;overflow:auto}.box{padding:10px;border:1px solid #ccc}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i10.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i11.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i12.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i13.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: FileDownloaderComponent, selector: "app-file-downloader", inputs: ["delayError", "apiRequest", "displayErrorMessage", "saveFileAs", "labels", "disabled"], outputs: ["completed", "failed"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RequestManagerDemoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-request-manager-demo', template: "<div style=\"margin: 2rem;\">\n\n  <h2>\n    HTTP Request Manager\n  </h2>\n\n  <div [formGroup]=\"requestForm\" style=\"margin-top: 2rem;\">\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Adapter (Model)</mat-label>\n        <mat-select formControlName=\"adapter\">\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-action\n          [disabled]=\"disable.checked\"\n          [delayError]=\"3\"\n          [apiRequest]=\"downloadRequest\"\n          (completed)=\"onDownloadCompleted()\"\n          (failed)=\"onDownloadFailed($event)\"\n        ></app-file-downloader-action>\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"] }]
+            args: [{ selector: 'app-request-manager-demo', template: "<div style=\"margin: 2rem;\">\n\n  <h2>\n    HTTP Request Manager\n  </h2>\n\n  <div [formGroup]=\"requestForm\" style=\"margin-top: 2rem;\">\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Adapter (Model)</mat-label>\n        <mat-select formControlName=\"adapter\" #adapterSelect>\n          <mat-option>None</mat-option>\n          <mat-option *ngFor=\"let adapter of sampleAdaptors\" [value]=\"adapter.value\">\n            {{adapter.label}}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Mapper (Model)</mat-label>\n        <mat-select formControlName=\"mapper\" #mapperSelect>\n          <mat-option>None</mat-option>\n          <mat-option *ngFor=\"let mapper of sampleMappers\" [value]=\"mapper.value\">\n            {{mapper.label}}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <div style=\"display: flex; margin-bottom: 2rem;\" *ngIf=\"adapterSelect.value || mapperSelect.value\">\n      <div style=\"flex:1\" class=\"box\">\n        <h3>Adapter (Incoming)</h3>\n        <div *ngIf=\"adapterSelect.value; else NO_ADAPTER\">\n          {{ props(adapterSelect.value) | json }}\n        </div>\n        <ng-template #NO_ADAPTER>No Transformation</ng-template>\n      </div>\n      <div style=\"flex:1\" class=\"box\">\n        <h3>Mapper (Outgoing)</h3>\n        <div *ngIf=\"mapperSelect.value; else NO_MAPPER\">\n          {{ props(mapperSelect.value) | json }}\n        </div>\n        <ng-template #NO_MAPPER>No Transformation</ng-template>\n      </div>\n    </div>\n    <div>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>RestPath (/ delimited)</mat-label>\n        <input matInput placeholder=\"clients/list\" formControlName=\"path\">\n      </mat-form-field>\n    </div>\n    <div>\n      <div formArrayName=\"headers\">\n        <div *ngFor=\"let task of headers.controls; let i = index\" [formGroupName]=\"i\">\n          <div style=\"display: flex; gap: .5rem\">\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Key</mat-label>\n              <input matInput placeholder=\"authentication\" formControlName=\"key\">\n            </mat-form-field>\n            <mat-form-field appearance=\"outline\" style=\"flex:1\">\n              <mat-label>Value</mat-label>\n              <input matInput placeholder=\"sample\" formControlName=\"value\">\n            </mat-form-field>\n            <div style=\"margin-top: .5rem;\">\n              <button mat-icon-button (click)=\"removeHeader(i)\">\n                  <mat-icon>close</mat-icon>\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n      <button mat-stroked-button (click)=\"addHeader()\" class=\"btn\">Add Header</button>\n    </div>\n    <div style=\"margin-top: 2rem; display: flex; flex-direction:column; gap: 1rem;\">\n      <div>\n        <mat-slide-toggle #failedState>Retry on Failed</mat-slide-toggle>\n        <div *ngIf=\"failedState.checked\" style=\"display: flex; gap: .5rem; margin-top: 1rem;\" formGroupName=\"retry\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>#of Times</mat-label>\n            <input matInput placeholder=\"3\" formControlName=\"times\" value=\"3\">\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Delay Until Next</mat-label>\n            <input matInput placeholder=\"3\" formControlName=\"delay\" value=\"3\">\n          </mat-form-field>\n        </div>\n      </div>\n      <div>\n        <mat-slide-toggle #pollingState>Polling</mat-slide-toggle>\n        <div *ngIf=\"pollingState.checked\">\n          <mat-form-field appearance=\"outline\" style=\"margin-top: 1rem\">\n            <mat-label>#of Seconds</mat-label>\n            <input matInput placeholder=\"3\" formControlName=\"polling\" value=\"3\">\n          </mat-form-field>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div style=\"margin-bottom: 1rem; margin-top: 2rem;\">\n    <mat-progress-bar mode=\"indeterminate\"\n      *ngIf=\"(isPending$ | async)\"\n    ></mat-progress-bar>\n    <mat-progress-bar mode=\"determinate\"\n      *ngIf=\"pollingState.checked && !(isPending$ | async)\"\n      [value]=\"(this.countdown$ | async)\"\n    ></mat-progress-bar>\n  </div>\n\n  <div style=\"margin-top: 1rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">GET Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onGetRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(GET_error$ | async) as get_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ get_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\" *ngIf=\"(GET$ | async) as dataRecord\">\n      <!-- <div [innerHTML]=\"(GET$ | async) | jsonv\"></div> -->\n      {{ dataRecord | json }}\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">POST Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onCreateRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(POST_error$ | async) as post_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ post_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\" *ngIf=\"(POST$ | async) as dataRecord\">\n      <!-- <div [innerHTML]=\"(POST$ | async) | jsonv\"></div> -->\n      {{ dataRecord | json }}\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">PUT Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onUpdateRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(PUT_error$ | async) as put_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ put_error }}</mat-error>\n    </div>\n\n    <h3>Include Record ID in the RestPath</h3>\n\n    <div style=\"margin-top: 1rem;\" *ngIf=\"(PUT$ | async) as dataRecord\">\n      <!-- <div [innerHTML]=\"(PUT$ | async) | jsonv\"></div> -->\n       {{ dataRecord | json }}\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">DELETE Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onDeleteRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <h3>Include Record ID in the RestPath</h3>\n\n    <div *ngIf=\"(DELETE_error$ | async) as delete_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ delete_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\" *ngIf=\"(DELETE$ | async) as dataRecord\">\n      <!-- <div [innerHTML]=\"(DELETE$ | async) | jsonv\"></div> -->\n      {{ dataRecord | json }}\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">Streaming GET Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onStreamRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <!-- <div *ngIf=\"(STREAM_error$ | async) as stream_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ stream_error }}</mat-error>\n    </div> -->\n\n    <div style=\"margin-top: 1rem;\">\n      <div *ngIf=\"(STREAM$ | async) as data\" class=\"container\">\n        <table mat-table [dataSource]=\"data\">\n          <ng-container matColumnDef=\"id\">\n            <th mat-header-cell *matHeaderCellDef> ID </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.id}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"name\">\n            <th mat-header-cell *matHeaderCellDef> First Name </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.name}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"lastName\">\n            <th mat-header-cell *matHeaderCellDef> Last Name </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.lastName}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"age\">\n            <th mat-header-cell *matHeaderCellDef> Age </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.age}} </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n        </table>\n      </div>\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1; padding-top: .5rem;\">AI -<span *ngIf=\"AIType === 1\">STREAMING</span> POST Request</h2>\n      <div style=\"display: flex; gap: 1rem;\">\n        <button mat-raised-button [matMenuTriggerFor]=\"menu\" style=\"min-width: 120px;\">\n          <mat-icon>lan</mat-icon>\n            <span *ngIf=\"AIType === 0; else LOCAL\">Server</span>\n            <ng-template #LOCAL>\n              Local\n            </ng-template>\n        </button>\n        <mat-menu #menu=\"matMenu\">\n          <button mat-menu-item (click)=\"onSelectAIType(0)\">Server</button>\n          <button mat-menu-item (click)=\"onSelectAIType(1)\">Local</button>\n        </mat-menu>\n        <div>\n          <button mat-raised-button (click)=\"onStreamPostRequest()\" class=\"btn\">Ask Me</button>\n        </div>\n      </div>\n    </div>\n\n    <div style=\"display: flex;\">\n      <mat-form-field appearance=\"outline\" style=\"flex:1\">\n        <mat-label>Ask me a Question</mat-label>\n        <textarea matInput placeholder=\"Why is the sky blue?\" [formControl]=\"questionControl\"></textarea>\n      </mat-form-field>\n    </div>\n\n    <div *ngIf=\"(STREAM_AI_error$ | async) as stream_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ stream_error }}</mat-error>\n    </div>\n\n    <div *ngIf=\"AIType === 1; else ALTERNATIVE\" style=\"color: red;\">\n      You must have Ollama active and the 'phi3:latest' model to use this feature.\n    </div>\n    <ng-template #ALTERNATIVE>\n      <span style=\"color: gray;\">\n        Define the RestPath to the API endpoint that will handle the AI request.\n        Use: 'ai/chat' for server\n      </span>\n    </ng-template>\n\n    <div>\n      <div *ngIf=\"(STREAM_AI$ | async) as data\" style=\"margin-top: 1rem; font-size: 1.2rem; border-radius: 1rem; border: black 1px solid; padding: 2rem;\">\n        <p style=\"margin-bottom: .5rem; white-space:pre-wrap; line-height: 1.6rem;\">{{data}}</p>\n      </div>\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 1.5rem; margin-bottom: 1rem; line-height: 1.5rem;\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div>\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1; margin-bottom: 0; padding-top: .5rem; display: flex;\">\n        <div>\n          Download File\n        </div>\n        <div style=\"flex:1; margin-left: 1rem;\">\n          <mat-slide-toggle #disable>\n            <span *ngIf=\"disable.checked; else DISABLE\">\n              Enable\n            </span>\n            <ng-template #DISABLE>Disable</ng-template>\n          </mat-slide-toggle>\n        </div>\n      </h2>\n      <div>\n        <app-file-downloader\n          [disabled]=\"disable.checked\"\n          [delayError]=\"3\"\n          [apiRequest]=\"downloadRequest\"\n          (completed)=\"onDownloadCompleted()\"\n          (failed)=\"onDownloadFailed($event)\"\n        ></app-file-downloader>\n      </div>\n    </div>\n  </div>\n\n</div>\n", styles: [".btn{min-width:120px}.mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor;background-color:#f5f5f5}.container{height:400px;overflow:auto}.box{padding:10px;border:1px solid #ccc}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { failedState: [{
                 type: ViewChild,
                 args: ["failedState", { static: true }]
@@ -2383,14 +2444,6 @@ class StateManagerDemoService extends HTTPManagerStateService {
         // const sampleOptions = RequestOptions.adapt({ path: [1], headers })
         this.fetchStream();
     }
-    streamAIRequest(data) {
-        const headers = {
-            auth: "sample-auth-token"
-        };
-        const sampleOptions = RequestOptions.adapt({ path: [data.id] });
-        this.createStream(data, sampleOptions);
-        // this.fetchStream(sampleOptions)
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StateManagerDemoService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StateManagerDemoService, providedIn: 'root' }); }
 }
@@ -2422,7 +2475,7 @@ class RequestManagerStateDemoComponent {
         }
     }
     get hasChanged() {
-        return this.requestForm.dirty;
+        return this.requestForm.dirty || this.requestForm.untouched;
     }
     get dataType() {
         return this.requestForm.get("datatype")?.value;
@@ -2453,17 +2506,20 @@ class RequestManagerStateDemoComponent {
         this.PUT_error$ = new BehaviorSubject('');
         this.DELETE_error$ = new BehaviorSubject('');
         this.STREAM_error$ = new BehaviorSubject('');
+        this.STREAM_AI_error$ = new BehaviorSubject('');
         this.GET$ = new BehaviorSubject(null);
         this.POST$ = new BehaviorSubject(null);
         this.PUT$ = new BehaviorSubject(null);
         this.DELETE$ = new BehaviorSubject(null);
         this.STREAM = new BehaviorSubject(null);
         this.STREAM$ = this.STREAM.asObservable();
-        this.STREAM_AI = new BehaviorSubject(null);
+        this.STREAM_AI = new BehaviorSubject([]);
         this.STREAM_AI$ = this.STREAM_AI.asObservable()
-            .pipe(map((items) => (items) ? items.map((item) => item.response) : []), map((items) => items.join('').trim()));
+            .pipe(map$1((items) => (items) ? items.map((item) => item.response) : []), map$1((items) => items.join('\n').trim()));
         this.questionControl = this.fb.control("", [Validators.required]);
         this.requestType = '';
+        this.prompts = [];
+        this.AIType = 0;
         this.sampleClientData = {
             id: 0,
             name: "Old School Dates",
@@ -2479,7 +2535,7 @@ class RequestManagerStateDemoComponent {
         this.selectedRecord = this.fb.control(null);
         this.requestForm = this.fb.group({
             datatype: this.fb.control('ARRAY'),
-            path: this.fb.control(""),
+            path: this.fb.control("ai/"),
             headers: this.fb.array([]),
             adapter: [null],
             mapper: [null],
@@ -2505,14 +2561,24 @@ class RequestManagerStateDemoComponent {
         this.arrayObjectsToObjects = (arr) => {
             return Array.isArray(arr) ? arr.reduce((obj, item) => Object.assign(obj, { [item.key]: item.value }), {}) : {};
         };
+        this.props = (adapter) => {
+            return (adapter) ? adapter() : null;
+        };
     }
     ngOnInit() {
+        this.stateManagerDemoService.data$.pipe(tap$1((data) => console.log("API STREAM_AI response", data)));
+        this.error$.pipe(tap$1((data) => {
+            debugger;
+            console.log("API STREAM response", data);
+        }), catchError$1(error => {
+            return throwError(() => this.errorHandling(error, 'STREAM'));
+        }));
         this.selectedRecord.valueChanges
             .subscribe((data) => {
             this.selectedRecord$ = (data) ? this.stateManagerDemoService.selectRecord$(data.id) : EMPTY;
         });
         this.stateManagerDemoService.data$
-            .pipe(tap((data) => {
+            .pipe(tap$1((data) => {
             switch (this.requestType) {
                 case 'GET':
                     this.GET$.next(data);
@@ -2550,17 +2616,16 @@ class RequestManagerStateDemoComponent {
     compileRequest() {
         const requestParams = this.requestForm.value;
         requestParams.headers = this.arrayObjectsToObjects(requestParams.headers || []);
-        const pathReq = (requestParams.path || "").split("/");
+        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 },
-        });
+        const currentOptions = ApiRequest.adapt(requestParams);
+        currentOptions.path = [];
+        const apiOptions = ApiRequest.adapt({ ...currentOptions, path: pathReq });
+        return { apiOptions: apiOptions, path: pathReq };
     }
     onSetStateOptions() {
         if (!this.isValid)
@@ -2568,7 +2633,7 @@ class RequestManagerStateDemoComponent {
         const reqParams = this.compileRequest();
         const db = DatabaseStorage.adapt(this.database);
         const type = this.dataType === "ARRAY" ? DataType.ARRAY : DataType.OBJECT;
-        this.stateManagerDemoService.setAPIOptions(reqParams, type, db);
+        this.stateManagerDemoService.setAPIOptions(reqParams.apiOptions, type, db);
         this.requestForm.markAsPristine();
     }
     onClearRecords() {
@@ -2593,33 +2658,16 @@ class RequestManagerStateDemoComponent {
         this.requestType = 'DELETE';
         this.stateManagerDemoService.deleteClient(this.sampleClientData);
     }
-    onStreamPostRequest() {
-        if (!this.isValid)
-            return;
-        this.requestType = 'STREAM_AI';
-        const reqParams = this.compileRequest();
-        reqParams.server = "http://localhost:11434/api";
-        reqParams.path = ["generate"];
-        reqParams.stream = true;
-        this.stateManagerDemoService.setAPIOptions(reqParams, DataType.ARRAY);
-        const payload = {
-            model: "mistral",
-            prompt: this.questionControl.value,
-            stream: reqParams.stream
-        };
-        this.stateManagerDemoService.streamAIRequest(payload);
-    }
     onStreamRequest() {
         if (!this.isValid)
             return;
-        this.requestType = 'STREAM';
         const reqParams = this.compileRequest();
-        reqParams.server = "oidc";
-        reqParams.stream = true;
-        this.stateManagerDemoService.setAPIOptions(reqParams, DataType.ARRAY);
+        reqParams.apiOptions.stream = true;
+        this.requestType = 'STREAM';
         this.stateManagerDemoService.streamRequest();
     }
     errorHandling(err, type) {
+        console.log(err, type);
         if (type === 'GET')
             this.GET_error$.next(err.message);
         if (type === 'POST')
@@ -2630,13 +2678,21 @@ class RequestManagerStateDemoComponent {
             this.DELETE_error$.next(err.message);
         if (type === 'STREAM')
             this.STREAM_error$.next(err.message);
+        if (type === 'STREAM_AI')
+            this.STREAM_AI_error$.next(err.message);
+    }
+    onSelectAIType(type) {
+        this.AIType = type;
+    }
+    onClearHistory() {
+        this.prompts = [];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RequestManagerStateDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RequestManagerStateDemoComponent, selector: "app-request-manager-state-demo", viewQueries: [{ propertyName: "failedState", first: true, predicate: ["failedState"], descendants: true, static: true }, { propertyName: "pollingState", first: true, predicate: ["pollingState"], descendants: true, static: true }], ngImport: i0, template: "<div style=\"margin: 2rem;\">\n\n  <h2>\n    HTTP Request State Manager\n  </h2>\n\n  <div [formGroup]=\"requestForm\" style=\"margin-top: 2rem;\">\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>State Data Type</mat-label>\n        <mat-select formControlName=\"datatype\">\n          <mat-option value=\"ARRAY\">Array</mat-option>\n          <mat-option value=\"OBJECT\">Object</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Adapter (Model)</mat-label>\n        <mat-select formControlName=\"adapter\">\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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RequestManagerStateDemoComponent, selector: "app-request-manager-state-demo", viewQueries: [{ propertyName: "failedState", first: true, predicate: ["failedState"], descendants: true, static: true }, { propertyName: "pollingState", first: true, predicate: ["pollingState"], descendants: true, static: true }], ngImport: i0, template: "<div style=\"margin: 2rem;\">\n\n  <h2>\n    HTTP Request State Manager\n  </h2>\n\n  <div [formGroup]=\"requestForm\" style=\"margin-top: 2rem;\">\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>State Data Type</mat-label>\n        <mat-select formControlName=\"datatype\">\n          <mat-option value=\"ARRAY\">Array</mat-option>\n          <mat-option value=\"OBJECT\">Object</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Adapter (Model)</mat-label>\n        <mat-select formControlName=\"adapter\" #adapterSelect>\n          <mat-option>None</mat-option>\n          <mat-option *ngFor=\"let adapter of sampleAdaptors\" [value]=\"adapter.value\">\n            {{adapter.label}}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Mapper (Model)</mat-label>\n        <mat-select formControlName=\"mapper\" #mapperSelect>\n          <mat-option>None</mat-option>\n          <mat-option *ngFor=\"let mapper of sampleMappers\" [value]=\"mapper.value\">\n            {{mapper.label}}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n\n    <div style=\"display: flex; margin-bottom: 2rem;\" *ngIf=\"adapterSelect.value || mapperSelect.value\">\n      <div style=\"flex:1\" class=\"box\">\n        <h3>Adapter (Incoming)</h3>\n        <div *ngIf=\"adapterSelect.value; else NO_ADAPTER\">\n          {{ props(adapterSelect.value) | json }}\n        </div>\n        <ng-template #NO_ADAPTER>No Transformation</ng-template>\n      </div>\n      <div style=\"flex:1\" class=\"box\">\n        <h3>Mapper (Outgoing)</h3>\n        <div *ngIf=\"mapperSelect.value; else NO_MAPPER\">\n          {{ props(mapperSelect.value) | json }}\n        </div>\n        <ng-template #NO_MAPPER>No Transformation</ng-template>\n      </div>\n    </div>\n\n    <div>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>RestPath (/ delimited)</mat-label>\n        <input matInput placeholder=\"clients/list\" formControlName=\"path\">\n      </mat-form-field>\n    </div>\n    <div>\n      <div formArrayName=\"headers\">\n        <div *ngFor=\"let task of headers.controls; let i = index\" [formGroupName]=\"i\">\n          <div style=\"display: flex; gap: .5rem\">\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Key</mat-label>\n              <input matInput placeholder=\"authentication\" formControlName=\"key\">\n            </mat-form-field>\n            <mat-form-field appearance=\"outline\" style=\"flex:1\">\n              <mat-label>Value</mat-label>\n              <input matInput placeholder=\"sample\" formControlName=\"value\">\n            </mat-form-field>\n            <div style=\"margin-top: .5rem;\">\n              <button mat-icon-button (click)=\"removeHeader(i)\">\n                  <mat-icon>close</mat-icon>\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n      <button mat-stroked-button (click)=\"addHeader()\">Add Header</button>\n    </div>\n    <div style=\"margin-top: 2rem; display: flex; flex-direction:column; gap: 1rem;\">\n      <div>\n        <mat-slide-toggle #failedState>Retry on Failed</mat-slide-toggle>\n        <div *ngIf=\"failedState.checked\" style=\"display: flex; gap: .5rem; margin-top: 1rem;\" formGroupName=\"retry\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>#of Times</mat-label>\n            <input matInput placeholder=\"3\" formControlName=\"times\" value=\"3\">\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Delay Until Next</mat-label>\n            <input matInput placeholder=\"3\" formControlName=\"delay\" value=\"3\">\n          </mat-form-field>\n        </div>\n      </div>\n      <div>\n        <mat-slide-toggle #pollingState>Polling</mat-slide-toggle>\n        <div *ngIf=\"pollingState.checked\">\n          <mat-form-field appearance=\"outline\" style=\"margin-top: 1rem\">\n            <mat-label>#of Seconds</mat-label>\n            <input matInput placeholder=\"3\" formControlName=\"polling\" value=\"3\">\n          </mat-form-field>\n        </div>\n      </div>\n      <div>\n        <mat-slide-toggle #DBState>Database Storage</mat-slide-toggle>\n        <div *ngIf=\"DBState.checked\" style=\"display: flex; gap: .5rem; margin-top: 1rem\" formGroupName=\"database\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Table Name</mat-label>\n            <input matInput placeholder=\"table\" formControlName=\"table\" value=\"\">\n          </mat-form-field>\n          <div>\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Expires In</mat-label>\n              <mat-select formControlName=\"expiresIn\">\n                <mat-option value=\"1m\">One Minute</mat-option>\n                <mat-option value=\"1h\">One Hour</mat-option>\n                <mat-option value=\"1d\">One Day</mat-option>\n              </mat-select>\n            </mat-form-field>\n          </div>\n        </div>\n      </div>\n      <div style=\"margin-top: 1rem; display: flex;\">\n        <span style=\"flex:1\"></span>\n        <button mat-stroked-button (click)=\"onSetStateOptions()\" [disabled]=\"!hasChanged\">\n          Set API Request Options\n        </button>\n      </div>\n      <div>\n        <mat-error *ngIf=\"(error$ | async) as error\">\n          {{ error }}\n        </mat-error>\n      </div>\n    </div>\n  </div>\n\n  <div style=\"margin-bottom: 1rem; margin-top: 2rem;\">\n    <mat-progress-bar mode=\"indeterminate\"\n      *ngIf=\"(isPending$ | async)\"\n    ></mat-progress-bar>\n    <div *ngIf=\"pollingState.checked\">\n      <mat-progress-bar mode=\"determinate\"\n      *ngIf=\"!(isPending$ | async) && (this.countdown$ | async) || -1 > 0\"\n      [value]=\"(this.countdown$ | async)\"\n      ></mat-progress-bar>\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\" *ngIf=\"(GET$ | async) as data\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1;\">CURRENT STATE ({{ dataType }})</h2>\n    </div>\n    <div *ngIf=\"data.length > 1\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Records</mat-label>\n        <mat-select [formControl]=\"selectedRecord\" [disabled]=\"data === null && data?.length === 0\">\n          <mat-option [value]=\"\">None</mat-option>\n          <mat-option *ngFor=\"let item of data\" [value]=\"item\">\n            {{item.name || (item.first_name) | titlecase}}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <div *ngIf=\"(dataObservable$ | async) as dataRecord\">\n      <div *ngIf=\"(selectedRecord$ | async) as record; else NO_RECORD\">\n        {{ record | json }}\n      </div>\n      <ng-template #NO_RECORD>No Record Selected from State</ng-template>\n\n    </div>\n    <div style=\"margin-top: 1rem;\">\n      <span *ngIf=\"data !== null && data?.length > 0; else NO_DATA\">\n        State contains a Total of {{ data.length }} Records\n      </span>\n      <ng-template #NO_DATA>No Records</ng-template>\n      <div style=\"display: flex; gap: .5rem; text-align: end; justify-content: flex-end;\">\n        <button class=\"btn\" mat-stroked-button (click)=\"onClearRecords()\">Clear</button>\n        <button class=\"btn\" mat-stroked-button (click)=\"onRefreshRecords()\" [disabled]=\"hasChanged\">Refresh</button>\n      </div>\n    </div>\n  </div>\n\n\n\n\n  <div style=\"margin-top: 1rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">GET Request ({{ dataType }})</h2>\n      <div>\n        <button mat-raised-button (click)=\"onGetRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(GET_error$ | async) as get_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ get_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(GET$ | async) | jsonv\"></div> -->\n      <div *ngIf=\"(GET$ | async) as getData\">{{ getData | json }}</div>\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">POST Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onCreateRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(POST_error$ | async) as post_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ post_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(POST$ | async) | jsonv\"></div> -->\n      <div *ngIf=\"(POST$ | async) as postData\">{{ postData | json }}</div>\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">PUT Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onUpdateRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(PUT_error$ | async) as put_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ put_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(PUT$ | async) | jsonv\"></div> -->\n      <div *ngIf=\"(PUT$ | async) as putData\">{{ putData | json }}</div>\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">DELETE Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onDeleteRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(DELETE_error$ | async) as delete_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ delete_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(DELETE$ | async) | jsonv\"></div> -->\n      <div *ngIf=\"(DELETE$ | async) as deleteData\">{{ deleteData | json }}</div>\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">Streaming GET Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onStreamRequest()\" class=\"btn\" [disabled]=\"hasChanged\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(STREAM_error$ | async) as stream_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ stream_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\">\n      <div *ngIf=\"(STREAM$ | async) as data\" class=\"container\">\n        <table mat-table [dataSource]=\"data\">\n          <ng-container matColumnDef=\"id\">\n            <th mat-header-cell *matHeaderCellDef> ID </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.id}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"name\">\n            <th mat-header-cell *matHeaderCellDef> First Name </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.name}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"lastName\">\n            <th mat-header-cell *matHeaderCellDef> Last Name </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.lastName}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"age\">\n            <th mat-header-cell *matHeaderCellDef> Age </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.age}} </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n        </table>\n      </div>\n    </div>\n\n  </div>\n\n</div>\n", styles: [".btn{min-width:120px}.mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor;background-color:#f5f5f5}.container{height:400px;overflow:auto}.box{padding:10px;border:1px solid #ccc}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i10.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i11.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i12.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i13.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }, { kind: "pipe", type: i1$1.TitleCasePipe, name: "titlecase" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RequestManagerStateDemoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-request-manager-state-demo', template: "<div style=\"margin: 2rem;\">\n\n  <h2>\n    HTTP Request State Manager\n  </h2>\n\n  <div [formGroup]=\"requestForm\" style=\"margin-top: 2rem;\">\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>State Data Type</mat-label>\n        <mat-select formControlName=\"datatype\">\n          <mat-option value=\"ARRAY\">Array</mat-option>\n          <mat-option value=\"OBJECT\">Object</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Adapter (Model)</mat-label>\n        <mat-select formControlName=\"adapter\">\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-state-demo', template: "<div style=\"margin: 2rem;\">\n\n  <h2>\n    HTTP Request State Manager\n  </h2>\n\n  <div [formGroup]=\"requestForm\" style=\"margin-top: 2rem;\">\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>State Data Type</mat-label>\n        <mat-select formControlName=\"datatype\">\n          <mat-option value=\"ARRAY\">Array</mat-option>\n          <mat-option value=\"OBJECT\">Object</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Adapter (Model)</mat-label>\n        <mat-select formControlName=\"adapter\" #adapterSelect>\n          <mat-option>None</mat-option>\n          <mat-option *ngFor=\"let adapter of sampleAdaptors\" [value]=\"adapter.value\">\n            {{adapter.label}}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Mapper (Model)</mat-label>\n        <mat-select formControlName=\"mapper\" #mapperSelect>\n          <mat-option>None</mat-option>\n          <mat-option *ngFor=\"let mapper of sampleMappers\" [value]=\"mapper.value\">\n            {{mapper.label}}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n\n    <div style=\"display: flex; margin-bottom: 2rem;\" *ngIf=\"adapterSelect.value || mapperSelect.value\">\n      <div style=\"flex:1\" class=\"box\">\n        <h3>Adapter (Incoming)</h3>\n        <div *ngIf=\"adapterSelect.value; else NO_ADAPTER\">\n          {{ props(adapterSelect.value) | json }}\n        </div>\n        <ng-template #NO_ADAPTER>No Transformation</ng-template>\n      </div>\n      <div style=\"flex:1\" class=\"box\">\n        <h3>Mapper (Outgoing)</h3>\n        <div *ngIf=\"mapperSelect.value; else NO_MAPPER\">\n          {{ props(mapperSelect.value) | json }}\n        </div>\n        <ng-template #NO_MAPPER>No Transformation</ng-template>\n      </div>\n    </div>\n\n    <div>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>RestPath (/ delimited)</mat-label>\n        <input matInput placeholder=\"clients/list\" formControlName=\"path\">\n      </mat-form-field>\n    </div>\n    <div>\n      <div formArrayName=\"headers\">\n        <div *ngFor=\"let task of headers.controls; let i = index\" [formGroupName]=\"i\">\n          <div style=\"display: flex; gap: .5rem\">\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Key</mat-label>\n              <input matInput placeholder=\"authentication\" formControlName=\"key\">\n            </mat-form-field>\n            <mat-form-field appearance=\"outline\" style=\"flex:1\">\n              <mat-label>Value</mat-label>\n              <input matInput placeholder=\"sample\" formControlName=\"value\">\n            </mat-form-field>\n            <div style=\"margin-top: .5rem;\">\n              <button mat-icon-button (click)=\"removeHeader(i)\">\n                  <mat-icon>close</mat-icon>\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n      <button mat-stroked-button (click)=\"addHeader()\">Add Header</button>\n    </div>\n    <div style=\"margin-top: 2rem; display: flex; flex-direction:column; gap: 1rem;\">\n      <div>\n        <mat-slide-toggle #failedState>Retry on Failed</mat-slide-toggle>\n        <div *ngIf=\"failedState.checked\" style=\"display: flex; gap: .5rem; margin-top: 1rem;\" formGroupName=\"retry\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>#of Times</mat-label>\n            <input matInput placeholder=\"3\" formControlName=\"times\" value=\"3\">\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Delay Until Next</mat-label>\n            <input matInput placeholder=\"3\" formControlName=\"delay\" value=\"3\">\n          </mat-form-field>\n        </div>\n      </div>\n      <div>\n        <mat-slide-toggle #pollingState>Polling</mat-slide-toggle>\n        <div *ngIf=\"pollingState.checked\">\n          <mat-form-field appearance=\"outline\" style=\"margin-top: 1rem\">\n            <mat-label>#of Seconds</mat-label>\n            <input matInput placeholder=\"3\" formControlName=\"polling\" value=\"3\">\n          </mat-form-field>\n        </div>\n      </div>\n      <div>\n        <mat-slide-toggle #DBState>Database Storage</mat-slide-toggle>\n        <div *ngIf=\"DBState.checked\" style=\"display: flex; gap: .5rem; margin-top: 1rem\" formGroupName=\"database\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Table Name</mat-label>\n            <input matInput placeholder=\"table\" formControlName=\"table\" value=\"\">\n          </mat-form-field>\n          <div>\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Expires In</mat-label>\n              <mat-select formControlName=\"expiresIn\">\n                <mat-option value=\"1m\">One Minute</mat-option>\n                <mat-option value=\"1h\">One Hour</mat-option>\n                <mat-option value=\"1d\">One Day</mat-option>\n              </mat-select>\n            </mat-form-field>\n          </div>\n        </div>\n      </div>\n      <div style=\"margin-top: 1rem; display: flex;\">\n        <span style=\"flex:1\"></span>\n        <button mat-stroked-button (click)=\"onSetStateOptions()\" [disabled]=\"!hasChanged\">\n          Set API Request Options\n        </button>\n      </div>\n      <div>\n        <mat-error *ngIf=\"(error$ | async) as error\">\n          {{ error }}\n        </mat-error>\n      </div>\n    </div>\n  </div>\n\n  <div style=\"margin-bottom: 1rem; margin-top: 2rem;\">\n    <mat-progress-bar mode=\"indeterminate\"\n      *ngIf=\"(isPending$ | async)\"\n    ></mat-progress-bar>\n    <div *ngIf=\"pollingState.checked\">\n      <mat-progress-bar mode=\"determinate\"\n      *ngIf=\"!(isPending$ | async) && (this.countdown$ | async) || -1 > 0\"\n      [value]=\"(this.countdown$ | async)\"\n      ></mat-progress-bar>\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\" *ngIf=\"(GET$ | async) as data\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1;\">CURRENT STATE ({{ dataType }})</h2>\n    </div>\n    <div *ngIf=\"data.length > 1\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Records</mat-label>\n        <mat-select [formControl]=\"selectedRecord\" [disabled]=\"data === null && data?.length === 0\">\n          <mat-option [value]=\"\">None</mat-option>\n          <mat-option *ngFor=\"let item of data\" [value]=\"item\">\n            {{item.name || (item.first_name) | titlecase}}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <div *ngIf=\"(dataObservable$ | async) as dataRecord\">\n      <div *ngIf=\"(selectedRecord$ | async) as record; else NO_RECORD\">\n        {{ record | json }}\n      </div>\n      <ng-template #NO_RECORD>No Record Selected from State</ng-template>\n\n    </div>\n    <div style=\"margin-top: 1rem;\">\n      <span *ngIf=\"data !== null && data?.length > 0; else NO_DATA\">\n        State contains a Total of {{ data.length }} Records\n      </span>\n      <ng-template #NO_DATA>No Records</ng-template>\n      <div style=\"display: flex; gap: .5rem; text-align: end; justify-content: flex-end;\">\n        <button class=\"btn\" mat-stroked-button (click)=\"onClearRecords()\">Clear</button>\n        <button class=\"btn\" mat-stroked-button (click)=\"onRefreshRecords()\" [disabled]=\"hasChanged\">Refresh</button>\n      </div>\n    </div>\n  </div>\n\n\n\n\n  <div style=\"margin-top: 1rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">GET Request ({{ dataType }})</h2>\n      <div>\n        <button mat-raised-button (click)=\"onGetRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(GET_error$ | async) as get_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ get_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(GET$ | async) | jsonv\"></div> -->\n      <div *ngIf=\"(GET$ | async) as getData\">{{ getData | json }}</div>\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">POST Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onCreateRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(POST_error$ | async) as post_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ post_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(POST$ | async) | jsonv\"></div> -->\n      <div *ngIf=\"(POST$ | async) as postData\">{{ postData | json }}</div>\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">PUT Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onUpdateRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(PUT_error$ | async) as put_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ put_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(PUT$ | async) | jsonv\"></div> -->\n      <div *ngIf=\"(PUT$ | async) as putData\">{{ putData | json }}</div>\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">DELETE Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onDeleteRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(DELETE_error$ | async) as delete_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ delete_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(DELETE$ | async) | jsonv\"></div> -->\n      <div *ngIf=\"(DELETE$ | async) as deleteData\">{{ deleteData | json }}</div>\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">Streaming GET Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onStreamRequest()\" class=\"btn\" [disabled]=\"hasChanged\">Request</button>\n      </div>\n    </div>\n\n    <div *ngIf=\"(STREAM_error$ | async) as stream_error\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ stream_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\">\n      <div *ngIf=\"(STREAM$ | async) as data\" class=\"container\">\n        <table mat-table [dataSource]=\"data\">\n          <ng-container matColumnDef=\"id\">\n            <th mat-header-cell *matHeaderCellDef> ID </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.id}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"name\">\n            <th mat-header-cell *matHeaderCellDef> First Name </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.name}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"lastName\">\n            <th mat-header-cell *matHeaderCellDef> Last Name </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.lastName}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"age\">\n            <th mat-header-cell *matHeaderCellDef> Age </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.age}} </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n        </table>\n      </div>\n    </div>\n\n  </div>\n\n</div>\n", styles: [".btn{min-width:120px}.mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor;background-color:#f5f5f5}.container{height:400px;overflow:auto}.box{padding:10px;border:1px solid #ccc}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { failedState: [{
                 type: ViewChild,
                 args: ["failedState", { static: true }]
@@ -2750,7 +2806,6 @@ class LocalStorageDemoComponent {
         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
@@ -2766,7 +2821,6 @@ class LocalStorageDemoComponent {
         this.create = true;
     }
     onDelete(store) {
-        console.log('DELETED STORE:', store);
         this.localStorageManagerService.deleteStore({
             name: store.name,
         });
@@ -2788,7 +2842,7 @@ class LocalStorageDemoComponent {
         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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LocalStorageDemoComponent, selector: "app-local-storage-demo", ngImport: i0, template: "<div style=\"margin: 2rem;\">\n\n  <div style=\"display: flex; gap: 1rem\">\n    <h2 style=\"padding-top: .5rem; display: flex;\">\n      <div style=\"padding-top: .5rem;\">Local Storage Manager</div>\n      <div>\n        <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n          <mat-icon>info</mat-icon>\n        </button>\n      </div>\n    </h2>\n    <span style=\"flex:1\"></span>\n    <div style=\"padding-top: .25rem;\">\n      <mat-button-toggle-group name=\"storage\" [formControl]=\"typeControl\" (change)=\"onCancel()\">\n        <mat-button-toggle value=\"0\">Local Storage</mat-button-toggle>\n        <mat-button-toggle value=\"1\">Session Storage</mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n    <div style=\"margin-top: .25rem;\">\n      <button mat-icon-button (click)=\"onCreate()\">\n        <mat-icon>add</mat-icon>\n      </button>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"storeProps?.storageName || storeProps?.storageSettingsName\">\n    <div style=\"display: flex; gap: .5rem; flex-direction: column; border: gray solid thin; background-color: whitesmoke; padding: 1rem;\"\n    >\n      <div style=\"display: flex;\">\n        <div *ngIf=\"storeProps?.storageSettingsName\" style=\"flex:1\">\n          Database: <b>{{ storeProps?.storageSettingsName }}</b>\n        </div>\n        <div *ngIf=\"storeProps?.storageName\" style=\"flex:1\">\n          Data: <b>{{ storeProps?.storageName }}</b>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <div style=\"margin-top: 2rem;\" [formGroup]=\"newStoreForm\" *ngIf=\"create; else LIST\">\n\n    <h2>Create Store</h2>\n\n    <div style=\"display: flex; gap: 1rem;\">\n      <div style=\"flex:1\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Store Name</mat-label>\n          <input matInput placeholder=\"sample\" formControlName=\"name\">\n        </mat-form-field>\n      </div>\n      <div>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Expires In...</mat-label>\n          <mat-select formControlName=\"expiresIn\">\n            <mat-option value=\"0\">None</mat-option>\n            <mat-option value=\"30s\">30 Seconds</mat-option>\n            <mat-option value=\"1mn\">1 Minute</mat-option>\n            <mat-option value=\"1hr\">1 Hour</mat-option>\n            <mat-option value=\"1d\">1 Day</mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <div style=\"margin-top: 1rem;\">\n        <mat-slide-toggle formControlName=\"encrypted\">Encrypted</mat-slide-toggle>\n      </div>\n    </div>\n\n    <div style=\"display: flex;\">\n      <mat-form-field appearance=\"outline\" style=\"flex: 1;\">\n        <mat-label>Data (Must be an Object or Array of any)</mat-label>\n        <textarea matInput placeholder=\"[]\" formControlName=\"data\" #json></textarea>\n      </mat-form-field>\n    </div>\n    <mat-error *ngIf=\"!isValidJSON(json.value)\">Not Valid Data</mat-error>\n\n    <div style=\"display: flex;\">\n      <span style=\"flex:1\"></span>\n      <button mat-stroked-button (click)=\"onCreateStore()\" [disabled]=\"!(isValid && isValidJSON(json.value))\">\n        Save Store\n      </button>\n    </div>\n\n  </div>\n\n  <ng-template #LIST>\n\n    <div style=\"margin-top: 1rem;\">\n      <mat-divider></mat-divider>\n    </div>\n{{ settings$ | async | json }}\n    <div *ngIf=\"filterData(settings$ | async) as data\">\n      <ng-container *ngIf=\"data.length > 0; else NO_DATA\">\n        <table mat-table [dataSource]=\"data\">\n          <ng-container matColumnDef=\"name\">\n            <th mat-header-cell *matHeaderCellDef> Store </th>\n            <td mat-cell *matCellDef=\"let element\" style=\"font-weight: bold; text-transform: uppercase;\"> {{element.name}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"id\">\n            <th mat-header-cell *matHeaderCellDef> ID </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.id}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"encrypted\">\n            <th mat-header-cell *matHeaderCellDef style=\"text-align: center;\"> Encrypted </th>\n            <td mat-cell *matCellDef=\"let element\" style=\"text-align: center;\">\n              <ng-container *ngIf=\"element.options.encrypted; else NO\">YES</ng-container>\n              <ng-template #NO><span style=\"color:gray\">NO</span></ng-template>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"expires\">\n            <th mat-header-cell *matHeaderCellDef style=\"text-align: center;\"> Expires </th>\n            <td mat-cell *matCellDef=\"let element\" style=\"text-align: center;\">\n              <ng-container *ngIf=\"element.options.expires !== 0; else NO_DATA\">\n                {{expiresIn(element.options.expires)}}\n              </ng-container>\n              <ng-template #NO_DATA>\n                \u221E\n              </ng-template>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"option\">\n            <th mat-header-cell *matHeaderCellDef></th>\n            <td mat-cell *matCellDef=\"let element\" style=\"padding-right: 0;\">\n              <div style=\"display: flex;justify-content: flex-end;\">\n                <button mat-icon-button color=\"warn\" (click)=\"onDelete(element); $event.stopPropagation()\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </div>\n            </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" (click)=\"onSelectedRow(row)\"></tr>\n        </table>\n      </ng-container>\n\n      <ng-template #NO_DATA>\n        <h3 style=\"margin-top: 1rem;\">No Data</h3>\n      </ng-template>\n\n      <div *ngIf=\"(data$ | async) as data\" style=\"margin-top: 2rem;\">\n        <div style=\"margin-bottom: 1rem;\">\n          <mat-divider></mat-divider>\n        </div>\n\n        <h3>STORE: <span style=\"font-weight: bold;\">{{ store.name | uppercase }}</span></h3>\n        <h3>SETTINGS: {{ setting$(store.name) | async | json }}</h3>\n        <div style=\"display: flex;\">\n          <mat-form-field appearance=\"outline\" style=\"flex: 1;\">\n            <mat-label>Data (Must be an Object or Array of any)</mat-label>\n            <textarea matInput placeholder=\"[]\" #json [value]=\"data\"></textarea>\n          </mat-form-field>\n        </div>\n        <mat-error *ngIf=\"!isValidJSON(json.value)\">Not Valid Data</mat-error>\n\n        <div style=\"display: flex; gap: .5rem;\">\n          <span style=\"flex:1\"></span>\n          <button mat-stroked-button (click)=\"onCancel()\">Cancel</button>\n          <button mat-stroked-button (click)=\"onUpdate(store, json.value)\" [disabled]=\"!(isValidJSON(json.value))\">Update</button>\n        </div>\n      </div>\n    </div>\n\n  </ng-template>\n\n  <div style=\"margin-top: 1rem;\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 1rem;\">\n    <button mat-stroked-button (click)=\"onReset()\">Delete All Stores</button>\n  </div>\n\n</div>\n\n\n<mat-menu #menu=\"matMenu\">\n  <div style=\"padding: 1rem;\">\n    <p>Please note that the LocalStorage (encryption) and management of data is dependant on initializing the APP_ID</p>\n    <p>Must provide a value for <b>APP_ID</b> in AppModule->Providers</p>\n    <mat-divider></mat-divider>\n  <div style=\"font-size: smaller; margin-top: .5rem;\">\n    <p>Example: UUID (self.crypto.randomUUID() to generate)</p>\n    <div style=\"background-color: whitesmoke; padding: 1rem;\">\n      &#123;<br>\n        provide: APP_ID,<br>\n        useValue: \"056991ac-3537-43ab-b5b9-83edf6554eff\",<br>\n      &#125;\n    </div>\n  </div>\n  </div>\n</mat-menu>\n", styles: [".mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor}.demo-row-is-clicked{font-weight:700}.mat-mdc-menu-panel.mat-mdc-menu-panel{max-width:280px!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i10$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i10$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i11.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i12.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i13.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalStorageDemoComponent, decorators: [{
             type: Component,
@@ -2862,11 +2916,11 @@ class HttpRequestServicesDemoComponent {
         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: i11.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i5$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: RequestManagerStateDemoComponent, selector: "app-request-manager-state-demo" }, { kind: "component", type: RequestManagerDemoComponent, selector: "app-request-manager-demo" }, { kind: "component", type: LocalStorageDemoComponent, selector: "app-local-storage-demo" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: HttpRequestServicesDemoComponent, selector: "app-http-request-services-demo", ngImport: i0, template: "<mat-toolbar  style=\"display:flex\">\n  <div>Http Request Manager Services</div>\n  <div style=\"flex:1\"></div>\n  <button mat-stroked-button [matMenuTriggerFor]=\"menu\">Services</button>\n  <mat-menu #menu=\"matMenu\">\n    <ng-container *ngFor=\"let type of requestTypes; index as i\">\n      <div\n        *ngIf=\"type?.divider\"\n        style=\"margin-top: .5rem; margin-bottom: .5rem;\"\n      >\n        <mat-divider></mat-divider>\n      </div>\n      <button\n        mat-menu-item\n        (click)=\"onSelected(i)\"\n        [disabled]=\"type.disabled\"\n        >\n        {{ type.name }}\n      </button>\n    </ng-container>\n\n  </mat-menu>\n</mat-toolbar>\n\n<span [ngSwitch]=\"selectedService\">\n  <p *ngSwitchCase=\"'http_service'\">\n    <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n    <app-request-manager-demo></app-request-manager-demo>\n  </p>\n  <p *ngSwitchCase=\"'http_state_service'\">\n    <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n    <app-request-manager-state-demo></app-request-manager-state-demo>\n  </p>\n  <p *ngSwitchCase=\"'database_service'\">\n    <!-- <app-database-data-demo></app-database-data-demo> -->\n  </p>\n  <p *ngSwitchCase=\"'local_storage_service'\">\n    <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n    <app-local-storage-demo></app-local-storage-demo>\n  </p>\n  <p *ngSwitchDefault>\n    Other\n  </p>\n</span>\n\n<ng-template #HTTP_OPTIONS>\n  <ng-container *ngIf=\"injectionOptions?.httpRequestOptions\">\n    <div class=\"box\">\n      <h3 style=\"font-weight: bold;\">Injection Token Detected - HTTP Options</h3>\n      {{ injectionOptions?.httpRequestOptions| json }}\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #LOCAL_OPTIONS>\n  <ng-container class=\"box\" *ngIf=\"injectionOptions?.LocalStorageOptions\">\n    <div class=\"box\">\n      <h3 style=\"font-weight: bold;\">Injection Token Detected - LocalStorage Options</h3>\n      {{ injectionOptions?.LocalStorageOptions| json }}\n    </div>\n  </ng-container>\n</ng-template>\n\n\n", styles: [".box{padding:1rem;background-color:#f5f5f5;border:thin gray solid;margin-top:1rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i12.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i5$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: RequestManagerStateDemoComponent, selector: "app-request-manager-state-demo" }, { kind: "component", type: RequestManagerDemoComponent, selector: "app-request-manager-demo" }, { kind: "component", type: LocalStorageDemoComponent, selector: "app-local-storage-demo" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HttpRequestServicesDemoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-http-request-services-demo', template: "<mat-toolbar  style=\"display:flex\">\n  <div>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"] }]
+            args: [{ selector: 'app-http-request-services-demo', template: "<mat-toolbar  style=\"display:flex\">\n  <div>Http Request Manager Services</div>\n  <div style=\"flex:1\"></div>\n  <button mat-stroked-button [matMenuTriggerFor]=\"menu\">Services</button>\n  <mat-menu #menu=\"matMenu\">\n    <ng-container *ngFor=\"let type of requestTypes; index as i\">\n      <div\n        *ngIf=\"type?.divider\"\n        style=\"margin-top: .5rem; margin-bottom: .5rem;\"\n      >\n        <mat-divider></mat-divider>\n      </div>\n      <button\n        mat-menu-item\n        (click)=\"onSelected(i)\"\n        [disabled]=\"type.disabled\"\n        >\n        {{ type.name }}\n      </button>\n    </ng-container>\n\n  </mat-menu>\n</mat-toolbar>\n\n<span [ngSwitch]=\"selectedService\">\n  <p *ngSwitchCase=\"'http_service'\">\n    <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n    <app-request-manager-demo></app-request-manager-demo>\n  </p>\n  <p *ngSwitchCase=\"'http_state_service'\">\n    <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n    <app-request-manager-state-demo></app-request-manager-state-demo>\n  </p>\n  <p *ngSwitchCase=\"'database_service'\">\n    <!-- <app-database-data-demo></app-database-data-demo> -->\n  </p>\n  <p *ngSwitchCase=\"'local_storage_service'\">\n    <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n    <app-local-storage-demo></app-local-storage-demo>\n  </p>\n  <p *ngSwitchDefault>\n    Other\n  </p>\n</span>\n\n<ng-template #HTTP_OPTIONS>\n  <ng-container *ngIf=\"injectionOptions?.httpRequestOptions\">\n    <div class=\"box\">\n      <h3 style=\"font-weight: bold;\">Injection Token Detected - HTTP Options</h3>\n      {{ injectionOptions?.httpRequestOptions| json }}\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #LOCAL_OPTIONS>\n  <ng-container class=\"box\" *ngIf=\"injectionOptions?.LocalStorageOptions\">\n    <div class=\"box\">\n      <h3 style=\"font-weight: bold;\">Injection Token Detected - LocalStorage Options</h3>\n      {{ injectionOptions?.LocalStorageOptions| json }}\n    </div>\n  </ng-container>\n</ng-template>\n\n\n", styles: [".box{padding:1rem;background-color:#f5f5f5;border:thin gray solid;margin-top:1rem}\n"] }]
         }], ctorParameters: function () { return [{ type: ConfigOptions, decorators: [{
                     type: Inject,
                     args: [CONFIG_SETTINGS_TOKEN]
@@ -2898,20 +2952,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
-class FileDownloaderActionModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileDownloaderActionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: FileDownloaderActionModule, declarations: [SpinnerComponent,
-            DownloaderActionComponent,
-            FileDownloadActionComponent], imports: [CommonModule,
+class FileDownloaderModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileDownloaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: FileDownloaderModule, declarations: [SpinnerComponent,
+            DownloadFileComponent,
+            FileDownloaderComponent], imports: [CommonModule,
             MatIconModule,
             MatProgressSpinnerModule,
-            MatButtonModule], exports: [FileDownloadActionComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileDownloaderActionModule, imports: [CommonModule,
+            MatButtonModule], exports: [FileDownloaderComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileDownloaderModule, imports: [CommonModule,
             MatIconModule,
             MatProgressSpinnerModule,
             MatButtonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileDownloaderActionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileDownloaderModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -2922,11 +2976,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     ],
                     declarations: [
                         SpinnerComponent,
-                        DownloaderActionComponent,
-                        FileDownloadActionComponent,
+                        DownloadFileComponent,
+                        FileDownloaderComponent,
                     ],
                     exports: [
-                        FileDownloadActionComponent
+                        FileDownloaderComponent
                     ]
                 }]
         }] });
@@ -2966,7 +3020,7 @@ class HttpRequestManagerModule {
             MatInputModule,
             MatToolbarModule,
             MatSlideToggleModule, i1.TranslateModule, MatSidenavModule,
-            FileDownloaderActionModule], exports: [HttpRequestServicesDemoComponent] }); }
+            FileDownloaderModule], exports: [HttpRequestServicesDemoComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HttpRequestManagerModule, providers: [
             { provide: HTTP_INTERCEPTORS, useClass: WithCredentialsInterceptor, multi: true },
             { provide: HTTP_INTERCEPTORS, useClass: RequestHeadersInterceptor, multi: true },
@@ -2994,7 +3048,7 @@ class HttpRequestManagerModule {
             MatSlideToggleModule,
             TranslateModule.forRoot(),
             MatSidenavModule,
-            FileDownloaderActionModule] }); }
+            FileDownloaderModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HttpRequestManagerModule, decorators: [{
             type: NgModule,
@@ -3021,7 +3075,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         MatSlideToggleModule,
                         TranslateModule.forRoot(),
                         MatSidenavModule,
-                        FileDownloaderActionModule,
+                        FileDownloaderModule,
                     ],
                     declarations: [
                         HttpRequestServicesDemoComponent,