http-request-manager 18.12.9 → 18.13.1

package/fesm2022/http-request-manager.mjs

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
 import { inject, Injectable, APP_ID, Inject, InjectionToken, isDevMode, signal, effect, computed, Injector, Optional, EventEmitter, Input, Output, ViewEncapsulation, Component, NgModule, ViewChild } from '@angular/core';
 import { ComponentStore } from '@ngrx/component-store';
-import { map, catchError, filter, finalize, tap, scan, takeWhile, retry, startWith, mergeMap, takeUntil, concatMap, toArray, withLatestFrom, switchMap, take, distinctUntilChanged } from 'rxjs/operators';
+import { map, catchError, take, filter, tap, finalize, takeWhile, retry, startWith, mergeMap, takeUntil, concatMap, toArray, withLatestFrom, switchMap, delay, 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';
@@ -875,6 +875,369 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
+class PathTrackerStateModel {
+    constructor(baselineQuery, consumedValuesByKey = {}, watchExpiresAt) {
+        this.baselineQuery = baselineQuery;
+        this.consumedValuesByKey = consumedValuesByKey;
+        this.watchExpiresAt = watchExpiresAt;
+    }
+    static adapt(item) {
+        return new PathTrackerStateModel(item?.baselineQuery, item?.consumedValuesByKey, item?.watchExpiresAt);
+    }
+}
+
+class QueryTrackerStateModel {
+    constructor(paths = {}) {
+        this.paths = paths;
+    }
+    static adapt(item) {
+        return new QueryTrackerStateModel(item?.paths
+            ? Object.keys(item.paths).reduce((acc, key) => {
+                acc[key] = PathTrackerStateModel.adapt(item.paths[key]);
+                return acc;
+            }, {})
+            : {});
+    }
+}
+
+const TRACKER_STORE_NAME = 'query_params_tracker';
+const TRACKER_SESSION_INIT_KEY = 'query_params_tracker_initialized';
+const DEFAULT_TRACKER_OPTIONS = SettingOptions.adapt({
+    storage: StorageType.GLOBAL,
+    encrypted: false,
+});
+class QueryParamsTrackerService {
+    constructor() {
+        this.state = { paths: {} };
+        this.stateRestored = false;
+        this.localStorageManager = inject(LocalStorageManagerService);
+    }
+    clearTracking(resetSessionInit = false) {
+        this.state = { paths: {} };
+        this.localStorageManager.deleteStore({ name: TRACKER_STORE_NAME });
+        if (resetSessionInit && this.hasSessionStorage()) {
+            sessionStorage.removeItem(TRACKER_SESSION_INIT_KEY);
+        }
+    }
+    checkRequestOptions(requestOptions = [], options = {}) {
+        this.ensureStateRestored();
+        const normalized = this.normalizeRequestOptions(requestOptions);
+        if (!normalized.pathKey)
+            return false;
+        this.cleanupExpiredEntries();
+        if (!normalized.hasQuery) {
+            this.ensurePathState(normalized.pathKey);
+            this.persistState();
+            return true;
+        }
+        if (options.mode === 'exact') {
+            return this.checkExact(normalized, options);
+        }
+        return this.checkVariation(normalized, options);
+    }
+    matchesPath(requestOptions = [], expectedPathOptions = []) {
+        this.ensureStateRestored();
+        const requestPath = this.normalizeRequestOptions(requestOptions).pathKey;
+        const expectedPath = this.normalizeRequestOptions(expectedPathOptions).pathKey;
+        return Boolean(requestPath) && requestPath === expectedPath;
+    }
+    checkExact(normalized, options) {
+        const pathState = this.ensurePathState(normalized.pathKey);
+        const filteredQuery = normalized.query;
+        if (Object.keys(filteredQuery).length === 0) {
+            return false;
+        }
+        if (!pathState.baselineQuery) {
+            pathState.baselineQuery = filteredQuery;
+            this.persistState();
+            return true;
+        }
+        return this.stringifyQuery(pathState.baselineQuery) === this.stringifyQuery(filteredQuery);
+    }
+    checkVariation(normalized, options) {
+        const pathState = this.ensurePathState(normalized.pathKey);
+        const filteredQuery = normalized.query;
+        const keys = Object.keys(filteredQuery);
+        if (keys.length === 0) {
+            return false;
+        }
+        this.resetPathStateIfExpired(pathState);
+        let accepted = false;
+        keys.forEach((key) => {
+            const currentValue = filteredQuery[key];
+            const consumed = pathState.consumedValuesByKey[key] || [];
+            if (!consumed.includes(currentValue)) {
+                pathState.consumedValuesByKey[key] = [...consumed, currentValue];
+                accepted = true;
+            }
+        });
+        if (accepted) {
+            if (!pathState.baselineQuery) {
+                pathState.baselineQuery = filteredQuery;
+            }
+            pathState.watchExpiresAt = this.buildExpiryEpoch(typeof options.watchExpiresAt !== 'undefined' ? options.watchExpiresAt : options.watchParamsExpire);
+            this.persistState();
+        }
+        return accepted;
+    }
+    normalizeRequestOptions(requestOptions) {
+        const params = Array.isArray(requestOptions) ? requestOptions : [];
+        const pathSegments = [];
+        const queryObjects = [];
+        params.forEach((item) => {
+            if (this.isPlainObject(item)) {
+                queryObjects.push(item);
+            }
+            else if (typeof item !== 'undefined' && item !== null) {
+                const parsed = this.parsePathSegment(String(item));
+                if (parsed.pathSegment) {
+                    pathSegments.push(parsed.pathSegment);
+                }
+                if (Object.keys(parsed.queryObject).length > 0) {
+                    queryObjects.push(parsed.queryObject);
+                }
+            }
+        });
+        const query = queryObjects.reduce((acc, current) => {
+            Object.keys(current).forEach((key) => {
+                const normalizedKey = this.normalizeParamKey(key);
+                const value = current[key];
+                if (!normalizedKey || typeof value === 'undefined' || value === null || value === '') {
+                    return;
+                }
+                acc[normalizedKey] = this.normalizeParamValue(value);
+            });
+            return acc;
+        }, {});
+        return {
+            pathKey: this.normalizePath(pathSegments),
+            query,
+            hasQuery: Object.keys(query).length > 0,
+        };
+    }
+    parsePathSegment(rawSegment) {
+        const [pathPart, ...queryParts] = String(rawSegment).split('?');
+        const queryString = queryParts.join('?');
+        const queryObject = {};
+        if (queryString) {
+            queryString.split('&').forEach((pair) => {
+                if (!pair)
+                    return;
+                const [rawKey, ...rawValueParts] = pair.split('=');
+                const key = this.safeDecode(rawKey).trim();
+                const value = this.safeDecode(rawValueParts.join('=')).trim();
+                if (!key)
+                    return;
+                queryObject[key] = value;
+            });
+        }
+        return {
+            pathSegment: pathPart,
+            queryObject,
+        };
+    }
+    safeDecode(value) {
+        if (typeof value === 'undefined') {
+            return '';
+        }
+        try {
+            return decodeURIComponent(value);
+        }
+        catch {
+            return String(value);
+        }
+    }
+    normalizePath(pathSegments) {
+        return pathSegments
+            .map((segment) => String(segment).trim())
+            .filter((segment) => segment.length > 0)
+            .join('/')
+            .replace(/([^:]\/+)\/+/g, '$1')
+            .replace(/^\//, '')
+            .replace(/\/$/, '');
+    }
+    normalizeParamKey(key) {
+        return String(key).trim().toLowerCase();
+    }
+    normalizeParamValue(value) {
+        if (Array.isArray(value)) {
+            return value.map((item) => this.normalizeParamValue(item)).join(',');
+        }
+        if (this.isPlainObject(value)) {
+            return this.stringifyQuery(Object.keys(value).reduce((acc, key) => {
+                acc[this.normalizeParamKey(key)] = this.normalizeParamValue(value[key]);
+                return acc;
+            }, {}));
+        }
+        return String(value).trim().toLowerCase();
+    }
+    buildExpiryEpoch(expireIn) {
+        if (typeof expireIn === 'undefined' || expireIn === null || expireIn === '') {
+            return undefined;
+        }
+        if (typeof expireIn === 'number' && Number.isFinite(expireIn) && expireIn > 0) {
+            return Math.floor(Date.now() / 1000) + Math.floor(expireIn);
+        }
+        const raw = String(expireIn).trim().toLowerCase().replace(/\s+/g, '');
+        const parsed = raw.match(/^(\d+)(y|w|d|hr|h|mn|min|m|s)$/);
+        if (!parsed) {
+            return undefined;
+        }
+        const value = Number(parsed[1]);
+        const unit = parsed[2];
+        const toSeconds = {
+            y: 31556926,
+            w: 604800,
+            d: 86400,
+            hr: 3600,
+            h: 3600,
+            mn: 60,
+            min: 60,
+            m: 60,
+            s: 1,
+        };
+        const seconds = toSeconds[unit];
+        if (!seconds) {
+            return undefined;
+        }
+        return Math.floor(Date.now() / 1000) + value * seconds;
+    }
+    resetPathStateIfExpired(pathState) {
+        const now = Math.floor(Date.now() / 1000);
+        if (pathState.watchExpiresAt && pathState.watchExpiresAt <= now) {
+            pathState.consumedValuesByKey = {};
+            pathState.watchExpiresAt = undefined;
+        }
+    }
+    cleanupExpiredEntries() {
+        const now = Math.floor(Date.now() / 1000);
+        Object.keys(this.state.paths).forEach((pathKey) => {
+            const pathState = this.state.paths[pathKey];
+            if (pathState.watchExpiresAt && pathState.watchExpiresAt <= now) {
+                pathState.consumedValuesByKey = {};
+                pathState.watchExpiresAt = undefined;
+            }
+            const hasBaseline = Boolean(pathState.baselineQuery && Object.keys(pathState.baselineQuery).length > 0);
+            const hasTrackedValues = Object.keys(pathState.consumedValuesByKey).some((key) => (pathState.consumedValuesByKey[key] || []).length > 0);
+            if (!hasBaseline && !hasTrackedValues) {
+                delete this.state.paths[pathKey];
+            }
+        });
+    }
+    ensurePathState(pathKey) {
+        if (!this.state.paths[pathKey]) {
+            this.state.paths[pathKey] = {
+                consumedValuesByKey: {},
+            };
+        }
+        return this.state.paths[pathKey];
+    }
+    ensureStateRestored() {
+        if (this.stateRestored) {
+            return;
+        }
+        this.stateRestored = true;
+        this.initializeTrackingForSession();
+        this.restoreState();
+    }
+    initializeTrackingForSession() {
+        if (!this.hasSessionStorage()) {
+            return;
+        }
+        const initialized = sessionStorage.getItem(TRACKER_SESSION_INIT_KEY);
+        if (initialized === '1') {
+            return;
+        }
+        this.clearTracking();
+        sessionStorage.setItem(TRACKER_SESSION_INIT_KEY, '1');
+    }
+    restoreState() {
+        this.localStorageManager.store$(TRACKER_STORE_NAME)
+            .pipe(take(1))
+            .subscribe({
+            next: (storedState) => {
+                if (this.isTrackerState(storedState)) {
+                    this.state = QueryTrackerStateModel.adapt(storedState);
+                    this.cleanupExpiredEntries();
+                    return;
+                }
+                this.state = { paths: {} };
+            },
+            error: () => {
+                this.state = { paths: {} };
+            }
+        });
+    }
+    persistState() {
+        this.localStorageManager.storeExists$(TRACKER_STORE_NAME)
+            .pipe(take(1))
+            .subscribe((exists) => {
+            if (exists) {
+                this.localStorageManager.updateStore({ name: TRACKER_STORE_NAME, data: this.state });
+                return;
+            }
+            this.localStorageManager.createStore({
+                name: TRACKER_STORE_NAME,
+                data: this.state,
+                options: DEFAULT_TRACKER_OPTIONS,
+            });
+        });
+    }
+    stringifyQuery(query) {
+        return JSON.stringify(Object.keys(query)
+            .sort()
+            .reduce((acc, key) => {
+            acc[key] = query[key];
+            return acc;
+        }, {}));
+    }
+    isTrackerState(value) {
+        return this.isPlainObject(value) && this.isPlainObject(value.paths);
+    }
+    isPlainObject(value) {
+        return Object.prototype.toString.call(value) === '[object Object]';
+    }
+    hasSessionStorage() {
+        try {
+            return typeof sessionStorage !== 'undefined';
+        }
+        catch {
+            return false;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: QueryParamsTrackerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: QueryParamsTrackerService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: QueryParamsTrackerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class NormalizedRequestOptionsModel {
+    constructor(pathKey = '', query = {}, hasQuery = false) {
+        this.pathKey = pathKey;
+        this.query = query;
+        this.hasQuery = hasQuery;
+    }
+    static adapt(item) {
+        return new NormalizedRequestOptionsModel(item?.pathKey, item?.query, item?.hasQuery);
+    }
+}
+
+class QueryParamsTrackerOptionsModel {
+    constructor(mode, watchParams, watchExpiresAt, watchParamsExpire) {
+        this.mode = mode;
+        this.watchParams = watchParams;
+        this.watchExpiresAt = watchExpiresAt;
+        this.watchParamsExpire = watchParamsExpire;
+    }
+    static adapt(item) {
+        return new QueryParamsTrackerOptionsModel(item?.mode, Array.isArray(item?.watchParams) ? item.watchParams : [], item?.watchExpiresAt, item?.watchParamsExpire);
+    }
+}
+
 /**
  * Stateful processor for managing streaming data and events
  */
@@ -884,7 +1247,6 @@ class StreamingProcessor {
         this.contentType = '';
         this.maxBufferSize = 10 * 1024 * 1024; // 10MB limit
         this.lastParsedLength = 0; // Track parsed position to avoid duplicates
-        this.lastParsedLineEnd = 0; // Track end of last-parsed complete line for NDJSON incremental parsing
         this.streamConfig = config || { streamType: StreamType.AI_STREAMING };
     }
     /**
@@ -907,63 +1269,41 @@ class StreamingProcessor {
                 return null;
             case HttpEventType.DownloadProgress:
                 if (event.partialText) {
-                    // partialText is cumulative, so replace the buffer instead of appending
-                    this.buffer = event.partialText;
+                    this.appendToBuffer(event.partialText);
                     const parsedData = this.parseBuffer();
-                    // For NDJSON incremental parsing, parsedData already contains only new items.
-                    // For other formats, parsedData is cumulative so slice from lastParsedLength.
-                    const isIncremental = this.streamConfig.streamType === StreamType.NDJSON;
-                    const newItems = isIncremental ? parsedData : parsedData.slice(this.lastParsedLength);
-                    // received = cumulative total for progress display
-                    const received = isIncremental
-                        ? this.lastParsedLength + parsedData.length
-                        : parsedData.length;
-                    this.lastParsedLength = received;
-                    // Return null when no new items — prevents empty array emissions
-                    if (newItems.length === 0) {
-                        return null;
-                    }
-                    const total = this.totalFromHeader;
-                    const percent = total
-                        ? Math.min(100, Math.round((received / total) * 100))
-                        : 0;
+                    // Only return NEW items since last parse (progressive updates)
+                    const newItems = parsedData.slice(this.lastParsedLength);
+                    this.lastParsedLength = 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 {
-                        data: newItems,
+                        data: newItems.length > 0 ? newItems : [],
                         progress
                     };
                 }
                 return null;
             case HttpEventType.Response:
                 if (event.body) {
-                    // event.body is the complete response, replace the buffer
-                    this.buffer = event.body;
+                    this.appendToBuffer(event.body);
                     const parsedData = this.parseBuffer();
-                    // For NDJSON incremental parsing, parsedData already contains only new items.
-                    // For other formats, parsedData is cumulative so slice from lastParsedLength.
-                    const isIncremental = this.streamConfig.streamType === StreamType.NDJSON;
-                    const remaining = isIncremental ? parsedData : parsedData.slice(this.lastParsedLength);
-                    const received = isIncremental
-                        ? this.lastParsedLength + parsedData.length
-                        : parsedData.length;
-                    this.lastParsedLength = received;
-                    const total = this.totalFromHeader;
-                    const percent = total
-                        ? Math.min(100, Math.round((received / total) * 100))
-                        : 100;
+                    // 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
                     };
                 }
@@ -980,40 +1320,23 @@ class StreamingProcessor {
         // Implement sliding window if buffer gets too large
         if (this.buffer.length > this.maxBufferSize) {
             this.buffer = this.buffer.slice(-this.maxBufferSize / 2);
-            this.lastParsedLineEnd = 0;
-            this.lastParsedLength = 0;
         }
     }
     /**
-     * Parse current buffer content.
-     *
-     * Per-record parsing failures are already handled by the inner parsers
-     * (`safeJsonParse`, `parseNdjson`, `parseEventStream`, `extractJsonObjects`),
-     * which skip malformed records and return what was successfully parsed.
-     * No outer try/catch — wrapping these calls in `catch { return []; }`
-     * would discard every successfully-parsed record in the buffer whenever a
-     * single unexpected error bubbles up, instead of omitting the bad record.
+     * Parse current buffer content
      */
     parseBuffer() {
         if (!this.buffer.trim()) {
             return [];
         }
-        if (this.streamConfig.streamType === StreamType.NDJSON) {
-            // For NDJSON, only parse complete lines since the last parse.
-            // Find the last newline in the buffer — everything after it is an incomplete line.
-            const lastNewlineIndex = this.buffer.lastIndexOf('\n');
-            if (lastNewlineIndex === -1) {
-                // No complete lines yet
-                return [];
-            }
-            // Parse only the content from lastParsedLineEnd up to (and including) the last newline
-            const bufferToParse = this.buffer.substring(this.lastParsedLineEnd, lastNewlineIndex + 1);
-            this.lastParsedLineEnd = lastNewlineIndex + 1;
-            const result = parseStreamData(bufferToParse, this.contentType, this.streamConfig);
+        try {
+            const result = parseStreamData(this.buffer, this.contentType, this.streamConfig);
             return result;
         }
-        const result = parseStreamData(this.buffer, this.contentType, this.streamConfig);
-        return result;
+        catch (error) {
+            console.warn('Failed to parse streaming data:', error);
+            return [];
+        }
     }
     /**
      * Reset processor state
@@ -1022,7 +1345,6 @@ class StreamingProcessor {
         this.buffer = '';
         this.contentType = '';
         this.lastParsedLength = 0;
-        this.lastParsedLineEnd = 0;
         this.totalFromHeader = undefined;
     }
     /**
@@ -1112,8 +1434,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 ||
@@ -2884,9 +3204,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({
@@ -2896,82 +3213,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) {
@@ -3015,19 +3282,19 @@ class RequestService extends WebsocketService {
     requestStreaming(options) {
         return (source$) => {
             return source$.pipe(tap(output => {
-                this.progress.next(output.progress.percent);
+                // Update progress from stream output
+                this.progress.next(output.progress.received);
                 this.streamProgress.next(output.progress);
-            }), scan((acc, output) => {
-                // Accumulate data from each emission
-                const newData = output.data;
-                if (options?.adapter) {
-                    const adaptedData = newData.map((item) => options.adapter(item));
-                    return [...acc, ...adaptedData];
+            }), map(output => {
+                const data = output.data;
+                if (!data || (Array.isArray(data) && data.length === 0)) {
+                    return data;
                 }
-                else {
-                    return [...acc, ...newData];
+                if (options?.adapter) {
+                    return data.map((item) => options.adapter(item));
                 }
-            }, []));
+                return data;
+            }));
         };
     }
     downloadFileRequest(options) {
@@ -3165,12 +3432,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;
@@ -3863,16 +4125,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);
@@ -4204,7 +4462,7 @@ class HTTPManagerService extends RequestService {
     }
     handleSequentialError(request, error, index, options) {
         if (options.logErrors !== false) {
-            // console.error(`Batch request ${index} failed:`, error);
+            console.error(`Batch request ${index} failed:`, error);
         }
         if (options.stopOnError) {
             return throwError(() => error);
@@ -4216,7 +4474,7 @@ class HTTPManagerService extends RequestService {
     }
     handleParallelError(request, error, index, options) {
         if (options.logErrors !== false) {
-            // console.error(`Batch request ${index} failed:`, error);
+            console.error(`Batch request ${index} failed:`, error);
         }
         if (options.ignoreErrors) {
             return of(undefined);
@@ -4244,186 +4502,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 => Math.max(0, c - 1));
-        // console.log(`[Queue] After cleanup:`, {
-        //   activeMethod: this.activeMethod,
-        //   activeStreamMethod: this.activeStreamMethod,
-        //   queueLength: this.requestQueue.length
-        // });
-        // Process next request in queue
-        if (this.requestQueue.length > 0) {
-            const next = this.requestQueue.shift();
-            // console.log(`[Queue] Processing next from queue: ${next.method}`, {
-            //   isStream: next.isStream,
-            //   queueLength: this.requestQueue.length
-            // });
-            this.startRequest(next, {
-                next: (value) => next.resolve(value),
-                error: (error) => next.reject(error),
-                complete: () => { }
-            });
-        }
+        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);
@@ -4452,9 +4573,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;
@@ -4467,12 +4586,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');
                 }
             }
@@ -4488,54 +4609,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 = [];
@@ -4584,6 +4710,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();
@@ -4797,6 +4926,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;
@@ -4805,13 +4935,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;
@@ -4820,13 +4952,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;
@@ -4835,13 +4969,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;
@@ -4850,22 +4986,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;
@@ -4875,9 +5015,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);
         }));
     }
@@ -4971,6 +5112,7 @@ class HTTPManagerSignalsService extends RequestSignalsService {
         this.toastMessage.toastMessage(displaySuccess);
     }
     stopPolling() {
+        this.isPending.set(false);
         this.polling$.next();
     }
     defineReqOptions(options, params) {
@@ -5137,7 +5279,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;
@@ -5147,7 +5289,6 @@ class ApiRequest {
         this.retry = retry;
         this.stream = stream;
         this.streamType = streamType;
-        this.totalHeader = totalHeader;
         this.displayError = displayError;
         this.displaySuccess = displaySuccess;
         this.successMessage = successMessage;
@@ -5165,17 +5306,20 @@ 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, watchParams, watchExpiresAt) {
         this.path = path;
         this.headers = headers;
+        this.forceRefresh = forceRefresh;
+        this.watchParams = watchParams;
+        this.watchExpiresAt = watchExpiresAt;
     }
     static adapt(item) {
-        return new RequestOptions(item?.path, item?.headers);
+        return new RequestOptions(item?.path, item?.headers, item?.forceRefresh, Array.isArray(item?.watchParams) ? item.watchParams : [], item?.watchExpiresAt);
     }
 }
 
@@ -5970,8 +6114,8 @@ class DbService extends Dexie {
             console.warn('Database upgrade blocked! Please close other tabs/windows of this app.');
         });
         this.on('versionchange', () => {
-            console.warn('Database version changed in another tab. Reloading...');
-            window.location.reload();
+            console.warn('Database version changed in another tab. Closing current database connection to allow upgrade.');
+            this.close();
         });
         this.dbReady = this.init();
     }
@@ -6051,9 +6195,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;
@@ -6067,6 +6214,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.`);
@@ -6074,15 +6222,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;
             }
         }
@@ -6177,7 +6334,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)));
@@ -6224,26 +6385,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));
@@ -6257,17 +6415,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) {
@@ -6369,12 +6524,11 @@ class HTTPManagerStateService extends ComponentStore {
         this.httpManagerService = inject(HTTPManagerService);
         this.dbManagerService = inject(DatabaseManagerService);
         this.localStorageManagerService = inject(LocalStorageManagerService);
+        this.queryParamsTrackerService = inject(QueryParamsTrackerService);
         this.utils = inject(UtilsService);
         this.logger = inject(LoggerService);
         this.error$ = this.httpManagerService.error$;
-        this.isPending$ = this.httpManagerService.isPending$;
-        this.progress$ = this.httpManagerService.progress$;
-        this.streamProgress$ = this.httpManagerService.streamProgress$;
+        this.isPending$ = this.httpManagerService.isPending$.pipe(delay(1));
         this.operationSuccess = new BehaviorSubject(null);
         this.operationSuccess$ = this.operationSuccess.asObservable();
         // PAGINATION
@@ -6387,10 +6541,18 @@ 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.requestSignatureCache = {};
         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());
@@ -6658,22 +6820,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
@@ -6701,10 +6866,10 @@ class HTTPManagerStateService extends ComponentStore {
                 return state;
             if (this.dataType === DataType.ARRAY) {
                 const dataArray = Array.isArray(data) ? data : [data];
-                // Non-streaming path: merge incoming records with existing state.
-                // Streaming responses go through `setStreamData$` instead, which always
-                // replaces with the fully-accumulated array from the streaming operator.
-                const updatedData = this.updateArrayState(state.data, dataArray);
+                const stateDataSample = (state.data.length > 0) ? Object.keys(state.data[0]) : [];
+                const newDataSample = (dataArray.length > 0) ? Object.keys(dataArray[0]) : [];
+                const isSame = (state.data.length === 0) ? false : stateDataSample.every((value, index) => value === newDataSample[index]);
+                const updatedData = (!isSame && dataArray.length !== 0) ? this.updateArrayState([], dataArray) : this.updateArrayState(state.data, dataArray);
                 return { ...state, data: updatedData, dataObject: null };
             }
             else {
@@ -6712,18 +6877,6 @@ class HTTPManagerStateService extends ComponentStore {
                 return { ...state, data: [], dataObject: dataObject };
             }
         });
-        /**
-         * Streaming-only updater: replaces `data` with the incoming array.
-         *
-         * The streaming operator (`requestStreaming`) accumulates records via `scan`,
-         * so each emission is the full accumulated dataset. Replace, don't merge.
-         */
-        this.setStreamData$ = this.updater((state, data) => {
-            if (!data)
-                return state;
-            const dataArray = Array.isArray(data) ? data : [data];
-            return { ...state, data: dataArray, dataObject: null };
-        });
         this.addData$ = this.updater((state, data) => {
             if (this.dataType === DataType.ARRAY) {
                 const exists = state.data.some(item => item.id === data.id);
@@ -6774,6 +6927,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) {
@@ -6788,35 +6942,81 @@ 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;
+                if (this.hasDatabase && this.databaseOptions?.table) {
+                    this.setCachedRequestSignature(this.databaseOptions.table, 'GET', requestSignature);
+                }
+                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 forceRefresh = !!options?.forceRefresh;
+                            const storedSchemaSignature = this.getStoredSchemaSignature(storeData);
                             const expires = storeData?.expires || 0;
                             const hasExpired = expires > 0 && this.utils.hasExpired(expires);
+                            if (forceRefresh) {
+                                return fetchFromAPI();
+                            }
                             if (hasExpired) {
                                 return this.dbManagerService.clearTable(this.databaseOptions.table).pipe(switchMap(() => fetchFromAPI()), tap(() => {
                                     this.localStorageManagerService.updateStore({
@@ -6825,12 +7025,41 @@ 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()));
+                            }
+                            const trackerAllowsRequest = this.queryParamsTrackerService.checkRequestOptions(this.resolvePath(effectiveParams), this.buildQueryTrackerOptions(options));
+                            const shouldMakeRequest = trackerAllowsRequest;
+                            if (shouldMakeRequest) {
+                                return 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();
+                                const currentStateData = this.get()?.data;
+                                if (Array.isArray(currentStateData) && currentStateData.length > 0) {
+                                    return of(currentStateData);
+                                }
+                                if (currentStateData &&
+                                    !Array.isArray(currentStateData) &&
+                                    Object.keys(currentStateData).length > 0) {
+                                    return of(currentStateData);
+                                }
+                                return of(this.dataType === DataType.ARRAY ? [] : {});
+                            }), 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();
+                                }));
                             }));
                         }));
                     }));
@@ -6954,7 +7183,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 };
@@ -6968,31 +7197,97 @@ class HTTPManagerStateService extends ComponentStore {
                 }
             }));
         })));
-        this.fetchStream = this.effect((options$) => options$.pipe(tap((options) => {
-            if (this.activeStream$.value) {
-                console.warn('[fetchStream] Stream already active, skipping');
-                return;
-            }
+        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
-            // Reset streamed-response tracker so a new stream starts clean
-            this.streamedResponse = [];
-        }), concatMap((options) => {
+        }), switchMap((options) => {
             const requestOptions = this.updateRequestOptions(options?.headers);
             requestOptions.stream = true;
-            return this.httpManagerService.getRequest(requestOptions, options?.path)
+            const effectiveParams = this.getEffectiveParams(options?.path);
+            console.log('[DEBUG] Making streaming request:', requestOptions);
+            if (this.hasDatabase && this.databaseOptions?.table) {
+                const requestSignature = this.buildRequestSignature('STREAM', requestOptions, effectiveParams);
+                return this.localStorageManagerService.store$(this.databaseOptions.table).pipe(take(1), switchMap((storeData) => {
+                    const forceRefresh = !!options?.forceRefresh;
+                    const expires = storeData?.expires || 0;
+                    const hasExpired = expires > 0 && this.utils.hasExpired(expires);
+                    if (forceRefresh) {
+                        this.setCachedRequestSignature(this.databaseOptions.table, 'STREAM', requestSignature);
+                        return this.httpManagerService.getRequest(requestOptions, effectiveParams).pipe(map((apiData) => ({ data: apiData, fromCache: false })));
+                    }
+                    if (hasExpired) {
+                        return this.dbManagerService.clearTable(this.databaseOptions.table).pipe(tap(() => this.setCachedRequestSignature(this.databaseOptions.table, 'STREAM', requestSignature)), switchMap(() => this.httpManagerService.getRequest(requestOptions, effectiveParams)), map((apiData) => ({ data: apiData, fromCache: false })));
+                    }
+                    const trackerAllowsRequest = this.queryParamsTrackerService.checkRequestOptions(this.resolvePath(effectiveParams), this.buildQueryTrackerOptions(options));
+                    const shouldMakeRequest = trackerAllowsRequest;
+                    if (!shouldMakeRequest) {
+                        return this.dbManagerService.getTableRecords(this.databaseOptions.table).pipe(switchMap((dbData) => {
+                            if (Array.isArray(dbData) && dbData.length > 0) {
+                                return of({ data: dbData, fromCache: true });
+                            }
+                            const currentStateData = this.get()?.data;
+                            if (Array.isArray(currentStateData) && currentStateData.length > 0) {
+                                return of({ data: currentStateData, fromCache: true });
+                            }
+                            if (currentStateData &&
+                                !Array.isArray(currentStateData) &&
+                                Object.keys(currentStateData).length > 0) {
+                                return of({ data: currentStateData, fromCache: true });
+                            }
+                            return of({ data: this.dataType === DataType.ARRAY ? [] : {}, fromCache: true });
+                        }));
+                    }
+                    this.setCachedRequestSignature(this.databaseOptions.table, 'STREAM', requestSignature);
+                    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) => {
-                // Streaming operator emits the fully-accumulated array on every chunk.
-                // Always replace state — don't merge — to keep table in sync as records append.
-                if (res && Array.isArray(res) && res.length > 0) {
-                    this.setStreamData$(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);
+                    this.setData$(res);
                     this.streamedResponse = res;
                 }
-            }), map((res) => res), catchError((error) => {
+                else {
+                    console.log('[DEBUG] No streaming data or empty array:', 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);
                 this.httpManagerService.isPending.next(false);
                 return of([]);
-            }), finalize(() => this.activeStream$.next(false)) // Mark stream as complete
-            );
+            }));
         })));
         try {
             this.databaseOptions = database;
@@ -7012,7 +7307,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) {
@@ -7066,8 +7365,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
@@ -7189,11 +7504,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;
@@ -7210,32 +7534,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) {
@@ -7531,6 +7915,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$([]);
                 }
@@ -7553,6 +7938,132 @@ class HTTPManagerStateService extends ComponentStore {
             : { ...options.headers };
         return options;
     }
+    buildQueryTrackerOptions(options) {
+        return {
+            watchParams: Array.isArray(options?.watchParams) ? options.watchParams : [],
+            watchExpiresAt: options?.watchExpiresAt,
+        };
+    }
+    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)));
+    }
+    getCachedRequestSignature(tableName, type) {
+        return this.requestSignatureCache[tableName]?.[type] || null;
+    }
+    setCachedRequestSignature(tableName, type, signature) {
+        const existing = this.requestSignatureCache[tableName] || {};
+        this.requestSignatureCache[tableName] = {
+            ...existing,
+            [type]: signature,
+        };
+    }
+    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.setCachedRequestSignature(tableName, type, signature);
+        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 }); }
 }
@@ -8502,7 +9013,7 @@ class RequestManagerBasicDemoComponent {
     // Update displayed columns when data changes
     updateDisplayedColumns(data) {
         this.displayedColumns = this.getColumnsFromData(data);
-        // console.log('[DEMO] Updated columns:', this.displayedColumns)
+        console.log('[DEMO] Updated columns:', this.displayedColumns);
     }
     // Helper to check if value is an object
     isObject(value) {
@@ -8762,7 +9273,7 @@ class RequestManagerBasicDemoComponent {
         this.requestParams.GET = reqParams.apiOptions;
         this.STREAM$ = this.httpManagerService.getRequest(reqParams.apiOptions, reqParams.path)
             .pipe(tap((data) => {
-            // console.log("API STREAM response", data)
+            console.log("API STREAM response", data);
             if (data && data.length > 0) {
                 this.updateDisplayedColumns(data);
             }
@@ -8859,12 +9370,12 @@ class StateManagerDemoService extends HTTPManagerStateService {
     setAPIOptions(apiOptions, dataType, database) {
         this.setApiRequestOptions(apiOptions, dataType, database);
     }
-    getClients() {
+    getClients(options) {
         // const headers = {
         //   auth: "sample-auth-token"
         // }
         // const sampleOptions = RequestOptions.adapt({ path: ["id", 12], headers, sample: true })
-        this.fetchRecords();
+        this.fetchRecords(options);
     }
     createClient(data) {
         // const headers = {
@@ -8889,13 +9400,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({ headers });
+        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 }); }
@@ -8929,7 +9440,7 @@ class RequestManagerStateDemoComponent {
     // Update displayed columns when data changes
     updateDisplayedColumns(data) {
         this.displayedColumns = this.getColumnsFromData(data);
-        // console.log('[STATE DEMO] Updated columns:', this.displayedColumns)
+        console.log('[STATE DEMO] Updated columns:', this.displayedColumns);
     }
     // Helper to check if value is an object
     isObject(value) {
@@ -8983,7 +9494,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 = [
@@ -8996,7 +9506,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('');
@@ -9009,7 +9518,7 @@ class RequestManagerStateDemoComponent {
         this.POST$ = new BehaviorSubject(null);
         this.PUT$ = new BehaviorSubject(null);
         this.DELETE$ = new BehaviorSubject(null);
-        this.STREAM = new BehaviorSubject([]);
+        this.STREAM = new BehaviorSubject(null);
         this.STREAM$ = this.STREAM.asObservable();
         this.STREAM_AI = new BehaviorSubject([]);
         this.STREAM_AI$ = this.STREAM_AI.asObservable()
@@ -9045,6 +9554,8 @@ class RequestManagerStateDemoComponent {
             database: this.fb.group({
                 table: [''],
                 expiresIn: ['1m'],
+                watchParams: [''],
+                watchExpiresAt: ['never'],
             })
         });
         this.sampleAdaptors = [
@@ -9067,7 +9578,7 @@ class RequestManagerStateDemoComponent {
         this.stateManagerDemoService.data$.pipe(tap$1((data) => console.log("API STREAM_AI response", data)));
         this.error$.pipe(tap$1((data) => {
             debugger;
-            // console.log("API STREAM response", data)
+            console.log("API STREAM response", data);
         }), catchError$1(error => {
             return throwError(() => this.errorHandling(error, 'STREAM'));
         }));
@@ -9126,10 +9637,59 @@ class RequestManagerStateDemoComponent {
     removeHeader(index) {
         this.headers.removeAt(index);
     }
+    parsePathInput(pathInput) {
+        const raw = typeof pathInput === 'string' ? pathInput.trim() : '';
+        if (!raw) {
+            return [];
+        }
+        const [rawPath = '', rawQuery = ''] = raw.split('?', 2);
+        const pathSegments = rawPath
+            .split('/')
+            .map((segment) => segment.trim())
+            .filter((segment) => segment.length > 0)
+            .map((segment) => decodeURIComponent(segment));
+        if (!rawQuery) {
+            return pathSegments;
+        }
+        const searchParams = new URLSearchParams(rawQuery);
+        const queryObject = {};
+        searchParams.forEach((value, key) => {
+            const normalizedKey = key.trim();
+            if (!normalizedKey) {
+                return;
+            }
+            const normalizedValue = this.normalizeQueryValue(value);
+            if (Object.prototype.hasOwnProperty.call(queryObject, normalizedKey)) {
+                const currentValue = queryObject[normalizedKey];
+                queryObject[normalizedKey] = Array.isArray(currentValue)
+                    ? [...currentValue, normalizedValue]
+                    : [currentValue, normalizedValue];
+                return;
+            }
+            queryObject[normalizedKey] = normalizedValue;
+        });
+        return Object.keys(queryObject).length > 0
+            ? [...pathSegments, queryObject]
+            : pathSegments;
+    }
+    normalizeQueryValue(value) {
+        const trimmedValue = value.trim();
+        const lowerValue = trimmedValue.toLowerCase();
+        if (lowerValue === 'true') {
+            return true;
+        }
+        if (lowerValue === 'false') {
+            return false;
+        }
+        if (trimmedValue !== '' && !Number.isNaN(Number(trimmedValue))) {
+            return Number(trimmedValue);
+        }
+        return trimmedValue;
+    }
     compileRequest() {
         const requestParams = this.requestForm.value;
         requestParams.headers = this.arrayObjectsToObjects(requestParams.headers || []);
-        const pathReq = (requestParams.path === "") ? [] : (requestParams.path || "").split("/");
+        const pathReq = this.parsePathInput(requestParams.path || '');
         if (!this.pollingState.checked)
             requestParams.polling = 0;
         if (!this.failedState.checked) {
@@ -9143,12 +9703,53 @@ class RequestManagerStateDemoComponent {
         const apiOptions = ApiRequest.adapt({ ...currentOptions, path: pathReq });
         return { apiOptions: apiOptions, path: pathReq };
     }
+    parseWatchParams(value) {
+        if (!value || typeof value !== 'string') {
+            return [];
+        }
+        return value
+            .split(',')
+            .map((item) => item.trim())
+            .filter((item) => item.length > 0);
+    }
+    normalizeWatchExpiry(value) {
+        if (typeof value === 'undefined' || value === null || value === '') {
+            return undefined;
+        }
+        if (typeof value === 'string' && value.trim().toLowerCase() === 'never') {
+            return undefined;
+        }
+        return value;
+    }
+    buildDemoRequestOptions(path, headers) {
+        const dbValue = this.database || {};
+        const isDbEnabled = !!this.DBState?.checked;
+        return RequestOptions.adapt({
+            path,
+            headers,
+            forceRefresh: false,
+            watchParams: isDbEnabled ? this.parseWatchParams(dbValue?.watchParams) : [],
+            watchExpiresAt: isDbEnabled ? this.normalizeWatchExpiry(dbValue?.watchExpiresAt) : undefined,
+        });
+    }
     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();
     }
@@ -9157,7 +9758,9 @@ class RequestManagerStateDemoComponent {
     }
     onGetRequest() {
         this.requestType = 'GET';
-        this.stateManagerDemoService.getClients();
+        const reqParams = this.compileRequest();
+        const requestOptions = this.buildDemoRequestOptions(reqParams.path, reqParams.apiOptions.headers);
+        this.stateManagerDemoService.getClients(requestOptions);
     }
     onCreateRequest() {
         this.requestType = 'POST';
@@ -9183,8 +9786,11 @@ class RequestManagerStateDemoComponent {
         reqParams.apiOptions.stream = true;
         reqParams.apiOptions.streamType = this.streamType;
         this.requestType = 'STREAM';
+        const streamOptions = RequestOptions.adapt({
+            ...this.buildDemoRequestOptions(reqParams.path, reqParams.apiOptions.headers),
+        });
         // console.log('[COMPONENT] Calling streamRequest...')
-        this.stateManagerDemoService.streamRequest();
+        this.stateManagerDemoService.streamRequest(streamOptions);
     }
     errorHandling(err, type) {
         console.log(err, type);
@@ -9208,11 +9814,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 ((isStreamingPending$ | async) || ((STREAM$ | async)?.length)) {\n        <mat-progress-bar mode=\"determinate\" [value]=\"(progress$ | async)?.percent ?? 0\"></mat-progress-bar>\n      }\n      @if ((STREAM$ | async); as data) {\n        @if (data?.length) {\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(', ') }} | Rows: {{ data.length }}\n            </div>\n          </div>\n        }\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 }, { propertyName: "DBState", first: true, predicate: ["DBState"], 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 style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\" style=\"flex:1\">\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=\"margin-top: 1rem\" formGroupName=\"database\">\n            <div style=\"display: flex; gap: .5rem;\">\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            <div style=\"display: flex; gap: .5rem;\">\n              <mat-form-field appearance=\"outline\" style=\"flex:1\">\n                <mat-label>Watch Params (comma delimited)</mat-label>\n                <input matInput placeholder=\"sort,active\" formControlName=\"watchParams\" value=\"\">\n              </mat-form-field>\n              <mat-form-field appearance=\"outline\">\n                <mat-label>Watch Param Expiry</mat-label>\n                <mat-select formControlName=\"watchExpiresAt\">\n                  <mat-option value=\"never\">Never</mat-option>\n                  <mat-option value=\"10s\">10 Seconds</mat-option>\n                  <mat-option value=\"30s\">30 Seconds</mat-option>\n                  <mat-option value=\"1m\">1 Minute</mat-option>\n                  <mat-option value=\"5m\">5 Minutes</mat-option>\n                  <mat-option value=\"10m\">10 Minutes</mat-option>\n                  <mat-option value=\"1h\">1 Hour</mat-option>\n                  <mat-option value=\"1d\">1 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 ((isStreamingPending$ | async) || ((STREAM$ | async)?.length)) {\n        <mat-progress-bar mode=\"determinate\" [value]=\"(progress$ | async)?.percent ?? 0\"></mat-progress-bar>\n      }\n      @if ((STREAM$ | async); as data) {\n        @if (data?.length) {\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(', ') }} | Rows: {{ data.length }}\n            </div>\n          </div>\n        }\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 style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\" style=\"flex:1\">\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=\"margin-top: 1rem\" formGroupName=\"database\">\n            <div style=\"display: flex; gap: .5rem;\">\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            <div style=\"display: flex; gap: .5rem;\">\n              <mat-form-field appearance=\"outline\" style=\"flex:1\">\n                <mat-label>Watch Params (comma delimited)</mat-label>\n                <input matInput placeholder=\"sort,active\" formControlName=\"watchParams\" value=\"\">\n              </mat-form-field>\n              <mat-form-field appearance=\"outline\">\n                <mat-label>Watch Param Expiry</mat-label>\n                <mat-select formControlName=\"watchExpiresAt\">\n                  <mat-option value=\"never\">Never</mat-option>\n                  <mat-option value=\"10s\">10 Seconds</mat-option>\n                  <mat-option value=\"30s\">30 Seconds</mat-option>\n                  <mat-option value=\"1m\">1 Minute</mat-option>\n                  <mat-option value=\"5m\">5 Minutes</mat-option>\n                  <mat-option value=\"10m\">10 Minutes</mat-option>\n                  <mat-option value=\"1h\">1 Hour</mat-option>\n                  <mat-option value=\"1d\">1 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: [{
@@ -9225,6 +9831,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }], pollingState: [{
                 type: ViewChild,
                 args: ["pollingState", { static: true }]
+            }], DBState: [{
+                type: ViewChild,
+                args: ["DBState", { static: true }]
             }] } });
 
 class RequestManagerDemoComponent {
@@ -9243,7 +9852,7 @@ class RequestManagerDemoComponent {
     // Update displayed columns when data changes
     updateDisplayedColumns(data) {
         this.displayedColumns = this.getColumnsFromData(data);
-        // console.log('[DEMO] Updated columns:', this.displayedColumns)
+        console.log('[DEMO] Updated columns:', this.displayedColumns);
     }
     // Helper to check if value is an object
     isObject(value) {
@@ -9276,9 +9885,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('');
@@ -9523,11 +10130,9 @@ class RequestManagerDemoComponent {
         reqParams.apiOptions.stream = true;
         reqParams.apiOptions.streamType = StreamType.NDJSON;
         this.requestParams.GET = reqParams.apiOptions;
-        this.STREAM$ = EMPTY; // Cancel any active stream before starting new one
-        this.STREAM_error$.next('');
         this.STREAM$ = this.httpManagerService.getRequest(reqParams.apiOptions, reqParams.path)
             .pipe(tap((data) => {
-            // console.log("API STREAM response", data)
+            console.log("API STREAM response", data);
             if (data && data.length > 0) {
                 this.updateDisplayedColumns(data);
             }
@@ -9710,11 +10315,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: [{
@@ -12075,5 +12680,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ApiRequest, AppService, AsymmetricalEncryptionService, BatchOptions, BatchResult, CONFIG_SETTINGS_TOKEN, ChannelType, ConfigHTTPOptions, ConfigOptions, DataType, DatabaseDataDemoComponent, DatabaseManagerService, DatabaseStorage, DbService, ErrorDisplaySettings, GlobalStoreOptions, HTTPManagerService, HTTPManagerSignalsService, HTTPManagerStateService, HeadersService, HttpRequestManagerModule, HttpRequestServicesDemoComponent, InvalidFileInfoModel, LocalStorageDemoComponent, LocalStorageManagerService, LocalStorageOptions, LocalStorageSignalsDemoComponent, LocalStorageSignalsManagerService, LoggerService, NotificationMessage, OperationResultModel, PathQueryService, PublicMessage, Random, RandomHSLColor, RandomHexColor, RandomNumber, RandomNumbers, RandomNumbersUnique, RandomPaletteColor, RandomSignature, RandomStr, RandomVisibleColor, RequestErrorInterceptor, RequestHeadersInterceptor, RequestManagerDemoComponent, RequestManagerStateDemoComponent, RequestOptions, RequestService, RequestSignalsService, RetryOptions, SettingOptions, StateMessage, StateOperationResult, StateStorageOptions, StorageData, StorageOption, StorageType, StoreStateManagerService, StoreStateManagerSignalsService, StoreStateSignalsDemoComponent, StreamType, SymmetricalEncryptionService, TableSchemaDef, UUID, UUID_STR, UploadDemoComponent, UploadValidationErrorModel, UserData, UtilsService, WSOptions, WebSocketMessageService, WithCredentialsInterceptor, calculateBatchProgress, countdown, createChannelName, delayedRetry, isErrorState, isPendingState, isSuccessState, requestPolling, requestStreaming, streamAI, streamAuto, streamEvents, streamJSON, streamNDJSON };
+export { ApiRequest, AppService, AsymmetricalEncryptionService, BatchOptions, BatchResult, CONFIG_SETTINGS_TOKEN, ChannelType, ConfigHTTPOptions, ConfigOptions, DataType, DatabaseDataDemoComponent, DatabaseManagerService, DatabaseStorage, DbService, ErrorDisplaySettings, GlobalStoreOptions, HTTPManagerService, HTTPManagerSignalsService, HTTPManagerStateService, HeadersService, HttpRequestManagerModule, HttpRequestServicesDemoComponent, InvalidFileInfoModel, LocalStorageDemoComponent, LocalStorageManagerService, LocalStorageOptions, LocalStorageSignalsDemoComponent, LocalStorageSignalsManagerService, LoggerService, NormalizedRequestOptionsModel, NotificationMessage, OperationResultModel, PathQueryService, PathTrackerStateModel, PublicMessage, QueryParamsTrackerOptionsModel, QueryParamsTrackerService, QueryTrackerStateModel, Random, RandomHSLColor, RandomHexColor, RandomNumber, RandomNumbers, RandomNumbersUnique, RandomPaletteColor, RandomSignature, RandomStr, RandomVisibleColor, RequestErrorInterceptor, RequestHeadersInterceptor, RequestManagerDemoComponent, RequestManagerStateDemoComponent, RequestOptions, RequestService, RequestSignalsService, RetryOptions, SettingOptions, StateMessage, StateOperationResult, StateStorageOptions, StorageData, StorageOption, StorageType, StoreStateManagerService, StoreStateManagerSignalsService, StoreStateSignalsDemoComponent, StreamType, SymmetricalEncryptionService, TableSchemaDef, UUID, UUID_STR, UploadDemoComponent, UploadValidationErrorModel, UserData, UtilsService, WSOptions, WebSocketMessageService, WithCredentialsInterceptor, calculateBatchProgress, countdown, createChannelName, delayedRetry, isErrorState, isPendingState, isSuccessState, requestPolling, requestStreaming, streamAI, streamAuto, streamEvents, streamJSON, streamNDJSON };
 //# sourceMappingURL=http-request-manager.mjs.map