http-request-manager 18.9.6 → 18.10.1

package/fesm2022/http-request-manager.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, APP_ID, Inject, InjectionToken, Injector, Optional, signal, computed, effect, EventEmitter, Input, Output, ViewEncapsulation, Component, NgModule, ViewChild } from '@angular/core';
+import { inject, Injectable, APP_ID, Inject, InjectionToken, isDevMode, Injector, Optional, signal, computed, effect, EventEmitter, Input, Output, ViewEncapsulation, Component, NgModule, ViewChild } from '@angular/core';
 import { ComponentStore } from '@ngrx/component-store';
 import { map, catchError, filter, tap, finalize, takeWhile, retry, startWith, mergeMap, takeUntil, withLatestFrom, switchMap, delay, concatMap, take, scan, distinctUntilChanged } from 'rxjs/operators';
 import { HttpClient, HttpHeaders, HttpEventType, HttpHeaderResponse, HttpErrorResponse, HTTP_INTERCEPTORS } from '@angular/common/http';
@@ -803,6 +803,75 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
+/**
+ * LoggerService for http-request-manager library
+ *
+ * Automatically enables debug logging in development mode,
+ * disables it in production mode.
+ *
+ * Usage:
+ * ```typescript
+ * constructor(private logger: LoggerService) {}
+ *
+ * this.logger.debug('WebSocket', 'Connected successfully');
+ * this.logger.info('HTTP', 'Request completed', { status: 200 });
+ * this.logger.warn('State', 'Cache miss for key', { key: 'user' });
+ * this.logger.error('Database', 'Connection failed', error);
+ * ```
+ */
+class LoggerService {
+    constructor() {
+        // Automatically detect development vs production mode
+        this.debugMode = isDevMode();
+    }
+    /**
+     * Debug level logging - only shown in development mode
+     * Use for: Detailed diagnostic information, state changes, connection events
+     */
+    debug(context, message, data) {
+        if (this.debugMode) {
+            console.log(`[HTTP-MGR DEBUG] ${context}: ${message}`, data ?? '');
+        }
+    }
+    /**
+     * Info level logging - only shown in development mode
+     * Use for: Important operational messages, successful operations
+     */
+    info(context, message, data) {
+        if (this.debugMode) {
+            console.info(`[HTTP-MGR INFO] ${context}: ${message}`, data ?? '');
+        }
+    }
+    /**
+     * Warning level logging - always shown
+     * Use for: Potential issues, deprecated usage, recoverable errors
+     */
+    warn(context, message, data) {
+        console.warn(`[HTTP-MGR WARN] ${context}: ${message}`, data ?? '');
+    }
+    /**
+     * Error level logging - always shown
+     * Use for: Actual errors, failures, exceptions
+     */
+    error(context, message, data) {
+        console.error(`[HTTP-MGR ERROR] ${context}: ${message}`, data ?? '');
+    }
+    /**
+     * Check if debug mode is enabled (development mode)
+     */
+    isDebugEnabled() {
+        return this.debugMode;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LoggerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LoggerService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LoggerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
 /**
  * Stateful processor for managing streaming data and events
  */
@@ -1163,7 +1232,13 @@ class ChannelInfo {
         this.canSubscribe = canSubscribe;
     }
     static adapt(item) {
-        return new ChannelInfo(item?.name, item?.canSubscribe);
+        // Handle string input (backward compatibility with old server responses)
+        if (typeof item === 'string') {
+            return new ChannelInfo(item, true); // Assume subscribable
+        }
+        // Handle object input (new server responses)
+        // Default canSubscribe to true if not specified (backward compat)
+        return new ChannelInfo(item?.name, item?.canSubscribe ?? true);
     }
 }
 
@@ -1196,8 +1271,48 @@ var CommunicationType;
     CommunicationType[CommunicationType["OTHER"] = 2] = "OTHER";
 })(CommunicationType || (CommunicationType = {}));
 
+var ChannelType$1;
+(function (ChannelType) {
+    ChannelType["STATE"] = "SYS";
+    ChannelType["PUBLIC"] = "PUB";
+    ChannelType["NOTIFICATION"] = "MES";
+    ChannelType["CUSTOM"] = ""; // No prefix (raw channel name)
+})(ChannelType$1 || (ChannelType$1 = {}));
+
+class StateMessage {
+    constructor(sessionId = { id: '' }, content = {}) {
+        this.sessionId = sessionId;
+        this.content = content;
+    }
+    static adapt(item) {
+        return new StateMessage(item?.sessionId, item?.content);
+    }
+}
+
+class PublicMessage {
+    constructor(sessionId = { id: '' }, content = { message: '' }) {
+        this.sessionId = sessionId;
+        this.content = content;
+    }
+    static adapt(item) {
+        return new PublicMessage(item?.sessionId, item?.content);
+    }
+}
+
+class NotificationMessage {
+    constructor(sessionId = { id: '' }, message = '', additionalProperties = {}) {
+        this.sessionId = sessionId;
+        this.message = message;
+        Object.assign(this, additionalProperties);
+    }
+    static adapt(item) {
+        return new NotificationMessage(item?.sessionId, item?.message, item);
+    }
+}
+
 class WebsocketService {
     constructor() {
+        this.logger = new LoggerService();
         this.socket = null;
         this.messages = new BehaviorSubject(null);
         this.messages$ = this.messages.asObservable();
@@ -1235,24 +1350,28 @@ class WebsocketService {
             current.add(channelName);
             this.subscribedChannels.next(current);
             this.isSubscribed = true; // Keep for backward compatibility
-            console.log(`[CLIENT] Sent initial subscription to: ${channelName}`);
+            this.logger.debug('WebSocket', `Sent initial subscription to: ${channelName}`);
         }
         else {
-            console.warn(`[CLIENT] Subscription prevented. Open: ${this.socket?.readyState === WebSocket.OPEN}, Already subscribed to ${channelName}: ${alreadySubscribed}`);
+            this.logger.warn('WebSocket', `Subscription prevented`, {
+                open: this.socket?.readyState === WebSocket.OPEN,
+                channel: channelName,
+                alreadySubscribed
+            });
         }
     }
     connect(options, jwtToken) {
         if (this.socket) {
             if (this.socket.readyState === WebSocket.OPEN) {
-                console.log('WebSocket connection is already OPEN.');
+                this.logger.debug('WebSocket', 'Connection is already OPEN');
                 return;
             }
             if (this.socket.readyState === WebSocket.CONNECTING) {
-                console.log('WebSocket is already CONNECTING. Waiting for handshake.');
+                this.logger.debug('WebSocket', 'Already CONNECTING. Waiting for handshake');
                 return;
             }
             if (this.socket.readyState === WebSocket.CLOSING || this.socket.readyState === WebSocket.CLOSED) {
-                console.log(`Cleaning up stale socket (State: ${this.socket.readyState}).`);
+                this.logger.debug('WebSocket', `Cleaning up stale socket`, { state: this.socket.readyState });
                 this.socket.close();
                 this.socket = null;
             }
@@ -1264,7 +1383,7 @@ class WebsocketService {
         const URL = (jwtToken) ? `${options.wsServer}?token=${jwtToken}&sessionId=${sessionId}` : `${options.wsServer}?sessionId=${sessionId}`;
         this.socket = new WebSocket(URL);
         this.socket.onopen = () => {
-            console.log(`📡 Connected to WebSocket`);
+            this.logger.info('WebSocket', '📡 Connected to WebSocket');
             this.connectionStatus.next(true);
             this.lastOptions = options;
             // Subscribe to primary channel
@@ -1302,7 +1421,7 @@ class WebsocketService {
             try {
                 const data = JSON.parse(event.data);
                 if (data.error && data.error === 'JWT_INVALID') {
-                    console.error('JWT validation failed. Authentication error!');
+                    this.logger.error('WebSocket', 'JWT validation failed. Authentication error!');
                     this.messages.next(data);
                     this.connectionStatus.next(false);
                     this.socket?.close();
@@ -1311,16 +1430,16 @@ class WebsocketService {
                 this.messages.next(data);
             }
             catch (error) {
-                console.error('Error parsing WebSocket message:', event.data);
+                this.logger.error('WebSocket', 'Error parsing WebSocket message', { data: event.data });
             }
         };
         this.socket.onclose = () => {
-            console.log('WebSocket connection closed');
+            this.logger.debug('WebSocket', 'Connection closed');
             this.connectionStatus.next(false);
             this.socket = null;
         };
         this.socket.onerror = (error) => {
-            console.error('WebSocket error:', error);
+            this.logger.error('WebSocket', 'WebSocket error', error);
             this.connectionStatus.next(false);
         };
     }
@@ -1343,14 +1462,14 @@ class WebsocketService {
                 const current = new Set(this.subscribedChannels.value);
                 current.add(channelName);
                 this.subscribedChannels.next(current);
-                console.log(`📝 Subscribed to channel: ${channelName}`);
+                this.logger.debug('WebSocket', `📝 Subscribed to channel`, { channel: channelName });
             }
             catch (error) {
-                console.error(`❌ Failed to subscribe to channel "${channelName}":`, error);
+                this.logger.error('WebSocket', `Failed to subscribe to channel`, { channel: channelName, error });
             }
         }
         else {
-            console.warn(`Cannot subscribe to channel "${channelName}": WebSocket not yet open.`);
+            this.logger.warn('WebSocket', `Cannot subscribe to channel - WebSocket not open`, { channel: channelName });
         }
     }
     subscribeToChannels(channelNames) {
@@ -1358,7 +1477,7 @@ class WebsocketService {
             channelNames.forEach(channel => this.subscribeToChannel(channel));
         }
         else {
-            console.warn('Cannot subscribe: WebSocket not yet open.');
+            this.logger.warn('WebSocket', 'Cannot subscribe to channels - WebSocket not open');
         }
     }
     unsubscribeFromChannel(channel) {
@@ -1368,10 +1487,10 @@ class WebsocketService {
             const current = new Set(this.subscribedChannels.value);
             current.delete(channel);
             this.subscribedChannels.next(current);
-            console.log(`💬 Unsubscribed from channel: ${channel}`);
+            this.logger.debug('WebSocket', `💬 Unsubscribed from channel`, { channel });
         }
         else {
-            console.error('WebSocket is not open. Cannot unsubscribe from channel.');
+            this.logger.error('WebSocket', 'Cannot unsubscribe - WebSocket not open');
         }
     }
     unsubscribeToChannel(channel) {
@@ -1384,19 +1503,19 @@ class WebsocketService {
     sendBroadcast(content) {
         if (this.socket?.readyState === WebSocket.OPEN) {
             this.socket.send(JSON.stringify({ type: 'broadcast', content }));
-            console.log(`📢 Send broadcast: ${content}`);
+            this.logger.debug('WebSocket', `📢 Send broadcast`, { content });
         }
         else {
-            console.error('WebSocket is not open. Cannot send broadcast.');
+            this.logger.error('WebSocket', 'Cannot send broadcast - WebSocket not open');
         }
     }
     sendMessageInChannel(channel, content) {
         if (this.socket?.readyState === WebSocket.OPEN) {
             this.socket.send(JSON.stringify({ type: 'stateMangerMessage', subscribedChannel: channel, content }));
-            console.log(`💬 Send message:`, content);
+            this.logger.debug('WebSocket', `💬 Send message`, { channel, content });
         }
         else {
-            console.error('WebSocket is not open. Cannot send message.');
+            this.logger.error('WebSocket', 'Cannot send message - WebSocket not open');
         }
     }
     /**
@@ -1406,10 +1525,10 @@ class WebsocketService {
     sendChannelMessage(channel, content) {
         if (this.socket?.readyState === WebSocket.OPEN) {
             this.socket.send(JSON.stringify({ type: 'message', subscribedChannel: channel, content }));
-            console.log(`💬 Send channel message to [${channel}]:`, content);
+            this.logger.debug('WebSocket', `💬 Send channel message`, { channel, content });
         }
         else {
-            console.error('WebSocket is not open. Cannot send channel message.');
+            this.logger.error('WebSocket', 'Cannot send channel message - WebSocket not open');
         }
     }
     /**
@@ -1425,10 +1544,10 @@ class WebsocketService {
                     channels: channels,
                     data: content
                 }));
-                console.log(`💬 Send channel message to channels [${channels.join(', ')}]:`, content);
+                this.logger.debug('WebSocket', `💬 Send channel message to channels`, { channels, content });
             }
             catch (error) {
-                console.error('❌ Failed to send channelMessage batch:', error);
+                this.logger.error('WebSocket', 'Failed to send channelMessage batch', error);
             }
             // Legacy fallback - send individual messages to each channel
             try {
@@ -1437,56 +1556,56 @@ class WebsocketService {
                 });
             }
             catch (err) {
-                console.warn('⚠️ Legacy fallback failed sending individual messages', err);
+                this.logger.warn('WebSocket', 'Legacy fallback failed sending individual messages', err);
             }
         }
         else {
-            console.error('WebSocket is not open. Cannot send message to channels.');
+            this.logger.error('WebSocket', 'Cannot send message to channels - WebSocket not open');
         }
     }
     sendMessageToUser(user, content) {
         if (this.socket?.readyState === WebSocket.OPEN) {
             this.socket.send(JSON.stringify({ type: 'userMessage', subscribedChannel: user, content }));
-            console.log(`💬 Send message:`, content);
+            this.logger.debug('WebSocket', `💬 Send message to user`, { user, content });
         }
         else {
-            console.error('WebSocket is not open. Cannot send message.');
+            this.logger.error('WebSocket', 'Cannot send message to user - WebSocket not open');
         }
     }
     getAllChannels() {
         if (this.socket?.readyState === WebSocket.OPEN) {
             this.socket.send(JSON.stringify({ type: 'getChannels' }));
-            console.log('🗂️ List of all channels');
+            this.logger.debug('WebSocket', '🗂️ Requested list of all channels');
         }
         else {
-            console.error('WebSocket is not open. Cannot request channels.');
+            this.logger.error('WebSocket', 'Cannot request channels - WebSocket not open');
         }
     }
     createChannel(channel) {
         if (this.socket?.readyState === WebSocket.OPEN) {
             this.socket.send(JSON.stringify({ type: 'createChannel', content: channel }));
-            console.log('🗂️ Created channel:', channel);
+            this.logger.debug('WebSocket', '🗂️ Created channel', { channel });
         }
         else {
-            console.error('WebSocket is not open. Cannot request channels.');
+            this.logger.error('WebSocket', 'Cannot create channel - WebSocket not open');
         }
     }
     deleteChannel(channel) {
         if (this.socket?.readyState === WebSocket.OPEN) {
             this.socket.send(JSON.stringify({ type: 'deleteChannel', content: channel }));
-            console.log('🗂️ Delete channel:', channel);
+            this.logger.debug('WebSocket', '🗂️ Delete channel', { channel });
         }
         else {
-            console.error('WebSocket is not open. Cannot request channels.');
+            this.logger.error('WebSocket', 'Cannot delete channel - WebSocket not open');
         }
     }
     getUsersInChannel(channel) {
         if (this.socket?.readyState === WebSocket.OPEN) {
             this.socket.send(JSON.stringify({ type: 'getUsers', subscribedChannel: channel }));
-            console.log(`👥 List all users in channel: ${channel}`);
+            this.logger.debug('WebSocket', `👥 Requested users in channel`, { channel });
         }
         else {
-            console.error('WebSocket is not open. Cannot request users.');
+            this.logger.error('WebSocket', 'Cannot request users - WebSocket not open');
         }
     }
     // =====================
@@ -1510,28 +1629,21 @@ class WebsocketService {
     getNotificationChannels() {
         if (this.socket?.readyState === WebSocket.OPEN) {
             this.socket.send(JSON.stringify({ type: 'getNotificationChannels' }));
-            console.log('📢 Requested notification channels list');
+            this.logger.debug('WebSocket', '📢 Requested notification channels list');
         }
         else {
-            console.error('WebSocket is not open. Cannot request notification channels.');
+            this.logger.error('WebSocket', 'Cannot request notification channels - WebSocket not open');
         }
     }
-    /**
-     * Get today's notification channels from database
-     * Returns unique channels that have notifications posted today
-     */
     getTodaysNotificationChannels() {
         if (this.socket?.readyState === WebSocket.OPEN) {
             this.socket.send(JSON.stringify({ type: 'getTodaysNotificationChannels' }));
-            console.log('📢 Requested today\'s notification channels from DB');
+            this.logger.debug('WebSocket', "📢 Requested today's notification channels from DB");
         }
         else {
-            console.error('WebSocket is not open. Cannot request today\'s notification channels.');
+            this.logger.error('WebSocket', "Cannot request today's notification channels - WebSocket not open");
         }
     }
-    /**
-     * Subscribe to a notification channel with optional date filters
-     */
     subscribeToNotificationChannel(channel, options, user) {
         if (this.socket?.readyState === WebSocket.OPEN) {
             this.socket.send(JSON.stringify({
@@ -1542,30 +1654,24 @@ class WebsocketService {
                     ...user
                 }
             }));
-            console.log(`📢 Subscribed to notification channel: ${channel}`, options);
+            this.logger.debug('WebSocket', `📢 Subscribed to notification channel`, { channel, options });
         }
         else {
-            console.error('WebSocket is not open. Cannot subscribe to notification channel.');
+            this.logger.error('WebSocket', 'Cannot subscribe to notification channel - WebSocket not open');
         }
     }
-    /**
-     * Unsubscribe from a notification channel
-     */
     unsubscribeFromNotificationChannel(channel) {
         if (this.socket?.readyState === WebSocket.OPEN) {
             this.socket.send(JSON.stringify({
                 type: 'unsubscribeNotifications',
                 subscribedChannel: channel
             }));
-            console.log(`📢 Unsubscribed from notification channel: ${channel}`);
+            this.logger.debug('WebSocket', `📢 Unsubscribed from notification channel`, { channel });
         }
         else {
-            console.error('WebSocket is not open. Cannot unsubscribe from notification channel.');
+            this.logger.error('WebSocket', 'Cannot unsubscribe from notification channel - WebSocket not open');
         }
     }
-    /**
-     * Send a notification to a channel
-     */
     sendNotification(channel, content) {
         if (this.socket?.readyState === WebSocket.OPEN) {
             this.socket.send(JSON.stringify({
@@ -1573,10 +1679,10 @@ class WebsocketService {
                 subscribedChannel: channel,
                 content
             }));
-            console.log(`📢 Sent notification to channel: ${channel}`, content);
+            this.logger.debug('WebSocket', `📢 Sent notification to channel`, { channel, content });
         }
         else {
-            console.error('WebSocket is not open. Cannot send notification.');
+            this.logger.error('WebSocket', 'Cannot send notification - WebSocket not open');
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WebsocketService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -2142,6 +2248,24 @@ class WebSocketManagerService {
             console.error('WebSocket is not open. Cannot unsubscribe from notification channel.');
         }
     }
+    /**
+     * Send notification to channel
+     * @param channel - Channel name (should include MES- prefix)
+     * @param content - Notification content
+     */
+    sendNotification(channel, content) {
+        if (WebSocketManagerService.socket?.readyState === WebSocket.OPEN) {
+            WebSocketManagerService.socket.send(JSON.stringify({
+                type: 'notification',
+                subscribedChannel: channel,
+                content
+            }));
+            console.log(`📢 Sent notification to channel: ${channel}`, content);
+        }
+        else {
+            console.error('WebSocket is not open. Cannot send notification.');
+        }
+    }
     // ═══════════════════════════════════════════════════════════════════════════
     // CONNECTION STATUS (Static getter for direct access)
     // ═══════════════════════════════════════════════════════════════════════════
@@ -2169,6 +2293,124 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 }]
         }] });
 
+/**
+ * WebSocketMessageService - Unified service for sending WebSocket messages
+ *
+ * Provides type-safe methods for sending messages with automatic prefix management.
+ * Supports three message types: State (SYS-), Public (PUB-), and Notification (MES-).
+ *
+ * Features:
+ * - Type-safe message models
+ * - Automatic prefix management
+ * - Runtime validation
+ * - Boolean return values for success/failure
+ * - Silent failure with console errors
+ */
+class WebSocketMessageService {
+    constructor() {
+        this.wsManagerService = inject(WebSocketManagerService);
+        this.logger = new LoggerService();
+    }
+    /**
+     * Send state message (SYS- prefix)
+     * Used for CRUD operations and state synchronization
+     *
+     * @param path - Path array (e.g., ['ai', 'tests'])
+     * @param payload - StateMessage with sessionId and content
+     * @returns true if sent successfully, false otherwise
+     */
+    sendStateMessage(path, payload) {
+        // Validate payload
+        if (!payload?.sessionId?.id) {
+            this.logger.error('WebSocketMessageService', 'StateMessage must have sessionId.id');
+            return false;
+        }
+        if (!WebSocketManagerService.isConnected()) {
+            this.logger.error('WebSocketMessageService', 'Cannot send state message - not connected');
+            return false;
+        }
+        const channel = `${ChannelType$1.STATE}-${path.join('/')}`;
+        this.wsManagerService.sendMessageInChannel(channel, payload);
+        return true;
+    }
+    /**
+     * Send public message (PUB- prefix)
+     * Used for chat, broadcast, general messaging
+     *
+     * @param channel - Channel name (without prefix)
+     * @param payload - PublicMessage with sessionId and content.message
+     * @returns true if sent successfully, false otherwise
+     */
+    sendPublicMessage(channel, payload) {
+        // Validate payload
+        if (!payload?.sessionId?.id) {
+            this.logger.error('WebSocketMessageService', 'PublicMessage must have sessionId.id');
+            return false;
+        }
+        if (!payload?.content?.message) {
+            this.logger.error('WebSocketMessageService', 'PublicMessage must have content.message');
+            return false;
+        }
+        if (!WebSocketManagerService.isConnected()) {
+            this.logger.error('WebSocketMessageService', 'Cannot send public message - not connected');
+            return false;
+        }
+        const fullChannel = `${ChannelType$1.PUBLIC}-${channel}`;
+        this.wsManagerService.sendMessageInChannel(fullChannel, payload);
+        return true;
+    }
+    /**
+     * Send notification (MES- prefix)
+     * Used for persistent notifications with history
+     *
+     * @param channel - Channel name (without prefix)
+     * @param payload - NotificationMessage with sessionId and message
+     * @returns true if sent successfully, false otherwise
+     */
+    sendNotification(channel, payload) {
+        // Validate payload
+        if (!payload?.sessionId?.id) {
+            this.logger.error('WebSocketMessageService', 'NotificationMessage must have sessionId.id');
+            return false;
+        }
+        if (!payload?.message) {
+            this.logger.error('WebSocketMessageService', 'NotificationMessage must have message');
+            return false;
+        }
+        if (!WebSocketManagerService.isConnected()) {
+            this.logger.error('WebSocketMessageService', 'Cannot send notification - not connected');
+            return false;
+        }
+        const fullChannel = `${ChannelType$1.NOTIFICATION}-${channel}`;
+        this.wsManagerService.sendMessageInChannel(fullChannel, payload);
+        return true;
+    }
+    /**
+     * Send to custom channel (no prefix)
+     * User provides full channel name
+     *
+     * @param channel - Full channel name
+     * @param payload - Any message payload
+     * @returns true if sent successfully, false otherwise
+     */
+    sendToCustomChannel(channel, payload) {
+        if (!WebSocketManagerService.isConnected()) {
+            this.logger.error('WebSocketMessageService', 'Cannot send custom message - not connected');
+            return false;
+        }
+        this.wsManagerService.sendMessageInChannel(channel, payload);
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WebSocketMessageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WebSocketMessageService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WebSocketMessageService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+// ChannelType is already exported from request-manager-state-service to avoid conflicts
+
 class RequestService extends WebsocketService {
     constructor() {
         super(...arguments);
@@ -3072,6 +3314,12 @@ class HTTPManagerService extends RequestService {
     unsubscribeFromNotificationChannel(channel) {
         this.wsManager.unsubscribeFromNotificationChannel(channel);
     }
+    /**
+     * Send notification to channel
+     */
+    sendNotification(channel, content) {
+        this.wsManager.sendNotification(channel, content);
+    }
     // REQUESTS
     getRequest(options, params) {
         this.isPending.next(true);
@@ -3173,7 +3421,9 @@ class HTTPManagerService extends RequestService {
                 }
                 return throwError(() => err);
             }));
-        return polling$.pipe(catchError((err, caught) => {
+        return polling$.pipe((options?.retry && options.retry.times > 0)
+            ? delayedRetry((options.retry.delay || 3) * 1000, (options.retry.times || 0) - 1)
+            : (source) => source, catchError((err, caught) => {
             if (err instanceof HttpErrorResponse) {
                 this.error.next(true);
                 if (isPolling)
@@ -3181,9 +3431,7 @@ class HTTPManagerService extends RequestService {
                 return this.handleError(err);
             }
             return throwError(() => err);
-        }), (options?.retry && options.retry.times > 0)
-            ? delayedRetry((options.retry.delay || 3) * 1000, (options.retry.times || 0) - 1)
-            : (source) => source);
+        }));
     }
     createRequest(func, options, data) {
         const dataItem = this.prepareRequestData(options, data, func.name);
@@ -3524,7 +3772,9 @@ class HTTPManagerSignalsService extends RequestSignalsService {
                 }
                 return throwError(() => err);
             }));
-        return polling$.pipe(catchError((err, caught) => {
+        return polling$.pipe(options?.retry && options.retry.times > 0
+            ? delayedRetry((options.retry.delay || 3) * 1000, (options.retry.times || 0) - 1)
+            : (source) => source, catchError((err, caught) => {
             if (err instanceof HttpErrorResponse) {
                 this.error.set(true);
                 if (isPolling)
@@ -3532,9 +3782,7 @@ class HTTPManagerSignalsService extends RequestSignalsService {
                 return this.handleError(err);
             }
             return throwError(() => err);
-        }), options?.retry && options.retry.times > 0
-            ? delayedRetry((options.retry.delay || 3) * 1000, (options.retry.times || 0) - 1)
-            : (source) => source);
+        }));
     }
     createRequest(func, options, data) {
         const dataItem = this.prepareRequestData(options, data, func.name);
@@ -4814,6 +5062,7 @@ class HTTPManagerStateService extends ComponentStore {
         this.dbManagerService = inject(DatabaseManagerService);
         this.localStorageManagerService = inject(LocalStorageManagerService);
         this.utils = inject(UtilsService);
+        this.logger = inject(LoggerService);
         this.error$ = this.httpManagerService.error$;
         this.isPending$ = this.httpManagerService.isPending$.pipe(delay(1));
         // PAGINATION
@@ -4856,28 +5105,47 @@ class HTTPManagerStateService extends ComponentStore {
         this.latestCommunicationMessages$ = this.latestCommunicationMessages.asObservable();
         this.userAction = new BehaviorSubject(null);
         this.userAction$ = this.userAction.asObservable();
+        // Store our own sessionId for filtering out own messages
+        this.ownSessionId = null;
         this.wsOptions = WSOptions.adapt();
         // Expose raw WS connection status directly to UI (from singleton WebSocketManagerService)
         this.connectionStatus$ = this.httpManagerService.connectionStatus$;
         // WebSocket
         this.initWS = this.effect((wsOptions$) => wsOptions$.pipe(switchMap((wsOptions) => merge(this.httpManagerService.connectionStatus$.pipe(tap((isConnected) => {
-            // Process queued wsCommunication calls when connection becomes true
-            if (isConnected && HTTPManagerStateService.wsCommunicationQueue.length > 0) {
-                console.log(`🔄 Processing ${HTTPManagerStateService.wsCommunicationQueue.length} queued WS messages`);
-                while (HTTPManagerStateService.wsCommunicationQueue.length > 0) {
-                    const queued = HTTPManagerStateService.wsCommunicationQueue.shift();
-                    this.sendWsCommunication(queued.method, queued.path);
+            if (isConnected) {
+                // Subscribe to our private SYS- state channel so we receive stateMangerMessage broadcasts
+                // This is the critical subscription that enables multi-client state syncing
+                const stateChannel = wsOptions?.id || this.apiOptions.ws?.id;
+                if (stateChannel) {
+                    console.log(`🔒 [STATE STORE] Subscribing to state channel: ${stateChannel}`);
+                    this.httpManagerService.subscribeToChannel(stateChannel);
+                }
+                // Process queued wsCommunication calls when connection becomes true
+                if (HTTPManagerStateService.wsCommunicationQueue.length > 0) {
+                    console.log(`🔄 Processing ${HTTPManagerStateService.wsCommunicationQueue.length} queued WS messages`);
+                    while (HTTPManagerStateService.wsCommunicationQueue.length > 0) {
+                        const queued = HTTPManagerStateService.wsCommunicationQueue.shift();
+                        this.sendWsCommunication(queued.method, queued.path);
+                    }
                 }
             }
         })), this.httpManagerService.messages$.pipe(tap((message) => {
             if (!message)
                 return;
+            // CRITICAL DEBUG: Log EVERY message received
+            console.log('🔍 [STATE STORE] Received WebSocket message:', {
+                type: message.type,
+                channel: message.channel,
+                sessionId: message.data?.sessionId?.id || message.sessionId?.id,
+                content: message.content || message.data?.content,
+                timestamp: new Date().toISOString()
+            });
             // Add message to messages array
             const currentMessages = this.messages.value;
             this.messages.next([...currentMessages, message]);
             console.log('Received:', message);
             // Debug: Log all message types
-            console.log('📨 Message type:', message.type);
+            this.logger.debug('StateStore', '📨 Message type', { type: message.type });
             if (message.error === 'JWT_INVALID') {
                 this.shouldRetry = false;
                 this.httpManagerService.disconnect();
@@ -4890,49 +5158,78 @@ class HTTPManagerStateService extends ComponentStore {
             }
             switch (message.type) {
                 case 'channelsList':
-                    console.log('💬 Channels:', message.channels);
-                    console.log('🔍 channelsList received, checking connection status...');
-                    console.log('🔍 WebSocket connected:', WebSocketManagerService.isConnected());
+                    this.logger.debug('StateStore', '💬 Channels', { channels: message.channels });
+                    this.logger.debug('StateStore', '🔍 channelsList received, checking connection status...');
+                    this.logger.debug('StateStore', '🔍 WebSocket connected', { connected: WebSocketManagerService.isConnected() });
+                    // Extract channel names from metadata objects (new format) or use strings directly (old format)
+                    const channelNames = message.channels.map((c) => {
+                        // Handle new format: {name: string, canSubscribe: boolean}
+                        if (typeof c === 'object' && c.name) {
+                            return c.name;
+                        }
+                        // Handle old format: string
+                        return c;
+                    });
                     // Auto-subscribe to all channels from the list
-                    if (message.channels && message.channels.length > 0) {
-                        console.log('📥 Auto-subscribing to', message.channels.length, 'channel(s)');
-                        this.subscribeToChannels(message.channels);
+                    if (channelNames && channelNames.length > 0) {
+                        this.logger.debug('StateStore', '📥 Auto-subscribing to channels', { count: channelNames.length });
+                        this.subscribeToChannels(channelNames);
                     }
                     else {
-                        console.log('⚠️ No channels to subscribe to');
+                        this.logger.warn('StateStore', '⚠️ No channels to subscribe to');
+                    }
+                    this.channels.next(channelNames);
+                    break;
+                case 'success':
+                    // Success messages - check for subscription confirmation
+                    this.logger.info('StateStore', `✅ Success`, { message: message.message });
+                    if (message.message?.includes('Subscribed to channel:')) {
+                        // Extract channel name from message: "Subscribed to channel: PUB-chat"
+                        const channelName = message.message.split('Subscribed to channel:')[1]?.trim();
+                        this.logger.debug('StateStore', `✅ Subscription confirmed for channel`, { channel: channelName });
+                        WebSocketManagerService.addSubscribedChannel(channelName);
                     }
-                    this.channels.next(message.channels);
                     break;
                 case 'subscribed':
-                    console.log(`✅ Subscription confirmed: ${message.channel}`);
+                    this.logger.debug('StateStore', `✅ Subscription confirmed`, { channel: message.channel });
                     // Track as subscribed now that server confirmed
                     WebSocketManagerService.addSubscribedChannel(message.channel);
                     break;
                 case 'unsubscribed':
-                    console.log(`🔓 Unsubscription confirmed: ${message.channel}`);
+                    this.logger.debug('StateStore', `🔓 Unsubscription confirmed`, { channel: message.channel });
                     break;
                 case 'info':
                     // Already subscribed or other info messages
-                    console.log(`ℹ️ Info: ${message.message}`);
+                    this.logger.info('StateStore', `ℹ️ Info`, { message: message.message });
                     // If it's an "Already subscribed" message, treat it as subscription confirmation
-                    if (message.message?.includes('Already subscribed')) {
-                        console.log(`✅ Treating info as subscription confirmation for: ${message.data}`);
-                        WebSocketManagerService.addSubscribedChannel(message.data);
+                    if (message.message?.includes('Already subscribed to channel:')) {
+                        // Extract channel name from message: "Already subscribed to channel: PUB-chat"
+                        const channelName = message.message.split('Already subscribed to channel:')[1]?.trim();
+                        console.log(`✅ Treating info as subscription confirmation for channel: ${channelName}`);
+                        WebSocketManagerService.addSubscribedChannel(channelName);
                     }
                     break;
                 case 'stateMangerMessage':
-                    // Compare sender's session ID with current user's ID
+                    // CRITICAL DEBUG: Log channel comparison
+                    console.log('🔍 [STATE STORE] stateMangerMessage received:', {
+                        messageChannel: message.channel,
+                        ourChannel: this.apiOptions.ws?.id,
+                        channelsMatch: message.channel === this.apiOptions.ws?.id,
+                        senderSessionId: message.data.sessionId?.id,
+                        ourSessionId: this.ownSessionId
+                    });
+                    // Compare sender's session ID with our own sessionId
                     // message.data.sessionId is an object with 'id' property from server
                     const stateManagerSenderId = message.data.sessionId?.id || message.data.sessionId;
-                    console.log('🔍 State Manager: Sender ID:', stateManagerSenderId, 'Current User ID:', this.user.value?.id);
-                    if (stateManagerSenderId !== this.user.value?.id) {
+                    console.log('🔍 State Manager: Sender sessionId:', stateManagerSenderId, 'Own sessionId:', this.ownSessionId);
+                    if (stateManagerSenderId !== this.ownSessionId) {
                         console.log('💬 State Manager Message:', message.data);
                         console.log('📥 Fetching record with path:', message.data.content.path, 'method:', message.data.content.method);
                         this.userAction.next(message.data);
                         this.fetchRecord(RequestOptions.adapt({ path: message.data.content.path }), message.data.content.method);
                     }
                     else {
-                        console.log('⏭️ Skipping own message');
+                        console.log('⏭️ Skipping own message (sessionId match)');
                     }
                     break;
                 case 'channelMessage':
@@ -4940,7 +5237,7 @@ class HTTPManagerStateService extends ComponentStore {
                     // Structure: { type: 'channelMessage', messageId, channel, sessionId, content, timestamp }
                     // Skip messages from self
                     const senderSessionId = message.sessionId?.id || message.sessionId;
-                    if (senderSessionId === this.user.value?.id) {
+                    if (senderSessionId === this.ownSessionId) {
                         console.log('🔇 Skipping message from self (sessionId match)');
                         break;
                     }
@@ -5003,11 +5300,25 @@ class HTTPManagerStateService extends ComponentStore {
                     break;
                 case 'notificationChannelsList':
                     console.log('📢 Notification Channels (in-memory):', message.channels);
-                    this.notificationChannels.next(message.channels || []);
+                    // Extract channel names from metadata objects (new format) or use strings directly (old format)
+                    const notifyChannelNames = message.channels.map((c) => {
+                        if (typeof c === 'object' && c.name) {
+                            return c.name;
+                        }
+                        return c;
+                    });
+                    this.notificationChannels.next(notifyChannelNames || []);
                     break;
                 case 'todaysNotificationChannelsList':
                     console.log('📢 Today\'s Notification Channels (from DB):', message.channels);
-                    this.todaysNotificationChannels.next(message.channels || []);
+                    // Extract channel names from metadata objects (new format) or use strings directly (old format)
+                    const todaysNotifyChannelNames = message.channels.map((c) => {
+                        if (typeof c === 'object' && c.name) {
+                            return c.name;
+                        }
+                        return c;
+                    });
+                    this.todaysNotificationChannels.next(todaysNotifyChannelNames || []);
                     break;
                 case 'notificationSubscribed':
                     console.log(`📢 Notification subscription confirmed: ${message.channel}`, message.notifications);
@@ -5378,7 +5689,7 @@ class HTTPManagerStateService extends ComponentStore {
             }
         }
         catch (error) {
-            console.error('Error initializing HTTPManagerStateService:', error);
+            this.logger.error('HTTPManagerStateService', 'Error initializing', error);
             // Initialize with safe defaults
             this.databaseOptions = undefined;
             this.maxRetries = 3;
@@ -5418,6 +5729,12 @@ class HTTPManagerStateService extends ComponentStore {
         return this.stripChannelPrefix(channel);
     }
     setApiRequestOptions(apiOptions, dataType, database) {
+        this.logger.debug('StateStore', '🔧 setApiRequestOptions called', {
+            hasWs: !!apiOptions?.ws,
+            wsId: apiOptions?.ws?.id,
+            wsServer: apiOptions?.ws?.wsServer,
+            path: apiOptions?.path
+        });
         this.apiOptions = ApiRequest.adapt(apiOptions);
         this.dataType = (dataType) ? dataType : DataType.ARRAY;
         // Only update database options if a database parameter is explicitly provided
@@ -5429,8 +5746,24 @@ class HTTPManagerStateService extends ComponentStore {
             // Auto-prefix channel ID for private state manager channels
             // This ensures state manager channels are separate from user-defined channels
             this.apiOptions.ws.id = this.prefixChannel(this.apiOptions.ws.id, ChannelType.STATE);
-            console.log(`🔒 Private state channel: ${this.apiOptions.ws.id}`);
-            // Update WebSocket retry settings when options change
+            this.logger.debug('StateStore', `🔒 Private state channel configured`, { channelId: this.apiOptions.ws.id });
+            // Store our own sessionId for filtering incoming messages
+            this.ownSessionId = sessionStorage.getItem('WSID') || null;
+            this.logger.debug('StateStore', `🆔 Stored own sessionId for message filtering`, { sessionId: this.ownSessionId });
+            this.logger.debug('StateStore', `🔍 WebSocket configuration`, {
+                channelId: this.apiOptions.ws.id,
+                wsServer: this.apiOptions.ws.wsServer,
+                sessionId: this.ownSessionId,
+                path: this.apiOptions.path
+            });
+            // Initialize WebSocket connection if not already connected
+            this.logger.debug('StateStore', '🔌 Checking WebSocket connection status...');
+            this.logger.debug('StateStore', '🔌 Is connected?', { connected: WebSocketManagerService.isConnected() });
+            if (!WebSocketManagerService.isConnected()) {
+                this.logger.debug('StateStore', '🔌 WebSocket not connected, will initialize via effect');
+                // initWS is an effect that triggers when setApiRequestOptions is called with ws config
+                // The effect is already triggered by calling setApiRequestOptions above
+            }
             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;
@@ -5438,7 +5771,7 @@ class HTTPManagerStateService extends ComponentStore {
             }
             // Validate wsServer before attempting connection
             if (!this.apiOptions.ws.wsServer || this.apiOptions.ws.wsServer === '') {
-                console.error('WSOptions invalid: wsServer is missing or empty');
+                this.logger.error('StateStore', 'WSOptions invalid: wsServer is missing or empty');
                 return;
             }
             // Clean up previous subscription to prevent duplicate handlers
@@ -5449,23 +5782,23 @@ class HTTPManagerStateService extends ComponentStore {
             // Setup connection status monitoring (internal subscription to drive retry counters)
             this.connectionStatusSubscription = this.setupConnectionStatus().subscribe();
             // Make initial connection attempt
-            console.log('🔄 Initial WebSocket connection attempt...');
+            this.logger.debug('StateStore', '🔄 Initial WebSocket connection attempt...');
             this.httpManagerService.connect(this.apiOptions.ws, this.apiOptions.ws.jwtToken || '');
             // Initialize WS effect to handle messages
             this.initWS(this.apiOptions.ws);
         }
         else {
-            console.warn('WSOptions invalid Id: empty');
+            this.logger.warn('StateStore', 'WSOptions invalid Id: empty');
         }
     }
     // WebSocket
     setupConnectionStatus() {
         return this.httpManagerService.connectionStatus$.pipe(distinctUntilChanged(), tap(status => {
             if (status === true) {
-                console.log('🟢 WebSocket connection is open.');
+                this.logger.debug('StateStore', '🟢 WebSocket connection is open');
             }
             else {
-                console.log('🔴 WebSocket connection is closed.');
+                this.logger.debug('StateStore', '🔴 WebSocket connection is closed');
             }
         }), switchMap(status => {
             if (status === true) {
@@ -6353,62 +6686,636 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 }]
         }] });
 
-let ClientInfo$1 = class ClientInfo {
-    constructor(domain = '', service = '', id = 0, name = '') {
-        this.domain = domain;
-        this.service = service;
+class DisplayConfig {
+    constructor(type = 'snackbar', supportsMarkdown, stackable, queueBehavior, autoDismiss, width, height) {
+        this.type = type;
+        this.supportsMarkdown = supportsMarkdown;
+        this.stackable = stackable;
+        this.queueBehavior = queueBehavior;
+        this.autoDismiss = autoDismiss;
+        this.width = width;
+        this.height = height;
+    }
+    static adapt(item) {
+        return new DisplayConfig(item?.type, item?.supportsMarkdown, item?.stackable, item?.queueBehavior, item?.autoDismiss, item?.width, item?.height);
+    }
+}
+
+class DisplayRule {
+    constructor(id = '', name, match = () => false, display = DisplayConfig.adapt()) {
         this.id = id;
         this.name = name;
+        this.match = match;
+        this.display = display;
     }
     static adapt(item) {
-        return new ClientInfo(item?.domain, item?.service, item?.id, (item?.first_name || item?.last_name) ? `${item?.first_name} ${item?.last_name}` : '');
+        return new DisplayRule(item?.id, item?.name, item?.match, item?.display ? DisplayConfig.adapt(item.display) : DisplayConfig.adapt());
     }
-};
+}
 
-let ClientInfoMapper$1 = class ClientInfoMapper {
-    constructor(id = 0, first_name = '', last_name = '', email = '') {
-        this.id = id;
-        this.first_name = first_name;
-        this.last_name = last_name;
-        this.email = email;
+class Slide {
+    constructor(title = '', message = '', image, icon) {
+        this.title = title;
+        this.message = message;
+        this.image = image;
+        this.icon = icon;
     }
     static adapt(item) {
-        const first_name = (item?.name) ? item.name.split(' ')[0] : '';
-        const last_name = (item?.name) ? item.name.split(' ')[1] : '';
-        return new ClientInfoMapper(item?.id, first_name, last_name, item?.email);
+        return new Slide(item?.title, item?.message, item?.image, item?.icon);
     }
-};
+}
 
-class StateManagerDemoService extends HTTPManagerStateService {
-    constructor() {
-        super(ApiRequest.adapt({
-            server: "",
-            path: [],
-            headers: {},
-            adapter: ClientInfo$1.adapt,
-            mapper: ClientInfoMapper$1.adapt,
-            stream: false,
-        }), DataType.ARRAY, DatabaseStorage.adapt());
+class Action {
+    constructor(label = '', action = 'close', target, callback, primary) {
+        this.label = label;
+        this.action = action;
+        this.target = target;
+        this.callback = callback;
+        this.primary = primary;
     }
-    setAPIOptions(apiOptions, dataType, database) {
-        this.setApiRequestOptions(apiOptions, dataType, database);
+    static adapt(item) {
+        return new Action(item?.label, item?.action, item?.target, item?.callback, item?.primary);
     }
-    getClients() {
-        // const headers = {
-        //   auth: "sample-auth-token"
-        // }
-        // const sampleOptions = RequestOptions.adapt({ path: ["id", 12], headers, sample: true })
-        this.fetchRecords();
+}
+
+class MessageContent {
+    constructor(displayConfig, title, message = '', slides, image, images, actions, messageType, icon, data) {
+        this.displayConfig = displayConfig;
+        this.title = title;
+        this.message = message;
+        this.slides = slides;
+        this.image = image;
+        this.images = images;
+        this.actions = actions;
+        this.messageType = messageType;
+        this.icon = icon;
+        this.data = data;
     }
-    createClient(data) {
-        // const headers = {
-        //   auth: "sample-auth-token"
-        // }
-        // const sampleOptions = RequestOptions.adapt({ path: ["id", 12], headers, sample: true })
-        this.createRecord(data);
+    static adapt(item) {
+        return new MessageContent(item?.displayConfig ? DisplayConfig.adapt(item.displayConfig) : undefined, item?.title, item?.message, item?.slides ? item.slides.map((slideItem) => Slide.adapt(slideItem)) : [], item?.image, item?.images, item?.actions ? item.actions.map((actionItem) => Action.adapt(actionItem)) : [], item?.messageType, item?.icon, item?.data);
     }
-    updateClient(data) {
-        // const headers = {
+}
+class CommunicationMessage {
+    constructor(type = '', messageId, channel, sessionId, timestamp, content = MessageContent.adapt()) {
+        this.type = type;
+        this.messageId = messageId;
+        this.channel = channel;
+        this.sessionId = sessionId;
+        this.timestamp = timestamp;
+        this.content = content;
+    }
+    static adapt(item) {
+        return new CommunicationMessage(item?.type, item?.messageId, item?.channel, item?.sessionId, item?.timestamp, item?.content ? MessageContent.adapt(item.content) : MessageContent.adapt());
+    }
+}
+
+const defaultDisplayRules = [
+    {
+        id: 'carousel',
+        name: 'Carousel',
+        match: (message) => message.content?.displayConfig?.type === 'carousel',
+        display: {
+            type: 'carousel',
+            supportsMarkdown: true,
+            stackable: false
+        }
+    },
+    {
+        id: 'dialog',
+        name: 'Dialog',
+        match: (message) => message.content?.displayConfig?.type === 'dialog',
+        display: {
+            type: 'dialog',
+            supportsMarkdown: true,
+            stackable: true
+        }
+    },
+    {
+        id: 'default',
+        name: 'Snackbar',
+        match: () => true,
+        display: {
+            type: 'snackbar',
+            supportsMarkdown: false,
+            stackable: true,
+            autoDismiss: 3000
+        }
+    }
+];
+
+class SnackbarStrategy {
+    constructor() {
+        this.name = 'snackbar';
+        this.toastService = inject(ToastMessageDisplayService);
+    }
+    canHandle(message) {
+        return true; // Always can handle (fallback strategy)
+    }
+    display(message, config) {
+        const messageText = this.extractMessage(message.content);
+        this.toastService.toastMessage({
+            message: messageText,
+            color: ToastColors.INFO,
+            icon: 'info',
+            action: 'DONE'
+        }, config.autoDismiss ?? 3000);
+    }
+    extractMessage(content) {
+        if (!content)
+            return '';
+        // Try nested content structure (backward compatibility)
+        if (content.content?.message) {
+            return content.content.message;
+        }
+        // Try direct message
+        if (content.message) {
+            return content.message;
+        }
+        return '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SnackbarStrategy, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SnackbarStrategy }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SnackbarStrategy, decorators: [{
+            type: Injectable
+        }] });
+
+class MessageDisplayRouterService {
+    constructor() {
+        this.snackbarStrategy = inject(SnackbarStrategy);
+        // All available strategies
+        this.strategies = [
+            this.snackbarStrategy
+            // DialogStrategy will be added in Phase 2
+            // CarouselStrategy will be added in Phase 3
+        ];
+        // Rules are evaluated in order - first match wins
+        this.rules = defaultDisplayRules;
+    }
+    display(message) {
+        console.log('📨 MessageDisplayRouterService: Processing message:', message);
+        // Find FIRST matching rule (order matters!)
+        const matchingRule = this.rules.find(rule => rule.match(message));
+        // Get the rule (will be 'default' if nothing else matches)
+        const rule = matchingRule || this.rules[this.rules.length - 1];
+        console.log(`🎯 MessageDisplayRouterService: Matched rule '${rule.id}' (${rule.name})`);
+        console.log(`   → Display type: ${rule.display.type}`);
+        // Get strategy for the display type
+        const strategy = this.strategies.find(s => s.name === rule.display.type);
+        if (!strategy) {
+            console.warn(`⚠️ MessageDisplayRouterService: No strategy found for type '${rule.display.type}', falling back to snackbar`);
+            // Fallback to snackbar if strategy not found
+            this.snackbarStrategy.display(message, rule.display);
+            return;
+        }
+        // Execute display
+        console.log(`🚀 MessageDisplayRouterService: Executing ${strategy.name} strategy`);
+        strategy.display(message, rule.display);
+    }
+    registerStrategies(strategies) {
+        strategies.forEach(strategy => {
+            if (!this.strategies.find(s => s.name === strategy.name)) {
+                this.strategies.push(strategy);
+                console.log(`✅ Registered strategy: ${strategy.name}`);
+            }
+        });
+    }
+    setRules(rules) {
+        this.rules = rules;
+        console.log(`📋 MessageDisplayRouterService: Rules updated (${rules.length} rules)`);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessageDisplayRouterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessageDisplayRouterService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessageDisplayRouterService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+let ClientInfo$2 = class ClientInfo {
+    constructor(domain = '', service = '', id = 0, name = '') {
+        this.domain = domain;
+        this.service = service;
+        this.id = id;
+        this.name = name;
+    }
+    static adapt(item) {
+        return new ClientInfo(item?.domain, item?.service, item?.id, (item?.first_name || item?.last_name) ? `${item?.first_name} ${item?.last_name}` : '');
+    }
+};
+
+let ClientInfoMapper$2 = class ClientInfoMapper {
+    constructor(id = 0, first_name = '', last_name = '', email = '') {
+        this.id = id;
+        this.first_name = first_name;
+        this.last_name = last_name;
+        this.email = email;
+    }
+    static adapt(item) {
+        const first_name = (item?.name) ? item.name.split(' ')[0] : '';
+        const last_name = (item?.name) ? item.name.split(' ')[1] : '';
+        return new ClientInfoMapper(item?.id, first_name, last_name, item?.email);
+    }
+};
+
+let AIPrompt$2 = class AIPrompt {
+    constructor(response = '') {
+        this.response = response;
+    }
+    static adapt(item) {
+        return new AIPrompt(item?.response);
+    }
+};
+
+class RequestManagerBasicDemoComponent {
+    // Dynamic columns based on data structure
+    getColumnsFromData(data) {
+        if (!data || data.length === 0) {
+            return [];
+        }
+        const firstRecord = data[0];
+        if (!firstRecord || typeof firstRecord !== 'object') {
+            return [];
+        }
+        // Extract all keys from the first record, excluding null/undefined
+        return Object.keys(firstRecord).filter(key => firstRecord[key] !== null && firstRecord[key] !== undefined);
+    }
+    // Update displayed columns when data changes
+    updateDisplayedColumns(data) {
+        this.displayedColumns = this.getColumnsFromData(data);
+        console.log('[DEMO] Updated columns:', this.displayedColumns);
+    }
+    // Helper to check if value is an object
+    isObject(value) {
+        return value !== null && typeof value === 'object' && !Array.isArray(value);
+    }
+    get retry() {
+        return this.requestForm.get('retry')?.value;
+    }
+    get headers() {
+        return this.requestForm.get('headers');
+    }
+    get isValid() {
+        this.requestForm.markAllAsTouched();
+        return this.requestForm.valid;
+    }
+    constructor() {
+        this.server = 'http://localhost:8080';
+        this.displayedColumns = [];
+        this.fb = inject(FormBuilder);
+        this.toastMessage = inject(ToastMessageDisplayService);
+        this.questionControl = this.fb.control("", [Validators.required]);
+        this.httpManagerService = inject(HTTPManagerService);
+        this.isPending$ = this.httpManagerService.isPending$;
+        this.countdown$ = this.httpManagerService.countdown$;
+        this.GET_error$ = new BehaviorSubject('');
+        this.POST_error$ = new BehaviorSubject('');
+        this.PUT_error$ = new BehaviorSubject('');
+        this.DELETE_error$ = new BehaviorSubject('');
+        this.STREAM_error$ = new BehaviorSubject('');
+        this.STREAM_AI_error$ = new BehaviorSubject('');
+        this.requestParams = {
+            GET: ApiRequest.adapt(),
+            POST: ApiRequest.adapt(),
+            PUT: ApiRequest.adapt(),
+            DELETE: ApiRequest.adapt(),
+            STREAM: ApiRequest.adapt(),
+        };
+        this.streamTypes = [
+            { id: 'JSON', value: 'json' },
+            { id: 'NDJSON', value: 'ndjson' },
+            { id: 'AI Streaming', value: 'ai_streaming' },
+            { id: 'Event Stream', value: 'event_stream' },
+            { id: 'Auto', value: 'auto' },
+        ];
+        this.streamType = 'Auto';
+        this.downloadRequest = ApiRequest.adapt({
+            server: 'assets/images',
+            path: ['lego.png'],
+            saveAs: 'john.jpg', // Optional
+            headers: { 'Authorization': 'Bearer Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6InJ0c0ZULWItN0x1WTdEVlllU05LY0lKN1ZuYyJ9.eyJhdWQiOiI4ODhhMzFjZS01OWQzLTRhMTItYTU5Ni04ZDYyZjY0MWI1MDUiLCJpc3MiOiJodHRwczovL2xvZ2luLm1pY3Jvc29mdG9ubGluZS5jb20vNmY0MTE5ODItY2YyMy00ZTQ1LTk0NDktNGI2MDdiN2E4OGVjL3YyLjAiLCJpYXQiOjE3NjU4MzQxNDksIm5iZiI6MTc2NTgzNDE0OSwiZXhwIjoxNzY1ODM5NzQ2LCJhY2N0IjowLCJhaW8iOiJBV1FBbS84YUFBQUFVUEZOYUhSZkZ4ZVkwRWthcFBzdWZaNG1QYXV6YVRoODRRZUtQRzkrbEFIVE5XanVwQy9ZSjEwK2IrMktWVlJSSXZRNFpwS2xyWTFGd0xRZmtXOTNLbkRNckxSeEMzWTVOOGlQREZ4b1liZExucW1QL1N1ZE1pRW1Va05tTklSWSIsImF6cCI6Ijg4OGEzMWNlLTU5ZDMtNGExMi1hNTk2LThkNjJmNjQxYjUwNSIsImF6cGFjciI6IjAiLCJncm91cHMiOlsiZWE2ZDk5YjAtNDgyNC00MDU0LTk0MTQtZDNhOTZkZDA3MjRiIl0sIm5hbWUiOiJHVExDIEFwcCBTdXBlciBBZG1pbiIsIm9pZCI6IjI2NzUxY2I2LWNlMDEtNDMzMC05OTc0LWZjMzgxMjQ3YTEzYyIsInByZWZlcnJlZF91c2VybmFtZSI6Imd0bGMwMDNAZ3RsYy5jYSIsInJoIjoiMS5BUzRBZ2hsQmJ5UFBSVTZVU1V0Z2UzcUk3TTR4aW9qVFdSSktwWmFOWXZaQnRRVm1BYTR1QUEuIiwicm9sZXMiOlsiZ3RsYy5hY2wuc3VwZXJhZG1pbiJdLCJzY3AiOiJHVExDX0FwcGxpY2F0aW9uIiwic2lkIjoiMDAzZjVhZDktZmJmNi1jZTkyLTg3MjItMWEzNDExYjMzMDJiIiwic3ViIjoiS0RYQ3drVlhUbTRUUmcwaTkxbXZDZzgtQ29uLXpWbk5FQ2Y5LVg0dkpzUSIsInRpZCI6IjZmNDExOTgyLWNmMjMtNGU0NS05NDQ5LTRiNjA3YjdhODhlYyIsInVwbiI6Imd0bGMwMDNAZ3RsYy5jYSIsInV0aSI6InpBaTJoMmpVUUVHbVY0RTJXMWxqQUEiLCJ2ZXIiOiIyLjAiLCJ3aWRzIjpbImI3OWZiZjRkLTNlZjktNDY4OS04MTQzLTc2YjE5NGU4NTUwOSJdLCJ4bXNfZnRkIjoiUDJraW1ZM0tqc1BTRndxNHlZdmJ0bGhrSUk3d2tXNmFpcW1FQ1BaNEdja0JkWE5sWVhOMExXUnpiWE0ifQ.LzppoggMm27smSAy9SamtPN95vCzdELCAfhtOj5n_T_H6g9xCmNRLS9FaUFQMau6Qvl0lROKl7WDklTswLFkfxbIxCBWtXdL-LTqT5cDURSJAll8vC3zlN3Hg9pAFBUVZFRolt6Z7LvPdI3pvUOQs0yFwVzp9k6cLF8aemKdwKQrMX3XXua1MfBWZcqQ4WiBVNmKh8w6yQB35I4u5WqdFnu33nUGb-kvc18SOpoUfiJnlV-PudaEzFXdU3CjAaMEcuPFv5xLwWJKuhU73dNH4EyQDFMVGtcIHNnieOfiY_nK2_0-5DM6aI40UIRK6Bt-HmMQpnbhLps5y3ep6Z7RNw' } // Optional
+        });
+        // downloadRequest = ApiRequest.adapt({
+        //   server: 'oidc/ai/file'
+        // })
+        this.sampleClientData = {
+            id: 0,
+            name: "Old School Dates",
+            domain: "osd.com",
+            service: "osd",
+            spiffe: "osd.com/osd",
+            secret: "SMOPECXP-OS4P-USOG-X2II-3XMD1FQDR3IJX",
+            created: 1693003138,
+            modified: 1693003138,
+            icon: "",
+            imageFile: "",
+            email: "wavecoders@gmail.com"
+        };
+        this.requestForm = this.fb.group({
+            path: this.fb.control("ai/"),
+            headers: this.fb.array([]),
+            adapter: [null],
+            mapper: [null],
+            retry: this.fb.group({
+                times: [3],
+                delay: [3],
+            }),
+            polling: [3],
+        });
+        this.AIType = 0;
+        this.sampleAdaptors = [
+            { label: "ClientInfo Basic", value: ClientInfo$2.adapt },
+            { label: "AI Prompt", value: AIPrompt$2.adapt },
+        ];
+        this.sampleMappers = [
+            { label: "Mapper Basic", value: ClientInfoMapper$2.adapt },
+            { label: "AI Prompt", value: AIPrompt$2.adapt },
+        ];
+        this.hasId = (arr) => {
+            if (arr.length === 0)
+                return false;
+            return !isNaN(arr[arr.length - 1]);
+        };
+        this.props = (adapter) => {
+            return (adapter) ? adapter() : null;
+        };
+        // server = `http://sample-endpoint/as/authorization.oauth2`
+        this.arrayObjectsToObjects = (arr) => {
+            return Array.isArray(arr) ? arr.reduce((obj, item) => Object.assign(obj, { [item.key]: item.value }), {}) : {};
+        };
+    }
+    ngOnInit() {
+        // const reqGet2 = ApiRequest.adapt({
+        //   server,
+        //   path: ['clients'],
+        //   headers: { authentication: "Bearer <KEY>" },
+        //   adapter: ClientInfo,
+        //   dataType: DataType.OBJECT,
+        //   // concurrent: false,
+        //   // polling: 3, //seconds
+        // })
+        // const req2 = [1024,1025,1026].map(item => {
+        //   return this.httpManagerService.getRequest<ClientInfo[]>(reqGet2, [item])
+        //   .pipe(
+        //     catchError(error => {
+        //       return throwError(() => new Error(error.error.message))
+        //     })
+        //   )
+        // })
+        // forkJoin(req2)
+        // .subscribe(res => console.log(res))
+    }
+    onStreamType(type) {
+        this.streamType = type;
+    }
+    addHeader() {
+        const header = this.fb.group({
+            key: ['', Validators.required],
+            value: ['']
+        });
+        this.headers.push(header);
+    }
+    removeHeader(index) {
+        this.headers.removeAt(index);
+    }
+    compileRequest() {
+        const requestParams = this.requestForm.value;
+        requestParams.headers = this.arrayObjectsToObjects(requestParams.headers || []);
+        const pathReq = (requestParams.path === "") ? [] : (requestParams.path || "").split("/");
+        if (!this.pollingState.checked)
+            requestParams.polling = 0;
+        if (!this.failedState.checked) {
+            requestParams.retry = { times: 0, delay: 0 };
+        }
+        const apiOptions = ApiRequest.adapt(requestParams);
+        apiOptions.path = [];
+        apiOptions.server = this.server;
+        apiOptions.adapter = this.adapter;
+        apiOptions.mapper = this.mapper;
+        return { apiOptions: apiOptions, path: pathReq };
+    }
+    onGetRequest() {
+        if (!this.isValid)
+            return;
+        const reqParams = this.compileRequest();
+        this.requestParams.GET = reqParams.apiOptions;
+        this.GET$ = EMPTY; //Cancels Previous
+        this.GET_error$.next('');
+        this.GET$ = this.httpManagerService.getRequest({ ...reqParams.apiOptions }, reqParams.path)
+            .pipe(
+        // tap((data) => console.log("API GET response", data)),
+        catchError(error => {
+            return throwError(() => this.errorHandling(error, 'GET'));
+        }));
+    }
+    onCreateRequest() {
+        if (!this.isValid)
+            return;
+        const reqParams = this.compileRequest();
+        this.requestParams.POST = reqParams.apiOptions;
+        this.POST$ = EMPTY; //Cancels Previous
+        this.POST_error$.next('');
+        console.log("POST", this.sampleClientData);
+        console.log("POST", reqParams.apiOptions);
+        console.log("POST", reqParams.path);
+        this.POST$ = this.httpManagerService.postRequest(this.sampleClientData, reqParams.apiOptions, reqParams.path)
+            .pipe(
+        // tap((data) => console.log("API POST response", data)),
+        catchError(error => {
+            return throwError(() => this.errorHandling(error, 'POST'));
+        }));
+    }
+    onUpdateRequest() {
+        if (!this.isValid)
+            return;
+        const reqParams = this.compileRequest();
+        if (!this.hasId(reqParams.path)) {
+            console.log("Missing ID");
+            return;
+        }
+        this.sampleClientData.id = parseInt(reqParams.path[reqParams.path.length - 1]);
+        this.requestParams.PUT = reqParams.apiOptions;
+        this.PUT$ = EMPTY; //Cancels Previous
+        this.PUT_error$.next('');
+        this.PUT$ = this.httpManagerService.putRequest(this.sampleClientData, reqParams.apiOptions, reqParams.path)
+            .pipe(
+        // tap((data) => console.log("API PUT response", data)),
+        catchError(error => {
+            return throwError(() => this.errorHandling(error, 'PUT'));
+        }));
+    }
+    onDeleteRequest() {
+        if (!this.isValid)
+            return;
+        const reqParams = this.compileRequest();
+        this.requestParams.DELETE = reqParams.apiOptions;
+        if (!this.hasId(reqParams.path)) {
+            console.log("Missing ID");
+            return;
+        }
+        this.sampleClientData.id = parseInt(reqParams.path[reqParams.path.length - 1]);
+        this.requestParams.DELETE = reqParams.apiOptions;
+        this.DELETE$ = EMPTY; //Cancels Previous
+        this.DELETE_error$.next('');
+        this.DELETE$ = this.httpManagerService.deleteRequest(reqParams.apiOptions, reqParams.path)
+            .pipe(
+        // tap((data) => console.log("API DELETE response", data)),
+        catchError(error => {
+            return throwError(() => this.errorHandling(error, 'DELETE'));
+        }));
+    }
+    onStreamPostRequest() {
+        if (!this.isValid)
+            return;
+        const reqParams = this.compileRequest();
+        let payload = {};
+        let apiPath = reqParams.path;
+        let apiOptions = reqParams.apiOptions;
+        let responseMapper = (items) => items.response;
+        if (this.AIType === 0) {
+            // API request
+            payload = { prompt: this.questionControl.value };
+        }
+        else {
+            // Local Ollama request
+            apiOptions.server = "api";
+            apiPath = ["generate"];
+            apiOptions.stream = true;
+            apiOptions.streamType = this.streamType;
+            payload = {
+                model: "phi3:latest",
+                prompt: this.questionControl.value,
+                stream: true,
+            };
+            responseMapper = (items) => items.map((word) => word.response).flat().join('');
+        }
+        this.requestParams.STREAM = apiOptions;
+        this.STREAM_AI$ = EMPTY;
+        this.STREAM_AI_error$.next('');
+        this.STREAM_AI$ = this.httpManagerService.postRequest(payload, apiOptions, apiPath).pipe(map(responseMapper), tap(() => this.questionControl.reset()), catchError(error => throwError(() => this.errorHandling(error, 'STREAM'))));
+    }
+    onStreamRequest() {
+        if (!this.isValid)
+            return;
+        const reqParams = this.compileRequest();
+        reqParams.apiOptions.stream = true;
+        reqParams.apiOptions.streamType = StreamType.NDJSON;
+        this.requestParams.GET = reqParams.apiOptions;
+        this.STREAM$ = this.httpManagerService.getRequest(reqParams.apiOptions, reqParams.path)
+            .pipe(tap((data) => {
+            console.log("API STREAM response", data);
+            if (data && data.length > 0) {
+                this.updateDisplayedColumns(data);
+            }
+        }), catchError(error => {
+            return throwError(() => this.errorHandling(error, 'STREAM'));
+        }));
+    }
+    onDownloadCompleted() {
+        const message = "Download Completed";
+        const display = ToastDisplay.adapt({
+            message,
+            action: 'Ok',
+            color: ToastColors.SUCCESS,
+            icon: 'sentiment_satisfied_alt',
+        });
+        this.toastMessage.toastMessage(display);
+    }
+    onDownloadFailed(err) {
+        const message = "Download Failed";
+        const display = ToastDisplay.adapt({
+            message,
+            action: 'Ok',
+            color: ToastColors.ERROR,
+            icon: 'warning',
+        });
+        this.toastMessage.toastMessage(display);
+    }
+    errorHandling(err, type) {
+        if (type === 'GET')
+            this.GET_error$.next(err.message);
+        if (type === 'POST')
+            this.POST_error$.next(err.message);
+        if (type === 'PUT')
+            this.PUT_error$.next(err.message);
+        if (type === 'DELETE')
+            this.DELETE_error$.next(err.message);
+        if (type === 'STREAM')
+            this.STREAM_error$.next(err.message);
+    }
+    onSelectAIType(type) {
+        this.AIType = type;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RequestManagerBasicDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: RequestManagerBasicDemoComponent, selector: "app-request-manager-basic-demo", 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 Basic Request Manager Setup\n  </h2>\n\n  <div style=\"margin-bottom: 1rem; margin-top: 2rem;\">\n    @if ((isPending$ | async)) {\n      <mat-progress-bar mode=\"indeterminate\"\n      ></mat-progress-bar>\n    }\n    @if (pollingState.checked && !(isPending$ | async)) {\n      <mat-progress-bar mode=\"determinate\"\n        [value]=\"(this.countdown$ | async)\"\n      ></mat-progress-bar>\n    }\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">GET Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onGetRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((GET_error$ | async); as get_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ get_error }}</mat-error>\n      </div>\n    }\n\n    @if ((GET$ | async); as dataRecord) {\n      <div style=\"margin-top: 1rem;\">\n        <!-- <div [innerHTML]=\"(GET$ | async) | jsonv\"></div> -->\n        {{ dataRecord | json }}\n      </div>\n    }\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">POST Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onCreateRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((POST_error$ | async); as post_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ post_error }}</mat-error>\n      </div>\n    }\n\n    @if ((POST$ | async); as dataRecord) {\n      <div style=\"margin-top: 1rem;\">\n        <!-- <div [innerHTML]=\"(POST$ | async) | jsonv\"></div> -->\n        {{ dataRecord | json }}\n      </div>\n    }\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">PUT Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onUpdateRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((PUT_error$ | async); as put_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ put_error }}</mat-error>\n      </div>\n    }\n\n    <h3>Include Record ID in the RestPath</h3>\n\n    @if ((PUT$ | async); as dataRecord) {\n      <div style=\"margin-top: 1rem;\">\n        <!-- <div [innerHTML]=\"(PUT$ | async) | jsonv\"></div> -->\n        {{ dataRecord | json }}\n      </div>\n    }\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">DELETE Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onDeleteRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <h3>Include Record ID in the RestPath</h3>\n\n    @if ((DELETE_error$ | async); as delete_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ delete_error }}</mat-error>\n      </div>\n    }\n\n    @if ((DELETE$ | async); as dataRecord) {\n      <div style=\"margin-top: 1rem;\">\n        <!-- <div [innerHTML]=\"(DELETE$ | async) | jsonv\"></div> -->\n        {{ dataRecord | json }}\n      </div>\n    }\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">Streaming GET Request</h2>\n        <div style=\"display: flex; gap: 1rem; align-items: center;\">\n          <div style=\"display: flex; gap: 1rem; align-items: center;\">\n            {{ streamType }}\n            <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n              <mat-icon>data_usage</mat-icon>\n            </button>\n          </div>\n          <mat-menu #menu=\"matMenu\">\n            <button mat-menu-item *ngFor=\"let item of streamTypes\" (click)=\"onStreamType(item.id)\">{{ item.value }}</button>\n          </mat-menu>\n        <button mat-raised-button (click)=\"onStreamRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <!-- <div *ngIf=\"(STREAM_error$ | async) as stream_error\" style=\"margin-top: .5rem;\">\n    <mat-error>{{ stream_error }}</mat-error>\n  </div> -->\n\n  <div style=\"margin-top: 1rem;\">\n    @if ((STREAM$ | async); as data) {\n      <div class=\"container\">\n        <table mat-table [dataSource]=\"data\" class=\"mat-elevation-z8\">\n\n          <!-- Dynamic columns -->\n          <ng-container *ngFor=\"let column of displayedColumns\" [matColumnDef]=\"column\">\n            <th mat-header-cell *matHeaderCellDef> {{ column | titlecase }} </th>\n            <td mat-cell *matCellDef=\"let element\">\n              @if (isObject(element[column]); as objValue) {\n                <pre style=\"margin: 0; font-size: 0.8em; white-space: pre-wrap;\">{{ objValue | json }}</pre>\n              } @else {\n                {{ element[column] }}\n              }\n            </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\n        <!-- Debug info -->\n        <div style=\"margin-top: 1rem; font-size: 0.8em; color: #666;\">\n          Columns: {{ displayedColumns.join(', ') }} | Records: {{ data.length }}\n        </div>\n      </div>\n    }\n  </div>\n\n</div>\n\n<div style=\"margin-top: 2rem\">\n  <mat-divider></mat-divider>\n</div>\n\n<div style=\"margin-top: 2rem\">\n  <div style=\"display: flex;\">\n    <h2 style=\"flex:1; padding-top: .5rem;\">AI -@if (AIType === 1) {\n      <span>STREAMING</span>\n    } POST Request</h2>\n    <div style=\"display: flex; gap: 1rem;\">\n      <button mat-raised-button [matMenuTriggerFor]=\"menu\" style=\"min-width: 120px;\">\n        <mat-icon>lan</mat-icon>\n        @if (AIType === 0) {\n          <span>Server</span>\n        } @else {\n          Local\n        }\n      </button>\n      <mat-menu #menu=\"matMenu\">\n        <button mat-menu-item (click)=\"onSelectAIType(0)\">Server</button>\n        <button mat-menu-item (click)=\"onSelectAIType(1)\">Local</button>\n      </mat-menu>\n      <div>\n        <button mat-raised-button (click)=\"onStreamPostRequest()\" class=\"btn\">Ask Me</button>\n      </div>\n    </div>\n  </div>\n\n  <div style=\"display: flex;\">\n    <mat-form-field appearance=\"outline\" style=\"flex:1\">\n      <mat-label>Ask me a Question</mat-label>\n      <textarea matInput placeholder=\"Why is the sky blue?\" [formControl]=\"questionControl\"></textarea>\n    </mat-form-field>\n  </div>\n\n  @if ((STREAM_AI_error$ | async); as stream_error) {\n    <div style=\"margin-top: .5rem;\">\n      <mat-error>{{ stream_error }}</mat-error>\n    </div>\n  }\n\n  @if (AIType === 1) {\n    <div style=\"color: red;\">\n      You must have Ollama active and the 'phi3:latest' model to use this feature.\n    </div>\n  } @else {\n    <span style=\"color: gray;\">\n      Define the RestPath to the API endpoint that will handle the AI request.\n      Use: 'ai/chat' for server\n    </span>\n  }\n\n  <div>\n    @if ((STREAM_AI$ | async); as data) {\n      <div style=\"margin-top: 1rem; font-size: 1.2rem; border-radius: 1rem; border: black 1px solid; padding: 2rem;\">\n        <p style=\"margin-bottom: .5rem; white-space:pre-wrap; line-height: 1.6rem;\">{{data}}</p>\n      </div>\n    }\n  </div>\n\n</div>\n\n<div style=\"margin-top: 1.5rem; margin-bottom: 1rem; line-height: 1.5rem;\">\n  <mat-divider></mat-divider>\n</div>\n\n<div>\n  <div style=\"display: flex;\">\n    <h2 style=\"flex:1; margin-bottom: 0; padding-top: .5rem; display: flex;\">\n      <div>\n        Download File\n      </div>\n      <div style=\"flex:1; margin-left: 1rem;\">\n        <mat-slide-toggle #disable>\n          @if (disable.checked) {\n            <span>\n              Enable\n            </span>\n          } @else {\n            Disable\n          }\n        </mat-slide-toggle>\n      </div>\n    </h2>\n    <div>\n      <app-file-downloader\n        [disabled]=\"disable.checked\"\n        [delayError]=\"3\"\n        [apiRequest]=\"downloadRequest\"\n        (completed)=\"onDownloadCompleted()\"\n        (failed)=\"onDownloadFailed($event)\"\n      ></app-file-downloader>\n    </div>\n  </div>\n</div>\n\n</div>\n", styles: [".btn{min-width:120px}.mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor;background-color:#f5f5f5}.container{height:400px;overflow:auto}.box{padding:10px;border:1px solid #ccc}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.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: 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.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" }, { kind: "pipe", type: i1$1.TitleCasePipe, name: "titlecase" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RequestManagerBasicDemoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-request-manager-basic-demo', providers: [HTTPManagerService], standalone: false, template: "<div style=\"margin: 2rem;\">\n\n  <h2>\n    HTTP Basic Request Manager Setup\n  </h2>\n\n  <div style=\"margin-bottom: 1rem; margin-top: 2rem;\">\n    @if ((isPending$ | async)) {\n      <mat-progress-bar mode=\"indeterminate\"\n      ></mat-progress-bar>\n    }\n    @if (pollingState.checked && !(isPending$ | async)) {\n      <mat-progress-bar mode=\"determinate\"\n        [value]=\"(this.countdown$ | async)\"\n      ></mat-progress-bar>\n    }\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">GET Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onGetRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((GET_error$ | async); as get_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ get_error }}</mat-error>\n      </div>\n    }\n\n    @if ((GET$ | async); as dataRecord) {\n      <div style=\"margin-top: 1rem;\">\n        <!-- <div [innerHTML]=\"(GET$ | async) | jsonv\"></div> -->\n        {{ dataRecord | json }}\n      </div>\n    }\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">POST Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onCreateRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((POST_error$ | async); as post_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ post_error }}</mat-error>\n      </div>\n    }\n\n    @if ((POST$ | async); as dataRecord) {\n      <div style=\"margin-top: 1rem;\">\n        <!-- <div [innerHTML]=\"(POST$ | async) | jsonv\"></div> -->\n        {{ dataRecord | json }}\n      </div>\n    }\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">PUT Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onUpdateRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((PUT_error$ | async); as put_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ put_error }}</mat-error>\n      </div>\n    }\n\n    <h3>Include Record ID in the RestPath</h3>\n\n    @if ((PUT$ | async); as dataRecord) {\n      <div style=\"margin-top: 1rem;\">\n        <!-- <div [innerHTML]=\"(PUT$ | async) | jsonv\"></div> -->\n        {{ dataRecord | json }}\n      </div>\n    }\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">DELETE Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onDeleteRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <h3>Include Record ID in the RestPath</h3>\n\n    @if ((DELETE_error$ | async); as delete_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ delete_error }}</mat-error>\n      </div>\n    }\n\n    @if ((DELETE$ | async); as dataRecord) {\n      <div style=\"margin-top: 1rem;\">\n        <!-- <div [innerHTML]=\"(DELETE$ | async) | jsonv\"></div> -->\n        {{ dataRecord | json }}\n      </div>\n    }\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">Streaming GET Request</h2>\n        <div style=\"display: flex; gap: 1rem; align-items: center;\">\n          <div style=\"display: flex; gap: 1rem; align-items: center;\">\n            {{ streamType }}\n            <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n              <mat-icon>data_usage</mat-icon>\n            </button>\n          </div>\n          <mat-menu #menu=\"matMenu\">\n            <button mat-menu-item *ngFor=\"let item of streamTypes\" (click)=\"onStreamType(item.id)\">{{ item.value }}</button>\n          </mat-menu>\n        <button mat-raised-button (click)=\"onStreamRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <!-- <div *ngIf=\"(STREAM_error$ | async) as stream_error\" style=\"margin-top: .5rem;\">\n    <mat-error>{{ stream_error }}</mat-error>\n  </div> -->\n\n  <div style=\"margin-top: 1rem;\">\n    @if ((STREAM$ | async); as data) {\n      <div class=\"container\">\n        <table mat-table [dataSource]=\"data\" class=\"mat-elevation-z8\">\n\n          <!-- Dynamic columns -->\n          <ng-container *ngFor=\"let column of displayedColumns\" [matColumnDef]=\"column\">\n            <th mat-header-cell *matHeaderCellDef> {{ column | titlecase }} </th>\n            <td mat-cell *matCellDef=\"let element\">\n              @if (isObject(element[column]); as objValue) {\n                <pre style=\"margin: 0; font-size: 0.8em; white-space: pre-wrap;\">{{ objValue | json }}</pre>\n              } @else {\n                {{ element[column] }}\n              }\n            </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\n        <!-- Debug info -->\n        <div style=\"margin-top: 1rem; font-size: 0.8em; color: #666;\">\n          Columns: {{ displayedColumns.join(', ') }} | Records: {{ data.length }}\n        </div>\n      </div>\n    }\n  </div>\n\n</div>\n\n<div style=\"margin-top: 2rem\">\n  <mat-divider></mat-divider>\n</div>\n\n<div style=\"margin-top: 2rem\">\n  <div style=\"display: flex;\">\n    <h2 style=\"flex:1; padding-top: .5rem;\">AI -@if (AIType === 1) {\n      <span>STREAMING</span>\n    } POST Request</h2>\n    <div style=\"display: flex; gap: 1rem;\">\n      <button mat-raised-button [matMenuTriggerFor]=\"menu\" style=\"min-width: 120px;\">\n        <mat-icon>lan</mat-icon>\n        @if (AIType === 0) {\n          <span>Server</span>\n        } @else {\n          Local\n        }\n      </button>\n      <mat-menu #menu=\"matMenu\">\n        <button mat-menu-item (click)=\"onSelectAIType(0)\">Server</button>\n        <button mat-menu-item (click)=\"onSelectAIType(1)\">Local</button>\n      </mat-menu>\n      <div>\n        <button mat-raised-button (click)=\"onStreamPostRequest()\" class=\"btn\">Ask Me</button>\n      </div>\n    </div>\n  </div>\n\n  <div style=\"display: flex;\">\n    <mat-form-field appearance=\"outline\" style=\"flex:1\">\n      <mat-label>Ask me a Question</mat-label>\n      <textarea matInput placeholder=\"Why is the sky blue?\" [formControl]=\"questionControl\"></textarea>\n    </mat-form-field>\n  </div>\n\n  @if ((STREAM_AI_error$ | async); as stream_error) {\n    <div style=\"margin-top: .5rem;\">\n      <mat-error>{{ stream_error }}</mat-error>\n    </div>\n  }\n\n  @if (AIType === 1) {\n    <div style=\"color: red;\">\n      You must have Ollama active and the 'phi3:latest' model to use this feature.\n    </div>\n  } @else {\n    <span style=\"color: gray;\">\n      Define the RestPath to the API endpoint that will handle the AI request.\n      Use: 'ai/chat' for server\n    </span>\n  }\n\n  <div>\n    @if ((STREAM_AI$ | async); as data) {\n      <div style=\"margin-top: 1rem; font-size: 1.2rem; border-radius: 1rem; border: black 1px solid; padding: 2rem;\">\n        <p style=\"margin-bottom: .5rem; white-space:pre-wrap; line-height: 1.6rem;\">{{data}}</p>\n      </div>\n    }\n  </div>\n\n</div>\n\n<div style=\"margin-top: 1.5rem; margin-bottom: 1rem; line-height: 1.5rem;\">\n  <mat-divider></mat-divider>\n</div>\n\n<div>\n  <div style=\"display: flex;\">\n    <h2 style=\"flex:1; margin-bottom: 0; padding-top: .5rem; display: flex;\">\n      <div>\n        Download File\n      </div>\n      <div style=\"flex:1; margin-left: 1rem;\">\n        <mat-slide-toggle #disable>\n          @if (disable.checked) {\n            <span>\n              Enable\n            </span>\n          } @else {\n            Disable\n          }\n        </mat-slide-toggle>\n      </div>\n    </h2>\n    <div>\n      <app-file-downloader\n        [disabled]=\"disable.checked\"\n        [delayError]=\"3\"\n        [apiRequest]=\"downloadRequest\"\n        (completed)=\"onDownloadCompleted()\"\n        (failed)=\"onDownloadFailed($event)\"\n      ></app-file-downloader>\n    </div>\n  </div>\n</div>\n\n</div>\n", styles: [".btn{min-width:120px}.mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor;background-color:#f5f5f5}.container{height:400px;overflow:auto}.box{padding:10px;border:1px solid #ccc}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { failedState: [{
+                type: ViewChild,
+                args: ["failedState", { static: true }]
+            }], pollingState: [{
+                type: ViewChild,
+                args: ["pollingState", { static: true }]
+            }] } });
+
+let ClientInfo$1 = class ClientInfo {
+    constructor(domain = '', service = '', id = 0, name = '') {
+        this.domain = domain;
+        this.service = service;
+        this.id = id;
+        this.name = name;
+    }
+    static adapt(item) {
+        return new ClientInfo(item?.domain, item?.service, item?.id, (item?.first_name || item?.last_name) ? `${item?.first_name} ${item?.last_name}` : '');
+    }
+};
+
+let ClientInfoMapper$1 = class ClientInfoMapper {
+    constructor(id = 0, first_name = '', last_name = '', email = '') {
+        this.id = id;
+        this.first_name = first_name;
+        this.last_name = last_name;
+        this.email = email;
+    }
+    static adapt(item) {
+        const first_name = (item?.name) ? item.name.split(' ')[0] : '';
+        const last_name = (item?.name) ? item.name.split(' ')[1] : '';
+        return new ClientInfoMapper(item?.id, first_name, last_name, item?.email);
+    }
+};
+
+class StateManagerDemoService extends HTTPManagerStateService {
+    constructor() {
+        super(ApiRequest.adapt({
+            server: "",
+            path: [],
+            headers: {},
+            adapter: ClientInfo$1.adapt,
+            mapper: ClientInfoMapper$1.adapt,
+            stream: false,
+        }), DataType.ARRAY, DatabaseStorage.adapt());
+    }
+    setAPIOptions(apiOptions, dataType, database) {
+        this.setApiRequestOptions(apiOptions, dataType, database);
+    }
+    getClients() {
+        // const headers = {
+        //   auth: "sample-auth-token"
+        // }
+        // const sampleOptions = RequestOptions.adapt({ path: ["id", 12], headers, sample: true })
+        this.fetchRecords();
+    }
+    createClient(data) {
+        // const headers = {
+        //   auth: "sample-auth-token"
+        // }
+        // const sampleOptions = RequestOptions.adapt({ path: ["id", 12], headers, sample: true })
+        this.createRecord(data);
+    }
+    updateClient(data) {
+        // const headers = {
         //   auth: "sample-auth-token"
         // }
         data.id = 1031;
@@ -6823,7 +7730,7 @@ class RequestManagerDemoComponent {
         this.streamType = 'Auto';
         this.downloadRequest = ApiRequest.adapt({
             server: 'assets/images',
-            path: ['me.jpg'],
+            path: ['lego.png'],
             saveAs: 'john.jpg', // Optional
             headers: { 'Authorization': 'Bearer Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6InJ0c0ZULWItN0x1WTdEVlllU05LY0lKN1ZuYyJ9.eyJhdWQiOiI4ODhhMzFjZS01OWQzLTRhMTItYTU5Ni04ZDYyZjY0MWI1MDUiLCJpc3MiOiJodHRwczovL2xvZ2luLm1pY3Jvc29mdG9ubGluZS5jb20vNmY0MTE5ODItY2YyMy00ZTQ1LTk0NDktNGI2MDdiN2E4OGVjL3YyLjAiLCJpYXQiOjE3NjU4MzQxNDksIm5iZiI6MTc2NTgzNDE0OSwiZXhwIjoxNzY1ODM5NzQ2LCJhY2N0IjowLCJhaW8iOiJBV1FBbS84YUFBQUFVUEZOYUhSZkZ4ZVkwRWthcFBzdWZaNG1QYXV6YVRoODRRZUtQRzkrbEFIVE5XanVwQy9ZSjEwK2IrMktWVlJSSXZRNFpwS2xyWTFGd0xRZmtXOTNLbkRNckxSeEMzWTVOOGlQREZ4b1liZExucW1QL1N1ZE1pRW1Va05tTklSWSIsImF6cCI6Ijg4OGEzMWNlLTU5ZDMtNGExMi1hNTk2LThkNjJmNjQxYjUwNSIsImF6cGFjciI6IjAiLCJncm91cHMiOlsiZWE2ZDk5YjAtNDgyNC00MDU0LTk0MTQtZDNhOTZkZDA3MjRiIl0sIm5hbWUiOiJHVExDIEFwcCBTdXBlciBBZG1pbiIsIm9pZCI6IjI2NzUxY2I2LWNlMDEtNDMzMC05OTc0LWZjMzgxMjQ3YTEzYyIsInByZWZlcnJlZF91c2VybmFtZSI6Imd0bGMwMDNAZ3RsYy5jYSIsInJoIjoiMS5BUzRBZ2hsQmJ5UFBSVTZVU1V0Z2UzcUk3TTR4aW9qVFdSSktwWmFOWXZaQnRRVm1BYTR1QUEuIiwicm9sZXMiOlsiZ3RsYy5hY2wuc3VwZXJhZG1pbiJdLCJzY3AiOiJHVExDX0FwcGxpY2F0aW9uIiwic2lkIjoiMDAzZjVhZDktZmJmNi1jZTkyLTg3MjItMWEzNDExYjMzMDJiIiwic3ViIjoiS0RYQ3drVlhUbTRUUmcwaTkxbXZDZzgtQ29uLXpWbk5FQ2Y5LVg0dkpzUSIsInRpZCI6IjZmNDExOTgyLWNmMjMtNGU0NS05NDQ5LTRiNjA3YjdhODhlYyIsInVwbiI6Imd0bGMwMDNAZ3RsYy5jYSIsInV0aSI6InpBaTJoMmpVUUVHbVY0RTJXMWxqQUEiLCJ2ZXIiOiIyLjAiLCJ3aWRzIjpbImI3OWZiZjRkLTNlZjktNDY4OS04MTQzLTc2YjE5NGU4NTUwOSJdLCJ4bXNfZnRkIjoiUDJraW1ZM0tqc1BTRndxNHlZdmJ0bGhrSUk3d2tXNmFpcW1FQ1BaNEdja0JkWE5sWVhOMExXUnpiWE0ifQ.LzppoggMm27smSAy9SamtPN95vCzdELCAfhtOj5n_T_H6g9xCmNRLS9FaUFQMau6Qvl0lROKl7WDklTswLFkfxbIxCBWtXdL-LTqT5cDURSJAll8vC3zlN3Hg9pAFBUVZFRolt6Z7LvPdI3pvUOQs0yFwVzp9k6cLF8aemKdwKQrMX3XXua1MfBWZcqQ4WiBVNmKh8w6yQB35I4u5WqdFnu33nUGb-kvc18SOpoUfiJnlV-PudaEzFXdU3CjAaMEcuPFv5xLwWJKuhU73dNH4EyQDFMVGtcIHNnieOfiY_nK2_0-5DM6aI40UIRK6Bt-HmMQpnbhLps5y3ep6Z7RNw' } // Optional
         });
@@ -7752,7 +8659,7 @@ class WsMessagingComponent {
         this.fb = inject(FormBuilder);
         this.messageService = inject(MessageServiceDemo);
         this.stateService = inject(StateServiceDemo);
-        this.toastService = inject(ToastMessageDisplayService);
+        this.messageDisplayService = inject(MessageDisplayRouterService);
         // Only show public channels (starting with "PUB-"), strip prefix for display
         // SYS- channels are private/internal and hidden from users
         this.channels$ = this.messageService.channels$.pipe(map$1(channels => channels
@@ -7801,16 +8708,15 @@ class WsMessagingComponent {
                 this.messageService.getAllChannels();
             }, 500); // 500ms delay to ensure subscription is processed
         });
-        // Subscribe to latest messages and show toast notification
+        // Subscribe to latest messages and display using rule-based routing
         this.latestCommunicationMessages$.pipe(filter$1(message => !!message), takeUntil$1(this.destroy$)).subscribe((message) => {
-            const messageContent = message.content?.message || '';
-            this.toastService.toastMessage(ToastDisplay.adapt({
-                message: messageContent,
-                color: ToastColors.INFO,
-                icon: 'chat',
-                action: 'DONE'
-            }), -1 // Stay until dismissed
-            );
+            console.log('🔔 Message received, routing to display:', message);
+            // NEW: Delegate to MessageDisplayRouterService
+            // The message payload determines the display type via rules
+            this.messageDisplayService.display(message);
+            // OLD: Hardcoded snackbar (removed)
+            // const messageContent = message.content?.content?.message || message.content?.message || '';
+            // this.toastService.toastMessage(...);
         });
     }
     ngOnDestroy() {
@@ -7855,8 +8761,14 @@ class WsMessagingComponent {
     /**
      * Handle chip toggle for subscribe/unsubscribe
      */
-    onChipToggle(channel, event) {
-        if (event.selected) {
+    onChipToggle(event, channel) {
+        const isSelected = event.selected;
+        console.log('🎯 Chip toggle event:', {
+            channel,
+            isSelected,
+            option: event.source
+        });
+        if (isSelected) {
             this.onSubscribeToChannel(channel);
         }
         else {
@@ -7870,44 +8782,39 @@ class WsMessagingComponent {
     isSubscribed(channel, subscribedChannels) {
         return subscribedChannels.includes(channel);
     }
-    /**
-     * Handle chip click - toggle subscription state
-     */
-    onChipClick(channel, subscribedChannels) {
-        const isCurrentlySubscribed = this.isSubscribed(channel, subscribedChannels);
-        if (isCurrentlySubscribed) {
-            this.onUnsubscribeFromChannel(channel);
-        }
-        else {
-            this.onSubscribeToChannel(channel);
-        }
-    }
-    onSendMessage(user) {
+    onSendMessage() {
         this.messages.markAllAsTouched();
         if (this.messages.invalid)
             return;
         const channelsToSend = this.selectedChannels.value;
         if (channelsToSend.length === 0)
             return;
-        // Pass base channel names - service adds PUB- prefix
-        const message = ChannelMessage.adapt({
-            sessionId: {
-                id: user.id,
-                ldap: user.ldap,
-                name: user.name,
-                email: user.email,
-            },
-            content: { message: this.messages.value.content },
+        // Get user from observable - subscribe once
+        this.user$.pipe(take$1(1)).subscribe(user => {
+            if (!user) {
+                console.error('❌ No user found');
+                return;
+            }
+            // Pass base channel names - service adds PUB- prefix
+            const message = ChannelMessage.adapt({
+                sessionId: {
+                    id: user.id,
+                    ldap: user.ldap,
+                    name: user.name,
+                    email: user.email,
+                },
+                content: { message: this.messages.value.content },
+            });
+            this.messageService.sendMessage(message, channelsToSend);
+            this.content.reset();
         });
-        this.messageService.sendMessage(message, channelsToSend);
-        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", path: "path" }, ngImport: i0, template: "\n  @if ((data$ | async); as data) {\n  @if ((user$ | async); as user) {\n    <div style=\"display: flex; gap: 1rem; flex-direction: column; margin-top: 1rem;\">\n\n        <!-- Channel Creation Section -->\n        <div style=\"padding: 1rem; background: #e3f2fd; border-radius: 4px;\">\n          <strong>Create New Channel</strong>\n          <div style=\"display: flex; flex-direction: column; margin-top: 0.5rem;\">\n            <mat-form-field appearance=\"outline\" style=\"width: 100%;\">\n              <mat-label>Channel Name</mat-label>\n              <input matInput [formControl]=\"newChannelName\" placeholder=\"Enter channel name\"\n                     (keydown.enter)=\"onCreateChannel()\">\n            </mat-form-field>\n            <div style=\"display: flex; justify-content: flex-end; margin-top: -0.5rem;\">\n              <button mat-raised-button color=\"primary\" (click)=\"onCreateChannel()\"\n                      [disabled]=\"newChannelName.invalid\">\n                Create Channel\n              </button>\n            </div>\n          </div>\n        </div>\n\n        <!-- Messaging Section - only show when subscribed to channels -->\n        @if ((subscribedChannels$ | async); as subscribedChannels) {\n          @if (subscribedChannels.length > 0) {\n            <div style=\"padding: 1rem; background: #fff3e0; border-radius: 4px;\" [formGroup]=\"messages\">\n              <strong>Send Message</strong>\n\n              <!-- Channel Selection with Checkboxes -->\n              <div style=\"margin-top: 0.5rem;\">\n                <mat-form-field appearance=\"outline\" style=\"width: 100%;\">\n                  <mat-label>Select Channels</mat-label>\n                  <mat-select formControlName=\"selectedChannels\" multiple>\n                    <mat-select-trigger>\n                      @if (selectedChannels.value?.length === 1) {\n                        {{ selectedChannels.value[0] }}\n                      } @else if (selectedChannels.value?.length > 1) {\n                        {{ selectedChannels.value[0] }} (+{{ selectedChannels.value.length - 1 }} {{ selectedChannels.value.length === 2 ? 'other' : 'others' }})\n                      }\n                    </mat-select-trigger>\n                    @for (channel of subscribedChannels; track channel; let i = $index) {\n                      <mat-option [value]=\"channel\">{{ channel }}</mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n              </div>\n\n              <!-- Message Input -->\n              <div style=\"display: flex; flex-direction: column;\">\n                <mat-form-field style=\"width: 100%;\" appearance=\"outline\">\n                  <mat-label>Message</mat-label>\n                  <textarea\n                    matInput placeholder=\"Type your message...\"\n                    formControlName=\"content\"\n                    (keydown.enter)=\"onSendMessage(user); $event.preventDefault()\"\n                  ></textarea>\n                </mat-form-field>\n                <div style=\"display: flex; justify-content: flex-end; margin-top: -0.5rem;\">\n                  <button mat-raised-button color=\"primary\" (click)=\"onSendMessage(user)\"\n                          [disabled]=\"messages.invalid\">\n                    Send\n                  </button>\n                </div>\n              </div>\n            </div>\n          }\n        }\n\n    </div>\n  }\n  }\n\n  <!-- Channel List with Subscription Controls using Chips -->\n  @if ((channels$ | async); as channels) {\n    @if ((subscribedChannels$ | async); as subscribedChannels) {\n      <div style=\"padding: 1rem; background: #f5f5f5; border-radius: 4px; margin-top: 1rem;\">\n        <strong>Subscribe to Channel(s)</strong>\n        <div style=\"margin-top: 0.5rem;\">\n          @if (channels.length === 0) {\n            <div style=\"color: #666; font-style: italic;\">No channels available. Create one above.</div>\n          } @else {\n            <mat-chip-listbox aria-label=\"Channel selection\" [multiple]=\"true\">\n              @for (channel of channels; track channel; let i = $index) {\n                <mat-chip-option\n                  [selected]=\"isSubscribed(channel, subscribedChannels)\"\n                  (click)=\"onChipClick(channel, subscribedChannels)\">\n                  {{ channel }}\n                </mat-chip-option>\n              }\n            </mat-chip-listbox>\n          }\n        </div>\n      </div>\n    }\n  }\n", styles: ["button[mat-raised-button],button[mat-stroked-button]{min-width:120px}mat-chip-option{min-width:120px;justify-content:center;border-radius:4px!important;padding:.25rem!important}\n"], dependencies: [{ kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.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: "directive", type: i5.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i3$1.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i3$1.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { 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" }] }); }
+    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", path: "path" }, ngImport: i0, template: "\n  @if ((data$ | async); as data) {\n  @if ((user$ | async); as user) {\n    <div style=\"display: flex; gap: 1rem; flex-direction: column; margin-top: 1rem;\">\n\n        <!-- Channel Creation Section -->\n        <div style=\"padding: 1rem; background: #e3f2fd; border-radius: 4px;\">\n          <strong>Create New Channel</strong>\n          <div style=\"display: flex; flex-direction: column; margin-top: 0.5rem;\">\n            <mat-form-field appearance=\"outline\" style=\"width: 100%;\">\n              <mat-label>Channel Name</mat-label>\n              <input matInput [formControl]=\"newChannelName\" placeholder=\"Enter channel name\"\n                     (keydown.enter)=\"onCreateChannel()\">\n            </mat-form-field>\n            <div style=\"display: flex; justify-content: flex-end; margin-top: -0.5rem;\">\n              <button mat-raised-button color=\"primary\" (click)=\"onCreateChannel()\"\n                      [disabled]=\"newChannelName.invalid\">\n                Create Channel\n              </button>\n            </div>\n          </div>\n        </div>\n\n        <!-- Messaging Section - only show when subscribed to channels -->\n        @if ((subscribedChannels$ | async); as subscribedChannels) {\n          @if (subscribedChannels.length > 0) {\n            <div style=\"padding: 1rem; background: #fff3e0; border-radius: 4px;\" [formGroup]=\"messages\">\n              <strong>Send Message</strong>\n              <!-- Debug: Show subscribed channels count -->\n              <div style=\"font-size: 0.8rem; color: #666; margin-bottom: 0.5rem;\">\n                Subscribed to {{ subscribedChannels.length }} channel(s): {{ subscribedChannels | json }}\n              </div>\n\n              <!-- Channel Selection with Checkboxes -->\n              <div style=\"margin-top: 0.5rem;\">\n                <mat-form-field appearance=\"outline\" style=\"width: 100%;\">\n                  <mat-label>Select Channels</mat-label>\n                  <mat-select formControlName=\"selectedChannels\" multiple>\n                    <mat-select-trigger>\n                      @if (selectedChannels.value?.length === 1) {\n                        {{ selectedChannels.value[0] }}\n                      } @else if (selectedChannels.value?.length > 1) {\n                        {{ selectedChannels.value[0] }} (+{{ selectedChannels.value.length - 1 }} {{ selectedChannels.value.length === 2 ? 'other' : 'others' }})\n                      }\n                    </mat-select-trigger>\n                    @for (channel of subscribedChannels; track channel; let i = $index) {\n                      <mat-option [value]=\"channel\">{{ channel }}</mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n              </div>\n\n              <!-- Message Input -->\n              <div style=\"display: flex; flex-direction: column;\">\n                <mat-form-field style=\"width: 100%;\" appearance=\"outline\">\n                  <mat-label>Message</mat-label>\n                  <textarea\n                    matInput placeholder=\"Type your message...\"\n                    formControlName=\"content\"\n                    (keydown.enter)=\"onSendMessage(); $event.preventDefault()\"\n                  ></textarea>\n                </mat-form-field>\n                <div style=\"display: flex; justify-content: flex-end; margin-top: -0.5rem;\">\n                  <button mat-raised-button color=\"primary\" (click)=\"onSendMessage()\"\n                          [disabled]=\"messages.invalid\">\n                    Send\n                  </button>\n                </div>\n              </div>\n            </div>\n          }\n        }\n\n    </div>\n  }\n  }\n\n  <!-- Channel List with Subscription Controls using Chips -->\n  @if ((channels$ | async); as channels) {\n    @if ((subscribedChannels$ | async); as subscribedChannels) {\n      <div style=\"padding: 1rem; background: #f5f5f5; border-radius: 4px; margin-top: 1rem;\">\n        <strong>Subscribe to Channel(s)</strong>\n        <div style=\"margin-top: 0.5rem;\">\n          @if (channels.length === 0) {\n            <div style=\"color: #666; font-style: italic;\">No channels available. Create one above.</div>\n          } @else {\n            <mat-chip-listbox\n              aria-label=\"Channel selection\"\n              [multiple]=\"true\">\n              @for (channel of channels; track channel; let i = $index) {\n                <mat-chip-option\n                  [selected]=\"isSubscribed(channel, subscribedChannels)\"\n                  (selectionChange)=\"onChipToggle($event, channel)\">\n                  {{ channel }}\n                </mat-chip-option>\n              }\n            </mat-chip-listbox>\n          }\n        </div>\n      </div>\n    }\n  }\n", styles: ["button[mat-raised-button],button[mat-stroked-button]{min-width:120px}mat-chip-option{min-width:120px;justify-content:center;border-radius:4px!important;padding:.25rem!important}\n"], dependencies: [{ kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.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: "directive", type: i5.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i3$1.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i3$1.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { 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" }] }); }
 }
 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: "\n  @if ((data$ | async); as data) {\n  @if ((user$ | async); as user) {\n    <div style=\"display: flex; gap: 1rem; flex-direction: column; margin-top: 1rem;\">\n\n        <!-- Channel Creation Section -->\n        <div style=\"padding: 1rem; background: #e3f2fd; border-radius: 4px;\">\n          <strong>Create New Channel</strong>\n          <div style=\"display: flex; flex-direction: column; margin-top: 0.5rem;\">\n            <mat-form-field appearance=\"outline\" style=\"width: 100%;\">\n              <mat-label>Channel Name</mat-label>\n              <input matInput [formControl]=\"newChannelName\" placeholder=\"Enter channel name\"\n                     (keydown.enter)=\"onCreateChannel()\">\n            </mat-form-field>\n            <div style=\"display: flex; justify-content: flex-end; margin-top: -0.5rem;\">\n              <button mat-raised-button color=\"primary\" (click)=\"onCreateChannel()\"\n                      [disabled]=\"newChannelName.invalid\">\n                Create Channel\n              </button>\n            </div>\n          </div>\n        </div>\n\n        <!-- Messaging Section - only show when subscribed to channels -->\n        @if ((subscribedChannels$ | async); as subscribedChannels) {\n          @if (subscribedChannels.length > 0) {\n            <div style=\"padding: 1rem; background: #fff3e0; border-radius: 4px;\" [formGroup]=\"messages\">\n              <strong>Send Message</strong>\n\n              <!-- Channel Selection with Checkboxes -->\n              <div style=\"margin-top: 0.5rem;\">\n                <mat-form-field appearance=\"outline\" style=\"width: 100%;\">\n                  <mat-label>Select Channels</mat-label>\n                  <mat-select formControlName=\"selectedChannels\" multiple>\n                    <mat-select-trigger>\n                      @if (selectedChannels.value?.length === 1) {\n                        {{ selectedChannels.value[0] }}\n                      } @else if (selectedChannels.value?.length > 1) {\n                        {{ selectedChannels.value[0] }} (+{{ selectedChannels.value.length - 1 }} {{ selectedChannels.value.length === 2 ? 'other' : 'others' }})\n                      }\n                    </mat-select-trigger>\n                    @for (channel of subscribedChannels; track channel; let i = $index) {\n                      <mat-option [value]=\"channel\">{{ channel }}</mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n              </div>\n\n              <!-- Message Input -->\n              <div style=\"display: flex; flex-direction: column;\">\n                <mat-form-field style=\"width: 100%;\" appearance=\"outline\">\n                  <mat-label>Message</mat-label>\n                  <textarea\n                    matInput placeholder=\"Type your message...\"\n                    formControlName=\"content\"\n                    (keydown.enter)=\"onSendMessage(user); $event.preventDefault()\"\n                  ></textarea>\n                </mat-form-field>\n                <div style=\"display: flex; justify-content: flex-end; margin-top: -0.5rem;\">\n                  <button mat-raised-button color=\"primary\" (click)=\"onSendMessage(user)\"\n                          [disabled]=\"messages.invalid\">\n                    Send\n                  </button>\n                </div>\n              </div>\n            </div>\n          }\n        }\n\n    </div>\n  }\n  }\n\n  <!-- Channel List with Subscription Controls using Chips -->\n  @if ((channels$ | async); as channels) {\n    @if ((subscribedChannels$ | async); as subscribedChannels) {\n      <div style=\"padding: 1rem; background: #f5f5f5; border-radius: 4px; margin-top: 1rem;\">\n        <strong>Subscribe to Channel(s)</strong>\n        <div style=\"margin-top: 0.5rem;\">\n          @if (channels.length === 0) {\n            <div style=\"color: #666; font-style: italic;\">No channels available. Create one above.</div>\n          } @else {\n            <mat-chip-listbox aria-label=\"Channel selection\" [multiple]=\"true\">\n              @for (channel of channels; track channel; let i = $index) {\n                <mat-chip-option\n                  [selected]=\"isSubscribed(channel, subscribedChannels)\"\n                  (click)=\"onChipClick(channel, subscribedChannels)\">\n                  {{ channel }}\n                </mat-chip-option>\n              }\n            </mat-chip-listbox>\n          }\n        </div>\n      </div>\n    }\n  }\n", styles: ["button[mat-raised-button],button[mat-stroked-button]{min-width:120px}mat-chip-option{min-width:120px;justify-content:center;border-radius:4px!important;padding:.25rem!important}\n"] }]
+            args: [{ selector: 'app-ws-messaging', standalone: false, template: "\n  @if ((data$ | async); as data) {\n  @if ((user$ | async); as user) {\n    <div style=\"display: flex; gap: 1rem; flex-direction: column; margin-top: 1rem;\">\n\n        <!-- Channel Creation Section -->\n        <div style=\"padding: 1rem; background: #e3f2fd; border-radius: 4px;\">\n          <strong>Create New Channel</strong>\n          <div style=\"display: flex; flex-direction: column; margin-top: 0.5rem;\">\n            <mat-form-field appearance=\"outline\" style=\"width: 100%;\">\n              <mat-label>Channel Name</mat-label>\n              <input matInput [formControl]=\"newChannelName\" placeholder=\"Enter channel name\"\n                     (keydown.enter)=\"onCreateChannel()\">\n            </mat-form-field>\n            <div style=\"display: flex; justify-content: flex-end; margin-top: -0.5rem;\">\n              <button mat-raised-button color=\"primary\" (click)=\"onCreateChannel()\"\n                      [disabled]=\"newChannelName.invalid\">\n                Create Channel\n              </button>\n            </div>\n          </div>\n        </div>\n\n        <!-- Messaging Section - only show when subscribed to channels -->\n        @if ((subscribedChannels$ | async); as subscribedChannels) {\n          @if (subscribedChannels.length > 0) {\n            <div style=\"padding: 1rem; background: #fff3e0; border-radius: 4px;\" [formGroup]=\"messages\">\n              <strong>Send Message</strong>\n              <!-- Debug: Show subscribed channels count -->\n              <div style=\"font-size: 0.8rem; color: #666; margin-bottom: 0.5rem;\">\n                Subscribed to {{ subscribedChannels.length }} channel(s): {{ subscribedChannels | json }}\n              </div>\n\n              <!-- Channel Selection with Checkboxes -->\n              <div style=\"margin-top: 0.5rem;\">\n                <mat-form-field appearance=\"outline\" style=\"width: 100%;\">\n                  <mat-label>Select Channels</mat-label>\n                  <mat-select formControlName=\"selectedChannels\" multiple>\n                    <mat-select-trigger>\n                      @if (selectedChannels.value?.length === 1) {\n                        {{ selectedChannels.value[0] }}\n                      } @else if (selectedChannels.value?.length > 1) {\n                        {{ selectedChannels.value[0] }} (+{{ selectedChannels.value.length - 1 }} {{ selectedChannels.value.length === 2 ? 'other' : 'others' }})\n                      }\n                    </mat-select-trigger>\n                    @for (channel of subscribedChannels; track channel; let i = $index) {\n                      <mat-option [value]=\"channel\">{{ channel }}</mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n              </div>\n\n              <!-- Message Input -->\n              <div style=\"display: flex; flex-direction: column;\">\n                <mat-form-field style=\"width: 100%;\" appearance=\"outline\">\n                  <mat-label>Message</mat-label>\n                  <textarea\n                    matInput placeholder=\"Type your message...\"\n                    formControlName=\"content\"\n                    (keydown.enter)=\"onSendMessage(); $event.preventDefault()\"\n                  ></textarea>\n                </mat-form-field>\n                <div style=\"display: flex; justify-content: flex-end; margin-top: -0.5rem;\">\n                  <button mat-raised-button color=\"primary\" (click)=\"onSendMessage()\"\n                          [disabled]=\"messages.invalid\">\n                    Send\n                  </button>\n                </div>\n              </div>\n            </div>\n          }\n        }\n\n    </div>\n  }\n  }\n\n  <!-- Channel List with Subscription Controls using Chips -->\n  @if ((channels$ | async); as channels) {\n    @if ((subscribedChannels$ | async); as subscribedChannels) {\n      <div style=\"padding: 1rem; background: #f5f5f5; border-radius: 4px; margin-top: 1rem;\">\n        <strong>Subscribe to Channel(s)</strong>\n        <div style=\"margin-top: 0.5rem;\">\n          @if (channels.length === 0) {\n            <div style=\"color: #666; font-style: italic;\">No channels available. Create one above.</div>\n          } @else {\n            <mat-chip-listbox\n              aria-label=\"Channel selection\"\n              [multiple]=\"true\">\n              @for (channel of channels; track channel; let i = $index) {\n                <mat-chip-option\n                  [selected]=\"isSubscribed(channel, subscribedChannels)\"\n                  (selectionChange)=\"onChipToggle($event, channel)\">\n                  {{ channel }}\n                </mat-chip-option>\n              }\n            </mat-chip-listbox>\n          }\n        </div>\n      </div>\n    }\n  }\n", styles: ["button[mat-raised-button],button[mat-stroked-button]{min-width:120px}mat-chip-option{min-width:120px;justify-content:center;border-radius:4px!important;padding:.25rem!important}\n"] }]
         }], propDecorators: { server: [{
                 type: Input
             }], wsServer: [{
@@ -8099,11 +9006,11 @@ class WsNotificationsComponent {
         return new Date().toISOString().split('T')[0];
     }
     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: "17.0.0", version: "18.2.14", type: WsNotificationsComponent, selector: "app-ws-notifications", inputs: { server: "server", wsServer: "wsServer", jwtToken: "jwtToken", user: "user" }, ngImport: i0, template: "<div style=\"display: flex; gap: 1rem; flex-direction: column; margin-top: 1rem;\">\n\n  <!-- Channel Creation Section -->\n  <div style=\"padding: 1rem; background: #e8f5e9; border-radius: 4px;\">\n    <strong>Create Notification Channel</strong>\n    <div style=\"display: flex; flex-direction: column; margin-top: 0.5rem;\">\n      <mat-form-field appearance=\"outline\" style=\"width: 100%;\">\n        <mat-label>Channel Name</mat-label>\n        <input\n          matInput\n          [formControl]=\"newChannelName\"\n          placeholder=\"Enter notification channel name\"\n          (keydown.enter)=\"onCreateChannel()\"\n        >\n      </mat-form-field>\n      <div style=\"display: flex; justify-content: flex-end; gap: 0.5rem;\">\n        <button mat-raised-button color=\"accent\" (click)=\"onDefinePreviousChannels()\">\n          Define Previous Channels\n        </button>\n        <button mat-raised-button color=\"primary\" (click)=\"onCreateChannel()\"\n                [disabled]=\"newChannelName.invalid\">\n          Create Channel\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Channel Connection Section - Only shown when NOT connected -->\n  @if ((subscribedNotificationChannels$ | async); as subscribedChannels) {\n    @if (!isChannelConnected(subscribedChannels)) {\n      <div style=\"padding: 1rem; background: #e3f2fd; border-radius: 4px;\">\n        <strong>Connect to Channel</strong>\n        <div style=\"display: flex; gap: 1rem; margin-top: 0.5rem; flex-wrap: wrap; align-items: flex-start;\">\n          <!-- Channel Selection (from today's DB data) -->\n          <mat-form-field appearance=\"outline\" style=\"flex: 1; min-width: 200px;\">\n            <mat-label>Select Channel</mat-label>\n            <mat-select [formControl]=\"selectedConnectionChannel\" placeholder=\"Select a notification channel\">\n              @for (channel of (todaysNotificationChannels$ | async) || []; track channel) {\n                <mat-option [value]=\"channel\">{{ channel }}</mat-option>\n              }\n              @empty {\n                <mat-option disabled>No channels with data for today</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n\n          <!-- Date Filter -->\n          <mat-form-field appearance=\"outline\" style=\"flex: 1; min-width: 200px;\" [formGroup]=\"dateFilter\">\n            <mat-label>Start Date</mat-label>\n            <input matInput [matDatepicker]=\"startPicker\" formControlName=\"startDate\">\n            <mat-datepicker-toggle matIconSuffix [for]=\"startPicker\"></mat-datepicker-toggle>\n            <mat-datepicker #startPicker></mat-datepicker>\n          </mat-form-field>\n\n          <mat-form-field appearance=\"outline\" style=\"flex: 1; min-width: 200px;\" [formGroup]=\"dateFilter\">\n            <mat-label>End Date</mat-label>\n            <input matInput [matDatepicker]=\"endPicker\" formControlName=\"endDate\">\n            <mat-datepicker-toggle matIconSuffix [for]=\"endPicker\"></mat-datepicker-toggle>\n            <mat-datepicker #endPicker></mat-datepicker>\n          </mat-form-field>\n        </div>\n\n        <div style=\"display: flex; gap: 0.5rem;\">\n          <span style=\"flex:1\"></span>\n          <button\n            mat-raised-button color=\"primary\"\n            (click)=\"onConnectToChannel()\"\n            [disabled]=\"!selectedConnectionChannel.value\"\n          >\n            Connect\n          </button>\n        </div>\n      </div>\n    }\n  }\n\n  <!-- Send Notification Section -->\n  @if ((subscribedNotificationChannels$ | async); as subscribedChannels) {\n    @if (subscribedChannels.length > 0) {\n      <div\n        style=\"padding: 1rem; background: #fff8e1; border-radius: 4px;\"\n        [formGroup]=\"notificationForm\"\n      >\n        <strong>Send Notification</strong>\n\n        <!-- Notification Content -->\n        <div style=\"display: flex; flex-direction: column; margin-top: 0.5rem;\">\n          <mat-form-field style=\"width: 100%;\" appearance=\"outline\">\n            <mat-label>Notification Message</mat-label>\n            <textarea\n              matInput placeholder=\"Type your notification...\"\n              formControlName=\"content\"\n              rows=\"2\"\n              (keydown.enter)=\"onSendNotification(); $event.preventDefault()\"\n            ></textarea>\n          </mat-form-field>\n          <div style=\"display: flex; justify-content: flex-end; margin-top: -0.5rem;\">\n            <button\n              mat-raised-button color=\"accent\"\n              (click)=\"onSendNotification()\"\n              [disabled]=\"notificationForm.invalid\"\n            >\n              Send Notification\n            </button>\n          </div>\n        </div>\n      </div>\n    }\n  }\n\n  <!-- Notifications Table - Only shown when connected -->\n  @if ((subscribedNotificationChannels$ | async); as subscribedChannels) {\n    @if (isChannelConnected(subscribedChannels)) {\n      @if ((notificationMessages$ | async); as notifications) {\n        <div>\n          <div style=\"display: flex; justify-content: space-between; align-items: center;\">\n            <strong>Notifications ({{ notifications.length }})</strong>\n          </div>\n\n          @if (notifications.length > 0) {\n            <div style=\"margin-top: 0.5rem; height: 400px; overflow: auto; border: 1px solid #888; border-radius: 4px;\">\n              <table mat-table [dataSource]=\"notifications\" style=\"width: 100%;\">\n\n                <!-- Date Column -->\n                <ng-container matColumnDef=\"date\">\n                  <th mat-header-cell *matHeaderCellDef style=\"width: 180px;\">Date</th>\n                  <td mat-cell *matCellDef=\"let notification\">\n                    {{ formatTimestamp(notification.created) | date }}\n                  </td>\n                </ng-container>\n\n                <!-- User Column -->\n                <ng-container matColumnDef=\"user\">\n                  <th mat-header-cell *matHeaderCellDef style=\"width: 150px;\">User</th>\n                  <td mat-cell *matCellDef=\"let notification\">\n                    <strong>{{ notification.user_name }}</strong>\n                  </td>\n                </ng-container>\n\n                <!-- Message Column -->\n                <ng-container matColumnDef=\"message\">\n                  <th mat-header-cell *matHeaderCellDef>Message</th>\n                  <td mat-cell *matCellDef=\"let notification\">\n                  <div class=\"pill\" [style.background-color]=\"notification.content.sessionId.color || '#000000'\">\n                    {{ notification.content?.message || notification.content }}\n                  </div>\n                  </td>\n                </ng-container>\n\n                <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n                <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n              </table>\n            </div>\n          } @else {\n            <div style=\"text-align: center; color: #666; padding: 2rem;\">\n              <mat-icon style=\"font-size: 48px; height: 48px; width: 48px; opacity: 0.5;\">notifications_none</mat-icon>\n              <p>No notifications yet. Waiting for notifications on this channel...</p>\n            </div>\n          }\n        </div>\n\n        <!-- Disconnect Button - Below the table -->\n        <div style=\"display: flex; justify-content: right; padding: 1rem;\">\n          <button mat-raised-button color=\"warn\" (click)=\"onDisconnectFromChannel()\">\n            Disconnect from Channel\n          </button>\n        </div>\n      }\n    }\n  }\n\n</div>\n", styles: [".colored-message{font-weight:500;padding:4px 8px;border-radius:4px;display:inline-block;max-width:100%;word-wrap:break-word}.colored-message.black-text{color:#000!important}.colored-message.white-text{color:#fff!important;text-shadow:0 0 2px rgba(0,0,0,.5)}td.mat-mdc-cell{padding:8px 12px}.pill{border-radius:1rem;padding:.5rem 1rem;color:#fff}\n"], dependencies: [{ kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.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: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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: "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: i9$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i9$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i9$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: WsNotificationsComponent, selector: "app-ws-notifications", inputs: { server: "server", wsServer: "wsServer", jwtToken: "jwtToken", user: "user" }, ngImport: i0, template: "<div style=\"display: flex; gap: 1rem; flex-direction: column; margin-top: 1rem;\">\n\n  <!-- Channel Creation Section -->\n  <div style=\"padding: 1rem; background: #e8f5e9; border-radius: 4px;\">\n    <strong>Create Notification Channel</strong>\n    <div style=\"display: flex; flex-direction: column; margin-top: 0.5rem;\">\n      <mat-form-field appearance=\"outline\" style=\"width: 100%;\">\n        <mat-label>Channel Name</mat-label>\n        <input\n          matInput\n          [formControl]=\"newChannelName\"\n          placeholder=\"Enter notification channel name\"\n          (keydown.enter)=\"onCreateChannel()\"\n        >\n      </mat-form-field>\n      <div style=\"display: flex; justify-content: flex-end; gap: 0.5rem;\">\n        <!-- <button mat-raised-button color=\"accent\" (click)=\"onDefinePreviousChannels()\">\n          Define Previous Channels\n        </button> -->\n        <button mat-raised-button color=\"primary\" (click)=\"onCreateChannel()\"\n                [disabled]=\"newChannelName.invalid\">\n          Create Channel 1\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Channel Connection Section - Only shown when NOT connected -->\n  @if ((subscribedNotificationChannels$ | async); as subscribedChannels) {\n    @if (!isChannelConnected(subscribedChannels)) {\n      <div style=\"padding: 1rem; background: #e3f2fd; border-radius: 4px;\">\n        <strong>Connect to Channel</strong>\n        <div style=\"display: flex; gap: 1rem; margin-top: 0.5rem; flex-wrap: wrap; align-items: flex-start;\">\n          <!-- Channel Selection (from today's DB data) -->\n          <mat-form-field appearance=\"outline\" style=\"flex: 1; min-width: 200px;\">\n            <mat-label>Select Channel</mat-label>\n            <mat-select [formControl]=\"selectedConnectionChannel\" placeholder=\"Select a notification channel\">\n              @for (channel of (todaysNotificationChannels$ | async) || []; track channel) {\n                <mat-option [value]=\"channel\">{{ channel }}</mat-option>\n              }\n              @empty {\n                <mat-option disabled>No channels with data for today</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n\n          <!-- Date Filter -->\n          <mat-form-field appearance=\"outline\" style=\"flex: 1; min-width: 200px;\" [formGroup]=\"dateFilter\">\n            <mat-label>Start Date</mat-label>\n            <input matInput [matDatepicker]=\"startPicker\" formControlName=\"startDate\">\n            <mat-datepicker-toggle matIconSuffix [for]=\"startPicker\"></mat-datepicker-toggle>\n            <mat-datepicker #startPicker></mat-datepicker>\n          </mat-form-field>\n\n          <mat-form-field appearance=\"outline\" style=\"flex: 1; min-width: 200px;\" [formGroup]=\"dateFilter\">\n            <mat-label>End Date</mat-label>\n            <input matInput [matDatepicker]=\"endPicker\" formControlName=\"endDate\">\n            <mat-datepicker-toggle matIconSuffix [for]=\"endPicker\"></mat-datepicker-toggle>\n            <mat-datepicker #endPicker></mat-datepicker>\n          </mat-form-field>\n        </div>\n\n        <div style=\"display: flex; gap: 0.5rem;\">\n          <span style=\"flex:1\"></span>\n          <button\n            mat-raised-button color=\"primary\"\n            (click)=\"onConnectToChannel()\"\n            [disabled]=\"!selectedConnectionChannel.value\"\n          >\n            Connect\n          </button>\n        </div>\n      </div>\n    }\n  }\n\n  <!-- Send Notification Section -->\n  @if ((subscribedNotificationChannels$ | async); as subscribedChannels) {\n    @if (subscribedChannels.length > 0) {\n      <div\n        style=\"padding: 1rem; background: #fff8e1; border-radius: 4px;\"\n        [formGroup]=\"notificationForm\"\n      >\n        <strong>Send Notification</strong>\n\n        <!-- Notification Content -->\n        <div style=\"display: flex; flex-direction: column; margin-top: 0.5rem;\">\n          <mat-form-field style=\"width: 100%;\" appearance=\"outline\">\n            <mat-label>Notification Message</mat-label>\n            <textarea\n              matInput placeholder=\"Type your notification...\"\n              formControlName=\"content\"\n              rows=\"2\"\n              (keydown.enter)=\"onSendNotification(); $event.preventDefault()\"\n            ></textarea>\n          </mat-form-field>\n          <div style=\"display: flex; justify-content: flex-end; margin-top: -0.5rem;\">\n            <button\n              mat-raised-button color=\"accent\"\n              (click)=\"onSendNotification()\"\n              [disabled]=\"notificationForm.invalid\"\n            >\n              Send Notification\n            </button>\n          </div>\n        </div>\n      </div>\n    }\n  }\n\n  <!-- Notifications Table - Only shown when connected -->\n  @if ((subscribedNotificationChannels$ | async); as subscribedChannels) {\n    @if (isChannelConnected(subscribedChannels)) {\n      @if ((notificationMessages$ | async); as notifications) {\n        <div>\n          <div style=\"display: flex; justify-content: space-between; align-items: center;\">\n            <strong>Notifications ({{ notifications.length }})</strong>\n          </div>\n\n          @if (notifications.length > 0) {\n            <div style=\"margin-top: 0.5rem; height: 400px; overflow: auto; border: 1px solid #888; border-radius: 4px;\">\n              <table mat-table [dataSource]=\"notifications\" style=\"width: 100%;\">\n\n                <!-- Date Column -->\n                <ng-container matColumnDef=\"date\">\n                  <th mat-header-cell *matHeaderCellDef style=\"width: 180px;\">Date</th>\n                  <td mat-cell *matCellDef=\"let notification\">\n                    {{ formatTimestamp(notification.created) | date }}\n                  </td>\n                </ng-container>\n\n                <!-- User Column -->\n                <ng-container matColumnDef=\"user\">\n                  <th mat-header-cell *matHeaderCellDef style=\"width: 150px;\">User</th>\n                  <td mat-cell *matCellDef=\"let notification\">\n                    <strong>{{ notification.user_name }}</strong>\n                  </td>\n                </ng-container>\n\n                <!-- Message Column -->\n                <ng-container matColumnDef=\"message\">\n                  <th mat-header-cell *matHeaderCellDef>Message</th>\n                  <td mat-cell *matCellDef=\"let notification\">\n                  <div class=\"pill\" [style.background-color]=\"notification.content.sessionId.color || '#000000'\">\n                    {{ notification.content?.message || notification.content }}\n                  </div>\n                  </td>\n                </ng-container>\n\n                <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n                <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n              </table>\n            </div>\n          } @else {\n            <div style=\"text-align: center; color: #666; padding: 2rem;\">\n              <mat-icon style=\"font-size: 48px; height: 48px; width: 48px; opacity: 0.5;\">notifications_none</mat-icon>\n              <p>No notifications yet. Waiting for notifications on this channel...</p>\n            </div>\n          }\n        </div>\n\n        <!-- Disconnect Button - Below the table -->\n        <div style=\"display: flex; justify-content: right; padding: 1rem;\">\n          <button mat-raised-button color=\"warn\" (click)=\"onDisconnectFromChannel()\">\n            Disconnect from Channel\n          </button>\n        </div>\n      }\n    }\n  }\n\n</div>\n", styles: [".colored-message{font-weight:500;padding:4px 8px;border-radius:4px;display:inline-block;max-width:100%;word-wrap:break-word}.colored-message.black-text{color:#000!important}.colored-message.white-text{color:#fff!important;text-shadow:0 0 2px rgba(0,0,0,.5)}td.mat-mdc-cell{padding:8px 12px}.pill{border-radius:1rem;padding:.5rem 1rem;color:#fff}\n"], dependencies: [{ kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.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: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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: "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: i9$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i9$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i9$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WsNotificationsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-ws-notifications', standalone: false, template: "<div style=\"display: flex; gap: 1rem; flex-direction: column; margin-top: 1rem;\">\n\n  <!-- Channel Creation Section -->\n  <div style=\"padding: 1rem; background: #e8f5e9; border-radius: 4px;\">\n    <strong>Create Notification Channel</strong>\n    <div style=\"display: flex; flex-direction: column; margin-top: 0.5rem;\">\n      <mat-form-field appearance=\"outline\" style=\"width: 100%;\">\n        <mat-label>Channel Name</mat-label>\n        <input\n          matInput\n          [formControl]=\"newChannelName\"\n          placeholder=\"Enter notification channel name\"\n          (keydown.enter)=\"onCreateChannel()\"\n        >\n      </mat-form-field>\n      <div style=\"display: flex; justify-content: flex-end; gap: 0.5rem;\">\n        <button mat-raised-button color=\"accent\" (click)=\"onDefinePreviousChannels()\">\n          Define Previous Channels\n        </button>\n        <button mat-raised-button color=\"primary\" (click)=\"onCreateChannel()\"\n                [disabled]=\"newChannelName.invalid\">\n          Create Channel\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Channel Connection Section - Only shown when NOT connected -->\n  @if ((subscribedNotificationChannels$ | async); as subscribedChannels) {\n    @if (!isChannelConnected(subscribedChannels)) {\n      <div style=\"padding: 1rem; background: #e3f2fd; border-radius: 4px;\">\n        <strong>Connect to Channel</strong>\n        <div style=\"display: flex; gap: 1rem; margin-top: 0.5rem; flex-wrap: wrap; align-items: flex-start;\">\n          <!-- Channel Selection (from today's DB data) -->\n          <mat-form-field appearance=\"outline\" style=\"flex: 1; min-width: 200px;\">\n            <mat-label>Select Channel</mat-label>\n            <mat-select [formControl]=\"selectedConnectionChannel\" placeholder=\"Select a notification channel\">\n              @for (channel of (todaysNotificationChannels$ | async) || []; track channel) {\n                <mat-option [value]=\"channel\">{{ channel }}</mat-option>\n              }\n              @empty {\n                <mat-option disabled>No channels with data for today</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n\n          <!-- Date Filter -->\n          <mat-form-field appearance=\"outline\" style=\"flex: 1; min-width: 200px;\" [formGroup]=\"dateFilter\">\n            <mat-label>Start Date</mat-label>\n            <input matInput [matDatepicker]=\"startPicker\" formControlName=\"startDate\">\n            <mat-datepicker-toggle matIconSuffix [for]=\"startPicker\"></mat-datepicker-toggle>\n            <mat-datepicker #startPicker></mat-datepicker>\n          </mat-form-field>\n\n          <mat-form-field appearance=\"outline\" style=\"flex: 1; min-width: 200px;\" [formGroup]=\"dateFilter\">\n            <mat-label>End Date</mat-label>\n            <input matInput [matDatepicker]=\"endPicker\" formControlName=\"endDate\">\n            <mat-datepicker-toggle matIconSuffix [for]=\"endPicker\"></mat-datepicker-toggle>\n            <mat-datepicker #endPicker></mat-datepicker>\n          </mat-form-field>\n        </div>\n\n        <div style=\"display: flex; gap: 0.5rem;\">\n          <span style=\"flex:1\"></span>\n          <button\n            mat-raised-button color=\"primary\"\n            (click)=\"onConnectToChannel()\"\n            [disabled]=\"!selectedConnectionChannel.value\"\n          >\n            Connect\n          </button>\n        </div>\n      </div>\n    }\n  }\n\n  <!-- Send Notification Section -->\n  @if ((subscribedNotificationChannels$ | async); as subscribedChannels) {\n    @if (subscribedChannels.length > 0) {\n      <div\n        style=\"padding: 1rem; background: #fff8e1; border-radius: 4px;\"\n        [formGroup]=\"notificationForm\"\n      >\n        <strong>Send Notification</strong>\n\n        <!-- Notification Content -->\n        <div style=\"display: flex; flex-direction: column; margin-top: 0.5rem;\">\n          <mat-form-field style=\"width: 100%;\" appearance=\"outline\">\n            <mat-label>Notification Message</mat-label>\n            <textarea\n              matInput placeholder=\"Type your notification...\"\n              formControlName=\"content\"\n              rows=\"2\"\n              (keydown.enter)=\"onSendNotification(); $event.preventDefault()\"\n            ></textarea>\n          </mat-form-field>\n          <div style=\"display: flex; justify-content: flex-end; margin-top: -0.5rem;\">\n            <button\n              mat-raised-button color=\"accent\"\n              (click)=\"onSendNotification()\"\n              [disabled]=\"notificationForm.invalid\"\n            >\n              Send Notification\n            </button>\n          </div>\n        </div>\n      </div>\n    }\n  }\n\n  <!-- Notifications Table - Only shown when connected -->\n  @if ((subscribedNotificationChannels$ | async); as subscribedChannels) {\n    @if (isChannelConnected(subscribedChannels)) {\n      @if ((notificationMessages$ | async); as notifications) {\n        <div>\n          <div style=\"display: flex; justify-content: space-between; align-items: center;\">\n            <strong>Notifications ({{ notifications.length }})</strong>\n          </div>\n\n          @if (notifications.length > 0) {\n            <div style=\"margin-top: 0.5rem; height: 400px; overflow: auto; border: 1px solid #888; border-radius: 4px;\">\n              <table mat-table [dataSource]=\"notifications\" style=\"width: 100%;\">\n\n                <!-- Date Column -->\n                <ng-container matColumnDef=\"date\">\n                  <th mat-header-cell *matHeaderCellDef style=\"width: 180px;\">Date</th>\n                  <td mat-cell *matCellDef=\"let notification\">\n                    {{ formatTimestamp(notification.created) | date }}\n                  </td>\n                </ng-container>\n\n                <!-- User Column -->\n                <ng-container matColumnDef=\"user\">\n                  <th mat-header-cell *matHeaderCellDef style=\"width: 150px;\">User</th>\n                  <td mat-cell *matCellDef=\"let notification\">\n                    <strong>{{ notification.user_name }}</strong>\n                  </td>\n                </ng-container>\n\n                <!-- Message Column -->\n                <ng-container matColumnDef=\"message\">\n                  <th mat-header-cell *matHeaderCellDef>Message</th>\n                  <td mat-cell *matCellDef=\"let notification\">\n                  <div class=\"pill\" [style.background-color]=\"notification.content.sessionId.color || '#000000'\">\n                    {{ notification.content?.message || notification.content }}\n                  </div>\n                  </td>\n                </ng-container>\n\n                <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n                <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n              </table>\n            </div>\n          } @else {\n            <div style=\"text-align: center; color: #666; padding: 2rem;\">\n              <mat-icon style=\"font-size: 48px; height: 48px; width: 48px; opacity: 0.5;\">notifications_none</mat-icon>\n              <p>No notifications yet. Waiting for notifications on this channel...</p>\n            </div>\n          }\n        </div>\n\n        <!-- Disconnect Button - Below the table -->\n        <div style=\"display: flex; justify-content: right; padding: 1rem;\">\n          <button mat-raised-button color=\"warn\" (click)=\"onDisconnectFromChannel()\">\n            Disconnect from Channel\n          </button>\n        </div>\n      }\n    }\n  }\n\n</div>\n", styles: [".colored-message{font-weight:500;padding:4px 8px;border-radius:4px;display:inline-block;max-width:100%;word-wrap:break-word}.colored-message.black-text{color:#000!important}.colored-message.white-text{color:#fff!important;text-shadow:0 0 2px rgba(0,0,0,.5)}td.mat-mdc-cell{padding:8px 12px}.pill{border-radius:1rem;padding:.5rem 1rem;color:#fff}\n"] }]
+            args: [{ selector: 'app-ws-notifications', standalone: false, template: "<div style=\"display: flex; gap: 1rem; flex-direction: column; margin-top: 1rem;\">\n\n  <!-- Channel Creation Section -->\n  <div style=\"padding: 1rem; background: #e8f5e9; border-radius: 4px;\">\n    <strong>Create Notification Channel</strong>\n    <div style=\"display: flex; flex-direction: column; margin-top: 0.5rem;\">\n      <mat-form-field appearance=\"outline\" style=\"width: 100%;\">\n        <mat-label>Channel Name</mat-label>\n        <input\n          matInput\n          [formControl]=\"newChannelName\"\n          placeholder=\"Enter notification channel name\"\n          (keydown.enter)=\"onCreateChannel()\"\n        >\n      </mat-form-field>\n      <div style=\"display: flex; justify-content: flex-end; gap: 0.5rem;\">\n        <!-- <button mat-raised-button color=\"accent\" (click)=\"onDefinePreviousChannels()\">\n          Define Previous Channels\n        </button> -->\n        <button mat-raised-button color=\"primary\" (click)=\"onCreateChannel()\"\n                [disabled]=\"newChannelName.invalid\">\n          Create Channel 1\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Channel Connection Section - Only shown when NOT connected -->\n  @if ((subscribedNotificationChannels$ | async); as subscribedChannels) {\n    @if (!isChannelConnected(subscribedChannels)) {\n      <div style=\"padding: 1rem; background: #e3f2fd; border-radius: 4px;\">\n        <strong>Connect to Channel</strong>\n        <div style=\"display: flex; gap: 1rem; margin-top: 0.5rem; flex-wrap: wrap; align-items: flex-start;\">\n          <!-- Channel Selection (from today's DB data) -->\n          <mat-form-field appearance=\"outline\" style=\"flex: 1; min-width: 200px;\">\n            <mat-label>Select Channel</mat-label>\n            <mat-select [formControl]=\"selectedConnectionChannel\" placeholder=\"Select a notification channel\">\n              @for (channel of (todaysNotificationChannels$ | async) || []; track channel) {\n                <mat-option [value]=\"channel\">{{ channel }}</mat-option>\n              }\n              @empty {\n                <mat-option disabled>No channels with data for today</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n\n          <!-- Date Filter -->\n          <mat-form-field appearance=\"outline\" style=\"flex: 1; min-width: 200px;\" [formGroup]=\"dateFilter\">\n            <mat-label>Start Date</mat-label>\n            <input matInput [matDatepicker]=\"startPicker\" formControlName=\"startDate\">\n            <mat-datepicker-toggle matIconSuffix [for]=\"startPicker\"></mat-datepicker-toggle>\n            <mat-datepicker #startPicker></mat-datepicker>\n          </mat-form-field>\n\n          <mat-form-field appearance=\"outline\" style=\"flex: 1; min-width: 200px;\" [formGroup]=\"dateFilter\">\n            <mat-label>End Date</mat-label>\n            <input matInput [matDatepicker]=\"endPicker\" formControlName=\"endDate\">\n            <mat-datepicker-toggle matIconSuffix [for]=\"endPicker\"></mat-datepicker-toggle>\n            <mat-datepicker #endPicker></mat-datepicker>\n          </mat-form-field>\n        </div>\n\n        <div style=\"display: flex; gap: 0.5rem;\">\n          <span style=\"flex:1\"></span>\n          <button\n            mat-raised-button color=\"primary\"\n            (click)=\"onConnectToChannel()\"\n            [disabled]=\"!selectedConnectionChannel.value\"\n          >\n            Connect\n          </button>\n        </div>\n      </div>\n    }\n  }\n\n  <!-- Send Notification Section -->\n  @if ((subscribedNotificationChannels$ | async); as subscribedChannels) {\n    @if (subscribedChannels.length > 0) {\n      <div\n        style=\"padding: 1rem; background: #fff8e1; border-radius: 4px;\"\n        [formGroup]=\"notificationForm\"\n      >\n        <strong>Send Notification</strong>\n\n        <!-- Notification Content -->\n        <div style=\"display: flex; flex-direction: column; margin-top: 0.5rem;\">\n          <mat-form-field style=\"width: 100%;\" appearance=\"outline\">\n            <mat-label>Notification Message</mat-label>\n            <textarea\n              matInput placeholder=\"Type your notification...\"\n              formControlName=\"content\"\n              rows=\"2\"\n              (keydown.enter)=\"onSendNotification(); $event.preventDefault()\"\n            ></textarea>\n          </mat-form-field>\n          <div style=\"display: flex; justify-content: flex-end; margin-top: -0.5rem;\">\n            <button\n              mat-raised-button color=\"accent\"\n              (click)=\"onSendNotification()\"\n              [disabled]=\"notificationForm.invalid\"\n            >\n              Send Notification\n            </button>\n          </div>\n        </div>\n      </div>\n    }\n  }\n\n  <!-- Notifications Table - Only shown when connected -->\n  @if ((subscribedNotificationChannels$ | async); as subscribedChannels) {\n    @if (isChannelConnected(subscribedChannels)) {\n      @if ((notificationMessages$ | async); as notifications) {\n        <div>\n          <div style=\"display: flex; justify-content: space-between; align-items: center;\">\n            <strong>Notifications ({{ notifications.length }})</strong>\n          </div>\n\n          @if (notifications.length > 0) {\n            <div style=\"margin-top: 0.5rem; height: 400px; overflow: auto; border: 1px solid #888; border-radius: 4px;\">\n              <table mat-table [dataSource]=\"notifications\" style=\"width: 100%;\">\n\n                <!-- Date Column -->\n                <ng-container matColumnDef=\"date\">\n                  <th mat-header-cell *matHeaderCellDef style=\"width: 180px;\">Date</th>\n                  <td mat-cell *matCellDef=\"let notification\">\n                    {{ formatTimestamp(notification.created) | date }}\n                  </td>\n                </ng-container>\n\n                <!-- User Column -->\n                <ng-container matColumnDef=\"user\">\n                  <th mat-header-cell *matHeaderCellDef style=\"width: 150px;\">User</th>\n                  <td mat-cell *matCellDef=\"let notification\">\n                    <strong>{{ notification.user_name }}</strong>\n                  </td>\n                </ng-container>\n\n                <!-- Message Column -->\n                <ng-container matColumnDef=\"message\">\n                  <th mat-header-cell *matHeaderCellDef>Message</th>\n                  <td mat-cell *matCellDef=\"let notification\">\n                  <div class=\"pill\" [style.background-color]=\"notification.content.sessionId.color || '#000000'\">\n                    {{ notification.content?.message || notification.content }}\n                  </div>\n                  </td>\n                </ng-container>\n\n                <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n                <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n              </table>\n            </div>\n          } @else {\n            <div style=\"text-align: center; color: #666; padding: 2rem;\">\n              <mat-icon style=\"font-size: 48px; height: 48px; width: 48px; opacity: 0.5;\">notifications_none</mat-icon>\n              <p>No notifications yet. Waiting for notifications on this channel...</p>\n            </div>\n          }\n        </div>\n\n        <!-- Disconnect Button - Below the table -->\n        <div style=\"display: flex; justify-content: right; padding: 1rem;\">\n          <button mat-raised-button color=\"warn\" (click)=\"onDisconnectFromChannel()\">\n            Disconnect from Channel\n          </button>\n        </div>\n      }\n    }\n  }\n\n</div>\n", styles: [".colored-message{font-weight:500;padding:4px 8px;border-radius:4px;display:inline-block;max-width:100%;word-wrap:break-word}.colored-message.black-text{color:#000!important}.colored-message.white-text{color:#fff!important;text-shadow:0 0 2px rgba(0,0,0,.5)}td.mat-mdc-cell{padding:8px 12px}.pill{border-radius:1rem;padding:.5rem 1rem;color:#fff}\n"] }]
         }], propDecorators: { server: [{
                 type: Input
             }], wsServer: [{
@@ -8399,8 +9306,9 @@ class HttpRequestServicesDemoComponent {
             { name: "Local Storage Service", value: 'local_storage_service' },
             // { name: "Local Signals Storage Service", value: 'local_storage_signals_service', new: true },
             { name: "Store State Manager Service", value: 'store_state_manager', new: true },
+            { name: "Basic Http Service", value: 'basic_http_service', divider: true },
         ];
-        this.selectedService = this.requestTypes[5].value; //menu selection default
+        this.selectedService = this.requestTypes[1].value; //menu selection default
     }
     ngOnInit() {
         if (this.configOptions)
@@ -8410,11 +9318,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", 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: i3.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: 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" }] }); }
+    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 ('basic_http_service') {\n      <p>\n        <app-request-manager-basic-demo></app-request-manager-basic-demo>\n      </p>\n    }\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: i3.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: i3$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: RequestManagerBasicDemoComponent, selector: "app-request-manager-basic-demo" }, { 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        [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"] }]
+            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 ('basic_http_service') {\n      <p>\n        <app-request-manager-basic-demo></app-request-manager-basic-demo>\n      </p>\n    }\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]
@@ -8675,7 +9583,7 @@ class RequestSignalsManagerDemoComponent {
         this.questionControl = this.fb.control("", [Validators.required]);
         this.downloadRequest = ApiRequest.adapt({
             server: 'assets/images',
-            path: ['me.jpg'],
+            path: ['lego.png'],
             // saveAs: 'john.jpg' // Optional
         });
         // downloadRequest = ApiRequest.adapt({
@@ -8960,7 +9868,8 @@ class HttpRequestManagerModule {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HttpRequestManagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: HttpRequestManagerModule, declarations: [HttpRequestServicesDemoComponent,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: HttpRequestManagerModule, declarations: [RequestManagerBasicDemoComponent,
+            HttpRequestServicesDemoComponent,
             RequestManagerStateDemoComponent,
             RequestManagerDemoComponent,
             RequestSignalsManagerDemoComponent,
@@ -9002,7 +9911,9 @@ class HttpRequestManagerModule {
             { provide: HTTP_INTERCEPTORS, useClass: ProxyDebuggerInterceptor, multi: true },
             { provide: CONFIG_SETTINGS_TOKEN, useValue: ConfigOptions.adapt() },
             HTTPManagerService, LocalStorageManagerService,
-            ToastMessageDisplayService
+            ToastMessageDisplayService,
+            MessageDisplayRouterService,
+            SnackbarStrategy
         ], imports: [CommonModule,
             ToastMessageDisplayModule,
             FormsModule,
@@ -9062,6 +9973,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         // StoreStateManagerModule
                     ],
                     declarations: [
+                        RequestManagerBasicDemoComponent,
                         HttpRequestServicesDemoComponent,
                         RequestManagerStateDemoComponent,
                         RequestManagerDemoComponent,
@@ -9086,7 +9998,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         { provide: HTTP_INTERCEPTORS, useClass: ProxyDebuggerInterceptor, multi: true },
                         { provide: CONFIG_SETTINGS_TOKEN, useValue: ConfigOptions.adapt() },
                         HTTPManagerService, LocalStorageManagerService,
-                        ToastMessageDisplayService
+                        ToastMessageDisplayService,
+                        MessageDisplayRouterService,
+                        SnackbarStrategy
                     ],
                 }]
         }] });
@@ -9099,5 +10013,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, ChannelType, CommunicationType, ConfigHTTPOptions, ConfigOptions, DataType, DatabaseDataDemoComponent, DatabaseManagerService, DatabaseStorage, DbService, ErrorDisplaySettings, GlobalStoreOptions, HTTPManagerService, HTTPManagerSignalsService, HTTPManagerStateService, HeadersService, HttpRequestManagerModule, HttpRequestServicesDemoComponent, LocalStorageDemoComponent, LocalStorageManagerService, LocalStorageOptions, LocalStorageSignalsManagerService, PathQueryService, Random, RandomHSLColor, RandomHexColor, RandomNumber, RandomNumbers, RandomNumbersUnique, RandomPaletteColor, RandomSignature, RandomStr, RandomVisibleColor, RequestErrorInterceptor, RequestHeadersInterceptor, RequestManagerDemoComponent, RequestManagerStateDemoComponent, RequestOptions, RequestService, RequestSignalsService, RetryOptions, SettingOptions, StateStorageOptions, StorageData, StorageOption, StorageType, StoreStateManagerService, StreamType, SymmetricalEncryptionService, TableSchemaDef, UUID, UUID_STR, UserData, UtilsService, WSOptions, WSUser, WebSocketManagerService, WebsocketService, WithCredentialsInterceptor, countdown, createChannelName, delayedRetry, requestPolling, requestStreaming, streamAI, streamAuto, streamEvents, streamJSON, streamNDJSON };
+export { ApiRequest, AppService, AsymmetricalEncryptionService, CONFIG_SETTINGS_TOKEN, ChannelType, ConfigHTTPOptions, ConfigOptions, DataType, DatabaseDataDemoComponent, DatabaseManagerService, DatabaseStorage, DbService, ErrorDisplaySettings, GlobalStoreOptions, HTTPManagerService, HTTPManagerSignalsService, HTTPManagerStateService, HeadersService, HttpRequestManagerModule, HttpRequestServicesDemoComponent, LocalStorageDemoComponent, LocalStorageManagerService, LocalStorageOptions, LocalStorageSignalsManagerService, LoggerService, NotificationMessage, PathQueryService, PublicMessage, Random, RandomHSLColor, RandomHexColor, RandomNumber, RandomNumbers, RandomNumbersUnique, RandomPaletteColor, RandomSignature, RandomStr, RandomVisibleColor, RequestErrorInterceptor, RequestHeadersInterceptor, RequestManagerDemoComponent, RequestManagerStateDemoComponent, RequestOptions, RequestService, RequestSignalsService, RetryOptions, SettingOptions, StateMessage, StateStorageOptions, StorageData, StorageOption, StorageType, StoreStateManagerService, StreamType, SymmetricalEncryptionService, TableSchemaDef, UUID, UUID_STR, UserData, UtilsService, WSOptions, WebSocketMessageService, WithCredentialsInterceptor, countdown, createChannelName, delayedRetry, requestPolling, requestStreaming, streamAI, streamAuto, streamEvents, streamJSON, streamNDJSON };
 //# sourceMappingURL=http-request-manager.mjs.map