http-request-manager 18.5.10 → 18.5.12

package/fesm2022/http-request-manager.mjs

@@ -2853,21 +2853,20 @@ class HTTPManagerStateService extends ComponentStore {
         this.shouldRetry = true;
         this.wsRetryAttempts = new BehaviorSubject(0);
         this.wsRetryAttempts$ = this.wsRetryAttempts.asObservable();
-        this.messages$ = null;
-        this.connectionStatus$ = null;
+        this.messages = new BehaviorSubject([]);
+        this.messages$ = this.messages.asObservable();
         this.userList = new BehaviorSubject([]);
         this.userList$ = this.userList.asObservable();
         this.user = new BehaviorSubject(null);
         this.user$ = this.user.asObservable();
+        this.channels = new BehaviorSubject(null);
+        this.channels$ = this.channels.asObservable();
         this.communicationMessages = new BehaviorSubject([]);
         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 = [];
         this.wsConnection = false;
         this.wsOptions = WSOptions.adapt();
         // WebSocket
@@ -2878,6 +2877,9 @@ class HTTPManagerStateService extends ComponentStore {
         })), this.httpManagerService.messages$.pipe(tap((message) => {
             if (!message)
                 return;
+            // Add message to messages array
+            const currentMessages = this.messages.value;
+            this.messages.next([...currentMessages, message]);
             console.log('Received:', message);
             if (message.error === 'JWT_INVALID') {
                 this.shouldRetry = false;
@@ -2892,13 +2894,13 @@ class HTTPManagerStateService extends ComponentStore {
             switch (message.type) {
                 case 'channelsList':
                     console.log('💬 Channels:', message.channels);
-                    this.channelList = message.channels;
-                    if (this.channelList.includes(wsOptions.id)) {
-                        this.httpManagerService.subscribeToChannel(wsOptions.id);
-                    }
-                    else {
-                        this.httpManagerService.createChannel(wsOptions.id);
-                    }
+                    // this.channelList = message.channels
+                    // if (this.channelList.includes(wsOptions.id)) {
+                    //   this.httpManagerService.subscribeToChannel(wsOptions.id)
+                    // } else {
+                    //   this.httpManagerService.createChannel(wsOptions.id)
+                    // }
+                    this.channels.next(message.channels);
                     break;
                 case 'stateMangerMessage':
                     ;
@@ -2924,8 +2926,7 @@ class HTTPManagerStateService extends ComponentStore {
                     this.userList.next(message.data.users);
                     break;
                 default:
-                    if (message)
-                        this.messages.push(message);
+                    // Messages are already added at the beginning of the tap
                     break;
             }
         }))))));
@@ -2934,9 +2935,9 @@ 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 && this.database?.table === '')
+            if (this.databaseOptions && this.databaseOptions?.table === '')
                 console.warn('Database storage requires a table name');
-        }), filter(() => this.dataType === DataType.ARRAY && !!this.apiOptions.adapter && !!this.database?.table), switchMap(() => {
+        }), filter(() => this.dataType === DataType.ARRAY && !!this.apiOptions.adapter && !!this.databaseOptions?.table), switchMap(() => {
             const sampleData = this.apiOptions.adapter?.({}) || {};
             const schemaKeys = Object.keys(sampleData).filter(key => sampleData[key] !== undefined);
             let schema = '++id';
@@ -2947,7 +2948,7 @@ class HTTPManagerStateService extends ComponentStore {
                 }
             }
             const tableDef = TableSchemaDef.adapt({
-                table: this.database?.table,
+                table: this.databaseOptions?.table,
                 schema: schema
             });
             return this.dbManagerService.createDatabaseTable(tableDef);
@@ -3033,11 +3034,11 @@ class HTTPManagerStateService extends ComponentStore {
                 this.setData$({});
             }
         }), concatMap(() => {
-            if (this.hasDatabase && this.database?.table) {
+            if (this.hasDatabase && this.databaseOptions?.table) {
                 const currentData = this.get()?.data;
                 const idsToDelete = Array.isArray(currentData) ? currentData.map((r) => r.id) : [];
                 if (idsToDelete.length > 0) {
-                    return this.dbManagerService.deleteTableRecords(this.database.table, idsToDelete);
+                    return this.dbManagerService.deleteTableRecords(this.databaseOptions.table, idsToDelete);
                 }
             }
             return of(null);
@@ -3053,39 +3054,39 @@ class HTTPManagerStateService extends ComponentStore {
                     data = (!data) ? (this.dataType === DataType.ARRAY) ? [] : {} : data;
                     this.setData$(data);
                 }), concatMap((data) => {
-                    if (this.hasDatabase && this.database?.table && Array.isArray(data) && data.length > 0) {
+                    if (this.hasDatabase && this.databaseOptions?.table && Array.isArray(data) && data.length > 0) {
                         this.localStorageManagerService.updateStore({
-                            name: this.database.table,
-                            data: { ...this.database, ...{ expires: this.utils.expires(this.database.expiresIn) } }
+                            name: this.databaseOptions.table,
+                            data: { ...this.databaseOptions, ...{ expires: this.utils.expires(this.databaseOptions.expiresIn) } }
                         });
-                        return this.dbManagerService.createTableRecords(this.database.table, data);
+                        return this.dbManagerService.createTableRecords(this.databaseOptions.table, data);
                     }
                     return of(data);
                 }));
             };
-            if (this.hasDatabase && this.database?.table) {
+            if (this.hasDatabase && this.databaseOptions?.table) {
                 return this.dbManagerService.databaseExists().pipe(switchMap((dbExists) => {
                     if (!dbExists) {
                         const initObs = this.initDBStorageAsync();
                         return initObs.pipe(switchMap(() => fetchFromAPI()));
                     }
-                    return this.dbManagerService.hasDatabaseTable(this.database.table).pipe(switchMap((tableExists) => {
+                    return this.dbManagerService.hasDatabaseTable(this.databaseOptions.table).pipe(switchMap((tableExists) => {
                         if (!tableExists) {
                             const initObs = this.initDBStorageAsync();
                             return initObs.pipe(switchMap(() => fetchFromAPI()));
                         }
-                        return this.localStorageManagerService.store$(this.database.table).pipe(take(1), switchMap((storeData) => {
+                        return this.localStorageManagerService.store$(this.databaseOptions.table).pipe(take(1), switchMap((storeData) => {
                             const expires = storeData?.expires || 0;
                             const hasExpired = expires > 0 && this.utils.hasExpired(expires);
                             if (hasExpired) {
-                                return this.dbManagerService.clearTable(this.database.table).pipe(switchMap(() => fetchFromAPI()), tap(() => {
+                                return this.dbManagerService.clearTable(this.databaseOptions.table).pipe(switchMap(() => fetchFromAPI()), tap(() => {
                                     this.localStorageManagerService.updateStore({
-                                        name: this.database.table,
-                                        data: { ...this.database, ...{ expires: this.utils.expires(this.database.expiresIn) } }
+                                        name: this.databaseOptions.table,
+                                        data: { ...this.databaseOptions, ...{ expires: this.utils.expires(this.databaseOptions.expiresIn) } }
                                     });
                                 }));
                             }
-                            return this.dbManagerService.getTableRecords(this.database.table).pipe(switchMap((dbData) => {
+                            return this.dbManagerService.getTableRecords(this.databaseOptions.table).pipe(switchMap((dbData) => {
                                 if (Array.isArray(dbData) && dbData.length > 0) {
                                     this.setData$(dbData);
                                     return of(dbData);
@@ -3113,14 +3114,14 @@ class HTTPManagerStateService extends ComponentStore {
                 if (method === 'CREATE')
                     this.addData$(data);
             }), concatMap((data) => {
-                if (this.hasDatabase && this.database?.table) {
+                if (this.hasDatabase && this.databaseOptions?.table) {
                     const id = options.path?.length ? options.path[options.path.length - 1] : null;
                     if (method === 'DELETE' && id)
-                        return this.dbManagerService.deleteTableRecord(this.database.table, id);
+                        return this.dbManagerService.deleteTableRecord(this.databaseOptions.table, id);
                     if (method === 'UPDATE' && data)
-                        return this.dbManagerService.updateTableRecord(this.database.table, data);
+                        return this.dbManagerService.updateTableRecord(this.databaseOptions.table, data);
                     if (method === 'CREATE' && data)
-                        return this.dbManagerService.createTableRecord(this.database.table, data);
+                        return this.dbManagerService.createTableRecord(this.databaseOptions.table, data);
                 }
                 return of(data);
             }));
@@ -3136,8 +3137,8 @@ class HTTPManagerStateService extends ComponentStore {
                 if (this.wsConnection)
                     this.wsCommunication('CREATE', [...options?.path || [], data.id]);
             }), concatMap((data) => {
-                if (this.hasDatabase && this.database?.table && data?.id) {
-                    return this.dbManagerService.createTableRecord(this.database.table, data);
+                if (this.hasDatabase && this.databaseOptions?.table && data?.id) {
+                    return this.dbManagerService.createTableRecord(this.databaseOptions.table, data);
                 }
                 return of(data);
             }));
@@ -3153,8 +3154,8 @@ class HTTPManagerStateService extends ComponentStore {
                 if (this.wsConnection)
                     this.wsCommunication('UPDATE', [...options?.path || []]);
             }), concatMap((data) => {
-                if (this.hasDatabase && this.database?.table && data?.id) {
-                    return this.dbManagerService.updateTableRecord(this.database.table, data);
+                if (this.hasDatabase && this.databaseOptions?.table && data?.id) {
+                    return this.dbManagerService.updateTableRecord(this.databaseOptions.table, data);
                 }
                 return of(data);
             }));
@@ -3170,8 +3171,8 @@ class HTTPManagerStateService extends ComponentStore {
                 if (this.wsConnection)
                     this.wsCommunication('DELETE', [...options?.path || []]);
             }), concatMap((data) => {
-                if (this.hasDatabase && this.database?.table && data?.id) {
-                    return this.dbManagerService.deleteTableRecord(this.database.table, data.id);
+                if (this.hasDatabase && this.databaseOptions?.table && data?.id) {
+                    return this.dbManagerService.deleteTableRecord(this.databaseOptions.table, data.id);
                 }
                 return of(data);
             }));
@@ -3221,16 +3222,17 @@ class HTTPManagerStateService extends ComponentStore {
                 }
             }));
         })));
+        this.databaseOptions = database;
         this.maxRetries = this.apiOptions.ws?.retry?.times || 3;
         this.retryDelay = (this.apiOptions.ws?.retry?.delay && this.apiOptions.ws.retry.delay * 1000) || 5 * 1000;
         this.wsNextRetry = new BehaviorSubject(this.retryDelay);
         this.wsNextRetry$ = this.wsNextRetry.asObservable();
         this.setApiRequestOptions(apiOptions, dataType, database);
-        this.status$ = this.setupConnectionStatus();
-        if (this.database && this.database.table) {
+        this.connectionStatus$ = this.setupConnectionStatus();
+        if (this.databaseOptions && this.databaseOptions.table) {
             this.localStorageManagerService.createStore({
-                name: this.database.table,
-                data: { ...this.database, ...{ expires: this.utils.expires(this.database.expiresIn) } },
+                name: this.databaseOptions.table,
+                data: { ...this.databaseOptions, ...{ expires: this.utils.expires(this.databaseOptions.expiresIn) } },
                 options: SettingOptions.adapt({
                     storage: StorageType.GLOBAL,
                     encrypted: false,
@@ -3241,15 +3243,18 @@ class HTTPManagerStateService extends ComponentStore {
     setApiRequestOptions(apiOptions, dataType, database) {
         this.apiOptions = ApiRequest.adapt(apiOptions);
         this.dataType = (dataType) ? dataType : DataType.ARRAY;
-        this.hasDatabase = (this.database?.table) ? true : false;
-        this.database = (this.hasDatabase) ? DatabaseStorage.adapt(database) : undefined;
+        // Only update database options if a database parameter is explicitly provided
+        if (database !== undefined) {
+            this.hasDatabase = (database?.table) ? true : false;
+            this.databaseOptions = (this.hasDatabase) ? DatabaseStorage.adapt(database) : undefined;
+        }
         // Update WebSocket retry settings when options change
         if (this.apiOptions.ws?.retry) {
             this.maxRetries = this.apiOptions.ws.retry.times || 3;
             this.retryDelay = (this.apiOptions.ws.retry.delay && this.apiOptions.ws.retry.delay * 1000) || 5 * 1000;
             this.wsNextRetry.next(this.retryDelay);
         }
-        if (this.database)
+        if (this.databaseOptions)
             this.initDBStorage();
         if (this.apiOptions.ws)
             this.initWS(this.apiOptions.ws);
@@ -3346,7 +3351,7 @@ class HTTPManagerStateService extends ComponentStore {
             console.warn('Database storage requires an adapter to define the data shape');
             return of(null);
         }
-        if (!this.database?.table) {
+        if (!this.databaseOptions?.table) {
             console.warn('Database storage requires a table name');
             return of(null);
         }
@@ -3360,7 +3365,7 @@ class HTTPManagerStateService extends ComponentStore {
             }
         }
         const tableDef = TableSchemaDef.adapt({
-            table: this.database?.table,
+            table: this.databaseOptions?.table,
             schema: schema
         });
         return this.dbManagerService.createDatabaseTable(tableDef);
@@ -4098,7 +4103,8 @@ class StateRequestServiceDemo extends HTTPManagerStateService {
                 }),
             }
         });
-        this.userAction$.subscribe(user => {
+        this.userAction$
+            .subscribe(user => {
             console.log('User Action:', user);
         });
     }
@@ -4107,6 +4113,9 @@ class StateRequestServiceDemo extends HTTPManagerStateService {
         console.log('sendMessage', data);
         this.wsMessaging(data);
     }
+    getAllChannels() {
+        this.httpManagerService.getAllChannels();
+    }
     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' }); }
 }
@@ -4144,8 +4153,10 @@ class StateDataRequestService extends HTTPManagerStateService {
         }));
         this.attempts$ = this.wsRetryAttempts$;
         this.nextRetry$ = this.wsNextRetry$;
+        this.path = ['ai', 'tests'];
     }
-    updateConnection(server, wsServer, jwtToken, user) {
+    updateConnection(server, wsServer, jwtToken, user, path = ['ai', 'tests']) {
+        this.path = path;
         this.setApiRequestOptions({
             server,
             retry: RetryOptions.adapt({
@@ -4173,7 +4184,7 @@ class StateDataRequestService extends HTTPManagerStateService {
             "email": "mikeboni@hotmail.com",
             "first_name": "mike"
         };
-        this.createRecord(newData, RequestOptions.adapt({ path: ['ai', 'tests'] }));
+        this.createRecord(newData, RequestOptions.adapt({ path: this.path }));
     }
     sendMessage(data) {
         debugger;
@@ -4181,15 +4192,15 @@ class StateDataRequestService extends HTTPManagerStateService {
         this.wsMessaging(data);
     }
     getData() {
-        this.fetchRecords(RequestOptions.adapt({ path: ['ai', 'tests'] }));
+        this.fetchRecords(RequestOptions.adapt({ path: this.path }));
     }
     updateData(data) {
-        const sampleOptions = RequestOptions.adapt({ path: ['ai', 'tests', data.id] });
+        const sampleOptions = RequestOptions.adapt({ path: [...this.path, data.id] });
         console.log('updateData', sampleOptions);
         this.updateRecord(data, sampleOptions);
     }
     deleteData(data) {
-        const sampleOptions = RequestOptions.adapt({ path: ['ai', 'tests', data.id] });
+        const sampleOptions = RequestOptions.adapt({ path: [...this.path, data.id] });
         console.log('deleteData', sampleOptions);
         this.deleteRecord(sampleOptions);
     }
@@ -4205,6 +4216,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 
 class WsDataControlComponent {
     constructor() {
+        this.path = ['ai', 'tests'];
         this.stateDataRequestService = inject(StateDataRequestService);
         this.user$ = this.stateDataRequestService.user$;
         this.users$ = this.stateDataRequestService.userList$;
@@ -4216,7 +4228,7 @@ class WsDataControlComponent {
         };
     }
     ngOnInit() {
-        this.stateDataRequestService.updateConnection(this.server, this.wsServer, this.jwtToken, this.user);
+        this.stateDataRequestService.updateConnection(this.server, this.wsServer, this.jwtToken, this.user, this.path);
         this.stateDataRequestService.getData();
     }
     onGetData() {
@@ -4241,7 +4253,7 @@ class WsDataControlComponent {
         this.stateDataRequestService.deleteData(lastRec);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WsDataControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: WsDataControlComponent, selector: "app-ws-data-control", inputs: { server: "server", wsServer: "wsServer", jwtToken: "jwtToken", user: "user" }, ngImport: i0, template: "@if ((data$ | async); as data) {\n  <div style=\"margin: 1rem;\">\n    @if ((users$ |async); as users) {\n      <div>\n        @if (users.length > 0) {\n          <h3 style=\"margin: 0;\">Connected Users</h3>\n        } @else {\n          <h3 style=\"margin: 0;\">No Users</h3>\n        }\n        <mat-chip-set>\n          @for (user of users; track user) {\n            <mat-chip\n              [class.user-chip--primary]=\"isUser(user, (user$ | async))\"\n              [style.color]=\"isUser(user, (user$ | async)) ? '#fff' : null\"\n              [disableRipple]=\"true\"\n            >\n              {{ user.content.name }}\n            </mat-chip>\n          }\n        </mat-chip-set>\n      </div>\n    }\n    <div style=\"margin-top: 1rem; margin-bottom: 1rem;\">\n      <mat-divider></mat-divider>\n    </div>\n\n    <div class=\"box\" style=\"margin-bottom: 1rem;\" *ngIf=\"(userAction$ | async) as userAction\">\n      {{ userAction?.content.user.name }} has {{ userAction?.content.method }}\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    @if (data.length > 0) {\n      <div>\n        <table mat-table [dataSource]=\"data\" style=\"border: 1px solid grey;\">\n          <ng-container matColumnDef=\"id\">\n            <th mat-header-cell *matHeaderCellDef> ID </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.id}} </td>\n          </ng-container>\n          <ng-container matColumnDef=\"spiffe\">\n            <th mat-header-cell *matHeaderCellDef> Spiffe </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.spiffe}} </td>\n          </ng-container>\n          <ng-container matColumnDef=\"name\">\n            <th mat-header-cell *matHeaderCellDef> Name </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.first_name}} {{element.last_name}}</td>\n          </ng-container>\n          <ng-container matColumnDef=\"email\">\n            <th mat-header-cell *matHeaderCellDef> Email </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.email}} </td>\n          </ng-container>\n          <tr mat-header-row *matHeaderRowDef=\"['id', 'spiffe', 'name', 'email']\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: ['id', 'spiffe', 'name', 'email'];\"></tr>\n        </table>\n        <div style=\"border: 1px solid grey; padding: .5rem; border-top: none;\">\n          <h3 style=\"margin: 0;\">Total Records {{ data.length }}</h3>\n        </div>\n      </div>\n    } @else {\n      <div style=\"margin-top: 1rem; font-style: italic;\">\n        No Data Available\n      </div>\n    }\n  </div>\n}\n\n", styles: [".user-chip--primary{background-color:var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5))!important;color:#fff!important;--mdc-evolution-chip-container-color: var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5));--mdc-evolution-chip-label-text-color: #fff}.user-chip--primary :is(.mdc-evolution-chip__text-label,.mdc-evolution-chip__action,.mdc-evolution-chip__cell,.mat-mdc-chip-action-label){color:#fff!important}.user-chip--primary,.user-chip--primary *{color:#fff!important}:host ::ng-deep .user-chip--primary{background-color:var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5))!important;color:#fff!important;--mdc-evolution-chip-container-color: var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5));--mdc-evolution-chip-label-text-color: #fff}:host ::ng-deep .user-chip--primary .mdc-evolution-chip__text-label,:host ::ng-deep .user-chip--primary .mdc-evolution-chip__action,:host ::ng-deep .user-chip--primary .mdc-evolution-chip__cell,:host ::ng-deep .user-chip--primary .mat-mdc-chip-action-label,:host ::ng-deep .user-chip--primary *{color:#fff!important}.box{padding:.5rem;border:1px solid rgb(174,174,13);background-color:#ececaf}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$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: i3$1.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: i8.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i8.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i8.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i8.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i8.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i11.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: WsDataControlComponent, selector: "app-ws-data-control", inputs: { server: "server", wsServer: "wsServer", jwtToken: "jwtToken", user: "user", path: "path" }, ngImport: i0, template: "@if ((data$ | async); as data) {\n  <div style=\"margin: 1rem;\">\n    @if ((users$ |async); as users) {\n      <div>\n        @if (users.length > 0) {\n          <h3 style=\"margin: 0;\">Connected Users</h3>\n        } @else {\n          <h3 style=\"margin: 0;\">No Users</h3>\n        }\n        <mat-chip-set>\n          @for (user of users; track user) {\n            <mat-chip\n              [class.user-chip--primary]=\"isUser(user, (user$ | async))\"\n              [style.color]=\"isUser(user, (user$ | async)) ? '#fff' : null\"\n              [disableRipple]=\"true\"\n            >\n              {{ user.content.name }}\n            </mat-chip>\n          }\n        </mat-chip-set>\n      </div>\n    }\n    <div style=\"margin-top: 1rem; margin-bottom: 1rem;\">\n      <mat-divider></mat-divider>\n    </div>\n\n    <div class=\"box\" style=\"margin-bottom: 1rem;\" *ngIf=\"(userAction$ | async) as userAction\">\n      {{ userAction?.content.user.name }} has {{ userAction?.content.method }}\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    @if (data.length > 0) {\n      <div>\n        <table mat-table [dataSource]=\"data\" style=\"border: 1px solid grey;\">\n          <ng-container matColumnDef=\"id\">\n            <th mat-header-cell *matHeaderCellDef> ID </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.id}} </td>\n          </ng-container>\n          <ng-container matColumnDef=\"spiffe\">\n            <th mat-header-cell *matHeaderCellDef> Spiffe </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.spiffe}} </td>\n          </ng-container>\n          <ng-container matColumnDef=\"name\">\n            <th mat-header-cell *matHeaderCellDef> Name </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.first_name}} {{element.last_name}}</td>\n          </ng-container>\n          <ng-container matColumnDef=\"email\">\n            <th mat-header-cell *matHeaderCellDef> Email </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.email}} </td>\n          </ng-container>\n          <tr mat-header-row *matHeaderRowDef=\"['id', 'spiffe', 'name', 'email']\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: ['id', 'spiffe', 'name', 'email'];\"></tr>\n        </table>\n        <div style=\"border: 1px solid grey; padding: .5rem; border-top: none;\">\n          <h3 style=\"margin: 0;\">Total Records {{ data.length }}</h3>\n        </div>\n      </div>\n    } @else {\n      <div style=\"margin-top: 1rem; font-style: italic;\">\n        No Data Available\n      </div>\n    }\n  </div>\n}\n\n", styles: [".user-chip--primary{background-color:var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5))!important;color:#fff!important;--mdc-evolution-chip-container-color: var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5));--mdc-evolution-chip-label-text-color: #fff}.user-chip--primary :is(.mdc-evolution-chip__text-label,.mdc-evolution-chip__action,.mdc-evolution-chip__cell,.mat-mdc-chip-action-label){color:#fff!important}.user-chip--primary,.user-chip--primary *{color:#fff!important}:host ::ng-deep .user-chip--primary{background-color:var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5))!important;color:#fff!important;--mdc-evolution-chip-container-color: var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5));--mdc-evolution-chip-label-text-color: #fff}:host ::ng-deep .user-chip--primary .mdc-evolution-chip__text-label,:host ::ng-deep .user-chip--primary .mdc-evolution-chip__action,:host ::ng-deep .user-chip--primary .mdc-evolution-chip__cell,:host ::ng-deep .user-chip--primary .mat-mdc-chip-action-label,:host ::ng-deep .user-chip--primary *{color:#fff!important}.box{padding:.5rem;border:1px solid rgb(174,174,13);background-color:#ececaf}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$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: i3$1.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: i8.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i8.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i8.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i8.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i8.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i11.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WsDataControlComponent, decorators: [{
             type: Component,
@@ -4254,16 +4266,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], user: [{
                 type: Input
+            }], path: [{
+                type: Input
             }] } });
 
 class WsMessagingComponent {
     constructor() {
         this.fb = inject(FormBuilder);
         this.stateRequestServiceDemo = inject(StateRequestServiceDemo);
+        this.channels$ = this.stateRequestServiceDemo.channels$;
         this.user$ = this.stateRequestServiceDemo.user$;
         this.users$ = this.stateRequestServiceDemo.userList$;
         this.data$ = this.stateRequestServiceDemo.data$;
+        this.connectionStatus$ = this.stateRequestServiceDemo.connectionStatus$;
         this.messages = this.fb.group({
+            channels: this.fb.control(null, Validators.required),
             toUsers: this.fb.control(null, Validators.required),
             content: this.fb.control(null, Validators.required),
         });
@@ -4305,6 +4322,9 @@ class WsMessagingComponent {
             return { user: mainUser, messages };
         }));
     }
+    get channels() {
+        return this.messages.get('channels');
+    }
     get toUsers() {
         return this.messages.get('toUsers');
     }
@@ -4317,6 +4337,10 @@ class WsMessagingComponent {
     ngOnInit() {
         this.stateRequestServiceDemo.updateConnection(this.server, this.wsServer, this.jwtToken, this.user);
         // this.stateRequestServiceDemo.getData()
+        this.connectionStatus$
+            .subscribe(status => {
+            this.stateRequestServiceDemo.getAllChannels();
+        });
     }
     onSendMessage(user) {
         this.messages.markAllAsTouched();
@@ -4340,11 +4364,11 @@ class WsMessagingComponent {
         this.content.reset();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WsMessagingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: WsMessagingComponent, selector: "app-ws-messaging", inputs: { server: "server", wsServer: "wsServer", jwtToken: "jwtToken", user: "user" }, ngImport: i0, template: "@if ((user$ | async); as user) {\n\n  @if ((data$ | async); as data) {\n    <div style=\"margin: 1rem; display: flex; gap: 1rem; flex-direction: column;\">\n      @if ((user$ | async); as userInfo) {\n        <div>\n          @if ((users$ | async); as users) {\n            <div>\n              <div style=\"display: flex; gap: 1rem\">\n                <div style=\"flex:1\" [formGroup]=\"messages\">\n                  <div style=\"display:flex\">\n                      <mat-form-field style=\"flex:1\" appearance=\"outline\">\n                      <mat-label>Users</mat-label>\n                      <mat-select formControlName=\"toUsers\" multiple #userSelect>\n                        <mat-select-trigger>\n                        {{ (userSelect.value?.[0] === 'allChannels' ? 'All Users' : userSelect.value?.[0]?.content?.name) || '' }}\n                        @if ((userSelect.value?.length || 0) > 1) {\n                          <span class=\"example-additional-selection\">\n                          (+{{(userSelect.value?.length || 0) - 1}} {{userSelect.value?.length === 2 ? 'other' : 'others'}})\n                          </span>\n                        }\n                        </mat-select-trigger>\n                        <mat-option value=\"allChannels\">\n                        All Users\n                        </mat-option>\n                        @for (user of users; track user) {\n                        <mat-option [value]=\"user\">\n                          {{ user.content.name }}\n                        </mat-option>\n                        }\n                      </mat-select>\n                      </mat-form-field>\n                  </div>\n                  <div style=\"display:flex\">\n                    <mat-form-field style=\"flex:1\" appearance=\"outline\">\n                      <mat-label>Send a Message</mat-label>\n                      <textarea\n                        matInput placeholder=\"Ex. It makes me feel...\"\n                        formControlName=\"content\"\n                        (keydown.enter)=\"onSendMessage(user); $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)=\"onSendAlert()\" color=\"warn\">\n                      Send Alert\n                    </button>\n                    <button mat-stroked-button (click)=\"onSendMessage(user)\">\n                      Send Message\n                    </button>\n                  </div>\n                </div>\n              </div>\n              @if ((chat$ | async); as chat) {\n                <div style=\"border: thin gray solid; padding: 1rem; margin-top: 1rem;\">\n                  <!-- <app-messenger-chat\n                  [user]=\"chat.user\"\n                  [messages]=\"chat.messages\"\n                ></app-messenger-chat> -->\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n  }\n\n}\n", styles: [""], dependencies: [{ kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i4.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i12.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: WsMessagingComponent, selector: "app-ws-messaging", inputs: { server: "server", wsServer: "wsServer", jwtToken: "jwtToken", user: "user" }, ngImport: i0, template: "\n  @if ((data$ | async); as data) {\n    <div style=\"margin: 1rem; display: flex; gap: 1rem; flex-direction: column;\">\n        <div>\n\n          <div>\n            <div style=\"display: flex; gap: 1rem\">\n              <div style=\"flex:1\" [formGroup]=\"messages\">\n\n                <div style=\"display:flex; gap: 1rem\">\n                  @if ((channels$ | async); as channels) {\n                    <mat-form-field style=\"flex:1\" appearance=\"outline\">\n                    <mat-label>Channels</mat-label>\n                    <mat-select formControlName=\"channels\" multiple #channelsSelect>\n                      <mat-select-trigger>\n                      {{ (channelsSelect.value?.[0] === 'allChannels' ? 'All Channels' : channelsSelect.value?.[0]?.content?.name) || '' }}\n                      @if ((channelsSelect.value?.length || 0) > 1) {\n                        <span>\n                        (+{{(channelsSelect.value?.length || 0) - 1}} {{channelsSelect.value?.length === 2 ? 'other' : 'others'}})\n                        </span>\n                      }\n                      </mat-select-trigger>\n                      <mat-option value=\"allChannels\">\n                      All Channels\n                      </mat-option>\n                      @for (channel of channels; track channel) {\n                      <mat-option [value]=\"channel\">\n                        {{ channel }}\n                      </mat-option>\n                      }\n                    </mat-select>\n                    </mat-form-field>\n                  }\n                  @if ((users$ | async); as users) {\n                    <mat-form-field style=\"flex:1\" appearance=\"outline\">\n                    <mat-label>Users</mat-label>\n                    <mat-select formControlName=\"toUsers\" multiple #userSelect>\n                      <mat-select-trigger>\n                      {{ (userSelect.value?.[0] === 'allUsers' ? 'All Users' : userSelect.value?.[0]?.content?.name) || '' }}\n                      @if ((userSelect.value?.length || 0) > 1) {\n                        <span>\n                        (+{{(userSelect.value?.length || 0) - 1}} {{userSelect.value?.length === 2 ? 'other' : 'others'}})\n                        </span>\n                      }\n                      </mat-select-trigger>\n                      <mat-option value=\"allChannels\">\n                      All Users\n                      </mat-option>\n                      @for (user of users; track user) {\n                        <mat-option [value]=\"user\">\n                          {{ user.content.name }}\n                        </mat-option>\n                      }\n                    </mat-select>\n                    </mat-form-field>\n                  }\n                </div>\n\n                @if ((users$ | async); as users) {\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(user); $event.preventDefault()\"\n                        [disabled]=\"!isValid\"\n                      ></textarea>\n                    </mat-form-field>\n                  </div>\n                }\n\n                <div style=\"display:flex; gap: .5rem;\">\n                  <div style=\"flex:1\"></div>\n                  <button mat-stroked-button (click)=\"onSendAlert()\" color=\"warn\">\n                    Send Alert\n                  </button>\n                  <button mat-stroked-button (click)=\"onSendMessage(user)\">\n                    Send Message\n                  </button>\n                </div>\n              </div>\n            </div>\n            @if ((chat$ | async); as chat) {\n              <div style=\"border: thin gray solid; padding: 1rem; margin-top: 1rem;\">\n                  <!-- <app-messenger-chat\n                  [user]=\"chat.user\"\n                  [messages]=\"chat.messages\"\n                ></app-messenger-chat> -->\n              </div>\n            }\n          </div>\n\n      </div>\n  </div>\n  }\n\n\n  {{ channels$ | async | json }}\n", styles: [""], dependencies: [{ kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i4.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i12.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WsMessagingComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-ws-messaging', standalone: false, template: "@if ((user$ | async); as user) {\n\n  @if ((data$ | async); as data) {\n    <div style=\"margin: 1rem; display: flex; gap: 1rem; flex-direction: column;\">\n      @if ((user$ | async); as userInfo) {\n        <div>\n          @if ((users$ | async); as users) {\n            <div>\n              <div style=\"display: flex; gap: 1rem\">\n                <div style=\"flex:1\" [formGroup]=\"messages\">\n                  <div style=\"display:flex\">\n                      <mat-form-field style=\"flex:1\" appearance=\"outline\">\n                      <mat-label>Users</mat-label>\n                      <mat-select formControlName=\"toUsers\" multiple #userSelect>\n                        <mat-select-trigger>\n                        {{ (userSelect.value?.[0] === 'allChannels' ? 'All Users' : userSelect.value?.[0]?.content?.name) || '' }}\n                        @if ((userSelect.value?.length || 0) > 1) {\n                          <span class=\"example-additional-selection\">\n                          (+{{(userSelect.value?.length || 0) - 1}} {{userSelect.value?.length === 2 ? 'other' : 'others'}})\n                          </span>\n                        }\n                        </mat-select-trigger>\n                        <mat-option value=\"allChannels\">\n                        All Users\n                        </mat-option>\n                        @for (user of users; track user) {\n                        <mat-option [value]=\"user\">\n                          {{ user.content.name }}\n                        </mat-option>\n                        }\n                      </mat-select>\n                      </mat-form-field>\n                  </div>\n                  <div style=\"display:flex\">\n                    <mat-form-field style=\"flex:1\" appearance=\"outline\">\n                      <mat-label>Send a Message</mat-label>\n                      <textarea\n                        matInput placeholder=\"Ex. It makes me feel...\"\n                        formControlName=\"content\"\n                        (keydown.enter)=\"onSendMessage(user); $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)=\"onSendAlert()\" color=\"warn\">\n                      Send Alert\n                    </button>\n                    <button mat-stroked-button (click)=\"onSendMessage(user)\">\n                      Send Message\n                    </button>\n                  </div>\n                </div>\n              </div>\n              @if ((chat$ | async); as chat) {\n                <div style=\"border: thin gray solid; padding: 1rem; margin-top: 1rem;\">\n                  <!-- <app-messenger-chat\n                  [user]=\"chat.user\"\n                  [messages]=\"chat.messages\"\n                ></app-messenger-chat> -->\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n  }\n\n}\n" }]
+            args: [{ selector: 'app-ws-messaging', standalone: false, template: "\n  @if ((data$ | async); as data) {\n    <div style=\"margin: 1rem; display: flex; gap: 1rem; flex-direction: column;\">\n        <div>\n\n          <div>\n            <div style=\"display: flex; gap: 1rem\">\n              <div style=\"flex:1\" [formGroup]=\"messages\">\n\n                <div style=\"display:flex; gap: 1rem\">\n                  @if ((channels$ | async); as channels) {\n                    <mat-form-field style=\"flex:1\" appearance=\"outline\">\n                    <mat-label>Channels</mat-label>\n                    <mat-select formControlName=\"channels\" multiple #channelsSelect>\n                      <mat-select-trigger>\n                      {{ (channelsSelect.value?.[0] === 'allChannels' ? 'All Channels' : channelsSelect.value?.[0]?.content?.name) || '' }}\n                      @if ((channelsSelect.value?.length || 0) > 1) {\n                        <span>\n                        (+{{(channelsSelect.value?.length || 0) - 1}} {{channelsSelect.value?.length === 2 ? 'other' : 'others'}})\n                        </span>\n                      }\n                      </mat-select-trigger>\n                      <mat-option value=\"allChannels\">\n                      All Channels\n                      </mat-option>\n                      @for (channel of channels; track channel) {\n                      <mat-option [value]=\"channel\">\n                        {{ channel }}\n                      </mat-option>\n                      }\n                    </mat-select>\n                    </mat-form-field>\n                  }\n                  @if ((users$ | async); as users) {\n                    <mat-form-field style=\"flex:1\" appearance=\"outline\">\n                    <mat-label>Users</mat-label>\n                    <mat-select formControlName=\"toUsers\" multiple #userSelect>\n                      <mat-select-trigger>\n                      {{ (userSelect.value?.[0] === 'allUsers' ? 'All Users' : userSelect.value?.[0]?.content?.name) || '' }}\n                      @if ((userSelect.value?.length || 0) > 1) {\n                        <span>\n                        (+{{(userSelect.value?.length || 0) - 1}} {{userSelect.value?.length === 2 ? 'other' : 'others'}})\n                        </span>\n                      }\n                      </mat-select-trigger>\n                      <mat-option value=\"allChannels\">\n                      All Users\n                      </mat-option>\n                      @for (user of users; track user) {\n                        <mat-option [value]=\"user\">\n                          {{ user.content.name }}\n                        </mat-option>\n                      }\n                    </mat-select>\n                    </mat-form-field>\n                  }\n                </div>\n\n                @if ((users$ | async); as users) {\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(user); $event.preventDefault()\"\n                        [disabled]=\"!isValid\"\n                      ></textarea>\n                    </mat-form-field>\n                  </div>\n                }\n\n                <div style=\"display:flex; gap: .5rem;\">\n                  <div style=\"flex:1\"></div>\n                  <button mat-stroked-button (click)=\"onSendAlert()\" color=\"warn\">\n                    Send Alert\n                  </button>\n                  <button mat-stroked-button (click)=\"onSendMessage(user)\">\n                    Send Message\n                  </button>\n                </div>\n              </div>\n            </div>\n            @if ((chat$ | async); as chat) {\n              <div style=\"border: thin gray solid; padding: 1rem; margin-top: 1rem;\">\n                  <!-- <app-messenger-chat\n                  [user]=\"chat.user\"\n                  [messages]=\"chat.messages\"\n                ></app-messenger-chat> -->\n              </div>\n            }\n          </div>\n\n      </div>\n  </div>\n  }\n\n\n  {{ channels$ | async | json }}\n" }]
         }], propDecorators: { server: [{
                 type: Input
             }], wsServer: [{
@@ -4384,12 +4408,13 @@ class RequestManagerWsDemoComponent {
         this.httpManagerService = inject(HTTPManagerService);
         this.stateRequestServiceDemo = inject(StateRequestServiceDemo);
         this.fb = inject(FormBuilder);
+        this.path = ['ai', 'tests'];
         this.user$ = this.stateRequestServiceDemo.user$;
         // users$ = this.stateRequestServiceDemo.userList$
         this.attempts$ = this.stateRequestServiceDemo.attempts$;
         this.nextRetry$ = this.stateRequestServiceDemo.nextRetry$;
-        this.connectionStatus$ = this.stateRequestServiceDemo.status$;
-        // data$ = this.stateRequestServiceDemo.data$;
+        this.connectionStatus$ = this.stateRequestServiceDemo.connectionStatus$;
+        this.data$ = this.stateRequestServiceDemo.data$;
         this.isPending$ = this.stateRequestServiceDemo.isPending$;
     }
     // messages = this.fb.group<any>({
@@ -4451,11 +4476,11 @@ class RequestManagerWsDemoComponent {
         //   this.stateRequestServiceDemo.updateConnection(this.server, this.wsServer, this.jwtToken, this.user);
     }
     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: "17.0.0", version: "18.2.14", type: RequestManagerWsDemoComponent, selector: "app-request-manager-ws-demo", inputs: { server: "server", wsServer: "wsServer", jwtToken: "jwtToken", user: "user" }, ngImport: i0, template: "<div style=\"margin: 2rem;\">\n\n  <h2 style=\"display: flex;\">\n    <span style=\"flex:1\">HTTP Request State Manager - Websockets</span>\n    @if ((connectionStatus$ | async); as connected) {\n      <span>\n        WS -\n        <span style=\"color: green;\">Connected</span>\n      </span>\n    } @else {\n      <span style=\"color: red;\">Disconnected {{ attempts$ | async }} - {{ nextRetry$ |async }}</span>\n    }\n  </h2>\n\n  <div>\n\n    @if ((user$ | async); as userInfo) {\n      <div>\n        <mat-toolbar>\n          <div style=\"display: flex; flex:1\">\n            <div style=\"flex:1\">{{ userInfo.content.name }}</div>\n            <div>({{ userInfo.content.ldap }})</div>\n          </div>\n        </mat-toolbar>\n      </div>\n    }\n\n    @if ((isPending$ | async)) {\n      <div>\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n      </div>\n    }\n\n    <mat-tab-group animationDuration=\"0ms\">\n\n      <mat-tab label=\"WS - Data Control\">\n        <!-- DATA CONTROL -->\n        <app-ws-data-control\n          [server]=\"server\"\n          [wsServer]=\"wsServer\"\n          [jwtToken]=\"jwtToken\"\n          [user]=\"user\"\n        ></app-ws-data-control>\n\n      </mat-tab>\n\n      <mat-tab label=\"WS - Messaging\">\n        <!-- MESSAGING -->\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      <!-- WS - Custom Messaging -->\n      <app-ws-notifications></app-ws-notifications>\n    </mat-tab>\n\n    <mat-tab label=\"WS - AI Messaging\" [disabled]=\"true\">\n      <!-- WS - AI Messaging -->\n      <app-ws-ai-messaging></app-ws-ai-messaging>\n    </mat-tab>\n\n  </mat-tab-group>\n</div>\n\n</div>\n\n", styles: [""], dependencies: [{ kind: "component", type: i1$3.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i1$3.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i3$2.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: WsMessagingComponent, selector: "app-ws-messaging", 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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: RequestManagerWsDemoComponent, selector: "app-request-manager-ws-demo", inputs: { server: "server", wsServer: "wsServer", jwtToken: "jwtToken", user: "user", path: "path" }, ngImport: i0, template: "<div style=\"margin: 2rem;\">\n\n  <h2 style=\"display: flex;\">\n    <span style=\"flex:1\">HTTP Request State Manager - Websockets</span>\n    @if ((connectionStatus$ | async); as connected) {\n      <span>\n        WS -\n        <span style=\"color: green;\">Connected</span>\n      </span>\n    } @else {\n      <span style=\"color: red;\">Disconnected {{ attempts$ | async }} - {{ nextRetry$ |async }}</span>\n    }\n  </h2>\n\n  <div>\n\n    @if ((user$ | async); as userInfo) {\n      <div>\n        <mat-toolbar>\n          <div style=\"display: flex; flex:1\">\n            <div style=\"flex:1\">{{ userInfo.content.name }}</div>\n            <div>({{ userInfo.content.ldap }})</div>\n          </div>\n        </mat-toolbar>\n      </div>\n    }\n\n    @if ((isPending$ | async)) {\n      <div>\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n      </div>\n    }\n\n    <mat-tab-group animationDuration=\"0ms\" [selectedIndex]=\"1\">\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          [path]=\"path\"\n        ></app-ws-data-control>\n\n      </mat-tab>\n\n      <mat-tab label=\"WS - Messaging\">\n        <!-- MESSAGING -->\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      <!-- WS - Custom Messaging -->\n      <app-ws-notifications></app-ws-notifications>\n    </mat-tab>\n\n    <mat-tab label=\"WS - AI Messaging\" [disabled]=\"true\">\n      <!-- WS - AI Messaging -->\n      <app-ws-ai-messaging></app-ws-ai-messaging>\n    </mat-tab>\n\n  </mat-tab-group>\n</div>\n\n</div>\n\n", styles: [""], dependencies: [{ kind: "component", type: i1$3.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i1$3.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i3$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: WsDataControlComponent, selector: "app-ws-data-control", inputs: ["server", "wsServer", "jwtToken", "user", "path"] }, { kind: "component", type: WsMessagingComponent, selector: "app-ws-messaging", 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', standalone: false, template: "<div style=\"margin: 2rem;\">\n\n  <h2 style=\"display: flex;\">\n    <span style=\"flex:1\">HTTP Request State Manager - Websockets</span>\n    @if ((connectionStatus$ | async); as connected) {\n      <span>\n        WS -\n        <span style=\"color: green;\">Connected</span>\n      </span>\n    } @else {\n      <span style=\"color: red;\">Disconnected {{ attempts$ | async }} - {{ nextRetry$ |async }}</span>\n    }\n  </h2>\n\n  <div>\n\n    @if ((user$ | async); as userInfo) {\n      <div>\n        <mat-toolbar>\n          <div style=\"display: flex; flex:1\">\n            <div style=\"flex:1\">{{ userInfo.content.name }}</div>\n            <div>({{ userInfo.content.ldap }})</div>\n          </div>\n        </mat-toolbar>\n      </div>\n    }\n\n    @if ((isPending$ | async)) {\n      <div>\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n      </div>\n    }\n\n    <mat-tab-group animationDuration=\"0ms\">\n\n      <mat-tab label=\"WS - Data Control\">\n        <!-- DATA CONTROL -->\n        <app-ws-data-control\n          [server]=\"server\"\n          [wsServer]=\"wsServer\"\n          [jwtToken]=\"jwtToken\"\n          [user]=\"user\"\n        ></app-ws-data-control>\n\n      </mat-tab>\n\n      <mat-tab label=\"WS - Messaging\">\n        <!-- MESSAGING -->\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      <!-- WS - Custom Messaging -->\n      <app-ws-notifications></app-ws-notifications>\n    </mat-tab>\n\n    <mat-tab label=\"WS - AI Messaging\" [disabled]=\"true\">\n      <!-- WS - AI Messaging -->\n      <app-ws-ai-messaging></app-ws-ai-messaging>\n    </mat-tab>\n\n  </mat-tab-group>\n</div>\n\n</div>\n\n" }]
+            args: [{ selector: 'app-request-manager-ws-demo', standalone: false, template: "<div style=\"margin: 2rem;\">\n\n  <h2 style=\"display: flex;\">\n    <span style=\"flex:1\">HTTP Request State Manager - Websockets</span>\n    @if ((connectionStatus$ | async); as connected) {\n      <span>\n        WS -\n        <span style=\"color: green;\">Connected</span>\n      </span>\n    } @else {\n      <span style=\"color: red;\">Disconnected {{ attempts$ | async }} - {{ nextRetry$ |async }}</span>\n    }\n  </h2>\n\n  <div>\n\n    @if ((user$ | async); as userInfo) {\n      <div>\n        <mat-toolbar>\n          <div style=\"display: flex; flex:1\">\n            <div style=\"flex:1\">{{ userInfo.content.name }}</div>\n            <div>({{ userInfo.content.ldap }})</div>\n          </div>\n        </mat-toolbar>\n      </div>\n    }\n\n    @if ((isPending$ | async)) {\n      <div>\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n      </div>\n    }\n\n    <mat-tab-group animationDuration=\"0ms\" [selectedIndex]=\"1\">\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          [path]=\"path\"\n        ></app-ws-data-control>\n\n      </mat-tab>\n\n      <mat-tab label=\"WS - Messaging\">\n        <!-- MESSAGING -->\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      <!-- WS - Custom Messaging -->\n      <app-ws-notifications></app-ws-notifications>\n    </mat-tab>\n\n    <mat-tab label=\"WS - AI Messaging\" [disabled]=\"true\">\n      <!-- WS - AI Messaging -->\n      <app-ws-ai-messaging></app-ws-ai-messaging>\n    </mat-tab>\n\n  </mat-tab-group>\n</div>\n\n</div>\n\n" }]
         }], propDecorators: { server: [{
                 type: Input
             }], wsServer: [{
@@ -4464,6 +4489,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], user: [{
                 type: Input
+            }], path: [{
+                type: Input
             }] } });
 
 let ClientInfo$1 = class ClientInfo {
@@ -5965,6 +5992,7 @@ class HttpRequestServicesDemoComponent {
         this.wsServer = 'ws:';
         this.jwtToken = '';
         this.server = 'http:';
+        this.path = ['ai', 'tests'];
         this.requestTypes = [
             { name: "Http Service", value: 'http_service' },
             // { name: "Http Signals Service", value: 'http_signals_service', new: true },
@@ -5985,11 +6013,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: "17.0.0", version: "18.2.14", type: HttpRequestServicesDemoComponent, selector: "app-http-request-services-demo", inputs: { wsServer: "wsServer", jwtToken: "jwtToken", server: "server", user: "user", adapter: "adapter", mapper: "mapper" }, ngImport: i0, template: "<mat-toolbar  style=\"display:flex\">\n  <div>Http Request Manager Services</div>\n  <div style=\"flex:1\"></div>\n  <button mat-stroked-button [matMenuTriggerFor]=\"menu\">Services</button>\n  <mat-menu #menu=\"matMenu\">\n    @for (type of requestTypes; track type; let i = $index) {\n      @if (type?.divider) {\n        <div\n          style=\"margin-top: .5rem; margin-bottom: .5rem;\"\n          >\n          <mat-divider></mat-divider>\n        </div>\n      }\n      <button\n        mat-menu-item\n        (click)=\"onSelected(i)\"\n        [disabled]=\"type.disabled\"\n        >\n        {{ type.name }}\n      </button>\n    }\n\n  </mat-menu>\n</mat-toolbar>\n\n<span>\n  @switch (selectedService) {\n    @case ('http_service') {\n      <p>\n        <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n        <app-request-manager-demo\n          [server]=\"server\"\n          [adapter]=\"adapter\"\n          [mapper]=\"mapper\"\n        ></app-request-manager-demo>\n      </p>\n    }\n    <!-- <p *ngSwitchCase=\"'http_signals_service'\">\n    <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n    <app-request-signals-manager-demo></app-request-signals-manager-demo>\n  </p> -->\n  @case ('http_state_service') {\n    <p>\n      <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n      <app-request-manager-state-demo\n        [server]=\"server\"\n        [adapter]=\"adapter\"\n        [mapper]=\"mapper\"\n      ></app-request-manager-state-demo>\n    </p>\n  }\n  @case ('http_state_service_ws') {\n    <p>\n      <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n      <app-request-manager-ws-demo\n        [server]=\"server\"\n        [wsServer]=\"wsServer\"\n        [jwtToken]=\"jwtToken\"\n        [user]=\"user\"\n      ></app-request-manager-ws-demo>\n    </p>\n  }\n  @case ('database_service') {\n    <p>\n      <app-database-data-demo></app-database-data-demo>\n    </p>\n  }\n  @case ('local_storage_service') {\n    <p>\n      <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n      <app-local-storage-demo></app-local-storage-demo>\n    </p>\n  }\n  <!-- <p *ngSwitchCase=\"'local_storage_signals_service'\">\n  <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n  <app-local-storage-signals-demo></app-local-storage-signals-demo>\n</p> -->\n@case ('store_state_manager') {\n  <p>\n    <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n    <app-store-state-manager-demo></app-store-state-manager-demo>\n  </p>\n}\n@default {\n  <p>\n    Other\n  </p>\n}\n}\n</span>\n\n<ng-template #HTTP_OPTIONS>\n  @if (injectionOptions?.httpRequestOptions) {\n    <div class=\"box\">\n      <h3 style=\"font-weight: bold;\">Injection Token Detected - HTTP Options</h3>\n      {{ injectionOptions?.httpRequestOptions| json }}\n    </div>\n  }\n</ng-template>\n\n<ng-template #LOCAL_OPTIONS>\n  @if (injectionOptions?.LocalStorageOptions) {\n    <ng-container class=\"box\">\n      <div class=\"box\">\n        <h3 style=\"font-weight: bold;\">Injection Token Detected - LocalStorage Options</h3>\n        {{ injectionOptions?.LocalStorageOptions| json }}\n      </div>\n    </ng-container>\n  }\n</ng-template>\n\n\n", styles: [".box{padding:1rem;background-color:#f5f5f5;border:thin gray solid;margin-top:1rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i11.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i3$2.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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: HttpRequestServicesDemoComponent, selector: "app-http-request-services-demo", inputs: { wsServer: "wsServer", jwtToken: "jwtToken", server: "server", user: "user", path: "path", adapter: "adapter", mapper: "mapper" }, ngImport: i0, template: "<mat-toolbar  style=\"display:flex\">\n  <div>Http Request Manager Services</div>\n  <div style=\"flex:1\"></div>\n  <button mat-stroked-button [matMenuTriggerFor]=\"menu\">Services</button>\n  <mat-menu #menu=\"matMenu\">\n    @for (type of requestTypes; track type; let i = $index) {\n      @if (type?.divider) {\n        <div\n          style=\"margin-top: .5rem; margin-bottom: .5rem;\"\n          >\n          <mat-divider></mat-divider>\n        </div>\n      }\n      <button\n        mat-menu-item\n        (click)=\"onSelected(i)\"\n        [disabled]=\"type.disabled\"\n        >\n        {{ type.name }}\n      </button>\n    }\n\n  </mat-menu>\n</mat-toolbar>\n\n<span>\n  @switch (selectedService) {\n    @case ('http_service') {\n      <p>\n        <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n        <app-request-manager-demo\n          [server]=\"server\"\n          [adapter]=\"adapter\"\n          [mapper]=\"mapper\"\n        ></app-request-manager-demo>\n      </p>\n    }\n    <!-- <p *ngSwitchCase=\"'http_signals_service'\">\n    <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n    <app-request-signals-manager-demo></app-request-signals-manager-demo>\n  </p> -->\n  @case ('http_state_service') {\n    <p>\n      <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n      <app-request-manager-state-demo\n        [server]=\"server\"\n        [adapter]=\"adapter\"\n        [mapper]=\"mapper\"\n      ></app-request-manager-state-demo>\n    </p>\n  }\n  @case ('http_state_service_ws') {\n    <p>\n      <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n      <app-request-manager-ws-demo\n        [server]=\"server\"\n        [wsServer]=\"wsServer\"\n        [jwtToken]=\"jwtToken\"\n        [user]=\"user\"\n        [path]=\"path\"\n      ></app-request-manager-ws-demo>\n    </p>\n  }\n  @case ('database_service') {\n    <p>\n      <app-database-data-demo></app-database-data-demo>\n    </p>\n  }\n  @case ('local_storage_service') {\n    <p>\n      <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n      <app-local-storage-demo></app-local-storage-demo>\n    </p>\n  }\n  <!-- <p *ngSwitchCase=\"'local_storage_signals_service'\">\n  <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n  <app-local-storage-signals-demo></app-local-storage-signals-demo>\n</p> -->\n@case ('store_state_manager') {\n  <p>\n    <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n    <app-store-state-manager-demo></app-store-state-manager-demo>\n  </p>\n}\n@default {\n  <p>\n    Other\n  </p>\n}\n}\n</span>\n\n<ng-template #HTTP_OPTIONS>\n  @if (injectionOptions?.httpRequestOptions) {\n    <div class=\"box\">\n      <h3 style=\"font-weight: bold;\">Injection Token Detected - HTTP Options</h3>\n      {{ injectionOptions?.httpRequestOptions| json }}\n    </div>\n  }\n</ng-template>\n\n<ng-template #LOCAL_OPTIONS>\n  @if (injectionOptions?.LocalStorageOptions) {\n    <ng-container class=\"box\">\n      <div class=\"box\">\n        <h3 style=\"font-weight: bold;\">Injection Token Detected - LocalStorage Options</h3>\n        {{ injectionOptions?.LocalStorageOptions| json }}\n      </div>\n    </ng-container>\n  }\n</ng-template>\n\n\n", styles: [".box{padding:1rem;background-color:#f5f5f5;border:thin gray solid;margin-top:1rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i11.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i3$2.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", "path"] }, { 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', standalone: false, template: "<mat-toolbar  style=\"display:flex\">\n  <div>Http Request Manager Services</div>\n  <div style=\"flex:1\"></div>\n  <button mat-stroked-button [matMenuTriggerFor]=\"menu\">Services</button>\n  <mat-menu #menu=\"matMenu\">\n    @for (type of requestTypes; track type; let i = $index) {\n      @if (type?.divider) {\n        <div\n          style=\"margin-top: .5rem; margin-bottom: .5rem;\"\n          >\n          <mat-divider></mat-divider>\n        </div>\n      }\n      <button\n        mat-menu-item\n        (click)=\"onSelected(i)\"\n        [disabled]=\"type.disabled\"\n        >\n        {{ type.name }}\n      </button>\n    }\n\n  </mat-menu>\n</mat-toolbar>\n\n<span>\n  @switch (selectedService) {\n    @case ('http_service') {\n      <p>\n        <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n        <app-request-manager-demo\n          [server]=\"server\"\n          [adapter]=\"adapter\"\n          [mapper]=\"mapper\"\n        ></app-request-manager-demo>\n      </p>\n    }\n    <!-- <p *ngSwitchCase=\"'http_signals_service'\">\n    <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n    <app-request-signals-manager-demo></app-request-signals-manager-demo>\n  </p> -->\n  @case ('http_state_service') {\n    <p>\n      <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n      <app-request-manager-state-demo\n        [server]=\"server\"\n        [adapter]=\"adapter\"\n        [mapper]=\"mapper\"\n      ></app-request-manager-state-demo>\n    </p>\n  }\n  @case ('http_state_service_ws') {\n    <p>\n      <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n      <app-request-manager-ws-demo\n        [server]=\"server\"\n        [wsServer]=\"wsServer\"\n        [jwtToken]=\"jwtToken\"\n        [user]=\"user\"\n      ></app-request-manager-ws-demo>\n    </p>\n  }\n  @case ('database_service') {\n    <p>\n      <app-database-data-demo></app-database-data-demo>\n    </p>\n  }\n  @case ('local_storage_service') {\n    <p>\n      <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n      <app-local-storage-demo></app-local-storage-demo>\n    </p>\n  }\n  <!-- <p *ngSwitchCase=\"'local_storage_signals_service'\">\n  <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n  <app-local-storage-signals-demo></app-local-storage-signals-demo>\n</p> -->\n@case ('store_state_manager') {\n  <p>\n    <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n    <app-store-state-manager-demo></app-store-state-manager-demo>\n  </p>\n}\n@default {\n  <p>\n    Other\n  </p>\n}\n}\n</span>\n\n<ng-template #HTTP_OPTIONS>\n  @if (injectionOptions?.httpRequestOptions) {\n    <div class=\"box\">\n      <h3 style=\"font-weight: bold;\">Injection Token Detected - HTTP Options</h3>\n      {{ injectionOptions?.httpRequestOptions| json }}\n    </div>\n  }\n</ng-template>\n\n<ng-template #LOCAL_OPTIONS>\n  @if (injectionOptions?.LocalStorageOptions) {\n    <ng-container class=\"box\">\n      <div class=\"box\">\n        <h3 style=\"font-weight: bold;\">Injection Token Detected - LocalStorage Options</h3>\n        {{ injectionOptions?.LocalStorageOptions| json }}\n      </div>\n    </ng-container>\n  }\n</ng-template>\n\n\n", styles: [".box{padding:1rem;background-color:#f5f5f5;border:thin gray solid;margin-top:1rem}\n"] }]
+            args: [{ selector: 'app-http-request-services-demo', standalone: false, template: "<mat-toolbar  style=\"display:flex\">\n  <div>Http Request Manager Services</div>\n  <div style=\"flex:1\"></div>\n  <button mat-stroked-button [matMenuTriggerFor]=\"menu\">Services</button>\n  <mat-menu #menu=\"matMenu\">\n    @for (type of requestTypes; track type; let i = $index) {\n      @if (type?.divider) {\n        <div\n          style=\"margin-top: .5rem; margin-bottom: .5rem;\"\n          >\n          <mat-divider></mat-divider>\n        </div>\n      }\n      <button\n        mat-menu-item\n        (click)=\"onSelected(i)\"\n        [disabled]=\"type.disabled\"\n        >\n        {{ type.name }}\n      </button>\n    }\n\n  </mat-menu>\n</mat-toolbar>\n\n<span>\n  @switch (selectedService) {\n    @case ('http_service') {\n      <p>\n        <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n        <app-request-manager-demo\n          [server]=\"server\"\n          [adapter]=\"adapter\"\n          [mapper]=\"mapper\"\n        ></app-request-manager-demo>\n      </p>\n    }\n    <!-- <p *ngSwitchCase=\"'http_signals_service'\">\n    <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n    <app-request-signals-manager-demo></app-request-signals-manager-demo>\n  </p> -->\n  @case ('http_state_service') {\n    <p>\n      <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n      <app-request-manager-state-demo\n        [server]=\"server\"\n        [adapter]=\"adapter\"\n        [mapper]=\"mapper\"\n      ></app-request-manager-state-demo>\n    </p>\n  }\n  @case ('http_state_service_ws') {\n    <p>\n      <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n      <app-request-manager-ws-demo\n        [server]=\"server\"\n        [wsServer]=\"wsServer\"\n        [jwtToken]=\"jwtToken\"\n        [user]=\"user\"\n        [path]=\"path\"\n      ></app-request-manager-ws-demo>\n    </p>\n  }\n  @case ('database_service') {\n    <p>\n      <app-database-data-demo></app-database-data-demo>\n    </p>\n  }\n  @case ('local_storage_service') {\n    <p>\n      <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n      <app-local-storage-demo></app-local-storage-demo>\n    </p>\n  }\n  <!-- <p *ngSwitchCase=\"'local_storage_signals_service'\">\n  <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n  <app-local-storage-signals-demo></app-local-storage-signals-demo>\n</p> -->\n@case ('store_state_manager') {\n  <p>\n    <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n    <app-store-state-manager-demo></app-store-state-manager-demo>\n  </p>\n}\n@default {\n  <p>\n    Other\n  </p>\n}\n}\n</span>\n\n<ng-template #HTTP_OPTIONS>\n  @if (injectionOptions?.httpRequestOptions) {\n    <div class=\"box\">\n      <h3 style=\"font-weight: bold;\">Injection Token Detected - HTTP Options</h3>\n      {{ injectionOptions?.httpRequestOptions| json }}\n    </div>\n  }\n</ng-template>\n\n<ng-template #LOCAL_OPTIONS>\n  @if (injectionOptions?.LocalStorageOptions) {\n    <ng-container class=\"box\">\n      <div class=\"box\">\n        <h3 style=\"font-weight: bold;\">Injection Token Detected - LocalStorage Options</h3>\n        {{ injectionOptions?.LocalStorageOptions| json }}\n      </div>\n    </ng-container>\n  }\n</ng-template>\n\n\n", styles: [".box{padding:1rem;background-color:#f5f5f5;border:thin gray solid;margin-top:1rem}\n"] }]
         }], ctorParameters: () => [{ type: ConfigOptions, decorators: [{
                     type: Inject,
                     args: [CONFIG_SETTINGS_TOKEN]
@@ -6001,6 +6029,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], user: [{
                 type: Input
+            }], path: [{
+                type: Input
             }], adapter: [{
                 type: Input
             }], mapper: [{