http-request-manager 18.12.3 → 18.12.8

package/fesm2022/http-request-manager.mjs

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
 import { inject, Injectable, APP_ID, Inject, InjectionToken, isDevMode, signal, effect, computed, Injector, Optional, EventEmitter, Input, Output, ViewEncapsulation, Component, NgModule, ViewChild } from '@angular/core';
 import { ComponentStore } from '@ngrx/component-store';
-import { map, catchError, filter, tap, finalize, takeWhile, retry, startWith, mergeMap, takeUntil, concatMap, toArray, withLatestFrom, switchMap, delay, take, scan, distinctUntilChanged } from 'rxjs/operators';
+import { map, catchError, filter, finalize, tap, scan, takeWhile, retry, startWith, mergeMap, takeUntil, concatMap, toArray, withLatestFrom, switchMap, delay, take, distinctUntilChanged } from 'rxjs/operators';
 import { HttpClient, HttpHeaders, HttpEventType, HttpHeaderResponse, HttpErrorResponse, HTTP_INTERCEPTORS } from '@angular/common/http';
 import * as CryptoJS from 'crypto-js';
-import { from, BehaviorSubject, EMPTY, throwError, defer, interval, timer, Subject, of, merge, Subscription, take as take$1, catchError as catchError$1, map as map$1, tap as tap$1, switchMap as switchMap$1, startWith as startWith$1, distinctUntilChanged as distinctUntilChanged$1, combineLatest, filter as filter$1, takeUntil as takeUntil$1, ReplaySubject } from 'rxjs';
+import { from, BehaviorSubject, EMPTY, throwError, defer, interval, timer, Subject, of, Observable, merge, Subscription, take as take$1, catchError as catchError$1, map as map$1, tap as tap$1, switchMap as switchMap$1, startWith as startWith$1, distinctUntilChanged as distinctUntilChanged$1, combineLatest, filter as filter$1, takeUntil as takeUntil$1, ReplaySubject } from 'rxjs';
 import { toObservable } from '@angular/core/rxjs-interop';
 import { ToastMessageDisplayService, ToastDisplay, ToastColors, ToastMessageDisplayModule } from 'toast-message-display';
 import Dexie from 'dexie';
@@ -883,28 +883,89 @@ class StreamingProcessor {
         this.buffer = '';
         this.contentType = '';
         this.maxBufferSize = 10 * 1024 * 1024; // 10MB limit
+        this.lastParsedLength = 0; // Track parsed position to avoid duplicates
+        this.lastParsedLineEnd = 0; // Track end of last-parsed complete line for NDJSON incremental parsing
         this.streamConfig = config || { streamType: StreamType.AI_STREAMING };
     }
     /**
-     * Process HTTP events and extract streaming data
+     * Process HTTP events and extract streaming data with progress
      */
     process(event) {
         switch (event.type) {
             case HttpEventType.ResponseHeader:
                 this.contentType = event.headers?.get('content-type') || '';
+                // Read total from response header if configured
+                if (this.streamConfig.totalHeader && event.headers) {
+                    const totalVal = event.headers.get(this.streamConfig.totalHeader);
+                    if (totalVal !== undefined && totalVal !== null) {
+                        const parsed = parseInt(totalVal, 10);
+                        if (!isNaN(parsed)) {
+                            this.totalFromHeader = parsed;
+                        }
+                    }
+                }
                 return null;
             case HttpEventType.DownloadProgress:
                 if (event.partialText) {
-                    this.appendToBuffer(event.partialText);
+                    // partialText is cumulative, so replace the buffer instead of appending
+                    this.buffer = event.partialText;
                     const parsedData = this.parseBuffer();
-                    return parsedData.length > 0 ? [parsedData[0]] : null;
+                    // For NDJSON incremental parsing, parsedData already contains only new items.
+                    // For other formats, parsedData is cumulative so slice from lastParsedLength.
+                    const isIncremental = this.streamConfig.streamType === StreamType.NDJSON;
+                    const newItems = isIncremental ? parsedData : parsedData.slice(this.lastParsedLength);
+                    // received = cumulative total for progress display
+                    const received = isIncremental
+                        ? this.lastParsedLength + parsedData.length
+                        : parsedData.length;
+                    this.lastParsedLength = received;
+                    // Return null when no new items — prevents empty array emissions
+                    if (newItems.length === 0) {
+                        return null;
+                    }
+                    const total = this.totalFromHeader;
+                    const percent = total
+                        ? Math.min(100, Math.round((received / total) * 100))
+                        : 0;
+                    const progress = {
+                        received,
+                        total,
+                        percent,
+                        stage: 'streaming'
+                    };
+                    return {
+                        data: newItems,
+                        progress
+                    };
                 }
                 return null;
             case HttpEventType.Response:
                 if (event.body) {
-                    this.appendToBuffer(event.body);
+                    // event.body is the complete response, replace the buffer
+                    this.buffer = event.body;
                     const parsedData = this.parseBuffer();
-                    return parsedData.length > 0 ? parsedData : null;
+                    // For NDJSON incremental parsing, parsedData already contains only new items.
+                    // For other formats, parsedData is cumulative so slice from lastParsedLength.
+                    const isIncremental = this.streamConfig.streamType === StreamType.NDJSON;
+                    const remaining = isIncremental ? parsedData : parsedData.slice(this.lastParsedLength);
+                    const received = isIncremental
+                        ? this.lastParsedLength + parsedData.length
+                        : parsedData.length;
+                    this.lastParsedLength = received;
+                    const total = this.totalFromHeader;
+                    const percent = total
+                        ? Math.min(100, Math.round((received / total) * 100))
+                        : 100;
+                    const progress = {
+                        received,
+                        total,
+                        percent,
+                        stage: 'complete'
+                    };
+                    return {
+                        data: remaining.length > 0 ? remaining : [],
+                        progress
+                    };
                 }
                 return null;
             default:
@@ -919,6 +980,7 @@ class StreamingProcessor {
         // Implement sliding window if buffer gets too large
         if (this.buffer.length > this.maxBufferSize) {
             this.buffer = this.buffer.slice(-this.maxBufferSize / 2);
+            this.lastParsedLineEnd = 0;
         }
     }
     /**
@@ -929,11 +991,25 @@ class StreamingProcessor {
             return [];
         }
         try {
+            if (this.streamConfig.streamType === StreamType.NDJSON) {
+                // For NDJSON, only parse complete lines since the last parse.
+                // Find the last newline in the buffer — everything after it is an incomplete line.
+                const lastNewlineIndex = this.buffer.lastIndexOf('\n');
+                if (lastNewlineIndex === -1) {
+                    // No complete lines yet
+                    return [];
+                }
+                // Parse only the content from lastParsedLineEnd up to (and including) the last newline
+                const bufferToParse = this.buffer.substring(this.lastParsedLineEnd, lastNewlineIndex + 1);
+                this.lastParsedLineEnd = lastNewlineIndex + 1;
+                const result = parseStreamData(bufferToParse, this.contentType, this.streamConfig);
+                return result;
+            }
             const result = parseStreamData(this.buffer, this.contentType, this.streamConfig);
             return result;
         }
         catch (error) {
-            console.warn('Failed to parse streaming data:', error);
+            // console.warn('Failed to parse streaming data:', error);
             return [];
         }
     }
@@ -943,6 +1019,9 @@ class StreamingProcessor {
     reset() {
         this.buffer = '';
         this.contentType = '';
+        this.lastParsedLength = 0;
+        this.lastParsedLineEnd = 0;
+        this.totalFromHeader = undefined;
     }
     /**
      * Update configuration
@@ -1031,6 +1110,8 @@ function extractJsonObjects(text) {
  */
 function requestStreaming(config) {
     const processor = new StreamingProcessor(config);
+    // Reset processor state to prevent stale data from previous aborted streams
+    processor.reset();
     return input$ => input$.pipe(
     // Filter only streaming-related events
     filter((event) => event.type === HttpEventType.DownloadProgress ||
@@ -2793,19 +2874,6 @@ class UploadValidationErrorModel {
     }
 }
 
-class UserData {
-    constructor(ldap = '', name = '', email = '', color = RandomPaletteColor()) {
-        this.ldap = ldap;
-        this.name = name;
-        this.email = email;
-        this.color = color;
-    }
-    static adapt(item) {
-        const userName = `${item?.first_name} ${item?.last_name}`;
-        return new UserData(item?.ldap, userName, item?.email, item?.color);
-    }
-}
-
 class RequestService extends WebsocketService {
     constructor() {
         super(...arguments);
@@ -2814,34 +2882,94 @@ class RequestService extends WebsocketService {
         this.headersService = inject(HeadersService);
         this.isPending = new BehaviorSubject(false);
         this.isPending$ = this.isPending.asObservable();
+        // Separate pending state for streaming operations only
+        this.isStreamingPending = new BehaviorSubject(false);
+        this.isStreamingPending$ = this.isStreamingPending.asObservable();
         this.progress = new BehaviorSubject(0);
         this.progress$ = this.progress.asObservable();
+        this.streamProgress = new BehaviorSubject({
+            received: 0,
+            total: undefined,
+            percent: 0,
+            stage: 'connecting'
+        });
+        this.streamProgress$ = this.streamProgress.asObservable();
+        this.streamProgressReset = {
+            received: 0,
+            total: undefined,
+            percent: 0,
+            stage: 'connecting'
+        };
     }
     // Implementation
     getRecordRequest(options) {
         const urlPath = this.buildUrlPath(options);
         const headers = this.buildCombinedHeaders(options);
         this.isPending.next(true);
+        if (options.stream) {
+            this.isStreamingPending.next(true);
+            this.streamProgress.next({
+                received: 0,
+                total: undefined,
+                percent: 0,
+                stage: 'connecting'
+            });
+        }
         return (options.stream)
             ? this.http.get(urlPath, {
                 ...headers,
                 observe: 'events',
                 responseType: 'text',
                 reportProgress: true
-            }).pipe(tap(data => console.log('STREAM DATA', data)), requestStreaming({ streamType: options.streamType || StreamType.AI_STREAMING }), this.requestStreaming(options), this.handleFinalize())
+            }).pipe(
+            // tap(data => console.log('STREAM DATA', data)),
+            requestStreaming({
+                streamType: options.streamType || StreamType.AI_STREAMING,
+                totalHeader: options.totalHeader
+            }), this.requestStreaming(options), finalize(() => {
+                this.isPending.next(false);
+                this.isStreamingPending.next(false);
+                this.streamProgress.next({
+                    received: 0,
+                    total: undefined,
+                    percent: 0,
+                    stage: 'connecting'
+                });
+            }))
             : this.http.get(urlPath, headers).pipe(this.request(options));
     }
     createRecordRequest(options, data) {
         const urlPath = this.buildUrlPath(options);
         const headers = this.buildCombinedHeaders(options);
         this.isPending.next(true);
+        if (options.stream) {
+            this.isStreamingPending.next(true);
+            this.streamProgress.next({
+                received: 0,
+                total: undefined,
+                percent: 0,
+                stage: 'connecting'
+            });
+        }
         return (options.stream)
             ? this.http.post(urlPath, data, {
                 ...headers,
                 observe: 'events',
                 responseType: 'text',
                 reportProgress: true
-            }).pipe(requestStreaming({ streamType: options.streamType || StreamType.AI_STREAMING }), this.requestStreaming(options), this.handleFinalize())
+            }).pipe(requestStreaming({
+                streamType: options.streamType || StreamType.AI_STREAMING,
+                totalHeader: options.totalHeader
+            }), this.requestStreaming(options), finalize(() => {
+                this.isPending.next(false);
+                this.isStreamingPending.next(false);
+                this.streamProgress.next({
+                    received: 0,
+                    total: undefined,
+                    percent: 0,
+                    stage: 'connecting'
+                });
+            }))
             : this.http.post(urlPath, data, headers).pipe(this.request(options));
     }
     updateRecordRequest(options, data) {
@@ -2884,15 +3012,20 @@ class RequestService extends WebsocketService {
     }
     requestStreaming(options) {
         return (source$) => {
-            return source$.pipe(map(data => {
-                if (!data || (Array.isArray(data) && data.length === 0)) {
-                    return data;
-                }
+            return source$.pipe(tap(output => {
+                this.progress.next(output.progress.percent);
+                this.streamProgress.next(output.progress);
+            }), scan((acc, output) => {
+                // Accumulate data from each emission
+                const newData = output.data;
                 if (options?.adapter) {
-                    return data.map((item) => options.adapter(item));
+                    const adaptedData = newData.map((item) => options.adapter(item));
+                    return [...acc, ...adaptedData];
                 }
-                return data;
-            }));
+                else {
+                    return [...acc, ...newData];
+                }
+            }, []));
         };
     }
     downloadFileRequest(options) {
@@ -3030,7 +3163,12 @@ class RequestService extends WebsocketService {
         return formData;
     }
     handleFinalize() {
-        return finalize(() => this.isPending.next(false));
+        return finalize(() => {
+            this.isPending.next(false);
+            // Note: do NOT reset streamProgress here — it fires on cancel/cancel too,
+            // not just natural completion. Reset only happens in requestStreaming
+            // operator on Response complete event, or when a new stream starts.
+        });
     }
     downloadFile(file, fileData) {
         const navigatorAny = window.navigator;
@@ -3586,6 +3724,7 @@ class HTTPManagerService extends RequestService {
         this.data$ = this.data.asObservable();
         this.polling$ = new Subject();
         this.config = ApiRequest.adapt();
+        this.streamProgress$ = this.streamProgress.asObservable();
         this.config = (configOptions) ? ApiRequest.adapt(configOptions.httpRequestOptions) : this.config;
     }
     // ═══════════════════════════════════════════════════════════════════════════
@@ -3722,6 +3861,16 @@ class HTTPManagerService extends RequestService {
     getRequest(options, params) {
         this.isPending.next(true);
         this.data.next(null);
+        // Only reset streamProgress when actually starting a stream,
+        // not for regular requests that don't use it
+        if (options?.stream) {
+            this.streamProgress.next({
+                received: 0,
+                total: undefined,
+                percent: 0,
+                stage: 'connecting'
+            });
+        }
         const updatedOptions = this.defineReqOptions(options, params);
         const func = this.getRecordRequest;
         const requests = this.createRequest(func, updatedOptions);
@@ -3730,9 +3879,19 @@ class HTTPManagerService extends RequestService {
             this.data.next(data);
             if (updatedOptions.displaySuccess)
                 this.handleSuccessWithSnackBar(updatedOptions.successMessage);
-        })).pipe(finalize(() => this.isPending.next(false)), catchError((err) => {
+        }), finalize(() => {
+            this.streamProgress.next({
+                ...this.streamProgress.value,
+                stage: 'complete'
+            });
+            this.isPending.next(false);
+        }), catchError((err) => {
             if (updatedOptions.displayError)
                 this.handleErrorWithSnackBar(err, updatedOptions.errorMessage || err?.message);
+            this.streamProgress.next({
+                ...this.streamProgress.value,
+                stage: 'error'
+            });
             this.isPending.next(false);
             return this.handleError(err);
         }));
@@ -4043,7 +4202,7 @@ class HTTPManagerService extends RequestService {
     }
     handleSequentialError(request, error, index, options) {
         if (options.logErrors !== false) {
-            console.error(`Batch request ${index} failed:`, error);
+            // console.error(`Batch request ${index} failed:`, error);
         }
         if (options.stopOnError) {
             return throwError(() => error);
@@ -4055,7 +4214,7 @@ class HTTPManagerService extends RequestService {
     }
     handleParallelError(request, error, index, options) {
         if (options.logErrors !== false) {
-            console.error(`Batch request ${index} failed:`, error);
+            // console.error(`Batch request ${index} failed:`, error);
         }
         if (options.ignoreErrors) {
             return of(undefined);
@@ -4083,49 +4242,186 @@ class RequestSignalsService extends WebsocketService {
         this.http = inject(HttpClient);
         this.pathQueryService = inject(PathQueryService);
         this.headersService = inject(HeadersService);
-        this.isPending = signal(false);
+        // Use counter instead of boolean to handle multiple concurrent requests
+        this._activeRequestCount = signal(0);
+        this.isPending = computed(() => this._activeRequestCount() > 0);
         this.progress = signal(0);
-        this.isIdle = computed(() => !this.isPending());
+        // Track active request by method name for switchMap behavior
+        this.activeRequests = new Map();
+        this.activeMethod = null;
+        this.activeStreamMethod = null;
+        // Queue for requests that need to wait
+        this.requestQueue = [];
+        // Cleanup subject for cancelling queued requests on destroy
+        this.destroy$ = new Subject();
     }
     // Implementation
     getRecordRequest(options) {
         const urlPath = this.buildUrlPath(options);
         const headers = this.buildCombinedHeaders(options);
-        this.isPending.set(true);
-        return (options.stream)
+        const isStream = options.stream === true;
+        const request$ = (isStream)
             ? this.http.get(urlPath, {
                 ...headers,
                 observe: 'events',
                 responseType: 'text',
                 reportProgress: true
-            }).pipe(requestStreaming({ streamType: options.streamType || StreamType.AI_STREAMING }), this.requestStreamingOperator(options), this.handleFinalize())
-            : this.http.get(urlPath, headers).pipe(this.request(options), this.handleFinalize());
+            }).pipe(requestStreaming({
+                streamType: options.streamType || StreamType.AI_STREAMING,
+                totalHeader: options.totalHeader
+            }), this.requestStreamingOperator(options), finalize(() => this._activeRequestCount.update(c => Math.max(0, c - 1))))
+            : this.http.get(urlPath, headers).pipe(this.request(options), finalize(() => this._activeRequestCount.update(c => Math.max(0, c - 1))));
+        return this.queueRequest(request$, 'GET', isStream);
     }
     // Implementation
     createRecordRequest(options, data) {
         const urlPath = this.buildUrlPath(options);
         const headers = this.buildCombinedHeaders(options);
-        this.isPending.set(true);
-        return (options.stream)
+        const isStream = options.stream === true;
+        const request$ = (isStream)
             ? this.http.post(urlPath, data, {
                 ...headers,
                 observe: 'events',
                 responseType: 'text',
                 reportProgress: true
-            }).pipe(requestStreaming({ streamType: options.streamType || StreamType.AI_STREAMING }), this.requestStreamingOperator(options), this.handleFinalize())
-            : this.http.post(urlPath, data, headers).pipe(this.request(options), this.handleFinalize());
+            }).pipe(requestStreaming({
+                streamType: options.streamType || StreamType.AI_STREAMING,
+                totalHeader: options.totalHeader
+            }), this.requestStreamingOperator(options), finalize(() => this._activeRequestCount.update(c => Math.max(0, c - 1))))
+            : this.http.post(urlPath, data, headers).pipe(this.request(options), finalize(() => this._activeRequestCount.update(c => Math.max(0, c - 1))));
+        return this.queueRequest(request$, 'POST', isStream);
     }
     updateRecordRequest(options, data) {
         const urlPath = this.buildUrlPath(options);
         const headers = this.buildHeaders(options);
-        this.isPending.set(true);
-        return this.http.put(urlPath, data, headers).pipe(this.request(options), this.handleFinalize());
+        const request$ = this.http.put(urlPath, data, headers).pipe(this.request(options), finalize(() => this._activeRequestCount.update(c => Math.max(0, c - 1))));
+        return this.queueRequest(request$, 'PUT');
     }
     deleteRecordRequest(options) {
         const urlPath = this.buildUrlPath(options);
         const headers = this.buildHeaders(options);
-        this.isPending.set(true);
-        return this.http.delete(urlPath, headers).pipe(this.request(options), this.handleFinalize());
+        const request$ = this.http.delete(urlPath, headers).pipe(this.request(options), finalize(() => this._activeRequestCount.update(c => Math.max(0, c - 1))));
+        return this.queueRequest(request$, 'DELETE');
+    }
+    /**
+     * Queue a request to ensure FIFO processing:
+     * - All requests are queued and processed sequentially
+     * - Streams are protected - non-stream requests wait for active streams
+     */
+    queueRequest(request$, method, isStream = false) {
+        // console.log(`[Queue] ${method} queued (isStream=${isStream})`, {
+        //   activeMethod: this.activeMethod,
+        //   activeStreamMethod: this.activeStreamMethod,
+        //   queueLength: this.requestQueue.length
+        // });
+        return new Observable((observer) => {
+            // console.log(`[Queue] ${method} observer created, checking conditions...`, {
+            //   activeMethod: this.activeMethod,
+            //   activeStreamMethod: this.activeStreamMethod,
+            //   isStream
+            // });
+            const queuedRequest = {
+                observable: request$,
+                resolve: (value) => observer.next(value),
+                reject: (error) => observer.error(error),
+                method,
+                isStream
+            };
+            // If a stream is currently active, non-stream requests must wait
+            if (this.activeStreamMethod && !isStream) {
+                // console.log(`[Queue] ${method} queued (1), waiting for stream ${this.activeStreamMethod}`);
+                this.requestQueue.push(queuedRequest);
+                return () => {
+                    const idx = this.requestQueue.findIndex(q => q === queuedRequest);
+                    if (idx !== -1)
+                        this.requestQueue.splice(idx, 1);
+                };
+            }
+            // If a request is already running, queue this one (FIFO)
+            if (this.activeMethod) {
+                // console.log(`[Queue] ${method} queued (2), waiting for ${this.activeMethod}`);
+                this.requestQueue.push(queuedRequest);
+                return () => {
+                    const idx = this.requestQueue.findIndex(q => q === queuedRequest);
+                    if (idx !== -1)
+                        this.requestQueue.splice(idx, 1);
+                };
+            }
+            // No active request - start immediately
+            // console.log(`[Queue] ${method} starting immediately`);
+            this.startRequest(queuedRequest, observer);
+            return () => {
+                const idx = this.requestQueue.findIndex(q => q === queuedRequest);
+                if (idx !== -1)
+                    this.requestQueue.splice(idx, 1);
+            };
+        });
+    }
+    /**
+     * Start processing a request
+     */
+    startRequest(queuedRequest, observer) {
+        this.activeMethod = queuedRequest.method;
+        if (queuedRequest.isStream) {
+            this.activeStreamMethod = queuedRequest.method;
+        }
+        this._activeRequestCount.update(c => c + 1);
+        // console.log(`[Queue] Starting ${queuedRequest.method}${queuedRequest.isStream ? ' (STREAM)' : ''}`, {
+        //   activeMethod: this.activeMethod,
+        //   activeStreamMethod: this.activeStreamMethod,
+        //   queueLength: this.requestQueue.length
+        // });
+        const sub = queuedRequest.observable.subscribe({
+            next: (value) => {
+                // console.log(`[Queue] ${queuedRequest.method} received value, isStream=${queuedRequest.isStream}`);
+                observer.next(value);
+            },
+            error: (error) => {
+                // console.log(`[Queue] ${queuedRequest.method} error:`, error);
+                observer.error(error);
+                this.cleanupAndProcessNext(queuedRequest.method, !!queuedRequest.isStream);
+            },
+            complete: () => {
+                // console.log(`[Queue] ${queuedRequest.method} complete, isStream=${queuedRequest.isStream}`);
+                observer.complete();
+                this.cleanupAndProcessNext(queuedRequest.method, !!queuedRequest.isStream);
+            }
+        });
+        this.activeRequests.set(queuedRequest.method, sub);
+    }
+    /**
+     * Clean up completed request and process next in queue
+     */
+    cleanupAndProcessNext(method, wasStream) {
+        // console.log(`[Queue] cleanupAndProcessNext called: method=${method}, wasStream=${wasStream}`, {
+        //   activeMethod: this.activeMethod,
+        //   activeStreamMethod: this.activeStreamMethod,
+        //   queueLength: this.requestQueue.length
+        // });
+        this.activeRequests.delete(method);
+        this.activeMethod = null;
+        if (wasStream) {
+            this.activeStreamMethod = null;
+        }
+        this._activeRequestCount.update(c => Math.max(0, c - 1));
+        // console.log(`[Queue] After cleanup:`, {
+        //   activeMethod: this.activeMethod,
+        //   activeStreamMethod: this.activeStreamMethod,
+        //   queueLength: this.requestQueue.length
+        // });
+        // Process next request in queue
+        if (this.requestQueue.length > 0) {
+            const next = this.requestQueue.shift();
+            // console.log(`[Queue] Processing next from queue: ${next.method}`, {
+            //   isStream: next.isStream,
+            //   queueLength: this.requestQueue.length
+            // });
+            this.startRequest(next, {
+                next: (value) => next.resolve(value),
+                error: (error) => next.reject(error),
+                complete: () => { }
+            });
+        }
     }
     buildUrlPath(options) {
         return this.pathQueryService.buildAPIPath(options.server, options.path);
@@ -4154,7 +4450,10 @@ class RequestSignalsService extends WebsocketService {
     }
     requestStreamingOperator(options) {
         return (source$) => {
-            return source$.pipe(map(data => {
+            return source$.pipe(tap(output => {
+                this.progress.set(output.progress.percent);
+            }), map(output => {
+                const data = output.data;
                 if (!data || (Array.isArray(data) && data.length === 0)) {
                     return data;
                 }
@@ -4166,14 +4465,12 @@ class RequestSignalsService extends WebsocketService {
         };
     }
     downloadFileRequest(options) {
-        this.isPending.set(true);
+        this._activeRequestCount.update(c => c + 1);
         const urlPath = this.buildUrlPath(options);
-        return this.http.get(urlPath, { responseType: 'blob', observe: 'events', reportProgress: true })
+        const request$ = this.http.get(urlPath, { responseType: 'blob', observe: 'events', reportProgress: true })
             .pipe(map((event) => {
-            this.isPending.set(true);
             if (event instanceof HttpHeaderResponse) {
                 if (event.status !== 200) {
-                    this.isPending.set(false);
                     throw new Error('Download failed');
                 }
             }
@@ -4189,59 +4486,54 @@ class RequestSignalsService extends WebsocketService {
                         const file = (header_content) ? header_content.split('=')[1].substring(0, header_content.split('=')[1].length) : '';
                         const fileName = (fileNamePath !== '') ? fileNamePath : file;
                         if (fileName === '') {
-                            this.isPending.set(false);
                             throw new Error('Save File: (file name and extension) not found in Headers or Path');
                         }
                         this.downloadFile(fileName, event.body);
-                        this.isPending.set(false);
                         return 100;
                     }
                     catch (error) {
                         throw new Error('Download failed');
                     }
                 default:
-                    this.isPending.set(false);
                     return 0;
             }
         }), catchError(err => {
             return throwError(() => err);
-        }));
+        }), finalize(() => this._activeRequestCount.update(c => Math.max(0, c - 1))));
+        return this.queueRequest(request$, 'DOWNLOAD');
     }
     uploadFileRequest(options) {
-        this.isPending.set(true);
         const files = options.uploadFiles ? (Array.isArray(options.uploadFiles) ? options.uploadFiles : [options.uploadFiles]) : [];
         const validation = this.validateUploadFiles(files, options);
         if (validation.validFiles.length === 0) {
-            this.isPending.set(false);
             return throwError(() => new UploadValidationErrorModel(validation.invalidFiles, 0, files.length));
         }
+        this._activeRequestCount.update(c => c + 1);
         const fieldName = options.uploadFieldName || (files.length === 1 ? 'file' : 'files');
         const formData = this.buildFormData(validation.validFiles, fieldName);
         const urlPath = this.buildUrlPath(options);
         const method = options.uploadHttpMethod || 'POST';
-        return this.http.request(method, urlPath, {
+        const request$ = this.http.request(method, urlPath, {
             body: formData,
             observe: 'events',
             reportProgress: true
         }).pipe(map((event) => {
-            this.isPending.set(true);
             switch (event.type) {
                 case HttpEventType.UploadProgress:
                     const status = event.total ? Math.round(event.loaded / (event.total || 1) * 100) : 0;
                     this.progress.set(status);
                     return null;
                 case HttpEventType.Response:
-                    this.isPending.set(false);
                     this.progress.set(0);
                     return event.body;
                 default:
                     return null;
             }
         }), filter((body) => body !== null), catchError(err => {
-            this.isPending.set(false);
             this.progress.set(0);
             return throwError(() => err);
-        }));
+        }), finalize(() => this._activeRequestCount.update(c => Math.max(0, c - 1))));
+        return this.queueRequest(request$, 'UPLOAD');
     }
     validateUploadFiles(files, options) {
         const validFiles = [];
@@ -4290,9 +4582,6 @@ class RequestSignalsService extends WebsocketService {
         });
         return formData;
     }
-    handleFinalize() {
-        return finalize(() => this.isPending.set(false));
-    }
     downloadFile(file, fileData) {
         const navigatorAny = window.navigator;
         const extension = file.split('.')[1]?.toLowerCase();
@@ -4506,7 +4795,6 @@ class HTTPManagerSignalsService extends RequestSignalsService {
     }
     // REQUESTS
     getRequest(options, params) {
-        this.isPending.set(true);
         this.data.set(null);
         const updatedOptions = this.defineReqOptions(options, params);
         const func = this.getRecordRequest;
@@ -4515,15 +4803,13 @@ class HTTPManagerSignalsService extends RequestSignalsService {
             this.data.set(data);
             if (updatedOptions.displaySuccess)
                 this.handleSuccessWithSnackBar(updatedOptions.successMessage);
-        }), finalize(() => this.isPending.set(false)), catchError((err) => {
+        }), catchError((err) => {
             if (updatedOptions.displayError)
                 this.handleErrorWithSnackBar(err, updatedOptions.errorMessage || err?.message);
-            this.isPending.set(false);
             return this.handleError(err);
         }));
     }
     postRequest(data, options, params) {
-        this.isPending.set(true);
         this.data.set(null);
         const updatedOptions = this.defineReqOptions(options, params);
         const func = this.createRecordRequest;
@@ -4532,15 +4818,13 @@ class HTTPManagerSignalsService extends RequestSignalsService {
             this.data.set(data);
             if (updatedOptions.displaySuccess)
                 this.handleSuccessWithSnackBar(updatedOptions.successMessage);
-        }), finalize(() => this.isPending.set(false)), catchError((err) => {
+        }), catchError((err) => {
             if (updatedOptions.displayError)
                 this.handleErrorWithSnackBar(err, updatedOptions.errorMessage);
-            this.isPending.set(false);
             return this.handleError(err);
         }));
     }
     putRequest(data, options, params) {
-        this.isPending.set(true);
         this.data.set(null);
         const updatedOptions = this.defineReqOptions(options, params);
         const func = this.updateRecordRequest;
@@ -4549,15 +4833,13 @@ class HTTPManagerSignalsService extends RequestSignalsService {
             this.data.set(data);
             if (updatedOptions.displaySuccess)
                 this.handleSuccessWithSnackBar(updatedOptions.successMessage);
-        }), finalize(() => this.isPending.set(false)), catchError((err) => {
+        }), catchError((err) => {
             if (updatedOptions.displayError)
                 this.handleErrorWithSnackBar(err, updatedOptions.errorMessage);
-            this.isPending.set(false);
             return this.handleError(err);
         }));
     }
     deleteRequest(options, params) {
-        this.isPending.set(true);
         this.data.set(null);
         const updatedOptions = this.defineReqOptions(options, params);
         const func = this.deleteRecordRequest;
@@ -4566,26 +4848,22 @@ class HTTPManagerSignalsService extends RequestSignalsService {
             this.data.set(data);
             if (updatedOptions.displaySuccess)
                 this.handleSuccessWithSnackBar(updatedOptions.successMessage);
-        }), finalize(() => this.isPending.set(false)), catchError((err) => {
+        }), catchError((err) => {
             if (updatedOptions.displayError)
                 this.handleErrorWithSnackBar(err, updatedOptions.errorMessage);
-            this.isPending.set(false);
             return this.handleError(err);
         }));
     }
     downloadRequest(options, params, saveAs) {
-        this.isPending.set(true);
         const updatedOptions = this.defineReqOptions(options, params);
         const func = this.downloadFileRequest;
         const requests = this.createRequest(func, updatedOptions);
         return this.createObservable(updatedOptions, requests, func.name).pipe(catchError((err) => {
             this.error.set(true);
-            this.isPending.set(false);
             return this.handleError(err);
         }));
     }
     uploadRequest(files, options, params) {
-        this.isPending.set(true);
         this.data.set(null);
         const updatedOptions = this.defineReqOptions(options, params);
         updatedOptions.uploadFiles = files;
@@ -4595,10 +4873,9 @@ class HTTPManagerSignalsService extends RequestSignalsService {
             this.data.set(data);
             if (updatedOptions.displaySuccess)
                 this.handleSuccessWithSnackBar(updatedOptions.successMessage);
-        }), finalize(() => this.isPending.set(false)), catchError((err) => {
+        }), catchError((err) => {
             if (updatedOptions.displayError)
                 this.handleErrorWithSnackBar(err, updatedOptions.errorMessage || err?.message);
-            this.isPending.set(false);
             return this.handleError(err);
         }));
     }
@@ -4692,7 +4969,6 @@ class HTTPManagerSignalsService extends RequestSignalsService {
         this.toastMessage.toastMessage(displaySuccess);
     }
     stopPolling() {
-        this.isPending.set(false);
         this.polling$.next();
     }
     defineReqOptions(options, params) {
@@ -4859,7 +5135,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 }] }] });
 
 class ApiRequest {
-    constructor(server = '', path, headers, adapter, mapper, polling, retry, stream, streamType, displayError, displaySuccess, successMessage, errorMessage, saveAs, fileContentHeader, ws, env, uploadFiles, uploadFieldName, uploadHttpMethod, allowedTypes, maxFileSize, maxTotalSize) {
+    constructor(server = '', path, headers, adapter, mapper, polling, retry, stream, streamType, totalHeader, displayError, displaySuccess, successMessage, errorMessage, saveAs, fileContentHeader, ws, env, uploadFiles, uploadFieldName, uploadHttpMethod, allowedTypes, maxFileSize, maxTotalSize) {
         this.server = server;
         this.path = path;
         this.headers = headers;
@@ -4869,6 +5145,7 @@ class ApiRequest {
         this.retry = retry;
         this.stream = stream;
         this.streamType = streamType;
+        this.totalHeader = totalHeader;
         this.displayError = displayError;
         this.displaySuccess = displaySuccess;
         this.successMessage = successMessage;
@@ -4886,7 +5163,7 @@ class ApiRequest {
     }
     static adapt(item) {
         const server = Array.isArray(item?.server) ? item.server.join('/') : item?.server || '';
-        return new ApiRequest(server, item?.path ? item.path : [], item?.headers ? item.headers : {}, item?.adapter, item?.mapper, item?.polling ? Math.floor(item.polling) : 0, item?.retry ? RetryOptions.adapt(item.retry) : RetryOptions.adapt(), item?.stream ? item.stream : false, item?.streamType || StreamType.AI_STREAMING, item?.displayError ? item.displayError : false, item?.displaySuccess ? item.displaySuccess : false, item?.successMessage, item?.errorMessage, item?.saveAs, item?.fileContentHeader, item?.ws, item?.env || 'dev', item?.uploadFiles, item?.uploadFieldName, item?.uploadHttpMethod, Array.isArray(item?.allowedTypes) ? item.allowedTypes : [], item?.maxFileSize, item?.maxTotalSize);
+        return new ApiRequest(server, item?.path ? item.path : [], item?.headers ? item.headers : {}, item?.adapter, item?.mapper, item?.polling ? Math.floor(item.polling) : 0, item?.retry ? RetryOptions.adapt(item.retry) : RetryOptions.adapt(), item?.stream ? item.stream : false, item?.streamType, (item?.totalHeader) ? item.totalHeader : 'X-Total-Count', item?.displayError ? item.displayError : false, item?.displaySuccess ? item.displaySuccess : false, item?.successMessage, item?.errorMessage, item?.saveAs, item?.fileContentHeader, item?.ws, item?.env || 'dev', item?.uploadFiles, item?.uploadFieldName, item?.uploadHttpMethod, Array.isArray(item?.allowedTypes) ? item.allowedTypes : [], item?.maxFileSize, item?.maxTotalSize);
     }
 }
 
@@ -6094,6 +6371,8 @@ class HTTPManagerStateService extends ComponentStore {
         this.logger = inject(LoggerService);
         this.error$ = this.httpManagerService.error$;
         this.isPending$ = this.httpManagerService.isPending$.pipe(delay(1));
+        this.progress$ = this.httpManagerService.progress$.pipe(delay(1));
+        this.streamProgress$ = this.httpManagerService.streamProgress$.pipe(delay(1));
         this.operationSuccess = new BehaviorSubject(null);
         this.operationSuccess$ = this.operationSuccess.asObservable();
         // PAGINATION
@@ -6108,6 +6387,8 @@ class HTTPManagerStateService extends ComponentStore {
         this.shouldRetry = true;
         this.wsRetryAttempts = new BehaviorSubject(0);
         this.wsRetryAttempts$ = this.wsRetryAttempts.asObservable();
+        // Guard: prevent concurrent streams and block requests during active stream
+        this.activeStream$ = new BehaviorSubject(false);
         this.messages = new BehaviorSubject([]);
         this.messages$ = this.messages.asObservable();
         this.userListByChannel = new BehaviorSubject(new Map());
@@ -6673,33 +6954,36 @@ class HTTPManagerStateService extends ComponentStore {
                 }
             }));
         })));
-        this.fetchStream = (options) => this.effect(() => of(options).pipe(tap(() => {
+        this.fetchStream = (options) => this.effect(() => of(options).pipe(filter(() => !this.activeStream$.value), // Block if stream already active
+        tap(() => {
             console.log('[DEBUG] fetchStream called');
             this.httpManagerService.isPending.next(true);
-        }), switchMap((options) => {
+            this.activeStream$.next(true); // Mark stream as active
+        }), concatMap((options) => {
             const requestOptions = this.updateRequestOptions(options?.headers);
             requestOptions.stream = true;
             console.log('[DEBUG] Making streaming request:', requestOptions);
             return this.httpManagerService.getRequest(requestOptions, options?.path)
                 .pipe(tap((res) => {
-                console.log('[DEBUG] Streaming response received:', res);
+                // console.log('[DEBUG] Streaming response received:', res)
                 // Always update state with streaming data
                 if (res && res.length > 0) {
-                    console.log('[DEBUG] Updating state with streaming data:', res);
+                    // console.log('[DEBUG] Updating state with streaming data:', res)
                     this.setData$(res);
                     this.streamedResponse = res;
                 }
                 else {
-                    console.log('[DEBUG] No streaming data or empty array:', res);
+                    // console.log('[DEBUG] No streaming data or empty array:', res)
                 }
             }), map((res) => {
-                console.log('[DEBUG] Returning data to subscribers:', res);
+                // console.log('[DEBUG] Returning data to subscribers:', res)
                 return res; // Return the data so subscribers can receive it
             }), catchError((error) => {
-                console.error('[DEBUG] Streaming error:', error);
+                // console.error('[DEBUG] Streaming error:', error)
                 this.httpManagerService.isPending.next(false);
                 return of([]);
-            }));
+            }), finalize(() => this.activeStream$.next(false)) // Mark stream as complete
+            );
         })));
         try {
             this.databaseOptions = database;
@@ -8209,7 +8493,7 @@ class RequestManagerBasicDemoComponent {
     // Update displayed columns when data changes
     updateDisplayedColumns(data) {
         this.displayedColumns = this.getColumnsFromData(data);
-        console.log('[DEMO] Updated columns:', this.displayedColumns);
+        // console.log('[DEMO] Updated columns:', this.displayedColumns)
     }
     // Helper to check if value is an object
     isObject(value) {
@@ -8469,7 +8753,7 @@ class RequestManagerBasicDemoComponent {
         this.requestParams.GET = reqParams.apiOptions;
         this.STREAM$ = this.httpManagerService.getRequest(reqParams.apiOptions, reqParams.path)
             .pipe(tap((data) => {
-            console.log("API STREAM response", data);
+            // console.log("API STREAM response", data)
             if (data && data.length > 0) {
                 this.updateDisplayedColumns(data);
             }
@@ -8690,6 +8974,7 @@ class RequestManagerStateDemoComponent {
     constructor() {
         this.server = 'http://localhost:8080';
         this.stateManagerDemoService = inject(StateManagerDemoService);
+        this.progress$ = this.stateManagerDemoService.streamProgress$;
         this.displayedColumns = [];
         this.fb = inject(FormBuilder);
         this.streamTypes = [
@@ -8702,6 +8987,7 @@ class RequestManagerStateDemoComponent {
         this.streamType = 'Auto';
         this.httpManagerService = inject(HTTPManagerService);
         this.isPending$ = this.stateManagerDemoService.isPending$;
+        this.isStreamingPending$ = this.httpManagerService.isStreamingPending$;
         this.error$ = this.stateManagerDemoService.error$;
         this.countdown$ = this.httpManagerService.countdown$;
         this.GET_error$ = new BehaviorSubject('');
@@ -8772,7 +9058,7 @@ class RequestManagerStateDemoComponent {
         this.stateManagerDemoService.data$.pipe(tap$1((data) => console.log("API STREAM_AI response", data)));
         this.error$.pipe(tap$1((data) => {
             debugger;
-            console.log("API STREAM response", data);
+            // console.log("API STREAM response", data)
         }), catchError$1(error => {
             return throwError(() => this.errorHandling(error, 'STREAM'));
         }));
@@ -8913,11 +9199,11 @@ class RequestManagerStateDemoComponent {
         this.prompts = [];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RequestManagerStateDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: RequestManagerStateDemoComponent, selector: "app-request-manager-state-demo", inputs: { server: "server", adapter: "adapter", mapper: "mapper" }, providers: [StateManagerDemoService, HTTPManagerService], viewQueries: [{ propertyName: "failedState", first: true, predicate: ["failedState"], descendants: true, static: true }, { propertyName: "pollingState", first: true, predicate: ["pollingState"], descendants: true, static: true }], ngImport: i0, template: "<div style=\"margin: 2rem;\">\n\n  <h2>\n    HTTP Request State Manager\n  </h2>\n\n  <div [formGroup]=\"requestForm\" style=\"margin-top: 2rem;\">\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>State Data Type</mat-label>\n        <mat-select formControlName=\"datatype\">\n          <mat-option value=\"ARRAY\">Array</mat-option>\n          <mat-option value=\"OBJECT\">Object</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Adapter (Model)</mat-label>\n        <mat-select formControlName=\"adapter\" #adapterSelect>\n          <mat-option>None</mat-option>\n          @for (adapter of sampleAdaptors; track adapter) {\n            <mat-option [value]=\"adapter.value\">\n              {{adapter.label}}\n            </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Mapper (Model)</mat-label>\n        <mat-select formControlName=\"mapper\" #mapperSelect>\n          <mat-option>None</mat-option>\n          @for (mapper of sampleMappers; track mapper) {\n            <mat-option [value]=\"mapper.value\">\n              {{mapper.label}}\n            </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n    </div>\n\n    @if (adapterSelect.value || mapperSelect.value) {\n      <div style=\"display: flex; margin-bottom: 2rem;\">\n        <div style=\"flex:1\" class=\"box\">\n          <h3>Adapter (Incoming)</h3>\n          @if (adapterSelect.value) {\n            <div>\n              {{ props(adapterSelect.value) | json }}\n            </div>\n          } @else {\n            No Transformation\n          }\n        </div>\n        <div style=\"flex:1\" class=\"box\">\n          <h3>Mapper (Outgoing)</h3>\n          @if (mapperSelect.value) {\n            <div>\n              {{ props(mapperSelect.value) | json }}\n            </div>\n          } @else {\n            No Transformation\n          }\n        </div>\n      </div>\n    }\n\n    <div>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>RestPath (/ delimited)</mat-label>\n        <input matInput placeholder=\"clients/list\" formControlName=\"path\">\n      </mat-form-field>\n    </div>\n    <div>\n      <div formArrayName=\"headers\">\n        @for (task of headers.controls; track task; let i = $index) {\n          <div [formGroupName]=\"i\">\n            <div style=\"display: flex; gap: .5rem\">\n              <mat-form-field appearance=\"outline\">\n                <mat-label>Key</mat-label>\n                <input matInput placeholder=\"authentication\" formControlName=\"key\">\n              </mat-form-field>\n              <mat-form-field appearance=\"outline\" style=\"flex:1\">\n                <mat-label>Value</mat-label>\n                <input matInput placeholder=\"sample\" formControlName=\"value\">\n              </mat-form-field>\n              <div style=\"margin-top: .5rem;\">\n                <button mat-icon-button (click)=\"removeHeader(i)\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n      <button mat-stroked-button (click)=\"addHeader()\">Add Header</button>\n    </div>\n    <div style=\"margin-top: 2rem; display: flex; flex-direction:column; gap: 1rem;\">\n      <div>\n        <mat-slide-toggle #failedState>Retry on Failed</mat-slide-toggle>\n        @if (failedState.checked) {\n          <div style=\"display: flex; gap: .5rem; margin-top: 1rem;\" formGroupName=\"retry\">\n            <mat-form-field appearance=\"outline\">\n              <mat-label>#of Times</mat-label>\n              <input matInput placeholder=\"3\" formControlName=\"times\" value=\"3\">\n            </mat-form-field>\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Delay Until Next</mat-label>\n              <input matInput placeholder=\"3\" formControlName=\"delay\" value=\"3\">\n            </mat-form-field>\n          </div>\n        }\n      </div>\n      <div>\n        <mat-slide-toggle #pollingState>Polling</mat-slide-toggle>\n        @if (pollingState.checked) {\n          <div>\n            <mat-form-field appearance=\"outline\" style=\"margin-top: 1rem\">\n              <mat-label>#of Seconds</mat-label>\n              <input matInput placeholder=\"3\" formControlName=\"polling\" value=\"3\">\n            </mat-form-field>\n          </div>\n        }\n      </div>\n      <div>\n        <mat-slide-toggle #DBState>Database Storage</mat-slide-toggle>\n        @if (DBState.checked) {\n          <div style=\"display: flex; gap: .5rem; margin-top: 1rem\" formGroupName=\"database\">\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Table Name</mat-label>\n              <input matInput placeholder=\"table\" formControlName=\"table\" value=\"\">\n            </mat-form-field>\n            <div>\n              <mat-form-field appearance=\"outline\">\n                <mat-label>Expires In</mat-label>\n                <mat-select formControlName=\"expiresIn\">\n                  <mat-option value=\"1m\">One Minute</mat-option>\n                  <mat-option value=\"1h\">One Hour</mat-option>\n                  <mat-option value=\"1d\">One Day</mat-option>\n                </mat-select>\n              </mat-form-field>\n            </div>\n          </div>\n        }\n      </div>\n      <div style=\"margin-top: 1rem; display: flex;\">\n        <span style=\"flex:1\"></span>\n        <button mat-stroked-button (click)=\"onSetStateOptions()\" [disabled]=\"!hasChanged\">\n          Set API Request Options\n        </button>\n      </div>\n      <div>\n        @if ((error$ | async); as error) {\n          <mat-error>\n            {{ error }}\n          </mat-error>\n        }\n      </div>\n    </div>\n  </div>\n\n  <div style=\"margin-bottom: 1rem; margin-top: 2rem;\">\n    @if ((isPending$ | async)) {\n      <mat-progress-bar mode=\"indeterminate\"\n      ></mat-progress-bar>\n    }\n    @if (pollingState.checked) {\n      <div>\n        @if (!(isPending$ | async) && (this.countdown$ | async) || -1 > 0) {\n          <mat-progress-bar mode=\"determinate\"\n            [value]=\"(this.countdown$ | async)\"\n          ></mat-progress-bar>\n        }\n      </div>\n    }\n\n  </div>\n\n  @if ((GET$ | async); as data) {\n    <div style=\"margin-top: 2rem\">\n      <div style=\"display: flex;\">\n        <h2 style=\"flex:1;\">CURRENT STATE ({{ dataType }})</h2>\n      </div>\n      @if (data.length > 1) {\n        <div>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Records</mat-label>\n            <mat-select [formControl]=\"selectedRecord\" [disabled]=\"data === null && data?.length === 0\">\n              <mat-option [value]=\"\">None</mat-option>\n              @for (item of data; track item) {\n                <mat-option [value]=\"item\">\n                  {{item.name || (item.first_name) | titlecase}}\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n      }\n      @if ((dataObservable$ | async); as dataRecord) {\n        <div>\n          @if ((selectedRecord$ | async); as record) {\n            <div>\n              {{ record | json }}\n            </div>\n          } @else {\n            No Record Selected from State\n          }\n        </div>\n      }\n      <div style=\"margin-top: 1rem;\">\n        @if (data !== null && data?.length > 0) {\n          <span>\n            State contains a Total of {{ data.length }} Records\n          </span>\n        } @else {\n          No Records\n        }\n        <div style=\"display: flex; gap: .5rem; text-align: end; justify-content: flex-end;\">\n          <button class=\"btn\" mat-stroked-button (click)=\"onClearRecords()\">Clear</button>\n        </div>\n      </div>\n    </div>\n  }\n\n\n\n\n  <div style=\"margin-top: 1rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">GET Request ({{ dataType }})</h2>\n      <div>\n        <button mat-raised-button (click)=\"onGetRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((GET_error$ | async); as get_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ get_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(GET$ | async) | jsonv\"></div> -->\n      @if ((GET$ | async); as getData) {\n        <div>{{ getData | json }}</div>\n      }\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">POST Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onCreateRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((POST_error$ | async); as post_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ post_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(POST$ | async) | jsonv\"></div> -->\n      @if ((POST$ | async); as postData) {\n        <div>{{ postData | json }}</div>\n      }\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">PUT Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onUpdateRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((PUT_error$ | async); as put_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ put_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(PUT$ | async) | jsonv\"></div> -->\n      @if ((PUT$ | async); as putData) {\n        <div>{{ putData | json }}</div>\n      }\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">DELETE Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onDeleteRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((DELETE_error$ | async); as delete_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ delete_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(DELETE$ | async) | jsonv\"></div> -->\n      @if ((DELETE$ | async); as deleteData) {\n        <div>{{ deleteData | json }}</div>\n      }\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">Streaming GET Request</h2>\n        <div style=\"display: flex; gap: 1rem; align-items: center;\">\n          <div style=\"display: flex; gap: 1rem; align-items: center;\">\n            {{ streamType }}\n            <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n              <mat-icon>data_usage</mat-icon>\n            </button>\n          </div>\n          <mat-menu #menu=\"matMenu\">\n            <button mat-menu-item *ngFor=\"let item of streamTypes\" (click)=\"onStreamType(item.id)\">{{ item.value }}</button>\n          </mat-menu>\n        <button mat-raised-button (click)=\"onStreamRequest()\" class=\"btn\" [disabled]=\"hasChanged\">Request</button>\n      </div>\n    </div>\n\n    @if ((STREAM_error$ | async); as stream_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ stream_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      @if ((STREAM$ | async); as data) {\n        <div class=\"container\">\n          <table mat-table [dataSource]=\"data\" class=\"mat-elevation-z8\">\n\n            <!-- Dynamic columns -->\n            <ng-container *ngFor=\"let column of displayedColumns\" [matColumnDef]=\"column\">\n              <th mat-header-cell *matHeaderCellDef> {{ column | titlecase }} </th>\n              <td mat-cell *matCellDef=\"let element\">\n                @if (isObject(element[column]); as objValue) {\n                  <pre style=\"margin: 0; font-size: 0.8em; white-space: pre-wrap;\">{{ objValue | json }}</pre>\n                } @else {\n                  {{ element[column] }}\n                }\n              </td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n          </table>\n\n          <!-- Debug info -->\n          <div style=\"margin-top: 1rem; font-size: 0.8em; color: #666;\">\n            Columns: {{ displayedColumns.join(', ') }} | Data received\n          </div>\n        </div>\n      }\n    </div>\n\n  </div>\n\n</div>\n", styles: [".btn{min-width:120px}.mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor;background-color:#f5f5f5}.container{height:400px;overflow:auto}.box{padding:10px;border:1px solid #ccc}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i8$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i11.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i12.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i13.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }, { kind: "pipe", type: i1$1.TitleCasePipe, name: "titlecase" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: RequestManagerStateDemoComponent, selector: "app-request-manager-state-demo", inputs: { server: "server", adapter: "adapter", mapper: "mapper" }, providers: [StateManagerDemoService, HTTPManagerService], viewQueries: [{ propertyName: "failedState", first: true, predicate: ["failedState"], descendants: true, static: true }, { propertyName: "pollingState", first: true, predicate: ["pollingState"], descendants: true, static: true }], ngImport: i0, template: "<div style=\"margin: 2rem;\">\n\n  <h2>\n    HTTP Request State Manager\n  </h2>\n\n  <div [formGroup]=\"requestForm\" style=\"margin-top: 2rem;\">\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>State Data Type</mat-label>\n        <mat-select formControlName=\"datatype\">\n          <mat-option value=\"ARRAY\">Array</mat-option>\n          <mat-option value=\"OBJECT\">Object</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Adapter (Model)</mat-label>\n        <mat-select formControlName=\"adapter\" #adapterSelect>\n          <mat-option>None</mat-option>\n          @for (adapter of sampleAdaptors; track adapter) {\n            <mat-option [value]=\"adapter.value\">\n              {{adapter.label}}\n            </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Mapper (Model)</mat-label>\n        <mat-select formControlName=\"mapper\" #mapperSelect>\n          <mat-option>None</mat-option>\n          @for (mapper of sampleMappers; track mapper) {\n            <mat-option [value]=\"mapper.value\">\n              {{mapper.label}}\n            </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n    </div>\n\n    @if (adapterSelect.value || mapperSelect.value) {\n      <div style=\"display: flex; margin-bottom: 2rem;\">\n        <div style=\"flex:1\" class=\"box\">\n          <h3>Adapter (Incoming)</h3>\n          @if (adapterSelect.value) {\n            <div>\n              {{ props(adapterSelect.value) | json }}\n            </div>\n          } @else {\n            No Transformation\n          }\n        </div>\n        <div style=\"flex:1\" class=\"box\">\n          <h3>Mapper (Outgoing)</h3>\n          @if (mapperSelect.value) {\n            <div>\n              {{ props(mapperSelect.value) | json }}\n            </div>\n          } @else {\n            No Transformation\n          }\n        </div>\n      </div>\n    }\n\n    <div>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>RestPath (/ delimited)</mat-label>\n        <input matInput placeholder=\"clients/list\" formControlName=\"path\">\n      </mat-form-field>\n    </div>\n    <div>\n      <div formArrayName=\"headers\">\n        @for (task of headers.controls; track task; let i = $index) {\n          <div [formGroupName]=\"i\">\n            <div style=\"display: flex; gap: .5rem\">\n              <mat-form-field appearance=\"outline\">\n                <mat-label>Key</mat-label>\n                <input matInput placeholder=\"authentication\" formControlName=\"key\">\n              </mat-form-field>\n              <mat-form-field appearance=\"outline\" style=\"flex:1\">\n                <mat-label>Value</mat-label>\n                <input matInput placeholder=\"sample\" formControlName=\"value\">\n              </mat-form-field>\n              <div style=\"margin-top: .5rem;\">\n                <button mat-icon-button (click)=\"removeHeader(i)\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n      <button mat-stroked-button (click)=\"addHeader()\">Add Header</button>\n    </div>\n    <div style=\"margin-top: 2rem; display: flex; flex-direction:column; gap: 1rem;\">\n      <div>\n        <mat-slide-toggle #failedState>Retry on Failed</mat-slide-toggle>\n        @if (failedState.checked) {\n          <div style=\"display: flex; gap: .5rem; margin-top: 1rem;\" formGroupName=\"retry\">\n            <mat-form-field appearance=\"outline\">\n              <mat-label>#of Times</mat-label>\n              <input matInput placeholder=\"3\" formControlName=\"times\" value=\"3\">\n            </mat-form-field>\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Delay Until Next</mat-label>\n              <input matInput placeholder=\"3\" formControlName=\"delay\" value=\"3\">\n            </mat-form-field>\n          </div>\n        }\n      </div>\n      <div>\n        <mat-slide-toggle #pollingState>Polling</mat-slide-toggle>\n        @if (pollingState.checked) {\n          <div>\n            <mat-form-field appearance=\"outline\" style=\"margin-top: 1rem\">\n              <mat-label>#of Seconds</mat-label>\n              <input matInput placeholder=\"3\" formControlName=\"polling\" value=\"3\">\n            </mat-form-field>\n          </div>\n        }\n      </div>\n      <div>\n        <mat-slide-toggle #DBState>Database Storage</mat-slide-toggle>\n        @if (DBState.checked) {\n          <div style=\"display: flex; gap: .5rem; margin-top: 1rem\" formGroupName=\"database\">\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Table Name</mat-label>\n              <input matInput placeholder=\"table\" formControlName=\"table\" value=\"\">\n            </mat-form-field>\n            <div>\n              <mat-form-field appearance=\"outline\">\n                <mat-label>Expires In</mat-label>\n                <mat-select formControlName=\"expiresIn\">\n                  <mat-option value=\"1m\">One Minute</mat-option>\n                  <mat-option value=\"1h\">One Hour</mat-option>\n                  <mat-option value=\"1d\">One Day</mat-option>\n                </mat-select>\n              </mat-form-field>\n            </div>\n          </div>\n        }\n      </div>\n      <div style=\"margin-top: 1rem; display: flex;\">\n        <span style=\"flex:1\"></span>\n        <button mat-stroked-button (click)=\"onSetStateOptions()\" [disabled]=\"!hasChanged\">\n          Set API Request Options\n        </button>\n      </div>\n      <div>\n        @if ((error$ | async); as error) {\n          <mat-error>\n            {{ error }}\n          </mat-error>\n        }\n      </div>\n    </div>\n  </div>\n\n  <div style=\"margin-bottom: 1rem; margin-top: 2rem;\">\n    @if ((isPending$ | async)) {\n      <mat-progress-bar mode=\"indeterminate\"\n      ></mat-progress-bar>\n    }\n    @if (pollingState.checked) {\n      <div>\n        @if (!(isPending$ | async) && (this.countdown$ | async) || -1 > 0) {\n          <mat-progress-bar mode=\"determinate\"\n            [value]=\"(this.countdown$ | async)\"\n          ></mat-progress-bar>\n        }\n      </div>\n    }\n\n  </div>\n\n  @if ((GET$ | async); as data) {\n    <div style=\"margin-top: 2rem\">\n      <div style=\"display: flex;\">\n        <h2 style=\"flex:1;\">CURRENT STATE ({{ dataType }})</h2>\n      </div>\n      @if (data.length > 1) {\n        <div>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Records</mat-label>\n            <mat-select [formControl]=\"selectedRecord\" [disabled]=\"data === null && data?.length === 0\">\n              <mat-option [value]=\"\">None</mat-option>\n              @for (item of data; track item) {\n                <mat-option [value]=\"item\">\n                  {{item.name || (item.first_name) | titlecase}}\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n      }\n      @if ((dataObservable$ | async); as dataRecord) {\n        <div>\n          @if ((selectedRecord$ | async); as record) {\n            <div>\n              {{ record | json }}\n            </div>\n          } @else {\n            No Record Selected from State\n          }\n        </div>\n      }\n      <div style=\"margin-top: 1rem;\">\n        @if (data !== null && data?.length > 0) {\n          <span>\n            State contains a Total of {{ data.length }} Records\n          </span>\n        } @else {\n          No Records\n        }\n        <div style=\"display: flex; gap: .5rem; text-align: end; justify-content: flex-end;\">\n          <button class=\"btn\" mat-stroked-button (click)=\"onClearRecords()\">Clear</button>\n        </div>\n      </div>\n    </div>\n  }\n\n\n\n\n  <div style=\"margin-top: 1rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">GET Request ({{ dataType }})</h2>\n      <div>\n        <button mat-raised-button (click)=\"onGetRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((GET_error$ | async); as get_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ get_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(GET$ | async) | jsonv\"></div> -->\n      @if ((GET$ | async); as getData) {\n        <div>{{ getData | json }}</div>\n      }\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">POST Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onCreateRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((POST_error$ | async); as post_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ post_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(POST$ | async) | jsonv\"></div> -->\n      @if ((POST$ | async); as postData) {\n        <div>{{ postData | json }}</div>\n      }\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">PUT Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onUpdateRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((PUT_error$ | async); as put_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ put_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(PUT$ | async) | jsonv\"></div> -->\n      @if ((PUT$ | async); as putData) {\n        <div>{{ putData | json }}</div>\n      }\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">DELETE Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onDeleteRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((DELETE_error$ | async); as delete_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ delete_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(DELETE$ | async) | jsonv\"></div> -->\n      @if ((DELETE$ | async); as deleteData) {\n        <div>{{ deleteData | json }}</div>\n      }\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">Streaming GET Request</h2>\n        <div style=\"display: flex; gap: 1rem; align-items: center;\">\n          <div style=\"display: flex; gap: 1rem; align-items: center;\">\n            {{ streamType }}\n            <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n              <mat-icon>data_usage</mat-icon>\n            </button>\n          </div>\n          <mat-menu #menu=\"matMenu\">\n            <button mat-menu-item *ngFor=\"let item of streamTypes\" (click)=\"onStreamType(item.id)\">{{ item.value }}</button>\n          </mat-menu>\n        <button mat-raised-button (click)=\"onStreamRequest()\" class=\"btn\" [disabled]=\"hasChanged\">Request</button>\n      </div>\n    </div>\n\n    @if ((STREAM_error$ | async); as stream_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ stream_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      @if ((STREAM$ | async) && (isStreamingPending$ | async); as data) {\n        <mat-progress-bar mode=\"determinate\" [value]=\"(progress$ | async)?.percent ?? 0\"></mat-progress-bar>\n        <div class=\"container\">\n          <table mat-table [dataSource]=\"data\">\n\n            <!-- Dynamic columns -->\n            <ng-container *ngFor=\"let column of displayedColumns\" [matColumnDef]=\"column\">\n              <th mat-header-cell *matHeaderCellDef> {{ column | titlecase }} </th>\n              <td mat-cell *matCellDef=\"let element\">\n                @if (isObject(element[column]); as objValue) {\n                  <pre style=\"margin: 0; font-size: 0.8em; white-space: pre-wrap;\">{{ objValue | json }}</pre>\n                } @else {\n                  {{ element[column] }}\n                }\n              </td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n          </table>\n\n          <!-- Debug info -->\n          <div style=\"margin-top: 1rem; font-size: 0.8em; color: #666;\">\n            Columns: {{ displayedColumns.join(', ') }} | Data received\n          </div>\n        </div>\n      }\n    </div>\n\n  </div>\n\n</div>\n", styles: [".btn{min-width:120px}.mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor;background-color:#f5f5f5}.container{height:400px;overflow:auto}.box{padding:10px;border:1px solid #ccc}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i8$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i11.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i12.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i13.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }, { kind: "pipe", type: i1$1.TitleCasePipe, name: "titlecase" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RequestManagerStateDemoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-request-manager-state-demo', providers: [StateManagerDemoService, HTTPManagerService], standalone: false, template: "<div style=\"margin: 2rem;\">\n\n  <h2>\n    HTTP Request State Manager\n  </h2>\n\n  <div [formGroup]=\"requestForm\" style=\"margin-top: 2rem;\">\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>State Data Type</mat-label>\n        <mat-select formControlName=\"datatype\">\n          <mat-option value=\"ARRAY\">Array</mat-option>\n          <mat-option value=\"OBJECT\">Object</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Adapter (Model)</mat-label>\n        <mat-select formControlName=\"adapter\" #adapterSelect>\n          <mat-option>None</mat-option>\n          @for (adapter of sampleAdaptors; track adapter) {\n            <mat-option [value]=\"adapter.value\">\n              {{adapter.label}}\n            </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Mapper (Model)</mat-label>\n        <mat-select formControlName=\"mapper\" #mapperSelect>\n          <mat-option>None</mat-option>\n          @for (mapper of sampleMappers; track mapper) {\n            <mat-option [value]=\"mapper.value\">\n              {{mapper.label}}\n            </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n    </div>\n\n    @if (adapterSelect.value || mapperSelect.value) {\n      <div style=\"display: flex; margin-bottom: 2rem;\">\n        <div style=\"flex:1\" class=\"box\">\n          <h3>Adapter (Incoming)</h3>\n          @if (adapterSelect.value) {\n            <div>\n              {{ props(adapterSelect.value) | json }}\n            </div>\n          } @else {\n            No Transformation\n          }\n        </div>\n        <div style=\"flex:1\" class=\"box\">\n          <h3>Mapper (Outgoing)</h3>\n          @if (mapperSelect.value) {\n            <div>\n              {{ props(mapperSelect.value) | json }}\n            </div>\n          } @else {\n            No Transformation\n          }\n        </div>\n      </div>\n    }\n\n    <div>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>RestPath (/ delimited)</mat-label>\n        <input matInput placeholder=\"clients/list\" formControlName=\"path\">\n      </mat-form-field>\n    </div>\n    <div>\n      <div formArrayName=\"headers\">\n        @for (task of headers.controls; track task; let i = $index) {\n          <div [formGroupName]=\"i\">\n            <div style=\"display: flex; gap: .5rem\">\n              <mat-form-field appearance=\"outline\">\n                <mat-label>Key</mat-label>\n                <input matInput placeholder=\"authentication\" formControlName=\"key\">\n              </mat-form-field>\n              <mat-form-field appearance=\"outline\" style=\"flex:1\">\n                <mat-label>Value</mat-label>\n                <input matInput placeholder=\"sample\" formControlName=\"value\">\n              </mat-form-field>\n              <div style=\"margin-top: .5rem;\">\n                <button mat-icon-button (click)=\"removeHeader(i)\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n      <button mat-stroked-button (click)=\"addHeader()\">Add Header</button>\n    </div>\n    <div style=\"margin-top: 2rem; display: flex; flex-direction:column; gap: 1rem;\">\n      <div>\n        <mat-slide-toggle #failedState>Retry on Failed</mat-slide-toggle>\n        @if (failedState.checked) {\n          <div style=\"display: flex; gap: .5rem; margin-top: 1rem;\" formGroupName=\"retry\">\n            <mat-form-field appearance=\"outline\">\n              <mat-label>#of Times</mat-label>\n              <input matInput placeholder=\"3\" formControlName=\"times\" value=\"3\">\n            </mat-form-field>\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Delay Until Next</mat-label>\n              <input matInput placeholder=\"3\" formControlName=\"delay\" value=\"3\">\n            </mat-form-field>\n          </div>\n        }\n      </div>\n      <div>\n        <mat-slide-toggle #pollingState>Polling</mat-slide-toggle>\n        @if (pollingState.checked) {\n          <div>\n            <mat-form-field appearance=\"outline\" style=\"margin-top: 1rem\">\n              <mat-label>#of Seconds</mat-label>\n              <input matInput placeholder=\"3\" formControlName=\"polling\" value=\"3\">\n            </mat-form-field>\n          </div>\n        }\n      </div>\n      <div>\n        <mat-slide-toggle #DBState>Database Storage</mat-slide-toggle>\n        @if (DBState.checked) {\n          <div style=\"display: flex; gap: .5rem; margin-top: 1rem\" formGroupName=\"database\">\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Table Name</mat-label>\n              <input matInput placeholder=\"table\" formControlName=\"table\" value=\"\">\n            </mat-form-field>\n            <div>\n              <mat-form-field appearance=\"outline\">\n                <mat-label>Expires In</mat-label>\n                <mat-select formControlName=\"expiresIn\">\n                  <mat-option value=\"1m\">One Minute</mat-option>\n                  <mat-option value=\"1h\">One Hour</mat-option>\n                  <mat-option value=\"1d\">One Day</mat-option>\n                </mat-select>\n              </mat-form-field>\n            </div>\n          </div>\n        }\n      </div>\n      <div style=\"margin-top: 1rem; display: flex;\">\n        <span style=\"flex:1\"></span>\n        <button mat-stroked-button (click)=\"onSetStateOptions()\" [disabled]=\"!hasChanged\">\n          Set API Request Options\n        </button>\n      </div>\n      <div>\n        @if ((error$ | async); as error) {\n          <mat-error>\n            {{ error }}\n          </mat-error>\n        }\n      </div>\n    </div>\n  </div>\n\n  <div style=\"margin-bottom: 1rem; margin-top: 2rem;\">\n    @if ((isPending$ | async)) {\n      <mat-progress-bar mode=\"indeterminate\"\n      ></mat-progress-bar>\n    }\n    @if (pollingState.checked) {\n      <div>\n        @if (!(isPending$ | async) && (this.countdown$ | async) || -1 > 0) {\n          <mat-progress-bar mode=\"determinate\"\n            [value]=\"(this.countdown$ | async)\"\n          ></mat-progress-bar>\n        }\n      </div>\n    }\n\n  </div>\n\n  @if ((GET$ | async); as data) {\n    <div style=\"margin-top: 2rem\">\n      <div style=\"display: flex;\">\n        <h2 style=\"flex:1;\">CURRENT STATE ({{ dataType }})</h2>\n      </div>\n      @if (data.length > 1) {\n        <div>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Records</mat-label>\n            <mat-select [formControl]=\"selectedRecord\" [disabled]=\"data === null && data?.length === 0\">\n              <mat-option [value]=\"\">None</mat-option>\n              @for (item of data; track item) {\n                <mat-option [value]=\"item\">\n                  {{item.name || (item.first_name) | titlecase}}\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n      }\n      @if ((dataObservable$ | async); as dataRecord) {\n        <div>\n          @if ((selectedRecord$ | async); as record) {\n            <div>\n              {{ record | json }}\n            </div>\n          } @else {\n            No Record Selected from State\n          }\n        </div>\n      }\n      <div style=\"margin-top: 1rem;\">\n        @if (data !== null && data?.length > 0) {\n          <span>\n            State contains a Total of {{ data.length }} Records\n          </span>\n        } @else {\n          No Records\n        }\n        <div style=\"display: flex; gap: .5rem; text-align: end; justify-content: flex-end;\">\n          <button class=\"btn\" mat-stroked-button (click)=\"onClearRecords()\">Clear</button>\n        </div>\n      </div>\n    </div>\n  }\n\n\n\n\n  <div style=\"margin-top: 1rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">GET Request ({{ dataType }})</h2>\n      <div>\n        <button mat-raised-button (click)=\"onGetRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((GET_error$ | async); as get_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ get_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(GET$ | async) | jsonv\"></div> -->\n      @if ((GET$ | async); as getData) {\n        <div>{{ getData | json }}</div>\n      }\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">POST Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onCreateRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((POST_error$ | async); as post_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ post_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(POST$ | async) | jsonv\"></div> -->\n      @if ((POST$ | async); as postData) {\n        <div>{{ postData | json }}</div>\n      }\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">PUT Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onUpdateRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((PUT_error$ | async); as put_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ put_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(PUT$ | async) | jsonv\"></div> -->\n      @if ((PUT$ | async); as putData) {\n        <div>{{ putData | json }}</div>\n      }\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">DELETE Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onDeleteRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((DELETE_error$ | async); as delete_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ delete_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(DELETE$ | async) | jsonv\"></div> -->\n      @if ((DELETE$ | async); as deleteData) {\n        <div>{{ deleteData | json }}</div>\n      }\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">Streaming GET Request</h2>\n        <div style=\"display: flex; gap: 1rem; align-items: center;\">\n          <div style=\"display: flex; gap: 1rem; align-items: center;\">\n            {{ streamType }}\n            <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n              <mat-icon>data_usage</mat-icon>\n            </button>\n          </div>\n          <mat-menu #menu=\"matMenu\">\n            <button mat-menu-item *ngFor=\"let item of streamTypes\" (click)=\"onStreamType(item.id)\">{{ item.value }}</button>\n          </mat-menu>\n        <button mat-raised-button (click)=\"onStreamRequest()\" class=\"btn\" [disabled]=\"hasChanged\">Request</button>\n      </div>\n    </div>\n\n    @if ((STREAM_error$ | async); as stream_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ stream_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      @if ((STREAM$ | async); as data) {\n        <div class=\"container\">\n          <table mat-table [dataSource]=\"data\" class=\"mat-elevation-z8\">\n\n            <!-- Dynamic columns -->\n            <ng-container *ngFor=\"let column of displayedColumns\" [matColumnDef]=\"column\">\n              <th mat-header-cell *matHeaderCellDef> {{ column | titlecase }} </th>\n              <td mat-cell *matCellDef=\"let element\">\n                @if (isObject(element[column]); as objValue) {\n                  <pre style=\"margin: 0; font-size: 0.8em; white-space: pre-wrap;\">{{ objValue | json }}</pre>\n                } @else {\n                  {{ element[column] }}\n                }\n              </td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n          </table>\n\n          <!-- Debug info -->\n          <div style=\"margin-top: 1rem; font-size: 0.8em; color: #666;\">\n            Columns: {{ displayedColumns.join(', ') }} | Data received\n          </div>\n        </div>\n      }\n    </div>\n\n  </div>\n\n</div>\n", styles: [".btn{min-width:120px}.mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor;background-color:#f5f5f5}.container{height:400px;overflow:auto}.box{padding:10px;border:1px solid #ccc}\n"] }]
+            args: [{ selector: 'app-request-manager-state-demo', providers: [StateManagerDemoService, HTTPManagerService], standalone: false, template: "<div style=\"margin: 2rem;\">\n\n  <h2>\n    HTTP Request State Manager\n  </h2>\n\n  <div [formGroup]=\"requestForm\" style=\"margin-top: 2rem;\">\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>State Data Type</mat-label>\n        <mat-select formControlName=\"datatype\">\n          <mat-option value=\"ARRAY\">Array</mat-option>\n          <mat-option value=\"OBJECT\">Object</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Adapter (Model)</mat-label>\n        <mat-select formControlName=\"adapter\" #adapterSelect>\n          <mat-option>None</mat-option>\n          @for (adapter of sampleAdaptors; track adapter) {\n            <mat-option [value]=\"adapter.value\">\n              {{adapter.label}}\n            </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Mapper (Model)</mat-label>\n        <mat-select formControlName=\"mapper\" #mapperSelect>\n          <mat-option>None</mat-option>\n          @for (mapper of sampleMappers; track mapper) {\n            <mat-option [value]=\"mapper.value\">\n              {{mapper.label}}\n            </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n    </div>\n\n    @if (adapterSelect.value || mapperSelect.value) {\n      <div style=\"display: flex; margin-bottom: 2rem;\">\n        <div style=\"flex:1\" class=\"box\">\n          <h3>Adapter (Incoming)</h3>\n          @if (adapterSelect.value) {\n            <div>\n              {{ props(adapterSelect.value) | json }}\n            </div>\n          } @else {\n            No Transformation\n          }\n        </div>\n        <div style=\"flex:1\" class=\"box\">\n          <h3>Mapper (Outgoing)</h3>\n          @if (mapperSelect.value) {\n            <div>\n              {{ props(mapperSelect.value) | json }}\n            </div>\n          } @else {\n            No Transformation\n          }\n        </div>\n      </div>\n    }\n\n    <div>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>RestPath (/ delimited)</mat-label>\n        <input matInput placeholder=\"clients/list\" formControlName=\"path\">\n      </mat-form-field>\n    </div>\n    <div>\n      <div formArrayName=\"headers\">\n        @for (task of headers.controls; track task; let i = $index) {\n          <div [formGroupName]=\"i\">\n            <div style=\"display: flex; gap: .5rem\">\n              <mat-form-field appearance=\"outline\">\n                <mat-label>Key</mat-label>\n                <input matInput placeholder=\"authentication\" formControlName=\"key\">\n              </mat-form-field>\n              <mat-form-field appearance=\"outline\" style=\"flex:1\">\n                <mat-label>Value</mat-label>\n                <input matInput placeholder=\"sample\" formControlName=\"value\">\n              </mat-form-field>\n              <div style=\"margin-top: .5rem;\">\n                <button mat-icon-button (click)=\"removeHeader(i)\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n      <button mat-stroked-button (click)=\"addHeader()\">Add Header</button>\n    </div>\n    <div style=\"margin-top: 2rem; display: flex; flex-direction:column; gap: 1rem;\">\n      <div>\n        <mat-slide-toggle #failedState>Retry on Failed</mat-slide-toggle>\n        @if (failedState.checked) {\n          <div style=\"display: flex; gap: .5rem; margin-top: 1rem;\" formGroupName=\"retry\">\n            <mat-form-field appearance=\"outline\">\n              <mat-label>#of Times</mat-label>\n              <input matInput placeholder=\"3\" formControlName=\"times\" value=\"3\">\n            </mat-form-field>\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Delay Until Next</mat-label>\n              <input matInput placeholder=\"3\" formControlName=\"delay\" value=\"3\">\n            </mat-form-field>\n          </div>\n        }\n      </div>\n      <div>\n        <mat-slide-toggle #pollingState>Polling</mat-slide-toggle>\n        @if (pollingState.checked) {\n          <div>\n            <mat-form-field appearance=\"outline\" style=\"margin-top: 1rem\">\n              <mat-label>#of Seconds</mat-label>\n              <input matInput placeholder=\"3\" formControlName=\"polling\" value=\"3\">\n            </mat-form-field>\n          </div>\n        }\n      </div>\n      <div>\n        <mat-slide-toggle #DBState>Database Storage</mat-slide-toggle>\n        @if (DBState.checked) {\n          <div style=\"display: flex; gap: .5rem; margin-top: 1rem\" formGroupName=\"database\">\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Table Name</mat-label>\n              <input matInput placeholder=\"table\" formControlName=\"table\" value=\"\">\n            </mat-form-field>\n            <div>\n              <mat-form-field appearance=\"outline\">\n                <mat-label>Expires In</mat-label>\n                <mat-select formControlName=\"expiresIn\">\n                  <mat-option value=\"1m\">One Minute</mat-option>\n                  <mat-option value=\"1h\">One Hour</mat-option>\n                  <mat-option value=\"1d\">One Day</mat-option>\n                </mat-select>\n              </mat-form-field>\n            </div>\n          </div>\n        }\n      </div>\n      <div style=\"margin-top: 1rem; display: flex;\">\n        <span style=\"flex:1\"></span>\n        <button mat-stroked-button (click)=\"onSetStateOptions()\" [disabled]=\"!hasChanged\">\n          Set API Request Options\n        </button>\n      </div>\n      <div>\n        @if ((error$ | async); as error) {\n          <mat-error>\n            {{ error }}\n          </mat-error>\n        }\n      </div>\n    </div>\n  </div>\n\n  <div style=\"margin-bottom: 1rem; margin-top: 2rem;\">\n    @if ((isPending$ | async)) {\n      <mat-progress-bar mode=\"indeterminate\"\n      ></mat-progress-bar>\n    }\n    @if (pollingState.checked) {\n      <div>\n        @if (!(isPending$ | async) && (this.countdown$ | async) || -1 > 0) {\n          <mat-progress-bar mode=\"determinate\"\n            [value]=\"(this.countdown$ | async)\"\n          ></mat-progress-bar>\n        }\n      </div>\n    }\n\n  </div>\n\n  @if ((GET$ | async); as data) {\n    <div style=\"margin-top: 2rem\">\n      <div style=\"display: flex;\">\n        <h2 style=\"flex:1;\">CURRENT STATE ({{ dataType }})</h2>\n      </div>\n      @if (data.length > 1) {\n        <div>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Records</mat-label>\n            <mat-select [formControl]=\"selectedRecord\" [disabled]=\"data === null && data?.length === 0\">\n              <mat-option [value]=\"\">None</mat-option>\n              @for (item of data; track item) {\n                <mat-option [value]=\"item\">\n                  {{item.name || (item.first_name) | titlecase}}\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n      }\n      @if ((dataObservable$ | async); as dataRecord) {\n        <div>\n          @if ((selectedRecord$ | async); as record) {\n            <div>\n              {{ record | json }}\n            </div>\n          } @else {\n            No Record Selected from State\n          }\n        </div>\n      }\n      <div style=\"margin-top: 1rem;\">\n        @if (data !== null && data?.length > 0) {\n          <span>\n            State contains a Total of {{ data.length }} Records\n          </span>\n        } @else {\n          No Records\n        }\n        <div style=\"display: flex; gap: .5rem; text-align: end; justify-content: flex-end;\">\n          <button class=\"btn\" mat-stroked-button (click)=\"onClearRecords()\">Clear</button>\n        </div>\n      </div>\n    </div>\n  }\n\n\n\n\n  <div style=\"margin-top: 1rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">GET Request ({{ dataType }})</h2>\n      <div>\n        <button mat-raised-button (click)=\"onGetRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((GET_error$ | async); as get_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ get_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(GET$ | async) | jsonv\"></div> -->\n      @if ((GET$ | async); as getData) {\n        <div>{{ getData | json }}</div>\n      }\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">POST Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onCreateRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((POST_error$ | async); as post_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ post_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(POST$ | async) | jsonv\"></div> -->\n      @if ((POST$ | async); as postData) {\n        <div>{{ postData | json }}</div>\n      }\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">PUT Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onUpdateRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((PUT_error$ | async); as put_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ put_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(PUT$ | async) | jsonv\"></div> -->\n      @if ((PUT$ | async); as putData) {\n        <div>{{ putData | json }}</div>\n      }\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">DELETE Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onDeleteRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((DELETE_error$ | async); as delete_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ delete_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(DELETE$ | async) | jsonv\"></div> -->\n      @if ((DELETE$ | async); as deleteData) {\n        <div>{{ deleteData | json }}</div>\n      }\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">Streaming GET Request</h2>\n        <div style=\"display: flex; gap: 1rem; align-items: center;\">\n          <div style=\"display: flex; gap: 1rem; align-items: center;\">\n            {{ streamType }}\n            <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n              <mat-icon>data_usage</mat-icon>\n            </button>\n          </div>\n          <mat-menu #menu=\"matMenu\">\n            <button mat-menu-item *ngFor=\"let item of streamTypes\" (click)=\"onStreamType(item.id)\">{{ item.value }}</button>\n          </mat-menu>\n        <button mat-raised-button (click)=\"onStreamRequest()\" class=\"btn\" [disabled]=\"hasChanged\">Request</button>\n      </div>\n    </div>\n\n    @if ((STREAM_error$ | async); as stream_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ stream_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      @if ((STREAM$ | async) && (isStreamingPending$ | async); as data) {\n        <mat-progress-bar mode=\"determinate\" [value]=\"(progress$ | async)?.percent ?? 0\"></mat-progress-bar>\n        <div class=\"container\">\n          <table mat-table [dataSource]=\"data\">\n\n            <!-- Dynamic columns -->\n            <ng-container *ngFor=\"let column of displayedColumns\" [matColumnDef]=\"column\">\n              <th mat-header-cell *matHeaderCellDef> {{ column | titlecase }} </th>\n              <td mat-cell *matCellDef=\"let element\">\n                @if (isObject(element[column]); as objValue) {\n                  <pre style=\"margin: 0; font-size: 0.8em; white-space: pre-wrap;\">{{ objValue | json }}</pre>\n                } @else {\n                  {{ element[column] }}\n                }\n              </td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n          </table>\n\n          <!-- Debug info -->\n          <div style=\"margin-top: 1rem; font-size: 0.8em; color: #666;\">\n            Columns: {{ displayedColumns.join(', ') }} | Data received\n          </div>\n        </div>\n      }\n    </div>\n\n  </div>\n\n</div>\n", styles: [".btn{min-width:120px}.mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor;background-color:#f5f5f5}.container{height:400px;overflow:auto}.box{padding:10px;border:1px solid #ccc}\n"] }]
         }], ctorParameters: () => [], propDecorators: { server: [{
                 type: Input
             }], adapter: [{
@@ -8948,7 +9234,7 @@ class RequestManagerDemoComponent {
     // Update displayed columns when data changes
     updateDisplayedColumns(data) {
         this.displayedColumns = this.getColumnsFromData(data);
-        console.log('[DEMO] Updated columns:', this.displayedColumns);
+        // console.log('[DEMO] Updated columns:', this.displayedColumns)
     }
     // Helper to check if value is an object
     isObject(value) {
@@ -8981,7 +9267,9 @@ class RequestManagerDemoComponent {
         this.toastMessage = inject(ToastMessageDisplayService);
         this.questionControl = this.fb.control("", [Validators.required]);
         this.httpManagerService = inject(HTTPManagerService);
+        this.progress$ = this.httpManagerService.streamProgress$;
         this.isPending$ = this.httpManagerService.isPending$;
+        this.isStreamingPending$ = this.httpManagerService.isStreamingPending$;
         this.countdown$ = this.httpManagerService.countdown$;
         this.GET_error$ = new BehaviorSubject('');
         this.POST_error$ = new BehaviorSubject('');
@@ -9226,9 +9514,11 @@ class RequestManagerDemoComponent {
         reqParams.apiOptions.stream = true;
         reqParams.apiOptions.streamType = StreamType.NDJSON;
         this.requestParams.GET = reqParams.apiOptions;
+        this.STREAM$ = EMPTY; // Cancel any active stream before starting new one
+        this.STREAM_error$.next('');
         this.STREAM$ = this.httpManagerService.getRequest(reqParams.apiOptions, reqParams.path)
             .pipe(tap((data) => {
-            console.log("API STREAM response", data);
+            // console.log("API STREAM response", data)
             if (data && data.length > 0) {
                 this.updateDisplayedColumns(data);
             }
@@ -9411,11 +9701,11 @@ class RequestManagerDemoComponent {
         return results.filter(r => r === undefined).length;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RequestManagerDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: RequestManagerDemoComponent, selector: "app-request-manager-demo", inputs: { server: "server", adapter: "adapter", mapper: "mapper" }, providers: [HTTPManagerService], viewQueries: [{ propertyName: "failedState", first: true, predicate: ["failedState"], descendants: true, static: true }, { propertyName: "pollingState", first: true, predicate: ["pollingState"], descendants: true, static: true }], ngImport: i0, template: "<div style=\"margin: 2rem;\">\n\n  <h2>\n    HTTP Request Manager\n  </h2>\n\n  <div [formGroup]=\"requestForm\" style=\"margin-top: 2rem;\">\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Adapter (Model)</mat-label>\n        <mat-select formControlName=\"adapter\" #adapterSelect>\n          <mat-option>None</mat-option>\n          @for (adapter of sampleAdaptors; track adapter) {\n            <mat-option [value]=\"adapter.value\">\n              {{adapter.label}}\n            </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Mapper (Model)</mat-label>\n        <mat-select formControlName=\"mapper\" #mapperSelect>\n          <mat-option>None</mat-option>\n          @for (mapper of sampleMappers; track mapper) {\n            <mat-option [value]=\"mapper.value\">\n              {{mapper.label}}\n            </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n    </div>\n    @if (adapterSelect.value || mapperSelect.value) {\n      <div style=\"display: flex; margin-bottom: 2rem;\">\n        <div style=\"flex:1\" class=\"box\">\n          <h3>Adapter (Incoming)</h3>\n          @if (adapterSelect.value) {\n            <div>\n              {{ props(adapterSelect.value) | json }}\n            </div>\n          } @else {\n            No Transformation\n          }\n        </div>\n        <div style=\"flex:1\" class=\"box\">\n          <h3>Mapper (Outgoing)</h3>\n          @if (mapperSelect.value) {\n            <div>\n              {{ props(mapperSelect.value) | json }}\n            </div>\n          } @else {\n            No Transformation\n          }\n        </div>\n      </div>\n    }\n    <div>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>RestPath (/ delimited)</mat-label>\n        <input matInput placeholder=\"clients/list\" formControlName=\"path\">\n      </mat-form-field>\n    </div>\n    <div>\n      <div formArrayName=\"headers\">\n        @for (task of headers.controls; track task; let i = $index) {\n          <div [formGroupName]=\"i\">\n            <div style=\"display: flex; gap: .5rem\">\n              <mat-form-field appearance=\"outline\">\n                <mat-label>Key</mat-label>\n                <input matInput placeholder=\"authentication\" formControlName=\"key\">\n              </mat-form-field>\n              <mat-form-field appearance=\"outline\" style=\"flex:1\">\n                <mat-label>Value</mat-label>\n                <input matInput placeholder=\"sample\" formControlName=\"value\">\n              </mat-form-field>\n              <div style=\"margin-top: .5rem;\">\n                <button mat-icon-button (click)=\"removeHeader(i)\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n      <button mat-stroked-button (click)=\"addHeader()\" class=\"btn\">Add Header</button>\n    </div>\n    <div style=\"margin-top: 2rem; display: flex; flex-direction:column; gap: 1rem;\">\n      <div>\n        <mat-slide-toggle #failedState>Retry on Failed</mat-slide-toggle>\n        @if (failedState.checked) {\n          <div style=\"display: flex; gap: .5rem; margin-top: 1rem;\" formGroupName=\"retry\">\n            <mat-form-field appearance=\"outline\">\n              <mat-label>#of Times</mat-label>\n              <input matInput placeholder=\"3\" formControlName=\"times\" value=\"3\">\n            </mat-form-field>\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Delay Until Next</mat-label>\n              <input matInput placeholder=\"3\" formControlName=\"delay\" value=\"3\">\n            </mat-form-field>\n          </div>\n        }\n      </div>\n      <div>\n        <mat-slide-toggle #pollingState>Polling</mat-slide-toggle>\n        @if (pollingState.checked) {\n          <div>\n            <mat-form-field appearance=\"outline\" style=\"margin-top: 1rem\">\n              <mat-label>#of Seconds</mat-label>\n              <input matInput placeholder=\"3\" formControlName=\"polling\" value=\"3\">\n            </mat-form-field>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n\n  <div style=\"margin-bottom: 1rem; margin-top: 2rem;\">\n    @if ((isPending$ | async)) {\n      <mat-progress-bar mode=\"indeterminate\"\n      ></mat-progress-bar>\n    }\n    @if (pollingState.checked && !(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: 1rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">GET Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onGetRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @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  <!-- Parallel Requests Section -->\n  <div>\n    <div style=\"display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;\">\n      <h2 style=\"flex: 1; margin: 0;\">Parallel Requests</h2>\n      <button\n        mat-raised-button\n        color=\"primary\"\n        (click)=\"onExecuteParallelBatch()\"\n        [disabled]=\"isParallelLoading\"\n        style=\"min-width: 200px;\">\n        <mat-icon>sync</mat-icon>\n        <span style=\"margin-left: 8px;\">\n          {{ isParallelLoading ? 'Loading...' : 'Fetch 5 Users' }}\n        </span>\n      </button>\n    </div>\n\n    <!-- Loading Indicator -->\n    @if (isParallelLoading) {\n      <div style=\"margin: 1rem 0;\">\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n        <p style=\"margin-top: 0.5rem; color: #666;\">\n          Executing parallel requests (concurrency: 3)...\n        </p>\n      </div>\n    }\n\n    <!-- Results -->\n    @if (parallelResults) {\n      <div style=\"margin: 1rem 0;\">\n        <mat-card appearance=\"outlined\">\n          <mat-card-content>\n            <div style=\"display: grid; gap: 0.5rem;\">\n              @for (result of parallelResults; track $index; let i = $index) {\n                <div\n                  style=\"padding: 0.75rem; border-radius: 4px; border: 1px solid;\n                         {{ result ? 'background: #e3f2fd; border-color: #2196f3;' :\n                            'background: #ffebee; border-color: #f44336;' }}\">\n                  @if (result) {\n                    <div style=\"display: flex; align-items: center; gap: 0.5rem; justify-content: space-between;\">\n                      <div style=\"display: flex; align-items: center; gap: 0.5rem;\">\n                        <mat-icon style=\"color: #2196f3; font-size: 18px;\">check_circle</mat-icon>\n                        <strong>User #{{ result.id }}:</strong>\n                        <span>{{ result.name }}</span>\n                      </div>\n                      <span style=\"color: #2196f3; font-weight: bold;\">Complete</span>\n                    </div>\n                  } @else {\n                    <div style=\"display: flex; align-items: center; gap: 0.5rem; justify-content: space-between;\">\n                      <div style=\"display: flex; align-items: center; gap: 0.5rem;\">\n                        <mat-icon style=\"color: #f44336; font-size: 18px;\">error</mat-icon>\n                        <strong>Request {{ i + 1 }}:</strong>\n                        <span>Failed</span>\n                      </div>\n                      <span style=\"color: #f44336; font-weight: bold;\">Error</span>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          </mat-card-content>\n        </mat-card>\n      </div>\n    }\n\n    <!-- Execution Metrics -->\n    @if (parallelExecutionTime !== undefined) {\n      <div style=\"background: #f5f5f5; padding: 1rem; border-radius: 4px; margin: 1rem 0;\">\n        <div style=\"display: flex; gap: 2rem;\">\n          <div>\n            <strong>\u23F1Execution Time:</strong>\n            <span style=\"margin-left: 0.5rem; color: #4caf50;\">\n              {{ formatTime(parallelExecutionTime) }}\n            </span>\n          </div>\n          <div>\n            <strong>Mode:</strong>\n            <span style=\"margin-left: 0.5rem;\">Parallel</span>\n          </div>\n        </div>\n      </div>\n    }\n\n    <!-- Error Display -->\n    @if (parallelError) {\n      <div style=\"margin-top: 1rem;\">\n        <mat-error>{{ parallelError }}</mat-error>\n      </div>\n    }\n  </div>\n\n  <!-- Sequential Requests Section -->\n  <div>\n    <div style=\"display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;\">\n      <h2 style=\"flex: 1; margin: 0;\">Sequential Requests</h2>\n      <button\n        mat-raised-button\n        color=\"accent\"\n        (click)=\"onExecuteSequentialBatch()\"\n        [disabled]=\"isSequentialLoading\"\n        style=\"min-width: 200px;\">\n        <mat-icon>timeline</mat-icon>\n        <span style=\"margin-left: 8px;\">\n          {{ isSequentialLoading ? 'Loading...' : 'Fetch 5 Todos' }}\n        </span>\n      </button>\n    </div>\n\n    <!-- Loading Indicator -->\n    @if (isSequentialLoading) {\n      <div style=\"margin: 1rem 0;\">\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n        <p style=\"margin-top: 0.5rem; color: #666;\">\n          Executing sequential requests (one at a time)...\n        </p>\n      </div>\n    }\n\n    <!-- Results -->\n    @if (sequentialResults) {\n      <div style=\"margin: 1rem 0;\">\n        <mat-card appearance=\"outlined\">\n          <mat-card-content>\n            <div style=\"display: grid; gap: 0.5rem;\">\n              @for (result of sequentialResults; track $index; let i = $index) {\n                <div\n                  style=\"padding: 0.75rem; border-radius: 4px; border: 1px solid;\n                         {{ result ? 'background: #e3f2fd; border-color: #2196f3;' :\n                            'background: #ffebee; border-color: #f44336;' }}\">\n                  @if (result) {\n                    <div style=\"display: flex; align-items: center; gap: 0.5rem; justify-content: space-between;\">\n                      <div style=\"display: flex; align-items: center; gap: 0.5rem;\">\n                        <mat-icon style=\"color: #2196f3; font-size: 18px;\">check_circle</mat-icon>\n                        <strong>Todo #{{ result.id }}:</strong>\n                        <span style=\"flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\">\n                          {{ result.title }}\n                        </span>\n                      </div>\n                    </div>\n                  } @else {\n                    <div style=\"display: flex; align-items: center; gap: 0.5rem; justify-content: space-between;\">\n                      <div style=\"display: flex; align-items: center; gap: 0.5rem;\">\n                        <mat-icon style=\"color: #f44336; font-size: 18px;\">error</mat-icon>\n                        <strong>Request {{ i + 1 }}:</strong>\n                        <span>Failed</span>\n                      </div>\n                      <span style=\"color: #f44336; font-weight: bold;\">Error</span>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          </mat-card-content>\n        </mat-card>\n      </div>\n    }\n\n    <!-- Execution Metrics -->\n    @if (sequentialExecutionTime !== undefined) {\n      <div style=\"background: #f5f5f5; padding: 1rem; border-radius: 4px; margin: 1rem 0;\">\n        <div style=\"display: flex; gap: 2rem;\">\n          <div>\n            <strong>Execution Time:</strong>\n            <span style=\"margin-left: 0.5rem; color: #4caf50;\">\n              {{ formatTime(sequentialExecutionTime) }}\n            </span>\n          </div>\n          <div>\n            <strong>Mode:</strong>\n            <span style=\"margin-left: 0.5rem;\">Sequential</span>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- Stream Mode Section -->\n  <div>\n    <div style=\"display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;\">\n      <h2 style=\"flex: 1; margin: 0;\">Stream Mode (Real-time States)</h2>\n      <button\n        mat-raised-button\n        color=\"primary\"\n        (click)=\"onExecuteStreamBatch()\"\n        [disabled]=\"isStreamLoading\"\n        style=\"min-width: 200px;\">\n        <mat-icon>auto_awesome</mat-icon>\n        <span style=\"margin-left: 8px;\">\n          {{ isStreamLoading ? 'Loading...' : 'Fetch 5 Posts' }}\n        </span>\n      </button>\n    </div>\n\n    <!-- Loading Indicator -->\n    @if (isStreamLoading) {\n      <div style=\"margin: 1rem 0;\">\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n        <p style=\"margin-top: 0.5rem; color: #666;\">\n          Executing parallel requests with real-time state updates...\n        </p>\n      </div>\n    }\n\n    <!-- Progress Bar -->\n    @if (streamProgress) {\n      <div style=\"background: #f5f5f5; padding: 1rem; border-radius: 4px; margin: 1rem 0;\">\n        <div style=\"display: flex; gap: 2rem; margin-bottom: 0.5rem;\">\n          <div>\n            <strong>Execution Time:</strong>\n            <span style=\"margin-left: 0.5rem; color: #4caf50;\">\n              {{ formatTime(streamExecutionTime || 0) }}\n            </span>\n          </div>\n          <div>\n            <strong>Progress:</strong>\n            <span style=\"margin-left: 0.5rem;\">\n              {{ streamProgress.completed }} / {{ streamProgress.total }} completed\n            </span>\n          </div>\n          <div>\n            <strong>Pending:</strong>\n            <span style=\"margin-left: 0.5rem;\">\n              {{ streamProgress.pending }}\n            </span>\n          </div>\n          <div>\n            <strong>Failed:</strong>\n            <span style=\"margin-left: 0.5rem;\">\n              {{ streamProgress.failed }}\n            </span>\n          </div>\n        </div>\n        <mat-progress-bar\n          mode=\"determinate\"\n          [value]=\"streamProgress.percent\"\n          color=\"accent\">\n        </mat-progress-bar>\n        <p style=\"margin-top: 0.5rem; text-align: right; color: #666;\">\n          {{ streamProgress.percent }}%\n        </p>\n      </div>\n    }\n\n    <!-- Error Display -->\n    @if (streamError) {\n      <div style=\"margin-top: 1rem;\">\n        <mat-error>{{ streamError }}</mat-error>\n      </div>\n    }\n\n    <!-- Individual Request States -->\n    @if (streamBatchStates.length > 0) {\n      <div style=\"margin-top: 1rem;\">\n        <mat-card appearance=\"outlined\">\n          <mat-card-content>\n            <div style=\"display: grid; gap: 0.5rem;\">\n              @for (state of filteredStreamStates; track state.index; let i = $index) {\n                <div\n                  style=\"padding: 0.75rem; border-radius: 4px; border: 1px solid;\n                         {{ isPendingState(state) ? 'background: #fff3e0; border-color: #ff9800;' :\n                            isSuccessState(state) ? 'background: #e3f2fd; border-color: #2196f3;' :\n                            'background: #ffebee; border-color: #f44336;' }}\">\n                  @if (isPendingState(state)) {\n                    <div style=\"display: flex; align-items: center; gap: 0.5rem;\">\n                      <mat-spinner diameter=\"16\" style=\"margin-right: 0.5rem;\"></mat-spinner>\n                      <strong>Request {{ state.index + 1 }}:</strong>\n                      <span>Loading...</span>\n                    </div>\n                  } @else if (isSuccessState(state)) {\n                    <div style=\"display: flex; align-items: center; gap: 0.5rem;\">\n                      <mat-icon style=\"color: #2196f3; font-size: 18px;\">check_circle</mat-icon>\n                      <strong>Post #{{ state.data.id }}:</strong>\n                      <span style=\"flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\">\n                        {{ state.data.title }}\n                      </span>\n                    </div>\n                  } @else {\n                    <div style=\"display: flex; align-items: center; gap: 0.5rem;\">\n                      <mat-icon style=\"color: #f44336; font-size: 18px;\">error</mat-icon>\n                      <strong>Request {{ state.index + 1 }}:</strong>\n                      <span>Failed</span>\n                      <mat-chip style=\"margin-left: auto; font-size: 0.8em; background: #f44336; color: white;\">\n                        Error\n                      </mat-chip>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          </mat-card-content>\n        </mat-card>\n      </div>\n    }\n  </div>\n\n  <!-- Comparison Info -->\n  <div style=\"padding: 1rem; background: whitesmoke; border-radius: 4px; border: 1px solid #ccc;\">\n    <h4 style=\"margin-top: 0;\">Key Differences</h4>\n    <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;\">\n      <div>\n        <strong>Parallel:</strong>\n        <ul style=\"margin: 0.5rem 0 0 1rem; padding: 0;\">\n          <li>Faster execution (concurrent)</li>\n          <li>Multiple requests simultaneously</li>\n          <li>Results may complete out of order</li>\n          <li>Best for: Independent requests</li>\n        </ul>\n      </div>\n      <div>\n        <strong>Sequential:</strong>\n        <ul style=\"margin: 0.5rem 0 0 1rem; padding: 0;\">\n          <li>Slower execution (one-by-one)</li>\n          <li>Requests execute in order</li>\n          <li>Results always in request order</li>\n          <li>Best for: Dependent requests</li>\n        </ul>\n      </div>\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}.batch-demo-section{margin:2rem 0;padding:1.5rem;border:1px solid #e0e0e0;border-radius:8px;background:#fafafa}.batch-result-item{padding:.75rem;border-radius:4px;margin-bottom:.5rem;display:flex;align-items:center;gap:.5rem}.batch-result-item.success{background:#e8f5e9;border-left:3px solid #4caf50}.batch-result-item.error{background:#ffebee;border-left:3px solid #f44336}.execution-metrics{display:flex;gap:2rem;padding:1rem;background:#f5f5f5;border-radius:4px;margin:1rem 0}.execution-metrics>div{display:flex;align-items:center;gap:.5rem}.comparison-box{padding:1rem;background:#fff3e0;border-radius:4px;margin-top:2rem}.comparison-box h4{margin-top:0;margin-bottom:1rem}.comparison-box .comparison-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}@media(max-width:768px){.comparison-box .comparison-grid{grid-template-columns:1fr}}.loading-indicator{margin:1rem 0}.result-card{margin-top:1rem}.result-card mat-card-content{padding:1rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i3$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: 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: i8$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { 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: i16.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i16.MatCardContent, selector: "mat-card-content" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }, { kind: "pipe", type: i1$1.TitleCasePipe, name: "titlecase" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: RequestManagerDemoComponent, selector: "app-request-manager-demo", inputs: { server: "server", adapter: "adapter", mapper: "mapper" }, providers: [HTTPManagerService], viewQueries: [{ propertyName: "failedState", first: true, predicate: ["failedState"], descendants: true, static: true }, { propertyName: "pollingState", first: true, predicate: ["pollingState"], descendants: true, static: true }], ngImport: i0, template: "<div style=\"margin: 2rem;\">\n\n  <h2>\n    HTTP Request Manager\n  </h2>\n\n  <div [formGroup]=\"requestForm\" style=\"margin-top: 2rem;\">\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Adapter (Model)</mat-label>\n        <mat-select formControlName=\"adapter\" #adapterSelect>\n          <mat-option>None</mat-option>\n          @for (adapter of sampleAdaptors; track adapter) {\n            <mat-option [value]=\"adapter.value\">\n              {{adapter.label}}\n            </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Mapper (Model)</mat-label>\n        <mat-select formControlName=\"mapper\" #mapperSelect>\n          <mat-option>None</mat-option>\n          @for (mapper of sampleMappers; track mapper) {\n            <mat-option [value]=\"mapper.value\">\n              {{mapper.label}}\n            </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n    </div>\n    @if (adapterSelect.value || mapperSelect.value) {\n      <div style=\"display: flex; margin-bottom: 2rem;\">\n        <div style=\"flex:1\" class=\"box\">\n          <h3>Adapter (Incoming)</h3>\n          @if (adapterSelect.value) {\n            <div>\n              {{ props(adapterSelect.value) | json }}\n            </div>\n          } @else {\n            No Transformation\n          }\n        </div>\n        <div style=\"flex:1\" class=\"box\">\n          <h3>Mapper (Outgoing)</h3>\n          @if (mapperSelect.value) {\n            <div>\n              {{ props(mapperSelect.value) | json }}\n            </div>\n          } @else {\n            No Transformation\n          }\n        </div>\n      </div>\n    }\n    <div>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>RestPath (/ delimited)</mat-label>\n        <input matInput placeholder=\"clients/list\" formControlName=\"path\">\n      </mat-form-field>\n    </div>\n    <div>\n      <div formArrayName=\"headers\">\n        @for (task of headers.controls; track task; let i = $index) {\n          <div [formGroupName]=\"i\">\n            <div style=\"display: flex; gap: .5rem\">\n              <mat-form-field appearance=\"outline\">\n                <mat-label>Key</mat-label>\n                <input matInput placeholder=\"authentication\" formControlName=\"key\">\n              </mat-form-field>\n              <mat-form-field appearance=\"outline\" style=\"flex:1\">\n                <mat-label>Value</mat-label>\n                <input matInput placeholder=\"sample\" formControlName=\"value\">\n              </mat-form-field>\n              <div style=\"margin-top: .5rem;\">\n                <button mat-icon-button (click)=\"removeHeader(i)\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n      <button mat-stroked-button (click)=\"addHeader()\" class=\"btn\">Add Header</button>\n    </div>\n    <div style=\"margin-top: 2rem; display: flex; flex-direction:column; gap: 1rem;\">\n      <div>\n        <mat-slide-toggle #failedState>Retry on Failed</mat-slide-toggle>\n        @if (failedState.checked) {\n          <div style=\"display: flex; gap: .5rem; margin-top: 1rem;\" formGroupName=\"retry\">\n            <mat-form-field appearance=\"outline\">\n              <mat-label>#of Times</mat-label>\n              <input matInput placeholder=\"3\" formControlName=\"times\" value=\"3\">\n            </mat-form-field>\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Delay Until Next</mat-label>\n              <input matInput placeholder=\"3\" formControlName=\"delay\" value=\"3\">\n            </mat-form-field>\n          </div>\n        }\n      </div>\n      <div>\n        <mat-slide-toggle #pollingState>Polling</mat-slide-toggle>\n        @if (pollingState.checked) {\n          <div>\n            <mat-form-field appearance=\"outline\" style=\"margin-top: 1rem\">\n              <mat-label>#of Seconds</mat-label>\n              <input matInput placeholder=\"3\" formControlName=\"polling\" value=\"3\">\n            </mat-form-field>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n\n  <div style=\"margin-bottom: 1rem; margin-top: 2rem;\">\n    @if ((isPending$ | async)) {\n      <mat-progress-bar mode=\"indeterminate\"\n      ></mat-progress-bar>\n    }\n    @if (pollingState.checked && !(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: 1rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">GET Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onGetRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @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        <mat-progress-bar mode=\"determinate\" [value]=\"(progress$ | async)?.percent ?? 0\" [style.display]=\"(isStreamingPending$ | async) ? 'block' : 'none'\"></mat-progress-bar>\n        <table mat-table [dataSource]=\"data\">\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  <!-- Parallel Requests Section -->\n  <div>\n    <div style=\"display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;\">\n      <h2 style=\"flex: 1; margin: 0;\">Parallel Requests</h2>\n      <button\n        mat-raised-button\n        color=\"primary\"\n        (click)=\"onExecuteParallelBatch()\"\n        [disabled]=\"isParallelLoading\"\n        style=\"min-width: 200px;\">\n        <mat-icon>sync</mat-icon>\n        <span style=\"margin-left: 8px;\">\n          {{ isParallelLoading ? 'Loading...' : 'Fetch 5 Users' }}\n        </span>\n      </button>\n    </div>\n\n    <!-- Loading Indicator -->\n    @if (isParallelLoading) {\n      <div style=\"margin: 1rem 0;\">\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n        <p style=\"margin-top: 0.5rem; color: #666;\">\n          Executing parallel requests (concurrency: 3)...\n        </p>\n      </div>\n    }\n\n    <!-- Results -->\n    @if (parallelResults) {\n      <div style=\"margin: 1rem 0;\">\n        <mat-card appearance=\"outlined\">\n          <mat-card-content>\n            <div style=\"display: grid; gap: 0.5rem;\">\n              @for (result of parallelResults; track $index; let i = $index) {\n                <div\n                  style=\"padding: 0.75rem; border-radius: 4px; border: 1px solid;\n                         {{ result ? 'background: #e3f2fd; border-color: #2196f3;' :\n                            'background: #ffebee; border-color: #f44336;' }}\">\n                  @if (result) {\n                    <div style=\"display: flex; align-items: center; gap: 0.5rem; justify-content: space-between;\">\n                      <div style=\"display: flex; align-items: center; gap: 0.5rem;\">\n                        <mat-icon style=\"color: #2196f3; font-size: 18px;\">check_circle</mat-icon>\n                        <strong>User #{{ result.id }}:</strong>\n                        <span>{{ result.name }}</span>\n                      </div>\n                      <span style=\"color: #2196f3; font-weight: bold;\">Complete</span>\n                    </div>\n                  } @else {\n                    <div style=\"display: flex; align-items: center; gap: 0.5rem; justify-content: space-between;\">\n                      <div style=\"display: flex; align-items: center; gap: 0.5rem;\">\n                        <mat-icon style=\"color: #f44336; font-size: 18px;\">error</mat-icon>\n                        <strong>Request {{ i + 1 }}:</strong>\n                        <span>Failed</span>\n                      </div>\n                      <span style=\"color: #f44336; font-weight: bold;\">Error</span>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          </mat-card-content>\n        </mat-card>\n      </div>\n    }\n\n    <!-- Execution Metrics -->\n    @if (parallelExecutionTime !== undefined) {\n      <div style=\"background: #f5f5f5; padding: 1rem; border-radius: 4px; margin: 1rem 0;\">\n        <div style=\"display: flex; gap: 2rem;\">\n          <div>\n            <strong>\u23F1Execution Time:</strong>\n            <span style=\"margin-left: 0.5rem; color: #4caf50;\">\n              {{ formatTime(parallelExecutionTime) }}\n            </span>\n          </div>\n          <div>\n            <strong>Mode:</strong>\n            <span style=\"margin-left: 0.5rem;\">Parallel</span>\n          </div>\n        </div>\n      </div>\n    }\n\n    <!-- Error Display -->\n    @if (parallelError) {\n      <div style=\"margin-top: 1rem;\">\n        <mat-error>{{ parallelError }}</mat-error>\n      </div>\n    }\n  </div>\n\n  <!-- Sequential Requests Section -->\n  <div>\n    <div style=\"display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;\">\n      <h2 style=\"flex: 1; margin: 0;\">Sequential Requests</h2>\n      <button\n        mat-raised-button\n        color=\"accent\"\n        (click)=\"onExecuteSequentialBatch()\"\n        [disabled]=\"isSequentialLoading\"\n        style=\"min-width: 200px;\">\n        <mat-icon>timeline</mat-icon>\n        <span style=\"margin-left: 8px;\">\n          {{ isSequentialLoading ? 'Loading...' : 'Fetch 5 Todos' }}\n        </span>\n      </button>\n    </div>\n\n    <!-- Loading Indicator -->\n    @if (isSequentialLoading) {\n      <div style=\"margin: 1rem 0;\">\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n        <p style=\"margin-top: 0.5rem; color: #666;\">\n          Executing sequential requests (one at a time)...\n        </p>\n      </div>\n    }\n\n    <!-- Results -->\n    @if (sequentialResults) {\n      <div style=\"margin: 1rem 0;\">\n        <mat-card appearance=\"outlined\">\n          <mat-card-content>\n            <div style=\"display: grid; gap: 0.5rem;\">\n              @for (result of sequentialResults; track $index; let i = $index) {\n                <div\n                  style=\"padding: 0.75rem; border-radius: 4px; border: 1px solid;\n                         {{ result ? 'background: #e3f2fd; border-color: #2196f3;' :\n                            'background: #ffebee; border-color: #f44336;' }}\">\n                  @if (result) {\n                    <div style=\"display: flex; align-items: center; gap: 0.5rem; justify-content: space-between;\">\n                      <div style=\"display: flex; align-items: center; gap: 0.5rem;\">\n                        <mat-icon style=\"color: #2196f3; font-size: 18px;\">check_circle</mat-icon>\n                        <strong>Todo #{{ result.id }}:</strong>\n                        <span style=\"flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\">\n                          {{ result.title }}\n                        </span>\n                      </div>\n                    </div>\n                  } @else {\n                    <div style=\"display: flex; align-items: center; gap: 0.5rem; justify-content: space-between;\">\n                      <div style=\"display: flex; align-items: center; gap: 0.5rem;\">\n                        <mat-icon style=\"color: #f44336; font-size: 18px;\">error</mat-icon>\n                        <strong>Request {{ i + 1 }}:</strong>\n                        <span>Failed</span>\n                      </div>\n                      <span style=\"color: #f44336; font-weight: bold;\">Error</span>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          </mat-card-content>\n        </mat-card>\n      </div>\n    }\n\n    <!-- Execution Metrics -->\n    @if (sequentialExecutionTime !== undefined) {\n      <div style=\"background: #f5f5f5; padding: 1rem; border-radius: 4px; margin: 1rem 0;\">\n        <div style=\"display: flex; gap: 2rem;\">\n          <div>\n            <strong>Execution Time:</strong>\n            <span style=\"margin-left: 0.5rem; color: #4caf50;\">\n              {{ formatTime(sequentialExecutionTime) }}\n            </span>\n          </div>\n          <div>\n            <strong>Mode:</strong>\n            <span style=\"margin-left: 0.5rem;\">Sequential</span>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- Stream Mode Section -->\n  <div>\n    <div style=\"display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;\">\n      <h2 style=\"flex: 1; margin: 0;\">Stream Mode (Real-time States)</h2>\n      <button\n        mat-raised-button\n        color=\"primary\"\n        (click)=\"onExecuteStreamBatch()\"\n        [disabled]=\"isStreamLoading\"\n        style=\"min-width: 200px;\">\n        <mat-icon>auto_awesome</mat-icon>\n        <span style=\"margin-left: 8px;\">\n          {{ isStreamLoading ? 'Loading...' : 'Fetch 5 Posts' }}\n        </span>\n      </button>\n    </div>\n\n    <!-- Loading Indicator -->\n    @if (isStreamLoading) {\n      <div style=\"margin: 1rem 0;\">\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n        <p style=\"margin-top: 0.5rem; color: #666;\">\n          Executing parallel requests with real-time state updates...\n        </p>\n      </div>\n    }\n\n    <!-- Progress Bar -->\n    @if (streamProgress) {\n      <div style=\"background: #f5f5f5; padding: 1rem; border-radius: 4px; margin: 1rem 0;\">\n        <div style=\"display: flex; gap: 2rem; margin-bottom: 0.5rem;\">\n          <div>\n            <strong>Execution Time:</strong>\n            <span style=\"margin-left: 0.5rem; color: #4caf50;\">\n              {{ formatTime(streamExecutionTime || 0) }}\n            </span>\n          </div>\n          <div>\n            <strong>Progress:</strong>\n            <span style=\"margin-left: 0.5rem;\">\n              {{ streamProgress.completed }} / {{ streamProgress.total }} completed\n            </span>\n          </div>\n          <div>\n            <strong>Pending:</strong>\n            <span style=\"margin-left: 0.5rem;\">\n              {{ streamProgress.pending }}\n            </span>\n          </div>\n          <div>\n            <strong>Failed:</strong>\n            <span style=\"margin-left: 0.5rem;\">\n              {{ streamProgress.failed }}\n            </span>\n          </div>\n        </div>\n        <mat-progress-bar\n          mode=\"determinate\"\n          [value]=\"streamProgress.percent\"\n          color=\"accent\">\n        </mat-progress-bar>\n        <p style=\"margin-top: 0.5rem; text-align: right; color: #666;\">\n          {{ streamProgress.percent }}%\n        </p>\n      </div>\n    }\n\n    <!-- Error Display -->\n    @if (streamError) {\n      <div style=\"margin-top: 1rem;\">\n        <mat-error>{{ streamError }}</mat-error>\n      </div>\n    }\n\n    <!-- Individual Request States -->\n    @if (streamBatchStates.length > 0) {\n      <div style=\"margin-top: 1rem;\">\n        <mat-card appearance=\"outlined\">\n          <mat-card-content>\n            <div style=\"display: grid; gap: 0.5rem;\">\n              @for (state of filteredStreamStates; track state.index; let i = $index) {\n                <div\n                  style=\"padding: 0.75rem; border-radius: 4px; border: 1px solid;\n                         {{ isPendingState(state) ? 'background: #fff3e0; border-color: #ff9800;' :\n                            isSuccessState(state) ? 'background: #e3f2fd; border-color: #2196f3;' :\n                            'background: #ffebee; border-color: #f44336;' }}\">\n                  @if (isPendingState(state)) {\n                    <div style=\"display: flex; align-items: center; gap: 0.5rem;\">\n                      <mat-spinner diameter=\"16\" style=\"margin-right: 0.5rem;\"></mat-spinner>\n                      <strong>Request {{ state.index + 1 }}:</strong>\n                      <span>Loading...</span>\n                    </div>\n                  } @else if (isSuccessState(state)) {\n                    <div style=\"display: flex; align-items: center; gap: 0.5rem;\">\n                      <mat-icon style=\"color: #2196f3; font-size: 18px;\">check_circle</mat-icon>\n                      <strong>Post #{{ state.data.id }}:</strong>\n                      <span style=\"flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\">\n                        {{ state.data.title }}\n                      </span>\n                    </div>\n                  } @else {\n                    <div style=\"display: flex; align-items: center; gap: 0.5rem;\">\n                      <mat-icon style=\"color: #f44336; font-size: 18px;\">error</mat-icon>\n                      <strong>Request {{ state.index + 1 }}:</strong>\n                      <span>Failed</span>\n                      <mat-chip style=\"margin-left: auto; font-size: 0.8em; background: #f44336; color: white;\">\n                        Error\n                      </mat-chip>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          </mat-card-content>\n        </mat-card>\n      </div>\n    }\n  </div>\n\n  <!-- Comparison Info -->\n  <div style=\"padding: 1rem; background: whitesmoke; border-radius: 4px; border: 1px solid #ccc;\">\n    <h4 style=\"margin-top: 0;\">Key Differences</h4>\n    <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;\">\n      <div>\n        <strong>Parallel:</strong>\n        <ul style=\"margin: 0.5rem 0 0 1rem; padding: 0;\">\n          <li>Faster execution (concurrent)</li>\n          <li>Multiple requests simultaneously</li>\n          <li>Results may complete out of order</li>\n          <li>Best for: Independent requests</li>\n        </ul>\n      </div>\n      <div>\n        <strong>Sequential:</strong>\n        <ul style=\"margin: 0.5rem 0 0 1rem; padding: 0;\">\n          <li>Slower execution (one-by-one)</li>\n          <li>Requests execute in order</li>\n          <li>Results always in request order</li>\n          <li>Best for: Dependent requests</li>\n        </ul>\n      </div>\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}.batch-demo-section{margin:2rem 0;padding:1.5rem;border:1px solid #e0e0e0;border-radius:8px;background:#fafafa}.batch-result-item{padding:.75rem;border-radius:4px;margin-bottom:.5rem;display:flex;align-items:center;gap:.5rem}.batch-result-item.success{background:#e8f5e9;border-left:3px solid #4caf50}.batch-result-item.error{background:#ffebee;border-left:3px solid #f44336}.execution-metrics{display:flex;gap:2rem;padding:1rem;background:#f5f5f5;border-radius:4px;margin:1rem 0}.execution-metrics>div{display:flex;align-items:center;gap:.5rem}.comparison-box{padding:1rem;background:#fff3e0;border-radius:4px;margin-top:2rem}.comparison-box h4{margin-top:0;margin-bottom:1rem}.comparison-box .comparison-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}@media(max-width:768px){.comparison-box .comparison-grid{grid-template-columns:1fr}}.loading-indicator{margin:1rem 0}.result-card{margin-top:1rem}.result-card mat-card-content{padding:1rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i3$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: 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: i8$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { 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: i16.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i16.MatCardContent, selector: "mat-card-content" }, { 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: RequestManagerDemoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-request-manager-demo', providers: [HTTPManagerService], standalone: false, template: "<div style=\"margin: 2rem;\">\n\n  <h2>\n    HTTP Request Manager\n  </h2>\n\n  <div [formGroup]=\"requestForm\" style=\"margin-top: 2rem;\">\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Adapter (Model)</mat-label>\n        <mat-select formControlName=\"adapter\" #adapterSelect>\n          <mat-option>None</mat-option>\n          @for (adapter of sampleAdaptors; track adapter) {\n            <mat-option [value]=\"adapter.value\">\n              {{adapter.label}}\n            </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Mapper (Model)</mat-label>\n        <mat-select formControlName=\"mapper\" #mapperSelect>\n          <mat-option>None</mat-option>\n          @for (mapper of sampleMappers; track mapper) {\n            <mat-option [value]=\"mapper.value\">\n              {{mapper.label}}\n            </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n    </div>\n    @if (adapterSelect.value || mapperSelect.value) {\n      <div style=\"display: flex; margin-bottom: 2rem;\">\n        <div style=\"flex:1\" class=\"box\">\n          <h3>Adapter (Incoming)</h3>\n          @if (adapterSelect.value) {\n            <div>\n              {{ props(adapterSelect.value) | json }}\n            </div>\n          } @else {\n            No Transformation\n          }\n        </div>\n        <div style=\"flex:1\" class=\"box\">\n          <h3>Mapper (Outgoing)</h3>\n          @if (mapperSelect.value) {\n            <div>\n              {{ props(mapperSelect.value) | json }}\n            </div>\n          } @else {\n            No Transformation\n          }\n        </div>\n      </div>\n    }\n    <div>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>RestPath (/ delimited)</mat-label>\n        <input matInput placeholder=\"clients/list\" formControlName=\"path\">\n      </mat-form-field>\n    </div>\n    <div>\n      <div formArrayName=\"headers\">\n        @for (task of headers.controls; track task; let i = $index) {\n          <div [formGroupName]=\"i\">\n            <div style=\"display: flex; gap: .5rem\">\n              <mat-form-field appearance=\"outline\">\n                <mat-label>Key</mat-label>\n                <input matInput placeholder=\"authentication\" formControlName=\"key\">\n              </mat-form-field>\n              <mat-form-field appearance=\"outline\" style=\"flex:1\">\n                <mat-label>Value</mat-label>\n                <input matInput placeholder=\"sample\" formControlName=\"value\">\n              </mat-form-field>\n              <div style=\"margin-top: .5rem;\">\n                <button mat-icon-button (click)=\"removeHeader(i)\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n      <button mat-stroked-button (click)=\"addHeader()\" class=\"btn\">Add Header</button>\n    </div>\n    <div style=\"margin-top: 2rem; display: flex; flex-direction:column; gap: 1rem;\">\n      <div>\n        <mat-slide-toggle #failedState>Retry on Failed</mat-slide-toggle>\n        @if (failedState.checked) {\n          <div style=\"display: flex; gap: .5rem; margin-top: 1rem;\" formGroupName=\"retry\">\n            <mat-form-field appearance=\"outline\">\n              <mat-label>#of Times</mat-label>\n              <input matInput placeholder=\"3\" formControlName=\"times\" value=\"3\">\n            </mat-form-field>\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Delay Until Next</mat-label>\n              <input matInput placeholder=\"3\" formControlName=\"delay\" value=\"3\">\n            </mat-form-field>\n          </div>\n        }\n      </div>\n      <div>\n        <mat-slide-toggle #pollingState>Polling</mat-slide-toggle>\n        @if (pollingState.checked) {\n          <div>\n            <mat-form-field appearance=\"outline\" style=\"margin-top: 1rem\">\n              <mat-label>#of Seconds</mat-label>\n              <input matInput placeholder=\"3\" formControlName=\"polling\" value=\"3\">\n            </mat-form-field>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n\n  <div style=\"margin-bottom: 1rem; margin-top: 2rem;\">\n    @if ((isPending$ | async)) {\n      <mat-progress-bar mode=\"indeterminate\"\n      ></mat-progress-bar>\n    }\n    @if (pollingState.checked && !(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: 1rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">GET Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onGetRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @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  <!-- Parallel Requests Section -->\n  <div>\n    <div style=\"display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;\">\n      <h2 style=\"flex: 1; margin: 0;\">Parallel Requests</h2>\n      <button\n        mat-raised-button\n        color=\"primary\"\n        (click)=\"onExecuteParallelBatch()\"\n        [disabled]=\"isParallelLoading\"\n        style=\"min-width: 200px;\">\n        <mat-icon>sync</mat-icon>\n        <span style=\"margin-left: 8px;\">\n          {{ isParallelLoading ? 'Loading...' : 'Fetch 5 Users' }}\n        </span>\n      </button>\n    </div>\n\n    <!-- Loading Indicator -->\n    @if (isParallelLoading) {\n      <div style=\"margin: 1rem 0;\">\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n        <p style=\"margin-top: 0.5rem; color: #666;\">\n          Executing parallel requests (concurrency: 3)...\n        </p>\n      </div>\n    }\n\n    <!-- Results -->\n    @if (parallelResults) {\n      <div style=\"margin: 1rem 0;\">\n        <mat-card appearance=\"outlined\">\n          <mat-card-content>\n            <div style=\"display: grid; gap: 0.5rem;\">\n              @for (result of parallelResults; track $index; let i = $index) {\n                <div\n                  style=\"padding: 0.75rem; border-radius: 4px; border: 1px solid;\n                         {{ result ? 'background: #e3f2fd; border-color: #2196f3;' :\n                            'background: #ffebee; border-color: #f44336;' }}\">\n                  @if (result) {\n                    <div style=\"display: flex; align-items: center; gap: 0.5rem; justify-content: space-between;\">\n                      <div style=\"display: flex; align-items: center; gap: 0.5rem;\">\n                        <mat-icon style=\"color: #2196f3; font-size: 18px;\">check_circle</mat-icon>\n                        <strong>User #{{ result.id }}:</strong>\n                        <span>{{ result.name }}</span>\n                      </div>\n                      <span style=\"color: #2196f3; font-weight: bold;\">Complete</span>\n                    </div>\n                  } @else {\n                    <div style=\"display: flex; align-items: center; gap: 0.5rem; justify-content: space-between;\">\n                      <div style=\"display: flex; align-items: center; gap: 0.5rem;\">\n                        <mat-icon style=\"color: #f44336; font-size: 18px;\">error</mat-icon>\n                        <strong>Request {{ i + 1 }}:</strong>\n                        <span>Failed</span>\n                      </div>\n                      <span style=\"color: #f44336; font-weight: bold;\">Error</span>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          </mat-card-content>\n        </mat-card>\n      </div>\n    }\n\n    <!-- Execution Metrics -->\n    @if (parallelExecutionTime !== undefined) {\n      <div style=\"background: #f5f5f5; padding: 1rem; border-radius: 4px; margin: 1rem 0;\">\n        <div style=\"display: flex; gap: 2rem;\">\n          <div>\n            <strong>\u23F1Execution Time:</strong>\n            <span style=\"margin-left: 0.5rem; color: #4caf50;\">\n              {{ formatTime(parallelExecutionTime) }}\n            </span>\n          </div>\n          <div>\n            <strong>Mode:</strong>\n            <span style=\"margin-left: 0.5rem;\">Parallel</span>\n          </div>\n        </div>\n      </div>\n    }\n\n    <!-- Error Display -->\n    @if (parallelError) {\n      <div style=\"margin-top: 1rem;\">\n        <mat-error>{{ parallelError }}</mat-error>\n      </div>\n    }\n  </div>\n\n  <!-- Sequential Requests Section -->\n  <div>\n    <div style=\"display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;\">\n      <h2 style=\"flex: 1; margin: 0;\">Sequential Requests</h2>\n      <button\n        mat-raised-button\n        color=\"accent\"\n        (click)=\"onExecuteSequentialBatch()\"\n        [disabled]=\"isSequentialLoading\"\n        style=\"min-width: 200px;\">\n        <mat-icon>timeline</mat-icon>\n        <span style=\"margin-left: 8px;\">\n          {{ isSequentialLoading ? 'Loading...' : 'Fetch 5 Todos' }}\n        </span>\n      </button>\n    </div>\n\n    <!-- Loading Indicator -->\n    @if (isSequentialLoading) {\n      <div style=\"margin: 1rem 0;\">\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n        <p style=\"margin-top: 0.5rem; color: #666;\">\n          Executing sequential requests (one at a time)...\n        </p>\n      </div>\n    }\n\n    <!-- Results -->\n    @if (sequentialResults) {\n      <div style=\"margin: 1rem 0;\">\n        <mat-card appearance=\"outlined\">\n          <mat-card-content>\n            <div style=\"display: grid; gap: 0.5rem;\">\n              @for (result of sequentialResults; track $index; let i = $index) {\n                <div\n                  style=\"padding: 0.75rem; border-radius: 4px; border: 1px solid;\n                         {{ result ? 'background: #e3f2fd; border-color: #2196f3;' :\n                            'background: #ffebee; border-color: #f44336;' }}\">\n                  @if (result) {\n                    <div style=\"display: flex; align-items: center; gap: 0.5rem; justify-content: space-between;\">\n                      <div style=\"display: flex; align-items: center; gap: 0.5rem;\">\n                        <mat-icon style=\"color: #2196f3; font-size: 18px;\">check_circle</mat-icon>\n                        <strong>Todo #{{ result.id }}:</strong>\n                        <span style=\"flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\">\n                          {{ result.title }}\n                        </span>\n                      </div>\n                    </div>\n                  } @else {\n                    <div style=\"display: flex; align-items: center; gap: 0.5rem; justify-content: space-between;\">\n                      <div style=\"display: flex; align-items: center; gap: 0.5rem;\">\n                        <mat-icon style=\"color: #f44336; font-size: 18px;\">error</mat-icon>\n                        <strong>Request {{ i + 1 }}:</strong>\n                        <span>Failed</span>\n                      </div>\n                      <span style=\"color: #f44336; font-weight: bold;\">Error</span>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          </mat-card-content>\n        </mat-card>\n      </div>\n    }\n\n    <!-- Execution Metrics -->\n    @if (sequentialExecutionTime !== undefined) {\n      <div style=\"background: #f5f5f5; padding: 1rem; border-radius: 4px; margin: 1rem 0;\">\n        <div style=\"display: flex; gap: 2rem;\">\n          <div>\n            <strong>Execution Time:</strong>\n            <span style=\"margin-left: 0.5rem; color: #4caf50;\">\n              {{ formatTime(sequentialExecutionTime) }}\n            </span>\n          </div>\n          <div>\n            <strong>Mode:</strong>\n            <span style=\"margin-left: 0.5rem;\">Sequential</span>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- Stream Mode Section -->\n  <div>\n    <div style=\"display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;\">\n      <h2 style=\"flex: 1; margin: 0;\">Stream Mode (Real-time States)</h2>\n      <button\n        mat-raised-button\n        color=\"primary\"\n        (click)=\"onExecuteStreamBatch()\"\n        [disabled]=\"isStreamLoading\"\n        style=\"min-width: 200px;\">\n        <mat-icon>auto_awesome</mat-icon>\n        <span style=\"margin-left: 8px;\">\n          {{ isStreamLoading ? 'Loading...' : 'Fetch 5 Posts' }}\n        </span>\n      </button>\n    </div>\n\n    <!-- Loading Indicator -->\n    @if (isStreamLoading) {\n      <div style=\"margin: 1rem 0;\">\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n        <p style=\"margin-top: 0.5rem; color: #666;\">\n          Executing parallel requests with real-time state updates...\n        </p>\n      </div>\n    }\n\n    <!-- Progress Bar -->\n    @if (streamProgress) {\n      <div style=\"background: #f5f5f5; padding: 1rem; border-radius: 4px; margin: 1rem 0;\">\n        <div style=\"display: flex; gap: 2rem; margin-bottom: 0.5rem;\">\n          <div>\n            <strong>Execution Time:</strong>\n            <span style=\"margin-left: 0.5rem; color: #4caf50;\">\n              {{ formatTime(streamExecutionTime || 0) }}\n            </span>\n          </div>\n          <div>\n            <strong>Progress:</strong>\n            <span style=\"margin-left: 0.5rem;\">\n              {{ streamProgress.completed }} / {{ streamProgress.total }} completed\n            </span>\n          </div>\n          <div>\n            <strong>Pending:</strong>\n            <span style=\"margin-left: 0.5rem;\">\n              {{ streamProgress.pending }}\n            </span>\n          </div>\n          <div>\n            <strong>Failed:</strong>\n            <span style=\"margin-left: 0.5rem;\">\n              {{ streamProgress.failed }}\n            </span>\n          </div>\n        </div>\n        <mat-progress-bar\n          mode=\"determinate\"\n          [value]=\"streamProgress.percent\"\n          color=\"accent\">\n        </mat-progress-bar>\n        <p style=\"margin-top: 0.5rem; text-align: right; color: #666;\">\n          {{ streamProgress.percent }}%\n        </p>\n      </div>\n    }\n\n    <!-- Error Display -->\n    @if (streamError) {\n      <div style=\"margin-top: 1rem;\">\n        <mat-error>{{ streamError }}</mat-error>\n      </div>\n    }\n\n    <!-- Individual Request States -->\n    @if (streamBatchStates.length > 0) {\n      <div style=\"margin-top: 1rem;\">\n        <mat-card appearance=\"outlined\">\n          <mat-card-content>\n            <div style=\"display: grid; gap: 0.5rem;\">\n              @for (state of filteredStreamStates; track state.index; let i = $index) {\n                <div\n                  style=\"padding: 0.75rem; border-radius: 4px; border: 1px solid;\n                         {{ isPendingState(state) ? 'background: #fff3e0; border-color: #ff9800;' :\n                            isSuccessState(state) ? 'background: #e3f2fd; border-color: #2196f3;' :\n                            'background: #ffebee; border-color: #f44336;' }}\">\n                  @if (isPendingState(state)) {\n                    <div style=\"display: flex; align-items: center; gap: 0.5rem;\">\n                      <mat-spinner diameter=\"16\" style=\"margin-right: 0.5rem;\"></mat-spinner>\n                      <strong>Request {{ state.index + 1 }}:</strong>\n                      <span>Loading...</span>\n                    </div>\n                  } @else if (isSuccessState(state)) {\n                    <div style=\"display: flex; align-items: center; gap: 0.5rem;\">\n                      <mat-icon style=\"color: #2196f3; font-size: 18px;\">check_circle</mat-icon>\n                      <strong>Post #{{ state.data.id }}:</strong>\n                      <span style=\"flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\">\n                        {{ state.data.title }}\n                      </span>\n                    </div>\n                  } @else {\n                    <div style=\"display: flex; align-items: center; gap: 0.5rem;\">\n                      <mat-icon style=\"color: #f44336; font-size: 18px;\">error</mat-icon>\n                      <strong>Request {{ state.index + 1 }}:</strong>\n                      <span>Failed</span>\n                      <mat-chip style=\"margin-left: auto; font-size: 0.8em; background: #f44336; color: white;\">\n                        Error\n                      </mat-chip>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          </mat-card-content>\n        </mat-card>\n      </div>\n    }\n  </div>\n\n  <!-- Comparison Info -->\n  <div style=\"padding: 1rem; background: whitesmoke; border-radius: 4px; border: 1px solid #ccc;\">\n    <h4 style=\"margin-top: 0;\">Key Differences</h4>\n    <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;\">\n      <div>\n        <strong>Parallel:</strong>\n        <ul style=\"margin: 0.5rem 0 0 1rem; padding: 0;\">\n          <li>Faster execution (concurrent)</li>\n          <li>Multiple requests simultaneously</li>\n          <li>Results may complete out of order</li>\n          <li>Best for: Independent requests</li>\n        </ul>\n      </div>\n      <div>\n        <strong>Sequential:</strong>\n        <ul style=\"margin: 0.5rem 0 0 1rem; padding: 0;\">\n          <li>Slower execution (one-by-one)</li>\n          <li>Requests execute in order</li>\n          <li>Results always in request order</li>\n          <li>Best for: Dependent requests</li>\n        </ul>\n      </div>\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}.batch-demo-section{margin:2rem 0;padding:1.5rem;border:1px solid #e0e0e0;border-radius:8px;background:#fafafa}.batch-result-item{padding:.75rem;border-radius:4px;margin-bottom:.5rem;display:flex;align-items:center;gap:.5rem}.batch-result-item.success{background:#e8f5e9;border-left:3px solid #4caf50}.batch-result-item.error{background:#ffebee;border-left:3px solid #f44336}.execution-metrics{display:flex;gap:2rem;padding:1rem;background:#f5f5f5;border-radius:4px;margin:1rem 0}.execution-metrics>div{display:flex;align-items:center;gap:.5rem}.comparison-box{padding:1rem;background:#fff3e0;border-radius:4px;margin-top:2rem}.comparison-box h4{margin-top:0;margin-bottom:1rem}.comparison-box .comparison-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}@media(max-width:768px){.comparison-box .comparison-grid{grid-template-columns:1fr}}.loading-indicator{margin:1rem 0}.result-card{margin-top:1rem}.result-card mat-card-content{padding:1rem}\n"] }]
+            args: [{ selector: 'app-request-manager-demo', providers: [HTTPManagerService], standalone: false, template: "<div style=\"margin: 2rem;\">\n\n  <h2>\n    HTTP Request Manager\n  </h2>\n\n  <div [formGroup]=\"requestForm\" style=\"margin-top: 2rem;\">\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Adapter (Model)</mat-label>\n        <mat-select formControlName=\"adapter\" #adapterSelect>\n          <mat-option>None</mat-option>\n          @for (adapter of sampleAdaptors; track adapter) {\n            <mat-option [value]=\"adapter.value\">\n              {{adapter.label}}\n            </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Mapper (Model)</mat-label>\n        <mat-select formControlName=\"mapper\" #mapperSelect>\n          <mat-option>None</mat-option>\n          @for (mapper of sampleMappers; track mapper) {\n            <mat-option [value]=\"mapper.value\">\n              {{mapper.label}}\n            </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n    </div>\n    @if (adapterSelect.value || mapperSelect.value) {\n      <div style=\"display: flex; margin-bottom: 2rem;\">\n        <div style=\"flex:1\" class=\"box\">\n          <h3>Adapter (Incoming)</h3>\n          @if (adapterSelect.value) {\n            <div>\n              {{ props(adapterSelect.value) | json }}\n            </div>\n          } @else {\n            No Transformation\n          }\n        </div>\n        <div style=\"flex:1\" class=\"box\">\n          <h3>Mapper (Outgoing)</h3>\n          @if (mapperSelect.value) {\n            <div>\n              {{ props(mapperSelect.value) | json }}\n            </div>\n          } @else {\n            No Transformation\n          }\n        </div>\n      </div>\n    }\n    <div>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>RestPath (/ delimited)</mat-label>\n        <input matInput placeholder=\"clients/list\" formControlName=\"path\">\n      </mat-form-field>\n    </div>\n    <div>\n      <div formArrayName=\"headers\">\n        @for (task of headers.controls; track task; let i = $index) {\n          <div [formGroupName]=\"i\">\n            <div style=\"display: flex; gap: .5rem\">\n              <mat-form-field appearance=\"outline\">\n                <mat-label>Key</mat-label>\n                <input matInput placeholder=\"authentication\" formControlName=\"key\">\n              </mat-form-field>\n              <mat-form-field appearance=\"outline\" style=\"flex:1\">\n                <mat-label>Value</mat-label>\n                <input matInput placeholder=\"sample\" formControlName=\"value\">\n              </mat-form-field>\n              <div style=\"margin-top: .5rem;\">\n                <button mat-icon-button (click)=\"removeHeader(i)\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n      <button mat-stroked-button (click)=\"addHeader()\" class=\"btn\">Add Header</button>\n    </div>\n    <div style=\"margin-top: 2rem; display: flex; flex-direction:column; gap: 1rem;\">\n      <div>\n        <mat-slide-toggle #failedState>Retry on Failed</mat-slide-toggle>\n        @if (failedState.checked) {\n          <div style=\"display: flex; gap: .5rem; margin-top: 1rem;\" formGroupName=\"retry\">\n            <mat-form-field appearance=\"outline\">\n              <mat-label>#of Times</mat-label>\n              <input matInput placeholder=\"3\" formControlName=\"times\" value=\"3\">\n            </mat-form-field>\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Delay Until Next</mat-label>\n              <input matInput placeholder=\"3\" formControlName=\"delay\" value=\"3\">\n            </mat-form-field>\n          </div>\n        }\n      </div>\n      <div>\n        <mat-slide-toggle #pollingState>Polling</mat-slide-toggle>\n        @if (pollingState.checked) {\n          <div>\n            <mat-form-field appearance=\"outline\" style=\"margin-top: 1rem\">\n              <mat-label>#of Seconds</mat-label>\n              <input matInput placeholder=\"3\" formControlName=\"polling\" value=\"3\">\n            </mat-form-field>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n\n  <div style=\"margin-bottom: 1rem; margin-top: 2rem;\">\n    @if ((isPending$ | async)) {\n      <mat-progress-bar mode=\"indeterminate\"\n      ></mat-progress-bar>\n    }\n    @if (pollingState.checked && !(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: 1rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">GET Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onGetRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @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        <mat-progress-bar mode=\"determinate\" [value]=\"(progress$ | async)?.percent ?? 0\" [style.display]=\"(isStreamingPending$ | async) ? 'block' : 'none'\"></mat-progress-bar>\n        <table mat-table [dataSource]=\"data\">\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  <!-- Parallel Requests Section -->\n  <div>\n    <div style=\"display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;\">\n      <h2 style=\"flex: 1; margin: 0;\">Parallel Requests</h2>\n      <button\n        mat-raised-button\n        color=\"primary\"\n        (click)=\"onExecuteParallelBatch()\"\n        [disabled]=\"isParallelLoading\"\n        style=\"min-width: 200px;\">\n        <mat-icon>sync</mat-icon>\n        <span style=\"margin-left: 8px;\">\n          {{ isParallelLoading ? 'Loading...' : 'Fetch 5 Users' }}\n        </span>\n      </button>\n    </div>\n\n    <!-- Loading Indicator -->\n    @if (isParallelLoading) {\n      <div style=\"margin: 1rem 0;\">\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n        <p style=\"margin-top: 0.5rem; color: #666;\">\n          Executing parallel requests (concurrency: 3)...\n        </p>\n      </div>\n    }\n\n    <!-- Results -->\n    @if (parallelResults) {\n      <div style=\"margin: 1rem 0;\">\n        <mat-card appearance=\"outlined\">\n          <mat-card-content>\n            <div style=\"display: grid; gap: 0.5rem;\">\n              @for (result of parallelResults; track $index; let i = $index) {\n                <div\n                  style=\"padding: 0.75rem; border-radius: 4px; border: 1px solid;\n                         {{ result ? 'background: #e3f2fd; border-color: #2196f3;' :\n                            'background: #ffebee; border-color: #f44336;' }}\">\n                  @if (result) {\n                    <div style=\"display: flex; align-items: center; gap: 0.5rem; justify-content: space-between;\">\n                      <div style=\"display: flex; align-items: center; gap: 0.5rem;\">\n                        <mat-icon style=\"color: #2196f3; font-size: 18px;\">check_circle</mat-icon>\n                        <strong>User #{{ result.id }}:</strong>\n                        <span>{{ result.name }}</span>\n                      </div>\n                      <span style=\"color: #2196f3; font-weight: bold;\">Complete</span>\n                    </div>\n                  } @else {\n                    <div style=\"display: flex; align-items: center; gap: 0.5rem; justify-content: space-between;\">\n                      <div style=\"display: flex; align-items: center; gap: 0.5rem;\">\n                        <mat-icon style=\"color: #f44336; font-size: 18px;\">error</mat-icon>\n                        <strong>Request {{ i + 1 }}:</strong>\n                        <span>Failed</span>\n                      </div>\n                      <span style=\"color: #f44336; font-weight: bold;\">Error</span>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          </mat-card-content>\n        </mat-card>\n      </div>\n    }\n\n    <!-- Execution Metrics -->\n    @if (parallelExecutionTime !== undefined) {\n      <div style=\"background: #f5f5f5; padding: 1rem; border-radius: 4px; margin: 1rem 0;\">\n        <div style=\"display: flex; gap: 2rem;\">\n          <div>\n            <strong>\u23F1Execution Time:</strong>\n            <span style=\"margin-left: 0.5rem; color: #4caf50;\">\n              {{ formatTime(parallelExecutionTime) }}\n            </span>\n          </div>\n          <div>\n            <strong>Mode:</strong>\n            <span style=\"margin-left: 0.5rem;\">Parallel</span>\n          </div>\n        </div>\n      </div>\n    }\n\n    <!-- Error Display -->\n    @if (parallelError) {\n      <div style=\"margin-top: 1rem;\">\n        <mat-error>{{ parallelError }}</mat-error>\n      </div>\n    }\n  </div>\n\n  <!-- Sequential Requests Section -->\n  <div>\n    <div style=\"display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;\">\n      <h2 style=\"flex: 1; margin: 0;\">Sequential Requests</h2>\n      <button\n        mat-raised-button\n        color=\"accent\"\n        (click)=\"onExecuteSequentialBatch()\"\n        [disabled]=\"isSequentialLoading\"\n        style=\"min-width: 200px;\">\n        <mat-icon>timeline</mat-icon>\n        <span style=\"margin-left: 8px;\">\n          {{ isSequentialLoading ? 'Loading...' : 'Fetch 5 Todos' }}\n        </span>\n      </button>\n    </div>\n\n    <!-- Loading Indicator -->\n    @if (isSequentialLoading) {\n      <div style=\"margin: 1rem 0;\">\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n        <p style=\"margin-top: 0.5rem; color: #666;\">\n          Executing sequential requests (one at a time)...\n        </p>\n      </div>\n    }\n\n    <!-- Results -->\n    @if (sequentialResults) {\n      <div style=\"margin: 1rem 0;\">\n        <mat-card appearance=\"outlined\">\n          <mat-card-content>\n            <div style=\"display: grid; gap: 0.5rem;\">\n              @for (result of sequentialResults; track $index; let i = $index) {\n                <div\n                  style=\"padding: 0.75rem; border-radius: 4px; border: 1px solid;\n                         {{ result ? 'background: #e3f2fd; border-color: #2196f3;' :\n                            'background: #ffebee; border-color: #f44336;' }}\">\n                  @if (result) {\n                    <div style=\"display: flex; align-items: center; gap: 0.5rem; justify-content: space-between;\">\n                      <div style=\"display: flex; align-items: center; gap: 0.5rem;\">\n                        <mat-icon style=\"color: #2196f3; font-size: 18px;\">check_circle</mat-icon>\n                        <strong>Todo #{{ result.id }}:</strong>\n                        <span style=\"flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\">\n                          {{ result.title }}\n                        </span>\n                      </div>\n                    </div>\n                  } @else {\n                    <div style=\"display: flex; align-items: center; gap: 0.5rem; justify-content: space-between;\">\n                      <div style=\"display: flex; align-items: center; gap: 0.5rem;\">\n                        <mat-icon style=\"color: #f44336; font-size: 18px;\">error</mat-icon>\n                        <strong>Request {{ i + 1 }}:</strong>\n                        <span>Failed</span>\n                      </div>\n                      <span style=\"color: #f44336; font-weight: bold;\">Error</span>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          </mat-card-content>\n        </mat-card>\n      </div>\n    }\n\n    <!-- Execution Metrics -->\n    @if (sequentialExecutionTime !== undefined) {\n      <div style=\"background: #f5f5f5; padding: 1rem; border-radius: 4px; margin: 1rem 0;\">\n        <div style=\"display: flex; gap: 2rem;\">\n          <div>\n            <strong>Execution Time:</strong>\n            <span style=\"margin-left: 0.5rem; color: #4caf50;\">\n              {{ formatTime(sequentialExecutionTime) }}\n            </span>\n          </div>\n          <div>\n            <strong>Mode:</strong>\n            <span style=\"margin-left: 0.5rem;\">Sequential</span>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- Stream Mode Section -->\n  <div>\n    <div style=\"display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;\">\n      <h2 style=\"flex: 1; margin: 0;\">Stream Mode (Real-time States)</h2>\n      <button\n        mat-raised-button\n        color=\"primary\"\n        (click)=\"onExecuteStreamBatch()\"\n        [disabled]=\"isStreamLoading\"\n        style=\"min-width: 200px;\">\n        <mat-icon>auto_awesome</mat-icon>\n        <span style=\"margin-left: 8px;\">\n          {{ isStreamLoading ? 'Loading...' : 'Fetch 5 Posts' }}\n        </span>\n      </button>\n    </div>\n\n    <!-- Loading Indicator -->\n    @if (isStreamLoading) {\n      <div style=\"margin: 1rem 0;\">\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n        <p style=\"margin-top: 0.5rem; color: #666;\">\n          Executing parallel requests with real-time state updates...\n        </p>\n      </div>\n    }\n\n    <!-- Progress Bar -->\n    @if (streamProgress) {\n      <div style=\"background: #f5f5f5; padding: 1rem; border-radius: 4px; margin: 1rem 0;\">\n        <div style=\"display: flex; gap: 2rem; margin-bottom: 0.5rem;\">\n          <div>\n            <strong>Execution Time:</strong>\n            <span style=\"margin-left: 0.5rem; color: #4caf50;\">\n              {{ formatTime(streamExecutionTime || 0) }}\n            </span>\n          </div>\n          <div>\n            <strong>Progress:</strong>\n            <span style=\"margin-left: 0.5rem;\">\n              {{ streamProgress.completed }} / {{ streamProgress.total }} completed\n            </span>\n          </div>\n          <div>\n            <strong>Pending:</strong>\n            <span style=\"margin-left: 0.5rem;\">\n              {{ streamProgress.pending }}\n            </span>\n          </div>\n          <div>\n            <strong>Failed:</strong>\n            <span style=\"margin-left: 0.5rem;\">\n              {{ streamProgress.failed }}\n            </span>\n          </div>\n        </div>\n        <mat-progress-bar\n          mode=\"determinate\"\n          [value]=\"streamProgress.percent\"\n          color=\"accent\">\n        </mat-progress-bar>\n        <p style=\"margin-top: 0.5rem; text-align: right; color: #666;\">\n          {{ streamProgress.percent }}%\n        </p>\n      </div>\n    }\n\n    <!-- Error Display -->\n    @if (streamError) {\n      <div style=\"margin-top: 1rem;\">\n        <mat-error>{{ streamError }}</mat-error>\n      </div>\n    }\n\n    <!-- Individual Request States -->\n    @if (streamBatchStates.length > 0) {\n      <div style=\"margin-top: 1rem;\">\n        <mat-card appearance=\"outlined\">\n          <mat-card-content>\n            <div style=\"display: grid; gap: 0.5rem;\">\n              @for (state of filteredStreamStates; track state.index; let i = $index) {\n                <div\n                  style=\"padding: 0.75rem; border-radius: 4px; border: 1px solid;\n                         {{ isPendingState(state) ? 'background: #fff3e0; border-color: #ff9800;' :\n                            isSuccessState(state) ? 'background: #e3f2fd; border-color: #2196f3;' :\n                            'background: #ffebee; border-color: #f44336;' }}\">\n                  @if (isPendingState(state)) {\n                    <div style=\"display: flex; align-items: center; gap: 0.5rem;\">\n                      <mat-spinner diameter=\"16\" style=\"margin-right: 0.5rem;\"></mat-spinner>\n                      <strong>Request {{ state.index + 1 }}:</strong>\n                      <span>Loading...</span>\n                    </div>\n                  } @else if (isSuccessState(state)) {\n                    <div style=\"display: flex; align-items: center; gap: 0.5rem;\">\n                      <mat-icon style=\"color: #2196f3; font-size: 18px;\">check_circle</mat-icon>\n                      <strong>Post #{{ state.data.id }}:</strong>\n                      <span style=\"flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\">\n                        {{ state.data.title }}\n                      </span>\n                    </div>\n                  } @else {\n                    <div style=\"display: flex; align-items: center; gap: 0.5rem;\">\n                      <mat-icon style=\"color: #f44336; font-size: 18px;\">error</mat-icon>\n                      <strong>Request {{ state.index + 1 }}:</strong>\n                      <span>Failed</span>\n                      <mat-chip style=\"margin-left: auto; font-size: 0.8em; background: #f44336; color: white;\">\n                        Error\n                      </mat-chip>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          </mat-card-content>\n        </mat-card>\n      </div>\n    }\n  </div>\n\n  <!-- Comparison Info -->\n  <div style=\"padding: 1rem; background: whitesmoke; border-radius: 4px; border: 1px solid #ccc;\">\n    <h4 style=\"margin-top: 0;\">Key Differences</h4>\n    <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;\">\n      <div>\n        <strong>Parallel:</strong>\n        <ul style=\"margin: 0.5rem 0 0 1rem; padding: 0;\">\n          <li>Faster execution (concurrent)</li>\n          <li>Multiple requests simultaneously</li>\n          <li>Results may complete out of order</li>\n          <li>Best for: Independent requests</li>\n        </ul>\n      </div>\n      <div>\n        <strong>Sequential:</strong>\n        <ul style=\"margin: 0.5rem 0 0 1rem; padding: 0;\">\n          <li>Slower execution (one-by-one)</li>\n          <li>Requests execute in order</li>\n          <li>Results always in request order</li>\n          <li>Best for: Dependent requests</li>\n        </ul>\n      </div>\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}.batch-demo-section{margin:2rem 0;padding:1.5rem;border:1px solid #e0e0e0;border-radius:8px;background:#fafafa}.batch-result-item{padding:.75rem;border-radius:4px;margin-bottom:.5rem;display:flex;align-items:center;gap:.5rem}.batch-result-item.success{background:#e8f5e9;border-left:3px solid #4caf50}.batch-result-item.error{background:#ffebee;border-left:3px solid #f44336}.execution-metrics{display:flex;gap:2rem;padding:1rem;background:#f5f5f5;border-radius:4px;margin:1rem 0}.execution-metrics>div{display:flex;align-items:center;gap:.5rem}.comparison-box{padding:1rem;background:#fff3e0;border-radius:4px;margin-top:2rem}.comparison-box h4{margin-top:0;margin-bottom:1rem}.comparison-box .comparison-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}@media(max-width:768px){.comparison-box .comparison-grid{grid-template-columns:1fr}}.loading-indicator{margin:1rem 0}.result-card{margin-top:1rem}.result-card mat-card-content{padding:1rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { server: [{
                 type: Input
             }], adapter: [{
@@ -9934,6 +10224,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 }]
         }] });
 
+class UserData {
+    constructor(ldap = '', name = '', email = '', color = RandomPaletteColor()) {
+        this.ldap = ldap;
+        this.name = name;
+        this.email = email;
+        this.color = color;
+    }
+    static adapt(item) {
+        const userName = `${item?.first_name} ${item?.last_name}`;
+        return new UserData(item?.ldap, userName, item?.email, item?.color);
+    }
+}
+
 class StateDataRequestService extends HTTPManagerStateService {
     constructor() {
         super(ApiRequest.adapt({