http-request-manager 18.15.32 → 18.15.33

package/fesm2022/http-request-manager.mjs

@@ -4,10 +4,11 @@ import { ComponentStore } from '@ngrx/component-store';
 import { map, catchError, filter, take, tap, finalize, takeWhile, retry, startWith, mergeMap, takeUntil, concatMap, toArray, withLatestFrom, switchMap, delay, scan, distinctUntilChanged } from 'rxjs/operators';
 import { HttpClient, HttpHeaders, HttpEventType, HttpHeaderResponse, HttpErrorResponse, HTTP_INTERCEPTORS } from '@angular/common/http';
 import * as CryptoJS from 'crypto-js';
-import { from, BehaviorSubject, EMPTY, timer, throwError, defer, interval, Subject, of, merge, Subscription, take as take$1, catchError as catchError$1, map as map$1, tap as tap$1, switchMap as switchMap$1, startWith as startWith$1, distinctUntilChanged as distinctUntilChanged$1, combineLatest, filter as filter$1, takeUntil as takeUntil$1, ReplaySubject } from 'rxjs';
+import { from, BehaviorSubject, EMPTY, timer, throwError, defer, interval, Subject, of, merge, Subscription, take as take$1, firstValueFrom, catchError as catchError$1, map as map$1, tap as tap$1, switchMap as switchMap$1, startWith as startWith$1, distinctUntilChanged as distinctUntilChanged$1, combineLatest, filter as filter$1, takeUntil as takeUntil$1, ReplaySubject } from 'rxjs';
 import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ToastMessageDisplayService, ToastDisplay, ToastColors, ToastMessageDisplayModule } from 'toast-message-display';
 import Dexie from 'dexie';
+import { Parser } from 'node-sql-parser/build/mysql';
 import * as i1 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
 import * as i1$1 from '@angular/common';
@@ -5287,7 +5288,7 @@ class LocalStorageManagerService extends ComponentStore {
                     ? [...data.localStores].reverse().find(item => item.id === foundStore.id)
                     : [...data.sessionStores].reverse().find(item => item.id === foundStore.id);
                 if (!found) {
-                    console.warn('[CacheDebug] store$: settings entry found but no data entry in localStores/sessionStores', { store, foundStoreId: foundStore.id, storageType: foundStore.options?.storage });
+                    // console.warn('[CacheDebug] store$: settings entry found but no data entry in localStores/sessionStores', { store, foundStoreId: foundStore.id, storageType: foundStore.options?.storage })
                     this.deleteStore({ name: store });
                     return;
                 }
@@ -5344,7 +5345,7 @@ class LocalStorageManagerService extends ComponentStore {
             const hasStore = this.hasGlobalStorage(type, store.id);
             store.name = this.validStoreName(store.name);
             if (!hasStore) {
-                console.warn(`No such Store: ${store.name}`);
+                // console.warn(`No such Store: ${store.name}`)
                 return state;
             }
             else {
@@ -5398,23 +5399,14 @@ class LocalStorageManagerService extends ComponentStore {
             store.name = this.validStoreName(store.name);
             const settings = [...state.settings].reverse().find(item => item.name === store.name);
             if (settings) {
-                const type = settings.options?.storage;
-                const hasStore = this.hasGlobalStorage(type, settings.id || '');
-                if (!hasStore) {
-                    console.warn(`No such Store: ${store.name}`);
-                }
-                else {
-                    const dataStr = (settings.options?.encrypted) ? this.encryption.encrypt(store.data, this.app.appID) : store.data;
-                    const localData = (dataStr && settings.options?.storage === StorageType.GLOBAL) ? [{ data: dataStr, id: settings.id }] : [];
-                    const sessionData = (dataStr && settings.options?.storage === StorageType.SESSION) ? [{ data: dataStr, id: settings.id }] : [];
-                    state.localStores = state.localStores.filter(item => item.id !== settings.id);
-                    state.sessionStores = state.sessionStores.filter(item => item.id !== settings.id);
-                    return {
-                        ...state,
-                        localStores: [...state.localStores, ...localData],
-                        sessionStores: [...state.sessionStores, ...sessionData],
-                    };
-                }
+                const dataStr = (settings.options?.encrypted) ? this.encryption.encrypt(store.data, this.app.appID) : store.data;
+                const localData = (dataStr && settings.options?.storage === StorageType.GLOBAL) ? [{ data: dataStr, id: settings.id }] : [];
+                const sessionData = (dataStr && settings.options?.storage === StorageType.SESSION) ? [{ data: dataStr, id: settings.id }] : [];
+                return {
+                    ...state,
+                    localStores: [...state.localStores.filter(item => item.id !== settings.id), ...localData],
+                    sessionStores: [...state.sessionStores.filter(item => item.id !== settings.id), ...sessionData],
+                };
             }
             return state;
         });
@@ -5434,7 +5426,7 @@ class LocalStorageManagerService extends ComponentStore {
                 };
             }
             else {
-                console.warn(`No such Store: ${store.name}`);
+                // console.warn(`No such Store: ${store.name}`)
                 return state;
             }
         });
@@ -5593,9 +5585,15 @@ class LocalStorageManagerService extends ComponentStore {
      */
     clearAllStoredData() {
         try {
-            localStorage.removeItem(this.storageSettingsName);
-            localStorage.removeItem(this.storageName);
-            sessionStorage.removeItem(this.storageName);
+            // Use resetStore() instead of directly removing raw localStorage keys.
+            // clearAllStoredData previously only removed the raw localStorage entries, leaving
+            // the ComponentStore's in-memory BehaviorSubject untouched. Any subsequent call to
+            // store$(name) would read from the in-memory state and return the old (stale) data,
+            // because store$ is a ComponentStore selector — it reads from in-memory state, not
+            // from raw localStorage. This caused stale requestCache / queryParams to persist
+            // after a deleteDatabase() call, blocking all subsequent API requests.
+            // resetStore() correctly updates both the in-memory state AND persists to localStorage.
+            this.resetStore();
             console.log('Cleared all stored data');
         }
         catch (error) {
@@ -6493,8 +6491,8 @@ class DatabaseManagerService extends DbService {
         }
     }
     clearDatabase() {
-        from(this.delete()).pipe(tap(() => this.localStorageManager.clearAllStoredData()), map(() => true), catchError((error) => {
-            console.error('clearDatabase: ❌ Error deleting database:', error);
+        this.deleteAndReinitialize().pipe(tap(() => this.localStorageManager.clearAllStoredData()), catchError((error) => {
+            console.error('clearDatabase: ❌ Error clearing database:', error);
             return of(false);
         })).subscribe();
     }
@@ -6526,347 +6524,7 @@ class ChannelMessage {
     }
 }
 
-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);
-        this.ready$ = new BehaviorSubject(false);
-    }
-    clearTracking(resetSessionInit = false) {
-        this.state = { paths: {} };
-        this.localStorageManager.deleteStore({ name: TRACKER_STORE_NAME });
-        if (resetSessionInit && this.hasSessionStorage()) {
-            sessionStorage.removeItem(TRACKER_SESSION_INIT_KEY);
-        }
-    }
-    clearTrackingForPath(pathKey) {
-        this.ensureStateRestored();
-        if (this.state.paths[pathKey]) {
-            delete this.state.paths[pathKey];
-            this.persistState();
-        }
-    }
-    checkRequestOptions(requestOptions = [], options = {}) {
-        this.ensureStateRestored();
-        if (!this.ready$.value) {
-            return true;
-        }
-        const normalized = this.normalizeRequestOptions(requestOptions);
-        if (!normalized.pathKey)
-            return false;
-        this.cleanupExpiredEntries();
-        if (!normalized.hasQuery) {
-            const pathState = this.ensurePathState(normalized.pathKey);
-            const pathSeenBefore = Object.keys(pathState.consumedValuesByKey).length > 0;
-            if (!pathSeenBefore) {
-                this.persistState();
-            }
-            return !pathSeenBefore;
-        }
-        if (options.mode === 'exact') {
-            return this.checkExact(normalized, options);
-        }
-        return this.checkVariation(normalized, options);
-    }
-    matchesPath(requestOptions = [], expectedPathOptions = []) {
-        this.ensureStateRestored();
-        const requestPath = this.normalizeRequestOptions(requestOptions).pathKey;
-        const expectedPath = this.normalizeRequestOptions(expectedPathOptions).pathKey;
-        return Boolean(requestPath) && requestPath === expectedPath;
-    }
-    checkExact(normalized, options) {
-        const pathState = this.ensurePathState(normalized.pathKey);
-        const filteredQuery = this.filterQueryByWatchParams(normalized.query, options.watchParams);
-        if (Object.keys(filteredQuery).length === 0) {
-            return false;
-        }
-        const hash = this.stringifyQuery(filteredQuery);
-        const consumed = pathState.consumedValuesByKey['__exact__'] || [];
-        if (!consumed.includes(hash)) {
-            pathState.consumedValuesByKey['__exact__'] = [...consumed, hash];
-            this.persistState();
-            return true;
-        }
-        return false;
-    }
-    checkVariation(normalized, options) {
-        const pathState = this.ensurePathState(normalized.pathKey);
-        if (Array.isArray(options.watchParams) && options.watchParams.length === 0) {
-            const pathSeenBefore = Object.keys(pathState.consumedValuesByKey).length > 0;
-            if (!pathSeenBefore) {
-                pathState.watchExpiresAt = this.buildExpiryEpoch(typeof options.watchExpiresAt !== 'undefined' ? options.watchExpiresAt : options.watchParamsExpire);
-                this.persistState();
-            }
-            return !pathSeenBefore;
-        }
-        const filteredQuery = this.filterQueryByWatchParams(normalized.query, options.watchParams);
-        const keys = Object.keys(filteredQuery);
-        if (keys.length === 0) {
-            return false;
-        }
-        this.resetPathStateIfExpired(pathState);
-        let accepted = false;
-        keys.forEach((key) => {
-            const currentValue = filteredQuery[key];
-            const consumed = pathState.consumedValuesByKey[key] || [];
-            if (!consumed.includes(currentValue)) {
-                pathState.consumedValuesByKey[key] = [...consumed, currentValue];
-                accepted = true;
-            }
-        });
-        if (accepted) {
-            pathState.watchExpiresAt = this.buildExpiryEpoch(typeof options.watchExpiresAt !== 'undefined' ? options.watchExpiresAt : options.watchParamsExpire);
-            this.persistState();
-        }
-        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 hasTrackedValues = Object.keys(pathState.consumedValuesByKey).some((key) => (pathState.consumedValuesByKey[key] || []).length > 0);
-            if (!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.restoreState();
-    }
-    restoreState() {
-        this.localStorageManager.store$(TRACKER_STORE_NAME)
-            .pipe(take(1))
-            .subscribe({
-            next: (storedState) => {
-                if (this.isTrackerState(storedState)) {
-                    this.state = QueryTrackerStateModel.adapt(storedState);
-                    this.cleanupExpiredEntries();
-                }
-                else {
-                    this.state = { paths: {} };
-                }
-                this.ready$.next(true);
-            },
-            error: () => {
-                this.state = { paths: {} };
-                this.ready$.next(true);
-            }
-        });
-    }
-    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'
-                }]
-        }] });
-
+// import { QueryParamsTrackerService } from '../utils/query-params-tracker.service';
 const API_OPTS = new InjectionToken('API_OPTS');
 /**
  * Channel type enum for different communication purposes
@@ -6909,7 +6567,7 @@ class HTTPManagerStateService extends ComponentStore {
         this.localStorageManagerService = inject(LocalStorageManagerService);
         this.utils = inject(UtilsService);
         this.logger = inject(LoggerService);
-        this.queryParamsTrackerService = inject(QueryParamsTrackerService);
+        // private queryParamsTrackerService = inject(QueryParamsTrackerService)
         this.error$ = this.httpManagerService.error$;
         this.isPending$ = this.httpManagerService.isPending$.pipe(delay(1));
         this.operationSuccess = new BehaviorSubject(null);
@@ -7363,11 +7021,7 @@ class HTTPManagerStateService extends ComponentStore {
                                 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
-                                ? this.dbManagerService.clearTable(tableName).pipe(switchMap(() => this.dbManagerService.createDatabaseTable(tableDef)))
-                                : this.dbManagerService.createDatabaseTable(tableDef);
+                            const ensureTable$ = this.dbManagerService.createDatabaseTable(tableDef);
                             return ensureTable$.pipe(switchMap((created) => {
                                 if (!created) {
                                     console.warn('[DB STORAGE] Table create/open not ready, skipping DB write for this payload:', { table: tableName });
@@ -7410,7 +7064,7 @@ class HTTPManagerStateService extends ComponentStore {
                             }));
                         }
                         return this.localStorageManagerService.store$(this.databaseOptions.table).pipe(take(1), switchMap((storeData) => {
-                            console.log('[CacheDebug] storeData for table:', this.databaseOptions.table, { storeData, requestCache: storeData?.requestCache, expires: storeData?.expires });
+                            // console.log('[CacheDebug] storeData for table:', this.databaseOptions!.table, { storeData, requestCache: storeData?.requestCache, expires: storeData?.expires })
                             const forceRefresh = !!options?.forceRefresh;
                             const storedSchemaSignature = this.getStoredSchemaSignature(storeData);
                             const expires = storeData?.expires || 0;
@@ -7423,12 +7077,12 @@ class HTTPManagerStateService extends ComponentStore {
                             }
                             const expectedSchema = this.buildSchemaFromAdapter();
                             const expectedSchemaSignature = this.buildSchemaSignature(expectedSchema);
-                            console.log('[CacheDebug] schema check:', { tableName: this.databaseOptions.table, storedSchemaSignature, expectedSchemaSignature, mismatch: storedSchemaSignature && storedSchemaSignature !== expectedSchemaSignature });
+                            // console.log('[CacheDebug] schema check:', { tableName: this.databaseOptions!.table, storedSchemaSignature, expectedSchemaSignature, mismatch: storedSchemaSignature && storedSchemaSignature !== expectedSchemaSignature })
                             if (storedSchemaSignature && storedSchemaSignature !== expectedSchemaSignature) {
                                 const tableDef = TableSchemaDef.adapt({ table: this.databaseOptions.table, schema: expectedSchema });
                                 return this.dbManagerService.clearTable(this.databaseOptions.table).pipe(switchMap(() => this.dbManagerService.createDatabaseTable(tableDef)), switchMap(() => fetchFromAPI()));
                             }
-                            return this.checkTrackerAllowsRequest(this.databaseOptions.table, this.resolvePath(effectiveParams), options, storeData).pipe(switchMap((trackerAllowsRequest) => {
+                            return this.checkTrackerAllowsRequest(this.databaseOptions.table, 'GET', this.resolvePath(effectiveParams), options, storeData).pipe(switchMap((trackerAllowsRequest) => {
                                 if (trackerAllowsRequest) {
                                     const normalizedPath = this.trackerNormalizePath(this.resolvePath(effectiveParams));
                                     if (!normalizedPath.hasQuery) {
@@ -7460,16 +7114,7 @@ class HTTPManagerStateService extends ComponentStore {
                                         this.saveRequestCacheMetadata(this.databaseOptions.table, 'GET', requestSignature, storedSchemaSignature ?? expectedSchemaSignature ?? undefined, options);
                                         return of(dbData);
                                     }
-                                    const currentStateData = this.get()?.data;
-                                    if (Array.isArray(currentStateData) && currentStateData.length > 0) {
-                                        return of(currentStateData);
-                                    }
-                                    if (currentStateData &&
-                                        !Array.isArray(currentStateData) &&
-                                        Object.keys(currentStateData).length > 0) {
-                                        return of(currentStateData);
-                                    }
-                                    return of(this.dataType === DataType.ARRAY ? [] : {});
+                                    return fetchFromAPI();
                                 }), catchError((error) => {
                                     const tableName = this.databaseOptions.table;
                                     console.warn('[DB STORAGE] getTableRecords failed, recreating table and falling back to API:', { table: tableName, error });
@@ -7661,7 +7306,7 @@ 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(() => fetchStreamFromAPI()));
                     }
-                    return this.checkTrackerAllowsRequest(this.databaseOptions.table, this.resolvePath(effectiveParams), options, storeData).pipe(switchMap((trackerAllowsRequest) => {
+                    return this.checkTrackerAllowsRequest(this.databaseOptions.table, 'STREAM', this.resolvePath(effectiveParams), options, storeData).pipe(switchMap((trackerAllowsRequest) => {
                         if (!trackerAllowsRequest) {
                             return this.dbManagerService.getTableRecords(this.databaseOptions.table).pipe(switchMap((dbData) => {
                                 if (Array.isArray(dbData) && dbData.length > 0) {
@@ -7810,6 +7455,17 @@ class HTTPManagerStateService extends ComponentStore {
             this.databaseOptions = (this.hasDatabase) ? adapted : undefined;
             // Trigger database table creation if table is configured
             if (this.hasDatabase && this.databaseOptions?.table) {
+                this.localStorageManagerService.createStore({
+                    name: this.databaseOptions.table,
+                    data: {
+                        ...this.databaseOptions,
+                        expires: this.utils.expires(this.databaseOptions.expiresIn),
+                    },
+                    options: SettingOptions.adapt({
+                        storage: StorageType.GLOBAL,
+                        encrypted: false,
+                    })
+                });
                 console.log('[setApiRequestOptions] Initializing database storage for table:', this.databaseOptions.table);
                 // Use initDBStorageAsync directly instead of the effect - effects need subscription to run
                 this.initDBStorageAsync().subscribe({
@@ -8019,11 +7675,7 @@ class HTTPManagerStateService extends ComponentStore {
                 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
-                ? this.dbManagerService.clearTable(tableName).pipe(switchMap(() => this.dbManagerService.createDatabaseTable(tableDef)))
-                : this.dbManagerService.createDatabaseTable(tableDef);
+            const ensureTable$ = this.dbManagerService.createDatabaseTable(tableDef);
             return ensureTable$.pipe(switchMap((created) => {
                 if (!created) {
                     console.warn('[DB STORAGE] Stream table create/open not ready, skipping DB write for this chunk:', { table: tableName });
@@ -8328,9 +7980,16 @@ class HTTPManagerStateService extends ComponentStore {
         if (!this.hasDatabase || !this.databaseOptions?.table)
             return;
         const tableName = this.databaseOptions.table;
+        // Reset localStorage tracking SYNCHRONOUSLY before the async DB clear so any
+        // concurrent request that fires during clearTable() sees a clean store immediately
+        // and is not blocked by stale queryParams from the previous session.
+        this.localStorageManagerService.updateStore({
+            name: tableName,
+            data: { ...this.databaseOptions, expires: 0 }
+        });
+        this._requestCachePaths.delete(tableName);
         this.dbManagerService.clearTable(tableName).subscribe({
             next: () => {
-                this.clearRequestCacheMetadata(tableName);
                 if (this.dataType === DataType.ARRAY) {
                     this.setData$([]);
                 }
@@ -8451,18 +8110,21 @@ class HTTPManagerStateService extends ComponentStore {
         this._requestCachePaths.set(tableName, this.resolvePath(options?.path).filter(p => typeof p === 'string' || typeof p === 'number').map(String));
         this.localStorageManagerService.store$(tableName).pipe(take(1), tap((storeData) => {
             const currentCache = storeData?.requestCache || {};
+            const currentEntry = currentCache[type] || {};
             this.localStorageManagerService.updateStore({
                 name: tableName,
                 data: {
                     ...(storeData || {}),
-                    schemaSignature: schemaSignature || storeData?.schemaSignature || null,
                     requestCache: {
                         ...currentCache,
                         [type]: {
+                            ...currentEntry,
                             signature,
                             savedAt: Date.now(),
                             path: this.resolvePath(options?.path),
-                            headers: this.filterHeaders(options?.headers)
+                            headers: this.filterHeaders(options?.headers),
+                            queryParams: currentEntry.queryParams,
+                            queryParamsExpires: currentEntry.queryParamsExpires,
                         }
                     }
                 }
@@ -8482,7 +8144,7 @@ class HTTPManagerStateService extends ComponentStore {
                 }
             }
             if (Array.isArray(pathArray) && pathArray.length > 0) {
-                this.queryParamsTrackerService.clearTrackingForPath(pathArray.join('/'));
+                // this.queryParamsTrackerService.clearTrackingForPath(pathArray.join('/'))
                 this._requestCachePaths.delete(tableName);
             }
             if (!storeData)
@@ -8496,23 +8158,6 @@ class HTTPManagerStateService extends ComponentStore {
             });
         })).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 = {};
@@ -8589,14 +8234,12 @@ class HTTPManagerStateService extends ComponentStore {
         return String(value).trim().toLowerCase();
     }
     trackerFilterQuery(query, ignoreQueryParams) {
-        if (!Array.isArray(ignoreQueryParams))
-            return { ...query };
-        if (ignoreQueryParams.length === 0)
+        if (!Array.isArray(ignoreQueryParams) || ignoreQueryParams.length === 0)
             return { ...query };
+        const normalizedIgnore = ignoreQueryParams.map(p => this.trackerNormalizeParamKey(p));
         const result = {};
-        ignoreQueryParams.forEach((param) => {
-            const key = this.trackerNormalizeParamKey(param);
-            if (Object.prototype.hasOwnProperty.call(query, key)) {
+        Object.keys(query).forEach((key) => {
+            if (!normalizedIgnore.includes(key)) {
                 result[key] = query[key];
             }
         });
@@ -8618,45 +8261,99 @@ class HTTPManagerStateService extends ComponentStore {
             return null;
         return Math.floor(Date.now() / 1000) + Number(parsed[1]) * seconds;
     }
-    checkTrackerAllowsRequest(tableName, path, options, storeData) {
-        if (options && 'watchParams' in options) {
-            return of(this.queryParamsTrackerService.checkRequestOptions(path, {
-                watchParams: options.watchParams,
-                watchExpiresAt: options?.watchExpiresAt,
-            }));
-        }
+    checkTrackerAllowsRequest(tableName, type, path, options, storeData) {
         const normalized = this.trackerNormalizePath(path);
         const ignoreQueryParams = Array.isArray(options?.ignoreQueryParams) ? options.ignoreQueryParams : [];
         if (!normalized.hasQuery) {
-            const meta = this.getRequestCacheMetadata(storeData, 'GET');
+            const meta = this.getRequestCacheMetadata(storeData, type);
+            if (!meta) {
+                // No prior cache entry — record that we're tracking this request
+                this.setCachedRequestSignature(tableName, type, '');
+                this.localStorageManagerService.store$(tableName).pipe(take(1), tap((s) => {
+                    const currentCache = s?.requestCache || {};
+                    this.localStorageManagerService.updateStore({
+                        name: tableName,
+                        data: {
+                            ...(s || {}),
+                            requestCache: {
+                                ...currentCache,
+                                [type]: {
+                                    ...(currentCache[type] || {}),
+                                    active: true,
+                                }
+                            }
+                        }
+                    });
+                })).subscribe();
+            }
             return of(!meta);
         }
         const filtered = this.trackerFilterQuery(normalized.query, ignoreQueryParams);
         const keys = Object.keys(filtered);
         if (keys.length === 0) {
-            return of(!this.getRequestCacheMetadata(storeData, 'GET'));
+            // All query params were filtered out — check if we have any prior entry
+            const meta = this.getRequestCacheMetadata(storeData, type);
+            if (!meta) {
+                this.setCachedRequestSignature(tableName, type, '');
+                this.localStorageManagerService.store$(tableName).pipe(take(1), tap((s) => {
+                    const currentCache = s?.requestCache || {};
+                    this.localStorageManagerService.updateStore({
+                        name: tableName,
+                        data: {
+                            ...(s || {}),
+                            requestCache: {
+                                ...currentCache,
+                                [type]: {
+                                    ...(currentCache[type] || {}),
+                                    active: true,
+                                }
+                            }
+                        }
+                    });
+                })).subscribe();
+            }
+            return of(!meta);
         }
-        const tracker = this.getTrackerState(storeData);
+        const meta = this.getRequestCacheMetadata(storeData, type) || {};
         const now = Math.floor(Date.now() / 1000);
-        if (tracker.trackingExpires && tracker.trackingExpires <= now) {
-            tracker.consumedValuesByKey = {};
-            tracker.trackingExpires = null;
+        let queryParams = { ...(meta.queryParams || {}) };
+        let queryParamsExpires = meta.queryParamsExpires ?? null;
+        if (queryParamsExpires !== null && queryParamsExpires <= now) {
+            queryParams = {};
+            queryParamsExpires = null;
         }
         let accepted = false;
         keys.forEach(key => {
             const value = filtered[key];
-            const consumed = tracker.consumedValuesByKey[key] || [];
+            const consumed = queryParams[key] || [];
             if (!consumed.includes(value)) {
-                tracker.consumedValuesByKey[key] = [...consumed, value];
+                queryParams[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);
+                queryParamsExpires = newExpiry;
+            }
+            this.localStorageManagerService.store$(tableName).pipe(take(1), tap((latestStoreData) => {
+                const currentCache = latestStoreData?.requestCache || {};
+                const currentEntry = currentCache[type] || {};
+                this.localStorageManagerService.updateStore({
+                    name: tableName,
+                    data: {
+                        ...(latestStoreData || {}),
+                        requestCache: {
+                            ...currentCache,
+                            [type]: {
+                                ...currentEntry,
+                                queryParams,
+                                queryParamsExpires,
+                            }
+                        }
+                    }
+                });
+            })).subscribe();
         }
         return of(accepted);
     }
@@ -8978,6 +8675,673 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
+class SqlParseError extends Error {
+    constructor(message) {
+        super(message);
+        this.name = 'SqlParseError';
+    }
+}
+class SqlValidationError extends Error {
+    constructor(message) {
+        super(message);
+        this.name = 'SqlValidationError';
+    }
+}
+
+class SqlParser {
+    constructor() {
+        this._parser = new Parser();
+    }
+    parse(sql) {
+        let result;
+        try {
+            result = this._parser.parse(sql);
+        }
+        catch (e) {
+            throw new SqlParseError(e.message ?? 'Failed to parse SQL');
+        }
+        const ast = Array.isArray(result.ast) ? result.ast[0] : result.ast;
+        if (!ast) {
+            throw new SqlParseError('SQL produced no AST — only SELECT statements are supported');
+        }
+        if (ast.type !== 'select') {
+            throw new SqlParseError('Only SELECT statements are supported');
+        }
+        return {
+            ast,
+            tableList: result.tableList ?? [],
+            columnList: result.columnList ?? [],
+        };
+    }
+}
+
+class SchemaValidator {
+    constructor() {
+        this._dbManager = inject(DatabaseManagerService);
+    }
+    async validate(parsed, options = {}) {
+        const { ast } = parsed;
+        const fromItems = ast.from ?? [];
+        // Build alias map and collect real table names
+        const aliases = {};
+        const tableNames = [];
+        for (const item of fromItems) {
+            if (item.table) {
+                tableNames.push(item.table);
+                aliases[item.as ?? item.table] = item.table;
+                aliases[item.table] = item.table;
+            }
+        }
+        if (tableNames.length === 0) {
+            throw new SqlValidationError('No tables found in query');
+        }
+        // Fetch and parse schema for each table
+        const schemas = {};
+        for (const tableName of tableNames) {
+            const schemaArr = await firstValueFrom(this._dbManager.getDatabaseTableSchema(tableName));
+            if (!schemaArr || schemaArr.length === 0) {
+                throw new SqlValidationError(`Table not found: "${tableName}"`);
+            }
+            schemas[tableName] = this._parseSchemaArray(schemaArr);
+        }
+        const defaultTable = tableNames[0];
+        // Validate WHERE columns
+        if (ast.where) {
+            this._validateWhereNode(ast.where, defaultTable, aliases, schemas);
+        }
+        // Validate ORDER BY columns
+        for (const ob of (ast.orderby ?? [])) {
+            if (ob.expr?.type === 'column_ref') {
+                const tbl = this._resolveTable(ob.expr.table, defaultTable, aliases);
+                this._assertIndexed(ob.expr.column, tbl, schemas);
+            }
+        }
+        // Validate JOIN ON columns
+        for (const item of fromItems) {
+            if (item.join && item.on) {
+                this._validateJoinOn(item.on, tableNames, aliases, schemas);
+            }
+        }
+        // Strict mode: AND without compound index → throw
+        if (options.strict && ast.where) {
+            this._checkStrictAnd(ast.where, defaultTable, aliases, schemas);
+        }
+        return { ast, schemas, aliases };
+    }
+    // ─── Helpers ─────────────────────────────────────────────────────────────
+    _parseSchemaArray(schemaArr) {
+        const pk = schemaArr[0] ?? '';
+        const simpleIndexes = [];
+        const compoundIndexes = [];
+        for (let i = 1; i < schemaArr.length; i++) {
+            const s = schemaArr[i];
+            if (s.startsWith('[') && s.endsWith(']')) {
+                compoundIndexes.push(s.slice(1, -1).split('+'));
+            }
+            else {
+                simpleIndexes.push(s.replace(/^[*&]/, ''));
+            }
+        }
+        return { pk, simpleIndexes, compoundIndexes };
+    }
+    _isIndexed(col, tableName, schemas) {
+        const schema = schemas[tableName];
+        if (!schema)
+            return false;
+        return col === schema.pk || schema.simpleIndexes.includes(col);
+    }
+    _assertIndexed(col, tableName, schemas) {
+        if (!this._isIndexed(col, tableName, schemas)) {
+            throw new SqlValidationError(`Column "${col}" on table "${tableName}" is not indexed`);
+        }
+    }
+    _resolveTable(tableRef, defaultTable, aliases) {
+        if (!tableRef)
+            return defaultTable;
+        return aliases[tableRef] ?? tableRef;
+    }
+    _validateWhereNode(node, defaultTable, aliases, schemas) {
+        if (!node || node.type !== 'binary_expr')
+            return;
+        if (node.operator === 'AND' || node.operator === 'OR') {
+            this._validateWhereNode(node.left, defaultTable, aliases, schemas);
+            this._validateWhereNode(node.right, defaultTable, aliases, schemas);
+            return;
+        }
+        if (node.left?.type === 'column_ref') {
+            const tbl = this._resolveTable(node.left.table, defaultTable, aliases);
+            this._assertIndexed(node.left.column, tbl, schemas);
+        }
+    }
+    _validateJoinOn(onNode, tableNames, aliases, schemas) {
+        if (!onNode || onNode.type !== 'binary_expr' || onNode.operator !== '=')
+            return;
+        const l = onNode.left;
+        const r = onNode.right;
+        if (l?.type !== 'column_ref' || r?.type !== 'column_ref')
+            return;
+        const leftTable = tableNames[0];
+        const rightTable = tableNames[tableNames.length - 1];
+        // Resolve which ON side belongs to left vs right table
+        const lTableResolved = aliases[l.table ?? ''] ?? l.table ?? leftTable;
+        const rTableResolved = aliases[r.table ?? ''] ?? r.table ?? rightTable;
+        const leftKey = lTableResolved === leftTable ? { col: l.column, table: lTableResolved } : { col: r.column, table: rTableResolved };
+        const rightKey = lTableResolved === leftTable ? { col: r.column, table: rTableResolved } : { col: l.column, table: lTableResolved };
+        // Left-side key: PK is exempt, otherwise must be indexed
+        const leftSchema = schemas[leftKey.table];
+        if (leftSchema && leftKey.col !== leftSchema.pk && !leftSchema.simpleIndexes.includes(leftKey.col)) {
+            throw new SqlValidationError(`JOIN column "${leftKey.col}" on table "${leftKey.table}" must be indexed`);
+        }
+        // Right-side key: must be indexed (including PK counts)
+        if (!this._isIndexed(rightKey.col, rightKey.table, schemas)) {
+            throw new SqlValidationError(`JOIN column "${rightKey.col}" on table "${rightKey.table}" must be indexed`);
+        }
+    }
+    _checkStrictAnd(whereNode, defaultTable, aliases, schemas) {
+        if (!whereNode || whereNode.type !== 'binary_expr' || whereNode.operator !== 'AND')
+            return;
+        const leafCols = this._flattenAndCols(whereNode, defaultTable, aliases);
+        if (leafCols.length < 2)
+            return;
+        const tableName = leafCols[0].table;
+        const schema = schemas[tableName];
+        if (!schema)
+            return;
+        const colNames = leafCols.map(c => c.col);
+        const hasCompound = schema.compoundIndexes.some(ci => ci.length === colNames.length && colNames.every(c => ci.includes(c)));
+        if (!hasCompound) {
+            throw new SqlValidationError(`Strict mode: compound index required for AND on columns [${colNames.join(', ')}]`);
+        }
+    }
+    _flattenAndCols(node, defaultTable, aliases) {
+        if (!node || node.type !== 'binary_expr')
+            return [];
+        if (node.operator === 'AND') {
+            return [
+                ...this._flattenAndCols(node.left, defaultTable, aliases),
+                ...this._flattenAndCols(node.right, defaultTable, aliases),
+            ];
+        }
+        if (node.left?.type === 'column_ref') {
+            return [{ table: this._resolveTable(node.left.table, defaultTable, aliases), col: node.left.column }];
+        }
+        return [];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SchemaValidator, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SchemaValidator, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SchemaValidator, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+var ExecutionPlanType;
+(function (ExecutionPlanType) {
+    ExecutionPlanType["SIMPLE"] = "SIMPLE";
+    ExecutionPlanType["AND_BOUNDED"] = "AND_BOUNDED";
+    ExecutionPlanType["AND_COMPOUND"] = "AND_COMPOUND";
+    ExecutionPlanType["OR_MERGE"] = "OR_MERGE";
+    ExecutionPlanType["JOIN_HASH"] = "JOIN_HASH";
+})(ExecutionPlanType || (ExecutionPlanType = {}));
+
+class QueryPlanner {
+    plan(validated, options = {}) {
+        const { ast, schemas, aliases } = validated;
+        const fromItems = ast.from ?? [];
+        const mainTable = fromItems[0]?.table ?? '';
+        const dedupeKey = schemas[mainTable]?.pk ?? 'id';
+        const basePlan = this._buildBasePlanExtras(ast, mainTable, dedupeKey);
+        // ── JOIN ────────────────────────────────────────────────────────────────
+        const joinItem = fromItems.find((f) => f.join);
+        if (joinItem) {
+            return this._buildJoinPlan(ast, fromItems, joinItem, schemas, aliases, mainTable, basePlan);
+        }
+        const where = ast.where;
+        // ── No WHERE ─────────────────────────────────────────────────────────────
+        if (!where) {
+            return { ...basePlan, type: ExecutionPlanType.SIMPLE, primaryStep: null, boundedFilters: [] };
+        }
+        // ── OR ──────────────────────────────────────────────────────────────────
+        if (where.operator === 'OR') {
+            return this._buildOrPlan(where, basePlan, aliases, mainTable);
+        }
+        // ── AND ──────────────────────────────────────────────────────────────────
+        if (where.operator === 'AND') {
+            return this._buildAndPlan(where, basePlan, schemas, aliases, mainTable, options);
+        }
+        // ── Single condition ────────────────────────────────────────────────────
+        const step = this._nodeToStep(where, aliases, mainTable);
+        return { ...basePlan, type: ExecutionPlanType.SIMPLE, primaryStep: step, boundedFilters: [] };
+    }
+    // ─── AND ──────────────────────────────────────────────────────────────────
+    _buildAndPlan(where, basePlan, schemas, aliases, mainTable, _options) {
+        const conditions = this._flattenAnd(where);
+        const cols = conditions.map((c) => c.left?.column).filter(Boolean);
+        const schema = schemas[mainTable];
+        // Check for matching compound index
+        const matchedCompound = schema?.compoundIndexes.find(ci => ci.length === cols.length && cols.every(c => ci.includes(c)));
+        if (matchedCompound) {
+            const orderedValues = matchedCompound.map(ciCol => {
+                const cond = conditions.find((c) => c.left?.column === ciCol);
+                return this._extractValue(cond.right, cond.operator);
+            });
+            return {
+                ...basePlan,
+                type: ExecutionPlanType.AND_COMPOUND,
+                primaryStep: null,
+                boundedFilters: [],
+                compoundIndex: `[${matchedCompound.join('+')}]`,
+                compoundValues: orderedValues,
+            };
+        }
+        // Pragmatic: first condition → Dexie, rest → JS filter
+        const primaryStep = this._nodeToStep(conditions[0], aliases, mainTable);
+        const boundedFilters = conditions.slice(1).map((c) => this._nodeToStep(c, aliases, mainTable));
+        return {
+            ...basePlan,
+            type: ExecutionPlanType.AND_BOUNDED,
+            primaryStep,
+            boundedFilters,
+            compoundWarnCols: cols,
+        };
+    }
+    // ─── OR ───────────────────────────────────────────────────────────────────
+    _buildOrPlan(where, basePlan, aliases, mainTable) {
+        const branches = this._flattenOr(where);
+        const orBranches = branches.map((b) => this._nodeToStep(b, aliases, mainTable));
+        return {
+            ...basePlan,
+            type: ExecutionPlanType.OR_MERGE,
+            primaryStep: null,
+            boundedFilters: [],
+            orBranches,
+        };
+    }
+    // ─── JOIN ─────────────────────────────────────────────────────────────────
+    _buildJoinPlan(ast, fromItems, joinItem, schemas, aliases, mainTable, basePlan) {
+        const rightTable = joinItem.table;
+        const onNode = joinItem.on;
+        const joinType = joinItem.join.toLowerCase().includes('left') ? 'left' : 'inner';
+        // Resolve join keys from ON clause
+        const l = onNode?.left;
+        const r = onNode?.right;
+        const lTableResolved = aliases[l?.table ?? ''] ?? l?.table ?? mainTable;
+        const rTableResolved = aliases[r?.table ?? ''] ?? r?.table ?? rightTable;
+        let leftKey, rightKey;
+        if (lTableResolved === mainTable) {
+            leftKey = l?.column ?? '';
+            rightKey = r?.column ?? '';
+        }
+        else {
+            leftKey = r?.column ?? '';
+            rightKey = l?.column ?? '';
+        }
+        const joinInfo = { leftTable: mainTable, rightTable, leftKey, rightKey, joinType };
+        // WHERE conditions become post-join bounded filters
+        const where = ast.where;
+        const boundedFilters = [];
+        if (where) {
+            this._flattenAnd(where.operator === 'AND' ? where : { operator: 'AND', left: where, right: null })
+                .filter(Boolean)
+                .forEach((c) => boundedFilters.push(this._nodeToStep(c, aliases, mainTable)));
+        }
+        return {
+            ...basePlan,
+            type: ExecutionPlanType.JOIN_HASH,
+            primaryStep: null,
+            boundedFilters: where ? (where.operator === 'AND' ? boundedFilters : [this._nodeToStep(where, aliases, mainTable)]) : [],
+            joinInfo,
+        };
+    }
+    // ─── Base plan extras (ORDER BY, LIMIT, OFFSET, projection, etc.) ─────────
+    _buildBasePlanExtras(ast, mainTable, dedupeKey) {
+        const plan = { table: mainTable, dedupeKey };
+        // ORDER BY
+        const orderby = ast.orderby ?? [];
+        if (orderby.length > 0) {
+            const ob = orderby[0];
+            plan.orderBy = {
+                col: ob.expr?.column ?? '',
+                dir: ob.type?.toUpperCase() === 'DESC' ? 'desc' : 'asc',
+            };
+        }
+        // LIMIT / OFFSET
+        if (ast.limit) {
+            const vals = ast.limit.value ?? [];
+            if (ast.limit.seperator === 'offset' && vals.length === 2) {
+                plan.limit = vals[0].value;
+                plan.offset = vals[1].value;
+            }
+            else if (vals.length === 1) {
+                plan.limit = vals[0].value;
+            }
+        }
+        // Projection
+        const columns = ast.columns;
+        if (columns && columns !== '*') {
+            // COUNT(*)
+            const countCol = columns.find((c) => c.expr?.type === 'aggr_func' && c.expr?.name === 'COUNT');
+            if (countCol) {
+                plan.aggregate = 'count';
+                plan.projection = null;
+            }
+            else {
+                const projected = columns
+                    .filter((c) => c.expr?.type === 'column_ref')
+                    .map((c) => c.expr.column);
+                plan.projection = projected.length > 0 ? projected : null;
+            }
+        }
+        else {
+            plan.projection = null;
+        }
+        // DISTINCT
+        plan.distinct = ast.distinct === 'DISTINCT';
+        return plan;
+    }
+    // ─── Node → PlanStep ──────────────────────────────────────────────────────
+    _nodeToStep(node, aliases, defaultTable) {
+        if (!node || node.type !== 'binary_expr' || node.left?.type !== 'column_ref') {
+            throw new SqlValidationError(`Unsupported WHERE condition structure`);
+        }
+        const col = node.left.column;
+        const { op, val } = this._mapOperator(node.operator, node.right);
+        return { col, op, val };
+    }
+    _mapOperator(astOp, rightNode) {
+        switch (astOp) {
+            case '=': return { op: 'equals', val: this._extractValue(rightNode, astOp) };
+            case '!=':
+            case '<>': return { op: 'notEqual', val: this._extractValue(rightNode, astOp) };
+            case '>': return { op: 'above', val: this._extractValue(rightNode, astOp) };
+            case '>=': return { op: 'aboveOrEqual', val: this._extractValue(rightNode, astOp) };
+            case '<': return { op: 'below', val: this._extractValue(rightNode, astOp) };
+            case '<=': return { op: 'belowOrEqual', val: this._extractValue(rightNode, astOp) };
+            case 'BETWEEN': {
+                const vals = rightNode?.value ?? [];
+                return { op: 'between', val: [vals[0]?.value, vals[1]?.value] };
+            }
+            case 'IN': return { op: 'anyOf', val: (rightNode?.value ?? []).map((v) => v.value) };
+            case 'NOT IN': return { op: 'noneOf', val: (rightNode?.value ?? []).map((v) => v.value) };
+            case 'LIKE': {
+                const raw = String(rightNode?.value ?? '');
+                if (raw.startsWith('%')) {
+                    throw new SqlValidationError('LIKE with leading wildcard is not supported');
+                }
+                if (raw.includes('%')) {
+                    const pctIdx = raw.indexOf('%');
+                    if (pctIdx !== raw.length - 1) {
+                        throw new SqlValidationError('LIKE with leading wildcard is not supported');
+                    }
+                    return { op: 'startsWith', val: raw.slice(0, -1) };
+                }
+                // No wildcard — treat as equals
+                return { op: 'equals', val: raw };
+            }
+            default:
+                throw new SqlValidationError(`Unsupported SQL operator: "${astOp}"`);
+        }
+    }
+    _extractValue(node, _op) {
+        return node?.value ?? null;
+    }
+    // ─── WHERE tree helpers ───────────────────────────────────────────────────
+    _flattenAnd(node) {
+        if (!node)
+            return [];
+        if (node.type === 'binary_expr' && node.operator === 'AND') {
+            return [...this._flattenAnd(node.left), ...this._flattenAnd(node.right)];
+        }
+        return [node];
+    }
+    _flattenOr(node) {
+        if (!node)
+            return [];
+        if (node.type === 'binary_expr' && node.operator === 'OR') {
+            return [...this._flattenOr(node.left), ...this._flattenOr(node.right)];
+        }
+        return [node];
+    }
+}
+
+class DexieQueryExecutor {
+    constructor() {
+        this._dbManager = inject(DatabaseManagerService);
+    }
+    async execute(plan) {
+        switch (plan.type) {
+            case ExecutionPlanType.SIMPLE: return this._executeSimple(plan);
+            case ExecutionPlanType.AND_BOUNDED: return this._executeAndBounded(plan);
+            case ExecutionPlanType.AND_COMPOUND: return this._executeAndCompound(plan);
+            case ExecutionPlanType.OR_MERGE: return this._executeOrMerge(plan);
+            case ExecutionPlanType.JOIN_HASH: return this._executeJoinHash(plan);
+            default:
+                throw new SqlValidationError(`Unknown plan type`);
+        }
+    }
+    // ─── SIMPLE ───────────────────────────────────────────────────────────────
+    async _executeSimple(plan) {
+        const table = await this._getTable(plan.table);
+        let rows;
+        if (!plan.primaryStep) {
+            rows = await table.toArray();
+        }
+        else {
+            rows = await this._applyDexieStep(table, plan.primaryStep);
+        }
+        return this._postProcess(rows, plan);
+    }
+    // ─── AND_BOUNDED ──────────────────────────────────────────────────────────
+    async _executeAndBounded(plan) {
+        const table = await this._getTable(plan.table);
+        if (plan.compoundWarnCols?.length) {
+            console.warn(`[DexieSqlService] Consider adding a compound index [${plan.compoundWarnCols.join('+')}] ` +
+                `to table "${plan.table}" for full index coverage on AND conditions.`);
+        }
+        let rows = plan.primaryStep
+            ? await this._applyDexieStep(table, plan.primaryStep)
+            : await table.toArray();
+        // Apply remaining AND conditions as JS filter
+        for (const f of plan.boundedFilters) {
+            rows = rows.filter(row => this._matchStep(row, f));
+        }
+        return this._postProcess(rows, plan);
+    }
+    // ─── AND_COMPOUND ─────────────────────────────────────────────────────────
+    async _executeAndCompound(plan) {
+        const table = await this._getTable(plan.table);
+        const rows = await table.where(plan.compoundIndex).equals(plan.compoundValues).toArray();
+        return this._postProcess(rows, plan);
+    }
+    // ─── OR_MERGE ─────────────────────────────────────────────────────────────
+    async _executeOrMerge(plan) {
+        const table = await this._getTable(plan.table);
+        const branches = plan.orBranches ?? [];
+        const results = await Promise.all(branches.map(branch => this._applyDexieStep(table, branch)));
+        // Deduplicate by primary key
+        const pk = plan.dedupeKey ?? 'id';
+        const seen = new Map();
+        for (const batch of results) {
+            for (const row of batch) {
+                seen.set(row[pk], row);
+            }
+        }
+        return this._postProcess(Array.from(seen.values()), plan);
+    }
+    // ─── JOIN_HASH ────────────────────────────────────────────────────────────
+    async _executeJoinHash(plan) {
+        const join = plan.joinInfo;
+        const leftTable = await this._getTable(join.leftTable);
+        const rightTable = await this._getTable(join.rightTable);
+        // Fetch left rows (full scan; bounded WHERE filters applied post-join)
+        const leftRows = await leftTable.toArray();
+        // Extract FK values for right-side lookup
+        const fkValues = [...new Set(leftRows.map(r => r[join.leftKey]).filter(v => v != null))];
+        // Fetch right rows indexed by join key
+        const rightRows = fkValues.length > 0
+            ? await rightTable.where(join.rightKey).anyOf(fkValues).toArray()
+            : [];
+        // Build lookup map from rightKey → array of right rows
+        const rightMap = new Map();
+        for (const rr of rightRows) {
+            const k = rr[join.rightKey];
+            if (!rightMap.has(k))
+                rightMap.set(k, []);
+            rightMap.get(k).push(rr);
+        }
+        // Hash join
+        const joined = [];
+        for (const lr of leftRows) {
+            const matches = rightMap.get(lr[join.leftKey]);
+            if (matches?.length) {
+                for (const rr of matches) {
+                    joined.push({ ...lr, ...rr });
+                }
+            }
+            else if (join.joinType === 'left') {
+                joined.push({ ...lr });
+            }
+        }
+        // Apply post-join bounded filters (any WHERE conditions from the query)
+        let result = joined;
+        for (const f of plan.boundedFilters) {
+            result = result.filter(row => this._matchStep(row, f));
+        }
+        return this._postProcess(result, plan);
+    }
+    // ─── Post-processing ──────────────────────────────────────────────────────
+    _postProcess(rows, plan) {
+        let result = rows;
+        // ORDER BY
+        if (plan.orderBy) {
+            const { col, dir } = plan.orderBy;
+            result = [...result].sort((a, b) => {
+                const av = a[col];
+                const bv = b[col];
+                if (av == null && bv == null)
+                    return 0;
+                if (av == null)
+                    return 1;
+                if (bv == null)
+                    return -1;
+                const cmp = av < bv ? -1 : av > bv ? 1 : 0;
+                return dir === 'desc' ? -cmp : cmp;
+            });
+        }
+        // LIMIT / OFFSET
+        const offset = plan.offset ?? 0;
+        const limit = plan.limit ?? null;
+        if (offset > 0 || limit != null) {
+            result = result.slice(offset, limit != null ? offset + limit : undefined);
+        }
+        // Projection
+        if (plan.projection && plan.projection.length > 0) {
+            const cols = plan.projection;
+            result = result.map(row => {
+                const projected = {};
+                for (const c of cols)
+                    projected[c] = row[c];
+                return projected;
+            });
+        }
+        // DISTINCT
+        if (plan.distinct) {
+            const seen = new Set();
+            result = result.filter(row => {
+                const key = JSON.stringify(row);
+                if (seen.has(key))
+                    return false;
+                seen.add(key);
+                return true;
+            });
+        }
+        // COUNT(*)
+        if (plan.aggregate === 'count') {
+            return [{ count: result.length }];
+        }
+        return result;
+    }
+    // ─── Dexie step dispatch ──────────────────────────────────────────────────
+    _applyDexieStep(table, step) {
+        const col = step.col;
+        const val = step.val;
+        switch (step.op) {
+            case 'equals': return table.where(col).equals(val).toArray();
+            case 'notEqual': return table.where(col).notEqual(val).toArray();
+            case 'above': return table.where(col).above(val).toArray();
+            case 'aboveOrEqual': return table.where(col).aboveOrEqual(val).toArray();
+            case 'below': return table.where(col).below(val).toArray();
+            case 'belowOrEqual': return table.where(col).belowOrEqual(val).toArray();
+            case 'between': return table.where(col).between(val[0], val[1], true, true).toArray();
+            case 'anyOf': return table.where(col).anyOf(val).toArray();
+            case 'noneOf': return table.where(col).noneOf(val).toArray();
+            case 'startsWith': return table.where(col).startsWith(val).toArray();
+            default:
+                throw new SqlValidationError(`Unsupported Dexie op: "${step.op}"`);
+        }
+    }
+    // ─── JS row predicate ─────────────────────────────────────────────────────
+    _matchStep(row, step) {
+        const rv = row[step.col];
+        const v = step.val;
+        switch (step.op) {
+            case 'equals': return rv === v;
+            case 'notEqual': return rv !== v;
+            case 'above': return rv > v;
+            case 'aboveOrEqual': return rv >= v;
+            case 'below': return rv < v;
+            case 'belowOrEqual': return rv <= v;
+            case 'between': return rv >= v[0] && rv <= v[1];
+            case 'anyOf': return v.includes(rv);
+            case 'noneOf': return !v.includes(rv);
+            case 'startsWith': return typeof rv === 'string' && rv.startsWith(v);
+            default: return true;
+        }
+    }
+    // ─── Table accessor ───────────────────────────────────────────────────────
+    async _getTable(tableName) {
+        const t = await firstValueFrom(this._dbManager.getDatabaseTable(tableName));
+        if (!t)
+            throw new SqlValidationError(`Table "${tableName}" not found or not accessible`);
+        return t;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DexieQueryExecutor, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DexieQueryExecutor, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DexieQueryExecutor, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class DexieSqlService {
+    constructor() {
+        this._parser = new SqlParser();
+        this._validator = inject(SchemaValidator);
+        this._planner = new QueryPlanner();
+        this._executor = inject(DexieQueryExecutor);
+    }
+    /**
+     * Execute a MySQL-syntax SQL SELECT string against the DexieJS IndexedDB database.
+     * Returns an Observable that emits the result array and completes, or errors with
+     * SqlParseError / SqlValidationError if the query is invalid.
+     */
+    query(sql, options = {}) {
+        return from(this._run(sql, options));
+    }
+    async _run(sql, options) {
+        const parsed = this._parser.parse(sql);
+        const validated = await this._validator.validate(parsed, options);
+        const plan = this._planner.plan(validated, options);
+        return this._executor.execute(plan);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DexieSqlService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DexieSqlService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DexieSqlService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 // export * from "./database-manager-services/index";
 
 class ErrorDisplaySettings {
@@ -10430,11 +10794,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>Ignore 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 style=\"margin-top: .5rem; display: flex; gap: .5rem;\">\n              <button mat-stroked-button color=\"warn\" (click)=\"onClearRecords()\">Clear Table</button>\n              <button mat-stroked-button color=\"warn\" (click)=\"deleteDatabase()\">Delete Database</button>\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                    {{ getRecordLabel(item) | 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>Ignore 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 style=\"margin-top: .5rem; display: flex; gap: .5rem;\">\n              <button mat-stroked-button color=\"warn\" (click)=\"onClearRecords()\">Clear Table</button>\n              <button mat-stroked-button color=\"warn\" (click)=\"deleteDatabase()\">Delete Database</button>\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\">\n              <mat-option [value]=\"\">None</mat-option>\n              @for (item of data; track $index) {\n                <mat-option [value]=\"item\">\n                    {{ getRecordLabel(item) | 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>Ignore 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 style=\"margin-top: .5rem; display: flex; gap: .5rem;\">\n              <button mat-stroked-button color=\"warn\" (click)=\"onClearRecords()\">Clear Table</button>\n              <button mat-stroked-button color=\"warn\" (click)=\"deleteDatabase()\">Delete Database</button>\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                    {{ getRecordLabel(item) | 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>Ignore 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 style=\"margin-top: .5rem; display: flex; gap: .5rem;\">\n              <button mat-stroked-button color=\"warn\" (click)=\"onClearRecords()\">Clear Table</button>\n              <button mat-stroked-button color=\"warn\" (click)=\"deleteDatabase()\">Delete Database</button>\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\">\n              <mat-option [value]=\"\">None</mat-option>\n              @for (item of data; track $index) {\n                <mat-option [value]=\"item\">\n                    {{ getRecordLabel(item) | 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: [{
@@ -12165,11 +12529,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 class DatabaseDataDemoComponent {
     constructor() {
         this.db = inject(DatabaseManagerService);
+        this.sql = inject(DexieSqlService);
         this.destroy$ = new Subject();
         this.dataToDisplay = [];
         this.dataSource = new DatabaseDataSource(this.dataToDisplay);
         this.displayedColumns = ['id', 'last_name', 'age', 'amount'];
         this.names = ['Smith', 'Johnson', 'Williams', 'Brown', 'Jones', 'Garcia', 'Miller', 'Davis'];
+        // ── SQL Query section ────────────────────────────────────────────────────
+        this.sqlQuery = 'SELECT * FROM sample_table';
+        this.sqlResults = [];
+        this.sqlResultCols = [];
+        this.sqlError = null;
+        this.sqlLoading = false;
     }
     ngOnDestroy() {
         this.destroy$.next();
@@ -12282,12 +12653,32 @@ class DatabaseDataDemoComponent {
         return this.db.deleteTableRecord(table, id)
             .pipe(tap((data) => console.log('deleteTableRecord:', data)));
     }
+    runSqlQuery() {
+        const q = (this.sqlQuery ?? '').trim();
+        if (!q)
+            return;
+        this.sqlLoading = true;
+        this.sqlError = null;
+        this.sqlResults = [];
+        this.sqlResultCols = [];
+        this.sql.query(q).subscribe({
+            next: rows => {
+                this.sqlResults = rows;
+                this.sqlResultCols = rows.length > 0 ? Object.keys(rows[0]) : [];
+                this.sqlLoading = false;
+            },
+            error: err => {
+                this.sqlError = err?.message ?? String(err);
+                this.sqlLoading = false;
+            }
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DatabaseDataDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DatabaseDataDemoComponent, selector: "app-database-data-demo", ngImport: i0, template: "<div style=\"padding: 2rem;\">\n\n  <h2>\n    Database Manager Service Demo\n  </h2>\n\n  <div style=\"margin-bottom: 1rem; display: flex; gap: 1rem;\">\n    <button mat-stroked-button\n      color=\"primary\"\n      (click)=\"clearAllData()\"\n    >\n      Clear Data\n    </button>\n    <button mat-stroked-button\n      color=\"primary\"\n      (click)=\"updateData()\"\n    >\n      Update Data\n    </button>\n    <div style=\"flex:1\"></div>\n    <button\n        mat-stroked-button\n        color=\"warn\"\n        [disabled]=\"!dataToDisplay.length\"\n        (click)=\"removeData()\"\n    >\n      Remove Data\n    </button>\n    <button mat-stroked-button\n      color=\"primary\"\n      (click)=\"addData()\"\n    >\n      Add Data\n    </button>\n  </div>\n\n  <div class=\"table-container\">\n    <table mat-table [dataSource]=\"dataSource\">\n\n      <ng-container matColumnDef=\"id\">\n        <th mat-header-cell *matHeaderCellDef>ID</th>\n        <td mat-cell *matCellDef=\"let element\">{{element.id}}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"last_name\">\n        <th mat-header-cell *matHeaderCellDef>Last Name</th>\n        <td mat-cell *matCellDef=\"let element\">{{element.last_name}}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"age\">\n        <th mat-header-cell *matHeaderCellDef>Age</th>\n        <td mat-cell *matCellDef=\"let element\">{{element.age}}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"amount\">\n        <th mat-header-cell *matHeaderCellDef>Amount</th>\n        <td mat-cell *matCellDef=\"let element\">{{element.amount | currency}}</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  </div>\n\n</div>\n", styles: [""], dependencies: [{ 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: 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: "pipe", type: i1$1.CurrencyPipe, name: "currency" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DatabaseDataDemoComponent, selector: "app-database-data-demo", ngImport: i0, template: "<div style=\"padding: 2rem;\">\n\n  <h2>\n    Database Manager Service Demo\n  </h2>\n\n  <div style=\"margin-bottom: 1rem; display: flex; gap: 1rem;\">\n    <button mat-stroked-button\n      color=\"primary\"\n      (click)=\"clearAllData()\"\n    >\n      Clear Data\n    </button>\n    <button mat-stroked-button\n      color=\"primary\"\n      (click)=\"updateData()\"\n    >\n      Update Data\n    </button>\n    <div style=\"flex:1\"></div>\n    <button\n        mat-stroked-button\n        color=\"warn\"\n        [disabled]=\"!dataToDisplay.length\"\n        (click)=\"removeData()\"\n    >\n      Remove Data\n    </button>\n    <button mat-stroked-button\n      color=\"primary\"\n      (click)=\"addData()\"\n    >\n      Add Data\n    </button>\n  </div>\n\n  <div class=\"table-container\">\n    <table mat-table [dataSource]=\"dataSource\">\n\n      <ng-container matColumnDef=\"id\">\n        <th mat-header-cell *matHeaderCellDef>ID</th>\n        <td mat-cell *matCellDef=\"let element\">{{element.id}}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"last_name\">\n        <th mat-header-cell *matHeaderCellDef>Last Name</th>\n        <td mat-cell *matCellDef=\"let element\">{{element.last_name}}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"age\">\n        <th mat-header-cell *matHeaderCellDef>Age</th>\n        <td mat-cell *matCellDef=\"let element\">{{element.age}}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"amount\">\n        <th mat-header-cell *matHeaderCellDef>Amount</th>\n        <td mat-cell *matCellDef=\"let element\">{{element.amount | currency}}</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  </div>\n\n  <!-- \u2500\u2500 SQL Query Section \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <mat-divider style=\"margin: 2rem 0;\"></mat-divider>\n\n  <h3 style=\"margin-bottom: 1rem;\">SQL Query with DexieJS</h3>\n\n  <div style=\"display: flex; gap: 1rem; align-items: flex-start;\">\n    <mat-form-field style=\"flex: 1;\" appearance=\"outline\">\n      <mat-label>SQL Query</mat-label>\n      <textarea\n        matInput\n        [(ngModel)]=\"sqlQuery\"\n        rows=\"3\"\n        placeholder=\"e.g. SELECT * FROM sample_table WHERE age > 20\"\n        (keydown.control.enter)=\"runSqlQuery()\"\n      ></textarea>\n      <mat-hint>Ctrl+Enter to execute</mat-hint>\n    </mat-form-field>\n\n    <button\n      mat-flat-button\n      color=\"primary\"\n      style=\"margin-top: 4px;\"\n      [disabled]=\"sqlLoading || !sqlQuery.trim()\"\n      (click)=\"runSqlQuery()\"\n    >\n      {{ sqlLoading ? 'Running\u2026' : 'Execute' }}\n    </button>\n  </div>\n\n  <!-- Error -->\n  <div *ngIf=\"sqlError\" style=\"color: #d32f2f; margin: 0.5rem 0 1rem; font-size: 0.875rem;\">\n    <mat-icon style=\"vertical-align: middle; font-size: 16px; height: 16px; width: 16px;\">error</mat-icon>\n    {{ sqlError }}\n  </div>\n\n  <!-- Results table (dynamic columns) -->\n  <div *ngIf=\"!sqlLoading && sqlResults.length > 0\" class=\"table-container\" style=\"margin-top: 1rem;\">\n    <div>\n      {{ sqlResults | json }}\n    </div>\n    <p style=\"font-size: 0.8rem; color: #666; margin-top: 0.5rem;\">\n      {{ sqlResults.length }} row{{ sqlResults.length === 1 ? '' : 's' }} returned\n    </p>\n  </div>\n\n  <!-- Empty state -->\n  <p *ngIf=\"!sqlLoading && !sqlError && sqlResults.length === 0 && sqlQuery.trim()\"\n     style=\"color: #888; font-size: 0.875rem; margin-top: 0.5rem;\">\n    No results to display. Execute a query above.\n  </p>\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: 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.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { 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: 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.JsonPipe, name: "json" }, { kind: "pipe", type: i1$1.CurrencyPipe, name: "currency" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DatabaseDataDemoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-database-data-demo', standalone: false, template: "<div style=\"padding: 2rem;\">\n\n  <h2>\n    Database Manager Service Demo\n  </h2>\n\n  <div style=\"margin-bottom: 1rem; display: flex; gap: 1rem;\">\n    <button mat-stroked-button\n      color=\"primary\"\n      (click)=\"clearAllData()\"\n    >\n      Clear Data\n    </button>\n    <button mat-stroked-button\n      color=\"primary\"\n      (click)=\"updateData()\"\n    >\n      Update Data\n    </button>\n    <div style=\"flex:1\"></div>\n    <button\n        mat-stroked-button\n        color=\"warn\"\n        [disabled]=\"!dataToDisplay.length\"\n        (click)=\"removeData()\"\n    >\n      Remove Data\n    </button>\n    <button mat-stroked-button\n      color=\"primary\"\n      (click)=\"addData()\"\n    >\n      Add Data\n    </button>\n  </div>\n\n  <div class=\"table-container\">\n    <table mat-table [dataSource]=\"dataSource\">\n\n      <ng-container matColumnDef=\"id\">\n        <th mat-header-cell *matHeaderCellDef>ID</th>\n        <td mat-cell *matCellDef=\"let element\">{{element.id}}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"last_name\">\n        <th mat-header-cell *matHeaderCellDef>Last Name</th>\n        <td mat-cell *matCellDef=\"let element\">{{element.last_name}}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"age\">\n        <th mat-header-cell *matHeaderCellDef>Age</th>\n        <td mat-cell *matCellDef=\"let element\">{{element.age}}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"amount\">\n        <th mat-header-cell *matHeaderCellDef>Amount</th>\n        <td mat-cell *matCellDef=\"let element\">{{element.amount | currency}}</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  </div>\n\n</div>\n" }]
+            args: [{ selector: 'app-database-data-demo', standalone: false, template: "<div style=\"padding: 2rem;\">\n\n  <h2>\n    Database Manager Service Demo\n  </h2>\n\n  <div style=\"margin-bottom: 1rem; display: flex; gap: 1rem;\">\n    <button mat-stroked-button\n      color=\"primary\"\n      (click)=\"clearAllData()\"\n    >\n      Clear Data\n    </button>\n    <button mat-stroked-button\n      color=\"primary\"\n      (click)=\"updateData()\"\n    >\n      Update Data\n    </button>\n    <div style=\"flex:1\"></div>\n    <button\n        mat-stroked-button\n        color=\"warn\"\n        [disabled]=\"!dataToDisplay.length\"\n        (click)=\"removeData()\"\n    >\n      Remove Data\n    </button>\n    <button mat-stroked-button\n      color=\"primary\"\n      (click)=\"addData()\"\n    >\n      Add Data\n    </button>\n  </div>\n\n  <div class=\"table-container\">\n    <table mat-table [dataSource]=\"dataSource\">\n\n      <ng-container matColumnDef=\"id\">\n        <th mat-header-cell *matHeaderCellDef>ID</th>\n        <td mat-cell *matCellDef=\"let element\">{{element.id}}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"last_name\">\n        <th mat-header-cell *matHeaderCellDef>Last Name</th>\n        <td mat-cell *matCellDef=\"let element\">{{element.last_name}}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"age\">\n        <th mat-header-cell *matHeaderCellDef>Age</th>\n        <td mat-cell *matCellDef=\"let element\">{{element.age}}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"amount\">\n        <th mat-header-cell *matHeaderCellDef>Amount</th>\n        <td mat-cell *matCellDef=\"let element\">{{element.amount | currency}}</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  </div>\n\n  <!-- \u2500\u2500 SQL Query Section \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <mat-divider style=\"margin: 2rem 0;\"></mat-divider>\n\n  <h3 style=\"margin-bottom: 1rem;\">SQL Query with DexieJS</h3>\n\n  <div style=\"display: flex; gap: 1rem; align-items: flex-start;\">\n    <mat-form-field style=\"flex: 1;\" appearance=\"outline\">\n      <mat-label>SQL Query</mat-label>\n      <textarea\n        matInput\n        [(ngModel)]=\"sqlQuery\"\n        rows=\"3\"\n        placeholder=\"e.g. SELECT * FROM sample_table WHERE age > 20\"\n        (keydown.control.enter)=\"runSqlQuery()\"\n      ></textarea>\n      <mat-hint>Ctrl+Enter to execute</mat-hint>\n    </mat-form-field>\n\n    <button\n      mat-flat-button\n      color=\"primary\"\n      style=\"margin-top: 4px;\"\n      [disabled]=\"sqlLoading || !sqlQuery.trim()\"\n      (click)=\"runSqlQuery()\"\n    >\n      {{ sqlLoading ? 'Running\u2026' : 'Execute' }}\n    </button>\n  </div>\n\n  <!-- Error -->\n  <div *ngIf=\"sqlError\" style=\"color: #d32f2f; margin: 0.5rem 0 1rem; font-size: 0.875rem;\">\n    <mat-icon style=\"vertical-align: middle; font-size: 16px; height: 16px; width: 16px;\">error</mat-icon>\n    {{ sqlError }}\n  </div>\n\n  <!-- Results table (dynamic columns) -->\n  <div *ngIf=\"!sqlLoading && sqlResults.length > 0\" class=\"table-container\" style=\"margin-top: 1rem;\">\n    <div>\n      {{ sqlResults | json }}\n    </div>\n    <p style=\"font-size: 0.8rem; color: #666; margin-top: 0.5rem;\">\n      {{ sqlResults.length }} row{{ sqlResults.length === 1 ? '' : 's' }} returned\n    </p>\n  </div>\n\n  <!-- Empty state -->\n  <p *ngIf=\"!sqlLoading && !sqlError && sqlResults.length === 0 && sqlQuery.trim()\"\n     style=\"color: #888; font-size: 0.875rem; margin-top: 0.5rem;\">\n    No results to display. Execute a query above.\n  </p>\n\n</div>\n" }]
         }], ctorParameters: () => [] });
 class DatabaseDataSource extends DataSource {
     constructor(initialData) {
@@ -13293,5 +13684,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, ParsingResultModel, 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, StreamConfigModel, StreamEventMetadataModel, StreamEventModel, StreamOutputModel, StreamProgressModel, 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, DexieSqlService, ErrorDisplaySettings, ExecutionPlanType, GlobalStoreOptions, HTTPManagerService, HTTPManagerSignalsService, HTTPManagerStateService, HeadersService, HttpRequestManagerModule, HttpRequestServicesDemoComponent, InvalidFileInfoModel, LocalStorageDemoComponent, LocalStorageManagerService, LocalStorageOptions, LocalStorageSignalsDemoComponent, LocalStorageSignalsManagerService, LoggerService, NormalizedRequestOptionsModel, NotificationMessage, OperationResultModel, ParsingResultModel, PathQueryService, PathTrackerStateModel, PublicMessage, QueryParamsTrackerOptionsModel, QueryTrackerStateModel, Random, RandomHSLColor, RandomHexColor, RandomNumber, RandomNumbers, RandomNumbersUnique, RandomPaletteColor, RandomSignature, RandomStr, RandomVisibleColor, RequestErrorInterceptor, RequestHeadersInterceptor, RequestManagerDemoComponent, RequestManagerStateDemoComponent, RequestOptions, RequestService, RequestSignalsService, RetryOptions, SettingOptions, SqlParseError, SqlValidationError, StateMessage, StateOperationResult, StateStorageOptions, StorageData, StorageOption, StorageType, StoreStateManagerService, StoreStateManagerSignalsService, StoreStateSignalsDemoComponent, StreamConfigModel, StreamEventMetadataModel, StreamEventModel, StreamOutputModel, StreamProgressModel, 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