http-request-manager 18.9.5 → 18.10.0

package/fesm2022/http-request-manager.mjs

@@ -1163,7 +1163,13 @@ class ChannelInfo {
         this.canSubscribe = canSubscribe;
     }
     static adapt(item) {
-        return new ChannelInfo(item?.name, item?.canSubscribe);
+        // Handle string input (backward compatibility with old server responses)
+        if (typeof item === 'string') {
+            return new ChannelInfo(item, true); // Assume subscribable
+        }
+        // Handle object input (new server responses)
+        // Default canSubscribe to true if not specified (backward compat)
+        return new ChannelInfo(item?.name, item?.canSubscribe ?? true);
     }
 }
 
@@ -2142,6 +2148,24 @@ class WebSocketManagerService {
             console.error('WebSocket is not open. Cannot unsubscribe from notification channel.');
         }
     }
+    /**
+     * Send notification to channel
+     * @param channel - Channel name (should include MES- prefix)
+     * @param content - Notification content
+     */
+    sendNotification(channel, content) {
+        if (WebSocketManagerService.socket?.readyState === WebSocket.OPEN) {
+            WebSocketManagerService.socket.send(JSON.stringify({
+                type: 'notification',
+                subscribedChannel: channel,
+                content
+            }));
+            console.log(`📢 Sent notification to channel: ${channel}`, content);
+        }
+        else {
+            console.error('WebSocket is not open. Cannot send notification.');
+        }
+    }
     // ═══════════════════════════════════════════════════════════════════════════
     // CONNECTION STATUS (Static getter for direct access)
     // ═══════════════════════════════════════════════════════════════════════════
@@ -3072,6 +3096,12 @@ class HTTPManagerService extends RequestService {
     unsubscribeFromNotificationChannel(channel) {
         this.wsManager.unsubscribeFromNotificationChannel(channel);
     }
+    /**
+     * Send notification to channel
+     */
+    sendNotification(channel, content) {
+        this.wsManager.sendNotification(channel, content);
+    }
     // REQUESTS
     getRequest(options, params) {
         this.isPending.next(true);
@@ -3173,7 +3203,9 @@ class HTTPManagerService extends RequestService {
                 }
                 return throwError(() => err);
             }));
-        return polling$.pipe(catchError((err, caught) => {
+        return polling$.pipe((options?.retry && options.retry.times > 0)
+            ? delayedRetry((options.retry.delay || 3) * 1000, (options.retry.times || 0) - 1)
+            : (source) => source, catchError((err, caught) => {
             if (err instanceof HttpErrorResponse) {
                 this.error.next(true);
                 if (isPolling)
@@ -3181,9 +3213,7 @@ class HTTPManagerService extends RequestService {
                 return this.handleError(err);
             }
             return throwError(() => err);
-        }), (options?.retry && options.retry.times > 0)
-            ? delayedRetry((options.retry.delay || 3) * 1000, (options.retry.times || 0) - 1)
-            : (source) => source);
+        }));
     }
     createRequest(func, options, data) {
         const dataItem = this.prepareRequestData(options, data, func.name);
@@ -3524,7 +3554,9 @@ class HTTPManagerSignalsService extends RequestSignalsService {
                 }
                 return throwError(() => err);
             }));
-        return polling$.pipe(catchError((err, caught) => {
+        return polling$.pipe(options?.retry && options.retry.times > 0
+            ? delayedRetry((options.retry.delay || 3) * 1000, (options.retry.times || 0) - 1)
+            : (source) => source, catchError((err, caught) => {
             if (err instanceof HttpErrorResponse) {
                 this.error.set(true);
                 if (isPolling)
@@ -3532,9 +3564,7 @@ class HTTPManagerSignalsService extends RequestSignalsService {
                 return this.handleError(err);
             }
             return throwError(() => err);
-        }), options?.retry && options.retry.times > 0
-            ? delayedRetry((options.retry.delay || 3) * 1000, (options.retry.times || 0) - 1)
-            : (source) => source);
+        }));
     }
     createRequest(func, options, data) {
         const dataItem = this.prepareRequestData(options, data, func.name);
@@ -4856,22 +4886,41 @@ class HTTPManagerStateService extends ComponentStore {
         this.latestCommunicationMessages$ = this.latestCommunicationMessages.asObservable();
         this.userAction = new BehaviorSubject(null);
         this.userAction$ = this.userAction.asObservable();
+        // Store our own sessionId for filtering out own messages
+        this.ownSessionId = null;
         this.wsOptions = WSOptions.adapt();
         // Expose raw WS connection status directly to UI (from singleton WebSocketManagerService)
         this.connectionStatus$ = this.httpManagerService.connectionStatus$;
         // WebSocket
         this.initWS = this.effect((wsOptions$) => wsOptions$.pipe(switchMap((wsOptions) => merge(this.httpManagerService.connectionStatus$.pipe(tap((isConnected) => {
-            // Process queued wsCommunication calls when connection becomes true
-            if (isConnected && HTTPManagerStateService.wsCommunicationQueue.length > 0) {
-                console.log(`🔄 Processing ${HTTPManagerStateService.wsCommunicationQueue.length} queued WS messages`);
-                while (HTTPManagerStateService.wsCommunicationQueue.length > 0) {
-                    const queued = HTTPManagerStateService.wsCommunicationQueue.shift();
-                    this.sendWsCommunication(queued.method, queued.path);
+            if (isConnected) {
+                // Subscribe to our private SYS- state channel so we receive stateMangerMessage broadcasts
+                // This is the critical subscription that enables multi-client state syncing
+                const stateChannel = wsOptions?.id || this.apiOptions.ws?.id;
+                if (stateChannel) {
+                    console.log(`🔒 [STATE STORE] Subscribing to state channel: ${stateChannel}`);
+                    this.httpManagerService.subscribeToChannel(stateChannel);
+                }
+                // Process queued wsCommunication calls when connection becomes true
+                if (HTTPManagerStateService.wsCommunicationQueue.length > 0) {
+                    console.log(`🔄 Processing ${HTTPManagerStateService.wsCommunicationQueue.length} queued WS messages`);
+                    while (HTTPManagerStateService.wsCommunicationQueue.length > 0) {
+                        const queued = HTTPManagerStateService.wsCommunicationQueue.shift();
+                        this.sendWsCommunication(queued.method, queued.path);
+                    }
                 }
             }
         })), this.httpManagerService.messages$.pipe(tap((message) => {
             if (!message)
                 return;
+            // CRITICAL DEBUG: Log EVERY message received
+            console.log('🔍 [STATE STORE] Received WebSocket message:', {
+                type: message.type,
+                channel: message.channel,
+                sessionId: message.data?.sessionId?.id || message.sessionId?.id,
+                content: message.content || message.data?.content,
+                timestamp: new Date().toISOString()
+            });
             // Add message to messages array
             const currentMessages = this.messages.value;
             this.messages.next([...currentMessages, message]);
@@ -4893,15 +4942,34 @@ class HTTPManagerStateService extends ComponentStore {
                     console.log('💬 Channels:', message.channels);
                     console.log('🔍 channelsList received, checking connection status...');
                     console.log('🔍 WebSocket connected:', WebSocketManagerService.isConnected());
+                    // Extract channel names from metadata objects (new format) or use strings directly (old format)
+                    const channelNames = message.channels.map((c) => {
+                        // Handle new format: {name: string, canSubscribe: boolean}
+                        if (typeof c === 'object' && c.name) {
+                            return c.name;
+                        }
+                        // Handle old format: string
+                        return c;
+                    });
                     // Auto-subscribe to all channels from the list
-                    if (message.channels && message.channels.length > 0) {
-                        console.log('📥 Auto-subscribing to', message.channels.length, 'channel(s)');
-                        this.subscribeToChannels(message.channels);
+                    if (channelNames && channelNames.length > 0) {
+                        console.log('📥 Auto-subscribing to', channelNames.length, 'channel(s)');
+                        this.subscribeToChannels(channelNames);
                     }
                     else {
                         console.log('⚠️ No channels to subscribe to');
                     }
-                    this.channels.next(message.channels);
+                    this.channels.next(channelNames);
+                    break;
+                case 'success':
+                    // Success messages - check for subscription confirmation
+                    console.log(`✅ Success: ${message.message}`);
+                    if (message.message?.includes('Subscribed to channel:')) {
+                        // Extract channel name from message: "Subscribed to channel: PUB-chat"
+                        const channelName = message.message.split('Subscribed to channel:')[1]?.trim();
+                        console.log(`✅ Subscription confirmed for channel: ${channelName}`);
+                        WebSocketManagerService.addSubscribedChannel(channelName);
+                    }
                     break;
                 case 'subscribed':
                     console.log(`✅ Subscription confirmed: ${message.channel}`);
@@ -4915,24 +4983,34 @@ class HTTPManagerStateService extends ComponentStore {
                     // 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);
+                    if (message.message?.includes('Already subscribed to channel:')) {
+                        // Extract channel name from message: "Already subscribed to channel: PUB-chat"
+                        const channelName = message.message.split('Already subscribed to channel:')[1]?.trim();
+                        console.log(`✅ Treating info as subscription confirmation for channel: ${channelName}`);
+                        WebSocketManagerService.addSubscribedChannel(channelName);
                     }
                     break;
                 case 'stateMangerMessage':
-                    // Compare sender's session ID with current user's ID
+                    // CRITICAL DEBUG: Log channel comparison
+                    console.log('🔍 [STATE STORE] stateMangerMessage received:', {
+                        messageChannel: message.channel,
+                        ourChannel: this.apiOptions.ws?.id,
+                        channelsMatch: message.channel === this.apiOptions.ws?.id,
+                        senderSessionId: message.data.sessionId?.id,
+                        ourSessionId: this.ownSessionId
+                    });
+                    // Compare sender's session ID with our own sessionId
                     // message.data.sessionId is an object with 'id' property from server
                     const stateManagerSenderId = message.data.sessionId?.id || message.data.sessionId;
-                    console.log('🔍 State Manager: Sender ID:', stateManagerSenderId, 'Current User ID:', this.user.value?.id);
-                    if (stateManagerSenderId !== this.user.value?.id) {
+                    console.log('🔍 State Manager: Sender sessionId:', stateManagerSenderId, 'Own sessionId:', this.ownSessionId);
+                    if (stateManagerSenderId !== this.ownSessionId) {
                         console.log('💬 State Manager Message:', message.data);
                         console.log('📥 Fetching record with path:', message.data.content.path, 'method:', message.data.content.method);
                         this.userAction.next(message.data);
                         this.fetchRecord(RequestOptions.adapt({ path: message.data.content.path }), message.data.content.method);
                     }
                     else {
-                        console.log('⏭️ Skipping own message');
+                        console.log('⏭️ Skipping own message (sessionId match)');
                     }
                     break;
                 case 'channelMessage':
@@ -4940,7 +5018,7 @@ class HTTPManagerStateService extends ComponentStore {
                     // Structure: { type: 'channelMessage', messageId, channel, sessionId, content, timestamp }
                     // Skip messages from self
                     const senderSessionId = message.sessionId?.id || message.sessionId;
-                    if (senderSessionId === this.user.value?.id) {
+                    if (senderSessionId === this.ownSessionId) {
                         console.log('🔇 Skipping message from self (sessionId match)');
                         break;
                     }
@@ -5003,11 +5081,25 @@ class HTTPManagerStateService extends ComponentStore {
                     break;
                 case 'notificationChannelsList':
                     console.log('📢 Notification Channels (in-memory):', message.channels);
-                    this.notificationChannels.next(message.channels || []);
+                    // Extract channel names from metadata objects (new format) or use strings directly (old format)
+                    const notifyChannelNames = message.channels.map((c) => {
+                        if (typeof c === 'object' && c.name) {
+                            return c.name;
+                        }
+                        return c;
+                    });
+                    this.notificationChannels.next(notifyChannelNames || []);
                     break;
                 case 'todaysNotificationChannelsList':
                     console.log('📢 Today\'s Notification Channels (from DB):', message.channels);
-                    this.todaysNotificationChannels.next(message.channels || []);
+                    // Extract channel names from metadata objects (new format) or use strings directly (old format)
+                    const todaysNotifyChannelNames = message.channels.map((c) => {
+                        if (typeof c === 'object' && c.name) {
+                            return c.name;
+                        }
+                        return c;
+                    });
+                    this.todaysNotificationChannels.next(todaysNotifyChannelNames || []);
                     break;
                 case 'notificationSubscribed':
                     console.log(`📢 Notification subscription confirmed: ${message.channel}`, message.notifications);
@@ -5418,6 +5510,12 @@ class HTTPManagerStateService extends ComponentStore {
         return this.stripChannelPrefix(channel);
     }
     setApiRequestOptions(apiOptions, dataType, database) {
+        console.log('🔧 [STATE STORE] setApiRequestOptions called:', {
+            hasWs: !!apiOptions?.ws,
+            wsId: apiOptions?.ws?.id,
+            wsServer: apiOptions?.ws?.wsServer,
+            path: apiOptions?.path
+        });
         this.apiOptions = ApiRequest.adapt(apiOptions);
         this.dataType = (dataType) ? dataType : DataType.ARRAY;
         // Only update database options if a database parameter is explicitly provided
@@ -5429,8 +5527,24 @@ class HTTPManagerStateService extends ComponentStore {
             // Auto-prefix channel ID for private state manager channels
             // This ensures state manager channels are separate from user-defined channels
             this.apiOptions.ws.id = this.prefixChannel(this.apiOptions.ws.id, ChannelType.STATE);
-            console.log(`🔒 Private state channel: ${this.apiOptions.ws.id}`);
-            // Update WebSocket retry settings when options change
+            console.log(`🔒 Private state channel configured: ${this.apiOptions.ws.id}`);
+            // Store our own sessionId for filtering incoming messages
+            this.ownSessionId = sessionStorage.getItem('WSID') || null;
+            console.log(`🆔 Stored own sessionId for message filtering: ${this.ownSessionId}`);
+            console.log(`🔍 [STATE STORE] WebSocket configuration:`, {
+                channelId: this.apiOptions.ws.id,
+                wsServer: this.apiOptions.ws.wsServer,
+                sessionId: this.ownSessionId,
+                path: this.apiOptions.path
+            });
+            // Initialize WebSocket connection if not already connected
+            console.log('🔌 [STATE STORE] Checking WebSocket connection status...');
+            console.log('🔌 [STATE STORE] Is connected?', WebSocketManagerService.isConnected());
+            if (!WebSocketManagerService.isConnected()) {
+                console.log('🔌 [STATE STORE] WebSocket not connected, will initialize via effect');
+                // initWS is an effect that triggers when setApiRequestOptions is called with ws config
+                // The effect is already triggered by calling setApiRequestOptions above
+            }
             if (this.apiOptions.ws?.retry) {
                 this.maxRetries = this.apiOptions.ws.retry.times || 3;
                 this.retryDelay = (this.apiOptions.ws.retry.delay && this.apiOptions.ws.retry.delay * 1000) || 5 * 1000;
@@ -6353,6 +6467,374 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 }]
         }] });
 
+let ClientInfo$2 = class ClientInfo {
+    constructor(domain = '', service = '', id = 0, name = '') {
+        this.domain = domain;
+        this.service = service;
+        this.id = id;
+        this.name = name;
+    }
+    static adapt(item) {
+        return new ClientInfo(item?.domain, item?.service, item?.id, (item?.first_name || item?.last_name) ? `${item?.first_name} ${item?.last_name}` : '');
+    }
+};
+
+let ClientInfoMapper$2 = class ClientInfoMapper {
+    constructor(id = 0, first_name = '', last_name = '', email = '') {
+        this.id = id;
+        this.first_name = first_name;
+        this.last_name = last_name;
+        this.email = email;
+    }
+    static adapt(item) {
+        const first_name = (item?.name) ? item.name.split(' ')[0] : '';
+        const last_name = (item?.name) ? item.name.split(' ')[1] : '';
+        return new ClientInfoMapper(item?.id, first_name, last_name, item?.email);
+    }
+};
+
+let AIPrompt$2 = class AIPrompt {
+    constructor(response = '') {
+        this.response = response;
+    }
+    static adapt(item) {
+        return new AIPrompt(item?.response);
+    }
+};
+
+class RequestManagerBasicDemoComponent {
+    // Dynamic columns based on data structure
+    getColumnsFromData(data) {
+        if (!data || data.length === 0) {
+            return [];
+        }
+        const firstRecord = data[0];
+        if (!firstRecord || typeof firstRecord !== 'object') {
+            return [];
+        }
+        // Extract all keys from the first record, excluding null/undefined
+        return Object.keys(firstRecord).filter(key => firstRecord[key] !== null && firstRecord[key] !== undefined);
+    }
+    // Update displayed columns when data changes
+    updateDisplayedColumns(data) {
+        this.displayedColumns = this.getColumnsFromData(data);
+        console.log('[DEMO] Updated columns:', this.displayedColumns);
+    }
+    // Helper to check if value is an object
+    isObject(value) {
+        return value !== null && typeof value === 'object' && !Array.isArray(value);
+    }
+    get retry() {
+        return this.requestForm.get('retry')?.value;
+    }
+    get headers() {
+        return this.requestForm.get('headers');
+    }
+    get isValid() {
+        this.requestForm.markAllAsTouched();
+        return this.requestForm.valid;
+    }
+    constructor() {
+        this.server = 'http://localhost:8080';
+        this.displayedColumns = [];
+        this.fb = inject(FormBuilder);
+        this.toastMessage = inject(ToastMessageDisplayService);
+        this.questionControl = this.fb.control("", [Validators.required]);
+        this.httpManagerService = inject(HTTPManagerService);
+        this.isPending$ = this.httpManagerService.isPending$;
+        this.countdown$ = this.httpManagerService.countdown$;
+        this.GET_error$ = new BehaviorSubject('');
+        this.POST_error$ = new BehaviorSubject('');
+        this.PUT_error$ = new BehaviorSubject('');
+        this.DELETE_error$ = new BehaviorSubject('');
+        this.STREAM_error$ = new BehaviorSubject('');
+        this.STREAM_AI_error$ = new BehaviorSubject('');
+        this.requestParams = {
+            GET: ApiRequest.adapt(),
+            POST: ApiRequest.adapt(),
+            PUT: ApiRequest.adapt(),
+            DELETE: ApiRequest.adapt(),
+            STREAM: ApiRequest.adapt(),
+        };
+        this.streamTypes = [
+            { id: 'JSON', value: 'json' },
+            { id: 'NDJSON', value: 'ndjson' },
+            { id: 'AI Streaming', value: 'ai_streaming' },
+            { id: 'Event Stream', value: 'event_stream' },
+            { id: 'Auto', value: 'auto' },
+        ];
+        this.streamType = 'Auto';
+        this.downloadRequest = ApiRequest.adapt({
+            server: 'assets/images',
+            path: ['me.jpg'],
+            saveAs: 'john.jpg', // Optional
+            headers: { 'Authorization': 'Bearer Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6InJ0c0ZULWItN0x1WTdEVlllU05LY0lKN1ZuYyJ9.eyJhdWQiOiI4ODhhMzFjZS01OWQzLTRhMTItYTU5Ni04ZDYyZjY0MWI1MDUiLCJpc3MiOiJodHRwczovL2xvZ2luLm1pY3Jvc29mdG9ubGluZS5jb20vNmY0MTE5ODItY2YyMy00ZTQ1LTk0NDktNGI2MDdiN2E4OGVjL3YyLjAiLCJpYXQiOjE3NjU4MzQxNDksIm5iZiI6MTc2NTgzNDE0OSwiZXhwIjoxNzY1ODM5NzQ2LCJhY2N0IjowLCJhaW8iOiJBV1FBbS84YUFBQUFVUEZOYUhSZkZ4ZVkwRWthcFBzdWZaNG1QYXV6YVRoODRRZUtQRzkrbEFIVE5XanVwQy9ZSjEwK2IrMktWVlJSSXZRNFpwS2xyWTFGd0xRZmtXOTNLbkRNckxSeEMzWTVOOGlQREZ4b1liZExucW1QL1N1ZE1pRW1Va05tTklSWSIsImF6cCI6Ijg4OGEzMWNlLTU5ZDMtNGExMi1hNTk2LThkNjJmNjQxYjUwNSIsImF6cGFjciI6IjAiLCJncm91cHMiOlsiZWE2ZDk5YjAtNDgyNC00MDU0LTk0MTQtZDNhOTZkZDA3MjRiIl0sIm5hbWUiOiJHVExDIEFwcCBTdXBlciBBZG1pbiIsIm9pZCI6IjI2NzUxY2I2LWNlMDEtNDMzMC05OTc0LWZjMzgxMjQ3YTEzYyIsInByZWZlcnJlZF91c2VybmFtZSI6Imd0bGMwMDNAZ3RsYy5jYSIsInJoIjoiMS5BUzRBZ2hsQmJ5UFBSVTZVU1V0Z2UzcUk3TTR4aW9qVFdSSktwWmFOWXZaQnRRVm1BYTR1QUEuIiwicm9sZXMiOlsiZ3RsYy5hY2wuc3VwZXJhZG1pbiJdLCJzY3AiOiJHVExDX0FwcGxpY2F0aW9uIiwic2lkIjoiMDAzZjVhZDktZmJmNi1jZTkyLTg3MjItMWEzNDExYjMzMDJiIiwic3ViIjoiS0RYQ3drVlhUbTRUUmcwaTkxbXZDZzgtQ29uLXpWbk5FQ2Y5LVg0dkpzUSIsInRpZCI6IjZmNDExOTgyLWNmMjMtNGU0NS05NDQ5LTRiNjA3YjdhODhlYyIsInVwbiI6Imd0bGMwMDNAZ3RsYy5jYSIsInV0aSI6InpBaTJoMmpVUUVHbVY0RTJXMWxqQUEiLCJ2ZXIiOiIyLjAiLCJ3aWRzIjpbImI3OWZiZjRkLTNlZjktNDY4OS04MTQzLTc2YjE5NGU4NTUwOSJdLCJ4bXNfZnRkIjoiUDJraW1ZM0tqc1BTRndxNHlZdmJ0bGhrSUk3d2tXNmFpcW1FQ1BaNEdja0JkWE5sWVhOMExXUnpiWE0ifQ.LzppoggMm27smSAy9SamtPN95vCzdELCAfhtOj5n_T_H6g9xCmNRLS9FaUFQMau6Qvl0lROKl7WDklTswLFkfxbIxCBWtXdL-LTqT5cDURSJAll8vC3zlN3Hg9pAFBUVZFRolt6Z7LvPdI3pvUOQs0yFwVzp9k6cLF8aemKdwKQrMX3XXua1MfBWZcqQ4WiBVNmKh8w6yQB35I4u5WqdFnu33nUGb-kvc18SOpoUfiJnlV-PudaEzFXdU3CjAaMEcuPFv5xLwWJKuhU73dNH4EyQDFMVGtcIHNnieOfiY_nK2_0-5DM6aI40UIRK6Bt-HmMQpnbhLps5y3ep6Z7RNw' } // Optional
+        });
+        // downloadRequest = ApiRequest.adapt({
+        //   server: 'oidc/ai/file'
+        // })
+        this.sampleClientData = {
+            id: 0,
+            name: "Old School Dates",
+            domain: "osd.com",
+            service: "osd",
+            spiffe: "osd.com/osd",
+            secret: "SMOPECXP-OS4P-USOG-X2II-3XMD1FQDR3IJX",
+            created: 1693003138,
+            modified: 1693003138,
+            icon: "",
+            imageFile: "",
+            email: "wavecoders@gmail.com"
+        };
+        this.requestForm = this.fb.group({
+            path: this.fb.control("ai/"),
+            headers: this.fb.array([]),
+            adapter: [null],
+            mapper: [null],
+            retry: this.fb.group({
+                times: [3],
+                delay: [3],
+            }),
+            polling: [3],
+        });
+        this.AIType = 0;
+        this.sampleAdaptors = [
+            { label: "ClientInfo Basic", value: ClientInfo$2.adapt },
+            { label: "AI Prompt", value: AIPrompt$2.adapt },
+        ];
+        this.sampleMappers = [
+            { label: "Mapper Basic", value: ClientInfoMapper$2.adapt },
+            { label: "AI Prompt", value: AIPrompt$2.adapt },
+        ];
+        this.hasId = (arr) => {
+            if (arr.length === 0)
+                return false;
+            return !isNaN(arr[arr.length - 1]);
+        };
+        this.props = (adapter) => {
+            return (adapter) ? adapter() : null;
+        };
+        // server = `http://sample-endpoint/as/authorization.oauth2`
+        this.arrayObjectsToObjects = (arr) => {
+            return Array.isArray(arr) ? arr.reduce((obj, item) => Object.assign(obj, { [item.key]: item.value }), {}) : {};
+        };
+    }
+    ngOnInit() {
+        // const reqGet2 = ApiRequest.adapt({
+        //   server,
+        //   path: ['clients'],
+        //   headers: { authentication: "Bearer <KEY>" },
+        //   adapter: ClientInfo,
+        //   dataType: DataType.OBJECT,
+        //   // concurrent: false,
+        //   // polling: 3, //seconds
+        // })
+        // const req2 = [1024,1025,1026].map(item => {
+        //   return this.httpManagerService.getRequest<ClientInfo[]>(reqGet2, [item])
+        //   .pipe(
+        //     catchError(error => {
+        //       return throwError(() => new Error(error.error.message))
+        //     })
+        //   )
+        // })
+        // forkJoin(req2)
+        // .subscribe(res => console.log(res))
+    }
+    onStreamType(type) {
+        this.streamType = type;
+    }
+    addHeader() {
+        const header = this.fb.group({
+            key: ['', Validators.required],
+            value: ['']
+        });
+        this.headers.push(header);
+    }
+    removeHeader(index) {
+        this.headers.removeAt(index);
+    }
+    compileRequest() {
+        const requestParams = this.requestForm.value;
+        requestParams.headers = this.arrayObjectsToObjects(requestParams.headers || []);
+        const pathReq = (requestParams.path === "") ? [] : (requestParams.path || "").split("/");
+        if (!this.pollingState.checked)
+            requestParams.polling = 0;
+        if (!this.failedState.checked) {
+            requestParams.retry = { times: 0, delay: 0 };
+        }
+        const apiOptions = ApiRequest.adapt(requestParams);
+        apiOptions.path = [];
+        apiOptions.server = this.server;
+        apiOptions.adapter = this.adapter;
+        apiOptions.mapper = this.mapper;
+        return { apiOptions: apiOptions, path: pathReq };
+    }
+    onGetRequest() {
+        if (!this.isValid)
+            return;
+        const reqParams = this.compileRequest();
+        this.requestParams.GET = reqParams.apiOptions;
+        this.GET$ = EMPTY; //Cancels Previous
+        this.GET_error$.next('');
+        this.GET$ = this.httpManagerService.getRequest({ ...reqParams.apiOptions }, reqParams.path)
+            .pipe(
+        // tap((data) => console.log("API GET response", data)),
+        catchError(error => {
+            return throwError(() => this.errorHandling(error, 'GET'));
+        }));
+    }
+    onCreateRequest() {
+        if (!this.isValid)
+            return;
+        const reqParams = this.compileRequest();
+        this.requestParams.POST = reqParams.apiOptions;
+        this.POST$ = EMPTY; //Cancels Previous
+        this.POST_error$.next('');
+        console.log("POST", this.sampleClientData);
+        console.log("POST", reqParams.apiOptions);
+        console.log("POST", reqParams.path);
+        this.POST$ = this.httpManagerService.postRequest(this.sampleClientData, reqParams.apiOptions, reqParams.path)
+            .pipe(
+        // tap((data) => console.log("API POST response", data)),
+        catchError(error => {
+            return throwError(() => this.errorHandling(error, 'POST'));
+        }));
+    }
+    onUpdateRequest() {
+        if (!this.isValid)
+            return;
+        const reqParams = this.compileRequest();
+        if (!this.hasId(reqParams.path)) {
+            console.log("Missing ID");
+            return;
+        }
+        this.sampleClientData.id = parseInt(reqParams.path[reqParams.path.length - 1]);
+        this.requestParams.PUT = reqParams.apiOptions;
+        this.PUT$ = EMPTY; //Cancels Previous
+        this.PUT_error$.next('');
+        this.PUT$ = this.httpManagerService.putRequest(this.sampleClientData, reqParams.apiOptions, reqParams.path)
+            .pipe(
+        // tap((data) => console.log("API PUT response", data)),
+        catchError(error => {
+            return throwError(() => this.errorHandling(error, 'PUT'));
+        }));
+    }
+    onDeleteRequest() {
+        if (!this.isValid)
+            return;
+        const reqParams = this.compileRequest();
+        this.requestParams.DELETE = reqParams.apiOptions;
+        if (!this.hasId(reqParams.path)) {
+            console.log("Missing ID");
+            return;
+        }
+        this.sampleClientData.id = parseInt(reqParams.path[reqParams.path.length - 1]);
+        this.requestParams.DELETE = reqParams.apiOptions;
+        this.DELETE$ = EMPTY; //Cancels Previous
+        this.DELETE_error$.next('');
+        this.DELETE$ = this.httpManagerService.deleteRequest(reqParams.apiOptions, reqParams.path)
+            .pipe(
+        // tap((data) => console.log("API DELETE response", data)),
+        catchError(error => {
+            return throwError(() => this.errorHandling(error, 'DELETE'));
+        }));
+    }
+    onStreamPostRequest() {
+        if (!this.isValid)
+            return;
+        const reqParams = this.compileRequest();
+        let payload = {};
+        let apiPath = reqParams.path;
+        let apiOptions = reqParams.apiOptions;
+        let responseMapper = (items) => items.response;
+        if (this.AIType === 0) {
+            // API request
+            payload = { prompt: this.questionControl.value };
+        }
+        else {
+            // Local Ollama request
+            apiOptions.server = "api";
+            apiPath = ["generate"];
+            apiOptions.stream = true;
+            apiOptions.streamType = this.streamType;
+            payload = {
+                model: "phi3:latest",
+                prompt: this.questionControl.value,
+                stream: true,
+            };
+            responseMapper = (items) => items.map((word) => word.response).flat().join('');
+        }
+        this.requestParams.STREAM = apiOptions;
+        this.STREAM_AI$ = EMPTY;
+        this.STREAM_AI_error$.next('');
+        this.STREAM_AI$ = this.httpManagerService.postRequest(payload, apiOptions, apiPath).pipe(map(responseMapper), tap(() => this.questionControl.reset()), catchError(error => throwError(() => this.errorHandling(error, 'STREAM'))));
+    }
+    onStreamRequest() {
+        if (!this.isValid)
+            return;
+        const reqParams = this.compileRequest();
+        reqParams.apiOptions.stream = true;
+        reqParams.apiOptions.streamType = StreamType.NDJSON;
+        this.requestParams.GET = reqParams.apiOptions;
+        this.STREAM$ = this.httpManagerService.getRequest(reqParams.apiOptions, reqParams.path)
+            .pipe(tap((data) => {
+            console.log("API STREAM response", data);
+            if (data && data.length > 0) {
+                this.updateDisplayedColumns(data);
+            }
+        }), catchError(error => {
+            return throwError(() => this.errorHandling(error, 'STREAM'));
+        }));
+    }
+    onDownloadCompleted() {
+        const message = "Download Completed";
+        const display = ToastDisplay.adapt({
+            message,
+            action: 'Ok',
+            color: ToastColors.SUCCESS,
+            icon: 'sentiment_satisfied_alt',
+        });
+        this.toastMessage.toastMessage(display);
+    }
+    onDownloadFailed(err) {
+        const message = "Download Failed";
+        const display = ToastDisplay.adapt({
+            message,
+            action: 'Ok',
+            color: ToastColors.ERROR,
+            icon: 'warning',
+        });
+        this.toastMessage.toastMessage(display);
+    }
+    errorHandling(err, type) {
+        if (type === 'GET')
+            this.GET_error$.next(err.message);
+        if (type === 'POST')
+            this.POST_error$.next(err.message);
+        if (type === 'PUT')
+            this.PUT_error$.next(err.message);
+        if (type === 'DELETE')
+            this.DELETE_error$.next(err.message);
+        if (type === 'STREAM')
+            this.STREAM_error$.next(err.message);
+    }
+    onSelectAIType(type) {
+        this.AIType = type;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RequestManagerBasicDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: RequestManagerBasicDemoComponent, selector: "app-request-manager-basic-demo", providers: [HTTPManagerService], viewQueries: [{ propertyName: "failedState", first: true, predicate: ["failedState"], descendants: true, static: true }, { propertyName: "pollingState", first: true, predicate: ["pollingState"], descendants: true, static: true }], ngImport: i0, template: "<div style=\"margin: 2rem;\">\n\n  <h2>\n    HTTP Basic Request Manager Setup\n  </h2>\n\n  <div style=\"margin-bottom: 1rem; margin-top: 2rem;\">\n    @if ((isPending$ | async)) {\n      <mat-progress-bar mode=\"indeterminate\"\n      ></mat-progress-bar>\n    }\n    @if (pollingState.checked && !(isPending$ | async)) {\n      <mat-progress-bar mode=\"determinate\"\n        [value]=\"(this.countdown$ | async)\"\n      ></mat-progress-bar>\n    }\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">GET Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onGetRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((GET_error$ | async); as get_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ get_error }}</mat-error>\n      </div>\n    }\n\n    @if ((GET$ | async); as dataRecord) {\n      <div style=\"margin-top: 1rem;\">\n        <!-- <div [innerHTML]=\"(GET$ | async) | jsonv\"></div> -->\n        {{ dataRecord | json }}\n      </div>\n    }\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">POST Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onCreateRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((POST_error$ | async); as post_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ post_error }}</mat-error>\n      </div>\n    }\n\n    @if ((POST$ | async); as dataRecord) {\n      <div style=\"margin-top: 1rem;\">\n        <!-- <div [innerHTML]=\"(POST$ | async) | jsonv\"></div> -->\n        {{ dataRecord | json }}\n      </div>\n    }\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">PUT Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onUpdateRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((PUT_error$ | async); as put_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ put_error }}</mat-error>\n      </div>\n    }\n\n    <h3>Include Record ID in the RestPath</h3>\n\n    @if ((PUT$ | async); as dataRecord) {\n      <div style=\"margin-top: 1rem;\">\n        <!-- <div [innerHTML]=\"(PUT$ | async) | jsonv\"></div> -->\n        {{ dataRecord | json }}\n      </div>\n    }\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">DELETE Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onDeleteRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <h3>Include Record ID in the RestPath</h3>\n\n    @if ((DELETE_error$ | async); as delete_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ delete_error }}</mat-error>\n      </div>\n    }\n\n    @if ((DELETE$ | async); as dataRecord) {\n      <div style=\"margin-top: 1rem;\">\n        <!-- <div [innerHTML]=\"(DELETE$ | async) | jsonv\"></div> -->\n        {{ dataRecord | json }}\n      </div>\n    }\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">Streaming GET Request</h2>\n        <div style=\"display: flex; gap: 1rem; align-items: center;\">\n          <div style=\"display: flex; gap: 1rem; align-items: center;\">\n            {{ streamType }}\n            <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n              <mat-icon>data_usage</mat-icon>\n            </button>\n          </div>\n          <mat-menu #menu=\"matMenu\">\n            <button mat-menu-item *ngFor=\"let item of streamTypes\" (click)=\"onStreamType(item.id)\">{{ item.value }}</button>\n          </mat-menu>\n        <button mat-raised-button (click)=\"onStreamRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <!-- <div *ngIf=\"(STREAM_error$ | async) as stream_error\" style=\"margin-top: .5rem;\">\n    <mat-error>{{ stream_error }}</mat-error>\n  </div> -->\n\n  <div style=\"margin-top: 1rem;\">\n    @if ((STREAM$ | async); as data) {\n      <div class=\"container\">\n        <table mat-table [dataSource]=\"data\" class=\"mat-elevation-z8\">\n\n          <!-- Dynamic columns -->\n          <ng-container *ngFor=\"let column of displayedColumns\" [matColumnDef]=\"column\">\n            <th mat-header-cell *matHeaderCellDef> {{ column | titlecase }} </th>\n            <td mat-cell *matCellDef=\"let element\">\n              @if (isObject(element[column]); as objValue) {\n                <pre style=\"margin: 0; font-size: 0.8em; white-space: pre-wrap;\">{{ objValue | json }}</pre>\n              } @else {\n                {{ element[column] }}\n              }\n            </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n        </table>\n\n        <!-- Debug info -->\n        <div style=\"margin-top: 1rem; font-size: 0.8em; color: #666;\">\n          Columns: {{ displayedColumns.join(', ') }} | Records: {{ data.length }}\n        </div>\n      </div>\n    }\n  </div>\n\n</div>\n\n<div style=\"margin-top: 2rem\">\n  <mat-divider></mat-divider>\n</div>\n\n<div style=\"margin-top: 2rem\">\n  <div style=\"display: flex;\">\n    <h2 style=\"flex:1; padding-top: .5rem;\">AI -@if (AIType === 1) {\n      <span>STREAMING</span>\n    } POST Request</h2>\n    <div style=\"display: flex; gap: 1rem;\">\n      <button mat-raised-button [matMenuTriggerFor]=\"menu\" style=\"min-width: 120px;\">\n        <mat-icon>lan</mat-icon>\n        @if (AIType === 0) {\n          <span>Server</span>\n        } @else {\n          Local\n        }\n      </button>\n      <mat-menu #menu=\"matMenu\">\n        <button mat-menu-item (click)=\"onSelectAIType(0)\">Server</button>\n        <button mat-menu-item (click)=\"onSelectAIType(1)\">Local</button>\n      </mat-menu>\n      <div>\n        <button mat-raised-button (click)=\"onStreamPostRequest()\" class=\"btn\">Ask Me</button>\n      </div>\n    </div>\n  </div>\n\n  <div style=\"display: flex;\">\n    <mat-form-field appearance=\"outline\" style=\"flex:1\">\n      <mat-label>Ask me a Question</mat-label>\n      <textarea matInput placeholder=\"Why is the sky blue?\" [formControl]=\"questionControl\"></textarea>\n    </mat-form-field>\n  </div>\n\n  @if ((STREAM_AI_error$ | async); as stream_error) {\n    <div style=\"margin-top: .5rem;\">\n      <mat-error>{{ stream_error }}</mat-error>\n    </div>\n  }\n\n  @if (AIType === 1) {\n    <div style=\"color: red;\">\n      You must have Ollama active and the 'phi3:latest' model to use this feature.\n    </div>\n  } @else {\n    <span style=\"color: gray;\">\n      Define the RestPath to the API endpoint that will handle the AI request.\n      Use: 'ai/chat' for server\n    </span>\n  }\n\n  <div>\n    @if ((STREAM_AI$ | async); as data) {\n      <div style=\"margin-top: 1rem; font-size: 1.2rem; border-radius: 1rem; border: black 1px solid; padding: 2rem;\">\n        <p style=\"margin-bottom: .5rem; white-space:pre-wrap; line-height: 1.6rem;\">{{data}}</p>\n      </div>\n    }\n  </div>\n\n</div>\n\n<div style=\"margin-top: 1.5rem; margin-bottom: 1rem; line-height: 1.5rem;\">\n  <mat-divider></mat-divider>\n</div>\n\n<div>\n  <div style=\"display: flex;\">\n    <h2 style=\"flex:1; margin-bottom: 0; padding-top: .5rem; display: flex;\">\n      <div>\n        Download File\n      </div>\n      <div style=\"flex:1; margin-left: 1rem;\">\n        <mat-slide-toggle #disable>\n          @if (disable.checked) {\n            <span>\n              Enable\n            </span>\n          } @else {\n            Disable\n          }\n        </mat-slide-toggle>\n      </div>\n    </h2>\n    <div>\n      <app-file-downloader\n        [disabled]=\"disable.checked\"\n        [delayError]=\"3\"\n        [apiRequest]=\"downloadRequest\"\n        (completed)=\"onDownloadCompleted()\"\n        (failed)=\"onDownloadFailed($event)\"\n      ></app-file-downloader>\n    </div>\n  </div>\n</div>\n\n</div>\n", styles: [".btn{min-width:120px}.mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor;background-color:#f5f5f5}.container{height:400px;overflow:auto}.box{padding:10px;border:1px solid #ccc}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i10.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i11.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i12.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i13.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: FileDownloaderComponent, selector: "app-file-downloader", inputs: ["delayError", "apiRequest", "displayErrorMessage", "saveFileAs", "labels", "disabled"], outputs: ["completed", "failed"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }, { kind: "pipe", type: i1$1.TitleCasePipe, name: "titlecase" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RequestManagerBasicDemoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-request-manager-basic-demo', providers: [HTTPManagerService], standalone: false, template: "<div style=\"margin: 2rem;\">\n\n  <h2>\n    HTTP Basic Request Manager Setup\n  </h2>\n\n  <div style=\"margin-bottom: 1rem; margin-top: 2rem;\">\n    @if ((isPending$ | async)) {\n      <mat-progress-bar mode=\"indeterminate\"\n      ></mat-progress-bar>\n    }\n    @if (pollingState.checked && !(isPending$ | async)) {\n      <mat-progress-bar mode=\"determinate\"\n        [value]=\"(this.countdown$ | async)\"\n      ></mat-progress-bar>\n    }\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">GET Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onGetRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((GET_error$ | async); as get_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ get_error }}</mat-error>\n      </div>\n    }\n\n    @if ((GET$ | async); as dataRecord) {\n      <div style=\"margin-top: 1rem;\">\n        <!-- <div [innerHTML]=\"(GET$ | async) | jsonv\"></div> -->\n        {{ dataRecord | json }}\n      </div>\n    }\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">POST Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onCreateRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((POST_error$ | async); as post_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ post_error }}</mat-error>\n      </div>\n    }\n\n    @if ((POST$ | async); as dataRecord) {\n      <div style=\"margin-top: 1rem;\">\n        <!-- <div [innerHTML]=\"(POST$ | async) | jsonv\"></div> -->\n        {{ dataRecord | json }}\n      </div>\n    }\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">PUT Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onUpdateRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((PUT_error$ | async); as put_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ put_error }}</mat-error>\n      </div>\n    }\n\n    <h3>Include Record ID in the RestPath</h3>\n\n    @if ((PUT$ | async); as dataRecord) {\n      <div style=\"margin-top: 1rem;\">\n        <!-- <div [innerHTML]=\"(PUT$ | async) | jsonv\"></div> -->\n        {{ dataRecord | json }}\n      </div>\n    }\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">DELETE Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onDeleteRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <h3>Include Record ID in the RestPath</h3>\n\n    @if ((DELETE_error$ | async); as delete_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ delete_error }}</mat-error>\n      </div>\n    }\n\n    @if ((DELETE$ | async); as dataRecord) {\n      <div style=\"margin-top: 1rem;\">\n        <!-- <div [innerHTML]=\"(DELETE$ | async) | jsonv\"></div> -->\n        {{ dataRecord | json }}\n      </div>\n    }\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">Streaming GET Request</h2>\n        <div style=\"display: flex; gap: 1rem; align-items: center;\">\n          <div style=\"display: flex; gap: 1rem; align-items: center;\">\n            {{ streamType }}\n            <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n              <mat-icon>data_usage</mat-icon>\n            </button>\n          </div>\n          <mat-menu #menu=\"matMenu\">\n            <button mat-menu-item *ngFor=\"let item of streamTypes\" (click)=\"onStreamType(item.id)\">{{ item.value }}</button>\n          </mat-menu>\n        <button mat-raised-button (click)=\"onStreamRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <!-- <div *ngIf=\"(STREAM_error$ | async) as stream_error\" style=\"margin-top: .5rem;\">\n    <mat-error>{{ stream_error }}</mat-error>\n  </div> -->\n\n  <div style=\"margin-top: 1rem;\">\n    @if ((STREAM$ | async); as data) {\n      <div class=\"container\">\n        <table mat-table [dataSource]=\"data\" class=\"mat-elevation-z8\">\n\n          <!-- Dynamic columns -->\n          <ng-container *ngFor=\"let column of displayedColumns\" [matColumnDef]=\"column\">\n            <th mat-header-cell *matHeaderCellDef> {{ column | titlecase }} </th>\n            <td mat-cell *matCellDef=\"let element\">\n              @if (isObject(element[column]); as objValue) {\n                <pre style=\"margin: 0; font-size: 0.8em; white-space: pre-wrap;\">{{ objValue | json }}</pre>\n              } @else {\n                {{ element[column] }}\n              }\n            </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n        </table>\n\n        <!-- Debug info -->\n        <div style=\"margin-top: 1rem; font-size: 0.8em; color: #666;\">\n          Columns: {{ displayedColumns.join(', ') }} | Records: {{ data.length }}\n        </div>\n      </div>\n    }\n  </div>\n\n</div>\n\n<div style=\"margin-top: 2rem\">\n  <mat-divider></mat-divider>\n</div>\n\n<div style=\"margin-top: 2rem\">\n  <div style=\"display: flex;\">\n    <h2 style=\"flex:1; padding-top: .5rem;\">AI -@if (AIType === 1) {\n      <span>STREAMING</span>\n    } POST Request</h2>\n    <div style=\"display: flex; gap: 1rem;\">\n      <button mat-raised-button [matMenuTriggerFor]=\"menu\" style=\"min-width: 120px;\">\n        <mat-icon>lan</mat-icon>\n        @if (AIType === 0) {\n          <span>Server</span>\n        } @else {\n          Local\n        }\n      </button>\n      <mat-menu #menu=\"matMenu\">\n        <button mat-menu-item (click)=\"onSelectAIType(0)\">Server</button>\n        <button mat-menu-item (click)=\"onSelectAIType(1)\">Local</button>\n      </mat-menu>\n      <div>\n        <button mat-raised-button (click)=\"onStreamPostRequest()\" class=\"btn\">Ask Me</button>\n      </div>\n    </div>\n  </div>\n\n  <div style=\"display: flex;\">\n    <mat-form-field appearance=\"outline\" style=\"flex:1\">\n      <mat-label>Ask me a Question</mat-label>\n      <textarea matInput placeholder=\"Why is the sky blue?\" [formControl]=\"questionControl\"></textarea>\n    </mat-form-field>\n  </div>\n\n  @if ((STREAM_AI_error$ | async); as stream_error) {\n    <div style=\"margin-top: .5rem;\">\n      <mat-error>{{ stream_error }}</mat-error>\n    </div>\n  }\n\n  @if (AIType === 1) {\n    <div style=\"color: red;\">\n      You must have Ollama active and the 'phi3:latest' model to use this feature.\n    </div>\n  } @else {\n    <span style=\"color: gray;\">\n      Define the RestPath to the API endpoint that will handle the AI request.\n      Use: 'ai/chat' for server\n    </span>\n  }\n\n  <div>\n    @if ((STREAM_AI$ | async); as data) {\n      <div style=\"margin-top: 1rem; font-size: 1.2rem; border-radius: 1rem; border: black 1px solid; padding: 2rem;\">\n        <p style=\"margin-bottom: .5rem; white-space:pre-wrap; line-height: 1.6rem;\">{{data}}</p>\n      </div>\n    }\n  </div>\n\n</div>\n\n<div style=\"margin-top: 1.5rem; margin-bottom: 1rem; line-height: 1.5rem;\">\n  <mat-divider></mat-divider>\n</div>\n\n<div>\n  <div style=\"display: flex;\">\n    <h2 style=\"flex:1; margin-bottom: 0; padding-top: .5rem; display: flex;\">\n      <div>\n        Download File\n      </div>\n      <div style=\"flex:1; margin-left: 1rem;\">\n        <mat-slide-toggle #disable>\n          @if (disable.checked) {\n            <span>\n              Enable\n            </span>\n          } @else {\n            Disable\n          }\n        </mat-slide-toggle>\n      </div>\n    </h2>\n    <div>\n      <app-file-downloader\n        [disabled]=\"disable.checked\"\n        [delayError]=\"3\"\n        [apiRequest]=\"downloadRequest\"\n        (completed)=\"onDownloadCompleted()\"\n        (failed)=\"onDownloadFailed($event)\"\n      ></app-file-downloader>\n    </div>\n  </div>\n</div>\n\n</div>\n", styles: [".btn{min-width:120px}.mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor;background-color:#f5f5f5}.container{height:400px;overflow:auto}.box{padding:10px;border:1px solid #ccc}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { failedState: [{
+                type: ViewChild,
+                args: ["failedState", { static: true }]
+            }], pollingState: [{
+                type: ViewChild,
+                args: ["pollingState", { static: true }]
+            }] } });
+
 let ClientInfo$1 = class ClientInfo {
     constructor(domain = '', service = '', id = 0, name = '') {
         this.domain = domain;
@@ -7803,7 +8285,11 @@ class WsMessagingComponent {
         });
         // Subscribe to latest messages and show toast notification
         this.latestCommunicationMessages$.pipe(filter$1(message => !!message), takeUntil$1(this.destroy$)).subscribe((message) => {
-            const messageContent = message.content?.message || '';
+            console.log('🔔 Toast notification triggered:', message);
+            console.log('  message.content:', message.content);
+            // Message structure has nested content: message.content.content.message
+            const messageContent = message.content?.content?.message || message.content?.message || '';
+            console.log('  Extracted messageContent:', messageContent);
             this.toastService.toastMessage(ToastDisplay.adapt({
                 message: messageContent,
                 color: ToastColors.INFO,
@@ -7855,8 +8341,14 @@ class WsMessagingComponent {
     /**
      * Handle chip toggle for subscribe/unsubscribe
      */
-    onChipToggle(channel, event) {
-        if (event.selected) {
+    onChipToggle(event, channel) {
+        const isSelected = event.selected;
+        console.log('🎯 Chip toggle event:', {
+            channel,
+            isSelected,
+            option: event.source
+        });
+        if (isSelected) {
             this.onSubscribeToChannel(channel);
         }
         else {
@@ -7870,44 +8362,39 @@ class WsMessagingComponent {
     isSubscribed(channel, subscribedChannels) {
         return subscribedChannels.includes(channel);
     }
-    /**
-     * Handle chip click - toggle subscription state
-     */
-    onChipClick(channel, subscribedChannels) {
-        const isCurrentlySubscribed = this.isSubscribed(channel, subscribedChannels);
-        if (isCurrentlySubscribed) {
-            this.onUnsubscribeFromChannel(channel);
-        }
-        else {
-            this.onSubscribeToChannel(channel);
-        }
-    }
-    onSendMessage(user) {
+    onSendMessage() {
         this.messages.markAllAsTouched();
         if (this.messages.invalid)
             return;
         const channelsToSend = this.selectedChannels.value;
         if (channelsToSend.length === 0)
             return;
-        // Pass base channel names - service adds PUB- prefix
-        const message = ChannelMessage.adapt({
-            sessionId: {
-                id: user.id,
-                ldap: user.ldap,
-                name: user.name,
-                email: user.email,
-            },
-            content: { message: this.messages.value.content },
+        // Get user from observable - subscribe once
+        this.user$.pipe(take$1(1)).subscribe(user => {
+            if (!user) {
+                console.error('❌ No user found');
+                return;
+            }
+            // Pass base channel names - service adds PUB- prefix
+            const message = ChannelMessage.adapt({
+                sessionId: {
+                    id: user.id,
+                    ldap: user.ldap,
+                    name: user.name,
+                    email: user.email,
+                },
+                content: { message: this.messages.value.content },
+            });
+            this.messageService.sendMessage(message, channelsToSend);
+            this.content.reset();
         });
-        this.messageService.sendMessage(message, channelsToSend);
-        this.content.reset();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WsMessagingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: WsMessagingComponent, selector: "app-ws-messaging", inputs: { server: "server", wsServer: "wsServer", jwtToken: "jwtToken", user: "user", path: "path" }, ngImport: i0, template: "\n  @if ((data$ | async); as data) {\n  @if ((user$ | async); as user) {\n    <div style=\"display: flex; gap: 1rem; flex-direction: column; margin-top: 1rem;\">\n\n        <!-- Channel Creation Section -->\n        <div style=\"padding: 1rem; background: #e3f2fd; border-radius: 4px;\">\n          <strong>Create New Channel</strong>\n          <div style=\"display: flex; flex-direction: column; margin-top: 0.5rem;\">\n            <mat-form-field appearance=\"outline\" style=\"width: 100%;\">\n              <mat-label>Channel Name</mat-label>\n              <input matInput [formControl]=\"newChannelName\" placeholder=\"Enter channel name\"\n                     (keydown.enter)=\"onCreateChannel()\">\n            </mat-form-field>\n            <div style=\"display: flex; justify-content: flex-end; margin-top: -0.5rem;\">\n              <button mat-raised-button color=\"primary\" (click)=\"onCreateChannel()\"\n                      [disabled]=\"newChannelName.invalid\">\n                Create Channel\n              </button>\n            </div>\n          </div>\n        </div>\n\n        <!-- Messaging Section - only show when subscribed to channels -->\n        @if ((subscribedChannels$ | async); as subscribedChannels) {\n          @if (subscribedChannels.length > 0) {\n            <div style=\"padding: 1rem; background: #fff3e0; border-radius: 4px;\" [formGroup]=\"messages\">\n              <strong>Send Message</strong>\n\n              <!-- Channel Selection with Checkboxes -->\n              <div style=\"margin-top: 0.5rem;\">\n                <mat-form-field appearance=\"outline\" style=\"width: 100%;\">\n                  <mat-label>Select Channels</mat-label>\n                  <mat-select formControlName=\"selectedChannels\" multiple>\n                    <mat-select-trigger>\n                      @if (selectedChannels.value?.length === 1) {\n                        {{ selectedChannels.value[0] }}\n                      } @else if (selectedChannels.value?.length > 1) {\n                        {{ selectedChannels.value[0] }} (+{{ selectedChannels.value.length - 1 }} {{ selectedChannels.value.length === 2 ? 'other' : 'others' }})\n                      }\n                    </mat-select-trigger>\n                    @for (channel of subscribedChannels; track channel; let i = $index) {\n                      <mat-option [value]=\"channel\">{{ channel }}</mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n              </div>\n\n              <!-- Message Input -->\n              <div style=\"display: flex; flex-direction: column;\">\n                <mat-form-field style=\"width: 100%;\" appearance=\"outline\">\n                  <mat-label>Message</mat-label>\n                  <textarea\n                    matInput placeholder=\"Type your message...\"\n                    formControlName=\"content\"\n                    (keydown.enter)=\"onSendMessage(user); $event.preventDefault()\"\n                  ></textarea>\n                </mat-form-field>\n                <div style=\"display: flex; justify-content: flex-end; margin-top: -0.5rem;\">\n                  <button mat-raised-button color=\"primary\" (click)=\"onSendMessage(user)\"\n                          [disabled]=\"messages.invalid\">\n                    Send\n                  </button>\n                </div>\n              </div>\n            </div>\n          }\n        }\n\n    </div>\n  }\n  }\n\n  <!-- Channel List with Subscription Controls using Chips -->\n  @if ((channels$ | async); as channels) {\n    @if ((subscribedChannels$ | async); as subscribedChannels) {\n      <div style=\"padding: 1rem; background: #f5f5f5; border-radius: 4px; margin-top: 1rem;\">\n        <strong>Subscribe to Channel(s)</strong>\n        <div style=\"margin-top: 0.5rem;\">\n          @if (channels.length === 0) {\n            <div style=\"color: #666; font-style: italic;\">No channels available. Create one above.</div>\n          } @else {\n            <mat-chip-listbox aria-label=\"Channel selection\" [multiple]=\"true\">\n              @for (channel of channels; track channel; let i = $index) {\n                <mat-chip-option\n                  [selected]=\"isSubscribed(channel, subscribedChannels)\"\n                  (click)=\"onChipClick(channel, subscribedChannels)\">\n                  {{ channel }}\n                </mat-chip-option>\n              }\n            </mat-chip-listbox>\n          }\n        </div>\n      </div>\n    }\n  }\n", styles: ["button[mat-raised-button],button[mat-stroked-button]{min-width:120px}mat-chip-option{min-width:120px;justify-content:center;border-radius:4px!important;padding:.25rem!important}\n"], dependencies: [{ kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i5.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i3$1.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i3$1.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: i13.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: WsMessagingComponent, selector: "app-ws-messaging", inputs: { server: "server", wsServer: "wsServer", jwtToken: "jwtToken", user: "user", path: "path" }, ngImport: i0, template: "\n  @if ((data$ | async); as data) {\n  @if ((user$ | async); as user) {\n    <div style=\"display: flex; gap: 1rem; flex-direction: column; margin-top: 1rem;\">\n\n        <!-- Channel Creation Section -->\n        <div style=\"padding: 1rem; background: #e3f2fd; border-radius: 4px;\">\n          <strong>Create New Channel</strong>\n          <div style=\"display: flex; flex-direction: column; margin-top: 0.5rem;\">\n            <mat-form-field appearance=\"outline\" style=\"width: 100%;\">\n              <mat-label>Channel Name</mat-label>\n              <input matInput [formControl]=\"newChannelName\" placeholder=\"Enter channel name\"\n                     (keydown.enter)=\"onCreateChannel()\">\n            </mat-form-field>\n            <div style=\"display: flex; justify-content: flex-end; margin-top: -0.5rem;\">\n              <button mat-raised-button color=\"primary\" (click)=\"onCreateChannel()\"\n                      [disabled]=\"newChannelName.invalid\">\n                Create Channel\n              </button>\n            </div>\n          </div>\n        </div>\n\n        <!-- Messaging Section - only show when subscribed to channels -->\n        @if ((subscribedChannels$ | async); as subscribedChannels) {\n          @if (subscribedChannels.length > 0) {\n            <div style=\"padding: 1rem; background: #fff3e0; border-radius: 4px;\" [formGroup]=\"messages\">\n              <strong>Send Message</strong>\n              <!-- Debug: Show subscribed channels count -->\n              <div style=\"font-size: 0.8rem; color: #666; margin-bottom: 0.5rem;\">\n                Subscribed to {{ subscribedChannels.length }} channel(s): {{ subscribedChannels | json }}\n              </div>\n\n              <!-- Channel Selection with Checkboxes -->\n              <div style=\"margin-top: 0.5rem;\">\n                <mat-form-field appearance=\"outline\" style=\"width: 100%;\">\n                  <mat-label>Select Channels</mat-label>\n                  <mat-select formControlName=\"selectedChannels\" multiple>\n                    <mat-select-trigger>\n                      @if (selectedChannels.value?.length === 1) {\n                        {{ selectedChannels.value[0] }}\n                      } @else if (selectedChannels.value?.length > 1) {\n                        {{ selectedChannels.value[0] }} (+{{ selectedChannels.value.length - 1 }} {{ selectedChannels.value.length === 2 ? 'other' : 'others' }})\n                      }\n                    </mat-select-trigger>\n                    @for (channel of subscribedChannels; track channel; let i = $index) {\n                      <mat-option [value]=\"channel\">{{ channel }}</mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n              </div>\n\n              <!-- Message Input -->\n              <div style=\"display: flex; flex-direction: column;\">\n                <mat-form-field style=\"width: 100%;\" appearance=\"outline\">\n                  <mat-label>Message</mat-label>\n                  <textarea\n                    matInput placeholder=\"Type your message...\"\n                    formControlName=\"content\"\n                    (keydown.enter)=\"onSendMessage(); $event.preventDefault()\"\n                  ></textarea>\n                </mat-form-field>\n                <div style=\"display: flex; justify-content: flex-end; margin-top: -0.5rem;\">\n                  <button mat-raised-button color=\"primary\" (click)=\"onSendMessage()\"\n                          [disabled]=\"messages.invalid\">\n                    Send\n                  </button>\n                </div>\n              </div>\n            </div>\n          }\n        }\n\n    </div>\n  }\n  }\n\n  <!-- Channel List with Subscription Controls using Chips -->\n  @if ((channels$ | async); as channels) {\n    @if ((subscribedChannels$ | async); as subscribedChannels) {\n      <div style=\"padding: 1rem; background: #f5f5f5; border-radius: 4px; margin-top: 1rem;\">\n        <strong>Subscribe to Channel(s)</strong>\n        <div style=\"margin-top: 0.5rem;\">\n          @if (channels.length === 0) {\n            <div style=\"color: #666; font-style: italic;\">No channels available. Create one above.</div>\n          } @else {\n            <mat-chip-listbox\n              aria-label=\"Channel selection\"\n              [multiple]=\"true\">\n              @for (channel of channels; track channel; let i = $index) {\n                <mat-chip-option\n                  [selected]=\"isSubscribed(channel, subscribedChannels)\"\n                  (selectionChange)=\"onChipToggle($event, channel)\">\n                  {{ channel }}\n                </mat-chip-option>\n              }\n            </mat-chip-listbox>\n          }\n        </div>\n      </div>\n    }\n  }\n", styles: ["button[mat-raised-button],button[mat-stroked-button]{min-width:120px}mat-chip-option{min-width:120px;justify-content:center;border-radius:4px!important;padding:.25rem!important}\n"], dependencies: [{ kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i5.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i3$1.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i3$1.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: i13.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WsMessagingComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-ws-messaging', standalone: false, template: "\n  @if ((data$ | async); as data) {\n  @if ((user$ | async); as user) {\n    <div style=\"display: flex; gap: 1rem; flex-direction: column; margin-top: 1rem;\">\n\n        <!-- Channel Creation Section -->\n        <div style=\"padding: 1rem; background: #e3f2fd; border-radius: 4px;\">\n          <strong>Create New Channel</strong>\n          <div style=\"display: flex; flex-direction: column; margin-top: 0.5rem;\">\n            <mat-form-field appearance=\"outline\" style=\"width: 100%;\">\n              <mat-label>Channel Name</mat-label>\n              <input matInput [formControl]=\"newChannelName\" placeholder=\"Enter channel name\"\n                     (keydown.enter)=\"onCreateChannel()\">\n            </mat-form-field>\n            <div style=\"display: flex; justify-content: flex-end; margin-top: -0.5rem;\">\n              <button mat-raised-button color=\"primary\" (click)=\"onCreateChannel()\"\n                      [disabled]=\"newChannelName.invalid\">\n                Create Channel\n              </button>\n            </div>\n          </div>\n        </div>\n\n        <!-- Messaging Section - only show when subscribed to channels -->\n        @if ((subscribedChannels$ | async); as subscribedChannels) {\n          @if (subscribedChannels.length > 0) {\n            <div style=\"padding: 1rem; background: #fff3e0; border-radius: 4px;\" [formGroup]=\"messages\">\n              <strong>Send Message</strong>\n\n              <!-- Channel Selection with Checkboxes -->\n              <div style=\"margin-top: 0.5rem;\">\n                <mat-form-field appearance=\"outline\" style=\"width: 100%;\">\n                  <mat-label>Select Channels</mat-label>\n                  <mat-select formControlName=\"selectedChannels\" multiple>\n                    <mat-select-trigger>\n                      @if (selectedChannels.value?.length === 1) {\n                        {{ selectedChannels.value[0] }}\n                      } @else if (selectedChannels.value?.length > 1) {\n                        {{ selectedChannels.value[0] }} (+{{ selectedChannels.value.length - 1 }} {{ selectedChannels.value.length === 2 ? 'other' : 'others' }})\n                      }\n                    </mat-select-trigger>\n                    @for (channel of subscribedChannels; track channel; let i = $index) {\n                      <mat-option [value]=\"channel\">{{ channel }}</mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n              </div>\n\n              <!-- Message Input -->\n              <div style=\"display: flex; flex-direction: column;\">\n                <mat-form-field style=\"width: 100%;\" appearance=\"outline\">\n                  <mat-label>Message</mat-label>\n                  <textarea\n                    matInput placeholder=\"Type your message...\"\n                    formControlName=\"content\"\n                    (keydown.enter)=\"onSendMessage(user); $event.preventDefault()\"\n                  ></textarea>\n                </mat-form-field>\n                <div style=\"display: flex; justify-content: flex-end; margin-top: -0.5rem;\">\n                  <button mat-raised-button color=\"primary\" (click)=\"onSendMessage(user)\"\n                          [disabled]=\"messages.invalid\">\n                    Send\n                  </button>\n                </div>\n              </div>\n            </div>\n          }\n        }\n\n    </div>\n  }\n  }\n\n  <!-- Channel List with Subscription Controls using Chips -->\n  @if ((channels$ | async); as channels) {\n    @if ((subscribedChannels$ | async); as subscribedChannels) {\n      <div style=\"padding: 1rem; background: #f5f5f5; border-radius: 4px; margin-top: 1rem;\">\n        <strong>Subscribe to Channel(s)</strong>\n        <div style=\"margin-top: 0.5rem;\">\n          @if (channels.length === 0) {\n            <div style=\"color: #666; font-style: italic;\">No channels available. Create one above.</div>\n          } @else {\n            <mat-chip-listbox aria-label=\"Channel selection\" [multiple]=\"true\">\n              @for (channel of channels; track channel; let i = $index) {\n                <mat-chip-option\n                  [selected]=\"isSubscribed(channel, subscribedChannels)\"\n                  (click)=\"onChipClick(channel, subscribedChannels)\">\n                  {{ channel }}\n                </mat-chip-option>\n              }\n            </mat-chip-listbox>\n          }\n        </div>\n      </div>\n    }\n  }\n", styles: ["button[mat-raised-button],button[mat-stroked-button]{min-width:120px}mat-chip-option{min-width:120px;justify-content:center;border-radius:4px!important;padding:.25rem!important}\n"] }]
+            args: [{ selector: 'app-ws-messaging', standalone: false, template: "\n  @if ((data$ | async); as data) {\n  @if ((user$ | async); as user) {\n    <div style=\"display: flex; gap: 1rem; flex-direction: column; margin-top: 1rem;\">\n\n        <!-- Channel Creation Section -->\n        <div style=\"padding: 1rem; background: #e3f2fd; border-radius: 4px;\">\n          <strong>Create New Channel</strong>\n          <div style=\"display: flex; flex-direction: column; margin-top: 0.5rem;\">\n            <mat-form-field appearance=\"outline\" style=\"width: 100%;\">\n              <mat-label>Channel Name</mat-label>\n              <input matInput [formControl]=\"newChannelName\" placeholder=\"Enter channel name\"\n                     (keydown.enter)=\"onCreateChannel()\">\n            </mat-form-field>\n            <div style=\"display: flex; justify-content: flex-end; margin-top: -0.5rem;\">\n              <button mat-raised-button color=\"primary\" (click)=\"onCreateChannel()\"\n                      [disabled]=\"newChannelName.invalid\">\n                Create Channel\n              </button>\n            </div>\n          </div>\n        </div>\n\n        <!-- Messaging Section - only show when subscribed to channels -->\n        @if ((subscribedChannels$ | async); as subscribedChannels) {\n          @if (subscribedChannels.length > 0) {\n            <div style=\"padding: 1rem; background: #fff3e0; border-radius: 4px;\" [formGroup]=\"messages\">\n              <strong>Send Message</strong>\n              <!-- Debug: Show subscribed channels count -->\n              <div style=\"font-size: 0.8rem; color: #666; margin-bottom: 0.5rem;\">\n                Subscribed to {{ subscribedChannels.length }} channel(s): {{ subscribedChannels | json }}\n              </div>\n\n              <!-- Channel Selection with Checkboxes -->\n              <div style=\"margin-top: 0.5rem;\">\n                <mat-form-field appearance=\"outline\" style=\"width: 100%;\">\n                  <mat-label>Select Channels</mat-label>\n                  <mat-select formControlName=\"selectedChannels\" multiple>\n                    <mat-select-trigger>\n                      @if (selectedChannels.value?.length === 1) {\n                        {{ selectedChannels.value[0] }}\n                      } @else if (selectedChannels.value?.length > 1) {\n                        {{ selectedChannels.value[0] }} (+{{ selectedChannels.value.length - 1 }} {{ selectedChannels.value.length === 2 ? 'other' : 'others' }})\n                      }\n                    </mat-select-trigger>\n                    @for (channel of subscribedChannels; track channel; let i = $index) {\n                      <mat-option [value]=\"channel\">{{ channel }}</mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n              </div>\n\n              <!-- Message Input -->\n              <div style=\"display: flex; flex-direction: column;\">\n                <mat-form-field style=\"width: 100%;\" appearance=\"outline\">\n                  <mat-label>Message</mat-label>\n                  <textarea\n                    matInput placeholder=\"Type your message...\"\n                    formControlName=\"content\"\n                    (keydown.enter)=\"onSendMessage(); $event.preventDefault()\"\n                  ></textarea>\n                </mat-form-field>\n                <div style=\"display: flex; justify-content: flex-end; margin-top: -0.5rem;\">\n                  <button mat-raised-button color=\"primary\" (click)=\"onSendMessage()\"\n                          [disabled]=\"messages.invalid\">\n                    Send\n                  </button>\n                </div>\n              </div>\n            </div>\n          }\n        }\n\n    </div>\n  }\n  }\n\n  <!-- Channel List with Subscription Controls using Chips -->\n  @if ((channels$ | async); as channels) {\n    @if ((subscribedChannels$ | async); as subscribedChannels) {\n      <div style=\"padding: 1rem; background: #f5f5f5; border-radius: 4px; margin-top: 1rem;\">\n        <strong>Subscribe to Channel(s)</strong>\n        <div style=\"margin-top: 0.5rem;\">\n          @if (channels.length === 0) {\n            <div style=\"color: #666; font-style: italic;\">No channels available. Create one above.</div>\n          } @else {\n            <mat-chip-listbox\n              aria-label=\"Channel selection\"\n              [multiple]=\"true\">\n              @for (channel of channels; track channel; let i = $index) {\n                <mat-chip-option\n                  [selected]=\"isSubscribed(channel, subscribedChannels)\"\n                  (selectionChange)=\"onChipToggle($event, channel)\">\n                  {{ channel }}\n                </mat-chip-option>\n              }\n            </mat-chip-listbox>\n          }\n        </div>\n      </div>\n    }\n  }\n", styles: ["button[mat-raised-button],button[mat-stroked-button]{min-width:120px}mat-chip-option{min-width:120px;justify-content:center;border-radius:4px!important;padding:.25rem!important}\n"] }]
         }], propDecorators: { server: [{
                 type: Input
             }], wsServer: [{
@@ -8099,11 +8586,11 @@ class WsNotificationsComponent {
         return new Date().toISOString().split('T')[0];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WsNotificationsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: WsNotificationsComponent, selector: "app-ws-notifications", inputs: { server: "server", wsServer: "wsServer", jwtToken: "jwtToken", user: "user" }, ngImport: i0, template: "<div style=\"display: flex; gap: 1rem; flex-direction: column; margin-top: 1rem;\">\n\n  <!-- Channel Creation Section -->\n  <div style=\"padding: 1rem; background: #e8f5e9; border-radius: 4px;\">\n    <strong>Create Notification Channel</strong>\n    <div style=\"display: flex; flex-direction: column; margin-top: 0.5rem;\">\n      <mat-form-field appearance=\"outline\" style=\"width: 100%;\">\n        <mat-label>Channel Name</mat-label>\n        <input\n          matInput\n          [formControl]=\"newChannelName\"\n          placeholder=\"Enter notification channel name\"\n          (keydown.enter)=\"onCreateChannel()\"\n        >\n      </mat-form-field>\n      <div style=\"display: flex; justify-content: flex-end; gap: 0.5rem;\">\n        <button mat-raised-button color=\"accent\" (click)=\"onDefinePreviousChannels()\">\n          Define Previous Channels\n        </button>\n        <button mat-raised-button color=\"primary\" (click)=\"onCreateChannel()\"\n                [disabled]=\"newChannelName.invalid\">\n          Create Channel\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Channel Connection Section - Only shown when NOT connected -->\n  @if ((subscribedNotificationChannels$ | async); as subscribedChannels) {\n    @if (!isChannelConnected(subscribedChannels)) {\n      <div style=\"padding: 1rem; background: #e3f2fd; border-radius: 4px;\">\n        <strong>Connect to Channel</strong>\n        <div style=\"display: flex; gap: 1rem; margin-top: 0.5rem; flex-wrap: wrap; align-items: flex-start;\">\n          <!-- Channel Selection (from today's DB data) -->\n          <mat-form-field appearance=\"outline\" style=\"flex: 1; min-width: 200px;\">\n            <mat-label>Select Channel</mat-label>\n            <mat-select [formControl]=\"selectedConnectionChannel\" placeholder=\"Select a notification channel\">\n              @for (channel of (todaysNotificationChannels$ | async) || []; track channel) {\n                <mat-option [value]=\"channel\">{{ channel }}</mat-option>\n              }\n              @empty {\n                <mat-option disabled>No channels with data for today</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n\n          <!-- Date Filter -->\n          <mat-form-field appearance=\"outline\" style=\"flex: 1; min-width: 200px;\" [formGroup]=\"dateFilter\">\n            <mat-label>Start Date</mat-label>\n            <input matInput [matDatepicker]=\"startPicker\" formControlName=\"startDate\">\n            <mat-datepicker-toggle matIconSuffix [for]=\"startPicker\"></mat-datepicker-toggle>\n            <mat-datepicker #startPicker></mat-datepicker>\n          </mat-form-field>\n\n          <mat-form-field appearance=\"outline\" style=\"flex: 1; min-width: 200px;\" [formGroup]=\"dateFilter\">\n            <mat-label>End Date</mat-label>\n            <input matInput [matDatepicker]=\"endPicker\" formControlName=\"endDate\">\n            <mat-datepicker-toggle matIconSuffix [for]=\"endPicker\"></mat-datepicker-toggle>\n            <mat-datepicker #endPicker></mat-datepicker>\n          </mat-form-field>\n        </div>\n\n        <div style=\"display: flex; gap: 0.5rem;\">\n          <span style=\"flex:1\"></span>\n          <button\n            mat-raised-button color=\"primary\"\n            (click)=\"onConnectToChannel()\"\n            [disabled]=\"!selectedConnectionChannel.value\"\n          >\n            Connect\n          </button>\n        </div>\n      </div>\n    }\n  }\n\n  <!-- Send Notification Section -->\n  @if ((subscribedNotificationChannels$ | async); as subscribedChannels) {\n    @if (subscribedChannels.length > 0) {\n      <div\n        style=\"padding: 1rem; background: #fff8e1; border-radius: 4px;\"\n        [formGroup]=\"notificationForm\"\n      >\n        <strong>Send Notification</strong>\n\n        <!-- Notification Content -->\n        <div style=\"display: flex; flex-direction: column; margin-top: 0.5rem;\">\n          <mat-form-field style=\"width: 100%;\" appearance=\"outline\">\n            <mat-label>Notification Message</mat-label>\n            <textarea\n              matInput placeholder=\"Type your notification...\"\n              formControlName=\"content\"\n              rows=\"2\"\n              (keydown.enter)=\"onSendNotification(); $event.preventDefault()\"\n            ></textarea>\n          </mat-form-field>\n          <div style=\"display: flex; justify-content: flex-end; margin-top: -0.5rem;\">\n            <button\n              mat-raised-button color=\"accent\"\n              (click)=\"onSendNotification()\"\n              [disabled]=\"notificationForm.invalid\"\n            >\n              Send Notification\n            </button>\n          </div>\n        </div>\n      </div>\n    }\n  }\n\n  <!-- Notifications Table - Only shown when connected -->\n  @if ((subscribedNotificationChannels$ | async); as subscribedChannels) {\n    @if (isChannelConnected(subscribedChannels)) {\n      @if ((notificationMessages$ | async); as notifications) {\n        <div>\n          <div style=\"display: flex; justify-content: space-between; align-items: center;\">\n            <strong>Notifications ({{ notifications.length }})</strong>\n          </div>\n\n          @if (notifications.length > 0) {\n            <div style=\"margin-top: 0.5rem; height: 400px; overflow: auto; border: 1px solid #888; border-radius: 4px;\">\n              <table mat-table [dataSource]=\"notifications\" style=\"width: 100%;\">\n\n                <!-- Date Column -->\n                <ng-container matColumnDef=\"date\">\n                  <th mat-header-cell *matHeaderCellDef style=\"width: 180px;\">Date</th>\n                  <td mat-cell *matCellDef=\"let notification\">\n                    {{ formatTimestamp(notification.created) | date }}\n                  </td>\n                </ng-container>\n\n                <!-- User Column -->\n                <ng-container matColumnDef=\"user\">\n                  <th mat-header-cell *matHeaderCellDef style=\"width: 150px;\">User</th>\n                  <td mat-cell *matCellDef=\"let notification\">\n                    <strong>{{ notification.user_name }}</strong>\n                  </td>\n                </ng-container>\n\n                <!-- Message Column -->\n                <ng-container matColumnDef=\"message\">\n                  <th mat-header-cell *matHeaderCellDef>Message</th>\n                  <td mat-cell *matCellDef=\"let notification\">\n                  <div class=\"pill\" [style.background-color]=\"notification.content.sessionId.color || '#000000'\">\n                    {{ notification.content?.message || notification.content }}\n                  </div>\n                  </td>\n                </ng-container>\n\n                <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n                <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n              </table>\n            </div>\n          } @else {\n            <div style=\"text-align: center; color: #666; padding: 2rem;\">\n              <mat-icon style=\"font-size: 48px; height: 48px; width: 48px; opacity: 0.5;\">notifications_none</mat-icon>\n              <p>No notifications yet. Waiting for notifications on this channel...</p>\n            </div>\n          }\n        </div>\n\n        <!-- Disconnect Button - Below the table -->\n        <div style=\"display: flex; justify-content: right; padding: 1rem;\">\n          <button mat-raised-button color=\"warn\" (click)=\"onDisconnectFromChannel()\">\n            Disconnect from Channel\n          </button>\n        </div>\n      }\n    }\n  }\n\n</div>\n", styles: [".colored-message{font-weight:500;padding:4px 8px;border-radius:4px;display:inline-block;max-width:100%;word-wrap:break-word}.colored-message.black-text{color:#000!important}.colored-message.white-text{color:#fff!important;text-shadow:0 0 2px rgba(0,0,0,.5)}td.mat-mdc-cell{padding:8px 12px}.pill{border-radius:1rem;padding:.5rem 1rem;color:#fff}\n"], dependencies: [{ kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i13.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i9$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i9$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i9$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: WsNotificationsComponent, selector: "app-ws-notifications", inputs: { server: "server", wsServer: "wsServer", jwtToken: "jwtToken", user: "user" }, ngImport: i0, template: "<div style=\"display: flex; gap: 1rem; flex-direction: column; margin-top: 1rem;\">\n\n  <!-- Channel Creation Section -->\n  <div style=\"padding: 1rem; background: #e8f5e9; border-radius: 4px;\">\n    <strong>Create Notification Channel</strong>\n    <div style=\"display: flex; flex-direction: column; margin-top: 0.5rem;\">\n      <mat-form-field appearance=\"outline\" style=\"width: 100%;\">\n        <mat-label>Channel Name</mat-label>\n        <input\n          matInput\n          [formControl]=\"newChannelName\"\n          placeholder=\"Enter notification channel name\"\n          (keydown.enter)=\"onCreateChannel()\"\n        >\n      </mat-form-field>\n      <div style=\"display: flex; justify-content: flex-end; gap: 0.5rem;\">\n        <!-- <button mat-raised-button color=\"accent\" (click)=\"onDefinePreviousChannels()\">\n          Define Previous Channels\n        </button> -->\n        <button mat-raised-button color=\"primary\" (click)=\"onCreateChannel()\"\n                [disabled]=\"newChannelName.invalid\">\n          Create Channel 1\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Channel Connection Section - Only shown when NOT connected -->\n  @if ((subscribedNotificationChannels$ | async); as subscribedChannels) {\n    @if (!isChannelConnected(subscribedChannels)) {\n      <div style=\"padding: 1rem; background: #e3f2fd; border-radius: 4px;\">\n        <strong>Connect to Channel</strong>\n        <div style=\"display: flex; gap: 1rem; margin-top: 0.5rem; flex-wrap: wrap; align-items: flex-start;\">\n          <!-- Channel Selection (from today's DB data) -->\n          <mat-form-field appearance=\"outline\" style=\"flex: 1; min-width: 200px;\">\n            <mat-label>Select Channel</mat-label>\n            <mat-select [formControl]=\"selectedConnectionChannel\" placeholder=\"Select a notification channel\">\n              @for (channel of (todaysNotificationChannels$ | async) || []; track channel) {\n                <mat-option [value]=\"channel\">{{ channel }}</mat-option>\n              }\n              @empty {\n                <mat-option disabled>No channels with data for today</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n\n          <!-- Date Filter -->\n          <mat-form-field appearance=\"outline\" style=\"flex: 1; min-width: 200px;\" [formGroup]=\"dateFilter\">\n            <mat-label>Start Date</mat-label>\n            <input matInput [matDatepicker]=\"startPicker\" formControlName=\"startDate\">\n            <mat-datepicker-toggle matIconSuffix [for]=\"startPicker\"></mat-datepicker-toggle>\n            <mat-datepicker #startPicker></mat-datepicker>\n          </mat-form-field>\n\n          <mat-form-field appearance=\"outline\" style=\"flex: 1; min-width: 200px;\" [formGroup]=\"dateFilter\">\n            <mat-label>End Date</mat-label>\n            <input matInput [matDatepicker]=\"endPicker\" formControlName=\"endDate\">\n            <mat-datepicker-toggle matIconSuffix [for]=\"endPicker\"></mat-datepicker-toggle>\n            <mat-datepicker #endPicker></mat-datepicker>\n          </mat-form-field>\n        </div>\n\n        <div style=\"display: flex; gap: 0.5rem;\">\n          <span style=\"flex:1\"></span>\n          <button\n            mat-raised-button color=\"primary\"\n            (click)=\"onConnectToChannel()\"\n            [disabled]=\"!selectedConnectionChannel.value\"\n          >\n            Connect\n          </button>\n        </div>\n      </div>\n    }\n  }\n\n  <!-- Send Notification Section -->\n  @if ((subscribedNotificationChannels$ | async); as subscribedChannels) {\n    @if (subscribedChannels.length > 0) {\n      <div\n        style=\"padding: 1rem; background: #fff8e1; border-radius: 4px;\"\n        [formGroup]=\"notificationForm\"\n      >\n        <strong>Send Notification</strong>\n\n        <!-- Notification Content -->\n        <div style=\"display: flex; flex-direction: column; margin-top: 0.5rem;\">\n          <mat-form-field style=\"width: 100%;\" appearance=\"outline\">\n            <mat-label>Notification Message</mat-label>\n            <textarea\n              matInput placeholder=\"Type your notification...\"\n              formControlName=\"content\"\n              rows=\"2\"\n              (keydown.enter)=\"onSendNotification(); $event.preventDefault()\"\n            ></textarea>\n          </mat-form-field>\n          <div style=\"display: flex; justify-content: flex-end; margin-top: -0.5rem;\">\n            <button\n              mat-raised-button color=\"accent\"\n              (click)=\"onSendNotification()\"\n              [disabled]=\"notificationForm.invalid\"\n            >\n              Send Notification\n            </button>\n          </div>\n        </div>\n      </div>\n    }\n  }\n\n  <!-- Notifications Table - Only shown when connected -->\n  @if ((subscribedNotificationChannels$ | async); as subscribedChannels) {\n    @if (isChannelConnected(subscribedChannels)) {\n      @if ((notificationMessages$ | async); as notifications) {\n        <div>\n          <div style=\"display: flex; justify-content: space-between; align-items: center;\">\n            <strong>Notifications ({{ notifications.length }})</strong>\n          </div>\n\n          @if (notifications.length > 0) {\n            <div style=\"margin-top: 0.5rem; height: 400px; overflow: auto; border: 1px solid #888; border-radius: 4px;\">\n              <table mat-table [dataSource]=\"notifications\" style=\"width: 100%;\">\n\n                <!-- Date Column -->\n                <ng-container matColumnDef=\"date\">\n                  <th mat-header-cell *matHeaderCellDef style=\"width: 180px;\">Date</th>\n                  <td mat-cell *matCellDef=\"let notification\">\n                    {{ formatTimestamp(notification.created) | date }}\n                  </td>\n                </ng-container>\n\n                <!-- User Column -->\n                <ng-container matColumnDef=\"user\">\n                  <th mat-header-cell *matHeaderCellDef style=\"width: 150px;\">User</th>\n                  <td mat-cell *matCellDef=\"let notification\">\n                    <strong>{{ notification.user_name }}</strong>\n                  </td>\n                </ng-container>\n\n                <!-- Message Column -->\n                <ng-container matColumnDef=\"message\">\n                  <th mat-header-cell *matHeaderCellDef>Message</th>\n                  <td mat-cell *matCellDef=\"let notification\">\n                  <div class=\"pill\" [style.background-color]=\"notification.content.sessionId.color || '#000000'\">\n                    {{ notification.content?.message || notification.content }}\n                  </div>\n                  </td>\n                </ng-container>\n\n                <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n                <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n              </table>\n            </div>\n          } @else {\n            <div style=\"text-align: center; color: #666; padding: 2rem;\">\n              <mat-icon style=\"font-size: 48px; height: 48px; width: 48px; opacity: 0.5;\">notifications_none</mat-icon>\n              <p>No notifications yet. Waiting for notifications on this channel...</p>\n            </div>\n          }\n        </div>\n\n        <!-- Disconnect Button - Below the table -->\n        <div style=\"display: flex; justify-content: right; padding: 1rem;\">\n          <button mat-raised-button color=\"warn\" (click)=\"onDisconnectFromChannel()\">\n            Disconnect from Channel\n          </button>\n        </div>\n      }\n    }\n  }\n\n</div>\n", styles: [".colored-message{font-weight:500;padding:4px 8px;border-radius:4px;display:inline-block;max-width:100%;word-wrap:break-word}.colored-message.black-text{color:#000!important}.colored-message.white-text{color:#fff!important;text-shadow:0 0 2px rgba(0,0,0,.5)}td.mat-mdc-cell{padding:8px 12px}.pill{border-radius:1rem;padding:.5rem 1rem;color:#fff}\n"], dependencies: [{ kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i13.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i9$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i9$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i9$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WsNotificationsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-ws-notifications', standalone: false, template: "<div style=\"display: flex; gap: 1rem; flex-direction: column; margin-top: 1rem;\">\n\n  <!-- Channel Creation Section -->\n  <div style=\"padding: 1rem; background: #e8f5e9; border-radius: 4px;\">\n    <strong>Create Notification Channel</strong>\n    <div style=\"display: flex; flex-direction: column; margin-top: 0.5rem;\">\n      <mat-form-field appearance=\"outline\" style=\"width: 100%;\">\n        <mat-label>Channel Name</mat-label>\n        <input\n          matInput\n          [formControl]=\"newChannelName\"\n          placeholder=\"Enter notification channel name\"\n          (keydown.enter)=\"onCreateChannel()\"\n        >\n      </mat-form-field>\n      <div style=\"display: flex; justify-content: flex-end; gap: 0.5rem;\">\n        <button mat-raised-button color=\"accent\" (click)=\"onDefinePreviousChannels()\">\n          Define Previous Channels\n        </button>\n        <button mat-raised-button color=\"primary\" (click)=\"onCreateChannel()\"\n                [disabled]=\"newChannelName.invalid\">\n          Create Channel\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Channel Connection Section - Only shown when NOT connected -->\n  @if ((subscribedNotificationChannels$ | async); as subscribedChannels) {\n    @if (!isChannelConnected(subscribedChannels)) {\n      <div style=\"padding: 1rem; background: #e3f2fd; border-radius: 4px;\">\n        <strong>Connect to Channel</strong>\n        <div style=\"display: flex; gap: 1rem; margin-top: 0.5rem; flex-wrap: wrap; align-items: flex-start;\">\n          <!-- Channel Selection (from today's DB data) -->\n          <mat-form-field appearance=\"outline\" style=\"flex: 1; min-width: 200px;\">\n            <mat-label>Select Channel</mat-label>\n            <mat-select [formControl]=\"selectedConnectionChannel\" placeholder=\"Select a notification channel\">\n              @for (channel of (todaysNotificationChannels$ | async) || []; track channel) {\n                <mat-option [value]=\"channel\">{{ channel }}</mat-option>\n              }\n              @empty {\n                <mat-option disabled>No channels with data for today</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n\n          <!-- Date Filter -->\n          <mat-form-field appearance=\"outline\" style=\"flex: 1; min-width: 200px;\" [formGroup]=\"dateFilter\">\n            <mat-label>Start Date</mat-label>\n            <input matInput [matDatepicker]=\"startPicker\" formControlName=\"startDate\">\n            <mat-datepicker-toggle matIconSuffix [for]=\"startPicker\"></mat-datepicker-toggle>\n            <mat-datepicker #startPicker></mat-datepicker>\n          </mat-form-field>\n\n          <mat-form-field appearance=\"outline\" style=\"flex: 1; min-width: 200px;\" [formGroup]=\"dateFilter\">\n            <mat-label>End Date</mat-label>\n            <input matInput [matDatepicker]=\"endPicker\" formControlName=\"endDate\">\n            <mat-datepicker-toggle matIconSuffix [for]=\"endPicker\"></mat-datepicker-toggle>\n            <mat-datepicker #endPicker></mat-datepicker>\n          </mat-form-field>\n        </div>\n\n        <div style=\"display: flex; gap: 0.5rem;\">\n          <span style=\"flex:1\"></span>\n          <button\n            mat-raised-button color=\"primary\"\n            (click)=\"onConnectToChannel()\"\n            [disabled]=\"!selectedConnectionChannel.value\"\n          >\n            Connect\n          </button>\n        </div>\n      </div>\n    }\n  }\n\n  <!-- Send Notification Section -->\n  @if ((subscribedNotificationChannels$ | async); as subscribedChannels) {\n    @if (subscribedChannels.length > 0) {\n      <div\n        style=\"padding: 1rem; background: #fff8e1; border-radius: 4px;\"\n        [formGroup]=\"notificationForm\"\n      >\n        <strong>Send Notification</strong>\n\n        <!-- Notification Content -->\n        <div style=\"display: flex; flex-direction: column; margin-top: 0.5rem;\">\n          <mat-form-field style=\"width: 100%;\" appearance=\"outline\">\n            <mat-label>Notification Message</mat-label>\n            <textarea\n              matInput placeholder=\"Type your notification...\"\n              formControlName=\"content\"\n              rows=\"2\"\n              (keydown.enter)=\"onSendNotification(); $event.preventDefault()\"\n            ></textarea>\n          </mat-form-field>\n          <div style=\"display: flex; justify-content: flex-end; margin-top: -0.5rem;\">\n            <button\n              mat-raised-button color=\"accent\"\n              (click)=\"onSendNotification()\"\n              [disabled]=\"notificationForm.invalid\"\n            >\n              Send Notification\n            </button>\n          </div>\n        </div>\n      </div>\n    }\n  }\n\n  <!-- Notifications Table - Only shown when connected -->\n  @if ((subscribedNotificationChannels$ | async); as subscribedChannels) {\n    @if (isChannelConnected(subscribedChannels)) {\n      @if ((notificationMessages$ | async); as notifications) {\n        <div>\n          <div style=\"display: flex; justify-content: space-between; align-items: center;\">\n            <strong>Notifications ({{ notifications.length }})</strong>\n          </div>\n\n          @if (notifications.length > 0) {\n            <div style=\"margin-top: 0.5rem; height: 400px; overflow: auto; border: 1px solid #888; border-radius: 4px;\">\n              <table mat-table [dataSource]=\"notifications\" style=\"width: 100%;\">\n\n                <!-- Date Column -->\n                <ng-container matColumnDef=\"date\">\n                  <th mat-header-cell *matHeaderCellDef style=\"width: 180px;\">Date</th>\n                  <td mat-cell *matCellDef=\"let notification\">\n                    {{ formatTimestamp(notification.created) | date }}\n                  </td>\n                </ng-container>\n\n                <!-- User Column -->\n                <ng-container matColumnDef=\"user\">\n                  <th mat-header-cell *matHeaderCellDef style=\"width: 150px;\">User</th>\n                  <td mat-cell *matCellDef=\"let notification\">\n                    <strong>{{ notification.user_name }}</strong>\n                  </td>\n                </ng-container>\n\n                <!-- Message Column -->\n                <ng-container matColumnDef=\"message\">\n                  <th mat-header-cell *matHeaderCellDef>Message</th>\n                  <td mat-cell *matCellDef=\"let notification\">\n                  <div class=\"pill\" [style.background-color]=\"notification.content.sessionId.color || '#000000'\">\n                    {{ notification.content?.message || notification.content }}\n                  </div>\n                  </td>\n                </ng-container>\n\n                <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n                <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n              </table>\n            </div>\n          } @else {\n            <div style=\"text-align: center; color: #666; padding: 2rem;\">\n              <mat-icon style=\"font-size: 48px; height: 48px; width: 48px; opacity: 0.5;\">notifications_none</mat-icon>\n              <p>No notifications yet. Waiting for notifications on this channel...</p>\n            </div>\n          }\n        </div>\n\n        <!-- Disconnect Button - Below the table -->\n        <div style=\"display: flex; justify-content: right; padding: 1rem;\">\n          <button mat-raised-button color=\"warn\" (click)=\"onDisconnectFromChannel()\">\n            Disconnect from Channel\n          </button>\n        </div>\n      }\n    }\n  }\n\n</div>\n", styles: [".colored-message{font-weight:500;padding:4px 8px;border-radius:4px;display:inline-block;max-width:100%;word-wrap:break-word}.colored-message.black-text{color:#000!important}.colored-message.white-text{color:#fff!important;text-shadow:0 0 2px rgba(0,0,0,.5)}td.mat-mdc-cell{padding:8px 12px}.pill{border-radius:1rem;padding:.5rem 1rem;color:#fff}\n"] }]
+            args: [{ selector: 'app-ws-notifications', standalone: false, template: "<div style=\"display: flex; gap: 1rem; flex-direction: column; margin-top: 1rem;\">\n\n  <!-- Channel Creation Section -->\n  <div style=\"padding: 1rem; background: #e8f5e9; border-radius: 4px;\">\n    <strong>Create Notification Channel</strong>\n    <div style=\"display: flex; flex-direction: column; margin-top: 0.5rem;\">\n      <mat-form-field appearance=\"outline\" style=\"width: 100%;\">\n        <mat-label>Channel Name</mat-label>\n        <input\n          matInput\n          [formControl]=\"newChannelName\"\n          placeholder=\"Enter notification channel name\"\n          (keydown.enter)=\"onCreateChannel()\"\n        >\n      </mat-form-field>\n      <div style=\"display: flex; justify-content: flex-end; gap: 0.5rem;\">\n        <!-- <button mat-raised-button color=\"accent\" (click)=\"onDefinePreviousChannels()\">\n          Define Previous Channels\n        </button> -->\n        <button mat-raised-button color=\"primary\" (click)=\"onCreateChannel()\"\n                [disabled]=\"newChannelName.invalid\">\n          Create Channel 1\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Channel Connection Section - Only shown when NOT connected -->\n  @if ((subscribedNotificationChannels$ | async); as subscribedChannels) {\n    @if (!isChannelConnected(subscribedChannels)) {\n      <div style=\"padding: 1rem; background: #e3f2fd; border-radius: 4px;\">\n        <strong>Connect to Channel</strong>\n        <div style=\"display: flex; gap: 1rem; margin-top: 0.5rem; flex-wrap: wrap; align-items: flex-start;\">\n          <!-- Channel Selection (from today's DB data) -->\n          <mat-form-field appearance=\"outline\" style=\"flex: 1; min-width: 200px;\">\n            <mat-label>Select Channel</mat-label>\n            <mat-select [formControl]=\"selectedConnectionChannel\" placeholder=\"Select a notification channel\">\n              @for (channel of (todaysNotificationChannels$ | async) || []; track channel) {\n                <mat-option [value]=\"channel\">{{ channel }}</mat-option>\n              }\n              @empty {\n                <mat-option disabled>No channels with data for today</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n\n          <!-- Date Filter -->\n          <mat-form-field appearance=\"outline\" style=\"flex: 1; min-width: 200px;\" [formGroup]=\"dateFilter\">\n            <mat-label>Start Date</mat-label>\n            <input matInput [matDatepicker]=\"startPicker\" formControlName=\"startDate\">\n            <mat-datepicker-toggle matIconSuffix [for]=\"startPicker\"></mat-datepicker-toggle>\n            <mat-datepicker #startPicker></mat-datepicker>\n          </mat-form-field>\n\n          <mat-form-field appearance=\"outline\" style=\"flex: 1; min-width: 200px;\" [formGroup]=\"dateFilter\">\n            <mat-label>End Date</mat-label>\n            <input matInput [matDatepicker]=\"endPicker\" formControlName=\"endDate\">\n            <mat-datepicker-toggle matIconSuffix [for]=\"endPicker\"></mat-datepicker-toggle>\n            <mat-datepicker #endPicker></mat-datepicker>\n          </mat-form-field>\n        </div>\n\n        <div style=\"display: flex; gap: 0.5rem;\">\n          <span style=\"flex:1\"></span>\n          <button\n            mat-raised-button color=\"primary\"\n            (click)=\"onConnectToChannel()\"\n            [disabled]=\"!selectedConnectionChannel.value\"\n          >\n            Connect\n          </button>\n        </div>\n      </div>\n    }\n  }\n\n  <!-- Send Notification Section -->\n  @if ((subscribedNotificationChannels$ | async); as subscribedChannels) {\n    @if (subscribedChannels.length > 0) {\n      <div\n        style=\"padding: 1rem; background: #fff8e1; border-radius: 4px;\"\n        [formGroup]=\"notificationForm\"\n      >\n        <strong>Send Notification</strong>\n\n        <!-- Notification Content -->\n        <div style=\"display: flex; flex-direction: column; margin-top: 0.5rem;\">\n          <mat-form-field style=\"width: 100%;\" appearance=\"outline\">\n            <mat-label>Notification Message</mat-label>\n            <textarea\n              matInput placeholder=\"Type your notification...\"\n              formControlName=\"content\"\n              rows=\"2\"\n              (keydown.enter)=\"onSendNotification(); $event.preventDefault()\"\n            ></textarea>\n          </mat-form-field>\n          <div style=\"display: flex; justify-content: flex-end; margin-top: -0.5rem;\">\n            <button\n              mat-raised-button color=\"accent\"\n              (click)=\"onSendNotification()\"\n              [disabled]=\"notificationForm.invalid\"\n            >\n              Send Notification\n            </button>\n          </div>\n        </div>\n      </div>\n    }\n  }\n\n  <!-- Notifications Table - Only shown when connected -->\n  @if ((subscribedNotificationChannels$ | async); as subscribedChannels) {\n    @if (isChannelConnected(subscribedChannels)) {\n      @if ((notificationMessages$ | async); as notifications) {\n        <div>\n          <div style=\"display: flex; justify-content: space-between; align-items: center;\">\n            <strong>Notifications ({{ notifications.length }})</strong>\n          </div>\n\n          @if (notifications.length > 0) {\n            <div style=\"margin-top: 0.5rem; height: 400px; overflow: auto; border: 1px solid #888; border-radius: 4px;\">\n              <table mat-table [dataSource]=\"notifications\" style=\"width: 100%;\">\n\n                <!-- Date Column -->\n                <ng-container matColumnDef=\"date\">\n                  <th mat-header-cell *matHeaderCellDef style=\"width: 180px;\">Date</th>\n                  <td mat-cell *matCellDef=\"let notification\">\n                    {{ formatTimestamp(notification.created) | date }}\n                  </td>\n                </ng-container>\n\n                <!-- User Column -->\n                <ng-container matColumnDef=\"user\">\n                  <th mat-header-cell *matHeaderCellDef style=\"width: 150px;\">User</th>\n                  <td mat-cell *matCellDef=\"let notification\">\n                    <strong>{{ notification.user_name }}</strong>\n                  </td>\n                </ng-container>\n\n                <!-- Message Column -->\n                <ng-container matColumnDef=\"message\">\n                  <th mat-header-cell *matHeaderCellDef>Message</th>\n                  <td mat-cell *matCellDef=\"let notification\">\n                  <div class=\"pill\" [style.background-color]=\"notification.content.sessionId.color || '#000000'\">\n                    {{ notification.content?.message || notification.content }}\n                  </div>\n                  </td>\n                </ng-container>\n\n                <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n                <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n              </table>\n            </div>\n          } @else {\n            <div style=\"text-align: center; color: #666; padding: 2rem;\">\n              <mat-icon style=\"font-size: 48px; height: 48px; width: 48px; opacity: 0.5;\">notifications_none</mat-icon>\n              <p>No notifications yet. Waiting for notifications on this channel...</p>\n            </div>\n          }\n        </div>\n\n        <!-- Disconnect Button - Below the table -->\n        <div style=\"display: flex; justify-content: right; padding: 1rem;\">\n          <button mat-raised-button color=\"warn\" (click)=\"onDisconnectFromChannel()\">\n            Disconnect from Channel\n          </button>\n        </div>\n      }\n    }\n  }\n\n</div>\n", styles: [".colored-message{font-weight:500;padding:4px 8px;border-radius:4px;display:inline-block;max-width:100%;word-wrap:break-word}.colored-message.black-text{color:#000!important}.colored-message.white-text{color:#fff!important;text-shadow:0 0 2px rgba(0,0,0,.5)}td.mat-mdc-cell{padding:8px 12px}.pill{border-radius:1rem;padding:.5rem 1rem;color:#fff}\n"] }]
         }], propDecorators: { server: [{
                 type: Input
             }], wsServer: [{
@@ -8399,8 +8886,9 @@ class HttpRequestServicesDemoComponent {
             { name: "Local Storage Service", value: 'local_storage_service' },
             // { name: "Local Signals Storage Service", value: 'local_storage_signals_service', new: true },
             { name: "Store State Manager Service", value: 'store_state_manager', new: true },
+            { name: "Basic Http Service", value: 'basic_http_service', divider: true },
         ];
-        this.selectedService = this.requestTypes[5].value; //menu selection default
+        this.selectedService = this.requestTypes[1].value; //menu selection default
     }
     ngOnInit() {
         if (this.configOptions)
@@ -8410,11 +8898,11 @@ class HttpRequestServicesDemoComponent {
         this.selectedService = this.requestTypes[type].value;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HttpRequestServicesDemoComponent, deps: [{ token: CONFIG_SETTINGS_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: HttpRequestServicesDemoComponent, selector: "app-http-request-services-demo", inputs: { wsServer: "wsServer", jwtToken: "jwtToken", server: "server", user: "user", path: "path", adapter: "adapter", mapper: "mapper" }, ngImport: i0, template: "<mat-toolbar  style=\"display:flex\">\n  <div>Http Request Manager Services</div>\n  <div style=\"flex:1\"></div>\n  <button mat-stroked-button [matMenuTriggerFor]=\"menu\">Services</button>\n  <mat-menu #menu=\"matMenu\">\n    @for (type of requestTypes; track type; let i = $index) {\n      @if (type?.divider) {\n        <div\n          style=\"margin-top: .5rem; margin-bottom: .5rem;\"\n          >\n          <mat-divider></mat-divider>\n        </div>\n      }\n      <button\n        mat-menu-item\n        (click)=\"onSelected(i)\"\n        [disabled]=\"type.disabled\"\n        >\n        {{ type.name }}\n      </button>\n    }\n\n  </mat-menu>\n</mat-toolbar>\n\n<span>\n  @switch (selectedService) {\n    @case ('http_service') {\n      <p>\n        <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n        <app-request-manager-demo\n          [server]=\"server\"\n          [adapter]=\"adapter\"\n          [mapper]=\"mapper\"\n        ></app-request-manager-demo>\n      </p>\n    }\n    <!-- <p *ngSwitchCase=\"'http_signals_service'\">\n    <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n    <app-request-signals-manager-demo></app-request-signals-manager-demo>\n  </p> -->\n  @case ('http_state_service') {\n    <p>\n      <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n      <app-request-manager-state-demo\n        [server]=\"server\"\n        [adapter]=\"adapter\"\n        [mapper]=\"mapper\"\n      ></app-request-manager-state-demo>\n    </p>\n  }\n  @case ('http_state_service_ws') {\n    <p>\n      <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n      <app-request-manager-ws-demo\n        [server]=\"server\"\n        [wsServer]=\"wsServer\"\n        [jwtToken]=\"jwtToken\"\n        [user]=\"user\"\n        [path]=\"path\"\n      ></app-request-manager-ws-demo>\n    </p>\n  }\n  @case ('database_service') {\n    <p>\n      <app-database-data-demo></app-database-data-demo>\n    </p>\n  }\n  @case ('local_storage_service') {\n    <p>\n      <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n      <app-local-storage-demo></app-local-storage-demo>\n    </p>\n  }\n  <!-- <p *ngSwitchCase=\"'local_storage_signals_service'\">\n  <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n  <app-local-storage-signals-demo></app-local-storage-signals-demo>\n</p> -->\n@case ('store_state_manager') {\n  <p>\n    <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n    <app-store-state-manager-demo></app-store-state-manager-demo>\n  </p>\n}\n@default {\n  <p>\n    Other\n  </p>\n}\n}\n</span>\n\n<ng-template #HTTP_OPTIONS>\n  @if (injectionOptions?.httpRequestOptions) {\n    <div class=\"box\">\n      <h3 style=\"font-weight: bold;\">Injection Token Detected - HTTP Options</h3>\n      {{ injectionOptions?.httpRequestOptions| json }}\n    </div>\n  }\n</ng-template>\n\n<ng-template #LOCAL_OPTIONS>\n  @if (injectionOptions?.LocalStorageOptions) {\n    <ng-container class=\"box\">\n      <div class=\"box\">\n        <h3 style=\"font-weight: bold;\">Injection Token Detected - LocalStorage Options</h3>\n        {{ injectionOptions?.LocalStorageOptions| json }}\n      </div>\n    </ng-container>\n  }\n</ng-template>\n\n\n", styles: [".box{padding:1rem;background-color:#f5f5f5;border:thin gray solid;margin-top:1rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i12.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i3$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: RequestManagerStateDemoComponent, selector: "app-request-manager-state-demo", inputs: ["server", "adapter", "mapper"] }, { kind: "component", type: RequestManagerDemoComponent, selector: "app-request-manager-demo", inputs: ["server", "adapter", "mapper"] }, { kind: "component", type: LocalStorageDemoComponent, selector: "app-local-storage-demo" }, { kind: "component", type: RequestManagerWsDemoComponent, selector: "app-request-manager-ws-demo", inputs: ["server", "wsServer", "jwtToken", "user", "path"] }, { kind: "component", type: StoreStateManagerDemoComponent, selector: "app-store-state-manager-demo" }, { kind: "component", type: DatabaseDataDemoComponent, selector: "app-database-data-demo" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: HttpRequestServicesDemoComponent, selector: "app-http-request-services-demo", inputs: { wsServer: "wsServer", jwtToken: "jwtToken", server: "server", user: "user", path: "path", adapter: "adapter", mapper: "mapper" }, ngImport: i0, template: "<mat-toolbar  style=\"display:flex\">\n  <div>Http Request Manager Services</div>\n  <div style=\"flex:1\"></div>\n  <button mat-stroked-button [matMenuTriggerFor]=\"menu\">Services</button>\n  <mat-menu #menu=\"matMenu\">\n    @for (type of requestTypes; track type; let i = $index) {\n      @if (type?.divider) {\n        <div\n          style=\"margin-top: .5rem; margin-bottom: .5rem;\"\n          >\n          <mat-divider></mat-divider>\n        </div>\n      }\n      <button\n        mat-menu-item\n        (click)=\"onSelected(i)\"\n        [disabled]=\"type.disabled\"\n        >\n        {{ type.name }}\n      </button>\n    }\n\n  </mat-menu>\n</mat-toolbar>\n\n<span>\n  @switch (selectedService) {\n    @case ('basic_http_service') {\n      <p>\n        <app-request-manager-basic-demo></app-request-manager-basic-demo>\n      </p>\n    }\n    @case ('http_service') {\n      <p>\n        <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n        <app-request-manager-demo\n          [server]=\"server\"\n          [adapter]=\"adapter\"\n          [mapper]=\"mapper\"\n        ></app-request-manager-demo>\n      </p>\n    }\n    <!-- <p *ngSwitchCase=\"'http_signals_service'\">\n    <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n    <app-request-signals-manager-demo></app-request-signals-manager-demo>\n  </p> -->\n  @case ('http_state_service') {\n    <p>\n      <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n      <app-request-manager-state-demo\n        [server]=\"server\"\n        [adapter]=\"adapter\"\n        [mapper]=\"mapper\"\n      ></app-request-manager-state-demo>\n    </p>\n  }\n  @case ('http_state_service_ws') {\n    <p>\n      <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n      <app-request-manager-ws-demo\n        [server]=\"server\"\n        [wsServer]=\"wsServer\"\n        [jwtToken]=\"jwtToken\"\n        [user]=\"user\"\n        [path]=\"path\"\n      ></app-request-manager-ws-demo>\n    </p>\n  }\n  @case ('database_service') {\n    <p>\n      <app-database-data-demo></app-database-data-demo>\n    </p>\n  }\n  @case ('local_storage_service') {\n    <p>\n      <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n      <app-local-storage-demo></app-local-storage-demo>\n    </p>\n  }\n  <!-- <p *ngSwitchCase=\"'local_storage_signals_service'\">\n  <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n  <app-local-storage-signals-demo></app-local-storage-signals-demo>\n</p> -->\n@case ('store_state_manager') {\n  <p>\n    <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n    <app-store-state-manager-demo></app-store-state-manager-demo>\n  </p>\n}\n@default {\n  <p>\n    Other\n  </p>\n}\n}\n</span>\n\n<ng-template #HTTP_OPTIONS>\n  @if (injectionOptions?.httpRequestOptions) {\n    <div class=\"box\">\n      <h3 style=\"font-weight: bold;\">Injection Token Detected - HTTP Options</h3>\n      {{ injectionOptions?.httpRequestOptions| json }}\n    </div>\n  }\n</ng-template>\n\n<ng-template #LOCAL_OPTIONS>\n  @if (injectionOptions?.LocalStorageOptions) {\n    <ng-container class=\"box\">\n      <div class=\"box\">\n        <h3 style=\"font-weight: bold;\">Injection Token Detected - LocalStorage Options</h3>\n        {{ injectionOptions?.LocalStorageOptions| json }}\n      </div>\n    </ng-container>\n  }\n</ng-template>\n\n\n", styles: [".box{padding:1rem;background-color:#f5f5f5;border:thin gray solid;margin-top:1rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i12.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i3$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: RequestManagerBasicDemoComponent, selector: "app-request-manager-basic-demo" }, { kind: "component", type: RequestManagerStateDemoComponent, selector: "app-request-manager-state-demo", inputs: ["server", "adapter", "mapper"] }, { kind: "component", type: RequestManagerDemoComponent, selector: "app-request-manager-demo", inputs: ["server", "adapter", "mapper"] }, { kind: "component", type: LocalStorageDemoComponent, selector: "app-local-storage-demo" }, { kind: "component", type: RequestManagerWsDemoComponent, selector: "app-request-manager-ws-demo", inputs: ["server", "wsServer", "jwtToken", "user", "path"] }, { kind: "component", type: StoreStateManagerDemoComponent, selector: "app-store-state-manager-demo" }, { kind: "component", type: DatabaseDataDemoComponent, selector: "app-database-data-demo" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HttpRequestServicesDemoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-http-request-services-demo', standalone: false, template: "<mat-toolbar  style=\"display:flex\">\n  <div>Http Request Manager Services</div>\n  <div style=\"flex:1\"></div>\n  <button mat-stroked-button [matMenuTriggerFor]=\"menu\">Services</button>\n  <mat-menu #menu=\"matMenu\">\n    @for (type of requestTypes; track type; let i = $index) {\n      @if (type?.divider) {\n        <div\n          style=\"margin-top: .5rem; margin-bottom: .5rem;\"\n          >\n          <mat-divider></mat-divider>\n        </div>\n      }\n      <button\n        mat-menu-item\n        (click)=\"onSelected(i)\"\n        [disabled]=\"type.disabled\"\n        >\n        {{ type.name }}\n      </button>\n    }\n\n  </mat-menu>\n</mat-toolbar>\n\n<span>\n  @switch (selectedService) {\n    @case ('http_service') {\n      <p>\n        <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n        <app-request-manager-demo\n          [server]=\"server\"\n          [adapter]=\"adapter\"\n          [mapper]=\"mapper\"\n        ></app-request-manager-demo>\n      </p>\n    }\n    <!-- <p *ngSwitchCase=\"'http_signals_service'\">\n    <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n    <app-request-signals-manager-demo></app-request-signals-manager-demo>\n  </p> -->\n  @case ('http_state_service') {\n    <p>\n      <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n      <app-request-manager-state-demo\n        [server]=\"server\"\n        [adapter]=\"adapter\"\n        [mapper]=\"mapper\"\n      ></app-request-manager-state-demo>\n    </p>\n  }\n  @case ('http_state_service_ws') {\n    <p>\n      <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n      <app-request-manager-ws-demo\n        [server]=\"server\"\n        [wsServer]=\"wsServer\"\n        [jwtToken]=\"jwtToken\"\n        [user]=\"user\"\n        [path]=\"path\"\n      ></app-request-manager-ws-demo>\n    </p>\n  }\n  @case ('database_service') {\n    <p>\n      <app-database-data-demo></app-database-data-demo>\n    </p>\n  }\n  @case ('local_storage_service') {\n    <p>\n      <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n      <app-local-storage-demo></app-local-storage-demo>\n    </p>\n  }\n  <!-- <p *ngSwitchCase=\"'local_storage_signals_service'\">\n  <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n  <app-local-storage-signals-demo></app-local-storage-signals-demo>\n</p> -->\n@case ('store_state_manager') {\n  <p>\n    <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n    <app-store-state-manager-demo></app-store-state-manager-demo>\n  </p>\n}\n@default {\n  <p>\n    Other\n  </p>\n}\n}\n</span>\n\n<ng-template #HTTP_OPTIONS>\n  @if (injectionOptions?.httpRequestOptions) {\n    <div class=\"box\">\n      <h3 style=\"font-weight: bold;\">Injection Token Detected - HTTP Options</h3>\n      {{ injectionOptions?.httpRequestOptions| json }}\n    </div>\n  }\n</ng-template>\n\n<ng-template #LOCAL_OPTIONS>\n  @if (injectionOptions?.LocalStorageOptions) {\n    <ng-container class=\"box\">\n      <div class=\"box\">\n        <h3 style=\"font-weight: bold;\">Injection Token Detected - LocalStorage Options</h3>\n        {{ injectionOptions?.LocalStorageOptions| json }}\n      </div>\n    </ng-container>\n  }\n</ng-template>\n\n\n", styles: [".box{padding:1rem;background-color:#f5f5f5;border:thin gray solid;margin-top:1rem}\n"] }]
+            args: [{ selector: 'app-http-request-services-demo', standalone: false, template: "<mat-toolbar  style=\"display:flex\">\n  <div>Http Request Manager Services</div>\n  <div style=\"flex:1\"></div>\n  <button mat-stroked-button [matMenuTriggerFor]=\"menu\">Services</button>\n  <mat-menu #menu=\"matMenu\">\n    @for (type of requestTypes; track type; let i = $index) {\n      @if (type?.divider) {\n        <div\n          style=\"margin-top: .5rem; margin-bottom: .5rem;\"\n          >\n          <mat-divider></mat-divider>\n        </div>\n      }\n      <button\n        mat-menu-item\n        (click)=\"onSelected(i)\"\n        [disabled]=\"type.disabled\"\n        >\n        {{ type.name }}\n      </button>\n    }\n\n  </mat-menu>\n</mat-toolbar>\n\n<span>\n  @switch (selectedService) {\n    @case ('basic_http_service') {\n      <p>\n        <app-request-manager-basic-demo></app-request-manager-basic-demo>\n      </p>\n    }\n    @case ('http_service') {\n      <p>\n        <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n        <app-request-manager-demo\n          [server]=\"server\"\n          [adapter]=\"adapter\"\n          [mapper]=\"mapper\"\n        ></app-request-manager-demo>\n      </p>\n    }\n    <!-- <p *ngSwitchCase=\"'http_signals_service'\">\n    <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n    <app-request-signals-manager-demo></app-request-signals-manager-demo>\n  </p> -->\n  @case ('http_state_service') {\n    <p>\n      <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n      <app-request-manager-state-demo\n        [server]=\"server\"\n        [adapter]=\"adapter\"\n        [mapper]=\"mapper\"\n      ></app-request-manager-state-demo>\n    </p>\n  }\n  @case ('http_state_service_ws') {\n    <p>\n      <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n      <app-request-manager-ws-demo\n        [server]=\"server\"\n        [wsServer]=\"wsServer\"\n        [jwtToken]=\"jwtToken\"\n        [user]=\"user\"\n        [path]=\"path\"\n      ></app-request-manager-ws-demo>\n    </p>\n  }\n  @case ('database_service') {\n    <p>\n      <app-database-data-demo></app-database-data-demo>\n    </p>\n  }\n  @case ('local_storage_service') {\n    <p>\n      <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n      <app-local-storage-demo></app-local-storage-demo>\n    </p>\n  }\n  <!-- <p *ngSwitchCase=\"'local_storage_signals_service'\">\n  <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n  <app-local-storage-signals-demo></app-local-storage-signals-demo>\n</p> -->\n@case ('store_state_manager') {\n  <p>\n    <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n    <app-store-state-manager-demo></app-store-state-manager-demo>\n  </p>\n}\n@default {\n  <p>\n    Other\n  </p>\n}\n}\n</span>\n\n<ng-template #HTTP_OPTIONS>\n  @if (injectionOptions?.httpRequestOptions) {\n    <div class=\"box\">\n      <h3 style=\"font-weight: bold;\">Injection Token Detected - HTTP Options</h3>\n      {{ injectionOptions?.httpRequestOptions| json }}\n    </div>\n  }\n</ng-template>\n\n<ng-template #LOCAL_OPTIONS>\n  @if (injectionOptions?.LocalStorageOptions) {\n    <ng-container class=\"box\">\n      <div class=\"box\">\n        <h3 style=\"font-weight: bold;\">Injection Token Detected - LocalStorage Options</h3>\n        {{ injectionOptions?.LocalStorageOptions| json }}\n      </div>\n    </ng-container>\n  }\n</ng-template>\n\n\n", styles: [".box{padding:1rem;background-color:#f5f5f5;border:thin gray solid;margin-top:1rem}\n"] }]
         }], ctorParameters: () => [{ type: ConfigOptions, decorators: [{
                     type: Inject,
                     args: [CONFIG_SETTINGS_TOKEN]
@@ -8960,7 +9448,8 @@ class HttpRequestManagerModule {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HttpRequestManagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: HttpRequestManagerModule, declarations: [HttpRequestServicesDemoComponent,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: HttpRequestManagerModule, declarations: [RequestManagerBasicDemoComponent,
+            HttpRequestServicesDemoComponent,
             RequestManagerStateDemoComponent,
             RequestManagerDemoComponent,
             RequestSignalsManagerDemoComponent,
@@ -9062,6 +9551,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         // StoreStateManagerModule
                     ],
                     declarations: [
+                        RequestManagerBasicDemoComponent,
                         HttpRequestServicesDemoComponent,
                         RequestManagerStateDemoComponent,
                         RequestManagerDemoComponent,