http-request-manager 18.13.0 → 18.13.1

package/fesm2022/http-request-manager.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { inject, Injectable, APP_ID, Inject, InjectionToken, isDevMode, signal, effect, computed, Injector, Optional, EventEmitter, Input, Output, ViewEncapsulation, Component, NgModule, ViewChild } from '@angular/core';
 import { ComponentStore } from '@ngrx/component-store';
-import { map, catchError, filter, tap, finalize, takeWhile, retry, startWith, mergeMap, takeUntil, concatMap, toArray, withLatestFrom, switchMap, delay, take, scan, distinctUntilChanged } from 'rxjs/operators';
+import { map, catchError, 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, 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';
@@ -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
  */
@@ -883,28 +1246,66 @@ class StreamingProcessor {
         this.buffer = '';
         this.contentType = '';
         this.maxBufferSize = 10 * 1024 * 1024; // 10MB limit
+        this.lastParsedLength = 0; // Track parsed position to avoid duplicates
         this.streamConfig = config || { streamType: StreamType.AI_STREAMING };
     }
     /**
-     * Process HTTP events and extract streaming data
+     * Process HTTP events and extract streaming data with progress
      */
     process(event) {
         switch (event.type) {
             case HttpEventType.ResponseHeader:
                 this.contentType = event.headers?.get('content-type') || '';
+                // Read total from response header if configured
+                if (this.streamConfig.totalHeader && event.headers) {
+                    const totalVal = event.headers.get(this.streamConfig.totalHeader);
+                    if (totalVal !== undefined && totalVal !== null) {
+                        const parsed = parseInt(totalVal, 10);
+                        if (!isNaN(parsed)) {
+                            this.totalFromHeader = parsed;
+                        }
+                    }
+                }
                 return null;
             case HttpEventType.DownloadProgress:
                 if (event.partialText) {
                     this.appendToBuffer(event.partialText);
                     const parsedData = this.parseBuffer();
-                    return parsedData.length > 0 ? [parsedData[0]] : null;
+                    // Only return NEW items since last parse (progressive updates)
+                    const newItems = parsedData.slice(this.lastParsedLength);
+                    this.lastParsedLength = parsedData.length;
+                    // Calculate progress
+                    const progress = {
+                        received: this.lastParsedLength,
+                        total: this.totalFromHeader,
+                        percent: this.totalFromHeader
+                            ? Math.round((this.lastParsedLength / this.totalFromHeader) * 100)
+                            : 0,
+                        stage: 'streaming'
+                    };
+                    return {
+                        data: newItems.length > 0 ? newItems : [],
+                        progress
+                    };
                 }
                 return null;
             case HttpEventType.Response:
                 if (event.body) {
                     this.appendToBuffer(event.body);
                     const parsedData = this.parseBuffer();
-                    return parsedData.length > 0 ? parsedData : null;
+                    // Calculate final progress
+                    const progress = {
+                        received: parsedData.length,
+                        total: this.totalFromHeader,
+                        percent: this.totalFromHeader
+                            ? Math.round((parsedData.length / this.totalFromHeader) * 100)
+                            : 100,
+                        stage: 'complete'
+                    };
+                    return {
+                        data: parsedData.length > 0 ? parsedData : [],
+                        progress
+                    };
                 }
                 return null;
             default:
@@ -943,6 +1344,8 @@ class StreamingProcessor {
     reset() {
         this.buffer = '';
         this.contentType = '';
+        this.lastParsedLength = 0;
+        this.totalFromHeader = undefined;
     }
     /**
      * Update configuration
@@ -2793,19 +3196,6 @@ class UploadValidationErrorModel {
     }
 }
 
-class UserData {
-    constructor(ldap = '', name = '', email = '', color = RandomPaletteColor()) {
-        this.ldap = ldap;
-        this.name = name;
-        this.email = email;
-        this.color = color;
-    }
-    static adapt(item) {
-        const userName = `${item?.first_name} ${item?.last_name}`;
-        return new UserData(item?.ldap, userName, item?.email, item?.color);
-    }
-}
-
 class RequestService extends WebsocketService {
     constructor() {
         super(...arguments);
@@ -2816,6 +3206,13 @@ class RequestService extends WebsocketService {
         this.isPending$ = this.isPending.asObservable();
         this.progress = new BehaviorSubject(0);
         this.progress$ = this.progress.asObservable();
+        this.streamProgress = new BehaviorSubject({
+            received: 0,
+            total: undefined,
+            percent: 0,
+            stage: 'connecting'
+        });
+        this.streamProgress$ = this.streamProgress.asObservable();
     }
     // Implementation
     getRecordRequest(options) {
@@ -2884,7 +3281,12 @@ class RequestService extends WebsocketService {
     }
     requestStreaming(options) {
         return (source$) => {
-            return source$.pipe(map(data => {
+            return source$.pipe(tap(output => {
+                // Update progress from stream output
+                this.progress.next(output.progress.received);
+                this.streamProgress.next(output.progress);
+            }), map(output => {
+                const data = output.data;
                 if (!data || (Array.isArray(data) && data.length === 0)) {
                     return data;
                 }
@@ -3586,6 +3988,7 @@ class HTTPManagerService extends RequestService {
         this.data$ = this.data.asObservable();
         this.polling$ = new Subject();
         this.config = ApiRequest.adapt();
+        this.streamProgress$ = this.streamProgress.asObservable();
         this.config = (configOptions) ? ApiRequest.adapt(configOptions.httpRequestOptions) : this.config;
     }
     // ═══════════════════════════════════════════════════════════════════════════
@@ -3722,6 +4125,12 @@ class HTTPManagerService extends RequestService {
     getRequest(options, params) {
         this.isPending.next(true);
         this.data.next(null);
+        this.streamProgress.next({
+            received: 0,
+            total: undefined,
+            percent: 0,
+            stage: 'connecting'
+        });
         const updatedOptions = this.defineReqOptions(options, params);
         const func = this.getRecordRequest;
         const requests = this.createRequest(func, updatedOptions);
@@ -3730,9 +4139,19 @@ class HTTPManagerService extends RequestService {
             this.data.next(data);
             if (updatedOptions.displaySuccess)
                 this.handleSuccessWithSnackBar(updatedOptions.successMessage);
-        })).pipe(finalize(() => this.isPending.next(false)), catchError((err) => {
+        }), finalize(() => {
+            this.streamProgress.next({
+                ...this.streamProgress.value,
+                stage: 'complete'
+            });
+            this.isPending.next(false);
+        }), catchError((err) => {
             if (updatedOptions.displayError)
                 this.handleErrorWithSnackBar(err, updatedOptions.errorMessage || err?.message);
+            this.streamProgress.next({
+                ...this.streamProgress.value,
+                stage: 'error'
+            });
             this.isPending.next(false);
             return this.handleError(err);
         }));
@@ -4154,7 +4573,8 @@ class RequestSignalsService extends WebsocketService {
     }
     requestStreamingOperator(options) {
         return (source$) => {
-            return source$.pipe(map(data => {
+            return source$.pipe(map(output => {
+                const data = output.data;
                 if (!data || (Array.isArray(data) && data.length === 0)) {
                     return data;
                 }
@@ -4891,12 +5311,15 @@ class ApiRequest {
 }
 
 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);
     }
 }
 
@@ -5691,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();
     }
@@ -5772,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;
@@ -5788,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.`);
@@ -5795,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;
             }
         }
@@ -5898,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)));
@@ -5945,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));
@@ -5978,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) {
@@ -6090,6 +6524,7 @@ 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$;
@@ -6106,6 +6541,16 @@ 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();
         this.messages = new BehaviorSubject([]);
@@ -6375,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
@@ -6479,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) {
@@ -6493,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({
@@ -6530,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();
+                                }));
                             }));
                         }));
                     }));
@@ -6659,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 };
@@ -6679,8 +7203,70 @@ class HTTPManagerStateService extends ComponentStore {
         }), switchMap((options) => {
             const requestOptions = this.updateRequestOptions(options?.headers);
             requestOptions.stream = true;
+            const effectiveParams = this.getEffectiveParams(options?.path);
             console.log('[DEBUG] Making streaming request:', requestOptions);
-            return this.httpManagerService.getRequest(requestOptions, options?.path)
+            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) => {
                 console.log('[DEBUG] Streaming response received:', res);
                 // Always update state with streaming data
@@ -6692,7 +7278,9 @@ class HTTPManagerStateService extends ComponentStore {
                 else {
                     console.log('[DEBUG] No streaming data or empty array:', res);
                 }
-            }), map((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) => {
@@ -6719,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) {
@@ -6773,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
@@ -6896,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;
@@ -6917,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) {
@@ -7238,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$([]);
                 }
@@ -7260,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 }); }
 }
@@ -8566,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 = {
@@ -8596,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();
+        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 }); }
@@ -8750,6 +9554,8 @@ class RequestManagerStateDemoComponent {
             database: this.fb.group({
                 table: [''],
                 expiresIn: ['1m'],
+                watchParams: [''],
+                watchExpiresAt: ['never'],
             })
         });
         this.sampleAdaptors = [
@@ -8782,26 +9588,26 @@ class RequestManagerStateDemoComponent {
         });
         this.stateManagerDemoService.data$
             .pipe(tap$1((data) => {
-            console.log('[COMPONENT] State data received:', data);
+            // console.log('[COMPONENT] State data received:', data)
             switch (this.requestType) {
                 case 'GET':
-                    console.log('[COMPONENT] Updating GET$ with data:', data);
+                    // console.log('[COMPONENT] Updating GET$ with data:', data)
                     this.GET$.next(data);
                     break;
                 case 'PUT':
-                    console.log('[COMPONENT] Updating PUT$ with data:', data);
+                    // console.log('[COMPONENT] Updating PUT$ with data:', data)
                     this.PUT$.next(data);
                     break;
                 case 'POST':
-                    console.log('[COMPONENT] Updating POST$ with data:', data);
+                    // console.log('[COMPONENT] Updating POST$ with data:', data)
                     this.POST$.next(data);
                     break;
                 case 'DELETE':
-                    console.log('[COMPONENT] Updating DELETE$ with data:', data);
+                    // console.log('[COMPONENT] Updating DELETE$ with data:', data)
                     this.DELETE$.next(data);
                     break;
                 case 'STREAM':
-                    console.log('[COMPONENT] Updating STREAM$ with data:', data);
+                    // console.log('[COMPONENT] Updating STREAM$ with data:', data)
                     this.STREAM.next(data);
                     // Update table columns dynamically based on streaming data
                     if (data && Array.isArray(data) && data.length > 0) {
@@ -8809,11 +9615,11 @@ class RequestManagerStateDemoComponent {
                     }
                     break;
                 case 'STREAM_AI':
-                    console.log('[COMPONENT] Updating STREAM_AI$ with data:', data);
+                    // console.log('[COMPONENT] Updating STREAM_AI$ with data:', data)
                     this.STREAM_AI.next(data);
                     break;
                 default:
-                    console.log('[COMPONENT] No requestType set, ignoring data');
+                    // console.log('[COMPONENT] No requestType set, ignoring data')
                     break;
             }
         })).subscribe();
@@ -8831,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) {
@@ -8848,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();
     }
@@ -8862,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';
@@ -8877,19 +9775,22 @@ class RequestManagerStateDemoComponent {
         this.stateManagerDemoService.deleteClient(this.sampleClientData);
     }
     onStreamRequest() {
-        console.log('[COMPONENT] onStreamRequest called');
+        // console.log('[COMPONENT] onStreamRequest called')
         if (!this.isValid) {
-            console.log('[COMPONENT] Form invalid, aborting');
+            // console.log('[COMPONENT] Form invalid, aborting')
             return;
         }
-        console.log('[COMPONENT] Compiling request...');
+        // console.log('[COMPONENT] Compiling request...')
         const reqParams = this.compileRequest();
-        console.log('[COMPONENT] Setting stream options:', reqParams.apiOptions);
+        // console.log('[COMPONENT] Setting stream options:', reqParams.apiOptions)
         reqParams.apiOptions.stream = true;
         reqParams.apiOptions.streamType = this.streamType;
         this.requestType = 'STREAM';
-        console.log('[COMPONENT] Calling streamRequest...');
-        this.stateManagerDemoService.streamRequest();
+        const streamOptions = RequestOptions.adapt({
+            ...this.buildDemoRequestOptions(reqParams.path, reqParams.apiOptions.headers),
+        });
+        // console.log('[COMPONENT] Calling streamRequest...')
+        this.stateManagerDemoService.streamRequest(streamOptions);
     }
     errorHandling(err, type) {
         console.log(err, type);
@@ -8913,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 ((STREAM$ | async); as data) {\n        <div class=\"container\">\n          <table mat-table [dataSource]=\"data\" class=\"mat-elevation-z8\">\n\n            <!-- Dynamic columns -->\n            <ng-container *ngFor=\"let column of displayedColumns\" [matColumnDef]=\"column\">\n              <th mat-header-cell *matHeaderCellDef> {{ column | titlecase }} </th>\n              <td mat-cell *matCellDef=\"let element\">\n                @if (isObject(element[column]); as objValue) {\n                  <pre style=\"margin: 0; font-size: 0.8em; white-space: pre-wrap;\">{{ objValue | json }}</pre>\n                } @else {\n                  {{ element[column] }}\n                }\n              </td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n          </table>\n\n          <!-- Debug info -->\n          <div style=\"margin-top: 1rem; font-size: 0.8em; color: #666;\">\n            Columns: {{ displayedColumns.join(', ') }} | Data received\n          </div>\n        </div>\n      }\n    </div>\n\n  </div>\n\n</div>\n", styles: [".btn{min-width:120px}.mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor;background-color:#f5f5f5}.container{height:400px;overflow:auto}.box{padding:10px;border:1px solid #ccc}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i8$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i11.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i12.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i13.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }, { kind: "pipe", type: i1$1.TitleCasePipe, name: "titlecase" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: RequestManagerStateDemoComponent, selector: "app-request-manager-state-demo", inputs: { server: "server", adapter: "adapter", mapper: "mapper" }, providers: [StateManagerDemoService, HTTPManagerService], viewQueries: [{ propertyName: "failedState", first: true, predicate: ["failedState"], descendants: true, static: true }, { propertyName: "pollingState", first: true, predicate: ["pollingState"], descendants: true, static: true }, { 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 ((STREAM$ | async); as data) {\n        <div class=\"container\">\n          <table mat-table [dataSource]=\"data\" class=\"mat-elevation-z8\">\n\n            <!-- Dynamic columns -->\n            <ng-container *ngFor=\"let column of displayedColumns\" [matColumnDef]=\"column\">\n              <th mat-header-cell *matHeaderCellDef> {{ column | titlecase }} </th>\n              <td mat-cell *matCellDef=\"let element\">\n                @if (isObject(element[column]); as objValue) {\n                  <pre style=\"margin: 0; font-size: 0.8em; white-space: pre-wrap;\">{{ objValue | json }}</pre>\n                } @else {\n                  {{ element[column] }}\n                }\n              </td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n          </table>\n\n          <!-- Debug info -->\n          <div style=\"margin-top: 1rem; font-size: 0.8em; color: #666;\">\n            Columns: {{ displayedColumns.join(', ') }} | Data received\n          </div>\n        </div>\n      }\n    </div>\n\n  </div>\n\n</div>\n", styles: [".btn{min-width:120px}.mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor;background-color:#f5f5f5}.container{height:400px;overflow:auto}.box{padding:10px;border:1px solid #ccc}\n"] }]
+            args: [{ selector: 'app-request-manager-state-demo', providers: [StateManagerDemoService, HTTPManagerService], standalone: false, template: "<div style=\"margin: 2rem;\">\n\n  <h2>\n    HTTP Request State Manager\n  </h2>\n\n  <div [formGroup]=\"requestForm\" style=\"margin-top: 2rem;\">\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>State Data Type</mat-label>\n        <mat-select formControlName=\"datatype\">\n          <mat-option value=\"ARRAY\">Array</mat-option>\n          <mat-option value=\"OBJECT\">Object</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Adapter (Model)</mat-label>\n        <mat-select formControlName=\"adapter\" #adapterSelect>\n          <mat-option>None</mat-option>\n          @for (adapter of sampleAdaptors; track adapter) {\n            <mat-option [value]=\"adapter.value\">\n              {{adapter.label}}\n            </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Mapper (Model)</mat-label>\n        <mat-select formControlName=\"mapper\" #mapperSelect>\n          <mat-option>None</mat-option>\n          @for (mapper of sampleMappers; track mapper) {\n            <mat-option [value]=\"mapper.value\">\n              {{mapper.label}}\n            </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n    </div>\n\n    @if (adapterSelect.value || mapperSelect.value) {\n      <div style=\"display: flex; margin-bottom: 2rem;\">\n        <div style=\"flex:1\" class=\"box\">\n          <h3>Adapter (Incoming)</h3>\n          @if (adapterSelect.value) {\n            <div>\n              {{ props(adapterSelect.value) | json }}\n            </div>\n          } @else {\n            No Transformation\n          }\n        </div>\n        <div style=\"flex:1\" class=\"box\">\n          <h3>Mapper (Outgoing)</h3>\n          @if (mapperSelect.value) {\n            <div>\n              {{ props(mapperSelect.value) | json }}\n            </div>\n          } @else {\n            No Transformation\n          }\n        </div>\n      </div>\n    }\n\n    <div 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: [{
@@ -8930,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 {
@@ -9934,6 +10838,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 }]
         }] });
 
+class UserData {
+    constructor(ldap = '', name = '', email = '', color = RandomPaletteColor()) {
+        this.ldap = ldap;
+        this.name = name;
+        this.email = email;
+        this.color = color;
+    }
+    static adapt(item) {
+        const userName = `${item?.first_name} ${item?.last_name}`;
+        return new UserData(item?.ldap, userName, item?.email, item?.color);
+    }
+}
+
 class StateDataRequestService extends HTTPManagerStateService {
     constructor() {
         super(ApiRequest.adapt({
@@ -11763,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