http-request-manager 18.12.4 → 18.12.5

package/fesm2022/http-request-manager.mjs

@@ -4,7 +4,7 @@ import { ComponentStore } from '@ngrx/component-store';
 import { map, catchError, filter, tap, finalize, takeWhile, retry, startWith, mergeMap, takeUntil, concatMap, toArray, withLatestFrom, switchMap, delay, take, scan, distinctUntilChanged } from 'rxjs/operators';
 import { HttpClient, HttpHeaders, HttpEventType, HttpHeaderResponse, HttpErrorResponse, HTTP_INTERCEPTORS } from '@angular/common/http';
 import * as CryptoJS from 'crypto-js';
-import { from, BehaviorSubject, EMPTY, throwError, defer, interval, timer, Subject, 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 { 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 { toObservable } from '@angular/core/rxjs-interop';
 import { ToastMessageDisplayService, ToastDisplay, ToastColors, ToastMessageDisplayModule } from 'toast-message-display';
 import Dexie from 'dexie';
@@ -910,18 +910,14 @@ class StreamingProcessor {
                     const parsedData = this.parseBuffer();
                     // Only return NEW items since last parse (progressive updates)
                     const newItems = parsedData.slice(this.lastParsedLength);
-                    // received = cumulative total for display, newItems.length = new this chunk
-                    const received = newItems.length; // Changed from lastParsedLength
                     this.lastParsedLength = parsedData.length;
-                    const total = this.totalFromHeader;
-                    const percent = total
-                        ? Math.min(100, Math.round((received / total) * 100))
-                        : 0;
-                    // console.log('[STREAM] progress:', percent, 'received:', received, 'total:', total, 'bufferLen:', this.buffer.length, 'parsedCount:', parsedData.length);
+                    // Calculate progress
                     const progress = {
-                        received,
-                        total,
-                        percent,
+                        received: this.lastParsedLength,
+                        total: this.totalFromHeader,
+                        percent: this.totalFromHeader
+                            ? Math.round((this.lastParsedLength / this.totalFromHeader) * 100)
+                            : 0,
                         stage: 'streaming'
                     };
                     return {
@@ -934,22 +930,17 @@ class StreamingProcessor {
                 if (event.body) {
                     this.appendToBuffer(event.body);
                     const parsedData = this.parseBuffer();
-                    // Only return items not already returned via progress events
-                    const remaining = parsedData.slice(this.lastParsedLength);
-                    this.lastParsedLength = parsedData.length;
-                    const received = parsedData.length;
-                    const total = this.totalFromHeader;
-                    const percent = total
-                        ? Math.min(100, Math.round((received / total) * 100))
-                        : 100;
+                    // Calculate final progress
                     const progress = {
-                        received,
-                        total,
-                        percent,
+                        received: parsedData.length,
+                        total: this.totalFromHeader,
+                        percent: this.totalFromHeader
+                            ? Math.round((parsedData.length / this.totalFromHeader) * 100)
+                            : 100,
                         stage: 'complete'
                     };
                     return {
-                        data: remaining.length > 0 ? remaining : [],
+                        data: parsedData.length > 0 ? parsedData : [],
                         progress
                     };
                 }
@@ -1080,8 +1071,6 @@ 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 ||
@@ -2852,9 +2841,6 @@ 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({
@@ -2864,80 +2850,32 @@ class RequestService extends WebsocketService {
             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,
-                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'
-                });
-            }))
+            }).pipe(tap(data => console.log('STREAM DATA', data)), requestStreaming({ streamType: options.streamType || StreamType.AI_STREAMING }), this.requestStreaming(options), this.handleFinalize())
             : 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,
-                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'
-                });
-            }))
+            }).pipe(requestStreaming({ streamType: options.streamType || StreamType.AI_STREAMING }), this.requestStreaming(options), this.handleFinalize())
             : this.http.post(urlPath, data, headers).pipe(this.request(options));
     }
     updateRecordRequest(options, data) {
@@ -2982,7 +2920,7 @@ class RequestService extends WebsocketService {
         return (source$) => {
             return source$.pipe(tap(output => {
                 // Update progress from stream output
-                this.progress.next(output.progress.percent);
+                this.progress.next(output.progress.received);
                 this.streamProgress.next(output.progress);
             }), map(output => {
                 const data = output.data;
@@ -3131,12 +3069,7 @@ class RequestService extends WebsocketService {
         return formData;
     }
     handleFinalize() {
-        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.
-        });
+        return finalize(() => this.isPending.next(false));
     }
     downloadFile(file, fileData) {
         const navigatorAny = window.navigator;
@@ -3829,16 +3762,12 @@ 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'
-            });
-        }
+        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);
@@ -4210,192 +4139,49 @@ class RequestSignalsService extends WebsocketService {
         this.http = inject(HttpClient);
         this.pathQueryService = inject(PathQueryService);
         this.headersService = inject(HeadersService);
-        // Use counter instead of boolean to handle multiple concurrent requests
-        this._activeRequestCount = signal(0);
-        this.isPending = computed(() => this._activeRequestCount() > 0);
+        this.isPending = signal(false);
         this.progress = signal(0);
-        // 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();
+        this.isIdle = computed(() => !this.isPending());
     }
     // Implementation
     getRecordRequest(options) {
         const urlPath = this.buildUrlPath(options);
         const headers = this.buildCombinedHeaders(options);
-        const isStream = options.stream === true;
-        const request$ = (isStream)
+        this.isPending.set(true);
+        return (options.stream)
             ? this.http.get(urlPath, {
                 ...headers,
                 observe: 'events',
                 responseType: 'text',
                 reportProgress: true
-            }).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);
+            }).pipe(requestStreaming({ streamType: options.streamType || StreamType.AI_STREAMING }), this.requestStreamingOperator(options), this.handleFinalize())
+            : this.http.get(urlPath, headers).pipe(this.request(options), this.handleFinalize());
     }
     // Implementation
     createRecordRequest(options, data) {
         const urlPath = this.buildUrlPath(options);
         const headers = this.buildCombinedHeaders(options);
-        const isStream = options.stream === true;
-        const request$ = (isStream)
+        this.isPending.set(true);
+        return (options.stream)
             ? this.http.post(urlPath, data, {
                 ...headers,
                 observe: 'events',
                 responseType: 'text',
                 reportProgress: true
-            }).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);
+            }).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());
     }
     updateRecordRequest(options, data) {
         const urlPath = this.buildUrlPath(options);
         const headers = this.buildHeaders(options);
-        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');
+        this.isPending.set(true);
+        return this.http.put(urlPath, data, headers).pipe(this.request(options), this.handleFinalize());
     }
     deleteRecordRequest(options) {
         const urlPath = this.buildUrlPath(options);
         const headers = this.buildHeaders(options);
-        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 => {
-            const newCount = Math.max(0, c - 1);
-            if (newCount === 0) {
-                this.progress.set(0);
-            }
-            return newCount;
-        });
-        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: () => { }
-            });
-        }
+        this.isPending.set(true);
+        return this.http.delete(urlPath, headers).pipe(this.request(options), this.handleFinalize());
     }
     buildUrlPath(options) {
         return this.pathQueryService.buildAPIPath(options.server, options.path);
@@ -4424,9 +4210,7 @@ class RequestSignalsService extends WebsocketService {
     }
     requestStreamingOperator(options) {
         return (source$) => {
-            return source$.pipe(tap(output => {
-                this.progress.set(output.progress.percent);
-            }), map(output => {
+            return source$.pipe(map(output => {
                 const data = output.data;
                 if (!data || (Array.isArray(data) && data.length === 0)) {
                     return data;
@@ -4439,12 +4223,14 @@ class RequestSignalsService extends WebsocketService {
         };
     }
     downloadFileRequest(options) {
-        this._activeRequestCount.update(c => c + 1);
+        this.isPending.set(true);
         const urlPath = this.buildUrlPath(options);
-        const request$ = this.http.get(urlPath, { responseType: 'blob', observe: 'events', reportProgress: true })
+        return 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');
                 }
             }
@@ -4460,54 +4246,59 @@ 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';
-        const request$ = this.http.request(method, urlPath, {
+        return 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 = [];
@@ -4556,6 +4347,9 @@ 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();
@@ -4769,6 +4563,7 @@ 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;
@@ -4777,13 +4572,15 @@ class HTTPManagerSignalsService extends RequestSignalsService {
             this.data.set(data);
             if (updatedOptions.displaySuccess)
                 this.handleSuccessWithSnackBar(updatedOptions.successMessage);
-        }), catchError((err) => {
+        }), finalize(() => this.isPending.set(false)), 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;
@@ -4792,13 +4589,15 @@ class HTTPManagerSignalsService extends RequestSignalsService {
             this.data.set(data);
             if (updatedOptions.displaySuccess)
                 this.handleSuccessWithSnackBar(updatedOptions.successMessage);
-        }), catchError((err) => {
+        }), finalize(() => this.isPending.set(false)), 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;
@@ -4807,13 +4606,15 @@ class HTTPManagerSignalsService extends RequestSignalsService {
             this.data.set(data);
             if (updatedOptions.displaySuccess)
                 this.handleSuccessWithSnackBar(updatedOptions.successMessage);
-        }), catchError((err) => {
+        }), finalize(() => this.isPending.set(false)), 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;
@@ -4822,22 +4623,26 @@ class HTTPManagerSignalsService extends RequestSignalsService {
             this.data.set(data);
             if (updatedOptions.displaySuccess)
                 this.handleSuccessWithSnackBar(updatedOptions.successMessage);
-        }), catchError((err) => {
+        }), finalize(() => this.isPending.set(false)), 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;
@@ -4847,9 +4652,10 @@ class HTTPManagerSignalsService extends RequestSignalsService {
             this.data.set(data);
             if (updatedOptions.displaySuccess)
                 this.handleSuccessWithSnackBar(updatedOptions.successMessage);
-        }), catchError((err) => {
+        }), finalize(() => this.isPending.set(false)), catchError((err) => {
             if (updatedOptions.displayError)
                 this.handleErrorWithSnackBar(err, updatedOptions.errorMessage || err?.message);
+            this.isPending.set(false);
             return this.handleError(err);
         }));
     }
@@ -4943,6 +4749,7 @@ class HTTPManagerSignalsService extends RequestSignalsService {
         this.toastMessage.toastMessage(displaySuccess);
     }
     stopPolling() {
+        this.isPending.set(false);
         this.polling$.next();
     }
     defineReqOptions(options, params) {
@@ -5109,7 +4916,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 }] }] });
 
 class ApiRequest {
-    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) {
+    constructor(server = '', path, headers, adapter, mapper, polling, retry, stream, streamType, displayError, displaySuccess, successMessage, errorMessage, saveAs, fileContentHeader, ws, env, uploadFiles, uploadFieldName, uploadHttpMethod, allowedTypes, maxFileSize, maxTotalSize) {
         this.server = server;
         this.path = path;
         this.headers = headers;
@@ -5119,7 +4926,6 @@ class ApiRequest {
         this.retry = retry;
         this.stream = stream;
         this.streamType = streamType;
-        this.totalHeader = totalHeader;
         this.displayError = displayError;
         this.displaySuccess = displaySuccess;
         this.successMessage = successMessage;
@@ -5137,17 +4943,18 @@ 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, (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);
+        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);
     }
 }
 
 class RequestOptions {
-    constructor(path = [], headers = {}) {
+    constructor(path = [], headers = {}, forceRefresh) {
         this.path = path;
         this.headers = headers;
+        this.forceRefresh = forceRefresh;
     }
     static adapt(item) {
-        return new RequestOptions(item?.path, item?.headers);
+        return new RequestOptions(item?.path, item?.headers, item?.forceRefresh);
     }
 }
 
@@ -6023,9 +5830,12 @@ class DbService extends Dexie {
         await this.dbReady;
         const safeTableName = this.cleanTableName(tableName);
         const safeSchema = schema.trim();
-        if (this.tableExists(safeTableName))
-            return;
         const currentSchema = this.getCurrentSchema();
+        const existingSchema = currentSchema[safeTableName]?.trim();
+        // No-op only when table already exists and schema is identical.
+        if (this.tableExists(safeTableName) && existingSchema === safeSchema) {
+            return;
+        }
         console.log('Current Schema before update:', currentSchema);
         currentSchema[safeTableName] = safeSchema;
         const nextVersion = this.verno + 1;
@@ -6039,6 +5849,7 @@ class DbService extends Dexie {
             const created = this.tables.some(t => t.name === safeTableName);
             if (!created) {
                 console.error(`CRITICAL: Table ${safeTableName} was NOT created after upgrade! Tables found:`, this.tables.map(t => t.name));
+                throw new Error(`Table '${safeTableName}' was not created after schema upgrade`);
             }
             else {
                 console.log(`Database opened successfully version ${this.verno}. Table ${safeTableName} verified.`);
@@ -6046,15 +5857,24 @@ class DbService extends Dexie {
         }
         catch (err) {
             console.error('Error opening database after schema update:', err);
+            throw err;
         }
     }
     async DBOpened() {
+        try {
+            await this.dbReady;
+        }
+        catch (err) {
+            console.error('DBOpened: init failed', err);
+            return false;
+        }
         if (!this.isOpen()) {
             try {
                 await this.open();
                 return true;
             }
             catch (err) {
+                console.error('DBOpened: open failed', err);
                 return false;
             }
         }
@@ -6149,7 +5969,11 @@ class DatabaseManagerService extends DbService {
         }));
     }
     createDatabaseTable(tableDef) {
-        return from(this.createTable(tableDef.table, tableDef.schema)).pipe(switchMap(() => this.DBOpened()));
+        const tableName = this.cleanTableName(tableDef.table);
+        return from(this.createTable(tableDef.table, tableDef.schema)).pipe(switchMap(() => from(this.DBOpened())), map((opened) => opened && this.tableExists(tableName)), catchError((error) => {
+            console.error(`createDatabaseTable: failed for table '${tableName}'`, error);
+            return of(false);
+        }));
     }
     updateDatabaseTableSchema(tableDef) {
         return from(this.createTable(tableDef.table, tableDef.schema)).pipe(switchMap(() => this.getDatabaseTable(tableDef.table)));
@@ -6196,26 +6020,23 @@ class DatabaseManagerService extends DbService {
     }
     createTableRecords(table, records) {
         const tableName = this.cleanTableName(table);
-        return from(this.DBOpened()).pipe(switchMap(() => {
+        return from(this.DBOpened()).pipe(switchMap((opened) => {
+            if (!opened) {
+                console.error(`createTableRecords: DB not open. Cannot write to '${tableName}'.`);
+                return EMPTY;
+            }
             if (!this.tables.some(t => t.name === tableName)) {
                 console.error(`createTableRecords: Table '${tableName}' does not exist in DB version ${this.verno}. Available:`, this.tables.map(t => t.name));
                 return EMPTY;
             }
             const tableInstance = this.table(tableName);
-            // Extract schema fields directly from the table instance
-            const schema = tableInstance.schema;
-            const validFields = [
-                schema.primKey.name,
-                ...schema.indexes.map(idx => idx.name)
-            ];
+            // Keep full object payload; Dexie stores non-indexed properties as well.
             const insertRecords = records.map((record) => {
-                const objectFromSchema = {};
-                validFields.forEach((field) => {
-                    if (field) {
-                        objectFromSchema[field] = record[field] ?? null;
-                    }
-                });
-                return objectFromSchema;
+                const payload = { ...(record || {}) };
+                if (payload.id === undefined || payload.id === null || payload.id === '') {
+                    delete payload.id;
+                }
+                return payload;
             });
             console.log(`createTableRecords: Bulk putting ${insertRecords.length} records into ${tableName}`);
             return from(tableInstance.bulkPut(insertRecords)).pipe(map(() => insertRecords));
@@ -6229,17 +6050,14 @@ class DatabaseManagerService extends DbService {
     updateTableRecords(table, records) {
         const tableName = this.cleanTableName(table);
         return this.getDatabaseTable(tableName).pipe(switchMap((tableData) => {
-            return this.getDatabaseTableSchema(tableName).pipe(switchMap((schema) => {
-                const insertRecords = records.map((record) => {
-                    const objectFromSchema = {};
-                    schema.forEach((field) => {
-                        const data = record[field] ?? null;
-                        objectFromSchema[field] = data;
-                    });
-                    return objectFromSchema;
-                });
-                return from(tableData.bulkPut(insertRecords)).pipe(map(() => insertRecords));
-            }));
+            const insertRecords = records.map((record) => {
+                const payload = { ...(record || {}) };
+                if (payload.id === undefined || payload.id === null || payload.id === '') {
+                    delete payload.id;
+                }
+                return payload;
+            });
+            return from(tableData.bulkPut(insertRecords)).pipe(map(() => insertRecords));
         }));
     }
     deleteTableRecord(table, id) {
@@ -6345,8 +6163,6 @@ 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
@@ -6359,10 +6175,17 @@ class HTTPManagerStateService extends ComponentStore {
         this.hasDatabase = false;
         this.streamedResponse = [];
         this.shouldRetry = true;
+        this.volatileHeaders = new Set([
+            'authorization',
+            'x-request-id',
+            'x-correlation-id',
+            'x-trace-id',
+            'x-amzn-trace-id',
+            'date',
+            'if-none-match'
+        ]);
         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());
@@ -6630,22 +6453,25 @@ class HTTPManagerStateService extends ComponentStore {
             }
         }))))));
         this.initDBStorage = this.effect((trigger$) => trigger$.pipe(tap(() => {
+            console.log('[initDBStorage effect] Triggered, checking conditions:', {
+                dataType: this.dataType,
+                isARRAY: this.dataType === DataType.ARRAY,
+                hasAdapter: !!this.apiOptions?.adapter,
+                hasTable: !!this.databaseOptions?.table,
+                tableValue: this.databaseOptions?.table
+            });
             if (this.dataType !== DataType.ARRAY)
                 console.warn('Database storage requires dataType to be ARRAY');
             if (!this.apiOptions.adapter)
-                console.warn('Database storage requires an adapter to define the data shape');
+                console.warn('Database storage adapter missing, using minimal or inferred schema');
             if (this.databaseOptions && this.databaseOptions?.table === '')
                 console.warn('Database storage requires a table name');
-        }), filter(() => this.dataType === DataType.ARRAY && !!this.apiOptions.adapter && !!this.databaseOptions?.table), switchMap(() => {
-            const sampleData = this.apiOptions.adapter?.({}) || {};
-            const schemaKeys = Object.keys(sampleData).filter(key => sampleData[key] !== undefined);
-            let schema = '++id';
-            if (schemaKeys.length > 0) {
-                const otherKeys = schemaKeys.filter(k => k !== 'id');
-                if (otherKeys.length > 0) {
-                    schema += ', ' + otherKeys.join(', ');
-                }
-            }
+        }), filter(() => {
+            const shouldProceed = this.dataType === DataType.ARRAY && !!this.databaseOptions?.table;
+            console.log('[initDBStorage effect] Filter result:', shouldProceed);
+            return shouldProceed;
+        }), switchMap(() => {
+            const schema = this.buildSchemaFromAdapter();
             const tableDef = TableSchemaDef.adapt({
                 table: this.databaseOptions?.table,
                 schema: schema
@@ -6734,6 +6560,7 @@ class HTTPManagerStateService extends ComponentStore {
             }
         }), concatMap(() => {
             if (this.hasDatabase && this.databaseOptions?.table) {
+                this.clearRequestCacheMetadata(this.databaseOptions.table);
                 const currentData = this.get()?.data;
                 const idsToDelete = Array.isArray(currentData) ? currentData.map((r) => r.id) : [];
                 if (idsToDelete.length > 0) {
@@ -6748,35 +6575,86 @@ class HTTPManagerStateService extends ComponentStore {
         this.fetchRecords = (options) => this.effect(() => of(RequestOptions.adapt(options)).pipe(switchMap(() => {
             this.streamedResponse = [];
             const requestOptions = this.updateRequestOptions(options?.headers);
+            const effectiveParams = this.getEffectiveParams(options?.path);
+            const requestSignature = this.buildRequestSignature('GET', requestOptions, effectiveParams);
             const fetchFromAPI = () => {
-                return this.httpManagerService.getRequest(requestOptions, options?.path).pipe(tap((data) => {
-                    data = (!data) ? (this.dataType === DataType.ARRAY) ? [] : {} : data;
+                return this.httpManagerService.getRequest(requestOptions, effectiveParams).pipe(tap((data) => {
+                    // Extract array from paginated response if needed
+                    const arrayData = (data?.results && Array.isArray(data.results)) ? data.results : data;
+                    data = (!arrayData) ? (this.dataType === DataType.ARRAY) ? [] : {} : arrayData;
                     this.setData$(data);
                 }), concatMap((data) => {
-                    if (this.hasDatabase && this.databaseOptions?.table && Array.isArray(data) && data.length > 0) {
+                    // Extract array from paginated response for database storage
+                    const dbData = (data?.results && Array.isArray(data.results)) ? data.results : data;
+                    if (this.hasDatabase && this.databaseOptions?.table && Array.isArray(dbData) && dbData.length > 0) {
+                        const tableName = this.databaseOptions.table;
                         this.localStorageManagerService.updateStore({
-                            name: this.databaseOptions.table,
+                            name: tableName,
                             data: { ...this.databaseOptions, ...{ expires: this.utils.expires(this.databaseOptions.expiresIn) } }
                         });
-                        return this.dbManagerService.createTableRecords(this.databaseOptions.table, data);
+                        const schema = this.buildSchemaFromSample(dbData[0]);
+                        const tableDef = TableSchemaDef.adapt({ table: tableName, schema });
+                        const schemaSignature = this.buildSchemaSignature(schema);
+                        // Always ensure table exists immediately before writing to avoid stale schema/store races.
+                        return this.localStorageManagerService.store$(tableName).pipe(take(1), switchMap((storeData) => {
+                            const storedSchemaSignature = this.getStoredSchemaSignature(storeData);
+                            const schemaChanged = !!storedSchemaSignature && storedSchemaSignature !== schemaSignature;
+                            const ensureTable$ = schemaChanged
+                                ? this.dbManagerService.clearTable(tableName).pipe(switchMap(() => this.dbManagerService.createDatabaseTable(tableDef)))
+                                : this.dbManagerService.createDatabaseTable(tableDef);
+                            return ensureTable$.pipe(switchMap((created) => {
+                                if (!created) {
+                                    console.warn('[DB STORAGE] Table create/open not ready, skipping DB write for this payload:', { table: tableName });
+                                    return of(data);
+                                }
+                                return this.dbManagerService.createTableRecords(tableName, dbData).pipe(tap(() => this.saveRequestCacheMetadata(tableName, 'GET', requestSignature, schemaSignature, options)));
+                            }));
+                        }), catchError((error) => {
+                            console.error('[DB STORAGE] Failed to ensure table and write records:', { table: tableName, schema, error });
+                            return of(data);
+                        }));
                     }
                     return of(data);
                 }));
             };
+            console.log('[DB STORAGE] Checking database storage:', {
+                hasDatabase: this.hasDatabase,
+                table: this.databaseOptions?.table,
+                databaseOptions: this.databaseOptions
+            });
             if (this.hasDatabase && this.databaseOptions?.table) {
                 return this.dbManagerService.databaseExists().pipe(switchMap((dbExists) => {
                     if (!dbExists) {
                         const initObs = this.initDBStorageAsync();
-                        return initObs.pipe(switchMap(() => fetchFromAPI()));
+                        return initObs.pipe(switchMap(() => fetchFromAPI()), catchError((error) => {
+                            console.warn('[DB STORAGE] initDBStorageAsync failed when DB did not exist, continuing with API:', error);
+                            return fetchFromAPI();
+                        }));
                     }
                     return this.dbManagerService.hasDatabaseTable(this.databaseOptions.table).pipe(switchMap((tableExists) => {
                         if (!tableExists) {
                             const initObs = this.initDBStorageAsync();
-                            return initObs.pipe(switchMap(() => fetchFromAPI()));
+                            return initObs.pipe(switchMap(() => fetchFromAPI()), catchError((error) => {
+                                console.warn('[DB STORAGE] initDBStorageAsync failed when table missing, continuing with API:', error);
+                                return fetchFromAPI();
+                            }));
                         }
                         return this.localStorageManagerService.store$(this.databaseOptions.table).pipe(take(1), switchMap((storeData) => {
+                            const cached = this.getRequestCacheMetadata(storeData, 'GET');
+                            const sameSignature = !!cached?.signature && cached.signature === requestSignature;
+                            const forceRefresh = !!options?.forceRefresh;
+                            const storedSchemaSignature = this.getStoredSchemaSignature(storeData);
                             const expires = storeData?.expires || 0;
                             const hasExpired = expires > 0 && this.utils.hasExpired(expires);
+                            if (!forceRefresh && sameSignature && !hasExpired) {
+                                return this.dbManagerService.getTableRecords(this.databaseOptions.table).pipe(switchMap((dbData) => {
+                                    if (Array.isArray(dbData) && dbData.length > 0) {
+                                        this.setData$(dbData);
+                                        return of(dbData);
+                                    }
+                                    return fetchFromAPI();
+                                }));
+                            }
                             if (hasExpired) {
                                 return this.dbManagerService.clearTable(this.databaseOptions.table).pipe(switchMap(() => fetchFromAPI()), tap(() => {
                                     this.localStorageManagerService.updateStore({
@@ -6785,12 +6663,27 @@ class HTTPManagerStateService extends ComponentStore {
                                     });
                                 }));
                             }
+                            const expectedSchema = this.buildSchemaFromAdapter();
+                            const expectedSchemaSignature = this.buildSchemaSignature(expectedSchema);
+                            if (storedSchemaSignature && storedSchemaSignature !== expectedSchemaSignature) {
+                                const tableDef = TableSchemaDef.adapt({ table: this.databaseOptions.table, schema: expectedSchema });
+                                return this.dbManagerService.clearTable(this.databaseOptions.table).pipe(switchMap(() => this.dbManagerService.createDatabaseTable(tableDef)), switchMap(() => fetchFromAPI()));
+                            }
                             return this.dbManagerService.getTableRecords(this.databaseOptions.table).pipe(switchMap((dbData) => {
                                 if (Array.isArray(dbData) && dbData.length > 0) {
                                     this.setData$(dbData);
                                     return of(dbData);
                                 }
                                 return fetchFromAPI();
+                            }), catchError((error) => {
+                                const tableName = this.databaseOptions.table;
+                                console.warn('[DB STORAGE] getTableRecords failed, recreating table and falling back to API:', { table: tableName, error });
+                                const schema = this.buildSchemaFromAdapter();
+                                const tableDef = TableSchemaDef.adapt({ table: tableName, schema });
+                                return this.dbManagerService.createDatabaseTable(tableDef).pipe(switchMap(() => fetchFromAPI()), catchError((recreateError) => {
+                                    console.error('[DB STORAGE] Failed to recreate table after read error, continuing with API only:', recreateError);
+                                    return fetchFromAPI();
+                                }));
                             }));
                         }));
                     }));
@@ -6914,7 +6807,7 @@ class HTTPManagerStateService extends ComponentStore {
                 if (res.length > 0)
                     this.setData$(res);
                 this.streamedResponse = res;
-            }), scan((acc, res) => {
+            }), concatMap((res) => this.persistStreamDataToDb(res, options)), scan((acc, res) => {
                 const previous = acc.current;
                 const current = res;
                 return { previous, current };
@@ -6928,36 +6821,79 @@ class HTTPManagerStateService extends ComponentStore {
                 }
             }));
         })));
-        this.fetchStream = (options) => this.effect(() => of(options).pipe(filter(() => !this.activeStream$.value), // Block if stream already active
-        tap(() => {
+        this.fetchStream = (options) => this.effect(() => of(options).pipe(tap(() => {
             console.log('[DEBUG] fetchStream called');
             this.httpManagerService.isPending.next(true);
-            this.activeStream$.next(true); // Mark stream as active
-        }), concatMap((options) => {
+        }), switchMap((options) => {
             const requestOptions = this.updateRequestOptions(options?.headers);
             requestOptions.stream = true;
+            const effectiveParams = this.getEffectiveParams(options?.path);
+            const requestSignature = this.buildRequestSignature('STREAM', requestOptions, effectiveParams);
             console.log('[DEBUG] Making streaming request:', requestOptions);
-            return this.httpManagerService.getRequest(requestOptions, options?.path)
+            if (this.hasDatabase && this.databaseOptions?.table && !options?.forceRefresh) {
+                return this.localStorageManagerService.store$(this.databaseOptions.table).pipe(take(1), switchMap((storeData) => {
+                    const cached = this.getRequestCacheMetadata(storeData, 'STREAM');
+                    const sameSignature = !!cached?.signature && cached.signature === requestSignature;
+                    const expires = storeData?.expires || 0;
+                    const hasExpired = expires > 0 && this.utils.hasExpired(expires);
+                    if (sameSignature && !hasExpired) {
+                        return this.dbManagerService.getTableRecords(this.databaseOptions.table).pipe(switchMap((dbData) => {
+                            if (Array.isArray(dbData) && dbData.length > 0) {
+                                return of({ data: dbData, fromCache: true });
+                            }
+                            return this.httpManagerService.getRequest(requestOptions, effectiveParams).pipe(map((apiData) => ({ data: apiData, fromCache: false })));
+                        }));
+                    }
+                    return this.httpManagerService.getRequest(requestOptions, effectiveParams).pipe(map((apiData) => ({ data: apiData, fromCache: false })));
+                })).pipe(tap((packet) => {
+                    const res = packet?.data;
+                    console.log('[DEBUG] Streaming response received:', res);
+                    if (res && res.length > 0) {
+                        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);
+                    }
+                    // Reset pending once we have a response packet (cache or network)
+                    this.httpManagerService.isPending.next(false);
+                }), concatMap((packet) => {
+                    if (packet?.fromCache) {
+                        return of(packet?.data);
+                    }
+                    return this.persistStreamDataToDb(packet?.data, options);
+                }), map((res) => {
+                    console.log('[DEBUG] Returning data to subscribers:', res);
+                    return res;
+                }), catchError((error) => {
+                    console.error('[DEBUG] Streaming error:', error);
+                    this.httpManagerService.isPending.next(false);
+                    return of([]);
+                }));
+            }
+            return this.httpManagerService.getRequest(requestOptions, effectiveParams)
                 .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)
+                // Reset pending once we have a response packet
+                this.httpManagerService.isPending.next(false);
+            }), concatMap((res) => this.persistStreamDataToDb(res, options)), map((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;
@@ -6977,7 +6913,11 @@ class HTTPManagerStateService extends ComponentStore {
                         encrypted: false,
                     })
                 });
-                this.initDBStorage();
+                // Use initDBStorageAsync directly - the effect initDBStorage requires subscription
+                this.initDBStorageAsync().subscribe({
+                    next: () => console.log('[Constructor] Database storage initialized'),
+                    error: (err) => console.error('[Constructor] Database storage initialization failed:', err)
+                });
             }
         }
         catch (error) {
@@ -7031,8 +6971,24 @@ class HTTPManagerStateService extends ComponentStore {
         this.dataType = (dataType) ? dataType : DataType.ARRAY;
         // Only update database options if a database parameter is explicitly provided
         if (database !== undefined) {
+            console.log('[setApiRequestOptions] Database config:', {
+                database,
+                hasTable: !!database?.table,
+                tableValue: database?.table
+            });
             this.hasDatabase = (database?.table) ? true : false;
-            this.databaseOptions = (this.hasDatabase) ? DatabaseStorage.adapt(database) : undefined;
+            const adapted = DatabaseStorage.adapt(database);
+            console.log('[setApiRequestOptions] DatabaseStorage.adapt result:', adapted);
+            this.databaseOptions = (this.hasDatabase) ? adapted : undefined;
+            // Trigger database table creation if table is configured
+            if (this.hasDatabase && this.databaseOptions?.table) {
+                console.log('[setApiRequestOptions] Initializing database storage for table:', this.databaseOptions.table);
+                // Use initDBStorageAsync directly instead of the effect - effects need subscription to run
+                this.initDBStorageAsync().subscribe({
+                    next: () => console.log('[setApiRequestOptions] Database storage initialized successfully'),
+                    error: (err) => console.error('[setApiRequestOptions] Database storage initialization failed:', err)
+                });
+            }
         }
         if (this.apiOptions.ws && this.apiOptions.ws.id !== '') {
             // Auto-prefix channel ID for private state manager channels
@@ -7154,11 +7110,20 @@ class HTTPManagerStateService extends ComponentStore {
         this.setData$(data);
     }
     updateArrayState(currentData, newData) {
+        // For non-streaming requests (GET), REPLACE data entirely
+        // For streaming requests, MERGE with existing data incrementally
+        if (this.streamedResponse.length === 0) {
+            // GET request: return new data as-is (replace)
+            return newData;
+        }
+        // Streaming: merge with existing data
         const filterCurrentData = () => {
             const ids = this.streamedResponse.map((obj) => obj.id);
             return currentData.filter(obj => (obj.id) ? ids.includes(obj.id) : obj);
         };
-        const filteredCurrentData = (this.httpManagerService.isPending.value) ? currentData : filterCurrentData();
+        const filteredCurrentData = (this.httpManagerService.isPending.value)
+            ? currentData
+            : filterCurrentData();
         const updatedData = filteredCurrentData.map(item => {
             const newItem = newData.find(newItem => {
                 const hasId = (newItem?.id && item?.id) ? true : false;
@@ -7175,32 +7140,92 @@ class HTTPManagerStateService extends ComponentStore {
         return [...updatedData, ...addedData];
     }
     initDBStorageAsync() {
+        console.log('[initDBStorageAsync] Starting initialization:', {
+            dataType: this.dataType,
+            hasAdapter: !!this.apiOptions?.adapter,
+            table: this.databaseOptions?.table,
+            databaseOptions: this.databaseOptions
+        });
         if (this.dataType !== DataType.ARRAY) {
             console.warn('Database storage requires dataType to be ARRAY');
             return of(null);
         }
         if (!this.apiOptions.adapter) {
-            console.warn('Database storage requires an adapter to define the data shape');
-            return of(null);
+            console.warn('Database storage adapter missing, using minimal or inferred schema');
         }
         if (!this.databaseOptions?.table) {
             console.warn('Database storage requires a table name');
             return of(null);
         }
+        const schema = this.buildSchemaFromAdapter();
+        const tableDef = TableSchemaDef.adapt({
+            table: this.databaseOptions?.table,
+            schema: schema
+        });
+        return this.dbManagerService.createDatabaseTable(tableDef).pipe(tap((created) => {
+            if (created && this.databaseOptions?.table) {
+                this.saveSchemaSignature(this.databaseOptions.table, this.buildSchemaSignature(schema));
+            }
+        }));
+    }
+    buildSchemaFromAdapter() {
         const sampleData = this.apiOptions.adapter?.({}) || {};
-        const schemaKeys = Object.keys(sampleData).filter(key => sampleData[key] !== undefined);
+        return this.buildSchemaFromSample(sampleData);
+    }
+    buildSchemaFromSample(sampleData) {
+        const schemaKeys = Object.keys(sampleData || {}).filter(key => sampleData[key] !== undefined);
         let schema = '++id';
         if (schemaKeys.length > 0) {
-            const otherKeys = schemaKeys.filter(k => k !== 'id');
+            const otherKeys = schemaKeys.filter((k) => k !== 'id');
             if (otherKeys.length > 0) {
                 schema += ', ' + otherKeys.join(', ');
             }
         }
-        const tableDef = TableSchemaDef.adapt({
-            table: this.databaseOptions?.table,
-            schema: schema
-        });
-        return this.dbManagerService.createDatabaseTable(tableDef);
+        return schema;
+    }
+    persistStreamDataToDb(payload, streamOptions) {
+        if (!this.hasDatabase || !this.databaseOptions?.table) {
+            return of(payload);
+        }
+        const dbData = (payload?.results && Array.isArray(payload.results))
+            ? payload.results
+            : Array.isArray(payload)
+                ? payload
+                : payload
+                    ? [payload]
+                    : [];
+        if (dbData.length === 0) {
+            return of(payload);
+        }
+        const tableName = this.databaseOptions.table;
+        const requestOptions = this.updateRequestOptions(streamOptions?.headers);
+        requestOptions.stream = true;
+        const effectiveParams = this.getEffectiveParams(streamOptions?.path);
+        const requestSignature = this.buildRequestSignature('STREAM', requestOptions, effectiveParams);
+        this.localStorageManagerService.updateStore({
+            name: tableName,
+            data: { ...this.databaseOptions, ...{ expires: this.utils.expires(this.databaseOptions.expiresIn) } }
+        });
+        const schema = this.buildSchemaFromSample(dbData[0]);
+        const schemaSignature = this.buildSchemaSignature(schema);
+        const tableDef = TableSchemaDef.adapt({ table: tableName, schema });
+        return this.localStorageManagerService.store$(tableName).pipe(take(1), switchMap((storeData) => {
+            const storedSchemaSignature = this.getStoredSchemaSignature(storeData);
+            const schemaChanged = !!storedSchemaSignature && storedSchemaSignature !== schemaSignature;
+            const ensureTable$ = schemaChanged
+                ? this.dbManagerService.clearTable(tableName).pipe(switchMap(() => this.dbManagerService.createDatabaseTable(tableDef)))
+                : this.dbManagerService.createDatabaseTable(tableDef);
+            return ensureTable$.pipe(switchMap((created) => {
+                if (!created) {
+                    console.warn('[DB STORAGE] Stream table create/open not ready, skipping DB write for this chunk:', { table: tableName });
+                    return of(payload);
+                }
+                return this.dbManagerService.createTableRecords(tableName, dbData).pipe(tap(() => this.saveRequestCacheMetadata(tableName, 'STREAM', requestSignature, schemaSignature, streamOptions)), map(() => payload));
+            }));
+        }), map(() => payload), catchError((error) => {
+            console.error('[DB STORAGE] Failed to persist streaming payload:', { table: tableName, schema, error });
+            return of(payload);
+        }));
     }
     // WEBSOCKET COMMUNICATION (STATE MANAGER)
     wsCommunication(method, path) {
@@ -7496,6 +7521,7 @@ class HTTPManagerStateService extends ComponentStore {
         const tableName = this.databaseOptions.table;
         this.dbManagerService.clearTable(tableName).subscribe({
             next: () => {
+                this.clearRequestCacheMetadata(tableName);
                 if (this.dataType === DataType.ARRAY) {
                     this.setData$([]);
                 }
@@ -7518,6 +7544,115 @@ class HTTPManagerStateService extends ComponentStore {
             : { ...options.headers };
         return options;
     }
+    normalizeObject(value) {
+        if (Array.isArray(value)) {
+            return value.map((item) => this.normalizeObject(item));
+        }
+        if (value && typeof value === 'object') {
+            return Object.keys(value)
+                .sort()
+                .reduce((acc, key) => {
+                acc[key] = this.normalizeObject(value[key]);
+                return acc;
+            }, {});
+        }
+        return value;
+    }
+    filterHeaders(headers) {
+        const source = headers || {};
+        return Object.keys(source).reduce((acc, key) => {
+            if (!this.volatileHeaders.has(key.toLowerCase())) {
+                acc[key] = source[key];
+            }
+            return acc;
+        }, {});
+    }
+    resolvePath(params) {
+        const basePath = Array.isArray(this.apiOptions.path) ? this.apiOptions.path : [];
+        const effective = this.getEffectiveParams(params);
+        return effective ? [...basePath, ...effective] : [...basePath];
+    }
+    getEffectiveParams(params) {
+        if (!Array.isArray(params) || params.length === 0) {
+            return undefined;
+        }
+        const basePath = Array.isArray(this.apiOptions.path) ? this.apiOptions.path : [];
+        if (basePath.length !== params.length) {
+            return params;
+        }
+        const normalizePart = (value) => {
+            if (value && typeof value === 'object') {
+                return JSON.stringify(this.normalizeObject(value));
+            }
+            return String(value);
+        };
+        const samePath = params.every((part, index) => normalizePart(part) === normalizePart(basePath[index]));
+        return samePath ? undefined : params;
+    }
+    buildRequestSignature(method, requestOptions, params) {
+        const signaturePayload = {
+            method,
+            server: requestOptions.server,
+            path: this.resolvePath(params),
+            headers: this.filterHeaders(requestOptions.headers),
+            stream: !!requestOptions.stream,
+            streamType: requestOptions.streamType || null
+        };
+        return JSON.stringify(this.normalizeObject(signaturePayload));
+    }
+    buildSchemaSignature(schema) {
+        return JSON.stringify(this.normalizeObject(schema.split(',').map((part) => part.trim()).filter(Boolean)));
+    }
+    getRequestCacheMetadata(storeData, type) {
+        return storeData?.requestCache?.[type] || null;
+    }
+    getStoredSchemaSignature(storeData) {
+        return storeData?.schemaSignature || null;
+    }
+    saveSchemaSignature(tableName, schemaSignature) {
+        this.localStorageManagerService.store$(tableName).pipe(take(1), tap((storeData) => {
+            this.localStorageManagerService.updateStore({
+                name: tableName,
+                data: {
+                    ...(storeData || {}),
+                    schemaSignature,
+                }
+            });
+        })).subscribe();
+    }
+    saveRequestCacheMetadata(tableName, type, signature, schemaSignature, options) {
+        this.localStorageManagerService.store$(tableName).pipe(take(1), tap((storeData) => {
+            const currentCache = storeData?.requestCache || {};
+            this.localStorageManagerService.updateStore({
+                name: tableName,
+                data: {
+                    ...(storeData || {}),
+                    schemaSignature: schemaSignature || storeData?.schemaSignature || null,
+                    requestCache: {
+                        ...currentCache,
+                        [type]: {
+                            signature,
+                            savedAt: Date.now(),
+                            path: this.resolvePath(options?.path),
+                            headers: this.filterHeaders(options?.headers)
+                        }
+                    }
+                }
+            });
+        })).subscribe();
+    }
+    clearRequestCacheMetadata(tableName) {
+        this.localStorageManagerService.store$(tableName).pipe(take(1), tap((storeData) => {
+            if (!storeData)
+                return;
+            const updated = { ...(storeData || {}) };
+            delete updated.requestCache;
+            this.localStorageManagerService.updateStore({
+                name: tableName,
+                data: updated
+            });
+        })).subscribe();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HTTPManagerStateService, deps: [{ token: API_OPTS }, { token: "dataType" }, { token: DatabaseStorage }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HTTPManagerStateService }); }
 }
@@ -8854,13 +8989,13 @@ class StateManagerDemoService extends HTTPManagerStateService {
         const sampleOptions = RequestOptions.adapt({ path: [data.id] });
         this.deleteRecord(sampleOptions);
     }
-    streamRequest() {
+    streamRequest(options) {
         console.log('[DEMO SERVICE] streamRequest called');
         const headers = {
             auth: "sample-auth-token"
         };
         console.log('[DEMO SERVICE] Calling fetchStream with headers:', headers);
-        this.fetchStream();
+        this.fetchStream(options);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StateManagerDemoService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StateManagerDemoService }); }
@@ -8948,7 +9083,6 @@ 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 = [
@@ -8961,7 +9095,6 @@ 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('');
@@ -9109,11 +9242,23 @@ class RequestManagerStateDemoComponent {
         return { apiOptions: apiOptions, path: pathReq };
     }
     onSetStateOptions() {
-        if (!this.isValid)
+        const dbValue = this.database;
+        console.log('[onSetStateOptions] Called, checking form values:', {
+            isValid: this.isValid,
+            database: dbValue,
+            hasTable: !!dbValue?.table,
+            tableValue: dbValue?.table,
+            dataType: this.dataType
+        });
+        if (!this.isValid) {
+            console.log('[onSetStateOptions] Form invalid, aborting');
             return;
+        }
         const reqParams = this.compileRequest();
-        const db = DatabaseStorage.adapt(this.database);
+        const db = DatabaseStorage.adapt(dbValue);
+        console.log('[onSetStateOptions] DatabaseStorage.adapt result:', db);
         const type = this.dataType === "ARRAY" ? DataType.ARRAY : DataType.OBJECT;
+        console.log('[onSetStateOptions] Calling setAPIOptions with:', { db, type, hasTable: !!db?.table });
         this.stateManagerDemoService.setAPIOptions(reqParams.apiOptions, type, db);
         this.requestForm.markAsPristine();
     }
@@ -9148,8 +9293,13 @@ class RequestManagerStateDemoComponent {
         reqParams.apiOptions.stream = true;
         reqParams.apiOptions.streamType = this.streamType;
         this.requestType = 'STREAM';
+        const streamOptions = RequestOptions.adapt({
+            path: reqParams.path,
+            headers: reqParams.apiOptions.headers,
+            forceRefresh: false,
+        });
         console.log('[COMPONENT] Calling streamRequest...');
-        this.stateManagerDemoService.streamRequest();
+        this.stateManagerDemoService.streamRequest(streamOptions);
     }
     errorHandling(err, type) {
         console.log(err, type);
@@ -9173,11 +9323,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) && (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" }] }); }
+    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" }] }); }
 }
 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) && (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"] }]
+            args: [{ selector: 'app-request-manager-state-demo', providers: [StateManagerDemoService, HTTPManagerService], standalone: false, template: "<div style=\"margin: 2rem;\">\n\n  <h2>\n    HTTP Request State Manager\n  </h2>\n\n  <div [formGroup]=\"requestForm\" style=\"margin-top: 2rem;\">\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>State Data Type</mat-label>\n        <mat-select formControlName=\"datatype\">\n          <mat-option value=\"ARRAY\">Array</mat-option>\n          <mat-option value=\"OBJECT\">Object</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Adapter (Model)</mat-label>\n        <mat-select formControlName=\"adapter\" #adapterSelect>\n          <mat-option>None</mat-option>\n          @for (adapter of sampleAdaptors; track adapter) {\n            <mat-option [value]=\"adapter.value\">\n              {{adapter.label}}\n            </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Mapper (Model)</mat-label>\n        <mat-select formControlName=\"mapper\" #mapperSelect>\n          <mat-option>None</mat-option>\n          @for (mapper of sampleMappers; track mapper) {\n            <mat-option [value]=\"mapper.value\">\n              {{mapper.label}}\n            </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n    </div>\n\n    @if (adapterSelect.value || mapperSelect.value) {\n      <div style=\"display: flex; margin-bottom: 2rem;\">\n        <div style=\"flex:1\" class=\"box\">\n          <h3>Adapter (Incoming)</h3>\n          @if (adapterSelect.value) {\n            <div>\n              {{ props(adapterSelect.value) | json }}\n            </div>\n          } @else {\n            No Transformation\n          }\n        </div>\n        <div style=\"flex:1\" class=\"box\">\n          <h3>Mapper (Outgoing)</h3>\n          @if (mapperSelect.value) {\n            <div>\n              {{ props(mapperSelect.value) | json }}\n            </div>\n          } @else {\n            No Transformation\n          }\n        </div>\n      </div>\n    }\n\n    <div>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>RestPath (/ delimited)</mat-label>\n        <input matInput placeholder=\"clients/list\" formControlName=\"path\">\n      </mat-form-field>\n    </div>\n    <div>\n      <div formArrayName=\"headers\">\n        @for (task of headers.controls; track task; let i = $index) {\n          <div [formGroupName]=\"i\">\n            <div style=\"display: flex; gap: .5rem\">\n              <mat-form-field appearance=\"outline\">\n                <mat-label>Key</mat-label>\n                <input matInput placeholder=\"authentication\" formControlName=\"key\">\n              </mat-form-field>\n              <mat-form-field appearance=\"outline\" style=\"flex:1\">\n                <mat-label>Value</mat-label>\n                <input matInput placeholder=\"sample\" formControlName=\"value\">\n              </mat-form-field>\n              <div style=\"margin-top: .5rem;\">\n                <button mat-icon-button (click)=\"removeHeader(i)\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n      <button mat-stroked-button (click)=\"addHeader()\">Add Header</button>\n    </div>\n    <div style=\"margin-top: 2rem; display: flex; flex-direction:column; gap: 1rem;\">\n      <div>\n        <mat-slide-toggle #failedState>Retry on Failed</mat-slide-toggle>\n        @if (failedState.checked) {\n          <div style=\"display: flex; gap: .5rem; margin-top: 1rem;\" formGroupName=\"retry\">\n            <mat-form-field appearance=\"outline\">\n              <mat-label>#of Times</mat-label>\n              <input matInput placeholder=\"3\" formControlName=\"times\" value=\"3\">\n            </mat-form-field>\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Delay Until Next</mat-label>\n              <input matInput placeholder=\"3\" formControlName=\"delay\" value=\"3\">\n            </mat-form-field>\n          </div>\n        }\n      </div>\n      <div>\n        <mat-slide-toggle #pollingState>Polling</mat-slide-toggle>\n        @if (pollingState.checked) {\n          <div>\n            <mat-form-field appearance=\"outline\" style=\"margin-top: 1rem\">\n              <mat-label>#of Seconds</mat-label>\n              <input matInput placeholder=\"3\" formControlName=\"polling\" value=\"3\">\n            </mat-form-field>\n          </div>\n        }\n      </div>\n      <div>\n        <mat-slide-toggle #DBState>Database Storage</mat-slide-toggle>\n        @if (DBState.checked) {\n          <div style=\"display: flex; gap: .5rem; margin-top: 1rem\" formGroupName=\"database\">\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Table Name</mat-label>\n              <input matInput placeholder=\"table\" formControlName=\"table\" value=\"\">\n            </mat-form-field>\n            <div>\n              <mat-form-field appearance=\"outline\">\n                <mat-label>Expires In</mat-label>\n                <mat-select formControlName=\"expiresIn\">\n                  <mat-option value=\"1m\">One Minute</mat-option>\n                  <mat-option value=\"1h\">One Hour</mat-option>\n                  <mat-option value=\"1d\">One Day</mat-option>\n                </mat-select>\n              </mat-form-field>\n            </div>\n          </div>\n        }\n      </div>\n      <div style=\"margin-top: 1rem; display: flex;\">\n        <span style=\"flex:1\"></span>\n        <button mat-stroked-button (click)=\"onSetStateOptions()\" [disabled]=\"!hasChanged\">\n          Set API Request Options\n        </button>\n      </div>\n      <div>\n        @if ((error$ | async); as error) {\n          <mat-error>\n            {{ error }}\n          </mat-error>\n        }\n      </div>\n    </div>\n  </div>\n\n  <div style=\"margin-bottom: 1rem; margin-top: 2rem;\">\n    @if ((isPending$ | async)) {\n      <mat-progress-bar mode=\"indeterminate\"\n      ></mat-progress-bar>\n    }\n    @if (pollingState.checked) {\n      <div>\n        @if (!(isPending$ | async) && (this.countdown$ | async) || -1 > 0) {\n          <mat-progress-bar mode=\"determinate\"\n            [value]=\"(this.countdown$ | async)\"\n          ></mat-progress-bar>\n        }\n      </div>\n    }\n\n  </div>\n\n  @if ((GET$ | async); as data) {\n    <div style=\"margin-top: 2rem\">\n      <div style=\"display: flex;\">\n        <h2 style=\"flex:1;\">CURRENT STATE ({{ dataType }})</h2>\n      </div>\n      @if (data.length > 1) {\n        <div>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Records</mat-label>\n            <mat-select [formControl]=\"selectedRecord\" [disabled]=\"data === null && data?.length === 0\">\n              <mat-option [value]=\"\">None</mat-option>\n              @for (item of data; track item) {\n                <mat-option [value]=\"item\">\n                  {{item.name || (item.first_name) | titlecase}}\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n      }\n      @if ((dataObservable$ | async); as dataRecord) {\n        <div>\n          @if ((selectedRecord$ | async); as record) {\n            <div>\n              {{ record | json }}\n            </div>\n          } @else {\n            No Record Selected from State\n          }\n        </div>\n      }\n      <div style=\"margin-top: 1rem;\">\n        @if (data !== null && data?.length > 0) {\n          <span>\n            State contains a Total of {{ data.length }} Records\n          </span>\n        } @else {\n          No Records\n        }\n        <div style=\"display: flex; gap: .5rem; text-align: end; justify-content: flex-end;\">\n          <button class=\"btn\" mat-stroked-button (click)=\"onClearRecords()\">Clear</button>\n        </div>\n      </div>\n    </div>\n  }\n\n\n\n\n  <div style=\"margin-top: 1rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">GET Request ({{ dataType }})</h2>\n      <div>\n        <button mat-raised-button (click)=\"onGetRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((GET_error$ | async); as get_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ get_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(GET$ | async) | jsonv\"></div> -->\n      @if ((GET$ | async); as getData) {\n        <div>{{ getData | json }}</div>\n      }\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">POST Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onCreateRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((POST_error$ | async); as post_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ post_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(POST$ | async) | jsonv\"></div> -->\n      @if ((POST$ | async); as postData) {\n        <div>{{ postData | json }}</div>\n      }\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">PUT Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onUpdateRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((PUT_error$ | async); as put_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ put_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(PUT$ | async) | jsonv\"></div> -->\n      @if ((PUT$ | async); as putData) {\n        <div>{{ putData | json }}</div>\n      }\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">DELETE Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onDeleteRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((DELETE_error$ | async); as delete_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ delete_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(DELETE$ | async) | jsonv\"></div> -->\n      @if ((DELETE$ | async); as deleteData) {\n        <div>{{ deleteData | json }}</div>\n      }\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">Streaming GET Request</h2>\n        <div style=\"display: flex; gap: 1rem; align-items: center;\">\n          <div style=\"display: flex; gap: 1rem; align-items: center;\">\n            {{ streamType }}\n            <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n              <mat-icon>data_usage</mat-icon>\n            </button>\n          </div>\n          <mat-menu #menu=\"matMenu\">\n            <button mat-menu-item *ngFor=\"let item of streamTypes\" (click)=\"onStreamType(item.id)\">{{ item.value }}</button>\n          </mat-menu>\n        <button mat-raised-button (click)=\"onStreamRequest()\" class=\"btn\" [disabled]=\"hasChanged\">Request</button>\n      </div>\n    </div>\n\n    @if ((STREAM_error$ | async); as stream_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ stream_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      @if ((STREAM$ | async); as data) {\n        <div class=\"container\">\n          <table mat-table [dataSource]=\"data\" class=\"mat-elevation-z8\">\n\n            <!-- Dynamic columns -->\n            <ng-container *ngFor=\"let column of displayedColumns\" [matColumnDef]=\"column\">\n              <th mat-header-cell *matHeaderCellDef> {{ column | titlecase }} </th>\n              <td mat-cell *matCellDef=\"let element\">\n                @if (isObject(element[column]); as objValue) {\n                  <pre style=\"margin: 0; font-size: 0.8em; white-space: pre-wrap;\">{{ objValue | json }}</pre>\n                } @else {\n                  {{ element[column] }}\n                }\n              </td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n          </table>\n\n          <!-- Debug info -->\n          <div style=\"margin-top: 1rem; font-size: 0.8em; color: #666;\">\n            Columns: {{ displayedColumns.join(', ') }} | Data received\n          </div>\n        </div>\n      }\n    </div>\n\n  </div>\n\n</div>\n", styles: [".btn{min-width:120px}.mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor;background-color:#f5f5f5}.container{height:400px;overflow:auto}.box{padding:10px;border:1px solid #ccc}\n"] }]
         }], ctorParameters: () => [], propDecorators: { server: [{
                 type: Input
             }], adapter: [{
@@ -9241,9 +9391,7 @@ 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('');
@@ -9488,8 +9636,6 @@ 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);
@@ -9675,11 +9821,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        <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" }] }); }
+    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" }] }); }
 }
 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        <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"] }]
+            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"] }]
         }], ctorParameters: () => [], propDecorators: { server: [{
                 type: Input
             }], adapter: [{