http-request-manager 18.4.5 → 18.4.9

package/fesm2022/http-request-manager.mjs

@@ -16,7 +16,7 @@ import { FormBuilder, Validators, FormsModule, ReactiveFormsModule } from '@angu
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import * as i3$1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i8$1 from '@angular/material/chips';
+import * as i3$2 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
 import * as i12 from '@angular/material/divider';
 import { MatDividerModule } from '@angular/material/divider';
@@ -26,7 +26,7 @@ import * as i8 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i13 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i10$2 from '@angular/material/progress-bar';
+import * as i10$1 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import * as i5 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
@@ -35,7 +35,7 @@ import * as i11 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import * as i7 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import * as i10$1 from '@angular/material/toolbar';
+import * as i4$1 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import * as i9 from '@angular/material/table';
 import { MatTableModule } from '@angular/material/table';
@@ -43,7 +43,7 @@ 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 i2$1 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
 import * as i6 from '@angular/material/core';
 import { DataSource } from '@angular/cdk/collections';
@@ -308,6 +308,18 @@ 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);
+    };
+    // 'aaaaaaaa'-'aaaa'-'aaaa'-'aaaa'-'aaaaaaaaaaaa'
+    return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
+};
 
 // Must provide a value for APP_ID in AppModule->Providers
 // providers: [
@@ -765,12 +777,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 +799,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 +816,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 +1004,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 +1190,8 @@ class DatabaseStorage {
         this.expiresIn = expiresIn;
     }
     static adapt(item) {
+        if (!item?.table)
+            return;
         return new DatabaseStorage(item?.table, item?.expiresIn);
     }
 }
@@ -1803,17 +1828,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 +2878,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 +2889,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 +2907,7 @@ 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);
+                this.user.next(message.data);
             }
             switch (message.type) {
                 case 'channelsList':
@@ -2895,26 +2921,26 @@ 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.content.path }), message.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 +2953,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 +3368,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;
@@ -4004,15 +4031,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 }] }] });
 
 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 +4058,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 +4083,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 +4092,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 +4182,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 +4195,88 @@ 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$;
+    }
+    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: "14.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: "<div *ngIf=\"(data$ | async) as data\" style=\"margin: 1rem;\">\n\n  <div *ngIf=\"(users$ |async) as users\">\n    <h3 style=\"margin: 0;\" *ngIf=\"users.length > 0; else NO_USERS\">Connected Users</h3>\n    <mat-chip-set>\n      <mat-chip *ngFor=\"let user of users\">\n        {{ user.name }}\n      </mat-chip>\n    </mat-chip-set>\n    <ng-template #NO_USERS>\n      <h3 style=\"margin: 0;\">No Users</h3>\n    </ng-template>\n\n  </div>\n\n  <div style=\"margin-top: 1rem; margin-bottom: 1rem;\">\n    <mat-divider></mat-divider>\n  </div>\n\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\n  <div *ngIf=\"data.length > 0; else NO_DATA\">\n\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\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\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\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\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\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\n  </div>\n  <ng-template #NO_DATA>\n    <div style=\"margin-top: 1rem; font-style: italic;\">\n      No Data Available\n    </div>\n  </ng-template>\n\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: "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$2.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: i3$2.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { 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: i12.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', template: "<div *ngIf=\"(data$ | async) as data\" style=\"margin: 1rem;\">\n\n  <div *ngIf=\"(users$ |async) as users\">\n    <h3 style=\"margin: 0;\" *ngIf=\"users.length > 0; else NO_USERS\">Connected Users</h3>\n    <mat-chip-set>\n      <mat-chip *ngFor=\"let user of users\">\n        {{ user.name }}\n      </mat-chip>\n    </mat-chip-set>\n    <ng-template #NO_USERS>\n      <h3 style=\"margin: 0;\">No Users</h3>\n    </ng-template>\n\n  </div>\n\n  <div style=\"margin-top: 1rem; margin-bottom: 1rem;\">\n    <mat-divider></mat-divider>\n  </div>\n\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\n  <div *ngIf=\"data.length > 0; else NO_DATA\">\n\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\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\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\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\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\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\n  </div>\n  <ng-template #NO_DATA>\n    <div style=\"margin-top: 1rem; font-style: italic;\">\n      No Data Available\n    </div>\n  </ng-template>\n\n</div>\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', 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', template: "<p>\n  ws-ai-messaging works!\n</p>\n" }]
+        }], ctorParameters: () => [] });
+
 class RequestManagerWsDemoComponent {
     constructor() {
         this.httpManagerService = inject(HTTPManagerService);
@@ -4135,6 +4292,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 +4344,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 +4362,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: "14.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    <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>({{ user.ldap }})</div>\n        </div>\n      </mat-toolbar>\n    </div>\n\n    <div *ngIf=\"(isPending$ | async)\">\n      <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n    </div>\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: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i2$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: i10$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i4$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', 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>({{ user.ldap }})</div>\n        </div>\n      </mat-toolbar>\n    </div>\n\n    <div *ngIf=\"(isPending$ | async)\">\n      <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n    </div>\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,7 +4714,7 @@ 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: "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$1.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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RequestSignalsManagerDemoComponent, decorators: [{
             type: Component,
@@ -4658,6 +4796,100 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             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" }]
         }] });
 
+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: "14.0.0", version: "18.2.14", type: WsMessagingComponent, selector: "app-ws-messaging", inputs: { server: "server", wsServer: "wsServer", jwtToken: "jwtToken", user: "user" }, ngImport: i0, template: "<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", 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.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: "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" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WsMessagingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-ws-messaging', template: "<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" }]
+        }], 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 +4911,11 @@ class HttpRequestManagerModule {
             LocalStorageSignalsDemoComponent,
             RequestManagerWsDemoComponent,
             StoreStateManagerDemoComponent,
-            DatabaseDataDemoComponent], imports: [CommonModule,
+            DatabaseDataDemoComponent,
+            WsDataControlComponent,
+            WsMessagingComponent,
+            WsNotificationsComponent,
+            WsAiMessagingComponent], imports: [CommonModule,
             ToastMessageDisplayModule,
             FormsModule,
             ReactiveFormsModule,
@@ -4770,7 +5006,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         RequestManagerWsDemoComponent,
                         StoreStateManagerDemoComponent,
                         DatabaseDataDemoComponent,
-                        // DatabaseDataDemoComponent,
+                        WsDataControlComponent,
+                        WsMessagingComponent,
+                        WsNotificationsComponent,
+                        WsAiMessagingComponent,
                     ],
                     exports: [
                         HttpRequestServicesDemoComponent,
@@ -5113,7 +5352,7 @@ 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: "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$1.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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RequestManagerStateDemoComponent, decorators: [{
             type: Component,
@@ -5414,7 +5653,7 @@ 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: "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$1.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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RequestManagerDemoComponent, decorators: [{
             type: Component,
@@ -5729,9 +5968,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 +5991,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: "14.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    <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      [user]=\"user\"\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: i4$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', 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      [user]=\"user\"\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"] }]
         }], ctorParameters: () => [{ type: ConfigOptions, decorators: [{
                     type: Inject,
                     args: [CONFIG_SETTINGS_TOKEN]
@@ -5766,6 +6005,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 +6021,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, EncryptionTestService, ErrorDisplaySettings, GlobalStoreOptions, HTTPManagerService, HTTPManagerSignalsService, HTTPManagerStateService, HeadersService, HttpRequestManagerModule, HttpRequestServicesDemoComponent, LocalStorageDemoComponent, LocalStorageManagerService, LocalStorageOptions, LocalStorageSignalsManagerService, ObjectMergerService, PROXY_CONFIG, PathQueryService, ProxyDebuggerInterceptor, 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