http-request-manager 18.7.31 → 18.9.1

package/fesm2022/http-request-manager.mjs

@@ -4,7 +4,7 @@ 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';
 import * as CryptoJS from 'crypto-js';
-import { from, BehaviorSubject, EMPTY, throwError, defer, interval, timer, Subject, merge, of, Subscription, take as take$1, catchError as catchError$1, map as map$1, tap as tap$1, switchMap as switchMap$1, startWith as startWith$1, distinctUntilChanged as distinctUntilChanged$1, combineLatest, filter as filter$1, takeUntil as takeUntil$1, ReplaySubject } from 'rxjs';
+import { from, BehaviorSubject, EMPTY, throwError, defer, interval, timer, Subject, of, merge, Subscription, take as take$1, catchError as catchError$1, map as map$1, tap as tap$1, switchMap as switchMap$1, startWith as startWith$1, distinctUntilChanged as distinctUntilChanged$1, combineLatest, filter as filter$1, takeUntil as takeUntil$1, ReplaySubject } from 'rxjs';
 import { ToastMessageDisplayService, ToastDisplay, ToastColors, ToastMessageDisplayModule } from 'toast-message-display';
 import Dexie from 'dexie';
 import * as i1 from '@ngx-translate/core';
@@ -383,17 +383,25 @@ class SymmetricalEncryptionService {
         let _key = CryptoJS.enc.Utf8.parse(key);
         let _iv = CryptoJS.enc.Utf8.parse(key);
         try {
-            return CryptoJS.AES.decrypt(str, _key, {
+            const decrypted = CryptoJS.AES.decrypt(str, _key, {
                 keySize: 16,
                 iv: _iv,
                 mode: CryptoJS.mode.ECB,
                 padding: CryptoJS.pad.Pkcs7
-            }).toString(CryptoJS.enc.Utf8);
+            });
+            // Check if the decrypted data is valid before converting to UTF-8
+            const decryptedStr = decrypted.toString(CryptoJS.enc.Utf8);
+            if (!decryptedStr) {
+                console.warn('Decryption resulted in empty string');
+                return null;
+            }
+            return decryptedStr;
         }
         catch (error) {
-            console.log(error);
+            console.error('Decryption failed:', error.message);
+            return null;
         }
-        return;
+        return null;
     }
     createSignature(url, len = 16) {
         const sig = CryptoJS.SHA256(url).toString(CryptoJS.enc.Hex);
@@ -1261,19 +1269,30 @@ class WebsocketService {
             this.lastOptions = options;
             // Subscribe to primary channel
             this.sendSubscribe(options.id, options.user);
-            // Auto-subscribe to additional channels from options.channels[]
+            // Build unified set of all channels to subscribe to (with deduplication)
+            const allChannels = new Set();
+            // Add channels from options.channels[]
             if (options.channels && options.channels.length > 0) {
-                options.channels.forEach(channel => {
-                    if (channel !== options.id) {
-                        this.subscribeToChannel(channel);
-                    }
+                options.channels.forEach(channel => allChannels.add(channel));
+            }
+            // Add channels from options.wsUpdateChannels[] with MES- prefix
+            if (options.wsUpdateChannels && options.wsUpdateChannels.length > 0) {
+                options.wsUpdateChannels.forEach(ch => {
+                    const prefixed = ch.startsWith('MES-') ? ch : `MES-${ch}`;
+                    allChannels.add(prefixed);
                 });
             }
-            // Re-subscribe to any previously subscribed channels (reconnection scenario)
+            // Subscribe to all channels (excluding primary channel)
+            allChannels.forEach(channel => {
+                if (channel !== options.id) {
+                    this.subscribeToChannel(channel);
+                }
+            });
+            // Re-subscribe to any previously subscribed channels not in current options
             const previousChannels = this.subscribedChannels.value;
             if (previousChannels.size > 0) {
                 previousChannels.forEach(channel => {
-                    if (channel !== options.id && (!options.channels || !options.channels.includes(channel))) {
+                    if (!allChannels.has(channel) && channel !== options.id) {
                         this.subscribeToChannel(channel);
                     }
                 });
@@ -1313,20 +1332,25 @@ class WebsocketService {
     }
     subscribeToChannel(channelName) {
         if (this.socket?.readyState === WebSocket.OPEN) {
-            const message = {
-                type: 'subscribe',
-                subscribedChannel: channelName,
-                content: {}
-            };
-            this.socket.send(JSON.stringify(message));
-            // Track locally - create new Set to trigger change detection
-            const current = new Set(this.subscribedChannels.value);
-            current.add(channelName);
-            this.subscribedChannels.next(current);
-            console.log(`📝 Subscribed to channel: ${channelName}`);
+            try {
+                const message = {
+                    type: 'subscribe',
+                    subscribedChannel: channelName,
+                    content: {}
+                };
+                this.socket.send(JSON.stringify(message));
+                // Track locally - create new Set to trigger change detection
+                const current = new Set(this.subscribedChannels.value);
+                current.add(channelName);
+                this.subscribedChannels.next(current);
+                console.log(`📝 Subscribed to channel: ${channelName}`);
+            }
+            catch (error) {
+                console.error(`❌ Failed to subscribe to channel "${channelName}":`, error);
+            }
         }
         else {
-            console.warn('Cannot subscribe: WebSocket not yet open.');
+            console.warn(`Cannot subscribe to channel "${channelName}": WebSocket not yet open.`);
         }
     }
     subscribeToChannels(channelNames) {
@@ -1388,6 +1412,38 @@ class WebsocketService {
             console.error('WebSocket is not open. Cannot send channel message.');
         }
     }
+    /**
+     * Send a message to multiple channels at once (batch)
+     * Sends the new batch format and falls back to legacy per-channel messages for compatibility
+     */
+    sendChannelMessageToChannels(channels, content) {
+        if (this.socket?.readyState === WebSocket.OPEN) {
+            try {
+                // New batch format
+                this.socket.send(JSON.stringify({
+                    type: 'channelMessage',
+                    channels: channels,
+                    data: content
+                }));
+                console.log(`💬 Send channel message to channels [${channels.join(', ')}]:`, content);
+            }
+            catch (error) {
+                console.error('❌ Failed to send channelMessage batch:', error);
+            }
+            // Legacy fallback - send individual messages to each channel
+            try {
+                channels.forEach(channel => {
+                    this.socket?.send(JSON.stringify({ type: 'message', subscribedChannel: channel, content }));
+                });
+            }
+            catch (err) {
+                console.warn('⚠️ Legacy fallback failed sending individual messages', err);
+            }
+        }
+        else {
+            console.error('WebSocket is not open. Cannot send message to channels.');
+        }
+    }
     sendMessageToUser(user, content) {
         if (this.socket?.readyState === WebSocket.OPEN) {
             this.socket.send(JSON.stringify({ type: 'userMessage', subscribedChannel: user, content }));
@@ -1533,6 +1589,586 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 }]
         }] });
 
+/**
+ * WebSocketManagerService - Singleton WebSocket connection manager
+ *
+ * This service ensures only ONE WebSocket connection exists across ALL instances
+ * of HTTPManagerStateService. It uses static properties to track connection state
+ * globally, preventing duplicate connections when multiple state services are created.
+ *
+ * Usage:
+ * - Inject into HTTPManagerService (or directly into state services)
+ * - Call connect() with WSOptions - only the first call establishes connection
+ * - Subsequent calls detect existing connection and skip reconnection
+ * - All instances share the same connectionStatus$ and messages$ observables
+ */
+class WebSocketManagerService {
+    constructor() {
+        this.messages$ = WebSocketManagerService.messages.asObservable();
+        this.connectionStatus$ = WebSocketManagerService.connectionStatus.asObservable();
+        this.subscribedChannels$ = WebSocketManagerService.subscribedChannels.asObservable();
+        this.onReconnect$ = WebSocketManagerService.onReconnect.asObservable();
+    }
+    // ═══════════════════════════════════════════════════════════════════════════
+    // STATIC SINGLETON STATE (Shared across ALL instances)
+    // ═══════════════════════════════════════════════════════════════════════════
+    static { this.socket = null; }
+    static { this.isConnecting = false; }
+    static { this.connectionInitialized = false; }
+    // Store last options for reconnection
+    static { this.lastOptions = null; }
+    // ═══════════════════════════════════════════════════════════════════════════
+    // INSTANCE OBSERVABLES (Shared across ALL instances via static BehaviorSubjects)
+    // ═══════════════════════════════════════════════════════════════════════════
+    static { this.messages = new BehaviorSubject(null); }
+    static { this.connectionStatus = new BehaviorSubject(false); }
+    static { this.isSubscribed = false; }
+    // Track currently subscribed channels
+    static { this.subscribedChannels = new BehaviorSubject(new Set()); }
+    // Public method to get current subscribed channels
+    static getSubscribedChannels() {
+        return WebSocketManagerService.subscribedChannels.getValue();
+    }
+    // Public method to add a channel to subscribed channels
+    static addSubscribedChannel(channelName) {
+        const current = new Set(WebSocketManagerService.subscribedChannels.value);
+        current.add(channelName);
+        WebSocketManagerService.subscribedChannels.next(current);
+        console.log(`📝 Added ${channelName} to subscribedChannels (now has ${current.size} channels)`);
+    }
+    // Reconnect event (emitted when connection is established/re-established)
+    static { this.onReconnect = new BehaviorSubject(undefined); }
+    // ═══════════════════════════════════════════════════════════════════════════
+    // SESSION MANAGEMENT
+    // ═══════════════════════════════════════════════════════════════════════════
+    getSessionId() {
+        return sessionStorage.getItem('WSID') ?? (() => {
+            const uuid = UUID_STR();
+            sessionStorage.setItem('WSID', uuid);
+            return uuid;
+        })();
+    }
+    // ═══════════════════════════════════════════════════════════════════════════
+    // CONNECTION MANAGEMENT
+    // ═══════════════════════════════════════════════════════════════════════════
+    /**
+     * Connect to WebSocket server
+     *
+     * IMPORTANT: Only the first call across ALL instances will establish a connection.
+     * Subsequent calls will detect the existing connection and return immediately.
+     *
+     * @param options - WebSocket configuration options
+     * @param jwtToken - Optional JWT token for authentication
+     */
+    connect(options, jwtToken) {
+        // Check if connection already exists and is open
+        if (WebSocketManagerService.socket) {
+            if (WebSocketManagerService.socket.readyState === WebSocket.OPEN) {
+                console.log('✓ WebSocket connection already OPEN (singleton).');
+                return;
+            }
+            if (WebSocketManagerService.socket.readyState === WebSocket.CONNECTING) {
+                console.log('⏳ WebSocket is already CONNECTING (singleton). Waiting for handshake.');
+                return;
+            }
+            // Clean up stale connection
+            if (WebSocketManagerService.socket.readyState === WebSocket.CLOSING ||
+                WebSocketManagerService.socket.readyState === WebSocket.CLOSED) {
+                console.log(`🧹 Cleaning up stale socket (State: ${WebSocketManagerService.socket.readyState}).`);
+                WebSocketManagerService.socket.close();
+                WebSocketManagerService.socket = null;
+            }
+        }
+        // Prevent duplicate connection attempts
+        if (WebSocketManagerService.isConnecting) {
+            console.log('⏳ Connection already in progress...');
+            return;
+        }
+        // Mark as connecting
+        WebSocketManagerService.isConnecting = true;
+        WebSocketManagerService.isSubscribed = false;
+        WebSocketManagerService.subscribedChannels.next(new Set());
+        const sessionId = this.getSessionId();
+        const URL = (jwtToken) ? `${options.wsServer}?token=${jwtToken}&sessionId=${sessionId}` : `${options.wsServer}?sessionId=${sessionId}`;
+        console.log(`🔌 Initiating WebSocket connection to: ${options.wsServer}`);
+        // Create new WebSocket instance (static)
+        WebSocketManagerService.socket = new WebSocket(URL);
+        WebSocketManagerService.socket.onopen = () => {
+            console.log(`📡 Connected to WebSocket`);
+            // Force clear subscribedChannels on new connection - server lost our subscriptions
+            console.log('🧹 Clearing subscribedChannels on connect (was:', WebSocketManagerService.subscribedChannels.value.size, 'channels)');
+            WebSocketManagerService.subscribedChannels.next(new Set());
+            WebSocketManagerService.connectionStatus.next(true);
+            WebSocketManagerService.isConnecting = false;
+            WebSocketManagerService.connectionInitialized = true;
+            WebSocketManagerService.lastOptions = options;
+            // Emit reconnect event - MessageTrackerService will handle subscriptions with lastSeenId
+            console.log(`🔄 Emitting reconnect event for MessageTrackerService`);
+            WebSocketManagerService.onReconnect.next();
+        };
+        WebSocketManagerService.socket.onmessage = (event) => {
+            try {
+                const data = JSON.parse(event.data);
+                if (data.error && data.error === 'JWT_INVALID') {
+                    console.error('JWT validation failed. Authentication error!');
+                    WebSocketManagerService.messages.next(data);
+                    WebSocketManagerService.connectionStatus.next(false);
+                    WebSocketManagerService.socket?.close();
+                    return;
+                }
+                WebSocketManagerService.messages.next(data);
+            }
+            catch (error) {
+                console.error('Error parsing WebSocket message:', event.data);
+            }
+        };
+        WebSocketManagerService.socket.onclose = () => {
+            console.log('🔴 WebSocket connection closed');
+            console.log('🧹 Clearing subscribedChannels (was:', WebSocketManagerService.subscribedChannels.value.size, 'channels)');
+            WebSocketManagerService.connectionStatus.next(false);
+            WebSocketManagerService.isConnecting = false;
+            WebSocketManagerService.socket = null;
+            // Clear subscribed channels - server lost our subscriptions
+            WebSocketManagerService.subscribedChannels.next(new Set());
+            console.log('✅ subscribedChannels cleared');
+        };
+        WebSocketManagerService.socket.onerror = (error) => {
+            console.error('❌ WebSocket error:', error);
+            WebSocketManagerService.connectionStatus.next(false);
+            WebSocketManagerService.isConnecting = false;
+        };
+    }
+    /**
+     * Disconnect from WebSocket server
+     */
+    disconnect() {
+        if (WebSocketManagerService.socket) {
+            console.log('🔌 Disconnecting WebSocket...');
+            WebSocketManagerService.socket.close();
+            WebSocketManagerService.socket = null;
+            WebSocketManagerService.connectionStatus.next(false);
+            WebSocketManagerService.subscribedChannels.next(new Set());
+        }
+    }
+    // ═══════════════════════════════════════════════════════════════════════════
+    // SUBSCRIPTION MANAGEMENT
+    // ═══════════════════════════════════════════════════════════════════════════
+    sendSubscribe(channelName, user) {
+        const alreadySubscribed = WebSocketManagerService.subscribedChannels.value.has(channelName);
+        if (WebSocketManagerService.socket?.readyState === WebSocket.OPEN && !alreadySubscribed) {
+            const message = {
+                type: 'subscribe',
+                subscribedChannel: channelName,
+                content: {
+                    id: this.getSessionId(),
+                    ...user
+                }
+            };
+            WebSocketManagerService.socket.send(JSON.stringify(message));
+            // Track this channel as subscribed
+            const current = new Set(WebSocketManagerService.subscribedChannels.value);
+            current.add(channelName);
+            WebSocketManagerService.subscribedChannels.next(current);
+            WebSocketManagerService.isSubscribed = true;
+            console.log(`[CLIENT] Sent initial subscription to: ${channelName}`);
+        }
+        else {
+            console.warn(`[CLIENT] Subscription prevented. Open: ${WebSocketManagerService.socket?.readyState === WebSocket.OPEN}, Already subscribed to ${channelName}: ${alreadySubscribed}`);
+        }
+    }
+    /**
+     * Send subscribe with lastSeenId for message sync support
+     * @param channelName - Channel name to subscribe to
+     * @param user - User data
+     * @param lastSeenId - Last message ID seen (for replay)
+     */
+    sendSubscribeWithLastSeen(channelName, user, lastSeenId) {
+        const alreadySubscribed = WebSocketManagerService.subscribedChannels.value.has(channelName);
+        const isOpen = WebSocketManagerService.socket?.readyState === WebSocket.OPEN;
+        console.log(`🔍 Subscription check for "${channelName}": isOpen=${isOpen}, alreadySubscribed=${alreadySubscribed}`);
+        if (isOpen && !alreadySubscribed && WebSocketManagerService.socket) {
+            const message = {
+                type: 'subscribe',
+                subscribedChannel: channelName,
+                lastSeenId, // NEW: For message replay
+                content: {
+                    id: this.getSessionId(),
+                    ...user
+                }
+            };
+            WebSocketManagerService.socket.send(JSON.stringify(message));
+            // DON'T track as subscribed yet - wait for server confirmation ('subscribed' message)
+            // This prevents race conditions where we think we're subscribed but server doesn't
+            WebSocketManagerService.isSubscribed = true;
+            console.log(`[CLIENT] Sent subscription with lastSeenId=${lastSeenId} to: ${channelName}`);
+        }
+        else {
+            console.warn(`[CLIENT] Subscription prevented. Open: ${isOpen}, Already subscribed to ${channelName}: ${alreadySubscribed}`);
+        }
+    }
+    /**
+     * Subscribe to a channel
+     * @param channelName - Channel name to subscribe to
+     */
+    subscribeToChannel(channelName) {
+        if (WebSocketManagerService.socket?.readyState === WebSocket.OPEN) {
+            try {
+                const message = {
+                    type: 'subscribe',
+                    subscribedChannel: channelName,
+                    content: {}
+                };
+                WebSocketManagerService.socket.send(JSON.stringify(message));
+                // Track locally - create new Set to trigger change detection
+                const current = new Set(WebSocketManagerService.subscribedChannels.value);
+                current.add(channelName);
+                WebSocketManagerService.subscribedChannels.next(current);
+                console.log(`📝 Subscribed to channel: ${channelName}`);
+            }
+            catch (error) {
+                console.error(`❌ Failed to subscribe to channel "${channelName}":`, error);
+            }
+        }
+        else {
+            console.warn(`Cannot subscribe to channel "${channelName}": WebSocket not yet open.`);
+        }
+    }
+    /**
+     * Subscribe to multiple channels
+     * @param channelNames - Array of channel names to subscribe to
+     */
+    subscribeToChannels(channelNames) {
+        if (WebSocketManagerService.socket?.readyState === WebSocket.OPEN) {
+            channelNames.forEach(channel => this.subscribeToChannel(channel));
+        }
+        else {
+            console.warn('Cannot subscribe: WebSocket not yet open.');
+        }
+    }
+    /**
+     * Unsubscribe from a channel
+     * @param channel - Channel name to unsubscribe from
+     */
+    unsubscribeFromChannel(channel) {
+        if (WebSocketManagerService.socket?.readyState === WebSocket.OPEN) {
+            WebSocketManagerService.socket.send(JSON.stringify({ type: 'unsubscribe', subscribedChannel: channel }));
+            // Remove from local tracking - create new Set to trigger change detection
+            const current = new Set(WebSocketManagerService.subscribedChannels.value);
+            current.delete(channel);
+            WebSocketManagerService.subscribedChannels.next(current);
+            console.log(`💬 Unsubscribed from channel: ${channel}`);
+        }
+        else {
+            console.error('WebSocket is not open. Cannot unsubscribe from channel.');
+        }
+    }
+    /**
+     * Get currently subscribed channels
+     * @returns Set of subscribed channel names
+     */
+    getSubscribedChannels() {
+        return WebSocketManagerService.subscribedChannels.value;
+    }
+    // ═══════════════════════════════════════════════════════════════════════════
+    // MESSAGE SENDING
+    // ═══════════════════════════════════════════════════════════════════════════
+    /**
+     * Generic send method for message tracking (acks, gap requests, etc.)
+     * @param message - Message object to send
+     */
+    send(message) {
+        if (WebSocketManagerService.socket?.readyState === WebSocket.OPEN) {
+            WebSocketManagerService.socket.send(JSON.stringify(message));
+        }
+        else {
+            console.warn('⚠️ Cannot send message: WebSocket not open', message);
+        }
+    }
+    /**
+     * Send broadcast message
+     * @param content - Message content to broadcast
+     */
+    sendBroadcast(content) {
+        if (WebSocketManagerService.socket?.readyState === WebSocket.OPEN) {
+            WebSocketManagerService.socket.send(JSON.stringify({ type: 'broadcast', content }));
+            console.log(`📢 Send broadcast: ${content}`);
+        }
+        else {
+            console.error('WebSocket is not open. Cannot send broadcast.');
+        }
+    }
+    /**
+     * Send message in channel (state manager message)
+     * @param channel - Channel name
+     * @param content - Message content
+     */
+    sendMessageInChannel(channel, content) {
+        if (WebSocketManagerService.socket?.readyState === WebSocket.OPEN) {
+            const message = {
+                type: 'stateMangerMessage',
+                subscribedChannel: channel,
+                content
+            };
+            // DEBUG: Log the exact message being sent
+            console.log('🔍 [DEBUG] sendMessageInChannel:', {
+                channel,
+                channelType: typeof channel,
+                channelEmpty: channel === '' || channel === null || channel === undefined,
+                content,
+                fullMessage: message,
+                jsonString: JSON.stringify(message)
+            });
+            WebSocketManagerService.socket.send(JSON.stringify(message));
+            console.log(`💬 Send message:`, content);
+        }
+        else {
+            console.error('WebSocket is not open. Cannot send message.');
+        }
+    }
+    /**
+     * Send channel message (broadcasts to all subscribers in the channel)
+     * @param channel - Channel name
+     * @param content - Message content
+     */
+    sendChannelMessage(channel, content) {
+        if (WebSocketManagerService.socket?.readyState === WebSocket.OPEN) {
+            WebSocketManagerService.socket.send(JSON.stringify({
+                type: 'message',
+                subscribedChannel: channel,
+                content
+            }));
+            console.log(`💬 Send channel message to [${channel}]:`, content);
+        }
+        else {
+            console.error('WebSocket is not open. Cannot send channel message.');
+        }
+    }
+    /**
+     * Send message to multiple channels at once (batch)
+     * @param channels - Array of channel names
+     * @param content - Message content
+     */
+    sendChannelMessageToChannels(channels, content) {
+        if (WebSocketManagerService.socket?.readyState === WebSocket.OPEN) {
+            try {
+                // New batch format
+                WebSocketManagerService.socket.send(JSON.stringify({
+                    type: 'channelMessage',
+                    channels: channels,
+                    data: content
+                }));
+                console.log(`💬 Send channel message to channels [${channels.join(', ')}]:`, content);
+            }
+            catch (error) {
+                console.error('❌ Failed to send channelMessage batch:', error);
+            }
+            // Legacy fallback - send individual messages to each channel
+            try {
+                channels.forEach(channel => {
+                    WebSocketManagerService.socket?.send(JSON.stringify({
+                        type: 'message',
+                        subscribedChannel: channel,
+                        content
+                    }));
+                });
+            }
+            catch (err) {
+                console.warn('⚠️ Legacy fallback failed sending individual messages', err);
+            }
+        }
+        else {
+            console.error('WebSocket is not open. Cannot send message to channels.');
+        }
+    }
+    /**
+     * Send message to specific user
+     * @param user - User identifier
+     * @param content - Message content
+     */
+    sendMessageToUser(user, content) {
+        if (WebSocketManagerService.socket?.readyState === WebSocket.OPEN) {
+            WebSocketManagerService.socket.send(JSON.stringify({
+                type: 'userMessage',
+                subscribedChannel: user,
+                content
+            }));
+            console.log(`💬 Send message:`, content);
+        }
+        else {
+            console.error('WebSocket is not open. Cannot send message.');
+        }
+    }
+    // ═══════════════════════════════════════════════════════════════════════════
+    // CHANNEL MANAGEMENT
+    // ═══════════════════════════════════════════════════════════════════════════
+    /**
+     * Request list of all channels from server
+     */
+    getAllChannels() {
+        if (WebSocketManagerService.socket?.readyState === WebSocket.OPEN) {
+            WebSocketManagerService.socket.send(JSON.stringify({ type: 'getChannels' }));
+            console.log('🗂️ List of all channels');
+        }
+        else {
+            console.error('WebSocket is not open. Cannot request channels.');
+        }
+    }
+    /**
+     * Create a new channel on server
+     * @param channel - Channel name to create
+     */
+    createChannel(channel) {
+        if (WebSocketManagerService.socket?.readyState === WebSocket.OPEN) {
+            WebSocketManagerService.socket.send(JSON.stringify({
+                type: 'createChannel',
+                content: channel
+            }));
+            console.log('🗂️ Created channel:', channel);
+        }
+        else {
+            console.error('WebSocket is not open. Cannot request channels.');
+        }
+    }
+    /**
+     * Delete a channel from server
+     * @param channel - Channel name to delete
+     */
+    deleteChannel(channel) {
+        if (WebSocketManagerService.socket?.readyState === WebSocket.OPEN) {
+            WebSocketManagerService.socket.send(JSON.stringify({
+                type: 'deleteChannel',
+                content: channel
+            }));
+            console.log('🗂️ Delete channel:', channel);
+        }
+        else {
+            console.error('WebSocket is not open. Cannot request channels.');
+        }
+    }
+    /**
+     * Get users in a specific channel
+     * @param channel - Channel name
+     */
+    getUsersInChannel(channel) {
+        if (WebSocketManagerService.socket?.readyState === WebSocket.OPEN) {
+            WebSocketManagerService.socket.send(JSON.stringify({
+                type: 'getUsers',
+                subscribedChannel: channel
+            }));
+            console.log(`👥 List all users in channel: ${channel}`);
+        }
+        else {
+            console.error('WebSocket is not open. Cannot request users.');
+        }
+    }
+    // ═══════════════════════════════════════════════════════════════════════════
+    // NOTIFICATION CHANNELS (MES- prefix)
+    // ═══════════════════════════════════════════════════════════════════════════
+    /**
+     * Create a notification channel
+     * @param channel - Channel name (should include MES- prefix)
+     */
+    createNotificationChannel(channel) {
+        if (WebSocketManagerService.socket?.readyState === WebSocket.OPEN) {
+            WebSocketManagerService.socket.send(JSON.stringify({
+                type: 'createNotificationChannel',
+                content: channel
+            }));
+            console.log('📢 Created notification channel:', channel);
+        }
+        else {
+            console.error('WebSocket is not open. Cannot create notification channel.');
+        }
+    }
+    /**
+     * Get all notification channels (in-memory)
+     */
+    getNotificationChannels() {
+        if (WebSocketManagerService.socket?.readyState === WebSocket.OPEN) {
+            WebSocketManagerService.socket.send(JSON.stringify({ type: 'getNotificationChannels' }));
+            console.log('📢 Requested notification channels list');
+        }
+        else {
+            console.error('WebSocket is not open. Cannot request notification channels.');
+        }
+    }
+    /**
+     * Get today's notification channels from database
+     */
+    getTodaysNotificationChannels() {
+        if (WebSocketManagerService.socket?.readyState === WebSocket.OPEN) {
+            WebSocketManagerService.socket.send(JSON.stringify({ type: 'getTodaysNotificationChannels' }));
+            console.log('📢 Requested today\'s notification channels from DB');
+        }
+        else {
+            console.error('WebSocket is not open. Cannot request today\'s notification channels.');
+        }
+    }
+    /**
+     * Subscribe to a notification channel with optional date filters
+     * @param channel - Channel name
+     * @param options - Optional start/end epoch filters
+     * @param user - User information
+     */
+    subscribeToNotificationChannel(channel, options, user) {
+        if (WebSocketManagerService.socket?.readyState === WebSocket.OPEN) {
+            WebSocketManagerService.socket.send(JSON.stringify({
+                type: 'subscribeNotifications',
+                subscribedChannel: channel,
+                content: {
+                    ...options,
+                    user: user
+                }
+            }));
+            console.log(`📢 Subscribed to notification channel: ${channel}`);
+        }
+        else {
+            console.error('WebSocket is not open. Cannot subscribe to notification channel.');
+        }
+    }
+    /**
+     * Unsubscribe from a notification channel
+     * @param channel - Channel name
+     */
+    unsubscribeFromNotificationChannel(channel) {
+        if (WebSocketManagerService.socket?.readyState === WebSocket.OPEN) {
+            WebSocketManagerService.socket.send(JSON.stringify({
+                type: 'unsubscribeNotifications',
+                subscribedChannel: channel
+            }));
+            console.log(`📢 Unsubscribed from notification channel: ${channel}`);
+        }
+        else {
+            console.error('WebSocket is not open. Cannot unsubscribe from notification channel.');
+        }
+    }
+    // ═══════════════════════════════════════════════════════════════════════════
+    // CONNECTION STATUS (Static getter for direct access)
+    // ═══════════════════════════════════════════════════════════════════════════
+    /**
+     * Check if WebSocket connection is currently open
+     * @returns true if connected, false otherwise
+     */
+    static isConnected() {
+        return WebSocketManagerService.socket?.readyState === WebSocket.OPEN;
+    }
+    /**
+     * Check if connection has been initialized (attempted at least once)
+     * @returns true if connection was initialized, false otherwise
+     */
+    static isInitialized() {
+        return WebSocketManagerService.connectionInitialized;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WebSocketManagerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WebSocketManagerService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WebSocketManagerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
 class RequestService extends WebsocketService {
     constructor() {
         super(...arguments);
@@ -1783,12 +2419,431 @@ function requestPolling(pollInterval, stopCondition$, isPending$) {
                     isPending$.set(false);
                 }
             }
-            catch (e) {
-                // no-op if setting fails
+            catch (e) {
+                // no-op if setting fails
+            }
+        }), takeUntil(stopCondition$));
+    };
+}
+
+/**
+ * Message Tracker Service - Guaranteed Message Delivery
+ *
+ * Tracks message IDs, detects gaps, manages acknowledgments, and handles sync.
+ * Ensures frontend clients never miss messages even during disconnections.
+ *
+ * Features:
+ * - Per-channel message sequence tracking
+ * - Automatic gap detection and recovery
+ * - Batch acknowledgments (configurable interval)
+ * - Reconnection sync with last-seen tracking
+ * - Gap threshold alerting (10 messages before UI notification)
+ */
+class MessageTrackerService {
+    // ═══════════════════════════════════════════════════════════════════════════
+    // INITIALIZATION
+    // ═══════════════════════════════════════════════════════════════════════════
+    constructor(wsManager) {
+        this.wsManager = wsManager;
+        // ═══════════════════════════════════════════════════════════════════════════
+        // CONFIGURATION
+        // ═══════════════════════════════════════════════════════════════════════════
+        /** Batch acknowledgment interval in milliseconds */
+        this.BATCH_ACK_INTERVAL_MS = 5000; // 5 seconds
+        /** Maximum gap before alerting UI */
+        this.GAP_THRESHOLD = 10;
+        /** Maximum messages to store in pending acks before forcing batch */
+        this.MAX_PENDING_ACKS = 100;
+        // ═══════════════════════════════════════════════════════════════════════════
+        // STATE TRACKING
+        // ═══════════════════════════════════════════════════════════════════════════
+        /**
+         * Track last seen message ID per channel
+         * Map<channelName, lastMessageId>
+         */
+        this.lastSeen = new Map();
+        /**
+         * Expected next message ID per channel (for gap detection)
+         * Map<channelName, nextExpectedId>
+         */
+        this.expectedSequence = new Map();
+        /**
+         * Pending acknowledgments per channel
+         * Map<channelName, Set<messageId>>
+         */
+        this.pendingAcks = new Map();
+        /**
+         * Gap count per channel (for threshold alerting)
+         * Map<channelName, gapCount>
+         */
+        this.gapCounts = new Map();
+        /**
+         * Replay mode tracking (per channel)
+         * Used to distinguish replay vs live messages
+         */
+        this.inReplayMode = new Map();
+        /**
+         * Gap retry count (for retry logic)
+         * Map<channel, retryCount>
+         */
+        this.gapRetryCount = new Map();
+        /** Batch acknowledgment timer */
+        this.batchAckTimer = null;
+        /** Subscription to WebSocket messages */
+        this.messagesSubscription = null;
+        /**
+         * Track channels we want to be subscribed to (survives disconnect/reconnect)
+         * This is separate from WebSocketManagerService.subscribedChannels which tracks
+         * actual active subscriptions
+         */
+        this.intendedChannels = new Set();
+        /** Observable to emit processed messages to UI components */
+        this.messagesSubject = new BehaviorSubject(null);
+        this.messages$ = this.messagesSubject.asObservable();
+        // Restore state from sessionStorage (survives page reload)
+        this.restoreLastSeen();
+        this.restoreIntendedChannels();
+        // Start batch acknowledgment timer
+        this.startBatchAckTimer();
+        // Subscribe to all incoming WebSocket messages
+        this.messagesSubscription = this.wsManager.messages$.subscribe(msg => {
+            if (msg) {
+                this.onMessage(msg);
+            }
+        });
+        // Listen for reconnect events - re-subscribe with lastSeenId for sync
+        this.wsManager.onReconnect$.subscribe(() => {
+            console.log('🔄 Reconnection detected, re-subscribing with lastSeenId...');
+            this.reSubscribeAllChannels();
+        });
+        console.log('✅ MessageTrackerService initialized');
+    }
+    ngOnDestroy() {
+        this.stopBatchAckTimer();
+        this.persistLastSeen(); // This now also persists intendedChannels
+        this.messagesSubscription?.unsubscribe();
+        console.log('🛑 MessageTrackerService destroyed');
+    }
+    // ═══════════════════════════════════════════════════════════════════════════
+    // MESSAGE HANDLING
+    // ═══════════════════════════════════════════════════════════════════════════
+    /**
+     * Process incoming message
+     * Tracks ID, detects gaps, queues acknowledgment
+     */
+    onMessage(msg) {
+        const { type, channel, messageId, isReplay } = msg;
+        // Only track messages with IDs (ignore legacy messages without messageId)
+        if (messageId === undefined || messageId === null) {
+            console.warn('⚠️ Received message without ID (legacy format):', msg);
+            // Still forward legacy messages to UI
+            this.messagesSubject.next(msg);
+            return;
+        }
+        // Handle replay mode transitions
+        if (isReplay && !this.inReplayMode.get(channel)) {
+            console.log(`🔄 Entering replay mode for channel: ${channel}`);
+            this.inReplayMode.set(channel, true);
+        }
+        else if (!isReplay && this.inReplayMode.get(channel)) {
+            console.log(`✅ Exiting replay mode for channel: ${channel}`);
+            this.inReplayMode.set(channel, false);
+        }
+        // Track message and detect gaps
+        this.trackMessage(channel, messageId, isReplay);
+        // Forward message to UI components
+        this.messagesSubject.next(msg);
+    }
+    /**
+     * Track message ID and detect gaps
+     */
+    trackMessage(channel, messageId, isReplay) {
+        const expected = this.expectedSequence.get(channel) || 1;
+        // Gap detection
+        if (messageId !== expected) {
+            console.warn(`⚠️ Gap detected in channel "${channel}": expected ${expected}, got ${messageId}`);
+            // Increment gap count
+            const currentGapCount = this.gapCounts.get(channel) || 0;
+            const newGapCount = currentGapCount + 1;
+            this.gapCounts.set(channel, newGapCount);
+            // Check threshold
+            if (newGapCount >= this.GAP_THRESHOLD) {
+                console.error(`🚨 Gap threshold exceeded for channel "${channel}": ${newGapCount} gaps`);
+                this.onGapThresholdExceeded(channel, newGapCount);
+            }
+            // Request gap fill
+            this.requestGapFill(channel, expected, messageId - 1);
+        }
+        else {
+            // Reset gap count and retry count on successful sequence
+            this.gapCounts.set(channel, 0);
+            this.gapRetryCount.set(channel, 0);
+        }
+        // Update tracking
+        this.lastSeen.set(channel, messageId);
+        this.expectedSequence.set(channel, messageId + 1);
+        // Persist to sessionStorage (debounced in production)
+        this.persistLastSeen();
+        // Queue for acknowledgment
+        this.queueAck(channel, messageId);
+        // Check if we should force batch ack due to volume
+        const pendingCount = this.pendingAcks.get(channel)?.size || 0;
+        if (pendingCount >= this.MAX_PENDING_ACKS) {
+            console.log(`📦 Forcing batch ack: ${pendingCount} pending messages`);
+            this.sendBatchAck(channel);
+        }
+    }
+    // ═══════════════════════════════════════════════════════════════════════════
+    // ACKNOWLEDGMENT MANAGEMENT
+    // ═══════════════════════════════════════════════════════════════════════════
+    /**
+     * Queue message for batch acknowledgment
+     */
+    queueAck(channel, messageId) {
+        if (!this.pendingAcks.has(channel)) {
+            this.pendingAcks.set(channel, new Set());
+        }
+        this.pendingAcks.get(channel).add(messageId);
+    }
+    /**
+     * Start batch acknowledgment timer
+     */
+    startBatchAckTimer() {
+        this.batchAckTimer = setInterval(() => {
+            this.sendAllBatchAcks();
+        }, this.BATCH_ACK_INTERVAL_MS);
+    }
+    /**
+     * Stop batch acknowledgment timer
+     */
+    stopBatchAckTimer() {
+        if (this.batchAckTimer) {
+            clearInterval(this.batchAckTimer);
+            this.batchAckTimer = null;
+        }
+    }
+    /**
+     * Send batch acknowledgments for all channels with pending acks
+     */
+    sendAllBatchAcks() {
+        this.pendingAcks.forEach((messageIds, channel) => {
+            if (messageIds.size > 0) {
+                this.sendBatchAck(channel);
+            }
+        });
+    }
+    /**
+     * Send batch acknowledgment for a specific channel
+     */
+    sendBatchAck(channel) {
+        const messageIds = this.pendingAcks.get(channel);
+        if (!messageIds || messageIds.size === 0) {
+            return;
+        }
+        // Convert Set to sorted array
+        const sortedIds = Array.from(messageIds).sort((a, b) => a - b);
+        const ackUpTo = sortedIds[sortedIds.length - 1];
+        console.log(`📦 Batch ack for channel "${channel}": ackUpTo=${ackUpTo} (${messageIds.size} messages)`);
+        this.wsManager.send({
+            type: 'messageAckBatch',
+            channel,
+            ackUpTo,
+            // Optional: include skippedIds if you want to report gaps
+            // skippedIds: this.getSkippedIds(channel, ackUpTo)
+        });
+        // Clear pending acks
+        messageIds.clear();
+    }
+    // ═══════════════════════════════════════════════════════════════════════════
+    // GAP RECOVERY
+    // ═══════════════════════════════════════════════════════════════════════════
+    /**
+     * Request missing messages from server
+     */
+    requestGapFill(channel, fromId, toId) {
+        const retries = this.gapRetryCount.get(channel) || 0;
+        if (retries >= 3) {
+            console.error(`🚨 Gap fill failed after 3 retries for channel "${channel}": ${fromId} to ${toId}`);
+            // Could emit to UI for manual intervention
+            return;
+        }
+        console.log(`🔍 Requesting gap fill for channel "${channel}": ${fromId} to ${toId} (attempt ${retries + 1})`);
+        this.wsManager.send({
+            type: 'gapRequest',
+            channel,
+            fromId,
+            toId
+        });
+        this.gapRetryCount.set(channel, retries + 1);
+    }
+    /**
+     * Handle gap threshold exceeded (optional: alert UI)
+     */
+    onGapThresholdExceeded(channel, gapCount) {
+        console.warn(`⚠️ High gap count for channel "${channel}": ${gapCount} missed messages`);
+        // Could emit to a separate observable for UI components to subscribe to
+        // this.gapAlerts.next({ channel, gapCount });
+    }
+    // ═══════════════════════════════════════════════════════════════════════════
+    // SUBSCRIPTION MANAGEMENT
+    // ═══════════════════════════════════════════════════════════════════════════
+    /**
+     * Subscribe to channel with sync support
+     * Automatically includes lastSeenId for replay
+     */
+    subscribeToChannel(channel, userData) {
+        const lastSeenId = this.lastSeen.get(channel) || 0;
+        console.log(`📥 Subscribing to channel "${channel}" with lastSeenId=${lastSeenId}`);
+        console.log(`📝 Adding to intendedChannels (now has ${this.intendedChannels.size + 1} channels)`);
+        // Track this channel as intended (survives disconnect/reconnect)
+        this.intendedChannels.add(channel);
+        this.persistIntendedChannels();
+        this.wsManager.sendSubscribeWithLastSeen(channel, userData, lastSeenId);
+    }
+    /**
+     * Re-subscribe to all previously subscribed channels after reconnect
+     * Includes lastSeenId for each channel to trigger message replay
+     */
+    reSubscribeAllChannels() {
+        // Use intendedChannels which survives disconnect/reconnect
+        const channels = Array.from(this.intendedChannels);
+        console.log(`🔄 Re-subscribing to ${channels.length} channel(s) with lastSeenId...`);
+        channels.forEach((channel) => {
+            this.subscribeToChannel(channel);
+        });
+        console.log(`✅ Re-subscription complete for ${channels.length} channel(s)`);
+    }
+    // ═══════════════════════════════════════════════════════════════════════════
+    // STATE PERSISTENCE
+    // ═══════════════════════════════════════════════════════════════════════════
+    /**
+     * Persist lastSeen to sessionStorage (survives page reload)
+     */
+    persistLastSeen() {
+        try {
+            const data = JSON.stringify(Array.from(this.lastSeen.entries()));
+            sessionStorage.setItem('messageLastSeen', data);
+            // Also persist intendedChannels
+            this.persistIntendedChannels();
+        }
+        catch (err) {
+            console.warn('⚠️ Failed to persist lastSeen:', err.message);
+        }
+    }
+    /**
+     * Restore lastSeen from sessionStorage
+     */
+    restoreLastSeen() {
+        try {
+            const data = sessionStorage.getItem('messageLastSeen');
+            if (data) {
+                const entries = JSON.parse(data);
+                this.lastSeen = new Map(entries);
+                // Rebuild expectedSequence from restored lastSeen
+                this.lastSeen.forEach((lastId, channel) => {
+                    this.expectedSequence.set(channel, lastId + 1);
+                });
+                console.log('📥 Restored lastSeen from sessionStorage:', this.lastSeen.size, 'channels');
+            }
+        }
+        catch (err) {
+            console.warn('⚠️ Failed to restore lastSeen:', err.message);
+        }
+    }
+    /**
+     * Persist intendedChannels to sessionStorage
+     */
+    persistIntendedChannels() {
+        try {
+            const channels = Array.from(this.intendedChannels);
+            sessionStorage.setItem('intendedChannels', JSON.stringify(channels));
+        }
+        catch (err) {
+            console.warn('⚠️ Failed to persist intendedChannels:', err.message);
+        }
+    }
+    /**
+     * Restore intendedChannels from sessionStorage
+     */
+    restoreIntendedChannels() {
+        try {
+            const data = sessionStorage.getItem('intendedChannels');
+            if (data) {
+                const channels = JSON.parse(data);
+                this.intendedChannels = new Set(channels);
+                console.log('📥 Restored intendedChannels from sessionStorage:', this.intendedChannels.size, 'channels');
+            }
+        }
+        catch (err) {
+            console.warn('⚠️ Failed to restore intendedChannels:', err.message);
+        }
+    }
+    // ═══════════════════════════════════════════════════════════════════════════
+    // PUBLIC ACCESSORS
+    // ═══════════════════════════════════════════════════════════════════════════
+    /**
+     * Get last seen message ID for a channel
+     */
+    getLastSeenId(channel) {
+        return this.lastSeen.get(channel) || 0;
+    }
+    /**
+     * Get expected next message ID for a channel
+     */
+    getExpectedNextId(channel) {
+        return this.expectedSequence.get(channel) || 1;
+    }
+    /**
+     * Check if currently in replay mode for a channel
+     */
+    isInReplayMode(channel) {
+        return this.inReplayMode.get(channel) || false;
+    }
+    /**
+     * Get gap count for a channel
+     */
+    getGapCount(channel) {
+        return this.gapCounts.get(channel) || 0;
+    }
+    // ═══════════════════════════════════════════════════════════════════════════
+    // UTILITY METHODS
+    // ═══════════════════════════════════════════════════════════════════════════
+    /**
+     * Get skipped IDs between expected and received (for detailed gap reporting)
+     */
+    getSkippedIds(channel, upToId) {
+        const expected = this.expectedSequence.get(channel) || 1;
+        const skipped = [];
+        for (let i = expected; i < upToId; i++) {
+            const pending = this.pendingAcks.get(channel);
+            if (!pending?.has(i)) {
+                skipped.push(i);
             }
-        }), takeUntil(stopCondition$));
-    };
+        }
+        return skipped;
+    }
+    /**
+     * Clear all tracking state (useful for debugging or manual reset)
+     */
+    clearState() {
+        this.lastSeen.clear();
+        this.expectedSequence.clear();
+        this.pendingAcks.clear();
+        this.gapCounts.clear();
+        this.inReplayMode.clear();
+        this.gapRetryCount.clear();
+        this.persistLastSeen();
+        console.log('🧹 MessageTracker state cleared');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessageTrackerService, deps: [{ token: WebSocketManagerService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessageTrackerService, providedIn: 'root' }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessageTrackerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: WebSocketManagerService }] });
 
 class DatabaseStorage {
     constructor(table = '', expiresIn) {
@@ -1877,6 +2932,12 @@ class HTTPManagerService extends RequestService {
         this.toastMessage = inject(ToastMessageDisplayService);
         this.ng_injector = inject(Injector);
         this.objectMergerService = inject(ObjectMergerService);
+        this.wsManager = inject(WebSocketManagerService);
+        this.messageTracker = inject(MessageTrackerService);
+        // Delegate WebSocket observables to WebSocketManagerService (singleton)
+        this.connectionStatus$ = this.wsManager.connectionStatus$;
+        this.messages$ = this.messageTracker.messages$; // Messages flow through MessageTrackerService
+        this.subscribedChannels$ = this.wsManager.subscribedChannels$;
         this.countdown = new BehaviorSubject(0);
         this.countdown$ = this.countdown.asObservable();
         this.error = new BehaviorSubject(false);
@@ -1887,6 +2948,130 @@ class HTTPManagerService extends RequestService {
         this.config = ApiRequest.adapt();
         this.config = (configOptions) ? ApiRequest.adapt(configOptions.httpRequestOptions) : this.config;
     }
+    // ═══════════════════════════════════════════════════════════════════════════
+    // WEBSOCKET METHODS (Delegated to WebSocketManagerService singleton)
+    // ═══════════════════════════════════════════════════════════════════════════
+    /**
+     * Connect to WebSocket server
+     * Only the first call across ALL instances will establish a connection
+     */
+    connect(options, jwtToken) {
+        this.wsManager.connect(options, jwtToken);
+    }
+    /**
+     * Disconnect from WebSocket server
+     */
+    disconnect() {
+        this.wsManager.disconnect();
+    }
+    /**
+     * Subscribe to a channel
+     */
+    subscribeToChannel(channel, userData) {
+        this.messageTracker.subscribeToChannel(channel, userData);
+    }
+    /**
+     * Subscribe to multiple channels
+     */
+    subscribeToChannels(channels, userData) {
+        channels.forEach(channel => this.messageTracker.subscribeToChannel(channel, userData));
+    }
+    /**
+     * Unsubscribe from a channel
+     */
+    unsubscribeFromChannel(channel) {
+        this.wsManager.unsubscribeFromChannel(channel);
+    }
+    /**
+     * Get currently subscribed channels
+     */
+    getSubscribedChannels() {
+        return this.wsManager.getSubscribedChannels();
+    }
+    /**
+     * Send broadcast message
+     */
+    sendBroadcast(content) {
+        this.wsManager.sendBroadcast(content);
+    }
+    /**
+     * Send message in channel (state manager message)
+     */
+    sendMessageInChannel(channel, content) {
+        this.wsManager.sendMessageInChannel(channel, content);
+    }
+    /**
+     * Send channel message
+     */
+    sendChannelMessage(channel, content) {
+        this.wsManager.sendChannelMessage(channel, content);
+    }
+    /**
+     * Send message to multiple channels
+     */
+    sendChannelMessageToChannels(channels, content) {
+        this.wsManager.sendChannelMessageToChannels(channels, content);
+    }
+    /**
+     * Send message to user
+     */
+    sendMessageToUser(user, content) {
+        this.wsManager.sendMessageToUser(user, content);
+    }
+    /**
+     * Get all channels
+     */
+    getAllChannels() {
+        this.wsManager.getAllChannels();
+    }
+    /**
+     * Create channel
+     */
+    createChannel(channel) {
+        this.wsManager.createChannel(channel);
+    }
+    /**
+     * Delete channel
+     */
+    deleteChannel(channel) {
+        this.wsManager.deleteChannel(channel);
+    }
+    /**
+     * Get users in channel
+     */
+    getUsersInChannel(channel) {
+        this.wsManager.getUsersInChannel(channel);
+    }
+    /**
+     * Create notification channel
+     */
+    createNotificationChannel(channel) {
+        this.wsManager.createNotificationChannel(channel);
+    }
+    /**
+     * Get notification channels
+     */
+    getNotificationChannels() {
+        this.wsManager.getNotificationChannels();
+    }
+    /**
+     * Get today's notification channels
+     */
+    getTodaysNotificationChannels() {
+        this.wsManager.getTodaysNotificationChannels();
+    }
+    /**
+     * Subscribe to notification channel
+     */
+    subscribeToNotificationChannel(channel, options, user) {
+        this.wsManager.subscribeToNotificationChannel(channel, options, user);
+    }
+    /**
+     * Unsubscribe from notification channel
+     */
+    unsubscribeFromNotificationChannel(channel) {
+        this.wsManager.unsubscribeFromNotificationChannel(channel);
+    }
     // REQUESTS
     getRequest(options, params) {
         this.isPending.next(true);
@@ -2416,7 +3601,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 }] }] });
 
 class ApiRequest {
-    constructor(server = '', path, headers, adapter, mapper, polling, retry, stream, streamType, displayError, saveAs, fileContentHeader, ws) {
+    constructor(server = '', path, headers, adapter, mapper, polling, retry, stream, streamType, displayError, saveAs, fileContentHeader, ws, env) {
         this.server = server;
         this.path = path;
         this.headers = headers;
@@ -2430,10 +3615,11 @@ class ApiRequest {
         this.saveAs = saveAs;
         this.fileContentHeader = fileContentHeader;
         this.ws = ws;
+        this.env = env;
     }
     static adapt(item) {
         const server = Array.isArray(item?.server) ? item.server.join('/') : item?.server || '';
-        return new ApiRequest(server, (item?.path) ? item.path : [], (item?.headers) ? item.headers : {}, item?.adapter, item?.mapper, item?.polling ? Math.floor(item.polling) : 0, item?.retry ? RetryOptions.adapt(item.retry) : RetryOptions.adapt(), (item?.stream) ? item.stream : false, item?.streamType || StreamType.AI_STREAMING, (item?.displayError) ? item.displayError : false, item?.saveAs, item?.fileContentHeader, item?.ws);
+        return new ApiRequest(server, (item?.path) ? item.path : [], (item?.headers) ? item.headers : {}, item?.adapter, item?.mapper, item?.polling ? Math.floor(item.polling) : 0, item?.retry ? RetryOptions.adapt(item.retry) : RetryOptions.adapt(), (item?.stream) ? item.stream : false, item?.streamType || StreamType.AI_STREAMING, (item?.displayError) ? item.displayError : false, item?.saveAs, item?.fileContentHeader, item?.ws, item?.env || 'dev');
     }
 }
 
@@ -2448,17 +3634,18 @@ class RequestOptions {
 }
 
 class WSOptions {
-    constructor(id = '', wsServer = '', jwtToken = '', permissions, channels, user, retry) {
+    constructor(id = '', wsServer = '', jwtToken = '', permissions, channels, wsUpdateChannels, user, retry) {
         this.id = id;
         this.wsServer = wsServer;
         this.jwtToken = jwtToken;
         this.permissions = permissions;
         this.channels = channels;
+        this.wsUpdateChannels = wsUpdateChannels;
         this.user = user;
         this.retry = retry;
     }
     static adapt(item) {
-        return new WSOptions(item?.id, item?.wsServer, item?.jwtToken, (item?.permissions) ? item.permissions.split(',').map((p) => p.trim()) : [], item?.channels, item?.user, item?.retry);
+        return new WSOptions(item?.id, item?.wsServer, item?.jwtToken, (item?.permissions) ? item.permissions.split(',').map((p) => p.trim()) : [], item?.channels, item?.wsUpdateChannels, item?.user, item?.retry);
     }
 }
 
@@ -2580,8 +3767,24 @@ class LocalStorageManagerService extends ComponentStore {
                     console.warn('No App ID found - AppId not Provided');
                     return;
                 }
-                const storageData = (options.encrypted) ? this.encryption.decrypt(found.data, this.app.appID) : found.data;
-                return (this.isString(storageData)) ? JSON.parse(storageData) : storageData;
+                let storageData = found.data;
+                if (options.encrypted) {
+                    const decryptedData = this.encryption.decrypt(found.data, this.app.appID);
+                    if (decryptedData !== null) {
+                        storageData = decryptedData;
+                    }
+                    else {
+                        console.warn(`Failed to decrypt data for store: ${store}`);
+                        storageData = found.data;
+                    }
+                }
+                try {
+                    return (this.isString(storageData)) ? JSON.parse(storageData) : storageData;
+                }
+                catch (error) {
+                    console.warn(`Failed to parse storage data for store: ${store}`, error);
+                    return storageData; // Return raw data if parsing fails
+                }
             }
             else {
                 return null;
@@ -2749,10 +3952,39 @@ class LocalStorageManagerService extends ComponentStore {
         const str = localStorage.getItem(this.storageSettingsName);
         const localStr = localStorage.getItem(this.storageName);
         const sessionStr = sessionStorage.getItem(this.storageName);
-        const localData = (localStr) ? JSON.parse(localStr) : null;
-        const sessionData = (sessionStr) ? JSON.parse(sessionStr) : null;
-        const decryptedStr = str ? this.encryption.decrypt(str, this.app.appID) : null;
-        const settings = (decryptedStr && decryptedStr !== null) ? JSON.parse(decryptedStr) : [];
+        let localData = [];
+        let sessionData = [];
+        let settings = [];
+        try {
+            localData = (localStr) ? JSON.parse(localStr) : [];
+        }
+        catch (error) {
+            console.warn('Failed to parse local storage data:', error);
+            localData = [];
+        }
+        try {
+            sessionData = (sessionStr) ? JSON.parse(sessionStr) : [];
+        }
+        catch (error) {
+            console.warn('Failed to parse session storage data:', error);
+            sessionData = [];
+        }
+        if (str) {
+            const decryptedStr = this.encryption.decrypt(str, this.app.appID);
+            if (decryptedStr) {
+                try {
+                    settings = JSON.parse(decryptedStr);
+                }
+                catch (error) {
+                    console.warn('Failed to parse decrypted settings:', error);
+                    settings = [];
+                }
+            }
+            else {
+                console.warn('Failed to decrypt settings data');
+                settings = [];
+            }
+        }
         settings.forEach(store => {
             const expired = (store.options?.expires || 0) > 0 && this.utils.hasExpired(store.options?.expires || 0);
             if (!expired) {
@@ -2805,6 +4037,47 @@ class LocalStorageManagerService extends ComponentStore {
     ngOnDestroy() {
         this.persistence$.unsubscribe();
     }
+    /**
+     * Clears all stored data from localStorage and sessionStorage
+     * Use this method to recover from corrupted data errors
+     */
+    clearAllStoredData() {
+        try {
+            localStorage.removeItem(this.storageSettingsName);
+            localStorage.removeItem(this.storageName);
+            sessionStorage.removeItem(this.storageName);
+            console.log('Cleared all stored data');
+        }
+        catch (error) {
+            console.error('Failed to clear stored data:', error);
+        }
+    }
+    /**
+     * Checks if stored data appears to be corrupted
+     * Returns true if data appears corrupted
+     */
+    checkForCorruptedData() {
+        try {
+            const str = localStorage.getItem(this.storageSettingsName);
+            if (str) {
+                // Try to decrypt if it's encrypted
+                const decryptedStr = this.encryption.decrypt(str, this.app.appID);
+                if (decryptedStr !== null && decryptedStr !== undefined) {
+                    // Try to parse the decrypted data
+                    JSON.parse(decryptedStr);
+                }
+                else {
+                    // Decryption failed, data is likely corrupted
+                    return true;
+                }
+            }
+            return false;
+        }
+        catch (error) {
+            // Parsing failed, data is corrupted
+            return true;
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LocalStorageManagerService, deps: [{ token: CONFIG_SETTINGS_TOKEN, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LocalStorageManagerService, providedIn: 'root' }); }
 }
@@ -2857,10 +4130,24 @@ class LocalStorageSignalsManagerService {
                 console.warn('No App ID found - AppId not Provided');
                 return null;
             }
-            const storageData = options.encrypted
-                ? this.encryption.decrypt(found.data, this.app.appID)
-                : found.data;
-            return this.isString(storageData) ? JSON.parse(storageData) : storageData;
+            let storageData = found.data;
+            if (options.encrypted) {
+                const decryptedData = this.encryption.decrypt(found.data, this.app.appID);
+                if (decryptedData !== null) {
+                    storageData = decryptedData;
+                }
+                else {
+                    console.warn(`Failed to decrypt data for store: ${store}`);
+                    storageData = found.data; // Use undecrypted data as fallback
+                }
+            }
+            try {
+                return this.isString(storageData) ? JSON.parse(storageData) : storageData;
+            }
+            catch (error) {
+                console.warn(`Failed to parse storage data for store: ${store}`, error);
+                return storageData; // Return raw data if parsing fails
+            }
         });
         this.settings = computed(() => this.state().settings);
         this.setting = (store) => computed(() => this.state().settings.find(item => item.name === store) ?? null);
@@ -2988,8 +4275,23 @@ class LocalStorageSignalsManagerService {
         const sessionStr = sessionStorage.getItem(this.storageName);
         const localData = localStr ? JSON.parse(localStr) : [];
         const sessionData = sessionStr ? JSON.parse(sessionStr) : [];
-        const decryptedStr = str ? this.encryption.decrypt(str, this.app.appID) : null;
-        const settings = decryptedStr ? JSON.parse(decryptedStr) : [];
+        let settings = [];
+        if (str) {
+            const decryptedStr = this.encryption.decrypt(str, this.app.appID);
+            if (decryptedStr) {
+                try {
+                    settings = JSON.parse(decryptedStr);
+                }
+                catch (error) {
+                    console.warn('Failed to parse decrypted settings:', error);
+                    settings = [];
+                }
+            }
+            else {
+                console.warn('Failed to decrypt settings data');
+                settings = [];
+            }
+        }
         settings.forEach(store => {
             // normalize options so we compare numbers and compute expires correctly
             const options = SettingOptions.adapt(store.options);
@@ -3428,14 +4730,23 @@ class DatabaseManagerService extends DbService {
     }
     clearTable(table) {
         const tableName = this.cleanTableName(table);
-        return this.getDatabaseTable(tableName).pipe(switchMap((tableData) => {
-            if (!tableData) {
+        console.log(`clearTable: Starting clear for table: ${tableName}`);
+        try {
+            const tableInstance = this.table(tableName);
+            if (!tableInstance) {
                 console.warn(`clearTable: Table '${tableName}' not found`);
-                return from([]);
+                return of([]);
             }
-            console.log(`clearTable: Clearing all records from ${tableName}`);
-            return from(tableData.clear());
-        }));
+            console.log(`clearTable: Clearing table '${tableName}'...`);
+            // Use table.clear() directly and wrap in Observable
+            return from(Promise.resolve().then(() => {
+                return tableInstance.clear();
+            })).pipe(tap(() => console.log(`clearTable: ✅ Table '${tableName}' cleared successfully`)), map(() => []));
+        }
+        catch (error) {
+            console.error(`clearTable: ❌ Error:`, error);
+            return of([]);
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DatabaseManagerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DatabaseManagerService, providedIn: 'root' }); }
@@ -3448,13 +4759,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         }], ctorParameters: () => [] });
 
 class ChannelMessage {
-    constructor(sessionId = null, content = null) {
+    constructor(messageId, channel, isReplay, sessionId = null, content = null, timestamp) {
+        this.messageId = messageId;
+        this.channel = channel;
+        this.isReplay = isReplay;
         this.sessionId = sessionId;
         this.content = content;
+        this.timestamp = timestamp;
     }
     static adapt(item) {
-        return new ChannelMessage(item?.sessionId || item?.id, // Support both for backward compatibility
-        item?.content);
+        return new ChannelMessage(item?.messageId, item?.channel, item?.isReplay, item?.sessionId || item?.id, // Support both for backward compatibility
+        item?.content, item?.timestamp);
     }
 }
 
@@ -3489,11 +4804,12 @@ class HTTPManagerStateService extends ComponentStore {
     getUsersForChannel$(channel) {
         return this.userListByChannel$.pipe(map(channelMap => channelMap.get(channel) || []));
     }
+    // Message queue for WebSocket communication (processed when connection is established)
+    static { this.wsCommunicationQueue = []; }
     constructor(apiOptions = ApiRequest.adapt(), dataType, database) {
         super(defaultState);
         this.apiOptions = apiOptions;
         this.dataType = dataType;
-        this.database = database;
         this.httpManagerService = inject(HTTPManagerService);
         this.dbManagerService = inject(DatabaseManagerService);
         this.localStorageManagerService = inject(LocalStorageManagerService);
@@ -3516,7 +4832,7 @@ class HTTPManagerStateService extends ComponentStore {
         this.messages$ = this.messages.asObservable();
         this.userListByChannel = new BehaviorSubject(new Map());
         this.userListByChannel$ = this.userListByChannel.asObservable();
-        // Legacy support - returns all unique users across all channels
+        // Returns all unique users across all channels
         this.userList = new BehaviorSubject([]);
         this.userList$ = this.userList.asObservable();
         this.user = new BehaviorSubject(null);
@@ -3540,17 +4856,19 @@ class HTTPManagerStateService extends ComponentStore {
         this.latestCommunicationMessages$ = this.latestCommunicationMessages.asObservable();
         this.userAction = new BehaviorSubject(null);
         this.userAction$ = this.userAction.asObservable();
-        this.wsConnection = false;
         this.wsOptions = WSOptions.adapt();
-        // Expose raw WS connection status directly to UI
+        // Expose raw WS connection status directly to UI (from singleton WebSocketManagerService)
         this.connectionStatus$ = this.httpManagerService.connectionStatus$;
         // WebSocket
-        this.initWS = this.effect((wsOptions$) => wsOptions$.pipe(
-        // tap((wsOptions) => { debugger
-        //   this.wsOptions = wsOptions
-        // }),
-        switchMap((wsOptions) => merge(this.httpManagerService.connectionStatus$.pipe(tap((isConnected) => {
-            this.wsConnection = isConnected;
+        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);
+                }
+            }
         })), this.httpManagerService.messages$.pipe(tap((message) => {
             if (!message)
                 return;
@@ -3558,6 +4876,8 @@ class HTTPManagerStateService extends ComponentStore {
             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);
             if (message.error === 'JWT_INVALID') {
                 this.shouldRetry = false;
                 this.httpManagerService.disconnect();
@@ -3571,16 +4891,22 @@ class HTTPManagerStateService extends ComponentStore {
             switch (message.type) {
                 case 'channelsList':
                     console.log('💬 Channels:', message.channels);
-                    // this.channelList = message.channels
-                    // if (this.channelList.includes(wsOptions.id)) {
-                    //   this.httpManagerService.subscribeToChannel(wsOptions.id)
-                    // } else {
-                    //   this.httpManagerService.createChannel(wsOptions.id)
-                    // }
+                    console.log('🔍 channelsList received, checking connection status...');
+                    console.log('🔍 WebSocket connected:', WebSocketManagerService.isConnected());
+                    // 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);
+                    }
+                    else {
+                        console.log('⚠️ No channels to subscribe to');
+                    }
                     this.channels.next(message.channels);
                     break;
                 case 'subscribed':
                     console.log(`✅ Subscription confirmed: ${message.channel}`);
+                    // Track as subscribed now that server confirmed
+                    WebSocketManagerService.addSubscribedChannel(message.channel);
                     break;
                 case 'unsubscribed':
                     console.log(`🔓 Unsubscription confirmed: ${message.channel}`);
@@ -3588,6 +4914,11 @@ class HTTPManagerStateService extends ComponentStore {
                 case 'info':
                     // Already subscribed or other info messages
                     console.log(`ℹ️ Info: ${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);
+                    }
                     break;
                 case 'stateMangerMessage':
                     // Compare sender's session ID with current user's ID
@@ -3606,19 +4937,58 @@ class HTTPManagerStateService extends ComponentStore {
                     break;
                 case 'channelMessage':
                     // Handle channel-based messages (from sendChannelMessage)
-                    // Structure: { type: 'channelMessage', channels: [...], sessionId: {id, ldap, name, email}, content: {message payload} }
+                    // Structure: { type: 'channelMessage', messageId, channel, sessionId, content, timestamp }
                     // Skip messages from self
-                    const senderSessionId = message.sessionId?.id;
+                    const senderSessionId = message.sessionId?.id || message.sessionId;
                     if (senderSessionId === this.user.value?.id) {
+                        console.log('🔇 Skipping message from self (sessionId match)');
                         break;
                     }
                     console.log('💬 Channel Message received:', message);
-                    if (message.content) {
+                    // Determine which channels this message was sent to
+                    const messageChannels = message.channel ? [message.channel] : [];
+                    // Construct expected channel path (without env prefix)
+                    const myPath = this.apiOptions.path || [];
+                    const myPathString = myPath.join('/');
+                    // Check if any of the message channels CONTAIN our path
+                    const isWsUpdateChannel = messageChannels.some((ch) => {
+                        // Strip SYS- prefix if present for comparison
+                        const cleanChannel = ch.replace('SYS-', '');
+                        // Check if channel contains our path (or starts with it)
+                        const matches = cleanChannel === myPathString ||
+                            cleanChannel.startsWith(myPathString + '/') ||
+                            cleanChannel.includes(myPathString);
+                        console.log(`🔍 Channel check: ${ch} contains ${myPathString}? ${matches}`);
+                        return matches;
+                    });
+                    // If it's the expected channel, trigger fetchRecord like stateManagerMessage
+                    if (isWsUpdateChannel && message.content?.path) {
+                        console.log('🔍 Message received on expected channel (path match):', myPathString);
+                        console.log('📄 Content:', message.content);
+                        console.log('📥 Fetching record for channel:', myPathString);
+                        const path = message.content.path;
+                        const method = message.content.method || 'UPDATE';
+                        this.userAction.next({ sessionId: message.sessionId, content: message.content });
+                        this.fetchRecord(RequestOptions.adapt({ path }), method);
+                    }
+                    else if (message.content) {
+                        // Handle message content directly
+                        console.log('📄 Processing message content:', message.content);
                         this.appendMessages(ChannelMessage.adapt({
                             sessionId: message.sessionId,
                             content: message.content,
                         }));
                     }
+                    else {
+                        console.log('⚠️ Message does not contain data.content.path, skipping fetchRecord');
+                    }
+                    // Keep existing functionality for backward compatibility
+                    if (message.data?.content && !isWsUpdateChannel) {
+                        this.appendMessages(ChannelMessage.adapt({
+                            sessionId: message.data.sessionId,
+                            content: message.data.content,
+                        }));
+                    }
                     break;
                 case 'usersInChannel':
                     console.log(`👥 Users in channel "${message.channel}":`, message.data.users);
@@ -3834,11 +5204,21 @@ class HTTPManagerStateService extends ComponentStore {
         // FETCH RECORD
         this.fetchRecord = (options, method) => this.effect(() => of(RequestOptions.adapt(options)).pipe(tap(() => console.log('🔄 fetchRecord effect triggered with path:', options?.path, 'method:', method)), switchMap((options) => {
             this.streamedResponse = [];
+            // Temporarily update apiOptions.path with the path from the WebSocket message
+            // This ensures the request goes to the correct endpoint
+            const originalPath = this.apiOptions.path;
+            if (options?.path && Array.isArray(options.path)) {
+                this.apiOptions.path = options.path;
+                console.log('🔧 Temporarily set apiOptions.path to:', options.path);
+            }
             const requestOptions = this.updateRequestOptions(options?.headers);
-            console.log('🌐 Making GET request to path:', options?.path);
-            return this.httpManagerService.getRequest(requestOptions, options?.path)
+            console.log('🌐 Making GET request to path:', this.apiOptions.path);
+            return this.httpManagerService.getRequest(requestOptions)
                 .pipe(tap((data) => {
                 console.log('📦 fetchRecord received data:', data);
+                // Restore original path after request completes
+                this.apiOptions.path = originalPath;
+                console.log('🔧 Restored apiOptions.path to:', originalPath);
                 data = (!data) ? (this.dataType === DataType.ARRAY) ? [] : {} : data;
                 const id = options.path?.length ? options.path[options.path.length - 1] : null;
                 if (method === 'DELETE') {
@@ -3860,8 +5240,16 @@ class HTTPManagerStateService extends ComponentStore {
                         return this.dbManagerService.deleteTableRecord(this.databaseOptions.table, id);
                     if (method === 'UPDATE' && data)
                         return this.dbManagerService.updateTableRecord(this.databaseOptions.table, data);
-                    if (method === 'CREATE' && data)
-                        return this.dbManagerService.createTableRecord(this.databaseOptions.table, data);
+                    if (method === 'CREATE' && data) {
+                        // Validate that data has a valid id before saving to IndexedDB
+                        if (data && (data.id !== undefined && data.id !== null && data.id !== '')) {
+                            console.log('💾 Saving to IndexedDB:', { table: this.databaseOptions.table, id: data.id, data });
+                            return this.dbManagerService.createTableRecord(this.databaseOptions.table, data);
+                        }
+                        else {
+                            console.warn('⚠️ Skipping IndexedDB save: data.id is invalid', data);
+                        }
+                    }
                 }
                 return of(data);
             }));
@@ -3874,8 +5262,8 @@ class HTTPManagerStateService extends ComponentStore {
                 .pipe(tap((data) => {
                 data = (!data) ? (this.dataType === DataType.ARRAY) ? [] : {} : data;
                 this.addData$(data);
-                if (this.wsConnection)
-                    this.wsCommunication('CREATE', [...options?.path || [], data.id]);
+                // Always call wsCommunication - it will queue if not connected
+                this.wsCommunication('CREATE', [...options?.path || [], data.id]);
             }), concatMap((data) => {
                 if (this.hasDatabase && this.databaseOptions?.table && data?.id) {
                     return this.dbManagerService.createTableRecord(this.databaseOptions.table, data);
@@ -3891,8 +5279,8 @@ class HTTPManagerStateService extends ComponentStore {
                 .pipe(tap((data) => {
                 data = (!data) ? (this.dataType === DataType.ARRAY) ? [] : {} : data;
                 this.updateData$(data);
-                if (this.wsConnection)
-                    this.wsCommunication('UPDATE', [...options?.path || []]);
+                // Always call wsCommunication - it will queue if not connected
+                this.wsCommunication('UPDATE', [...options?.path || []]);
             }), concatMap((data) => {
                 if (this.hasDatabase && this.databaseOptions?.table && data?.id) {
                     return this.dbManagerService.updateTableRecord(this.databaseOptions.table, data);
@@ -3908,8 +5296,8 @@ class HTTPManagerStateService extends ComponentStore {
                 .pipe(tap((data) => {
                 data = (!data) ? (this.dataType === DataType.ARRAY) ? [] : {} : data;
                 this.deleteData$(data);
-                if (this.wsConnection)
-                    this.wsCommunication('DELETE', [...options?.path || []]);
+                // Always call wsCommunication - it will queue if not connected
+                this.wsCommunication('DELETE', [...options?.path || []]);
             }), concatMap((data) => {
                 if (this.hasDatabase && this.databaseOptions?.table && data?.id) {
                     return this.dbManagerService.deleteTableRecord(this.databaseOptions.table, data.id);
@@ -3968,23 +5356,35 @@ class HTTPManagerStateService extends ComponentStore {
                 return of([]);
             }));
         })));
-        this.databaseOptions = database;
-        this.maxRetries = this.apiOptions.ws?.retry?.times || 3;
-        this.retryDelay = (this.apiOptions.ws?.retry?.delay && this.apiOptions.ws.retry.delay * 1000) || 5 * 1000;
-        // Start next retry countdown at 0 to avoid showing 5000 pre-connection
-        this.wsNextRetry = new BehaviorSubject(0);
-        this.wsNextRetry$ = this.wsNextRetry.asObservable();
-        this.setApiRequestOptions(apiOptions, dataType, database);
-        if (this.databaseOptions && this.databaseOptions.table) {
-            this.localStorageManagerService.createStore({
-                name: this.databaseOptions.table,
-                data: { ...this.databaseOptions, ...{ expires: this.utils.expires(this.databaseOptions.expiresIn) } },
-                options: SettingOptions.adapt({
-                    storage: StorageType.GLOBAL,
-                    encrypted: false,
-                })
-            });
-            this.initDBStorage();
+        try {
+            this.databaseOptions = database;
+            this.hasDatabase = (database?.table) ? true : false;
+            this.maxRetries = this.apiOptions.ws?.retry?.times || 3;
+            this.retryDelay = (this.apiOptions.ws?.retry?.delay && this.apiOptions.ws.retry.delay * 1000) || 5 * 1000;
+            // Start next retry countdown at 0 to avoid showing 5000 pre-connection
+            this.wsNextRetry = new BehaviorSubject(0);
+            this.wsNextRetry$ = this.wsNextRetry.asObservable();
+            this.setApiRequestOptions(apiOptions, dataType, database);
+            if (this.databaseOptions && this.databaseOptions.table) {
+                this.localStorageManagerService.createStore({
+                    name: this.databaseOptions.table,
+                    data: { ...this.databaseOptions, ...{ expires: this.utils.expires(this.databaseOptions.expiresIn) } },
+                    options: SettingOptions.adapt({
+                        storage: StorageType.GLOBAL,
+                        encrypted: false,
+                    })
+                });
+                this.initDBStorage();
+            }
+        }
+        catch (error) {
+            console.error('Error initializing HTTPManagerStateService:', error);
+            // Initialize with safe defaults
+            this.databaseOptions = undefined;
+            this.maxRetries = 3;
+            this.retryDelay = 5000;
+            this.wsNextRetry = new BehaviorSubject(0);
+            this.wsNextRetry$ = this.wsNextRetry.asObservable();
         }
     }
     /**
@@ -4041,8 +5441,13 @@ class HTTPManagerStateService extends ComponentStore {
                 console.error('WSOptions invalid: wsServer is missing or empty');
                 return;
             }
+            // Clean up previous subscription to prevent duplicate handlers
+            if (this.connectionStatusSubscription) {
+                this.connectionStatusSubscription.unsubscribe();
+                this.connectionStatusSubscription = undefined;
+            }
             // Setup connection status monitoring (internal subscription to drive retry counters)
-            this.setupConnectionStatus().subscribe();
+            this.connectionStatusSubscription = this.setupConnectionStatus().subscribe();
             // Make initial connection attempt
             console.log('🔄 Initial WebSocket connection attempt...');
             this.httpManagerService.connect(this.apiOptions.ws, this.apiOptions.ws.jwtToken || '');
@@ -4174,10 +5579,46 @@ class HTTPManagerStateService extends ComponentStore {
     }
     // WEBSOCKET COMMUNICATION (STATE MANAGER)
     wsCommunication(method, path) {
-        if (this.wsConnection && this.apiOptions.ws) {
+        if (!this.apiOptions.ws) {
+            console.warn('wsCommunication called but no WebSocket options configured');
+            return;
+        }
+        // If connected, send immediately (check singleton WebSocketManagerService)
+        if (WebSocketManagerService.isConnected()) {
+            this.sendWsCommunication(method, path);
+        }
+        else {
+            // Queue the message to be sent when connection is established
+            console.log(`⏳ Queuing WS message (not connected): ${method} ${path ? JSON.stringify(path) : ''}`);
+            HTTPManagerStateService.wsCommunicationQueue.push({ method, path });
+        }
+    }
+    /**
+     * Actually send the WebSocket message (called when connected or from queue)
+     */
+    sendWsCommunication(method, path) {
+        if (this.apiOptions.ws) {
             const wsServer = this.apiOptions.ws.id;
+            // Guard: Don't send if channel is empty
+            if (!wsServer || wsServer === '') {
+                console.error('❌ Cannot send WS message: Channel ID is empty!');
+                return;
+            }
+            // DEBUG: Log what we're sending
+            console.log('🔍 [DEBUG] sendWsCommunication called:', {
+                wsServer,
+                wsServerType: typeof wsServer,
+                wsServerEmpty: wsServer === '' || wsServer === null || wsServer === undefined,
+                method,
+                path,
+                user: this.apiOptions.ws.user,
+                fullPayload: { method, path, user: this.apiOptions.ws.user }
+            });
             this.httpManagerService.sendMessageInChannel(wsServer, { method, path, user: this.apiOptions.ws.user });
         }
+        else {
+            console.error('❌ [DEBUG] sendWsCommunication: apiOptions.ws is undefined!');
+        }
     }
     /**
      * Send a message to channel(s)
@@ -4189,19 +5630,18 @@ class HTTPManagerStateService extends ComponentStore {
         const user = this.user.value;
         const messageInfo = ChannelMessage.adapt({ ...message, fromUser: user });
         console.log('📤 wsMessaging called with channels:', channels);
-        if (this.wsConnection && this.apiOptions.ws) {
+        if (WebSocketManagerService.isConnected() && this.apiOptions.ws) {
             // If specific channels provided, send to each channel
             // Channels are passed as-is - caller is responsible for including the correct prefix
             if (channels && channels.length > 0) {
                 console.log(`📤 Sending to ${channels.length} channel(s):`, channels);
-                channels.forEach(channel => {
-                    if (channel === 'allChannels') {
-                        this.httpManagerService.sendBroadcast(messageInfo);
-                    }
-                    else {
-                        this.httpManagerService.sendChannelMessage(channel, messageInfo);
-                    }
-                });
+                // Send single message with all channels (more efficient)
+                const user = this.user.value;
+                const messageData = {
+                    sessionId: user,
+                    content: messageInfo
+                };
+                this.httpManagerService.sendChannelMessageToChannels(channels, messageData);
             }
             else {
                 // Fallback to the primary WS channel (already prefixed with SYS-)
@@ -4216,7 +5656,7 @@ class HTTPManagerStateService extends ComponentStore {
      * @param channel - Base channel name (MES- prefix added automatically)
      */
     subscribeToMessageChannel(channel) {
-        if (this.wsConnection) {
+        if (WebSocketManagerService.isConnected()) {
             const prefixedChannel = this.prefixChannel(channel, ChannelType.MESSAGE);
             this.httpManagerService.subscribeToChannel(prefixedChannel);
             console.log(`💬 Subscribed to message channel: ${prefixedChannel}`);
@@ -4230,7 +5670,7 @@ class HTTPManagerStateService extends ComponentStore {
      * @param channel - Base channel name (MES- prefix added automatically)
      */
     unsubscribeFromMessageChannel(channel) {
-        if (this.wsConnection) {
+        if (WebSocketManagerService.isConnected()) {
             const prefixedChannel = this.prefixChannel(channel, ChannelType.MESSAGE);
             this.httpManagerService.unsubscribeFromChannel(prefixedChannel);
             console.log(`💬 Unsubscribed from message channel: ${prefixedChannel}`);
@@ -4246,8 +5686,11 @@ class HTTPManagerStateService extends ComponentStore {
      * Use subscribeToMessageChannel() for MES- prefixed channels
      */
     subscribeToChannel(channel) {
-        if (this.wsConnection) {
-            this.httpManagerService.subscribeToChannel(channel);
+        if (WebSocketManagerService.isConnected()) {
+            // Get current user data to send with subscription
+            const currentUser = this.user.value;
+            console.log('👤 Subscribing with user:', currentUser);
+            this.httpManagerService.subscribeToChannel(channel, currentUser);
         }
         else {
             console.warn('Cannot subscribe: WebSocket not connected.');
@@ -4257,8 +5700,11 @@ class HTTPManagerStateService extends ComponentStore {
      * Subscribe to multiple channels at once
      */
     subscribeToChannels(channels) {
-        if (this.wsConnection) {
-            this.httpManagerService.subscribeToChannels(channels);
+        if (WebSocketManagerService.isConnected()) {
+            // Get current user data to send with subscription
+            const currentUser = this.user.value;
+            console.log('👤 Subscribing to', channels.length, 'channels with user:', currentUser);
+            this.httpManagerService.subscribeToChannels(channels, currentUser);
         }
         else {
             console.warn('Cannot subscribe: WebSocket not connected.');
@@ -4268,7 +5714,7 @@ class HTTPManagerStateService extends ComponentStore {
      * Unsubscribe from a channel
      */
     unsubscribeFromChannel(channel) {
-        if (this.wsConnection) {
+        if (WebSocketManagerService.isConnected()) {
             this.httpManagerService.unsubscribeFromChannel(channel);
         }
         else {
@@ -4291,7 +5737,7 @@ class HTTPManagerStateService extends ComponentStore {
      * Create a new channel on the server
      */
     createChannel(channel) {
-        if (this.wsConnection) {
+        if (WebSocketManagerService.isConnected()) {
             this.httpManagerService.createChannel(channel);
         }
         else {
@@ -4302,7 +5748,7 @@ class HTTPManagerStateService extends ComponentStore {
      * Delete a channel from the server
      */
     deleteChannel(channel) {
-        if (this.wsConnection) {
+        if (WebSocketManagerService.isConnected()) {
             this.httpManagerService.deleteChannel(channel);
         }
         else {
@@ -4313,7 +5759,7 @@ class HTTPManagerStateService extends ComponentStore {
      * Request list of all channels from server
      */
     getAllChannels() {
-        if (this.wsConnection) {
+        if (WebSocketManagerService.isConnected()) {
             this.httpManagerService.getAllChannels();
         }
         else {
@@ -4324,7 +5770,7 @@ class HTTPManagerStateService extends ComponentStore {
      * Get users in a specific channel
      */
     getUsersInChannel(channel) {
-        if (this.wsConnection) {
+        if (WebSocketManagerService.isConnected()) {
             this.httpManagerService.getUsersInChannel(channel);
         }
         else {
@@ -4338,7 +5784,7 @@ class HTTPManagerStateService extends ComponentStore {
      * @param channel - Base channel name (MES- prefix added automatically)
      */
     createNotificationChannel(channel) {
-        if (this.wsConnection) {
+        if (WebSocketManagerService.isConnected()) {
             const prefixedChannel = this.prefixChannel(channel, ChannelType.NOTIFICATION);
             this.httpManagerService.createNotificationChannel(prefixedChannel);
             console.log(`📢 Creating notification channel: ${prefixedChannel}`);
@@ -4351,7 +5797,7 @@ class HTTPManagerStateService extends ComponentStore {
      * Request list of all notification channels from server (in-memory)
      */
     getNotificationChannels() {
-        if (this.wsConnection) {
+        if (WebSocketManagerService.isConnected()) {
             this.httpManagerService.getNotificationChannels();
         }
         else {
@@ -4363,7 +5809,7 @@ class HTTPManagerStateService extends ComponentStore {
      * Returns unique channels that have notifications posted today
      */
     getTodaysNotificationChannels() {
-        if (this.wsConnection) {
+        if (WebSocketManagerService.isConnected()) {
             this.httpManagerService.getTodaysNotificationChannels();
         }
         else {
@@ -4375,7 +5821,7 @@ class HTTPManagerStateService extends ComponentStore {
      * @param channel - Base channel name (MES- prefix added automatically)
      */
     subscribeToNotificationChannel(channel, options, user) {
-        if (this.wsConnection) {
+        if (WebSocketManagerService.isConnected()) {
             const prefixedChannel = this.prefixChannel(channel, ChannelType.NOTIFICATION);
             this.httpManagerService.subscribeToNotificationChannel(prefixedChannel, options, user);
             console.log(`📢 Subscribing to notification channel: ${prefixedChannel}`);
@@ -4389,7 +5835,7 @@ class HTTPManagerStateService extends ComponentStore {
      * @param channel - Base channel name (MES- prefix added automatically)
      */
     unsubscribeFromNotificationChannel(channel) {
-        if (this.wsConnection) {
+        if (WebSocketManagerService.isConnected()) {
             const prefixedChannel = this.prefixChannel(channel, ChannelType.NOTIFICATION);
             this.httpManagerService.unsubscribeFromNotificationChannel(prefixedChannel);
             console.log(`📢 Unsubscribing from notification channel: ${prefixedChannel}`);
@@ -4403,7 +5849,7 @@ class HTTPManagerStateService extends ComponentStore {
      * @param channel - Base channel name (MES- prefix added automatically)
      */
     sendNotification(channel, content) {
-        if (this.wsConnection) {
+        if (WebSocketManagerService.isConnected()) {
             const prefixedChannel = this.prefixChannel(channel, ChannelType.NOTIFICATION);
             this.httpManagerService.sendNotification(prefixedChannel, content);
             console.log(`📢 Sending notification to channel: ${prefixedChannel}`);
@@ -4414,6 +5860,29 @@ class HTTPManagerStateService extends ComponentStore {
     }
     // --------------------------------------------------------------------------------------------------
     // MISC
+    /**
+     * Clear/flush all records from the database table
+     * Does not clear localStorage metadata (expires info)
+     * Does not re-fetch from API - leaves state empty for manual refresh
+     */
+    clearDatabase() {
+        if (!this.hasDatabase || !this.databaseOptions?.table)
+            return;
+        const tableName = this.databaseOptions.table;
+        this.dbManagerService.clearTable(tableName).subscribe({
+            next: () => {
+                if (this.dataType === DataType.ARRAY) {
+                    this.setData$([]);
+                }
+                else {
+                    this.setData$({});
+                }
+            },
+            error: (err) => {
+                console.error(`❌ Error clearing table ${tableName}:`, err);
+            }
+        });
+    }
     isEmpty(obj) {
         return Object.keys(obj).length === 0;
     }
@@ -4424,7 +5893,7 @@ class HTTPManagerStateService extends ComponentStore {
             : { ...options.headers };
         return options;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HTTPManagerStateService, deps: [{ token: API_OPTS }, { token: "dataType" }, { token: "database" }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HTTPManagerStateService, deps: [{ token: API_OPTS }, { token: "dataType" }, { token: DatabaseStorage }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HTTPManagerStateService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HTTPManagerStateService, decorators: [{
@@ -4435,10 +5904,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 }] }, { type: undefined, decorators: [{
                     type: Inject,
                     args: ["dataType"]
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: ["database"]
-                }] }] });
+                }] }, { type: DatabaseStorage }] });
 
 class StateStorageOptions {
     constructor(store, options, model) {
@@ -5274,11 +6740,11 @@ class RequestManagerStateDemoComponent {
         this.prompts = [];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RequestManagerStateDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: RequestManagerStateDemoComponent, selector: "app-request-manager-state-demo", inputs: { server: "server", adapter: "adapter", mapper: "mapper" }, providers: [StateManagerDemoService, HTTPManagerService], viewQueries: [{ propertyName: "failedState", first: true, predicate: ["failedState"], descendants: true, static: true }, { propertyName: "pollingState", first: true, predicate: ["pollingState"], descendants: true, static: true }], ngImport: i0, template: "<div style=\"margin: 2rem;\">\n\n  <h2>\n    HTTP Request State Manager\n  </h2>\n\n  <div [formGroup]=\"requestForm\" style=\"margin-top: 2rem;\">\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>State Data Type</mat-label>\n        <mat-select formControlName=\"datatype\">\n          <mat-option value=\"ARRAY\">Array</mat-option>\n          <mat-option value=\"OBJECT\">Object</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Adapter (Model)</mat-label>\n        <mat-select formControlName=\"adapter\" #adapterSelect>\n          <mat-option>None</mat-option>\n          @for (adapter of sampleAdaptors; track adapter) {\n            <mat-option [value]=\"adapter.value\">\n              {{adapter.label}}\n            </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Mapper (Model)</mat-label>\n        <mat-select formControlName=\"mapper\" #mapperSelect>\n          <mat-option>None</mat-option>\n          @for (mapper of sampleMappers; track mapper) {\n            <mat-option [value]=\"mapper.value\">\n              {{mapper.label}}\n            </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n    </div>\n\n    @if (adapterSelect.value || mapperSelect.value) {\n      <div style=\"display: flex; margin-bottom: 2rem;\">\n        <div style=\"flex:1\" class=\"box\">\n          <h3>Adapter (Incoming)</h3>\n          @if (adapterSelect.value) {\n            <div>\n              {{ props(adapterSelect.value) | json }}\n            </div>\n          } @else {\n            No Transformation\n          }\n        </div>\n        <div style=\"flex:1\" class=\"box\">\n          <h3>Mapper (Outgoing)</h3>\n          @if (mapperSelect.value) {\n            <div>\n              {{ props(mapperSelect.value) | json }}\n            </div>\n          } @else {\n            No Transformation\n          }\n        </div>\n      </div>\n    }\n\n    <div>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>RestPath (/ delimited)</mat-label>\n        <input matInput placeholder=\"clients/list\" formControlName=\"path\">\n      </mat-form-field>\n    </div>\n    <div>\n      <div formArrayName=\"headers\">\n        @for (task of headers.controls; track task; let i = $index) {\n          <div [formGroupName]=\"i\">\n            <div style=\"display: flex; gap: .5rem\">\n              <mat-form-field appearance=\"outline\">\n                <mat-label>Key</mat-label>\n                <input matInput placeholder=\"authentication\" formControlName=\"key\">\n              </mat-form-field>\n              <mat-form-field appearance=\"outline\" style=\"flex:1\">\n                <mat-label>Value</mat-label>\n                <input matInput placeholder=\"sample\" formControlName=\"value\">\n              </mat-form-field>\n              <div style=\"margin-top: .5rem;\">\n                <button mat-icon-button (click)=\"removeHeader(i)\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n      <button mat-stroked-button (click)=\"addHeader()\">Add Header</button>\n    </div>\n    <div style=\"margin-top: 2rem; display: flex; flex-direction:column; gap: 1rem;\">\n      <div>\n        <mat-slide-toggle #failedState>Retry on Failed</mat-slide-toggle>\n        @if (failedState.checked) {\n          <div style=\"display: flex; gap: .5rem; margin-top: 1rem;\" formGroupName=\"retry\">\n            <mat-form-field appearance=\"outline\">\n              <mat-label>#of Times</mat-label>\n              <input matInput placeholder=\"3\" formControlName=\"times\" value=\"3\">\n            </mat-form-field>\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Delay Until Next</mat-label>\n              <input matInput placeholder=\"3\" formControlName=\"delay\" value=\"3\">\n            </mat-form-field>\n          </div>\n        }\n      </div>\n      <div>\n        <mat-slide-toggle #pollingState>Polling</mat-slide-toggle>\n        @if (pollingState.checked) {\n          <div>\n            <mat-form-field appearance=\"outline\" style=\"margin-top: 1rem\">\n              <mat-label>#of Seconds</mat-label>\n              <input matInput placeholder=\"3\" formControlName=\"polling\" value=\"3\">\n            </mat-form-field>\n          </div>\n        }\n      </div>\n      <div>\n        <mat-slide-toggle #DBState>Database Storage</mat-slide-toggle>\n        @if (DBState.checked) {\n          <div style=\"display: flex; gap: .5rem; margin-top: 1rem\" formGroupName=\"database\">\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Table Name</mat-label>\n              <input matInput placeholder=\"table\" formControlName=\"table\" value=\"\">\n            </mat-form-field>\n            <div>\n              <mat-form-field appearance=\"outline\">\n                <mat-label>Expires In</mat-label>\n                <mat-select formControlName=\"expiresIn\">\n                  <mat-option value=\"1m\">One Minute</mat-option>\n                  <mat-option value=\"1h\">One Hour</mat-option>\n                  <mat-option value=\"1d\">One Day</mat-option>\n                </mat-select>\n              </mat-form-field>\n            </div>\n          </div>\n        }\n      </div>\n      <div style=\"margin-top: 1rem; display: flex;\">\n        <span style=\"flex:1\"></span>\n        <button mat-stroked-button (click)=\"onSetStateOptions()\" [disabled]=\"!hasChanged\">\n          Set API Request Options\n        </button>\n      </div>\n      <div>\n        @if ((error$ | async); as error) {\n          <mat-error>\n            {{ error }}\n          </mat-error>\n        }\n      </div>\n    </div>\n  </div>\n\n  <div style=\"margin-bottom: 1rem; margin-top: 2rem;\">\n    @if ((isPending$ | async)) {\n      <mat-progress-bar mode=\"indeterminate\"\n      ></mat-progress-bar>\n    }\n    @if (pollingState.checked) {\n      <div>\n        @if (!(isPending$ | async) && (this.countdown$ | async) || -1 > 0) {\n          <mat-progress-bar mode=\"determinate\"\n            [value]=\"(this.countdown$ | async)\"\n          ></mat-progress-bar>\n        }\n      </div>\n    }\n\n  </div>\n\n  @if ((GET$ | async); as data) {\n    <div style=\"margin-top: 2rem\">\n      <div style=\"display: flex;\">\n        <h2 style=\"flex:1;\">CURRENT STATE ({{ dataType }})</h2>\n      </div>\n      @if (data.length > 1) {\n        <div>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Records</mat-label>\n            <mat-select [formControl]=\"selectedRecord\" [disabled]=\"data === null && data?.length === 0\">\n              <mat-option [value]=\"\">None</mat-option>\n              @for (item of data; track item) {\n                <mat-option [value]=\"item\">\n                  {{item.name || (item.first_name) | titlecase}}\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n      }\n      @if ((dataObservable$ | async); as dataRecord) {\n        <div>\n          @if ((selectedRecord$ | async); as record) {\n            <div>\n              {{ record | json }}\n            </div>\n          } @else {\n            No Record Selected from State\n          }\n        </div>\n      }\n      <div style=\"margin-top: 1rem;\">\n        @if (data !== null && data?.length > 0) {\n          <span>\n            State contains a Total of {{ data.length }} Records\n          </span>\n        } @else {\n          No Records\n        }\n        <div style=\"display: flex; gap: .5rem; text-align: end; justify-content: flex-end;\">\n          <button class=\"btn\" mat-stroked-button (click)=\"onClearRecords()\">Clear</button>\n        </div>\n      </div>\n    </div>\n  }\n\n\n\n\n  <div style=\"margin-top: 1rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">GET Request ({{ dataType }})</h2>\n      <div>\n        <button mat-raised-button (click)=\"onGetRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((GET_error$ | async); as get_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ get_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(GET$ | async) | jsonv\"></div> -->\n      @if ((GET$ | async); as getData) {\n        <div>{{ getData | json }}</div>\n      }\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">POST Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onCreateRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((POST_error$ | async); as post_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ post_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(POST$ | async) | jsonv\"></div> -->\n      @if ((POST$ | async); as postData) {\n        <div>{{ postData | json }}</div>\n      }\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">PUT Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onUpdateRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((PUT_error$ | async); as put_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ put_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(PUT$ | async) | jsonv\"></div> -->\n      @if ((PUT$ | async); as putData) {\n        <div>{{ putData | json }}</div>\n      }\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">DELETE Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onDeleteRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((DELETE_error$ | async); as delete_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ delete_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(DELETE$ | async) | jsonv\"></div> -->\n      @if ((DELETE$ | async); as deleteData) {\n        <div>{{ deleteData | json }}</div>\n      }\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">Streaming GET Request</h2>\n        <div 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\" [disabled]=\"hasChanged\">Request</button>\n      </div>\n    </div>\n\n    @if ((STREAM_error$ | async); as stream_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ stream_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      @if ((STREAM$ | async); as data) {\n        <div class=\"container\">\n          <table mat-table [dataSource]=\"data\" 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(', ') }} | Data received\n          </div>\n        </div>\n      }\n    </div>\n\n  </div>\n\n</div>\n", styles: [".btn{min-width:120px}.mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor;background-color:#f5f5f5}.container{height:400px;overflow:auto}.box{padding:10px;border:1px solid #ccc}\n"], dependencies: [{ kind: "directive", type: i1$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.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: "directive", type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { 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: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i10.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i11.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i12.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i13.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }, { kind: "pipe", type: i1$1.TitleCasePipe, name: "titlecase" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: RequestManagerStateDemoComponent, selector: "app-request-manager-state-demo", inputs: { server: "server", adapter: "adapter", mapper: "mapper" }, providers: [StateManagerDemoService, HTTPManagerService], viewQueries: [{ propertyName: "failedState", first: true, predicate: ["failedState"], descendants: true, static: true }, { propertyName: "pollingState", first: true, predicate: ["pollingState"], descendants: true, static: true }], ngImport: i0, template: "<div style=\"margin: 2rem;\">\n\n  <h2>\n    HTTP Request State Manager\n  </h2>\n\n  <div [formGroup]=\"requestForm\" style=\"margin-top: 2rem;\">\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>State Data Type</mat-label>\n        <mat-select formControlName=\"datatype\">\n          <mat-option value=\"ARRAY\">Array</mat-option>\n          <mat-option value=\"OBJECT\">Object</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Adapter (Model)</mat-label>\n        <mat-select formControlName=\"adapter\" #adapterSelect>\n          <mat-option>None</mat-option>\n          @for (adapter of sampleAdaptors; track adapter) {\n            <mat-option [value]=\"adapter.value\">\n              {{adapter.label}}\n            </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Mapper (Model)</mat-label>\n        <mat-select formControlName=\"mapper\" #mapperSelect>\n          <mat-option>None</mat-option>\n          @for (mapper of sampleMappers; track mapper) {\n            <mat-option [value]=\"mapper.value\">\n              {{mapper.label}}\n            </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n    </div>\n\n    @if (adapterSelect.value || mapperSelect.value) {\n      <div style=\"display: flex; margin-bottom: 2rem;\">\n        <div style=\"flex:1\" class=\"box\">\n          <h3>Adapter (Incoming)</h3>\n          @if (adapterSelect.value) {\n            <div>\n              {{ props(adapterSelect.value) | json }}\n            </div>\n          } @else {\n            No Transformation\n          }\n        </div>\n        <div style=\"flex:1\" class=\"box\">\n          <h3>Mapper (Outgoing)</h3>\n          @if (mapperSelect.value) {\n            <div>\n              {{ props(mapperSelect.value) | json }}\n            </div>\n          } @else {\n            No Transformation\n          }\n        </div>\n      </div>\n    }\n\n    <div>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>RestPath (/ delimited)</mat-label>\n        <input matInput placeholder=\"clients/list\" formControlName=\"path\">\n      </mat-form-field>\n    </div>\n    <div>\n      <div formArrayName=\"headers\">\n        @for (task of headers.controls; track task; let i = $index) {\n          <div [formGroupName]=\"i\">\n            <div style=\"display: flex; gap: .5rem\">\n              <mat-form-field appearance=\"outline\">\n                <mat-label>Key</mat-label>\n                <input matInput placeholder=\"authentication\" formControlName=\"key\">\n              </mat-form-field>\n              <mat-form-field appearance=\"outline\" style=\"flex:1\">\n                <mat-label>Value</mat-label>\n                <input matInput placeholder=\"sample\" formControlName=\"value\">\n              </mat-form-field>\n              <div style=\"margin-top: .5rem;\">\n                <button mat-icon-button (click)=\"removeHeader(i)\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n      <button mat-stroked-button (click)=\"addHeader()\">Add Header</button>\n    </div>\n    <div style=\"margin-top: 2rem; display: flex; flex-direction:column; gap: 1rem;\">\n      <div>\n        <mat-slide-toggle #failedState>Retry on Failed</mat-slide-toggle>\n        @if (failedState.checked) {\n          <div style=\"display: flex; gap: .5rem; margin-top: 1rem;\" formGroupName=\"retry\">\n            <mat-form-field appearance=\"outline\">\n              <mat-label>#of Times</mat-label>\n              <input matInput placeholder=\"3\" formControlName=\"times\" value=\"3\">\n            </mat-form-field>\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Delay Until Next</mat-label>\n              <input matInput placeholder=\"3\" formControlName=\"delay\" value=\"3\">\n            </mat-form-field>\n          </div>\n        }\n      </div>\n      <div>\n        <mat-slide-toggle #pollingState>Polling</mat-slide-toggle>\n        @if (pollingState.checked) {\n          <div>\n            <mat-form-field appearance=\"outline\" style=\"margin-top: 1rem\">\n              <mat-label>#of Seconds</mat-label>\n              <input matInput placeholder=\"3\" formControlName=\"polling\" value=\"3\">\n            </mat-form-field>\n          </div>\n        }\n      </div>\n      <div>\n        <mat-slide-toggle #DBState>Database Storage</mat-slide-toggle>\n        @if (DBState.checked) {\n          <div style=\"display: flex; gap: .5rem; margin-top: 1rem\" formGroupName=\"database\">\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Table Name</mat-label>\n              <input matInput placeholder=\"table\" formControlName=\"table\" value=\"\">\n            </mat-form-field>\n            <div>\n              <mat-form-field appearance=\"outline\">\n                <mat-label>Expires In</mat-label>\n                <mat-select formControlName=\"expiresIn\">\n                  <mat-option value=\"1m\">One Minute</mat-option>\n                  <mat-option value=\"1h\">One Hour</mat-option>\n                  <mat-option value=\"1d\">One Day</mat-option>\n                </mat-select>\n              </mat-form-field>\n            </div>\n          </div>\n        }\n      </div>\n      <div style=\"margin-top: 1rem; display: flex;\">\n        <span style=\"flex:1\"></span>\n        <button mat-stroked-button (click)=\"onSetStateOptions()\" [disabled]=\"!hasChanged\">\n          Set API Request Options\n        </button>\n      </div>\n      <div>\n        @if ((error$ | async); as error) {\n          <mat-error>\n            {{ error }}\n          </mat-error>\n        }\n      </div>\n    </div>\n  </div>\n\n  <div style=\"margin-bottom: 1rem; margin-top: 2rem;\">\n    @if ((isPending$ | async)) {\n      <mat-progress-bar mode=\"indeterminate\"\n      ></mat-progress-bar>\n    }\n    @if (pollingState.checked) {\n      <div>\n        @if (!(isPending$ | async) && (this.countdown$ | async) || -1 > 0) {\n          <mat-progress-bar mode=\"determinate\"\n            [value]=\"(this.countdown$ | async)\"\n          ></mat-progress-bar>\n        }\n      </div>\n    }\n\n  </div>\n\n  @if ((GET$ | async); as data) {\n    <div style=\"margin-top: 2rem\">\n      <div style=\"display: flex;\">\n        <h2 style=\"flex:1;\">CURRENT STATE ({{ dataType }})</h2>\n      </div>\n      @if (data.length > 1) {\n        <div>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Records</mat-label>\n            <mat-select [formControl]=\"selectedRecord\" [disabled]=\"data === null && data?.length === 0\">\n              <mat-option [value]=\"\">None</mat-option>\n              @for (item of data; track item) {\n                <mat-option [value]=\"item\">\n                  {{item.name || (item.first_name) | titlecase}}\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n      }\n      @if ((dataObservable$ | async); as dataRecord) {\n        <div>\n          @if ((selectedRecord$ | async); as record) {\n            <div>\n              {{ record | json }}\n            </div>\n          } @else {\n            No Record Selected from State\n          }\n        </div>\n      }\n      <div style=\"margin-top: 1rem;\">\n        @if (data !== null && data?.length > 0) {\n          <span>\n            State contains a Total of {{ data.length }} Records\n          </span>\n        } @else {\n          No Records\n        }\n        <div style=\"display: flex; gap: .5rem; text-align: end; justify-content: flex-end;\">\n          <button class=\"btn\" mat-stroked-button (click)=\"onClearRecords()\">Clear</button>\n        </div>\n      </div>\n    </div>\n  }\n\n\n\n\n  <div style=\"margin-top: 1rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">GET Request ({{ dataType }})</h2>\n      <div>\n        <button mat-raised-button (click)=\"onGetRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((GET_error$ | async); as get_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ get_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(GET$ | async) | jsonv\"></div> -->\n      @if ((GET$ | async); as getData) {\n        <div>{{ getData | json }}</div>\n      }\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">POST Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onCreateRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((POST_error$ | async); as post_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ post_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(POST$ | async) | jsonv\"></div> -->\n      @if ((POST$ | async); as postData) {\n        <div>{{ postData | json }}</div>\n      }\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">PUT Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onUpdateRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((PUT_error$ | async); as put_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ put_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(PUT$ | async) | jsonv\"></div> -->\n      @if ((PUT$ | async); as putData) {\n        <div>{{ putData | json }}</div>\n      }\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">DELETE Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onDeleteRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((DELETE_error$ | async); as delete_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ delete_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(DELETE$ | async) | jsonv\"></div> -->\n      @if ((DELETE$ | async); as deleteData) {\n        <div>{{ deleteData | json }}</div>\n      }\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">Streaming GET Request</h2>\n        <div 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\" [disabled]=\"hasChanged\">Request</button>\n      </div>\n    </div>\n\n    @if ((STREAM_error$ | async); as stream_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ stream_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      @if ((STREAM$ | async); as data) {\n        <div class=\"container\">\n          <table mat-table [dataSource]=\"data\" 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(', ') }} | Data received\n          </div>\n        </div>\n      }\n    </div>\n\n  </div>\n\n</div>\n", styles: [".btn{min-width:120px}.mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor;background-color:#f5f5f5}.container{height:400px;overflow:auto}.box{padding:10px;border:1px solid #ccc}\n"], dependencies: [{ kind: "directive", type: i1$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.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: "directive", type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { 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: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i10.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i11.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i12.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i13.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }, { kind: "pipe", type: i1$1.TitleCasePipe, name: "titlecase" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RequestManagerStateDemoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-request-manager-state-demo', providers: [StateManagerDemoService, HTTPManagerService], standalone: false, template: "<div style=\"margin: 2rem;\">\n\n  <h2>\n    HTTP Request State Manager\n  </h2>\n\n  <div [formGroup]=\"requestForm\" style=\"margin-top: 2rem;\">\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>State Data Type</mat-label>\n        <mat-select formControlName=\"datatype\">\n          <mat-option value=\"ARRAY\">Array</mat-option>\n          <mat-option value=\"OBJECT\">Object</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Adapter (Model)</mat-label>\n        <mat-select formControlName=\"adapter\" #adapterSelect>\n          <mat-option>None</mat-option>\n          @for (adapter of sampleAdaptors; track adapter) {\n            <mat-option [value]=\"adapter.value\">\n              {{adapter.label}}\n            </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Mapper (Model)</mat-label>\n        <mat-select formControlName=\"mapper\" #mapperSelect>\n          <mat-option>None</mat-option>\n          @for (mapper of sampleMappers; track mapper) {\n            <mat-option [value]=\"mapper.value\">\n              {{mapper.label}}\n            </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n    </div>\n\n    @if (adapterSelect.value || mapperSelect.value) {\n      <div style=\"display: flex; margin-bottom: 2rem;\">\n        <div style=\"flex:1\" class=\"box\">\n          <h3>Adapter (Incoming)</h3>\n          @if (adapterSelect.value) {\n            <div>\n              {{ props(adapterSelect.value) | json }}\n            </div>\n          } @else {\n            No Transformation\n          }\n        </div>\n        <div style=\"flex:1\" class=\"box\">\n          <h3>Mapper (Outgoing)</h3>\n          @if (mapperSelect.value) {\n            <div>\n              {{ props(mapperSelect.value) | json }}\n            </div>\n          } @else {\n            No Transformation\n          }\n        </div>\n      </div>\n    }\n\n    <div>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>RestPath (/ delimited)</mat-label>\n        <input matInput placeholder=\"clients/list\" formControlName=\"path\">\n      </mat-form-field>\n    </div>\n    <div>\n      <div formArrayName=\"headers\">\n        @for (task of headers.controls; track task; let i = $index) {\n          <div [formGroupName]=\"i\">\n            <div style=\"display: flex; gap: .5rem\">\n              <mat-form-field appearance=\"outline\">\n                <mat-label>Key</mat-label>\n                <input matInput placeholder=\"authentication\" formControlName=\"key\">\n              </mat-form-field>\n              <mat-form-field appearance=\"outline\" style=\"flex:1\">\n                <mat-label>Value</mat-label>\n                <input matInput placeholder=\"sample\" formControlName=\"value\">\n              </mat-form-field>\n              <div style=\"margin-top: .5rem;\">\n                <button mat-icon-button (click)=\"removeHeader(i)\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n      <button mat-stroked-button (click)=\"addHeader()\">Add Header</button>\n    </div>\n    <div style=\"margin-top: 2rem; display: flex; flex-direction:column; gap: 1rem;\">\n      <div>\n        <mat-slide-toggle #failedState>Retry on Failed</mat-slide-toggle>\n        @if (failedState.checked) {\n          <div style=\"display: flex; gap: .5rem; margin-top: 1rem;\" formGroupName=\"retry\">\n            <mat-form-field appearance=\"outline\">\n              <mat-label>#of Times</mat-label>\n              <input matInput placeholder=\"3\" formControlName=\"times\" value=\"3\">\n            </mat-form-field>\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Delay Until Next</mat-label>\n              <input matInput placeholder=\"3\" formControlName=\"delay\" value=\"3\">\n            </mat-form-field>\n          </div>\n        }\n      </div>\n      <div>\n        <mat-slide-toggle #pollingState>Polling</mat-slide-toggle>\n        @if (pollingState.checked) {\n          <div>\n            <mat-form-field appearance=\"outline\" style=\"margin-top: 1rem\">\n              <mat-label>#of Seconds</mat-label>\n              <input matInput placeholder=\"3\" formControlName=\"polling\" value=\"3\">\n            </mat-form-field>\n          </div>\n        }\n      </div>\n      <div>\n        <mat-slide-toggle #DBState>Database Storage</mat-slide-toggle>\n        @if (DBState.checked) {\n          <div style=\"display: flex; gap: .5rem; margin-top: 1rem\" formGroupName=\"database\">\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Table Name</mat-label>\n              <input matInput placeholder=\"table\" formControlName=\"table\" value=\"\">\n            </mat-form-field>\n            <div>\n              <mat-form-field appearance=\"outline\">\n                <mat-label>Expires In</mat-label>\n                <mat-select formControlName=\"expiresIn\">\n                  <mat-option value=\"1m\">One Minute</mat-option>\n                  <mat-option value=\"1h\">One Hour</mat-option>\n                  <mat-option value=\"1d\">One Day</mat-option>\n                </mat-select>\n              </mat-form-field>\n            </div>\n          </div>\n        }\n      </div>\n      <div style=\"margin-top: 1rem; display: flex;\">\n        <span style=\"flex:1\"></span>\n        <button mat-stroked-button (click)=\"onSetStateOptions()\" [disabled]=\"!hasChanged\">\n          Set API Request Options\n        </button>\n      </div>\n      <div>\n        @if ((error$ | async); as error) {\n          <mat-error>\n            {{ error }}\n          </mat-error>\n        }\n      </div>\n    </div>\n  </div>\n\n  <div style=\"margin-bottom: 1rem; margin-top: 2rem;\">\n    @if ((isPending$ | async)) {\n      <mat-progress-bar mode=\"indeterminate\"\n      ></mat-progress-bar>\n    }\n    @if (pollingState.checked) {\n      <div>\n        @if (!(isPending$ | async) && (this.countdown$ | async) || -1 > 0) {\n          <mat-progress-bar mode=\"determinate\"\n            [value]=\"(this.countdown$ | async)\"\n          ></mat-progress-bar>\n        }\n      </div>\n    }\n\n  </div>\n\n  @if ((GET$ | async); as data) {\n    <div style=\"margin-top: 2rem\">\n      <div style=\"display: flex;\">\n        <h2 style=\"flex:1;\">CURRENT STATE ({{ dataType }})</h2>\n      </div>\n      @if (data.length > 1) {\n        <div>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Records</mat-label>\n            <mat-select [formControl]=\"selectedRecord\" [disabled]=\"data === null && data?.length === 0\">\n              <mat-option [value]=\"\">None</mat-option>\n              @for (item of data; track item) {\n                <mat-option [value]=\"item\">\n                  {{item.name || (item.first_name) | titlecase}}\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n      }\n      @if ((dataObservable$ | async); as dataRecord) {\n        <div>\n          @if ((selectedRecord$ | async); as record) {\n            <div>\n              {{ record | json }}\n            </div>\n          } @else {\n            No Record Selected from State\n          }\n        </div>\n      }\n      <div style=\"margin-top: 1rem;\">\n        @if (data !== null && data?.length > 0) {\n          <span>\n            State contains a Total of {{ data.length }} Records\n          </span>\n        } @else {\n          No Records\n        }\n        <div style=\"display: flex; gap: .5rem; text-align: end; justify-content: flex-end;\">\n          <button class=\"btn\" mat-stroked-button (click)=\"onClearRecords()\">Clear</button>\n        </div>\n      </div>\n    </div>\n  }\n\n\n\n\n  <div style=\"margin-top: 1rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">GET Request ({{ dataType }})</h2>\n      <div>\n        <button mat-raised-button (click)=\"onGetRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((GET_error$ | async); as get_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ get_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(GET$ | async) | jsonv\"></div> -->\n      @if ((GET$ | async); as getData) {\n        <div>{{ getData | json }}</div>\n      }\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">POST Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onCreateRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((POST_error$ | async); as post_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ post_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(POST$ | async) | jsonv\"></div> -->\n      @if ((POST$ | async); as postData) {\n        <div>{{ postData | json }}</div>\n      }\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">PUT Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onUpdateRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((PUT_error$ | async); as put_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ put_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(PUT$ | async) | jsonv\"></div> -->\n      @if ((PUT$ | async); as putData) {\n        <div>{{ putData | json }}</div>\n      }\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">DELETE Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onDeleteRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((DELETE_error$ | async); as delete_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ delete_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(DELETE$ | async) | jsonv\"></div> -->\n      @if ((DELETE$ | async); as deleteData) {\n        <div>{{ deleteData | json }}</div>\n      }\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">Streaming GET Request</h2>\n        <div 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\" [disabled]=\"hasChanged\">Request</button>\n      </div>\n    </div>\n\n    @if ((STREAM_error$ | async); as stream_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ stream_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      @if ((STREAM$ | async); as data) {\n        <div class=\"container\">\n          <table mat-table [dataSource]=\"data\" 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(', ') }} | Data received\n          </div>\n        </div>\n      }\n    </div>\n\n  </div>\n\n</div>\n", styles: [".btn{min-width:120px}.mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor;background-color:#f5f5f5}.container{height:400px;overflow:auto}.box{padding:10px;border:1px solid #ccc}\n"] }]
+            args: [{ selector: 'app-request-manager-state-demo', providers: [StateManagerDemoService, HTTPManagerService], standalone: false, template: "<div style=\"margin: 2rem;\">\n\n  <h2>\n    HTTP Request State Manager\n  </h2>\n\n  <div [formGroup]=\"requestForm\" style=\"margin-top: 2rem;\">\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>State Data Type</mat-label>\n        <mat-select formControlName=\"datatype\">\n          <mat-option value=\"ARRAY\">Array</mat-option>\n          <mat-option value=\"OBJECT\">Object</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Adapter (Model)</mat-label>\n        <mat-select formControlName=\"adapter\" #adapterSelect>\n          <mat-option>None</mat-option>\n          @for (adapter of sampleAdaptors; track adapter) {\n            <mat-option [value]=\"adapter.value\">\n              {{adapter.label}}\n            </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Mapper (Model)</mat-label>\n        <mat-select formControlName=\"mapper\" #mapperSelect>\n          <mat-option>None</mat-option>\n          @for (mapper of sampleMappers; track mapper) {\n            <mat-option [value]=\"mapper.value\">\n              {{mapper.label}}\n            </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n    </div>\n\n    @if (adapterSelect.value || mapperSelect.value) {\n      <div style=\"display: flex; margin-bottom: 2rem;\">\n        <div style=\"flex:1\" class=\"box\">\n          <h3>Adapter (Incoming)</h3>\n          @if (adapterSelect.value) {\n            <div>\n              {{ props(adapterSelect.value) | json }}\n            </div>\n          } @else {\n            No Transformation\n          }\n        </div>\n        <div style=\"flex:1\" class=\"box\">\n          <h3>Mapper (Outgoing)</h3>\n          @if (mapperSelect.value) {\n            <div>\n              {{ props(mapperSelect.value) | json }}\n            </div>\n          } @else {\n            No Transformation\n          }\n        </div>\n      </div>\n    }\n\n    <div>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>RestPath (/ delimited)</mat-label>\n        <input matInput placeholder=\"clients/list\" formControlName=\"path\">\n      </mat-form-field>\n    </div>\n    <div>\n      <div formArrayName=\"headers\">\n        @for (task of headers.controls; track task; let i = $index) {\n          <div [formGroupName]=\"i\">\n            <div style=\"display: flex; gap: .5rem\">\n              <mat-form-field appearance=\"outline\">\n                <mat-label>Key</mat-label>\n                <input matInput placeholder=\"authentication\" formControlName=\"key\">\n              </mat-form-field>\n              <mat-form-field appearance=\"outline\" style=\"flex:1\">\n                <mat-label>Value</mat-label>\n                <input matInput placeholder=\"sample\" formControlName=\"value\">\n              </mat-form-field>\n              <div style=\"margin-top: .5rem;\">\n                <button mat-icon-button (click)=\"removeHeader(i)\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n      <button mat-stroked-button (click)=\"addHeader()\">Add Header</button>\n    </div>\n    <div style=\"margin-top: 2rem; display: flex; flex-direction:column; gap: 1rem;\">\n      <div>\n        <mat-slide-toggle #failedState>Retry on Failed</mat-slide-toggle>\n        @if (failedState.checked) {\n          <div style=\"display: flex; gap: .5rem; margin-top: 1rem;\" formGroupName=\"retry\">\n            <mat-form-field appearance=\"outline\">\n              <mat-label>#of Times</mat-label>\n              <input matInput placeholder=\"3\" formControlName=\"times\" value=\"3\">\n            </mat-form-field>\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Delay Until Next</mat-label>\n              <input matInput placeholder=\"3\" formControlName=\"delay\" value=\"3\">\n            </mat-form-field>\n          </div>\n        }\n      </div>\n      <div>\n        <mat-slide-toggle #pollingState>Polling</mat-slide-toggle>\n        @if (pollingState.checked) {\n          <div>\n            <mat-form-field appearance=\"outline\" style=\"margin-top: 1rem\">\n              <mat-label>#of Seconds</mat-label>\n              <input matInput placeholder=\"3\" formControlName=\"polling\" value=\"3\">\n            </mat-form-field>\n          </div>\n        }\n      </div>\n      <div>\n        <mat-slide-toggle #DBState>Database Storage</mat-slide-toggle>\n        @if (DBState.checked) {\n          <div style=\"display: flex; gap: .5rem; margin-top: 1rem\" formGroupName=\"database\">\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Table Name</mat-label>\n              <input matInput placeholder=\"table\" formControlName=\"table\" value=\"\">\n            </mat-form-field>\n            <div>\n              <mat-form-field appearance=\"outline\">\n                <mat-label>Expires In</mat-label>\n                <mat-select formControlName=\"expiresIn\">\n                  <mat-option value=\"1m\">One Minute</mat-option>\n                  <mat-option value=\"1h\">One Hour</mat-option>\n                  <mat-option value=\"1d\">One Day</mat-option>\n                </mat-select>\n              </mat-form-field>\n            </div>\n          </div>\n        }\n      </div>\n      <div style=\"margin-top: 1rem; display: flex;\">\n        <span style=\"flex:1\"></span>\n        <button mat-stroked-button (click)=\"onSetStateOptions()\" [disabled]=\"!hasChanged\">\n          Set API Request Options\n        </button>\n      </div>\n      <div>\n        @if ((error$ | async); as error) {\n          <mat-error>\n            {{ error }}\n          </mat-error>\n        }\n      </div>\n    </div>\n  </div>\n\n  <div style=\"margin-bottom: 1rem; margin-top: 2rem;\">\n    @if ((isPending$ | async)) {\n      <mat-progress-bar mode=\"indeterminate\"\n      ></mat-progress-bar>\n    }\n    @if (pollingState.checked) {\n      <div>\n        @if (!(isPending$ | async) && (this.countdown$ | async) || -1 > 0) {\n          <mat-progress-bar mode=\"determinate\"\n            [value]=\"(this.countdown$ | async)\"\n          ></mat-progress-bar>\n        }\n      </div>\n    }\n\n  </div>\n\n  @if ((GET$ | async); as data) {\n    <div style=\"margin-top: 2rem\">\n      <div style=\"display: flex;\">\n        <h2 style=\"flex:1;\">CURRENT STATE ({{ dataType }})</h2>\n      </div>\n      @if (data.length > 1) {\n        <div>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Records</mat-label>\n            <mat-select [formControl]=\"selectedRecord\" [disabled]=\"data === null && data?.length === 0\">\n              <mat-option [value]=\"\">None</mat-option>\n              @for (item of data; track item) {\n                <mat-option [value]=\"item\">\n                  {{item.name || (item.first_name) | titlecase}}\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n      }\n      @if ((dataObservable$ | async); as dataRecord) {\n        <div>\n          @if ((selectedRecord$ | async); as record) {\n            <div>\n              {{ record | json }}\n            </div>\n          } @else {\n            No Record Selected from State\n          }\n        </div>\n      }\n      <div style=\"margin-top: 1rem;\">\n        @if (data !== null && data?.length > 0) {\n          <span>\n            State contains a Total of {{ data.length }} Records\n          </span>\n        } @else {\n          No Records\n        }\n        <div style=\"display: flex; gap: .5rem; text-align: end; justify-content: flex-end;\">\n          <button class=\"btn\" mat-stroked-button (click)=\"onClearRecords()\">Clear</button>\n        </div>\n      </div>\n    </div>\n  }\n\n\n\n\n  <div style=\"margin-top: 1rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">GET Request ({{ dataType }})</h2>\n      <div>\n        <button mat-raised-button (click)=\"onGetRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((GET_error$ | async); as get_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ get_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(GET$ | async) | jsonv\"></div> -->\n      @if ((GET$ | async); as getData) {\n        <div>{{ getData | json }}</div>\n      }\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">POST Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onCreateRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((POST_error$ | async); as post_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ post_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(POST$ | async) | jsonv\"></div> -->\n      @if ((POST$ | async); as postData) {\n        <div>{{ postData | json }}</div>\n      }\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">PUT Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onUpdateRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((PUT_error$ | async); as put_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ put_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(PUT$ | async) | jsonv\"></div> -->\n      @if ((PUT$ | async); as putData) {\n        <div>{{ putData | json }}</div>\n      }\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">DELETE Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onDeleteRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((DELETE_error$ | async); as delete_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ delete_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(DELETE$ | async) | jsonv\"></div> -->\n      @if ((DELETE$ | async); as deleteData) {\n        <div>{{ deleteData | json }}</div>\n      }\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">Streaming GET Request</h2>\n        <div 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\" [disabled]=\"hasChanged\">Request</button>\n      </div>\n    </div>\n\n    @if ((STREAM_error$ | async); as stream_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ stream_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      @if ((STREAM$ | async); as data) {\n        <div class=\"container\">\n          <table mat-table [dataSource]=\"data\" 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(', ') }} | Data received\n          </div>\n        </div>\n      }\n    </div>\n\n  </div>\n\n</div>\n", styles: [".btn{min-width:120px}.mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor;background-color:#f5f5f5}.container{height:400px;overflow:auto}.box{padding:10px;border:1px solid #ccc}\n"] }]
         }], ctorParameters: () => [], propDecorators: { server: [{
                 type: Input
             }], adapter: [{
@@ -5822,17 +7288,25 @@ class StateServiceDemo extends HTTPManagerStateService {
     }
     /**
      * Initialize WebSocket connection with server configuration
+     * @param server - Backend server URL
+     * @param wsServer - WebSocket server URL
+     * @param jwtToken - JWT authentication token
+     * @param user - User information
+     * @param path - Path for constructing channel name (e.g., ['ai','tests'])
      */
-    updateConnection(server, wsServer, jwtToken, user) {
+    updateConnection(server, wsServer, jwtToken, user, path = ['ai', 'tests']) {
+        // Construct channel name from path: ['ai','tests'] → 'ai/tests'
+        const channelId = path.join('/');
         this.setApiRequestOptions({
             server,
+            path, // Set the path for HTTP requests
             retry: RetryOptions.adapt({
                 times: 3,
                 delay: 1,
             }),
             adapter: OIDCClient.adapt,
             ws: {
-                id: 'USERS123',
+                id: channelId, // Use path-based channel ID instead of hardcoded 'USERS123'
                 wsServer,
                 jwtToken,
                 user,
@@ -6157,7 +7631,7 @@ class StateDataRequestService extends HTTPManagerStateService {
         this.nextRetry$ = this.wsNextRetry$;
         this.path = ['ai', 'tests'];
     }
-    updateConnection(server, wsServer, jwtToken, user, path = [], wsChannel = '') {
+    updateConnection(server, wsServer, jwtToken, user, path = []) {
         this.path = path;
         this.setApiRequestOptions({
             server,
@@ -6167,7 +7641,7 @@ class StateDataRequestService extends HTTPManagerStateService {
             }),
             adapter: OIDCClient.adapt,
             ws: {
-                id: wsChannel,
+                id: this.path.join('/'),
                 wsServer,
                 jwtToken,
                 user, // general info about user
@@ -6218,7 +7692,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 class WsDataControlComponent {
     constructor() {
         this.path = ['ai', 'tests'];
-        this.wsChannel = '';
         this.stateDataRequestService = inject(StateDataRequestService);
         this.user$ = this.stateDataRequestService.user$;
         this.users$ = this.stateDataRequestService.userList$;
@@ -6230,7 +7703,7 @@ class WsDataControlComponent {
         };
     }
     ngOnInit() {
-        this.stateDataRequestService.updateConnection(this.server, this.wsServer, this.jwtToken, this.user, this.path, this.wsChannel);
+        this.stateDataRequestService.updateConnection(this.server, this.wsServer, this.jwtToken, this.user, this.path);
         this.stateDataRequestService.getData();
     }
     onGetData() {
@@ -6255,11 +7728,11 @@ class WsDataControlComponent {
         this.stateDataRequestService.deleteData(lastRec);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WsDataControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: WsDataControlComponent, selector: "app-ws-data-control", inputs: { server: "server", wsServer: "wsServer", jwtToken: "jwtToken", user: "user", path: "path", wsChannel: "wsChannel" }, ngImport: i0, template: "@if ((data$ | async); as data) {\n  <div style=\"margin: 1rem;\">\n    @if ((users$ |async); as users) {\n      <div>\n        @if (users.length > 0) {\n          <h3 style=\"margin: 0;\">Connected Users</h3>\n        } @else {\n          <h3 style=\"margin: 0;\">No Users</h3>\n        }\n        <mat-chip-set>\n          @for (user of users; track user.sessionId) {\n            <mat-chip\n              [class.user-chip--primary]=\"isUser(user, (user$ | async))\"\n              [style.color]=\"isUser(user, (user$ | async)) ? '#fff' : null\"\n              [disableRipple]=\"true\"\n            >\n              {{ user.name }}\n            </mat-chip>\n          }\n        </mat-chip-set>\n      </div>\n    }\n    <div style=\"margin-top: 1rem; margin-bottom: 1rem;\">\n      <mat-divider></mat-divider>\n    </div>\n\n    <div class=\"box\" style=\"margin-bottom: 1rem;\" *ngIf=\"(userAction$ | async) as userAction\">\n      {{ userAction?.content?.user?.name }} has {{ userAction?.content?.method }}\n    </div>\n\n    <h3 style=\"margin: 0;\">Data Actions</h3>\n    <div style=\"display: flex; gap: 1rem; margin-bottom: 1rem;\">\n      <button mat-stroked-button (click)=\"onGetData()\">Get Data</button>\n      <div style=\"flex:1\"></div>\n      <button mat-stroked-button color=\"accent\" (click)=\"onUpdateData(data)\">Update Data</button>\n      <button mat-stroked-button color=\"warn\" (click)=\"onRemoveData(data)\">Remove Data</button>\n      <button mat-stroked-button color=\"primary\" (click)=\"onAddData()\">Add Data</button>\n    </div>\n    @if (data.length > 0) {\n      <div>\n        <table mat-table [dataSource]=\"data\" style=\"border: 1px solid grey;\">\n          <ng-container matColumnDef=\"id\">\n            <th mat-header-cell *matHeaderCellDef> ID </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.id}} </td>\n          </ng-container>\n          <ng-container matColumnDef=\"spiffe\">\n            <th mat-header-cell *matHeaderCellDef> Spiffe </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.spiffe}} </td>\n          </ng-container>\n          <ng-container matColumnDef=\"name\">\n            <th mat-header-cell *matHeaderCellDef> Name </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.first_name}} {{element.last_name}}</td>\n          </ng-container>\n          <ng-container matColumnDef=\"email\">\n            <th mat-header-cell *matHeaderCellDef> Email </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.email}} </td>\n          </ng-container>\n          <tr mat-header-row *matHeaderRowDef=\"['id', 'spiffe', 'name', 'email']\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: ['id', 'spiffe', 'name', 'email'];\"></tr>\n        </table>\n        <div style=\"border: 1px solid grey; padding: .5rem; border-top: none;\">\n          <h3 style=\"margin: 0;\">Total Records {{ data.length }}</h3>\n        </div>\n      </div>\n    } @else {\n      <div style=\"margin-top: 1rem; font-style: italic;\">\n        No Data Available\n      </div>\n    }\n  </div>\n}\n\n", styles: [".user-chip--primary{background-color:var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5))!important;color:#fff!important;--mdc-evolution-chip-container-color: var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5));--mdc-evolution-chip-label-text-color: #fff}.user-chip--primary :is(.mdc-evolution-chip__text-label,.mdc-evolution-chip__action,.mdc-evolution-chip__cell,.mat-mdc-chip-action-label){color:#fff!important}.user-chip--primary,.user-chip--primary *{color:#fff!important}:host ::ng-deep .user-chip--primary{background-color:var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5))!important;color:#fff!important;--mdc-evolution-chip-container-color: var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5));--mdc-evolution-chip-label-text-color: #fff}:host ::ng-deep .user-chip--primary .mdc-evolution-chip__text-label,:host ::ng-deep .user-chip--primary .mdc-evolution-chip__action,:host ::ng-deep .user-chip--primary .mdc-evolution-chip__cell,:host ::ng-deep .user-chip--primary .mat-mdc-chip-action-label,:host ::ng-deep .user-chip--primary *{color:#fff!important}.box{padding:.5rem;border:1px solid rgb(174,174,13);background-color:#ececaf}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i3$1.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i12.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: WsDataControlComponent, selector: "app-ws-data-control", inputs: { server: "server", wsServer: "wsServer", jwtToken: "jwtToken", user: "user", path: "path" }, ngImport: i0, template: "@if ((data$ | async); as data) {\n  <div style=\"margin: 1rem;\">\n    @if ((users$ |async); as users) {\n      <div>\n        @if (users.length > 0) {\n          <h3 style=\"margin: 0;\">Connected Users</h3>\n        } @else {\n          <h3 style=\"margin: 0;\">No Users</h3>\n        }\n        <mat-chip-set>\n          @for (user of users; track $index) {\n            <mat-chip\n              [class.user-chip--primary]=\"isUser(user, (user$ | async))\"\n              [style.color]=\"isUser(user, (user$ | async)) ? '#fff' : null\"\n              [disableRipple]=\"true\"\n            >\n              {{ user.name || user.ldap || user.id || 'Anonymous' }}\n            </mat-chip>\n          }\n        </mat-chip-set>\n      </div>\n    }\n    <div style=\"margin-top: 1rem; margin-bottom: 1rem;\">\n      <mat-divider></mat-divider>\n    </div>\n\n    <div class=\"box\" style=\"margin-bottom: 1rem;\" *ngIf=\"(userAction$ | async) as userAction\">\n      {{ userAction?.content?.user?.name }} has {{ userAction?.content?.method }}\n    </div>\n\n    <h3 style=\"margin: 0;\">Data Actions</h3>\n    <div style=\"display: flex; gap: 1rem; margin-bottom: 1rem;\">\n      <button mat-stroked-button (click)=\"onGetData()\">Get Data</button>\n      <div style=\"flex:1\"></div>\n      <button mat-stroked-button color=\"accent\" (click)=\"onUpdateData(data)\">Update Data</button>\n      <button mat-stroked-button color=\"warn\" (click)=\"onRemoveData(data)\">Remove Data</button>\n      <button mat-stroked-button color=\"primary\" (click)=\"onAddData()\">Add Data</button>\n    </div>\n    @if (data.length > 0) {\n      <div>\n        <table mat-table [dataSource]=\"data\" style=\"border: 1px solid grey;\">\n          <ng-container matColumnDef=\"id\">\n            <th mat-header-cell *matHeaderCellDef> ID </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.id}} </td>\n          </ng-container>\n          <ng-container matColumnDef=\"spiffe\">\n            <th mat-header-cell *matHeaderCellDef> Spiffe </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.spiffe}} </td>\n          </ng-container>\n          <ng-container matColumnDef=\"name\">\n            <th mat-header-cell *matHeaderCellDef> Name </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.first_name}} {{element.last_name}}</td>\n          </ng-container>\n          <ng-container matColumnDef=\"email\">\n            <th mat-header-cell *matHeaderCellDef> Email </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.email}} </td>\n          </ng-container>\n          <tr mat-header-row *matHeaderRowDef=\"['id', 'spiffe', 'name', 'email']\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: ['id', 'spiffe', 'name', 'email'];\"></tr>\n        </table>\n        <div style=\"border: 1px solid grey; padding: .5rem; border-top: none;\">\n          <h3 style=\"margin: 0;\">Total Records {{ data.length }}</h3>\n        </div>\n      </div>\n    } @else {\n      <div style=\"margin-top: 1rem; font-style: italic;\">\n        No Data Available\n      </div>\n    }\n  </div>\n}\n\n", styles: [".user-chip--primary{background-color:var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5))!important;color:#fff!important;--mdc-evolution-chip-container-color: var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5));--mdc-evolution-chip-label-text-color: #fff}.user-chip--primary :is(.mdc-evolution-chip__text-label,.mdc-evolution-chip__action,.mdc-evolution-chip__cell,.mat-mdc-chip-action-label){color:#fff!important}.user-chip--primary,.user-chip--primary *{color:#fff!important}:host ::ng-deep .user-chip--primary{background-color:var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5))!important;color:#fff!important;--mdc-evolution-chip-container-color: var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5));--mdc-evolution-chip-label-text-color: #fff}:host ::ng-deep .user-chip--primary .mdc-evolution-chip__text-label,:host ::ng-deep .user-chip--primary .mdc-evolution-chip__action,:host ::ng-deep .user-chip--primary .mdc-evolution-chip__cell,:host ::ng-deep .user-chip--primary .mat-mdc-chip-action-label,:host ::ng-deep .user-chip--primary *{color:#fff!important}.box{padding:.5rem;border:1px solid rgb(174,174,13);background-color:#ececaf}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i3$1.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i12.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WsDataControlComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-ws-data-control', standalone: false, template: "@if ((data$ | async); as data) {\n  <div style=\"margin: 1rem;\">\n    @if ((users$ |async); as users) {\n      <div>\n        @if (users.length > 0) {\n          <h3 style=\"margin: 0;\">Connected Users</h3>\n        } @else {\n          <h3 style=\"margin: 0;\">No Users</h3>\n        }\n        <mat-chip-set>\n          @for (user of users; track user.sessionId) {\n            <mat-chip\n              [class.user-chip--primary]=\"isUser(user, (user$ | async))\"\n              [style.color]=\"isUser(user, (user$ | async)) ? '#fff' : null\"\n              [disableRipple]=\"true\"\n            >\n              {{ user.name }}\n            </mat-chip>\n          }\n        </mat-chip-set>\n      </div>\n    }\n    <div style=\"margin-top: 1rem; margin-bottom: 1rem;\">\n      <mat-divider></mat-divider>\n    </div>\n\n    <div class=\"box\" style=\"margin-bottom: 1rem;\" *ngIf=\"(userAction$ | async) as userAction\">\n      {{ userAction?.content?.user?.name }} has {{ userAction?.content?.method }}\n    </div>\n\n    <h3 style=\"margin: 0;\">Data Actions</h3>\n    <div style=\"display: flex; gap: 1rem; margin-bottom: 1rem;\">\n      <button mat-stroked-button (click)=\"onGetData()\">Get Data</button>\n      <div style=\"flex:1\"></div>\n      <button mat-stroked-button color=\"accent\" (click)=\"onUpdateData(data)\">Update Data</button>\n      <button mat-stroked-button color=\"warn\" (click)=\"onRemoveData(data)\">Remove Data</button>\n      <button mat-stroked-button color=\"primary\" (click)=\"onAddData()\">Add Data</button>\n    </div>\n    @if (data.length > 0) {\n      <div>\n        <table mat-table [dataSource]=\"data\" style=\"border: 1px solid grey;\">\n          <ng-container matColumnDef=\"id\">\n            <th mat-header-cell *matHeaderCellDef> ID </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.id}} </td>\n          </ng-container>\n          <ng-container matColumnDef=\"spiffe\">\n            <th mat-header-cell *matHeaderCellDef> Spiffe </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.spiffe}} </td>\n          </ng-container>\n          <ng-container matColumnDef=\"name\">\n            <th mat-header-cell *matHeaderCellDef> Name </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.first_name}} {{element.last_name}}</td>\n          </ng-container>\n          <ng-container matColumnDef=\"email\">\n            <th mat-header-cell *matHeaderCellDef> Email </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.email}} </td>\n          </ng-container>\n          <tr mat-header-row *matHeaderRowDef=\"['id', 'spiffe', 'name', 'email']\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: ['id', 'spiffe', 'name', 'email'];\"></tr>\n        </table>\n        <div style=\"border: 1px solid grey; padding: .5rem; border-top: none;\">\n          <h3 style=\"margin: 0;\">Total Records {{ data.length }}</h3>\n        </div>\n      </div>\n    } @else {\n      <div style=\"margin-top: 1rem; font-style: italic;\">\n        No Data Available\n      </div>\n    }\n  </div>\n}\n\n", styles: [".user-chip--primary{background-color:var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5))!important;color:#fff!important;--mdc-evolution-chip-container-color: var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5));--mdc-evolution-chip-label-text-color: #fff}.user-chip--primary :is(.mdc-evolution-chip__text-label,.mdc-evolution-chip__action,.mdc-evolution-chip__cell,.mat-mdc-chip-action-label){color:#fff!important}.user-chip--primary,.user-chip--primary *{color:#fff!important}:host ::ng-deep .user-chip--primary{background-color:var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5))!important;color:#fff!important;--mdc-evolution-chip-container-color: var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5));--mdc-evolution-chip-label-text-color: #fff}:host ::ng-deep .user-chip--primary .mdc-evolution-chip__text-label,:host ::ng-deep .user-chip--primary .mdc-evolution-chip__action,:host ::ng-deep .user-chip--primary .mdc-evolution-chip__cell,:host ::ng-deep .user-chip--primary .mat-mdc-chip-action-label,:host ::ng-deep .user-chip--primary *{color:#fff!important}.box{padding:.5rem;border:1px solid rgb(174,174,13);background-color:#ececaf}\n"] }]
+            args: [{ selector: 'app-ws-data-control', standalone: false, template: "@if ((data$ | async); as data) {\n  <div style=\"margin: 1rem;\">\n    @if ((users$ |async); as users) {\n      <div>\n        @if (users.length > 0) {\n          <h3 style=\"margin: 0;\">Connected Users</h3>\n        } @else {\n          <h3 style=\"margin: 0;\">No Users</h3>\n        }\n        <mat-chip-set>\n          @for (user of users; track $index) {\n            <mat-chip\n              [class.user-chip--primary]=\"isUser(user, (user$ | async))\"\n              [style.color]=\"isUser(user, (user$ | async)) ? '#fff' : null\"\n              [disableRipple]=\"true\"\n            >\n              {{ user.name || user.ldap || user.id || 'Anonymous' }}\n            </mat-chip>\n          }\n        </mat-chip-set>\n      </div>\n    }\n    <div style=\"margin-top: 1rem; margin-bottom: 1rem;\">\n      <mat-divider></mat-divider>\n    </div>\n\n    <div class=\"box\" style=\"margin-bottom: 1rem;\" *ngIf=\"(userAction$ | async) as userAction\">\n      {{ userAction?.content?.user?.name }} has {{ userAction?.content?.method }}\n    </div>\n\n    <h3 style=\"margin: 0;\">Data Actions</h3>\n    <div style=\"display: flex; gap: 1rem; margin-bottom: 1rem;\">\n      <button mat-stroked-button (click)=\"onGetData()\">Get Data</button>\n      <div style=\"flex:1\"></div>\n      <button mat-stroked-button color=\"accent\" (click)=\"onUpdateData(data)\">Update Data</button>\n      <button mat-stroked-button color=\"warn\" (click)=\"onRemoveData(data)\">Remove Data</button>\n      <button mat-stroked-button color=\"primary\" (click)=\"onAddData()\">Add Data</button>\n    </div>\n    @if (data.length > 0) {\n      <div>\n        <table mat-table [dataSource]=\"data\" style=\"border: 1px solid grey;\">\n          <ng-container matColumnDef=\"id\">\n            <th mat-header-cell *matHeaderCellDef> ID </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.id}} </td>\n          </ng-container>\n          <ng-container matColumnDef=\"spiffe\">\n            <th mat-header-cell *matHeaderCellDef> Spiffe </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.spiffe}} </td>\n          </ng-container>\n          <ng-container matColumnDef=\"name\">\n            <th mat-header-cell *matHeaderCellDef> Name </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.first_name}} {{element.last_name}}</td>\n          </ng-container>\n          <ng-container matColumnDef=\"email\">\n            <th mat-header-cell *matHeaderCellDef> Email </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.email}} </td>\n          </ng-container>\n          <tr mat-header-row *matHeaderRowDef=\"['id', 'spiffe', 'name', 'email']\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: ['id', 'spiffe', 'name', 'email'];\"></tr>\n        </table>\n        <div style=\"border: 1px solid grey; padding: .5rem; border-top: none;\">\n          <h3 style=\"margin: 0;\">Total Records {{ data.length }}</h3>\n        </div>\n      </div>\n    } @else {\n      <div style=\"margin-top: 1rem; font-style: italic;\">\n        No Data Available\n      </div>\n    }\n  </div>\n}\n\n", styles: [".user-chip--primary{background-color:var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5))!important;color:#fff!important;--mdc-evolution-chip-container-color: var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5));--mdc-evolution-chip-label-text-color: #fff}.user-chip--primary :is(.mdc-evolution-chip__text-label,.mdc-evolution-chip__action,.mdc-evolution-chip__cell,.mat-mdc-chip-action-label){color:#fff!important}.user-chip--primary,.user-chip--primary *{color:#fff!important}:host ::ng-deep .user-chip--primary{background-color:var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5))!important;color:#fff!important;--mdc-evolution-chip-container-color: var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5));--mdc-evolution-chip-label-text-color: #fff}:host ::ng-deep .user-chip--primary .mdc-evolution-chip__text-label,:host ::ng-deep .user-chip--primary .mdc-evolution-chip__action,:host ::ng-deep .user-chip--primary .mdc-evolution-chip__cell,:host ::ng-deep .user-chip--primary .mat-mdc-chip-action-label,:host ::ng-deep .user-chip--primary *{color:#fff!important}.box{padding:.5rem;border:1px solid rgb(174,174,13);background-color:#ececaf}\n"] }]
         }], propDecorators: { server: [{
                 type: Input
             }], wsServer: [{
@@ -6270,12 +7743,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], path: [{
                 type: Input
-            }], wsChannel: [{
-                type: Input
             }] } });
 
 class WsMessagingComponent {
     constructor() {
+        this.path = ['ai', 'tests']; // Default path for channel name
         this.destroy$ = new Subject();
         this.fb = inject(FormBuilder);
         this.messageService = inject(MessageServiceDemo);
@@ -6320,11 +7792,14 @@ class WsMessagingComponent {
         return this.messages.get('content');
     }
     ngOnInit() {
-        this.stateService.updateConnection(this.server, this.wsServer, this.jwtToken, this.user);
+        this.stateService.updateConnection(this.server, this.wsServer, this.jwtToken, this.user, this.path);
         // Only trigger once when connection becomes true
         this.connectionStatus$.pipe(filter$1(status => status === true), take$1(1), takeUntil$1(this.destroy$)).subscribe(() => {
-            // Fetch existing channels when connected (user will create channels in demo)
-            this.messageService.getAllChannels();
+            // Wait a moment for subscription to be processed, then fetch channels
+            setTimeout(() => {
+                console.log('📋 Fetching channels after connection...');
+                this.messageService.getAllChannels();
+            }, 500); // 500ms delay to ensure subscription is processed
         });
         // Subscribe to latest messages and show toast notification
         this.latestCommunicationMessages$.pipe(filter$1(message => !!message), takeUntil$1(this.destroy$)).subscribe((message) => {
@@ -6428,11 +7903,11 @@ class WsMessagingComponent {
         this.content.reset();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WsMessagingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: WsMessagingComponent, selector: "app-ws-messaging", inputs: { server: "server", wsServer: "wsServer", jwtToken: "jwtToken", user: "user" }, ngImport: i0, template: "\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) {\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) {\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\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" }] }); }
 }
 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) {\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) {\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\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"] }]
         }], propDecorators: { server: [{
                 type: Input
             }], wsServer: [{
@@ -6441,6 +7916,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], user: [{
                 type: Input
+            }], path: [{
+                type: Input
             }] } });
 
 class WsNotificationsComponent {
@@ -6667,7 +8144,6 @@ class RequestManagerWsDemoComponent {
         this.stateService = inject(StateServiceDemo);
         this.fb = inject(FormBuilder);
         this.path = ['ai', 'tests'];
-        this.wsChannel = '';
         this.user$ = this.stateService.user$;
         this.attempts$ = this.stateService.wsRetryAttempts$;
         this.nextRetry$ = this.stateService.wsNextRetry$;
@@ -6676,14 +8152,14 @@ class RequestManagerWsDemoComponent {
         this.isPending$ = this.stateService.isPending$;
     }
     ngOnInit() {
-        this.stateService.updateConnection(this.server, this.wsServer, this.jwtToken, this.user);
+        this.stateService.updateConnection(this.server, this.wsServer, this.jwtToken, this.user, this.path);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RequestManagerWsDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: RequestManagerWsDemoComponent, selector: "app-request-manager-ws-demo", inputs: { server: "server", wsServer: "wsServer", jwtToken: "jwtToken", user: "user", path: "path", wsChannel: "wsChannel" }, ngImport: i0, template: "<div style=\"margin: 2rem;\">\n\n  <h2 style=\"display: flex;\">\n    <span style=\"flex:1\">HTTP Request State Manager - Websockets</span>\n    @if ((connectionStatus$ | async); as connected) {\n      <span>\n        WS -\n        <span style=\"color: green;\">Connected</span>\n      </span>\n    } @else {\n      <span style=\"color: red;\">Disconnected {{ attempts$ | async }} - {{ nextRetry$ |async }}</span>\n    }\n  </h2>\n\n  <div>\n\n    @if ((user$ | async); as userInfo) {\n      <div>\n        <mat-toolbar>\n          <div style=\"display: flex; flex:1\">\n            <div style=\"flex:1\">{{ userInfo.name }}</div>\n            <div>({{ userInfo.ldap }})</div>\n          </div>\n        </mat-toolbar>\n      </div>\n    }\n\n    @if ((isPending$ | async)) {\n      <div>\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n      </div>\n    }\n\n    <mat-tab-group animationDuration=\"0ms\" [selectedIndex]=\"1\">\n\n      <mat-tab label=\"WS - Data Control\">\n        <!-- DATA CONTROL -->\n        <app-ws-data-control\n          [server]=\"server\"\n          [wsServer]=\"wsServer\"\n          [jwtToken]=\"jwtToken\"\n          [user]=\"user\"\n          [path]=\"path\"\n          [wsChannel]=\"wsChannel\"\n        ></app-ws-data-control>\n\n      </mat-tab>\n\n      <mat-tab label=\"WS - Messaging\">\n        <!-- MESSAGING -->\n        <app-ws-messaging\n          [server]=\"server\"\n          [wsServer]=\"wsServer\"\n          [jwtToken]=\"jwtToken\"\n          [user]=\"user\"\n        ></app-ws-messaging>\n\n    </mat-tab>\n\n    <mat-tab label=\"WS - Notifications\">\n      <!-- WS - Notifications -->\n      <app-ws-notifications\n        [server]=\"server\"\n        [wsServer]=\"wsServer\"\n        [jwtToken]=\"jwtToken\"\n        [user]=\"user\"\n      ></app-ws-notifications>\n    </mat-tab>\n\n    <mat-tab label=\"WS - Chats\" [disabled]=\"true\">\n      <!-- WS - Chats -->\n      <app-ws-chats></app-ws-chats>\n    </mat-tab>\n\n    <mat-tab label=\"WS - AI Messaging\" [disabled]=\"true\">\n      <!-- WS - AI Messaging -->\n      <app-ws-ai-messaging></app-ws-ai-messaging>\n    </mat-tab>\n\n  </mat-tab-group>\n</div>\n\n</div>\n\n", styles: [""], dependencies: [{ kind: "component", type: i1$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i1$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: i10.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i3$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: WsDataControlComponent, selector: "app-ws-data-control", inputs: ["server", "wsServer", "jwtToken", "user", "path", "wsChannel"] }, { kind: "component", type: WsMessagingComponent, selector: "app-ws-messaging", inputs: ["server", "wsServer", "jwtToken", "user"] }, { kind: "component", type: WsNotificationsComponent, selector: "app-ws-notifications", inputs: ["server", "wsServer", "jwtToken", "user"] }, { kind: "component", type: WsAiMessagingComponent, selector: "app-ws-ai-messaging" }, { kind: "component", type: WsChatsComponent, selector: "app-ws-chats" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: RequestManagerWsDemoComponent, selector: "app-request-manager-ws-demo", inputs: { server: "server", wsServer: "wsServer", jwtToken: "jwtToken", user: "user", path: "path" }, ngImport: i0, template: "<div style=\"margin: 2rem;\">\n\n  <h2 style=\"display: flex;\">\n    <span style=\"flex:1\">HTTP Request State Manager - Websockets</span>\n    @if ((connectionStatus$ | async); as connected) {\n      <span>\n        WS -\n        <span style=\"color: green;\">Connected</span>\n      </span>\n    } @else {\n      <span style=\"color: red;\">Disconnected {{ attempts$ | async }} - {{ nextRetry$ |async }}</span>\n    }\n  </h2>\n\n  <div>\n\n    @if ((user$ | async); as userInfo) {\n      <div>\n        <mat-toolbar>\n          <div style=\"display: flex; flex:1\">\n            <div style=\"flex:1\">{{ userInfo.name }}</div>\n            <div>({{ userInfo.ldap }})</div>\n          </div>\n        </mat-toolbar>\n      </div>\n    }\n\n    @if ((isPending$ | async)) {\n      <div>\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n      </div>\n    }\n\n    <mat-tab-group animationDuration=\"0ms\" [selectedIndex]=\"1\">\n\n      <mat-tab label=\"WS - Data Control\">\n        <!-- DATA CONTROL -->\n        <app-ws-data-control\n          [server]=\"server\"\n          [wsServer]=\"wsServer\"\n          [jwtToken]=\"jwtToken\"\n          [user]=\"user\"\n          [path]=\"path\"\n        ></app-ws-data-control>\n\n      </mat-tab>\n\n      <mat-tab label=\"WS - Messaging\">\n        <!-- MESSAGING -->\n        <app-ws-messaging\n          [server]=\"server\"\n          [wsServer]=\"wsServer\"\n          [jwtToken]=\"jwtToken\"\n          [user]=\"user\"\n          [path]=\"path\"\n        ></app-ws-messaging>\n\n    </mat-tab>\n\n    <mat-tab label=\"WS - Notifications\">\n      <!-- WS - Notifications -->\n      <app-ws-notifications\n        [server]=\"server\"\n        [wsServer]=\"wsServer\"\n        [jwtToken]=\"jwtToken\"\n        [user]=\"user\"\n      ></app-ws-notifications>\n    </mat-tab>\n\n    <mat-tab label=\"WS - Chats\" [disabled]=\"true\">\n      <!-- WS - Chats -->\n      <app-ws-chats></app-ws-chats>\n    </mat-tab>\n\n    <mat-tab label=\"WS - AI Messaging\" [disabled]=\"true\">\n      <!-- WS - AI Messaging -->\n      <app-ws-ai-messaging></app-ws-ai-messaging>\n    </mat-tab>\n\n  </mat-tab-group>\n</div>\n\n</div>\n\n", styles: [""], dependencies: [{ kind: "component", type: i1$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i1$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: i10.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i3$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: WsDataControlComponent, selector: "app-ws-data-control", inputs: ["server", "wsServer", "jwtToken", "user", "path"] }, { kind: "component", type: WsMessagingComponent, selector: "app-ws-messaging", inputs: ["server", "wsServer", "jwtToken", "user", "path"] }, { kind: "component", type: WsNotificationsComponent, selector: "app-ws-notifications", inputs: ["server", "wsServer", "jwtToken", "user"] }, { kind: "component", type: WsAiMessagingComponent, selector: "app-ws-ai-messaging" }, { kind: "component", type: WsChatsComponent, selector: "app-ws-chats" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RequestManagerWsDemoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-request-manager-ws-demo', standalone: false, template: "<div style=\"margin: 2rem;\">\n\n  <h2 style=\"display: flex;\">\n    <span style=\"flex:1\">HTTP Request State Manager - Websockets</span>\n    @if ((connectionStatus$ | async); as connected) {\n      <span>\n        WS -\n        <span style=\"color: green;\">Connected</span>\n      </span>\n    } @else {\n      <span style=\"color: red;\">Disconnected {{ attempts$ | async }} - {{ nextRetry$ |async }}</span>\n    }\n  </h2>\n\n  <div>\n\n    @if ((user$ | async); as userInfo) {\n      <div>\n        <mat-toolbar>\n          <div style=\"display: flex; flex:1\">\n            <div style=\"flex:1\">{{ userInfo.name }}</div>\n            <div>({{ userInfo.ldap }})</div>\n          </div>\n        </mat-toolbar>\n      </div>\n    }\n\n    @if ((isPending$ | async)) {\n      <div>\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n      </div>\n    }\n\n    <mat-tab-group animationDuration=\"0ms\" [selectedIndex]=\"1\">\n\n      <mat-tab label=\"WS - Data Control\">\n        <!-- DATA CONTROL -->\n        <app-ws-data-control\n          [server]=\"server\"\n          [wsServer]=\"wsServer\"\n          [jwtToken]=\"jwtToken\"\n          [user]=\"user\"\n          [path]=\"path\"\n          [wsChannel]=\"wsChannel\"\n        ></app-ws-data-control>\n\n      </mat-tab>\n\n      <mat-tab label=\"WS - Messaging\">\n        <!-- MESSAGING -->\n        <app-ws-messaging\n          [server]=\"server\"\n          [wsServer]=\"wsServer\"\n          [jwtToken]=\"jwtToken\"\n          [user]=\"user\"\n        ></app-ws-messaging>\n\n    </mat-tab>\n\n    <mat-tab label=\"WS - Notifications\">\n      <!-- WS - Notifications -->\n      <app-ws-notifications\n        [server]=\"server\"\n        [wsServer]=\"wsServer\"\n        [jwtToken]=\"jwtToken\"\n        [user]=\"user\"\n      ></app-ws-notifications>\n    </mat-tab>\n\n    <mat-tab label=\"WS - Chats\" [disabled]=\"true\">\n      <!-- WS - Chats -->\n      <app-ws-chats></app-ws-chats>\n    </mat-tab>\n\n    <mat-tab label=\"WS - AI Messaging\" [disabled]=\"true\">\n      <!-- WS - AI Messaging -->\n      <app-ws-ai-messaging></app-ws-ai-messaging>\n    </mat-tab>\n\n  </mat-tab-group>\n</div>\n\n</div>\n\n" }]
+            args: [{ selector: 'app-request-manager-ws-demo', standalone: false, template: "<div style=\"margin: 2rem;\">\n\n  <h2 style=\"display: flex;\">\n    <span style=\"flex:1\">HTTP Request State Manager - Websockets</span>\n    @if ((connectionStatus$ | async); as connected) {\n      <span>\n        WS -\n        <span style=\"color: green;\">Connected</span>\n      </span>\n    } @else {\n      <span style=\"color: red;\">Disconnected {{ attempts$ | async }} - {{ nextRetry$ |async }}</span>\n    }\n  </h2>\n\n  <div>\n\n    @if ((user$ | async); as userInfo) {\n      <div>\n        <mat-toolbar>\n          <div style=\"display: flex; flex:1\">\n            <div style=\"flex:1\">{{ userInfo.name }}</div>\n            <div>({{ userInfo.ldap }})</div>\n          </div>\n        </mat-toolbar>\n      </div>\n    }\n\n    @if ((isPending$ | async)) {\n      <div>\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n      </div>\n    }\n\n    <mat-tab-group animationDuration=\"0ms\" [selectedIndex]=\"1\">\n\n      <mat-tab label=\"WS - Data Control\">\n        <!-- DATA CONTROL -->\n        <app-ws-data-control\n          [server]=\"server\"\n          [wsServer]=\"wsServer\"\n          [jwtToken]=\"jwtToken\"\n          [user]=\"user\"\n          [path]=\"path\"\n        ></app-ws-data-control>\n\n      </mat-tab>\n\n      <mat-tab label=\"WS - Messaging\">\n        <!-- MESSAGING -->\n        <app-ws-messaging\n          [server]=\"server\"\n          [wsServer]=\"wsServer\"\n          [jwtToken]=\"jwtToken\"\n          [user]=\"user\"\n          [path]=\"path\"\n        ></app-ws-messaging>\n\n    </mat-tab>\n\n    <mat-tab label=\"WS - Notifications\">\n      <!-- WS - Notifications -->\n      <app-ws-notifications\n        [server]=\"server\"\n        [wsServer]=\"wsServer\"\n        [jwtToken]=\"jwtToken\"\n        [user]=\"user\"\n      ></app-ws-notifications>\n    </mat-tab>\n\n    <mat-tab label=\"WS - Chats\" [disabled]=\"true\">\n      <!-- WS - Chats -->\n      <app-ws-chats></app-ws-chats>\n    </mat-tab>\n\n    <mat-tab label=\"WS - AI Messaging\" [disabled]=\"true\">\n      <!-- WS - AI Messaging -->\n      <app-ws-ai-messaging></app-ws-ai-messaging>\n    </mat-tab>\n\n  </mat-tab-group>\n</div>\n\n</div>\n\n" }]
         }], propDecorators: { server: [{
                 type: Input
             }], wsServer: [{
@@ -6694,8 +8170,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], path: [{
                 type: Input
-            }], wsChannel: [{
-                type: Input
             }] } });
 
 class Settings {
@@ -6916,7 +8390,6 @@ class HttpRequestServicesDemoComponent {
         this.jwtToken = '';
         this.server = 'http:';
         this.path = ['ai', 'tests'];
-        this.wsChannel = '';
         this.requestTypes = [
             { name: "Http Service", value: 'http_service' },
             // { name: "Http Signals Service", value: 'http_signals_service', new: true },
@@ -6937,11 +8410,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", wsChannel: "wsChannel", 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        [wsChannel]=\"wsChannel\"\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", "wsChannel"] }, { kind: "component", type: StoreStateManagerDemoComponent, selector: "app-store-state-manager-demo" }, { kind: "component", type: DatabaseDataDemoComponent, selector: "app-database-data-demo" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: HttpRequestServicesDemoComponent, selector: "app-http-request-services-demo", inputs: { wsServer: "wsServer", jwtToken: "jwtToken", server: "server", user: "user", path: "path", adapter: "adapter", mapper: "mapper" }, ngImport: i0, template: "<mat-toolbar  style=\"display:flex\">\n  <div>Http Request Manager Services</div>\n  <div style=\"flex:1\"></div>\n  <button mat-stroked-button [matMenuTriggerFor]=\"menu\">Services</button>\n  <mat-menu #menu=\"matMenu\">\n    @for (type of requestTypes; track type; let i = $index) {\n      @if (type?.divider) {\n        <div\n          style=\"margin-top: .5rem; margin-bottom: .5rem;\"\n          >\n          <mat-divider></mat-divider>\n        </div>\n      }\n      <button\n        mat-menu-item\n        (click)=\"onSelected(i)\"\n        [disabled]=\"type.disabled\"\n        >\n        {{ type.name }}\n      </button>\n    }\n\n  </mat-menu>\n</mat-toolbar>\n\n<span>\n  @switch (selectedService) {\n    @case ('http_service') {\n      <p>\n        <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n        <app-request-manager-demo\n          [server]=\"server\"\n          [adapter]=\"adapter\"\n          [mapper]=\"mapper\"\n        ></app-request-manager-demo>\n      </p>\n    }\n    <!-- <p *ngSwitchCase=\"'http_signals_service'\">\n    <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n    <app-request-signals-manager-demo></app-request-signals-manager-demo>\n  </p> -->\n  @case ('http_state_service') {\n    <p>\n      <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n      <app-request-manager-state-demo\n        [server]=\"server\"\n        [adapter]=\"adapter\"\n        [mapper]=\"mapper\"\n      ></app-request-manager-state-demo>\n    </p>\n  }\n  @case ('http_state_service_ws') {\n    <p>\n      <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n      <app-request-manager-ws-demo\n        [server]=\"server\"\n        [wsServer]=\"wsServer\"\n        [jwtToken]=\"jwtToken\"\n        [user]=\"user\"\n        [path]=\"path\"\n      ></app-request-manager-ws-demo>\n    </p>\n  }\n  @case ('database_service') {\n    <p>\n      <app-database-data-demo></app-database-data-demo>\n    </p>\n  }\n  @case ('local_storage_service') {\n    <p>\n      <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n      <app-local-storage-demo></app-local-storage-demo>\n    </p>\n  }\n  <!-- <p *ngSwitchCase=\"'local_storage_signals_service'\">\n  <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n  <app-local-storage-signals-demo></app-local-storage-signals-demo>\n</p> -->\n@case ('store_state_manager') {\n  <p>\n    <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n    <app-store-state-manager-demo></app-store-state-manager-demo>\n  </p>\n}\n@default {\n  <p>\n    Other\n  </p>\n}\n}\n</span>\n\n<ng-template #HTTP_OPTIONS>\n  @if (injectionOptions?.httpRequestOptions) {\n    <div class=\"box\">\n      <h3 style=\"font-weight: bold;\">Injection Token Detected - HTTP Options</h3>\n      {{ injectionOptions?.httpRequestOptions| json }}\n    </div>\n  }\n</ng-template>\n\n<ng-template #LOCAL_OPTIONS>\n  @if (injectionOptions?.LocalStorageOptions) {\n    <ng-container class=\"box\">\n      <div class=\"box\">\n        <h3 style=\"font-weight: bold;\">Injection Token Detected - LocalStorage Options</h3>\n        {{ injectionOptions?.LocalStorageOptions| json }}\n      </div>\n    </ng-container>\n  }\n</ng-template>\n\n\n", styles: [".box{padding:1rem;background-color:#f5f5f5;border:thin gray solid;margin-top:1rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: 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" }] }); }
 }
 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        [wsChannel]=\"wsChannel\"\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 ('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]
@@ -6955,8 +8428,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], path: [{
                 type: Input
-            }], wsChannel: [{
-                type: Input
             }], adapter: [{
                 type: Input
             }], mapper: [{
@@ -7628,5 +9099,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, WebsocketService, WithCredentialsInterceptor, countdown, createChannelName, delayedRetry, requestPolling, requestStreaming, streamAI, streamAuto, streamEvents, streamJSON, streamNDJSON };
+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 };
 //# sourceMappingURL=http-request-manager.mjs.map