http-request-manager 18.13.27 → 18.13.29

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, take, filter, tap, finalize, takeWhile, retry, startWith, mergeMap, takeUntil, concatMap, toArray, withLatestFrom, switchMap, delay, scan, distinctUntilChanged } from 'rxjs/operators';
+import { map, catchError, filter, tap, finalize, takeWhile, retry, startWith, mergeMap, takeUntil, concatMap, toArray, withLatestFrom, switchMap, take, 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,14 +875,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
+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 PathTrackerStateModel {
-    constructor(baselineQuery, consumedValuesByKey = {}, watchExpiresAt) {
-        this.baselineQuery = baselineQuery;
+    constructor(consumedValuesByKey = {}, baselineQuery, watchExpiresAt) {
         this.consumedValuesByKey = consumedValuesByKey;
+        this.baselineQuery = baselineQuery;
         this.watchExpiresAt = watchExpiresAt;
     }
     static adapt(item) {
-        return new PathTrackerStateModel(item?.baselineQuery, item?.consumedValuesByKey, item?.watchExpiresAt);
+        return new PathTrackerStateModel(item?.consumedValuesByKey && typeof item.consumedValuesByKey === 'object' ? item.consumedValuesByKey : {}, item?.baselineQuery, item?.watchExpiresAt);
     }
 }
 
@@ -891,489 +902,136 @@ class QueryTrackerStateModel {
         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 paths = {};
+        if (item?.paths && typeof item.paths === 'object') {
+            Object.keys(item.paths).forEach((key) => {
+                paths[key] = PathTrackerStateModel.adapt(item.paths[key]);
+            });
+        }
+        return new QueryTrackerStateModel(paths);
     }
 }
 
-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);
-        }
+class QueryParamsTrackerOptionsModel {
+    constructor(mode, watchParams, watchExpiresAt, watchParamsExpire) {
+        this.mode = mode;
+        this.watchParams = watchParams;
+        this.watchExpiresAt = watchExpiresAt;
+        this.watchParamsExpire = watchParamsExpire;
     }
-    checkRequestOptions(requestOptions = [], options = {}) {
-        this.ensureStateRestored();
-        const normalized = this.normalizeRequestOptions(requestOptions);
-        if (!normalized.pathKey)
-            return false;
-        this.cleanupExpiredEntries();
-        if (!normalized.hasQuery) {
-            const pathState = this.ensurePathState(normalized.pathKey);
-            const pathSeenBefore = !!pathState.baselineQuery;
-            if (!pathSeenBefore) {
-                pathState.baselineQuery = {};
-                this.persistState();
-            }
-            return !pathSeenBefore;
-        }
-        if (options.mode === 'exact') {
-            return this.checkExact(normalized, options);
-        }
-        return this.checkVariation(normalized, options);
+    static adapt(item) {
+        return new QueryParamsTrackerOptionsModel(item?.mode, Array.isArray(item?.watchParams) ? item.watchParams : [], item?.watchExpiresAt, item?.watchParamsExpire);
     }
-    matchesPath(requestOptions = [], expectedPathOptions = []) {
-        this.ensureStateRestored();
-        const requestPath = this.normalizeRequestOptions(requestOptions).pathKey;
-        const expectedPath = this.normalizeRequestOptions(expectedPathOptions).pathKey;
-        return Boolean(requestPath) && requestPath === expectedPath;
+}
+
+/**
+ * Stateful processor for managing streaming data and events
+ */
+class StreamingProcessor {
+    constructor(config) {
+        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 };
     }
-    checkExact(normalized, options) {
-        const pathState = this.ensurePathState(normalized.pathKey);
-        const filteredQuery = this.filterQueryByWatchParams(normalized.query, options.watchParams);
-        if (Object.keys(filteredQuery).length === 0) {
-            return false;
+    /**
+     * 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();
+                    // 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();
+                    // 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:
+                return null;
         }
-        if (!pathState.baselineQuery) {
-            pathState.baselineQuery = filteredQuery;
-            this.persistState();
-            return true;
+    }
+    /**
+     * Append data to buffer with size management
+     */
+    appendToBuffer(data) {
+        this.buffer += data;
+        // Implement sliding window if buffer gets too large
+        if (this.buffer.length > this.maxBufferSize) {
+            this.buffer = this.buffer.slice(-this.maxBufferSize / 2);
         }
-        return this.stringifyQuery(pathState.baselineQuery) !== this.stringifyQuery(filteredQuery);
     }
-    checkVariation(normalized, options) {
-        const pathState = this.ensurePathState(normalized.pathKey);
-        if (Array.isArray(options.watchParams) && options.watchParams.length === 0) {
-            const pathSeenBefore = !!pathState.baselineQuery;
-            if (!pathSeenBefore) {
-                pathState.baselineQuery = {};
-                pathState.watchExpiresAt = this.buildExpiryEpoch(typeof options.watchExpiresAt !== 'undefined' ? options.watchExpiresAt : options.watchParamsExpire);
-                this.persistState();
-            }
-            return !pathSeenBefore;
+    /**
+     * Parse current buffer content
+     */
+    parseBuffer() {
+        if (!this.buffer.trim()) {
+            return [];
         }
-        const filteredQuery = this.filterQueryByWatchParams(normalized.query, options.watchParams);
-        const keys = Object.keys(filteredQuery);
-        if (keys.length === 0) {
-            return false;
+        try {
+            const result = parseStreamData(this.buffer, this.contentType, this.streamConfig);
+            return result;
         }
-        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();
+        catch (error) {
+            console.warn('Failed to parse streaming data:', error);
+            return [];
         }
-        return accepted;
     }
-    filterQueryByWatchParams(query, watchParams) {
-        if (!Array.isArray(watchParams)) {
-            return query;
-        }
-        if (watchParams.length === 0) {
-            return {};
-        }
-        const normalizedWatchParams = watchParams.map((p) => this.normalizeParamKey(p));
-        return Object.keys(query).reduce((acc, key) => {
-            if (normalizedWatchParams.includes(key)) {
-                acc[key] = query[key];
-            }
-            return acc;
-        }, {});
-    }
-    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 = pathState.baselineQuery !== undefined;
-            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();
-    }
-    // private initializeTrackingForSession(): void {
-    //   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
- */
-class StreamingProcessor {
-    constructor(config) {
-        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 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();
-                    // 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();
-                    // 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:
-                return null;
-        }
-    }
-    /**
-     * Append data to buffer with size management
-     */
-    appendToBuffer(data) {
-        this.buffer += data;
-        // Implement sliding window if buffer gets too large
-        if (this.buffer.length > this.maxBufferSize) {
-            this.buffer = this.buffer.slice(-this.maxBufferSize / 2);
-        }
-    }
-    /**
-     * Parse current buffer content
-     */
-    parseBuffer() {
-        if (!this.buffer.trim()) {
-            return [];
-        }
-        try {
-            const result = parseStreamData(this.buffer, this.contentType, this.streamConfig);
-            return result;
-        }
-        catch (error) {
-            console.warn('Failed to parse streaming data:', error);
-            return [];
-        }
-    }
-    /**
-     * Reset processor state
-     */
-    reset() {
-        this.buffer = '';
-        this.contentType = '';
-        this.lastParsedLength = 0;
-        this.totalFromHeader = undefined;
+    /**
+     * Reset processor state
+     */
+    reset() {
+        this.buffer = '';
+        this.contentType = '';
+        this.lastParsedLength = 0;
+        this.totalFromHeader = undefined;
     }
     /**
      * Update configuration
@@ -5339,15 +4997,17 @@ class ApiRequest {
 }
 
 class RequestOptions {
-    constructor(path = [], headers = {}, forceRefresh, watchParams, watchExpiresAt) {
+    constructor(path = [], headers = {}, forceRefresh, ignoreQueryParams, queryParamsExpiresIn, watchParams, watchExpiresAt) {
         this.path = path;
         this.headers = headers;
         this.forceRefresh = forceRefresh;
+        this.ignoreQueryParams = ignoreQueryParams;
+        this.queryParamsExpiresIn = queryParamsExpiresIn;
         this.watchParams = watchParams;
         this.watchExpiresAt = watchExpiresAt;
     }
     static adapt(item) {
-        return new RequestOptions(item?.path, item?.headers, item?.forceRefresh, Array.isArray(item?.watchParams) ? item.watchParams : [], item?.watchExpiresAt);
+        return new RequestOptions(item?.path, item?.headers, item?.forceRefresh, Array.isArray(item?.ignoreQueryParams) ? item.ignoreQueryParams : [], item?.queryParamsExpiresIn, item?.watchParams, item?.watchExpiresAt);
     }
 }
 
@@ -6083,452 +5743,783 @@ class LocalStorageSignalsManagerService {
             const str = sessionStorage.getItem(this.storageName);
             strData.push(...(str ? JSON.parse(str) : []));
         }
-        const found = strData.find(store => store.id === id);
-        return !!found;
+        const found = strData.find(store => store.id === id);
+        return !!found;
+    }
+    isObjectOrArray(obj) {
+        try {
+            const parsed = typeof obj === 'object' ? obj : JSON.parse(obj);
+            return typeof parsed === 'object' && parsed !== null;
+        }
+        catch {
+            return false;
+        }
+    }
+    isString(obj) {
+        return Object.prototype.toString.call(obj) === '[object String]';
+    }
+    validStoreName(str) {
+        return str.toLowerCase().replace(/\s+/g, '_').replace(/[^ -~]/g, '');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LocalStorageSignalsManagerService, deps: [{ token: CONFIG_SETTINGS_TOKEN, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LocalStorageSignalsManagerService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LocalStorageSignalsManagerService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: ConfigOptions, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [CONFIG_SETTINGS_TOKEN]
+                }] }] });
+
+class TableSchemaDef {
+    constructor(table = 'unknown', schema = '') {
+        this.table = table;
+        this.schema = schema;
+    }
+    static adapt(item) {
+        const schemaArray = (item?.schema && Array.isArray(item.schema)) ? item.schema : item.schema.split(',');
+        const schema = schemaArray.map((item) => this.cleanString(item)).join();
+        return new TableSchemaDef((item?.table) ? this.cleanString(item.table) : 'unknown', schema);
+    }
+    static cleanString(str) {
+        // Allow alphanumeric, spaces, underscores, and Dexie schema characters (+, &, *, [, ])
+        const cleanStr = str
+            .replace(/[^a-zA-Z0-9\s_+\&*\[\]]/g, '')
+            .trim();
+        return cleanStr;
+    }
+}
+
+class DbService extends Dexie {
+    get db() { return this; }
+    constructor() {
+        super("global_storage_db");
+        this.storageDB = "global_storage_db";
+        this.on('blocked', () => {
+            console.warn('Database upgrade blocked! Please close other tabs/windows of this app.');
+        });
+        this.on('versionchange', () => {
+            console.warn('Database version changed in another tab. Closing current database connection to allow upgrade.');
+            this.close();
+        });
+        this.dbReady = this.init();
+    }
+    async init() {
+        try {
+            // Check if database already exists
+            const dbExists = await Dexie.exists(this.storageDB);
+            if (dbExists) {
+                // Database exists - just open it without declaring version
+                // This allows Dexie to use the existing schema and version
+                console.log(`Database "${this.storageDB}" already exists. Opening with existing schema...`);
+                if (!this.isOpen()) {
+                    await this.open();
+                }
+                console.log(`✅ Connected to existing database. Current version: ${this.verno}`);
+                console.log(`📊 Existing tables: ${this.getTables.join(', ')}`);
+            }
+            else {
+                // New database - initialize with empty schema at version 1
+                console.log(`Creating new database "${this.storageDB}"...`);
+                if (this.isOpen()) {
+                    this.close();
+                }
+                this.version(1).stores({});
+                await this.open();
+                console.log(`✅ New database initialized. Current version: ${this.verno}`);
+            }
+        }
+        catch (err) {
+            console.error('Failed to initialize database:', err);
+            throw err;
+        }
+    }
+    async createNewDatabase() {
+        if (this.isOpen()) {
+            this.close();
+        }
+        await this.open();
+    }
+    get vr() {
+        return this.verno;
+    }
+    get nextVr() {
+        const v = this.verno;
+        return (isNaN(v) || v === 0) ? 1 : v + 1;
+    }
+    get getTables() {
+        return this.tables.map((table) => table.name);
+    }
+    async hasDatabase() {
+        return await Dexie.exists(this.storageDB);
+    }
+    getTable(tableName) {
+        try {
+            return this.table(tableName);
+        }
+        catch (error) {
+            return undefined;
+        }
+    }
+    tableExists(tableName) {
+        return this.tables.some(t => t.name === tableName);
+    }
+    async updateTable(tableName, find, data) {
+        const table = this.getTable(tableName);
+        if (!table || !find || !find.key)
+            return false;
+        try {
+            const count = await table.where(find.key).equals(find.value).modify(data);
+            return count > 0;
+        }
+        catch (error) {
+            console.error('Error updating table:', error);
+            return false;
+        }
+    }
+    async createTable(tableName, schema) {
+        if (!tableName || !schema)
+            return;
+        this.dbReady = this.dbReady.then(() => this._doCreateTable(tableName, schema));
+        await this.dbReady;
+    }
+    async _doCreateTable(tableName, schema) {
+        const safeTableName = this.cleanTableName(tableName);
+        const safeSchema = schema.trim();
+        const currentSchema = this.getCurrentSchema();
+        const existingSchema = currentSchema[safeTableName]?.trim();
+        if (this.tableExists(safeTableName) && existingSchema === safeSchema) {
+            return;
+        }
+        console.log('Current Schema before update:', currentSchema);
+        currentSchema[safeTableName] = safeSchema;
+        const nextVersion = this.verno + 1;
+        console.log(`Creating table ${safeTableName}. Upgrading to version ${nextVersion}. New Schema:`, currentSchema);
+        if (this.isOpen()) {
+            this.close();
+        }
+        this.version(nextVersion).stores(currentSchema);
+        try {
+            await this.open();
+            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.`);
+            }
+        }
+        catch (err) {
+            console.error('Error opening database after schema update:', err);
+            throw err;
+        }
     }
-    isObjectOrArray(obj) {
+    async DBOpened() {
         try {
-            const parsed = typeof obj === 'object' ? obj : JSON.parse(obj);
-            return typeof parsed === 'object' && parsed !== null;
+            await this.dbReady;
+            return this.isOpen();
         }
-        catch {
+        catch (err) {
+            console.error('DBOpened: init failed', err);
             return false;
         }
     }
-    isString(obj) {
-        return Object.prototype.toString.call(obj) === '[object String]';
+    getCurrentSchema() {
+        const schema = {};
+        if (!this.tables || this.tables.length === 0) {
+            return schema;
+        }
+        this.tables.forEach(table => {
+            const primKey = table.schema.primKey;
+            const indexes = table.schema.indexes;
+            let schemaStr = "";
+            if (primKey.auto)
+                schemaStr += "++";
+            if (Array.isArray(primKey.keyPath)) {
+                schemaStr += `[${primKey.keyPath.join('+')}]`;
+            }
+            else {
+                schemaStr += primKey.keyPath || "";
+            }
+            indexes.forEach(idx => {
+                schemaStr += ",";
+                if (idx.unique)
+                    schemaStr += "&";
+                if (idx.multi)
+                    schemaStr += "*";
+                if (Array.isArray(idx.keyPath)) {
+                    schemaStr += `[${idx.keyPath.join('+')}]`;
+                }
+                else {
+                    schemaStr += idx.keyPath || "";
+                }
+            });
+            schema[table.name] = schemaStr;
+        });
+        return schema;
     }
-    validStoreName(str) {
-        return str.toLowerCase().replace(/\s+/g, '_').replace(/[^ -~]/g, '');
+    cleanTableName(str) {
+        return str
+            .replace(/[^a-zA-Z0-9\s_]/g, '')
+            .replace(/\s+/g, '_')
+            .trim()
+            .toLowerCase();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LocalStorageSignalsManagerService, deps: [{ token: CONFIG_SETTINGS_TOKEN, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LocalStorageSignalsManagerService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DbService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DbService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LocalStorageSignalsManagerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DbService, decorators: [{
             type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: ConfigOptions, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [CONFIG_SETTINGS_TOKEN]
-                }] }] });
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
 
-class TableSchemaDef {
-    constructor(table = 'unknown', schema = '') {
-        this.table = table;
-        this.schema = schema;
+class DatabaseManagerService extends DbService {
+    constructor() {
+        super();
     }
-    static adapt(item) {
-        const schemaArray = (item?.schema && Array.isArray(item.schema)) ? item.schema : item.schema.split(',');
-        const schema = schemaArray.map((item) => this.cleanString(item)).join();
-        return new TableSchemaDef((item?.table) ? this.cleanString(item.table) : 'unknown', schema);
+    getDatabaseTables() {
+        return from(this.DBOpened()).pipe(map(() => this.tables.map((item) => item.name)));
     }
-    static cleanString(str) {
-        // Allow alphanumeric, spaces, underscores, and Dexie schema characters (+, &, *, [, ])
-        const cleanStr = str
-            .replace(/[^a-zA-Z0-9\s_+\&*\[\]]/g, '')
-            .trim();
-        return cleanStr;
+    databaseExists() {
+        return from(this.hasDatabase());
     }
-}
-
-class DbService extends Dexie {
-    get db() { return this; }
-    constructor() {
-        super("global_storage_db");
-        this.storageDB = "global_storage_db";
-        this.on('blocked', () => {
-            console.warn('Database upgrade blocked! Please close other tabs/windows of this app.');
-        });
-        this.on('versionchange', () => {
-            console.warn('Database version changed in another tab. Closing current database connection to allow upgrade.');
-            this.close();
+    hasDatabaseTable(table) {
+        const tableName = this.cleanTableName(table);
+        return from(this.DBOpened()).pipe(map(() => {
+            return this.tableExists(tableName);
+        }));
+    }
+    getDatabaseTable(table) {
+        const tableName = this.cleanTableName(table);
+        return from(this.DBOpened()).pipe(map(() => {
+            const found = this.getTable(tableName);
+            if (!found) {
+                console.warn('No Such Table:', tableName);
+                return null;
+            }
+            return found;
+        }));
+    }
+    getDatabaseTableSchema(table) {
+        const tableName = this.cleanTableName(table);
+        return this.getDatabaseTable(tableName).pipe(map((dbTable) => {
+            if (!dbTable)
+                return [];
+            const cols = dbTable.schema.indexes.map((col) => col.name);
+            const pri = dbTable.schema.primKey.name;
+            return [pri, ...cols];
+        }));
+    }
+    createDatabaseTable(tableDef) {
+        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)));
+    }
+    // CRUD
+    findTableRecords(table, column, value) {
+        const tableName = this.cleanTableName(table);
+        return this.getDatabaseTable(tableName).pipe(switchMap((tableData) => {
+            if (!tableData) {
+                console.warn(`findTableRecords: Table '${tableName}' not found`);
+                return from([]);
+            }
+            return from(tableData.where(column).equals(value).toArray());
+        }));
+    }
+    findTableRecord(table, column, value) {
+        const tableName = this.cleanTableName(table);
+        return this.findTableRecords(tableName, column, value).pipe(map((records) => records && records.length > 0 ? records[0] : null));
+    }
+    getTableRecords(table) {
+        const tableName = this.cleanTableName(table);
+        return this.getDatabaseTable(tableName).pipe(switchMap((tableData) => {
+            if (!tableData) {
+                console.warn(`getTableRecords: Table '${tableName}' not found`);
+                return from([]);
+            }
+            return from(tableData.toArray());
+        }));
+    }
+    getTableRecord(table, id) {
+        const tableName = this.cleanTableName(table);
+        return this.getDatabaseTable(tableName).pipe(switchMap((tableData) => {
+            if (!tableData) {
+                console.warn(`getTableRecord: Table '${tableName}' not found`);
+                return from([null]);
+            }
+            return from(tableData.get(id)).pipe(map((record) => record || null));
+        }));
+    }
+    createTableRecord(table, record) {
+        const tableName = this.cleanTableName(table);
+        return this.createTableRecords(tableName, [record])
+            .pipe(map((item) => item ? item[0] : null));
+    }
+    createTableRecords(table, records) {
+        const tableName = this.cleanTableName(table);
+        // Keep full object payload; Dexie stores non-indexed properties as well.
+        const insertRecords = records.map((record) => {
+            const payload = { ...(record || {}) };
+            if (payload.id === undefined || payload.id === null || payload.id === '') {
+                delete payload.id;
+            }
+            return payload;
         });
-        this.dbReady = this.init();
+        const writeRecords = () => from(this.DBOpened()).pipe(switchMap((opened) => {
+            if (!opened) {
+                console.error(`createTableRecords: DB not open. Cannot write to '${tableName}'.`);
+                return EMPTY;
+            }
+            const tableInstance = this.tables.find(t => t.name === tableName);
+            if (!tableInstance) {
+                console.error(`createTableRecords: Table '${tableName}' does not exist in DB version ${this.verno}. Available:`, this.tables.map(t => t.name));
+                return EMPTY;
+            }
+            console.log(`createTableRecords: Bulk putting ${insertRecords.length} records into ${tableName}`);
+            return from(tableInstance.bulkPut(insertRecords)).pipe(map(() => insertRecords));
+        }));
+        return writeRecords().pipe(catchError((error) => {
+            if (!this.isMissingObjectStoreError(error)) {
+                throw error;
+            }
+            console.warn(`createTableRecords: Missing object store for '${tableName}'. Waiting for DB readiness and retrying once...`, error);
+            return from(this.createNewDatabase()).pipe(switchMap(() => writeRecords()), catchError((retryError) => {
+                console.error(`createTableRecords: Retry failed for '${tableName}'`, retryError);
+                throw retryError;
+            }));
+        }));
+    }
+    isMissingObjectStoreError(error) {
+        const name = String(error?.name || '').toLowerCase();
+        const innerName = String(error?.inner?.name || '').toLowerCase();
+        const message = String(error?.message || error?.inner?.message || '').toLowerCase();
+        return (name.includes('notfounderror') ||
+            innerName.includes('notfounderror') ||
+            message.includes('object store') ||
+            message.includes('one of the specified object stores was not found'));
+    }
+    updateTableRecord(table, record) {
+        const tableName = this.cleanTableName(table);
+        return this.updateTableRecords(tableName, [record])
+            .pipe(map(item => item.length > 0 ? item[0] : null));
+    }
+    updateTableRecords(table, records) {
+        const tableName = this.cleanTableName(table);
+        return this.getDatabaseTable(tableName).pipe(switchMap((tableData) => {
+            if (!tableData) {
+                console.warn(`updateTableRecords: Table '${tableName}' not found`);
+                return EMPTY;
+            }
+            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) {
+        const tableName = this.cleanTableName(table);
+        return this.deleteTableRecords(tableName, [id])
+            .pipe(map(item => item.length > 0 ? item[0] : null));
+    }
+    deleteTableRecords(table, ids) {
+        const tableName = this.cleanTableName(table);
+        return this.getDatabaseTable(tableName).pipe(switchMap((tableData) => {
+            return this.getDatabaseTableSchema(tableName).pipe(switchMap((schema) => {
+                console.log(`deleteTableRecords: Starting delete of ${ids.length} records from ${table}. IDs:`, ids);
+                return from(tableData.bulkDelete(ids)).pipe(map(() => ids));
+            }));
+        }));
     }
-    async init() {
+    clearTable(table) {
+        const tableName = this.cleanTableName(table);
+        console.log(`clearTable: Starting clear for table: ${tableName}`);
         try {
-            // Check if database already exists
-            const dbExists = await Dexie.exists(this.storageDB);
-            if (dbExists) {
-                // Database exists - just open it without declaring version
-                // This allows Dexie to use the existing schema and version
-                console.log(`Database "${this.storageDB}" already exists. Opening with existing schema...`);
-                if (!this.isOpen()) {
-                    await this.open();
-                }
-                console.log(`✅ Connected to existing database. Current version: ${this.verno}`);
-                console.log(`📊 Existing tables: ${this.getTables.join(', ')}`);
-            }
-            else {
-                // New database - initialize with empty schema at version 1
-                console.log(`Creating new database "${this.storageDB}"...`);
-                if (this.isOpen()) {
-                    this.close();
-                }
-                this.version(1).stores({});
-                await this.open();
-                console.log(`✅ New database initialized. Current version: ${this.verno}`);
+            const tableInstance = this.table(tableName);
+            if (!tableInstance) {
+                console.warn(`clearTable: Table '${tableName}' not found`);
+                return of([]);
             }
+            console.log(`clearTable: Clearing table '${tableName}'...`);
+            // Use table.clear() directly and wrap in Observable
+            return from(Promise.resolve().then(() => {
+                return tableInstance.clear();
+            })).pipe(tap(() => console.log(`clearTable: ✅ Table '${tableName}' cleared successfully`)), map(() => []));
         }
-        catch (err) {
-            console.error('Failed to initialize database:', err);
-            throw err;
-        }
-    }
-    async createNewDatabase() {
-        if (this.isOpen()) {
-            this.close();
+        catch (error) {
+            console.error(`clearTable: ❌ Error:`, error);
+            return of([]);
         }
-        await this.open();
     }
-    get vr() {
-        return this.verno;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DatabaseManagerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DatabaseManagerService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DatabaseManagerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class ChannelMessage {
+    constructor(messageId, channel, isReplay, sessionId = null, content = null, timestamp) {
+        this.messageId = messageId;
+        this.channel = channel;
+        this.isReplay = isReplay;
+        this.sessionId = sessionId;
+        this.content = content;
+        this.timestamp = timestamp;
     }
-    get nextVr() {
-        const v = this.verno;
-        return (isNaN(v) || v === 0) ? 1 : v + 1;
+    static adapt(item) {
+        return new ChannelMessage(item?.messageId, item?.channel, item?.isReplay, item?.sessionId || item?.id, // Support both for backward compatibility
+        item?.content, item?.timestamp);
     }
-    get getTables() {
-        return this.tables.map((table) => table.name);
+}
+
+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);
     }
-    async hasDatabase() {
-        return await Dexie.exists(this.storageDB);
+    clearTracking(resetSessionInit = false) {
+        this.state = { paths: {} };
+        this.localStorageManager.deleteStore({ name: TRACKER_STORE_NAME });
+        if (resetSessionInit && this.hasSessionStorage()) {
+            sessionStorage.removeItem(TRACKER_SESSION_INIT_KEY);
+        }
     }
-    getTable(tableName) {
-        try {
-            return this.table(tableName);
+    checkRequestOptions(requestOptions = [], options = {}) {
+        this.ensureStateRestored();
+        const normalized = this.normalizeRequestOptions(requestOptions);
+        if (!normalized.pathKey)
+            return false;
+        this.cleanupExpiredEntries();
+        if (!normalized.hasQuery) {
+            const pathState = this.ensurePathState(normalized.pathKey);
+            const pathSeenBefore = !!pathState.baselineQuery;
+            if (!pathSeenBefore) {
+                pathState.baselineQuery = {};
+                this.persistState();
+            }
+            return !pathSeenBefore;
         }
-        catch (error) {
-            return undefined;
+        if (options.mode === 'exact') {
+            return this.checkExact(normalized, options);
         }
+        return this.checkVariation(normalized, options);
     }
-    tableExists(tableName) {
-        return this.tables.some(t => t.name === tableName);
+    matchesPath(requestOptions = [], expectedPathOptions = []) {
+        this.ensureStateRestored();
+        const requestPath = this.normalizeRequestOptions(requestOptions).pathKey;
+        const expectedPath = this.normalizeRequestOptions(expectedPathOptions).pathKey;
+        return Boolean(requestPath) && requestPath === expectedPath;
     }
-    async updateTable(tableName, find, data) {
-        const table = this.getTable(tableName);
-        if (!table || !find || !find.key)
+    checkExact(normalized, options) {
+        const pathState = this.ensurePathState(normalized.pathKey);
+        const filteredQuery = this.filterQueryByWatchParams(normalized.query, options.watchParams);
+        if (Object.keys(filteredQuery).length === 0) {
             return false;
-        try {
-            const count = await table.where(find.key).equals(find.value).modify(data);
-            return count > 0;
         }
-        catch (error) {
-            console.error('Error updating table:', error);
-            return false;
+        if (!pathState.baselineQuery) {
+            pathState.baselineQuery = filteredQuery;
+            this.persistState();
+            return true;
         }
+        return this.stringifyQuery(pathState.baselineQuery) !== this.stringifyQuery(filteredQuery);
     }
-    async createTable(tableName, schema) {
-        if (!tableName || !schema)
-            return;
-        this.dbReady = this.dbReady.then(() => this._doCreateTable(tableName, schema));
-        await this.dbReady;
-    }
-    async _doCreateTable(tableName, schema) {
-        const safeTableName = this.cleanTableName(tableName);
-        const safeSchema = schema.trim();
-        const currentSchema = this.getCurrentSchema();
-        const existingSchema = currentSchema[safeTableName]?.trim();
-        if (this.tableExists(safeTableName) && existingSchema === safeSchema) {
-            return;
+    checkVariation(normalized, options) {
+        const pathState = this.ensurePathState(normalized.pathKey);
+        if (Array.isArray(options.watchParams) && options.watchParams.length === 0) {
+            const pathSeenBefore = !!pathState.baselineQuery;
+            if (!pathSeenBefore) {
+                pathState.baselineQuery = {};
+                pathState.watchExpiresAt = this.buildExpiryEpoch(typeof options.watchExpiresAt !== 'undefined' ? options.watchExpiresAt : options.watchParamsExpire);
+                this.persistState();
+            }
+            return !pathSeenBefore;
         }
-        console.log('Current Schema before update:', currentSchema);
-        currentSchema[safeTableName] = safeSchema;
-        const nextVersion = this.verno + 1;
-        console.log(`Creating table ${safeTableName}. Upgrading to version ${nextVersion}. New Schema:`, currentSchema);
-        if (this.isOpen()) {
-            this.close();
+        const filteredQuery = this.filterQueryByWatchParams(normalized.query, options.watchParams);
+        const keys = Object.keys(filteredQuery);
+        if (keys.length === 0) {
+            return false;
         }
-        this.version(nextVersion).stores(currentSchema);
-        try {
-            await this.open();
-            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`);
+        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;
             }
-            else {
-                console.log(`Database opened successfully version ${this.verno}. Table ${safeTableName} verified.`);
+        });
+        if (accepted) {
+            if (!pathState.baselineQuery) {
+                pathState.baselineQuery = filteredQuery;
             }
+            pathState.watchExpiresAt = this.buildExpiryEpoch(typeof options.watchExpiresAt !== 'undefined' ? options.watchExpiresAt : options.watchParamsExpire);
+            this.persistState();
         }
-        catch (err) {
-            console.error('Error opening database after schema update:', err);
-            throw err;
-        }
+        return accepted;
     }
-    async DBOpened() {
-        try {
-            await this.dbReady;
-            return this.isOpen();
-        }
-        catch (err) {
-            console.error('DBOpened: init failed', err);
-            return false;
+    filterQueryByWatchParams(query, watchParams) {
+        if (!Array.isArray(watchParams)) {
+            return query;
         }
-    }
-    getCurrentSchema() {
-        const schema = {};
-        if (!this.tables || this.tables.length === 0) {
-            return schema;
+        if (watchParams.length === 0) {
+            return {};
         }
-        this.tables.forEach(table => {
-            const primKey = table.schema.primKey;
-            const indexes = table.schema.indexes;
-            let schemaStr = "";
-            if (primKey.auto)
-                schemaStr += "++";
-            if (Array.isArray(primKey.keyPath)) {
-                schemaStr += `[${primKey.keyPath.join('+')}]`;
-            }
-            else {
-                schemaStr += primKey.keyPath || "";
+        const normalizedWatchParams = watchParams.map((p) => this.normalizeParamKey(p));
+        return Object.keys(query).reduce((acc, key) => {
+            if (normalizedWatchParams.includes(key)) {
+                acc[key] = query[key];
             }
-            indexes.forEach(idx => {
-                schemaStr += ",";
-                if (idx.unique)
-                    schemaStr += "&";
-                if (idx.multi)
-                    schemaStr += "*";
-                if (Array.isArray(idx.keyPath)) {
-                    schemaStr += `[${idx.keyPath.join('+')}]`;
+            return acc;
+        }, {});
+    }
+    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);
                 }
-                else {
-                    schemaStr += idx.keyPath || "";
+                if (Object.keys(parsed.queryObject).length > 0) {
+                    queryObjects.push(parsed.queryObject);
                 }
-            });
-            schema[table.name] = schemaStr;
+            }
         });
-        return schema;
-    }
-    cleanTableName(str) {
-        return str
-            .replace(/[^a-zA-Z0-9\s_]/g, '')
-            .replace(/\s+/g, '_')
-            .trim()
-            .toLowerCase();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DbService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DbService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DbService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [] });
-
-class DatabaseManagerService extends DbService {
-    constructor() {
-        super();
-    }
-    getDatabaseTables() {
-        return from(this.DBOpened()).pipe(map(() => this.tables.map((item) => item.name)));
-    }
-    databaseExists() {
-        return from(this.hasDatabase());
-    }
-    hasDatabaseTable(table) {
-        const tableName = this.cleanTableName(table);
-        return from(this.DBOpened()).pipe(map(() => {
-            return this.tableExists(tableName);
-        }));
+        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,
+        };
     }
-    getDatabaseTable(table) {
-        const tableName = this.cleanTableName(table);
-        return from(this.DBOpened()).pipe(map(() => {
-            const found = this.getTable(tableName);
-            if (!found) {
-                console.warn('No Such Table:', tableName);
-                return null;
-            }
-            return found;
-        }));
+    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,
+        };
     }
-    getDatabaseTableSchema(table) {
-        const tableName = this.cleanTableName(table);
-        return this.getDatabaseTable(tableName).pipe(map((dbTable) => {
-            if (!dbTable)
-                return [];
-            const cols = dbTable.schema.indexes.map((col) => col.name);
-            const pri = dbTable.schema.primKey.name;
-            return [pri, ...cols];
-        }));
+    safeDecode(value) {
+        if (typeof value === 'undefined') {
+            return '';
+        }
+        try {
+            return decodeURIComponent(value);
+        }
+        catch {
+            return String(value);
+        }
     }
-    createDatabaseTable(tableDef) {
-        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);
-        }));
+    normalizePath(pathSegments) {
+        return pathSegments
+            .map((segment) => String(segment).trim())
+            .filter((segment) => segment.length > 0)
+            .join('/')
+            .replace(/([^:]\/+)\/+/g, '$1')
+            .replace(/^\//, '')
+            .replace(/\/$/, '');
     }
-    updateDatabaseTableSchema(tableDef) {
-        return from(this.createTable(tableDef.table, tableDef.schema)).pipe(switchMap(() => this.getDatabaseTable(tableDef.table)));
+    normalizeParamKey(key) {
+        return String(key).trim().toLowerCase();
     }
-    // CRUD
-    findTableRecords(table, column, value) {
-        const tableName = this.cleanTableName(table);
-        return this.getDatabaseTable(tableName).pipe(switchMap((tableData) => {
-            if (!tableData) {
-                console.warn(`findTableRecords: Table '${tableName}' not found`);
-                return from([]);
-            }
-            return from(tableData.where(column).equals(value).toArray());
-        }));
+    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();
     }
-    findTableRecord(table, column, value) {
-        const tableName = this.cleanTableName(table);
-        return this.findTableRecords(tableName, column, value).pipe(map((records) => records && records.length > 0 ? records[0] : null));
+    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;
     }
-    getTableRecords(table) {
-        const tableName = this.cleanTableName(table);
-        return this.getDatabaseTable(tableName).pipe(switchMap((tableData) => {
-            if (!tableData) {
-                console.warn(`getTableRecords: Table '${tableName}' not found`);
-                return from([]);
-            }
-            return from(tableData.toArray());
-        }));
+    resetPathStateIfExpired(pathState) {
+        const now = Math.floor(Date.now() / 1000);
+        if (pathState.watchExpiresAt && pathState.watchExpiresAt <= now) {
+            pathState.consumedValuesByKey = {};
+            pathState.watchExpiresAt = undefined;
+        }
     }
-    getTableRecord(table, id) {
-        const tableName = this.cleanTableName(table);
-        return this.getDatabaseTable(tableName).pipe(switchMap((tableData) => {
-            if (!tableData) {
-                console.warn(`getTableRecord: Table '${tableName}' not found`);
-                return from([null]);
+    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;
             }
-            return from(tableData.get(id)).pipe(map((record) => record || null));
-        }));
-    }
-    createTableRecord(table, record) {
-        const tableName = this.cleanTableName(table);
-        return this.createTableRecords(tableName, [record])
-            .pipe(map((item) => item ? item[0] : null));
-    }
-    createTableRecords(table, records) {
-        const tableName = this.cleanTableName(table);
-        // Keep full object payload; Dexie stores non-indexed properties as well.
-        const insertRecords = records.map((record) => {
-            const payload = { ...(record || {}) };
-            if (payload.id === undefined || payload.id === null || payload.id === '') {
-                delete payload.id;
+            const hasBaseline = pathState.baselineQuery !== undefined;
+            const hasTrackedValues = Object.keys(pathState.consumedValuesByKey).some((key) => (pathState.consumedValuesByKey[key] || []).length > 0);
+            if (!hasBaseline && !hasTrackedValues) {
+                delete this.state.paths[pathKey];
             }
-            return payload;
         });
-        const writeRecords = () => from(this.DBOpened()).pipe(switchMap((opened) => {
-            if (!opened) {
-                console.error(`createTableRecords: DB not open. Cannot write to '${tableName}'.`);
-                return EMPTY;
-            }
-            const tableInstance = this.tables.find(t => t.name === tableName);
-            if (!tableInstance) {
-                console.error(`createTableRecords: Table '${tableName}' does not exist in DB version ${this.verno}. Available:`, this.tables.map(t => t.name));
-                return EMPTY;
-            }
-            console.log(`createTableRecords: Bulk putting ${insertRecords.length} records into ${tableName}`);
-            return from(tableInstance.bulkPut(insertRecords)).pipe(map(() => insertRecords));
-        }));
-        return writeRecords().pipe(catchError((error) => {
-            if (!this.isMissingObjectStoreError(error)) {
-                throw error;
-            }
-            console.warn(`createTableRecords: Missing object store for '${tableName}'. Waiting for DB readiness and retrying once...`, error);
-            return from(this.createNewDatabase()).pipe(switchMap(() => writeRecords()), catchError((retryError) => {
-                console.error(`createTableRecords: Retry failed for '${tableName}'`, retryError);
-                throw retryError;
-            }));
-        }));
     }
-    isMissingObjectStoreError(error) {
-        const name = String(error?.name || '').toLowerCase();
-        const innerName = String(error?.inner?.name || '').toLowerCase();
-        const message = String(error?.message || error?.inner?.message || '').toLowerCase();
-        return (name.includes('notfounderror') ||
-            innerName.includes('notfounderror') ||
-            message.includes('object store') ||
-            message.includes('one of the specified object stores was not found'));
+    ensurePathState(pathKey) {
+        if (!this.state.paths[pathKey]) {
+            this.state.paths[pathKey] = {
+                consumedValuesByKey: {},
+            };
+        }
+        return this.state.paths[pathKey];
     }
-    updateTableRecord(table, record) {
-        const tableName = this.cleanTableName(table);
-        return this.updateTableRecords(tableName, [record])
-            .pipe(map(item => item.length > 0 ? item[0] : null));
+    ensureStateRestored() {
+        if (this.stateRestored) {
+            return;
+        }
+        this.stateRestored = true;
+        this.restoreState();
     }
-    updateTableRecords(table, records) {
-        const tableName = this.cleanTableName(table);
-        return this.getDatabaseTable(tableName).pipe(switchMap((tableData) => {
-            if (!tableData) {
-                console.warn(`updateTableRecords: Table '${tableName}' not found`);
-                return EMPTY;
-            }
-            const insertRecords = records.map((record) => {
-                const payload = { ...(record || {}) };
-                if (payload.id === undefined || payload.id === null || payload.id === '') {
-                    delete payload.id;
+    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;
                 }
-                return payload;
+                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,
             });
-            return from(tableData.bulkPut(insertRecords)).pipe(map(() => insertRecords));
-        }));
+        });
     }
-    deleteTableRecord(table, id) {
-        const tableName = this.cleanTableName(table);
-        return this.deleteTableRecords(tableName, [id])
-            .pipe(map(item => item.length > 0 ? item[0] : null));
+    stringifyQuery(query) {
+        return JSON.stringify(Object.keys(query)
+            .sort()
+            .reduce((acc, key) => {
+            acc[key] = query[key];
+            return acc;
+        }, {}));
     }
-    deleteTableRecords(table, ids) {
-        const tableName = this.cleanTableName(table);
-        return this.getDatabaseTable(tableName).pipe(switchMap((tableData) => {
-            return this.getDatabaseTableSchema(tableName).pipe(switchMap((schema) => {
-                console.log(`deleteTableRecords: Starting delete of ${ids.length} records from ${table}. IDs:`, ids);
-                return from(tableData.bulkDelete(ids)).pipe(map(() => ids));
-            }));
-        }));
+    isTrackerState(value) {
+        return this.isPlainObject(value) && this.isPlainObject(value.paths);
     }
-    clearTable(table) {
-        const tableName = this.cleanTableName(table);
-        console.log(`clearTable: Starting clear for table: ${tableName}`);
+    isPlainObject(value) {
+        return Object.prototype.toString.call(value) === '[object Object]';
+    }
+    hasSessionStorage() {
         try {
-            const tableInstance = this.table(tableName);
-            if (!tableInstance) {
-                console.warn(`clearTable: Table '${tableName}' not found`);
-                return of([]);
-            }
-            console.log(`clearTable: Clearing table '${tableName}'...`);
-            // Use table.clear() directly and wrap in Observable
-            return from(Promise.resolve().then(() => {
-                return tableInstance.clear();
-            })).pipe(tap(() => console.log(`clearTable: ✅ Table '${tableName}' cleared successfully`)), map(() => []));
+            return typeof sessionStorage !== 'undefined';
         }
-        catch (error) {
-            console.error(`clearTable: ❌ Error:`, error);
-            return of([]);
+        catch {
+            return false;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DatabaseManagerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DatabaseManagerService, providedIn: 'root' }); }
+    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: DatabaseManagerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: QueryParamsTrackerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [] });
-
-class ChannelMessage {
-    constructor(messageId, channel, isReplay, sessionId = null, content = null, timestamp) {
-        this.messageId = messageId;
-        this.channel = channel;
-        this.isReplay = isReplay;
-        this.sessionId = sessionId;
-        this.content = content;
-        this.timestamp = timestamp;
-    }
-    static adapt(item) {
-        return new ChannelMessage(item?.messageId, item?.channel, item?.isReplay, item?.sessionId || item?.id, // Support both for backward compatibility
-        item?.content, item?.timestamp);
-    }
-}
+        }] });
 
 const API_OPTS = new InjectionToken('API_OPTS');
 /**
@@ -6570,9 +6561,9 @@ 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.queryParamsTrackerService = inject(QueryParamsTrackerService);
         this.error$ = this.httpManagerService.error$;
         this.isPending$ = this.httpManagerService.isPending$.pipe(delay(1));
         this.operationSuccess = new BehaviorSubject(null);
@@ -7004,15 +6995,15 @@ class HTTPManagerStateService extends ComponentStore {
                     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: tableName,
-                            data: { ...this.databaseOptions, ...{ expires: this.utils.expires(this.databaseOptions.expiresIn) } }
-                        });
                         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) => {
+                            this.localStorageManagerService.updateStore({
+                                name: tableName,
+                                data: { ...(storeData || {}), ...this.databaseOptions, expires: this.utils.expires(this.databaseOptions.expiresIn) }
+                            });
                             const storedSchemaSignature = this.getStoredSchemaSignature(storeData);
                             const schemaChanged = !!storedSchemaSignature && storedSchemaSignature !== schemaSignature;
                             const ensureTable$ = schemaChanged
@@ -7064,12 +7055,7 @@ class HTTPManagerStateService extends ComponentStore {
                                 return fetchFromAPI();
                             }
                             if (hasExpired) {
-                                return this.dbManagerService.clearTable(this.databaseOptions.table).pipe(switchMap(() => fetchFromAPI()), tap(() => {
-                                    this.localStorageManagerService.updateStore({
-                                        name: this.databaseOptions.table,
-                                        data: { ...this.databaseOptions, ...{ expires: this.utils.expires(this.databaseOptions.expiresIn) } }
-                                    });
-                                }));
+                                return this.dbManagerService.clearTable(this.databaseOptions.table).pipe(switchMap(() => fetchFromAPI()));
                             }
                             const expectedSchema = this.buildSchemaFromAdapter();
                             const expectedSchemaSignature = this.buildSchemaSignature(expectedSchema);
@@ -7077,12 +7063,9 @@ class HTTPManagerStateService extends ComponentStore {
                                 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 hasTrackerConfig = Array.isArray(options?.watchParams) && options.watchParams.length > 0;
-                            if (hasTrackerConfig) {
-                                const trackerAllowsRequest = this.queryParamsTrackerService.checkRequestOptions(this.resolvePath(effectiveParams), this.buildQueryTrackerOptions(options));
-                                if (trackerAllowsRequest) {
-                                    return fetchFromAPI();
-                                }
+                            const trackerAllowsRequest = this.checkTrackerAllowsRequest(this.databaseOptions.table, this.resolvePath(effectiveParams), options, storeData);
+                            if (trackerAllowsRequest) {
+                                return fetchFromAPI();
                             }
                             return this.dbManagerService.getTableRecords(this.databaseOptions.table).pipe(switchMap((dbData) => {
                                 if (Array.isArray(dbData) && dbData.length > 0) {
@@ -7266,26 +7249,23 @@ class HTTPManagerStateService extends ComponentStore {
                     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 hasTrackerConfig = Array.isArray(options?.watchParams) && options.watchParams.length > 0;
-                    if (hasTrackerConfig) {
-                        const trackerAllowsRequest = this.queryParamsTrackerService.checkRequestOptions(this.resolvePath(effectiveParams), this.buildQueryTrackerOptions(options));
-                        if (!trackerAllowsRequest) {
-                            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 });
-                            }));
-                        }
+                    const trackerAllowsRequest = this.checkTrackerAllowsRequest(this.databaseOptions.table, this.resolvePath(effectiveParams), options, storeData);
+                    if (!trackerAllowsRequest) {
+                        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 })));
@@ -7646,14 +7626,14 @@ class HTTPManagerStateService extends ComponentStore {
         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) => {
+            this.localStorageManagerService.updateStore({
+                name: tableName,
+                data: { ...(storeData || {}), ...this.databaseOptions, expires: this.utils.expires(this.databaseOptions.expiresIn) }
+            });
             const storedSchemaSignature = this.getStoredSchemaSignature(storeData);
             const schemaChanged = !!storedSchemaSignature && storedSchemaSignature !== schemaSignature;
             const ensureTable$ = schemaChanged
@@ -7988,12 +7968,6 @@ 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));
@@ -8108,12 +8082,176 @@ class HTTPManagerStateService extends ComponentStore {
                 return;
             const updated = { ...(storeData || {}) };
             delete updated.requestCache;
+            delete updated.tracker;
             this.localStorageManagerService.updateStore({
                 name: tableName,
                 data: updated
             });
         })).subscribe();
     }
+    getTrackerState(storeData) {
+        if (storeData?.tracker && typeof storeData.tracker === 'object') {
+            return {
+                consumedValuesByKey: storeData.tracker.consumedValuesByKey || {},
+                trackingExpires: storeData.tracker.trackingExpires ?? null,
+            };
+        }
+        return { consumedValuesByKey: {}, trackingExpires: null };
+    }
+    saveTrackerState(tableName, consumedValuesByKey, trackingExpires) {
+        this.localStorageManagerService.store$(tableName).pipe(take(1), tap((storeData) => {
+            this.localStorageManagerService.updateStore({
+                name: tableName,
+                data: { ...(storeData || {}), tracker: { consumedValuesByKey, trackingExpires } }
+            });
+        })).subscribe();
+    }
+    trackerNormalizePath(path) {
+        const pathSegments = [];
+        const query = {};
+        path.forEach((segment) => {
+            if (segment && typeof segment === 'object' && !Array.isArray(segment)) {
+                Object.keys(segment).forEach((key) => {
+                    query[this.trackerNormalizeParamKey(key)] = this.trackerNormalizeParamValue(segment[key]);
+                });
+            }
+            else {
+                const parsed = this.trackerParsePathSegment(String(segment));
+                pathSegments.push(parsed.pathSegment);
+                Object.keys(parsed.queryObject).forEach((key) => {
+                    query[this.trackerNormalizeParamKey(key)] = this.trackerNormalizeParamValue(parsed.queryObject[key]);
+                });
+            }
+        });
+        return {
+            pathKey: this.trackerNormalizePathSegments(pathSegments),
+            query,
+            hasQuery: Object.keys(query).length > 0,
+        };
+    }
+    trackerParsePathSegment(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.trackerSafeDecode(rawKey).trim();
+                const value = this.trackerSafeDecode(rawValueParts.join('=')).trim();
+                if (!key)
+                    return;
+                queryObject[key] = value;
+            });
+        }
+        return { pathSegment: pathPart, queryObject };
+    }
+    trackerSafeDecode(value) {
+        if (typeof value === 'undefined')
+            return '';
+        try {
+            return decodeURIComponent(value);
+        }
+        catch {
+            return String(value);
+        }
+    }
+    trackerNormalizePathSegments(pathSegments) {
+        return pathSegments
+            .map((segment) => String(segment).trim())
+            .filter((segment) => segment.length > 0)
+            .join('/')
+            .replace(/([^:]\/+)\/+/g, '$1')
+            .replace(/^\//, '')
+            .replace(/\/$/, '');
+    }
+    trackerNormalizeParamKey(key) {
+        return String(key).trim().toLowerCase();
+    }
+    trackerNormalizeParamValue(value) {
+        if (Array.isArray(value)) {
+            return value.map((item) => this.trackerNormalizeParamValue(item)).join(',');
+        }
+        if (Object.prototype.toString.call(value) === '[object Object]') {
+            return JSON.stringify(Object.keys(value).sort().reduce((acc, k) => {
+                acc[this.trackerNormalizeParamKey(k)] = this.trackerNormalizeParamValue(value[k]);
+                return acc;
+            }, {}));
+        }
+        return String(value).trim().toLowerCase();
+    }
+    trackerFilterQuery(query, ignoreQueryParams) {
+        if (!Array.isArray(ignoreQueryParams))
+            return { ...query };
+        if (ignoreQueryParams.length === 0)
+            return {};
+        const result = {};
+        ignoreQueryParams.forEach((param) => {
+            const key = this.trackerNormalizeParamKey(param);
+            if (Object.prototype.hasOwnProperty.call(query, key)) {
+                result[key] = query[key];
+            }
+        });
+        return result;
+    }
+    trackerBuildExpiryEpoch(expireIn) {
+        if (typeof expireIn === 'undefined' || expireIn === null || expireIn === '')
+            return null;
+        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 null;
+        const toSeconds = { y: 31556926, w: 604800, d: 86400, hr: 3600, h: 3600, mn: 60, min: 60, m: 60, s: 1 };
+        const seconds = toSeconds[parsed[2]];
+        if (!seconds)
+            return null;
+        return Math.floor(Date.now() / 1000) + Number(parsed[1]) * seconds;
+    }
+    checkTrackerAllowsRequest(tableName, path, options, storeData) {
+        if (options?.watchParams) {
+            return this.queryParamsTrackerService.checkRequestOptions(path, {
+                watchParams: options.watchParams,
+                watchExpiresAt: options?.watchExpiresAt,
+            });
+        }
+        const normalized = this.trackerNormalizePath(path);
+        const ignoreQueryParams = Array.isArray(options?.ignoreQueryParams) ? options.ignoreQueryParams : [];
+        if (!normalized.hasQuery || ignoreQueryParams.length === 0) {
+            return !this.getRequestCacheMetadata(storeData, 'GET');
+        }
+        const filtered = this.trackerFilterQuery(normalized.query, ignoreQueryParams);
+        const keys = Object.keys(filtered);
+        if (keys.length === 0) {
+            return !this.getRequestCacheMetadata(storeData, 'GET');
+        }
+        const tracker = this.getTrackerState(storeData);
+        const now = Math.floor(Date.now() / 1000);
+        if (tracker.trackingExpires && tracker.trackingExpires <= now) {
+            tracker.consumedValuesByKey = {};
+            tracker.trackingExpires = null;
+        }
+        let accepted = false;
+        keys.forEach(key => {
+            const value = filtered[key];
+            const consumed = tracker.consumedValuesByKey[key] || [];
+            if (!consumed.includes(value)) {
+                tracker.consumedValuesByKey[key] = [...consumed, value];
+                accepted = true;
+            }
+        });
+        if (accepted) {
+            const newExpiry = this.trackerBuildExpiryEpoch(options?.queryParamsExpiresIn);
+            if (newExpiry !== null) {
+                tracker.trackingExpires = newExpiry;
+            }
+            this.saveTrackerState(tableName, tracker.consumedValuesByKey, tracker.trackingExpires);
+        }
+        return accepted;
+    }
     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 }); }
 }
@@ -9604,8 +9742,8 @@ class RequestManagerStateDemoComponent {
             database: this.fb.group({
                 table: [''],
                 expiresIn: ['1m'],
-                watchParams: [''],
-                watchExpiresAt: ['never'],
+                ignoreQueryParams: [''],
+                queryParamsExpiresIn: ['never'],
             })
         });
         this.sampleAdaptors = [
@@ -9778,8 +9916,8 @@ class RequestManagerStateDemoComponent {
             path,
             headers,
             forceRefresh: false,
-            watchParams: isDbEnabled ? this.parseWatchParams(dbValue?.watchParams) : [],
-            watchExpiresAt: isDbEnabled ? this.normalizeWatchExpiry(dbValue?.watchExpiresAt) : undefined,
+            ignoreQueryParams: isDbEnabled ? this.parseWatchParams(dbValue?.ignoreQueryParams) : [],
+            queryParamsExpiresIn: isDbEnabled ? this.normalizeWatchExpiry(dbValue?.queryParamsExpiresIn) : undefined,
         });
     }
     onSetStateOptions() {
@@ -9864,11 +10002,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 }, { 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" }] }); }
+    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=\"ignoreQueryParams\" value=\"\">\n              </mat-form-field>\n              <mat-form-field appearance=\"outline\">\n                <mat-label>Watch Param Expiry</mat-label>\n                <mat-select formControlName=\"queryParamsExpiresIn\">\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 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"] }]
+            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=\"ignoreQueryParams\" value=\"\">\n              </mat-form-field>\n              <mat-form-field appearance=\"outline\">\n                <mat-label>Watch Param Expiry</mat-label>\n                <mat-select formControlName=\"queryParamsExpiresIn\">\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: [{
@@ -12730,5 +12868,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, 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 };
+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, 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