http-request-manager 18.4.5 → 18.4.8

package/fesm2022/http-request-manager.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, APP_ID, Inject, InjectionToken, Injector, Optional, signal, computed, effect, EventEmitter, Component, ViewEncapsulation, Input, Output, NgModule, ViewChild } from '@angular/core';
+import { inject, Injectable, APP_ID, Inject, InjectionToken, Injector, Optional, signal, computed, effect, EventEmitter, Input, Output, ViewEncapsulation, Component, NgModule, ViewChild } from '@angular/core';
 import { ComponentStore } from '@ngrx/component-store';
 import { map, catchError, filter, finalize, takeWhile, retry, startWith, tap, mergeMap, takeUntil, withLatestFrom, switchMap, delay, concatMap, take, scan, distinctUntilChanged } from 'rxjs/operators';
 import { HttpClient, HttpHeaders, HttpEventType, HttpHeaderResponse, HttpErrorResponse, HTTP_INTERCEPTORS } from '@angular/common/http';
@@ -11,41 +11,41 @@ import * as i1 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i2 from '@angular/forms';
+import * as i1$2 from '@angular/forms';
 import { FormBuilder, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import * as i3$1 from '@angular/material/button';
+import * as i2$1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i8$1 from '@angular/material/chips';
+import * as i2$2 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
-import * as i12 from '@angular/material/divider';
+import * as i11 from '@angular/material/divider';
 import { MatDividerModule } from '@angular/material/divider';
-import * as i4 from '@angular/material/form-field';
+import * as i3 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i8 from '@angular/material/icon';
+import * as i7 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i13 from '@angular/material/input';
+import * as i12 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i10$2 from '@angular/material/progress-bar';
+import * as i9 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
-import * as i5 from '@angular/material/select';
+import * as i4 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSidenavModule } from '@angular/material/sidenav';
-import * as i11 from '@angular/material/slide-toggle';
+import * as i10$1 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import * as i7 from '@angular/material/menu';
+import * as i6 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import * as i10$1 from '@angular/material/toolbar';
+import * as i3$1 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
-import * as i9 from '@angular/material/table';
+import * as i8 from '@angular/material/table';
 import { MatTableModule } from '@angular/material/table';
 import * as i10 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import * as i3 from '@angular/material/progress-spinner';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import * as i4$1 from '@angular/material/tabs';
+import * as i1$3 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
-import * as i6 from '@angular/material/core';
+import * as i2 from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import * as i5 from '@angular/material/core';
 import { DataSource } from '@angular/cdk/collections';
 
 var StorageType;
@@ -308,6 +308,17 @@ const RandomSignature = () => {
 const UUID = () => {
     return self.crypto.randomUUID();
 };
+/**
+ * Generate a UUID string (legacy format)
+ */
+const UUID_STR = () => {
+    const s4 = () => {
+        return Math.floor((1 + Random()) * 0x10000)
+            .toString(16)
+            .substring(1);
+    };
+    return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
+};
 
 // Must provide a value for APP_ID in AppModule->Providers
 // providers: [
@@ -765,12 +776,19 @@ class WebsocketService {
         this.connectionStatus$ = this.connectionStatus.asObservable();
         this.isSubscribed = false;
     }
-    sendSubscribe(channelName) {
+    getSessionId() {
+        return sessionStorage.getItem('WSID') ?? (() => {
+            const uuid = UUID_STR();
+            sessionStorage.setItem('WSID', uuid);
+            return uuid;
+        })();
+    }
+    sendSubscribe(channelName, user) {
         if (this.socket?.readyState === WebSocket.OPEN && !this.isSubscribed) {
             const message = {
                 type: 'subscribe',
                 subscribedChannel: channelName,
-                content: {}
+                content: user
             };
             this.socket.send(JSON.stringify(message));
             this.isSubscribed = true; // Set the flag immediately after sending
@@ -780,7 +798,7 @@ class WebsocketService {
             console.warn(`[CLIENT] Subscription prevented. Open: ${this.socket?.readyState === WebSocket.OPEN}, Subscribed: ${this.isSubscribed}`);
         }
     }
-    connect(url, jwtToken) {
+    connect(options, jwtToken) {
         if (this.socket) {
             if (this.socket.readyState === WebSocket.OPEN) {
                 console.log('WebSocket connection is already OPEN.');
@@ -797,12 +815,13 @@ class WebsocketService {
             }
         }
         this.isSubscribed = false;
-        const URL = (jwtToken) ? `${url}?token=${jwtToken}` : url;
+        const sessionId = this.getSessionId();
+        const URL = (jwtToken) ? `${options.wsServer}?token=${jwtToken}&sessionId=${sessionId}` : `${options.wsServer}?sessionId=${sessionId}`;
         this.socket = new WebSocket(URL);
-        this.socket.onopen = (data) => {
+        this.socket.onopen = () => {
             console.log(`📡 Connected to WebSocket`);
             this.connectionStatus.next(true);
-            this.sendSubscribe('WS-MY_DATA');
+            this.sendSubscribe(options.id, options.user);
         };
         this.socket.onmessage = (event) => {
             try {
@@ -984,6 +1003,9 @@ class RequestService extends WebsocketService {
     request(options) {
         return (source$) => {
             return source$.pipe(map(data => {
+                if (!data || (Array.isArray(data) && data.length === 0)) {
+                    return data;
+                }
                 if (options?.adapter) {
                     return Array.isArray(data)
                         ? data.map((item) => options.adapter(item))
@@ -1167,6 +1189,8 @@ class DatabaseStorage {
         this.expiresIn = expiresIn;
     }
     static adapt(item) {
+        if (!item?.table)
+            return;
         return new DatabaseStorage(item?.table, item?.expiresIn);
     }
 }
@@ -1803,17 +1827,17 @@ class RequestOptions {
 }
 
 class WSOptions {
-    constructor(id = '', wsServer = '', jwtToken = '', permissions, channels, userAdapter, retry) {
+    constructor(id = '', wsServer = '', jwtToken = '', permissions, channels, user, retry) {
         this.id = id;
         this.wsServer = wsServer;
         this.jwtToken = jwtToken;
         this.permissions = permissions;
         this.channels = channels;
-        this.userAdapter = userAdapter;
+        this.user = user;
         this.retry = retry;
     }
     static adapt(item) {
-        return new WSOptions(item?.id, item?.wsServer, item?.jwtToken, (item?.permissions) ? item.permissions.split(',').map((p) => p.trim()) : [], item?.channels, item?.userAdapter, item?.retry);
+        return new WSOptions(item?.id, item?.wsServer, item?.jwtToken, (item?.permissions) ? item.permissions.split(',').map((p) => p.trim()) : [], item?.channels, item?.user, item?.retry);
     }
 }
 
@@ -2853,6 +2877,8 @@ class HTTPManagerStateService extends ComponentStore {
         this.communicationMessages$ = this.communicationMessages.asObservable();
         this.latestCommunicationMessages = new BehaviorSubject(null);
         this.latestCommunicationMessages$ = this.latestCommunicationMessages.asObservable();
+        this.userAction = new BehaviorSubject(null);
+        this.userAction$ = this.userAction.asObservable();
         this.channels = [];
         this.channelList = [];
         this.messages = [];
@@ -2862,7 +2888,7 @@ class HTTPManagerStateService extends ComponentStore {
         this.initWS = this.effect((wsOptions$) => wsOptions$.pipe(tap((wsOptions) => {
             this.wsOptions = wsOptions;
             if (wsOptions?.wsServer)
-                this.httpManagerService.connect(wsOptions.wsServer, wsOptions.jwtToken);
+                this.httpManagerService.connect(wsOptions, wsOptions.jwtToken);
         }), switchMap((wsOptions) => merge(this.httpManagerService.connectionStatus$.pipe(tap((isConnected) => {
             this.wsConnection = isConnected;
             if (isConnected) {
@@ -2880,8 +2906,9 @@ class HTTPManagerStateService extends ComponentStore {
                 this.httpManagerService.disconnect();
             }
             if (message.type === 'success') {
-                const currentUser = this.apiOptions.ws?.userAdapter?.adapter?.(message.data) || message.data;
-                this.user.next(currentUser);
+                if (message.data.sessionId !== this.user.value?.sessionId) {
+                    this.user.next(message.data);
+                }
             }
             switch (message.type) {
                 case 'channelsList':
@@ -2895,26 +2922,27 @@ class HTTPManagerStateService extends ComponentStore {
                     }
                     break;
                 case 'stateMangerMessage':
-                    console.log('💬 Message:', message.content);
-                    this.fetchRecord(RequestOptions.adapt({ path: message.content.path }), message.content.method);
-                    break;
-                case 'channelMessage':
-                    console.log('💬 Message:', message.content);
-                    this.fetchRecord(RequestOptions.adapt({ path: message.content.path }), message.content.method);
-                    break;
-                case 'channelCommunication':
-                    console.log('💬 Message Communication:', message.content);
-                    this.appendMessages(message.content);
-                    break;
-                case 'channelAlerts':
-                    console.log('💬 Message Alerts:', message.content);
+                    ;
+                    if (message.data.sessionId !== this.user.value.sessionId) {
+                        console.log('💬 Message:', message.data);
+                        this.userAction.next(message.data);
+                        this.fetchRecord(RequestOptions.adapt({ path: message.data.content.path }), message.data.content.method);
+                    }
                     break;
+                // case 'channelMessage':
+                //   console.log('💬 Message:', message.data)
+                //   this.fetchRecord(RequestOptions.adapt({ path: message.content.path }), message.content.method)
+                //   break;
+                // case 'channelCommunication':
+                //   console.log('💬 Message Communication:', message.data)
+                //   this.appendMessages(message.data)
+                //   break;
+                // case 'channelAlerts':
+                //   console.log('💬 Message Alerts:', message.data)
+                //   break;
                 case 'usersInChannel':
-                    const data = message.data;
-                    const wsUsers = data.users.map((item) => this.apiOptions.ws?.userAdapter?.adapter?.(item) || item);
-                    const userList = wsUsers.filter((item) => item.username !== this.user.value[this.wsOptions.userAdapter?.id || 'id']);
-                    this.userList.next(userList);
-                    console.log('👥 Users:', userList);
+                    console.log('👥 Users:', message.data.users);
+                    this.userList.next(message.data.users);
                     break;
                 default:
                     if (message)
@@ -2927,7 +2955,7 @@ class HTTPManagerStateService extends ComponentStore {
                 console.warn('Database storage requires dataType to be ARRAY');
             if (!this.apiOptions.adapter)
                 console.warn('Database storage requires an adapter to define the data shape');
-            if (!this.database?.table)
+            if (this.database && this.database?.table === '')
                 console.warn('Database storage requires a table name');
         }), filter(() => this.dataType === DataType.ARRAY && !!this.apiOptions.adapter && !!this.database?.table), switchMap(() => {
             const sampleData = this.apiOptions.adapter?.({}) || {};
@@ -3342,14 +3370,15 @@ class HTTPManagerStateService extends ComponentStore {
         });
         return this.dbManagerService.createDatabaseTable(tableDef);
     }
+    // WEBSOCKET COMMUNICATION (STATE MANAGER)
     wsCommunication(method, path) {
         if (this.wsConnection && this.apiOptions.ws) {
             const wsServer = this.apiOptions.ws.id;
-            this.httpManagerService.sendMessageInChannel(wsServer, { method, path });
+            this.httpManagerService.sendMessageInChannel(wsServer, { method, path, user: this.apiOptions.ws.user });
         }
     }
     wsMessaging(message, channel) {
-        const user = this.wsOptions?.userAdapter?.adapter?.(this.user.value) || this.user.value;
+        const user = this.user.value || this.user.value;
         const messageInfo = ChannelMessage.adapt({ ...message, fromUser: user });
         if (this.wsConnection && this.apiOptions.ws) {
             const wsServer = (channel) ? channel : this.apiOptions.ws.id;
@@ -3664,11 +3693,11 @@ class DownloadFileComponent {
         this.subscriptions.unsubscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DownloadFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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]", exportAs: ["matButton"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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: "@if (!isPending) {\n  @if (hasError) {\n    <div class=\"width center-txt\" style=\"margin-bottom: 4px;\">\n      <mat-icon color=\"warn\" class=\"warn-icon\">warning</mat-icon>\n    </div>\n  } @else {\n    @if (active) {\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    } @else {\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    }\n  }\n} @else {\n  @if ((progress > 0 && progress < 100)) {\n    <div\n      class=\"spinner-container\"\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  } @else {\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}\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: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DownloadFileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-download-file', encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"!isPending; else DOWNLOADING\">\n  <ng-container *ngIf=\"hasError; else NORMAL\">\n    <div class=\"width center-txt\" style=\"margin-bottom: 4px;\">\n      <mat-icon color=\"warn\" class=\"warn-icon\">warning</mat-icon>\n    </div>\n  </ng-container>\n  <ng-template #NORMAL>\n    <ng-container *ngIf=\"active; else ACTION\">\n\n      <div class=\"container-obj\">\n        <div class=\"centered-obj-div\">\n          <mat-progress-spinner\n            color=\"primary\"\n            mode=\"indeterminate\"\n            [diameter]=\"44\"\n          ></mat-progress-spinner>\n        </div>\n      </div>\n\n  </ng-container>\n  <ng-template #ACTION>\n    <button data-tracking=\"export-btn\" mat-icon-button (click)=\"onAction()\" class=\"icon-button\" [disabled]=\"disabled\">\n      <mat-icon class=\"custom-icon\">file_download</mat-icon>\n    </button>\n  </ng-template>\n  </ng-template>\n</ng-container>\n\n<ng-template #DOWNLOADING>\n  <div\n    class=\"spinner-container\"\n    *ngIf=\"(progress > 0 && progress < 100); else INDETERMINATE\"\n  >\n    <div class=\"spinner-background\">\n      {{progress}}%\n    </div>\n    <mat-progress-spinner\n      color=\"primary\"\n      [mode]=\"mode\"\n      [value]=\"progress\"\n      [diameter]=\"44\"\n    ></mat-progress-spinner>\n  </div>\n  <ng-template #INDETERMINATE>\n    <div class=\"container-obj\">\n      <div class=\"centered-obj-div\">\n        <mat-progress-spinner\n          color=\"primary\"\n          mode=\"indeterminate\"\n          [diameter]=\"44\"\n        ></mat-progress-spinner>\n      </div>\n    </div>\n  </ng-template>\n\n</ng-template>\n\n\n\n", styles: [":not(spinner-container).spinner-container{position:relative}:not(spinner-container).spinner-container .spinner-background{position:absolute;width:44px;height:44px;font-size:12px;line-height:32px;text-align:center;overflow:hidden;border-radius:50%;border:solid 5px whitesmoke}.center-txt{align-content:center;text-align:-webkit-center}.width{width:48px;height:48px}.icon-button{display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0}.container-obj{display:flex;justify-content:center;align-items:center;width:48px;height:48px}.centered-obj-div{text-align:center}\n"] }]
+            args: [{ selector: 'app-download-file', encapsulation: ViewEncapsulation.None, standalone: false, template: "@if (!isPending) {\n  @if (hasError) {\n    <div class=\"width center-txt\" style=\"margin-bottom: 4px;\">\n      <mat-icon color=\"warn\" class=\"warn-icon\">warning</mat-icon>\n    </div>\n  } @else {\n    @if (active) {\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    } @else {\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    }\n  }\n} @else {\n  @if ((progress > 0 && progress < 100)) {\n    <div\n      class=\"spinner-container\"\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  } @else {\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}\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"] }]
         }], propDecorators: { event: [{
                 type: Input
             }], displayError: [{
@@ -3761,7 +3790,7 @@ class FileDownloaderComponent extends HTTPManagerService {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FileDownloaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-file-downloader', encapsulation: ViewEncapsulation.None, template: "<app-download-file\n  [disabled]=\"disabled\"\n  [displayError]=\"3\"\n  [event]=\"onDownloadStreaming.bind(this)\"\n  [isPending]=\"(isPending$ | async) || false\"\n  [progress]=\"(progress$ | async)\"\n  [hasError]=\"(error$ | async)\"\n  (error)=\"onError(labels.error)\"\n  [active]=\"active\"\n></app-download-file>\n", styles: [".snackBarInfo{background-color:#f44336;color:#fff}.mat-simple-snackbar>span{font-weight:700}.mat-simple-snackbar-action .mat-button .mat-button-wrapper{color:#fff}.cdk-overlay-pane>.mat-snack-bar-container{width:100%}.mat-snack-bar-container{max-width:100%!important;width:100%}\n"] }]
+            args: [{ selector: 'app-file-downloader', encapsulation: ViewEncapsulation.None, standalone: false, 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: () => [], propDecorators: { delayError: [{
                 type: Input
             }], apiRequest: [{
@@ -3787,11 +3816,11 @@ class SpinnerComponent {
     ngOnInit() {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SpinnerComponent, selector: "app-spinner", inputs: { color: "color", diameter: "diameter", display: "display", mode: "mode", strokeWidth: "strokeWidth", value: "value" }, ngImport: i0, template: "<div class=\"spinner-background\">{{display}}</div>\n<mat-progress-spinner\n    [color]=\"color\"\n    [diameter]=\"diameter\"\n    [mode]=\"mode || 'indeterminate'\"\n    [strokeWidth]=\"strokeWidth\"\n    [value]=\"value\">\n</mat-progress-spinner>\n", styles: [".example-h2{margin:24px 0}:not(spinner-container).spinner-container{position:relative}:not(spinner-container).spinner-container .spinner-background{position:absolute;width:80px;height:80px;line-height:80px;text-align:center;overflow:hidden;border-color:#673ab71f;border-radius:50%;border-style:solid;border-width:10px}\n"], dependencies: [{ kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SpinnerComponent, selector: "app-spinner", inputs: { color: "color", diameter: "diameter", display: "display", mode: "mode", strokeWidth: "strokeWidth", value: "value" }, ngImport: i0, template: "<div class=\"spinner-background\">{{display}}</div>\n<mat-progress-spinner\n    [color]=\"color\"\n    [diameter]=\"diameter\"\n    [mode]=\"mode || 'indeterminate'\"\n    [strokeWidth]=\"strokeWidth\"\n    [value]=\"value\">\n</mat-progress-spinner>\n", styles: [".example-h2{margin:24px 0}:not(spinner-container).spinner-container{position:relative}:not(spinner-container).spinner-container .spinner-background{position:absolute;width:80px;height:80px;line-height:80px;text-align:center;overflow:hidden;border-color:#673ab71f;border-radius:50%;border-style:solid;border-width:10px}\n"], dependencies: [{ kind: "component", type: i2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SpinnerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-spinner', template: "<div class=\"spinner-background\">{{display}}</div>\n<mat-progress-spinner\n    [color]=\"color\"\n    [diameter]=\"diameter\"\n    [mode]=\"mode || 'indeterminate'\"\n    [strokeWidth]=\"strokeWidth\"\n    [value]=\"value\">\n</mat-progress-spinner>\n", styles: [".example-h2{margin:24px 0}:not(spinner-container).spinner-container{position:relative}:not(spinner-container).spinner-container .spinner-background{position:absolute;width:80px;height:80px;line-height:80px;text-align:center;overflow:hidden;border-color:#673ab71f;border-radius:50%;border-style:solid;border-width:10px}\n"] }]
+            args: [{ selector: 'app-spinner', standalone: false, template: "<div class=\"spinner-background\">{{display}}</div>\n<mat-progress-spinner\n    [color]=\"color\"\n    [diameter]=\"diameter\"\n    [mode]=\"mode || 'indeterminate'\"\n    [strokeWidth]=\"strokeWidth\"\n    [value]=\"value\">\n</mat-progress-spinner>\n", styles: [".example-h2{margin:24px 0}:not(spinner-container).spinner-container{position:relative}:not(spinner-container).spinner-container .spinner-background{position:absolute;width:80px;height:80px;line-height:80px;text-align:center;overflow:hidden;border-color:#673ab71f;border-radius:50%;border-style:solid;border-width:10px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { color: [{
                 type: Input
             }], diameter: [{
@@ -3993,26 +4022,25 @@ class LocalStorageSignalsDemoComponent {
         this.localStorageManagerService.resetStore();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LocalStorageSignalsDemoComponent, deps: [{ token: CONFIG_SETTINGS_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: LocalStorageSignalsDemoComponent, selector: "app-local-storage-signals-demo", ngImport: i0, template: "<div style=\"margin: 2rem;\">\n\n  <div style=\"display: flex; gap: 1rem\">\n    <h2 style=\"padding-top: .5rem; display: flex;\">\n      <div style=\"padding-top: .5rem;\">\n        <span>Local Storage Manager</span>\n        <span style=\"margin-left: .5rem;\">\n          <mat-icon color=\"accent\">fiber_new</mat-icon>\n        </span>\n      </div>\n      <div>\n        <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n          <mat-icon>info</mat-icon>\n        </button>\n      </div>\n    </h2>\n    <span style=\"flex:1\"></span>\n    <div style=\"padding-top: .25rem;\">\n      <mat-button-toggle-group name=\"storage\" [formControl]=\"typeControl\" (change)=\"onCancel()\">\n        <mat-button-toggle value=\"0\">Local Storage</mat-button-toggle>\n        <mat-button-toggle value=\"1\">Session Storage</mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n    <div style=\"margin-top: .25rem;\">\n      <button mat-icon-button (click)=\"onCreate()\">\n        <mat-icon>add</mat-icon>\n      </button>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"storeProps?.storageName || storeProps?.storageSettingsName\">\n    <div style=\"display: flex; gap: .5rem; flex-direction: column; border: gray solid thin; background-color: whitesmoke; padding: 1rem;\"\n    >\n      <div style=\"display: flex;\">\n        <div *ngIf=\"storeProps?.storageSettingsName\" style=\"flex:1\">\n          Database: <b>{{ storeProps?.storageSettingsName }}</b>\n        </div>\n        <div *ngIf=\"storeProps?.storageName\" style=\"flex:1\">\n          Data: <b>{{ storeProps?.storageName }}</b>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <div style=\"margin-top: 2rem;\" [formGroup]=\"newStoreForm\" *ngIf=\"create; else LIST\">\n\n    <h2>Create Store</h2>\n\n    <div style=\"display: flex; gap: 1rem;\">\n      <div style=\"flex:1\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Store Name</mat-label>\n          <input matInput placeholder=\"sample\" formControlName=\"name\">\n        </mat-form-field>\n      </div>\n      <div>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Expires In...</mat-label>\n          <mat-select formControlName=\"expiresIn\">\n            <mat-option value=\"0\">None</mat-option>\n            <mat-option value=\"30s\">30 Seconds</mat-option>\n            <mat-option value=\"1mn\">1 Minute</mat-option>\n            <mat-option value=\"1hr\">1 Hour</mat-option>\n            <mat-option value=\"1d\">1 Day</mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <div style=\"margin-top: 1rem;\">\n        <mat-slide-toggle formControlName=\"encrypted\">Encrypted</mat-slide-toggle>\n      </div>\n    </div>\n\n    <div style=\"display: flex;\">\n      <mat-form-field appearance=\"outline\" style=\"flex: 1;\">\n        <mat-label>Data (Must be an Object or Array of any)</mat-label>\n        <textarea matInput placeholder=\"[]\" formControlName=\"data\" #json></textarea>\n      </mat-form-field>\n    </div>\n    <mat-error *ngIf=\"!isValidJSON(json.value)\">Not Valid Data</mat-error>\n\n    <div style=\"display: flex;\">\n      <span style=\"flex:1\"></span>\n      <button mat-stroked-button (click)=\"onCreateStore()\" [disabled]=\"!(isValid && isValidJSON(json.value))\">\n        Save Store\n      </button>\n    </div>\n\n  </div>\n\n  <ng-template #LIST>\n\n    <div style=\"margin-top: 1rem;\">\n      <mat-divider></mat-divider>\n    </div>\n{{ settings() | json }}\n  <div *ngIf=\"filterData(settings()) as data\">\n      <ng-container *ngIf=\"data.length > 0; else NO_DATA\">\n        <table mat-table [dataSource]=\"data\">\n          <ng-container matColumnDef=\"name\">\n            <th mat-header-cell *matHeaderCellDef> Store </th>\n            <td mat-cell *matCellDef=\"let element\" style=\"font-weight: bold; text-transform: uppercase;\"> {{element.name}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"id\">\n            <th mat-header-cell *matHeaderCellDef> ID </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.id}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"encrypted\">\n            <th mat-header-cell *matHeaderCellDef style=\"text-align: center;\"> Encrypted </th>\n            <td mat-cell *matCellDef=\"let element\" style=\"text-align: center;\">\n              <ng-container *ngIf=\"element.options.encrypted; else NO\">YES</ng-container>\n              <ng-template #NO><span style=\"color:gray\">NO</span></ng-template>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"expires\">\n            <th mat-header-cell *matHeaderCellDef style=\"text-align: center;\"> Expires </th>\n            <td mat-cell *matCellDef=\"let element\" style=\"text-align: center;\">\n              <ng-container *ngIf=\"element.options.expires !== 0; else NO_DATA\">\n                {{expiresIn(element.options.expires)}}\n              </ng-container>\n              <ng-template #NO_DATA>\n                \u221E\n              </ng-template>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"option\">\n            <th mat-header-cell *matHeaderCellDef></th>\n            <td mat-cell *matCellDef=\"let element\" style=\"padding-right: 0;\">\n              <div style=\"display: flex;justify-content: flex-end;\">\n                <button mat-icon-button color=\"warn\" (click)=\"onDelete(element); $event.stopPropagation()\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </div>\n            </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" (click)=\"onSelectedRow(row)\"></tr>\n        </table>\n      </ng-container>\n\n      <ng-template #NO_DATA>\n        <h3 style=\"margin-top: 1rem;\">No Data</h3>\n      </ng-template>\n\n  <div *ngIf=\"storeSelected() as selectedStore\" style=\"margin-top: 2rem;\">\n        <div style=\"margin-bottom: 1rem;\">\n          <mat-divider></mat-divider>\n        </div>\n\n  <h3>STORE: <span style=\"font-weight: bold;\">{{ selectedStore.name | uppercase }}</span></h3>\n  <h3>SETTINGS: {{ localStorageManagerService.setting(selectedStore.name) ? (localStorageManagerService.setting(selectedStore.name)() | json) : '{}' }}</h3>\n        <div style=\"display: flex;\">\n          <mat-form-field appearance=\"outline\" style=\"flex: 1;\">\n            <mat-label>Data (Must be an Object or Array of any)</mat-label>\n            <textarea matInput placeholder=\"[]\" #json [value]=\"selectedStoreData()\"></textarea>\n          </mat-form-field>\n        </div>\n        <mat-error *ngIf=\"!isValidJSON(json.value)\">Not Valid Data</mat-error>\n\n        <div style=\"display: flex; gap: .5rem;\">\n          <span style=\"flex:1\"></span>\n          <button mat-stroked-button (click)=\"onCancel()\">Cancel</button>\n          <button mat-stroked-button (click)=\"onUpdate(selectedStore, json.value)\" [disabled]=\"!(isValidJSON(json.value))\">Update</button>\n        </div>\n      </div>\n    </div>\n\n  </ng-template>\n\n  <div style=\"margin-top: 1rem;\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 1rem;\">\n    <button mat-stroked-button (click)=\"onReset()\">Delete All Stores</button>\n  </div>\n\n</div>\n\n\n<mat-menu #menu=\"matMenu\">\n  <div style=\"padding: 1rem;\">\n    <p>Please note that the LocalStorage (encryption) and management of data is dependant on initializing the APP_ID</p>\n    <p>Must provide a value for <b>APP_ID</b> in AppModule->Providers</p>\n    <mat-divider></mat-divider>\n  <div style=\"font-size: smaller; margin-top: .5rem;\">\n    <p>Example: UUID (self.crypto.randomUUID() to generate)</p>\n    <div style=\"background-color: whitesmoke; padding: 1rem;\">\n      &#123;<br>\n        provide: APP_ID,<br>\n        useValue: \"056991ac-3537-43ab-b5b9-83edf6554eff\",<br>\n      &#125;\n    </div>\n  </div>\n  </div>\n</mat-menu>\n", styles: [".mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor}.demo-row-is-clicked{font-weight:700}.mat-mdc-menu-panel.mat-mdc-menu-panel{max-width:280px!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i10.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i10.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i11.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i12.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i13.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "pipe", type: i1$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: LocalStorageSignalsDemoComponent, selector: "app-local-storage-signals-demo", ngImport: i0, template: "<div style=\"margin: 2rem;\">\n\n  <div style=\"display: flex; gap: 1rem\">\n    <h2 style=\"padding-top: .5rem; display: flex;\">\n      <div style=\"padding-top: .5rem;\">\n        <span>Local Storage Manager</span>\n        <span style=\"margin-left: .5rem;\">\n          <mat-icon color=\"accent\">fiber_new</mat-icon>\n        </span>\n      </div>\n      <div>\n        <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n          <mat-icon>info</mat-icon>\n        </button>\n      </div>\n    </h2>\n    <span style=\"flex:1\"></span>\n    <div style=\"padding-top: .25rem;\">\n      <mat-button-toggle-group name=\"storage\" [formControl]=\"typeControl\" (change)=\"onCancel()\">\n        <mat-button-toggle value=\"0\">Local Storage</mat-button-toggle>\n        <mat-button-toggle value=\"1\">Session Storage</mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n    <div style=\"margin-top: .25rem;\">\n      <button mat-icon-button (click)=\"onCreate()\">\n        <mat-icon>add</mat-icon>\n      </button>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"storeProps?.storageName || storeProps?.storageSettingsName\">\n    <div style=\"display: flex; gap: .5rem; flex-direction: column; border: gray solid thin; background-color: whitesmoke; padding: 1rem;\"\n    >\n      <div style=\"display: flex;\">\n        <div *ngIf=\"storeProps?.storageSettingsName\" style=\"flex:1\">\n          Database: <b>{{ storeProps?.storageSettingsName }}</b>\n        </div>\n        <div *ngIf=\"storeProps?.storageName\" style=\"flex:1\">\n          Data: <b>{{ storeProps?.storageName }}</b>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <div style=\"margin-top: 2rem;\" [formGroup]=\"newStoreForm\" *ngIf=\"create; else LIST\">\n\n    <h2>Create Store</h2>\n\n    <div style=\"display: flex; gap: 1rem;\">\n      <div style=\"flex:1\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Store Name</mat-label>\n          <input matInput placeholder=\"sample\" formControlName=\"name\">\n        </mat-form-field>\n      </div>\n      <div>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Expires In...</mat-label>\n          <mat-select formControlName=\"expiresIn\">\n            <mat-option value=\"0\">None</mat-option>\n            <mat-option value=\"30s\">30 Seconds</mat-option>\n            <mat-option value=\"1mn\">1 Minute</mat-option>\n            <mat-option value=\"1hr\">1 Hour</mat-option>\n            <mat-option value=\"1d\">1 Day</mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <div style=\"margin-top: 1rem;\">\n        <mat-slide-toggle formControlName=\"encrypted\">Encrypted</mat-slide-toggle>\n      </div>\n    </div>\n\n    <div style=\"display: flex;\">\n      <mat-form-field appearance=\"outline\" style=\"flex: 1;\">\n        <mat-label>Data (Must be an Object or Array of any)</mat-label>\n        <textarea matInput placeholder=\"[]\" formControlName=\"data\" #json></textarea>\n      </mat-form-field>\n    </div>\n    <mat-error *ngIf=\"!isValidJSON(json.value)\">Not Valid Data</mat-error>\n\n    <div style=\"display: flex;\">\n      <span style=\"flex:1\"></span>\n      <button mat-stroked-button (click)=\"onCreateStore()\" [disabled]=\"!(isValid && isValidJSON(json.value))\">\n        Save Store\n      </button>\n    </div>\n\n  </div>\n\n  <ng-template #LIST>\n\n    <div style=\"margin-top: 1rem;\">\n      <mat-divider></mat-divider>\n    </div>\n{{ settings() | json }}\n  <div *ngIf=\"filterData(settings()) as data\">\n      <ng-container *ngIf=\"data.length > 0; else NO_DATA\">\n        <table mat-table [dataSource]=\"data\">\n          <ng-container matColumnDef=\"name\">\n            <th mat-header-cell *matHeaderCellDef> Store </th>\n            <td mat-cell *matCellDef=\"let element\" style=\"font-weight: bold; text-transform: uppercase;\"> {{element.name}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"id\">\n            <th mat-header-cell *matHeaderCellDef> ID </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.id}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"encrypted\">\n            <th mat-header-cell *matHeaderCellDef style=\"text-align: center;\"> Encrypted </th>\n            <td mat-cell *matCellDef=\"let element\" style=\"text-align: center;\">\n              <ng-container *ngIf=\"element.options.encrypted; else NO\">YES</ng-container>\n              <ng-template #NO><span style=\"color:gray\">NO</span></ng-template>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"expires\">\n            <th mat-header-cell *matHeaderCellDef style=\"text-align: center;\"> Expires </th>\n            <td mat-cell *matCellDef=\"let element\" style=\"text-align: center;\">\n              <ng-container *ngIf=\"element.options.expires !== 0; else NO_DATA\">\n                {{expiresIn(element.options.expires)}}\n              </ng-container>\n              <ng-template #NO_DATA>\n                \u221E\n              </ng-template>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"option\">\n            <th mat-header-cell *matHeaderCellDef></th>\n            <td mat-cell *matCellDef=\"let element\" style=\"padding-right: 0;\">\n              <div style=\"display: flex;justify-content: flex-end;\">\n                <button mat-icon-button color=\"warn\" (click)=\"onDelete(element); $event.stopPropagation()\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </div>\n            </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" (click)=\"onSelectedRow(row)\"></tr>\n        </table>\n      </ng-container>\n\n      <ng-template #NO_DATA>\n        <h3 style=\"margin-top: 1rem;\">No Data</h3>\n      </ng-template>\n\n  <div *ngIf=\"storeSelected() as selectedStore\" style=\"margin-top: 2rem;\">\n        <div style=\"margin-bottom: 1rem;\">\n          <mat-divider></mat-divider>\n        </div>\n\n  <h3>STORE: <span style=\"font-weight: bold;\">{{ selectedStore.name | uppercase }}</span></h3>\n  <h3>SETTINGS: {{ localStorageManagerService.setting(selectedStore.name) ? (localStorageManagerService.setting(selectedStore.name)() | json) : '{}' }}</h3>\n        <div style=\"display: flex;\">\n          <mat-form-field appearance=\"outline\" style=\"flex: 1;\">\n            <mat-label>Data (Must be an Object or Array of any)</mat-label>\n            <textarea matInput placeholder=\"[]\" #json [value]=\"selectedStoreData()\"></textarea>\n          </mat-form-field>\n        </div>\n        <mat-error *ngIf=\"!isValidJSON(json.value)\">Not Valid Data</mat-error>\n\n        <div style=\"display: flex; gap: .5rem;\">\n          <span style=\"flex:1\"></span>\n          <button mat-stroked-button (click)=\"onCancel()\">Cancel</button>\n          <button mat-stroked-button (click)=\"onUpdate(selectedStore, json.value)\" [disabled]=\"!(isValidJSON(json.value))\">Update</button>\n        </div>\n      </div>\n    </div>\n\n  </ng-template>\n\n  <div style=\"margin-top: 1rem;\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 1rem;\">\n    <button mat-stroked-button (click)=\"onReset()\">Delete All Stores</button>\n  </div>\n\n</div>\n\n\n<mat-menu #menu=\"matMenu\">\n  <div style=\"padding: 1rem;\">\n    <p>Please note that the LocalStorage (encryption) and management of data is dependant on initializing the APP_ID</p>\n    <p>Must provide a value for <b>APP_ID</b> in AppModule->Providers</p>\n    <mat-divider></mat-divider>\n  <div style=\"font-size: smaller; margin-top: .5rem;\">\n    <p>Example: UUID (self.crypto.randomUUID() to generate)</p>\n    <div style=\"background-color: whitesmoke; padding: 1rem;\">\n      &#123;<br>\n        provide: APP_ID,<br>\n        useValue: \"056991ac-3537-43ab-b5b9-83edf6554eff\",<br>\n      &#125;\n    </div>\n  </div>\n  </div>\n</mat-menu>\n", styles: [".mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor}.demo-row-is-clicked{font-weight:700}.mat-mdc-menu-panel.mat-mdc-menu-panel{max-width:280px!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: 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: ["matColumnDef"] }, { kind: "directive", type: i8.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i10.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i10.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i10$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: 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.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LocalStorageSignalsDemoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-local-storage-signals-demo', encapsulation: ViewEncapsulation.None, template: "<div style=\"margin: 2rem;\">\n\n  <div style=\"display: flex; gap: 1rem\">\n    <h2 style=\"padding-top: .5rem; display: flex;\">\n      <div style=\"padding-top: .5rem;\">\n        <span>Local Storage Manager</span>\n        <span style=\"margin-left: .5rem;\">\n          <mat-icon color=\"accent\">fiber_new</mat-icon>\n        </span>\n      </div>\n      <div>\n        <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n          <mat-icon>info</mat-icon>\n        </button>\n      </div>\n    </h2>\n    <span style=\"flex:1\"></span>\n    <div style=\"padding-top: .25rem;\">\n      <mat-button-toggle-group name=\"storage\" [formControl]=\"typeControl\" (change)=\"onCancel()\">\n        <mat-button-toggle value=\"0\">Local Storage</mat-button-toggle>\n        <mat-button-toggle value=\"1\">Session Storage</mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n    <div style=\"margin-top: .25rem;\">\n      <button mat-icon-button (click)=\"onCreate()\">\n        <mat-icon>add</mat-icon>\n      </button>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"storeProps?.storageName || storeProps?.storageSettingsName\">\n    <div style=\"display: flex; gap: .5rem; flex-direction: column; border: gray solid thin; background-color: whitesmoke; padding: 1rem;\"\n    >\n      <div style=\"display: flex;\">\n        <div *ngIf=\"storeProps?.storageSettingsName\" style=\"flex:1\">\n          Database: <b>{{ storeProps?.storageSettingsName }}</b>\n        </div>\n        <div *ngIf=\"storeProps?.storageName\" style=\"flex:1\">\n          Data: <b>{{ storeProps?.storageName }}</b>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <div style=\"margin-top: 2rem;\" [formGroup]=\"newStoreForm\" *ngIf=\"create; else LIST\">\n\n    <h2>Create Store</h2>\n\n    <div style=\"display: flex; gap: 1rem;\">\n      <div style=\"flex:1\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Store Name</mat-label>\n          <input matInput placeholder=\"sample\" formControlName=\"name\">\n        </mat-form-field>\n      </div>\n      <div>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Expires In...</mat-label>\n          <mat-select formControlName=\"expiresIn\">\n            <mat-option value=\"0\">None</mat-option>\n            <mat-option value=\"30s\">30 Seconds</mat-option>\n            <mat-option value=\"1mn\">1 Minute</mat-option>\n            <mat-option value=\"1hr\">1 Hour</mat-option>\n            <mat-option value=\"1d\">1 Day</mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <div style=\"margin-top: 1rem;\">\n        <mat-slide-toggle formControlName=\"encrypted\">Encrypted</mat-slide-toggle>\n      </div>\n    </div>\n\n    <div style=\"display: flex;\">\n      <mat-form-field appearance=\"outline\" style=\"flex: 1;\">\n        <mat-label>Data (Must be an Object or Array of any)</mat-label>\n        <textarea matInput placeholder=\"[]\" formControlName=\"data\" #json></textarea>\n      </mat-form-field>\n    </div>\n    <mat-error *ngIf=\"!isValidJSON(json.value)\">Not Valid Data</mat-error>\n\n    <div style=\"display: flex;\">\n      <span style=\"flex:1\"></span>\n      <button mat-stroked-button (click)=\"onCreateStore()\" [disabled]=\"!(isValid && isValidJSON(json.value))\">\n        Save Store\n      </button>\n    </div>\n\n  </div>\n\n  <ng-template #LIST>\n\n    <div style=\"margin-top: 1rem;\">\n      <mat-divider></mat-divider>\n    </div>\n{{ settings() | json }}\n  <div *ngIf=\"filterData(settings()) as data\">\n      <ng-container *ngIf=\"data.length > 0; else NO_DATA\">\n        <table mat-table [dataSource]=\"data\">\n          <ng-container matColumnDef=\"name\">\n            <th mat-header-cell *matHeaderCellDef> Store </th>\n            <td mat-cell *matCellDef=\"let element\" style=\"font-weight: bold; text-transform: uppercase;\"> {{element.name}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"id\">\n            <th mat-header-cell *matHeaderCellDef> ID </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.id}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"encrypted\">\n            <th mat-header-cell *matHeaderCellDef style=\"text-align: center;\"> Encrypted </th>\n            <td mat-cell *matCellDef=\"let element\" style=\"text-align: center;\">\n              <ng-container *ngIf=\"element.options.encrypted; else NO\">YES</ng-container>\n              <ng-template #NO><span style=\"color:gray\">NO</span></ng-template>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"expires\">\n            <th mat-header-cell *matHeaderCellDef style=\"text-align: center;\"> Expires </th>\n            <td mat-cell *matCellDef=\"let element\" style=\"text-align: center;\">\n              <ng-container *ngIf=\"element.options.expires !== 0; else NO_DATA\">\n                {{expiresIn(element.options.expires)}}\n              </ng-container>\n              <ng-template #NO_DATA>\n                \u221E\n              </ng-template>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"option\">\n            <th mat-header-cell *matHeaderCellDef></th>\n            <td mat-cell *matCellDef=\"let element\" style=\"padding-right: 0;\">\n              <div style=\"display: flex;justify-content: flex-end;\">\n                <button mat-icon-button color=\"warn\" (click)=\"onDelete(element); $event.stopPropagation()\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </div>\n            </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" (click)=\"onSelectedRow(row)\"></tr>\n        </table>\n      </ng-container>\n\n      <ng-template #NO_DATA>\n        <h3 style=\"margin-top: 1rem;\">No Data</h3>\n      </ng-template>\n\n  <div *ngIf=\"storeSelected() as selectedStore\" style=\"margin-top: 2rem;\">\n        <div style=\"margin-bottom: 1rem;\">\n          <mat-divider></mat-divider>\n        </div>\n\n  <h3>STORE: <span style=\"font-weight: bold;\">{{ selectedStore.name | uppercase }}</span></h3>\n  <h3>SETTINGS: {{ localStorageManagerService.setting(selectedStore.name) ? (localStorageManagerService.setting(selectedStore.name)() | json) : '{}' }}</h3>\n        <div style=\"display: flex;\">\n          <mat-form-field appearance=\"outline\" style=\"flex: 1;\">\n            <mat-label>Data (Must be an Object or Array of any)</mat-label>\n            <textarea matInput placeholder=\"[]\" #json [value]=\"selectedStoreData()\"></textarea>\n          </mat-form-field>\n        </div>\n        <mat-error *ngIf=\"!isValidJSON(json.value)\">Not Valid Data</mat-error>\n\n        <div style=\"display: flex; gap: .5rem;\">\n          <span style=\"flex:1\"></span>\n          <button mat-stroked-button (click)=\"onCancel()\">Cancel</button>\n          <button mat-stroked-button (click)=\"onUpdate(selectedStore, json.value)\" [disabled]=\"!(isValidJSON(json.value))\">Update</button>\n        </div>\n      </div>\n    </div>\n\n  </ng-template>\n\n  <div style=\"margin-top: 1rem;\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 1rem;\">\n    <button mat-stroked-button (click)=\"onReset()\">Delete All Stores</button>\n  </div>\n\n</div>\n\n\n<mat-menu #menu=\"matMenu\">\n  <div style=\"padding: 1rem;\">\n    <p>Please note that the LocalStorage (encryption) and management of data is dependant on initializing the APP_ID</p>\n    <p>Must provide a value for <b>APP_ID</b> in AppModule->Providers</p>\n    <mat-divider></mat-divider>\n  <div style=\"font-size: smaller; margin-top: .5rem;\">\n    <p>Example: UUID (self.crypto.randomUUID() to generate)</p>\n    <div style=\"background-color: whitesmoke; padding: 1rem;\">\n      &#123;<br>\n        provide: APP_ID,<br>\n        useValue: \"056991ac-3537-43ab-b5b9-83edf6554eff\",<br>\n      &#125;\n    </div>\n  </div>\n  </div>\n</mat-menu>\n", styles: [".mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor}.demo-row-is-clicked{font-weight:700}.mat-mdc-menu-panel.mat-mdc-menu-panel{max-width:280px!important}\n"] }]
+            args: [{ selector: 'app-local-storage-signals-demo', encapsulation: ViewEncapsulation.None, standalone: false, 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;\">\n        <span>Local Storage Manager</span>\n        <span style=\"margin-left: .5rem;\">\n          <mat-icon color=\"accent\">fiber_new</mat-icon>\n        </span>\n      </div>\n      <div>\n        <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n          <mat-icon>info</mat-icon>\n        </button>\n      </div>\n    </h2>\n    <span style=\"flex:1\"></span>\n    <div style=\"padding-top: .25rem;\">\n      <mat-button-toggle-group name=\"storage\" [formControl]=\"typeControl\" (change)=\"onCancel()\">\n        <mat-button-toggle value=\"0\">Local Storage</mat-button-toggle>\n        <mat-button-toggle value=\"1\">Session Storage</mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n    <div style=\"margin-top: .25rem;\">\n      <button mat-icon-button (click)=\"onCreate()\">\n        <mat-icon>add</mat-icon>\n      </button>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"storeProps?.storageName || storeProps?.storageSettingsName\">\n    <div style=\"display: flex; gap: .5rem; flex-direction: column; border: gray solid thin; background-color: whitesmoke; padding: 1rem;\"\n    >\n      <div style=\"display: flex;\">\n        <div *ngIf=\"storeProps?.storageSettingsName\" style=\"flex:1\">\n          Database: <b>{{ storeProps?.storageSettingsName }}</b>\n        </div>\n        <div *ngIf=\"storeProps?.storageName\" style=\"flex:1\">\n          Data: <b>{{ storeProps?.storageName }}</b>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <div style=\"margin-top: 2rem;\" [formGroup]=\"newStoreForm\" *ngIf=\"create; else LIST\">\n\n    <h2>Create Store</h2>\n\n    <div style=\"display: flex; gap: 1rem;\">\n      <div style=\"flex:1\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Store Name</mat-label>\n          <input matInput placeholder=\"sample\" formControlName=\"name\">\n        </mat-form-field>\n      </div>\n      <div>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Expires In...</mat-label>\n          <mat-select formControlName=\"expiresIn\">\n            <mat-option value=\"0\">None</mat-option>\n            <mat-option value=\"30s\">30 Seconds</mat-option>\n            <mat-option value=\"1mn\">1 Minute</mat-option>\n            <mat-option value=\"1hr\">1 Hour</mat-option>\n            <mat-option value=\"1d\">1 Day</mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <div style=\"margin-top: 1rem;\">\n        <mat-slide-toggle formControlName=\"encrypted\">Encrypted</mat-slide-toggle>\n      </div>\n    </div>\n\n    <div style=\"display: flex;\">\n      <mat-form-field appearance=\"outline\" style=\"flex: 1;\">\n        <mat-label>Data (Must be an Object or Array of any)</mat-label>\n        <textarea matInput placeholder=\"[]\" formControlName=\"data\" #json></textarea>\n      </mat-form-field>\n    </div>\n    <mat-error *ngIf=\"!isValidJSON(json.value)\">Not Valid Data</mat-error>\n\n    <div style=\"display: flex;\">\n      <span style=\"flex:1\"></span>\n      <button mat-stroked-button (click)=\"onCreateStore()\" [disabled]=\"!(isValid && isValidJSON(json.value))\">\n        Save Store\n      </button>\n    </div>\n\n  </div>\n\n  <ng-template #LIST>\n\n    <div style=\"margin-top: 1rem;\">\n      <mat-divider></mat-divider>\n    </div>\n{{ settings() | json }}\n  <div *ngIf=\"filterData(settings()) as data\">\n      <ng-container *ngIf=\"data.length > 0; else NO_DATA\">\n        <table mat-table [dataSource]=\"data\">\n          <ng-container matColumnDef=\"name\">\n            <th mat-header-cell *matHeaderCellDef> Store </th>\n            <td mat-cell *matCellDef=\"let element\" style=\"font-weight: bold; text-transform: uppercase;\"> {{element.name}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"id\">\n            <th mat-header-cell *matHeaderCellDef> ID </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.id}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"encrypted\">\n            <th mat-header-cell *matHeaderCellDef style=\"text-align: center;\"> Encrypted </th>\n            <td mat-cell *matCellDef=\"let element\" style=\"text-align: center;\">\n              <ng-container *ngIf=\"element.options.encrypted; else NO\">YES</ng-container>\n              <ng-template #NO><span style=\"color:gray\">NO</span></ng-template>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"expires\">\n            <th mat-header-cell *matHeaderCellDef style=\"text-align: center;\"> Expires </th>\n            <td mat-cell *matCellDef=\"let element\" style=\"text-align: center;\">\n              <ng-container *ngIf=\"element.options.expires !== 0; else NO_DATA\">\n                {{expiresIn(element.options.expires)}}\n              </ng-container>\n              <ng-template #NO_DATA>\n                \u221E\n              </ng-template>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"option\">\n            <th mat-header-cell *matHeaderCellDef></th>\n            <td mat-cell *matCellDef=\"let element\" style=\"padding-right: 0;\">\n              <div style=\"display: flex;justify-content: flex-end;\">\n                <button mat-icon-button color=\"warn\" (click)=\"onDelete(element); $event.stopPropagation()\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </div>\n            </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" (click)=\"onSelectedRow(row)\"></tr>\n        </table>\n      </ng-container>\n\n      <ng-template #NO_DATA>\n        <h3 style=\"margin-top: 1rem;\">No Data</h3>\n      </ng-template>\n\n  <div *ngIf=\"storeSelected() as selectedStore\" style=\"margin-top: 2rem;\">\n        <div style=\"margin-bottom: 1rem;\">\n          <mat-divider></mat-divider>\n        </div>\n\n  <h3>STORE: <span style=\"font-weight: bold;\">{{ selectedStore.name | uppercase }}</span></h3>\n  <h3>SETTINGS: {{ localStorageManagerService.setting(selectedStore.name) ? (localStorageManagerService.setting(selectedStore.name)() | json) : '{}' }}</h3>\n        <div style=\"display: flex;\">\n          <mat-form-field appearance=\"outline\" style=\"flex: 1;\">\n            <mat-label>Data (Must be an Object or Array of any)</mat-label>\n            <textarea matInput placeholder=\"[]\" #json [value]=\"selectedStoreData()\"></textarea>\n          </mat-form-field>\n        </div>\n        <mat-error *ngIf=\"!isValidJSON(json.value)\">Not Valid Data</mat-error>\n\n        <div style=\"display: flex; gap: .5rem;\">\n          <span style=\"flex:1\"></span>\n          <button mat-stroked-button (click)=\"onCancel()\">Cancel</button>\n          <button mat-stroked-button (click)=\"onUpdate(selectedStore, json.value)\" [disabled]=\"!(isValidJSON(json.value))\">Update</button>\n        </div>\n      </div>\n    </div>\n\n  </ng-template>\n\n  <div style=\"margin-top: 1rem;\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 1rem;\">\n    <button mat-stroked-button (click)=\"onReset()\">Delete All Stores</button>\n  </div>\n\n</div>\n\n\n<mat-menu #menu=\"matMenu\">\n  <div style=\"padding: 1rem;\">\n    <p>Please note that the LocalStorage (encryption) and management of data is dependant on initializing the APP_ID</p>\n    <p>Must provide a value for <b>APP_ID</b> in AppModule->Providers</p>\n    <mat-divider></mat-divider>\n  <div style=\"font-size: smaller; margin-top: .5rem;\">\n    <p>Example: UUID (self.crypto.randomUUID() to generate)</p>\n    <div style=\"background-color: whitesmoke; padding: 1rem;\">\n      &#123;<br>\n        provide: APP_ID,<br>\n        useValue: \"056991ac-3537-43ab-b5b9-83edf6554eff\",<br>\n      &#125;\n    </div>\n  </div>\n  </div>\n</mat-menu>\n", styles: [".mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor}.demo-row-is-clicked{font-weight:700}.mat-mdc-menu-panel.mat-mdc-menu-panel{max-width:280px!important}\n"] }]
         }], ctorParameters: () => [{ type: ConfigOptions, decorators: [{
                     type: Inject,
                     args: [CONFIG_SETTINGS_TOKEN]
                 }] }] });
 
 class UserData {
-    constructor(username = '', name = '', email = '', roles = '') {
-        this.username = username;
+    constructor(ldap = '', name = '', email = '') {
+        this.ldap = ldap;
         this.name = name;
         this.email = email;
-        this.roles = roles;
     }
     static adapt(item) {
-        const userName = `${item?.givenname} ${item?.surname}`;
-        return new UserData(item?.sub, userName, item?.email, item?.roles);
+        const userName = `${item?.first_name} ${item?.last_name}`;
+        return new UserData(item?.ldap, userName, item?.email);
     }
 }
 
@@ -4032,22 +4060,19 @@ class OIDCClient {
 class StateRequestServiceDemo extends HTTPManagerStateService {
     constructor() {
         super(ApiRequest.adapt({
-            server: 'https://oidc.example.com',
+            server: '',
             retry: RetryOptions.adapt({
                 times: 3,
                 delay: 1,
             }),
             adapter: OIDCClient.adapt,
             ws: {
-                id: 'WS-MY_DATA',
-                wsChannels: ['allChannels'],
+                id: ``,
+                // wsChannels: ['allChannels'],
+                // access: ['read,write,delete,update'],
                 wsServer: '',
                 jwtToken: '',
-                access: ['read,write,delete,update'],
-                userAdapter: {
-                    id: 'username', // matches adapter in UserData
-                    adapter: UserData.adapt,
-                },
+                user: UserData.adapt(),
                 retry: RetryOptions.adapt({
                     times: 3,
                     delay: 10,
@@ -4060,7 +4085,7 @@ class StateRequestServiceDemo extends HTTPManagerStateService {
         this.attempts$ = this.wsRetryAttempts$;
         this.nextRetry$ = this.wsNextRetry$;
     }
-    updateConnection(server, wsServer, jwtToken) {
+    updateConnection(server, wsServer, jwtToken, user) {
         this.setApiRequestOptions({
             server,
             retry: RetryOptions.adapt({
@@ -4069,22 +4094,81 @@ class StateRequestServiceDemo extends HTTPManagerStateService {
             }),
             adapter: OIDCClient.adapt,
             ws: {
-                id: 'WS-MY_DATA',
+                id: 'WS-USERS',
                 wsServer,
                 jwtToken,
-                userAdapter: {
-                    id: 'username', // matches adapter in UserData
-                    adapter: UserData.adapt,
-                },
+                user, // user object
                 retry: RetryOptions.adapt({
                     times: 3,
                     delay: 10,
                 }),
             }
         });
+        this.userAction$.subscribe(user => {
+            console.log('User Action:', user);
+        });
     }
-    getData() {
-        this.fetchRecords(RequestOptions.adapt({ path: ['ai', 'tests'] }));
+    sendMessage(data) {
+        console.log('sendMessage', data);
+        this.wsMessaging(data);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StateRequestServiceDemo, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StateRequestServiceDemo, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StateRequestServiceDemo, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class StateDataRequestService extends HTTPManagerStateService {
+    constructor() {
+        super(ApiRequest.adapt({
+            server: '',
+            retry: RetryOptions.adapt({
+                times: 3,
+                delay: 1,
+            }),
+            adapter: OIDCClient.adapt,
+            ws: {
+                id: ``,
+                // wsChannels: ['allChannels'],
+                // access: ['read,write,delete,update'],
+                wsServer: '',
+                jwtToken: '',
+                user: UserData.adapt(),
+                retry: RetryOptions.adapt({
+                    times: 3,
+                    delay: 10,
+                }),
+            }
+        }), DataType.ARRAY, DatabaseStorage.adapt({
+            table: 'ws_demo_data',
+            expiresIn: '5mn',
+        }));
+        this.attempts$ = this.wsRetryAttempts$;
+        this.nextRetry$ = this.wsNextRetry$;
+    }
+    updateConnection(server, wsServer, jwtToken, user) {
+        this.setApiRequestOptions({
+            server,
+            retry: RetryOptions.adapt({
+                times: 3,
+                delay: 1,
+            }),
+            adapter: OIDCClient.adapt,
+            ws: {
+                id: 'WS-USERS',
+                wsServer,
+                jwtToken,
+                user, // general info about user
+                retry: RetryOptions.adapt({
+                    times: 3,
+                    delay: 10,
+                }),
+            }
+        });
     }
     addData() {
         const num = RandomNumber(1000, 9999);
@@ -4100,6 +4184,9 @@ class StateRequestServiceDemo extends HTTPManagerStateService {
         console.log('sendMessage', data);
         this.wsMessaging(data);
     }
+    getData() {
+        this.fetchRecords(RequestOptions.adapt({ path: ['ai', 'tests'] }));
+    }
     updateData(data) {
         const sampleOptions = RequestOptions.adapt({ path: ['ai', 'tests', data.id] });
         console.log('updateData', sampleOptions);
@@ -4110,16 +4197,91 @@ class StateRequestServiceDemo extends HTTPManagerStateService {
         console.log('deleteData', sampleOptions);
         this.deleteRecord(sampleOptions);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StateRequestServiceDemo, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StateRequestServiceDemo, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StateDataRequestService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StateDataRequestService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StateRequestServiceDemo, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StateDataRequestService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
         }], ctorParameters: () => [] });
 
+class WsDataControlComponent {
+    constructor() {
+        this.stateDataRequestService = inject(StateDataRequestService);
+        this.user$ = this.stateDataRequestService.user$;
+        this.users$ = this.stateDataRequestService.userList$;
+        this.data$ = this.stateDataRequestService.data$;
+        this.isUser = (user, userItem) => {
+            return user.sessionId === userItem.sessionId;
+        };
+    }
+    ngOnInit() {
+        this.stateDataRequestService.updateConnection(this.server, this.wsServer, this.jwtToken, this.user);
+        this.stateDataRequestService.getData();
+    }
+    onGetData() {
+        this.stateDataRequestService.getData();
+    }
+    onAddData() {
+        this.stateDataRequestService.addData();
+    }
+    onUpdateData(data) {
+        const num = RandomNumber(1000, 9999);
+        const newData = {
+            "spiffe": `wavecoders.com/developer/${num}`,
+            "id": 63,
+            "last_name": "boni",
+            "email": "mikeboni@hotmail.com",
+            "first_name": "mike"
+        };
+        this.stateDataRequestService.updateData(newData);
+    }
+    onRemoveData(data) {
+        const lastRec = data[data.length - 1];
+        this.stateDataRequestService.deleteData(lastRec);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WsDataControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: WsDataControlComponent, selector: "app-ws-data-control", inputs: { server: "server", wsServer: "wsServer", jwtToken: "jwtToken", user: "user" }, ngImport: i0, template: "@if ((data$ | async); as data) {\n  <div style=\"margin: 1rem;\">\n    @if ((users$ |async); as users) {\n      <div>\n        @if (users.length > 0) {\n          <h3 style=\"margin: 0;\">Connected Users</h3>\n        } @else {\n          <h3 style=\"margin: 0;\">No Users</h3>\n        }\n        <mat-chip-listbox>\n          @for (user of users; track user) {\n            <mat-chip-option [selected]=\"isUser(user, (user$ | async))\">\n              {{ user.content.name }}\n            </mat-chip-option>\n          }\n        </mat-chip-listbox>\n      </div>\n    }\n    <div style=\"margin-top: 1rem; margin-bottom: 1rem;\">\n      <mat-divider></mat-divider>\n    </div>\n    <h3 style=\"margin: 0;\">Data Actions</h3>\n    <div style=\"display: flex; gap: 1rem; margin-bottom: 1rem;\">\n      <button mat-stroked-button (click)=\"onGetData()\">Get Data</button>\n      <div style=\"flex:1\"></div>\n      <button mat-stroked-button color=\"accent\" (click)=\"onUpdateData(data)\">Update Data</button>\n      <button mat-stroked-button color=\"warn\" (click)=\"onRemoveData(data)\">Remove Data</button>\n      <button mat-stroked-button color=\"primary\" (click)=\"onAddData()\">Add Data</button>\n    </div>\n    @if (data.length > 0) {\n      <div>\n        <table mat-table [dataSource]=\"data\" style=\"border: 1px solid grey;\">\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          <ng-container matColumnDef=\"spiffe\">\n            <th mat-header-cell *matHeaderCellDef> Spiffe </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.spiffe}} </td>\n          </ng-container>\n          <ng-container matColumnDef=\"name\">\n            <th mat-header-cell *matHeaderCellDef> Name </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.first_name}} {{element.last_name}}</td>\n          </ng-container>\n          <ng-container matColumnDef=\"email\">\n            <th mat-header-cell *matHeaderCellDef> Email </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.email}} </td>\n          </ng-container>\n          <tr mat-header-row *matHeaderRowDef=\"['id', 'spiffe', 'name', 'email']\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: ['id', 'spiffe', 'name', 'email'];\"></tr>\n        </table>\n        <div style=\"border: 1px solid grey; padding: .5rem; border-top: none;\">\n          <h3 style=\"margin: 0;\">Total Records {{ data.length }}</h3>\n        </div>\n      </div>\n    } @else {\n      <div style=\"margin-top: 1rem; font-style: italic;\">\n        No Data Available\n      </div>\n    }\n  </div>\n}\n\n", styles: [""], dependencies: [{ kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2$2.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i2$2.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { 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: ["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: i11.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WsDataControlComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-ws-data-control', standalone: false, template: "@if ((data$ | async); as data) {\n  <div style=\"margin: 1rem;\">\n    @if ((users$ |async); as users) {\n      <div>\n        @if (users.length > 0) {\n          <h3 style=\"margin: 0;\">Connected Users</h3>\n        } @else {\n          <h3 style=\"margin: 0;\">No Users</h3>\n        }\n        <mat-chip-listbox>\n          @for (user of users; track user) {\n            <mat-chip-option [selected]=\"isUser(user, (user$ | async))\">\n              {{ user.content.name }}\n            </mat-chip-option>\n          }\n        </mat-chip-listbox>\n      </div>\n    }\n    <div style=\"margin-top: 1rem; margin-bottom: 1rem;\">\n      <mat-divider></mat-divider>\n    </div>\n    <h3 style=\"margin: 0;\">Data Actions</h3>\n    <div style=\"display: flex; gap: 1rem; margin-bottom: 1rem;\">\n      <button mat-stroked-button (click)=\"onGetData()\">Get Data</button>\n      <div style=\"flex:1\"></div>\n      <button mat-stroked-button color=\"accent\" (click)=\"onUpdateData(data)\">Update Data</button>\n      <button mat-stroked-button color=\"warn\" (click)=\"onRemoveData(data)\">Remove Data</button>\n      <button mat-stroked-button color=\"primary\" (click)=\"onAddData()\">Add Data</button>\n    </div>\n    @if (data.length > 0) {\n      <div>\n        <table mat-table [dataSource]=\"data\" style=\"border: 1px solid grey;\">\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          <ng-container matColumnDef=\"spiffe\">\n            <th mat-header-cell *matHeaderCellDef> Spiffe </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.spiffe}} </td>\n          </ng-container>\n          <ng-container matColumnDef=\"name\">\n            <th mat-header-cell *matHeaderCellDef> Name </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.first_name}} {{element.last_name}}</td>\n          </ng-container>\n          <ng-container matColumnDef=\"email\">\n            <th mat-header-cell *matHeaderCellDef> Email </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.email}} </td>\n          </ng-container>\n          <tr mat-header-row *matHeaderRowDef=\"['id', 'spiffe', 'name', 'email']\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: ['id', 'spiffe', 'name', 'email'];\"></tr>\n        </table>\n        <div style=\"border: 1px solid grey; padding: .5rem; border-top: none;\">\n          <h3 style=\"margin: 0;\">Total Records {{ data.length }}</h3>\n        </div>\n      </div>\n    } @else {\n      <div style=\"margin-top: 1rem; font-style: italic;\">\n        No Data Available\n      </div>\n    }\n  </div>\n}\n\n" }]
+        }], propDecorators: { server: [{
+                type: Input
+            }], wsServer: [{
+                type: Input
+            }], jwtToken: [{
+                type: Input
+            }], user: [{
+                type: Input
+            }] } });
+
+class WsNotificationsComponent {
+    constructor() { }
+    ngOnInit() {
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WsNotificationsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: WsNotificationsComponent, selector: "app-ws-notifications", ngImport: i0, template: "<p>\n  ws-notifications works!\n</p>\n", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WsNotificationsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-ws-notifications', standalone: false, template: "<p>\n  ws-notifications works!\n</p>\n" }]
+        }], ctorParameters: () => [] });
+
+class WsAiMessagingComponent {
+    constructor() { }
+    ngOnInit() {
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WsAiMessagingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: WsAiMessagingComponent, selector: "app-ws-ai-messaging", ngImport: i0, template: "<p>\n  ws-ai-messaging works!\n</p>\n", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WsAiMessagingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-ws-ai-messaging', standalone: false, template: "<p>\n  ws-ai-messaging works!\n</p>\n" }]
+        }], ctorParameters: () => [] });
+
 class RequestManagerWsDemoComponent {
     constructor() {
         this.httpManagerService = inject(HTTPManagerService);
@@ -4135,6 +4297,7 @@ class RequestManagerWsDemoComponent {
             content: this.fb.control(null, Validators.required),
         });
         this.data$ = this.stateRequestServiceDemo.data$;
+        this.isPending$ = this.stateRequestServiceDemo.isPending$;
         this.fromMe = (user, fromUser) => {
             return user === fromUser;
         };
@@ -4186,25 +4349,7 @@ class RequestManagerWsDemoComponent {
         return this.toUser.valid;
     }
     ngOnInit() {
-        this.stateRequestServiceDemo.updateConnection(this.server, this.wsServer, this.jwtToken);
-        this.stateRequestServiceDemo.getData();
-    }
-    onGetData() {
-        this.stateRequestServiceDemo.getData();
-    }
-    onAddData() {
-        this.stateRequestServiceDemo.addData();
-    }
-    onUpdateData(data) {
-        const num = RandomNumber(1000, 9999);
-        const newData = {
-            "spiffe": `wavecoders.com/developer/${num}`,
-            "id": 63,
-            "last_name": "boni",
-            "email": "mikeboni@hotmail.com",
-            "first_name": "mike"
-        };
-        this.stateRequestServiceDemo.updateData(newData);
+        this.stateRequestServiceDemo.updateConnection(this.server, this.wsServer, this.jwtToken, this.user);
     }
     onSendMessage() {
         this.messages.markAllAsTouched();
@@ -4222,22 +4367,20 @@ class RequestManagerWsDemoComponent {
         this.stateRequestServiceDemo.sendMessage(message);
         this.content.reset();
     }
-    onRemoveData(data) {
-        const lastRec = data[data.length - 1];
-        this.stateRequestServiceDemo.deleteData(lastRec);
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RequestManagerWsDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: RequestManagerWsDemoComponent, selector: "app-request-manager-ws-demo", inputs: { server: "server", wsServer: "wsServer", jwtToken: "jwtToken" }, ngImport: i0, template: "<div style=\"margin: 2rem;\">\n\n  <h2 style=\"display: flex;\">\n    <span style=\"flex:1\">HTTP Request State Manager - Websockets</span>\n    <span *ngIf=\"(connectionStatus$ | async) as connected; else NOT_CONNECTED\">\n      WS -\n      <span style=\"color: green;\">Connected</span>\n    </span>\n    <ng-template #NOT_CONNECTED>\n      <span style=\"color: red;\">Disconnected {{ attempts$ | async }} - {{ nextRetry$ |async }}</span>\n    </ng-template>\n  </h2>\n\n  <div>\n\n    <div *ngIf=\"(user$ | async) as userInfo\">\n      <mat-toolbar>\n        <div style=\"display: flex; flex:1\">\n          <div style=\"flex:1\">{{ userInfo.name }}</div>\n          <div>({{ userInfo.username }})</div>\n        </div>\n      </mat-toolbar>\n    </div>\n\n    <mat-tab-group animationDuration=\"0ms\">\n\n      <mat-tab label=\"WS - Data Control\">\n\n        <div *ngIf=\"(data$ | async) as data\" style=\"margin: 1rem; display: flex; gap: 1rem; flex-direction: column;\">\n\n          <div *ngIf=\"(users$ |async) as users\">\n            <mat-chip-set>\n              <mat-chip *ngFor=\"let user of users\">\n                {{ user.name }}\n              </mat-chip>\n            </mat-chip-set>\n          </div>\n\n          <div style=\"display: flex; gap: 1rem; margin-bottom: 1rem;\">\n            <button mat-stroked-button (click)=\"onGetData()\">Get Data</button>\n            <button mat-stroked-button color=\"accent\" (click)=\"onUpdateData(data)\">Update Data</button>\n            <button mat-stroked-button color=\"warn\" (click)=\"onRemoveData(data)\">Remove Data</button>\n            <button mat-stroked-button color=\"primary\" (click)=\"onAddData()\">Add Data</button>\n          </div>\n\n          <div style=\"display: flex; gap: 1rem; flex-direction: column;\">\n            <div>{{ data | json }}</div>\n            <h2>{{ data.length }}</h2>\n          </div>\n\n        </div>\n\n      </mat-tab>\n\n      <mat-tab label=\"WS - Messaging\">\n\n        <div *ngIf=\"(data$ | async) as data\" style=\"margin: 1rem; display: flex; gap: 1rem; flex-direction: column;\">\n\n          <div *ngIf=\"(user$ | async) as userInfo\">\n\n            <div  *ngIf=\"(users$ | async) as users\">\n\n              <div style=\"display: flex; gap: 1rem\">\n\n                <div style=\"flex:1\" [formGroup]=\"messages\">\n                  <div style=\"display:flex\">\n                    <mat-form-field style=\"flex:1\" appearance=\"outline\">\n                      <mat-label>Users</mat-label>\n                      <mat-select formControlName=\"toUser\">\n                        <mat-option value=\"allChannels\" #selectedUser>\n                          All Users\n                        </mat-option>\n                        <mat-option *ngFor=\"let user of users\" [value]=\"user\">\n                          {{ user.username }}\n                        </mat-option>\n                      </mat-select>\n                    </mat-form-field>\n                  </div>\n                  <div style=\"display:flex\">\n                    <mat-form-field style=\"flex:1\" appearance=\"outline\">\n                      <mat-label>Send a Message</mat-label>\n                      <textarea\n                        matInput placeholder=\"Ex. It makes me feel...\"\n                        formControlName=\"content\"\n                        (keydown.enter)=\"onSendMessage(); $event.preventDefault()\"\n                        [disabled]=\"!isValid\"\n                      ></textarea>\n                    </mat-form-field>\n                  </div>\n                  <div style=\"display:flex; gap: .5rem;\">\n                    <div style=\"flex:1\"></div>\n                    <button mat-stroked-button (click)=\"onSendMessage()\" color=\"warn\">\n                      Send Alert\n                    </button>\n                    <button mat-stroked-button (click)=\"onSendAlert()\">\n                      Send Message\n                    </button>\n                  </div>\n                </div>\n              </div>\n\n              <div *ngIf=\"(chat$ | async) as chat\" style=\"border: thin gray solid; padding: 1rem; margin-top: 1rem;\">\n                <!-- <app-messenger-chat\n                  [user]=\"chat.user\"\n                  [messages]=\"chat.messages\"\n                ></app-messenger-chat> -->\n              </div>\n\n            </div>\n\n          </div>\n\n        </div>\n\n      </mat-tab>\n\n      <mat-tab label=\"WS - Custom Channel Messaging\" [disabled]=\"true\">\n        WS - Custom Channel Messaging\n      </mat-tab>\n\n    </mat-tab-group>\n  </div>\n\n</div>\n\n\n<div style=\"margin: 1rem;\">\n  <h3>\n    user: {{ user$ | async | json}}\n  </h3>\n\n  <h3>\n    users: {{ users$ | async | json}}\n  </h3>\n</div>\n", styles: [""], 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.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i4$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { 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: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i8$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i8$1.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { 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: i10$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: RequestManagerWsDemoComponent, selector: "app-request-manager-ws-demo", inputs: { server: "server", wsServer: "wsServer", jwtToken: "jwtToken", user: "user" }, ngImport: i0, template: "<div style=\"margin: 2rem;\">\n\n  <h2 style=\"display: flex;\">\n    <span style=\"flex:1\">HTTP Request State Manager - Websockets</span>\n    @if ((connectionStatus$ | async); as connected) {\n      <span>\n        WS -\n        <span style=\"color: green;\">Connected</span>\n      </span>\n    } @else {\n      <span style=\"color: red;\">Disconnected {{ attempts$ | async }} - {{ nextRetry$ |async }}</span>\n    }\n  </h2>\n\n  <div>\n\n    @if ((user$ | async); as userInfo) {\n      <div>\n        <mat-toolbar>\n          <div style=\"display: flex; flex:1\">\n            <div style=\"flex:1\">{{ userInfo.content.name }}</div>\n            <div>({{ userInfo.content.ldap }})</div>\n          </div>\n        </mat-toolbar>\n      </div>\n    }\n\n    @if ((isPending$ | async)) {\n      <div>\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n      </div>\n    }\n\n    <mat-tab-group animationDuration=\"0ms\">\n\n      <mat-tab label=\"WS - Data Control\">\n        <!-- DATA CONTROL -->\n        <app-ws-data-control\n          [server]=\"server\"\n          [wsServer]=\"wsServer\"\n          [jwtToken]=\"jwtToken\"\n          [user]=\"user\"\n        ></app-ws-data-control>\n\n      </mat-tab>\n\n      <mat-tab label=\"WS - Messaging\">\n\n        <!-- <app-ws-messaging\n        [server]=\"server\"\n        [wsServer]=\"wsServer\"\n        [jwtToken]=\"jwtToken\"\n        [user]=\"user\"\n      ></app-ws-messaging> -->\n\n    </mat-tab>\n\n    <mat-tab label=\"WS - Notifications\" [disabled]=\"true\">\n      <app-ws-notifications></app-ws-notifications>\n      WS - Custom Messaging\n    </mat-tab>\n\n    <mat-tab label=\"WS - AI Messaging\" [disabled]=\"true\">\n      <app-ws-ai-messaging></app-ws-ai-messaging>\n      WS - AI Messaging\n    </mat-tab>\n\n  </mat-tab-group>\n</div>\n\n</div>\n\n", styles: [""], dependencies: [{ kind: "component", type: i1$3.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i1$3.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i3$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: WsDataControlComponent, selector: "app-ws-data-control", inputs: ["server", "wsServer", "jwtToken", "user"] }, { kind: "component", type: WsNotificationsComponent, selector: "app-ws-notifications" }, { kind: "component", type: WsAiMessagingComponent, selector: "app-ws-ai-messaging" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RequestManagerWsDemoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-request-manager-ws-demo', template: "<div style=\"margin: 2rem;\">\n\n  <h2 style=\"display: flex;\">\n    <span style=\"flex:1\">HTTP Request State Manager - Websockets</span>\n    <span *ngIf=\"(connectionStatus$ | async) as connected; else NOT_CONNECTED\">\n      WS -\n      <span style=\"color: green;\">Connected</span>\n    </span>\n    <ng-template #NOT_CONNECTED>\n      <span style=\"color: red;\">Disconnected {{ attempts$ | async }} - {{ nextRetry$ |async }}</span>\n    </ng-template>\n  </h2>\n\n  <div>\n\n    <div *ngIf=\"(user$ | async) as userInfo\">\n      <mat-toolbar>\n        <div style=\"display: flex; flex:1\">\n          <div style=\"flex:1\">{{ userInfo.name }}</div>\n          <div>({{ userInfo.username }})</div>\n        </div>\n      </mat-toolbar>\n    </div>\n\n    <mat-tab-group animationDuration=\"0ms\">\n\n      <mat-tab label=\"WS - Data Control\">\n\n        <div *ngIf=\"(data$ | async) as data\" style=\"margin: 1rem; display: flex; gap: 1rem; flex-direction: column;\">\n\n          <div *ngIf=\"(users$ |async) as users\">\n            <mat-chip-set>\n              <mat-chip *ngFor=\"let user of users\">\n                {{ user.name }}\n              </mat-chip>\n            </mat-chip-set>\n          </div>\n\n          <div style=\"display: flex; gap: 1rem; margin-bottom: 1rem;\">\n            <button mat-stroked-button (click)=\"onGetData()\">Get Data</button>\n            <button mat-stroked-button color=\"accent\" (click)=\"onUpdateData(data)\">Update Data</button>\n            <button mat-stroked-button color=\"warn\" (click)=\"onRemoveData(data)\">Remove Data</button>\n            <button mat-stroked-button color=\"primary\" (click)=\"onAddData()\">Add Data</button>\n          </div>\n\n          <div style=\"display: flex; gap: 1rem; flex-direction: column;\">\n            <div>{{ data | json }}</div>\n            <h2>{{ data.length }}</h2>\n          </div>\n\n        </div>\n\n      </mat-tab>\n\n      <mat-tab label=\"WS - Messaging\">\n\n        <div *ngIf=\"(data$ | async) as data\" style=\"margin: 1rem; display: flex; gap: 1rem; flex-direction: column;\">\n\n          <div *ngIf=\"(user$ | async) as userInfo\">\n\n            <div  *ngIf=\"(users$ | async) as users\">\n\n              <div style=\"display: flex; gap: 1rem\">\n\n                <div style=\"flex:1\" [formGroup]=\"messages\">\n                  <div style=\"display:flex\">\n                    <mat-form-field style=\"flex:1\" appearance=\"outline\">\n                      <mat-label>Users</mat-label>\n                      <mat-select formControlName=\"toUser\">\n                        <mat-option value=\"allChannels\" #selectedUser>\n                          All Users\n                        </mat-option>\n                        <mat-option *ngFor=\"let user of users\" [value]=\"user\">\n                          {{ user.username }}\n                        </mat-option>\n                      </mat-select>\n                    </mat-form-field>\n                  </div>\n                  <div style=\"display:flex\">\n                    <mat-form-field style=\"flex:1\" appearance=\"outline\">\n                      <mat-label>Send a Message</mat-label>\n                      <textarea\n                        matInput placeholder=\"Ex. It makes me feel...\"\n                        formControlName=\"content\"\n                        (keydown.enter)=\"onSendMessage(); $event.preventDefault()\"\n                        [disabled]=\"!isValid\"\n                      ></textarea>\n                    </mat-form-field>\n                  </div>\n                  <div style=\"display:flex; gap: .5rem;\">\n                    <div style=\"flex:1\"></div>\n                    <button mat-stroked-button (click)=\"onSendMessage()\" color=\"warn\">\n                      Send Alert\n                    </button>\n                    <button mat-stroked-button (click)=\"onSendAlert()\">\n                      Send Message\n                    </button>\n                  </div>\n                </div>\n              </div>\n\n              <div *ngIf=\"(chat$ | async) as chat\" style=\"border: thin gray solid; padding: 1rem; margin-top: 1rem;\">\n                <!-- <app-messenger-chat\n                  [user]=\"chat.user\"\n                  [messages]=\"chat.messages\"\n                ></app-messenger-chat> -->\n              </div>\n\n            </div>\n\n          </div>\n\n        </div>\n\n      </mat-tab>\n\n      <mat-tab label=\"WS - Custom Channel Messaging\" [disabled]=\"true\">\n        WS - Custom Channel Messaging\n      </mat-tab>\n\n    </mat-tab-group>\n  </div>\n\n</div>\n\n\n<div style=\"margin: 1rem;\">\n  <h3>\n    user: {{ user$ | async | json}}\n  </h3>\n\n  <h3>\n    users: {{ users$ | async | json}}\n  </h3>\n</div>\n" }]
+            args: [{ selector: 'app-request-manager-ws-demo', standalone: false, template: "<div style=\"margin: 2rem;\">\n\n  <h2 style=\"display: flex;\">\n    <span style=\"flex:1\">HTTP Request State Manager - Websockets</span>\n    @if ((connectionStatus$ | async); as connected) {\n      <span>\n        WS -\n        <span style=\"color: green;\">Connected</span>\n      </span>\n    } @else {\n      <span style=\"color: red;\">Disconnected {{ attempts$ | async }} - {{ nextRetry$ |async }}</span>\n    }\n  </h2>\n\n  <div>\n\n    @if ((user$ | async); as userInfo) {\n      <div>\n        <mat-toolbar>\n          <div style=\"display: flex; flex:1\">\n            <div style=\"flex:1\">{{ userInfo.content.name }}</div>\n            <div>({{ userInfo.content.ldap }})</div>\n          </div>\n        </mat-toolbar>\n      </div>\n    }\n\n    @if ((isPending$ | async)) {\n      <div>\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n      </div>\n    }\n\n    <mat-tab-group animationDuration=\"0ms\">\n\n      <mat-tab label=\"WS - Data Control\">\n        <!-- DATA CONTROL -->\n        <app-ws-data-control\n          [server]=\"server\"\n          [wsServer]=\"wsServer\"\n          [jwtToken]=\"jwtToken\"\n          [user]=\"user\"\n        ></app-ws-data-control>\n\n      </mat-tab>\n\n      <mat-tab label=\"WS - Messaging\">\n\n        <!-- <app-ws-messaging\n        [server]=\"server\"\n        [wsServer]=\"wsServer\"\n        [jwtToken]=\"jwtToken\"\n        [user]=\"user\"\n      ></app-ws-messaging> -->\n\n    </mat-tab>\n\n    <mat-tab label=\"WS - Notifications\" [disabled]=\"true\">\n      <app-ws-notifications></app-ws-notifications>\n      WS - Custom Messaging\n    </mat-tab>\n\n    <mat-tab label=\"WS - AI Messaging\" [disabled]=\"true\">\n      <app-ws-ai-messaging></app-ws-ai-messaging>\n      WS - AI Messaging\n    </mat-tab>\n\n  </mat-tab-group>\n</div>\n\n</div>\n\n" }]
         }], propDecorators: { server: [{
                 type: Input
             }], wsServer: [{
                 type: Input
             }], jwtToken: [{
                 type: Input
+            }], user: [{
+                type: Input
             }] } });
 
 let ClientInfo$1 = class ClientInfo {
@@ -4576,11 +4719,11 @@ class RequestSignalsManagerDemoComponent {
         this.AIType = type;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RequestSignalsManagerDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: RequestSignalsManagerDemoComponent, selector: "app-request-signals-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    <span>HTTP Request Signals Manager</span>\n    <span style=\"margin-left: .5rem;\">\n      <mat-icon color=\"accent\">fiber_new</mat-icon>\n    </span>\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()\"\n    ></mat-progress-bar>\n    <mat-progress-bar mode=\"determinate\"\n      *ngIf=\"pollingState.checked && !isPending()\"\n      [value]=\"countdown()\"\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\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ GET_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\" *ngIf=\"GET_result\">\n      {{ GET_result | 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\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ POST_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\" *ngIf=\"POST_result\">\n      {{ POST_result | 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\" 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_result\">\n     {{ PUT_result | 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\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ DELETE_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\" *ngIf=\"DELETE_result\">\n      {{ DELETE_result | 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_result 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\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ STREAM_AI_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_result\" 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;\">{{STREAM_AI_result}}</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]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i10$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i11.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i12.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i13.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: FileDownloaderComponent, selector: "app-file-downloader", inputs: ["delayError", "apiRequest", "displayErrorMessage", "saveFileAs", "labels", "disabled"], outputs: ["completed", "failed"] }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: RequestSignalsManagerDemoComponent, selector: "app-request-signals-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    <span>HTTP Request Signals Manager</span>\n    <span style=\"margin-left: .5rem;\">\n      <mat-icon color=\"accent\">fiber_new</mat-icon>\n    </span>\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          @for (adapter of sampleAdaptors; track adapter) {\n            <mat-option [value]=\"adapter.value\">\n              {{adapter.label}}\n            </mat-option>\n          }\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          @for (mapper of sampleMappers; track mapper) {\n            <mat-option [value]=\"mapper.value\">\n              {{mapper.label}}\n            </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n    </div>\n    @if (adapterSelect.value || mapperSelect.value) {\n      <div style=\"display: flex; margin-bottom: 2rem;\">\n        <div style=\"flex:1\" class=\"box\">\n          <h3>Adapter (Incoming)</h3>\n          @if (adapterSelect.value) {\n            <div>\n              {{ props(adapterSelect.value) | json }}\n            </div>\n          } @else {\n            No Transformation\n          }\n        </div>\n        <div style=\"flex:1\" class=\"box\">\n          <h3>Mapper (Outgoing)</h3>\n          @if (mapperSelect.value) {\n            <div>\n              {{ props(mapperSelect.value) | json }}\n            </div>\n          } @else {\n            No Transformation\n          }\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        @for (task of headers.controls; track task; let i = $index) {\n          <div [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        }\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        @if (failedState.checked) {\n          <div 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        }\n      </div>\n      <div>\n        <mat-slide-toggle #pollingState>Polling</mat-slide-toggle>\n        @if (pollingState.checked) {\n          <div>\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        }\n      </div>\n    </div>\n  </div>\n\n  <div style=\"margin-bottom: 1rem; margin-top: 2rem;\">\n    @if (isPending()) {\n      <mat-progress-bar mode=\"indeterminate\"\n      ></mat-progress-bar>\n    }\n    @if (pollingState.checked && !isPending()) {\n      <mat-progress-bar mode=\"determinate\"\n        [value]=\"countdown()\"\n      ></mat-progress-bar>\n    }\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    @if (GET_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ GET_error }}</mat-error>\n      </div>\n    }\n\n    @if (GET_result) {\n      <div style=\"margin-top: 1rem;\">\n        {{ GET_result | json }}\n      </div>\n    }\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    @if (POST_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ POST_error }}</mat-error>\n      </div>\n    }\n\n    @if (POST_result) {\n      <div style=\"margin-top: 1rem;\">\n        {{ POST_result | json }}\n      </div>\n    }\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    @if (PUT_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ PUT_error }}</mat-error>\n      </div>\n    }\n\n    <h3>Include Record ID in the RestPath</h3>\n\n    @if (PUT_result) {\n      <div style=\"margin-top: 1rem;\">\n        {{ PUT_result | json }}\n      </div>\n    }\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    @if (DELETE_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ DELETE_error }}</mat-error>\n      </div>\n    }\n\n    @if (DELETE_result) {\n      <div style=\"margin-top: 1rem;\">\n        {{ DELETE_result | json }}\n      </div>\n    }\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    @if (STREAM_result; as data) {\n      <div 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          <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          <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          <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          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n        </table>\n      </div>\n    }\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 -@if (AIType === 1) {\n      <span>STREAMING</span>\n    } 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        @if (AIType === 0) {\n          <span>Server</span>\n        } @else {\n          Local\n        }\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  @if (STREAM_AI_error) {\n    <div style=\"margin-top: .5rem;\">\n      <mat-error>{{ STREAM_AI_error }}</mat-error>\n    </div>\n  }\n\n  @if (AIType === 1) {\n    <div style=\"color: red;\">\n      You must have Ollama active and the 'phi3:latest' model to use this feature.\n    </div>\n  } @else {\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  }\n\n  <div>\n    @if (STREAM_AI_result) {\n      <div 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;\">{{STREAM_AI_result}}</p>\n      </div>\n    }\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          @if (disable.checked) {\n            <span>\n              Enable\n            </span>\n          } @else {\n            Disable\n          }\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$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: 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: ["matColumnDef"] }, { kind: "directive", type: i8.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i10$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i11.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i12.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: FileDownloaderComponent, selector: "app-file-downloader", inputs: ["delayError", "apiRequest", "displayErrorMessage", "saveFileAs", "labels", "disabled"], outputs: ["completed", "failed"] }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RequestSignalsManagerDemoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-request-signals-manager-demo', template: "<div style=\"margin: 2rem;\">\n\n  <h2>\n    <span>HTTP Request Signals Manager</span>\n    <span style=\"margin-left: .5rem;\">\n      <mat-icon color=\"accent\">fiber_new</mat-icon>\n    </span>\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()\"\n    ></mat-progress-bar>\n    <mat-progress-bar mode=\"determinate\"\n      *ngIf=\"pollingState.checked && !isPending()\"\n      [value]=\"countdown()\"\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\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ GET_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\" *ngIf=\"GET_result\">\n      {{ GET_result | 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\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ POST_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\" *ngIf=\"POST_result\">\n      {{ POST_result | 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\" 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_result\">\n     {{ PUT_result | 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\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ DELETE_error }}</mat-error>\n    </div>\n\n    <div style=\"margin-top: 1rem;\" *ngIf=\"DELETE_result\">\n      {{ DELETE_result | 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_result 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\" style=\"margin-top: .5rem;\">\n      <mat-error>{{ STREAM_AI_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_result\" 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;\">{{STREAM_AI_result}}</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"] }]
+            args: [{ selector: 'app-request-signals-manager-demo', standalone: false, template: "<div style=\"margin: 2rem;\">\n\n  <h2>\n    <span>HTTP Request Signals Manager</span>\n    <span style=\"margin-left: .5rem;\">\n      <mat-icon color=\"accent\">fiber_new</mat-icon>\n    </span>\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          @for (adapter of sampleAdaptors; track adapter) {\n            <mat-option [value]=\"adapter.value\">\n              {{adapter.label}}\n            </mat-option>\n          }\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          @for (mapper of sampleMappers; track mapper) {\n            <mat-option [value]=\"mapper.value\">\n              {{mapper.label}}\n            </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n    </div>\n    @if (adapterSelect.value || mapperSelect.value) {\n      <div style=\"display: flex; margin-bottom: 2rem;\">\n        <div style=\"flex:1\" class=\"box\">\n          <h3>Adapter (Incoming)</h3>\n          @if (adapterSelect.value) {\n            <div>\n              {{ props(adapterSelect.value) | json }}\n            </div>\n          } @else {\n            No Transformation\n          }\n        </div>\n        <div style=\"flex:1\" class=\"box\">\n          <h3>Mapper (Outgoing)</h3>\n          @if (mapperSelect.value) {\n            <div>\n              {{ props(mapperSelect.value) | json }}\n            </div>\n          } @else {\n            No Transformation\n          }\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        @for (task of headers.controls; track task; let i = $index) {\n          <div [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        }\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        @if (failedState.checked) {\n          <div 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        }\n      </div>\n      <div>\n        <mat-slide-toggle #pollingState>Polling</mat-slide-toggle>\n        @if (pollingState.checked) {\n          <div>\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        }\n      </div>\n    </div>\n  </div>\n\n  <div style=\"margin-bottom: 1rem; margin-top: 2rem;\">\n    @if (isPending()) {\n      <mat-progress-bar mode=\"indeterminate\"\n      ></mat-progress-bar>\n    }\n    @if (pollingState.checked && !isPending()) {\n      <mat-progress-bar mode=\"determinate\"\n        [value]=\"countdown()\"\n      ></mat-progress-bar>\n    }\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    @if (GET_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ GET_error }}</mat-error>\n      </div>\n    }\n\n    @if (GET_result) {\n      <div style=\"margin-top: 1rem;\">\n        {{ GET_result | json }}\n      </div>\n    }\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    @if (POST_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ POST_error }}</mat-error>\n      </div>\n    }\n\n    @if (POST_result) {\n      <div style=\"margin-top: 1rem;\">\n        {{ POST_result | json }}\n      </div>\n    }\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    @if (PUT_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ PUT_error }}</mat-error>\n      </div>\n    }\n\n    <h3>Include Record ID in the RestPath</h3>\n\n    @if (PUT_result) {\n      <div style=\"margin-top: 1rem;\">\n        {{ PUT_result | json }}\n      </div>\n    }\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    @if (DELETE_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ DELETE_error }}</mat-error>\n      </div>\n    }\n\n    @if (DELETE_result) {\n      <div style=\"margin-top: 1rem;\">\n        {{ DELETE_result | json }}\n      </div>\n    }\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    @if (STREAM_result; as data) {\n      <div 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          <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          <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          <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          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n        </table>\n      </div>\n    }\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 -@if (AIType === 1) {\n      <span>STREAMING</span>\n    } 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        @if (AIType === 0) {\n          <span>Server</span>\n        } @else {\n          Local\n        }\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  @if (STREAM_AI_error) {\n    <div style=\"margin-top: .5rem;\">\n      <mat-error>{{ STREAM_AI_error }}</mat-error>\n    </div>\n  }\n\n  @if (AIType === 1) {\n    <div style=\"color: red;\">\n      You must have Ollama active and the 'phi3:latest' model to use this feature.\n    </div>\n  } @else {\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  }\n\n  <div>\n    @if (STREAM_AI_result) {\n      <div 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;\">{{STREAM_AI_result}}</p>\n      </div>\n    }\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          @if (disable.checked) {\n            <span>\n              Enable\n            </span>\n          } @else {\n            Disable\n          }\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: () => [], propDecorators: { failedState: [{
                 type: ViewChild,
                 args: ["failedState", { static: true }]
@@ -4651,13 +4794,107 @@ class StoreStateManagerDemoComponent {
         this.settingsStateService.getEnum_1().subscribe(data => console.log('DUMP:', data));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StoreStateManagerDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: StoreStateManagerDemoComponent, selector: "app-store-state-manager-demo", providers: [SettingsStateService], ngImport: i0, template: "<div style=\"margin: 2rem;\">\n\n  <h2>\n    <span>Store State Manager</span>\n    <span style=\"margin-left: .5rem;\">\n      <mat-icon color=\"accent\">fiber_new</mat-icon>\n    </span>\n  </h2>\n\n  {{ dataState$ | async | json}}\n\n  <div style=\"display: flex; gap:.5rem; margin-top: 1rem; margin-bottom: 1rem;\">\n    <button mat-stroked-button (click)=\"onUpdateEnum_1()\">Update Start</button>\n    <button mat-stroked-button (click)=\"onUpdateEnum_2()\">Update End</button>\n    <button mat-stroked-button (click)=\"onGetEnum_1()\">Dump</button>\n  </div>\n\n  <div>\n    <h3 style=\"margin: 0;\">Enum 1</h3>\n    {{ dataEnum$ | async | json}}\n  </div>\n\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "18.2.14", type: StoreStateManagerDemoComponent, selector: "app-store-state-manager-demo", providers: [SettingsStateService], ngImport: i0, template: "<div style=\"margin: 2rem;\">\n\n  <h2>\n    <span>Store State Manager</span>\n    <span style=\"margin-left: .5rem;\">\n      <mat-icon color=\"accent\">fiber_new</mat-icon>\n    </span>\n  </h2>\n\n  {{ dataState$ | async | json}}\n\n  <div style=\"display: flex; gap:.5rem; margin-top: 1rem; margin-bottom: 1rem;\">\n    <button mat-stroked-button (click)=\"onUpdateEnum_1()\">Update Start</button>\n    <button mat-stroked-button (click)=\"onUpdateEnum_2()\">Update End</button>\n    <button mat-stroked-button (click)=\"onGetEnum_1()\">Dump</button>\n  </div>\n\n  <div>\n    <h3 style=\"margin: 0;\">Enum 1</h3>\n    {{ dataEnum$ | async | json}}\n  </div>\n\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StoreStateManagerDemoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-store-state-manager-demo', providers: [SettingsStateService], template: "<div style=\"margin: 2rem;\">\n\n  <h2>\n    <span>Store State Manager</span>\n    <span style=\"margin-left: .5rem;\">\n      <mat-icon color=\"accent\">fiber_new</mat-icon>\n    </span>\n  </h2>\n\n  {{ dataState$ | async | json}}\n\n  <div style=\"display: flex; gap:.5rem; margin-top: 1rem; margin-bottom: 1rem;\">\n    <button mat-stroked-button (click)=\"onUpdateEnum_1()\">Update Start</button>\n    <button mat-stroked-button (click)=\"onUpdateEnum_2()\">Update End</button>\n    <button mat-stroked-button (click)=\"onGetEnum_1()\">Dump</button>\n  </div>\n\n  <div>\n    <h3 style=\"margin: 0;\">Enum 1</h3>\n    {{ dataEnum$ | async | json}}\n  </div>\n\n</div>\n" }]
+            args: [{ selector: 'app-store-state-manager-demo', providers: [SettingsStateService], standalone: false, template: "<div style=\"margin: 2rem;\">\n\n  <h2>\n    <span>Store State Manager</span>\n    <span style=\"margin-left: .5rem;\">\n      <mat-icon color=\"accent\">fiber_new</mat-icon>\n    </span>\n  </h2>\n\n  {{ dataState$ | async | json}}\n\n  <div style=\"display: flex; gap:.5rem; margin-top: 1rem; margin-bottom: 1rem;\">\n    <button mat-stroked-button (click)=\"onUpdateEnum_1()\">Update Start</button>\n    <button mat-stroked-button (click)=\"onUpdateEnum_2()\">Update End</button>\n    <button mat-stroked-button (click)=\"onGetEnum_1()\">Dump</button>\n  </div>\n\n  <div>\n    <h3 style=\"margin: 0;\">Enum 1</h3>\n    {{ dataEnum$ | async | json}}\n  </div>\n\n</div>\n" }]
         }] });
 
+class WsMessagingComponent {
+    constructor() {
+        this.fb = inject(FormBuilder);
+        this.stateRequestServiceDemo = inject(StateRequestServiceDemo);
+        this.user$ = this.stateRequestServiceDemo.user$;
+        this.users$ = this.stateRequestServiceDemo.userList$;
+        this.data$ = this.stateRequestServiceDemo.data$;
+        this.messages = this.fb.group({
+            toUser: this.fb.control(null, Validators.required),
+            content: this.fb.control(null, Validators.required),
+        });
+        this.communicationMessages$ = this.stateRequestServiceDemo.communicationMessages$;
+        this.latestCommunicationMessages$ = this.stateRequestServiceDemo.latestCommunicationMessages$;
+        this.chat$ = combineLatest([this.user$, this.communicationMessages$])
+            .pipe(map$1(([user, messages]) => ({ user, messages })), map$1(obj => {
+            if (!obj.user)
+                return EMPTY;
+            // const mainUser = UserName.adapt({
+            //     id: obj.user.username,
+            //     first: obj.user?.name?.first,
+            //     last: obj.user?.name?.last,
+            // })
+            const mainUser = '';
+            const messages = obj.messages.map((item) => {
+                if (item.toUser === 'allChannels') {
+                    // item.toUser = UserName.adapt({
+                    //     id: '',
+                    //     first: 'All Users',
+                    //     last: '',
+                    // })
+                }
+                // return Message.adapt({
+                //     fromUser: {
+                //       id: item.fromUser.username,
+                //       first: item.fromUser?.name?.first,
+                //       last: item.fromUser?.name?.last,
+                //     },
+                //     toUser: {
+                //       id: item.toUser.username,
+                //       first: item.toUser?.name?.first,
+                //       last: item.toUser?.name?.last,
+                //     },
+                //     content: item.content,
+                //     date: item.issued,
+                // })
+            });
+            return { user: mainUser, messages };
+        }));
+    }
+    get toUser() {
+        return this.messages.get('toUser');
+    }
+    get content() {
+        return this.messages.get('content');
+    }
+    get isValid() {
+        return this.toUser.valid;
+    }
+    ngOnInit() {
+        this.stateRequestServiceDemo.updateConnection(this.server, this.wsServer, this.jwtToken, this.user);
+        // this.stateRequestServiceDemo.getData()
+    }
+    onSendMessage() {
+        this.messages.markAllAsTouched();
+        if (this.messages.invalid)
+            return;
+        const message = ChannelMessage.adapt(this.messages.value);
+        this.stateRequestServiceDemo.sendMessage(message);
+        this.content.reset();
+    }
+    onSendAlert() {
+        this.messages.markAllAsTouched();
+        if (this.messages.invalid)
+            return;
+        const message = ChannelMessage.adapt({ ...this.messages.value, type: CommunicationType.ALERT });
+        this.stateRequestServiceDemo.sendMessage(message);
+        this.content.reset();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WsMessagingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: WsMessagingComponent, selector: "app-ws-messaging", inputs: { server: "server", wsServer: "wsServer", jwtToken: "jwtToken", user: "user" }, ngImport: i0, template: "@if ((data$ | async); as data) {\n  <div style=\"margin: 1rem; display: flex; gap: 1rem; flex-direction: column;\">\n    @if ((user$ | async); as userInfo) {\n      <div>\n        @if ((users$ | async); as users) {\n          <div >\n            <div style=\"display: flex; gap: 1rem\">\n              <div style=\"flex:1\" [formGroup]=\"messages\">\n                <div style=\"display:flex\">\n                  <mat-form-field style=\"flex:1\" appearance=\"outline\">\n                    <mat-label>Users</mat-label>\n                    <mat-select formControlName=\"toUser\">\n                      <mat-option value=\"allChannels\" #selectedUser>\n                        All Users\n                      </mat-option>\n                      @for (user of users; track user) {\n                        <mat-option [value]=\"user\">\n                          {{ user.username }}\n                        </mat-option>\n                      }\n                    </mat-select>\n                  </mat-form-field>\n                </div>\n                <div style=\"display:flex\">\n                  <mat-form-field style=\"flex:1\" appearance=\"outline\">\n                    <mat-label>Send a Message</mat-label>\n                    <textarea\n                      matInput placeholder=\"Ex. It makes me feel...\"\n                      formControlName=\"content\"\n                      (keydown.enter)=\"onSendMessage(); $event.preventDefault()\"\n                      [disabled]=\"!isValid\"\n                    ></textarea>\n                  </mat-form-field>\n                </div>\n                <div style=\"display:flex; gap: .5rem;\">\n                  <div style=\"flex:1\"></div>\n                  <button mat-stroked-button (click)=\"onSendMessage()\" color=\"warn\">\n                    Send Alert\n                  </button>\n                  <button mat-stroked-button (click)=\"onSendAlert()\">\n                    Send Message\n                  </button>\n                </div>\n              </div>\n            </div>\n            @if ((chat$ | async); as chat) {\n              <div style=\"border: thin gray solid; padding: 1rem; margin-top: 1rem;\">\n                <!-- <app-messenger-chat\n                [user]=\"chat.user\"\n                [messages]=\"chat.messages\"\n              ></app-messenger-chat> -->\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { 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" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WsMessagingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-ws-messaging', standalone: false, template: "@if ((data$ | async); as data) {\n  <div style=\"margin: 1rem; display: flex; gap: 1rem; flex-direction: column;\">\n    @if ((user$ | async); as userInfo) {\n      <div>\n        @if ((users$ | async); as users) {\n          <div >\n            <div style=\"display: flex; gap: 1rem\">\n              <div style=\"flex:1\" [formGroup]=\"messages\">\n                <div style=\"display:flex\">\n                  <mat-form-field style=\"flex:1\" appearance=\"outline\">\n                    <mat-label>Users</mat-label>\n                    <mat-select formControlName=\"toUser\">\n                      <mat-option value=\"allChannels\" #selectedUser>\n                        All Users\n                      </mat-option>\n                      @for (user of users; track user) {\n                        <mat-option [value]=\"user\">\n                          {{ user.username }}\n                        </mat-option>\n                      }\n                    </mat-select>\n                  </mat-form-field>\n                </div>\n                <div style=\"display:flex\">\n                  <mat-form-field style=\"flex:1\" appearance=\"outline\">\n                    <mat-label>Send a Message</mat-label>\n                    <textarea\n                      matInput placeholder=\"Ex. It makes me feel...\"\n                      formControlName=\"content\"\n                      (keydown.enter)=\"onSendMessage(); $event.preventDefault()\"\n                      [disabled]=\"!isValid\"\n                    ></textarea>\n                  </mat-form-field>\n                </div>\n                <div style=\"display:flex; gap: .5rem;\">\n                  <div style=\"flex:1\"></div>\n                  <button mat-stroked-button (click)=\"onSendMessage()\" color=\"warn\">\n                    Send Alert\n                  </button>\n                  <button mat-stroked-button (click)=\"onSendAlert()\">\n                    Send Message\n                  </button>\n                </div>\n              </div>\n            </div>\n            @if ((chat$ | async); as chat) {\n              <div style=\"border: thin gray solid; padding: 1rem; margin-top: 1rem;\">\n                <!-- <app-messenger-chat\n                [user]=\"chat.user\"\n                [messages]=\"chat.messages\"\n              ></app-messenger-chat> -->\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n}\n" }]
+        }], propDecorators: { server: [{
+                type: Input
+            }], wsServer: [{
+                type: Input
+            }], jwtToken: [{
+                type: Input
+            }], user: [{
+                type: Input
+            }] } });
+
 // import { MessengerChatModule } from 'src/app/components/messenger-chat/messenger-chat.module';
 // import { StoreStateManagerModule } from "src/app/beta_components/store-state-manager/store-state-manager.module";
 class HttpRequestManagerModule {
@@ -4679,7 +4916,11 @@ class HttpRequestManagerModule {
             LocalStorageSignalsDemoComponent,
             RequestManagerWsDemoComponent,
             StoreStateManagerDemoComponent,
-            DatabaseDataDemoComponent], imports: [CommonModule,
+            DatabaseDataDemoComponent,
+            WsDataControlComponent,
+            WsMessagingComponent,
+            WsNotificationsComponent,
+            WsAiMessagingComponent], imports: [CommonModule,
             ToastMessageDisplayModule,
             FormsModule,
             ReactiveFormsModule,
@@ -4770,7 +5011,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         RequestManagerWsDemoComponent,
                         StoreStateManagerDemoComponent,
                         DatabaseDataDemoComponent,
-                        // DatabaseDataDemoComponent,
+                        WsDataControlComponent,
+                        WsMessagingComponent,
+                        WsNotificationsComponent,
+                        WsAiMessagingComponent,
                     ],
                     exports: [
                         HttpRequestServicesDemoComponent,
@@ -5113,11 +5357,11 @@ class RequestManagerStateDemoComponent {
         this.prompts = [];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RequestManagerStateDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: RequestManagerStateDemoComponent, selector: "app-request-manager-state-demo", inputs: { server: "server", adapter: "adapter", mapper: "mapper" }, providers: [StateManagerDemoService, HTTPManagerService], 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      </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]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i10$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i11.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i12.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i13.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }, { kind: "pipe", type: i1$1.TitleCasePipe, name: "titlecase" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: RequestManagerStateDemoComponent, selector: "app-request-manager-state-demo", inputs: { server: "server", adapter: "adapter", mapper: "mapper" }, providers: [StateManagerDemoService, HTTPManagerService], 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          @for (adapter of sampleAdaptors; track adapter) {\n            <mat-option [value]=\"adapter.value\">\n              {{adapter.label}}\n            </mat-option>\n          }\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          @for (mapper of sampleMappers; track mapper) {\n            <mat-option [value]=\"mapper.value\">\n              {{mapper.label}}\n            </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n    </div>\n\n    @if (adapterSelect.value || mapperSelect.value) {\n      <div style=\"display: flex; margin-bottom: 2rem;\">\n        <div style=\"flex:1\" class=\"box\">\n          <h3>Adapter (Incoming)</h3>\n          @if (adapterSelect.value) {\n            <div>\n              {{ props(adapterSelect.value) | json }}\n            </div>\n          } @else {\n            No Transformation\n          }\n        </div>\n        <div style=\"flex:1\" class=\"box\">\n          <h3>Mapper (Outgoing)</h3>\n          @if (mapperSelect.value) {\n            <div>\n              {{ props(mapperSelect.value) | json }}\n            </div>\n          } @else {\n            No Transformation\n          }\n        </div>\n      </div>\n    }\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        @for (task of headers.controls; track task; let i = $index) {\n          <div [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        }\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        @if (failedState.checked) {\n          <div 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        }\n      </div>\n      <div>\n        <mat-slide-toggle #pollingState>Polling</mat-slide-toggle>\n        @if (pollingState.checked) {\n          <div>\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        }\n      </div>\n      <div>\n        <mat-slide-toggle #DBState>Database Storage</mat-slide-toggle>\n        @if (DBState.checked) {\n          <div 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        }\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        @if ((error$ | async); as error) {\n          <mat-error>\n            {{ error }}\n          </mat-error>\n        }\n      </div>\n    </div>\n  </div>\n\n  <div style=\"margin-bottom: 1rem; margin-top: 2rem;\">\n    @if ((isPending$ | async)) {\n      <mat-progress-bar mode=\"indeterminate\"\n      ></mat-progress-bar>\n    }\n    @if (pollingState.checked) {\n      <div>\n        @if (!(isPending$ | async) && (this.countdown$ | async) || -1 > 0) {\n          <mat-progress-bar mode=\"determinate\"\n            [value]=\"(this.countdown$ | async)\"\n          ></mat-progress-bar>\n        }\n      </div>\n    }\n\n  </div>\n\n  @if ((GET$ | async); as data) {\n    <div style=\"margin-top: 2rem\">\n      <div style=\"display: flex;\">\n        <h2 style=\"flex:1;\">CURRENT STATE ({{ dataType }})</h2>\n      </div>\n      @if (data.length > 1) {\n        <div>\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              @for (item of data; track item) {\n                <mat-option [value]=\"item\">\n                  {{item.name || (item.first_name) | titlecase}}\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n      }\n      @if ((dataObservable$ | async); as dataRecord) {\n        <div>\n          @if ((selectedRecord$ | async); as record) {\n            <div>\n              {{ record | json }}\n            </div>\n          } @else {\n            No Record Selected from State\n          }\n        </div>\n      }\n      <div style=\"margin-top: 1rem;\">\n        @if (data !== null && data?.length > 0) {\n          <span>\n            State contains a Total of {{ data.length }} Records\n          </span>\n        } @else {\n          No Records\n        }\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        </div>\n      </div>\n    </div>\n  }\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    @if ((GET_error$ | async); as get_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ get_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(GET$ | async) | jsonv\"></div> -->\n      @if ((GET$ | async); as getData) {\n        <div>{{ getData | json }}</div>\n      }\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    @if ((POST_error$ | async); as post_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ post_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(POST$ | async) | jsonv\"></div> -->\n      @if ((POST$ | async); as postData) {\n        <div>{{ postData | json }}</div>\n      }\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    @if ((PUT_error$ | async); as put_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ put_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(PUT$ | async) | jsonv\"></div> -->\n      @if ((PUT$ | async); as putData) {\n        <div>{{ putData | json }}</div>\n      }\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    @if ((DELETE_error$ | async); as delete_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ delete_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(DELETE$ | async) | jsonv\"></div> -->\n      @if ((DELETE$ | async); as deleteData) {\n        <div>{{ deleteData | json }}</div>\n      }\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    @if ((STREAM_error$ | async); as stream_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ stream_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      @if ((STREAM$ | async); as data) {\n        <div 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            <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            <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            <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            <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n          </table>\n        </div>\n      }\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$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], 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: ["matColumnDef"] }, { kind: "directive", type: i8.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i10$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: 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" }, { kind: "pipe", type: i1$1.TitleCasePipe, name: "titlecase" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RequestManagerStateDemoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-request-manager-state-demo', providers: [StateManagerDemoService, HTTPManagerService], 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      </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"] }]
+            args: [{ selector: 'app-request-manager-state-demo', providers: [StateManagerDemoService, HTTPManagerService], standalone: false, 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          @for (adapter of sampleAdaptors; track adapter) {\n            <mat-option [value]=\"adapter.value\">\n              {{adapter.label}}\n            </mat-option>\n          }\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          @for (mapper of sampleMappers; track mapper) {\n            <mat-option [value]=\"mapper.value\">\n              {{mapper.label}}\n            </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n    </div>\n\n    @if (adapterSelect.value || mapperSelect.value) {\n      <div style=\"display: flex; margin-bottom: 2rem;\">\n        <div style=\"flex:1\" class=\"box\">\n          <h3>Adapter (Incoming)</h3>\n          @if (adapterSelect.value) {\n            <div>\n              {{ props(adapterSelect.value) | json }}\n            </div>\n          } @else {\n            No Transformation\n          }\n        </div>\n        <div style=\"flex:1\" class=\"box\">\n          <h3>Mapper (Outgoing)</h3>\n          @if (mapperSelect.value) {\n            <div>\n              {{ props(mapperSelect.value) | json }}\n            </div>\n          } @else {\n            No Transformation\n          }\n        </div>\n      </div>\n    }\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        @for (task of headers.controls; track task; let i = $index) {\n          <div [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        }\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        @if (failedState.checked) {\n          <div 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        }\n      </div>\n      <div>\n        <mat-slide-toggle #pollingState>Polling</mat-slide-toggle>\n        @if (pollingState.checked) {\n          <div>\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        }\n      </div>\n      <div>\n        <mat-slide-toggle #DBState>Database Storage</mat-slide-toggle>\n        @if (DBState.checked) {\n          <div 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        }\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        @if ((error$ | async); as error) {\n          <mat-error>\n            {{ error }}\n          </mat-error>\n        }\n      </div>\n    </div>\n  </div>\n\n  <div style=\"margin-bottom: 1rem; margin-top: 2rem;\">\n    @if ((isPending$ | async)) {\n      <mat-progress-bar mode=\"indeterminate\"\n      ></mat-progress-bar>\n    }\n    @if (pollingState.checked) {\n      <div>\n        @if (!(isPending$ | async) && (this.countdown$ | async) || -1 > 0) {\n          <mat-progress-bar mode=\"determinate\"\n            [value]=\"(this.countdown$ | async)\"\n          ></mat-progress-bar>\n        }\n      </div>\n    }\n\n  </div>\n\n  @if ((GET$ | async); as data) {\n    <div style=\"margin-top: 2rem\">\n      <div style=\"display: flex;\">\n        <h2 style=\"flex:1;\">CURRENT STATE ({{ dataType }})</h2>\n      </div>\n      @if (data.length > 1) {\n        <div>\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              @for (item of data; track item) {\n                <mat-option [value]=\"item\">\n                  {{item.name || (item.first_name) | titlecase}}\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n      }\n      @if ((dataObservable$ | async); as dataRecord) {\n        <div>\n          @if ((selectedRecord$ | async); as record) {\n            <div>\n              {{ record | json }}\n            </div>\n          } @else {\n            No Record Selected from State\n          }\n        </div>\n      }\n      <div style=\"margin-top: 1rem;\">\n        @if (data !== null && data?.length > 0) {\n          <span>\n            State contains a Total of {{ data.length }} Records\n          </span>\n        } @else {\n          No Records\n        }\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        </div>\n      </div>\n    </div>\n  }\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    @if ((GET_error$ | async); as get_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ get_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(GET$ | async) | jsonv\"></div> -->\n      @if ((GET$ | async); as getData) {\n        <div>{{ getData | json }}</div>\n      }\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    @if ((POST_error$ | async); as post_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ post_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(POST$ | async) | jsonv\"></div> -->\n      @if ((POST$ | async); as postData) {\n        <div>{{ postData | json }}</div>\n      }\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    @if ((PUT_error$ | async); as put_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ put_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(PUT$ | async) | jsonv\"></div> -->\n      @if ((PUT$ | async); as putData) {\n        <div>{{ putData | json }}</div>\n      }\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    @if ((DELETE_error$ | async); as delete_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ delete_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(DELETE$ | async) | jsonv\"></div> -->\n      @if ((DELETE$ | async); as deleteData) {\n        <div>{{ deleteData | json }}</div>\n      }\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    @if ((STREAM_error$ | async); as stream_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ stream_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      @if ((STREAM$ | async); as data) {\n        <div 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            <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            <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            <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            <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n          </table>\n        </div>\n      }\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: () => [], propDecorators: { server: [{
                 type: Input
             }], adapter: [{
@@ -5414,11 +5658,11 @@ class RequestManagerDemoComponent {
         this.AIType = type;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RequestManagerDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: RequestManagerDemoComponent, selector: "app-request-manager-demo", inputs: { server: "server", adapter: "adapter", mapper: "mapper" }, providers: [HTTPManagerService], 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]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i10$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i11.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i12.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i13.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: RequestManagerDemoComponent, selector: "app-request-manager-demo", inputs: { server: "server", adapter: "adapter", mapper: "mapper" }, providers: [HTTPManagerService], 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          @for (adapter of sampleAdaptors; track adapter) {\n            <mat-option [value]=\"adapter.value\">\n              {{adapter.label}}\n            </mat-option>\n          }\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          @for (mapper of sampleMappers; track mapper) {\n            <mat-option [value]=\"mapper.value\">\n              {{mapper.label}}\n            </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n    </div>\n    @if (adapterSelect.value || mapperSelect.value) {\n      <div style=\"display: flex; margin-bottom: 2rem;\">\n        <div style=\"flex:1\" class=\"box\">\n          <h3>Adapter (Incoming)</h3>\n          @if (adapterSelect.value) {\n            <div>\n              {{ props(adapterSelect.value) | json }}\n            </div>\n          } @else {\n            No Transformation\n          }\n        </div>\n        <div style=\"flex:1\" class=\"box\">\n          <h3>Mapper (Outgoing)</h3>\n          @if (mapperSelect.value) {\n            <div>\n              {{ props(mapperSelect.value) | json }}\n            </div>\n          } @else {\n            No Transformation\n          }\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        @for (task of headers.controls; track task; let i = $index) {\n          <div [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        }\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        @if (failedState.checked) {\n          <div 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        }\n      </div>\n      <div>\n        <mat-slide-toggle #pollingState>Polling</mat-slide-toggle>\n        @if (pollingState.checked) {\n          <div>\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        }\n      </div>\n    </div>\n  </div>\n\n  <div style=\"margin-bottom: 1rem; margin-top: 2rem;\">\n    @if ((isPending$ | async)) {\n      <mat-progress-bar mode=\"indeterminate\"\n      ></mat-progress-bar>\n    }\n    @if (pollingState.checked && !(isPending$ | async)) {\n      <mat-progress-bar mode=\"determinate\"\n        [value]=\"(this.countdown$ | async)\"\n      ></mat-progress-bar>\n    }\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    @if ((GET_error$ | async); as get_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ get_error }}</mat-error>\n      </div>\n    }\n\n    @if ((GET$ | async); as dataRecord) {\n      <div style=\"margin-top: 1rem;\">\n        <!-- <div [innerHTML]=\"(GET$ | async) | jsonv\"></div> -->\n        {{ dataRecord | json }}\n      </div>\n    }\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    @if ((POST_error$ | async); as post_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ post_error }}</mat-error>\n      </div>\n    }\n\n    @if ((POST$ | async); as dataRecord) {\n      <div style=\"margin-top: 1rem;\">\n        <!-- <div [innerHTML]=\"(POST$ | async) | jsonv\"></div> -->\n        {{ dataRecord | json }}\n      </div>\n    }\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    @if ((PUT_error$ | async); as put_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ put_error }}</mat-error>\n      </div>\n    }\n\n    <h3>Include Record ID in the RestPath</h3>\n\n    @if ((PUT$ | async); as dataRecord) {\n      <div style=\"margin-top: 1rem;\">\n        <!-- <div [innerHTML]=\"(PUT$ | async) | jsonv\"></div> -->\n        {{ dataRecord | json }}\n      </div>\n    }\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    @if ((DELETE_error$ | async); as delete_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ delete_error }}</mat-error>\n      </div>\n    }\n\n    @if ((DELETE$ | async); as dataRecord) {\n      <div style=\"margin-top: 1rem;\">\n        <!-- <div [innerHTML]=\"(DELETE$ | async) | jsonv\"></div> -->\n        {{ dataRecord | json }}\n      </div>\n    }\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    @if ((STREAM$ | async); as data) {\n      <div 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          <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          <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          <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          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n        </table>\n      </div>\n    }\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 -@if (AIType === 1) {\n      <span>STREAMING</span>\n    } 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        @if (AIType === 0) {\n          <span>Server</span>\n        } @else {\n          Local\n        }\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  @if ((STREAM_AI_error$ | async); as stream_error) {\n    <div style=\"margin-top: .5rem;\">\n      <mat-error>{{ stream_error }}</mat-error>\n    </div>\n  }\n\n  @if (AIType === 1) {\n    <div style=\"color: red;\">\n      You must have Ollama active and the 'phi3:latest' model to use this feature.\n    </div>\n  } @else {\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  }\n\n  <div>\n    @if ((STREAM_AI$ | async); as data) {\n      <div 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    }\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          @if (disable.checked) {\n            <span>\n              Enable\n            </span>\n          } @else {\n            Disable\n          }\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$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: 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: ["matColumnDef"] }, { kind: "directive", type: i8.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i10$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i11.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i12.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: FileDownloaderComponent, selector: "app-file-downloader", inputs: ["delayError", "apiRequest", "displayErrorMessage", "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: "18.2.14", ngImport: i0, type: RequestManagerDemoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-request-manager-demo', providers: [HTTPManagerService], 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"] }]
+            args: [{ selector: 'app-request-manager-demo', providers: [HTTPManagerService], standalone: false, 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          @for (adapter of sampleAdaptors; track adapter) {\n            <mat-option [value]=\"adapter.value\">\n              {{adapter.label}}\n            </mat-option>\n          }\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          @for (mapper of sampleMappers; track mapper) {\n            <mat-option [value]=\"mapper.value\">\n              {{mapper.label}}\n            </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n    </div>\n    @if (adapterSelect.value || mapperSelect.value) {\n      <div style=\"display: flex; margin-bottom: 2rem;\">\n        <div style=\"flex:1\" class=\"box\">\n          <h3>Adapter (Incoming)</h3>\n          @if (adapterSelect.value) {\n            <div>\n              {{ props(adapterSelect.value) | json }}\n            </div>\n          } @else {\n            No Transformation\n          }\n        </div>\n        <div style=\"flex:1\" class=\"box\">\n          <h3>Mapper (Outgoing)</h3>\n          @if (mapperSelect.value) {\n            <div>\n              {{ props(mapperSelect.value) | json }}\n            </div>\n          } @else {\n            No Transformation\n          }\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        @for (task of headers.controls; track task; let i = $index) {\n          <div [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        }\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        @if (failedState.checked) {\n          <div 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        }\n      </div>\n      <div>\n        <mat-slide-toggle #pollingState>Polling</mat-slide-toggle>\n        @if (pollingState.checked) {\n          <div>\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        }\n      </div>\n    </div>\n  </div>\n\n  <div style=\"margin-bottom: 1rem; margin-top: 2rem;\">\n    @if ((isPending$ | async)) {\n      <mat-progress-bar mode=\"indeterminate\"\n      ></mat-progress-bar>\n    }\n    @if (pollingState.checked && !(isPending$ | async)) {\n      <mat-progress-bar mode=\"determinate\"\n        [value]=\"(this.countdown$ | async)\"\n      ></mat-progress-bar>\n    }\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    @if ((GET_error$ | async); as get_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ get_error }}</mat-error>\n      </div>\n    }\n\n    @if ((GET$ | async); as dataRecord) {\n      <div style=\"margin-top: 1rem;\">\n        <!-- <div [innerHTML]=\"(GET$ | async) | jsonv\"></div> -->\n        {{ dataRecord | json }}\n      </div>\n    }\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    @if ((POST_error$ | async); as post_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ post_error }}</mat-error>\n      </div>\n    }\n\n    @if ((POST$ | async); as dataRecord) {\n      <div style=\"margin-top: 1rem;\">\n        <!-- <div [innerHTML]=\"(POST$ | async) | jsonv\"></div> -->\n        {{ dataRecord | json }}\n      </div>\n    }\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    @if ((PUT_error$ | async); as put_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ put_error }}</mat-error>\n      </div>\n    }\n\n    <h3>Include Record ID in the RestPath</h3>\n\n    @if ((PUT$ | async); as dataRecord) {\n      <div style=\"margin-top: 1rem;\">\n        <!-- <div [innerHTML]=\"(PUT$ | async) | jsonv\"></div> -->\n        {{ dataRecord | json }}\n      </div>\n    }\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    @if ((DELETE_error$ | async); as delete_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ delete_error }}</mat-error>\n      </div>\n    }\n\n    @if ((DELETE$ | async); as dataRecord) {\n      <div style=\"margin-top: 1rem;\">\n        <!-- <div [innerHTML]=\"(DELETE$ | async) | jsonv\"></div> -->\n        {{ dataRecord | json }}\n      </div>\n    }\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    @if ((STREAM$ | async); as data) {\n      <div 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          <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          <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          <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          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n        </table>\n      </div>\n    }\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 -@if (AIType === 1) {\n      <span>STREAMING</span>\n    } 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        @if (AIType === 0) {\n          <span>Server</span>\n        } @else {\n          Local\n        }\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  @if ((STREAM_AI_error$ | async); as stream_error) {\n    <div style=\"margin-top: .5rem;\">\n      <mat-error>{{ stream_error }}</mat-error>\n    </div>\n  }\n\n  @if (AIType === 1) {\n    <div style=\"color: red;\">\n      You must have Ollama active and the 'phi3:latest' model to use this feature.\n    </div>\n  } @else {\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  }\n\n  <div>\n    @if ((STREAM_AI$ | async); as data) {\n      <div 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    }\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          @if (disable.checked) {\n            <span>\n              Enable\n            </span>\n          } @else {\n            Disable\n          }\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: () => [], propDecorators: { server: [{
                 type: Input
             }], adapter: [{
@@ -5574,11 +5818,11 @@ class LocalStorageDemoComponent {
         this.localStorageManagerService.resetStore();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LocalStorageDemoComponent, deps: [{ token: CONFIG_SETTINGS_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i10.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i10.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i11.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i12.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i13.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "pipe", type: i1$1.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: "18.2.14", 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: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: 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: ["matColumnDef"] }, { kind: "directive", type: i8.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i10.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i10.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i10$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i11.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i12.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LocalStorageDemoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-local-storage-demo', encapsulation: ViewEncapsulation.None, template: "<div style=\"margin: 2rem;\">\n\n  <div style=\"display: flex; gap: 1rem\">\n    <h2 style=\"padding-top: .5rem; display: flex;\">\n      <div style=\"padding-top: .5rem;\">Local Storage Manager</div>\n      <div>\n        <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n          <mat-icon>info</mat-icon>\n        </button>\n      </div>\n    </h2>\n    <span style=\"flex:1\"></span>\n    <div style=\"padding-top: .25rem;\">\n      <mat-button-toggle-group name=\"storage\" [formControl]=\"typeControl\" (change)=\"onCancel()\">\n        <mat-button-toggle value=\"0\">Local Storage</mat-button-toggle>\n        <mat-button-toggle value=\"1\">Session Storage</mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n    <div style=\"margin-top: .25rem;\">\n      <button mat-icon-button (click)=\"onCreate()\">\n        <mat-icon>add</mat-icon>\n      </button>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"storeProps?.storageName || storeProps?.storageSettingsName\">\n    <div style=\"display: flex; gap: .5rem; flex-direction: column; border: gray solid thin; background-color: whitesmoke; padding: 1rem;\"\n    >\n      <div style=\"display: flex;\">\n        <div *ngIf=\"storeProps?.storageSettingsName\" style=\"flex:1\">\n          Database: <b>{{ storeProps?.storageSettingsName }}</b>\n        </div>\n        <div *ngIf=\"storeProps?.storageName\" style=\"flex:1\">\n          Data: <b>{{ storeProps?.storageName }}</b>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <div style=\"margin-top: 2rem;\" [formGroup]=\"newStoreForm\" *ngIf=\"create; else LIST\">\n\n    <h2>Create Store</h2>\n\n    <div style=\"display: flex; gap: 1rem;\">\n      <div style=\"flex:1\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Store Name</mat-label>\n          <input matInput placeholder=\"sample\" formControlName=\"name\">\n        </mat-form-field>\n      </div>\n      <div>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Expires In...</mat-label>\n          <mat-select formControlName=\"expiresIn\">\n            <mat-option value=\"0\">None</mat-option>\n            <mat-option value=\"30s\">30 Seconds</mat-option>\n            <mat-option value=\"1mn\">1 Minute</mat-option>\n            <mat-option value=\"1hr\">1 Hour</mat-option>\n            <mat-option value=\"1d\">1 Day</mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <div style=\"margin-top: 1rem;\">\n        <mat-slide-toggle formControlName=\"encrypted\">Encrypted</mat-slide-toggle>\n      </div>\n    </div>\n\n    <div style=\"display: flex;\">\n      <mat-form-field appearance=\"outline\" style=\"flex: 1;\">\n        <mat-label>Data (Must be an Object or Array of any)</mat-label>\n        <textarea matInput placeholder=\"[]\" formControlName=\"data\" #json></textarea>\n      </mat-form-field>\n    </div>\n    <mat-error *ngIf=\"!isValidJSON(json.value)\">Not Valid Data</mat-error>\n\n    <div style=\"display: flex;\">\n      <span style=\"flex:1\"></span>\n      <button mat-stroked-button (click)=\"onCreateStore()\" [disabled]=\"!(isValid && isValidJSON(json.value))\">\n        Save Store\n      </button>\n    </div>\n\n  </div>\n\n  <ng-template #LIST>\n\n    <div style=\"margin-top: 1rem;\">\n      <mat-divider></mat-divider>\n    </div>\n{{ settings$ | async | json }}\n    <div *ngIf=\"filterData(settings$ | async) as data\">\n      <ng-container *ngIf=\"data.length > 0; else NO_DATA\">\n        <table mat-table [dataSource]=\"data\">\n          <ng-container matColumnDef=\"name\">\n            <th mat-header-cell *matHeaderCellDef> Store </th>\n            <td mat-cell *matCellDef=\"let element\" style=\"font-weight: bold; text-transform: uppercase;\"> {{element.name}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"id\">\n            <th mat-header-cell *matHeaderCellDef> ID </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.id}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"encrypted\">\n            <th mat-header-cell *matHeaderCellDef style=\"text-align: center;\"> Encrypted </th>\n            <td mat-cell *matCellDef=\"let element\" style=\"text-align: center;\">\n              <ng-container *ngIf=\"element.options.encrypted; else NO\">YES</ng-container>\n              <ng-template #NO><span style=\"color:gray\">NO</span></ng-template>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"expires\">\n            <th mat-header-cell *matHeaderCellDef style=\"text-align: center;\"> Expires </th>\n            <td mat-cell *matCellDef=\"let element\" style=\"text-align: center;\">\n              <ng-container *ngIf=\"element.options.expires !== 0; else NO_DATA\">\n                {{expiresIn(element.options.expires)}}\n              </ng-container>\n              <ng-template #NO_DATA>\n                \u221E\n              </ng-template>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"option\">\n            <th mat-header-cell *matHeaderCellDef></th>\n            <td mat-cell *matCellDef=\"let element\" style=\"padding-right: 0;\">\n              <div style=\"display: flex;justify-content: flex-end;\">\n                <button mat-icon-button color=\"warn\" (click)=\"onDelete(element); $event.stopPropagation()\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </div>\n            </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" (click)=\"onSelectedRow(row)\"></tr>\n        </table>\n      </ng-container>\n\n      <ng-template #NO_DATA>\n        <h3 style=\"margin-top: 1rem;\">No Data</h3>\n      </ng-template>\n\n      <div *ngIf=\"(data$ | async) as data\" style=\"margin-top: 2rem;\">\n        <div style=\"margin-bottom: 1rem;\">\n          <mat-divider></mat-divider>\n        </div>\n\n        <h3>STORE: <span style=\"font-weight: bold;\">{{ store.name | uppercase }}</span></h3>\n        <h3>SETTINGS: {{ setting$(store.name) | async | json }}</h3>\n        <div style=\"display: flex;\">\n          <mat-form-field appearance=\"outline\" style=\"flex: 1;\">\n            <mat-label>Data (Must be an Object or Array of any)</mat-label>\n            <textarea matInput placeholder=\"[]\" #json [value]=\"data\"></textarea>\n          </mat-form-field>\n        </div>\n        <mat-error *ngIf=\"!isValidJSON(json.value)\">Not Valid Data</mat-error>\n\n        <div style=\"display: flex; gap: .5rem;\">\n          <span style=\"flex:1\"></span>\n          <button mat-stroked-button (click)=\"onCancel()\">Cancel</button>\n          <button mat-stroked-button (click)=\"onUpdate(store, json.value)\" [disabled]=\"!(isValidJSON(json.value))\">Update</button>\n        </div>\n      </div>\n    </div>\n\n  </ng-template>\n\n  <div style=\"margin-top: 1rem;\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 1rem;\">\n    <button mat-stroked-button (click)=\"onReset()\">Delete All Stores</button>\n  </div>\n\n</div>\n\n\n<mat-menu #menu=\"matMenu\">\n  <div style=\"padding: 1rem;\">\n    <p>Please note that the LocalStorage (encryption) and management of data is dependant on initializing the APP_ID</p>\n    <p>Must provide a value for <b>APP_ID</b> in AppModule->Providers</p>\n    <mat-divider></mat-divider>\n  <div style=\"font-size: smaller; margin-top: .5rem;\">\n    <p>Example: UUID (self.crypto.randomUUID() to generate)</p>\n    <div style=\"background-color: whitesmoke; padding: 1rem;\">\n      &#123;<br>\n        provide: APP_ID,<br>\n        useValue: \"056991ac-3537-43ab-b5b9-83edf6554eff\",<br>\n      &#125;\n    </div>\n  </div>\n  </div>\n</mat-menu>\n", styles: [".mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor}.demo-row-is-clicked{font-weight:700}.mat-mdc-menu-panel.mat-mdc-menu-panel{max-width:280px!important}\n"] }]
+            args: [{ selector: 'app-local-storage-demo', encapsulation: ViewEncapsulation.None, standalone: false, template: "<div style=\"margin: 2rem;\">\n\n  <div style=\"display: flex; gap: 1rem\">\n    <h2 style=\"padding-top: .5rem; display: flex;\">\n      <div style=\"padding-top: .5rem;\">Local Storage Manager</div>\n      <div>\n        <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n          <mat-icon>info</mat-icon>\n        </button>\n      </div>\n    </h2>\n    <span style=\"flex:1\"></span>\n    <div style=\"padding-top: .25rem;\">\n      <mat-button-toggle-group name=\"storage\" [formControl]=\"typeControl\" (change)=\"onCancel()\">\n        <mat-button-toggle value=\"0\">Local Storage</mat-button-toggle>\n        <mat-button-toggle value=\"1\">Session Storage</mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n    <div style=\"margin-top: .25rem;\">\n      <button mat-icon-button (click)=\"onCreate()\">\n        <mat-icon>add</mat-icon>\n      </button>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"storeProps?.storageName || storeProps?.storageSettingsName\">\n    <div style=\"display: flex; gap: .5rem; flex-direction: column; border: gray solid thin; background-color: whitesmoke; padding: 1rem;\"\n    >\n      <div style=\"display: flex;\">\n        <div *ngIf=\"storeProps?.storageSettingsName\" style=\"flex:1\">\n          Database: <b>{{ storeProps?.storageSettingsName }}</b>\n        </div>\n        <div *ngIf=\"storeProps?.storageName\" style=\"flex:1\">\n          Data: <b>{{ storeProps?.storageName }}</b>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <div style=\"margin-top: 2rem;\" [formGroup]=\"newStoreForm\" *ngIf=\"create; else LIST\">\n\n    <h2>Create Store</h2>\n\n    <div style=\"display: flex; gap: 1rem;\">\n      <div style=\"flex:1\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Store Name</mat-label>\n          <input matInput placeholder=\"sample\" formControlName=\"name\">\n        </mat-form-field>\n      </div>\n      <div>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Expires In...</mat-label>\n          <mat-select formControlName=\"expiresIn\">\n            <mat-option value=\"0\">None</mat-option>\n            <mat-option value=\"30s\">30 Seconds</mat-option>\n            <mat-option value=\"1mn\">1 Minute</mat-option>\n            <mat-option value=\"1hr\">1 Hour</mat-option>\n            <mat-option value=\"1d\">1 Day</mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n      <div style=\"margin-top: 1rem;\">\n        <mat-slide-toggle formControlName=\"encrypted\">Encrypted</mat-slide-toggle>\n      </div>\n    </div>\n\n    <div style=\"display: flex;\">\n      <mat-form-field appearance=\"outline\" style=\"flex: 1;\">\n        <mat-label>Data (Must be an Object or Array of any)</mat-label>\n        <textarea matInput placeholder=\"[]\" formControlName=\"data\" #json></textarea>\n      </mat-form-field>\n    </div>\n    <mat-error *ngIf=\"!isValidJSON(json.value)\">Not Valid Data</mat-error>\n\n    <div style=\"display: flex;\">\n      <span style=\"flex:1\"></span>\n      <button mat-stroked-button (click)=\"onCreateStore()\" [disabled]=\"!(isValid && isValidJSON(json.value))\">\n        Save Store\n      </button>\n    </div>\n\n  </div>\n\n  <ng-template #LIST>\n\n    <div style=\"margin-top: 1rem;\">\n      <mat-divider></mat-divider>\n    </div>\n{{ settings$ | async | json }}\n    <div *ngIf=\"filterData(settings$ | async) as data\">\n      <ng-container *ngIf=\"data.length > 0; else NO_DATA\">\n        <table mat-table [dataSource]=\"data\">\n          <ng-container matColumnDef=\"name\">\n            <th mat-header-cell *matHeaderCellDef> Store </th>\n            <td mat-cell *matCellDef=\"let element\" style=\"font-weight: bold; text-transform: uppercase;\"> {{element.name}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"id\">\n            <th mat-header-cell *matHeaderCellDef> ID </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.id}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"encrypted\">\n            <th mat-header-cell *matHeaderCellDef style=\"text-align: center;\"> Encrypted </th>\n            <td mat-cell *matCellDef=\"let element\" style=\"text-align: center;\">\n              <ng-container *ngIf=\"element.options.encrypted; else NO\">YES</ng-container>\n              <ng-template #NO><span style=\"color:gray\">NO</span></ng-template>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"expires\">\n            <th mat-header-cell *matHeaderCellDef style=\"text-align: center;\"> Expires </th>\n            <td mat-cell *matCellDef=\"let element\" style=\"text-align: center;\">\n              <ng-container *ngIf=\"element.options.expires !== 0; else NO_DATA\">\n                {{expiresIn(element.options.expires)}}\n              </ng-container>\n              <ng-template #NO_DATA>\n                \u221E\n              </ng-template>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"option\">\n            <th mat-header-cell *matHeaderCellDef></th>\n            <td mat-cell *matCellDef=\"let element\" style=\"padding-right: 0;\">\n              <div style=\"display: flex;justify-content: flex-end;\">\n                <button mat-icon-button color=\"warn\" (click)=\"onDelete(element); $event.stopPropagation()\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </div>\n            </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" (click)=\"onSelectedRow(row)\"></tr>\n        </table>\n      </ng-container>\n\n      <ng-template #NO_DATA>\n        <h3 style=\"margin-top: 1rem;\">No Data</h3>\n      </ng-template>\n\n      <div *ngIf=\"(data$ | async) as data\" style=\"margin-top: 2rem;\">\n        <div style=\"margin-bottom: 1rem;\">\n          <mat-divider></mat-divider>\n        </div>\n\n        <h3>STORE: <span style=\"font-weight: bold;\">{{ store.name | uppercase }}</span></h3>\n        <h3>SETTINGS: {{ setting$(store.name) | async | json }}</h3>\n        <div style=\"display: flex;\">\n          <mat-form-field appearance=\"outline\" style=\"flex: 1;\">\n            <mat-label>Data (Must be an Object or Array of any)</mat-label>\n            <textarea matInput placeholder=\"[]\" #json [value]=\"data\"></textarea>\n          </mat-form-field>\n        </div>\n        <mat-error *ngIf=\"!isValidJSON(json.value)\">Not Valid Data</mat-error>\n\n        <div style=\"display: flex; gap: .5rem;\">\n          <span style=\"flex:1\"></span>\n          <button mat-stroked-button (click)=\"onCancel()\">Cancel</button>\n          <button mat-stroked-button (click)=\"onUpdate(store, json.value)\" [disabled]=\"!(isValidJSON(json.value))\">Update</button>\n        </div>\n      </div>\n    </div>\n\n  </ng-template>\n\n  <div style=\"margin-top: 1rem;\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 1rem;\">\n    <button mat-stroked-button (click)=\"onReset()\">Delete All Stores</button>\n  </div>\n\n</div>\n\n\n<mat-menu #menu=\"matMenu\">\n  <div style=\"padding: 1rem;\">\n    <p>Please note that the LocalStorage (encryption) and management of data is dependant on initializing the APP_ID</p>\n    <p>Must provide a value for <b>APP_ID</b> in AppModule->Providers</p>\n    <mat-divider></mat-divider>\n  <div style=\"font-size: smaller; margin-top: .5rem;\">\n    <p>Example: UUID (self.crypto.randomUUID() to generate)</p>\n    <div style=\"background-color: whitesmoke; padding: 1rem;\">\n      &#123;<br>\n        provide: APP_ID,<br>\n        useValue: \"056991ac-3537-43ab-b5b9-83edf6554eff\",<br>\n      &#125;\n    </div>\n  </div>\n  </div>\n</mat-menu>\n", styles: [".mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor}.demo-row-is-clicked{font-weight:700}.mat-mdc-menu-panel.mat-mdc-menu-panel{max-width:280px!important}\n"] }]
         }], ctorParameters: () => [{ type: ConfigOptions, decorators: [{
                     type: Inject,
                     args: [CONFIG_SETTINGS_TOKEN]
@@ -5705,11 +5949,11 @@ class DatabaseDataDemoComponent {
             .pipe(tap((data) => console.log('deleteTableRecord:', data)));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DatabaseDataDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DatabaseDataDemoComponent, selector: "app-database-data-demo", ngImport: i0, template: "<div style=\"padding: 2rem;\">\n\n  <h2>\n    Database Manager Service Demo\n  </h2>\n\n  <div style=\"margin-bottom: 1rem; display: flex; gap: 1rem;\">\n    <button mat-stroked-button\n      color=\"primary\"\n      (click)=\"clearAllData()\"\n    >\n      Clear Data\n    </button>\n    <button mat-stroked-button\n      color=\"primary\"\n      (click)=\"updateData()\"\n    >\n      Update Data\n    </button>\n    <div style=\"flex:1\"></div>\n    <button\n        mat-stroked-button\n        color=\"warn\"\n        [disabled]=\"!dataToDisplay.length\"\n        (click)=\"removeData()\"\n    >\n      Remove Data\n    </button>\n    <button mat-stroked-button\n      color=\"primary\"\n      (click)=\"addData()\"\n    >\n      Add Data\n    </button>\n  </div>\n\n  <div class=\"table-container\">\n    <table mat-table [dataSource]=\"dataSource\">\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=\"last_name\">\n        <th mat-header-cell *matHeaderCellDef>Last Name</th>\n        <td mat-cell *matCellDef=\"let element\">{{element.last_name}}</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      <ng-container matColumnDef=\"amount\">\n        <th mat-header-cell *matHeaderCellDef>Amount</th>\n        <td mat-cell *matCellDef=\"let element\">{{element.amount | currency}}</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\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "pipe", type: i1$1.CurrencyPipe, name: "currency" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DatabaseDataDemoComponent, selector: "app-database-data-demo", ngImport: i0, template: "<div style=\"padding: 2rem;\">\n\n  <h2>\n    Database Manager Service Demo\n  </h2>\n\n  <div style=\"margin-bottom: 1rem; display: flex; gap: 1rem;\">\n    <button mat-stroked-button\n      color=\"primary\"\n      (click)=\"clearAllData()\"\n    >\n      Clear Data\n    </button>\n    <button mat-stroked-button\n      color=\"primary\"\n      (click)=\"updateData()\"\n    >\n      Update Data\n    </button>\n    <div style=\"flex:1\"></div>\n    <button\n        mat-stroked-button\n        color=\"warn\"\n        [disabled]=\"!dataToDisplay.length\"\n        (click)=\"removeData()\"\n    >\n      Remove Data\n    </button>\n    <button mat-stroked-button\n      color=\"primary\"\n      (click)=\"addData()\"\n    >\n      Add Data\n    </button>\n  </div>\n\n  <div class=\"table-container\">\n    <table mat-table [dataSource]=\"dataSource\">\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=\"last_name\">\n        <th mat-header-cell *matHeaderCellDef>Last Name</th>\n        <td mat-cell *matCellDef=\"let element\">{{element.last_name}}</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      <ng-container matColumnDef=\"amount\">\n        <th mat-header-cell *matHeaderCellDef>Amount</th>\n        <td mat-cell *matCellDef=\"let element\">{{element.amount | currency}}</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\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { 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: ["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: "pipe", type: i1$1.CurrencyPipe, name: "currency" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DatabaseDataDemoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-database-data-demo', template: "<div style=\"padding: 2rem;\">\n\n  <h2>\n    Database Manager Service Demo\n  </h2>\n\n  <div style=\"margin-bottom: 1rem; display: flex; gap: 1rem;\">\n    <button mat-stroked-button\n      color=\"primary\"\n      (click)=\"clearAllData()\"\n    >\n      Clear Data\n    </button>\n    <button mat-stroked-button\n      color=\"primary\"\n      (click)=\"updateData()\"\n    >\n      Update Data\n    </button>\n    <div style=\"flex:1\"></div>\n    <button\n        mat-stroked-button\n        color=\"warn\"\n        [disabled]=\"!dataToDisplay.length\"\n        (click)=\"removeData()\"\n    >\n      Remove Data\n    </button>\n    <button mat-stroked-button\n      color=\"primary\"\n      (click)=\"addData()\"\n    >\n      Add Data\n    </button>\n  </div>\n\n  <div class=\"table-container\">\n    <table mat-table [dataSource]=\"dataSource\">\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=\"last_name\">\n        <th mat-header-cell *matHeaderCellDef>Last Name</th>\n        <td mat-cell *matCellDef=\"let element\">{{element.last_name}}</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      <ng-container matColumnDef=\"amount\">\n        <th mat-header-cell *matHeaderCellDef>Amount</th>\n        <td mat-cell *matCellDef=\"let element\">{{element.amount | currency}}</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\n</div>\n" }]
+            args: [{ selector: 'app-database-data-demo', standalone: false, template: "<div style=\"padding: 2rem;\">\n\n  <h2>\n    Database Manager Service Demo\n  </h2>\n\n  <div style=\"margin-bottom: 1rem; display: flex; gap: 1rem;\">\n    <button mat-stroked-button\n      color=\"primary\"\n      (click)=\"clearAllData()\"\n    >\n      Clear Data\n    </button>\n    <button mat-stroked-button\n      color=\"primary\"\n      (click)=\"updateData()\"\n    >\n      Update Data\n    </button>\n    <div style=\"flex:1\"></div>\n    <button\n        mat-stroked-button\n        color=\"warn\"\n        [disabled]=\"!dataToDisplay.length\"\n        (click)=\"removeData()\"\n    >\n      Remove Data\n    </button>\n    <button mat-stroked-button\n      color=\"primary\"\n      (click)=\"addData()\"\n    >\n      Add Data\n    </button>\n  </div>\n\n  <div class=\"table-container\">\n    <table mat-table [dataSource]=\"dataSource\">\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=\"last_name\">\n        <th mat-header-cell *matHeaderCellDef>Last Name</th>\n        <td mat-cell *matCellDef=\"let element\">{{element.last_name}}</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      <ng-container matColumnDef=\"amount\">\n        <th mat-header-cell *matHeaderCellDef>Amount</th>\n        <td mat-cell *matCellDef=\"let element\">{{element.amount | currency}}</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\n</div>\n" }]
         }], ctorParameters: () => [] });
 class DatabaseDataSource extends DataSource {
     constructor(initialData) {
@@ -5729,9 +5973,9 @@ class DatabaseDataSource extends DataSource {
 class HttpRequestServicesDemoComponent {
     constructor(configOptions) {
         this.configOptions = configOptions;
-        this.wsServer = 'ws://localhost:8080';
+        this.wsServer = 'ws:';
         this.jwtToken = '';
-        this.server = 'http://localhost:8080';
+        this.server = 'http:';
         this.requestTypes = [
             { name: "Http Service", value: 'http_service' },
             // { name: "Http Signals Service", value: 'http_signals_service', new: true },
@@ -5752,11 +5996,11 @@ class HttpRequestServicesDemoComponent {
         this.selectedService = this.requestTypes[type].value;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HttpRequestServicesDemoComponent, deps: [{ token: CONFIG_SETTINGS_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: HttpRequestServicesDemoComponent, selector: "app-http-request-services-demo", inputs: { wsServer: "wsServer", jwtToken: "jwtToken", server: "server", adapter: "adapter", mapper: "mapper" }, 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\n      [server]=\"server\"\n      [adapter]=\"adapter\"\n      [mapper]=\"mapper\"\n    ></app-request-manager-demo>\n  </p>\n  <!-- <p *ngSwitchCase=\"'http_signals_service'\">\n    <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n    <app-request-signals-manager-demo></app-request-signals-manager-demo>\n  </p> -->\n  <p *ngSwitchCase=\"'http_state_service'\">\n    <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n    <app-request-manager-state-demo\n      [server]=\"server\"\n      [adapter]=\"adapter\"\n      [mapper]=\"mapper\"\n    ></app-request-manager-state-demo>\n  </p>\n  <p *ngSwitchCase=\"'http_state_service_ws'\">\n    <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n    <app-request-manager-ws-demo\n      [server]=\"server\"\n      [wsServer]=\"wsServer\"\n      [jwtToken]=\"jwtToken\"\n    ></app-request-manager-ws-demo>\n  </p>\n  <p *ngSwitchCase=\"'database_service'\">\n    <app-database-data-demo></app-database-data-demo>\n  </p>\n  <p *ngSwitchCase=\"'local_storage_service'\">\n    <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n    <app-local-storage-demo></app-local-storage-demo>\n  </p>\n  <!-- <p *ngSwitchCase=\"'local_storage_signals_service'\">\n    <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n    <app-local-storage-signals-demo></app-local-storage-signals-demo>\n  </p> -->\n  <p *ngSwitchCase=\"'store_state_manager'\">\n    <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n    <app-store-state-manager-demo></app-store-state-manager-demo>\n  </p>\n  <p *ngSwitchDefault>\n    Other\n  </p>\n</span>\n\n<ng-template #HTTP_OPTIONS>\n  <ng-container *ngIf=\"injectionOptions?.httpRequestOptions\">\n    <div class=\"box\">\n      <h3 style=\"font-weight: bold;\">Injection Token Detected - HTTP Options</h3>\n      {{ injectionOptions?.httpRequestOptions| json }}\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #LOCAL_OPTIONS>\n  <ng-container class=\"box\" *ngIf=\"injectionOptions?.LocalStorageOptions\">\n    <div class=\"box\">\n      <h3 style=\"font-weight: bold;\">Injection Token Detected - LocalStorage Options</h3>\n      {{ injectionOptions?.LocalStorageOptions| json }}\n    </div>\n  </ng-container>\n</ng-template>\n\n\n", styles: [".box{padding:1rem;background-color:#f5f5f5;border:thin gray solid;margin-top:1rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i12.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i10$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: RequestManagerStateDemoComponent, selector: "app-request-manager-state-demo", inputs: ["server", "adapter", "mapper"] }, { kind: "component", type: RequestManagerDemoComponent, selector: "app-request-manager-demo", inputs: ["server", "adapter", "mapper"] }, { kind: "component", type: LocalStorageDemoComponent, selector: "app-local-storage-demo" }, { kind: "component", type: RequestManagerWsDemoComponent, selector: "app-request-manager-ws-demo", inputs: ["server", "wsServer", "jwtToken"] }, { kind: "component", type: StoreStateManagerDemoComponent, selector: "app-store-state-manager-demo" }, { kind: "component", type: DatabaseDataDemoComponent, selector: "app-database-data-demo" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: HttpRequestServicesDemoComponent, selector: "app-http-request-services-demo", inputs: { wsServer: "wsServer", jwtToken: "jwtToken", server: "server", user: "user", adapter: "adapter", mapper: "mapper" }, 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    @for (type of requestTypes; track type; let i = $index) {\n      @if (type?.divider) {\n        <div\n          style=\"margin-top: .5rem; margin-bottom: .5rem;\"\n          >\n          <mat-divider></mat-divider>\n        </div>\n      }\n      <button\n        mat-menu-item\n        (click)=\"onSelected(i)\"\n        [disabled]=\"type.disabled\"\n        >\n        {{ type.name }}\n      </button>\n    }\n\n  </mat-menu>\n</mat-toolbar>\n\n<span>\n  @switch (selectedService) {\n    @case ('http_service') {\n      <p>\n        <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n        <app-request-manager-demo\n          [server]=\"server\"\n          [adapter]=\"adapter\"\n          [mapper]=\"mapper\"\n        ></app-request-manager-demo>\n      </p>\n    }\n    <!-- <p *ngSwitchCase=\"'http_signals_service'\">\n    <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n    <app-request-signals-manager-demo></app-request-signals-manager-demo>\n  </p> -->\n  @case ('http_state_service') {\n    <p>\n      <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n      <app-request-manager-state-demo\n        [server]=\"server\"\n        [adapter]=\"adapter\"\n        [mapper]=\"mapper\"\n      ></app-request-manager-state-demo>\n    </p>\n  }\n  @case ('http_state_service_ws') {\n    <p>\n      <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n      <app-request-manager-ws-demo\n        [server]=\"server\"\n        [wsServer]=\"wsServer\"\n        [jwtToken]=\"jwtToken\"\n        [user]=\"user\"\n      ></app-request-manager-ws-demo>\n    </p>\n  }\n  @case ('database_service') {\n    <p>\n      <app-database-data-demo></app-database-data-demo>\n    </p>\n  }\n  @case ('local_storage_service') {\n    <p>\n      <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n      <app-local-storage-demo></app-local-storage-demo>\n    </p>\n  }\n  <!-- <p *ngSwitchCase=\"'local_storage_signals_service'\">\n  <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n  <app-local-storage-signals-demo></app-local-storage-signals-demo>\n</p> -->\n@case ('store_state_manager') {\n  <p>\n    <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n    <app-store-state-manager-demo></app-store-state-manager-demo>\n  </p>\n}\n@default {\n  <p>\n    Other\n  </p>\n}\n}\n</span>\n\n<ng-template #HTTP_OPTIONS>\n  @if (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  }\n</ng-template>\n\n<ng-template #LOCAL_OPTIONS>\n  @if (injectionOptions?.LocalStorageOptions) {\n    <ng-container class=\"box\">\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  }\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i11.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i3$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: RequestManagerStateDemoComponent, selector: "app-request-manager-state-demo", inputs: ["server", "adapter", "mapper"] }, { kind: "component", type: RequestManagerDemoComponent, selector: "app-request-manager-demo", inputs: ["server", "adapter", "mapper"] }, { kind: "component", type: LocalStorageDemoComponent, selector: "app-local-storage-demo" }, { kind: "component", type: RequestManagerWsDemoComponent, selector: "app-request-manager-ws-demo", inputs: ["server", "wsServer", "jwtToken", "user"] }, { kind: "component", type: StoreStateManagerDemoComponent, selector: "app-store-state-manager-demo" }, { kind: "component", type: DatabaseDataDemoComponent, selector: "app-database-data-demo" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HttpRequestServicesDemoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-http-request-services-demo', template: "<mat-toolbar  style=\"display:flex\">\n  <div>Http Request Manager Services</div>\n  <div style=\"flex:1\"></div>\n  <button mat-stroked-button [matMenuTriggerFor]=\"menu\">Services</button>\n  <mat-menu #menu=\"matMenu\">\n    <ng-container *ngFor=\"let type of requestTypes; index as i\">\n      <div\n        *ngIf=\"type?.divider\"\n        style=\"margin-top: .5rem; margin-bottom: .5rem;\"\n      >\n        <mat-divider></mat-divider>\n      </div>\n      <button\n        mat-menu-item\n        (click)=\"onSelected(i)\"\n        [disabled]=\"type.disabled\"\n        >\n        {{ type.name }}\n      </button>\n    </ng-container>\n\n  </mat-menu>\n</mat-toolbar>\n\n<span [ngSwitch]=\"selectedService\">\n  <p *ngSwitchCase=\"'http_service'\">\n    <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n    <app-request-manager-demo\n      [server]=\"server\"\n      [adapter]=\"adapter\"\n      [mapper]=\"mapper\"\n    ></app-request-manager-demo>\n  </p>\n  <!-- <p *ngSwitchCase=\"'http_signals_service'\">\n    <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n    <app-request-signals-manager-demo></app-request-signals-manager-demo>\n  </p> -->\n  <p *ngSwitchCase=\"'http_state_service'\">\n    <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n    <app-request-manager-state-demo\n      [server]=\"server\"\n      [adapter]=\"adapter\"\n      [mapper]=\"mapper\"\n    ></app-request-manager-state-demo>\n  </p>\n  <p *ngSwitchCase=\"'http_state_service_ws'\">\n    <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n    <app-request-manager-ws-demo\n      [server]=\"server\"\n      [wsServer]=\"wsServer\"\n      [jwtToken]=\"jwtToken\"\n    ></app-request-manager-ws-demo>\n  </p>\n  <p *ngSwitchCase=\"'database_service'\">\n    <app-database-data-demo></app-database-data-demo>\n  </p>\n  <p *ngSwitchCase=\"'local_storage_service'\">\n    <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n    <app-local-storage-demo></app-local-storage-demo>\n  </p>\n  <!-- <p *ngSwitchCase=\"'local_storage_signals_service'\">\n    <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n    <app-local-storage-signals-demo></app-local-storage-signals-demo>\n  </p> -->\n  <p *ngSwitchCase=\"'store_state_manager'\">\n    <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n    <app-store-state-manager-demo></app-store-state-manager-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', standalone: false, 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    @for (type of requestTypes; track type; let i = $index) {\n      @if (type?.divider) {\n        <div\n          style=\"margin-top: .5rem; margin-bottom: .5rem;\"\n          >\n          <mat-divider></mat-divider>\n        </div>\n      }\n      <button\n        mat-menu-item\n        (click)=\"onSelected(i)\"\n        [disabled]=\"type.disabled\"\n        >\n        {{ type.name }}\n      </button>\n    }\n\n  </mat-menu>\n</mat-toolbar>\n\n<span>\n  @switch (selectedService) {\n    @case ('http_service') {\n      <p>\n        <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n        <app-request-manager-demo\n          [server]=\"server\"\n          [adapter]=\"adapter\"\n          [mapper]=\"mapper\"\n        ></app-request-manager-demo>\n      </p>\n    }\n    <!-- <p *ngSwitchCase=\"'http_signals_service'\">\n    <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n    <app-request-signals-manager-demo></app-request-signals-manager-demo>\n  </p> -->\n  @case ('http_state_service') {\n    <p>\n      <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n      <app-request-manager-state-demo\n        [server]=\"server\"\n        [adapter]=\"adapter\"\n        [mapper]=\"mapper\"\n      ></app-request-manager-state-demo>\n    </p>\n  }\n  @case ('http_state_service_ws') {\n    <p>\n      <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n      <app-request-manager-ws-demo\n        [server]=\"server\"\n        [wsServer]=\"wsServer\"\n        [jwtToken]=\"jwtToken\"\n        [user]=\"user\"\n      ></app-request-manager-ws-demo>\n    </p>\n  }\n  @case ('database_service') {\n    <p>\n      <app-database-data-demo></app-database-data-demo>\n    </p>\n  }\n  @case ('local_storage_service') {\n    <p>\n      <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n      <app-local-storage-demo></app-local-storage-demo>\n    </p>\n  }\n  <!-- <p *ngSwitchCase=\"'local_storage_signals_service'\">\n  <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n  <app-local-storage-signals-demo></app-local-storage-signals-demo>\n</p> -->\n@case ('store_state_manager') {\n  <p>\n    <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n    <app-store-state-manager-demo></app-store-state-manager-demo>\n  </p>\n}\n@default {\n  <p>\n    Other\n  </p>\n}\n}\n</span>\n\n<ng-template #HTTP_OPTIONS>\n  @if (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  }\n</ng-template>\n\n<ng-template #LOCAL_OPTIONS>\n  @if (injectionOptions?.LocalStorageOptions) {\n    <ng-container class=\"box\">\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  }\n</ng-template>\n\n\n", styles: [".box{padding:1rem;background-color:#f5f5f5;border:thin gray solid;margin-top:1rem}\n"] }]
         }], ctorParameters: () => [{ type: ConfigOptions, decorators: [{
                     type: Inject,
                     args: [CONFIG_SETTINGS_TOKEN]
@@ -5766,6 +6010,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], server: [{
                 type: Input
+            }], user: [{
+                type: Input
             }], adapter: [{
                 type: Input
             }], mapper: [{
@@ -5780,5 +6026,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ApiRequest, AppService, AsymmetricalEncryptionService, CONFIG_SETTINGS_TOKEN, ChannelInfo, ChannelMessage, CommunicationType, ConfigHTTPOptions, ConfigOptions, DataType, DatabaseDataDemoComponent, DatabaseManagerService, DatabaseStorage, DbService, ErrorDisplaySettings, GlobalStoreOptions, HTTPManagerService, HTTPManagerSignalsService, HTTPManagerStateService, HeadersService, HttpRequestManagerModule, HttpRequestServicesDemoComponent, LocalStorageDemoComponent, LocalStorageManagerService, LocalStorageOptions, LocalStorageSignalsManagerService, PathQueryService, Random, RandomNumber, RandomNumbers, RandomNumbersUnique, RandomSignature, RandomStr, RequestErrorInterceptor, RequestHeadersInterceptor, RequestManagerDemoComponent, RequestManagerStateDemoComponent, RequestOptions, RequestService, RequestSignalsService, RetryOptions, SettingOptions, StateStorageOptions, StorageData, StorageOption, StorageType, StoreStateManagerService, SymmetricalEncryptionService, TableSchemaDef, UUID, UserMessage, UtilsService, WSOptions, WSUser, WebsocketService, WithCredentialsInterceptor, countdown, delayedRetry, requestPolling, requestStreaming };
+export { ApiRequest, AppService, AsymmetricalEncryptionService, CONFIG_SETTINGS_TOKEN, ChannelInfo, ChannelMessage, CommunicationType, ConfigHTTPOptions, ConfigOptions, DataType, DatabaseDataDemoComponent, DatabaseManagerService, DatabaseStorage, DbService, ErrorDisplaySettings, GlobalStoreOptions, HTTPManagerService, HTTPManagerSignalsService, HTTPManagerStateService, HeadersService, HttpRequestManagerModule, HttpRequestServicesDemoComponent, LocalStorageDemoComponent, LocalStorageManagerService, LocalStorageOptions, LocalStorageSignalsManagerService, PathQueryService, Random, RandomNumber, RandomNumbers, RandomNumbersUnique, RandomSignature, RandomStr, RequestErrorInterceptor, RequestHeadersInterceptor, RequestManagerDemoComponent, RequestManagerStateDemoComponent, RequestOptions, RequestService, RequestSignalsService, RetryOptions, SettingOptions, StateStorageOptions, StorageData, StorageOption, StorageType, StoreStateManagerService, SymmetricalEncryptionService, TableSchemaDef, UUID, UUID_STR, UserMessage, UtilsService, WSOptions, WSUser, WebsocketService, WithCredentialsInterceptor, countdown, delayedRetry, requestPolling, requestStreaming };
 //# sourceMappingURL=http-request-manager.mjs.map