http-request-manager 18.11.9 → 18.11.12

package/fesm2022/http-request-manager.mjs

@@ -1,58 +1,17 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, APP_ID, Inject, InjectionToken, isDevMode, signal, effect, computed, Injector, Optional, EventEmitter, Input, Output, ViewEncapsulation, Component, NgModule, ViewChild } from '@angular/core';
+import { inject, Injectable, APP_ID, Inject, InjectionToken, isDevMode, signal, effect, computed, Injector, Optional, NgModule } from '@angular/core';
 import { ComponentStore } from '@ngrx/component-store';
 import { map, catchError, filter, tap, finalize, takeWhile, retry, startWith, mergeMap, takeUntil, concatMap, toArray, withLatestFrom, switchMap, delay, take, scan, distinctUntilChanged } from 'rxjs/operators';
 import { HttpClient, HttpHeaders, HttpEventType, HttpHeaderResponse, HttpErrorResponse, HTTP_INTERCEPTORS } from '@angular/common/http';
 import * as CryptoJS from 'crypto-js';
-import { from, BehaviorSubject, EMPTY, throwError, defer, interval, timer, Subject, of, merge, Subscription, take as take$1, catchError as catchError$1, map as map$1, tap as tap$1, switchMap as switchMap$1, startWith as startWith$1, distinctUntilChanged as distinctUntilChanged$1, combineLatest, filter as filter$1, takeUntil as takeUntil$1, ReplaySubject } from 'rxjs';
+import { from, BehaviorSubject, EMPTY, throwError, defer, interval, timer, Subject, of, merge, Subscription, take as take$1, catchError as catchError$1 } from 'rxjs';
 import { toObservable } from '@angular/core/rxjs-interop';
 import { ToastMessageDisplayService, ToastDisplay, ToastColors, ToastMessageDisplayModule } from 'toast-message-display';
 import Dexie from 'dexie';
 import * as i1 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
-import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i2$1 from '@angular/forms';
-import { FormBuilder, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import * as i3 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
-import * as i3$1 from '@angular/material/chips';
-import { MatChipsModule } from '@angular/material/chips';
-import * as i12 from '@angular/material/divider';
-import { MatDividerModule } from '@angular/material/divider';
-import * as i4 from '@angular/material/form-field';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i8 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
-import * as i13 from '@angular/material/input';
-import { MatInputModule } from '@angular/material/input';
-import * as i8$1 from '@angular/material/progress-bar';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-import * as i2 from '@angular/material/progress-spinner';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import * as i5 from '@angular/material/select';
-import { MatSelectModule } from '@angular/material/select';
-import { MatSidenavModule } from '@angular/material/sidenav';
-import * as i11 from '@angular/material/slide-toggle';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import * as i7 from '@angular/material/menu';
-import { MatMenuModule } from '@angular/material/menu';
-import * as i3$2 from '@angular/material/toolbar';
-import { MatToolbarModule } from '@angular/material/toolbar';
-import * as i9 from '@angular/material/table';
-import { MatTableModule } from '@angular/material/table';
-import * as i10 from '@angular/material/button-toggle';
-import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import * as i9$1 from '@angular/material/datepicker';
-import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i6 from '@angular/material/core';
-import { MatNativeDateModule } from '@angular/material/core';
-import * as i16 from '@angular/material/card';
-import { MatCardModule } from '@angular/material/card';
-import * as i1$2 from '@angular/material/tabs';
-import { MatTabsModule } from '@angular/material/tabs';
-import { DataSource } from '@angular/cdk/collections';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 var StorageType;
 (function (StorageType) {
@@ -2961,6 +2920,19 @@ class BatchResult {
     }
 }
 
+class BatchRequestResultModel {
+    constructor(request = null, data = null, index = 0, status = 'success', error) {
+        this.request = request;
+        this.data = data;
+        this.index = index;
+        this.status = status;
+        this.error = error;
+    }
+    static adapt(item) {
+        return new BatchRequestResultModel(item?.request, item?.data, item?.index, item?.status, item?.error);
+    }
+}
+
 function isPendingState(state) {
     return state.isPending === true;
 }
@@ -3778,7 +3750,7 @@ class HTTPManagerService extends RequestService {
      * Execute multiple HTTP requests with configurable execution strategy
      * @param requests Array of ApiRequest configurations
      * @param options Optional batch configuration (all properties optional)
-     * @returns Observable emitting array of data in the order of requests provided
+     * @returns Observable emitting array of wrapped results in the order of requests provided
      */
     getBatchRequests(requests, options) {
         const batchOptions = BatchOptions.adapt(options);
@@ -3794,22 +3766,22 @@ class HTTPManagerService extends RequestService {
      * Execute requests sequentially (one at a time, in order)
      * @param requests Array of ApiRequest configurations
      * @param options Optional batch configuration
-     * @returns Observable emitting array of data when all requests complete
+     * @returns Observable emitting array of wrapped results when all requests complete
      */
     getSequentialRequest(requests, options) {
         const batchOptions = BatchOptions.adapt(options);
         const results = new Array(requests.length);
         return from(requests).pipe(concatMap((req, index) => {
             return this.getRequest(req).pipe(tap(data => {
-                results[index] = data;
-            }), catchError(error => this.handleSequentialError(req, error, index, batchOptions)));
+                results[index] = new BatchRequestResultModel(req, data, index, 'success');
+            }), catchError(error => this.handleSequentialError(req, error, index, batchOptions).pipe(tap(result => { results[index] = result; }))));
         }), toArray(), map(() => results));
     }
     /**
      * Execute requests in parallel with concurrency control
      * @param requests Array of ApiRequest configurations
      * @param options Optional batch configuration with concurrency limit
-     * @returns Observable emitting array of data when all requests complete
+     * @returns Observable emitting array of wrapped results when all requests complete
      */
     getParallelRequest(requests, options) {
         const batchOptions = BatchOptions.adapt(options);
@@ -3817,8 +3789,8 @@ class HTTPManagerService extends RequestService {
         const results = new Array(requests.length);
         return from(requests).pipe(mergeMap((req, index) => {
             return this.getRequest(req).pipe(tap(data => {
-                results[index] = data;
-            }), catchError(error => this.handleParallelError(req, error, index, batchOptions)));
+                results[index] = new BatchRequestResultModel(req, data, index, 'success');
+            }), catchError(error => this.handleParallelError(req, error, index, batchOptions).pipe(tap(result => { results[index] = result; }))));
         }, concurrency), toArray(), map(() => results));
     }
     /**
@@ -3893,19 +3865,13 @@ class HTTPManagerService extends RequestService {
         if (options.stopOnError) {
             return throwError(() => error);
         }
-        if (options.ignoreErrors) {
-            return of(undefined);
-        }
-        return throwError(() => error);
+        return of(new BatchRequestResultModel(request, null, index, 'error', error));
     }
     handleParallelError(request, error, index, options) {
         if (options.logErrors !== false) {
             console.error(`Batch request ${index} failed:`, error);
         }
-        if (options.ignoreErrors) {
-            return of(undefined);
-        }
-        return of(undefined);
+        return of(new BatchRequestResultModel(request, null, index, 'error', error));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HTTPManagerService, deps: [{ token: CONFIG_SETTINGS_TOKEN, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HTTPManagerService, providedIn: 'root' }); }
@@ -4442,22 +4408,22 @@ class HTTPManagerSignalsService extends RequestSignalsService {
      * Execute requests sequentially (one at a time, in order)
      * @param requests Array of ApiRequest configurations
      * @param options Optional batch configuration
-     * @returns Observable emitting array of data when all requests complete
+     * @returns Observable emitting array of wrapped results when all requests complete
      */
     getSequentialRequest(requests, options) {
         const batchOptions = BatchOptions.adapt(options);
         const results = new Array(requests.length);
         return from(requests).pipe(concatMap((req, index) => {
             return this.getRequest(req).pipe(tap(data => {
-                results[index] = data;
-            }), catchError(error => this.handleSequentialError(req, error, index, batchOptions)));
+                results[index] = new BatchRequestResultModel(req, data, index, 'success');
+            }), catchError(error => this.handleSequentialError(req, error, index, batchOptions).pipe(tap(result => { results[index] = result; }))));
         }), toArray(), map(() => results));
     }
     /**
      * Execute requests in parallel with concurrency control
      * @param requests Array of ApiRequest configurations
      * @param options Optional batch configuration with concurrency limit
-     * @returns Observable emitting array of data when all requests complete
+     * @returns Observable emitting array of wrapped results when all requests complete
      */
     getParallelRequest(requests, options) {
         const batchOptions = BatchOptions.adapt(options);
@@ -4465,8 +4431,8 @@ class HTTPManagerSignalsService extends RequestSignalsService {
         const results = new Array(requests.length);
         return from(requests).pipe(mergeMap((req, index) => {
             return this.getRequest(req).pipe(tap(data => {
-                results[index] = data;
-            }), catchError(error => this.handleParallelError(req, error, index, batchOptions)));
+                results[index] = new BatchRequestResultModel(req, data, index, 'success');
+            }), catchError(error => this.handleParallelError(req, error, index, batchOptions).pipe(tap(result => { results[index] = result; }))));
         }, concurrency), toArray(), map(() => results));
     }
     /**
@@ -4541,19 +4507,13 @@ class HTTPManagerSignalsService extends RequestSignalsService {
         if (options.stopOnError) {
             return throwError(() => error);
         }
-        if (options.ignoreErrors) {
-            return of(undefined);
-        }
-        return throwError(() => error);
+        return of(new BatchRequestResultModel(request, null, index, 'error', error));
     }
     handleParallelError(request, error, index, options) {
         if (options.logErrors !== false) {
             console.error(`Batch request ${index} failed:`, error);
         }
-        if (options.ignoreErrors) {
-            return of(undefined);
-        }
-        return of(undefined);
+        return of(new BatchRequestResultModel(request, null, index, 'error', error));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HTTPManagerSignalsService, deps: [{ token: CONFIG_SETTINGS_TOKEN, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HTTPManagerSignalsService, providedIn: 'root' }); }
@@ -7277,227 +7237,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     args: [PROXY_CONFIG]
                 }] }] });
 
-class DownloadFileComponent {
-    constructor() {
-        this.subscriptions = new Subscription();
-        this.displayError = 3; // seconds
-        this.diameter = 32;
-        this.mode = 'determinate';
-        this.isPending = false;
-        this.active = false;
-        this.disabled = false;
-        this.error = new EventEmitter();
-        this._progress = 0;
-        this._hasError = false;
-        this.errorTimerActive = false;
-    }
-    set progress(value) {
-        this._progress = value ?? 0;
-    }
-    get progress() {
-        return this._progress;
-    }
-    set hasError(value) {
-        this._hasError = !!value;
-        if (this._hasError && !this.errorTimerActive) {
-            this.errorTimerActive = true;
-            this.active = false;
-            this.error.emit();
-            this.subscriptions.add(timer(this.displayError * 1000)
-                .subscribe((err) => {
-                this._hasError = false;
-                this.errorTimerActive = false;
-            }));
-        }
-    }
-    get hasError() {
-        return this._hasError;
-    }
-    ngOnInit() { }
-    onAction() {
-        this.isPending = false;
-        if (this.event)
-            this.event();
-    }
-    ngOnDestroy() {
-        this.subscriptions.unsubscribe();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DownloadFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DownloadFileComponent, selector: "app-download-file", inputs: { event: "event", displayError: "displayError", diameter: "diameter", mode: "mode", isPending: "isPending", active: "active", disabled: "disabled", progress: "progress", hasError: "hasError" }, outputs: { error: "error" }, ngImport: i0, template: "@if (!isPending) {\n  @if (hasError) {\n    <div class=\"width center-txt\" style=\"margin-bottom: 4px;\">\n      <mat-icon color=\"warn\" class=\"warn-icon\">warning</mat-icon>\n    </div>\n  } @else {\n    @if (active) {\n      <div class=\"container-obj\">\n        <div class=\"centered-obj-div\">\n          <mat-progress-spinner\n            color=\"primary\"\n            mode=\"indeterminate\"\n            [diameter]=\"44\"\n          ></mat-progress-spinner>\n        </div>\n      </div>\n    } @else {\n      <button data-tracking=\"export-btn\" mat-icon-button (click)=\"onAction()\" class=\"icon-button\" [disabled]=\"disabled\">\n        <mat-icon class=\"custom-icon\">file_download</mat-icon>\n      </button>\n    }\n  }\n} @else {\n  @if ((progress > 0 && progress < 100)) {\n    <div\n      class=\"spinner-container\"\n      >\n      <div class=\"spinner-background\">\n        {{progress}}%\n      </div>\n      <mat-progress-spinner\n        color=\"primary\"\n        [mode]=\"mode\"\n        [value]=\"progress\"\n        [diameter]=\"44\"\n      ></mat-progress-spinner>\n    </div>\n  } @else {\n    <div class=\"container-obj\">\n      <div class=\"centered-obj-div\">\n        <mat-progress-spinner\n          color=\"primary\"\n          mode=\"indeterminate\"\n          [diameter]=\"44\"\n        ></mat-progress-spinner>\n      </div>\n    </div>\n  }\n}\n\n\n\n\n", styles: [":not(spinner-container).spinner-container{position:relative}:not(spinner-container).spinner-container .spinner-background{position:absolute;width:44px;height:44px;font-size:12px;line-height:32px;text-align:center;overflow:hidden;border-radius:50%;border:solid 5px whitesmoke}.center-txt{align-content:center;text-align:-webkit-center}.width{width:48px;height:48px}.icon-button{display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0}.container-obj{display:flex;justify-content:center;align-items:center;width:48px;height:48px}.centered-obj-div{text-align:center}\n"], dependencies: [{ kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }], encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DownloadFileComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-download-file', encapsulation: ViewEncapsulation.None, standalone: false, template: "@if (!isPending) {\n  @if (hasError) {\n    <div class=\"width center-txt\" style=\"margin-bottom: 4px;\">\n      <mat-icon color=\"warn\" class=\"warn-icon\">warning</mat-icon>\n    </div>\n  } @else {\n    @if (active) {\n      <div class=\"container-obj\">\n        <div class=\"centered-obj-div\">\n          <mat-progress-spinner\n            color=\"primary\"\n            mode=\"indeterminate\"\n            [diameter]=\"44\"\n          ></mat-progress-spinner>\n        </div>\n      </div>\n    } @else {\n      <button data-tracking=\"export-btn\" mat-icon-button (click)=\"onAction()\" class=\"icon-button\" [disabled]=\"disabled\">\n        <mat-icon class=\"custom-icon\">file_download</mat-icon>\n      </button>\n    }\n  }\n} @else {\n  @if ((progress > 0 && progress < 100)) {\n    <div\n      class=\"spinner-container\"\n      >\n      <div class=\"spinner-background\">\n        {{progress}}%\n      </div>\n      <mat-progress-spinner\n        color=\"primary\"\n        [mode]=\"mode\"\n        [value]=\"progress\"\n        [diameter]=\"44\"\n      ></mat-progress-spinner>\n    </div>\n  } @else {\n    <div class=\"container-obj\">\n      <div class=\"centered-obj-div\">\n        <mat-progress-spinner\n          color=\"primary\"\n          mode=\"indeterminate\"\n          [diameter]=\"44\"\n        ></mat-progress-spinner>\n      </div>\n    </div>\n  }\n}\n\n\n\n\n", styles: [":not(spinner-container).spinner-container{position:relative}:not(spinner-container).spinner-container .spinner-background{position:absolute;width:44px;height:44px;font-size:12px;line-height:32px;text-align:center;overflow:hidden;border-radius:50%;border:solid 5px whitesmoke}.center-txt{align-content:center;text-align:-webkit-center}.width{width:48px;height:48px}.icon-button{display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0}.container-obj{display:flex;justify-content:center;align-items:center;width:48px;height:48px}.centered-obj-div{text-align:center}\n"] }]
-        }], propDecorators: { event: [{
-                type: Input
-            }], displayError: [{
-                type: Input
-            }], diameter: [{
-                type: Input
-            }], mode: [{
-                type: Input
-            }], isPending: [{
-                type: Input
-            }], active: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], error: [{
-                type: Output
-            }], progress: [{
-                type: Input
-            }], hasError: [{
-                type: Input
-            }] } });
-
-class DownloadLabels {
-    constructor(error = '', action = '', icon = 'error') {
-        this.error = error;
-        this.action = action;
-        this.icon = icon;
-    }
-    static adapt(item) {
-        return new DownloadLabels(item?.error, item?.action, item?.icon);
-    }
-}
-
-class FileDownloaderComponent extends HTTPManagerService {
-    set labels(value) {
-        this._labels = (value) ? DownloadLabels.adapt(value) : DownloadLabels.adapt();
-    }
-    get labels() {
-        return this._labels;
-    }
-    constructor() {
-        super();
-        this.delayError = 3;
-        this.apiRequest = ApiRequest.adapt();
-        this.displayErrorMessage = false;
-        this._labels = DownloadLabels.adapt();
-        this.active = false;
-        this.subscription = new Subscription();
-        this.completed = new EventEmitter();
-        this.failed = new EventEmitter();
-        this.disabled = false;
-    }
-    ngOnInit() {
-    }
-    onDownloadStreaming() {
-        if (this.active)
-            return;
-        this.active = true;
-        return this.downloadRequest(this.apiRequest, [])
-            .pipe(distinctUntilChanged(), catchError((err) => {
-            this.onError(err.message);
-            this.active = false;
-            this.failed.emit(err);
-            return throwError(() => err);
-        }), finalize(() => {
-            if (!this.active)
-                return;
-            this.active = false;
-            this.completed.emit();
-        }))
-            .subscribe();
-    }
-    onError(message) {
-        if (!message || !this.displayErrorMessage)
-            return;
-        const display = ToastDisplay.adapt({
-            message,
-            action: 'Ok',
-            color: ToastColors.ERROR,
-            icon: 'error',
-        });
-        this.active = false;
-        this.toastMessage.toastMessage(display);
-    }
-    OnDestroy() {
-        this.subscription.unsubscribe();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FileDownloaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FileDownloaderComponent, selector: "app-file-downloader", inputs: { delayError: "delayError", apiRequest: "apiRequest", displayErrorMessage: "displayErrorMessage", saveFileAs: "saveFileAs", labels: "labels", disabled: "disabled" }, outputs: { completed: "completed", failed: "failed" }, usesInheritance: true, ngImport: i0, template: "<app-download-file\n  [disabled]=\"disabled\"\n  [displayError]=\"3\"\n  [event]=\"onDownloadStreaming.bind(this)\"\n  [isPending]=\"(isPending$ | async) || false\"\n  [progress]=\"(progress$ | async)\"\n  [hasError]=\"(error$ | async)\"\n  (error)=\"onError(labels.error)\"\n  [active]=\"active\"\n></app-download-file>\n", styles: [".snackBarInfo{background-color:#f44336;color:#fff}.mat-simple-snackbar>span{font-weight:700}.mat-simple-snackbar-action .mat-button .mat-button-wrapper{color:#fff}.cdk-overlay-pane>.mat-snack-bar-container{width:100%}.mat-snack-bar-container{max-width:100%!important;width:100%}\n"], dependencies: [{ kind: "component", type: DownloadFileComponent, selector: "app-download-file", inputs: ["event", "displayError", "diameter", "mode", "isPending", "active", "disabled", "progress", "hasError"], outputs: ["error"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FileDownloaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-file-downloader', encapsulation: ViewEncapsulation.None, standalone: false, template: "<app-download-file\n  [disabled]=\"disabled\"\n  [displayError]=\"3\"\n  [event]=\"onDownloadStreaming.bind(this)\"\n  [isPending]=\"(isPending$ | async) || false\"\n  [progress]=\"(progress$ | async)\"\n  [hasError]=\"(error$ | async)\"\n  (error)=\"onError(labels.error)\"\n  [active]=\"active\"\n></app-download-file>\n", styles: [".snackBarInfo{background-color:#f44336;color:#fff}.mat-simple-snackbar>span{font-weight:700}.mat-simple-snackbar-action .mat-button .mat-button-wrapper{color:#fff}.cdk-overlay-pane>.mat-snack-bar-container{width:100%}.mat-snack-bar-container{max-width:100%!important;width:100%}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { delayError: [{
-                type: Input
-            }], apiRequest: [{
-                type: Input
-            }], displayErrorMessage: [{
-                type: Input
-            }], saveFileAs: [{
-                type: Input
-            }], labels: [{
-                type: Input
-            }], completed: [{
-                type: Output
-            }], failed: [{
-                type: Output
-            }], disabled: [{
-                type: Input
-            }] } });
-
-class SpinnerComponent {
-    constructor() {
-        this.value = 0;
-    }
-    ngOnInit() {
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SpinnerComponent, selector: "app-spinner", inputs: { color: "color", diameter: "diameter", display: "display", mode: "mode", strokeWidth: "strokeWidth", value: "value" }, ngImport: i0, template: "<div class=\"spinner-background\">{{display}}</div>\n<mat-progress-spinner\n    [color]=\"color\"\n    [diameter]=\"diameter\"\n    [mode]=\"mode || 'indeterminate'\"\n    [strokeWidth]=\"strokeWidth\"\n    [value]=\"value\">\n</mat-progress-spinner>\n", styles: [".example-h2{margin:24px 0}:not(spinner-container).spinner-container{position:relative}:not(spinner-container).spinner-container .spinner-background{position:absolute;width:80px;height:80px;line-height:80px;text-align:center;overflow:hidden;border-color:#673ab71f;border-radius:50%;border-style:solid;border-width:10px}\n"], dependencies: [{ kind: "component", type: i2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SpinnerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-spinner', standalone: false, template: "<div class=\"spinner-background\">{{display}}</div>\n<mat-progress-spinner\n    [color]=\"color\"\n    [diameter]=\"diameter\"\n    [mode]=\"mode || 'indeterminate'\"\n    [strokeWidth]=\"strokeWidth\"\n    [value]=\"value\">\n</mat-progress-spinner>\n", styles: [".example-h2{margin:24px 0}:not(spinner-container).spinner-container{position:relative}:not(spinner-container).spinner-container .spinner-background{position:absolute;width:80px;height:80px;line-height:80px;text-align:center;overflow:hidden;border-color:#673ab71f;border-radius:50%;border-style:solid;border-width:10px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { color: [{
-                type: Input
-            }], diameter: [{
-                type: Input
-            }], display: [{
-                type: Input
-            }], mode: [{
-                type: Input
-            }], strokeWidth: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }] } });
-
-class FileDownloaderModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FileDownloaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: FileDownloaderModule, declarations: [SpinnerComponent,
-            DownloadFileComponent,
-            FileDownloaderComponent], imports: [CommonModule,
-            MatIconModule,
-            MatProgressSpinnerModule,
-            MatButtonModule], exports: [FileDownloaderComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FileDownloaderModule, imports: [CommonModule,
-            MatIconModule,
-            MatProgressSpinnerModule,
-            MatButtonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FileDownloaderModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        MatIconModule,
-                        MatProgressSpinnerModule,
-                        MatButtonModule,
-                    ],
-                    declarations: [
-                        SpinnerComponent,
-                        DownloadFileComponent,
-                        FileDownloaderComponent,
-                    ],
-                    exports: [
-                        FileDownloaderComponent
-                    ]
-                }]
-        }] });
-
 class DisplayConfig {
     constructor(type = 'snackbar', supportsMarkdown, stackable, queueBehavior, autoDismiss, width, height) {
         this.type = type;
@@ -7704,3284 +7443,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             args: [{ providedIn: 'root' }]
         }] });
 
-let ClientInfo$2 = class ClientInfo {
-    constructor(domain = '', service = '', id = 0, name = '') {
-        this.domain = domain;
-        this.service = service;
-        this.id = id;
-        this.name = name;
-    }
-    static adapt(item) {
-        return new ClientInfo(item?.domain, item?.service, item?.id, (item?.first_name || item?.last_name) ? `${item?.first_name} ${item?.last_name}` : '');
-    }
-};
-
-let ClientInfoMapper$2 = class ClientInfoMapper {
-    constructor(id = 0, first_name = '', last_name = '', email = '') {
-        this.id = id;
-        this.first_name = first_name;
-        this.last_name = last_name;
-        this.email = email;
-    }
-    static adapt(item) {
-        const first_name = (item?.name) ? item.name.split(' ')[0] : '';
-        const last_name = (item?.name) ? item.name.split(' ')[1] : '';
-        return new ClientInfoMapper(item?.id, first_name, last_name, item?.email);
-    }
-};
-
-let AIPrompt$2 = class AIPrompt {
-    constructor(response = '') {
-        this.response = response;
-    }
-    static adapt(item) {
-        return new AIPrompt(item?.response);
-    }
-};
-
-class RequestManagerBasicDemoComponent {
-    // Dynamic columns based on data structure
-    getColumnsFromData(data) {
-        if (!data || data.length === 0) {
-            return [];
-        }
-        const firstRecord = data[0];
-        if (!firstRecord || typeof firstRecord !== 'object') {
-            return [];
-        }
-        // Extract all keys from the first record, excluding null/undefined
-        return Object.keys(firstRecord).filter(key => firstRecord[key] !== null && firstRecord[key] !== undefined);
-    }
-    // Update displayed columns when data changes
-    updateDisplayedColumns(data) {
-        this.displayedColumns = this.getColumnsFromData(data);
-        console.log('[DEMO] Updated columns:', this.displayedColumns);
-    }
-    // Helper to check if value is an object
-    isObject(value) {
-        return value !== null && typeof value === 'object' && !Array.isArray(value);
-    }
-    get retry() {
-        return this.requestForm.get('retry')?.value;
-    }
-    get headers() {
-        return this.requestForm.get('headers');
-    }
-    get isValid() {
-        this.requestForm.markAllAsTouched();
-        return this.requestForm.valid;
-    }
-    constructor() {
-        this.server = 'http://localhost:8080';
-        this.displayedColumns = [];
-        this.fb = inject(FormBuilder);
-        this.toastMessage = inject(ToastMessageDisplayService);
-        this.questionControl = this.fb.control("", [Validators.required]);
-        this.httpManagerService = inject(HTTPManagerService);
-        this.isPending$ = this.httpManagerService.isPending$;
-        this.countdown$ = this.httpManagerService.countdown$;
-        this.GET_error$ = new BehaviorSubject('');
-        this.POST_error$ = new BehaviorSubject('');
-        this.PUT_error$ = new BehaviorSubject('');
-        this.DELETE_error$ = new BehaviorSubject('');
-        this.STREAM_error$ = new BehaviorSubject('');
-        this.STREAM_AI_error$ = new BehaviorSubject('');
-        this.requestParams = {
-            GET: ApiRequest.adapt(),
-            POST: ApiRequest.adapt(),
-            PUT: ApiRequest.adapt(),
-            DELETE: ApiRequest.adapt(),
-            STREAM: ApiRequest.adapt(),
-        };
-        this.streamTypes = [
-            { id: 'JSON', value: 'json' },
-            { id: 'NDJSON', value: 'ndjson' },
-            { id: 'AI Streaming', value: 'ai_streaming' },
-            { id: 'Event Stream', value: 'event_stream' },
-            { id: 'Auto', value: 'auto' },
-        ];
-        this.streamType = 'Auto';
-        this.downloadRequest = ApiRequest.adapt({
-            server: 'assets/images',
-            path: ['lego.png'],
-            saveAs: 'john.jpg', // Optional
-            headers: { 'Authorization': 'Bearer Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6InJ0c0ZULWItN0x1WTdEVlllU05LY0lKN1ZuYyJ9.eyJhdWQiOiI4ODhhMzFjZS01OWQzLTRhMTItYTU5Ni04ZDYyZjY0MWI1MDUiLCJpc3MiOiJodHRwczovL2xvZ2luLm1pY3Jvc29mdG9ubGluZS5jb20vNmY0MTE5ODItY2YyMy00ZTQ1LTk0NDktNGI2MDdiN2E4OGVjL3YyLjAiLCJpYXQiOjE3NjU4MzQxNDksIm5iZiI6MTc2NTgzNDE0OSwiZXhwIjoxNzY1ODM5NzQ2LCJhY2N0IjowLCJhaW8iOiJBV1FBbS84YUFBQUFVUEZOYUhSZkZ4ZVkwRWthcFBzdWZaNG1QYXV6YVRoODRRZUtQRzkrbEFIVE5XanVwQy9ZSjEwK2IrMktWVlJSSXZRNFpwS2xyWTFGd0xRZmtXOTNLbkRNckxSeEMzWTVOOGlQREZ4b1liZExucW1QL1N1ZE1pRW1Va05tTklSWSIsImF6cCI6Ijg4OGEzMWNlLTU5ZDMtNGExMi1hNTk2LThkNjJmNjQxYjUwNSIsImF6cGFjciI6IjAiLCJncm91cHMiOlsiZWE2ZDk5YjAtNDgyNC00MDU0LTk0MTQtZDNhOTZkZDA3MjRiIl0sIm5hbWUiOiJHVExDIEFwcCBTdXBlciBBZG1pbiIsIm9pZCI6IjI2NzUxY2I2LWNlMDEtNDMzMC05OTc0LWZjMzgxMjQ3YTEzYyIsInByZWZlcnJlZF91c2VybmFtZSI6Imd0bGMwMDNAZ3RsYy5jYSIsInJoIjoiMS5BUzRBZ2hsQmJ5UFBSVTZVU1V0Z2UzcUk3TTR4aW9qVFdSSktwWmFOWXZaQnRRVm1BYTR1QUEuIiwicm9sZXMiOlsiZ3RsYy5hY2wuc3VwZXJhZG1pbiJdLCJzY3AiOiJHVExDX0FwcGxpY2F0aW9uIiwic2lkIjoiMDAzZjVhZDktZmJmNi1jZTkyLTg3MjItMWEzNDExYjMzMDJiIiwic3ViIjoiS0RYQ3drVlhUbTRUUmcwaTkxbXZDZzgtQ29uLXpWbk5FQ2Y5LVg0dkpzUSIsInRpZCI6IjZmNDExOTgyLWNmMjMtNGU0NS05NDQ5LTRiNjA3YjdhODhlYyIsInVwbiI6Imd0bGMwMDNAZ3RsYy5jYSIsInV0aSI6InpBaTJoMmpVUUVHbVY0RTJXMWxqQUEiLCJ2ZXIiOiIyLjAiLCJ3aWRzIjpbImI3OWZiZjRkLTNlZjktNDY4OS04MTQzLTc2YjE5NGU4NTUwOSJdLCJ4bXNfZnRkIjoiUDJraW1ZM0tqc1BTRndxNHlZdmJ0bGhrSUk3d2tXNmFpcW1FQ1BaNEdja0JkWE5sWVhOMExXUnpiWE0ifQ.LzppoggMm27smSAy9SamtPN95vCzdELCAfhtOj5n_T_H6g9xCmNRLS9FaUFQMau6Qvl0lROKl7WDklTswLFkfxbIxCBWtXdL-LTqT5cDURSJAll8vC3zlN3Hg9pAFBUVZFRolt6Z7LvPdI3pvUOQs0yFwVzp9k6cLF8aemKdwKQrMX3XXua1MfBWZcqQ4WiBVNmKh8w6yQB35I4u5WqdFnu33nUGb-kvc18SOpoUfiJnlV-PudaEzFXdU3CjAaMEcuPFv5xLwWJKuhU73dNH4EyQDFMVGtcIHNnieOfiY_nK2_0-5DM6aI40UIRK6Bt-HmMQpnbhLps5y3ep6Z7RNw' } // Optional
-        });
-        // downloadRequest = ApiRequest.adapt({
-        //   server: 'oidc/ai/file'
-        // })
-        this.sampleClientData = {
-            id: 0,
-            name: "Old School Dates",
-            domain: "osd.com",
-            service: "osd",
-            spiffe: "osd.com/osd",
-            secret: "SMOPECXP-OS4P-USOG-X2II-3XMD1FQDR3IJX",
-            created: 1693003138,
-            modified: 1693003138,
-            icon: "",
-            imageFile: "",
-            email: "wavecoders@gmail.com"
-        };
-        this.requestForm = this.fb.group({
-            path: this.fb.control("ai/"),
-            headers: this.fb.array([]),
-            adapter: [null],
-            mapper: [null],
-            retry: this.fb.group({
-                times: [3],
-                delay: [3],
-            }),
-            polling: [3],
-        });
-        this.AIType = 0;
-        this.sampleAdaptors = [
-            { label: "ClientInfo Basic", value: ClientInfo$2.adapt },
-            { label: "AI Prompt", value: AIPrompt$2.adapt },
-        ];
-        this.sampleMappers = [
-            { label: "Mapper Basic", value: ClientInfoMapper$2.adapt },
-            { label: "AI Prompt", value: AIPrompt$2.adapt },
-        ];
-        this.hasId = (arr) => {
-            if (arr.length === 0)
-                return false;
-            return !isNaN(arr[arr.length - 1]);
-        };
-        this.props = (adapter) => {
-            return (adapter) ? adapter() : null;
-        };
-        // server = `http://sample-endpoint/as/authorization.oauth2`
-        this.arrayObjectsToObjects = (arr) => {
-            return Array.isArray(arr) ? arr.reduce((obj, item) => Object.assign(obj, { [item.key]: item.value }), {}) : {};
-        };
-    }
-    ngOnInit() {
-        // const reqGet2 = ApiRequest.adapt({
-        //   server,
-        //   path: ['clients'],
-        //   headers: { authentication: "Bearer <KEY>" },
-        //   adapter: ClientInfo,
-        //   dataType: DataType.OBJECT,
-        //   // concurrent: false,
-        //   // polling: 3, //seconds
-        // })
-        // const req2 = [1024,1025,1026].map(item => {
-        //   return this.httpManagerService.getRequest<ClientInfo[]>(reqGet2, [item])
-        //   .pipe(
-        //     catchError(error => {
-        //       return throwError(() => new Error(error.error.message))
-        //     })
-        //   )
-        // })
-        // forkJoin(req2)
-        // .subscribe(res => console.log(res))
-    }
-    onStreamType(type) {
-        this.streamType = type;
-    }
-    addHeader() {
-        const header = this.fb.group({
-            key: ['', Validators.required],
-            value: ['']
-        });
-        this.headers.push(header);
-    }
-    removeHeader(index) {
-        this.headers.removeAt(index);
-    }
-    compileRequest() {
-        const requestParams = this.requestForm.value;
-        requestParams.headers = this.arrayObjectsToObjects(requestParams.headers || []);
-        const pathReq = (requestParams.path === "") ? [] : (requestParams.path || "").split("/");
-        if (!this.pollingState.checked)
-            requestParams.polling = 0;
-        if (!this.failedState.checked) {
-            requestParams.retry = { times: 0, delay: 0 };
-        }
-        const apiOptions = ApiRequest.adapt(requestParams);
-        apiOptions.path = [];
-        apiOptions.server = this.server;
-        apiOptions.adapter = this.adapter;
-        apiOptions.mapper = this.mapper;
-        return { apiOptions: apiOptions, path: pathReq };
-    }
-    onGetRequest() {
-        if (!this.isValid)
-            return;
-        const reqParams = this.compileRequest();
-        this.requestParams.GET = reqParams.apiOptions;
-        this.GET$ = EMPTY; //Cancels Previous
-        this.GET_error$.next('');
-        this.GET$ = this.httpManagerService.getRequest({ ...reqParams.apiOptions }, reqParams.path)
-            .pipe(
-        // tap((data) => console.log("API GET response", data)),
-        catchError(error => {
-            return throwError(() => this.errorHandling(error, 'GET'));
-        }));
-    }
-    onCreateRequest() {
-        if (!this.isValid)
-            return;
-        const reqParams = this.compileRequest();
-        this.requestParams.POST = reqParams.apiOptions;
-        this.POST$ = EMPTY; //Cancels Previous
-        this.POST_error$.next('');
-        console.log("POST", this.sampleClientData);
-        console.log("POST", reqParams.apiOptions);
-        console.log("POST", reqParams.path);
-        this.POST$ = this.httpManagerService.postRequest(this.sampleClientData, reqParams.apiOptions, reqParams.path)
-            .pipe(
-        // tap((data) => console.log("API POST response", data)),
-        catchError(error => {
-            return throwError(() => this.errorHandling(error, 'POST'));
-        }));
-    }
-    onUpdateRequest() {
-        if (!this.isValid)
-            return;
-        const reqParams = this.compileRequest();
-        if (!this.hasId(reqParams.path)) {
-            console.log("Missing ID");
-            return;
-        }
-        this.sampleClientData.id = parseInt(reqParams.path[reqParams.path.length - 1]);
-        this.requestParams.PUT = reqParams.apiOptions;
-        this.PUT$ = EMPTY; //Cancels Previous
-        this.PUT_error$.next('');
-        this.PUT$ = this.httpManagerService.putRequest(this.sampleClientData, reqParams.apiOptions, reqParams.path)
-            .pipe(
-        // tap((data) => console.log("API PUT response", data)),
-        catchError(error => {
-            return throwError(() => this.errorHandling(error, 'PUT'));
-        }));
-    }
-    onDeleteRequest() {
-        if (!this.isValid)
-            return;
-        const reqParams = this.compileRequest();
-        this.requestParams.DELETE = reqParams.apiOptions;
-        if (!this.hasId(reqParams.path)) {
-            console.log("Missing ID");
-            return;
-        }
-        this.sampleClientData.id = parseInt(reqParams.path[reqParams.path.length - 1]);
-        this.requestParams.DELETE = reqParams.apiOptions;
-        this.DELETE$ = EMPTY; //Cancels Previous
-        this.DELETE_error$.next('');
-        this.DELETE$ = this.httpManagerService.deleteRequest(reqParams.apiOptions, reqParams.path)
-            .pipe(
-        // tap((data) => console.log("API DELETE response", data)),
-        catchError(error => {
-            return throwError(() => this.errorHandling(error, 'DELETE'));
-        }));
-    }
-    onStreamPostRequest() {
-        if (!this.isValid)
-            return;
-        const reqParams = this.compileRequest();
-        let payload = {};
-        let apiPath = reqParams.path;
-        let apiOptions = reqParams.apiOptions;
-        let responseMapper = (items) => items.response;
-        if (this.AIType === 0) {
-            // API request
-            payload = { prompt: this.questionControl.value };
-        }
-        else {
-            // Local Ollama request
-            apiOptions.server = "api";
-            apiPath = ["generate"];
-            apiOptions.stream = true;
-            apiOptions.streamType = this.streamType;
-            payload = {
-                model: "phi3:latest",
-                prompt: this.questionControl.value,
-                stream: true,
-            };
-            responseMapper = (items) => items.map((word) => word.response).flat().join('');
-        }
-        this.requestParams.STREAM = apiOptions;
-        this.STREAM_AI$ = EMPTY;
-        this.STREAM_AI_error$.next('');
-        this.STREAM_AI$ = this.httpManagerService.postRequest(payload, apiOptions, apiPath).pipe(map(responseMapper), tap(() => this.questionControl.reset()), catchError(error => throwError(() => this.errorHandling(error, 'STREAM'))));
-    }
-    onStreamRequest() {
-        if (!this.isValid)
-            return;
-        const reqParams = this.compileRequest();
-        reqParams.apiOptions.stream = true;
-        reqParams.apiOptions.streamType = StreamType.NDJSON;
-        this.requestParams.GET = reqParams.apiOptions;
-        this.STREAM$ = this.httpManagerService.getRequest(reqParams.apiOptions, reqParams.path)
-            .pipe(tap((data) => {
-            console.log("API STREAM response", data);
-            if (data && data.length > 0) {
-                this.updateDisplayedColumns(data);
-            }
-        }), catchError(error => {
-            return throwError(() => this.errorHandling(error, 'STREAM'));
-        }));
-    }
-    onDownloadCompleted() {
-        const message = "Download Completed";
-        const display = ToastDisplay.adapt({
-            message,
-            action: 'Ok',
-            color: ToastColors.SUCCESS,
-            icon: 'sentiment_satisfied_alt',
-        });
-        this.toastMessage.toastMessage(display);
-    }
-    onDownloadFailed(err) {
-        const message = "Download Failed";
-        const display = ToastDisplay.adapt({
-            message,
-            action: 'Ok',
-            color: ToastColors.ERROR,
-            icon: 'warning',
-        });
-        this.toastMessage.toastMessage(display);
-    }
-    errorHandling(err, type) {
-        if (type === 'GET')
-            this.GET_error$.next(err.message);
-        if (type === 'POST')
-            this.POST_error$.next(err.message);
-        if (type === 'PUT')
-            this.PUT_error$.next(err.message);
-        if (type === 'DELETE')
-            this.DELETE_error$.next(err.message);
-        if (type === 'STREAM')
-            this.STREAM_error$.next(err.message);
-    }
-    onSelectAIType(type) {
-        this.AIType = type;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RequestManagerBasicDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: RequestManagerBasicDemoComponent, selector: "app-request-manager-basic-demo", providers: [HTTPManagerService], viewQueries: [{ propertyName: "failedState", first: true, predicate: ["failedState"], descendants: true, static: true }, { propertyName: "pollingState", first: true, predicate: ["pollingState"], descendants: true, static: true }], ngImport: i0, template: "<div style=\"margin: 2rem;\">\n\n  <h2>\n    HTTP Basic Request Manager Setup\n  </h2>\n\n  <div style=\"margin-bottom: 1rem; margin-top: 2rem;\">\n    @if ((isPending$ | async)) {\n      <mat-progress-bar mode=\"indeterminate\"\n      ></mat-progress-bar>\n    }\n    @if (pollingState.checked && !(isPending$ | async)) {\n      <mat-progress-bar mode=\"determinate\"\n        [value]=\"(this.countdown$ | async)\"\n      ></mat-progress-bar>\n    }\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">GET Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onGetRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((GET_error$ | async); as get_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ get_error }}</mat-error>\n      </div>\n    }\n\n    @if ((GET$ | async); as dataRecord) {\n      <div style=\"margin-top: 1rem;\">\n        <!-- <div [innerHTML]=\"(GET$ | async) | jsonv\"></div> -->\n        {{ dataRecord | json }}\n      </div>\n    }\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">POST Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onCreateRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((POST_error$ | async); as post_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ post_error }}</mat-error>\n      </div>\n    }\n\n    @if ((POST$ | async); as dataRecord) {\n      <div style=\"margin-top: 1rem;\">\n        <!-- <div [innerHTML]=\"(POST$ | async) | jsonv\"></div> -->\n        {{ dataRecord | json }}\n      </div>\n    }\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">PUT Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onUpdateRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((PUT_error$ | async); as put_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ put_error }}</mat-error>\n      </div>\n    }\n\n    <h3>Include Record ID in the RestPath</h3>\n\n    @if ((PUT$ | async); as dataRecord) {\n      <div style=\"margin-top: 1rem;\">\n        <!-- <div [innerHTML]=\"(PUT$ | async) | jsonv\"></div> -->\n        {{ dataRecord | json }}\n      </div>\n    }\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">DELETE Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onDeleteRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <h3>Include Record ID in the RestPath</h3>\n\n    @if ((DELETE_error$ | async); as delete_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ delete_error }}</mat-error>\n      </div>\n    }\n\n    @if ((DELETE$ | async); as dataRecord) {\n      <div style=\"margin-top: 1rem;\">\n        <!-- <div [innerHTML]=\"(DELETE$ | async) | jsonv\"></div> -->\n        {{ dataRecord | json }}\n      </div>\n    }\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">Streaming GET Request</h2>\n        <div style=\"display: flex; gap: 1rem; align-items: center;\">\n          <div style=\"display: flex; gap: 1rem; align-items: center;\">\n            {{ streamType }}\n            <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n              <mat-icon>data_usage</mat-icon>\n            </button>\n          </div>\n          <mat-menu #menu=\"matMenu\">\n            <button mat-menu-item *ngFor=\"let item of streamTypes\" (click)=\"onStreamType(item.id)\">{{ item.value }}</button>\n          </mat-menu>\n        <button mat-raised-button (click)=\"onStreamRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <!-- <div *ngIf=\"(STREAM_error$ | async) as stream_error\" style=\"margin-top: .5rem;\">\n    <mat-error>{{ stream_error }}</mat-error>\n  </div> -->\n\n  <div style=\"margin-top: 1rem;\">\n    @if ((STREAM$ | async); as data) {\n      <div class=\"container\">\n        <table mat-table [dataSource]=\"data\" class=\"mat-elevation-z8\">\n\n          <!-- Dynamic columns -->\n          <ng-container *ngFor=\"let column of displayedColumns\" [matColumnDef]=\"column\">\n            <th mat-header-cell *matHeaderCellDef> {{ column | titlecase }} </th>\n            <td mat-cell *matCellDef=\"let element\">\n              @if (isObject(element[column]); as objValue) {\n                <pre style=\"margin: 0; font-size: 0.8em; white-space: pre-wrap;\">{{ objValue | json }}</pre>\n              } @else {\n                {{ element[column] }}\n              }\n            </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n        </table>\n\n        <!-- Debug info -->\n        <div style=\"margin-top: 1rem; font-size: 0.8em; color: #666;\">\n          Columns: {{ displayedColumns.join(', ') }} | Records: {{ data.length }}\n        </div>\n      </div>\n    }\n  </div>\n\n</div>\n\n<div style=\"margin-top: 2rem\">\n  <mat-divider></mat-divider>\n</div>\n\n<div style=\"margin-top: 2rem\">\n  <div style=\"display: flex;\">\n    <h2 style=\"flex:1; padding-top: .5rem;\">AI -@if (AIType === 1) {\n      <span>STREAMING</span>\n    } POST Request</h2>\n    <div style=\"display: flex; gap: 1rem;\">\n      <button mat-raised-button [matMenuTriggerFor]=\"menu\" style=\"min-width: 120px;\">\n        <mat-icon>lan</mat-icon>\n        @if (AIType === 0) {\n          <span>Server</span>\n        } @else {\n          Local\n        }\n      </button>\n      <mat-menu #menu=\"matMenu\">\n        <button mat-menu-item (click)=\"onSelectAIType(0)\">Server</button>\n        <button mat-menu-item (click)=\"onSelectAIType(1)\">Local</button>\n      </mat-menu>\n      <div>\n        <button mat-raised-button (click)=\"onStreamPostRequest()\" class=\"btn\">Ask Me</button>\n      </div>\n    </div>\n  </div>\n\n  <div style=\"display: flex;\">\n    <mat-form-field appearance=\"outline\" style=\"flex:1\">\n      <mat-label>Ask me a Question</mat-label>\n      <textarea matInput placeholder=\"Why is the sky blue?\" [formControl]=\"questionControl\"></textarea>\n    </mat-form-field>\n  </div>\n\n  @if ((STREAM_AI_error$ | async); as stream_error) {\n    <div style=\"margin-top: .5rem;\">\n      <mat-error>{{ stream_error }}</mat-error>\n    </div>\n  }\n\n  @if (AIType === 1) {\n    <div style=\"color: red;\">\n      You must have Ollama active and the 'phi3:latest' model to use this feature.\n    </div>\n  } @else {\n    <span style=\"color: gray;\">\n      Define the RestPath to the API endpoint that will handle the AI request.\n      Use: 'ai/chat' for server\n    </span>\n  }\n\n  <div>\n    @if ((STREAM_AI$ | async); as data) {\n      <div style=\"margin-top: 1rem; font-size: 1.2rem; border-radius: 1rem; border: black 1px solid; padding: 2rem;\">\n        <p style=\"margin-bottom: .5rem; white-space:pre-wrap; line-height: 1.6rem;\">{{data}}</p>\n      </div>\n    }\n  </div>\n\n</div>\n\n<div style=\"margin-top: 1.5rem; margin-bottom: 1rem; line-height: 1.5rem;\">\n  <mat-divider></mat-divider>\n</div>\n\n<div>\n  <div style=\"display: flex;\">\n    <h2 style=\"flex:1; margin-bottom: 0; padding-top: .5rem; display: flex;\">\n      <div>\n        Download File\n      </div>\n      <div style=\"flex:1; margin-left: 1rem;\">\n        <mat-slide-toggle #disable>\n          @if (disable.checked) {\n            <span>\n              Enable\n            </span>\n          } @else {\n            Disable\n          }\n        </mat-slide-toggle>\n      </div>\n    </h2>\n    <div>\n      <app-file-downloader\n        [disabled]=\"disable.checked\"\n        [delayError]=\"3\"\n        [apiRequest]=\"downloadRequest\"\n        (completed)=\"onDownloadCompleted()\"\n        (failed)=\"onDownloadFailed($event)\"\n      ></app-file-downloader>\n    </div>\n  </div>\n</div>\n\n</div>\n", styles: [".btn{min-width:120px}.mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor;background-color:#f5f5f5}.container{height:400px;overflow:auto}.box{padding:10px;border:1px solid #ccc}\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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: 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: "component", type: FileDownloaderComponent, selector: "app-file-downloader", inputs: ["delayError", "apiRequest", "displayErrorMessage", "saveFileAs", "labels", "disabled"], outputs: ["completed", "failed"] }, { 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: RequestManagerBasicDemoComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-request-manager-basic-demo', providers: [HTTPManagerService], standalone: false, template: "<div style=\"margin: 2rem;\">\n\n  <h2>\n    HTTP Basic Request Manager Setup\n  </h2>\n\n  <div style=\"margin-bottom: 1rem; margin-top: 2rem;\">\n    @if ((isPending$ | async)) {\n      <mat-progress-bar mode=\"indeterminate\"\n      ></mat-progress-bar>\n    }\n    @if (pollingState.checked && !(isPending$ | async)) {\n      <mat-progress-bar mode=\"determinate\"\n        [value]=\"(this.countdown$ | async)\"\n      ></mat-progress-bar>\n    }\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">GET Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onGetRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((GET_error$ | async); as get_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ get_error }}</mat-error>\n      </div>\n    }\n\n    @if ((GET$ | async); as dataRecord) {\n      <div style=\"margin-top: 1rem;\">\n        <!-- <div [innerHTML]=\"(GET$ | async) | jsonv\"></div> -->\n        {{ dataRecord | json }}\n      </div>\n    }\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">POST Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onCreateRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((POST_error$ | async); as post_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ post_error }}</mat-error>\n      </div>\n    }\n\n    @if ((POST$ | async); as dataRecord) {\n      <div style=\"margin-top: 1rem;\">\n        <!-- <div [innerHTML]=\"(POST$ | async) | jsonv\"></div> -->\n        {{ dataRecord | json }}\n      </div>\n    }\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">PUT Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onUpdateRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((PUT_error$ | async); as put_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ put_error }}</mat-error>\n      </div>\n    }\n\n    <h3>Include Record ID in the RestPath</h3>\n\n    @if ((PUT$ | async); as dataRecord) {\n      <div style=\"margin-top: 1rem;\">\n        <!-- <div [innerHTML]=\"(PUT$ | async) | jsonv\"></div> -->\n        {{ dataRecord | json }}\n      </div>\n    }\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">DELETE Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onDeleteRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <h3>Include Record ID in the RestPath</h3>\n\n    @if ((DELETE_error$ | async); as delete_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ delete_error }}</mat-error>\n      </div>\n    }\n\n    @if ((DELETE$ | async); as dataRecord) {\n      <div style=\"margin-top: 1rem;\">\n        <!-- <div [innerHTML]=\"(DELETE$ | async) | jsonv\"></div> -->\n        {{ dataRecord | json }}\n      </div>\n    }\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">Streaming GET Request</h2>\n        <div style=\"display: flex; gap: 1rem; align-items: center;\">\n          <div style=\"display: flex; gap: 1rem; align-items: center;\">\n            {{ streamType }}\n            <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n              <mat-icon>data_usage</mat-icon>\n            </button>\n          </div>\n          <mat-menu #menu=\"matMenu\">\n            <button mat-menu-item *ngFor=\"let item of streamTypes\" (click)=\"onStreamType(item.id)\">{{ item.value }}</button>\n          </mat-menu>\n        <button mat-raised-button (click)=\"onStreamRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <!-- <div *ngIf=\"(STREAM_error$ | async) as stream_error\" style=\"margin-top: .5rem;\">\n    <mat-error>{{ stream_error }}</mat-error>\n  </div> -->\n\n  <div style=\"margin-top: 1rem;\">\n    @if ((STREAM$ | async); as data) {\n      <div class=\"container\">\n        <table mat-table [dataSource]=\"data\" class=\"mat-elevation-z8\">\n\n          <!-- Dynamic columns -->\n          <ng-container *ngFor=\"let column of displayedColumns\" [matColumnDef]=\"column\">\n            <th mat-header-cell *matHeaderCellDef> {{ column | titlecase }} </th>\n            <td mat-cell *matCellDef=\"let element\">\n              @if (isObject(element[column]); as objValue) {\n                <pre style=\"margin: 0; font-size: 0.8em; white-space: pre-wrap;\">{{ objValue | json }}</pre>\n              } @else {\n                {{ element[column] }}\n              }\n            </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n        </table>\n\n        <!-- Debug info -->\n        <div style=\"margin-top: 1rem; font-size: 0.8em; color: #666;\">\n          Columns: {{ displayedColumns.join(', ') }} | Records: {{ data.length }}\n        </div>\n      </div>\n    }\n  </div>\n\n</div>\n\n<div style=\"margin-top: 2rem\">\n  <mat-divider></mat-divider>\n</div>\n\n<div style=\"margin-top: 2rem\">\n  <div style=\"display: flex;\">\n    <h2 style=\"flex:1; padding-top: .5rem;\">AI -@if (AIType === 1) {\n      <span>STREAMING</span>\n    } POST Request</h2>\n    <div style=\"display: flex; gap: 1rem;\">\n      <button mat-raised-button [matMenuTriggerFor]=\"menu\" style=\"min-width: 120px;\">\n        <mat-icon>lan</mat-icon>\n        @if (AIType === 0) {\n          <span>Server</span>\n        } @else {\n          Local\n        }\n      </button>\n      <mat-menu #menu=\"matMenu\">\n        <button mat-menu-item (click)=\"onSelectAIType(0)\">Server</button>\n        <button mat-menu-item (click)=\"onSelectAIType(1)\">Local</button>\n      </mat-menu>\n      <div>\n        <button mat-raised-button (click)=\"onStreamPostRequest()\" class=\"btn\">Ask Me</button>\n      </div>\n    </div>\n  </div>\n\n  <div style=\"display: flex;\">\n    <mat-form-field appearance=\"outline\" style=\"flex:1\">\n      <mat-label>Ask me a Question</mat-label>\n      <textarea matInput placeholder=\"Why is the sky blue?\" [formControl]=\"questionControl\"></textarea>\n    </mat-form-field>\n  </div>\n\n  @if ((STREAM_AI_error$ | async); as stream_error) {\n    <div style=\"margin-top: .5rem;\">\n      <mat-error>{{ stream_error }}</mat-error>\n    </div>\n  }\n\n  @if (AIType === 1) {\n    <div style=\"color: red;\">\n      You must have Ollama active and the 'phi3:latest' model to use this feature.\n    </div>\n  } @else {\n    <span style=\"color: gray;\">\n      Define the RestPath to the API endpoint that will handle the AI request.\n      Use: 'ai/chat' for server\n    </span>\n  }\n\n  <div>\n    @if ((STREAM_AI$ | async); as data) {\n      <div style=\"margin-top: 1rem; font-size: 1.2rem; border-radius: 1rem; border: black 1px solid; padding: 2rem;\">\n        <p style=\"margin-bottom: .5rem; white-space:pre-wrap; line-height: 1.6rem;\">{{data}}</p>\n      </div>\n    }\n  </div>\n\n</div>\n\n<div style=\"margin-top: 1.5rem; margin-bottom: 1rem; line-height: 1.5rem;\">\n  <mat-divider></mat-divider>\n</div>\n\n<div>\n  <div style=\"display: flex;\">\n    <h2 style=\"flex:1; margin-bottom: 0; padding-top: .5rem; display: flex;\">\n      <div>\n        Download File\n      </div>\n      <div style=\"flex:1; margin-left: 1rem;\">\n        <mat-slide-toggle #disable>\n          @if (disable.checked) {\n            <span>\n              Enable\n            </span>\n          } @else {\n            Disable\n          }\n        </mat-slide-toggle>\n      </div>\n    </h2>\n    <div>\n      <app-file-downloader\n        [disabled]=\"disable.checked\"\n        [delayError]=\"3\"\n        [apiRequest]=\"downloadRequest\"\n        (completed)=\"onDownloadCompleted()\"\n        (failed)=\"onDownloadFailed($event)\"\n      ></app-file-downloader>\n    </div>\n  </div>\n</div>\n\n</div>\n", styles: [".btn{min-width:120px}.mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor;background-color:#f5f5f5}.container{height:400px;overflow:auto}.box{padding:10px;border:1px solid #ccc}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { failedState: [{
-                type: ViewChild,
-                args: ["failedState", { static: true }]
-            }], pollingState: [{
-                type: ViewChild,
-                args: ["pollingState", { static: true }]
-            }] } });
-
-let ClientInfo$1 = class ClientInfo {
-    constructor(domain = '', service = '', id = 0, name = '') {
-        this.domain = domain;
-        this.service = service;
-        this.id = id;
-        this.name = name;
-    }
-    static adapt(item) {
-        return new ClientInfo(item?.domain, item?.service, item?.id, (item?.first_name || item?.last_name) ? `${item?.first_name} ${item?.last_name}` : '');
-    }
-};
-
-let ClientInfoMapper$1 = class ClientInfoMapper {
-    constructor(id = 0, first_name = '', last_name = '', email = '') {
-        this.id = id;
-        this.first_name = first_name;
-        this.last_name = last_name;
-        this.email = email;
-    }
-    static adapt(item) {
-        const first_name = (item?.name) ? item.name.split(' ')[0] : '';
-        const last_name = (item?.name) ? item.name.split(' ')[1] : '';
-        return new ClientInfoMapper(item?.id, first_name, last_name, item?.email);
-    }
-};
-
-class StateManagerDemoService extends HTTPManagerStateService {
-    constructor() {
-        super(ApiRequest.adapt({
-            server: "",
-            path: [],
-            headers: {},
-            adapter: ClientInfo$1.adapt,
-            mapper: ClientInfoMapper$1.adapt,
-            stream: false,
-        }), DataType.ARRAY, DatabaseStorage.adapt());
-    }
-    setAPIOptions(apiOptions, dataType, database) {
-        this.setApiRequestOptions(apiOptions, dataType, database);
-    }
-    getClients() {
-        // const headers = {
-        //   auth: "sample-auth-token"
-        // }
-        // const sampleOptions = RequestOptions.adapt({ path: ["id", 12], headers, sample: true })
-        this.fetchRecords();
-    }
-    createClient(data) {
-        // const headers = {
-        //   auth: "sample-auth-token"
-        // }
-        // const sampleOptions = RequestOptions.adapt({ path: ["id", 12], headers, sample: true })
-        this.createRecord(data);
-    }
-    updateClient(data) {
-        // const headers = {
-        //   auth: "sample-auth-token"
-        // }
-        data.id = 1031;
-        const sampleOptions = RequestOptions.adapt({ path: [data.id] });
-        this.updateRecord(data, sampleOptions);
-    }
-    deleteClient(data) {
-        // const headers = {
-        //   auth: "sample-auth-token"
-        // }
-        data.id = 1031;
-        const sampleOptions = RequestOptions.adapt({ path: [data.id] });
-        this.deleteRecord(sampleOptions);
-    }
-    streamRequest() {
-        console.log('[DEMO SERVICE] streamRequest called');
-        const headers = {
-            auth: "sample-auth-token"
-        };
-        console.log('[DEMO SERVICE] Calling fetchStream with headers:', headers);
-        this.fetchStream();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StateManagerDemoService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StateManagerDemoService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StateManagerDemoService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [] });
-
-let AIPrompt$1 = class AIPrompt {
-    constructor(response = '') {
-        this.response = response;
-    }
-    static adapt(item) {
-        return new AIPrompt(item?.response);
-    }
-};
-
-class RequestManagerStateDemoComponent {
-    // Dynamic columns based on data structure
-    getColumnsFromData(data) {
-        if (!data || data.length === 0) {
-            return [];
-        }
-        const firstRecord = data[0];
-        if (!firstRecord || typeof firstRecord !== 'object') {
-            return [];
-        }
-        // Extract all keys from the first record, excluding null/undefined
-        return Object.keys(firstRecord).filter(key => firstRecord[key] !== null && firstRecord[key] !== undefined);
-    }
-    // Update displayed columns when data changes
-    updateDisplayedColumns(data) {
-        this.displayedColumns = this.getColumnsFromData(data);
-        console.log('[STATE DEMO] Updated columns:', this.displayedColumns);
-    }
-    // Helper to check if value is an object
-    isObject(value) {
-        return value !== null && typeof value === 'object' && !Array.isArray(value);
-    }
-    // Helper to safely get data length
-    getDataLength(data) {
-        if (Array.isArray(data)) {
-            return data.length;
-        }
-        return 0;
-    }
-    get dataObservable$() {
-        switch (this.requestType) {
-            case 'GET':
-                return this.GET$;
-            case 'PUT':
-                return this.PUT$;
-            case 'POST':
-                return this.POST$;
-            case 'DELETE':
-                return this.DELETE$;
-            case 'STREAM':
-                return this.STREAM;
-            case 'STREAM_AI':
-                return this.STREAM_AI;
-            default:
-                return this.GET$;
-                break;
-        }
-    }
-    get hasChanged() {
-        return this.requestForm.dirty || this.requestForm.untouched;
-    }
-    get dataType() {
-        return this.requestForm.get("datatype")?.value;
-    }
-    get database() {
-        return this.requestForm.get("database")?.value;
-    }
-    get retry() {
-        return this.requestForm.get("retry")?.value;
-    }
-    get headers() {
-        return this.requestForm.get('headers');
-    }
-    get isValid() {
-        this.requestForm.markAllAsTouched();
-        return this.requestForm.valid;
-    }
-    constructor() {
-        this.server = 'http://localhost:8080';
-        this.stateManagerDemoService = inject(StateManagerDemoService);
-        this.displayedColumns = [];
-        this.fb = inject(FormBuilder);
-        this.streamTypes = [
-            { id: 'JSON', value: 'json' },
-            { id: 'NDJSON', value: 'ndjson' },
-            { id: 'AI Streaming', value: 'ai_streaming' },
-            { id: 'Event Stream', value: 'event_stream' },
-            { id: 'Auto', value: 'auto' },
-        ];
-        this.streamType = 'Auto';
-        this.httpManagerService = inject(HTTPManagerService);
-        this.isPending$ = this.stateManagerDemoService.isPending$;
-        this.error$ = this.stateManagerDemoService.error$;
-        this.countdown$ = this.httpManagerService.countdown$;
-        this.GET_error$ = new BehaviorSubject('');
-        this.POST_error$ = new BehaviorSubject('');
-        this.PUT_error$ = new BehaviorSubject('');
-        this.DELETE_error$ = new BehaviorSubject('');
-        this.STREAM_error$ = new BehaviorSubject('');
-        this.STREAM_AI_error$ = new BehaviorSubject('');
-        this.GET$ = new BehaviorSubject(null);
-        this.POST$ = new BehaviorSubject(null);
-        this.PUT$ = new BehaviorSubject(null);
-        this.DELETE$ = new BehaviorSubject(null);
-        this.STREAM = new BehaviorSubject(null);
-        this.STREAM$ = this.STREAM.asObservable();
-        this.STREAM_AI = new BehaviorSubject([]);
-        this.STREAM_AI$ = this.STREAM_AI.asObservable()
-            .pipe(map$1((items) => (items) ? items.map((item) => item.response) : []), map$1((items) => items.join('\n').trim()));
-        this.questionControl = this.fb.control("", [Validators.required]);
-        this.requestType = '';
-        this.prompts = [];
-        this.AIType = 0;
-        this.sampleClientData = {
-            id: 0,
-            name: "Old School Dates",
-            domain: "osd.com",
-            service: "osd",
-            spiffe: "osd.com/osd",
-            secret: "SMOPECXP-OS4P-USOG-X2II-3XMD1FQDR3IJX",
-            created: 1693003138,
-            modified: 1693003138,
-            icon: "",
-            imageFile: "",
-        };
-        this.selectedRecord = this.fb.control(null);
-        this.requestForm = this.fb.group({
-            datatype: this.fb.control('ARRAY'),
-            path: this.fb.control("ai/"),
-            headers: this.fb.array([]),
-            adapter: [null],
-            mapper: [null],
-            retry: this.fb.group({
-                times: [3],
-                delay: [3],
-            }),
-            polling: [3],
-            database: this.fb.group({
-                table: [''],
-                expiresIn: ['1m'],
-            })
-        });
-        this.sampleAdaptors = [
-            { label: "ClientInfo Basic", value: ClientInfo$1.adapt },
-            { label: "AI Prompt", value: AIPrompt$1.adapt },
-        ];
-        this.sampleMappers = [
-            { label: "Mapper Basic", value: ClientInfoMapper$1.adapt },
-            { label: "AI Prompt", value: AIPrompt$1.adapt },
-        ];
-        // server = `http://sample-endpoint/as/authorization.oauth2`
-        this.arrayObjectsToObjects = (arr) => {
-            return Array.isArray(arr) ? arr.reduce((obj, item) => Object.assign(obj, { [item.key]: item.value }), {}) : {};
-        };
-        this.props = (adapter) => {
-            return (adapter) ? adapter() : null;
+class HttpRequestManagerModule {
+    static forRoot(config = ConfigOptions.adapt()) {
+        return {
+            ngModule: HttpRequestManagerModule,
+            providers: [
+                { provide: CONFIG_SETTINGS_TOKEN, useValue: ConfigOptions.adapt(config) },
+                HTTPManagerService,
+                LocalStorageManagerService, // all services that need access to config
+            ],
         };
     }
-    ngOnInit() {
-        this.stateManagerDemoService.data$.pipe(tap$1((data) => console.log("API STREAM_AI response", data)));
-        this.error$.pipe(tap$1((data) => {
-            debugger;
-            console.log("API STREAM response", data);
-        }), catchError$1(error => {
-            return throwError(() => this.errorHandling(error, 'STREAM'));
-        }));
-        this.selectedRecord.valueChanges
-            .subscribe((data) => {
-            this.selectedRecord$ = (data) ? this.stateManagerDemoService.selectRecord$(data.id) : EMPTY;
-        });
-        this.stateManagerDemoService.data$
-            .pipe(tap$1((data) => {
-            console.log('[COMPONENT] State data received:', data);
-            switch (this.requestType) {
-                case 'GET':
-                    console.log('[COMPONENT] Updating GET$ with data:', data);
-                    this.GET$.next(data);
-                    break;
-                case 'PUT':
-                    console.log('[COMPONENT] Updating PUT$ with data:', data);
-                    this.PUT$.next(data);
-                    break;
-                case 'POST':
-                    console.log('[COMPONENT] Updating POST$ with data:', data);
-                    this.POST$.next(data);
-                    break;
-                case 'DELETE':
-                    console.log('[COMPONENT] Updating DELETE$ with data:', data);
-                    this.DELETE$.next(data);
-                    break;
-                case 'STREAM':
-                    console.log('[COMPONENT] Updating STREAM$ with data:', data);
-                    this.STREAM.next(data);
-                    // Update table columns dynamically based on streaming data
-                    if (data && Array.isArray(data) && data.length > 0) {
-                        this.updateDisplayedColumns(data);
-                    }
-                    break;
-                case 'STREAM_AI':
-                    console.log('[COMPONENT] Updating STREAM_AI$ with data:', data);
-                    this.STREAM_AI.next(data);
-                    break;
-                default:
-                    console.log('[COMPONENT] No requestType set, ignoring data');
-                    break;
-            }
-        })).subscribe();
-    }
-    onStreamType(type) {
-        this.streamType = type;
-    }
-    addHeader() {
-        const header = this.fb.group({
-            key: ['', Validators.required],
-            value: ['']
-        });
-        this.headers.push(header);
-    }
-    removeHeader(index) {
-        this.headers.removeAt(index);
-    }
-    compileRequest() {
-        const requestParams = this.requestForm.value;
-        requestParams.headers = this.arrayObjectsToObjects(requestParams.headers || []);
-        const pathReq = (requestParams.path === "") ? [] : (requestParams.path || "").split("/");
-        if (!this.pollingState.checked)
-            requestParams.polling = 0;
-        if (!this.failedState.checked) {
-            requestParams.retry = { times: 0, delay: 0 };
-        }
-        const currentOptions = ApiRequest.adapt(requestParams);
-        currentOptions.path = [];
-        currentOptions.server = this.server;
-        currentOptions.adapter = this.adapter;
-        currentOptions.mapper = this.mapper;
-        const apiOptions = ApiRequest.adapt({ ...currentOptions, path: pathReq });
-        return { apiOptions: apiOptions, path: pathReq };
-    }
-    onSetStateOptions() {
-        if (!this.isValid)
-            return;
-        const reqParams = this.compileRequest();
-        const db = DatabaseStorage.adapt(this.database);
-        const type = this.dataType === "ARRAY" ? DataType.ARRAY : DataType.OBJECT;
-        this.stateManagerDemoService.setAPIOptions(reqParams.apiOptions, type, db);
-        this.requestForm.markAsPristine();
-    }
-    onClearRecords() {
-        this.stateManagerDemoService.clearRecords();
-    }
-    onGetRequest() {
-        this.requestType = 'GET';
-        this.stateManagerDemoService.getClients();
-    }
-    onCreateRequest() {
-        this.requestType = 'POST';
-        this.stateManagerDemoService.createClient(this.sampleClientData);
-    }
-    onUpdateRequest() {
-        this.requestType = 'PUT';
-        this.stateManagerDemoService.updateClient(this.sampleClientData);
-    }
-    onDeleteRequest() {
-        this.requestType = 'DELETE';
-        this.stateManagerDemoService.deleteClient(this.sampleClientData);
-    }
-    onStreamRequest() {
-        console.log('[COMPONENT] onStreamRequest called');
-        if (!this.isValid) {
-            console.log('[COMPONENT] Form invalid, aborting');
-            return;
-        }
-        console.log('[COMPONENT] Compiling request...');
-        const reqParams = this.compileRequest();
-        console.log('[COMPONENT] Setting stream options:', reqParams.apiOptions);
-        reqParams.apiOptions.stream = true;
-        reqParams.apiOptions.streamType = this.streamType;
-        this.requestType = 'STREAM';
-        console.log('[COMPONENT] Calling streamRequest...');
-        this.stateManagerDemoService.streamRequest();
-    }
-    errorHandling(err, type) {
-        console.log(err, type);
-        if (type === 'GET')
-            this.GET_error$.next(err.message);
-        if (type === 'POST')
-            this.POST_error$.next(err.message);
-        if (type === 'PUT')
-            this.PUT_error$.next(err.message);
-        if (type === 'DELETE')
-            this.DELETE_error$.next(err.message);
-        if (type === 'STREAM')
-            this.STREAM_error$.next(err.message);
-        if (type === 'STREAM_AI')
-            this.STREAM_AI_error$.next(err.message);
-    }
-    onSelectAIType(type) {
-        this.AIType = type;
-    }
-    onClearHistory() {
-        this.prompts = [];
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RequestManagerStateDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: RequestManagerStateDemoComponent, selector: "app-request-manager-state-demo", inputs: { server: "server", adapter: "adapter", mapper: "mapper" }, providers: [StateManagerDemoService, HTTPManagerService], viewQueries: [{ propertyName: "failedState", first: true, predicate: ["failedState"], descendants: true, static: true }, { propertyName: "pollingState", first: true, predicate: ["pollingState"], descendants: true, static: true }], ngImport: i0, template: "<div style=\"margin: 2rem;\">\n\n  <h2>\n    HTTP Request State Manager\n  </h2>\n\n  <div [formGroup]=\"requestForm\" style=\"margin-top: 2rem;\">\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>State Data Type</mat-label>\n        <mat-select formControlName=\"datatype\">\n          <mat-option value=\"ARRAY\">Array</mat-option>\n          <mat-option value=\"OBJECT\">Object</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Adapter (Model)</mat-label>\n        <mat-select formControlName=\"adapter\" #adapterSelect>\n          <mat-option>None</mat-option>\n          @for (adapter of sampleAdaptors; track adapter) {\n            <mat-option [value]=\"adapter.value\">\n              {{adapter.label}}\n            </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Mapper (Model)</mat-label>\n        <mat-select formControlName=\"mapper\" #mapperSelect>\n          <mat-option>None</mat-option>\n          @for (mapper of sampleMappers; track mapper) {\n            <mat-option [value]=\"mapper.value\">\n              {{mapper.label}}\n            </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n    </div>\n\n    @if (adapterSelect.value || mapperSelect.value) {\n      <div style=\"display: flex; margin-bottom: 2rem;\">\n        <div style=\"flex:1\" class=\"box\">\n          <h3>Adapter (Incoming)</h3>\n          @if (adapterSelect.value) {\n            <div>\n              {{ props(adapterSelect.value) | json }}\n            </div>\n          } @else {\n            No Transformation\n          }\n        </div>\n        <div style=\"flex:1\" class=\"box\">\n          <h3>Mapper (Outgoing)</h3>\n          @if (mapperSelect.value) {\n            <div>\n              {{ props(mapperSelect.value) | json }}\n            </div>\n          } @else {\n            No Transformation\n          }\n        </div>\n      </div>\n    }\n\n    <div>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>RestPath (/ delimited)</mat-label>\n        <input matInput placeholder=\"clients/list\" formControlName=\"path\">\n      </mat-form-field>\n    </div>\n    <div>\n      <div formArrayName=\"headers\">\n        @for (task of headers.controls; track task; let i = $index) {\n          <div [formGroupName]=\"i\">\n            <div style=\"display: flex; gap: .5rem\">\n              <mat-form-field appearance=\"outline\">\n                <mat-label>Key</mat-label>\n                <input matInput placeholder=\"authentication\" formControlName=\"key\">\n              </mat-form-field>\n              <mat-form-field appearance=\"outline\" style=\"flex:1\">\n                <mat-label>Value</mat-label>\n                <input matInput placeholder=\"sample\" formControlName=\"value\">\n              </mat-form-field>\n              <div style=\"margin-top: .5rem;\">\n                <button mat-icon-button (click)=\"removeHeader(i)\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n      <button mat-stroked-button (click)=\"addHeader()\">Add Header</button>\n    </div>\n    <div style=\"margin-top: 2rem; display: flex; flex-direction:column; gap: 1rem;\">\n      <div>\n        <mat-slide-toggle #failedState>Retry on Failed</mat-slide-toggle>\n        @if (failedState.checked) {\n          <div style=\"display: flex; gap: .5rem; margin-top: 1rem;\" formGroupName=\"retry\">\n            <mat-form-field appearance=\"outline\">\n              <mat-label>#of Times</mat-label>\n              <input matInput placeholder=\"3\" formControlName=\"times\" value=\"3\">\n            </mat-form-field>\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Delay Until Next</mat-label>\n              <input matInput placeholder=\"3\" formControlName=\"delay\" value=\"3\">\n            </mat-form-field>\n          </div>\n        }\n      </div>\n      <div>\n        <mat-slide-toggle #pollingState>Polling</mat-slide-toggle>\n        @if (pollingState.checked) {\n          <div>\n            <mat-form-field appearance=\"outline\" style=\"margin-top: 1rem\">\n              <mat-label>#of Seconds</mat-label>\n              <input matInput placeholder=\"3\" formControlName=\"polling\" value=\"3\">\n            </mat-form-field>\n          </div>\n        }\n      </div>\n      <div>\n        <mat-slide-toggle #DBState>Database Storage</mat-slide-toggle>\n        @if (DBState.checked) {\n          <div style=\"display: flex; gap: .5rem; margin-top: 1rem\" formGroupName=\"database\">\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Table Name</mat-label>\n              <input matInput placeholder=\"table\" formControlName=\"table\" value=\"\">\n            </mat-form-field>\n            <div>\n              <mat-form-field appearance=\"outline\">\n                <mat-label>Expires In</mat-label>\n                <mat-select formControlName=\"expiresIn\">\n                  <mat-option value=\"1m\">One Minute</mat-option>\n                  <mat-option value=\"1h\">One Hour</mat-option>\n                  <mat-option value=\"1d\">One Day</mat-option>\n                </mat-select>\n              </mat-form-field>\n            </div>\n          </div>\n        }\n      </div>\n      <div style=\"margin-top: 1rem; display: flex;\">\n        <span style=\"flex:1\"></span>\n        <button mat-stroked-button (click)=\"onSetStateOptions()\" [disabled]=\"!hasChanged\">\n          Set API Request Options\n        </button>\n      </div>\n      <div>\n        @if ((error$ | async); as error) {\n          <mat-error>\n            {{ error }}\n          </mat-error>\n        }\n      </div>\n    </div>\n  </div>\n\n  <div style=\"margin-bottom: 1rem; margin-top: 2rem;\">\n    @if ((isPending$ | async)) {\n      <mat-progress-bar mode=\"indeterminate\"\n      ></mat-progress-bar>\n    }\n    @if (pollingState.checked) {\n      <div>\n        @if (!(isPending$ | async) && (this.countdown$ | async) || -1 > 0) {\n          <mat-progress-bar mode=\"determinate\"\n            [value]=\"(this.countdown$ | async)\"\n          ></mat-progress-bar>\n        }\n      </div>\n    }\n\n  </div>\n\n  @if ((GET$ | async); as data) {\n    <div style=\"margin-top: 2rem\">\n      <div style=\"display: flex;\">\n        <h2 style=\"flex:1;\">CURRENT STATE ({{ dataType }})</h2>\n      </div>\n      @if (data.length > 1) {\n        <div>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Records</mat-label>\n            <mat-select [formControl]=\"selectedRecord\" [disabled]=\"data === null && data?.length === 0\">\n              <mat-option [value]=\"\">None</mat-option>\n              @for (item of data; track item) {\n                <mat-option [value]=\"item\">\n                  {{item.name || (item.first_name) | titlecase}}\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n      }\n      @if ((dataObservable$ | async); as dataRecord) {\n        <div>\n          @if ((selectedRecord$ | async); as record) {\n            <div>\n              {{ record | json }}\n            </div>\n          } @else {\n            No Record Selected from State\n          }\n        </div>\n      }\n      <div style=\"margin-top: 1rem;\">\n        @if (data !== null && data?.length > 0) {\n          <span>\n            State contains a Total of {{ data.length }} Records\n          </span>\n        } @else {\n          No Records\n        }\n        <div style=\"display: flex; gap: .5rem; text-align: end; justify-content: flex-end;\">\n          <button class=\"btn\" mat-stroked-button (click)=\"onClearRecords()\">Clear</button>\n        </div>\n      </div>\n    </div>\n  }\n\n\n\n\n  <div style=\"margin-top: 1rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">GET Request ({{ dataType }})</h2>\n      <div>\n        <button mat-raised-button (click)=\"onGetRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((GET_error$ | async); as get_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ get_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(GET$ | async) | jsonv\"></div> -->\n      @if ((GET$ | async); as getData) {\n        <div>{{ getData | json }}</div>\n      }\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">POST Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onCreateRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((POST_error$ | async); as post_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ post_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(POST$ | async) | jsonv\"></div> -->\n      @if ((POST$ | async); as postData) {\n        <div>{{ postData | json }}</div>\n      }\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">PUT Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onUpdateRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((PUT_error$ | async); as put_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ put_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(PUT$ | async) | jsonv\"></div> -->\n      @if ((PUT$ | async); as putData) {\n        <div>{{ putData | json }}</div>\n      }\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">DELETE Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onDeleteRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((DELETE_error$ | async); as delete_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ delete_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(DELETE$ | async) | jsonv\"></div> -->\n      @if ((DELETE$ | async); as deleteData) {\n        <div>{{ deleteData | json }}</div>\n      }\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">Streaming GET Request</h2>\n        <div style=\"display: flex; gap: 1rem; align-items: center;\">\n          <div style=\"display: flex; gap: 1rem; align-items: center;\">\n            {{ streamType }}\n            <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n              <mat-icon>data_usage</mat-icon>\n            </button>\n          </div>\n          <mat-menu #menu=\"matMenu\">\n            <button mat-menu-item *ngFor=\"let item of streamTypes\" (click)=\"onStreamType(item.id)\">{{ item.value }}</button>\n          </mat-menu>\n        <button mat-raised-button (click)=\"onStreamRequest()\" class=\"btn\" [disabled]=\"hasChanged\">Request</button>\n      </div>\n    </div>\n\n    @if ((STREAM_error$ | async); as stream_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ stream_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      @if ((STREAM$ | async); as data) {\n        <div class=\"container\">\n          <table mat-table [dataSource]=\"data\" class=\"mat-elevation-z8\">\n\n            <!-- Dynamic columns -->\n            <ng-container *ngFor=\"let column of displayedColumns\" [matColumnDef]=\"column\">\n              <th mat-header-cell *matHeaderCellDef> {{ column | titlecase }} </th>\n              <td mat-cell *matCellDef=\"let element\">\n                @if (isObject(element[column]); as objValue) {\n                  <pre style=\"margin: 0; font-size: 0.8em; white-space: pre-wrap;\">{{ objValue | json }}</pre>\n                } @else {\n                  {{ element[column] }}\n                }\n              </td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n          </table>\n\n          <!-- Debug info -->\n          <div style=\"margin-top: 1rem; font-size: 0.8em; color: #666;\">\n            Columns: {{ displayedColumns.join(', ') }} | Data received\n          </div>\n        </div>\n      }\n    </div>\n\n  </div>\n\n</div>\n", styles: [".btn{min-width:120px}.mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor;background-color:#f5f5f5}.container{height:400px;overflow:auto}.box{padding:10px;border:1px solid #ccc}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i8$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i11.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i12.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i13.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }, { kind: "pipe", type: i1$1.TitleCasePipe, name: "titlecase" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RequestManagerStateDemoComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-request-manager-state-demo', providers: [StateManagerDemoService, HTTPManagerService], standalone: false, template: "<div style=\"margin: 2rem;\">\n\n  <h2>\n    HTTP Request State Manager\n  </h2>\n\n  <div [formGroup]=\"requestForm\" style=\"margin-top: 2rem;\">\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>State Data Type</mat-label>\n        <mat-select formControlName=\"datatype\">\n          <mat-option value=\"ARRAY\">Array</mat-option>\n          <mat-option value=\"OBJECT\">Object</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Adapter (Model)</mat-label>\n        <mat-select formControlName=\"adapter\" #adapterSelect>\n          <mat-option>None</mat-option>\n          @for (adapter of sampleAdaptors; track adapter) {\n            <mat-option [value]=\"adapter.value\">\n              {{adapter.label}}\n            </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Mapper (Model)</mat-label>\n        <mat-select formControlName=\"mapper\" #mapperSelect>\n          <mat-option>None</mat-option>\n          @for (mapper of sampleMappers; track mapper) {\n            <mat-option [value]=\"mapper.value\">\n              {{mapper.label}}\n            </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n    </div>\n\n    @if (adapterSelect.value || mapperSelect.value) {\n      <div style=\"display: flex; margin-bottom: 2rem;\">\n        <div style=\"flex:1\" class=\"box\">\n          <h3>Adapter (Incoming)</h3>\n          @if (adapterSelect.value) {\n            <div>\n              {{ props(adapterSelect.value) | json }}\n            </div>\n          } @else {\n            No Transformation\n          }\n        </div>\n        <div style=\"flex:1\" class=\"box\">\n          <h3>Mapper (Outgoing)</h3>\n          @if (mapperSelect.value) {\n            <div>\n              {{ props(mapperSelect.value) | json }}\n            </div>\n          } @else {\n            No Transformation\n          }\n        </div>\n      </div>\n    }\n\n    <div>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>RestPath (/ delimited)</mat-label>\n        <input matInput placeholder=\"clients/list\" formControlName=\"path\">\n      </mat-form-field>\n    </div>\n    <div>\n      <div formArrayName=\"headers\">\n        @for (task of headers.controls; track task; let i = $index) {\n          <div [formGroupName]=\"i\">\n            <div style=\"display: flex; gap: .5rem\">\n              <mat-form-field appearance=\"outline\">\n                <mat-label>Key</mat-label>\n                <input matInput placeholder=\"authentication\" formControlName=\"key\">\n              </mat-form-field>\n              <mat-form-field appearance=\"outline\" style=\"flex:1\">\n                <mat-label>Value</mat-label>\n                <input matInput placeholder=\"sample\" formControlName=\"value\">\n              </mat-form-field>\n              <div style=\"margin-top: .5rem;\">\n                <button mat-icon-button (click)=\"removeHeader(i)\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n      <button mat-stroked-button (click)=\"addHeader()\">Add Header</button>\n    </div>\n    <div style=\"margin-top: 2rem; display: flex; flex-direction:column; gap: 1rem;\">\n      <div>\n        <mat-slide-toggle #failedState>Retry on Failed</mat-slide-toggle>\n        @if (failedState.checked) {\n          <div style=\"display: flex; gap: .5rem; margin-top: 1rem;\" formGroupName=\"retry\">\n            <mat-form-field appearance=\"outline\">\n              <mat-label>#of Times</mat-label>\n              <input matInput placeholder=\"3\" formControlName=\"times\" value=\"3\">\n            </mat-form-field>\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Delay Until Next</mat-label>\n              <input matInput placeholder=\"3\" formControlName=\"delay\" value=\"3\">\n            </mat-form-field>\n          </div>\n        }\n      </div>\n      <div>\n        <mat-slide-toggle #pollingState>Polling</mat-slide-toggle>\n        @if (pollingState.checked) {\n          <div>\n            <mat-form-field appearance=\"outline\" style=\"margin-top: 1rem\">\n              <mat-label>#of Seconds</mat-label>\n              <input matInput placeholder=\"3\" formControlName=\"polling\" value=\"3\">\n            </mat-form-field>\n          </div>\n        }\n      </div>\n      <div>\n        <mat-slide-toggle #DBState>Database Storage</mat-slide-toggle>\n        @if (DBState.checked) {\n          <div style=\"display: flex; gap: .5rem; margin-top: 1rem\" formGroupName=\"database\">\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Table Name</mat-label>\n              <input matInput placeholder=\"table\" formControlName=\"table\" value=\"\">\n            </mat-form-field>\n            <div>\n              <mat-form-field appearance=\"outline\">\n                <mat-label>Expires In</mat-label>\n                <mat-select formControlName=\"expiresIn\">\n                  <mat-option value=\"1m\">One Minute</mat-option>\n                  <mat-option value=\"1h\">One Hour</mat-option>\n                  <mat-option value=\"1d\">One Day</mat-option>\n                </mat-select>\n              </mat-form-field>\n            </div>\n          </div>\n        }\n      </div>\n      <div style=\"margin-top: 1rem; display: flex;\">\n        <span style=\"flex:1\"></span>\n        <button mat-stroked-button (click)=\"onSetStateOptions()\" [disabled]=\"!hasChanged\">\n          Set API Request Options\n        </button>\n      </div>\n      <div>\n        @if ((error$ | async); as error) {\n          <mat-error>\n            {{ error }}\n          </mat-error>\n        }\n      </div>\n    </div>\n  </div>\n\n  <div style=\"margin-bottom: 1rem; margin-top: 2rem;\">\n    @if ((isPending$ | async)) {\n      <mat-progress-bar mode=\"indeterminate\"\n      ></mat-progress-bar>\n    }\n    @if (pollingState.checked) {\n      <div>\n        @if (!(isPending$ | async) && (this.countdown$ | async) || -1 > 0) {\n          <mat-progress-bar mode=\"determinate\"\n            [value]=\"(this.countdown$ | async)\"\n          ></mat-progress-bar>\n        }\n      </div>\n    }\n\n  </div>\n\n  @if ((GET$ | async); as data) {\n    <div style=\"margin-top: 2rem\">\n      <div style=\"display: flex;\">\n        <h2 style=\"flex:1;\">CURRENT STATE ({{ dataType }})</h2>\n      </div>\n      @if (data.length > 1) {\n        <div>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Records</mat-label>\n            <mat-select [formControl]=\"selectedRecord\" [disabled]=\"data === null && data?.length === 0\">\n              <mat-option [value]=\"\">None</mat-option>\n              @for (item of data; track item) {\n                <mat-option [value]=\"item\">\n                  {{item.name || (item.first_name) | titlecase}}\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n      }\n      @if ((dataObservable$ | async); as dataRecord) {\n        <div>\n          @if ((selectedRecord$ | async); as record) {\n            <div>\n              {{ record | json }}\n            </div>\n          } @else {\n            No Record Selected from State\n          }\n        </div>\n      }\n      <div style=\"margin-top: 1rem;\">\n        @if (data !== null && data?.length > 0) {\n          <span>\n            State contains a Total of {{ data.length }} Records\n          </span>\n        } @else {\n          No Records\n        }\n        <div style=\"display: flex; gap: .5rem; text-align: end; justify-content: flex-end;\">\n          <button class=\"btn\" mat-stroked-button (click)=\"onClearRecords()\">Clear</button>\n        </div>\n      </div>\n    </div>\n  }\n\n\n\n\n  <div style=\"margin-top: 1rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">GET Request ({{ dataType }})</h2>\n      <div>\n        <button mat-raised-button (click)=\"onGetRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((GET_error$ | async); as get_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ get_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(GET$ | async) | jsonv\"></div> -->\n      @if ((GET$ | async); as getData) {\n        <div>{{ getData | json }}</div>\n      }\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">POST Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onCreateRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((POST_error$ | async); as post_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ post_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(POST$ | async) | jsonv\"></div> -->\n      @if ((POST$ | async); as postData) {\n        <div>{{ postData | json }}</div>\n      }\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">PUT Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onUpdateRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((PUT_error$ | async); as put_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ put_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(PUT$ | async) | jsonv\"></div> -->\n      @if ((PUT$ | async); as putData) {\n        <div>{{ putData | json }}</div>\n      }\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">DELETE Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onDeleteRequest()\" [disabled]=\"hasChanged\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((DELETE_error$ | async); as delete_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ delete_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      <!-- <div [innerHTML]=\"(DELETE$ | async) | jsonv\"></div> -->\n      @if ((DELETE$ | async); as deleteData) {\n        <div>{{ deleteData | json }}</div>\n      }\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">Streaming GET Request</h2>\n        <div style=\"display: flex; gap: 1rem; align-items: center;\">\n          <div style=\"display: flex; gap: 1rem; align-items: center;\">\n            {{ streamType }}\n            <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n              <mat-icon>data_usage</mat-icon>\n            </button>\n          </div>\n          <mat-menu #menu=\"matMenu\">\n            <button mat-menu-item *ngFor=\"let item of streamTypes\" (click)=\"onStreamType(item.id)\">{{ item.value }}</button>\n          </mat-menu>\n        <button mat-raised-button (click)=\"onStreamRequest()\" class=\"btn\" [disabled]=\"hasChanged\">Request</button>\n      </div>\n    </div>\n\n    @if ((STREAM_error$ | async); as stream_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ stream_error }}</mat-error>\n      </div>\n    }\n\n    <div style=\"margin-top: 1rem;\">\n      @if ((STREAM$ | async); as data) {\n        <div class=\"container\">\n          <table mat-table [dataSource]=\"data\" class=\"mat-elevation-z8\">\n\n            <!-- Dynamic columns -->\n            <ng-container *ngFor=\"let column of displayedColumns\" [matColumnDef]=\"column\">\n              <th mat-header-cell *matHeaderCellDef> {{ column | titlecase }} </th>\n              <td mat-cell *matCellDef=\"let element\">\n                @if (isObject(element[column]); as objValue) {\n                  <pre style=\"margin: 0; font-size: 0.8em; white-space: pre-wrap;\">{{ objValue | json }}</pre>\n                } @else {\n                  {{ element[column] }}\n                }\n              </td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n          </table>\n\n          <!-- Debug info -->\n          <div style=\"margin-top: 1rem; font-size: 0.8em; color: #666;\">\n            Columns: {{ displayedColumns.join(', ') }} | Data received\n          </div>\n        </div>\n      }\n    </div>\n\n  </div>\n\n</div>\n", styles: [".btn{min-width:120px}.mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor;background-color:#f5f5f5}.container{height:400px;overflow:auto}.box{padding:10px;border:1px solid #ccc}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { server: [{
-                type: Input
-            }], adapter: [{
-                type: Input
-            }], mapper: [{
-                type: Input
-            }], failedState: [{
-                type: ViewChild,
-                args: ["failedState", { static: true }]
-            }], pollingState: [{
-                type: ViewChild,
-                args: ["pollingState", { static: true }]
-            }] } });
-
-class RequestManagerDemoComponent {
-    // Dynamic columns based on data structure
-    getColumnsFromData(data) {
-        if (!data || data.length === 0) {
-            return [];
-        }
-        const firstRecord = data[0];
-        if (!firstRecord || typeof firstRecord !== 'object') {
-            return [];
-        }
-        // Extract all keys from the first record, excluding null/undefined
-        return Object.keys(firstRecord).filter(key => firstRecord[key] !== null && firstRecord[key] !== undefined);
-    }
-    // Update displayed columns when data changes
-    updateDisplayedColumns(data) {
-        this.displayedColumns = this.getColumnsFromData(data);
-        console.log('[DEMO] Updated columns:', this.displayedColumns);
-    }
-    // Helper to check if value is an object
-    isObject(value) {
-        return value !== null && typeof value === 'object' && !Array.isArray(value);
-    }
-    // Computed properties for filtered states (removes undefined)
-    get filteredParallelStates() {
-        return this.parallelBatchStates.filter(s => s !== undefined);
-    }
-    get filteredSequentialStates() {
-        return this.sequentialBatchStates.filter(s => s !== undefined);
-    }
-    get filteredStreamStates() {
-        return this.streamBatchStates.filter(s => s !== undefined);
-    }
-    get retry() {
-        return this.requestForm.get('retry')?.value;
-    }
-    get headers() {
-        return this.requestForm.get('headers');
-    }
-    get isValid() {
-        this.requestForm.markAllAsTouched();
-        return this.requestForm.valid;
-    }
-    constructor() {
-        this.server = 'http://localhost:8080';
-        this.displayedColumns = [];
-        this.fb = inject(FormBuilder);
-        this.toastMessage = inject(ToastMessageDisplayService);
-        this.questionControl = this.fb.control("", [Validators.required]);
-        this.httpManagerService = inject(HTTPManagerService);
-        this.isPending$ = this.httpManagerService.isPending$;
-        this.countdown$ = this.httpManagerService.countdown$;
-        this.GET_error$ = new BehaviorSubject('');
-        this.POST_error$ = new BehaviorSubject('');
-        this.PUT_error$ = new BehaviorSubject('');
-        this.DELETE_error$ = new BehaviorSubject('');
-        this.STREAM_error$ = new BehaviorSubject('');
-        this.STREAM_AI_error$ = new BehaviorSubject('');
-        this.isParallelLoading = false;
-        this.isSequentialLoading = false;
-        // Parallel batch states for individual request tracking
-        this.parallelBatchStates = [];
-        // Sequential batch states for individual request tracking
-        this.sequentialBatchStates = [];
-        // Stream batch request properties
-        this.streamBatchStates = [];
-        this.isStreamLoading = false;
-        this.requestParams = {
-            GET: ApiRequest.adapt(),
-            POST: ApiRequest.adapt(),
-            PUT: ApiRequest.adapt(),
-            DELETE: ApiRequest.adapt(),
-            STREAM: ApiRequest.adapt(),
-        };
-        this.streamTypes = [
-            { id: 'JSON', value: 'json' },
-            { id: 'NDJSON', value: 'ndjson' },
-            { id: 'AI Streaming', value: 'ai_streaming' },
-            { id: 'Event Stream', value: 'event_stream' },
-            { id: 'Auto', value: 'auto' },
-        ];
-        this.streamType = 'Auto';
-        this.downloadRequest = ApiRequest.adapt({
-            server: 'assets/images',
-            path: ['lego.png'],
-            saveAs: 'john.jpg', // Optional
-            headers: { 'Authorization': 'Bearer Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6InJ0c0ZULWItN0x1WTdEVlllU05LY0lKN1ZuYyJ9.eyJhdWQiOiI4ODhhMzFjZS01OWQzLTRhMTItYTU5Ni04ZDYyZjY0MWI1MDUiLCJpc3MiOiJodHRwczovL2xvZ2luLm1pY3Jvc29mdG9ubGluZS5jb20vNmY0MTE5ODItY2YyMy00ZTQ1LTk0NDktNGI2MDdiN2E4OGVjL3YyLjAiLCJpYXQiOjE3NjU4MzQxNDksIm5iZiI6MTc2NTgzNDE0OSwiZXhwIjoxNzY1ODM5NzQ2LCJhY2N0IjowLCJhaW8iOiJBV1FBbS84YUFBQUFVUEZOYUhSZkZ4ZVkwRWthcFBzdWZaNG1QYXV6YVRoODRRZUtQRzkrbEFIVE5XanVwQy9ZSjEwK2IrMktWVlJSSXZRNFpwS2xyWTFGd0xRZmtXOTNLbkRNckxSeEMzWTVOOGlQREZ4b1liZExucW1QL1N1ZE1pRW1Va05tTklSWSIsImF6cCI6Ijg4OGEzMWNlLTU5ZDMtNGExMi1hNTk2LThkNjJmNjQxYjUwNSIsImF6cGFjciI6IjAiLCJncm91cHMiOlsiZWE2ZDk5YjAtNDgyNC00MDU0LTk0MTQtZDNhOTZkZDA3MjRiIl0sIm5hbWUiOiJHVExDIEFwcCBTdXBlciBBZG1pbiIsIm9pZCI6IjI2NzUxY2I2LWNlMDEtNDMzMC05OTc0LWZjMzgxMjQ3YTEzYyIsInByZWZlcnJlZF91c2VybmFtZSI6Imd0bGMwMDNAZ3RsYy5jYSIsInJoIjoiMS5BUzRBZ2hsQmJ5UFBSVTZVU1V0Z2UzcUk3TTR4aW9qVFdSSktwWmFOWXZaQnRRVm1BYTR1QUEuIiwicm9sZXMiOlsiZ3RsYy5hY2wuc3VwZXJhZG1pbiJdLCJzY3AiOiJHVExDX0FwcGxpY2F0aW9uIiwic2lkIjoiMDAzZjVhZDktZmJmNi1jZTkyLTg3MjItMWEzNDExYjMzMDJiIiwic3ViIjoiS0RYQ3drVlhUbTRUUmcwaTkxbXZDZzgtQ29uLXpWbk5FQ2Y5LVg0dkpzUSIsInRpZCI6IjZmNDExOTgyLWNmMjMtNGU0NS05NDQ5LTRiNjA3YjdhODhlYyIsInVwbiI6Imd0bGMwMDNAZ3RsYy5jYSIsInV0aSI6InpBaTJoMmpVUUVHbVY0RTJXMWxqQUEiLCJ2ZXIiOiIyLjAiLCJ3aWRzIjpbImI3OWZiZjRkLTNlZjktNDY4OS04MTQzLTc2YjE5NGU4NTUwOSJdLCJ4bXNfZnRkIjoiUDJraW1ZM0tqc1BTRndxNHlZdmJ0bGhrSUk3d2tXNmFpcW1FQ1BaNEdja0JkWE5sWVhOMExXUnpiWE0ifQ.LzppoggMm27smSAy9SamtPN95vCzdELCAfhtOj5n_T_H6g9xCmNRLS9FaUFQMau6Qvl0lROKl7WDklTswLFkfxbIxCBWtXdL-LTqT5cDURSJAll8vC3zlN3Hg9pAFBUVZFRolt6Z7LvPdI3pvUOQs0yFwVzp9k6cLF8aemKdwKQrMX3XXua1MfBWZcqQ4WiBVNmKh8w6yQB35I4u5WqdFnu33nUGb-kvc18SOpoUfiJnlV-PudaEzFXdU3CjAaMEcuPFv5xLwWJKuhU73dNH4EyQDFMVGtcIHNnieOfiY_nK2_0-5DM6aI40UIRK6Bt-HmMQpnbhLps5y3ep6Z7RNw' } // Optional
-        });
-        // downloadRequest = ApiRequest.adapt({
-        //   server: 'oidc/ai/file'
-        // })
-        this.sampleClientData = {
-            id: 0,
-            name: "Old School Dates",
-            domain: "osd.com",
-            service: "osd",
-            spiffe: "osd.com/osd",
-            secret: "SMOPECXP-OS4P-USOG-X2II-3XMD1FQDR3IJX",
-            created: 1693003138,
-            modified: 1693003138,
-            icon: "",
-            imageFile: "",
-            email: "wavecoders@gmail.com"
-        };
-        this.requestForm = this.fb.group({
-            path: this.fb.control("ai/"),
-            headers: this.fb.array([]),
-            adapter: [null],
-            mapper: [null],
-            retry: this.fb.group({
-                times: [3],
-                delay: [3],
-            }),
-            polling: [3],
-        });
-        this.AIType = 0;
-        this.sampleAdaptors = [
-            { label: "ClientInfo Basic", value: ClientInfo$1.adapt },
-            { label: "AI Prompt", value: AIPrompt$1.adapt },
-        ];
-        this.sampleMappers = [
-            { label: "Mapper Basic", value: ClientInfoMapper$1.adapt },
-            { label: "AI Prompt", value: AIPrompt$1.adapt },
-        ];
-        this.hasId = (arr) => {
-            if (arr.length === 0)
-                return false;
-            return !isNaN(arr[arr.length - 1]);
-        };
-        this.props = (adapter) => {
-            return (adapter) ? adapter() : null;
-        };
-        // server = `http://sample-endpoint/as/authorization.oauth2`
-        this.arrayObjectsToObjects = (arr) => {
-            return Array.isArray(arr) ? arr.reduce((obj, item) => Object.assign(obj, { [item.key]: item.value }), {}) : {};
-        };
-    }
-    ngOnInit() {
-        // const reqGet2 = ApiRequest.adapt({
-        //   server,
-        //   path: ['clients'],
-        //   headers: { authentication: "Bearer <KEY>" },
-        //   adapter: ClientInfo,
-        //   dataType: DataType.OBJECT,
-        //   // concurrent: false,
-        //   // polling: 3, //seconds
-        // })
-        // const req2 = [1024,1025,1026].map(item => {
-        //   return this.httpManagerService.getRequest<ClientInfo[]>(reqGet2, [item])
-        //   .pipe(
-        //     catchError(error => {
-        //       return throwError(() => new Error(error.error.message))
-        //     })
-        //   )
-        // })
-        // forkJoin(req2)
-        // .subscribe(res => console.log(res))
-    }
-    onStreamType(type) {
-        this.streamType = type;
-    }
-    addHeader() {
-        const header = this.fb.group({
-            key: ['', Validators.required],
-            value: ['']
-        });
-        this.headers.push(header);
-    }
-    removeHeader(index) {
-        this.headers.removeAt(index);
-    }
-    compileRequest() {
-        const requestParams = this.requestForm.value;
-        requestParams.headers = this.arrayObjectsToObjects(requestParams.headers || []);
-        const pathReq = (requestParams.path === "") ? [] : (requestParams.path || "").split("/");
-        if (!this.pollingState.checked)
-            requestParams.polling = 0;
-        if (!this.failedState.checked) {
-            requestParams.retry = { times: 0, delay: 0 };
-        }
-        const apiOptions = ApiRequest.adapt(requestParams);
-        apiOptions.path = [];
-        apiOptions.server = this.server;
-        apiOptions.adapter = this.adapter;
-        apiOptions.mapper = this.mapper;
-        return { apiOptions: apiOptions, path: pathReq };
-    }
-    onGetRequest() {
-        if (!this.isValid)
-            return;
-        const reqParams = this.compileRequest();
-        this.requestParams.GET = reqParams.apiOptions;
-        this.GET$ = EMPTY; //Cancels Previous
-        this.GET_error$.next('');
-        this.GET$ = this.httpManagerService.getRequest({ ...reqParams.apiOptions }, reqParams.path)
-            .pipe(
-        // tap((data) => console.log("API GET response", data)),
-        catchError(error => {
-            return throwError(() => this.errorHandling(error, 'GET'));
-        }));
-    }
-    onCreateRequest() {
-        if (!this.isValid)
-            return;
-        const reqParams = this.compileRequest();
-        this.requestParams.POST = reqParams.apiOptions;
-        this.POST$ = EMPTY; //Cancels Previous
-        this.POST_error$.next('');
-        console.log("POST", this.sampleClientData);
-        console.log("POST", reqParams.apiOptions);
-        console.log("POST", reqParams.path);
-        this.POST$ = this.httpManagerService.postRequest(this.sampleClientData, reqParams.apiOptions, reqParams.path)
-            .pipe(
-        // tap((data) => console.log("API POST response", data)),
-        catchError(error => {
-            return throwError(() => this.errorHandling(error, 'POST'));
-        }));
-    }
-    onUpdateRequest() {
-        if (!this.isValid)
-            return;
-        const reqParams = this.compileRequest();
-        if (!this.hasId(reqParams.path)) {
-            console.log("Missing ID");
-            return;
-        }
-        this.sampleClientData.id = parseInt(reqParams.path[reqParams.path.length - 1]);
-        this.requestParams.PUT = reqParams.apiOptions;
-        this.PUT$ = EMPTY; //Cancels Previous
-        this.PUT_error$.next('');
-        this.PUT$ = this.httpManagerService.putRequest(this.sampleClientData, reqParams.apiOptions, reqParams.path)
-            .pipe(
-        // tap((data) => console.log("API PUT response", data)),
-        catchError(error => {
-            return throwError(() => this.errorHandling(error, 'PUT'));
-        }));
-    }
-    onDeleteRequest() {
-        if (!this.isValid)
-            return;
-        const reqParams = this.compileRequest();
-        this.requestParams.DELETE = reqParams.apiOptions;
-        if (!this.hasId(reqParams.path)) {
-            console.log("Missing ID");
-            return;
-        }
-        this.sampleClientData.id = parseInt(reqParams.path[reqParams.path.length - 1]);
-        this.requestParams.DELETE = reqParams.apiOptions;
-        this.DELETE$ = EMPTY; //Cancels Previous
-        this.DELETE_error$.next('');
-        this.DELETE$ = this.httpManagerService.deleteRequest(reqParams.apiOptions, reqParams.path)
-            .pipe(
-        // tap((data) => console.log("API DELETE response", data)),
-        catchError(error => {
-            return throwError(() => this.errorHandling(error, 'DELETE'));
-        }));
-    }
-    onStreamPostRequest() {
-        if (!this.isValid)
-            return;
-        const reqParams = this.compileRequest();
-        let payload = {};
-        let apiPath = reqParams.path;
-        let apiOptions = reqParams.apiOptions;
-        let responseMapper = (items) => items.response;
-        if (this.AIType === 0) {
-            // API request
-            payload = { prompt: this.questionControl.value };
-        }
-        else {
-            // Local Ollama request
-            apiOptions.server = "api";
-            apiPath = ["generate"];
-            apiOptions.stream = true;
-            apiOptions.streamType = this.streamType;
-            payload = {
-                model: "phi3:latest",
-                prompt: this.questionControl.value,
-                stream: true,
-            };
-            responseMapper = (items) => items.map((word) => word.response).flat().join('');
-        }
-        this.requestParams.STREAM = apiOptions;
-        this.STREAM_AI$ = EMPTY;
-        this.STREAM_AI_error$.next('');
-        this.STREAM_AI$ = this.httpManagerService.postRequest(payload, apiOptions, apiPath).pipe(map(responseMapper), tap(() => this.questionControl.reset()), catchError(error => throwError(() => this.errorHandling(error, 'STREAM'))));
-    }
-    onStreamRequest() {
-        if (!this.isValid)
-            return;
-        const reqParams = this.compileRequest();
-        reqParams.apiOptions.stream = true;
-        reqParams.apiOptions.streamType = StreamType.NDJSON;
-        this.requestParams.GET = reqParams.apiOptions;
-        this.STREAM$ = this.httpManagerService.getRequest(reqParams.apiOptions, reqParams.path)
-            .pipe(tap((data) => {
-            console.log("API STREAM response", data);
-            if (data && data.length > 0) {
-                this.updateDisplayedColumns(data);
-            }
-        }), catchError(error => {
-            return throwError(() => this.errorHandling(error, 'STREAM'));
-        }));
-    }
-    onDownloadCompleted() {
-        const message = "Download Completed";
-        const display = ToastDisplay.adapt({
-            message,
-            action: 'Ok',
-            color: ToastColors.SUCCESS,
-            icon: 'sentiment_satisfied_alt',
-        });
-        this.toastMessage.toastMessage(display);
-    }
-    onDownloadFailed(err) {
-        const message = "Download Failed";
-        const display = ToastDisplay.adapt({
-            message,
-            action: 'Ok',
-            color: ToastColors.ERROR,
-            icon: 'warning',
-        });
-        this.toastMessage.toastMessage(display);
-    }
-    errorHandling(err, type) {
-        if (type === 'GET')
-            this.GET_error$.next(err.message);
-        if (type === 'POST')
-            this.POST_error$.next(err.message);
-        if (type === 'PUT')
-            this.PUT_error$.next(err.message);
-        if (type === 'DELETE')
-            this.DELETE_error$.next(err.message);
-        if (type === 'STREAM')
-            this.STREAM_error$.next(err.message);
-    }
-    onSelectAIType(type) {
-        this.AIType = type;
-    }
-    // ═══════════════════════════════════════════════════════════════════════════
-    // BATCH REQUEST DEMO METHODS
-    // ═══════════════════════════════════════════════════════════════════════════
-    /**
-     * Execute parallel batch request - fetch 5 users from JSONPlaceholder with individual states
-     */
-    onExecuteParallelBatch() {
-        this.isParallelLoading = true;
-        this.parallelError = undefined;
-        this.parallelExecutionTime = undefined;
-        this.parallelResults = undefined;
-        this.parallelBatchStates = [];
-        const requests = this.createBatchRequests('https://jsonplaceholder.typicode.com', ['users'], [1, 2, 3, 4, 5]);
-        const startTime = performance.now();
-        this.httpManagerService.getBatchRequestsStream(requests, {
-            mode: 'parallel',
-            concurrency: 3,
-            stopOnError: false,
-            ignoreErrors: true,
-            logErrors: true
-        }).pipe(tap(state => {
-            this.parallelBatchStates[state.index] = state;
-            if (!state.isPending && this.parallelBatchStates.every(s => s && !s.isPending)) {
-                this.parallelExecutionTime = performance.now() - startTime;
-                this.isParallelLoading = false;
-            }
-        }), catchError(error => {
-            this.parallelError = error.message || 'Parallel batch failed';
-            this.isParallelLoading = false;
-            return throwError(() => error);
-        })).subscribe();
-    }
-    /**
-     * Execute sequential batch request - fetch 5 todos from JSONPlaceholder with individual states
-     */
-    onExecuteSequentialBatch() {
-        this.isSequentialLoading = true;
-        this.sequentialError = undefined;
-        this.sequentialExecutionTime = undefined;
-        this.sequentialResults = undefined;
-        this.sequentialBatchStates = [];
-        const requests = this.createBatchRequests('https://jsonplaceholder.typicode.com', ['todos'], [1, 2, 3, 4, 5]);
-        const startTime = performance.now();
-        this.httpManagerService.getBatchRequestsStream(requests, {
-            mode: 'sequential',
-            stopOnError: false,
-            concurrency: 3,
-            ignoreErrors: true,
-            logErrors: true
-        }).pipe(tap(state => {
-            this.sequentialBatchStates[state.index] = state;
-            if (!state.isPending && this.sequentialBatchStates.every(s => s && !s.isPending)) {
-                this.sequentialExecutionTime = performance.now() - startTime;
-                this.isSequentialLoading = false;
-            }
-        }), catchError(error => {
-            this.sequentialError = error.message || 'Sequential batch failed';
-            this.isSequentialLoading = false;
-            return throwError(() => error);
-        })).subscribe();
-    }
-    /**
-     * Execute stream batch request - fetch 5 posts with real-time state updates
-     */
-    onExecuteStreamBatch() {
-        this.isStreamLoading = true;
-        this.streamError = undefined;
-        this.streamExecutionTime = undefined;
-        this.streamBatchStates = [];
-        this.streamProgress = undefined;
-        const requests = this.createBatchRequests('https://jsonplaceholder.typicode.com', ['posts'], [1, 2, 3, 4, 5]);
-        const startTime = performance.now();
-        this.httpManagerService.getBatchRequestsStream(requests, {
-            mode: 'parallel',
-            concurrency: 3,
-            stopOnError: false,
-            ignoreErrors: true,
-            logErrors: true
-        }).pipe(tap(state => {
-            this.streamBatchStates[state.index] = state;
-            this.streamProgress = calculateBatchProgress(this.streamBatchStates.filter(s => s !== undefined));
-            if (!state.isPending) {
-                this.streamExecutionTime = performance.now() - startTime;
-            }
-            this.isStreamLoading = this.streamBatchStates.some(s => s && s.isPending);
-        }), catchError(error => {
-            this.streamError = error.message || 'Stream batch failed';
-            this.isStreamLoading = false;
-            return throwError(() => error);
-        })).subscribe();
-    }
-    /**
-     * Type guard for pending state
-     */
-    isPendingState(state) {
-        return state.isPending === true;
-    }
-    /**
-     * Type guard for success state
-     */
-    isSuccessState(state) {
-        return state.isPending === false && state.data !== undefined;
-    }
-    /**
-     * Type guard for error state
-     */
-    isErrorState(state) {
-        return state.isPending === false && state.error !== undefined;
-    }
-    /**
-     * Helper to create batch requests from IDs
-     */
-    createBatchRequests(baseUrl, basePath, ids) {
-        return ids.map(id => ApiRequest.adapt({
-            server: baseUrl,
-            path: [...basePath, id]
-        }));
-    }
-    /**
-     * Check if result is successful (not undefined)
-     */
-    isSuccess(result) {
-        return result !== undefined && result !== null;
-    }
-    /**
-     * Format execution time for display
-     */
-    formatTime(ms) {
-        if (ms < 1000) {
-            return `${Math.round(ms)}ms`;
-        }
-        return `${(ms / 1000).toFixed(2)}s`;
-    }
-    /**
-     * Get success count from results array
-     */
-    getSuccessCount(results) {
-        if (!results)
-            return 0;
-        return results.filter(r => r !== undefined).length;
-    }
-    /**
-     * Get failure count from results array
-     */
-    getFailureCount(results) {
-        if (!results)
-            return 0;
-        return results.filter(r => r === undefined).length;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RequestManagerDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: RequestManagerDemoComponent, selector: "app-request-manager-demo", inputs: { server: "server", adapter: "adapter", mapper: "mapper" }, providers: [HTTPManagerService], viewQueries: [{ propertyName: "failedState", first: true, predicate: ["failedState"], descendants: true, static: true }, { propertyName: "pollingState", first: true, predicate: ["pollingState"], descendants: true, static: true }], ngImport: i0, template: "<div style=\"margin: 2rem;\">\n\n  <h2>\n    HTTP Request Manager\n  </h2>\n\n  <div [formGroup]=\"requestForm\" style=\"margin-top: 2rem;\">\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Adapter (Model)</mat-label>\n        <mat-select formControlName=\"adapter\" #adapterSelect>\n          <mat-option>None</mat-option>\n          @for (adapter of sampleAdaptors; track adapter) {\n            <mat-option [value]=\"adapter.value\">\n              {{adapter.label}}\n            </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Mapper (Model)</mat-label>\n        <mat-select formControlName=\"mapper\" #mapperSelect>\n          <mat-option>None</mat-option>\n          @for (mapper of sampleMappers; track mapper) {\n            <mat-option [value]=\"mapper.value\">\n              {{mapper.label}}\n            </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n    </div>\n    @if (adapterSelect.value || mapperSelect.value) {\n      <div style=\"display: flex; margin-bottom: 2rem;\">\n        <div style=\"flex:1\" class=\"box\">\n          <h3>Adapter (Incoming)</h3>\n          @if (adapterSelect.value) {\n            <div>\n              {{ props(adapterSelect.value) | json }}\n            </div>\n          } @else {\n            No Transformation\n          }\n        </div>\n        <div style=\"flex:1\" class=\"box\">\n          <h3>Mapper (Outgoing)</h3>\n          @if (mapperSelect.value) {\n            <div>\n              {{ props(mapperSelect.value) | json }}\n            </div>\n          } @else {\n            No Transformation\n          }\n        </div>\n      </div>\n    }\n    <div>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>RestPath (/ delimited)</mat-label>\n        <input matInput placeholder=\"clients/list\" formControlName=\"path\">\n      </mat-form-field>\n    </div>\n    <div>\n      <div formArrayName=\"headers\">\n        @for (task of headers.controls; track task; let i = $index) {\n          <div [formGroupName]=\"i\">\n            <div style=\"display: flex; gap: .5rem\">\n              <mat-form-field appearance=\"outline\">\n                <mat-label>Key</mat-label>\n                <input matInput placeholder=\"authentication\" formControlName=\"key\">\n              </mat-form-field>\n              <mat-form-field appearance=\"outline\" style=\"flex:1\">\n                <mat-label>Value</mat-label>\n                <input matInput placeholder=\"sample\" formControlName=\"value\">\n              </mat-form-field>\n              <div style=\"margin-top: .5rem;\">\n                <button mat-icon-button (click)=\"removeHeader(i)\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n      <button mat-stroked-button (click)=\"addHeader()\" class=\"btn\">Add Header</button>\n    </div>\n    <div style=\"margin-top: 2rem; display: flex; flex-direction:column; gap: 1rem;\">\n      <div>\n        <mat-slide-toggle #failedState>Retry on Failed</mat-slide-toggle>\n        @if (failedState.checked) {\n          <div style=\"display: flex; gap: .5rem; margin-top: 1rem;\" formGroupName=\"retry\">\n            <mat-form-field appearance=\"outline\">\n              <mat-label>#of Times</mat-label>\n              <input matInput placeholder=\"3\" formControlName=\"times\" value=\"3\">\n            </mat-form-field>\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Delay Until Next</mat-label>\n              <input matInput placeholder=\"3\" formControlName=\"delay\" value=\"3\">\n            </mat-form-field>\n          </div>\n        }\n      </div>\n      <div>\n        <mat-slide-toggle #pollingState>Polling</mat-slide-toggle>\n        @if (pollingState.checked) {\n          <div>\n            <mat-form-field appearance=\"outline\" style=\"margin-top: 1rem\">\n              <mat-label>#of Seconds</mat-label>\n              <input matInput placeholder=\"3\" formControlName=\"polling\" value=\"3\">\n            </mat-form-field>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n\n  <div style=\"margin-bottom: 1rem; margin-top: 2rem;\">\n    @if ((isPending$ | async)) {\n      <mat-progress-bar mode=\"indeterminate\"\n      ></mat-progress-bar>\n    }\n    @if (pollingState.checked && !(isPending$ | async)) {\n      <mat-progress-bar mode=\"determinate\"\n        [value]=\"(this.countdown$ | async)\"\n      ></mat-progress-bar>\n    }\n  </div>\n\n  <div style=\"margin-top: 1rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">GET Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onGetRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((GET_error$ | async); as get_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ get_error }}</mat-error>\n      </div>\n    }\n\n    @if ((GET$ | async); as dataRecord) {\n      <div style=\"margin-top: 1rem;\">\n        <!-- <div [innerHTML]=\"(GET$ | async) | jsonv\"></div> -->\n        {{ dataRecord | json }}\n      </div>\n    }\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">POST Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onCreateRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((POST_error$ | async); as post_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ post_error }}</mat-error>\n      </div>\n    }\n\n    @if ((POST$ | async); as dataRecord) {\n      <div style=\"margin-top: 1rem;\">\n        <!-- <div [innerHTML]=\"(POST$ | async) | jsonv\"></div> -->\n        {{ dataRecord | json }}\n      </div>\n    }\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">PUT Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onUpdateRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((PUT_error$ | async); as put_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ put_error }}</mat-error>\n      </div>\n    }\n\n    <h3>Include Record ID in the RestPath</h3>\n\n    @if ((PUT$ | async); as dataRecord) {\n      <div style=\"margin-top: 1rem;\">\n        <!-- <div [innerHTML]=\"(PUT$ | async) | jsonv\"></div> -->\n        {{ dataRecord | json }}\n      </div>\n    }\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">DELETE Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onDeleteRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <h3>Include Record ID in the RestPath</h3>\n\n    @if ((DELETE_error$ | async); as delete_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ delete_error }}</mat-error>\n      </div>\n    }\n\n    @if ((DELETE$ | async); as dataRecord) {\n      <div style=\"margin-top: 1rem;\">\n        <!-- <div [innerHTML]=\"(DELETE$ | async) | jsonv\"></div> -->\n        {{ dataRecord | json }}\n      </div>\n    }\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">Streaming GET Request</h2>\n        <div style=\"display: flex; gap: 1rem; align-items: center;\">\n          <div style=\"display: flex; gap: 1rem; align-items: center;\">\n            {{ streamType }}\n            <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n              <mat-icon>data_usage</mat-icon>\n            </button>\n          </div>\n          <mat-menu #menu=\"matMenu\">\n            <button mat-menu-item *ngFor=\"let item of streamTypes\" (click)=\"onStreamType(item.id)\">{{ item.value }}</button>\n          </mat-menu>\n        <button mat-raised-button (click)=\"onStreamRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <!-- <div *ngIf=\"(STREAM_error$ | async) as stream_error\" style=\"margin-top: .5rem;\">\n    <mat-error>{{ stream_error }}</mat-error>\n  </div> -->\n\n  <div style=\"margin-top: 1rem;\">\n    @if ((STREAM$ | async); as data) {\n      <div class=\"container\">\n        <table mat-table [dataSource]=\"data\" class=\"mat-elevation-z8\">\n\n          <!-- Dynamic columns -->\n          <ng-container *ngFor=\"let column of displayedColumns\" [matColumnDef]=\"column\">\n            <th mat-header-cell *matHeaderCellDef> {{ column | titlecase }} </th>\n            <td mat-cell *matCellDef=\"let element\">\n              @if (isObject(element[column]); as objValue) {\n                <pre style=\"margin: 0; font-size: 0.8em; white-space: pre-wrap;\">{{ objValue | json }}</pre>\n              } @else {\n                {{ element[column] }}\n              }\n            </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n        </table>\n\n        <!-- Debug info -->\n        <div style=\"margin-top: 1rem; font-size: 0.8em; color: #666;\">\n          Columns: {{ displayedColumns.join(', ') }} | Records: {{ data.length }}\n        </div>\n      </div>\n    }\n  </div>\n\n</div>\n\n<div style=\"margin-top: 2rem\">\n  <mat-divider></mat-divider>\n</div>\n\n<div style=\"margin-top: 2rem\">\n  <!-- Parallel Requests Section -->\n  <div>\n    <div style=\"display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;\">\n      <h2 style=\"flex: 1; margin: 0;\">Parallel Requests</h2>\n      <button\n        mat-raised-button\n        color=\"primary\"\n        (click)=\"onExecuteParallelBatch()\"\n        [disabled]=\"isParallelLoading\"\n        style=\"min-width: 200px;\">\n        <mat-icon>sync</mat-icon>\n        <span style=\"margin-left: 8px;\">\n          {{ isParallelLoading ? 'Loading...' : 'Fetch 5 Users' }}\n        </span>\n      </button>\n    </div>\n\n    <!-- Loading Indicator -->\n    @if (isParallelLoading) {\n      <div style=\"margin: 1rem 0;\">\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n        <p style=\"margin-top: 0.5rem; color: #666;\">\n          Executing parallel requests (concurrency: 3)...\n        </p>\n      </div>\n    }\n\n    <!-- Individual Request States -->\n    @if (parallelBatchStates.length > 0) {\n      <div style=\"margin: 1rem 0;\">\n        <mat-card appearance=\"outlined\">\n          <mat-card-content>\n            <div style=\"display: grid; gap: 0.5rem;\">\n              @for (state of filteredParallelStates; track state.index; let i = $index) {\n                <div\n                  style=\"padding: 0.75rem; border-radius: 4px; border: 1px solid;\n                         {{ state.isPending ? 'background: #fff3e0; border-color: #ff9800;' :\n                            state.data ? 'background: #e3f2fd; border-color: #2196f3;' :\n                            'background: #ffebee; border-color: #f44336;' }}\">\n                  @if (state.isPending) {\n                    <div style=\"display: flex; align-items: center; gap: 0.5rem; justify-content: space-between;\">\n                      <div style=\"display: flex; align-items: center; gap: 0.5rem;\">\n                        <mat-spinner diameter=\"16\" style=\"margin-right: 0.5rem;\"></mat-spinner>\n                        <strong>Request {{ state.index + 1 }}:</strong>\n                        <span>Loading...</span>\n                      </div>\n                      <span style=\"color: #ff9800; font-weight: bold;\">Pending</span>\n                    </div>\n                  } @else if (state.data) {\n                    <div style=\"display: flex; align-items: center; gap: 0.5rem; justify-content: space-between;\">\n                      <div style=\"display: flex; align-items: center; gap: 0.5rem;\">\n                        <mat-icon style=\"color: #2196f3; font-size: 18px;\">check_circle</mat-icon>\n                        <strong>User #{{ state.data.id }}:</strong>\n                        <span>{{ state.data.name }}</span>\n                      </div>\n                      <span style=\"color: #2196f3; font-weight: bold;\">Complete</span>\n                    </div>\n                  } @else {\n                    <div style=\"display: flex; align-items: center; gap: 0.5rem; justify-content: space-between;\">\n                      <div style=\"display: flex; align-items: center; gap: 0.5rem;\">\n                        <mat-icon style=\"color: #f44336; font-size: 18px;\">error</mat-icon>\n                        <strong>Request {{ state.index + 1 }}:</strong>\n                        <span>Failed</span>\n                      </div>\n                      <span style=\"color: #f44336; font-weight: bold;\">Error</span>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          </mat-card-content>\n        </mat-card>\n      </div>\n    }\n\n    <!-- Execution Metrics -->\n    @if (parallelExecutionTime !== undefined) {\n      <div style=\"background: #f5f5f5; padding: 1rem; border-radius: 4px; margin: 1rem 0;\">\n        <div style=\"display: flex; gap: 2rem;\">\n          <div>\n            <strong>\u23F1Execution Time:</strong>\n            <span style=\"margin-left: 0.5rem; color: #4caf50;\">\n              {{ formatTime(parallelExecutionTime) }}\n            </span>\n          </div>\n          <div>\n            <strong>Mode:</strong>\n            <span style=\"margin-left: 0.5rem;\">Parallel</span>\n          </div>\n        </div>\n      </div>\n    }\n\n    <!-- Error Display -->\n    @if (parallelError) {\n      <div style=\"margin-top: 1rem;\">\n        <mat-error>{{ parallelError }}</mat-error>\n      </div>\n    }\n  </div>\n\n  <!-- Sequential Requests Section -->\n  <div>\n    <div style=\"display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;\">\n      <h2 style=\"flex: 1; margin: 0;\">Sequential Requests</h2>\n      <button\n        mat-raised-button\n        color=\"accent\"\n        (click)=\"onExecuteSequentialBatch()\"\n        [disabled]=\"isSequentialLoading\"\n        style=\"min-width: 200px;\">\n        <mat-icon>timeline</mat-icon>\n        <span style=\"margin-left: 8px;\">\n          {{ isSequentialLoading ? 'Loading...' : 'Fetch 5 Todos' }}\n        </span>\n      </button>\n    </div>\n\n    <!-- Loading Indicator -->\n    @if (isSequentialLoading) {\n      <div style=\"margin: 1rem 0;\">\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n        <p style=\"margin-top: 0.5rem; color: #666;\">\n          Executing sequential requests (one at a time)...\n        </p>\n      </div>\n    }\n\n    <!-- Individual Request States -->\n    @if (sequentialBatchStates.length > 0) {\n      <div style=\"margin: 1rem 0;\">\n        <mat-card appearance=\"outlined\">\n          <mat-card-content>\n            <div style=\"display: grid; gap: 0.5rem;\">\n              @for (state of filteredSequentialStates; track state.index; let i = $index) {\n                <div\n                  style=\"padding: 0.75rem; border-radius: 4px; border: 1px solid;\n                         {{ state.isPending ? 'background: #fff3e0; border-color: #ff9800;' :\n                            state.data ? 'background: #e3f2fd; border-color: #2196f3;' :\n                            'background: #ffebee; border-color: #f44336;' }}\">\n                  @if (state.isPending) {\n                    <div style=\"display: flex; align-items: center; gap: 0.5rem; justify-content: space-between;\">\n                      <div style=\"display: flex; align-items: center; gap: 0.5rem;\">\n                        <mat-spinner diameter=\"16\" style=\"margin-right: 0.5rem;\"></mat-spinner>\n                        <strong>Request {{ state.index + 1 }}:</strong>\n                        <span>Loading...</span>\n                      </div>\n                      <span style=\"color: #ff9800; font-weight: bold;\">Pending</span>\n                    </div>\n                  } @else if (state.data) {\n                    <div style=\"display: flex; align-items: center; gap: 0.5rem; justify-content: space-between;\">\n                      <div style=\"display: flex; align-items: center; gap: 0.5rem;\">\n                        <mat-icon style=\"color: #2196f3; font-size: 18px;\">check_circle</mat-icon>\n                        <strong>Todo #{{ state.data.id }}:</strong>\n                        <span style=\"flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\">\n                          {{ state.data.title }}\n                        </span>\n                      </div>\n                    </div>\n                  } @else {\n                    <div style=\"display: flex; align-items: center; gap: 0.5rem; justify-content: space-between;\">\n                      <div style=\"display: flex; align-items: center; gap: 0.5rem;\">\n                        <mat-icon style=\"color: #f44336; font-size: 18px;\">error</mat-icon>\n                        <strong>Request {{ state.index + 1 }}:</strong>\n                        <span>Failed</span>\n                      </div>\n                      <span style=\"color: #f44336; font-weight: bold;\">Error</span>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          </mat-card-content>\n        </mat-card>\n      </div>\n    }\n\n    <!-- Execution Metrics -->\n    @if (sequentialExecutionTime !== undefined) {\n      <div style=\"background: #f5f5f5; padding: 1rem; border-radius: 4px; margin: 1rem 0;\">\n        <div style=\"display: flex; gap: 2rem;\">\n          <div>\n            <strong>Execution Time:</strong>\n            <span style=\"margin-left: 0.5rem; color: #4caf50;\">\n              {{ formatTime(sequentialExecutionTime) }}\n            </span>\n          </div>\n          <div>\n            <strong>Mode:</strong>\n            <span style=\"margin-left: 0.5rem;\">Sequential</span>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- Stream Mode Section -->\n  <div>\n    <div style=\"display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;\">\n      <h2 style=\"flex: 1; margin: 0;\">Stream Mode (Real-time States)</h2>\n      <button\n        mat-raised-button\n        color=\"primary\"\n        (click)=\"onExecuteStreamBatch()\"\n        [disabled]=\"isStreamLoading\"\n        style=\"min-width: 200px;\">\n        <mat-icon>auto_awesome</mat-icon>\n        <span style=\"margin-left: 8px;\">\n          {{ isStreamLoading ? 'Loading...' : 'Fetch 5 Posts' }}\n        </span>\n      </button>\n    </div>\n\n    <!-- Loading Indicator -->\n    @if (isStreamLoading) {\n      <div style=\"margin: 1rem 0;\">\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n        <p style=\"margin-top: 0.5rem; color: #666;\">\n          Executing parallel requests with real-time state updates...\n        </p>\n      </div>\n    }\n\n    <!-- Progress Bar -->\n    @if (streamProgress) {\n      <div style=\"background: #f5f5f5; padding: 1rem; border-radius: 4px; margin: 1rem 0;\">\n        <div style=\"display: flex; gap: 2rem; margin-bottom: 0.5rem;\">\n          <div>\n            <strong>Execution Time:</strong>\n            <span style=\"margin-left: 0.5rem; color: #4caf50;\">\n              {{ formatTime(streamExecutionTime || 0) }}\n            </span>\n          </div>\n          <div>\n            <strong>Progress:</strong>\n            <span style=\"margin-left: 0.5rem;\">\n              {{ streamProgress.completed }} / {{ streamProgress.total }} completed\n            </span>\n          </div>\n          <div>\n            <strong>Pending:</strong>\n            <span style=\"margin-left: 0.5rem;\">\n              {{ streamProgress.pending }}\n            </span>\n          </div>\n          <div>\n            <strong>Failed:</strong>\n            <span style=\"margin-left: 0.5rem;\">\n              {{ streamProgress.failed }}\n            </span>\n          </div>\n        </div>\n        <mat-progress-bar\n          mode=\"determinate\"\n          [value]=\"streamProgress.percent\"\n          color=\"accent\">\n        </mat-progress-bar>\n        <p style=\"margin-top: 0.5rem; text-align: right; color: #666;\">\n          {{ streamProgress.percent }}%\n        </p>\n      </div>\n    }\n\n    <!-- Error Display -->\n    @if (streamError) {\n      <div style=\"margin-top: 1rem;\">\n        <mat-error>{{ streamError }}</mat-error>\n      </div>\n    }\n\n    <!-- Individual Request States -->\n    @if (streamBatchStates.length > 0) {\n      <div style=\"margin-top: 1rem;\">\n        <mat-card appearance=\"outlined\">\n          <mat-card-content>\n            <div style=\"display: grid; gap: 0.5rem;\">\n              @for (state of filteredStreamStates; track state.index; let i = $index) {\n                <div\n                  style=\"padding: 0.75rem; border-radius: 4px; border: 1px solid;\n                         {{ isPendingState(state) ? 'background: #fff3e0; border-color: #ff9800;' :\n                            isSuccessState(state) ? 'background: #e3f2fd; border-color: #2196f3;' :\n                            'background: #ffebee; border-color: #f44336;' }}\">\n                  @if (isPendingState(state)) {\n                    <div style=\"display: flex; align-items: center; gap: 0.5rem;\">\n                      <mat-spinner diameter=\"16\" style=\"margin-right: 0.5rem;\"></mat-spinner>\n                      <strong>Request {{ state.index + 1 }}:</strong>\n                      <span>Loading...</span>\n                    </div>\n                  } @else if (isSuccessState(state)) {\n                    <div style=\"display: flex; align-items: center; gap: 0.5rem;\">\n                      <mat-icon style=\"color: #2196f3; font-size: 18px;\">check_circle</mat-icon>\n                      <strong>Post #{{ state.data.id }}:</strong>\n                      <span style=\"flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\">\n                        {{ state.data.title }}\n                      </span>\n                    </div>\n                  } @else {\n                    <div style=\"display: flex; align-items: center; gap: 0.5rem;\">\n                      <mat-icon style=\"color: #f44336; font-size: 18px;\">error</mat-icon>\n                      <strong>Request {{ state.index + 1 }}:</strong>\n                      <span>Failed</span>\n                      <mat-chip style=\"margin-left: auto; font-size: 0.8em; background: #f44336; color: white;\">\n                        Error\n                      </mat-chip>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          </mat-card-content>\n        </mat-card>\n      </div>\n    }\n  </div>\n\n  <!-- Comparison Info -->\n  <div style=\"padding: 1rem; background: whitesmoke; border-radius: 4px; border: 1px solid #ccc;\">\n    <h4 style=\"margin-top: 0;\">Key Differences</h4>\n    <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;\">\n      <div>\n        <strong>Parallel:</strong>\n        <ul style=\"margin: 0.5rem 0 0 1rem; padding: 0;\">\n          <li>Faster execution (concurrent)</li>\n          <li>Multiple requests simultaneously</li>\n          <li>Results may complete out of order</li>\n          <li>Best for: Independent requests</li>\n        </ul>\n      </div>\n      <div>\n        <strong>Sequential:</strong>\n        <ul style=\"margin: 0.5rem 0 0 1rem; padding: 0;\">\n          <li>Slower execution (one-by-one)</li>\n          <li>Requests execute in order</li>\n          <li>Results always in request order</li>\n          <li>Best for: Dependent requests</li>\n        </ul>\n      </div>\n    </div>\n  </div>\n</div>\n\n</div>\n", styles: [".btn{min-width:120px}.mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor;background-color:#f5f5f5}.container{height:400px;overflow:auto}.box{padding:10px;border:1px solid #ccc}.batch-demo-section{margin:2rem 0;padding:1.5rem;border:1px solid #e0e0e0;border-radius:8px;background:#fafafa}.batch-result-item{padding:.75rem;border-radius:4px;margin-bottom:.5rem;display:flex;align-items:center;gap:.5rem}.batch-result-item.success{background:#e8f5e9;border-left:3px solid #4caf50}.batch-result-item.error{background:#ffebee;border-left:3px solid #f44336}.execution-metrics{display:flex;gap:2rem;padding:1rem;background:#f5f5f5;border-radius:4px;margin:1rem 0}.execution-metrics>div{display:flex;align-items:center;gap:.5rem}.comparison-box{padding:1rem;background:#fff3e0;border-radius:4px;margin-top:2rem}.comparison-box h4{margin-top:0;margin-bottom:1rem}.comparison-box .comparison-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}@media(max-width:768px){.comparison-box .comparison-grid{grid-template-columns:1fr}}.loading-indicator{margin:1rem 0}.result-card{margin-top:1rem}.result-card mat-card-content{padding:1rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i3$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i8$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i11.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i12.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i13.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i16.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i16.MatCardContent, selector: "mat-card-content" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }, { kind: "pipe", type: i1$1.TitleCasePipe, name: "titlecase" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RequestManagerDemoComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-request-manager-demo', providers: [HTTPManagerService], standalone: false, template: "<div style=\"margin: 2rem;\">\n\n  <h2>\n    HTTP Request Manager\n  </h2>\n\n  <div [formGroup]=\"requestForm\" style=\"margin-top: 2rem;\">\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Adapter (Model)</mat-label>\n        <mat-select formControlName=\"adapter\" #adapterSelect>\n          <mat-option>None</mat-option>\n          @for (adapter of sampleAdaptors; track adapter) {\n            <mat-option [value]=\"adapter.value\">\n              {{adapter.label}}\n            </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Mapper (Model)</mat-label>\n        <mat-select formControlName=\"mapper\" #mapperSelect>\n          <mat-option>None</mat-option>\n          @for (mapper of sampleMappers; track mapper) {\n            <mat-option [value]=\"mapper.value\">\n              {{mapper.label}}\n            </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n    </div>\n    @if (adapterSelect.value || mapperSelect.value) {\n      <div style=\"display: flex; margin-bottom: 2rem;\">\n        <div style=\"flex:1\" class=\"box\">\n          <h3>Adapter (Incoming)</h3>\n          @if (adapterSelect.value) {\n            <div>\n              {{ props(adapterSelect.value) | json }}\n            </div>\n          } @else {\n            No Transformation\n          }\n        </div>\n        <div style=\"flex:1\" class=\"box\">\n          <h3>Mapper (Outgoing)</h3>\n          @if (mapperSelect.value) {\n            <div>\n              {{ props(mapperSelect.value) | json }}\n            </div>\n          } @else {\n            No Transformation\n          }\n        </div>\n      </div>\n    }\n    <div>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>RestPath (/ delimited)</mat-label>\n        <input matInput placeholder=\"clients/list\" formControlName=\"path\">\n      </mat-form-field>\n    </div>\n    <div>\n      <div formArrayName=\"headers\">\n        @for (task of headers.controls; track task; let i = $index) {\n          <div [formGroupName]=\"i\">\n            <div style=\"display: flex; gap: .5rem\">\n              <mat-form-field appearance=\"outline\">\n                <mat-label>Key</mat-label>\n                <input matInput placeholder=\"authentication\" formControlName=\"key\">\n              </mat-form-field>\n              <mat-form-field appearance=\"outline\" style=\"flex:1\">\n                <mat-label>Value</mat-label>\n                <input matInput placeholder=\"sample\" formControlName=\"value\">\n              </mat-form-field>\n              <div style=\"margin-top: .5rem;\">\n                <button mat-icon-button (click)=\"removeHeader(i)\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n      <button mat-stroked-button (click)=\"addHeader()\" class=\"btn\">Add Header</button>\n    </div>\n    <div style=\"margin-top: 2rem; display: flex; flex-direction:column; gap: 1rem;\">\n      <div>\n        <mat-slide-toggle #failedState>Retry on Failed</mat-slide-toggle>\n        @if (failedState.checked) {\n          <div style=\"display: flex; gap: .5rem; margin-top: 1rem;\" formGroupName=\"retry\">\n            <mat-form-field appearance=\"outline\">\n              <mat-label>#of Times</mat-label>\n              <input matInput placeholder=\"3\" formControlName=\"times\" value=\"3\">\n            </mat-form-field>\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Delay Until Next</mat-label>\n              <input matInput placeholder=\"3\" formControlName=\"delay\" value=\"3\">\n            </mat-form-field>\n          </div>\n        }\n      </div>\n      <div>\n        <mat-slide-toggle #pollingState>Polling</mat-slide-toggle>\n        @if (pollingState.checked) {\n          <div>\n            <mat-form-field appearance=\"outline\" style=\"margin-top: 1rem\">\n              <mat-label>#of Seconds</mat-label>\n              <input matInput placeholder=\"3\" formControlName=\"polling\" value=\"3\">\n            </mat-form-field>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n\n  <div style=\"margin-bottom: 1rem; margin-top: 2rem;\">\n    @if ((isPending$ | async)) {\n      <mat-progress-bar mode=\"indeterminate\"\n      ></mat-progress-bar>\n    }\n    @if (pollingState.checked && !(isPending$ | async)) {\n      <mat-progress-bar mode=\"determinate\"\n        [value]=\"(this.countdown$ | async)\"\n      ></mat-progress-bar>\n    }\n  </div>\n\n  <div style=\"margin-top: 1rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">GET Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onGetRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((GET_error$ | async); as get_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ get_error }}</mat-error>\n      </div>\n    }\n\n    @if ((GET$ | async); as dataRecord) {\n      <div style=\"margin-top: 1rem;\">\n        <!-- <div [innerHTML]=\"(GET$ | async) | jsonv\"></div> -->\n        {{ dataRecord | json }}\n      </div>\n    }\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">POST Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onCreateRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((POST_error$ | async); as post_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ post_error }}</mat-error>\n      </div>\n    }\n\n    @if ((POST$ | async); as dataRecord) {\n      <div style=\"margin-top: 1rem;\">\n        <!-- <div [innerHTML]=\"(POST$ | async) | jsonv\"></div> -->\n        {{ dataRecord | json }}\n      </div>\n    }\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">PUT Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onUpdateRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if ((PUT_error$ | async); as put_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ put_error }}</mat-error>\n      </div>\n    }\n\n    <h3>Include Record ID in the RestPath</h3>\n\n    @if ((PUT$ | async); as dataRecord) {\n      <div style=\"margin-top: 1rem;\">\n        <!-- <div [innerHTML]=\"(PUT$ | async) | jsonv\"></div> -->\n        {{ dataRecord | json }}\n      </div>\n    }\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">DELETE Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onDeleteRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <h3>Include Record ID in the RestPath</h3>\n\n    @if ((DELETE_error$ | async); as delete_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ delete_error }}</mat-error>\n      </div>\n    }\n\n    @if ((DELETE$ | async); as dataRecord) {\n      <div style=\"margin-top: 1rem;\">\n        <!-- <div [innerHTML]=\"(DELETE$ | async) | jsonv\"></div> -->\n        {{ dataRecord | json }}\n      </div>\n    }\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">Streaming GET Request</h2>\n        <div style=\"display: flex; gap: 1rem; align-items: center;\">\n          <div style=\"display: flex; gap: 1rem; align-items: center;\">\n            {{ streamType }}\n            <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n              <mat-icon>data_usage</mat-icon>\n            </button>\n          </div>\n          <mat-menu #menu=\"matMenu\">\n            <button mat-menu-item *ngFor=\"let item of streamTypes\" (click)=\"onStreamType(item.id)\">{{ item.value }}</button>\n          </mat-menu>\n        <button mat-raised-button (click)=\"onStreamRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <!-- <div *ngIf=\"(STREAM_error$ | async) as stream_error\" style=\"margin-top: .5rem;\">\n    <mat-error>{{ stream_error }}</mat-error>\n  </div> -->\n\n  <div style=\"margin-top: 1rem;\">\n    @if ((STREAM$ | async); as data) {\n      <div class=\"container\">\n        <table mat-table [dataSource]=\"data\" class=\"mat-elevation-z8\">\n\n          <!-- Dynamic columns -->\n          <ng-container *ngFor=\"let column of displayedColumns\" [matColumnDef]=\"column\">\n            <th mat-header-cell *matHeaderCellDef> {{ column | titlecase }} </th>\n            <td mat-cell *matCellDef=\"let element\">\n              @if (isObject(element[column]); as objValue) {\n                <pre style=\"margin: 0; font-size: 0.8em; white-space: pre-wrap;\">{{ objValue | json }}</pre>\n              } @else {\n                {{ element[column] }}\n              }\n            </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n        </table>\n\n        <!-- Debug info -->\n        <div style=\"margin-top: 1rem; font-size: 0.8em; color: #666;\">\n          Columns: {{ displayedColumns.join(', ') }} | Records: {{ data.length }}\n        </div>\n      </div>\n    }\n  </div>\n\n</div>\n\n<div style=\"margin-top: 2rem\">\n  <mat-divider></mat-divider>\n</div>\n\n<div style=\"margin-top: 2rem\">\n  <!-- Parallel Requests Section -->\n  <div>\n    <div style=\"display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;\">\n      <h2 style=\"flex: 1; margin: 0;\">Parallel Requests</h2>\n      <button\n        mat-raised-button\n        color=\"primary\"\n        (click)=\"onExecuteParallelBatch()\"\n        [disabled]=\"isParallelLoading\"\n        style=\"min-width: 200px;\">\n        <mat-icon>sync</mat-icon>\n        <span style=\"margin-left: 8px;\">\n          {{ isParallelLoading ? 'Loading...' : 'Fetch 5 Users' }}\n        </span>\n      </button>\n    </div>\n\n    <!-- Loading Indicator -->\n    @if (isParallelLoading) {\n      <div style=\"margin: 1rem 0;\">\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n        <p style=\"margin-top: 0.5rem; color: #666;\">\n          Executing parallel requests (concurrency: 3)...\n        </p>\n      </div>\n    }\n\n    <!-- Individual Request States -->\n    @if (parallelBatchStates.length > 0) {\n      <div style=\"margin: 1rem 0;\">\n        <mat-card appearance=\"outlined\">\n          <mat-card-content>\n            <div style=\"display: grid; gap: 0.5rem;\">\n              @for (state of filteredParallelStates; track state.index; let i = $index) {\n                <div\n                  style=\"padding: 0.75rem; border-radius: 4px; border: 1px solid;\n                         {{ state.isPending ? 'background: #fff3e0; border-color: #ff9800;' :\n                            state.data ? 'background: #e3f2fd; border-color: #2196f3;' :\n                            'background: #ffebee; border-color: #f44336;' }}\">\n                  @if (state.isPending) {\n                    <div style=\"display: flex; align-items: center; gap: 0.5rem; justify-content: space-between;\">\n                      <div style=\"display: flex; align-items: center; gap: 0.5rem;\">\n                        <mat-spinner diameter=\"16\" style=\"margin-right: 0.5rem;\"></mat-spinner>\n                        <strong>Request {{ state.index + 1 }}:</strong>\n                        <span>Loading...</span>\n                      </div>\n                      <span style=\"color: #ff9800; font-weight: bold;\">Pending</span>\n                    </div>\n                  } @else if (state.data) {\n                    <div style=\"display: flex; align-items: center; gap: 0.5rem; justify-content: space-between;\">\n                      <div style=\"display: flex; align-items: center; gap: 0.5rem;\">\n                        <mat-icon style=\"color: #2196f3; font-size: 18px;\">check_circle</mat-icon>\n                        <strong>User #{{ state.data.id }}:</strong>\n                        <span>{{ state.data.name }}</span>\n                      </div>\n                      <span style=\"color: #2196f3; font-weight: bold;\">Complete</span>\n                    </div>\n                  } @else {\n                    <div style=\"display: flex; align-items: center; gap: 0.5rem; justify-content: space-between;\">\n                      <div style=\"display: flex; align-items: center; gap: 0.5rem;\">\n                        <mat-icon style=\"color: #f44336; font-size: 18px;\">error</mat-icon>\n                        <strong>Request {{ state.index + 1 }}:</strong>\n                        <span>Failed</span>\n                      </div>\n                      <span style=\"color: #f44336; font-weight: bold;\">Error</span>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          </mat-card-content>\n        </mat-card>\n      </div>\n    }\n\n    <!-- Execution Metrics -->\n    @if (parallelExecutionTime !== undefined) {\n      <div style=\"background: #f5f5f5; padding: 1rem; border-radius: 4px; margin: 1rem 0;\">\n        <div style=\"display: flex; gap: 2rem;\">\n          <div>\n            <strong>\u23F1Execution Time:</strong>\n            <span style=\"margin-left: 0.5rem; color: #4caf50;\">\n              {{ formatTime(parallelExecutionTime) }}\n            </span>\n          </div>\n          <div>\n            <strong>Mode:</strong>\n            <span style=\"margin-left: 0.5rem;\">Parallel</span>\n          </div>\n        </div>\n      </div>\n    }\n\n    <!-- Error Display -->\n    @if (parallelError) {\n      <div style=\"margin-top: 1rem;\">\n        <mat-error>{{ parallelError }}</mat-error>\n      </div>\n    }\n  </div>\n\n  <!-- Sequential Requests Section -->\n  <div>\n    <div style=\"display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;\">\n      <h2 style=\"flex: 1; margin: 0;\">Sequential Requests</h2>\n      <button\n        mat-raised-button\n        color=\"accent\"\n        (click)=\"onExecuteSequentialBatch()\"\n        [disabled]=\"isSequentialLoading\"\n        style=\"min-width: 200px;\">\n        <mat-icon>timeline</mat-icon>\n        <span style=\"margin-left: 8px;\">\n          {{ isSequentialLoading ? 'Loading...' : 'Fetch 5 Todos' }}\n        </span>\n      </button>\n    </div>\n\n    <!-- Loading Indicator -->\n    @if (isSequentialLoading) {\n      <div style=\"margin: 1rem 0;\">\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n        <p style=\"margin-top: 0.5rem; color: #666;\">\n          Executing sequential requests (one at a time)...\n        </p>\n      </div>\n    }\n\n    <!-- Individual Request States -->\n    @if (sequentialBatchStates.length > 0) {\n      <div style=\"margin: 1rem 0;\">\n        <mat-card appearance=\"outlined\">\n          <mat-card-content>\n            <div style=\"display: grid; gap: 0.5rem;\">\n              @for (state of filteredSequentialStates; track state.index; let i = $index) {\n                <div\n                  style=\"padding: 0.75rem; border-radius: 4px; border: 1px solid;\n                         {{ state.isPending ? 'background: #fff3e0; border-color: #ff9800;' :\n                            state.data ? 'background: #e3f2fd; border-color: #2196f3;' :\n                            'background: #ffebee; border-color: #f44336;' }}\">\n                  @if (state.isPending) {\n                    <div style=\"display: flex; align-items: center; gap: 0.5rem; justify-content: space-between;\">\n                      <div style=\"display: flex; align-items: center; gap: 0.5rem;\">\n                        <mat-spinner diameter=\"16\" style=\"margin-right: 0.5rem;\"></mat-spinner>\n                        <strong>Request {{ state.index + 1 }}:</strong>\n                        <span>Loading...</span>\n                      </div>\n                      <span style=\"color: #ff9800; font-weight: bold;\">Pending</span>\n                    </div>\n                  } @else if (state.data) {\n                    <div style=\"display: flex; align-items: center; gap: 0.5rem; justify-content: space-between;\">\n                      <div style=\"display: flex; align-items: center; gap: 0.5rem;\">\n                        <mat-icon style=\"color: #2196f3; font-size: 18px;\">check_circle</mat-icon>\n                        <strong>Todo #{{ state.data.id }}:</strong>\n                        <span style=\"flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\">\n                          {{ state.data.title }}\n                        </span>\n                      </div>\n                    </div>\n                  } @else {\n                    <div style=\"display: flex; align-items: center; gap: 0.5rem; justify-content: space-between;\">\n                      <div style=\"display: flex; align-items: center; gap: 0.5rem;\">\n                        <mat-icon style=\"color: #f44336; font-size: 18px;\">error</mat-icon>\n                        <strong>Request {{ state.index + 1 }}:</strong>\n                        <span>Failed</span>\n                      </div>\n                      <span style=\"color: #f44336; font-weight: bold;\">Error</span>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          </mat-card-content>\n        </mat-card>\n      </div>\n    }\n\n    <!-- Execution Metrics -->\n    @if (sequentialExecutionTime !== undefined) {\n      <div style=\"background: #f5f5f5; padding: 1rem; border-radius: 4px; margin: 1rem 0;\">\n        <div style=\"display: flex; gap: 2rem;\">\n          <div>\n            <strong>Execution Time:</strong>\n            <span style=\"margin-left: 0.5rem; color: #4caf50;\">\n              {{ formatTime(sequentialExecutionTime) }}\n            </span>\n          </div>\n          <div>\n            <strong>Mode:</strong>\n            <span style=\"margin-left: 0.5rem;\">Sequential</span>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- Stream Mode Section -->\n  <div>\n    <div style=\"display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;\">\n      <h2 style=\"flex: 1; margin: 0;\">Stream Mode (Real-time States)</h2>\n      <button\n        mat-raised-button\n        color=\"primary\"\n        (click)=\"onExecuteStreamBatch()\"\n        [disabled]=\"isStreamLoading\"\n        style=\"min-width: 200px;\">\n        <mat-icon>auto_awesome</mat-icon>\n        <span style=\"margin-left: 8px;\">\n          {{ isStreamLoading ? 'Loading...' : 'Fetch 5 Posts' }}\n        </span>\n      </button>\n    </div>\n\n    <!-- Loading Indicator -->\n    @if (isStreamLoading) {\n      <div style=\"margin: 1rem 0;\">\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n        <p style=\"margin-top: 0.5rem; color: #666;\">\n          Executing parallel requests with real-time state updates...\n        </p>\n      </div>\n    }\n\n    <!-- Progress Bar -->\n    @if (streamProgress) {\n      <div style=\"background: #f5f5f5; padding: 1rem; border-radius: 4px; margin: 1rem 0;\">\n        <div style=\"display: flex; gap: 2rem; margin-bottom: 0.5rem;\">\n          <div>\n            <strong>Execution Time:</strong>\n            <span style=\"margin-left: 0.5rem; color: #4caf50;\">\n              {{ formatTime(streamExecutionTime || 0) }}\n            </span>\n          </div>\n          <div>\n            <strong>Progress:</strong>\n            <span style=\"margin-left: 0.5rem;\">\n              {{ streamProgress.completed }} / {{ streamProgress.total }} completed\n            </span>\n          </div>\n          <div>\n            <strong>Pending:</strong>\n            <span style=\"margin-left: 0.5rem;\">\n              {{ streamProgress.pending }}\n            </span>\n          </div>\n          <div>\n            <strong>Failed:</strong>\n            <span style=\"margin-left: 0.5rem;\">\n              {{ streamProgress.failed }}\n            </span>\n          </div>\n        </div>\n        <mat-progress-bar\n          mode=\"determinate\"\n          [value]=\"streamProgress.percent\"\n          color=\"accent\">\n        </mat-progress-bar>\n        <p style=\"margin-top: 0.5rem; text-align: right; color: #666;\">\n          {{ streamProgress.percent }}%\n        </p>\n      </div>\n    }\n\n    <!-- Error Display -->\n    @if (streamError) {\n      <div style=\"margin-top: 1rem;\">\n        <mat-error>{{ streamError }}</mat-error>\n      </div>\n    }\n\n    <!-- Individual Request States -->\n    @if (streamBatchStates.length > 0) {\n      <div style=\"margin-top: 1rem;\">\n        <mat-card appearance=\"outlined\">\n          <mat-card-content>\n            <div style=\"display: grid; gap: 0.5rem;\">\n              @for (state of filteredStreamStates; track state.index; let i = $index) {\n                <div\n                  style=\"padding: 0.75rem; border-radius: 4px; border: 1px solid;\n                         {{ isPendingState(state) ? 'background: #fff3e0; border-color: #ff9800;' :\n                            isSuccessState(state) ? 'background: #e3f2fd; border-color: #2196f3;' :\n                            'background: #ffebee; border-color: #f44336;' }}\">\n                  @if (isPendingState(state)) {\n                    <div style=\"display: flex; align-items: center; gap: 0.5rem;\">\n                      <mat-spinner diameter=\"16\" style=\"margin-right: 0.5rem;\"></mat-spinner>\n                      <strong>Request {{ state.index + 1 }}:</strong>\n                      <span>Loading...</span>\n                    </div>\n                  } @else if (isSuccessState(state)) {\n                    <div style=\"display: flex; align-items: center; gap: 0.5rem;\">\n                      <mat-icon style=\"color: #2196f3; font-size: 18px;\">check_circle</mat-icon>\n                      <strong>Post #{{ state.data.id }}:</strong>\n                      <span style=\"flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\">\n                        {{ state.data.title }}\n                      </span>\n                    </div>\n                  } @else {\n                    <div style=\"display: flex; align-items: center; gap: 0.5rem;\">\n                      <mat-icon style=\"color: #f44336; font-size: 18px;\">error</mat-icon>\n                      <strong>Request {{ state.index + 1 }}:</strong>\n                      <span>Failed</span>\n                      <mat-chip style=\"margin-left: auto; font-size: 0.8em; background: #f44336; color: white;\">\n                        Error\n                      </mat-chip>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          </mat-card-content>\n        </mat-card>\n      </div>\n    }\n  </div>\n\n  <!-- Comparison Info -->\n  <div style=\"padding: 1rem; background: whitesmoke; border-radius: 4px; border: 1px solid #ccc;\">\n    <h4 style=\"margin-top: 0;\">Key Differences</h4>\n    <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;\">\n      <div>\n        <strong>Parallel:</strong>\n        <ul style=\"margin: 0.5rem 0 0 1rem; padding: 0;\">\n          <li>Faster execution (concurrent)</li>\n          <li>Multiple requests simultaneously</li>\n          <li>Results may complete out of order</li>\n          <li>Best for: Independent requests</li>\n        </ul>\n      </div>\n      <div>\n        <strong>Sequential:</strong>\n        <ul style=\"margin: 0.5rem 0 0 1rem; padding: 0;\">\n          <li>Slower execution (one-by-one)</li>\n          <li>Requests execute in order</li>\n          <li>Results always in request order</li>\n          <li>Best for: Dependent requests</li>\n        </ul>\n      </div>\n    </div>\n  </div>\n</div>\n\n</div>\n", styles: [".btn{min-width:120px}.mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor;background-color:#f5f5f5}.container{height:400px;overflow:auto}.box{padding:10px;border:1px solid #ccc}.batch-demo-section{margin:2rem 0;padding:1.5rem;border:1px solid #e0e0e0;border-radius:8px;background:#fafafa}.batch-result-item{padding:.75rem;border-radius:4px;margin-bottom:.5rem;display:flex;align-items:center;gap:.5rem}.batch-result-item.success{background:#e8f5e9;border-left:3px solid #4caf50}.batch-result-item.error{background:#ffebee;border-left:3px solid #f44336}.execution-metrics{display:flex;gap:2rem;padding:1rem;background:#f5f5f5;border-radius:4px;margin:1rem 0}.execution-metrics>div{display:flex;align-items:center;gap:.5rem}.comparison-box{padding:1rem;background:#fff3e0;border-radius:4px;margin-top:2rem}.comparison-box h4{margin-top:0;margin-bottom:1rem}.comparison-box .comparison-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}@media(max-width:768px){.comparison-box .comparison-grid{grid-template-columns:1fr}}.loading-indicator{margin:1rem 0}.result-card{margin-top:1rem}.result-card mat-card-content{padding:1rem}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { server: [{
-                type: Input
-            }], adapter: [{
-                type: Input
-            }], mapper: [{
-                type: Input
-            }], failedState: [{
-                type: ViewChild,
-                args: ["failedState", { static: true }]
-            }], pollingState: [{
-                type: ViewChild,
-                args: ["pollingState", { static: true }]
-            }] } });
-
-class LocalStorageDemoComponent {
-    get type() {
-        return (this.typeControl.value) ? +this.typeControl.value : 0;
-    }
-    get isValid() {
-        return this.newStoreForm.valid;
-    }
-    get isValidData() {
-        return this.storageForm.valid;
-    }
-    constructor(configOptions) {
-        this.configOptions = configOptions;
-        this.fb = inject(FormBuilder);
-        this.utils = inject(UtilsService);
-        this.type$ = new BehaviorSubject(StorageType.GLOBAL);
-        this.typeControl = this.fb.control(StorageType.GLOBAL.toString());
-        this.localStorageManagerService = inject(LocalStorageManagerService);
-        this.settings$ = this.localStorageManagerService.settings$;
-        this.setting$ = (store) => this.localStorageManagerService.setting$(store);
-        this.storageForm = this.fb.group({
-            store: this.fb.control(null),
-            type: 'local',
-            settingType: 'local',
-            encrypted: false,
-            data: this.fb.control('', Validators.required),
-        });
-        this.newStoreForm = this.fb.group({
-            name: this.fb.control(null, Validators.required),
-            storage: 'local',
-            encrypted: false,
-            data: this.fb.control('', Validators.required),
-            expiresIn: this.fb.control('0')
-        });
-        this.storeData$ = this.storageForm.get('store')?.valueChanges
-            .pipe(switchMap((data) => {
-            return data
-                ? this.localStorageManagerService.store$(data.name)
-                : of('');
-        }), tap(data => {
-            this.storageForm.get('data')?.patchValue(data, { emitEvent: false });
-        }));
-        this.expiresIn = (epoch) => this.utils.expiresIn(epoch);
-        this.isValidJSON = (str) => {
-            try {
-                JSON.parse(str);
-                return true;
-            }
-            catch (e) {
-                return false;
-            }
-        };
-        this.displayedColumns = ['name', 'id', 'encrypted', 'expires', "option"];
-        this.filterData = (values) => {
-            if (!values)
-                return [];
-            return values.filter((item) => item.options.storage === +this.type);
-        };
-        this.create = false;
-    }
-    ngOnInit() {
-        this.storeProps = this.configOptions?.LocalStorageOptions;
-        this.options = this.storeProps?.options;
-        if (this.options?.storage) {
-            this.typeControl.patchValue(this.options.storage.toString());
-            this.typeControl.disable();
-        }
-        else {
-            this.typeControl.enable();
-        }
-        if (this.options?.expiresIn) {
-            this.newStoreForm.get('expiresIn')?.patchValue(this.options.expiresIn);
-            this.newStoreForm.get('expiresIn')?.disable();
-        }
-        else {
-            this.newStoreForm.get('expiresIn')?.enable();
-        }
-        if (this.options?.encrypted) {
-            this.newStoreForm.get('encrypted')?.patchValue(this.options.encrypted);
-            this.newStoreForm.get('encrypted')?.disable();
-        }
-        else {
-            this.newStoreForm.get('encrypted')?.enable();
-        }
-    }
-    onCreateStore() {
-        if (!this.isValid)
-            return;
-        const store = this.newStoreForm.value;
-        if (!store.name || store.name === '')
-            return;
-        const options = { storage: this.type, encrypted: store.encrypted, expiresIn: store.expiresIn };
-        this.localStorageManagerService.createStore({
-            name: store.name,
-            data: store.data,
-            options: SettingOptions.adapt(options)
-        });
-        this.newStoreForm.reset();
-        this.create = false;
-    }
-    onUpdateStore(store) {
-        if (!this.storageForm.valid)
-            return;
-        const storeData = this.storageForm.value;
-        const data = JSON.parse(storeData.data || '');
-        const type = (storeData.type === 'local') ? StorageType.GLOBAL : StorageType.SESSION;
-        this.localStorageManagerService.updateStore({
-            name: store.name,
-            data
-        });
-    }
-    onSelectedRow(store) {
-        this.store = store;
-        this.data$ = this.localStorageManagerService.store$(store.name).pipe(map(item => JSON.stringify(item)));
-        this.create = false;
-    }
-    onCreate() {
-        this.onCancel();
-        this.create = true;
-    }
-    onDelete(store) {
-        this.localStorageManagerService.deleteStore({
-            name: store.name,
-        });
-        this.onCancel();
-    }
-    onCancel() {
-        this.data$ = EMPTY;
-        this.store = null;
-        this.create = false;
-    }
-    onUpdate(store, data) {
-        this.localStorageManagerService.updateStore({
-            name: store.name,
-            data: JSON.parse(data)
-        });
-        this.onCancel();
-    }
-    onReset() {
-        this.localStorageManagerService.resetStore();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LocalStorageDemoComponent, deps: [{ token: CONFIG_SETTINGS_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: LocalStorageDemoComponent, selector: "app-local-storage-demo", ngImport: i0, template: "<div style=\"margin: 2rem;\">\n\n  <div style=\"display: flex; gap: 1rem\">\n    <h2 style=\"padding-top: .5rem; display: flex;\">\n      <div style=\"padding-top: .5rem;\">Local Storage Manager</div>\n      <div>\n        <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n          <mat-icon>info</mat-icon>\n        </button>\n      </div>\n    </h2>\n    <span style=\"flex:1\"></span>\n    <div style=\"padding-top: .25rem;\">\n      <mat-button-toggle-group name=\"storage\" [formControl]=\"typeControl\" (change)=\"onCancel()\">\n        <mat-button-toggle value=\"0\">Local Storage</mat-button-toggle>\n        <mat-button-toggle value=\"1\">Session Storage</mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n    <div style=\"margin-top: .25rem;\">\n      <button mat-icon-button (click)=\"onCreate()\">\n        <mat-icon>add</mat-icon>\n      </button>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"storeProps?.storageName || storeProps?.storageSettingsName\">\n    <div style=\"display: flex; gap: .5rem; flex-direction: column; border: gray solid thin; background-color: whitesmoke; padding: 1rem;\"\n    >\n      <div style=\"display: flex;\">\n        <div *ngIf=\"storeProps?.storageSettingsName\" style=\"flex:1\">\n          Database: <b>{{ storeProps?.storageSettingsName }}</b>\n        </div>\n        <div *ngIf=\"storeProps?.storageName\" style=\"flex:1\">\n          Data: <b>{{ storeProps?.storageName }}</b>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <div style=\"margin-top: 2rem;\" [formGroup]=\"newStoreForm\" *ngIf=\"create; else LIST\">\n\n    <h2>Create Store</h2>\n\n    <div style=\"display: flex; gap: 1rem;\">\n      <div style=\"flex:1\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Store Name</mat-label>\n          <input matInput placeholder=\"sample\" formControlName=\"name\">\n        </mat-form-field>\n      </div>\n      <div>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Expires In...</mat-label>\n          <mat-select formControlName=\"expiresIn\">\n            <mat-option value=\"0\">None</mat-option>\n            <mat-option value=\"30s\">30 Seconds</mat-option>\n            <mat-option value=\"1mn\">1 Minute</mat-option>\n            <mat-option value=\"1hr\">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: 1rem;\">\n        <mat-slide-toggle formControlName=\"encrypted\">Encrypted</mat-slide-toggle>\n      </div>\n    </div>\n\n    <div style=\"display: flex;\">\n      <mat-form-field appearance=\"outline\" style=\"flex: 1;\">\n        <mat-label>Data (Must be an Object or Array of any)</mat-label>\n        <textarea matInput placeholder=\"[]\" formControlName=\"data\" #json></textarea>\n      </mat-form-field>\n    </div>\n    <mat-error *ngIf=\"!isValidJSON(json.value)\">Not Valid Data</mat-error>\n\n    <div style=\"display: flex;\">\n      <span style=\"flex:1\"></span>\n      <button mat-stroked-button (click)=\"onCreateStore()\" [disabled]=\"!(isValid && isValidJSON(json.value))\">\n        Save Store\n      </button>\n    </div>\n\n  </div>\n\n  <ng-template #LIST>\n\n    <div style=\"margin-top: 1rem;\">\n      <mat-divider></mat-divider>\n    </div>\n{{ settings$ | async | json }}\n    <div *ngIf=\"filterData(settings$ | async) as data\">\n      <ng-container *ngIf=\"data.length > 0; else NO_DATA\">\n        <table mat-table [dataSource]=\"data\">\n          <ng-container matColumnDef=\"name\">\n            <th mat-header-cell *matHeaderCellDef> Store </th>\n            <td mat-cell *matCellDef=\"let element\" style=\"font-weight: bold; text-transform: uppercase;\"> {{element.name}} </td>\n          </ng-container>\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=\"encrypted\">\n            <th mat-header-cell *matHeaderCellDef style=\"text-align: center;\"> Encrypted </th>\n            <td mat-cell *matCellDef=\"let element\" style=\"text-align: center;\">\n              <ng-container *ngIf=\"element.options.encrypted; else NO\">YES</ng-container>\n              <ng-template #NO><span style=\"color:gray\">NO</span></ng-template>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"expires\">\n            <th mat-header-cell *matHeaderCellDef style=\"text-align: center;\"> Expires </th>\n            <td mat-cell *matCellDef=\"let element\" style=\"text-align: center;\">\n              <ng-container *ngIf=\"element.options.expires !== 0; else NO_DATA\">\n                {{expiresIn(element.options.expires)}}\n              </ng-container>\n              <ng-template #NO_DATA>\n                \u221E\n              </ng-template>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"option\">\n            <th mat-header-cell *matHeaderCellDef></th>\n            <td mat-cell *matCellDef=\"let element\" style=\"padding-right: 0;\">\n              <div style=\"display: flex;justify-content: flex-end;\">\n                <button mat-icon-button color=\"warn\" (click)=\"onDelete(element); $event.stopPropagation()\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </div>\n            </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" (click)=\"onSelectedRow(row)\"></tr>\n        </table>\n      </ng-container>\n\n      <ng-template #NO_DATA>\n        <h3 style=\"margin-top: 1rem;\">No Data</h3>\n      </ng-template>\n\n      <div *ngIf=\"(data$ | async) as data\" style=\"margin-top: 2rem;\">\n        <div style=\"margin-bottom: 1rem;\">\n          <mat-divider></mat-divider>\n        </div>\n\n        <h3>STORE: <span style=\"font-weight: bold;\">{{ store.name | uppercase }}</span></h3>\n        <h3>SETTINGS: {{ setting$(store.name) | async | json }}</h3>\n        <div style=\"display: flex;\">\n          <mat-form-field appearance=\"outline\" style=\"flex: 1;\">\n            <mat-label>Data (Must be an Object or Array of any)</mat-label>\n            <textarea matInput placeholder=\"[]\" #json [value]=\"data\"></textarea>\n          </mat-form-field>\n        </div>\n        <mat-error *ngIf=\"!isValidJSON(json.value)\">Not Valid Data</mat-error>\n\n        <div style=\"display: flex; gap: .5rem;\">\n          <span style=\"flex:1\"></span>\n          <button mat-stroked-button (click)=\"onCancel()\">Cancel</button>\n          <button mat-stroked-button (click)=\"onUpdate(store, json.value)\" [disabled]=\"!(isValidJSON(json.value))\">Update</button>\n        </div>\n      </div>\n    </div>\n\n  </ng-template>\n\n  <div style=\"margin-top: 1rem;\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 1rem;\">\n    <button mat-stroked-button (click)=\"onReset()\">Delete All Stores</button>\n  </div>\n\n</div>\n\n\n<mat-menu #menu=\"matMenu\">\n  <div style=\"padding: 1rem;\">\n    <p>Please note that the LocalStorage (encryption) and management of data is dependant on initializing the APP_ID</p>\n    <p>Must provide a value for <b>APP_ID</b> in AppModule->Providers</p>\n    <mat-divider></mat-divider>\n  <div style=\"font-size: smaller; margin-top: .5rem;\">\n    <p>Example: UUID (self.crypto.randomUUID() to generate)</p>\n    <div style=\"background-color: whitesmoke; padding: 1rem;\">\n      &#123;<br>\n        provide: APP_ID,<br>\n        useValue: \"056991ac-3537-43ab-b5b9-83edf6554eff\",<br>\n      &#125;\n    </div>\n  </div>\n  </div>\n</mat-menu>\n", styles: [".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}.demo-row-is-clicked{font-weight:700}.mat-mdc-menu-panel.mat-mdc-menu-panel{max-width:280px!important}\n"], 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.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: "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: "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: "directive", type: i10.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i10.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { 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.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }], encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LocalStorageDemoComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-local-storage-demo', encapsulation: ViewEncapsulation.None, standalone: false, template: "<div style=\"margin: 2rem;\">\n\n  <div style=\"display: flex; gap: 1rem\">\n    <h2 style=\"padding-top: .5rem; display: flex;\">\n      <div style=\"padding-top: .5rem;\">Local Storage Manager</div>\n      <div>\n        <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n          <mat-icon>info</mat-icon>\n        </button>\n      </div>\n    </h2>\n    <span style=\"flex:1\"></span>\n    <div style=\"padding-top: .25rem;\">\n      <mat-button-toggle-group name=\"storage\" [formControl]=\"typeControl\" (change)=\"onCancel()\">\n        <mat-button-toggle value=\"0\">Local Storage</mat-button-toggle>\n        <mat-button-toggle value=\"1\">Session Storage</mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n    <div style=\"margin-top: .25rem;\">\n      <button mat-icon-button (click)=\"onCreate()\">\n        <mat-icon>add</mat-icon>\n      </button>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"storeProps?.storageName || storeProps?.storageSettingsName\">\n    <div style=\"display: flex; gap: .5rem; flex-direction: column; border: gray solid thin; background-color: whitesmoke; padding: 1rem;\"\n    >\n      <div style=\"display: flex;\">\n        <div *ngIf=\"storeProps?.storageSettingsName\" style=\"flex:1\">\n          Database: <b>{{ storeProps?.storageSettingsName }}</b>\n        </div>\n        <div *ngIf=\"storeProps?.storageName\" style=\"flex:1\">\n          Data: <b>{{ storeProps?.storageName }}</b>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <div style=\"margin-top: 2rem;\" [formGroup]=\"newStoreForm\" *ngIf=\"create; else LIST\">\n\n    <h2>Create Store</h2>\n\n    <div style=\"display: flex; gap: 1rem;\">\n      <div style=\"flex:1\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Store Name</mat-label>\n          <input matInput placeholder=\"sample\" formControlName=\"name\">\n        </mat-form-field>\n      </div>\n      <div>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Expires In...</mat-label>\n          <mat-select formControlName=\"expiresIn\">\n            <mat-option value=\"0\">None</mat-option>\n            <mat-option value=\"30s\">30 Seconds</mat-option>\n            <mat-option value=\"1mn\">1 Minute</mat-option>\n            <mat-option value=\"1hr\">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: 1rem;\">\n        <mat-slide-toggle formControlName=\"encrypted\">Encrypted</mat-slide-toggle>\n      </div>\n    </div>\n\n    <div style=\"display: flex;\">\n      <mat-form-field appearance=\"outline\" style=\"flex: 1;\">\n        <mat-label>Data (Must be an Object or Array of any)</mat-label>\n        <textarea matInput placeholder=\"[]\" formControlName=\"data\" #json></textarea>\n      </mat-form-field>\n    </div>\n    <mat-error *ngIf=\"!isValidJSON(json.value)\">Not Valid Data</mat-error>\n\n    <div style=\"display: flex;\">\n      <span style=\"flex:1\"></span>\n      <button mat-stroked-button (click)=\"onCreateStore()\" [disabled]=\"!(isValid && isValidJSON(json.value))\">\n        Save Store\n      </button>\n    </div>\n\n  </div>\n\n  <ng-template #LIST>\n\n    <div style=\"margin-top: 1rem;\">\n      <mat-divider></mat-divider>\n    </div>\n{{ settings$ | async | json }}\n    <div *ngIf=\"filterData(settings$ | async) as data\">\n      <ng-container *ngIf=\"data.length > 0; else NO_DATA\">\n        <table mat-table [dataSource]=\"data\">\n          <ng-container matColumnDef=\"name\">\n            <th mat-header-cell *matHeaderCellDef> Store </th>\n            <td mat-cell *matCellDef=\"let element\" style=\"font-weight: bold; text-transform: uppercase;\"> {{element.name}} </td>\n          </ng-container>\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=\"encrypted\">\n            <th mat-header-cell *matHeaderCellDef style=\"text-align: center;\"> Encrypted </th>\n            <td mat-cell *matCellDef=\"let element\" style=\"text-align: center;\">\n              <ng-container *ngIf=\"element.options.encrypted; else NO\">YES</ng-container>\n              <ng-template #NO><span style=\"color:gray\">NO</span></ng-template>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"expires\">\n            <th mat-header-cell *matHeaderCellDef style=\"text-align: center;\"> Expires </th>\n            <td mat-cell *matCellDef=\"let element\" style=\"text-align: center;\">\n              <ng-container *ngIf=\"element.options.expires !== 0; else NO_DATA\">\n                {{expiresIn(element.options.expires)}}\n              </ng-container>\n              <ng-template #NO_DATA>\n                \u221E\n              </ng-template>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"option\">\n            <th mat-header-cell *matHeaderCellDef></th>\n            <td mat-cell *matCellDef=\"let element\" style=\"padding-right: 0;\">\n              <div style=\"display: flex;justify-content: flex-end;\">\n                <button mat-icon-button color=\"warn\" (click)=\"onDelete(element); $event.stopPropagation()\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </div>\n            </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" (click)=\"onSelectedRow(row)\"></tr>\n        </table>\n      </ng-container>\n\n      <ng-template #NO_DATA>\n        <h3 style=\"margin-top: 1rem;\">No Data</h3>\n      </ng-template>\n\n      <div *ngIf=\"(data$ | async) as data\" style=\"margin-top: 2rem;\">\n        <div style=\"margin-bottom: 1rem;\">\n          <mat-divider></mat-divider>\n        </div>\n\n        <h3>STORE: <span style=\"font-weight: bold;\">{{ store.name | uppercase }}</span></h3>\n        <h3>SETTINGS: {{ setting$(store.name) | async | json }}</h3>\n        <div style=\"display: flex;\">\n          <mat-form-field appearance=\"outline\" style=\"flex: 1;\">\n            <mat-label>Data (Must be an Object or Array of any)</mat-label>\n            <textarea matInput placeholder=\"[]\" #json [value]=\"data\"></textarea>\n          </mat-form-field>\n        </div>\n        <mat-error *ngIf=\"!isValidJSON(json.value)\">Not Valid Data</mat-error>\n\n        <div style=\"display: flex; gap: .5rem;\">\n          <span style=\"flex:1\"></span>\n          <button mat-stroked-button (click)=\"onCancel()\">Cancel</button>\n          <button mat-stroked-button (click)=\"onUpdate(store, json.value)\" [disabled]=\"!(isValidJSON(json.value))\">Update</button>\n        </div>\n      </div>\n    </div>\n\n  </ng-template>\n\n  <div style=\"margin-top: 1rem;\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 1rem;\">\n    <button mat-stroked-button (click)=\"onReset()\">Delete All Stores</button>\n  </div>\n\n</div>\n\n\n<mat-menu #menu=\"matMenu\">\n  <div style=\"padding: 1rem;\">\n    <p>Please note that the LocalStorage (encryption) and management of data is dependant on initializing the APP_ID</p>\n    <p>Must provide a value for <b>APP_ID</b> in AppModule->Providers</p>\n    <mat-divider></mat-divider>\n  <div style=\"font-size: smaller; margin-top: .5rem;\">\n    <p>Example: UUID (self.crypto.randomUUID() to generate)</p>\n    <div style=\"background-color: whitesmoke; padding: 1rem;\">\n      &#123;<br>\n        provide: APP_ID,<br>\n        useValue: \"056991ac-3537-43ab-b5b9-83edf6554eff\",<br>\n      &#125;\n    </div>\n  </div>\n  </div>\n</mat-menu>\n", styles: [".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}.demo-row-is-clicked{font-weight:700}.mat-mdc-menu-panel.mat-mdc-menu-panel{max-width:280px!important}\n"] }]
-        }], ctorParameters: () => [{ type: ConfigOptions, decorators: [{
-                    type: Inject,
-                    args: [CONFIG_SETTINGS_TOKEN]
-                }] }] });
-
-class OIDCClient {
-    constructor(spiffe = '', id = 0, first_name = '', last_name = '', email = '') {
-        this.spiffe = spiffe;
-        this.id = id;
-        this.first_name = first_name;
-        this.last_name = last_name;
-        this.email = email;
-    }
-    static adapt(item) {
-        return new OIDCClient(item?.spiffe, item?.id, item?.first_name, item?.last_name, item?.email);
-    }
-}
-
-/**
- * StateServiceDemo - Core state management and WebSocket connection service
- *
- * Handles:
- * - WebSocket connection setup
- * - Base HTTP state management
- * - Connection status and retry logic
- */
-class StateServiceDemo extends HTTPManagerStateService {
-    constructor() {
-        super(ApiRequest.adapt({
-            server: '',
-            retry: RetryOptions.adapt({
-                times: 3,
-                delay: 1,
-            }),
-            adapter: OIDCClient.adapt,
-        }), DataType.ARRAY, DatabaseStorage.adapt({
-            table: 'ws_demo_data',
-            expiresIn: '5mn',
-        }));
-        this.attempts$ = this.wsRetryAttempts$;
-        this.nextRetry$ = this.wsNextRetry$;
-    }
-    /**
-     * Initialize WebSocket connection with server configuration
-     * @param server - Backend server URL
-     * @param wsServer - WebSocket server URL
-     * @param jwtToken - JWT authentication token
-     * @param user - User information
-     * @param path - Path for constructing channel name (e.g., ['ai','tests'])
-     */
-    updateConnection(server, wsServer, jwtToken, user, path = ['ai', 'tests']) {
-        // Construct channel name from path: ['ai','tests'] → 'ai/tests'
-        const channelId = path.join('/');
-        this.setApiRequestOptions({
-            server,
-            path, // Set the path for HTTP requests
-            retry: RetryOptions.adapt({
-                times: 3,
-                delay: 1,
-            }),
-            adapter: OIDCClient.adapt,
-            ws: {
-                id: channelId, // Use path-based channel ID instead of hardcoded 'USERS123'
-                wsServer,
-                jwtToken,
-                user,
-                retry: RetryOptions.adapt({
-                    times: 10,
-                    delay: 5,
-                }),
-            }
-        });
-        this.userAction$.subscribe(user => {
-            console.log('User Action:', user);
-        });
-    }
-    /**
-     * Get all available channels
-     */
-    getAllChannels() {
-        this.httpManagerService.getAllChannels();
-    }
-    /**
-     * Subscribe to a channel
-     */
-    subscribeToChannel(channel) {
-        super.subscribeToChannel(channel);
-    }
-    /**
-     * Unsubscribe from a channel
-     */
-    unsubscribeFromChannel(channel) {
-        super.unsubscribeFromChannel(channel);
-    }
-    // =====================
-    // Notification Channel Methods (MES- prefix)
-    // These override methods from HTTPManagerStateService
-    // =====================
-    /**
-     * Create a notification channel (MES- prefix)
-     */
-    createNotificationChannel(channel) {
-        super.createNotificationChannel(channel);
-    }
-    /**
-     * Get all notification channels list (in-memory)
-     */
-    getNotificationChannels() {
-        super.getNotificationChannels();
-    }
-    /**
-     * Get today's notification channels from database
-     * Returns unique channels that have notifications posted today
-     */
-    getTodaysNotificationChannels() {
-        super.getTodaysNotificationChannels();
-    }
-    /**
-     * Define and load previous day's notification channels from database
-     * Creates channels in memory and broadcasts updated list
-     */
-    definePreviousNotificationChannels() {
-        const options = ApiRequest.adapt({
-            path: ['notifications', 'channels', 'define-previous']
-        });
-        this.httpManagerService.postRequest({}, options).subscribe({
-            next: (response) => {
-                console.log('📋 Previous day channels loaded:', response);
-                // The server will broadcast updated channel list to all WebSocket clients
-            },
-            error: (error) => {
-                console.error('❌ Failed to load previous day channels:', error);
-            }
-        });
-    }
-    /**
-     * Subscribe to notification channel with optional date filters
-     */
-    subscribeToNotificationChannel(channel, options, user) {
-        super.subscribeToNotificationChannel(channel, options, user);
-    }
-    /**
-     * Unsubscribe from notification channel
-     */
-    unsubscribeFromNotificationChannel(channel) {
-        super.unsubscribeFromNotificationChannel(channel);
-    }
-    /**
-     * Send a notification to a channel
-     */
-    sendNotification(channel, content) {
-        super.sendNotification(channel, content);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StateServiceDemo, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StateServiceDemo, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StateServiceDemo, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [] });
-
-/**
- * MessageServiceDemo - Channel messaging service (PUB- prefix channels)
- *
- * Handles:
- * - Sending messages to channels
- * - Channel subscription for messaging
- * - Real-time message broadcast
- */
-class MessageServiceDemo {
-    constructor() {
-        this.stateService = inject(StateServiceDemo);
-        // Expose observables from state service
-        this.channels$ = this.stateService.channels$;
-        this.subscribedChannels$ = this.stateService.subscribedChannels$;
-        this.communicationMessages$ = this.stateService.communicationMessages$;
-        this.latestCommunicationMessages$ = this.stateService.latestCommunicationMessages$;
-        this.connectionStatus$ = this.stateService.connectionStatus$;
-        this.user$ = this.stateService.user$;
-        this.data$ = this.stateService.data$;
-    }
-    /**
-     * Helper to ensure channel has PUB- prefix
-     */
-    toPublicChannel(channel) {
-        return channel.startsWith('PUB-') ? channel : `PUB-${channel}`;
-    }
-    /**
-     * Helper to strip PUB- prefix for display
-     */
-    fromPublicChannel(channel) {
-        return channel.startsWith('PUB-') ? channel.replace('PUB-', '') : channel;
-    }
-    /**
-     * Create a new public channel
-     */
-    createChannel(channel) {
-        const publicChannel = this.toPublicChannel(channel);
-        this.stateService.createChannel(publicChannel);
-    }
-    /**
-     * Get all available channels
-     */
-    getAllChannels() {
-        this.stateService.getAllChannels();
-    }
-    /**
-     * Subscribe to a channel to receive messages
-     */
-    subscribeToChannel(channel) {
-        const publicChannel = this.toPublicChannel(channel);
-        this.stateService.subscribeToChannel(publicChannel);
-    }
-    /**
-     * Unsubscribe from a channel
-     */
-    unsubscribeFromChannel(channel) {
-        const publicChannel = this.toPublicChannel(channel);
-        this.stateService.unsubscribeFromChannel(publicChannel);
-    }
-    /**
-     * Send a message to one or more channels
-     */
-    sendMessage(data, channels) {
-        const publicChannels = channels?.map(ch => this.toPublicChannel(ch));
-        console.log('sendMessage', data, 'to channels:', publicChannels);
-        this.stateService.wsMessaging(data, publicChannels);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessageServiceDemo, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessageServiceDemo, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessageServiceDemo, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-
-/**
- * NotificationServiceDemo - Notification channel service (MES- prefix channels)
- *
- * Handles:
- * - Creating notification channels
- * - Subscribing to notifications with date filters
- * - Sending notifications (persisted to database)
- * - Receiving real-time and historical notifications
- */
-class NotificationServiceDemo {
-    constructor() {
-        this.stateService = inject(StateServiceDemo);
-        // Notification channels from state service (in-memory - contains MES- channels from server)
-        this.notificationChannels$ = this.stateService.notificationChannels$;
-        // Today's notification channels from database (channels with data for today)
-        this.todaysNotificationChannels$ = this.stateService.todaysNotificationChannels$;
-        this.subscribedNotificationChannelsSubject = new BehaviorSubject(new Set());
-        this.subscribedNotificationChannels$ = this.subscribedNotificationChannelsSubject.asObservable();
-        // Notification messages from state service
-        this.notificationMessages$ = this.stateService.notificationMessages$;
-        // Latest notification from state service
-        this.latestNotification$ = this.stateService.latestNotification$;
-        // Expose connection status from state service
-        this.connectionStatus$ = this.stateService.connectionStatus$;
-    }
-    /**
-     * Create a notification channel
-     * NOTE: MES- prefix is added automatically by HTTPManagerStateService
-     */
-    createNotificationChannel(channel) {
-        console.log('📢 createNotificationChannel:', channel);
-        this.stateService.createNotificationChannel(channel);
-    }
-    /**
-     * Get all notification channels (in-memory)
-     */
-    getNotificationChannels() {
-        console.log('📢 getNotificationChannels');
-        this.stateService.getNotificationChannels();
-    }
-    /**
-     * Get today's notification channels from database
-     * Returns unique channels that have notifications posted today
-     */
-    getTodaysNotificationChannels() {
-        console.log('📢 getTodaysNotificationChannels (from DB)');
-        this.stateService.getTodaysNotificationChannels();
-    }
-    /**
-     * Define and load previous day's notification channels from database
-     * Creates channels in memory and broadcasts updated list
-     */
-    definePreviousNotificationChannels() {
-        console.log('📢 definePreviousNotificationChannels');
-        this.stateService.definePreviousNotificationChannels();
-    }
-    /**
-     * Subscribe to a notification channel with optional date filter
-     * NOTE: MES- prefix is added automatically by HTTPManagerStateService
-     * @param channel Base channel name (without MES- prefix)
-     * @param options { startEpoch?, endEpoch? }
-     * @param user User info for subscription
-     */
-    subscribeToNotificationChannel(channel, options, user) {
-        // Add MES- prefix for local tracking (to match what state service sends)
-        const prefixedChannel = channel.startsWith('MES-') ? channel : `MES-${channel}`;
-        console.log('📢 subscribeToNotificationChannel:', prefixedChannel, options);
-        // Add to local subscribed channels immediately for UI feedback
-        const currentSubs = this.subscribedNotificationChannelsSubject.value;
-        currentSubs.add(prefixedChannel);
-        this.subscribedNotificationChannelsSubject.next(new Set(currentSubs));
-        // Send subscription request to server (state service adds MES- prefix)
-        this.stateService.subscribeToNotificationChannel(channel, options, user);
-    }
-    /**
-     * Unsubscribe from a notification channel
-     * NOTE: MES- prefix is added automatically by HTTPManagerStateService
-     */
-    unsubscribeFromNotificationChannel(channel) {
-        // Add MES- prefix for local tracking (to match what state service sends)
-        const prefixedChannel = channel.startsWith('MES-') ? channel : `MES-${channel}`;
-        console.log('📢 unsubscribeFromNotificationChannel:', prefixedChannel);
-        // Remove from local subscribed channels immediately for UI feedback
-        const currentSubs = this.subscribedNotificationChannelsSubject.value;
-        currentSubs.delete(prefixedChannel);
-        this.subscribedNotificationChannelsSubject.next(new Set(currentSubs));
-        // Send unsubscription request to server (state service adds MES- prefix)
-        this.stateService.unsubscribeFromNotificationChannel(channel);
-    }
-    /**
-     * Send a notification to a channel
-     * NOTE: MES- prefix is added automatically by HTTPManagerStateService
-     */
-    sendNotification(channel, content, user) {
-        const notificationContent = {
-            sessionId: {
-                id: user?.id,
-                ldap: user?.ldap,
-                name: user?.name,
-                email: user?.email,
-                color: user?.color,
-            },
-            ...content
-        };
-        console.log('📢 sendNotification:', channel, notificationContent);
-        // State service adds MES- prefix
-        this.stateService.sendNotification(channel, notificationContent);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NotificationServiceDemo, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NotificationServiceDemo, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NotificationServiceDemo, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-
-class StateDataRequestService extends HTTPManagerStateService {
-    constructor() {
-        super(ApiRequest.adapt({
-            server: '',
-            retry: RetryOptions.adapt({
-                times: 3,
-                delay: 1,
-            }),
-            adapter: OIDCClient.adapt,
-            ws: {
-                id: ``,
-                // wsChannels: ['allChannels'],
-                // access: ['read,write,delete,update'],
-                wsServer: '',
-                jwtToken: '',
-                user: UserData.adapt(),
-                retry: RetryOptions.adapt({
-                    times: 3,
-                    delay: 10,
-                }),
-            }
-        }), DataType.ARRAY, DatabaseStorage.adapt({
-            table: 'ws_demo_data',
-            expiresIn: '5mn',
-        }));
-        this.attempts$ = this.wsRetryAttempts$;
-        this.nextRetry$ = this.wsNextRetry$;
-        this.path = ['ai', 'tests'];
-    }
-    updateConnection(server, wsServer, jwtToken, user, path = []) {
-        this.path = path;
-        this.setApiRequestOptions({
-            server,
-            retry: RetryOptions.adapt({
-                times: 3,
-                delay: 1,
-            }),
-            adapter: OIDCClient.adapt,
-            ws: {
-                id: this.path.join('/'),
-                wsServer,
-                jwtToken,
-                user, // general info about user
-                retry: RetryOptions.adapt({
-                    times: 3,
-                    delay: 10,
-                }),
-            }
-        });
-    }
-    addData() {
-        const num = RandomNumber(1000, 9999);
-        const newData = {
-            "spiffe": `sample.com/developer/${num}`,
-            "last_name": "boni",
-            "email": "mikeboni@hotmail.com",
-            "first_name": "mike"
-        };
-        this.createRecord(newData, RequestOptions.adapt({ path: this.path }));
-    }
-    sendMessage(data) {
-        console.log('sendMessage', data);
-        this.wsMessaging(data);
-    }
-    getData() {
-        this.fetchRecords(RequestOptions.adapt({ path: this.path }));
-    }
-    updateData(data) {
-        const sampleOptions = RequestOptions.adapt({ path: [...this.path, data.id] });
-        console.log('updateData', sampleOptions);
-        this.updateRecord(data, sampleOptions);
-    }
-    deleteData(data) {
-        const sampleOptions = RequestOptions.adapt({ path: [...this.path, data.id] });
-        console.log('deleteData', sampleOptions);
-        this.deleteRecord(sampleOptions);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StateDataRequestService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StateDataRequestService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StateDataRequestService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [] });
-
-class WsDataControlComponent {
-    constructor() {
-        this.path = ['ai', 'tests'];
-        this.stateDataRequestService = inject(StateDataRequestService);
-        this.webSocketMessageService = inject(WebSocketMessageService);
-        this.user$ = this.stateDataRequestService.user$;
-        this.users$ = this.stateDataRequestService.userList$;
-        this.userAction$ = this.stateDataRequestService.userAction$
-            .pipe(switchMap$1((action) => timer(3 * 1000).pipe(map$1(() => null), startWith$1(action))));
-        this.data$ = this.stateDataRequestService.data$;
-        this.isUser = (user, userItem) => {
-            return user.sessionId === userItem.sessionId;
-        };
-    }
-    ngOnInit() {
-        this.stateDataRequestService.updateConnection(this.server, this.wsServer, this.jwtToken, this.user, this.path);
-        this.stateDataRequestService.getData();
-    }
-    onGetData() {
-        this.stateDataRequestService.getData();
-    }
-    onAddData() {
-        this.stateDataRequestService.addData();
-    }
-    onUpdateData(data) {
-        const num = RandomNumber(1000, 9999);
-        const newData = {
-            "spiffe": `wavecoders.com/developer/${num}`,
-            "id": 63,
-            "last_name": "boni",
-            "email": "mikeboni@hotmail.com",
-            "first_name": "mike"
-        };
-        this.stateDataRequestService.updateData(newData);
-    }
-    onRemoveData(data) {
-        const lastRec = data[data.length - 1];
-        this.stateDataRequestService.deleteData(lastRec);
-    }
-    /**
-     * Test direct state message via WebSocketMessageService
-     * Sends an UPDATE message that should trigger fetchRecord() in the state manager
-     *
-     * @param recordId - The record ID to update (default: 63)
-     * @param useFakeSessionId - If true, uses a fake sessionId to avoid filtering (default: true)
-     * @param customSessionId - Optional custom sessionId (overrides useFakeSessionId if provided)
-     */
-    onTestDirectStateMessage(recordId = 63, useFakeSessionId = true, customSessionId) {
-        // Get actual sessionId from sessionStorage (stored by HTTPManagerStateService)
-        const actualSessionId = sessionStorage.getItem('WSID') || 'unknown';
-        // Determine sessionId to use
-        let sessionId;
-        if (customSessionId) {
-            sessionId = customSessionId;
-        }
-        else if (useFakeSessionId) {
-            sessionId = `test-${Date.now()}`;
-        }
-        else {
-            // Use actual sessionId (will be filtered out by receiver)
-            sessionId = actualSessionId;
-        }
-        // Build StateMessage with same structure as CRUD operations
-        const stateMessage = {
-            sessionId: {
-                id: sessionId,
-                name: useFakeSessionId ? 'Test Sender' : (this.user?.name || 'Current User')
-            },
-            content: {
-                method: 'UPDATE',
-                path: ['ai', 'tests', recordId],
-                user: {
-                    id: sessionId,
-                    name: useFakeSessionId ? 'Test Sender' : (this.user?.name || 'Current User')
-                }
-            }
-        };
-        console.log('🧪 [TEST] Sending direct state message:', {
-            recordId,
-            sessionId,
-            actualSessionId,
-            useFakeSessionId,
-            stateMessage
-        });
-        const success = this.webSocketMessageService.sendStateMessage(['ai', 'tests'], stateMessage);
-        console.log('🧪 [TEST] Message sent:', {
-            success,
-            actualSessionId,
-            sentSessionId: sessionId,
-            expectedBehavior: success
-                ? 'Server will broadcast to SYS-ai/tests subscribers'
-                : 'Failed to send (check connection)',
-            receiverBehavior: sessionId !== actualSessionId
-                ? 'Receiver will process message and call fetchRecord()'
-                : 'Receiver will filter out (sessionId match)'
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WsDataControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: WsDataControlComponent, selector: "app-ws-data-control", inputs: { server: "server", wsServer: "wsServer", jwtToken: "jwtToken", user: "user", path: "path" }, ngImport: i0, template: "@if ((data$ | async); as data) {\n  <div style=\"margin: 1rem;\">\n    @if ((users$ |async); as users) {\n      <div>\n        @if (users.length > 0) {\n          <h3 style=\"margin: 0;\">Connected Users</h3>\n        } @else {\n          <h3 style=\"margin: 0;\">No Users</h3>\n        }\n        <mat-chip-set>\n          @for (user of users; track $index) {\n            <mat-chip\n              [class.user-chip--primary]=\"isUser(user, (user$ | async))\"\n              [style.color]=\"isUser(user, (user$ | async)) ? '#fff' : null\"\n              [disableRipple]=\"true\"\n            >\n              {{ user.name || user.ldap || user.id || 'Anonymous' }}\n            </mat-chip>\n          }\n        </mat-chip-set>\n      </div>\n    }\n    <div style=\"margin-top: 1rem; margin-bottom: 1rem;\">\n      <mat-divider></mat-divider>\n    </div>\n\n    <div class=\"box\" style=\"margin-bottom: 1rem;\" *ngIf=\"(userAction$ | async) as userAction\">\n      {{ userAction?.content?.user?.name }} has {{ userAction?.content?.method }}\n    </div>\n\n    <h3 style=\"margin: 0;\">Data Actions</h3>\n    <div style=\"display: flex; gap: 1rem; margin-bottom: 1rem;\">\n      <button mat-stroked-button (click)=\"onGetData()\">Get Data</button>\n      <div style=\"flex:1\"></div>\n      <button mat-stroked-button color=\"accent\" (click)=\"onUpdateData(data)\">Update Data</button>\n      <button mat-stroked-button color=\"warn\" (click)=\"onRemoveData(data)\">Remove Data</button>\n      <button mat-stroked-button color=\"primary\" (click)=\"onAddData()\">Add Data</button>\n    </div>\n\n    <h3 style=\"margin: 0; margin-top: 1rem;\">WebSocketMessageService Test</h3>\n\n    <p style=\"font-size: 0.875rem; color: #666; margin: 0;\">\n      <strong>Note:</strong> \"Fake SessionId\" will be received and processed. \"Current SessionId\" will be filtered out (self-message).\n    @if (data.length > 0) {\n      <div>\n        <table mat-table [dataSource]=\"data\" style=\"border: 1px solid grey;\">\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          <ng-container matColumnDef=\"spiffe\">\n            <th mat-header-cell *matHeaderCellDef> Spiffe </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.spiffe}} </td>\n          </ng-container>\n          <ng-container matColumnDef=\"name\">\n            <th mat-header-cell *matHeaderCellDef> Name </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.first_name}} {{element.last_name}}</td>\n          </ng-container>\n          <ng-container matColumnDef=\"email\">\n            <th mat-header-cell *matHeaderCellDef> Email </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.email}} </td>\n          </ng-container>\n          <tr mat-header-row *matHeaderRowDef=\"['id', 'spiffe', 'name', 'email']\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: ['id', 'spiffe', 'name', 'email'];\"></tr>\n        </table>\n        <div style=\"border: 1px solid grey; padding: .5rem; border-top: none;\">\n          <h3 style=\"margin: 0;\">Total Records {{ data.length }}</h3>\n        </div>\n      </div>\n    } @else {\n      <div style=\"margin-top: 1rem; font-style: italic;\">\n        No Data Available\n      </div>\n    }\n\n    <div style=\"margin-bottom: 1rem; margin-top: 1rem;\">\n      <mat-divider></mat-divider>\n    </div>\n\n    <div style=\"display: flex; gap: 0.5rem; margin-bottom: 1rem;\">\n      <button mat-flat-button color=\"primary\" (click)=\"onTestDirectStateMessage(63, true)\">\n        Test UPDATE (Fake Id)\n      </button>\n      <button mat-stroked-button (click)=\"onTestDirectStateMessage(63, false)\">\n        Test UPDATE (Current Id)\n      </button>\n      <button mat-stroked-button (click)=\"onTestDirectStateMessage(63, false, 'custom-session-123')\">\n        Test UPDATE (Custom Id)\n      </button>\n    </div>\n\n  </div>\n}\n\n", styles: [".user-chip--primary{background-color:var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5))!important;color:#fff!important;--mdc-evolution-chip-container-color: var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5));--mdc-evolution-chip-label-text-color: #fff}.user-chip--primary :is(.mdc-evolution-chip__text-label,.mdc-evolution-chip__action,.mdc-evolution-chip__cell,.mat-mdc-chip-action-label){color:#fff!important}.user-chip--primary,.user-chip--primary *{color:#fff!important}:host ::ng-deep .user-chip--primary{background-color:var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5))!important;color:#fff!important;--mdc-evolution-chip-container-color: var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5));--mdc-evolution-chip-label-text-color: #fff}:host ::ng-deep .user-chip--primary .mdc-evolution-chip__text-label,:host ::ng-deep .user-chip--primary .mdc-evolution-chip__action,:host ::ng-deep .user-chip--primary .mdc-evolution-chip__cell,:host ::ng-deep .user-chip--primary .mat-mdc-chip-action-label,:host ::ng-deep .user-chip--primary *{color:#fff!important}.box{padding:.5rem;border:1px solid rgb(174,174,13);background-color:#ececaf}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i3$1.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { 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: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WsDataControlComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-ws-data-control', standalone: false, template: "@if ((data$ | async); as data) {\n  <div style=\"margin: 1rem;\">\n    @if ((users$ |async); as users) {\n      <div>\n        @if (users.length > 0) {\n          <h3 style=\"margin: 0;\">Connected Users</h3>\n        } @else {\n          <h3 style=\"margin: 0;\">No Users</h3>\n        }\n        <mat-chip-set>\n          @for (user of users; track $index) {\n            <mat-chip\n              [class.user-chip--primary]=\"isUser(user, (user$ | async))\"\n              [style.color]=\"isUser(user, (user$ | async)) ? '#fff' : null\"\n              [disableRipple]=\"true\"\n            >\n              {{ user.name || user.ldap || user.id || 'Anonymous' }}\n            </mat-chip>\n          }\n        </mat-chip-set>\n      </div>\n    }\n    <div style=\"margin-top: 1rem; margin-bottom: 1rem;\">\n      <mat-divider></mat-divider>\n    </div>\n\n    <div class=\"box\" style=\"margin-bottom: 1rem;\" *ngIf=\"(userAction$ | async) as userAction\">\n      {{ userAction?.content?.user?.name }} has {{ userAction?.content?.method }}\n    </div>\n\n    <h3 style=\"margin: 0;\">Data Actions</h3>\n    <div style=\"display: flex; gap: 1rem; margin-bottom: 1rem;\">\n      <button mat-stroked-button (click)=\"onGetData()\">Get Data</button>\n      <div style=\"flex:1\"></div>\n      <button mat-stroked-button color=\"accent\" (click)=\"onUpdateData(data)\">Update Data</button>\n      <button mat-stroked-button color=\"warn\" (click)=\"onRemoveData(data)\">Remove Data</button>\n      <button mat-stroked-button color=\"primary\" (click)=\"onAddData()\">Add Data</button>\n    </div>\n\n    <h3 style=\"margin: 0; margin-top: 1rem;\">WebSocketMessageService Test</h3>\n\n    <p style=\"font-size: 0.875rem; color: #666; margin: 0;\">\n      <strong>Note:</strong> \"Fake SessionId\" will be received and processed. \"Current SessionId\" will be filtered out (self-message).\n    @if (data.length > 0) {\n      <div>\n        <table mat-table [dataSource]=\"data\" style=\"border: 1px solid grey;\">\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          <ng-container matColumnDef=\"spiffe\">\n            <th mat-header-cell *matHeaderCellDef> Spiffe </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.spiffe}} </td>\n          </ng-container>\n          <ng-container matColumnDef=\"name\">\n            <th mat-header-cell *matHeaderCellDef> Name </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.first_name}} {{element.last_name}}</td>\n          </ng-container>\n          <ng-container matColumnDef=\"email\">\n            <th mat-header-cell *matHeaderCellDef> Email </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.email}} </td>\n          </ng-container>\n          <tr mat-header-row *matHeaderRowDef=\"['id', 'spiffe', 'name', 'email']\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: ['id', 'spiffe', 'name', 'email'];\"></tr>\n        </table>\n        <div style=\"border: 1px solid grey; padding: .5rem; border-top: none;\">\n          <h3 style=\"margin: 0;\">Total Records {{ data.length }}</h3>\n        </div>\n      </div>\n    } @else {\n      <div style=\"margin-top: 1rem; font-style: italic;\">\n        No Data Available\n      </div>\n    }\n\n    <div style=\"margin-bottom: 1rem; margin-top: 1rem;\">\n      <mat-divider></mat-divider>\n    </div>\n\n    <div style=\"display: flex; gap: 0.5rem; margin-bottom: 1rem;\">\n      <button mat-flat-button color=\"primary\" (click)=\"onTestDirectStateMessage(63, true)\">\n        Test UPDATE (Fake Id)\n      </button>\n      <button mat-stroked-button (click)=\"onTestDirectStateMessage(63, false)\">\n        Test UPDATE (Current Id)\n      </button>\n      <button mat-stroked-button (click)=\"onTestDirectStateMessage(63, false, 'custom-session-123')\">\n        Test UPDATE (Custom Id)\n      </button>\n    </div>\n\n  </div>\n}\n\n", styles: [".user-chip--primary{background-color:var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5))!important;color:#fff!important;--mdc-evolution-chip-container-color: var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5));--mdc-evolution-chip-label-text-color: #fff}.user-chip--primary :is(.mdc-evolution-chip__text-label,.mdc-evolution-chip__action,.mdc-evolution-chip__cell,.mat-mdc-chip-action-label){color:#fff!important}.user-chip--primary,.user-chip--primary *{color:#fff!important}:host ::ng-deep .user-chip--primary{background-color:var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5))!important;color:#fff!important;--mdc-evolution-chip-container-color: var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5));--mdc-evolution-chip-label-text-color: #fff}:host ::ng-deep .user-chip--primary .mdc-evolution-chip__text-label,:host ::ng-deep .user-chip--primary .mdc-evolution-chip__action,:host ::ng-deep .user-chip--primary .mdc-evolution-chip__cell,:host ::ng-deep .user-chip--primary .mat-mdc-chip-action-label,:host ::ng-deep .user-chip--primary *{color:#fff!important}.box{padding:.5rem;border:1px solid rgb(174,174,13);background-color:#ececaf}\n"] }]
-        }], propDecorators: { server: [{
-                type: Input
-            }], wsServer: [{
-                type: Input
-            }], jwtToken: [{
-                type: Input
-            }], user: [{
-                type: Input
-            }], path: [{
-                type: Input
-            }] } });
-
-class WsMessagingComponent {
-    constructor() {
-        this.path = ['ai', 'tests']; // Default path for channel name
-        this.destroy$ = new Subject();
-        this.fb = inject(FormBuilder);
-        this.messageService = inject(MessageServiceDemo);
-        this.stateService = inject(StateServiceDemo);
-        this.messageDisplayService = inject(MessageDisplayRouterService);
-        // Only show public channels (starting with "PUB-"), strip prefix for display
-        // SYS- channels are private/internal and hidden from users
-        this.channels$ = this.messageService.channels$.pipe(map$1(channels => channels
-            ?.filter(channel => channel.startsWith('PUB-'))
-            .map(channel => channel.replace('PUB-', '')) || []), startWith$1([]), distinctUntilChanged$1((prev, curr) => prev.length === curr.length && prev.every((v, i) => v === curr[i])));
-        // Track subscribed public channels only, strip prefix for display
-        this.subscribedChannels$ = this.messageService.subscribedChannels$.pipe(map$1(set => Array.from(set)
-            .filter(channel => channel.startsWith('PUB-'))
-            .map(channel => channel.replace('PUB-', ''))), startWith$1([]), distinctUntilChanged$1((prev, curr) => prev.length === curr.length && prev.every((v, i) => v === curr[i])));
-        this.user$ = this.stateService.user$;
-        this.data$ = this.stateService.data$;
-        this.connectionStatus$ = this.stateService.connectionStatus$;
-        // Form for creating new channels
-        this.newChannelName = this.fb.control('', [Validators.required, Validators.minLength(2)]);
-        // Form for selecting channels to send to and message content
-        this.messages = this.fb.group({
-            selectedChannels: this.fb.control([], Validators.required),
-            content: this.fb.control(null, Validators.required),
-        });
-        this.communicationMessages$ = this.messageService.communicationMessages$;
-        this.latestCommunicationMessages$ = this.messageService.latestCommunicationMessages$;
-        this.chat$ = combineLatest([this.user$, this.communicationMessages$])
-            .pipe(map$1(([user, messages]) => ({ user, messages })), map$1(obj => {
-            if (!obj.user)
-                return EMPTY;
-            const mainUser = '';
-            const messages = obj.messages.map((item) => {
-                // Message transformation logic
-            });
-            return { user: mainUser, messages };
-        }));
-    }
-    get selectedChannels() {
-        return this.messages.get('selectedChannels');
-    }
-    get content() {
-        return this.messages.get('content');
-    }
-    ngOnInit() {
-        this.stateService.updateConnection(this.server, this.wsServer, this.jwtToken, this.user, this.path);
-        // Only trigger once when connection becomes true
-        this.connectionStatus$.pipe(filter$1(status => status === true), take$1(1), takeUntil$1(this.destroy$)).subscribe(() => {
-            // Wait a moment for subscription to be processed, then fetch channels
-            setTimeout(() => {
-                console.log('📋 Fetching channels after connection...');
-                this.messageService.getAllChannels();
-            }, 500); // 500ms delay to ensure subscription is processed
-        });
-        // Subscribe to latest messages and display using rule-based routing
-        this.latestCommunicationMessages$.pipe(filter$1(message => !!message), takeUntil$1(this.destroy$)).subscribe((message) => {
-            console.log('🔔 Message received, routing to display:', message);
-            // NEW: Delegate to MessageDisplayRouterService
-            // The message payload determines the display type via rules
-            this.messageDisplayService.display(message);
-            // OLD: Hardcoded snackbar (removed)
-            // const messageContent = message.content?.content?.message || message.content?.message || '';
-            // this.toastService.toastMessage(...);
-        });
-    }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
-    /**
-     * Create a new public channel without auto-subscribing
-     * NOTE: PUB- prefix is added by messageService.createChannel
-     */
-    onCreateChannel() {
-        if (this.newChannelName.invalid)
-            return;
-        const channelName = this.newChannelName.value?.trim();
-        if (channelName) {
-            // Pass base channel name - service adds PUB- prefix
-            this.messageService.createChannel(channelName);
-            this.newChannelName.reset();
-            // Server will broadcast updated channel list to all clients automatically
-        }
-    }
-    /**
-     * Subscribe to a channel to receive messages
-     * NOTE: PUB- prefix is added by messageService.subscribeToChannel
-     */
-    onSubscribeToChannel(channel) {
-        // Pass base channel name - service adds PUB- prefix
-        this.messageService.subscribeToChannel(channel);
-        // Reset channel selection when subscriptions change
-        this.selectedChannels.reset([]);
-    }
-    /**
-     * Unsubscribe from a channel
-     * NOTE: PUB- prefix is added by messageService.unsubscribeFromChannel
-     */
-    onUnsubscribeFromChannel(channel) {
-        // Pass base channel name - service adds PUB- prefix
-        this.messageService.unsubscribeFromChannel(channel);
-        // Reset channel selection when subscriptions change
-        this.selectedChannels.reset([]);
-    }
-    /**
-     * Handle chip toggle for subscribe/unsubscribe
-     */
-    onChipToggle(event, channel) {
-        const isSelected = event.selected;
-        console.log('🎯 Chip toggle event:', {
-            channel,
-            isSelected,
-            option: event.source
-        });
-        if (isSelected) {
-            this.onSubscribeToChannel(channel);
-        }
-        else {
-            this.onUnsubscribeFromChannel(channel);
-        }
-    }
-    /**
-     * Check if currently subscribed to a channel
-     * Compares display names (without PUB- prefix)
-     */
-    isSubscribed(channel, subscribedChannels) {
-        return subscribedChannels.includes(channel);
-    }
-    onSendMessage() {
-        this.messages.markAllAsTouched();
-        if (this.messages.invalid)
-            return;
-        const channelsToSend = this.selectedChannels.value;
-        if (channelsToSend.length === 0)
-            return;
-        // Get user from observable - subscribe once
-        this.user$.pipe(take$1(1)).subscribe(user => {
-            if (!user) {
-                console.error('❌ No user found');
-                return;
-            }
-            // Pass base channel names - service adds PUB- prefix
-            const message = ChannelMessage.adapt({
-                sessionId: {
-                    id: user.id,
-                    ldap: user.ldap,
-                    name: user.name,
-                    email: user.email,
-                },
-                content: { message: this.messages.value.content },
-            });
-            this.messageService.sendMessage(message, channelsToSend);
-            this.content.reset();
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WsMessagingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: WsMessagingComponent, selector: "app-ws-messaging", inputs: { server: "server", wsServer: "wsServer", jwtToken: "jwtToken", user: "user", path: "path" }, ngImport: i0, template: "\n  @if ((data$ | async); as data) {\n  @if ((user$ | async); as user) {\n    <div style=\"display: flex; gap: 1rem; flex-direction: column; margin-top: 1rem;\">\n\n        <!-- Channel Creation Section -->\n        <div style=\"padding: 1rem; background: #e3f2fd; border-radius: 4px;\">\n          <strong>Create New Channel</strong>\n          <div style=\"display: flex; flex-direction: column; margin-top: 0.5rem;\">\n            <mat-form-field appearance=\"outline\" style=\"width: 100%;\">\n              <mat-label>Channel Name</mat-label>\n              <input matInput [formControl]=\"newChannelName\" placeholder=\"Enter channel name\"\n                     (keydown.enter)=\"onCreateChannel()\">\n            </mat-form-field>\n            <div style=\"display: flex; justify-content: flex-end; margin-top: -0.5rem;\">\n              <button mat-raised-button color=\"primary\" (click)=\"onCreateChannel()\"\n                      [disabled]=\"newChannelName.invalid\">\n                Create Channel\n              </button>\n            </div>\n          </div>\n        </div>\n\n        <!-- Messaging Section - only show when subscribed to channels -->\n        @if ((subscribedChannels$ | async); as subscribedChannels) {\n          @if (subscribedChannels.length > 0) {\n            <div style=\"padding: 1rem; background: #fff3e0; border-radius: 4px;\" [formGroup]=\"messages\">\n              <strong>Send Message</strong>\n              <!-- Debug: Show subscribed channels count -->\n              <div style=\"font-size: 0.8rem; color: #666; margin-bottom: 0.5rem;\">\n                Subscribed to {{ subscribedChannels.length }} channel(s): {{ subscribedChannels | json }}\n              </div>\n\n              <!-- Channel Selection with Checkboxes -->\n              <div style=\"margin-top: 0.5rem;\">\n                <mat-form-field appearance=\"outline\" style=\"width: 100%;\">\n                  <mat-label>Select Channels</mat-label>\n                  <mat-select formControlName=\"selectedChannels\" multiple>\n                    <mat-select-trigger>\n                      @if (selectedChannels.value?.length === 1) {\n                        {{ selectedChannels.value[0] }}\n                      } @else if (selectedChannels.value?.length > 1) {\n                        {{ selectedChannels.value[0] }} (+{{ selectedChannels.value.length - 1 }} {{ selectedChannels.value.length === 2 ? 'other' : 'others' }})\n                      }\n                    </mat-select-trigger>\n                    @for (channel of subscribedChannels; track channel; let i = $index) {\n                      <mat-option [value]=\"channel\">{{ channel }}</mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n              </div>\n\n              <!-- Message Input -->\n              <div style=\"display: flex; flex-direction: column;\">\n                <mat-form-field style=\"width: 100%;\" appearance=\"outline\">\n                  <mat-label>Message</mat-label>\n                  <textarea\n                    matInput placeholder=\"Type your message...\"\n                    formControlName=\"content\"\n                    (keydown.enter)=\"onSendMessage(); $event.preventDefault()\"\n                  ></textarea>\n                </mat-form-field>\n                <div style=\"display: flex; justify-content: flex-end; margin-top: -0.5rem;\">\n                  <button mat-raised-button color=\"primary\" (click)=\"onSendMessage()\"\n                          [disabled]=\"messages.invalid\">\n                    Send\n                  </button>\n                </div>\n              </div>\n            </div>\n          }\n        }\n\n    </div>\n  }\n  }\n\n  <!-- Channel List with Subscription Controls using Chips -->\n  @if ((channels$ | async); as channels) {\n    @if ((subscribedChannels$ | async); as subscribedChannels) {\n      <div style=\"padding: 1rem; background: #f5f5f5; border-radius: 4px; margin-top: 1rem;\">\n        <strong>Subscribe to Channel(s)</strong>\n        <div style=\"margin-top: 0.5rem;\">\n          @if (channels.length === 0) {\n            <div style=\"color: #666; font-style: italic;\">No channels available. Create one above.</div>\n          } @else {\n            <mat-chip-listbox\n              aria-label=\"Channel selection\"\n              [multiple]=\"true\">\n              @for (channel of channels; track channel; let i = $index) {\n                <mat-chip-option\n                  [selected]=\"isSubscribed(channel, subscribedChannels)\"\n                  (selectionChange)=\"onChipToggle($event, channel)\">\n                  {{ channel }}\n                </mat-chip-option>\n              }\n            </mat-chip-listbox>\n          }\n        </div>\n      </div>\n    }\n  }\n", styles: ["button[mat-raised-button],button[mat-stroked-button]{min-width:120px}mat-chip-option{min-width:120px;justify-content:center;border-radius:4px!important;padding:.25rem!important}\n"], dependencies: [{ 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: "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: "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: "directive", type: i5.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i3$1.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i3$1.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { 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" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WsMessagingComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-ws-messaging', standalone: false, template: "\n  @if ((data$ | async); as data) {\n  @if ((user$ | async); as user) {\n    <div style=\"display: flex; gap: 1rem; flex-direction: column; margin-top: 1rem;\">\n\n        <!-- Channel Creation Section -->\n        <div style=\"padding: 1rem; background: #e3f2fd; border-radius: 4px;\">\n          <strong>Create New Channel</strong>\n          <div style=\"display: flex; flex-direction: column; margin-top: 0.5rem;\">\n            <mat-form-field appearance=\"outline\" style=\"width: 100%;\">\n              <mat-label>Channel Name</mat-label>\n              <input matInput [formControl]=\"newChannelName\" placeholder=\"Enter channel name\"\n                     (keydown.enter)=\"onCreateChannel()\">\n            </mat-form-field>\n            <div style=\"display: flex; justify-content: flex-end; margin-top: -0.5rem;\">\n              <button mat-raised-button color=\"primary\" (click)=\"onCreateChannel()\"\n                      [disabled]=\"newChannelName.invalid\">\n                Create Channel\n              </button>\n            </div>\n          </div>\n        </div>\n\n        <!-- Messaging Section - only show when subscribed to channels -->\n        @if ((subscribedChannels$ | async); as subscribedChannels) {\n          @if (subscribedChannels.length > 0) {\n            <div style=\"padding: 1rem; background: #fff3e0; border-radius: 4px;\" [formGroup]=\"messages\">\n              <strong>Send Message</strong>\n              <!-- Debug: Show subscribed channels count -->\n              <div style=\"font-size: 0.8rem; color: #666; margin-bottom: 0.5rem;\">\n                Subscribed to {{ subscribedChannels.length }} channel(s): {{ subscribedChannels | json }}\n              </div>\n\n              <!-- Channel Selection with Checkboxes -->\n              <div style=\"margin-top: 0.5rem;\">\n                <mat-form-field appearance=\"outline\" style=\"width: 100%;\">\n                  <mat-label>Select Channels</mat-label>\n                  <mat-select formControlName=\"selectedChannels\" multiple>\n                    <mat-select-trigger>\n                      @if (selectedChannels.value?.length === 1) {\n                        {{ selectedChannels.value[0] }}\n                      } @else if (selectedChannels.value?.length > 1) {\n                        {{ selectedChannels.value[0] }} (+{{ selectedChannels.value.length - 1 }} {{ selectedChannels.value.length === 2 ? 'other' : 'others' }})\n                      }\n                    </mat-select-trigger>\n                    @for (channel of subscribedChannels; track channel; let i = $index) {\n                      <mat-option [value]=\"channel\">{{ channel }}</mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n              </div>\n\n              <!-- Message Input -->\n              <div style=\"display: flex; flex-direction: column;\">\n                <mat-form-field style=\"width: 100%;\" appearance=\"outline\">\n                  <mat-label>Message</mat-label>\n                  <textarea\n                    matInput placeholder=\"Type your message...\"\n                    formControlName=\"content\"\n                    (keydown.enter)=\"onSendMessage(); $event.preventDefault()\"\n                  ></textarea>\n                </mat-form-field>\n                <div style=\"display: flex; justify-content: flex-end; margin-top: -0.5rem;\">\n                  <button mat-raised-button color=\"primary\" (click)=\"onSendMessage()\"\n                          [disabled]=\"messages.invalid\">\n                    Send\n                  </button>\n                </div>\n              </div>\n            </div>\n          }\n        }\n\n    </div>\n  }\n  }\n\n  <!-- Channel List with Subscription Controls using Chips -->\n  @if ((channels$ | async); as channels) {\n    @if ((subscribedChannels$ | async); as subscribedChannels) {\n      <div style=\"padding: 1rem; background: #f5f5f5; border-radius: 4px; margin-top: 1rem;\">\n        <strong>Subscribe to Channel(s)</strong>\n        <div style=\"margin-top: 0.5rem;\">\n          @if (channels.length === 0) {\n            <div style=\"color: #666; font-style: italic;\">No channels available. Create one above.</div>\n          } @else {\n            <mat-chip-listbox\n              aria-label=\"Channel selection\"\n              [multiple]=\"true\">\n              @for (channel of channels; track channel; let i = $index) {\n                <mat-chip-option\n                  [selected]=\"isSubscribed(channel, subscribedChannels)\"\n                  (selectionChange)=\"onChipToggle($event, channel)\">\n                  {{ channel }}\n                </mat-chip-option>\n              }\n            </mat-chip-listbox>\n          }\n        </div>\n      </div>\n    }\n  }\n", styles: ["button[mat-raised-button],button[mat-stroked-button]{min-width:120px}mat-chip-option{min-width:120px;justify-content:center;border-radius:4px!important;padding:.25rem!important}\n"] }]
-        }], propDecorators: { server: [{
-                type: Input
-            }], wsServer: [{
-                type: Input
-            }], jwtToken: [{
-                type: Input
-            }], user: [{
-                type: Input
-            }], path: [{
-                type: Input
-            }] } });
-
-class WsNotificationsComponent {
-    constructor() {
-        this.destroy$ = new Subject();
-        this.fb = inject(FormBuilder);
-        this.notificationService = inject(NotificationServiceDemo);
-        this.stateService = inject(StateServiceDemo);
-        // Combine in-memory channels and today's DB channels, dedupe and strip prefix for display
-        this.todaysNotificationChannels$ = combineLatest([
-            this.notificationService.notificationChannels$.pipe(startWith$1([])),
-            this.notificationService.todaysNotificationChannels$.pipe(startWith$1([]))
-        ]).pipe(tap$1(([inMemory, fromDb]) => console.log('📢 In-memory channels:', inMemory, 'DB channels:', fromDb)), map$1(([inMemory, fromDb]) => {
-            // Merge both sources and dedupe
-            const allChannels = [...(inMemory || []), ...(fromDb || [])];
-            const uniqueChannels = [...new Set(allChannels)]
-                .filter(channel => channel.startsWith('MES-'))
-                .map(channel => channel.replace('MES-', ''));
-            return uniqueChannels.sort();
-        }), tap$1(channels => console.log('📢 Combined channels for display:', channels)), distinctUntilChanged$1((prev, curr) => prev.length === curr.length && prev.every((v, i) => v === curr[i])));
-        // Track subscribed notification channels, strip prefix for display
-        this.subscribedNotificationChannels$ = this.notificationService.subscribedNotificationChannels$.pipe(map$1(set => Array.from(set)
-            .filter(channel => channel.startsWith('MES-'))
-            .map(channel => channel.replace('MES-', ''))), startWith$1([]), distinctUntilChanged$1((prev, curr) => prev.length === curr.length && prev.every((v, i) => v === curr[i])));
-        // Notification messages
-        this.notificationMessages$ = this.notificationService.notificationMessages$;
-        this.connectionStatus$ = this.stateService.connectionStatus$;
-        // Form for creating new notification channels
-        this.newChannelName = this.fb.control('', [Validators.required, Validators.minLength(2)]);
-        // Channel connection selection
-        this.selectedConnectionChannel = this.fb.control(null);
-        this.connectedChannel = null;
-        // Table columns for notifications display
-        this.displayedColumns = ['date', 'user', 'message'];
-        // Form for date filter when subscribing
-        this.dateFilter = this.fb.group({
-            startDate: this.fb.control(null),
-            endDate: this.fb.control(null),
-        });
-        // Form for sending notifications
-        this.notificationForm = this.fb.group({
-            content: this.fb.control(null, Validators.required),
-        });
-    }
-    /**
-     * Helper to ensure channel has MES- prefix for outgoing communication
-     */
-    toNotificationChannel(channel) {
-        return channel.startsWith('MES-') ? channel : `MES-${channel}`;
-    }
-    get content() {
-        return this.notificationForm.get('content');
-    }
-    /**
-     * Check if currently connected to a channel
-     */
-    isChannelConnected(subscribedChannels) {
-        return this.connectedChannel !== null && subscribedChannels.includes(this.connectedChannel);
-    }
-    /**
-     * Connect to the selected channel
-     */
-    onConnectToChannel() {
-        const channel = this.selectedConnectionChannel.value;
-        if (!channel)
-            return;
-        this.connectedChannel = channel;
-        this.onSubscribeToChannel(channel);
-    }
-    /**
-     * Disconnect from the current channel
-     */
-    onDisconnectFromChannel() {
-        if (this.connectedChannel) {
-            this.onUnsubscribeFromChannel(this.connectedChannel);
-            this.connectedChannel = null;
-        }
-    }
-    ngOnInit() {
-        // Request today's notification channels when connection is established
-        this.connectionStatus$.pipe(filter$1(isConnected => isConnected), takeUntil$1(this.destroy$)).subscribe(() => {
-            // Request the list of today's notification channels from database
-            this.notificationService.getTodaysNotificationChannels();
-        });
-    }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
-    /**
-     * Create a new notification channel
-     */
-    onCreateChannel() {
-        if (this.newChannelName.invalid)
-            return;
-        const channelName = this.newChannelName.value?.trim();
-        if (channelName) {
-            this.notificationService.createNotificationChannel(channelName);
-            this.newChannelName.reset();
-        }
-    }
-    /**
-     * Define and load previous channels
-     */
-    onDefinePreviousChannels() {
-        this.notificationService.definePreviousNotificationChannels();
-    }
-    /**
-     * Subscribe to a notification channel with optional date filter
-     */
-    onSubscribeToChannel(channel) {
-        const startDate = this.dateFilter.get('startDate')?.value;
-        const endDate = this.dateFilter.get('endDate')?.value;
-        const options = {};
-        if (startDate) {
-            // Set to start of day
-            const startOfDay = new Date(startDate);
-            startOfDay.setHours(0, 0, 0, 0);
-            options.startEpoch = Math.floor(startOfDay.getTime() / 1000);
-        }
-        if (endDate) {
-            // Set to end of day
-            const endOfDay = new Date(endDate);
-            endOfDay.setHours(23, 59, 59, 999);
-            options.endEpoch = Math.floor(endOfDay.getTime() / 1000);
-        }
-        this.notificationService.subscribeToNotificationChannel(channel, options, this.user);
-    }
-    /**
-     * Unsubscribe from a notification channel
-     */
-    onUnsubscribeFromChannel(channel) {
-        this.notificationService.unsubscribeFromNotificationChannel(channel);
-    }
-    /**
-     * Check if currently subscribed to a channel
-     */
-    isSubscribed(channel, subscribedChannels) {
-        return subscribedChannels.includes(channel);
-    }
-    /**
-     * Handle chip click - toggle subscription state
-     */
-    onChipClick(channel, subscribedChannels) {
-        const isCurrentlySubscribed = this.isSubscribed(channel, subscribedChannels);
-        if (isCurrentlySubscribed) {
-            this.onUnsubscribeFromChannel(channel);
-        }
-        else {
-            this.onSubscribeToChannel(channel);
-        }
-    }
-    /**
-     * Send a notification
-     */
-    onSendNotification() {
-        this.notificationForm.markAllAsTouched();
-        if (this.notificationForm.invalid)
-            return;
-        const channel = this.connectedChannel;
-        if (!channel)
-            return;
-        const messageContent = {
-            message: this.content.value
-        };
-        this.notificationService.sendNotification(channel, messageContent, this.user);
-        this.content.reset();
-    }
-    /**
-     * Format epoch timestamp to readable date/time
-     */
-    formatTimestamp(epoch) {
-        return new Date(epoch * 1000).toLocaleString();
-    }
-    /**
-     * Get today's date in YYYY-MM-DD format for date input default
-     */
-    getTodayDate() {
-        return new Date().toISOString().split('T')[0];
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WsNotificationsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: WsNotificationsComponent, selector: "app-ws-notifications", inputs: { server: "server", wsServer: "wsServer", jwtToken: "jwtToken", user: "user" }, ngImport: i0, template: "<div style=\"display: flex; gap: 1rem; flex-direction: column; margin-top: 1rem;\">\n\n  <!-- Channel Creation Section -->\n  <div style=\"padding: 1rem; background: #e8f5e9; border-radius: 4px;\">\n    <strong>Create Notification Channel</strong>\n    <div style=\"display: flex; flex-direction: column; margin-top: 0.5rem;\">\n      <mat-form-field appearance=\"outline\" style=\"width: 100%;\">\n        <mat-label>Channel Name</mat-label>\n        <input\n          matInput\n          [formControl]=\"newChannelName\"\n          placeholder=\"Enter notification channel name\"\n          (keydown.enter)=\"onCreateChannel()\"\n        >\n      </mat-form-field>\n      <div style=\"display: flex; justify-content: flex-end; gap: 0.5rem;\">\n        <!-- <button mat-raised-button color=\"accent\" (click)=\"onDefinePreviousChannels()\">\n          Define Previous Channels\n        </button> -->\n        <button mat-raised-button color=\"primary\" (click)=\"onCreateChannel()\"\n                [disabled]=\"newChannelName.invalid\">\n          Create Channel 1\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Channel Connection Section - Only shown when NOT connected -->\n  @if ((subscribedNotificationChannels$ | async); as subscribedChannels) {\n    @if (!isChannelConnected(subscribedChannels)) {\n      <div style=\"padding: 1rem; background: #e3f2fd; border-radius: 4px;\">\n        <strong>Connect to Channel</strong>\n        <div style=\"display: flex; gap: 1rem; margin-top: 0.5rem; flex-wrap: wrap; align-items: flex-start;\">\n          <!-- Channel Selection (from today's DB data) -->\n          <mat-form-field appearance=\"outline\" style=\"flex: 1; min-width: 200px;\">\n            <mat-label>Select Channel</mat-label>\n            <mat-select [formControl]=\"selectedConnectionChannel\" placeholder=\"Select a notification channel\">\n              @for (channel of (todaysNotificationChannels$ | async) || []; track channel) {\n                <mat-option [value]=\"channel\">{{ channel }}</mat-option>\n              }\n              @empty {\n                <mat-option disabled>No channels with data for today</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n\n          <!-- Date Filter -->\n          <mat-form-field appearance=\"outline\" style=\"flex: 1; min-width: 200px;\" [formGroup]=\"dateFilter\">\n            <mat-label>Start Date</mat-label>\n            <input matInput [matDatepicker]=\"startPicker\" formControlName=\"startDate\">\n            <mat-datepicker-toggle matIconSuffix [for]=\"startPicker\"></mat-datepicker-toggle>\n            <mat-datepicker #startPicker></mat-datepicker>\n          </mat-form-field>\n\n          <mat-form-field appearance=\"outline\" style=\"flex: 1; min-width: 200px;\" [formGroup]=\"dateFilter\">\n            <mat-label>End Date</mat-label>\n            <input matInput [matDatepicker]=\"endPicker\" formControlName=\"endDate\">\n            <mat-datepicker-toggle matIconSuffix [for]=\"endPicker\"></mat-datepicker-toggle>\n            <mat-datepicker #endPicker></mat-datepicker>\n          </mat-form-field>\n        </div>\n\n        <div style=\"display: flex; gap: 0.5rem;\">\n          <span style=\"flex:1\"></span>\n          <button\n            mat-raised-button color=\"primary\"\n            (click)=\"onConnectToChannel()\"\n            [disabled]=\"!selectedConnectionChannel.value\"\n          >\n            Connect\n          </button>\n        </div>\n      </div>\n    }\n  }\n\n  <!-- Send Notification Section -->\n  @if ((subscribedNotificationChannels$ | async); as subscribedChannels) {\n    @if (subscribedChannels.length > 0) {\n      <div\n        style=\"padding: 1rem; background: #fff8e1; border-radius: 4px;\"\n        [formGroup]=\"notificationForm\"\n      >\n        <strong>Send Notification</strong>\n\n        <!-- Notification Content -->\n        <div style=\"display: flex; flex-direction: column; margin-top: 0.5rem;\">\n          <mat-form-field style=\"width: 100%;\" appearance=\"outline\">\n            <mat-label>Notification Message</mat-label>\n            <textarea\n              matInput placeholder=\"Type your notification...\"\n              formControlName=\"content\"\n              rows=\"2\"\n              (keydown.enter)=\"onSendNotification(); $event.preventDefault()\"\n            ></textarea>\n          </mat-form-field>\n          <div style=\"display: flex; justify-content: flex-end; margin-top: -0.5rem;\">\n            <button\n              mat-raised-button color=\"accent\"\n              (click)=\"onSendNotification()\"\n              [disabled]=\"notificationForm.invalid\"\n            >\n              Send Notification\n            </button>\n          </div>\n        </div>\n      </div>\n    }\n  }\n\n  <!-- Notifications Table - Only shown when connected -->\n  @if ((subscribedNotificationChannels$ | async); as subscribedChannels) {\n    @if (isChannelConnected(subscribedChannels)) {\n      @if ((notificationMessages$ | async); as notifications) {\n        <div>\n          <div style=\"display: flex; justify-content: space-between; align-items: center;\">\n            <strong>Notifications ({{ notifications.length }})</strong>\n          </div>\n\n          @if (notifications.length > 0) {\n            <div style=\"margin-top: 0.5rem; height: 400px; overflow: auto; border: 1px solid #888; border-radius: 4px;\">\n              <table mat-table [dataSource]=\"notifications\" style=\"width: 100%;\">\n\n                <!-- Date Column -->\n                <ng-container matColumnDef=\"date\">\n                  <th mat-header-cell *matHeaderCellDef style=\"width: 180px;\">Date</th>\n                  <td mat-cell *matCellDef=\"let notification\">\n                    {{ formatTimestamp(notification.created) | date }}\n                  </td>\n                </ng-container>\n\n                <!-- User Column -->\n                <ng-container matColumnDef=\"user\">\n                  <th mat-header-cell *matHeaderCellDef style=\"width: 150px;\">User</th>\n                  <td mat-cell *matCellDef=\"let notification\">\n                    <strong>{{ notification.user_name }}</strong>\n                  </td>\n                </ng-container>\n\n                <!-- Message Column -->\n                <ng-container matColumnDef=\"message\">\n                  <th mat-header-cell *matHeaderCellDef>Message</th>\n                  <td mat-cell *matCellDef=\"let notification\">\n                  <div class=\"pill\" [style.background-color]=\"notification.content.sessionId.color || '#000000'\">\n                    {{ notification.content?.message || notification.content }}\n                  </div>\n                  </td>\n                </ng-container>\n\n                <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n                <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n              </table>\n            </div>\n          } @else {\n            <div style=\"text-align: center; color: #666; padding: 2rem;\">\n              <mat-icon style=\"font-size: 48px; height: 48px; width: 48px; opacity: 0.5;\">notifications_none</mat-icon>\n              <p>No notifications yet. Waiting for notifications on this channel...</p>\n            </div>\n          }\n        </div>\n\n        <!-- Disconnect Button - Below the table -->\n        <div style=\"display: flex; justify-content: right; padding: 1rem;\">\n          <button mat-raised-button color=\"warn\" (click)=\"onDisconnectFromChannel()\">\n            Disconnect from Channel\n          </button>\n        </div>\n      }\n    }\n  }\n\n</div>\n", styles: [".colored-message{font-weight:500;padding:4px 8px;border-radius:4px;display:inline-block;max-width:100%;word-wrap:break-word}.colored-message.black-text{color:#000!important}.colored-message.white-text{color:#fff!important;text-shadow:0 0 2px rgba(0,0,0,.5)}td.mat-mdc-cell{padding:8px 12px}.pill{border-radius:1rem;padding:.5rem 1rem;color:#fff}\n"], dependencies: [{ 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: "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.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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: 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: "directive", type: i13.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i9$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i9$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i9$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WsNotificationsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-ws-notifications', standalone: false, template: "<div style=\"display: flex; gap: 1rem; flex-direction: column; margin-top: 1rem;\">\n\n  <!-- Channel Creation Section -->\n  <div style=\"padding: 1rem; background: #e8f5e9; border-radius: 4px;\">\n    <strong>Create Notification Channel</strong>\n    <div style=\"display: flex; flex-direction: column; margin-top: 0.5rem;\">\n      <mat-form-field appearance=\"outline\" style=\"width: 100%;\">\n        <mat-label>Channel Name</mat-label>\n        <input\n          matInput\n          [formControl]=\"newChannelName\"\n          placeholder=\"Enter notification channel name\"\n          (keydown.enter)=\"onCreateChannel()\"\n        >\n      </mat-form-field>\n      <div style=\"display: flex; justify-content: flex-end; gap: 0.5rem;\">\n        <!-- <button mat-raised-button color=\"accent\" (click)=\"onDefinePreviousChannels()\">\n          Define Previous Channels\n        </button> -->\n        <button mat-raised-button color=\"primary\" (click)=\"onCreateChannel()\"\n                [disabled]=\"newChannelName.invalid\">\n          Create Channel 1\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Channel Connection Section - Only shown when NOT connected -->\n  @if ((subscribedNotificationChannels$ | async); as subscribedChannels) {\n    @if (!isChannelConnected(subscribedChannels)) {\n      <div style=\"padding: 1rem; background: #e3f2fd; border-radius: 4px;\">\n        <strong>Connect to Channel</strong>\n        <div style=\"display: flex; gap: 1rem; margin-top: 0.5rem; flex-wrap: wrap; align-items: flex-start;\">\n          <!-- Channel Selection (from today's DB data) -->\n          <mat-form-field appearance=\"outline\" style=\"flex: 1; min-width: 200px;\">\n            <mat-label>Select Channel</mat-label>\n            <mat-select [formControl]=\"selectedConnectionChannel\" placeholder=\"Select a notification channel\">\n              @for (channel of (todaysNotificationChannels$ | async) || []; track channel) {\n                <mat-option [value]=\"channel\">{{ channel }}</mat-option>\n              }\n              @empty {\n                <mat-option disabled>No channels with data for today</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n\n          <!-- Date Filter -->\n          <mat-form-field appearance=\"outline\" style=\"flex: 1; min-width: 200px;\" [formGroup]=\"dateFilter\">\n            <mat-label>Start Date</mat-label>\n            <input matInput [matDatepicker]=\"startPicker\" formControlName=\"startDate\">\n            <mat-datepicker-toggle matIconSuffix [for]=\"startPicker\"></mat-datepicker-toggle>\n            <mat-datepicker #startPicker></mat-datepicker>\n          </mat-form-field>\n\n          <mat-form-field appearance=\"outline\" style=\"flex: 1; min-width: 200px;\" [formGroup]=\"dateFilter\">\n            <mat-label>End Date</mat-label>\n            <input matInput [matDatepicker]=\"endPicker\" formControlName=\"endDate\">\n            <mat-datepicker-toggle matIconSuffix [for]=\"endPicker\"></mat-datepicker-toggle>\n            <mat-datepicker #endPicker></mat-datepicker>\n          </mat-form-field>\n        </div>\n\n        <div style=\"display: flex; gap: 0.5rem;\">\n          <span style=\"flex:1\"></span>\n          <button\n            mat-raised-button color=\"primary\"\n            (click)=\"onConnectToChannel()\"\n            [disabled]=\"!selectedConnectionChannel.value\"\n          >\n            Connect\n          </button>\n        </div>\n      </div>\n    }\n  }\n\n  <!-- Send Notification Section -->\n  @if ((subscribedNotificationChannels$ | async); as subscribedChannels) {\n    @if (subscribedChannels.length > 0) {\n      <div\n        style=\"padding: 1rem; background: #fff8e1; border-radius: 4px;\"\n        [formGroup]=\"notificationForm\"\n      >\n        <strong>Send Notification</strong>\n\n        <!-- Notification Content -->\n        <div style=\"display: flex; flex-direction: column; margin-top: 0.5rem;\">\n          <mat-form-field style=\"width: 100%;\" appearance=\"outline\">\n            <mat-label>Notification Message</mat-label>\n            <textarea\n              matInput placeholder=\"Type your notification...\"\n              formControlName=\"content\"\n              rows=\"2\"\n              (keydown.enter)=\"onSendNotification(); $event.preventDefault()\"\n            ></textarea>\n          </mat-form-field>\n          <div style=\"display: flex; justify-content: flex-end; margin-top: -0.5rem;\">\n            <button\n              mat-raised-button color=\"accent\"\n              (click)=\"onSendNotification()\"\n              [disabled]=\"notificationForm.invalid\"\n            >\n              Send Notification\n            </button>\n          </div>\n        </div>\n      </div>\n    }\n  }\n\n  <!-- Notifications Table - Only shown when connected -->\n  @if ((subscribedNotificationChannels$ | async); as subscribedChannels) {\n    @if (isChannelConnected(subscribedChannels)) {\n      @if ((notificationMessages$ | async); as notifications) {\n        <div>\n          <div style=\"display: flex; justify-content: space-between; align-items: center;\">\n            <strong>Notifications ({{ notifications.length }})</strong>\n          </div>\n\n          @if (notifications.length > 0) {\n            <div style=\"margin-top: 0.5rem; height: 400px; overflow: auto; border: 1px solid #888; border-radius: 4px;\">\n              <table mat-table [dataSource]=\"notifications\" style=\"width: 100%;\">\n\n                <!-- Date Column -->\n                <ng-container matColumnDef=\"date\">\n                  <th mat-header-cell *matHeaderCellDef style=\"width: 180px;\">Date</th>\n                  <td mat-cell *matCellDef=\"let notification\">\n                    {{ formatTimestamp(notification.created) | date }}\n                  </td>\n                </ng-container>\n\n                <!-- User Column -->\n                <ng-container matColumnDef=\"user\">\n                  <th mat-header-cell *matHeaderCellDef style=\"width: 150px;\">User</th>\n                  <td mat-cell *matCellDef=\"let notification\">\n                    <strong>{{ notification.user_name }}</strong>\n                  </td>\n                </ng-container>\n\n                <!-- Message Column -->\n                <ng-container matColumnDef=\"message\">\n                  <th mat-header-cell *matHeaderCellDef>Message</th>\n                  <td mat-cell *matCellDef=\"let notification\">\n                  <div class=\"pill\" [style.background-color]=\"notification.content.sessionId.color || '#000000'\">\n                    {{ notification.content?.message || notification.content }}\n                  </div>\n                  </td>\n                </ng-container>\n\n                <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n                <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n              </table>\n            </div>\n          } @else {\n            <div style=\"text-align: center; color: #666; padding: 2rem;\">\n              <mat-icon style=\"font-size: 48px; height: 48px; width: 48px; opacity: 0.5;\">notifications_none</mat-icon>\n              <p>No notifications yet. Waiting for notifications on this channel...</p>\n            </div>\n          }\n        </div>\n\n        <!-- Disconnect Button - Below the table -->\n        <div style=\"display: flex; justify-content: right; padding: 1rem;\">\n          <button mat-raised-button color=\"warn\" (click)=\"onDisconnectFromChannel()\">\n            Disconnect from Channel\n          </button>\n        </div>\n      }\n    }\n  }\n\n</div>\n", styles: [".colored-message{font-weight:500;padding:4px 8px;border-radius:4px;display:inline-block;max-width:100%;word-wrap:break-word}.colored-message.black-text{color:#000!important}.colored-message.white-text{color:#fff!important;text-shadow:0 0 2px rgba(0,0,0,.5)}td.mat-mdc-cell{padding:8px 12px}.pill{border-radius:1rem;padding:.5rem 1rem;color:#fff}\n"] }]
-        }], propDecorators: { server: [{
-                type: Input
-            }], wsServer: [{
-                type: Input
-            }], jwtToken: [{
-                type: Input
-            }], user: [{
-                type: Input
-            }] } });
-
-class WsAiMessagingComponent {
-    constructor() { }
-    ngOnInit() {
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WsAiMessagingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: WsAiMessagingComponent, selector: "app-ws-ai-messaging", ngImport: i0, template: "<p>\n  ws-ai-messaging coming soon!\n</p>\n", styles: [""] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WsAiMessagingComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-ws-ai-messaging', standalone: false, template: "<p>\n  ws-ai-messaging coming soon!\n</p>\n" }]
-        }], ctorParameters: () => [] });
-
-class WsChatsComponent {
-    constructor() { }
-    ngOnInit() {
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WsChatsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: WsChatsComponent, selector: "app-ws-chats", ngImport: i0, template: "<p>\n  ws-chats coming soon!\n</p>\n", styles: [""] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WsChatsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-ws-chats', standalone: false, template: "<p>\n  ws-chats coming soon!\n</p>\n" }]
-        }], ctorParameters: () => [] });
-
-class RequestManagerWsDemoComponent {
-    constructor() {
-        this.httpManagerService = inject(HTTPManagerService);
-        this.stateService = inject(StateServiceDemo);
-        this.fb = inject(FormBuilder);
-        this.path = ['ai', 'tests'];
-        this.user$ = this.stateService.user$;
-        this.attempts$ = this.stateService.wsRetryAttempts$;
-        this.nextRetry$ = this.stateService.wsNextRetry$;
-        this.connectionStatus$ = this.stateService.connectionStatus$;
-        this.data$ = this.stateService.data$;
-        this.isPending$ = this.stateService.isPending$;
-    }
-    ngOnInit() {
-        this.stateService.updateConnection(this.server, this.wsServer, this.jwtToken, this.user, this.path);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RequestManagerWsDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: RequestManagerWsDemoComponent, selector: "app-request-manager-ws-demo", inputs: { server: "server", wsServer: "wsServer", jwtToken: "jwtToken", user: "user", path: "path" }, ngImport: i0, template: "<div style=\"margin: 2rem;\">\n\n  <h2 style=\"display: flex;\">\n    <span style=\"flex:1\">HTTP Request State Manager - Websockets</span>\n    @if ((connectionStatus$ | async); as connected) {\n      <span>\n        WS -\n        <span style=\"color: green;\">Connected</span>\n      </span>\n    } @else {\n      <span style=\"color: red;\">Disconnected {{ attempts$ | async }} - {{ nextRetry$ |async }}</span>\n    }\n  </h2>\n\n  <div>\n\n    @if ((user$ | async); as userInfo) {\n      <div>\n        <mat-toolbar>\n          <div style=\"display: flex; flex:1\">\n            <div style=\"flex:1\">{{ userInfo.name }}</div>\n            <div>({{ userInfo.ldap }})</div>\n          </div>\n        </mat-toolbar>\n      </div>\n    }\n\n    @if ((isPending$ | async)) {\n      <div>\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n      </div>\n    }\n\n    <mat-tab-group animationDuration=\"0ms\" [selectedIndex]=\"1\">\n\n      <mat-tab label=\"WS - Data Control\">\n        <!-- DATA CONTROL -->\n        <app-ws-data-control\n          [server]=\"server\"\n          [wsServer]=\"wsServer\"\n          [jwtToken]=\"jwtToken\"\n          [user]=\"user\"\n          [path]=\"path\"\n        ></app-ws-data-control>\n\n      </mat-tab>\n\n      <mat-tab label=\"WS - Messaging\">\n        <!-- MESSAGING -->\n        <app-ws-messaging\n          [server]=\"server\"\n          [wsServer]=\"wsServer\"\n          [jwtToken]=\"jwtToken\"\n          [user]=\"user\"\n          [path]=\"path\"\n        ></app-ws-messaging>\n\n    </mat-tab>\n\n    <mat-tab label=\"WS - Notifications\">\n      <!-- WS - Notifications -->\n      <app-ws-notifications\n        [server]=\"server\"\n        [wsServer]=\"wsServer\"\n        [jwtToken]=\"jwtToken\"\n        [user]=\"user\"\n      ></app-ws-notifications>\n    </mat-tab>\n\n    <mat-tab label=\"WS - Chats\" [disabled]=\"true\">\n      <!-- WS - Chats -->\n      <app-ws-chats></app-ws-chats>\n    </mat-tab>\n\n    <mat-tab label=\"WS - AI Messaging\" [disabled]=\"true\">\n      <!-- WS - AI Messaging -->\n      <app-ws-ai-messaging></app-ws-ai-messaging>\n    </mat-tab>\n\n  </mat-tab-group>\n</div>\n\n</div>\n\n", styles: [""], dependencies: [{ kind: "component", type: i1$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i1$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: i8$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i3$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: WsDataControlComponent, selector: "app-ws-data-control", inputs: ["server", "wsServer", "jwtToken", "user", "path"] }, { kind: "component", type: WsMessagingComponent, selector: "app-ws-messaging", inputs: ["server", "wsServer", "jwtToken", "user", "path"] }, { kind: "component", type: WsNotificationsComponent, selector: "app-ws-notifications", inputs: ["server", "wsServer", "jwtToken", "user"] }, { kind: "component", type: WsAiMessagingComponent, selector: "app-ws-ai-messaging" }, { kind: "component", type: WsChatsComponent, selector: "app-ws-chats" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RequestManagerWsDemoComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-request-manager-ws-demo', standalone: false, template: "<div style=\"margin: 2rem;\">\n\n  <h2 style=\"display: flex;\">\n    <span style=\"flex:1\">HTTP Request State Manager - Websockets</span>\n    @if ((connectionStatus$ | async); as connected) {\n      <span>\n        WS -\n        <span style=\"color: green;\">Connected</span>\n      </span>\n    } @else {\n      <span style=\"color: red;\">Disconnected {{ attempts$ | async }} - {{ nextRetry$ |async }}</span>\n    }\n  </h2>\n\n  <div>\n\n    @if ((user$ | async); as userInfo) {\n      <div>\n        <mat-toolbar>\n          <div style=\"display: flex; flex:1\">\n            <div style=\"flex:1\">{{ userInfo.name }}</div>\n            <div>({{ userInfo.ldap }})</div>\n          </div>\n        </mat-toolbar>\n      </div>\n    }\n\n    @if ((isPending$ | async)) {\n      <div>\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n      </div>\n    }\n\n    <mat-tab-group animationDuration=\"0ms\" [selectedIndex]=\"1\">\n\n      <mat-tab label=\"WS - Data Control\">\n        <!-- DATA CONTROL -->\n        <app-ws-data-control\n          [server]=\"server\"\n          [wsServer]=\"wsServer\"\n          [jwtToken]=\"jwtToken\"\n          [user]=\"user\"\n          [path]=\"path\"\n        ></app-ws-data-control>\n\n      </mat-tab>\n\n      <mat-tab label=\"WS - Messaging\">\n        <!-- MESSAGING -->\n        <app-ws-messaging\n          [server]=\"server\"\n          [wsServer]=\"wsServer\"\n          [jwtToken]=\"jwtToken\"\n          [user]=\"user\"\n          [path]=\"path\"\n        ></app-ws-messaging>\n\n    </mat-tab>\n\n    <mat-tab label=\"WS - Notifications\">\n      <!-- WS - Notifications -->\n      <app-ws-notifications\n        [server]=\"server\"\n        [wsServer]=\"wsServer\"\n        [jwtToken]=\"jwtToken\"\n        [user]=\"user\"\n      ></app-ws-notifications>\n    </mat-tab>\n\n    <mat-tab label=\"WS - Chats\" [disabled]=\"true\">\n      <!-- WS - Chats -->\n      <app-ws-chats></app-ws-chats>\n    </mat-tab>\n\n    <mat-tab label=\"WS - AI Messaging\" [disabled]=\"true\">\n      <!-- WS - AI Messaging -->\n      <app-ws-ai-messaging></app-ws-ai-messaging>\n    </mat-tab>\n\n  </mat-tab-group>\n</div>\n\n</div>\n\n" }]
-        }], propDecorators: { server: [{
-                type: Input
-            }], wsServer: [{
-                type: Input
-            }], jwtToken: [{
-                type: Input
-            }], user: [{
-                type: Input
-            }], path: [{
-                type: Input
-            }] } });
-
-class Settings {
-    constructor(enum_1 = [], enum_2 = [], enum_3 = [], enum_4 = []) {
-        this.enum_1 = enum_1;
-        this.enum_2 = enum_2;
-        this.enum_3 = enum_3;
-        this.enum_4 = enum_4;
-    }
-    static adapt(item) {
-        return new Settings(item?.enum_1, item?.enum_2, item?.enum_3, item?.enum_4);
-    }
-}
-
-class SettingsStateService extends StoreStateManagerService {
-    constructor() {
-        super(StateStorageOptions.adapt({
-            store: 'sampleStore',
-            options: SettingOptions.adapt({
-                storage: StorageType.SESSION,
-                encrypted: false
-            }),
-            model: Settings.adapt,
-        }));
-    }
-    updateEnum_1(value) {
-        this.updateData(value);
-    }
-    updateEnum_2(value) {
-        this.updateData(value);
-    }
-    getEnum(key) {
-        return this.data$.pipe(map$1(item => item[key]));
-    }
-    getEnum_1() {
-        return this.data$.pipe(map$1(item => item?.enum_1));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SettingsStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SettingsStateService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SettingsStateService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [] });
-
-class StoreStateManagerDemoComponent {
-    constructor() {
-        this.settingsStateService = inject(SettingsStateService);
-        this.dataState$ = this.settingsStateService.data$;
-        this.dataEnum$ = this.settingsStateService.getEnum_1();
-    }
-    ngOnInit() {
-    }
-    onUpdateEnum_1() {
-        const rnd = RandomNumber(1000, 9999);
-        this.settingsStateService.updateEnum_1({ enum_1: [{ users: [1, 2, 3, rnd], random: rnd }] });
-    }
-    onUpdateEnum_2() {
-        const rnd = RandomNumber(1000, 9999);
-        this.settingsStateService.updateEnum_2({ enum_2: [{ users: [1, 2, 3, rnd], random: rnd }] });
-    }
-    onGetEnum_1() {
-        this.settingsStateService.getEnum_1().subscribe(data => console.log('DUMP:', data));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StoreStateManagerDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: StoreStateManagerDemoComponent, selector: "app-store-state-manager-demo", providers: [SettingsStateService], ngImport: i0, template: "<div style=\"margin: 2rem;\">\n\n  <h2>\n    <span>Store State Manager</span>\n    <span style=\"margin-left: .5rem;\">\n      <mat-icon color=\"accent\">fiber_new</mat-icon>\n    </span>\n  </h2>\n\n  {{ dataState$ | async | json}}\n\n  <div style=\"display: flex; gap:.5rem; margin-top: 1rem; margin-bottom: 1rem;\">\n    <button mat-stroked-button (click)=\"onUpdateEnum_1()\">Update Start</button>\n    <button mat-stroked-button (click)=\"onUpdateEnum_2()\">Update End</button>\n    <button mat-stroked-button (click)=\"onGetEnum_1()\">Dump</button>\n  </div>\n\n  <div>\n    <h3 style=\"margin: 0;\">Enum 1</h3>\n    {{ dataEnum$ | async | json}}\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: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StoreStateManagerDemoComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-store-state-manager-demo', providers: [SettingsStateService], standalone: false, template: "<div style=\"margin: 2rem;\">\n\n  <h2>\n    <span>Store State Manager</span>\n    <span style=\"margin-left: .5rem;\">\n      <mat-icon color=\"accent\">fiber_new</mat-icon>\n    </span>\n  </h2>\n\n  {{ dataState$ | async | json}}\n\n  <div style=\"display: flex; gap:.5rem; margin-top: 1rem; margin-bottom: 1rem;\">\n    <button mat-stroked-button (click)=\"onUpdateEnum_1()\">Update Start</button>\n    <button mat-stroked-button (click)=\"onUpdateEnum_2()\">Update End</button>\n    <button mat-stroked-button (click)=\"onGetEnum_1()\">Dump</button>\n  </div>\n\n  <div>\n    <h3 style=\"margin: 0;\">Enum 1</h3>\n    {{ dataEnum$ | async | json}}\n  </div>\n\n</div>\n" }]
-        }] });
-
-class DatabaseDataDemoComponent {
-    constructor() {
-        this.db = inject(DatabaseManagerService);
-        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'];
-    }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
-    addData() {
-        const newRecord = {
-            id: Math.max(...this.dataToDisplay.map(r => r.id), 0) + 1,
-            last_name: this.names[Math.floor(Math.random() * this.names.length)],
-            age: Math.floor(Math.random() * 80) + 18,
-            amount: Math.floor(Math.random() * 1000)
-        };
-        this.dataToDisplay = [...this.dataToDisplay, newRecord];
-        this.db.createTableRecord('sample_table', newRecord).subscribe(() => this.refreshData());
-    }
-    removeData() {
-        if (this.dataToDisplay.length > 0) {
-            const removedRecord = this.dataToDisplay[this.dataToDisplay.length - 1];
-            this.dataToDisplay = this.dataToDisplay.slice(0, -1);
-            this.db.deleteTableRecord('sample_table', removedRecord.id).subscribe(() => this.refreshData());
-        }
-    }
-    updateData() {
-        if (this.dataToDisplay.length === 0)
-            return;
-        const randomIndex = Math.floor(Math.random() * this.dataToDisplay.length);
-        const recordToUpdate = this.dataToDisplay[randomIndex];
-        const updatedRecord = {
-            ...recordToUpdate,
-            last_name: this.names[Math.floor(Math.random() * this.names.length)],
-            age: Math.floor(Math.random() * 80) + 18,
-            amount: Math.floor(Math.random() * 1000)
-        };
-        this.dataToDisplay = this.dataToDisplay.map((r, index) => index === randomIndex ? updatedRecord : r);
-        this.db.updateTableRecord('sample_table', updatedRecord).subscribe(() => this.refreshData());
-    }
-    clearAllData() {
-        if (this.dataToDisplay.length === 0)
-            return;
-        const idsToDelete = this.dataToDisplay.map(r => r.id);
-        this.dataToDisplay = [];
-        this.db.deleteTableRecords('sample_table', idsToDelete).subscribe(() => this.refreshData());
-    }
-    refreshData() {
-        this.db.getTableRecords('sample_table').subscribe((records) => {
-            this.dataToDisplay = records || [];
-            this.dataSource.setData(this.dataToDisplay);
-        });
-    }
-    ngOnInit() {
-        const tableDef = TableSchemaDef.adapt({
-            table: 'sample_table',
-            schema: '++id, last_name, age, amount'
-        });
-        this.db.createDatabaseTable(tableDef).subscribe(() => {
-            console.log('Database Table Initialized');
-            // hasTable
-            this.db.hasDatabaseTable('sample_table')
-                .subscribe(data => console.log('hasDatabaseTable:', data));
-            // Tables
-            this.db.getDatabaseTables()
-                .subscribe(data => console.log('getDatabaseTables:', data));
-            // getTable
-            this.db.getDatabaseTable('sample_table')
-                .subscribe(data => console.log('getDatabaseTable:', data));
-            // Table Schema
-            this.db.getDatabaseTableSchema('sample_table')
-                .subscribe(data => console.log('getDatabaseTableSchema:', data));
-            // Insert Table Records
-            const records = [
-                { id: 1, age: 12, last_name: 'Bonifacio', amount: 80 },
-                { id: 2, age: 15, last_name: 'Johns', amount: 700 },
-                { id: 3, age: 22, last_name: 'Kims', amount: 234 },
-                { id: 4, age: 45, last_name: 'Harrys', amount: 1200 },
-            ];
-            this.db.createTableRecords('sample_table', records).subscribe(() => {
-                this.refreshData();
-            });
-        });
-    }
-    createTable(tableDef) {
-        return this.db.createDatabaseTable(tableDef);
-    }
-    // CRUD
-    findTableRecords(table, column, value) {
-        return this.db.findTableRecords(table, column, value)
-            .pipe(tap((data) => console.log('findTableRecords:', data)));
-    }
-    findTableRecord(table, column, value) {
-        return this.db.findTableRecord(table, column, value)
-            .pipe(tap((data) => console.log('findTableRecord:', data)));
-    }
-    getTableRecords(table) {
-        return this.db.getTableRecords(table)
-            .pipe(tap((data) => console.log('getTableRecords:', data)));
-    }
-    getTableRecord(table, id) {
-        return this.db.getTableRecord(table, id)
-            .pipe(tap((data) => console.log('getTableRecord:', data)));
-    }
-    createTableRecord(table, record) {
-        return this.db.createTableRecord(table, record)
-            .pipe(tap((data) => console.log('createTableRecord:', data)));
-    }
-    updateTableRecord(table, record) {
-        return this.db.updateTableRecord(table, record)
-            .pipe(tap((data) => console.log('updateTableRecord:', data)));
-    }
-    deleteTableRecord(table, id) {
-        return this.db.deleteTableRecord(table, id)
-            .pipe(tap((data) => console.log('deleteTableRecord:', data)));
-    }
-    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" }] }); }
-}
-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" }]
-        }], ctorParameters: () => [] });
-class DatabaseDataSource extends DataSource {
-    constructor(initialData) {
-        super();
-        this._dataStream = new ReplaySubject();
-        this.setData(initialData);
-    }
-    connect() {
-        return this._dataStream;
-    }
-    disconnect() { }
-    setData(data) {
-        this._dataStream.next(data);
-    }
-}
-
-class HttpRequestServicesDemoComponent {
-    constructor(configOptions) {
-        this.configOptions = configOptions;
-        this.wsServer = 'ws:';
-        this.jwtToken = '';
-        this.server = 'http:';
-        this.path = ['ai', 'tests'];
-        this.requestTypes = [
-            { name: "Http Service", value: 'http_service' },
-            // { name: "Http Signals Service", value: 'http_signals_service', new: true },
-            { name: "Http State Service", value: 'http_state_service' },
-            { name: "Http State Service - Websockets", value: 'http_state_service_ws', new: false },
-            { name: "Database Service", value: 'database_service', divider: true, disabled: false },
-            { name: "Local Storage Service", value: 'local_storage_service' },
-            // { name: "Local Signals Storage Service", value: 'local_storage_signals_service', new: true },
-            { name: "Store State Manager Service", value: 'store_state_manager', new: true },
-            { name: "Basic Http Service", value: 'basic_http_service', divider: true },
-        ];
-        this.selectedService = this.requestTypes[1].value; //menu selection default
-    }
-    ngOnInit() {
-        if (this.configOptions)
-            this.injectionOptions = this.configOptions;
-    }
-    onSelected(type) {
-        this.selectedService = this.requestTypes[type].value;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HttpRequestServicesDemoComponent, deps: [{ token: CONFIG_SETTINGS_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: HttpRequestServicesDemoComponent, selector: "app-http-request-services-demo", inputs: { wsServer: "wsServer", jwtToken: "jwtToken", server: "server", user: "user", path: "path", adapter: "adapter", mapper: "mapper" }, ngImport: i0, template: "<mat-toolbar  style=\"display:flex\">\n  <div>Http Request Manager Services</div>\n  <div style=\"flex:1\"></div>\n  <button mat-stroked-button [matMenuTriggerFor]=\"menu\">Services</button>\n  <mat-menu #menu=\"matMenu\">\n    @for (type of requestTypes; track type; let i = $index) {\n      @if (type?.divider) {\n        <div\n          style=\"margin-top: .5rem; margin-bottom: .5rem;\"\n          >\n          <mat-divider></mat-divider>\n        </div>\n      }\n      <button\n        mat-menu-item\n        (click)=\"onSelected(i)\"\n        [disabled]=\"type.disabled\"\n        >\n        {{ type.name }}\n      </button>\n    }\n\n  </mat-menu>\n</mat-toolbar>\n\n<span>\n  @switch (selectedService) {\n    @case ('basic_http_service') {\n      <p>\n        <app-request-manager-basic-demo></app-request-manager-basic-demo>\n      </p>\n    }\n    @case ('http_service') {\n      <p>\n        <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n        <app-request-manager-demo\n          [server]=\"server\"\n          [adapter]=\"adapter\"\n          [mapper]=\"mapper\"\n        ></app-request-manager-demo>\n      </p>\n    }\n    <!-- <p *ngSwitchCase=\"'http_signals_service'\">\n    <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n    <app-request-signals-manager-demo></app-request-signals-manager-demo>\n  </p> -->\n  @case ('http_state_service') {\n    <p>\n      <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n      <app-request-manager-state-demo\n        [server]=\"server\"\n        [adapter]=\"adapter\"\n        [mapper]=\"mapper\"\n      ></app-request-manager-state-demo>\n    </p>\n  }\n  @case ('http_state_service_ws') {\n    <p>\n      <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n      <app-request-manager-ws-demo\n        [server]=\"server\"\n        [wsServer]=\"wsServer\"\n        [jwtToken]=\"jwtToken\"\n        [user]=\"user\"\n        [path]=\"path\"\n      ></app-request-manager-ws-demo>\n    </p>\n  }\n  @case ('database_service') {\n    <p>\n      <app-database-data-demo></app-database-data-demo>\n    </p>\n  }\n  @case ('local_storage_service') {\n    <p>\n      <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n      <app-local-storage-demo></app-local-storage-demo>\n    </p>\n  }\n  <!-- <p *ngSwitchCase=\"'local_storage_signals_service'\">\n  <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n  <app-local-storage-signals-demo></app-local-storage-signals-demo>\n</p> -->\n@case ('store_state_manager') {\n  <p>\n    <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n    <app-store-state-manager-demo></app-store-state-manager-demo>\n  </p>\n}\n@default {\n  <p>\n    Other\n  </p>\n}\n}\n</span>\n\n<ng-template #HTTP_OPTIONS>\n  @if (injectionOptions?.httpRequestOptions) {\n    <div class=\"box\">\n      <h3 style=\"font-weight: bold;\">Injection Token Detected - HTTP Options</h3>\n      {{ injectionOptions?.httpRequestOptions| json }}\n    </div>\n  }\n</ng-template>\n\n<ng-template #LOCAL_OPTIONS>\n  @if (injectionOptions?.LocalStorageOptions) {\n    <ng-container class=\"box\">\n      <div class=\"box\">\n        <h3 style=\"font-weight: bold;\">Injection Token Detected - LocalStorage Options</h3>\n        {{ injectionOptions?.LocalStorageOptions| json }}\n      </div>\n    </ng-container>\n  }\n</ng-template>\n\n\n", styles: [".box{padding:1rem;background-color:#f5f5f5;border:thin gray solid;margin-top:1rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: 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: i12.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i3$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: RequestManagerBasicDemoComponent, selector: "app-request-manager-basic-demo" }, { kind: "component", type: RequestManagerStateDemoComponent, selector: "app-request-manager-state-demo", inputs: ["server", "adapter", "mapper"] }, { kind: "component", type: RequestManagerDemoComponent, selector: "app-request-manager-demo", inputs: ["server", "adapter", "mapper"] }, { kind: "component", type: LocalStorageDemoComponent, selector: "app-local-storage-demo" }, { kind: "component", type: RequestManagerWsDemoComponent, selector: "app-request-manager-ws-demo", inputs: ["server", "wsServer", "jwtToken", "user", "path"] }, { kind: "component", type: StoreStateManagerDemoComponent, selector: "app-store-state-manager-demo" }, { kind: "component", type: DatabaseDataDemoComponent, selector: "app-database-data-demo" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HttpRequestServicesDemoComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-http-request-services-demo', standalone: false, template: "<mat-toolbar  style=\"display:flex\">\n  <div>Http Request Manager Services</div>\n  <div style=\"flex:1\"></div>\n  <button mat-stroked-button [matMenuTriggerFor]=\"menu\">Services</button>\n  <mat-menu #menu=\"matMenu\">\n    @for (type of requestTypes; track type; let i = $index) {\n      @if (type?.divider) {\n        <div\n          style=\"margin-top: .5rem; margin-bottom: .5rem;\"\n          >\n          <mat-divider></mat-divider>\n        </div>\n      }\n      <button\n        mat-menu-item\n        (click)=\"onSelected(i)\"\n        [disabled]=\"type.disabled\"\n        >\n        {{ type.name }}\n      </button>\n    }\n\n  </mat-menu>\n</mat-toolbar>\n\n<span>\n  @switch (selectedService) {\n    @case ('basic_http_service') {\n      <p>\n        <app-request-manager-basic-demo></app-request-manager-basic-demo>\n      </p>\n    }\n    @case ('http_service') {\n      <p>\n        <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n        <app-request-manager-demo\n          [server]=\"server\"\n          [adapter]=\"adapter\"\n          [mapper]=\"mapper\"\n        ></app-request-manager-demo>\n      </p>\n    }\n    <!-- <p *ngSwitchCase=\"'http_signals_service'\">\n    <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n    <app-request-signals-manager-demo></app-request-signals-manager-demo>\n  </p> -->\n  @case ('http_state_service') {\n    <p>\n      <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n      <app-request-manager-state-demo\n        [server]=\"server\"\n        [adapter]=\"adapter\"\n        [mapper]=\"mapper\"\n      ></app-request-manager-state-demo>\n    </p>\n  }\n  @case ('http_state_service_ws') {\n    <p>\n      <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n      <app-request-manager-ws-demo\n        [server]=\"server\"\n        [wsServer]=\"wsServer\"\n        [jwtToken]=\"jwtToken\"\n        [user]=\"user\"\n        [path]=\"path\"\n      ></app-request-manager-ws-demo>\n    </p>\n  }\n  @case ('database_service') {\n    <p>\n      <app-database-data-demo></app-database-data-demo>\n    </p>\n  }\n  @case ('local_storage_service') {\n    <p>\n      <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n      <app-local-storage-demo></app-local-storage-demo>\n    </p>\n  }\n  <!-- <p *ngSwitchCase=\"'local_storage_signals_service'\">\n  <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n  <app-local-storage-signals-demo></app-local-storage-signals-demo>\n</p> -->\n@case ('store_state_manager') {\n  <p>\n    <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n    <app-store-state-manager-demo></app-store-state-manager-demo>\n  </p>\n}\n@default {\n  <p>\n    Other\n  </p>\n}\n}\n</span>\n\n<ng-template #HTTP_OPTIONS>\n  @if (injectionOptions?.httpRequestOptions) {\n    <div class=\"box\">\n      <h3 style=\"font-weight: bold;\">Injection Token Detected - HTTP Options</h3>\n      {{ injectionOptions?.httpRequestOptions| json }}\n    </div>\n  }\n</ng-template>\n\n<ng-template #LOCAL_OPTIONS>\n  @if (injectionOptions?.LocalStorageOptions) {\n    <ng-container class=\"box\">\n      <div class=\"box\">\n        <h3 style=\"font-weight: bold;\">Injection Token Detected - LocalStorage Options</h3>\n        {{ injectionOptions?.LocalStorageOptions| json }}\n      </div>\n    </ng-container>\n  }\n</ng-template>\n\n\n", styles: [".box{padding:1rem;background-color:#f5f5f5;border:thin gray solid;margin-top:1rem}\n"] }]
-        }], ctorParameters: () => [{ type: ConfigOptions, decorators: [{
-                    type: Inject,
-                    args: [CONFIG_SETTINGS_TOKEN]
-                }] }], propDecorators: { wsServer: [{
-                type: Input
-            }], jwtToken: [{
-                type: Input
-            }], server: [{
-                type: Input
-            }], user: [{
-                type: Input
-            }], path: [{
-                type: Input
-            }], adapter: [{
-                type: Input
-            }], mapper: [{
-                type: Input
-            }] } });
-
-class LocalStorageSignalsDemoComponent {
-    // store type is driven by the form control
-    get type() {
-        return (this.typeControl.value) ? +this.typeControl.value : 0;
-    }
-    get isValid() {
-        return this.newStoreForm.valid;
-    }
-    get isValidData() {
-        return this.storageForm.valid;
-    }
-    settingFor(name) {
-        const c = this.localStorageManagerService.setting(name);
-        return c ? c() : null;
-    }
-    constructor(configOptions) {
-        this.configOptions = configOptions;
-        this.fb = inject(FormBuilder);
-        this.utils = inject(UtilsService);
-        this.typeControl = this.fb.control(StorageType.GLOBAL.toString());
-        this.localStorageManagerService = inject(LocalStorageSignalsManagerService);
-        // Use signals directly and computed values for template binding
-        this.settings = computed(() => this.localStorageManagerService.settings());
-        // selected store (signal) and its JSON data for template
-        this.storeSelected = signal(null);
-        this.selectedStoreData = computed(() => {
-            const s = this.storeSelected();
-            if (!s)
-                return '';
-            const computed = this.localStorageManagerService.store(s.name);
-            return computed ? JSON.stringify(computed()) : '';
-        });
-        // filtered settings by selected type
-        this.selectedType = signal(StorageType.GLOBAL);
-        this.filteredSettings = computed(() => {
-            const values = this.settings() || [];
-            return values.filter((item) => item.options.storage === +this.selectedType());
-        });
-        this.storageForm = this.fb.group({
-            store: this.fb.control(null),
-            type: 'local',
-            settingType: 'local',
-            encrypted: false,
-            data: this.fb.control('', Validators.required),
-        });
-        this.newStoreForm = this.fb.group({
-            name: this.fb.control(null, Validators.required),
-            storage: 'local',
-            encrypted: false,
-            data: this.fb.control('', Validators.required),
-            expiresIn: this.fb.control('0')
-        });
-        // no RxJS Observables here; template uses signals/computed directly
-        this.expiresIn = (epoch) => this.utils.expiresIn(epoch);
-        this.isValidJSON = (str) => {
-            try {
-                JSON.parse(str);
-                return true;
-            }
-            catch (e) {
-                return false;
-            }
-        };
-        this.displayedColumns = ['name', 'id', 'encrypted', 'expires', "option"];
-        this.filterData = (values) => {
-            if (!values)
-                return [];
-            return values.filter((item) => item.options && item.options.storage === +this.type);
-        };
-        this.create = false;
-    }
-    ngOnInit() {
-        this.storeProps = this.configOptions?.LocalStorageOptions;
-        this.options = this.storeProps?.options;
-        if (this.options?.storage) {
-            this.typeControl.patchValue(this.options.storage.toString());
-            this.typeControl.disable();
-        }
-        else {
-            this.typeControl.enable();
-        }
-        if (this.options?.expiresIn) {
-            this.newStoreForm.get('expiresIn')?.patchValue(this.options.expiresIn);
-            this.newStoreForm.get('expiresIn')?.disable();
-        }
-        else {
-            this.newStoreForm.get('expiresIn')?.enable();
-        }
-        if (this.options?.encrypted) {
-            this.newStoreForm.get('encrypted')?.patchValue(this.options.encrypted);
-            this.newStoreForm.get('encrypted')?.disable();
-        }
-        else {
-            this.newStoreForm.get('encrypted')?.enable();
-        }
-        // nothing to synchronize - templates read computed signals directly
-    }
-    onCreateStore() {
-        if (!this.isValid)
-            return;
-        const store = this.newStoreForm.value;
-        if (!store.name || store.name === '')
-            return;
-        const options = { storage: this.type, encrypted: store.encrypted, expiresIn: store.expiresIn };
-        this.localStorageManagerService.createStore({
-            name: store.name,
-            data: store.data,
-            options: SettingOptions.adapt(options)
-        });
-        this.newStoreForm.reset();
-        this.create = false;
-    }
-    onUpdateStore(store) {
-        if (!this.storageForm.valid)
-            return;
-        const storeData = this.storageForm.value;
-        const data = JSON.parse(storeData.data || '');
-        const type = (storeData.type === 'local') ? StorageType.GLOBAL : StorageType.SESSION;
-        this.localStorageManagerService.updateStore({
-            name: store.name,
-            data
-        });
-    }
-    onSelectedRow(store) {
-        this.store = store;
-        this.storeSelected.set(store);
-        this.create = false;
-    }
-    onCreate() {
-        this.onCancel();
-        this.create = true;
-    }
-    onDelete(store) {
-        this.localStorageManagerService.deleteStore({
-            name: store.name,
-        });
-        this.onCancel();
-    }
-    onCancel() {
-        this.storeSelected.set(null);
-        this.store = null;
-        this.create = false;
-    }
-    onUpdate(store, data) {
-        this.localStorageManagerService.updateStore({
-            name: store.name,
-            data: JSON.parse(data)
-        });
-        this.onCancel();
-    }
-    onReset() {
-        this.localStorageManagerService.resetStore();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LocalStorageSignalsDemoComponent, deps: [{ token: CONFIG_SETTINGS_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: LocalStorageSignalsDemoComponent, selector: "app-local-storage-signals-demo", ngImport: i0, template: "<div style=\"margin: 2rem;\">\n\n  <div style=\"display: flex; gap: 1rem\">\n    <h2 style=\"padding-top: .5rem; display: flex;\">\n      <div style=\"padding-top: .5rem;\">\n        <span>Local Storage Manager</span>\n        <span style=\"margin-left: .5rem;\">\n          <mat-icon color=\"accent\">fiber_new</mat-icon>\n        </span>\n      </div>\n      <div>\n        <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n          <mat-icon>info</mat-icon>\n        </button>\n      </div>\n    </h2>\n    <span style=\"flex:1\"></span>\n    <div style=\"padding-top: .25rem;\">\n      <mat-button-toggle-group name=\"storage\" [formControl]=\"typeControl\" (change)=\"onCancel()\">\n        <mat-button-toggle value=\"0\">Local Storage</mat-button-toggle>\n        <mat-button-toggle value=\"1\">Session Storage</mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n    <div style=\"margin-top: .25rem;\">\n      <button mat-icon-button (click)=\"onCreate()\">\n        <mat-icon>add</mat-icon>\n      </button>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"storeProps?.storageName || storeProps?.storageSettingsName\">\n    <div style=\"display: flex; gap: .5rem; flex-direction: column; border: gray solid thin; background-color: whitesmoke; padding: 1rem;\"\n    >\n      <div style=\"display: flex;\">\n        <div *ngIf=\"storeProps?.storageSettingsName\" style=\"flex:1\">\n          Database: <b>{{ storeProps?.storageSettingsName }}</b>\n        </div>\n        <div *ngIf=\"storeProps?.storageName\" style=\"flex:1\">\n          Data: <b>{{ storeProps?.storageName }}</b>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <div style=\"margin-top: 2rem;\" [formGroup]=\"newStoreForm\" *ngIf=\"create; else LIST\">\n\n    <h2>Create Store</h2>\n\n    <div style=\"display: flex; gap: 1rem;\">\n      <div style=\"flex:1\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Store Name</mat-label>\n          <input matInput placeholder=\"sample\" formControlName=\"name\">\n        </mat-form-field>\n      </div>\n      <div>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Expires In...</mat-label>\n          <mat-select formControlName=\"expiresIn\">\n            <mat-option value=\"0\">None</mat-option>\n            <mat-option value=\"30s\">30 Seconds</mat-option>\n            <mat-option value=\"1mn\">1 Minute</mat-option>\n            <mat-option value=\"1hr\">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: 1rem;\">\n        <mat-slide-toggle formControlName=\"encrypted\">Encrypted</mat-slide-toggle>\n      </div>\n    </div>\n\n    <div style=\"display: flex;\">\n      <mat-form-field appearance=\"outline\" style=\"flex: 1;\">\n        <mat-label>Data (Must be an Object or Array of any)</mat-label>\n        <textarea matInput placeholder=\"[]\" formControlName=\"data\" #json></textarea>\n      </mat-form-field>\n    </div>\n    <mat-error *ngIf=\"!isValidJSON(json.value)\">Not Valid Data</mat-error>\n\n    <div style=\"display: flex;\">\n      <span style=\"flex:1\"></span>\n      <button mat-stroked-button (click)=\"onCreateStore()\" [disabled]=\"!(isValid && isValidJSON(json.value))\">\n        Save Store\n      </button>\n    </div>\n\n  </div>\n\n  <ng-template #LIST>\n\n    <div style=\"margin-top: 1rem;\">\n      <mat-divider></mat-divider>\n    </div>\n{{ settings() | json }}\n  <div *ngIf=\"filterData(settings()) as data\">\n      <ng-container *ngIf=\"data.length > 0; else NO_DATA\">\n        <table mat-table [dataSource]=\"data\">\n          <ng-container matColumnDef=\"name\">\n            <th mat-header-cell *matHeaderCellDef> Store </th>\n            <td mat-cell *matCellDef=\"let element\" style=\"font-weight: bold; text-transform: uppercase;\"> {{element.name}} </td>\n          </ng-container>\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=\"encrypted\">\n            <th mat-header-cell *matHeaderCellDef style=\"text-align: center;\"> Encrypted </th>\n            <td mat-cell *matCellDef=\"let element\" style=\"text-align: center;\">\n              <ng-container *ngIf=\"element.options.encrypted; else NO\">YES</ng-container>\n              <ng-template #NO><span style=\"color:gray\">NO</span></ng-template>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"expires\">\n            <th mat-header-cell *matHeaderCellDef style=\"text-align: center;\"> Expires </th>\n            <td mat-cell *matCellDef=\"let element\" style=\"text-align: center;\">\n              <ng-container *ngIf=\"element.options.expires !== 0; else NO_DATA\">\n                {{expiresIn(element.options.expires)}}\n              </ng-container>\n              <ng-template #NO_DATA>\n                \u221E\n              </ng-template>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"option\">\n            <th mat-header-cell *matHeaderCellDef></th>\n            <td mat-cell *matCellDef=\"let element\" style=\"padding-right: 0;\">\n              <div style=\"display: flex;justify-content: flex-end;\">\n                <button mat-icon-button color=\"warn\" (click)=\"onDelete(element); $event.stopPropagation()\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </div>\n            </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" (click)=\"onSelectedRow(row)\"></tr>\n        </table>\n      </ng-container>\n\n      <ng-template #NO_DATA>\n        <h3 style=\"margin-top: 1rem;\">No Data</h3>\n      </ng-template>\n\n  <div *ngIf=\"storeSelected() as selectedStore\" style=\"margin-top: 2rem;\">\n        <div style=\"margin-bottom: 1rem;\">\n          <mat-divider></mat-divider>\n        </div>\n\n  <h3>STORE: <span style=\"font-weight: bold;\">{{ selectedStore.name | uppercase }}</span></h3>\n  <h3>SETTINGS: {{ localStorageManagerService.setting(selectedStore.name) ? (localStorageManagerService.setting(selectedStore.name)() | json) : '{}' }}</h3>\n        <div style=\"display: flex;\">\n          <mat-form-field appearance=\"outline\" style=\"flex: 1;\">\n            <mat-label>Data (Must be an Object or Array of any)</mat-label>\n            <textarea matInput placeholder=\"[]\" #json [value]=\"selectedStoreData()\"></textarea>\n          </mat-form-field>\n        </div>\n        <mat-error *ngIf=\"!isValidJSON(json.value)\">Not Valid Data</mat-error>\n\n        <div style=\"display: flex; gap: .5rem;\">\n          <span style=\"flex:1\"></span>\n          <button mat-stroked-button (click)=\"onCancel()\">Cancel</button>\n          <button mat-stroked-button (click)=\"onUpdate(selectedStore, json.value)\" [disabled]=\"!(isValidJSON(json.value))\">Update</button>\n        </div>\n      </div>\n    </div>\n\n  </ng-template>\n\n  <div style=\"margin-top: 1rem;\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 1rem;\">\n    <button mat-stroked-button (click)=\"onReset()\">Delete All Stores</button>\n  </div>\n\n</div>\n\n\n<mat-menu #menu=\"matMenu\">\n  <div style=\"padding: 1rem;\">\n    <p>Please note that the LocalStorage (encryption) and management of data is dependant on initializing the APP_ID</p>\n    <p>Must provide a value for <b>APP_ID</b> in AppModule->Providers</p>\n    <mat-divider></mat-divider>\n  <div style=\"font-size: smaller; margin-top: .5rem;\">\n    <p>Example: UUID (self.crypto.randomUUID() to generate)</p>\n    <div style=\"background-color: whitesmoke; padding: 1rem;\">\n      &#123;<br>\n        provide: APP_ID,<br>\n        useValue: \"056991ac-3537-43ab-b5b9-83edf6554eff\",<br>\n      &#125;\n    </div>\n  </div>\n  </div>\n</mat-menu>\n", styles: [".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}.demo-row-is-clicked{font-weight:700}.mat-mdc-menu-panel.mat-mdc-menu-panel{max-width:280px!important}\n"], 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.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: "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: "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: "directive", type: i10.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i10.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { 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.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }], encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LocalStorageSignalsDemoComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-local-storage-signals-demo', encapsulation: ViewEncapsulation.None, standalone: false, template: "<div style=\"margin: 2rem;\">\n\n  <div style=\"display: flex; gap: 1rem\">\n    <h2 style=\"padding-top: .5rem; display: flex;\">\n      <div style=\"padding-top: .5rem;\">\n        <span>Local Storage Manager</span>\n        <span style=\"margin-left: .5rem;\">\n          <mat-icon color=\"accent\">fiber_new</mat-icon>\n        </span>\n      </div>\n      <div>\n        <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n          <mat-icon>info</mat-icon>\n        </button>\n      </div>\n    </h2>\n    <span style=\"flex:1\"></span>\n    <div style=\"padding-top: .25rem;\">\n      <mat-button-toggle-group name=\"storage\" [formControl]=\"typeControl\" (change)=\"onCancel()\">\n        <mat-button-toggle value=\"0\">Local Storage</mat-button-toggle>\n        <mat-button-toggle value=\"1\">Session Storage</mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n    <div style=\"margin-top: .25rem;\">\n      <button mat-icon-button (click)=\"onCreate()\">\n        <mat-icon>add</mat-icon>\n      </button>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"storeProps?.storageName || storeProps?.storageSettingsName\">\n    <div style=\"display: flex; gap: .5rem; flex-direction: column; border: gray solid thin; background-color: whitesmoke; padding: 1rem;\"\n    >\n      <div style=\"display: flex;\">\n        <div *ngIf=\"storeProps?.storageSettingsName\" style=\"flex:1\">\n          Database: <b>{{ storeProps?.storageSettingsName }}</b>\n        </div>\n        <div *ngIf=\"storeProps?.storageName\" style=\"flex:1\">\n          Data: <b>{{ storeProps?.storageName }}</b>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <div style=\"margin-top: 2rem;\" [formGroup]=\"newStoreForm\" *ngIf=\"create; else LIST\">\n\n    <h2>Create Store</h2>\n\n    <div style=\"display: flex; gap: 1rem;\">\n      <div style=\"flex:1\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Store Name</mat-label>\n          <input matInput placeholder=\"sample\" formControlName=\"name\">\n        </mat-form-field>\n      </div>\n      <div>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Expires In...</mat-label>\n          <mat-select formControlName=\"expiresIn\">\n            <mat-option value=\"0\">None</mat-option>\n            <mat-option value=\"30s\">30 Seconds</mat-option>\n            <mat-option value=\"1mn\">1 Minute</mat-option>\n            <mat-option value=\"1hr\">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: 1rem;\">\n        <mat-slide-toggle formControlName=\"encrypted\">Encrypted</mat-slide-toggle>\n      </div>\n    </div>\n\n    <div style=\"display: flex;\">\n      <mat-form-field appearance=\"outline\" style=\"flex: 1;\">\n        <mat-label>Data (Must be an Object or Array of any)</mat-label>\n        <textarea matInput placeholder=\"[]\" formControlName=\"data\" #json></textarea>\n      </mat-form-field>\n    </div>\n    <mat-error *ngIf=\"!isValidJSON(json.value)\">Not Valid Data</mat-error>\n\n    <div style=\"display: flex;\">\n      <span style=\"flex:1\"></span>\n      <button mat-stroked-button (click)=\"onCreateStore()\" [disabled]=\"!(isValid && isValidJSON(json.value))\">\n        Save Store\n      </button>\n    </div>\n\n  </div>\n\n  <ng-template #LIST>\n\n    <div style=\"margin-top: 1rem;\">\n      <mat-divider></mat-divider>\n    </div>\n{{ settings() | json }}\n  <div *ngIf=\"filterData(settings()) as data\">\n      <ng-container *ngIf=\"data.length > 0; else NO_DATA\">\n        <table mat-table [dataSource]=\"data\">\n          <ng-container matColumnDef=\"name\">\n            <th mat-header-cell *matHeaderCellDef> Store </th>\n            <td mat-cell *matCellDef=\"let element\" style=\"font-weight: bold; text-transform: uppercase;\"> {{element.name}} </td>\n          </ng-container>\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=\"encrypted\">\n            <th mat-header-cell *matHeaderCellDef style=\"text-align: center;\"> Encrypted </th>\n            <td mat-cell *matCellDef=\"let element\" style=\"text-align: center;\">\n              <ng-container *ngIf=\"element.options.encrypted; else NO\">YES</ng-container>\n              <ng-template #NO><span style=\"color:gray\">NO</span></ng-template>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"expires\">\n            <th mat-header-cell *matHeaderCellDef style=\"text-align: center;\"> Expires </th>\n            <td mat-cell *matCellDef=\"let element\" style=\"text-align: center;\">\n              <ng-container *ngIf=\"element.options.expires !== 0; else NO_DATA\">\n                {{expiresIn(element.options.expires)}}\n              </ng-container>\n              <ng-template #NO_DATA>\n                \u221E\n              </ng-template>\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"option\">\n            <th mat-header-cell *matHeaderCellDef></th>\n            <td mat-cell *matCellDef=\"let element\" style=\"padding-right: 0;\">\n              <div style=\"display: flex;justify-content: flex-end;\">\n                <button mat-icon-button color=\"warn\" (click)=\"onDelete(element); $event.stopPropagation()\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </div>\n            </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" (click)=\"onSelectedRow(row)\"></tr>\n        </table>\n      </ng-container>\n\n      <ng-template #NO_DATA>\n        <h3 style=\"margin-top: 1rem;\">No Data</h3>\n      </ng-template>\n\n  <div *ngIf=\"storeSelected() as selectedStore\" style=\"margin-top: 2rem;\">\n        <div style=\"margin-bottom: 1rem;\">\n          <mat-divider></mat-divider>\n        </div>\n\n  <h3>STORE: <span style=\"font-weight: bold;\">{{ selectedStore.name | uppercase }}</span></h3>\n  <h3>SETTINGS: {{ localStorageManagerService.setting(selectedStore.name) ? (localStorageManagerService.setting(selectedStore.name)() | json) : '{}' }}</h3>\n        <div style=\"display: flex;\">\n          <mat-form-field appearance=\"outline\" style=\"flex: 1;\">\n            <mat-label>Data (Must be an Object or Array of any)</mat-label>\n            <textarea matInput placeholder=\"[]\" #json [value]=\"selectedStoreData()\"></textarea>\n          </mat-form-field>\n        </div>\n        <mat-error *ngIf=\"!isValidJSON(json.value)\">Not Valid Data</mat-error>\n\n        <div style=\"display: flex; gap: .5rem;\">\n          <span style=\"flex:1\"></span>\n          <button mat-stroked-button (click)=\"onCancel()\">Cancel</button>\n          <button mat-stroked-button (click)=\"onUpdate(selectedStore, json.value)\" [disabled]=\"!(isValidJSON(json.value))\">Update</button>\n        </div>\n      </div>\n    </div>\n\n  </ng-template>\n\n  <div style=\"margin-top: 1rem;\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 1rem;\">\n    <button mat-stroked-button (click)=\"onReset()\">Delete All Stores</button>\n  </div>\n\n</div>\n\n\n<mat-menu #menu=\"matMenu\">\n  <div style=\"padding: 1rem;\">\n    <p>Please note that the LocalStorage (encryption) and management of data is dependant on initializing the APP_ID</p>\n    <p>Must provide a value for <b>APP_ID</b> in AppModule->Providers</p>\n    <mat-divider></mat-divider>\n  <div style=\"font-size: smaller; margin-top: .5rem;\">\n    <p>Example: UUID (self.crypto.randomUUID() to generate)</p>\n    <div style=\"background-color: whitesmoke; padding: 1rem;\">\n      &#123;<br>\n        provide: APP_ID,<br>\n        useValue: \"056991ac-3537-43ab-b5b9-83edf6554eff\",<br>\n      &#125;\n    </div>\n  </div>\n  </div>\n</mat-menu>\n", styles: [".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}.demo-row-is-clicked{font-weight:700}.mat-mdc-menu-panel.mat-mdc-menu-panel{max-width:280px!important}\n"] }]
-        }], ctorParameters: () => [{ type: ConfigOptions, decorators: [{
-                    type: Inject,
-                    args: [CONFIG_SETTINGS_TOKEN]
-                }] }] });
-
-class ClientInfo {
-    constructor(domain = '', service = '', id = 0, name = '') {
-        this.domain = domain;
-        this.service = service;
-        this.id = id;
-        this.name = name;
-    }
-    static adapt(item) {
-        return new ClientInfo(item?.domain, item?.service, item?.id, (item?.first_name || item?.last_name) ? `${item?.first_name} ${item?.last_name}` : '');
-    }
-}
-
-class ClientInfoMapper {
-    constructor(id = 0, first_name = '', last_name = '', email = '') {
-        this.id = id;
-        this.first_name = first_name;
-        this.last_name = last_name;
-        this.email = email;
-    }
-    static adapt(item) {
-        const first_name = (item?.name) ? item.name.split(' ')[0] : '';
-        const last_name = (item?.name) ? item.name.split(' ')[1] : '';
-        return new ClientInfoMapper(item?.id, first_name, last_name, item?.email);
-    }
-}
-
-class AIPrompt {
-    constructor(response = '') {
-        this.response = response;
-    }
-    static adapt(item) {
-        return new AIPrompt(item?.response);
-    }
-}
-
-class RequestSignalsManagerDemoComponent {
-    get retry() {
-        return this.requestForm.get('retry')?.value;
-    }
-    get headers() {
-        return this.requestForm.get('headers');
-    }
-    get isValid() {
-        this.requestForm.markAllAsTouched();
-        return this.requestForm.valid;
-    }
-    constructor() {
-        this.displayedColumns = ['id', 'name', 'lastName', 'age'];
-        this.fb = inject(FormBuilder);
-        this.toastMessage = inject(ToastMessageDisplayService);
-        this.httpManagerSignalsService = inject(HTTPManagerSignalsService);
-        // Using signals service: signals are callable in templates (e.g. isPending())
-        this.isPending = this.httpManagerSignalsService.isPending;
-        this.countdown = this.httpManagerSignalsService.countdown;
-        // per-operation plain results and error messages (no rxjs in component)
-        this.GET_result = null;
-        this.POST_result = null;
-        this.PUT_result = null;
-        this.DELETE_result = null;
-        this.STREAM_result = null;
-        this.STREAM_AI_result = null;
-        this.GET_error = '';
-        this.POST_error = '';
-        this.PUT_error = '';
-        this.DELETE_error = '';
-        this.STREAM_error = '';
-        this.STREAM_AI_error = '';
-        this.requestParams = {
-            GET: ApiRequest.adapt(),
-            POST: ApiRequest.adapt(),
-            PUT: ApiRequest.adapt(),
-            DELETE: ApiRequest.adapt(),
-            STREAM: ApiRequest.adapt(),
-        };
-        this.questionControl = this.fb.control("", [Validators.required]);
-        this.downloadRequest = ApiRequest.adapt({
-            server: 'assets/images',
-            path: ['lego.png'],
-            // saveAs: 'john.jpg' // Optional
-        });
-        // downloadRequest = ApiRequest.adapt({
-        //   server: 'oidc/ai/file'
-        // })
-        this.sampleClientData = {
-            id: 0,
-            name: "Old School Dates",
-            domain: "osd.com",
-            service: "osd",
-            spiffe: "osd.com/osd",
-            secret: "SMOPECXP-OS4P-USOG-X2II-3XMD1FQDR3IJX",
-            created: 1693003138,
-            modified: 1693003138,
-            icon: "",
-            imageFile: "",
-            email: "wavecoders@gmail.com"
-        };
-        this.requestForm = this.fb.group({
-            path: this.fb.control("ai/"),
-            headers: this.fb.array([]),
-            adapter: [null],
-            mapper: [null],
-            retry: this.fb.group({
-                times: [3],
-                delay: [3],
-            }),
-            polling: [3],
-        });
-        this.AIType = 0;
-        this.sampleAdaptors = [
-            { label: "ClientInfo Basic", value: ClientInfo.adapt },
-            { label: "AI Prompt", value: AIPrompt.adapt },
-        ];
-        this.sampleMappers = [
-            { label: "Mapper Basic", value: ClientInfoMapper.adapt },
-            { label: "AI Prompt", value: AIPrompt.adapt },
-        ];
-        this.hasId = (arr) => {
-            if (arr.length === 0)
-                return false;
-            return !isNaN(arr[arr.length - 1]);
-        };
-        this.props = (adapter) => {
-            return (adapter) ? adapter() : null;
-        };
-        // server = `http://sample-endpoint/as/authorization.oauth2`
-        this.arrayObjectsToObjects = (arr) => {
-            return Array.isArray(arr) ? arr.reduce((obj, item) => Object.assign(obj, { [item.key]: item.value }), {}) : {};
-        };
-    }
-    ngOnInit() {
-        // const reqGet2 = ApiRequest.adapt({
-        //   server,
-        //   path: ['clients'],
-        //   headers: { authentication: "Bearer <KEY>" },
-        //   adapter: ClientInfo,
-        //   dataType: DataType.OBJECT,
-        //   // concurrent: false,
-        //   // polling: 3, //seconds
-        // })
-        // const req2 = [1024,1025,1026].map(item => {
-        //   return this.httpManagerService.getRequest<ClientInfo[]>(reqGet2, [item])
-        //   .pipe(
-        //     catchError(error => {
-        //       return throwError(() => new Error(error.error.message))
-        //     })
-        //   )
-        // })
-        // forkJoin(req2)
-        // .subscribe(res => console.log(res))
-    }
-    addHeader() {
-        const header = this.fb.group({
-            key: ['', Validators.required],
-            value: ['']
-        });
-        this.headers.push(header);
-    }
-    removeHeader(index) {
-        this.headers.removeAt(index);
-    }
-    compileRequest() {
-        const requestParams = this.requestForm.value;
-        requestParams.headers = this.arrayObjectsToObjects(requestParams.headers || []);
-        const pathReq = (requestParams.path === "") ? [] : (requestParams.path || "").split("/");
-        if (!this.pollingState.checked)
-            requestParams.polling = 0;
-        if (!this.failedState.checked) {
-            requestParams.retry = { times: 0, delay: 0 };
-        }
-        const apiOptions = ApiRequest.adapt(requestParams);
-        apiOptions.path = [];
-        return { apiOptions: apiOptions, path: pathReq };
-    }
-    onGetRequest() {
-        if (!this.isValid)
-            return;
-        const reqParams = this.compileRequest();
-        this.requestParams.GET = reqParams.apiOptions;
-        // reset local state
-        this.GET_result = null;
-        this.GET_error = '';
-        this.httpManagerSignalsService.getRequest(reqParams.apiOptions, reqParams.path)
-            .subscribe({
-            next: (res) => this.GET_result = res,
-            error: (err) => this.errorHandling(err, 'GET')
-        });
-    }
-    onCreateRequest() {
-        if (!this.isValid)
-            return;
-        const reqParams = this.compileRequest();
-        this.requestParams.POST = reqParams.apiOptions;
-        // reset local state
-        this.POST_result = null;
-        this.POST_error = '';
-        this.httpManagerSignalsService.postRequest(this.sampleClientData, reqParams.apiOptions, reqParams.path)
-            .subscribe({
-            next: (res) => this.POST_result = res,
-            error: (err) => this.errorHandling(err, 'POST')
-        });
-    }
-    onUpdateRequest() {
-        if (!this.isValid)
-            return;
-        const reqParams = this.compileRequest();
-        if (!this.hasId(reqParams.path)) {
-            console.log("Missing ID");
-            return;
-        }
-        this.sampleClientData.id = parseInt(reqParams.path[reqParams.path.length - 1]);
-        this.requestParams.PUT = reqParams.apiOptions;
-        // reset local state
-        this.PUT_result = null;
-        this.PUT_error = '';
-        this.httpManagerSignalsService.putRequest(this.sampleClientData, reqParams.apiOptions, reqParams.path)
-            .subscribe({
-            next: (res) => this.PUT_result = res,
-            error: (err) => this.errorHandling(err, 'PUT')
-        });
-    }
-    onDeleteRequest() {
-        if (!this.isValid)
-            return;
-        const reqParams = this.compileRequest();
-        this.requestParams.DELETE = reqParams.apiOptions;
-        if (!this.hasId(reqParams.path)) {
-            console.log("Missing ID");
-            return;
-        }
-        this.sampleClientData.id = parseInt(reqParams.path[reqParams.path.length - 1]);
-        this.requestParams.DELETE = reqParams.apiOptions;
-        // reset local state
-        this.DELETE_result = null;
-        this.DELETE_error = '';
-        this.httpManagerSignalsService.deleteRequest(reqParams.apiOptions, reqParams.path)
-            .subscribe({
-            next: (res) => this.DELETE_result = res,
-            error: (err) => this.errorHandling(err, 'DELETE')
-        });
-    }
-    onStreamPostRequest() {
-        if (!this.isValid)
-            return;
-        const reqParams = this.compileRequest();
-        let payload = {};
-        let apiPath = reqParams.path;
-        let apiOptions = reqParams.apiOptions;
-        let responseMapper = (items) => items.response;
-        if (this.AIType === 0) {
-            // API request
-            payload = { prompt: this.questionControl.value };
-        }
-        else {
-            // Local Ollama request
-            apiOptions.server = "api";
-            apiPath = ["generate"];
-            apiOptions.stream = true;
-            payload = {
-                model: "phi3:latest",
-                prompt: this.questionControl.value,
-                stream: true,
-            };
-            responseMapper = (items) => items.map((word) => word.response).flat().join('');
-        }
-        this.requestParams.STREAM = apiOptions;
-        this.STREAM_AI_result = null;
-        this.STREAM_AI_error = '';
-        this.httpManagerSignalsService.postRequest(payload, apiOptions, apiPath)
-            .subscribe({
-            next: (res) => {
-                try {
-                    this.STREAM_AI_result = responseMapper(res);
-                }
-                catch (e) {
-                    this.STREAM_AI_result = res;
-                }
-                this.questionControl.reset();
-            },
-            error: (err) => this.errorHandling(err, 'STREAM')
-        });
-    }
-    onStreamRequest() {
-        if (!this.isValid)
-            return;
-        const reqParams = this.compileRequest();
-        reqParams.apiOptions.stream = true;
-        this.requestParams.GET = reqParams.apiOptions;
-        this.STREAM_result = null;
-        this.STREAM_error = '';
-        this.httpManagerSignalsService.getRequest(reqParams.apiOptions, reqParams.path)
-            .subscribe({
-            next: (res) => this.STREAM_result = res,
-            error: (err) => this.errorHandling(err, 'STREAM')
-        });
-    }
-    onDownloadCompleted() {
-        const message = "Download Completed";
-        const display = ToastDisplay.adapt({
-            message,
-            action: 'Ok',
-            color: ToastColors.SUCCESS,
-            icon: 'sentiment_satisfied_alt',
-        });
-        this.toastMessage.toastMessage(display);
-    }
-    onDownloadFailed(err) {
-        const message = "Download Failed";
-        const display = ToastDisplay.adapt({
-            message,
-            action: 'Ok',
-            color: ToastColors.ERROR,
-            icon: 'warning',
-        });
-        this.toastMessage.toastMessage(display);
-    }
-    errorHandling(err, type) {
-        const message = err?.message || String(err);
-        // set local error state
-        if (type === 'GET')
-            this.GET_error = message;
-        if (type === 'POST')
-            this.POST_error = message;
-        if (type === 'PUT')
-            this.PUT_error = message;
-        if (type === 'DELETE')
-            this.DELETE_error = message;
-        if (type === 'STREAM')
-            this.STREAM_error = message;
-        // also set the shared service error signal
-        this.httpManagerSignalsService.error.set(message);
-        return err;
-    }
-    onSelectAIType(type) {
-        this.AIType = type;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RequestSignalsManagerDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: RequestSignalsManagerDemoComponent, selector: "app-request-signals-manager-demo", viewQueries: [{ propertyName: "failedState", first: true, predicate: ["failedState"], descendants: true, static: true }, { propertyName: "pollingState", first: true, predicate: ["pollingState"], descendants: true, static: true }], ngImport: i0, template: "<div style=\"margin: 2rem;\">\n\n  <h2>\n    <span>HTTP Request Signals Manager</span>\n    <span style=\"margin-left: .5rem;\">\n      <mat-icon color=\"accent\">fiber_new</mat-icon>\n    </span>\n  </h2>\n\n  <div [formGroup]=\"requestForm\" style=\"margin-top: 2rem;\">\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Adapter (Model)</mat-label>\n        <mat-select formControlName=\"adapter\" #adapterSelect>\n          <mat-option>None</mat-option>\n          @for (adapter of sampleAdaptors; track adapter) {\n            <mat-option [value]=\"adapter.value\">\n              {{adapter.label}}\n            </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Mapper (Model)</mat-label>\n        <mat-select formControlName=\"mapper\" #mapperSelect>\n          <mat-option>None</mat-option>\n          @for (mapper of sampleMappers; track mapper) {\n            <mat-option [value]=\"mapper.value\">\n              {{mapper.label}}\n            </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n    </div>\n    @if (adapterSelect.value || mapperSelect.value) {\n      <div style=\"display: flex; margin-bottom: 2rem;\">\n        <div style=\"flex:1\" class=\"box\">\n          <h3>Adapter (Incoming)</h3>\n          @if (adapterSelect.value) {\n            <div>\n              {{ props(adapterSelect.value) | json }}\n            </div>\n          } @else {\n            No Transformation\n          }\n        </div>\n        <div style=\"flex:1\" class=\"box\">\n          <h3>Mapper (Outgoing)</h3>\n          @if (mapperSelect.value) {\n            <div>\n              {{ props(mapperSelect.value) | json }}\n            </div>\n          } @else {\n            No Transformation\n          }\n        </div>\n      </div>\n    }\n    <div>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>RestPath (/ delimited)</mat-label>\n        <input matInput placeholder=\"clients/list\" formControlName=\"path\">\n      </mat-form-field>\n    </div>\n    <div>\n      <div formArrayName=\"headers\">\n        @for (task of headers.controls; track task; let i = $index) {\n          <div [formGroupName]=\"i\">\n            <div style=\"display: flex; gap: .5rem\">\n              <mat-form-field appearance=\"outline\">\n                <mat-label>Key</mat-label>\n                <input matInput placeholder=\"authentication\" formControlName=\"key\">\n              </mat-form-field>\n              <mat-form-field appearance=\"outline\" style=\"flex:1\">\n                <mat-label>Value</mat-label>\n                <input matInput placeholder=\"sample\" formControlName=\"value\">\n              </mat-form-field>\n              <div style=\"margin-top: .5rem;\">\n                <button mat-icon-button (click)=\"removeHeader(i)\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n      <button mat-stroked-button (click)=\"addHeader()\" class=\"btn\">Add Header</button>\n    </div>\n    <div style=\"margin-top: 2rem; display: flex; flex-direction:column; gap: 1rem;\">\n      <div>\n        <mat-slide-toggle #failedState>Retry on Failed</mat-slide-toggle>\n        @if (failedState.checked) {\n          <div style=\"display: flex; gap: .5rem; margin-top: 1rem;\" formGroupName=\"retry\">\n            <mat-form-field appearance=\"outline\">\n              <mat-label>#of Times</mat-label>\n              <input matInput placeholder=\"3\" formControlName=\"times\" value=\"3\">\n            </mat-form-field>\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Delay Until Next</mat-label>\n              <input matInput placeholder=\"3\" formControlName=\"delay\" value=\"3\">\n            </mat-form-field>\n          </div>\n        }\n      </div>\n      <div>\n        <mat-slide-toggle #pollingState>Polling</mat-slide-toggle>\n        @if (pollingState.checked) {\n          <div>\n            <mat-form-field appearance=\"outline\" style=\"margin-top: 1rem\">\n              <mat-label>#of Seconds</mat-label>\n              <input matInput placeholder=\"3\" formControlName=\"polling\" value=\"3\">\n            </mat-form-field>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n\n  <div style=\"margin-bottom: 1rem; margin-top: 2rem;\">\n    @if (isPending()) {\n      <mat-progress-bar mode=\"indeterminate\"\n      ></mat-progress-bar>\n    }\n    @if (pollingState.checked && !isPending()) {\n      <mat-progress-bar mode=\"determinate\"\n        [value]=\"countdown()\"\n      ></mat-progress-bar>\n    }\n  </div>\n\n  <div style=\"margin-top: 1rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">GET Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onGetRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if (GET_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ GET_error }}</mat-error>\n      </div>\n    }\n\n    @if (GET_result) {\n      <div style=\"margin-top: 1rem;\">\n        {{ GET_result | json }}\n      </div>\n    }\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">POST Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onCreateRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if (POST_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ POST_error }}</mat-error>\n      </div>\n    }\n\n    @if (POST_result) {\n      <div style=\"margin-top: 1rem;\">\n        {{ POST_result | json }}\n      </div>\n    }\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">PUT Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onUpdateRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if (PUT_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ PUT_error }}</mat-error>\n      </div>\n    }\n\n    <h3>Include Record ID in the RestPath</h3>\n\n    @if (PUT_result) {\n      <div style=\"margin-top: 1rem;\">\n        {{ PUT_result | json }}\n      </div>\n    }\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">DELETE Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onDeleteRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <h3>Include Record ID in the RestPath</h3>\n\n    @if (DELETE_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ DELETE_error }}</mat-error>\n      </div>\n    }\n\n    @if (DELETE_result) {\n      <div style=\"margin-top: 1rem;\">\n        {{ DELETE_result | json }}\n      </div>\n    }\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">Streaming GET Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onStreamRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <!-- <div *ngIf=\"(STREAM_error$ | async) as stream_error\" style=\"margin-top: .5rem;\">\n    <mat-error>{{ stream_error }}</mat-error>\n  </div> -->\n\n  <div style=\"margin-top: 1rem;\">\n    @if (STREAM_result; as data) {\n      <div class=\"container\">\n        <table mat-table [dataSource]=\"data\">\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          <ng-container matColumnDef=\"name\">\n            <th mat-header-cell *matHeaderCellDef> First Name </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.name}} </td>\n          </ng-container>\n          <ng-container matColumnDef=\"lastName\">\n            <th mat-header-cell *matHeaderCellDef> Last Name </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.lastName}} </td>\n          </ng-container>\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          <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\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; padding-top: .5rem;\">AI -@if (AIType === 1) {\n      <span>STREAMING</span>\n    } POST Request</h2>\n    <div style=\"display: flex; gap: 1rem;\">\n      <button mat-raised-button [matMenuTriggerFor]=\"menu\" style=\"min-width: 120px;\">\n        <mat-icon>lan</mat-icon>\n        @if (AIType === 0) {\n          <span>Server</span>\n        } @else {\n          Local\n        }\n      </button>\n      <mat-menu #menu=\"matMenu\">\n        <button mat-menu-item (click)=\"onSelectAIType(0)\">Server</button>\n        <button mat-menu-item (click)=\"onSelectAIType(1)\">Local</button>\n      </mat-menu>\n      <div>\n        <button mat-raised-button (click)=\"onStreamPostRequest()\" class=\"btn\">Ask Me</button>\n      </div>\n    </div>\n  </div>\n\n  <div style=\"display: flex;\">\n    <mat-form-field appearance=\"outline\" style=\"flex:1\">\n      <mat-label>Ask me a Question</mat-label>\n      <textarea matInput placeholder=\"Why is the sky blue?\" [formControl]=\"questionControl\"></textarea>\n    </mat-form-field>\n  </div>\n\n  @if (STREAM_AI_error) {\n    <div style=\"margin-top: .5rem;\">\n      <mat-error>{{ STREAM_AI_error }}</mat-error>\n    </div>\n  }\n\n  @if (AIType === 1) {\n    <div style=\"color: red;\">\n      You must have Ollama active and the 'phi3:latest' model to use this feature.\n    </div>\n  } @else {\n    <span style=\"color: gray;\">\n      Define the RestPath to the API endpoint that will handle the AI request.\n      Use: 'ai/chat' for server\n    </span>\n  }\n\n  <div>\n    @if (STREAM_AI_result) {\n      <div style=\"margin-top: 1rem; font-size: 1.2rem; border-radius: 1rem; border: black 1px solid; padding: 2rem;\">\n        <p style=\"margin-bottom: .5rem; white-space:pre-wrap; line-height: 1.6rem;\">{{STREAM_AI_result}}</p>\n      </div>\n    }\n  </div>\n\n</div>\n\n<div style=\"margin-top: 1.5rem; margin-bottom: 1rem; line-height: 1.5rem;\">\n  <mat-divider></mat-divider>\n</div>\n\n<div>\n  <div style=\"display: flex;\">\n    <h2 style=\"flex:1; margin-bottom: 0; padding-top: .5rem; display: flex;\">\n      <div>\n        Download File\n      </div>\n      <div style=\"flex:1; margin-left: 1rem;\">\n        <mat-slide-toggle #disable>\n          @if (disable.checked) {\n            <span>\n              Enable\n            </span>\n          } @else {\n            Disable\n          }\n        </mat-slide-toggle>\n      </div>\n    </h2>\n    <div>\n      <app-file-downloader\n        [disabled]=\"disable.checked\"\n        [delayError]=\"3\"\n        [apiRequest]=\"downloadRequest\"\n        (completed)=\"onDownloadCompleted()\"\n        (failed)=\"onDownloadFailed($event)\"\n      ></app-file-downloader>\n    </div>\n  </div>\n</div>\n\n</div>\n", styles: [".btn{min-width:120px}.mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor;background-color:#f5f5f5}.container{height:400px;overflow:auto}.box{padding:10px;border:1px solid #ccc}\n"], dependencies: [{ 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: "component", type: FileDownloaderComponent, selector: "app-file-downloader", inputs: ["delayError", "apiRequest", "displayErrorMessage", "saveFileAs", "labels", "disabled"], outputs: ["completed", "failed"] }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RequestSignalsManagerDemoComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-request-signals-manager-demo', standalone: false, template: "<div style=\"margin: 2rem;\">\n\n  <h2>\n    <span>HTTP Request Signals Manager</span>\n    <span style=\"margin-left: .5rem;\">\n      <mat-icon color=\"accent\">fiber_new</mat-icon>\n    </span>\n  </h2>\n\n  <div [formGroup]=\"requestForm\" style=\"margin-top: 2rem;\">\n    <div style=\"display: flex; gap: .5rem\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Adapter (Model)</mat-label>\n        <mat-select formControlName=\"adapter\" #adapterSelect>\n          <mat-option>None</mat-option>\n          @for (adapter of sampleAdaptors; track adapter) {\n            <mat-option [value]=\"adapter.value\">\n              {{adapter.label}}\n            </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Mapper (Model)</mat-label>\n        <mat-select formControlName=\"mapper\" #mapperSelect>\n          <mat-option>None</mat-option>\n          @for (mapper of sampleMappers; track mapper) {\n            <mat-option [value]=\"mapper.value\">\n              {{mapper.label}}\n            </mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n    </div>\n    @if (adapterSelect.value || mapperSelect.value) {\n      <div style=\"display: flex; margin-bottom: 2rem;\">\n        <div style=\"flex:1\" class=\"box\">\n          <h3>Adapter (Incoming)</h3>\n          @if (adapterSelect.value) {\n            <div>\n              {{ props(adapterSelect.value) | json }}\n            </div>\n          } @else {\n            No Transformation\n          }\n        </div>\n        <div style=\"flex:1\" class=\"box\">\n          <h3>Mapper (Outgoing)</h3>\n          @if (mapperSelect.value) {\n            <div>\n              {{ props(mapperSelect.value) | json }}\n            </div>\n          } @else {\n            No Transformation\n          }\n        </div>\n      </div>\n    }\n    <div>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>RestPath (/ delimited)</mat-label>\n        <input matInput placeholder=\"clients/list\" formControlName=\"path\">\n      </mat-form-field>\n    </div>\n    <div>\n      <div formArrayName=\"headers\">\n        @for (task of headers.controls; track task; let i = $index) {\n          <div [formGroupName]=\"i\">\n            <div style=\"display: flex; gap: .5rem\">\n              <mat-form-field appearance=\"outline\">\n                <mat-label>Key</mat-label>\n                <input matInput placeholder=\"authentication\" formControlName=\"key\">\n              </mat-form-field>\n              <mat-form-field appearance=\"outline\" style=\"flex:1\">\n                <mat-label>Value</mat-label>\n                <input matInput placeholder=\"sample\" formControlName=\"value\">\n              </mat-form-field>\n              <div style=\"margin-top: .5rem;\">\n                <button mat-icon-button (click)=\"removeHeader(i)\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n      <button mat-stroked-button (click)=\"addHeader()\" class=\"btn\">Add Header</button>\n    </div>\n    <div style=\"margin-top: 2rem; display: flex; flex-direction:column; gap: 1rem;\">\n      <div>\n        <mat-slide-toggle #failedState>Retry on Failed</mat-slide-toggle>\n        @if (failedState.checked) {\n          <div style=\"display: flex; gap: .5rem; margin-top: 1rem;\" formGroupName=\"retry\">\n            <mat-form-field appearance=\"outline\">\n              <mat-label>#of Times</mat-label>\n              <input matInput placeholder=\"3\" formControlName=\"times\" value=\"3\">\n            </mat-form-field>\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Delay Until Next</mat-label>\n              <input matInput placeholder=\"3\" formControlName=\"delay\" value=\"3\">\n            </mat-form-field>\n          </div>\n        }\n      </div>\n      <div>\n        <mat-slide-toggle #pollingState>Polling</mat-slide-toggle>\n        @if (pollingState.checked) {\n          <div>\n            <mat-form-field appearance=\"outline\" style=\"margin-top: 1rem\">\n              <mat-label>#of Seconds</mat-label>\n              <input matInput placeholder=\"3\" formControlName=\"polling\" value=\"3\">\n            </mat-form-field>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n\n  <div style=\"margin-bottom: 1rem; margin-top: 2rem;\">\n    @if (isPending()) {\n      <mat-progress-bar mode=\"indeterminate\"\n      ></mat-progress-bar>\n    }\n    @if (pollingState.checked && !isPending()) {\n      <mat-progress-bar mode=\"determinate\"\n        [value]=\"countdown()\"\n      ></mat-progress-bar>\n    }\n  </div>\n\n  <div style=\"margin-top: 1rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">GET Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onGetRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if (GET_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ GET_error }}</mat-error>\n      </div>\n    }\n\n    @if (GET_result) {\n      <div style=\"margin-top: 1rem;\">\n        {{ GET_result | json }}\n      </div>\n    }\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">POST Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onCreateRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if (POST_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ POST_error }}</mat-error>\n      </div>\n    }\n\n    @if (POST_result) {\n      <div style=\"margin-top: 1rem;\">\n        {{ POST_result | json }}\n      </div>\n    }\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">PUT Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onUpdateRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    @if (PUT_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ PUT_error }}</mat-error>\n      </div>\n    }\n\n    <h3>Include Record ID in the RestPath</h3>\n\n    @if (PUT_result) {\n      <div style=\"margin-top: 1rem;\">\n        {{ PUT_result | json }}\n      </div>\n    }\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">DELETE Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onDeleteRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <h3>Include Record ID in the RestPath</h3>\n\n    @if (DELETE_error) {\n      <div style=\"margin-top: .5rem;\">\n        <mat-error>{{ DELETE_error }}</mat-error>\n      </div>\n    }\n\n    @if (DELETE_result) {\n      <div style=\"margin-top: 1rem;\">\n        {{ DELETE_result | json }}\n      </div>\n    }\n\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div style=\"margin-top: 2rem\">\n    <div style=\"display: flex;\">\n      <h2 style=\"flex:1\">Streaming GET Request</h2>\n      <div>\n        <button mat-raised-button (click)=\"onStreamRequest()\" class=\"btn\">Request</button>\n      </div>\n    </div>\n\n    <!-- <div *ngIf=\"(STREAM_error$ | async) as stream_error\" style=\"margin-top: .5rem;\">\n    <mat-error>{{ stream_error }}</mat-error>\n  </div> -->\n\n  <div style=\"margin-top: 1rem;\">\n    @if (STREAM_result; as data) {\n      <div class=\"container\">\n        <table mat-table [dataSource]=\"data\">\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          <ng-container matColumnDef=\"name\">\n            <th mat-header-cell *matHeaderCellDef> First Name </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.name}} </td>\n          </ng-container>\n          <ng-container matColumnDef=\"lastName\">\n            <th mat-header-cell *matHeaderCellDef> Last Name </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.lastName}} </td>\n          </ng-container>\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          <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\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; padding-top: .5rem;\">AI -@if (AIType === 1) {\n      <span>STREAMING</span>\n    } POST Request</h2>\n    <div style=\"display: flex; gap: 1rem;\">\n      <button mat-raised-button [matMenuTriggerFor]=\"menu\" style=\"min-width: 120px;\">\n        <mat-icon>lan</mat-icon>\n        @if (AIType === 0) {\n          <span>Server</span>\n        } @else {\n          Local\n        }\n      </button>\n      <mat-menu #menu=\"matMenu\">\n        <button mat-menu-item (click)=\"onSelectAIType(0)\">Server</button>\n        <button mat-menu-item (click)=\"onSelectAIType(1)\">Local</button>\n      </mat-menu>\n      <div>\n        <button mat-raised-button (click)=\"onStreamPostRequest()\" class=\"btn\">Ask Me</button>\n      </div>\n    </div>\n  </div>\n\n  <div style=\"display: flex;\">\n    <mat-form-field appearance=\"outline\" style=\"flex:1\">\n      <mat-label>Ask me a Question</mat-label>\n      <textarea matInput placeholder=\"Why is the sky blue?\" [formControl]=\"questionControl\"></textarea>\n    </mat-form-field>\n  </div>\n\n  @if (STREAM_AI_error) {\n    <div style=\"margin-top: .5rem;\">\n      <mat-error>{{ STREAM_AI_error }}</mat-error>\n    </div>\n  }\n\n  @if (AIType === 1) {\n    <div style=\"color: red;\">\n      You must have Ollama active and the 'phi3:latest' model to use this feature.\n    </div>\n  } @else {\n    <span style=\"color: gray;\">\n      Define the RestPath to the API endpoint that will handle the AI request.\n      Use: 'ai/chat' for server\n    </span>\n  }\n\n  <div>\n    @if (STREAM_AI_result) {\n      <div style=\"margin-top: 1rem; font-size: 1.2rem; border-radius: 1rem; border: black 1px solid; padding: 2rem;\">\n        <p style=\"margin-bottom: .5rem; white-space:pre-wrap; line-height: 1.6rem;\">{{STREAM_AI_result}}</p>\n      </div>\n    }\n  </div>\n\n</div>\n\n<div style=\"margin-top: 1.5rem; margin-bottom: 1rem; line-height: 1.5rem;\">\n  <mat-divider></mat-divider>\n</div>\n\n<div>\n  <div style=\"display: flex;\">\n    <h2 style=\"flex:1; margin-bottom: 0; padding-top: .5rem; display: flex;\">\n      <div>\n        Download File\n      </div>\n      <div style=\"flex:1; margin-left: 1rem;\">\n        <mat-slide-toggle #disable>\n          @if (disable.checked) {\n            <span>\n              Enable\n            </span>\n          } @else {\n            Disable\n          }\n        </mat-slide-toggle>\n      </div>\n    </h2>\n    <div>\n      <app-file-downloader\n        [disabled]=\"disable.checked\"\n        [delayError]=\"3\"\n        [apiRequest]=\"downloadRequest\"\n        (completed)=\"onDownloadCompleted()\"\n        (failed)=\"onDownloadFailed($event)\"\n      ></app-file-downloader>\n    </div>\n  </div>\n</div>\n\n</div>\n", styles: [".btn{min-width:120px}.mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor;background-color:#f5f5f5}.container{height:400px;overflow:auto}.box{padding:10px;border:1px solid #ccc}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { failedState: [{
-                type: ViewChild,
-                args: ["failedState", { static: true }]
-            }], pollingState: [{
-                type: ViewChild,
-                args: ["pollingState", { static: true }]
-            }] } });
-
-// import { MessengerChatModule } from 'src/app/components/messenger-chat/messenger-chat.module';
-// import { StoreStateManagerModule } from "src/app/beta_components/store-state-manager/store-state-manager.module";
-class HttpRequestManagerModule {
-    static forRoot(config = ConfigOptions.adapt()) {
-        return {
-            ngModule: HttpRequestManagerModule,
-            providers: [
-                { provide: CONFIG_SETTINGS_TOKEN, useValue: ConfigOptions.adapt(config) },
-                HTTPManagerService, LocalStorageManagerService //all services that need access to config
-            ],
-        };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HttpRequestManagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: HttpRequestManagerModule, declarations: [RequestManagerBasicDemoComponent,
-            HttpRequestServicesDemoComponent,
-            RequestManagerStateDemoComponent,
-            RequestManagerDemoComponent,
-            RequestSignalsManagerDemoComponent,
-            LocalStorageDemoComponent,
-            LocalStorageSignalsDemoComponent,
-            RequestManagerWsDemoComponent,
-            StoreStateManagerDemoComponent,
-            DatabaseDataDemoComponent,
-            WsDataControlComponent,
-            WsMessagingComponent,
-            WsNotificationsComponent,
-            WsAiMessagingComponent,
-            WsChatsComponent], imports: [CommonModule,
-            ToastMessageDisplayModule,
-            FormsModule,
-            ReactiveFormsModule,
-            MatButtonModule,
-            MatTabsModule,
-            MatSelectModule,
-            MatChipsModule,
-            MatMenuModule,
-            MatIconModule,
-            MatTableModule,
-            MatButtonToggleModule,
-            MatAutocompleteModule,
-            MatProgressBarModule,
-            MatProgressSpinnerModule,
-            MatSlideToggleModule,
-            MatDividerModule,
-            MatFormFieldModule,
-            MatInputModule,
-            MatToolbarModule,
-            MatSlideToggleModule, i1.TranslateModule, MatSidenavModule,
-            MatDatepickerModule,
-            MatNativeDateModule,
-            MatCardModule,
-            FileDownloaderModule], exports: [HttpRequestServicesDemoComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HttpRequestManagerModule, providers: [
-            { provide: HTTP_INTERCEPTORS, useClass: WithCredentialsInterceptor, multi: true },
-            { provide: HTTP_INTERCEPTORS, useClass: RequestHeadersInterceptor, multi: true },
-            { provide: HTTP_INTERCEPTORS, useClass: ProxyDebuggerInterceptor, multi: true },
-            { provide: CONFIG_SETTINGS_TOKEN, useValue: ConfigOptions.adapt() },
-            HTTPManagerService, LocalStorageManagerService,
-            ToastMessageDisplayService,
-            MessageDisplayRouterService,
-            SnackbarStrategy
-        ], imports: [CommonModule,
-            ToastMessageDisplayModule,
-            FormsModule,
-            ReactiveFormsModule,
-            MatButtonModule,
-            MatTabsModule,
-            MatSelectModule,
-            MatChipsModule,
-            MatMenuModule,
-            MatIconModule,
-            MatTableModule,
-            MatButtonToggleModule,
-            MatAutocompleteModule,
-            MatProgressBarModule,
-            MatProgressSpinnerModule,
-            MatSlideToggleModule,
-            MatDividerModule,
-            MatFormFieldModule,
-            MatInputModule,
-            MatToolbarModule,
-            MatSlideToggleModule,
-            TranslateModule.forRoot(),
-            MatSidenavModule,
-            MatDatepickerModule,
-            MatNativeDateModule,
-            MatCardModule,
-            FileDownloaderModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HttpRequestManagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: HttpRequestManagerModule, imports: [CommonModule,
+            ToastMessageDisplayModule,
+            FormsModule,
+            ReactiveFormsModule, i1.TranslateModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HttpRequestManagerModule, providers: [
+            { provide: HTTP_INTERCEPTORS, useClass: WithCredentialsInterceptor, multi: true },
+            { provide: HTTP_INTERCEPTORS, useClass: RequestHeadersInterceptor, multi: true },
+            { provide: HTTP_INTERCEPTORS, useClass: ProxyDebuggerInterceptor, multi: true },
+            { provide: CONFIG_SETTINGS_TOKEN, useValue: ConfigOptions.adapt() },
+            HTTPManagerService,
+            LocalStorageManagerService,
+            ToastMessageDisplayService,
+            MessageDisplayRouterService,
+            SnackbarStrategy,
+        ], imports: [CommonModule,
+            ToastMessageDisplayModule,
+            FormsModule,
+            ReactiveFormsModule,
+            TranslateModule.forRoot()] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HttpRequestManagerModule, decorators: [{
             type: NgModule,
@@ -10991,200 +7483,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         ToastMessageDisplayModule,
                         FormsModule,
                         ReactiveFormsModule,
-                        MatButtonModule,
-                        MatTabsModule,
-                        MatSelectModule,
-                        MatChipsModule,
-                        MatMenuModule,
-                        MatIconModule,
-                        MatTableModule,
-                        MatButtonToggleModule,
-                        MatAutocompleteModule,
-                        MatProgressBarModule,
-                        MatProgressSpinnerModule,
-                        MatSlideToggleModule,
-                        MatDividerModule,
-                        MatFormFieldModule,
-                        MatInputModule,
-                        MatToolbarModule,
-                        MatSlideToggleModule,
                         TranslateModule.forRoot(),
-                        MatSidenavModule,
-                        MatDatepickerModule,
-                        MatNativeDateModule,
-                        MatCardModule,
-                        FileDownloaderModule,
-                        // MessengerChatModule,
-                        // StoreStateManagerModule
-                    ],
-                    declarations: [
-                        RequestManagerBasicDemoComponent,
-                        HttpRequestServicesDemoComponent,
-                        RequestManagerStateDemoComponent,
-                        RequestManagerDemoComponent,
-                        RequestSignalsManagerDemoComponent,
-                        LocalStorageDemoComponent,
-                        LocalStorageSignalsDemoComponent,
-                        RequestManagerWsDemoComponent,
-                        StoreStateManagerDemoComponent,
-                        DatabaseDataDemoComponent,
-                        WsDataControlComponent,
-                        WsMessagingComponent,
-                        WsNotificationsComponent,
-                        WsAiMessagingComponent,
-                        WsChatsComponent,
-                    ],
-                    exports: [
-                        HttpRequestServicesDemoComponent,
                     ],
+                    declarations: [],
+                    exports: [],
                     providers: [
                         { provide: HTTP_INTERCEPTORS, useClass: WithCredentialsInterceptor, multi: true },
                         { provide: HTTP_INTERCEPTORS, useClass: RequestHeadersInterceptor, multi: true },
                         { provide: HTTP_INTERCEPTORS, useClass: ProxyDebuggerInterceptor, multi: true },
                         { provide: CONFIG_SETTINGS_TOKEN, useValue: ConfigOptions.adapt() },
-                        HTTPManagerService, LocalStorageManagerService,
+                        HTTPManagerService,
+                        LocalStorageManagerService,
                         ToastMessageDisplayService,
                         MessageDisplayRouterService,
-                        SnackbarStrategy
+                        SnackbarStrategy,
                     ],
                 }]
         }] });
 
-const defaultCounterState = () => ({
-    count: 0,
-    lastUpdated: new Date().toISOString(),
-    history: []
-});
-class StoreStateSignalsDemoComponent {
-    constructor() {
-        // Signals from service
-        this.stateJson = signal('');
-        this.historyLength = signal(0);
-        this.history = signal([]);
-    }
-    ngOnInit() {
-        const options = StateStorageOptions.adapt({
-            store: 'counter-state',
-            model: defaultCounterState,
-            options: {
-                storage: 'global',
-                encrypted: false
-            }
-        });
-        this.stateManager = new StoreStateManagerSignalsService();
-        this.stateManager.init(options);
-        // Update signals when state changes
-        this.updateSignals();
-    }
-    updateSignals() {
-        const state = this.stateManager.data();
-        if (state) {
-            this.stateJson.set(JSON.stringify(state, null, 2));
-            this.historyLength.set(state.history.length);
-            this.history.set([...state.history]);
-        }
-    }
-    increment() {
-        const current = this.stateManager.data();
-        if (current) {
-            this.stateManager.updateState({
-                count: current.count + 1,
-                lastUpdated: new Date().toISOString()
-            });
-            this.updateSignals();
-        }
-    }
-    decrement() {
-        const current = this.stateManager.data();
-        if (current) {
-            this.stateManager.updateState({
-                count: current.count - 1,
-                lastUpdated: new Date().toISOString()
-            });
-            this.updateSignals();
-        }
-    }
-    reset() {
-        this.stateManager.resetState();
-        this.updateSignals();
-    }
-    addToHistory() {
-        const current = this.stateManager.data();
-        if (current) {
-            this.stateManager.updateState({
-                history: [...current.history, current.count],
-                lastUpdated: new Date().toISOString()
-            });
-            this.updateSignals();
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StoreStateSignalsDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: StoreStateSignalsDemoComponent, selector: "app-store-state-signals-demo", ngImport: i0, template: `
-    <div class="demo-container">
-      <h2>Store State Manager Signals Demo</h2>
-      <p>Signal-based state management with localStorage persistence</p>
-
-      <div class="state-display">
-        <h3>Current State (Signal)</h3>
-        <pre>{{ stateJson() }}</pre>
-      </div>
-
-      <div class="actions">
-        <button (click)="increment()">Increment</button>
-        <button (click)="decrement()">Decrement</button>
-        <button (click)="reset()">Reset</button>
-        <button (click)="addToHistory()">Add to History</button>
-      </div>
-
-      <div class="history">
-        <h3>History: {{ historyLength() }} items</h3>
-        <ul>
-          @for (item of history(); track item; let i = $index) {
-            <li>{{ i + 1 }}. {{ item }}</li>
-          }
-        </ul>
-      </div>
-    </div>
-  `, isInline: true, styles: [".demo-container{padding:20px;max-width:600px;margin:0 auto}.state-display{background:#f5f5f5;padding:15px;border-radius:5px;margin:20px 0}pre{background:#fff;padding:10px;border:1px solid #ddd;border-radius:3px}.actions{display:flex;gap:10px;margin:20px 0}button{padding:10px 20px;background:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer}button:hover{background:#0056b3}.history{margin-top:20px}ul{max-height:200px;overflow-y:auto}\n"] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StoreStateSignalsDemoComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-store-state-signals-demo', template: `
-    <div class="demo-container">
-      <h2>Store State Manager Signals Demo</h2>
-      <p>Signal-based state management with localStorage persistence</p>
-
-      <div class="state-display">
-        <h3>Current State (Signal)</h3>
-        <pre>{{ stateJson() }}</pre>
-      </div>
-
-      <div class="actions">
-        <button (click)="increment()">Increment</button>
-        <button (click)="decrement()">Decrement</button>
-        <button (click)="reset()">Reset</button>
-        <button (click)="addToHistory()">Add to History</button>
-      </div>
-
-      <div class="history">
-        <h3>History: {{ historyLength() }} items</h3>
-        <ul>
-          @for (item of history(); track item; let i = $index) {
-            <li>{{ i + 1 }}. {{ item }}</li>
-          }
-        </ul>
-      </div>
-    </div>
-  `, styles: [".demo-container{padding:20px;max-width:600px;margin:0 auto}.state-display{background:#f5f5f5;padding:15px;border-radius:5px;margin:20px 0}pre{background:#fff;padding:10px;border:1px solid #ddd;border-radius:3px}.actions{display:flex;gap:10px;margin:20px 0}button{padding:10px 20px;background:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer}button:hover{background:#0056b3}.history{margin-top:20px}ul{max-height:200px;overflow-y:auto}\n"] }]
-        }] });
-
 /*
  * Public API Surface of http-request-manager
  */
+// Core module and services
 
 /**
  * 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, LocalStorageDemoComponent, LocalStorageManagerService, LocalStorageOptions, LocalStorageSignalsDemoComponent, LocalStorageSignalsManagerService, LoggerService, NotificationMessage, PathQueryService, PublicMessage, Random, RandomHSLColor, RandomHexColor, RandomNumber, RandomNumbers, RandomNumbersUnique, RandomPaletteColor, RandomSignature, RandomStr, RandomVisibleColor, RequestErrorInterceptor, RequestHeadersInterceptor, RequestManagerDemoComponent, RequestManagerStateDemoComponent, RequestOptions, RequestService, RequestSignalsService, RetryOptions, SettingOptions, StateMessage, StateStorageOptions, StorageData, StorageOption, StorageType, StoreStateManagerService, StoreStateManagerSignalsService, StoreStateSignalsDemoComponent, StreamType, SymmetricalEncryptionService, TableSchemaDef, UUID, UUID_STR, UserData, UtilsService, WSOptions, WebSocketMessageService, WithCredentialsInterceptor, calculateBatchProgress, countdown, createChannelName, delayedRetry, isErrorState, isPendingState, isSuccessState, requestPolling, requestStreaming, streamAI, streamAuto, streamEvents, streamJSON, streamNDJSON };
+export { Action, ApiRequest, AppService, AsymmetricalEncryptionService, BatchOptions, BatchRequestResultModel, BatchResult, CONFIG_SETTINGS_TOKEN, ChannelType, CommunicationMessage, ConfigHTTPOptions, ConfigOptions, DataType, DatabaseManagerService, DatabaseStorage, DbService, DisplayConfig, DisplayRule, ErrorDisplaySettings, GlobalStoreOptions, HTTPManagerService, HTTPManagerSignalsService, HTTPManagerStateService, HeadersService, HttpRequestManagerModule, LocalStorageManagerService, LocalStorageOptions, LocalStorageSignalsManagerService, LoggerService, MessageContent, MessageDisplayRouterService, NotificationMessage, PathQueryService, PublicMessage, Random, RandomHSLColor, RandomHexColor, RandomNumber, RandomNumbers, RandomNumbersUnique, RandomPaletteColor, RandomSignature, RandomStr, RandomVisibleColor, RequestErrorInterceptor, RequestHeadersInterceptor, RequestOptions, RequestService, RequestSignalsService, RetryOptions, SettingOptions, Slide, SnackbarStrategy, StateMessage, StateStorageOptions, StorageData, StorageOption, StorageType, StoreStateManagerService, StoreStateManagerSignalsService, StreamType, SymmetricalEncryptionService, TableSchemaDef, UUID, UUID_STR, UserData, UtilsService, WSOptions, WebSocketMessageService, WithCredentialsInterceptor, calculateBatchProgress, countdown, createChannelName, defaultDisplayRules, delayedRetry, isErrorState, isPendingState, isSuccessState, requestPolling, requestStreaming, streamAI, streamAuto, streamEvents, streamJSON, streamNDJSON };
 //# sourceMappingURL=http-request-manager.mjs.map