@foxeltech/angular-ui 0.0.13 → 0.2.0

package/fesm2022/foxeltech-angular-ui.mjs

@@ -1,76 +1,81 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, Component, createComponent, Injectable, ViewChild, Inject, EventEmitter, NgModule, HostListener, PLATFORM_ID, Output, Optional, Self, ChangeDetectionStrategy, TemplateRef, ContentChildren, ViewChildren, importProvidersFrom } from '@angular/core';
-import * as i35 from '@angular/material/paginator';
+import { inject, DestroyRef, Injector, Directive, Input, Component, createComponent, Injectable, ViewChild, Inject, EventEmitter, NgModule, HostListener, PLATFORM_ID, Output, ChangeDetectionStrategy, TemplateRef, ContentChildren, ViewChildren, importProvidersFrom } from '@angular/core';
+import * as i44 from '@angular/material/paginator';
 import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
-import * as i36 from '@angular/material/table';
+import * as i45 from '@angular/material/table';
 import { MatTableDataSource, MatTable, MatTableModule } from '@angular/material/table';
-import * as i2 from '@angular/common';
+import * as i1$1 from '@angular/common';
 import { isPlatformBrowser, CommonModule } from '@angular/common';
 import * as i1 from '@dimaslz/ng-heroicons';
 import { NgHeroiconsModule } from '@dimaslz/ng-heroicons';
 import _, { clamp } from 'lodash';
-import { Observable, firstValueFrom, Subject, debounceTime, BehaviorSubject, throwError, distinctUntilChanged, filter, takeUntil } from 'rxjs';
-import * as i2$1 from '@angular/common/http';
+import { Observable, firstValueFrom, Subject, debounceTime, distinctUntilChanged, BehaviorSubject, throwError, filter, takeUntil } from 'rxjs';
+import moment from 'moment';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i2 from '@angular/common/http';
 import { HttpRequest, HttpClient } from '@angular/common/http';
-import * as i1$1 from '@angular/material/dialog';
+import * as i1$2 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
-import * as i1$2 from '@ngx-translate/core';
+import * as i1$3 from '@ngx-translate/core';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
-import * as i1$3 from '@angular/forms';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i2$1 from '@angular/forms';
+import { NgControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i1$4 from '@angular/router';
 import { NavigationEnd, RouterModule } from '@angular/router';
 import { catchError } from 'rxjs/operators';
 import * as signalR from '@microsoft/signalr';
-import * as i3$2 from '@angular/material/select';
+import * as i3 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
-import * as i32 from '@angular/material/radio';
+import * as i41 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
-import * as i33 from '@angular/material/button';
+import * as i42 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i34 from '@angular/material/icon';
+import * as i43 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i37 from '@angular/material/snack-bar';
+import * as i46 from '@angular/material/snack-bar';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
-import * as i39 from '@angular/material/checkbox';
+import * as i48 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i40 from '@angular/material/card';
+import * as i49 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
-import * as i41 from '@angular/material/datepicker';
+import * as i50 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i42 from '@angular/material/timepicker';
+import * as i51 from '@angular/material/timepicker';
 import { MatTimepickerModule } from '@angular/material/timepicker';
-import * as i43 from '@angular/material/badge';
+import * as i52 from '@angular/material/badge';
 import { MatBadgeModule } from '@angular/material/badge';
-import * as i44 from '@angular/material/expansion';
+import * as i53 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
-import * as i45 from '@angular/material/form-field';
+import * as i54 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i46 from '@angular/material/menu';
+import * as i55 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import * as i3$1 from '@angular/material/tooltip';
+import * as i56 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i2$2 from '@angular/cdk/drag-drop';
+import * as i2$3 from '@angular/cdk/drag-drop';
 import { DragDropModule, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
-import * as i3 from '@danielmoncada/angular-datetime-picker';
+import * as i2$2 from '@danielmoncada/angular-datetime-picker';
 import { OwlDateTimeModule, OwlNativeDateTimeModule, OWL_DATE_TIME_FORMATS } from '@danielmoncada/angular-datetime-picker';
 import * as i1$5 from 'ngx-echarts';
 import { NgxEchartsModule } from 'ngx-echarts';
-import { __decorate, __param } from 'tslib';
-import * as i29 from 'ngx-vflow';
+import * as i38 from 'ngx-vflow';
 import { Vflow } from 'ngx-vflow';
-import { trigger, state, style, transition, animate } from '@angular/animations';
+import { trigger, state, transition, style, animate } from '@angular/animations';
 import { OwlMomentDateTimeModule } from '@danielmoncada/angular-datetime-picker-moment-adapter';
 
 class BaseComponent {
     injector;
+    /** Teardown hook for subscriptions: takeUntilDestroyed(this.destroyRef). */
+    destroyRef = inject(DestroyRef);
     constructor(injector) {
-        this.injector = injector;
-    }
-    ngOnDestroy() {
-        // clean up if needed later
+        // Some subclasses historically passed non-injector values (e.g. dialog
+        // data) to super(); fall back to the component's own injector so
+        // this.injector.get(...) always works.
+        this.injector = injector instanceof Injector ? injector : inject(Injector);
     }
+    // eslint-disable-next-line @angular-eslint/no-empty-lifecycle-method -- subclasses across host apps call super.ngOnDestroy(); removing this breaks them at runtime
+    ngOnDestroy() { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: BaseComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.4", type: BaseComponent, isStandalone: true, ngImport: i0 });
 }
@@ -114,7 +119,7 @@ class ToastComponent {
     message = '';
     type;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ToastComponent, isStandalone: false, selector: "fx-ui-toast", inputs: { toastId: "toastId", title: "title", message: "message", type: "type" }, ngImport: i0, template: "<div\n  animate.enter=\"horizontal-fade-in-animation\"\n  animate.leave=\"horizontal-fade-out-animation\"\n  class=\"flex border-l-[3px] items-center bg-bg-primary gap-semi min-w-[250px] max-w-[400px] px-large py-semi rounded shadow-lg transition-all duration-300 ease-in-out transform opacity-100 translate-y-0\"\n  [ngClass]=\"{\n    'border-success': type === 'success',\n    'border-critical': type === 'error',\n    'border-warning': type === 'warning',\n    'border-information': type === 'info'\n  }\"\n>\n  <div class=\"\">\n    @switch (type) { @case('success') {\n    <fx-ui-hero-icon\n      icon=\"check-circle\"\n      [solid]=\"true\"\n      [size]=\"30\"\n      class=\"text-success\"\n    ></fx-ui-hero-icon>\n    } @case('error') {\n    <fx-ui-hero-icon\n      icon=\"exclamation-circle\"\n      [solid]=\"true\"\n      [size]=\"30\"\n      class=\"text-critical\"\n    ></fx-ui-hero-icon>\n    } @case('warning') {\n    <fx-ui-hero-icon\n      icon=\"exclamation-triangle\"\n      [solid]=\"true\"\n      [size]=\"30\"\n      class=\"text-warning\"\n    ></fx-ui-hero-icon>\n    } @default {\n    <fx-ui-hero-icon\n      icon=\"information-circle\"\n      [solid]=\"true\"\n      [size]=\"30\"\n      class=\"text-information\"\n    ></fx-ui-hero-icon>\n    } }\n  </div>\n\n  <div class=\"flex flex-col\">\n    <strong *ngIf=\"title\" class=\"txt-field-label\">{{ title }}</strong>\n    <p class=\"txt-default\">{{ message }}</p>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ToastComponent, isStandalone: false, selector: "fx-ui-toast", inputs: { toastId: "toastId", title: "title", message: "message", type: "type" }, ngImport: i0, template: "<div\n  animate.enter=\"horizontal-fade-in-animation\"\n  animate.leave=\"horizontal-fade-out-animation\"\n  class=\"flex border-l-[3px] items-center bg-bg-primary gap-semi min-w-[250px] max-w-[400px] px-large py-semi rounded shadow-lg transition-all duration-300 ease-in-out transform opacity-100 translate-y-0\"\n  [ngClass]=\"{\n    'border-success': type === 'success',\n    'border-critical': type === 'error',\n    'border-warning': type === 'warning',\n    'border-information': type === 'info'\n  }\"\n>\n  <div class=\"\">\n    @switch (type) { @case('success') {\n    <fx-ui-hero-icon\n      icon=\"check-circle\"\n      [solid]=\"true\"\n      [size]=\"30\"\n      class=\"text-success\"\n    ></fx-ui-hero-icon>\n    } @case('error') {\n    <fx-ui-hero-icon\n      icon=\"exclamation-circle\"\n      [solid]=\"true\"\n      [size]=\"30\"\n      class=\"text-critical\"\n    ></fx-ui-hero-icon>\n    } @case('warning') {\n    <fx-ui-hero-icon\n      icon=\"exclamation-triangle\"\n      [solid]=\"true\"\n      [size]=\"30\"\n      class=\"text-warning\"\n    ></fx-ui-hero-icon>\n    } @default {\n    <fx-ui-hero-icon\n      icon=\"information-circle\"\n      [solid]=\"true\"\n      [size]=\"30\"\n      class=\"text-information\"\n    ></fx-ui-hero-icon>\n    } }\n  </div>\n\n  <div class=\"flex flex-col\">\n    <strong *ngIf=\"title\" class=\"txt-field-label\">{{ title }}</strong>\n    <p class=\"txt-default\">{{ message }}</p>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ToastComponent, decorators: [{
             type: Component,
@@ -129,6 +134,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Input
             }] } });
 
+// import { ToastData } from '../../../../public-api';
 class ToastContainerComponent {
     ref;
     toasts = [];
@@ -240,7 +246,7 @@ class FxUtils {
         const keys = [];
         const promises = [];
         for (const i in value) {
-            if (value.hasOwnProperty(i)) {
+            if (Object.prototype.hasOwnProperty.call(value, i)) {
                 keys.push(i);
                 this.preresolve(promises, value[i], i);
             }
@@ -348,11 +354,24 @@ class FxUtils {
         }
         return `${_.get(err, 'error.code')}: ${message}`;
     }
-    static convertColorFromVariable(name, alpha = 1) {
+    /**
+     * Resolve a theme channel triple (`--danger: 255 122 0`) to a CSS colour.
+     * Pass `legacyCommaSyntax: true` for canvas/ECharts consumers: canvas paints
+     * both forms, but zrender's colour parser can't read the CSS4 space syntax
+     * and renders slices black on hover when given it.
+     */
+    static convertColorFromVariable(name, alpha = 1, options) {
         const value = getComputedStyle(document.body)
             .getPropertyValue(name)
             .trim()
             .replace(/\s+/g, ' ');
+        if (options?.legacyCommaSyntax) {
+            const [r, g, b] = value.replace(/[/,]/g, ' ').split(/\s+/).filter(Boolean);
+            if (r === undefined || g === undefined || b === undefined) {
+                return `rgba(148, 163, 184, ${alpha})`;
+            }
+            return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+        }
         return value ? `rgba(${value} / ${alpha})` : `rgba(255 255 255 / ${alpha})`;
     }
     static getTagClass(key, isCriticalExist = true) {
@@ -397,6 +416,90 @@ class FxUtils {
         const isEmail = emailRegex.test(value);
         return isEmail;
     }
+    /** Safe deep accessor with the org-wide empty placeholder. */
+    static value(model, key, defaultValue = '---') {
+        return _.get(model, key, defaultValue);
+    }
+    /**
+     * Severity weight for ordering — kept next to getTagClass so ordering and
+     * colouring can never drift apart.
+     */
+    static severityWeight(level) {
+        switch (String(level ?? '').toUpperCase()) {
+            case 'CRITICAL':
+                return 5;
+            case 'HIGH':
+                return 4;
+            case 'MEDIUM':
+                return 3;
+            case 'LOW':
+                return 2;
+            case 'INFO':
+            case 'INFORMATION':
+                return 1;
+            default:
+                return 0;
+        }
+    }
+    /** Org-wide date-time rendering (DD/MM/YYYY HH:mm:ss, local time). */
+    static formatDateTime(time) {
+        if (FxUtils.isNull(time))
+            return '';
+        return moment.parseZone(time).local().format('DD/MM/YYYY HH:mm:ss');
+    }
+    /** Seconds → compact duration ("2d 4h", "3h 12m", "45s"). */
+    static formatDuration(totalSeconds) {
+        const sec = Number(totalSeconds);
+        if (!_.isFinite(sec) || sec < 0)
+            return '';
+        const d = Math.floor(sec / 86400);
+        const h = Math.floor((sec % 86400) / 3600);
+        const m = Math.floor((sec % 3600) / 60);
+        const s = Math.floor(sec % 60);
+        if (d > 0)
+            return h > 0 ? `${d}d ${h}h` : `${d}d`;
+        if (h > 0)
+            return m > 0 ? `${h}h ${m}m` : `${h}h`;
+        if (m > 0)
+            return s > 0 ? `${m}m ${s}s` : `${m}m`;
+        return `${s}s`;
+    }
+    /** Relative time within the last 24h ("3 hours ago"), else DD/MM/YYYY. */
+    static formatRelative(time) {
+        if (FxUtils.isNull(time))
+            return '';
+        const m = moment.parseZone(time).local();
+        return moment().diff(m, 'hours') < 24 ? m.fromNow() : m.format('DD/MM/YYYY');
+    }
+    /**
+     * Normalize a snake_case + protobuf-Long API payload for camelCase binding:
+     * - genuine snake_case keys -> camelCase (data-as-key entries such as DLL
+     *   names like "kernel32.dll" are left untouched by the strict regex);
+     * - Long-encoded numbers `{ high, low, unsigned }` -> plain number.
+     */
+    static camelizeDeep(input) {
+        if (Array.isArray(input)) {
+            return input.map((v) => FxUtils.camelizeDeep(v));
+        }
+        if (input !== null && typeof input === 'object') {
+            const keys = Object.keys(input);
+            if (keys.length === 3 &&
+                keys.includes('high') &&
+                keys.includes('low') &&
+                keys.includes('unsigned')) {
+                const high = Number(input.high) || 0;
+                const low = Number(input.low) || 0;
+                return high * 4294967296 + (low >>> 0);
+            }
+            const out = {};
+            for (const k of keys) {
+                const nk = /^[a-z][a-z0-9]*(_[a-z0-9]+)+$/.test(k) ? _.camelCase(k) : k;
+                out[nk] = FxUtils.camelizeDeep(input[k]);
+            }
+            return out;
+        }
+        return input;
+    }
     static formatSizeUnits(bytes) {
         if (bytes >= 1073741824) {
             return (bytes / 1073741824).toFixed(2) + ' GB';
@@ -424,6 +527,15 @@ class HttpWrapper {
         this.http = http;
         this.baseURL = baseURL;
     }
+    /**
+     * Hook applied to every resolved response (get/post/put/delete and all verb
+     * helpers built on them). Default is identity; override to normalize a
+     * backend convention once (e.g. FxUtils.camelizeDeep for snake_case +
+     * protobuf-Long payloads) instead of wrapping each method.
+     */
+    transformResponse(res) {
+        return res;
+    }
     addCredentials(options = {}) {
         return {
             withCredentials: true,
@@ -437,16 +549,16 @@ class HttpWrapper {
                 ...params,
             },
         };
-        return firstValueFrom(this.http.get(this.baseURL + url, options));
+        return this.transformResponse(await firstValueFrom(this.http.get(this.baseURL + url, options)));
     }
     async post(url, body = {}, options = {}) {
-        return firstValueFrom(this.http.post(this.baseURL + url, body, this.addCredentials(options)));
+        return this.transformResponse(await firstValueFrom(this.http.post(this.baseURL + url, body, this.addCredentials(options))));
     }
     async put(url, body, options = {}) {
-        return firstValueFrom(this.http.put(this.baseURL + url, body, this.addCredentials(options)));
+        return this.transformResponse(await firstValueFrom(this.http.put(this.baseURL + url, body, this.addCredentials(options))));
     }
     async delete(url, options = {}) {
-        return firstValueFrom(this.http.delete(this.baseURL + url, this.addCredentials(options)));
+        return this.transformResponse(await firstValueFrom(this.http.delete(this.baseURL + url, this.addCredentials(options))));
     }
     upload(url, body, options = {}) {
         const req = new HttpRequest('POST', this.baseURL + url, body, {
@@ -526,7 +638,9 @@ class BaseTableComponent extends BaseComponent {
         this.toastr = injector.get(FxToastrService);
     }
     ngOnInit() {
-        this.keywordChange$.pipe(debounceTime(300)).subscribe(async (keyword) => {
+        this.keywordChange$
+            .pipe(debounceTime(300), distinctUntilChanged(), takeUntilDestroyed(this.destroyRef))
+            .subscribe(async () => {
             await this.refresh();
         });
         this.dataSourcePlaceholder = Array(this.pageSize).fill({});
@@ -535,7 +649,7 @@ class BaseTableComponent extends BaseComponent {
     init() { }
     ngAfterViewInit() {
         if (this.paginator && this.paginator.page) {
-            this.paginator.page.subscribe((event) => {
+            this.paginator.page.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event) => {
                 this.onPageChange(event);
             });
         }
@@ -548,23 +662,50 @@ class BaseTableComponent extends BaseComponent {
         }
         await this.fetch();
     }
+    /**
+     * Where the list is fetched from. Default (null) keeps the legacy behavior
+     * of calling `api.search()` (GET /search) untouched. Subclasses whose list
+     * lives elsewhere override this instead of re-implementing fetch() — and
+     * keep the stale-response sequence guard for free.
+     */
+    listRequest() {
+        return null;
+    }
+    /** Result keys the list/total are read from. Override alongside listRequest(). */
+    listKey = 'data';
+    totalKey = 'total';
     setDataSource(result) {
-        this.dataSource.data = _.get(result, 'data');
-        this.total = _.get(result, 'total');
+        this.dataSource.data = _.get(result, this.listKey);
+        this.total = _.get(result, this.totalKey);
     }
+    _fetchSeq = 0;
     async fetch() {
+        // Sequence guard: without it a slow earlier request could resolve after
+        // a newer one and overwrite the table with stale data.
+        const seq = ++this._fetchSeq;
         this.loading = true;
         try {
             const params = { page: (this.page ?? 0) + 1, pageSize: this.pageSize, ...this.filters };
-            const result = await this.api.search(params);
+            const req = this.listRequest();
+            const result = req
+                ? req.method === 'post'
+                    ? await this.api.post(req.url, params)
+                    : await this.api.get(req.url, params)
+                : await this.api.search(params);
+            if (seq !== this._fetchSeq)
+                return;
             this.setDataSource(result);
         }
         catch (err) {
+            if (seq !== this._fetchSeq)
+                return;
             this.toastr.error(FxUtils.parseError(err));
         }
         finally {
-            this.loading = false;
-            this.ref.detectChanges();
+            if (seq === this._fetchSeq) {
+                this.loading = false;
+                this.ref.detectChanges();
+            }
         }
     }
     async onPageChange(event) {
@@ -596,7 +737,7 @@ class BaseTableComponent extends BaseComponent {
         if (size == '100%') {
             panelClass = 'fx-fullsize-dialog';
         }
-        let instance = this.modal.open(dialog, {
+        const instance = this.modal.open(dialog, {
             panelClass: panelClass,
             autoFocus: false,
             width: size,
@@ -631,7 +772,7 @@ class BaseTableComponent extends BaseComponent {
         if (size == '100%') {
             panelClass = 'fx-fullsize-dialog';
         }
-        let instance = this.modal.open(dialog, {
+        const instance = this.modal.open(dialog, {
             panelClass: panelClass,
             autoFocus: false,
             width: size,
@@ -666,7 +807,7 @@ class BaseTableComponent extends BaseComponent {
         if (size == '100%') {
             panelClass = 'fx-fullsize-dialog';
         }
-        let instance = this.modal.open(dialog, {
+        const instance = this.modal.open(dialog, {
             panelClass: panelClass,
             autoFocus: false,
             width: size,
@@ -685,13 +826,16 @@ class BaseTableComponent extends BaseComponent {
         });
     }
     async delete(model) {
+        const conf = _.get(this.config, 'delete');
+        const dialog = _.get(conf, 'dialog');
+        if (_.isNil(conf) || _.isNil(dialog)) {
+            return;
+        }
         if (this._lock) {
             return;
         }
         this._lock = true;
         try {
-            const conf = _.get(this.config, 'delete');
-            const dialog = _.get(conf, 'dialog');
             const dialogRef = this.modal.open(dialog, {
                 panelClass: 'fx-dialog',
                 autoFocus: false,
@@ -746,7 +890,7 @@ class BaseTableComponent extends BaseComponent {
             this.toastr.success(_.get(this.config, 'updateStatus.message', 'Update Success'));
         }
         catch (err) {
-            this.toastr.success(FxUtils.parseError(err));
+            this.toastr.error(FxUtils.parseError(err));
         }
         finally {
             await this.refresh();
@@ -782,20 +926,24 @@ class BaseDialogComponent extends BaseComponent {
     formChangesSubscription;
     onSubmit = true;
     constructor(ref, bindings, toastr, api, dialog) {
-        super(bindings);
+        super();
         this.ref = ref;
         this.bindings = bindings;
         this.toastr = toastr;
         this.api = api;
         this.dialog = dialog;
-        this.model = _.clone(_.get(bindings, 'data'));
+        // Deep clone: a shallow clone let dialog edits mutate nested fields of
+        // the live table row even when the user cancelled.
+        this.model = _.cloneDeep(_.get(bindings, 'data'));
         this.method = _.get(bindings, 'method');
         this.title = _.get(bindings, 'title');
         this.disabled = _.get(bindings, 'disabled');
         this.message = _.get(bindings, 'message');
         this.resolve = _.get(bindings, 'resolve');
     }
+    // eslint-disable-next-line @angular-eslint/no-empty-lifecycle-method -- subclasses across host apps call super lifecycle methods; removing these breaks them at runtime
     ngAfterViewInit() { }
+    // eslint-disable-next-line @angular-eslint/no-empty-lifecycle-method -- see ngAfterViewInit note
     ngOnInit() { }
     async accept(form, params = null) {
         if (form.invalid) {
@@ -873,15 +1021,15 @@ class BaseDialogComponent extends BaseComponent {
     validate() {
         return true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: BaseDialogComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: FxToastrService }, { token: HttpWrapper }, { token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: BaseDialogComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: FxToastrService }, { token: HttpWrapper }, { token: i1$2.MatDialog }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.4", type: BaseDialogComponent, isStandalone: true, viewQueries: [{ propertyName: "ngForm", first: true, predicate: ["f"], descendants: true, static: true }], usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: BaseDialogComponent, decorators: [{
             type: Directive
-        }], ctorParameters: () => [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i1$2.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
-                }] }, { type: FxToastrService }, { type: HttpWrapper }, { type: i1$1.MatDialog }], propDecorators: { ngForm: [{
+                }] }, { type: FxToastrService }, { type: HttpWrapper }, { type: i1$2.MatDialog }], propDecorators: { ngForm: [{
                 type: ViewChild,
                 args: ['f', { static: true }]
             }] } });
@@ -923,6 +1071,293 @@ class BaseResolver {
     }
 }
 
+class FxStorageService {
+    resolve(key, value) {
+        if (FxUtils.isNotNull(value)) {
+            localStorage.setItem(key, JSON.stringify(value));
+        }
+        const loc = localStorage.getItem(key);
+        return loc ? JSON.parse(loc) : undefined;
+    }
+    remove(key) {
+        localStorage.removeItem(key);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FxStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FxStorageService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FxStorageService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+/**
+ * Functional replacement for the copy-pasted list-resolver class:
+ * starts the loading overlay, runs one API request, and on failure stops the
+ * overlay and shows a parsed error toast — the exact convention every
+ * BaseResolver subclass hand-rolls today. BaseResolver stays for existing
+ * classes; new routes should use this factory.
+ *
+ * Usage:
+ *   resolve: { histories: fxListResolver(ScanManagementApi, (route, state, ctx) =>
+ *     ({ url: `/${route.paramMap.get('id')}/history`, params: { page: 1, pageSize: ctx.pageSize } })) }
+ */
+function fxListResolver(apiType, request) {
+    return async (route, state) => {
+        const api = inject(apiType);
+        const loading = inject(FxLoadingService);
+        const toastr = inject(FxToastrService);
+        const storage = inject(FxStorageService);
+        try {
+            loading.start();
+            const ctx = { pageSize: storage.resolve(state.url) || 10 };
+            const req = request(route, state, ctx);
+            if ((req.method ?? 'get') === 'post') {
+                return await api.post(req.url, req.body ?? req.params ?? {});
+            }
+            return await api.get(req.url, req.params);
+        }
+        catch (err) {
+            loading.stop();
+            toastr.error(FxUtils.parseError(err), 'Error');
+            return null;
+        }
+    };
+}
+
+/**
+ * Factory for the 11-line HttpWrapper subclasses copy-pasted per endpoint.
+ * Returns a distinct injectable class per call (so constructor injection by
+ * type keeps working) without needing a decorator:
+ *
+ *   export const ScanManagementApi = createApi(() => `${environment.baseService}/scarf/scan`);
+ *   // module: providers: [ScanManagementApi.provider]
+ *   // usage:  constructor(private api: InstanceType<typeof ScanManagementApi>)
+ *
+ * `baseURL` accepts a string or a lazy factory (for environment-derived URLs).
+ * An optional `transform` plugs into HttpWrapper.transformResponse — e.g.
+ * FxUtils.camelizeDeep for snake_case/Long-encoded backends.
+ *
+ * IMPORTANT — when subclassing (`@Injectable() class X extends createApi(...)`),
+ * declare an explicit `constructor(http: HttpClient) { super(http); }`.
+ * The generated base carries no Angular factory metadata, so an inherited
+ * constructor makes Ivy fall back to `new X()` with NO arguments: the class
+ * silently gets `http = undefined` and every call fails at runtime while the
+ * build stays green.
+ */
+function createApi(baseURL, transform) {
+    class GeneratedApi extends HttpWrapper {
+        static provider = {
+            provide: GeneratedApi,
+            useFactory: (http) => new GeneratedApi(http),
+            deps: [HttpClient],
+        };
+        constructor(http) {
+            super(http, typeof baseURL === 'function' ? baseURL() : baseURL);
+        }
+        transformResponse(res) {
+            return transform ? transform(res) : res;
+        }
+    }
+    return GeneratedApi;
+}
+
+/**
+ * Live-progress plumbing for server-paginated tables fed by hub events:
+ * events matching a visible row are merged in place; events for rows that
+ * are not in the list yet (a just-created record whose list read lags) are
+ * buffered by key and replayed after a debounced, idle-capped background
+ * re-fetch that merges by stable identity.
+ *
+ * The domain contract (event name, payload parsing, terminal semantics) is
+ * injected via options — nothing app-specific lives here.
+ */
+class RealtimeTableSync {
+    notifications;
+    options;
+    pending = new Map();
+    syncTimer = null;
+    idleSyncs = 0;
+    stopped = false;
+    subscription = null;
+    constructor(notifications, options) {
+        this.notifications = notifications;
+        this.options = options;
+    }
+    /**
+     * Subscribe to the hub event. Pass a DestroyRef to tie teardown to a
+     * component lifecycle; stop() is still available for manual control.
+     */
+    start(destroyRef) {
+        const source = this.notifications.on$(this.options.event);
+        const piped = destroyRef ? source.pipe(takeUntilDestroyed(destroyRef)) : source;
+        this.stopped = false;
+        this.subscription = piped.subscribe((raw) => this.handleEvent(raw));
+        if (destroyRef) {
+            destroyRef.onDestroy(() => this.stop());
+        }
+        return this;
+    }
+    stop() {
+        this.stopped = true;
+        this.subscription?.unsubscribe();
+        this.subscription = null;
+        if (this.syncTimer) {
+            clearTimeout(this.syncTimer);
+            this.syncTimer = null;
+        }
+        this.pending.clear();
+    }
+    /**
+     * Replay buffered events onto the current rows (call from setDataSource so
+     * a regular refresh also applies buffered progress). Returns true if
+     * anything was applied.
+     */
+    applyPending() {
+        if (!this.pending.size)
+            return false;
+        let changed = false;
+        for (const row of this.options.getRows()) {
+            const key = this.options.matchKey(row);
+            const event = this.pending.get(key);
+            if (!event)
+                continue;
+            Object.assign(row, event.patch);
+            this.pending.delete(key);
+            changed = true;
+            this.options.onApplied?.(row, event);
+        }
+        if (changed) {
+            this.options.setRows([...this.options.getRows()]);
+        }
+        return changed;
+    }
+    handleEvent(raw) {
+        const event = this.options.parse(raw);
+        if (!event)
+            return;
+        const row = this.options.getRows().find((r) => this.options.matchKey(r) === event.key);
+        if (!row) {
+            // Not in the list yet (e.g. just-created record whose list read lags):
+            // keep only the latest state per key and schedule a background sync.
+            this.pending.set(event.key, event);
+            this.scheduleSync();
+            return;
+        }
+        this.idleSyncs = 0;
+        Object.assign(row, event.patch);
+        this.options.setRows([...this.options.getRows()]);
+        this.options.onApplied?.(row, event);
+    }
+    scheduleSync() {
+        const idleCap = this.options.idleCap ?? 3;
+        if (this.syncTimer || this.stopped || this.idleSyncs >= idleCap)
+            return;
+        this.syncTimer = setTimeout(async () => {
+            this.syncTimer = null;
+            await this.syncFromServer();
+        }, this.options.debounceMs ?? 1200);
+    }
+    async syncFromServer() {
+        try {
+            const result = await this.options.fetchList();
+            if (this.stopped || !result)
+                return;
+            const existingByIdentity = new Map(this.options.getRows().map((r) => [this.options.identityKey(r), r]));
+            const merged = result.rows.map((item) => {
+                const existing = existingByIdentity.get(this.options.identityKey(item));
+                if (existing) {
+                    Object.assign(existing, item); // reuse the object → stable identity
+                    return existing;
+                }
+                return item;
+            });
+            this.options.setRows(merged);
+            if (result.total !== undefined) {
+                this.options.onTotal?.(result.total);
+            }
+            const applied = this.applyPending();
+            this.idleSyncs = applied ? 0 : this.idleSyncs + 1;
+            if (this.pending.size) {
+                this.scheduleSync();
+            }
+        }
+        catch {
+            // Background sync is best-effort; the next event retries.
+            this.idleSyncs += 1;
+        }
+    }
+}
+
+const NEUTRAL_TEXT = 'text-text-secondary';
+const NEUTRAL_BG = 'bg-bg-hover';
+function hasVal(v) {
+    if (_.isNil(v))
+        return false;
+    const s = String(v).trim();
+    return s !== '' && s !== '-' && s !== '--';
+}
+/** Severity / risk-level string → tone (Critical & High → danger, Medium → warning, Low → success). */
+function severityTone(value) {
+    if (!hasVal(value))
+        return null;
+    const t = FxUtils.getTagClass(String(value), true);
+    return t === 'default' || t === 'discovery' ? null : t;
+}
+/**
+ * CVSS-style 0–10 score → tone, following the CVSS v3 qualitative bands
+ * (≥9 Critical, ≥7 High, ≥4 Medium, else Low). Backends occasionally send a
+ * 0–100 scale, so values > 10 are normalised down by /10.
+ */
+function scoreTone(score) {
+    let n = Number(score);
+    if (!_.isFinite(n) || n <= 0)
+        return null;
+    if (n > 10)
+        n = n / 10;
+    if (n >= 9)
+        return 'critical';
+    if (n >= 7)
+        return 'danger';
+    if (n >= 4)
+        return 'warning';
+    return 'success';
+}
+/**
+ * Count of "bad" things → tone: 0 is good (success), anything positive is bad.
+ * `positiveTone` sets how severe a non-zero count reads (default `danger`;
+ * pass `critical` for the worst metrics, `warning` for milder ones).
+ * Non-numeric values (e.g. "--") return null → neutral.
+ */
+function countTone(count, positiveTone = 'danger') {
+    const n = Number(count);
+    if (!_.isFinite(n))
+        return null;
+    return n > 0 ? positiveTone : 'success';
+}
+/** Tone → text colour class, with a neutral fallback when there is no value. */
+function toneText(tone) {
+    return tone ? `text-${tone}` : NEUTRAL_TEXT;
+}
+/** Tone → background colour class, with a neutral fallback when there is no value. */
+function toneBg(tone) {
+    return tone ? `bg-${tone}` : NEUTRAL_BG;
+}
+/** Tone → soft pill/badge classes (tinted bg + matching text), neutral fallback. */
+function toneBadge(tone) {
+    return tone ? `bg-${tone}/10 text-${tone}` : `${NEUTRAL_BG} text-text-secondary`;
+}
+/**
+ * Tone → resolved CSS colour string for ECharts / canvas where a Tailwind
+ * class can't be used (e.g. per-slice pie `itemStyle.color`). Emits the
+ * legacy comma syntax — see FxUtils.convertColorFromVariable.
+ */
+function toneColor(tone, alpha = 1) {
+    const name = tone ? `--${tone}` : '--text-secondary';
+    return FxUtils.convertColorFromVariable(name, alpha, { legacyCommaSyntax: true });
+}
+
 class FxValidators {
     /**
      * Name fields: firstName, lastName, groupName, projectName, displayName
@@ -974,7 +1409,7 @@ class FxValidators {
     static validateCode(value) {
         if (!value || value.trim() === '')
             return null;
-        const regex = /^[a-zA-Z0-9_\-]{1,50}$/;
+        const regex = /^[a-zA-Z0-9_-]{1,50}$/;
         return regex.test(value) ? null : { invalidCode: 'Only letters, numbers, hyphens, and underscores are allowed (max 50 characters)' };
     }
     /**
@@ -984,7 +1419,7 @@ class FxValidators {
     static validateDomain(value) {
         if (!value || value.trim() === '')
             return null;
-        const regex = /^([a-zA-Z0-9]([a-zA-Z0-9\-]*[a-zA-Z0-9])?\.)+[a-zA-Z]{2,}(:\d{1,5})?$/;
+        const regex = /^([a-zA-Z0-9]([a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z]{2,}(:\d{1,5})?$/;
         return regex.test(value) ? null : { invalidDomain: 'Please enter a valid domain (e.g., mail.example.com)' };
     }
     /**
@@ -1109,13 +1544,13 @@ class TranslationService {
     onLanguageChange(callback) {
         this.currentLang$.subscribe(callback);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TranslationService, deps: [{ token: i1$2.TranslateService }, { token: i2$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TranslationService, deps: [{ token: i1$3.TranslateService }, { token: i2.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TranslationService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TranslationService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1$2.TranslateService }, { type: i2$1.HttpClient }] });
+        }], ctorParameters: () => [{ type: i1$3.TranslateService }, { type: i2.HttpClient }] });
 
 class PermissionService {
     permissions = [];
@@ -1160,6 +1595,7 @@ class HasPermissionDirective {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: HasPermissionDirective, decorators: [{
             type: Directive,
             args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector -- renaming is a breaking change for all host-app templates
                     selector: '[hasPermission]'
                 }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }, { type: PermissionService }], propDecorators: { hasPermission: [{
@@ -1196,15 +1632,16 @@ class TrimOnBlurDirective {
             native.dispatchEvent(ev);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TrimOnBlurDirective, deps: [{ token: i0.ElementRef }, { token: i1$3.NgControl }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TrimOnBlurDirective, deps: [{ token: i0.ElementRef }, { token: i2$1.NgControl }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.4", type: TrimOnBlurDirective, isStandalone: true, selector: "[appTrimOnBlur]", inputs: { collapseWhitespace: ["appTrimOnBlurCollapse", "collapseWhitespace"] }, host: { listeners: { "blur": "onBlur()" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TrimOnBlurDirective, decorators: [{
             type: Directive,
             args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector -- renaming is a breaking change for all host-app templates
                     selector: '[appTrimOnBlur]'
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$3.NgControl }], propDecorators: { collapseWhitespace: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i2$1.NgControl }], propDecorators: { collapseWhitespace: [{
                 type: Input,
                 args: ['appTrimOnBlurCollapse']
             }], onBlur: [{
@@ -1237,27 +1674,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 }]
         }], ctorParameters: () => [{ type: PermissionService }, { type: i1$4.Router }] });
 
-class FxStorageService {
-    resolve(key, value) {
-        if (FxUtils.isNotNull(value)) {
-            localStorage.setItem(key, JSON.stringify(value));
-        }
-        const loc = localStorage.getItem(key);
-        return loc ? JSON.parse(loc) : undefined;
-    }
-    remove(key) {
-        localStorage.removeItem(key);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FxStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FxStorageService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FxStorageService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
 class AuthStateService {
     _isLoggedIn$ = new BehaviorSubject(null);
     isLoggedIn$ = this._isLoggedIn$.asObservable();
@@ -1288,7 +1704,13 @@ class AuthInterceptor {
         this.authState = authState;
     }
     intercept(req, next) {
-        const cloned = req.clone({ withCredentials: true });
+        // Multi-tenant: all tenant domains hit one shared API endpoint, so the
+        // backend can no longer resolve the tenant from the Host header. Send the
+        // originating domain explicitly for tenant resolution.
+        const cloned = req.clone({
+            withCredentials: true,
+            setHeaders: { 'X-Tenant-Domain': window.location.hostname },
+        });
         return next.handle(cloned).pipe(catchError((error) => {
             if (error.status === 401 && !this.handlingUnauthorized) {
                 this.handlingUnauthorized = true;
@@ -1388,7 +1810,7 @@ class QuillStyleLoaderService {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: QuillStyleLoaderService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: Object, decorators: [{
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
                 }] }] });
@@ -1448,20 +1870,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
 class NotificationService {
     hubConnection = null;
     connectionStatus = 'disconnected';
-    constructor() { }
     /**
-     * Connect to SignalR Hub
-     * @param hubUrl - The URL of the SignalR hub
-     * @returns Promise that resolves when connected
+     * Single source of truth for subscriptions. The hub connection gets exactly
+     * one dispatcher per event, so:
+     * - off(event, callback) can remove one subscriber without nuking the rest
+     *   (hubConnection.off(event) removes every handler for the event);
+     * - handlers registered before connect() are attached once connected;
+     * - handlers survive a re-connect that builds a new HubConnection.
+     */
+    handlers = new Map();
+    connectPromise = null;
+    lastHubUrl = null;
+    lastOptions;
+    manualDisconnect = false;
+    restartAttempts = 0;
+    restartTimer = null;
+    /**
+     * Connect to SignalR Hub. Overlapping calls share the same in-flight
+     * promise instead of building two competing connections.
      */
     async connect(hubUrl, options) {
         if (this.hubConnection && this.connectionStatus === 'connected') {
-            console.log('Already connected to SignalR hub');
             return;
         }
+        if (this.connectPromise) {
+            return this.connectPromise;
+        }
+        this.connectPromise = this.doConnect(hubUrl, options).finally(() => {
+            this.connectPromise = null;
+        });
+        return this.connectPromise;
+    }
+    async doConnect(hubUrl, options) {
         try {
             this.connectionStatus = 'connecting';
-            console.log(`Connecting to SignalR hub: ${hubUrl}`);
+            this.manualDisconnect = false;
+            this.lastHubUrl = hubUrl;
+            this.lastOptions = options;
             const connectionOptions = {
                 skipNegotiation: true,
                 transport: signalR.HttpTransportType.WebSockets,
@@ -1473,29 +1918,33 @@ class NotificationService {
                 .withAutomaticReconnect()
                 .configureLogging(signalR.LogLevel.Information)
                 .build();
-            // Handle connection closed
+            // A new HubConnection knows nothing about previous listeners:
+            // re-attach one dispatcher per known event.
+            for (const eventName of this.handlers.keys()) {
+                this.attachDispatcher(eventName);
+            }
+            // Fires when the automatic-reconnect policy is exhausted (or the
+            // server closes the socket). Restart with backoff unless the app
+            // disconnected on purpose.
             this.hubConnection.onclose((error) => {
                 this.connectionStatus = 'disconnected';
                 if (error) {
                     console.error('SignalR connection closed with error:', error);
                 }
-                else {
-                    console.log('SignalR connection closed');
+                if (!this.manualDisconnect) {
+                    this.scheduleRestart();
                 }
             });
-            // Handle reconnecting
-            this.hubConnection.onreconnecting((error) => {
+            this.hubConnection.onreconnecting(() => {
                 this.connectionStatus = 'connecting';
-                console.log('SignalR reconnecting...', error);
             });
-            // Handle reconnected
-            this.hubConnection.onreconnected((connectionId) => {
+            this.hubConnection.onreconnected(() => {
                 this.connectionStatus = 'connected';
-                console.log('SignalR reconnected. Connection ID:', connectionId);
+                this.restartAttempts = 0;
             });
             await this.hubConnection.start();
             this.connectionStatus = 'connected';
-            console.log('SignalR connected successfully. Connection ID:', this.hubConnection.connectionId);
+            this.restartAttempts = 0;
         }
         catch (error) {
             this.connectionStatus = 'disconnected';
@@ -1503,15 +1952,34 @@ class NotificationService {
             throw error;
         }
     }
+    scheduleRestart() {
+        if (this.restartTimer || !this.lastHubUrl) {
+            return;
+        }
+        const delay = Math.min(30_000, 1_000 * 2 ** this.restartAttempts++);
+        this.restartTimer = setTimeout(async () => {
+            this.restartTimer = null;
+            try {
+                await this.connect(this.lastHubUrl, this.lastOptions);
+            }
+            catch {
+                this.scheduleRestart();
+            }
+        }, delay);
+    }
     /**
-     * Disconnect from SignalR Hub
+     * Disconnect from SignalR Hub. Stops any pending auto-restart.
      */
     async disconnect() {
+        this.manualDisconnect = true;
+        if (this.restartTimer) {
+            clearTimeout(this.restartTimer);
+            this.restartTimer = null;
+        }
         if (this.hubConnection) {
             try {
                 await this.hubConnection.stop();
                 this.connectionStatus = 'disconnected';
-                console.log('SignalR disconnected successfully');
             }
             catch (error) {
                 console.error('Error disconnecting from SignalR hub:', error);
@@ -1519,28 +1987,73 @@ class NotificationService {
         }
     }
     /**
-     * Listen to a specific event from the server
-     * @param eventName - Name of the event to listen to
-     * @param callback - Callback function to execute when event is received
+     * Listen to a specific event from the server. Safe to call before
+     * connect(): the handler is attached once the connection is up.
      */
     on(eventName, callback) {
-        if (!this.hubConnection) {
-            console.error('Cannot listen to events: not connected to hub');
+        let set = this.handlers.get(eventName);
+        if (!set) {
+            set = new Set();
+            this.handlers.set(eventName, set);
+            this.attachDispatcher(eventName);
+        }
+        set.add(callback);
+    }
+    /**
+     * Remove listener(s) for an event.
+     * Prefer passing the callback (or using on$()): calling off(event) without
+     * one removes EVERY handler for the event, including other features'.
+     */
+    off(eventName, callback) {
+        const set = this.handlers.get(eventName);
+        if (!set) {
             return;
         }
-        console.log(`Registering listener for event: ${eventName}`);
-        this.hubConnection.on(eventName, callback);
+        if (callback) {
+            set.delete(callback);
+        }
+        else {
+            console.warn(`NotificationService.off('${eventName}') without a callback removes ALL handlers for this event. ` +
+                'Pass the callback registered with on(), or migrate to on$().');
+            set.clear();
+        }
+        if (set.size === 0) {
+            this.handlers.delete(eventName);
+            this.hubConnection?.off(eventName);
+        }
     }
     /**
-     * Remove listener for a specific event
-     * @param eventName - Name of the event to stop listening to
+     * Observable stream of an event. Teardown removes exactly this
+     * subscriber — the safe replacement for manual on()/off().
+     * Emits the event's first argument (SignalR payloads are single-arg here).
      */
-    off(eventName) {
+    on$(eventName) {
+        return new Observable((subscriber) => {
+            const callback = (payload) => subscriber.next(payload);
+            this.on(eventName, callback);
+            return () => this.off(eventName, callback);
+        });
+    }
+    attachDispatcher(eventName) {
         if (!this.hubConnection) {
             return;
         }
-        console.log(`Removing listener for event: ${eventName}`);
-        this.hubConnection.off(eventName);
+        this.hubConnection.on(eventName, (...args) => this.dispatch(eventName, args));
+    }
+    dispatch(eventName, args) {
+        const set = this.handlers.get(eventName);
+        if (!set) {
+            return;
+        }
+        // Copy: a callback may add/remove handlers while we iterate.
+        for (const callback of [...set]) {
+            try {
+                callback(...args);
+            }
+            catch (error) {
+                console.error(`Error in '${eventName}' notification handler:`, error);
+            }
+        }
     }
     /**
      * Invoke a method on the server
@@ -1552,7 +2065,6 @@ class NotificationService {
             throw new Error('Not connected to SignalR hub');
         }
         try {
-            console.log(`Invoking method: ${methodName}`, args);
             return await this.hubConnection.invoke(methodName, ...args);
         }
         catch (error) {
@@ -1580,7 +2092,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [] });
+        }] });
 
 const MATERIAL_MODULE = [
     MatSelectModule,
@@ -1616,7 +2128,7 @@ class ButtonComponent {
             this.clicked.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ButtonComponent, isStandalone: false, selector: "fx-ui-button", inputs: { label: "label", disabled: "disabled", buttonVariant: "buttonVariant", icon: "icon", class: "class", loading: "loading" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n  [class]=\"class\"\n  [ngClass]=\"{\n    'btn-default': buttonVariant === 'default',\n    'btn-primary': buttonVariant === 'primary',\n    'btn-success': buttonVariant === 'success',\n    'btn-alternative': buttonVariant === 'alternative',\n  }\"\n  [disabled]=\"disabled || loading\"\n  (click)=\"onClick()\"\n>\n  @if (loading) {\n    <div class=\"flex w-full items-center justify-center\">\n      <svg\n        [attr.fill]=\"\n          buttonVariant !== 'alternative' ? 'rgb(var(--text-primary))' : 'rgb(var(--primary))'\n        \"\n        width=\"20\"\n        height=\"20\"\n        viewBox=\"0 0 24 24\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <circle cx=\"4\" cy=\"12\" r=\"0\">\n          <animate\n            begin=\"0;spinner_z0Or.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"0;3\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_OLMs.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"4;12\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_UHR2.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"12;20\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_lo66\"\n            begin=\"spinner_Aguh.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"3;0\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_z0Or\"\n            begin=\"spinner_lo66.end\"\n            attributeName=\"cx\"\n            dur=\"0.001s\"\n            values=\"20;4\"\n            fill=\"freeze\"\n          />\n        </circle>\n        <circle cx=\"4\" cy=\"12\" r=\"3\">\n          <animate\n            begin=\"0;spinner_z0Or.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"4;12\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_OLMs.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"12;20\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_JsnR\"\n            begin=\"spinner_UHR2.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"3;0\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_Aguh\"\n            begin=\"spinner_JsnR.end\"\n            attributeName=\"cx\"\n            dur=\"0.001s\"\n            values=\"20;4\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_Aguh.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"0;3\"\n            fill=\"freeze\"\n          />\n        </circle>\n        <circle cx=\"12\" cy=\"12\" r=\"3\">\n          <animate\n            begin=\"0;spinner_z0Or.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"12;20\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_hSjk\"\n            begin=\"spinner_OLMs.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"3;0\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_UHR2\"\n            begin=\"spinner_hSjk.end\"\n            attributeName=\"cx\"\n            dur=\"0.001s\"\n            values=\"20;4\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_UHR2.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"0;3\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_Aguh.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"4;12\"\n            fill=\"freeze\"\n          />\n        </circle>\n        <circle cx=\"20\" cy=\"12\" r=\"3\">\n          <animate\n            id=\"spinner_4v5M\"\n            begin=\"0;spinner_z0Or.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"3;0\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_OLMs\"\n            begin=\"spinner_4v5M.end\"\n            attributeName=\"cx\"\n            dur=\"0.001s\"\n            values=\"20;4\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_OLMs.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"0;3\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_UHR2.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"4;12\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_Aguh.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"12;20\"\n            fill=\"freeze\"\n          />\n        </circle>\n      </svg>\n    </div>\n  } @else {\n    <ng-container>\n      <div class=\"flex items-center justify-center gap-small\">\n        @if (icon) {\n          <fx-ui-hero-icon\n            [icon]=\"icon\"\n            [size]=\"20\"\n            class=\"flex\"\n            [ngClass]=\"{\n              'text-text-inverse': buttonVariant === 'default',\n              'text-text-primary': buttonVariant === 'alternative',\n              'text-white': buttonVariant === 'primary' || buttonVariant === 'success',\n            }\"\n          ></fx-ui-hero-icon>\n        }\n        @if (label) {\n          <div>{{ label }}</div>\n        }\n      </div>\n    </ng-container>\n  }\n</button>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ButtonComponent, isStandalone: false, selector: "fx-ui-button", inputs: { label: "label", disabled: "disabled", buttonVariant: "buttonVariant", icon: "icon", class: "class", loading: "loading" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n  [class]=\"class\"\n  [ngClass]=\"{\n    'btn-default': buttonVariant === 'default',\n    'btn-primary': buttonVariant === 'primary',\n    'btn-success': buttonVariant === 'success',\n    'btn-alternative': buttonVariant === 'alternative',\n  }\"\n  [disabled]=\"disabled || loading\"\n  (click)=\"onClick()\"\n>\n  @if (loading) {\n    <div class=\"flex w-full items-center justify-center\">\n      <svg\n        [attr.fill]=\"\n          buttonVariant !== 'alternative' ? 'rgb(var(--text-primary))' : 'rgb(var(--primary))'\n        \"\n        width=\"20\"\n        height=\"20\"\n        viewBox=\"0 0 24 24\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <circle cx=\"4\" cy=\"12\" r=\"0\">\n          <animate\n            begin=\"0;spinner_z0Or.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"0;3\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_OLMs.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"4;12\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_UHR2.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"12;20\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_lo66\"\n            begin=\"spinner_Aguh.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"3;0\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_z0Or\"\n            begin=\"spinner_lo66.end\"\n            attributeName=\"cx\"\n            dur=\"0.001s\"\n            values=\"20;4\"\n            fill=\"freeze\"\n          />\n        </circle>\n        <circle cx=\"4\" cy=\"12\" r=\"3\">\n          <animate\n            begin=\"0;spinner_z0Or.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"4;12\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_OLMs.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"12;20\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_JsnR\"\n            begin=\"spinner_UHR2.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"3;0\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_Aguh\"\n            begin=\"spinner_JsnR.end\"\n            attributeName=\"cx\"\n            dur=\"0.001s\"\n            values=\"20;4\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_Aguh.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"0;3\"\n            fill=\"freeze\"\n          />\n        </circle>\n        <circle cx=\"12\" cy=\"12\" r=\"3\">\n          <animate\n            begin=\"0;spinner_z0Or.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"12;20\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_hSjk\"\n            begin=\"spinner_OLMs.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"3;0\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_UHR2\"\n            begin=\"spinner_hSjk.end\"\n            attributeName=\"cx\"\n            dur=\"0.001s\"\n            values=\"20;4\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_UHR2.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"0;3\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_Aguh.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"4;12\"\n            fill=\"freeze\"\n          />\n        </circle>\n        <circle cx=\"20\" cy=\"12\" r=\"3\">\n          <animate\n            id=\"spinner_4v5M\"\n            begin=\"0;spinner_z0Or.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"3;0\"\n            fill=\"freeze\"\n          />\n          <animate\n            id=\"spinner_OLMs\"\n            begin=\"spinner_4v5M.end\"\n            attributeName=\"cx\"\n            dur=\"0.001s\"\n            values=\"20;4\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_OLMs.end\"\n            attributeName=\"r\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"0;3\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_UHR2.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"4;12\"\n            fill=\"freeze\"\n          />\n          <animate\n            begin=\"spinner_Aguh.end\"\n            attributeName=\"cx\"\n            calcMode=\"spline\"\n            dur=\"0.5s\"\n            keySplines=\".36,.6,.31,1\"\n            values=\"12;20\"\n            fill=\"freeze\"\n          />\n        </circle>\n      </svg>\n    </div>\n  } @else {\n    <ng-container>\n      <div class=\"flex items-center justify-center gap-small\">\n        @if (icon) {\n          <fx-ui-hero-icon\n            [icon]=\"icon\"\n            [size]=\"20\"\n            class=\"flex\"\n            [ngClass]=\"{\n              'text-text-inverse': buttonVariant === 'default',\n              'text-text-primary': buttonVariant === 'alternative',\n              'text-white': buttonVariant === 'primary' || buttonVariant === 'success',\n            }\"\n          ></fx-ui-hero-icon>\n        }\n        @if (label) {\n          <div>{{ label }}</div>\n        }\n      </div>\n    </ng-container>\n  }\n</button>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
@@ -2041,17 +2553,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 args: ['window:theme-changed']
             }] } });
 
-let FxComponent = class FxComponent {
-    ngControl;
+class FxComponent {
+    /**
+     * Injected via inject() rather than a constructor parameter: parameter
+     * decorators (@Optional/@Self) are NOT inherited by subclasses, which used
+     * to make every control crash when used without a form binding, or silently
+     * bind to an ancestor's NgControl.
+     */
+    ngControl = inject(NgControl, { optional: true, self: true });
+    disabled = false;
     value;
-    onChange = (value) => { };
-    onTouched = () => { };
+    onChange = () => undefined;
+    onTouched = () => undefined;
     validationError;
     errorMessages;
-    constructor(ngControl) {
-        this.ngControl = ngControl;
-        if (ngControl)
-            ngControl.valueAccessor = this;
+    constructor() {
+        if (this.ngControl)
+            this.ngControl.valueAccessor = this;
     }
     setValue(value) {
         if (this.onChange) {
@@ -2064,7 +2582,9 @@ let FxComponent = class FxComponent {
         }
     }
     writeValue(value) {
-        this.value = value ?? '';
+        // Pass through as-is. Coercing null to '' here broke boolean/number
+        // controls; string controls that want '' as their empty value override.
+        this.value = value;
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -2072,6 +2592,9 @@ let FxComponent = class FxComponent {
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
     get invalid() {
         return !!(this.ngControl?.invalid && this.ngControl?.touched);
     }
@@ -2093,20 +2616,22 @@ let FxComponent = class FxComponent {
         const control = this.ngControl?.control;
         if (!control)
             return;
-        control.setErrors(error);
+        control.setErrors({ ...control.errors, ...error });
     }
+    /**
+     * Removes only the errors this component set imperatively via setErrors().
+     * Errors owned by the validator pipeline (built-in or custom validators)
+     * are left untouched.
+     */
     clearErrors() {
         const control = this.ngControl?.control;
-        if (!control)
+        if (!control || !this.validationError)
             return;
-        const errors = control.errors || {};
-        const builtInErrorKeys = ['required', 'minlength', 'maxlength', 'email', 'pattern'];
-        const remaining = {};
-        for (const key of builtInErrorKeys) {
-            if (errors[key] !== undefined) {
-                remaining[key] = errors[key];
-            }
+        const remaining = { ...(control.errors || {}) };
+        for (const key of Object.keys(this.validationError)) {
+            delete remaining[key];
         }
+        this.validationError = undefined;
         control.setErrors(Object.keys(remaining).length ? remaining : null);
     }
     getErrorMessage(label) {
@@ -2116,33 +2641,35 @@ let FxComponent = class FxComponent {
         const defaultMessages = {
             required: `${displayLabel} is required`,
             minlength: `${displayLabel} minimum length is ${this.errors['minlength']?.requiredLength}`,
-            email: "Please enter a valid email"
+            email: 'Please enter a valid email',
         };
         const messages = { ...defaultMessages, ...this.validationError, ...this.errorMessages };
         const firstKey = Object.keys(this.errors)[0];
         return messages[firstKey] || `Invalid ${label ?? 'value'}`;
     }
-};
-FxComponent = __decorate([
-    __param(0, Optional()),
-    __param(0, Self())
-], FxComponent);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FxComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.4", type: FxComponent, isStandalone: true, inputs: { disabled: "disabled" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FxComponent, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [], propDecorators: { disabled: [{
+                type: Input
+            }] } });
 
 class CheckboxComponent extends FxComponent {
     ref;
     label = '';
-    disabled = false;
     rounded;
     valueChange = new EventEmitter();
-    constructor(ngControl, ref) {
-        super(ngControl);
+    constructor(ref) {
+        super();
         this.ref = ref;
     }
     ngAfterViewInit() {
         this.ref.detectChanges();
     }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
+    writeValue(value) {
+        this.value = value ?? false;
     }
     onInputChange(event) {
         const checked = event.target.checked;
@@ -2153,15 +2680,13 @@ class CheckboxComponent extends FxComponent {
     markTouched() {
         this.onTouched();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CheckboxComponent, deps: [{ token: i1$3.NgControl }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: CheckboxComponent, isStandalone: false, selector: "fx-ui-checkbox", inputs: { label: "label", disabled: "disabled", rounded: "rounded" }, outputs: { valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<label\n  class=\"flex items-center gap-normal cursor-pointer select-none\"\n  [class.opacity-50]=\"disabled\"\n  [class.cursor-not-allowed]=\"disabled\"\n>\n  <input\n    type=\"checkbox\"\n    class=\"hidden\"\n    [checked]=\"value\"\n    [disabled]=\"disabled\"\n    (change)=\"onInputChange($event)\"\n    (blur)=\"onTouched()\"\n  />\n  <span\n    class=\"relative w-4 h-4 border rounded-full transition-colors duration-150 shrink-0\"\n    [ngClass]=\"{\n      'rounded-full': rounded,\n      'rounded-sm': !rounded,\n      'border-border-strong bg-transparent': !value,\n      'border-transparent bg-gradient-primary': value,\n    }\"\n  >\n    <!-- Keep SVG space reserved always -->\n    <span class=\"absolute inset-0 flex items-center justify-center\">\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        class=\"text-white w-4 h-4 transition-opacity duration-150\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"3\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        [style.opacity]=\"value ? 1 : 0\"\n      >\n        <path d=\"M5 13l4 4L19 7\" />\n      </svg>\n    </span>\n  </span>\n\n  @if (label) {\n    <span class=\"mb-0 txt-field-label\">{{ label }}</span>\n  }\n</label>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: CheckboxComponent, isStandalone: false, selector: "fx-ui-checkbox", inputs: { label: "label", rounded: "rounded" }, outputs: { valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<label\n  class=\"flex items-center gap-normal cursor-pointer select-none\"\n  [class.opacity-50]=\"disabled\"\n  [class.cursor-not-allowed]=\"disabled\"\n>\n  <input\n    type=\"checkbox\"\n    class=\"hidden\"\n    [checked]=\"value\"\n    [disabled]=\"disabled\"\n    (change)=\"onInputChange($event)\"\n    (blur)=\"onTouched()\"\n  />\n  <span\n    class=\"relative w-4 h-4 border rounded-full transition-colors duration-150 shrink-0\"\n    [ngClass]=\"{\n      'rounded-full': rounded,\n      'rounded-sm': !rounded,\n      'border-border-strong bg-transparent': !value,\n      'border-transparent bg-gradient-primary': value,\n    }\"\n  >\n    <!-- Keep SVG space reserved always -->\n    <span class=\"absolute inset-0 flex items-center justify-center\">\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        class=\"text-white w-4 h-4 transition-opacity duration-150\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"3\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        [style.opacity]=\"value ? 1 : 0\"\n      >\n        <path d=\"M5 13l4 4L19 7\" />\n      </svg>\n    </span>\n  </span>\n\n  @if (label) {\n    <span class=\"mb-0 txt-field-label\">{{ label }}</span>\n  }\n</label>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fx-ui-checkbox', standalone: false, template: "<label\n  class=\"flex items-center gap-normal cursor-pointer select-none\"\n  [class.opacity-50]=\"disabled\"\n  [class.cursor-not-allowed]=\"disabled\"\n>\n  <input\n    type=\"checkbox\"\n    class=\"hidden\"\n    [checked]=\"value\"\n    [disabled]=\"disabled\"\n    (change)=\"onInputChange($event)\"\n    (blur)=\"onTouched()\"\n  />\n  <span\n    class=\"relative w-4 h-4 border rounded-full transition-colors duration-150 shrink-0\"\n    [ngClass]=\"{\n      'rounded-full': rounded,\n      'rounded-sm': !rounded,\n      'border-border-strong bg-transparent': !value,\n      'border-transparent bg-gradient-primary': value,\n    }\"\n  >\n    <!-- Keep SVG space reserved always -->\n    <span class=\"absolute inset-0 flex items-center justify-center\">\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        class=\"text-white w-4 h-4 transition-opacity duration-150\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"3\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        [style.opacity]=\"value ? 1 : 0\"\n      >\n        <path d=\"M5 13l4 4L19 7\" />\n      </svg>\n    </span>\n  </span>\n\n  @if (label) {\n    <span class=\"mb-0 txt-field-label\">{{ label }}</span>\n  }\n</label>\n" }]
-        }], ctorParameters: () => [{ type: i1$3.NgControl }, { type: i0.ChangeDetectorRef }], propDecorators: { label: [{
-                type: Input
-            }], disabled: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { label: [{
                 type: Input
             }], rounded: [{
                 type: Input
@@ -2201,25 +2726,20 @@ class DatetimePicker extends FxComponent {
     placeholder = 'Select date and time';
     required = false;
     type = 'both';
-    disabled = false;
     minDate;
     maxDate;
     errorMessages = {};
     validateFn;
     startAt;
-    constructor(ngControl, ref) {
-        super(ngControl);
+    constructor(ref) {
+        super();
         this.ref = ref;
     }
-    ngOnInit() { }
     ngAfterViewInit() {
         setTimeout(() => {
             this.ref.detectChanges();
         });
     }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-    }
     onBlur() {
         this.onTouched();
         this.validate(this.validateFn);
@@ -2236,13 +2756,13 @@ class DatetimePicker extends FxComponent {
         this.onChange(date);
         this.onTouched();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DatetimePicker, deps: [{ token: i1$3.NgControl }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: DatetimePicker, isStandalone: false, selector: "fx-ui-datetime-picker", inputs: { label: "label", placeholder: "placeholder", required: "required", type: "type", disabled: "disabled", minDate: "minDate", maxDate: "maxDate", errorMessages: "errorMessages", validateFn: "validateFn" }, usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col mb-4 w-full text-left\">\n  @if (label) {\n    <label class=\"txt-field-label\">\n      {{ label }}\n      <span *ngIf=\"required\" class=\"txt-required\">*</span>\n    </label>\n  }\n\n  <div class=\"relative\">\n    <input\n      [owlDateTimeTrigger]=\"picker\"\n      [owlDateTime]=\"picker\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [min]=\"minDate\"\n      [max]=\"maxDate\"\n      (blur)=\"onBlur()\"\n      [value]=\"value\"\n      readonly\n      class=\"input-default pr-9\"\n    />\n    <span\n      [owlDateTimeTrigger]=\"picker\"\n      class=\"absolute inset-y-0 right-0 flex items-center pr-2.5 cursor-pointer text-text-placeholder hover:text-text-primary transition-colors\"\n    >\n      <fx-ui-hero-icon icon=\"calendar\" [size]=\"20\" class=\"text-text-primary\"></fx-ui-hero-icon>\n    </span>\n  </div>\n  <owl-date-time\n    #picker\n    [startAt]=\"startAt\"\n    [pickerType]=\"type\"\n    (afterPickerClosed)=\"onValueChange($event)\"\n  ></owl-date-time>\n  <div *ngIf=\"invalid\" class=\"txt-invalid\">{{ getErrorMessage(label) }}</div>\n</div>\n", styles: ["::ng-deep .owl-dt-container{border-radius:.75rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(var(--border-default) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary) / var(--tw-bg-opacity, 1));--tw-shadow: 0 20px 25px -5px rgb(var(--shadow-color) / .1), 0 10px 10px -5px rgb(var(--shadow-color) / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 10px 10px -5px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);width:320px!important}::ng-deep .owl-dt-calendar-table{width:100%;border-collapse:collapse}::ng-deep .owl-dt-calendar-table :not(.owl-dt-calendar-cell-disabled):hover>.owl-dt-calendar-cell-content:not(.owl-dt-calendar-cell-selected){--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary-hover) / var(--tw-bg-opacity, 1))}::ng-deep .owl-dt-calendar-table .owl-dt-calendar-cell-content{color:rgb(var(--text-primary))}::ng-deep .owl-dt-calendar-table .owl-dt-calendar-cell-selected{background-color:rgb(var(--primary))!important;color:#fff!important}::ng-deep .owl-dt-calendar-table .owl-dt-calendar-cell-today:not(.owl-dt-calendar-cell-selected){border-color:rgb(var(--primary))!important}::ng-deep .owl-dt-calendar-table .owl-dt-calendar-cell-disabled>.owl-dt-calendar-cell-content{color:rgb(var(--text-placeholder))!important;opacity:.6!important;cursor:not-allowed;pointer-events:none}::ng-deep .owl-dt-calendar-table .owl-dt-calendar-cell-content.owl-dt-calendar-cell-out{color:rgb(var(--text-secondary))!important;opacity:.6!important}::ng-deep .owl-dt-timer-content .owl-dt-timer-input{border-radius:.5rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(var(--border-strong) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(var(--text-primary) / var(--tw-text-opacity, 1))}::ng-deep .owl-dt-control-period-button .owl-dt-control-button-arrow{display:none}::ng-deep .owl-dt-container-buttons{height:auto!important;color:rgb(var(--text-primary))!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:8px;padding:8px 12px;border-top:1px solid rgb(var(--border-default))}::ng-deep .owl-dt-container-buttons .owl-dt-container-control-button{width:auto!important;height:32px!important;border-radius:6px!important;width:60px!important;padding-top:4px!important;padding-bottom:4px!important;font-size:13px!important;font-weight:600!important;border:1px solid rgb(var(--border-default))!important;background-color:rgb(var(--bg-primary))!important;color:rgb(var(--text-primary))!important;cursor:pointer;transition:opacity .15s ease}::ng-deep .owl-dt-container-buttons .owl-dt-container-control-button:hover{background-color:rgb(var(--bg-hover))!important}::ng-deep .owl-dt-container-buttons .owl-dt-container-control-button:last-child{background-color:rgb(var(--primary))!important;border-color:rgb(var(--primary))!important;color:#fff!important}::ng-deep .owl-dt-container-buttons .owl-dt-container-control-button:last-child:hover{opacity:.85}::ng-deep .owl-dt-container-buttons .owl-dt-container-control-button .owl-dt-control-button-content{height:100%!important;width:100%!important;padding:0!important;background-color:transparent!important;color:inherit!important;display:flex!important;align-items:center!important;justify-content:center!important}::ng-deep .owl-dt-calendar-control-content .owl-dt-control-button-content{font-weight:500;--tw-text-opacity: 1;color:rgb(var(--text-primary) / var(--tw-text-opacity, 1))}::ng-deep .owl-dt-control-arrow-button .owl-dt-control-button-content{--tw-text-opacity: 1;color:rgb(var(--text-primary) / var(--tw-text-opacity, 1))}::ng-deep .owl-dt-calendar-table .owl-dt-calendar-header{--tw-text-opacity: 1;color:rgb(var(--text-secondary) / var(--tw-text-opacity, 1))}::ng-deep .owl-dt-calendar-table .owl-dt-calendar-header .owl-dt-weekdays th{font-weight:500;--tw-text-opacity: 1;color:rgb(var(--text-secondary) / var(--tw-text-opacity, 1))}::ng-deep .owl-dt-inline-container,::ng-deep .owl-dt-popup-container{border-radius:.75rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(var(--border-strong) / var(--tw-border-opacity, 1));--tw-shadow: 0 10px 15px -3px rgb(var(--shadow-color) / .1), 0 4px 6px -4px rgb(var(--shadow-color) / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.OwlDateTimeTriggerDirective, selector: "[owlDateTimeTrigger]", inputs: ["owlDateTimeTrigger", "disabled"] }, { kind: "directive", type: i3.OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: ["required", "owlDateTime", "owlDateTimeFilter", "_disabled", "min", "max", "selectMode", "rangeSeparator", "value", "values"], outputs: ["dateTimeChange", "dateTimeInput"], exportAs: ["owlDateTimeInput"] }, { kind: "component", type: i3.OwlDateTimeComponent, selector: "owl-date-time", inputs: ["backdropClass", "panelClass", "startAt", "endAt", "pickerType", "pickerMode", "disabled", "opened", "scrollStrategy"], outputs: ["afterPickerClosed", "beforePickerOpen", "afterPickerOpen", "yearSelected", "monthSelected", "dateSelected"], exportAs: ["owlDateTime"] }, { kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DatetimePicker, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: DatetimePicker, isStandalone: false, selector: "fx-ui-datetime-picker", inputs: { label: "label", placeholder: "placeholder", required: "required", type: "type", minDate: "minDate", maxDate: "maxDate", errorMessages: "errorMessages", validateFn: "validateFn" }, usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col mb-4 w-full text-left\">\n  @if (label) {\n    <label class=\"txt-field-label\">\n      {{ label }}\n      <span *ngIf=\"required\" class=\"txt-required\">*</span>\n    </label>\n  }\n\n  <div class=\"relative\">\n    <input\n      [owlDateTimeTrigger]=\"picker\"\n      [owlDateTime]=\"picker\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [min]=\"minDate\"\n      [max]=\"maxDate\"\n      (blur)=\"onBlur()\"\n      [value]=\"value\"\n      readonly\n      class=\"input-default pr-9\"\n    />\n    <span\n      [owlDateTimeTrigger]=\"picker\"\n      class=\"absolute inset-y-0 right-0 flex items-center pr-2.5 cursor-pointer text-text-placeholder hover:text-text-primary transition-colors\"\n    >\n      <fx-ui-hero-icon icon=\"calendar\" [size]=\"20\" class=\"text-text-primary\"></fx-ui-hero-icon>\n    </span>\n  </div>\n  <owl-date-time\n    #picker\n    [startAt]=\"startAt\"\n    [pickerType]=\"type\"\n    (afterPickerClosed)=\"onValueChange($event)\"\n  ></owl-date-time>\n  <div *ngIf=\"invalid\" class=\"txt-invalid\">{{ getErrorMessage(label) }}</div>\n</div>\n", styles: ["::ng-deep .owl-dt-container{border-radius:.75rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(var(--border-default) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary) / var(--tw-bg-opacity, 1));--tw-shadow: 0 20px 25px -5px rgb(var(--shadow-color) / .1), 0 10px 10px -5px rgb(var(--shadow-color) / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 10px 10px -5px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);width:320px!important}::ng-deep .owl-dt-calendar-table{width:100%;border-collapse:collapse}::ng-deep .owl-dt-calendar-table :not(.owl-dt-calendar-cell-disabled):hover>.owl-dt-calendar-cell-content:not(.owl-dt-calendar-cell-selected){--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary-hover) / var(--tw-bg-opacity, 1))}::ng-deep .owl-dt-calendar-table .owl-dt-calendar-cell-content{color:rgb(var(--text-primary))}::ng-deep .owl-dt-calendar-table .owl-dt-calendar-cell-selected{background-color:rgb(var(--primary))!important;color:#fff!important}::ng-deep .owl-dt-calendar-table .owl-dt-calendar-cell-today:not(.owl-dt-calendar-cell-selected){border-color:rgb(var(--primary))!important}::ng-deep .owl-dt-calendar-table .owl-dt-calendar-cell-disabled>.owl-dt-calendar-cell-content{color:rgb(var(--text-placeholder))!important;opacity:.6!important;cursor:not-allowed;pointer-events:none}::ng-deep .owl-dt-calendar-table .owl-dt-calendar-cell-content.owl-dt-calendar-cell-out{color:rgb(var(--text-secondary))!important;opacity:.6!important}::ng-deep .owl-dt-timer-content .owl-dt-timer-input{border-radius:.5rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(var(--border-strong) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(var(--text-primary) / var(--tw-text-opacity, 1))}::ng-deep .owl-dt-control-period-button .owl-dt-control-button-arrow{display:none}::ng-deep .owl-dt-container-buttons{height:auto!important;color:rgb(var(--text-primary))!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:8px;padding:8px 12px;border-top:1px solid rgb(var(--border-default))}::ng-deep .owl-dt-container-buttons .owl-dt-container-control-button{width:auto!important;height:32px!important;border-radius:6px!important;width:60px!important;padding-top:4px!important;padding-bottom:4px!important;font-size:13px!important;font-weight:600!important;border:1px solid rgb(var(--border-default))!important;background-color:rgb(var(--bg-primary))!important;color:rgb(var(--text-primary))!important;cursor:pointer;transition:opacity .15s ease}::ng-deep .owl-dt-container-buttons .owl-dt-container-control-button:hover{background-color:rgb(var(--bg-hover))!important}::ng-deep .owl-dt-container-buttons .owl-dt-container-control-button:last-child{background-color:rgb(var(--primary))!important;border-color:rgb(var(--primary))!important;color:#fff!important}::ng-deep .owl-dt-container-buttons .owl-dt-container-control-button:last-child:hover{opacity:.85}::ng-deep .owl-dt-container-buttons .owl-dt-container-control-button .owl-dt-control-button-content{height:100%!important;width:100%!important;padding:0!important;background-color:transparent!important;color:inherit!important;display:flex!important;align-items:center!important;justify-content:center!important}::ng-deep .owl-dt-calendar-control-content .owl-dt-control-button-content{font-weight:500;--tw-text-opacity: 1;color:rgb(var(--text-primary) / var(--tw-text-opacity, 1))}::ng-deep .owl-dt-control-arrow-button .owl-dt-control-button-content{--tw-text-opacity: 1;color:rgb(var(--text-primary) / var(--tw-text-opacity, 1))}::ng-deep .owl-dt-calendar-table .owl-dt-calendar-header{--tw-text-opacity: 1;color:rgb(var(--text-secondary) / var(--tw-text-opacity, 1))}::ng-deep .owl-dt-calendar-table .owl-dt-calendar-header .owl-dt-weekdays th{font-weight:500;--tw-text-opacity: 1;color:rgb(var(--text-secondary) / var(--tw-text-opacity, 1))}::ng-deep .owl-dt-inline-container,::ng-deep .owl-dt-popup-container{border-radius:.75rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(var(--border-strong) / var(--tw-border-opacity, 1));--tw-shadow: 0 10px 15px -3px rgb(var(--shadow-color) / .1), 0 4px 6px -4px rgb(var(--shadow-color) / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.OwlDateTimeTriggerDirective, selector: "[owlDateTimeTrigger]", inputs: ["owlDateTimeTrigger", "disabled"] }, { kind: "directive", type: i2$2.OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: ["required", "owlDateTime", "owlDateTimeFilter", "_disabled", "min", "max", "selectMode", "rangeSeparator", "value", "values"], outputs: ["dateTimeChange", "dateTimeInput"], exportAs: ["owlDateTimeInput"] }, { kind: "component", type: i2$2.OwlDateTimeComponent, selector: "owl-date-time", inputs: ["backdropClass", "panelClass", "startAt", "endAt", "pickerType", "pickerMode", "disabled", "opened", "scrollStrategy"], outputs: ["afterPickerClosed", "beforePickerOpen", "afterPickerOpen", "yearSelected", "monthSelected", "dateSelected"], exportAs: ["owlDateTime"] }, { kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DatetimePicker, decorators: [{
             type: Component,
             args: [{ selector: 'fx-ui-datetime-picker', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col mb-4 w-full text-left\">\n  @if (label) {\n    <label class=\"txt-field-label\">\n      {{ label }}\n      <span *ngIf=\"required\" class=\"txt-required\">*</span>\n    </label>\n  }\n\n  <div class=\"relative\">\n    <input\n      [owlDateTimeTrigger]=\"picker\"\n      [owlDateTime]=\"picker\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [min]=\"minDate\"\n      [max]=\"maxDate\"\n      (blur)=\"onBlur()\"\n      [value]=\"value\"\n      readonly\n      class=\"input-default pr-9\"\n    />\n    <span\n      [owlDateTimeTrigger]=\"picker\"\n      class=\"absolute inset-y-0 right-0 flex items-center pr-2.5 cursor-pointer text-text-placeholder hover:text-text-primary transition-colors\"\n    >\n      <fx-ui-hero-icon icon=\"calendar\" [size]=\"20\" class=\"text-text-primary\"></fx-ui-hero-icon>\n    </span>\n  </div>\n  <owl-date-time\n    #picker\n    [startAt]=\"startAt\"\n    [pickerType]=\"type\"\n    (afterPickerClosed)=\"onValueChange($event)\"\n  ></owl-date-time>\n  <div *ngIf=\"invalid\" class=\"txt-invalid\">{{ getErrorMessage(label) }}</div>\n</div>\n", styles: ["::ng-deep .owl-dt-container{border-radius:.75rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(var(--border-default) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary) / var(--tw-bg-opacity, 1));--tw-shadow: 0 20px 25px -5px rgb(var(--shadow-color) / .1), 0 10px 10px -5px rgb(var(--shadow-color) / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 10px 10px -5px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);width:320px!important}::ng-deep .owl-dt-calendar-table{width:100%;border-collapse:collapse}::ng-deep .owl-dt-calendar-table :not(.owl-dt-calendar-cell-disabled):hover>.owl-dt-calendar-cell-content:not(.owl-dt-calendar-cell-selected){--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary-hover) / var(--tw-bg-opacity, 1))}::ng-deep .owl-dt-calendar-table .owl-dt-calendar-cell-content{color:rgb(var(--text-primary))}::ng-deep .owl-dt-calendar-table .owl-dt-calendar-cell-selected{background-color:rgb(var(--primary))!important;color:#fff!important}::ng-deep .owl-dt-calendar-table .owl-dt-calendar-cell-today:not(.owl-dt-calendar-cell-selected){border-color:rgb(var(--primary))!important}::ng-deep .owl-dt-calendar-table .owl-dt-calendar-cell-disabled>.owl-dt-calendar-cell-content{color:rgb(var(--text-placeholder))!important;opacity:.6!important;cursor:not-allowed;pointer-events:none}::ng-deep .owl-dt-calendar-table .owl-dt-calendar-cell-content.owl-dt-calendar-cell-out{color:rgb(var(--text-secondary))!important;opacity:.6!important}::ng-deep .owl-dt-timer-content .owl-dt-timer-input{border-radius:.5rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(var(--border-strong) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(var(--text-primary) / var(--tw-text-opacity, 1))}::ng-deep .owl-dt-control-period-button .owl-dt-control-button-arrow{display:none}::ng-deep .owl-dt-container-buttons{height:auto!important;color:rgb(var(--text-primary))!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:8px;padding:8px 12px;border-top:1px solid rgb(var(--border-default))}::ng-deep .owl-dt-container-buttons .owl-dt-container-control-button{width:auto!important;height:32px!important;border-radius:6px!important;width:60px!important;padding-top:4px!important;padding-bottom:4px!important;font-size:13px!important;font-weight:600!important;border:1px solid rgb(var(--border-default))!important;background-color:rgb(var(--bg-primary))!important;color:rgb(var(--text-primary))!important;cursor:pointer;transition:opacity .15s ease}::ng-deep .owl-dt-container-buttons .owl-dt-container-control-button:hover{background-color:rgb(var(--bg-hover))!important}::ng-deep .owl-dt-container-buttons .owl-dt-container-control-button:last-child{background-color:rgb(var(--primary))!important;border-color:rgb(var(--primary))!important;color:#fff!important}::ng-deep .owl-dt-container-buttons .owl-dt-container-control-button:last-child:hover{opacity:.85}::ng-deep .owl-dt-container-buttons .owl-dt-container-control-button .owl-dt-control-button-content{height:100%!important;width:100%!important;padding:0!important;background-color:transparent!important;color:inherit!important;display:flex!important;align-items:center!important;justify-content:center!important}::ng-deep .owl-dt-calendar-control-content .owl-dt-control-button-content{font-weight:500;--tw-text-opacity: 1;color:rgb(var(--text-primary) / var(--tw-text-opacity, 1))}::ng-deep .owl-dt-control-arrow-button .owl-dt-control-button-content{--tw-text-opacity: 1;color:rgb(var(--text-primary) / var(--tw-text-opacity, 1))}::ng-deep .owl-dt-calendar-table .owl-dt-calendar-header{--tw-text-opacity: 1;color:rgb(var(--text-secondary) / var(--tw-text-opacity, 1))}::ng-deep .owl-dt-calendar-table .owl-dt-calendar-header .owl-dt-weekdays th{font-weight:500;--tw-text-opacity: 1;color:rgb(var(--text-secondary) / var(--tw-text-opacity, 1))}::ng-deep .owl-dt-inline-container,::ng-deep .owl-dt-popup-container{border-radius:.75rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(var(--border-strong) / var(--tw-border-opacity, 1));--tw-shadow: 0 10px 15px -3px rgb(var(--shadow-color) / .1), 0 4px 6px -4px rgb(var(--shadow-color) / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}\n"] }]
-        }], ctorParameters: () => [{ type: i1$3.NgControl }, { type: i0.ChangeDetectorRef }], propDecorators: { label: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { label: [{
                 type: Input
             }], placeholder: [{
                 type: Input
@@ -2250,8 +2770,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Input
             }], type: [{
                 type: Input
-            }], disabled: [{
-                type: Input
             }], minDate: [{
                 type: Input
             }], maxDate: [{
@@ -2363,11 +2881,11 @@ class DndUploadComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DndUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: DndUploadComponent, isStandalone: false, selector: "fx-ui-dnd-upload", inputs: { multiple: "multiple", accept: "accept", maxSizeMB: "maxSizeMB", strictSize: "strictSize", icon: "icon", accentColor: "accentColor" }, outputs: { fileDrop: "fileDrop", fileClick: "fileClick", uploadComplete: "uploadComplete", uploadError: "uploadError" }, ngImport: i0, template: "<div\n  class=\"dnd-wrapper\"\n  [ngStyle]=\"accentStyle\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n>\n  <div\n    role=\"button\"\n    tabindex=\"0\"\n    class=\"dnd-area\"\n    [class.drag-over]=\"isDragOver\"\n    (click)=\"onAreaClick(fileInput, $event)\"\n    (keydown.enter)=\"onAreaClick(fileInput, $event)\"\n  >\n    <fx-ui-hero-icon\n      [icon]=\"icon\"\n      [size]=\"40\"\n      class=\"flex dnd-icon\"\n    ></fx-ui-hero-icon>\n    <div class=\"dnd-text\">\n      <span class=\"dnd-link\">Click to upload</span>\n      <span class=\"dnd-or\">or drag and drop</span>\n    </div>\n    <div class=\"dnd-hint\">\n      @if (accept) {\n        Accepted: {{ accept }}\n      } @else {\n        Any file type\n      }\n      \u2014 Max {{ maxSizeMB }} MB\n    </div>\n\n    <input\n      #fileInput\n      type=\"file\"\n      class=\"dnd-input\"\n      [attr.multiple]=\"multiple ? '' : null\"\n      [attr.accept]=\"accept\"\n      (change)=\"onFileSelected($event)\"\n    />\n  </div>\n</div>\n", styles: [":host{--dnd-accent: rgba(var(--gradient-primary-start) / 1)}.dnd-wrapper{display:block;width:100%}.dnd-area{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:160px;padding:32px 24px;border:2px dashed color-mix(in srgb,var(--dnd-accent) 40%,transparent);border-radius:12px;background:color-mix(in srgb,var(--dnd-accent) 4%,transparent);cursor:pointer;outline:none;transition:all .2s ease;position:relative}.dnd-area:hover{border-color:color-mix(in srgb,var(--dnd-accent) 70%,transparent);background:color-mix(in srgb,var(--dnd-accent) 8%,transparent)}.dnd-area:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--dnd-accent) 20%,transparent)}.dnd-area.drag-over{border-color:var(--dnd-accent);background:color-mix(in srgb,var(--dnd-accent) 10%,transparent)}.dnd-icon{color:var(--dnd-accent)}.dnd-text{display:flex;align-items:center;gap:4px;font-size:14px;flex-wrap:wrap;justify-content:center}.dnd-link{color:var(--dnd-accent);font-weight:600;text-decoration:underline}.dnd-or{color:rgba(var(--text-secondary)/1)}.dnd-hint{font-size:12px;color:rgba(var(--text-secondary)/.7)}.dnd-input{position:absolute;width:0;height:0;overflow:hidden;opacity:0}@media(max-width:640px){.dnd-area{min-height:120px;padding:24px 16px}.dnd-text{font-size:13px}}\n"], dependencies: [{ kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: DndUploadComponent, isStandalone: false, selector: "fx-ui-dnd-upload", inputs: { multiple: "multiple", accept: "accept", maxSizeMB: "maxSizeMB", strictSize: "strictSize", icon: "icon", accentColor: "accentColor" }, outputs: { fileDrop: "fileDrop", fileClick: "fileClick", uploadComplete: "uploadComplete", uploadError: "uploadError" }, ngImport: i0, template: "<div\n  class=\"dnd-wrapper\"\n  [ngStyle]=\"accentStyle\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n>\n  <div\n    role=\"button\"\n    tabindex=\"0\"\n    class=\"dnd-area\"\n    [class.drag-over]=\"isDragOver\"\n    (click)=\"onAreaClick(fileInput, $event)\"\n    (keydown.enter)=\"onAreaClick(fileInput, $event)\"\n  >\n    <fx-ui-hero-icon\n      [icon]=\"icon\"\n      [size]=\"40\"\n      class=\"flex dnd-icon\"\n    ></fx-ui-hero-icon>\n    <div class=\"dnd-text\">\n      <span class=\"dnd-link\">Click to upload</span>\n      <span class=\"dnd-or\">or drag and drop</span>\n    </div>\n    <div class=\"dnd-hint\">\n      @if (accept) {\n        Accepted: {{ accept }}\n      } @else {\n        Any file type\n      }\n      \u2014 Max {{ maxSizeMB }} MB\n    </div>\n\n    <input\n      #fileInput\n      type=\"file\"\n      class=\"dnd-input\"\n      [attr.multiple]=\"multiple ? '' : null\"\n      [attr.accept]=\"accept\"\n      (change)=\"onFileSelected($event)\"\n    />\n  </div>\n</div>\n", styles: [":host{--dnd-accent: rgba(var(--gradient-primary-start) / 1)}.dnd-wrapper{display:block;width:100%}.dnd-area{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:160px;padding:32px 24px;border:2px dashed color-mix(in srgb,var(--dnd-accent) 40%,transparent);border-radius:12px;background:color-mix(in srgb,var(--dnd-accent) 4%,transparent);cursor:pointer;outline:none;transition:all .2s ease;position:relative}.dnd-area:hover{border-color:color-mix(in srgb,var(--dnd-accent) 70%,transparent);background:color-mix(in srgb,var(--dnd-accent) 8%,transparent)}.dnd-area:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--dnd-accent) 20%,transparent)}.dnd-area.drag-over{border-color:var(--dnd-accent);background:color-mix(in srgb,var(--dnd-accent) 10%,transparent)}.dnd-icon{color:var(--dnd-accent)}.dnd-text{display:flex;align-items:center;gap:4px;font-size:14px;flex-wrap:wrap;justify-content:center}.dnd-link{color:var(--dnd-accent);font-weight:600;text-decoration:underline}.dnd-or{color:rgba(var(--text-secondary)/1)}.dnd-hint{font-size:12px;color:rgba(var(--text-secondary)/.7)}.dnd-input{position:absolute;width:0;height:0;overflow:hidden;opacity:0}@media (max-width: 640px){.dnd-area{min-height:120px;padding:24px 16px}.dnd-text{font-size:13px}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DndUploadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fx-ui-dnd-upload', standalone: false, template: "<div\n  class=\"dnd-wrapper\"\n  [ngStyle]=\"accentStyle\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n>\n  <div\n    role=\"button\"\n    tabindex=\"0\"\n    class=\"dnd-area\"\n    [class.drag-over]=\"isDragOver\"\n    (click)=\"onAreaClick(fileInput, $event)\"\n    (keydown.enter)=\"onAreaClick(fileInput, $event)\"\n  >\n    <fx-ui-hero-icon\n      [icon]=\"icon\"\n      [size]=\"40\"\n      class=\"flex dnd-icon\"\n    ></fx-ui-hero-icon>\n    <div class=\"dnd-text\">\n      <span class=\"dnd-link\">Click to upload</span>\n      <span class=\"dnd-or\">or drag and drop</span>\n    </div>\n    <div class=\"dnd-hint\">\n      @if (accept) {\n        Accepted: {{ accept }}\n      } @else {\n        Any file type\n      }\n      \u2014 Max {{ maxSizeMB }} MB\n    </div>\n\n    <input\n      #fileInput\n      type=\"file\"\n      class=\"dnd-input\"\n      [attr.multiple]=\"multiple ? '' : null\"\n      [attr.accept]=\"accept\"\n      (change)=\"onFileSelected($event)\"\n    />\n  </div>\n</div>\n", styles: [":host{--dnd-accent: rgba(var(--gradient-primary-start) / 1)}.dnd-wrapper{display:block;width:100%}.dnd-area{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:160px;padding:32px 24px;border:2px dashed color-mix(in srgb,var(--dnd-accent) 40%,transparent);border-radius:12px;background:color-mix(in srgb,var(--dnd-accent) 4%,transparent);cursor:pointer;outline:none;transition:all .2s ease;position:relative}.dnd-area:hover{border-color:color-mix(in srgb,var(--dnd-accent) 70%,transparent);background:color-mix(in srgb,var(--dnd-accent) 8%,transparent)}.dnd-area:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--dnd-accent) 20%,transparent)}.dnd-area.drag-over{border-color:var(--dnd-accent);background:color-mix(in srgb,var(--dnd-accent) 10%,transparent)}.dnd-icon{color:var(--dnd-accent)}.dnd-text{display:flex;align-items:center;gap:4px;font-size:14px;flex-wrap:wrap;justify-content:center}.dnd-link{color:var(--dnd-accent);font-weight:600;text-decoration:underline}.dnd-or{color:rgba(var(--text-secondary)/1)}.dnd-hint{font-size:12px;color:rgba(var(--text-secondary)/.7)}.dnd-input{position:absolute;width:0;height:0;overflow:hidden;opacity:0}@media(max-width:640px){.dnd-area{min-height:120px;padding:24px 16px}.dnd-text{font-size:13px}}\n"] }]
+            args: [{ selector: 'fx-ui-dnd-upload', standalone: false, template: "<div\n  class=\"dnd-wrapper\"\n  [ngStyle]=\"accentStyle\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n>\n  <div\n    role=\"button\"\n    tabindex=\"0\"\n    class=\"dnd-area\"\n    [class.drag-over]=\"isDragOver\"\n    (click)=\"onAreaClick(fileInput, $event)\"\n    (keydown.enter)=\"onAreaClick(fileInput, $event)\"\n  >\n    <fx-ui-hero-icon\n      [icon]=\"icon\"\n      [size]=\"40\"\n      class=\"flex dnd-icon\"\n    ></fx-ui-hero-icon>\n    <div class=\"dnd-text\">\n      <span class=\"dnd-link\">Click to upload</span>\n      <span class=\"dnd-or\">or drag and drop</span>\n    </div>\n    <div class=\"dnd-hint\">\n      @if (accept) {\n        Accepted: {{ accept }}\n      } @else {\n        Any file type\n      }\n      \u2014 Max {{ maxSizeMB }} MB\n    </div>\n\n    <input\n      #fileInput\n      type=\"file\"\n      class=\"dnd-input\"\n      [attr.multiple]=\"multiple ? '' : null\"\n      [attr.accept]=\"accept\"\n      (change)=\"onFileSelected($event)\"\n    />\n  </div>\n</div>\n", styles: [":host{--dnd-accent: rgba(var(--gradient-primary-start) / 1)}.dnd-wrapper{display:block;width:100%}.dnd-area{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:160px;padding:32px 24px;border:2px dashed color-mix(in srgb,var(--dnd-accent) 40%,transparent);border-radius:12px;background:color-mix(in srgb,var(--dnd-accent) 4%,transparent);cursor:pointer;outline:none;transition:all .2s ease;position:relative}.dnd-area:hover{border-color:color-mix(in srgb,var(--dnd-accent) 70%,transparent);background:color-mix(in srgb,var(--dnd-accent) 8%,transparent)}.dnd-area:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--dnd-accent) 20%,transparent)}.dnd-area.drag-over{border-color:var(--dnd-accent);background:color-mix(in srgb,var(--dnd-accent) 10%,transparent)}.dnd-icon{color:var(--dnd-accent)}.dnd-text{display:flex;align-items:center;gap:4px;font-size:14px;flex-wrap:wrap;justify-content:center}.dnd-link{color:var(--dnd-accent);font-weight:600;text-decoration:underline}.dnd-or{color:rgba(var(--text-secondary)/1)}.dnd-hint{font-size:12px;color:rgba(var(--text-secondary)/.7)}.dnd-input{position:absolute;width:0;height:0;overflow:hidden;opacity:0}@media (max-width: 640px){.dnd-area{min-height:120px;padding:24px 16px}.dnd-text{font-size:13px}}\n"] }]
         }], propDecorators: { multiple: [{
                 type: Input
             }], accept: [{
@@ -2405,7 +2923,7 @@ class FlowConnection {
         ];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FlowConnection, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: FlowConnection, isStandalone: false, selector: "fx-ui-flow-connection", inputs: { nodes: "nodes", edges: "edges", backgroundColor: "backgroundColor", view: "view" }, ngImport: i0, template: "<vflow\n  [background]=\"{\n  type: 'solid',\n  color: `rgba(var(${backgroundColor})`\n}\"\n  [nodes]=\"nodes\"\n  [edges]=\"edges\"\n  (onConnect)=\"handleConnection($event)\"\n  [view]=\"view\"\n/>\n", styles: [""], dependencies: [{ kind: "component", type: i29.VflowComponent, selector: "vflow", inputs: ["view", "minZoom", "maxZoom", "background", "optimization", "entitiesSelectable", "keyboardShortcuts", "connection", "snapGrid", "elevateNodesOnSelect", "elevateEdgesOnSelect", "nodes", "alignmentHelper", "edges"], outputs: ["onComponentNodeEvent"] }, { kind: "directive", type: i29.ConnectionControllerDirective, selector: "[onConnect], [onReconnect], [connect], [reconnect]", outputs: ["onConnect", "connect", "onReconnect", "reconnect"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: FlowConnection, isStandalone: false, selector: "fx-ui-flow-connection", inputs: { nodes: "nodes", edges: "edges", backgroundColor: "backgroundColor", view: "view" }, ngImport: i0, template: "<vflow\n  [background]=\"{\n  type: 'solid',\n  color: `rgba(var(${backgroundColor})`\n}\"\n  [nodes]=\"nodes\"\n  [edges]=\"edges\"\n  (onConnect)=\"handleConnection($event)\"\n  [view]=\"view\"\n/>\n", styles: [""], dependencies: [{ kind: "component", type: i38.VflowComponent, selector: "vflow", inputs: ["view", "minZoom", "maxZoom", "background", "optimization", "entitiesSelectable", "keyboardShortcuts", "connection", "snapGrid", "elevateNodesOnSelect", "elevateEdgesOnSelect", "nodes", "alignmentHelper", "edges"], outputs: ["onComponentNodeEvent"] }, { kind: "directive", type: i38.ConnectionControllerDirective, selector: "[onConnect], [onReconnect], [connect], [reconnect]", outputs: ["onConnect", "connect", "onReconnect", "reconnect"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FlowConnection, decorators: [{
             type: Component,
@@ -2428,7 +2946,6 @@ class InputComponent extends FxComponent {
     placeholder = '';
     errorMessages = {};
     required = false;
-    disabled = false;
     suffixIcon;
     class;
     maxlength;
@@ -2438,15 +2955,15 @@ class InputComponent extends FxComponent {
     suffixClick = new EventEmitter();
     showPassword = false;
     validateError = null;
-    constructor(ngControl, ref) {
-        super(ngControl);
+    constructor(ref) {
+        super();
         this.ref = ref;
     }
     ngAfterViewInit() {
         this.ref.detectChanges();
     }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
+    writeValue(value) {
+        this.value = value ?? '';
     }
     onInput(event) {
         const input = event.target;
@@ -2488,13 +3005,13 @@ class InputComponent extends FxComponent {
             return 'number';
         return this.type;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: InputComponent, deps: [{ token: i1$3.NgControl }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: InputComponent, isStandalone: false, selector: "fx-ui-input", inputs: { label: "label", tooltip: "tooltip", type: "type", placeholder: "placeholder", errorMessages: "errorMessages", required: "required", disabled: "disabled", suffixIcon: "suffixIcon", class: "class", maxlength: "maxlength", validateFn: "validateFn" }, outputs: { blurred: "blurred", focused: "focused", suffixClick: "suffixClick" }, usesInheritance: true, ngImport: i0, template: "<div class=\"mb-4 text-left w-full text-text-primary\" [class]=\"class\">\n  @if (label) {\n    <label class=\"block txt-field-label\">\n      {{ label }}\n      @if (required) {\n        <span class=\"txt-required\">*</span>\n      }\n      @if (tooltip) {\n        <fx-ui-hero-icon\n          icon=\"information-circle\"\n          [size]=\"16\"\n          class=\"inline-block align-middle ml-0.5 text-text-secondary cursor-help relative -top-px\"\n          [matTooltip]=\"tooltip\"\n          matTooltipPosition=\"above\"\n          matTooltipClass=\"text-text-primary text-xs font-semibold\"\n        ></fx-ui-hero-icon>\n      }\n    </label>\n  }\n\n  <div class=\"relative\">\n    <input\n      appTrimOnBlur\n      [appTrimOnBlurCollapse]=\"true\"\n      [type]=\"displayType\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [value]=\"value\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n      (focus)=\"onFocus()\"\n      [attr.maxlength]=\"maxlength\"\n      [class]=\"type === 'otp' ? 'input-otp' : 'input-default'\"\n      [class.input-invalid]=\"invalid\"\n      [class.pr-8]=\"type === 'password' || suffixIcon\"\n      [class.txt-otp-input]=\"type === 'otp'\"\n    />\n    @if (type === 'password' || suffixIcon) {\n      <button\n        type=\"button\"\n        class=\"absolute inset-y-0 right-2 flex items-center text-text-primary hover:text-text-secondary\"\n        (click)=\"onSuffixClick()\"\n        [disabled]=\"disabled\"\n      >\n        @if (type === 'password') {\n          <fx-ui-hero-icon\n            [icon]=\"showPassword ? 'eye-slash' : 'eye'\"\n            [size]=\"18\"\n            class=\"text-text-primary\"\n          ></fx-ui-hero-icon>\n        } @else if (suffixIcon) {\n          <fx-ui-hero-icon\n            [icon]=\"suffixIcon\"\n            [size]=\"18\"\n            class=\"text-text-primary\"\n          ></fx-ui-hero-icon>\n        }\n      </button>\n    }\n  </div>\n\n  @if (invalid) {\n    <div class=\"txt-invalid\">\n      {{ getErrorMessage(label) }}\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: TrimOnBlurDirective, selector: "[appTrimOnBlur]", inputs: ["appTrimOnBlurCollapse"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: InputComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: InputComponent, isStandalone: false, selector: "fx-ui-input", inputs: { label: "label", tooltip: "tooltip", type: "type", placeholder: "placeholder", errorMessages: "errorMessages", required: "required", suffixIcon: "suffixIcon", class: "class", maxlength: "maxlength", validateFn: "validateFn" }, outputs: { blurred: "blurred", focused: "focused", suffixClick: "suffixClick" }, usesInheritance: true, ngImport: i0, template: "<div class=\"mb-4 text-left w-full text-text-primary\" [class]=\"class\">\n  @if (label) {\n    <label class=\"block txt-field-label\">\n      {{ label }}\n      @if (required) {\n        <span class=\"txt-required\">*</span>\n      }\n      @if (tooltip) {\n        <fx-ui-hero-icon\n          icon=\"information-circle\"\n          [size]=\"16\"\n          class=\"inline-block align-middle ml-0.5 text-text-secondary cursor-help relative -top-px\"\n          [matTooltip]=\"tooltip\"\n          matTooltipPosition=\"above\"\n          matTooltipClass=\"text-text-primary text-xs font-semibold\"\n        ></fx-ui-hero-icon>\n      }\n    </label>\n  }\n\n  <div class=\"relative\">\n    <input\n      appTrimOnBlur\n      [appTrimOnBlurCollapse]=\"true\"\n      [type]=\"displayType\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [value]=\"value\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n      (focus)=\"onFocus()\"\n      [attr.maxlength]=\"maxlength\"\n      [class]=\"type === 'otp' ? 'input-otp' : 'input-default'\"\n      [class.input-invalid]=\"invalid\"\n      [class.pr-8]=\"type === 'password' || suffixIcon\"\n      [class.txt-otp-input]=\"type === 'otp'\"\n    />\n    @if (type === 'password' || suffixIcon) {\n      <button\n        type=\"button\"\n        class=\"absolute inset-y-0 right-2 flex items-center text-text-primary hover:text-text-secondary\"\n        (click)=\"onSuffixClick()\"\n        [disabled]=\"disabled\"\n      >\n        @if (type === 'password') {\n          <fx-ui-hero-icon\n            [icon]=\"showPassword ? 'eye-slash' : 'eye'\"\n            [size]=\"18\"\n            class=\"text-text-primary\"\n          ></fx-ui-hero-icon>\n        } @else if (suffixIcon) {\n          <fx-ui-hero-icon\n            [icon]=\"suffixIcon\"\n            [size]=\"18\"\n            class=\"text-text-primary\"\n          ></fx-ui-hero-icon>\n        }\n      </button>\n    }\n  </div>\n\n  @if (invalid) {\n    <div class=\"txt-invalid\">\n      {{ getErrorMessage(label) }}\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: TrimOnBlurDirective, selector: "[appTrimOnBlur]", inputs: ["appTrimOnBlurCollapse"] }, { kind: "directive", type: i56.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fx-ui-input', standalone: false, template: "<div class=\"mb-4 text-left w-full text-text-primary\" [class]=\"class\">\n  @if (label) {\n    <label class=\"block txt-field-label\">\n      {{ label }}\n      @if (required) {\n        <span class=\"txt-required\">*</span>\n      }\n      @if (tooltip) {\n        <fx-ui-hero-icon\n          icon=\"information-circle\"\n          [size]=\"16\"\n          class=\"inline-block align-middle ml-0.5 text-text-secondary cursor-help relative -top-px\"\n          [matTooltip]=\"tooltip\"\n          matTooltipPosition=\"above\"\n          matTooltipClass=\"text-text-primary text-xs font-semibold\"\n        ></fx-ui-hero-icon>\n      }\n    </label>\n  }\n\n  <div class=\"relative\">\n    <input\n      appTrimOnBlur\n      [appTrimOnBlurCollapse]=\"true\"\n      [type]=\"displayType\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [value]=\"value\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n      (focus)=\"onFocus()\"\n      [attr.maxlength]=\"maxlength\"\n      [class]=\"type === 'otp' ? 'input-otp' : 'input-default'\"\n      [class.input-invalid]=\"invalid\"\n      [class.pr-8]=\"type === 'password' || suffixIcon\"\n      [class.txt-otp-input]=\"type === 'otp'\"\n    />\n    @if (type === 'password' || suffixIcon) {\n      <button\n        type=\"button\"\n        class=\"absolute inset-y-0 right-2 flex items-center text-text-primary hover:text-text-secondary\"\n        (click)=\"onSuffixClick()\"\n        [disabled]=\"disabled\"\n      >\n        @if (type === 'password') {\n          <fx-ui-hero-icon\n            [icon]=\"showPassword ? 'eye-slash' : 'eye'\"\n            [size]=\"18\"\n            class=\"text-text-primary\"\n          ></fx-ui-hero-icon>\n        } @else if (suffixIcon) {\n          <fx-ui-hero-icon\n            [icon]=\"suffixIcon\"\n            [size]=\"18\"\n            class=\"text-text-primary\"\n          ></fx-ui-hero-icon>\n        }\n      </button>\n    }\n  </div>\n\n  @if (invalid) {\n    <div class=\"txt-invalid\">\n      {{ getErrorMessage(label) }}\n    </div>\n  }\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1$3.NgControl }, { type: i0.ChangeDetectorRef }], propDecorators: { label: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { label: [{
                 type: Input
             }], tooltip: [{
                 type: Input
@@ -2506,8 +3023,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Input
             }], required: [{
                 type: Input
-            }], disabled: [{
-                type: Input
             }], suffixIcon: [{
                 type: Input
             }], class: [{
@@ -2528,7 +3043,7 @@ class LoadingPanel {
     show = false;
     message = "Loading";
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: LoadingPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: LoadingPanel, isStandalone: false, selector: "fx-ui-loading-panel", inputs: { show: "show", message: "message" }, ngImport: i0, template: "<!-- Full-screen glass overlay -->\n<div\n  *ngIf=\"show\"\n  class=\"fixed inset-0 z-50 flex items-center justify-center\"\n  aria-hidden=\"false\"\n  role=\"alert\"\n  aria-busy=\"true\"\n>\n  <div class=\"absolute inset-0 bg-bg-primary/30 backdrop-blur-xl\" aria-hidden=\"true\"></div>\n\n  <div\n    class=\"relative z-10 flex flex-col items-center gap-4 p-6 rounded-2xl shadow-xl bg-bg-primary/70 border border-border-strong backdrop-bg-primary/70\"\n    style=\"min-width: 220px; max-width: 90%\"\n  >\n  <svg fill=\"url(#spinner-gradient)\" width=\"50\" height=\"50\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n    <defs>\n      <linearGradient id=\"spinner-gradient\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n        <stop offset=\"0%\" style=\"stop-color: rgb(var(--gradient-primary-start)); stop-opacity: 1\" />\n        <stop offset=\"100%\" style=\"stop-color: rgb(var(--gradient-primary-end)); stop-opacity: 1\" />\n      </linearGradient>\n    </defs>\n    <circle cx=\"4\" cy=\"12\" r=\"0\">\n      <animate begin=\"0;spinner_z0Or.end\" attributeName=\"r\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"0;3\" fill=\"freeze\"/>\n      <animate begin=\"spinner_OLMs.end\" attributeName=\"cx\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"4;12\" fill=\"freeze\"/>\n      <animate begin=\"spinner_UHR2.end\" attributeName=\"cx\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"12;20\" fill=\"freeze\"/>\n      <animate id=\"spinner_lo66\" begin=\"spinner_Aguh.end\" attributeName=\"r\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"3;0\" fill=\"freeze\"/>\n      <animate id=\"spinner_z0Or\" begin=\"spinner_lo66.end\" attributeName=\"cx\" dur=\"0.001s\" values=\"20;4\" fill=\"freeze\"/>\n    </circle>\n    <circle cx=\"4\" cy=\"12\" r=\"3\">\n      <animate begin=\"0;spinner_z0Or.end\" attributeName=\"cx\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"4;12\" fill=\"freeze\"/>\n      <animate begin=\"spinner_OLMs.end\" attributeName=\"cx\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"12;20\" fill=\"freeze\"/>\n      <animate id=\"spinner_JsnR\" begin=\"spinner_UHR2.end\" attributeName=\"r\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"3;0\" fill=\"freeze\"/>\n      <animate id=\"spinner_Aguh\" begin=\"spinner_JsnR.end\" attributeName=\"cx\" dur=\"0.001s\" values=\"20;4\" fill=\"freeze\"/>\n      <animate begin=\"spinner_Aguh.end\" attributeName=\"r\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"0;3\" fill=\"freeze\"/>\n    </circle>\n    <circle cx=\"12\" cy=\"12\" r=\"3\">\n      <animate begin=\"0;spinner_z0Or.end\" attributeName=\"cx\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"12;20\" fill=\"freeze\"/>\n      <animate id=\"spinner_hSjk\" begin=\"spinner_OLMs.end\" attributeName=\"r\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"3;0\" fill=\"freeze\"/>\n      <animate id=\"spinner_UHR2\" begin=\"spinner_hSjk.end\" attributeName=\"cx\" dur=\"0.001s\" values=\"20;4\" fill=\"freeze\"/>\n      <animate begin=\"spinner_UHR2.end\" attributeName=\"r\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"0;3\" fill=\"freeze\"/>\n      <animate begin=\"spinner_Aguh.end\" attributeName=\"cx\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"4;12\" fill=\"freeze\"/>\n    </circle>\n    <circle cx=\"20\" cy=\"12\" r=\"3\">\n      <animate id=\"spinner_4v5M\" begin=\"0;spinner_z0Or.end\" attributeName=\"r\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"3;0\" fill=\"freeze\"/>\n      <animate id=\"spinner_OLMs\" begin=\"spinner_4v5M.end\" attributeName=\"cx\" dur=\"0.001s\" values=\"20;4\" fill=\"freeze\"/>\n      <animate begin=\"spinner_OLMs.end\" attributeName=\"r\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"0;3\" fill=\"freeze\"/>\n      <animate begin=\"spinner_UHR2.end\" attributeName=\"cx\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"4;12\" fill=\"freeze\"/>\n      <animate begin=\"spinner_Aguh.end\" attributeName=\"cx\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"12;20\" fill=\"freeze\"/>\n    </circle>\n  </svg>\n  \n\n    <div *ngIf=\"message\" class=\"text-sm text-text-primary text-center\">\n      {{ message }}\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: LoadingPanel, isStandalone: false, selector: "fx-ui-loading-panel", inputs: { show: "show", message: "message" }, ngImport: i0, template: "<!-- Full-screen glass overlay -->\n<div\n  *ngIf=\"show\"\n  class=\"fixed inset-0 z-50 flex items-center justify-center\"\n  aria-hidden=\"false\"\n  role=\"alert\"\n  aria-busy=\"true\"\n>\n  <div class=\"absolute inset-0 bg-bg-primary/30 backdrop-blur-xl\" aria-hidden=\"true\"></div>\n\n  <div\n    class=\"relative z-10 flex flex-col items-center gap-4 p-6 rounded-2xl shadow-xl bg-bg-primary/70 border border-border-strong backdrop-bg-primary/70\"\n    style=\"min-width: 220px; max-width: 90%\"\n  >\n  <svg fill=\"url(#spinner-gradient)\" width=\"50\" height=\"50\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n    <defs>\n      <linearGradient id=\"spinner-gradient\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n        <stop offset=\"0%\" style=\"stop-color: rgb(var(--gradient-primary-start)); stop-opacity: 1\" />\n        <stop offset=\"100%\" style=\"stop-color: rgb(var(--gradient-primary-end)); stop-opacity: 1\" />\n      </linearGradient>\n    </defs>\n    <circle cx=\"4\" cy=\"12\" r=\"0\">\n      <animate begin=\"0;spinner_z0Or.end\" attributeName=\"r\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"0;3\" fill=\"freeze\"/>\n      <animate begin=\"spinner_OLMs.end\" attributeName=\"cx\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"4;12\" fill=\"freeze\"/>\n      <animate begin=\"spinner_UHR2.end\" attributeName=\"cx\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"12;20\" fill=\"freeze\"/>\n      <animate id=\"spinner_lo66\" begin=\"spinner_Aguh.end\" attributeName=\"r\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"3;0\" fill=\"freeze\"/>\n      <animate id=\"spinner_z0Or\" begin=\"spinner_lo66.end\" attributeName=\"cx\" dur=\"0.001s\" values=\"20;4\" fill=\"freeze\"/>\n    </circle>\n    <circle cx=\"4\" cy=\"12\" r=\"3\">\n      <animate begin=\"0;spinner_z0Or.end\" attributeName=\"cx\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"4;12\" fill=\"freeze\"/>\n      <animate begin=\"spinner_OLMs.end\" attributeName=\"cx\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"12;20\" fill=\"freeze\"/>\n      <animate id=\"spinner_JsnR\" begin=\"spinner_UHR2.end\" attributeName=\"r\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"3;0\" fill=\"freeze\"/>\n      <animate id=\"spinner_Aguh\" begin=\"spinner_JsnR.end\" attributeName=\"cx\" dur=\"0.001s\" values=\"20;4\" fill=\"freeze\"/>\n      <animate begin=\"spinner_Aguh.end\" attributeName=\"r\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"0;3\" fill=\"freeze\"/>\n    </circle>\n    <circle cx=\"12\" cy=\"12\" r=\"3\">\n      <animate begin=\"0;spinner_z0Or.end\" attributeName=\"cx\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"12;20\" fill=\"freeze\"/>\n      <animate id=\"spinner_hSjk\" begin=\"spinner_OLMs.end\" attributeName=\"r\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"3;0\" fill=\"freeze\"/>\n      <animate id=\"spinner_UHR2\" begin=\"spinner_hSjk.end\" attributeName=\"cx\" dur=\"0.001s\" values=\"20;4\" fill=\"freeze\"/>\n      <animate begin=\"spinner_UHR2.end\" attributeName=\"r\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"0;3\" fill=\"freeze\"/>\n      <animate begin=\"spinner_Aguh.end\" attributeName=\"cx\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"4;12\" fill=\"freeze\"/>\n    </circle>\n    <circle cx=\"20\" cy=\"12\" r=\"3\">\n      <animate id=\"spinner_4v5M\" begin=\"0;spinner_z0Or.end\" attributeName=\"r\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"3;0\" fill=\"freeze\"/>\n      <animate id=\"spinner_OLMs\" begin=\"spinner_4v5M.end\" attributeName=\"cx\" dur=\"0.001s\" values=\"20;4\" fill=\"freeze\"/>\n      <animate begin=\"spinner_OLMs.end\" attributeName=\"r\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"0;3\" fill=\"freeze\"/>\n      <animate begin=\"spinner_UHR2.end\" attributeName=\"cx\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"4;12\" fill=\"freeze\"/>\n      <animate begin=\"spinner_Aguh.end\" attributeName=\"cx\" calcMode=\"spline\" dur=\"0.5s\" keySplines=\".36,.6,.31,1\" values=\"12;20\" fill=\"freeze\"/>\n    </circle>\n  </svg>\n  \n\n    <div *ngIf=\"message\" class=\"text-sm text-text-primary text-center\">\n      {{ message }}\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: LoadingPanel, decorators: [{
             type: Component,
@@ -2544,19 +3059,15 @@ class RadioButtonToggleComponent extends FxComponent {
     label;
     required = false;
     options = [];
-    disabled = false;
     errorMessages = {};
     class;
-    constructor(ngControl, ref) {
-        super(ngControl);
+    constructor(ref) {
+        super();
         this.ref = ref;
     }
     ngAfterViewInit() {
         this.ref.detectChanges();
     }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-    }
     onSelectValue(value) {
         if (this.disabled)
             return;
@@ -2564,20 +3075,18 @@ class RadioButtonToggleComponent extends FxComponent {
         this.onChange(value);
         this.onTouched();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RadioButtonToggleComponent, deps: [{ token: i1$3.NgControl }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RadioButtonToggleComponent, isStandalone: false, selector: "fx-ui-radio-toggle, [fx-ui-radio-toggle]", inputs: { label: "label", required: "required", options: "options", disabled: "disabled", errorMessages: "errorMessages", class: "class" }, usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col text-left mb-4 w-full\" [class]=\"class\">\n  @if(label){<label class=\"txt-field-label\">\n    {{ label }}\n    @if(required) {<span class=\"txt-required\">*</span>} </label\n  >}\n\n  <div class=\"inline-flex w-full rounded-lg overflow-hidden\" role=\"radiogroup\">\n    @for(opt of options; track opt){<button\n      type=\"button\"\n      role=\"radio\"\n      [attr.aria-checked]=\"value === opt.value\"\n      (click)=\"onSelectValue(opt.value)\"\n      [disabled]=\"disabled\"\n      [class.text-gray-900]=\"value !== opt.value\"\n      class=\"flex-1 bg-bg-primary flex items-center pl-normal gap-normal h-10 rounded-md hover:bg-bg-hover transition-all duration-150 disabled:opacity-60 disabled:cursor-not-allowed\"\n    >\n      <span\n        [ngClass]=\"{\n          'radio-checked': value === opt.value,\n          'radio-uncheck': value !== opt.value\n        }\"\n        class=\"radio-container\"\n      >\n        @if(value === opt.value) {<span class=\"radio-dot\"></span>}\n      </span>\n\n      <span class=\"txt-field-label mb-0\">{{ opt.label }}</span></button\n    >}\n  </div>\n\n  @if(invalid){\n  <div class=\"txt-invalid\">{{ getErrorMessage(label) }}</div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RadioButtonToggleComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RadioButtonToggleComponent, isStandalone: false, selector: "fx-ui-radio-toggle, [fx-ui-radio-toggle]", inputs: { label: "label", required: "required", options: "options", errorMessages: "errorMessages", class: "class" }, usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col text-left mb-4 w-full\" [class]=\"class\">\n  @if(label){<label class=\"txt-field-label\">\n    {{ label }}\n    @if(required) {<span class=\"txt-required\">*</span>} </label\n  >}\n\n  <div class=\"inline-flex w-full rounded-lg overflow-hidden\" role=\"radiogroup\">\n    @for(opt of options; track opt){<button\n      type=\"button\"\n      role=\"radio\"\n      [attr.aria-checked]=\"value === opt.value\"\n      (click)=\"onSelectValue(opt.value)\"\n      [disabled]=\"disabled\"\n      [class.text-gray-900]=\"value !== opt.value\"\n      class=\"flex-1 bg-bg-primary flex items-center pl-normal gap-normal h-10 rounded-md hover:bg-bg-hover transition-all duration-150 disabled:opacity-60 disabled:cursor-not-allowed\"\n    >\n      <span\n        [ngClass]=\"{\n          'radio-checked': value === opt.value,\n          'radio-uncheck': value !== opt.value\n        }\"\n        class=\"radio-container\"\n      >\n        @if(value === opt.value) {<span class=\"radio-dot\"></span>}\n      </span>\n\n      <span class=\"txt-field-label mb-0\">{{ opt.label }}</span></button\n    >}\n  </div>\n\n  @if(invalid){\n  <div class=\"txt-invalid\">{{ getErrorMessage(label) }}</div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RadioButtonToggleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fx-ui-radio-toggle, [fx-ui-radio-toggle]', standalone: false, template: "<div class=\"flex flex-col text-left mb-4 w-full\" [class]=\"class\">\n  @if(label){<label class=\"txt-field-label\">\n    {{ label }}\n    @if(required) {<span class=\"txt-required\">*</span>} </label\n  >}\n\n  <div class=\"inline-flex w-full rounded-lg overflow-hidden\" role=\"radiogroup\">\n    @for(opt of options; track opt){<button\n      type=\"button\"\n      role=\"radio\"\n      [attr.aria-checked]=\"value === opt.value\"\n      (click)=\"onSelectValue(opt.value)\"\n      [disabled]=\"disabled\"\n      [class.text-gray-900]=\"value !== opt.value\"\n      class=\"flex-1 bg-bg-primary flex items-center pl-normal gap-normal h-10 rounded-md hover:bg-bg-hover transition-all duration-150 disabled:opacity-60 disabled:cursor-not-allowed\"\n    >\n      <span\n        [ngClass]=\"{\n          'radio-checked': value === opt.value,\n          'radio-uncheck': value !== opt.value\n        }\"\n        class=\"radio-container\"\n      >\n        @if(value === opt.value) {<span class=\"radio-dot\"></span>}\n      </span>\n\n      <span class=\"txt-field-label mb-0\">{{ opt.label }}</span></button\n    >}\n  </div>\n\n  @if(invalid){\n  <div class=\"txt-invalid\">{{ getErrorMessage(label) }}</div>\n  }\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1$3.NgControl }, { type: i0.ChangeDetectorRef }], propDecorators: { label: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { label: [{
                 type: Input
             }], required: [{
                 type: Input
             }], options: [{
                 type: Input
-            }], disabled: [{
-                type: Input
             }], errorMessages: [{
                 type: Input
             }], class: [{
@@ -2590,19 +3099,15 @@ class RadioButtonComponent extends FxComponent {
     tooltip = '';
     required = false;
     options = [];
-    disabled = false;
     errorMessages = {};
     class;
-    constructor(ngControl, ref) {
-        super(ngControl);
+    constructor(ref) {
+        super();
         this.ref = ref;
     }
     ngAfterViewInit() {
         this.ref.detectChanges();
     }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-    }
     onSelectValue(value) {
         if (this.disabled)
             return;
@@ -2610,13 +3115,13 @@ class RadioButtonComponent extends FxComponent {
         this.onChange(value);
         this.onTouched();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RadioButtonComponent, deps: [{ token: i1$3.NgControl }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RadioButtonComponent, isStandalone: false, selector: "fx-ui-radio", inputs: { label: "label", tooltip: "tooltip", required: "required", options: "options", disabled: "disabled", errorMessages: "errorMessages", class: "class" }, usesInheritance: true, ngImport: i0, template: "<div class=\"w-full rounded-lg overflow-hidden\" [class]=\"class\" role=\"radiogroup\">\n  @if (label) {\n    <label class=\"txt-field-label\">\n      {{ label }}\n      @if (required) {\n        <span class=\"txt-required\">*</span>\n      }\n      @if (tooltip) {\n        <fx-ui-hero-icon\n          icon=\"information-circle\"\n          [size]=\"16\"\n          class=\"inline-block align-middle ml-0.5 text-text-secondary cursor-help relative -top-px\"\n          [matTooltip]=\"tooltip\"\n          matTooltipPosition=\"above\"\n          matTooltipClass=\"text-text-primary text-xs font-semibold\"\n        ></fx-ui-hero-icon>\n      }\n    </label>\n  }\n\n  <button\n    *ngFor=\"let opt of options\"\n    type=\"button\"\n    role=\"radio\"\n    [attr.aria-checked]=\"value === opt.value\"\n    (click)=\"onSelectValue(opt.value)\"\n    [disabled]=\"disabled\"\n    [class.text-gray-900]=\"value !== opt.value\"\n    class=\"flex-1 px-normal w-full flex items-center gap-normal h-10 rounded-md hover:bg-bg-hover transition-all duration-150 disabled:opacity-60 disabled:cursor-not-allowed\"\n    [matTooltip]=\"opt.tooltip || ''\"\n    matTooltipPosition=\"right\"\n    matTooltipClass=\"text-text-primary text-xs font-semibold\"\n  >\n    <span\n      [ngClass]=\"{\n        'radio-checked': value === opt.value,\n        'radio-uncheck': value !== opt.value,\n      }\"\n      class=\"radio-container\"\n    >\n      @if (value === opt.value) {\n        <span class=\"radio-dot\"></span>\n      }\n    </span>\n\n    <span class=\"txt-default mb-0\">{{ opt.label }}</span>\n  </button>\n  @if (invalid) {\n    <div class=\"txt-invalid\">\n      {{ getErrorMessage(label) }}\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RadioButtonComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RadioButtonComponent, isStandalone: false, selector: "fx-ui-radio", inputs: { label: "label", tooltip: "tooltip", required: "required", options: "options", errorMessages: "errorMessages", class: "class" }, usesInheritance: true, ngImport: i0, template: "<div class=\"w-full rounded-lg overflow-hidden\" [class]=\"class\" role=\"radiogroup\">\n  @if (label) {\n    <label class=\"txt-field-label\">\n      {{ label }}\n      @if (required) {\n        <span class=\"txt-required\">*</span>\n      }\n      @if (tooltip) {\n        <fx-ui-hero-icon\n          icon=\"information-circle\"\n          [size]=\"16\"\n          class=\"inline-block align-middle ml-0.5 text-text-secondary cursor-help relative -top-px\"\n          [matTooltip]=\"tooltip\"\n          matTooltipPosition=\"above\"\n          matTooltipClass=\"text-text-primary text-xs font-semibold\"\n        ></fx-ui-hero-icon>\n      }\n    </label>\n  }\n\n  <button\n    *ngFor=\"let opt of options\"\n    type=\"button\"\n    role=\"radio\"\n    [attr.aria-checked]=\"value === opt.value\"\n    (click)=\"onSelectValue(opt.value)\"\n    [disabled]=\"disabled\"\n    [class.text-gray-900]=\"value !== opt.value\"\n    class=\"flex-1 px-normal w-full flex items-center gap-normal h-10 rounded-md hover:bg-bg-hover transition-all duration-150 disabled:opacity-60 disabled:cursor-not-allowed\"\n    [matTooltip]=\"opt.tooltip || ''\"\n    matTooltipPosition=\"right\"\n    matTooltipClass=\"text-text-primary text-xs font-semibold\"\n  >\n    <span\n      [ngClass]=\"{\n        'radio-checked': value === opt.value,\n        'radio-uncheck': value !== opt.value,\n      }\"\n      class=\"radio-container\"\n    >\n      @if (value === opt.value) {\n        <span class=\"radio-dot\"></span>\n      }\n    </span>\n\n    <span class=\"txt-default mb-0\">{{ opt.label }}</span>\n  </button>\n  @if (invalid) {\n    <div class=\"txt-invalid\">\n      {{ getErrorMessage(label) }}\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i56.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RadioButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fx-ui-radio', standalone: false, template: "<div class=\"w-full rounded-lg overflow-hidden\" [class]=\"class\" role=\"radiogroup\">\n  @if (label) {\n    <label class=\"txt-field-label\">\n      {{ label }}\n      @if (required) {\n        <span class=\"txt-required\">*</span>\n      }\n      @if (tooltip) {\n        <fx-ui-hero-icon\n          icon=\"information-circle\"\n          [size]=\"16\"\n          class=\"inline-block align-middle ml-0.5 text-text-secondary cursor-help relative -top-px\"\n          [matTooltip]=\"tooltip\"\n          matTooltipPosition=\"above\"\n          matTooltipClass=\"text-text-primary text-xs font-semibold\"\n        ></fx-ui-hero-icon>\n      }\n    </label>\n  }\n\n  <button\n    *ngFor=\"let opt of options\"\n    type=\"button\"\n    role=\"radio\"\n    [attr.aria-checked]=\"value === opt.value\"\n    (click)=\"onSelectValue(opt.value)\"\n    [disabled]=\"disabled\"\n    [class.text-gray-900]=\"value !== opt.value\"\n    class=\"flex-1 px-normal w-full flex items-center gap-normal h-10 rounded-md hover:bg-bg-hover transition-all duration-150 disabled:opacity-60 disabled:cursor-not-allowed\"\n    [matTooltip]=\"opt.tooltip || ''\"\n    matTooltipPosition=\"right\"\n    matTooltipClass=\"text-text-primary text-xs font-semibold\"\n  >\n    <span\n      [ngClass]=\"{\n        'radio-checked': value === opt.value,\n        'radio-uncheck': value !== opt.value,\n      }\"\n      class=\"radio-container\"\n    >\n      @if (value === opt.value) {\n        <span class=\"radio-dot\"></span>\n      }\n    </span>\n\n    <span class=\"txt-default mb-0\">{{ opt.label }}</span>\n  </button>\n  @if (invalid) {\n    <div class=\"txt-invalid\">\n      {{ getErrorMessage(label) }}\n    </div>\n  }\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1$3.NgControl }, { type: i0.ChangeDetectorRef }], propDecorators: { label: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { label: [{
                 type: Input
             }], tooltip: [{
                 type: Input
@@ -2624,8 +3129,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Input
             }], options: [{
                 type: Input
-            }], disabled: [{
-                type: Input
             }], errorMessages: [{
                 type: Input
             }], class: [{
@@ -2654,8 +3157,8 @@ class RichTextAreaComponent extends FxComponent {
     ];
     contentChange = new EventEmitter();
     quillInstance;
-    constructor(ngControl, cdr, styleLoader, platformId) {
-        super(ngControl);
+    constructor(cdr, styleLoader, platformId) {
+        super();
         this.cdr = cdr;
         this.styleLoader = styleLoader;
         this.platformId = platformId;
@@ -2698,17 +3201,18 @@ class RichTextAreaComponent extends FxComponent {
         }
     }
     setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
         if (this.quillInstance) {
             this.quillInstance.enable(!isDisabled);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RichTextAreaComponent, deps: [{ token: i1$3.NgControl }, { token: i0.ChangeDetectorRef }, { token: QuillStyleLoaderService }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RichTextAreaComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: QuillStyleLoaderService }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: RichTextAreaComponent, isStandalone: false, selector: "fx-ui-rich-text-area", inputs: { placeholder: "placeholder", toolbarOptions: "toolbarOptions" }, outputs: { contentChange: "contentChange" }, viewQueries: [{ propertyName: "editorContainer", first: true, predicate: ["editorContainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"w-full rounded-2xl shadow-sm p-1 bg-bg-primary\">\n  <div #editorContainer class=\"min-h-[200px] text-base\"></div>\n</div>", styles: [":host{display:block}.ql-toolbar{border-top-left-radius:.25rem;border-top-right-radius:.25rem;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(var(--border-default) / var(--tw-border-opacity, 1));padding:.5rem}.ql-container{border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.ql-editor{min-height:200px;padding:.75rem;font-size:1rem}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RichTextAreaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fx-ui-rich-text-area', standalone: false, template: "<div class=\"w-full rounded-2xl shadow-sm p-1 bg-bg-primary\">\n  <div #editorContainer class=\"min-h-[200px] text-base\"></div>\n</div>", styles: [":host{display:block}.ql-toolbar{border-top-left-radius:.25rem;border-top-right-radius:.25rem;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(var(--border-default) / var(--tw-border-opacity, 1));padding:.5rem}.ql-container{border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.ql-editor{min-height:200px;padding:.75rem;font-size:1rem}\n"] }]
-        }], ctorParameters: () => [{ type: i1$3.NgControl }, { type: i0.ChangeDetectorRef }, { type: QuillStyleLoaderService }, { type: Object, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: QuillStyleLoaderService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
                 }] }], propDecorators: { editorContainer: [{
@@ -2725,16 +3229,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
 class SearchBarComponent extends FxComponent {
     ref;
     placeholder = 'Search...';
-    disabled = false;
     search = new EventEmitter();
     valueChange = new EventEmitter();
-    constructor(ngControl, ref) {
-        super(ngControl);
+    constructor(ref) {
+        super();
         this.ref = ref;
     }
     ngAfterViewInit() {
         this.ref.detectChanges();
     }
+    writeValue(value) {
+        this.value = value ?? '';
+    }
     onValueChange(value) {
         this.value = value;
         this.setValue(value);
@@ -2750,15 +3256,13 @@ class SearchBarComponent extends FxComponent {
         this.valueChange.emit('');
         this.search.emit('');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SearchBarComponent, deps: [{ token: i1$3.NgControl }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: SearchBarComponent, isStandalone: false, selector: "fx-ui-search-bar", inputs: { placeholder: "placeholder", disabled: "disabled" }, outputs: { search: "search", valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<div class=\"relative\">\n  <fx-ui-hero-icon icon=\"magnifying-glass\" [size]=\"18\" class=\"absolute left-1 top-[3px] text-text-primary\"></fx-ui-hero-icon>\n  <input\n    type=\"text\"\n    class=\"input-default px-9\"\n    [attr.placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    [value]=\"value\"\n    (input)=\"onValueChange($any($event.target).value)\"\n    (keydown.enter)=\"onEnterKey()\"\n  />\n\n  <button\n    *ngIf=\"value && !disabled\"\n    type=\"button\"\n    class=\"absolute inset-y-0 right-2 flex items-center text-text-primary hover:text-text-secondary\"\n    (click)=\"clear()\"\n    aria-label=\"Clear\"\n  >\n    <i class=\"material-symbols-outlined text-lg select-none\">close</i>\n  </button>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SearchBarComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: SearchBarComponent, isStandalone: false, selector: "fx-ui-search-bar", inputs: { placeholder: "placeholder" }, outputs: { search: "search", valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<div class=\"relative\">\n  <fx-ui-hero-icon icon=\"magnifying-glass\" [size]=\"18\" class=\"absolute left-1 top-[3px] text-text-primary\"></fx-ui-hero-icon>\n  <input\n    type=\"text\"\n    class=\"input-default px-9\"\n    [attr.placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    [value]=\"value\"\n    (input)=\"onValueChange($any($event.target).value)\"\n    (keydown.enter)=\"onEnterKey()\"\n  />\n\n  <button\n    *ngIf=\"value && !disabled\"\n    type=\"button\"\n    class=\"absolute inset-y-0 right-2 flex items-center text-text-primary hover:text-text-secondary\"\n    (click)=\"clear()\"\n    aria-label=\"Clear\"\n  >\n    <i class=\"material-symbols-outlined text-lg select-none\">close</i>\n  </button>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SearchBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fx-ui-search-bar', standalone: false, template: "<div class=\"relative\">\n  <fx-ui-hero-icon icon=\"magnifying-glass\" [size]=\"18\" class=\"absolute left-1 top-[3px] text-text-primary\"></fx-ui-hero-icon>\n  <input\n    type=\"text\"\n    class=\"input-default px-9\"\n    [attr.placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    [value]=\"value\"\n    (input)=\"onValueChange($any($event.target).value)\"\n    (keydown.enter)=\"onEnterKey()\"\n  />\n\n  <button\n    *ngIf=\"value && !disabled\"\n    type=\"button\"\n    class=\"absolute inset-y-0 right-2 flex items-center text-text-primary hover:text-text-secondary\"\n    (click)=\"clear()\"\n    aria-label=\"Clear\"\n  >\n    <i class=\"material-symbols-outlined text-lg select-none\">close</i>\n  </button>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1$3.NgControl }, { type: i0.ChangeDetectorRef }], propDecorators: { placeholder: [{
-                type: Input
-            }], disabled: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { placeholder: [{
                 type: Input
             }], search: [{
                 type: Output
@@ -2773,7 +3277,6 @@ class SelectComponent extends FxComponent {
     placeholder = '';
     options = [];
     multiple = false;
-    disabled = false;
     errorMessages = {};
     required = false;
     class;
@@ -2784,16 +3287,29 @@ class SelectComponent extends FxComponent {
     searchTerm = '';
     filteredOptions = [];
     search$ = new Subject();
-    constructor(ngControl, ref) {
-        super(ngControl);
+    destroyRef = inject(DestroyRef);
+    constructor(ref) {
+        super();
         this.ref = ref;
     }
+    // mat-select treats '' as "nothing selected"; keep the legacy empty value.
+    writeValue(value) {
+        this.value = value ?? '';
+    }
     ngOnInit() {
         this.filteredOptions = this.options;
         this.search$
-            .pipe(debounceTime(300), distinctUntilChanged())
+            .pipe(debounceTime(300), distinctUntilChanged(), takeUntilDestroyed(this.destroyRef))
             .subscribe((term) => this.performSearch(term));
     }
+    ngOnChanges(changes) {
+        // Sync the rendered list when options arrive/refresh asynchronously
+        // (ngOnInit captures the initial — often empty — array only).
+        if (changes['options']) {
+            this.filteredOptions = this.options ?? [];
+            this.ref?.detectChanges();
+        }
+    }
     ngAfterViewInit() {
         this.ref.detectChanges();
     }
@@ -2822,7 +3338,6 @@ class SelectComponent extends FxComponent {
         }
         const result = await this.searchFn(term);
         this.filteredOptions = result;
-        console.log(this.filteredOptions);
         Promise.resolve().then(() => this.ref.detectChanges());
     }
     onSelectionChange(value) {
@@ -2835,13 +3350,13 @@ class SelectComponent extends FxComponent {
         }
         return this.value === value;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SelectComponent, deps: [{ token: i1$3.NgControl }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: SelectComponent, isStandalone: false, selector: "fx-ui-select", inputs: { label: "label", tooltip: "tooltip", placeholder: "placeholder", options: "options", multiple: "multiple", disabled: "disabled", errorMessages: "errorMessages", required: "required", class: "class", enableSearch: "enableSearch", searchFn: "searchFn" }, outputs: { closed: "closed" }, usesInheritance: true, ngImport: i0, template: "<div class=\"mb-4 text-left w-full\" [class]=\"class\">\n  @if (label) {\n    <label class=\"block txt-field-label\">\n      {{ label }}\n      @if (required) {\n        <span class=\"txt-required\">*</span>\n      }\n      @if (tooltip) {\n        <fx-ui-hero-icon\n          icon=\"information-circle\"\n          [size]=\"16\"\n          class=\"inline-block align-middle ml-0.5 text-text-secondary cursor-help relative -top-px\"\n          [matTooltip]=\"tooltip\"\n          matTooltipPosition=\"above\"\n          matTooltipClass=\"text-text-primary text-xs font-semibold\"\n        ></fx-ui-hero-icon>\n      }\n    </label>\n  }\n\n  <mat-form-field\n    [attr.invalid]=\"invalid || null\"\n    class=\"fx-select-field w-full shadow-sm\"\n    appearance=\"fill\"\n  >\n    <mat-select\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [multiple]=\"multiple\"\n      [value]=\"value\"\n      (selectionChange)=\"onSelectionChange($event.value)\"\n      (openedChange)=\"onOpened($event)\"\n      (blur)=\"onTouched()\"\n    >\n      @if (enableSearch) {\n        <div class=\"px-semi w-full\">\n          <input\n            type=\"text\"\n            [placeholder]=\"'Search'\"\n            [(ngModel)]=\"searchTerm\"\n            (ngModelChange)=\"onSearchChange($event)\"\n            (click)=\"$event.stopPropagation()\"\n            class=\"text-text-primary placeholder:text-text-placeholder w-full bg-bg-primary border-b px-semi py-normal border-border-default focus:outline-none focus:border-gradient-primary-start text-sm text-text-primary tracking-normal ring-0 transition-colors duration-500 ease-in-out\"\n          />\n        </div>\n      }\n      <mat-option *ngFor=\"let option of filteredOptions\" [value]=\"option.value\">\n        <span class=\"txt-default\">{{ option.label }}</span>\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n\n  @if (invalid) {\n    <div class=\"txt-invalid text-left\">\n      {{ getErrorMessage(label) }}\n    </div>\n  }\n</div>\n", styles: ["::ng-deep .fx-select-field{display:block!important;width:100%!important;margin:0!important;padding:0!important;border-radius:.75rem;box-shadow:0 1px 1px rgb(var(--border-default))}::ng-deep .fx-select-field .mat-mdc-form-field-wrapper,::ng-deep .fx-select-field .mat-mdc-text-field-wrapper{padding:0!important;margin:0!important;width:100%!important}::ng-deep .fx-select-field .mdc-text-field{width:100%!important;margin:0!important;padding:0!important;--mdc-shape-small: 0 !important}::ng-deep .fx-select-field .mat-mdc-form-field-flex{width:100%!important;margin:0!important;padding:0 .75rem!important;border:1px solid rgb(var(--border-default));border-radius:.375rem;height:36px!important;align-items:center;background-color:rgb(var(--bg-primary))}::ng-deep .fx-select-field .mdc-notched-outline,::ng-deep .fx-select-field .mat-mdc-form-field-subscript-wrapper{display:none!important}::ng-deep .fx-select-field.mat-focused .mat-mdc-form-field-flex{border:2px solid rgb(var(--gradient-primary-start))!important;outline:none!important;border-radius:.375rem}::ng-deep .fx-select-field.mat-form-field-invalid .mat-mdc-form-field-flex{border:1px solid rgb(var(--bg-error-bold))!important;box-shadow:none!important}::ng-deep mat-form-field[invalid] .mat-mdc-form-field-flex{border:1px solid rgb(var(--bg-error-bold))!important;box-shadow:none!important}::ng-deep .fx-select-field .mat-mdc-select-trigger{padding:0!important;margin:0!important}::ng-deep .fx-select-field .mat-mdc-select-arrow-wrapper{margin-right:0!important}::ng-deep .fx-select-field .mat-mdc-select-arrow-wrapper{color:rgb(var(--text-primary))}::ng-deep .mat-mdc-select-panel{background-color:rgb(var(--bg-primary))!important;border:1px solid rgb(var(--border-default))!important;border-radius:.375rem!important;box-shadow:0 2px 4px #0000001a!important}::ng-deep .fx-select-field .mat-mdc-select-placeholder{color:rgb(var(--text-placeholder))!important;font-size:14px}::ng-deep .fx-select-field .mat-mdc-select-value{color:rgb(var(--text-primary))!important;font-size:14px;font-weight:400}.mat-select-panel .search-option-full-width{padding-left:0!important;padding-right:0!important;display:block;pointer-events:none;line-height:initial;height:auto}.mat-select-panel .search-option-full-width .search-bar{width:100%;padding:8px 16px;border:none;border-bottom:1px solid #ddd;box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.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: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i3$2.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", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SelectComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: SelectComponent, isStandalone: false, selector: "fx-ui-select", inputs: { label: "label", tooltip: "tooltip", placeholder: "placeholder", options: "options", multiple: "multiple", errorMessages: "errorMessages", required: "required", class: "class", enableSearch: "enableSearch", searchFn: "searchFn" }, outputs: { closed: "closed" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"mb-4 text-left w-full\" [class]=\"class\">\n  @if (label) {\n    <label class=\"block txt-field-label\">\n      {{ label }}\n      @if (required) {\n        <span class=\"txt-required\">*</span>\n      }\n      @if (tooltip) {\n        <fx-ui-hero-icon\n          icon=\"information-circle\"\n          [size]=\"16\"\n          class=\"inline-block align-middle ml-0.5 text-text-secondary cursor-help relative -top-px\"\n          [matTooltip]=\"tooltip\"\n          matTooltipPosition=\"above\"\n          matTooltipClass=\"text-text-primary text-xs font-semibold\"\n        ></fx-ui-hero-icon>\n      }\n    </label>\n  }\n\n  <mat-form-field\n    [attr.invalid]=\"invalid || null\"\n    class=\"fx-select-field w-full shadow-sm\"\n    appearance=\"fill\"\n  >\n    <mat-select\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [multiple]=\"multiple\"\n      [value]=\"value\"\n      (selectionChange)=\"onSelectionChange($event.value)\"\n      (openedChange)=\"onOpened($event)\"\n      (blur)=\"onTouched()\"\n    >\n      @if (enableSearch) {\n        <div class=\"px-semi w-full\">\n          <input\n            type=\"text\"\n            [placeholder]=\"'Search'\"\n            [(ngModel)]=\"searchTerm\"\n            (ngModelChange)=\"onSearchChange($event)\"\n            (click)=\"$event.stopPropagation()\"\n            class=\"text-text-primary placeholder:text-text-placeholder w-full bg-bg-primary border-b px-semi py-normal border-border-default focus:outline-none focus:border-gradient-primary-start text-sm text-text-primary tracking-normal ring-0 transition-colors duration-500 ease-in-out\"\n          />\n        </div>\n      }\n      <mat-option *ngFor=\"let option of filteredOptions\" [value]=\"option.value\">\n        <span class=\"txt-default\">{{ option.label }}</span>\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n\n  @if (invalid) {\n    <div class=\"txt-invalid text-left\">\n      {{ getErrorMessage(label) }}\n    </div>\n  }\n</div>\n", styles: ["::ng-deep .fx-select-field{display:block!important;width:100%!important;margin:0!important;padding:0!important;border-radius:.75rem;box-shadow:0 1px 1px rgb(var(--border-default))}::ng-deep .fx-select-field .mat-mdc-form-field-wrapper,::ng-deep .fx-select-field .mat-mdc-text-field-wrapper{padding:0!important;margin:0!important;width:100%!important}::ng-deep .fx-select-field .mdc-text-field{width:100%!important;margin:0!important;padding:0!important;--mdc-shape-small: 0 !important}::ng-deep .fx-select-field .mat-mdc-form-field-flex{width:100%!important;margin:0!important;padding:0 .75rem!important;border:1px solid rgb(var(--border-default));border-radius:.375rem;height:36px!important;align-items:center;background-color:rgb(var(--bg-primary))}::ng-deep .fx-select-field .mdc-notched-outline,::ng-deep .fx-select-field .mat-mdc-form-field-subscript-wrapper{display:none!important}::ng-deep .fx-select-field.mat-focused .mat-mdc-form-field-flex{border:2px solid rgb(var(--gradient-primary-start))!important;outline:none!important;border-radius:.375rem}::ng-deep .fx-select-field.mat-form-field-invalid .mat-mdc-form-field-flex{border:1px solid rgb(var(--bg-error-bold))!important;box-shadow:none!important}::ng-deep mat-form-field[invalid] .mat-mdc-form-field-flex{border:1px solid rgb(var(--bg-error-bold))!important;box-shadow:none!important}::ng-deep .fx-select-field .mat-mdc-select-trigger{padding:0!important;margin:0!important}::ng-deep .fx-select-field .mat-mdc-select-arrow-wrapper{margin-right:0!important}::ng-deep .fx-select-field .mat-mdc-select-arrow-wrapper .mat-mdc-select-arrow svg{display:none!important}::ng-deep .fx-select-field .mat-mdc-select-arrow-wrapper .mat-mdc-select-arrow{width:8px!important;height:8px!important;border-style:solid;border-color:currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);margin-top:-3px;color:rgb(var(--text-secondary))!important}::ng-deep .mat-mdc-select-panel{background-color:rgb(var(--bg-primary))!important;border:1px solid rgb(var(--border-default))!important;border-radius:.375rem!important;box-shadow:0 2px 4px #0000001a!important}::ng-deep .fx-select-field .mat-mdc-select-placeholder{color:rgb(var(--text-placeholder))!important;font-size:14px}::ng-deep .fx-select-field .mat-mdc-select-value{color:rgb(var(--text-primary))!important;font-size:14px;font-weight:400}.mat-select-panel .search-option-full-width{padding-left:0!important;padding-right:0!important;display:block;pointer-events:none;line-height:initial;height:auto}.mat-select-panel .search-option-full-width .search-bar{width:100%;padding:8px 16px;border:none;border-bottom:1px solid #ddd;box-sizing:border-box}::ng-deep .fx-select-field.mat-form-field-disabled .mat-mdc-form-field-flex,::ng-deep .fx-select-field:has(.mat-mdc-select-disabled) .mat-mdc-form-field-flex{background-color:rgb(var(--bg-primary-hover))!important;border-color:rgb(var(--border-default))!important;cursor:not-allowed!important;opacity:.6;box-shadow:none!important}::ng-deep .fx-select-field.mat-form-field-disabled .mat-mdc-select-value,::ng-deep .fx-select-field.mat-form-field-disabled .mat-mdc-select-placeholder,::ng-deep .fx-select-field.mat-form-field-disabled .mat-mdc-select-arrow,::ng-deep .fx-select-field:has(.mat-mdc-select-disabled) .mat-mdc-select-value,::ng-deep .fx-select-field:has(.mat-mdc-select-disabled) .mat-mdc-select-placeholder,::ng-deep .fx-select-field:has(.mat-mdc-select-disabled) .mat-mdc-select-arrow{color:rgb(var(--text-placeholder))!important}::ng-deep .fx-select-field.mat-form-field-disabled .mat-mdc-select,::ng-deep .fx-select-field:has(.mat-mdc-select-disabled) .mat-mdc-select{cursor:not-allowed!important}\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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i3.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", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i56.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fx-ui-select', standalone: false, template: "<div class=\"mb-4 text-left w-full\" [class]=\"class\">\n  @if (label) {\n    <label class=\"block txt-field-label\">\n      {{ label }}\n      @if (required) {\n        <span class=\"txt-required\">*</span>\n      }\n      @if (tooltip) {\n        <fx-ui-hero-icon\n          icon=\"information-circle\"\n          [size]=\"16\"\n          class=\"inline-block align-middle ml-0.5 text-text-secondary cursor-help relative -top-px\"\n          [matTooltip]=\"tooltip\"\n          matTooltipPosition=\"above\"\n          matTooltipClass=\"text-text-primary text-xs font-semibold\"\n        ></fx-ui-hero-icon>\n      }\n    </label>\n  }\n\n  <mat-form-field\n    [attr.invalid]=\"invalid || null\"\n    class=\"fx-select-field w-full shadow-sm\"\n    appearance=\"fill\"\n  >\n    <mat-select\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [multiple]=\"multiple\"\n      [value]=\"value\"\n      (selectionChange)=\"onSelectionChange($event.value)\"\n      (openedChange)=\"onOpened($event)\"\n      (blur)=\"onTouched()\"\n    >\n      @if (enableSearch) {\n        <div class=\"px-semi w-full\">\n          <input\n            type=\"text\"\n            [placeholder]=\"'Search'\"\n            [(ngModel)]=\"searchTerm\"\n            (ngModelChange)=\"onSearchChange($event)\"\n            (click)=\"$event.stopPropagation()\"\n            class=\"text-text-primary placeholder:text-text-placeholder w-full bg-bg-primary border-b px-semi py-normal border-border-default focus:outline-none focus:border-gradient-primary-start text-sm text-text-primary tracking-normal ring-0 transition-colors duration-500 ease-in-out\"\n          />\n        </div>\n      }\n      <mat-option *ngFor=\"let option of filteredOptions\" [value]=\"option.value\">\n        <span class=\"txt-default\">{{ option.label }}</span>\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n\n  @if (invalid) {\n    <div class=\"txt-invalid text-left\">\n      {{ getErrorMessage(label) }}\n    </div>\n  }\n</div>\n", styles: ["::ng-deep .fx-select-field{display:block!important;width:100%!important;margin:0!important;padding:0!important;border-radius:.75rem;box-shadow:0 1px 1px rgb(var(--border-default))}::ng-deep .fx-select-field .mat-mdc-form-field-wrapper,::ng-deep .fx-select-field .mat-mdc-text-field-wrapper{padding:0!important;margin:0!important;width:100%!important}::ng-deep .fx-select-field .mdc-text-field{width:100%!important;margin:0!important;padding:0!important;--mdc-shape-small: 0 !important}::ng-deep .fx-select-field .mat-mdc-form-field-flex{width:100%!important;margin:0!important;padding:0 .75rem!important;border:1px solid rgb(var(--border-default));border-radius:.375rem;height:36px!important;align-items:center;background-color:rgb(var(--bg-primary))}::ng-deep .fx-select-field .mdc-notched-outline,::ng-deep .fx-select-field .mat-mdc-form-field-subscript-wrapper{display:none!important}::ng-deep .fx-select-field.mat-focused .mat-mdc-form-field-flex{border:2px solid rgb(var(--gradient-primary-start))!important;outline:none!important;border-radius:.375rem}::ng-deep .fx-select-field.mat-form-field-invalid .mat-mdc-form-field-flex{border:1px solid rgb(var(--bg-error-bold))!important;box-shadow:none!important}::ng-deep mat-form-field[invalid] .mat-mdc-form-field-flex{border:1px solid rgb(var(--bg-error-bold))!important;box-shadow:none!important}::ng-deep .fx-select-field .mat-mdc-select-trigger{padding:0!important;margin:0!important}::ng-deep .fx-select-field .mat-mdc-select-arrow-wrapper{margin-right:0!important}::ng-deep .fx-select-field .mat-mdc-select-arrow-wrapper{color:rgb(var(--text-primary))}::ng-deep .mat-mdc-select-panel{background-color:rgb(var(--bg-primary))!important;border:1px solid rgb(var(--border-default))!important;border-radius:.375rem!important;box-shadow:0 2px 4px #0000001a!important}::ng-deep .fx-select-field .mat-mdc-select-placeholder{color:rgb(var(--text-placeholder))!important;font-size:14px}::ng-deep .fx-select-field .mat-mdc-select-value{color:rgb(var(--text-primary))!important;font-size:14px;font-weight:400}.mat-select-panel .search-option-full-width{padding-left:0!important;padding-right:0!important;display:block;pointer-events:none;line-height:initial;height:auto}.mat-select-panel .search-option-full-width .search-bar{width:100%;padding:8px 16px;border:none;border-bottom:1px solid #ddd;box-sizing:border-box}\n"] }]
-        }], ctorParameters: () => [{ type: i1$3.NgControl }, { type: i0.ChangeDetectorRef }], propDecorators: { label: [{
+            args: [{ selector: 'fx-ui-select', standalone: false, template: "<div class=\"mb-4 text-left w-full\" [class]=\"class\">\n  @if (label) {\n    <label class=\"block txt-field-label\">\n      {{ label }}\n      @if (required) {\n        <span class=\"txt-required\">*</span>\n      }\n      @if (tooltip) {\n        <fx-ui-hero-icon\n          icon=\"information-circle\"\n          [size]=\"16\"\n          class=\"inline-block align-middle ml-0.5 text-text-secondary cursor-help relative -top-px\"\n          [matTooltip]=\"tooltip\"\n          matTooltipPosition=\"above\"\n          matTooltipClass=\"text-text-primary text-xs font-semibold\"\n        ></fx-ui-hero-icon>\n      }\n    </label>\n  }\n\n  <mat-form-field\n    [attr.invalid]=\"invalid || null\"\n    class=\"fx-select-field w-full shadow-sm\"\n    appearance=\"fill\"\n  >\n    <mat-select\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [multiple]=\"multiple\"\n      [value]=\"value\"\n      (selectionChange)=\"onSelectionChange($event.value)\"\n      (openedChange)=\"onOpened($event)\"\n      (blur)=\"onTouched()\"\n    >\n      @if (enableSearch) {\n        <div class=\"px-semi w-full\">\n          <input\n            type=\"text\"\n            [placeholder]=\"'Search'\"\n            [(ngModel)]=\"searchTerm\"\n            (ngModelChange)=\"onSearchChange($event)\"\n            (click)=\"$event.stopPropagation()\"\n            class=\"text-text-primary placeholder:text-text-placeholder w-full bg-bg-primary border-b px-semi py-normal border-border-default focus:outline-none focus:border-gradient-primary-start text-sm text-text-primary tracking-normal ring-0 transition-colors duration-500 ease-in-out\"\n          />\n        </div>\n      }\n      <mat-option *ngFor=\"let option of filteredOptions\" [value]=\"option.value\">\n        <span class=\"txt-default\">{{ option.label }}</span>\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n\n  @if (invalid) {\n    <div class=\"txt-invalid text-left\">\n      {{ getErrorMessage(label) }}\n    </div>\n  }\n</div>\n", styles: ["::ng-deep .fx-select-field{display:block!important;width:100%!important;margin:0!important;padding:0!important;border-radius:.75rem;box-shadow:0 1px 1px rgb(var(--border-default))}::ng-deep .fx-select-field .mat-mdc-form-field-wrapper,::ng-deep .fx-select-field .mat-mdc-text-field-wrapper{padding:0!important;margin:0!important;width:100%!important}::ng-deep .fx-select-field .mdc-text-field{width:100%!important;margin:0!important;padding:0!important;--mdc-shape-small: 0 !important}::ng-deep .fx-select-field .mat-mdc-form-field-flex{width:100%!important;margin:0!important;padding:0 .75rem!important;border:1px solid rgb(var(--border-default));border-radius:.375rem;height:36px!important;align-items:center;background-color:rgb(var(--bg-primary))}::ng-deep .fx-select-field .mdc-notched-outline,::ng-deep .fx-select-field .mat-mdc-form-field-subscript-wrapper{display:none!important}::ng-deep .fx-select-field.mat-focused .mat-mdc-form-field-flex{border:2px solid rgb(var(--gradient-primary-start))!important;outline:none!important;border-radius:.375rem}::ng-deep .fx-select-field.mat-form-field-invalid .mat-mdc-form-field-flex{border:1px solid rgb(var(--bg-error-bold))!important;box-shadow:none!important}::ng-deep mat-form-field[invalid] .mat-mdc-form-field-flex{border:1px solid rgb(var(--bg-error-bold))!important;box-shadow:none!important}::ng-deep .fx-select-field .mat-mdc-select-trigger{padding:0!important;margin:0!important}::ng-deep .fx-select-field .mat-mdc-select-arrow-wrapper{margin-right:0!important}::ng-deep .fx-select-field .mat-mdc-select-arrow-wrapper .mat-mdc-select-arrow svg{display:none!important}::ng-deep .fx-select-field .mat-mdc-select-arrow-wrapper .mat-mdc-select-arrow{width:8px!important;height:8px!important;border-style:solid;border-color:currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);margin-top:-3px;color:rgb(var(--text-secondary))!important}::ng-deep .mat-mdc-select-panel{background-color:rgb(var(--bg-primary))!important;border:1px solid rgb(var(--border-default))!important;border-radius:.375rem!important;box-shadow:0 2px 4px #0000001a!important}::ng-deep .fx-select-field .mat-mdc-select-placeholder{color:rgb(var(--text-placeholder))!important;font-size:14px}::ng-deep .fx-select-field .mat-mdc-select-value{color:rgb(var(--text-primary))!important;font-size:14px;font-weight:400}.mat-select-panel .search-option-full-width{padding-left:0!important;padding-right:0!important;display:block;pointer-events:none;line-height:initial;height:auto}.mat-select-panel .search-option-full-width .search-bar{width:100%;padding:8px 16px;border:none;border-bottom:1px solid #ddd;box-sizing:border-box}::ng-deep .fx-select-field.mat-form-field-disabled .mat-mdc-form-field-flex,::ng-deep .fx-select-field:has(.mat-mdc-select-disabled) .mat-mdc-form-field-flex{background-color:rgb(var(--bg-primary-hover))!important;border-color:rgb(var(--border-default))!important;cursor:not-allowed!important;opacity:.6;box-shadow:none!important}::ng-deep .fx-select-field.mat-form-field-disabled .mat-mdc-select-value,::ng-deep .fx-select-field.mat-form-field-disabled .mat-mdc-select-placeholder,::ng-deep .fx-select-field.mat-form-field-disabled .mat-mdc-select-arrow,::ng-deep .fx-select-field:has(.mat-mdc-select-disabled) .mat-mdc-select-value,::ng-deep .fx-select-field:has(.mat-mdc-select-disabled) .mat-mdc-select-placeholder,::ng-deep .fx-select-field:has(.mat-mdc-select-disabled) .mat-mdc-select-arrow{color:rgb(var(--text-placeholder))!important}::ng-deep .fx-select-field.mat-form-field-disabled .mat-mdc-select,::ng-deep .fx-select-field:has(.mat-mdc-select-disabled) .mat-mdc-select{cursor:not-allowed!important}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { label: [{
                 type: Input
             }], tooltip: [{
                 type: Input
@@ -2851,8 +3366,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Input
             }], multiple: [{
                 type: Input
-            }], disabled: [{
-                type: Input
             }], errorMessages: [{
                 type: Input
             }], required: [{
@@ -2871,7 +3384,7 @@ class SkeletonTableLoadingComponent {
     columns = 5;
     rows = 5;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SkeletonTableLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: SkeletonTableLoadingComponent, isStandalone: false, selector: "fx-ui-skeleton-table-loading", inputs: { columns: "columns", rows: "rows" }, ngImport: i0, template: "<div class=\"w-full animate-pulse space-y-normal\">\n  <div\n    class=\"grid gap-small\"\n    [ngStyle]=\"{ 'grid-template-columns': 'repeat(' + columns + ', minmax(0, 1fr))' }\"\n  >\n    @for(col of [].constructor(columns); track col) {\n      <div class=\"h-6 bg-bg-hover rounded\"></div>\n    }\n  </div>\n\n  @for(row of [].constructor(rows); track row) {\n    <div\n      class=\"grid gap-small\"\n      [ngStyle]=\"{ 'grid-template-columns': 'repeat(' + columns + ', minmax(0, 1fr))' }\"\n    >\n      @for(col of [].constructor(columns); track col) {\n        <div class=\"h-7 bg-bg-hover rounded\"></div>\n      }\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: SkeletonTableLoadingComponent, isStandalone: false, selector: "fx-ui-skeleton-table-loading", inputs: { columns: "columns", rows: "rows" }, ngImport: i0, template: "<div class=\"w-full animate-pulse space-y-normal\">\n  <div\n    class=\"grid gap-small\"\n    [ngStyle]=\"{ 'grid-template-columns': 'repeat(' + columns + ', minmax(0, 1fr))' }\"\n  >\n    @for(col of [].constructor(columns); track col) {\n      <div class=\"h-6 bg-bg-hover rounded\"></div>\n    }\n  </div>\n\n  @for(row of [].constructor(rows); track row) {\n    <div\n      class=\"grid gap-small\"\n      [ngStyle]=\"{ 'grid-template-columns': 'repeat(' + columns + ', minmax(0, 1fr))' }\"\n    >\n      @for(col of [].constructor(columns); track col) {\n        <div class=\"h-7 bg-bg-hover rounded\"></div>\n      }\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SkeletonTableLoadingComponent, decorators: [{
             type: Component,
@@ -2890,11 +3403,10 @@ class SliderComponent extends FxComponent {
     max = 100;
     step = 1;
     vertical = false;
-    disabled = false;
     valueChange = new EventEmitter();
     dragging = false;
-    constructor(ngControl, ref) {
-        super(ngControl);
+    constructor(ref) {
+        super();
         this.ref = ref;
     }
     ngAfterViewInit() {
@@ -2942,7 +3454,9 @@ class SliderComponent extends FxComponent {
         try {
             event.target.releasePointerCapture(event.pointerId);
         }
-        catch { }
+        catch {
+            // pointer capture may already be released
+        }
         this.dragging = false;
         this.onTouched();
     }
@@ -3008,13 +3522,13 @@ class SliderComponent extends FxComponent {
             ? { bottom: `${this.percent}%`, transform: 'translateY(50%)' }
             : { left: `${this.percent}%`, transform: 'translateX(-50%)' };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SliderComponent, deps: [{ token: i1$3.NgControl }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: SliderComponent, isStandalone: false, selector: "fx-ui-slider", inputs: { min: "min", max: "max", step: "step", vertical: "vertical", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "keydown": "onKeydown($event)" } }, viewQueries: [{ propertyName: "trackRef", first: true, predicate: ["track"], descendants: true, static: true }, { propertyName: "thumbRef", first: true, predicate: ["thumb"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"w-full select-none\"\n  [class.cursor-not-allowed]=\"disabled\"\n  [class.opacity-60]=\"disabled\"\n  role=\"group\"\n>\n  <div\n    #track\n    class=\"relative touch-none py-4\"\n    (click)=\"onTrackClick($event)\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-orientation]=\"vertical ? 'vertical' : 'horizontal'\"\n  >\n    <div\n      class=\"relative flex items-center\"\n      [ngClass]=\"{ 'flex-col h-48': vertical }\"\n    >\n      <div\n        class=\"relative flex-1 rounded-full bg-gray-600 h-2\"\n        [ngClass]=\"{ 'w-1 rotate-0 h-full w-auto bg-border-gray-700': vertical }\"\n      >\n        <div\n          class=\"absolute left-0 top-0 h-full rounded-full bg-primary\"\n          *ngIf=\"!vertical\"\n          [style.width.%]=\"percent\"\n        ></div>\n\n        <div\n          class=\"absolute bottom-0 left-0 w-full rounded-full bg-primary\"\n          *ngIf=\"vertical\"\n          [style.height.%]=\"percent\"\n          style=\"transform-origin: bottom;\"\n        ></div>\n\n        <button\n          #thumb\n          type=\"button\"\n          class=\"absolute -mt-1 -ml-1.5 w-4 h-4 rounded-full shadow focus:ring-primary bg-primary border-2 border-text-primary\"\n          [ngStyle]=\"thumbStyle()\"\n          role=\"slider\"\n          [attr.aria-valuemin]=\"min\"\n          [attr.aria-valuemax]=\"max\"\n          [attr.aria-valuenow]=\"value\"\n          [attr.aria-disabled]=\"disabled\"\n          tabindex=\"0\"\n          (pointerdown)=\"onPointerDown($event)\"\n          (pointermove)=\"onPointerMove($event)\"\n          (pointerup)=\"onPointerUp($event)\"\n          [disabled]=\"disabled\"\n        ></button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SliderComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: SliderComponent, isStandalone: false, selector: "fx-ui-slider", inputs: { min: "min", max: "max", step: "step", vertical: "vertical" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "keydown": "onKeydown($event)" } }, viewQueries: [{ propertyName: "trackRef", first: true, predicate: ["track"], descendants: true, static: true }, { propertyName: "thumbRef", first: true, predicate: ["thumb"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"w-full select-none\"\n  [class.cursor-not-allowed]=\"disabled\"\n  [class.opacity-60]=\"disabled\"\n  role=\"group\"\n>\n  <div\n    #track\n    class=\"relative touch-none py-4\"\n    (click)=\"onTrackClick($event)\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-orientation]=\"vertical ? 'vertical' : 'horizontal'\"\n  >\n    <div\n      class=\"relative flex items-center\"\n      [ngClass]=\"{ 'flex-col h-48': vertical }\"\n    >\n      <div\n        class=\"relative flex-1 rounded-full bg-gray-600 h-2\"\n        [ngClass]=\"{ 'w-1 rotate-0 h-full w-auto bg-border-gray-700': vertical }\"\n      >\n        <div\n          class=\"absolute left-0 top-0 h-full rounded-full bg-primary\"\n          *ngIf=\"!vertical\"\n          [style.width.%]=\"percent\"\n        ></div>\n\n        <div\n          class=\"absolute bottom-0 left-0 w-full rounded-full bg-primary\"\n          *ngIf=\"vertical\"\n          [style.height.%]=\"percent\"\n          style=\"transform-origin: bottom;\"\n        ></div>\n\n        <button\n          #thumb\n          type=\"button\"\n          class=\"absolute -mt-1 -ml-1.5 w-4 h-4 rounded-full shadow focus:ring-primary bg-primary border-2 border-text-primary\"\n          [ngStyle]=\"thumbStyle()\"\n          role=\"slider\"\n          [attr.aria-valuemin]=\"min\"\n          [attr.aria-valuemax]=\"max\"\n          [attr.aria-valuenow]=\"value\"\n          [attr.aria-disabled]=\"disabled\"\n          tabindex=\"0\"\n          (pointerdown)=\"onPointerDown($event)\"\n          (pointermove)=\"onPointerMove($event)\"\n          (pointerup)=\"onPointerUp($event)\"\n          [disabled]=\"disabled\"\n        ></button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SliderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fx-ui-slider', standalone: false, template: "<div\n  class=\"w-full select-none\"\n  [class.cursor-not-allowed]=\"disabled\"\n  [class.opacity-60]=\"disabled\"\n  role=\"group\"\n>\n  <div\n    #track\n    class=\"relative touch-none py-4\"\n    (click)=\"onTrackClick($event)\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-orientation]=\"vertical ? 'vertical' : 'horizontal'\"\n  >\n    <div\n      class=\"relative flex items-center\"\n      [ngClass]=\"{ 'flex-col h-48': vertical }\"\n    >\n      <div\n        class=\"relative flex-1 rounded-full bg-gray-600 h-2\"\n        [ngClass]=\"{ 'w-1 rotate-0 h-full w-auto bg-border-gray-700': vertical }\"\n      >\n        <div\n          class=\"absolute left-0 top-0 h-full rounded-full bg-primary\"\n          *ngIf=\"!vertical\"\n          [style.width.%]=\"percent\"\n        ></div>\n\n        <div\n          class=\"absolute bottom-0 left-0 w-full rounded-full bg-primary\"\n          *ngIf=\"vertical\"\n          [style.height.%]=\"percent\"\n          style=\"transform-origin: bottom;\"\n        ></div>\n\n        <button\n          #thumb\n          type=\"button\"\n          class=\"absolute -mt-1 -ml-1.5 w-4 h-4 rounded-full shadow focus:ring-primary bg-primary border-2 border-text-primary\"\n          [ngStyle]=\"thumbStyle()\"\n          role=\"slider\"\n          [attr.aria-valuemin]=\"min\"\n          [attr.aria-valuemax]=\"max\"\n          [attr.aria-valuenow]=\"value\"\n          [attr.aria-disabled]=\"disabled\"\n          tabindex=\"0\"\n          (pointerdown)=\"onPointerDown($event)\"\n          (pointermove)=\"onPointerMove($event)\"\n          (pointerup)=\"onPointerUp($event)\"\n          [disabled]=\"disabled\"\n        ></button>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1$3.NgControl }, { type: i0.ChangeDetectorRef }], propDecorators: { trackRef: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { trackRef: [{
                 type: ViewChild,
                 args: ['track', { static: true }]
             }], thumbRef: [{
@@ -3028,8 +3542,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Input
             }], vertical: [{
                 type: Input
-            }], disabled: [{
-                type: Input
             }], valueChange: [{
                 type: Output
             }], onKeydown: [{
@@ -3039,17 +3551,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
 
 class SwitchComponent extends FxComponent {
     cdr;
-    disabled = false;
     onSwitch = new EventEmitter();
     ngAfterViewInit() {
         this.cdr.detectChanges();
     }
-    constructor(ngControl, cdr) {
-        super(ngControl);
+    constructor(cdr) {
+        super();
         this.cdr = cdr;
     }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
+    writeValue(value) {
+        this.value = value ?? false;
     }
     toggle() {
         if (this.disabled)
@@ -3059,15 +3570,13 @@ class SwitchComponent extends FxComponent {
         this.onChange(this.value);
         this.onTouched();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SwitchComponent, deps: [{ token: i1$3.NgControl }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: SwitchComponent, isStandalone: false, selector: "fx-ui-switch", inputs: { disabled: "disabled" }, outputs: { onSwitch: "onSwitch" }, usesInheritance: true, ngImport: i0, template: "<div\n  class=\"relative flex items-center w-10 h-5 rounded-full transition-colors duration-300 cursor-pointer\"\n  [ngClass]=\"{\n    'bg-success': value && !disabled,\n    'bg-button-default': !value && !disabled,\n    'bg-bg-hover': disabled\n  }\"\n  (click)=\"toggle()\"\n>\n  @if(value) {\n    <i style=\"font-size: 20px;\" class=\"material-symbols-outlined absolute left-0.5 top-0 text-text-inverse\">check</i>\n    \n  }\n  @if(!value) {\n    <i style=\"font-size: 20px;\" class=\"material-symbols-outlined absolute right-0.5 top-0 text-text-inverse\">close</i>\n  }\n  <div\n    class=\"absolute top-0.5 left-0.5 w-4 h-4 bg-text-inverse rounded-full shadow-md transform transition-transform duration-300\"\n    [ngClass]=\"{ 'translate-x-5': value }\"\n  ></div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SwitchComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: SwitchComponent, isStandalone: false, selector: "fx-ui-switch", outputs: { onSwitch: "onSwitch" }, usesInheritance: true, ngImport: i0, template: "<div\n  class=\"relative flex items-center w-10 h-5 rounded-full transition-colors duration-300 cursor-pointer\"\n  [ngClass]=\"{\n    'bg-success': value && !disabled,\n    'bg-button-default': !value && !disabled,\n    'bg-bg-hover': disabled\n  }\"\n  (click)=\"toggle()\"\n>\n  @if(value) {\n    <i style=\"font-size: 20px;\" class=\"material-symbols-outlined absolute left-0.5 top-0 text-text-inverse\">check</i>\n    \n  }\n  @if(!value) {\n    <i style=\"font-size: 20px;\" class=\"material-symbols-outlined absolute right-0.5 top-0 text-text-inverse\">close</i>\n  }\n  <div\n    class=\"absolute top-0.5 left-0.5 w-4 h-4 bg-text-inverse rounded-full shadow-md transform transition-transform duration-300\"\n    [ngClass]=\"{ 'translate-x-5': value }\"\n  ></div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SwitchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fx-ui-switch', standalone: false, template: "<div\n  class=\"relative flex items-center w-10 h-5 rounded-full transition-colors duration-300 cursor-pointer\"\n  [ngClass]=\"{\n    'bg-success': value && !disabled,\n    'bg-button-default': !value && !disabled,\n    'bg-bg-hover': disabled\n  }\"\n  (click)=\"toggle()\"\n>\n  @if(value) {\n    <i style=\"font-size: 20px;\" class=\"material-symbols-outlined absolute left-0.5 top-0 text-text-inverse\">check</i>\n    \n  }\n  @if(!value) {\n    <i style=\"font-size: 20px;\" class=\"material-symbols-outlined absolute right-0.5 top-0 text-text-inverse\">close</i>\n  }\n  <div\n    class=\"absolute top-0.5 left-0.5 w-4 h-4 bg-text-inverse rounded-full shadow-md transform transition-transform duration-300\"\n    [ngClass]=\"{ 'translate-x-5': value }\"\n  ></div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1$3.NgControl }, { type: i0.ChangeDetectorRef }], propDecorators: { disabled: [{
-                type: Input
-            }], onSwitch: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { onSwitch: [{
                 type: Output
             }] } });
 
@@ -3175,7 +3684,7 @@ class TabGroupComponent {
         this.updateUnderlinePosition();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TabGroupComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: TabGroupComponent, isStandalone: false, selector: "fx-ui-tab-group", inputs: { activeIndex: "activeIndex" }, host: { listeners: { "window:resize": "onResize()" } }, queries: [{ propertyName: "tabs", predicate: TabComponent }], viewQueries: [{ propertyName: "tabListRef", first: true, predicate: ["tabList"], descendants: true, static: true }, { propertyName: "underlineRef", first: true, predicate: ["underline"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"relative\">\n  <!-- Left scroll button -->\n  <button\n    class=\"left-scroll-button\"\n    type=\"button\"\n    (click)=\"scroll('left')\"\n    [style.opacity]=\"canScrollLeft ? 1 : 0\"\n    [style.pointerEvents]=\"canScrollLeft ? 'auto' : 'none'\"\n  >\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      class=\"h-5 w-5 text-text-primary\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      stroke=\"currentColor\"\n    >\n      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\" />\n    </svg>\n  </button>\n\n  <div\n    #tabList\n    class=\"relative flex overflow-x-auto no-scrollbar scroll-smooth\"\n    (scroll)=\"onScroll()\"\n  >\n    <button\n      *ngFor=\"let tab of tabs.toArray(); let i = index\"\n      (click)=\"selectTab(i)\"\n      class=\"tab-btn tab-bar-btn\"\n    >\n      <div class=\"flex flex-row items-center justify-center\">\n        @if (tab.icon) {\n          <fx-ui-hero-icon\n            [icon]=\"tab.icon\"\n            [size]=\"20\"\n            class=\"flex mr-[2px]\"\n            [ngClass]=\"{\n              'text-gradient-primary-start mb-small': i === activeIndex,\n              'text-text-placeholder': i !== activeIndex,\n            }\"\n          ></fx-ui-hero-icon>\n        }\n        <div\n          [ngClass]=\"\n            i === activeIndex ? 'txt-field-label text-gradient-primary-start' : 'txt-placeholder'\n          \"\n        >\n          {{ tab.label }}\n        </div>\n      </div>\n    </button>\n\n    <span #underline class=\"underline\" style=\"width: 0; transform: translateX(0)\"></span>\n  </div>\n\n  <button\n    class=\"right-scroll-button\"\n    type=\"button\"\n    (click)=\"scroll('right')\"\n    [style.opacity]=\"canScrollRight ? 1 : 0\"\n    [style.pointerEvents]=\"canScrollRight ? 'auto' : 'none'\"\n  >\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      class=\"h-5 w-5 text-text-primary\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      stroke=\"currentColor\"\n    >\n      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\" />\n    </svg>\n  </button>\n</div>\n\n<!-- Tab content -->\n<div class=\"transition-all duration-300 ease-in-out mt-4\">\n  <ng-container *ngFor=\"let tab of tabs.toArray(); let i = index\">\n    <div *ngIf=\"i === activeIndex\" class=\"animate-fadeIn\">\n      <ng-container *ngTemplateOutlet=\"tab.content\"></ng-container>\n    </div>\n  </ng-container>\n</div>\n", styles: ["@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.animate-fadeIn{animation:fadeIn .28s ease-in-out}.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.underline{position:absolute;bottom:0;height:2px;background-color:rgb(var(--gradient-primary-start));transition:transform .25s cubic-bezier(.2,.9,.2,1),width .25s cubic-bezier(.2,.9,.2,1);will-change:transform,width;transform:translate(0);width:0;margin-left:32px;margin-right:32px}.left-scroll-button{position:absolute;left:0;top:0;z-index:10;display:flex;height:100%;align-items:center;--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary) / var(--tw-bg-opacity, 1));padding-left:.5rem;padding-right:.5rem;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}.right-scroll-button{position:absolute;right:0;top:0;z-index:10;display:flex;height:100%;align-items:center;--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary) / var(--tw-bg-opacity, 1));padding-left:.5rem;padding-right:.5rem;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}.tab-bar-btn{position:relative;white-space:nowrap;padding:.5rem 1rem;font-size:.875rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: TabGroupComponent, isStandalone: false, selector: "fx-ui-tab-group", inputs: { activeIndex: "activeIndex" }, host: { listeners: { "window:resize": "onResize()" } }, queries: [{ propertyName: "tabs", predicate: TabComponent }], viewQueries: [{ propertyName: "tabListRef", first: true, predicate: ["tabList"], descendants: true, static: true }, { propertyName: "underlineRef", first: true, predicate: ["underline"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"relative\">\n  <!-- Left scroll button -->\n  <button\n    class=\"left-scroll-button\"\n    type=\"button\"\n    (click)=\"scroll('left')\"\n    [style.opacity]=\"canScrollLeft ? 1 : 0\"\n    [style.pointerEvents]=\"canScrollLeft ? 'auto' : 'none'\"\n  >\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      class=\"h-5 w-5 text-text-primary\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      stroke=\"currentColor\"\n    >\n      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\" />\n    </svg>\n  </button>\n\n  <div\n    #tabList\n    class=\"relative flex overflow-x-auto no-scrollbar scroll-smooth\"\n    (scroll)=\"onScroll()\"\n  >\n    <button\n      *ngFor=\"let tab of tabs.toArray(); let i = index\"\n      (click)=\"selectTab(i)\"\n      class=\"tab-btn tab-bar-btn\"\n    >\n      <div class=\"flex flex-row items-center justify-center\">\n        @if (tab.icon) {\n          <fx-ui-hero-icon\n            [icon]=\"tab.icon\"\n            [size]=\"20\"\n            class=\"flex mr-[2px]\"\n            [ngClass]=\"{\n              'text-gradient-primary-start mb-small': i === activeIndex,\n              'text-text-placeholder': i !== activeIndex,\n            }\"\n          ></fx-ui-hero-icon>\n        }\n        <div\n          [ngClass]=\"\n            i === activeIndex ? 'txt-field-label text-gradient-primary-start' : 'txt-placeholder'\n          \"\n        >\n          {{ tab.label }}\n        </div>\n      </div>\n    </button>\n\n    <span #underline class=\"underline\" style=\"width: 0; transform: translateX(0)\"></span>\n  </div>\n\n  <button\n    class=\"right-scroll-button\"\n    type=\"button\"\n    (click)=\"scroll('right')\"\n    [style.opacity]=\"canScrollRight ? 1 : 0\"\n    [style.pointerEvents]=\"canScrollRight ? 'auto' : 'none'\"\n  >\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      class=\"h-5 w-5 text-text-primary\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      stroke=\"currentColor\"\n    >\n      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\" />\n    </svg>\n  </button>\n</div>\n\n<!-- Tab content -->\n<div class=\"transition-all duration-300 ease-in-out mt-4\">\n  <ng-container *ngFor=\"let tab of tabs.toArray(); let i = index\">\n    <div *ngIf=\"i === activeIndex\" class=\"animate-fadeIn\">\n      <ng-container *ngTemplateOutlet=\"tab.content\"></ng-container>\n    </div>\n  </ng-container>\n</div>\n", styles: ["@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.animate-fadeIn{animation:fadeIn .28s ease-in-out}.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.underline{position:absolute;bottom:0;height:2px;background-color:rgb(var(--gradient-primary-start));transition:transform .25s cubic-bezier(.2,.9,.2,1),width .25s cubic-bezier(.2,.9,.2,1);will-change:transform,width;transform:translate(0);width:0;margin-left:32px;margin-right:32px}.left-scroll-button{position:absolute;left:0;top:0;z-index:10;display:flex;height:100%;align-items:center;--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary) / var(--tw-bg-opacity, 1));padding-left:.5rem;padding-right:.5rem;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}.right-scroll-button{position:absolute;right:0;top:0;z-index:10;display:flex;height:100%;align-items:center;--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary) / var(--tw-bg-opacity, 1));padding-left:.5rem;padding-right:.5rem;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}.tab-bar-btn{position:relative;white-space:nowrap;padding:.5rem 1rem;font-size:.875rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TabGroupComponent, decorators: [{
             type: Component,
@@ -3218,12 +3727,12 @@ class TagComponent {
     rounded = true;
     icon;
     solid = false;
-    click = new EventEmitter();
+    clicked = new EventEmitter();
     onClick() {
-        this.click.emit();
+        this.clicked.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: TagComponent, isStandalone: false, selector: "fx-ui-tag", inputs: { label: "label", type: "type", rounded: "rounded", icon: "icon", solid: "solid" }, outputs: { click: "click" }, ngImport: i0, template: "<div\n  (click)=\"onClick()\"\n  [class]=\"\n    `flex flex-row gap-small ${rounded ? 'tag-round' : 'tag-square'} tag-${type}${solid ? '-solid' : ''}`\n  \"\n>\n  @if (icon) {\n    <fx-ui-hero-icon\n      [class]=\"`flex txt-tag-${type} ${solid && type !== 'default' ? 'text-white' : ''}`\"\n      [icon]=\"icon\"\n      [size]=\"18\"\n    ></fx-ui-hero-icon>\n  }\n\n  <div [class]=\"`txt-tag-${type} ${solid && type !== 'default' ? 'text-white font-medium' : ''}`\">\n    {{ label }}\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: TagComponent, isStandalone: false, selector: "fx-ui-tag", inputs: { label: "label", type: "type", rounded: "rounded", icon: "icon", solid: "solid" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div\n  (click)=\"onClick()\"\n  [class]=\"\n    `flex flex-row gap-small ${rounded ? 'tag-round' : 'tag-square'} tag-${type}${solid ? '-solid' : ''}`\n  \"\n>\n  @if (icon) {\n    <fx-ui-hero-icon\n      [class]=\"`flex txt-tag-${type} ${solid && type !== 'default' ? 'text-white' : ''}`\"\n      [icon]=\"icon\"\n      [size]=\"18\"\n    ></fx-ui-hero-icon>\n  }\n\n  <div [class]=\"`txt-tag-${type} ${solid && type !== 'default' ? 'text-white font-medium' : ''}`\">\n    {{ label }}\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TagComponent, decorators: [{
             type: Component,
@@ -3238,7 +3747,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Input
             }], solid: [{
                 type: Input
-            }], click: [{
+            }], clicked: [{
                 type: Output
             }] } });
 
@@ -3327,7 +3836,7 @@ class TreeDiagram {
         this.cdr.detectChanges();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TreeDiagram, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: TreeDiagram, isStandalone: false, selector: "fx-ui-tree-diagram", inputs: { data: "data" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "root", first: true, predicate: ["root"], descendants: true }, { propertyName: "children", predicate: ["child"], descendants: true }], ngImport: i0, template: "<div class=\"relative p-8\" #container>\n\n  <!-- ROOT -->\n  <div\n    #root\n    class=\"mx-auto w-fit bg-blue-600 text-white px-7 py-3 rounded-md font-semibold text-center\"\n  >\n    {{ data.label }}\n  </div>\n\n  <!-- CHILDREN -->\n  <div class=\"mt-16 flex justify-center gap-16\">\n    <div\n      *ngFor=\"let child of data.children\"\n      #child\n      class=\"w-48 bg-rose-600 text-white px-4 py-4 rounded-lg text-center\"\n    >\n      <div class=\"font-semibold text-lg\">{{ child.label }}</div>\n      <div class=\"mt-1 text-sm opacity-90\">{{ child.status }}</div>\n    </div>\n  </div>\n\n  <!-- SVG CONNECTORS -->\n  <svg\n    class=\"absolute inset-0 pointer-events-none\"\n    [attr.width]=\"svgWidth\"\n    [attr.height]=\"svgHeight\"\n  >\n    <line\n      *ngFor=\"let line of lines\"\n      [attr.x1]=\"line.x1\"\n      [attr.y1]=\"line.y1\"\n      [attr.x2]=\"line.x2\"\n      [attr.y2]=\"line.y2\"\n      stroke=\"#1f2937\"\n      stroke-width=\"2\"\n    />\n  </svg>\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: TreeDiagram, isStandalone: false, selector: "fx-ui-tree-diagram", inputs: { data: "data" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "root", first: true, predicate: ["root"], descendants: true }, { propertyName: "children", predicate: ["child"], descendants: true }], ngImport: i0, template: "<div class=\"relative p-8\" #container>\n\n  <!-- ROOT -->\n  <div\n    #root\n    class=\"mx-auto w-fit bg-blue-600 text-white px-7 py-3 rounded-md font-semibold text-center\"\n  >\n    {{ data.label }}\n  </div>\n\n  <!-- CHILDREN -->\n  <div class=\"mt-16 flex justify-center gap-16\">\n    <div\n      *ngFor=\"let child of data.children\"\n      #child\n      class=\"w-48 bg-rose-600 text-white px-4 py-4 rounded-lg text-center\"\n    >\n      <div class=\"font-semibold text-lg\">{{ child.label }}</div>\n      <div class=\"mt-1 text-sm opacity-90\">{{ child.status }}</div>\n    </div>\n  </div>\n\n  <!-- SVG CONNECTORS -->\n  <svg\n    class=\"absolute inset-0 pointer-events-none\"\n    [attr.width]=\"svgWidth\"\n    [attr.height]=\"svgHeight\"\n  >\n    <line\n      *ngFor=\"let line of lines\"\n      [attr.x1]=\"line.x1\"\n      [attr.y1]=\"line.y1\"\n      [attr.x2]=\"line.x2\"\n      [attr.y2]=\"line.y2\"\n      stroke=\"#1f2937\"\n      stroke-width=\"2\"\n    />\n  </svg>\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TreeDiagram, decorators: [{
             type: Component,
@@ -3380,11 +3889,11 @@ class KanbanBoardComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KanbanBoardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: KanbanBoardComponent, isStandalone: false, selector: "fx-ui-kanban-board", inputs: { columns: "columns", itemTemplate: "itemTemplate" }, outputs: { columnChanged: "columnChanged" }, ngImport: i0, template: "<div class=\"kanban-board\">\n  <div class=\"kanban-columns\">\n    @for (column of columns; track column.id) {\n      <div class=\"kanban-column\">\n        <div class=\"kanban-column-header\">\n          <h3 class=\"kanban-column-title\">{{ column.title }}</h3>\n          <span class=\"kanban-column-count\">{{ column.items.length }}</span>\n        </div>\n        \n        <div\n          class=\"kanban-column-content\"\n          cdkDropList\n          [id]=\"column.id\"\n          [cdkDropListData]=\"column.items\"\n          [cdkDropListConnectedTo]=\"getColumnIds()\"\n          (cdkDropListDropped)=\"onDrop($event, column.id)\"\n        >\n          @for (item of column.items; track $index) {\n            <div class=\"kanban-item\" cdkDrag>\n              <div class=\"kanban-item-placeholder\" *cdkDragPlaceholder></div>\n              \n              @if (itemTemplate) {\n                <ng-container\n                  *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item, index: $index }\"\n                ></ng-container>\n              } @else {\n                <div class=\"kanban-item-default\">\n                  {{ item }}\n                </div>\n              }\n            </div>\n          }\n          \n          @if (column.items.length === 0) {\n            <div class=\"kanban-column-empty\">\n              Drop items here\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".kanban-board{height:100%;width:100%;overflow-x:auto}.kanban-columns{display:flex;min-height:100%;gap:1rem;padding:1rem}.kanban-column{display:flex;min-width:300px;flex-direction:column;border-radius:.5rem;--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}@media(prefers-color-scheme:dark){.kanban-column{--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity, 1))}}.kanban-column{flex-shrink:0}.kanban-column-header{display:flex;align-items:center;justify-content:space-between;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));padding:1rem}@media(prefers-color-scheme:dark){.kanban-column-header{--tw-border-opacity: 1;border-color:rgb(55 65 81 / var(--tw-border-opacity, 1))}}.kanban-column-title{margin:0;font-size:1.125rem;line-height:1.75rem;font-weight:600;--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}@media(prefers-color-scheme:dark){.kanban-column-title{--tw-text-opacity: 1;color:rgb(243 244 246 / var(--tw-text-opacity, 1))}}.kanban-column-count{border-radius:9999px;--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1));padding:.25rem .5rem;font-size:.875rem;font-weight:500;--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}@media(prefers-color-scheme:dark){.kanban-column-count{--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}}.kanban-column-content{flex:1 1 0%}.kanban-column-content>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem * var(--tw-space-y-reverse))}.kanban-column-content{overflow-y:auto;padding:1rem;min-height:200px}.kanban-item{border-radius:.5rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-shadow: 0 1px 2px 0 rgb(var(--shadow-color) / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}@media(prefers-color-scheme:dark){.kanban-item{--tw-border-opacity: 1;border-color:rgb(75 85 99 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}}.kanban-item{transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;cursor:move}.kanban-item:hover{--tw-shadow: 0 4px 6px -1px rgb(var(--shadow-color) / .1), 0 2px 4px -2px rgb(var(--shadow-color) / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.kanban-item-default{padding:1rem;--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}@media(prefers-color-scheme:dark){.kanban-item-default{--tw-text-opacity: 1;color:rgb(243 244 246 / var(--tw-text-opacity, 1))}}.kanban-item-placeholder{border-radius:.5rem;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgb(156 163 175 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))}@media(prefers-color-scheme:dark){.kanban-item-placeholder{--tw-border-opacity: 1;border-color:rgb(107 114 128 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(75 85 99 / var(--tw-bg-opacity, 1))}}.kanban-item-placeholder{opacity:.5;min-height:60px}.kanban-column-empty{display:flex;height:8rem;align-items:center;justify-content:center;font-size:.875rem;--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}@media(prefers-color-scheme:dark){.kanban-column-empty{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}}.kanban-column-empty{border-radius:.5rem;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1))}@media(prefers-color-scheme:dark){.kanban-column-empty{--tw-border-opacity: 1;border-color:rgb(75 85 99 / var(--tw-border-opacity, 1))}}.cdk-drag-preview{border-radius:.5rem;opacity:.8;--tw-shadow: 0 10px 15px -3px rgb(var(--shadow-color) / .1), 0 4px 6px -4px rgb(var(--shadow-color) / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.kanban-column-content.cdk-drop-list-dragging .kanban-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$2.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: KanbanBoardComponent, isStandalone: false, selector: "fx-ui-kanban-board", inputs: { columns: "columns", itemTemplate: "itemTemplate" }, outputs: { columnChanged: "columnChanged" }, ngImport: i0, template: "<div class=\"kanban-board\">\n  <div class=\"kanban-columns\">\n    @for (column of columns; track column.id) {\n      <div class=\"kanban-column\">\n        <div class=\"kanban-column-header\">\n          <h3 class=\"kanban-column-title\">{{ column.title }}</h3>\n          <span class=\"kanban-column-count\">{{ column.items.length }}</span>\n        </div>\n        \n        <div\n          class=\"kanban-column-content\"\n          cdkDropList\n          [id]=\"column.id\"\n          [cdkDropListData]=\"column.items\"\n          [cdkDropListConnectedTo]=\"getColumnIds()\"\n          (cdkDropListDropped)=\"onDrop($event, column.id)\"\n        >\n          @for (item of column.items; track $index) {\n            <div class=\"kanban-item\" cdkDrag>\n              <div class=\"kanban-item-placeholder\" *cdkDragPlaceholder></div>\n              \n              @if (itemTemplate) {\n                <ng-container\n                  *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item, index: $index }\"\n                ></ng-container>\n              } @else {\n                <div class=\"kanban-item-default\">\n                  {{ item }}\n                </div>\n              }\n            </div>\n          }\n          \n          @if (column.items.length === 0) {\n            <div class=\"kanban-column-empty\">\n              Drop items here\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".kanban-board{height:100%;width:100%;overflow-x:auto}.kanban-columns{display:flex;min-height:100%;gap:1rem;padding:1rem}.kanban-column{display:flex;min-width:300px;flex-direction:column;border-radius:.5rem;--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}@media (prefers-color-scheme: dark){.kanban-column{--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity, 1))}}.kanban-column{flex-shrink:0}.kanban-column-header{display:flex;align-items:center;justify-content:space-between;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));padding:1rem}@media (prefers-color-scheme: dark){.kanban-column-header{--tw-border-opacity: 1;border-color:rgb(55 65 81 / var(--tw-border-opacity, 1))}}.kanban-column-title{margin:0;font-size:1.125rem;line-height:1.75rem;font-weight:600;--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}@media (prefers-color-scheme: dark){.kanban-column-title{--tw-text-opacity: 1;color:rgb(243 244 246 / var(--tw-text-opacity, 1))}}.kanban-column-count{border-radius:9999px;--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1));padding:.25rem .5rem;font-size:.875rem;font-weight:500;--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}@media (prefers-color-scheme: dark){.kanban-column-count{--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}}.kanban-column-content{flex:1 1 0%}.kanban-column-content>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem * var(--tw-space-y-reverse))}.kanban-column-content{overflow-y:auto;padding:1rem;min-height:200px}.kanban-item{border-radius:.5rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-shadow: 0 1px 2px 0 rgb(var(--shadow-color) / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}@media (prefers-color-scheme: dark){.kanban-item{--tw-border-opacity: 1;border-color:rgb(75 85 99 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}}.kanban-item{transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;cursor:move}.kanban-item:hover{--tw-shadow: 0 4px 6px -1px rgb(var(--shadow-color) / .1), 0 2px 4px -2px rgb(var(--shadow-color) / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.kanban-item-default{padding:1rem;--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}@media (prefers-color-scheme: dark){.kanban-item-default{--tw-text-opacity: 1;color:rgb(243 244 246 / var(--tw-text-opacity, 1))}}.kanban-item-placeholder{border-radius:.5rem;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgb(156 163 175 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))}@media (prefers-color-scheme: dark){.kanban-item-placeholder{--tw-border-opacity: 1;border-color:rgb(107 114 128 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(75 85 99 / var(--tw-bg-opacity, 1))}}.kanban-item-placeholder{opacity:.5;min-height:60px}.kanban-column-empty{display:flex;height:8rem;align-items:center;justify-content:center;font-size:.875rem;--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}@media (prefers-color-scheme: dark){.kanban-column-empty{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}}.kanban-column-empty{border-radius:.5rem;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1))}@media (prefers-color-scheme: dark){.kanban-column-empty{--tw-border-opacity: 1;border-color:rgb(75 85 99 / var(--tw-border-opacity, 1))}}.cdk-drag-preview{border-radius:.5rem;opacity:.8;--tw-shadow: 0 10px 15px -3px rgb(var(--shadow-color) / .1), 0 4px 6px -4px rgb(var(--shadow-color) / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.kanban-column-content.cdk-drop-list-dragging .kanban-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$3.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KanbanBoardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fx-ui-kanban-board', standalone: false, template: "<div class=\"kanban-board\">\n  <div class=\"kanban-columns\">\n    @for (column of columns; track column.id) {\n      <div class=\"kanban-column\">\n        <div class=\"kanban-column-header\">\n          <h3 class=\"kanban-column-title\">{{ column.title }}</h3>\n          <span class=\"kanban-column-count\">{{ column.items.length }}</span>\n        </div>\n        \n        <div\n          class=\"kanban-column-content\"\n          cdkDropList\n          [id]=\"column.id\"\n          [cdkDropListData]=\"column.items\"\n          [cdkDropListConnectedTo]=\"getColumnIds()\"\n          (cdkDropListDropped)=\"onDrop($event, column.id)\"\n        >\n          @for (item of column.items; track $index) {\n            <div class=\"kanban-item\" cdkDrag>\n              <div class=\"kanban-item-placeholder\" *cdkDragPlaceholder></div>\n              \n              @if (itemTemplate) {\n                <ng-container\n                  *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item, index: $index }\"\n                ></ng-container>\n              } @else {\n                <div class=\"kanban-item-default\">\n                  {{ item }}\n                </div>\n              }\n            </div>\n          }\n          \n          @if (column.items.length === 0) {\n            <div class=\"kanban-column-empty\">\n              Drop items here\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".kanban-board{height:100%;width:100%;overflow-x:auto}.kanban-columns{display:flex;min-height:100%;gap:1rem;padding:1rem}.kanban-column{display:flex;min-width:300px;flex-direction:column;border-radius:.5rem;--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}@media(prefers-color-scheme:dark){.kanban-column{--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity, 1))}}.kanban-column{flex-shrink:0}.kanban-column-header{display:flex;align-items:center;justify-content:space-between;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));padding:1rem}@media(prefers-color-scheme:dark){.kanban-column-header{--tw-border-opacity: 1;border-color:rgb(55 65 81 / var(--tw-border-opacity, 1))}}.kanban-column-title{margin:0;font-size:1.125rem;line-height:1.75rem;font-weight:600;--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}@media(prefers-color-scheme:dark){.kanban-column-title{--tw-text-opacity: 1;color:rgb(243 244 246 / var(--tw-text-opacity, 1))}}.kanban-column-count{border-radius:9999px;--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1));padding:.25rem .5rem;font-size:.875rem;font-weight:500;--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}@media(prefers-color-scheme:dark){.kanban-column-count{--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}}.kanban-column-content{flex:1 1 0%}.kanban-column-content>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem * var(--tw-space-y-reverse))}.kanban-column-content{overflow-y:auto;padding:1rem;min-height:200px}.kanban-item{border-radius:.5rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-shadow: 0 1px 2px 0 rgb(var(--shadow-color) / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}@media(prefers-color-scheme:dark){.kanban-item{--tw-border-opacity: 1;border-color:rgb(75 85 99 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}}.kanban-item{transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;cursor:move}.kanban-item:hover{--tw-shadow: 0 4px 6px -1px rgb(var(--shadow-color) / .1), 0 2px 4px -2px rgb(var(--shadow-color) / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.kanban-item-default{padding:1rem;--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}@media(prefers-color-scheme:dark){.kanban-item-default{--tw-text-opacity: 1;color:rgb(243 244 246 / var(--tw-text-opacity, 1))}}.kanban-item-placeholder{border-radius:.5rem;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgb(156 163 175 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))}@media(prefers-color-scheme:dark){.kanban-item-placeholder{--tw-border-opacity: 1;border-color:rgb(107 114 128 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(75 85 99 / var(--tw-bg-opacity, 1))}}.kanban-item-placeholder{opacity:.5;min-height:60px}.kanban-column-empty{display:flex;height:8rem;align-items:center;justify-content:center;font-size:.875rem;--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}@media(prefers-color-scheme:dark){.kanban-column-empty{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}}.kanban-column-empty{border-radius:.5rem;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1))}@media(prefers-color-scheme:dark){.kanban-column-empty{--tw-border-opacity: 1;border-color:rgb(75 85 99 / var(--tw-border-opacity, 1))}}.cdk-drag-preview{border-radius:.5rem;opacity:.8;--tw-shadow: 0 10px 15px -3px rgb(var(--shadow-color) / .1), 0 4px 6px -4px rgb(var(--shadow-color) / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.kanban-column-content.cdk-drop-list-dragging .kanban-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
+            args: [{ selector: 'fx-ui-kanban-board', standalone: false, template: "<div class=\"kanban-board\">\n  <div class=\"kanban-columns\">\n    @for (column of columns; track column.id) {\n      <div class=\"kanban-column\">\n        <div class=\"kanban-column-header\">\n          <h3 class=\"kanban-column-title\">{{ column.title }}</h3>\n          <span class=\"kanban-column-count\">{{ column.items.length }}</span>\n        </div>\n        \n        <div\n          class=\"kanban-column-content\"\n          cdkDropList\n          [id]=\"column.id\"\n          [cdkDropListData]=\"column.items\"\n          [cdkDropListConnectedTo]=\"getColumnIds()\"\n          (cdkDropListDropped)=\"onDrop($event, column.id)\"\n        >\n          @for (item of column.items; track $index) {\n            <div class=\"kanban-item\" cdkDrag>\n              <div class=\"kanban-item-placeholder\" *cdkDragPlaceholder></div>\n              \n              @if (itemTemplate) {\n                <ng-container\n                  *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item, index: $index }\"\n                ></ng-container>\n              } @else {\n                <div class=\"kanban-item-default\">\n                  {{ item }}\n                </div>\n              }\n            </div>\n          }\n          \n          @if (column.items.length === 0) {\n            <div class=\"kanban-column-empty\">\n              Drop items here\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".kanban-board{height:100%;width:100%;overflow-x:auto}.kanban-columns{display:flex;min-height:100%;gap:1rem;padding:1rem}.kanban-column{display:flex;min-width:300px;flex-direction:column;border-radius:.5rem;--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}@media (prefers-color-scheme: dark){.kanban-column{--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity, 1))}}.kanban-column{flex-shrink:0}.kanban-column-header{display:flex;align-items:center;justify-content:space-between;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));padding:1rem}@media (prefers-color-scheme: dark){.kanban-column-header{--tw-border-opacity: 1;border-color:rgb(55 65 81 / var(--tw-border-opacity, 1))}}.kanban-column-title{margin:0;font-size:1.125rem;line-height:1.75rem;font-weight:600;--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}@media (prefers-color-scheme: dark){.kanban-column-title{--tw-text-opacity: 1;color:rgb(243 244 246 / var(--tw-text-opacity, 1))}}.kanban-column-count{border-radius:9999px;--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1));padding:.25rem .5rem;font-size:.875rem;font-weight:500;--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}@media (prefers-color-scheme: dark){.kanban-column-count{--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}}.kanban-column-content{flex:1 1 0%}.kanban-column-content>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem * var(--tw-space-y-reverse))}.kanban-column-content{overflow-y:auto;padding:1rem;min-height:200px}.kanban-item{border-radius:.5rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-shadow: 0 1px 2px 0 rgb(var(--shadow-color) / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}@media (prefers-color-scheme: dark){.kanban-item{--tw-border-opacity: 1;border-color:rgb(75 85 99 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}}.kanban-item{transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;cursor:move}.kanban-item:hover{--tw-shadow: 0 4px 6px -1px rgb(var(--shadow-color) / .1), 0 2px 4px -2px rgb(var(--shadow-color) / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.kanban-item-default{padding:1rem;--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}@media (prefers-color-scheme: dark){.kanban-item-default{--tw-text-opacity: 1;color:rgb(243 244 246 / var(--tw-text-opacity, 1))}}.kanban-item-placeholder{border-radius:.5rem;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgb(156 163 175 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))}@media (prefers-color-scheme: dark){.kanban-item-placeholder{--tw-border-opacity: 1;border-color:rgb(107 114 128 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(75 85 99 / var(--tw-bg-opacity, 1))}}.kanban-item-placeholder{opacity:.5;min-height:60px}.kanban-column-empty{display:flex;height:8rem;align-items:center;justify-content:center;font-size:.875rem;--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}@media (prefers-color-scheme: dark){.kanban-column-empty{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}}.kanban-column-empty{border-radius:.5rem;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1))}@media (prefers-color-scheme: dark){.kanban-column-empty{--tw-border-opacity: 1;border-color:rgb(75 85 99 / var(--tw-border-opacity, 1))}}.cdk-drag-preview{border-radius:.5rem;opacity:.8;--tw-shadow: 0 10px 15px -3px rgb(var(--shadow-color) / .1), 0 4px 6px -4px rgb(var(--shadow-color) / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.kanban-column-content.cdk-drop-list-dragging .kanban-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
         }], propDecorators: { columns: [{
                 type: Input
             }], itemTemplate: [{
@@ -3496,7 +4005,7 @@ class DrawerComponent {
         return this.isExpanded ? 'expanded' : 'collapsed';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DrawerComponent, deps: [{ token: i1$4.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: DrawerComponent, isStandalone: false, selector: "fx-ui-drawer", inputs: { items: "items", isExpanded: "isExpanded", logo: "logo", version: "version" }, outputs: { toggleExpanded: "toggleExpanded", itemClicked: "itemClicked" }, ngImport: i0, template: "<div class=\"drawer-host-wrapper\">\n  <a\n    href=\"/\"\n    class=\"h-[60px]\"\n    [ngClass]=\"{ 'flex items-center justify-center': !isExpanded, 'p-4': isExpanded }\"\n  >\n    @if (logo) {\n      <img\n        [src]=\"logo\"\n        class=\"h-[20px] w-auto transition-all duration-300 ease-in-out\"\n        [ngClass]=\"{ 'scale-90': !isExpanded, 'ml-5': isExpanded }\"\n      />\n    } @else {\n      <div class=\"h-[30px] w-auto transition-all duration-300 ease-in-out\"></div>\n    }\n  </a>\n  <div class=\"drawer-container\" [@drawerExpand]=\"getDrawerState()\">\n    <!-- Navigation Items -->\n    <nav class=\"drawer-nav\">\n      <ng-container *ngFor=\"let item of items\">\n        <ng-container\n          *ngTemplateOutlet=\"drawerItem; context: { $implicit: item, level: 0 }\"\n        ></ng-container>\n      </ng-container>\n    </nav>\n\n    <!-- Version -->\n    <div *ngIf=\"version\" class=\"drawer-version\" [matTooltip]=\"!isExpanded ? version : ''\" matTooltipPosition=\"right\">\n      <span *ngIf=\"isExpanded\">{{ version }}</span>\n      <span *ngIf=\"!isExpanded\" class=\"drawer-version-dot\"></span>\n    </div>\n  </div>\n\n  <!-- Floating Toggle Button on right border -->\n  <button\n    type=\"button\"\n    class=\"toggle-btn\"\n    (click)=\"toggleDrawer()\"\n    [matTooltip]=\"isExpanded ? 'Collapse' : 'Expand'\"\n    matTooltipClass=\"text-text-primary text-xs font-semibold\"\n    matTooltipPosition=\"right\"\n  >\n    <fx-ui-hero-icon\n      [icon]=\"isExpanded ? 'chevron-left' : 'chevron-right'\"\n      [size]=\"16\"\n      class=\"text-text-primary\"\n    ></fx-ui-hero-icon>\n  </button>\n</div>\n\n<!-- Recursive Template for Drawer Items -->\n<ng-template #drawerItem let-item let-level=\"level\">\n  <div class=\"drawer-item-wrapper\">\n    <!-- Item Button/Link -->\n    <a\n      *ngIf=\"item.route && !item.children\"\n      [routerLink]=\"item.route\"\n      class=\"drawer-item\"\n      [class.active]=\"isActiveRoute(item.route)\"\n      [class.has-children]=\"item.children && item.children.length > 0\"\n      [style.paddingLeft.px]=\"isExpanded ? 16 + level * 16 : 16\"\n      [matTooltip]=\"!isExpanded ? item.label : ''\"\n      matTooltipPosition=\"right\"\n      matTooltipClass=\"text-text-primary text-xs font-semibold\"\n      (click)=\"onItemClick(item, $event)\"\n    >\n      <div class=\"item-content\">\n        <fx-ui-hero-icon [icon]=\"item.icon\" [size]=\"20\" class=\"item-icon\"></fx-ui-hero-icon>\n        <span *ngIf=\"isExpanded\" class=\"item-label\">{{ item.label }}</span>\n      </div>\n    </a>\n\n    <button\n      *ngIf=\"!item.route || item.children\"\n      type=\"button\"\n      class=\"drawer-item\"\n      [class.active]=\"isActiveRoute(item.route)\"\n      [class.has-children]=\"item.children && item.children.length > 0\"\n      [style.paddingLeft.px]=\"isExpanded ? 16 + level * 16 : 16\"\n      [matTooltip]=\"!isExpanded ? item.label : ''\"\n      matTooltipPosition=\"right\"\n      matTooltipClass=\"text-text-primary text-sm font-semibold\"\n      (click)=\"onItemClick(item, $event)\"\n    >\n      <div class=\"item-content\">\n        <fx-ui-hero-icon [icon]=\"item.icon\" [size]=\"20\" class=\"item-icon\"></fx-ui-hero-icon>\n        <span *ngIf=\"isExpanded\" class=\"item-label\">{{ item.label }}</span>\n        <fx-ui-hero-icon\n          *ngIf=\"isExpanded && item.children && item.children.length > 0\"\n          [icon]=\"'chevron-down'\"\n          [size]=\"16\"\n          class=\"chevron-icon\"\n          [class.rotated]=\"isAccordionExpanded(item.id)\"\n        ></fx-ui-hero-icon>\n      </div>\n    </button>\n\n    <!-- Accordion Children -->\n    <div\n      *ngIf=\"item.children && item.children.length > 0\"\n      class=\"accordion-children\"\n      [@accordionExpand]=\"getAccordionState(item.id)\"\n    >\n      <ng-container *ngFor=\"let child of item.children\">\n        <ng-container\n          *ngTemplateOutlet=\"drawerItem; context: { $implicit: child, level: level + 1 }\"\n        ></ng-container>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block;height:100%}.drawer-host-wrapper{position:relative;height:100%;border-right-width:1px;--tw-border-opacity: 1;border-color:rgb(var(--border-default) / var(--tw-border-opacity, 1))}.drawer-container{display:flex;height:100%;flex-direction:column;overflow:auto;--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary) / var(--tw-bg-opacity, 1));padding-left:.5rem;padding-right:.5rem;transition:width .3s cubic-bezier(.4,0,.2,1)}.toggle-btn{position:absolute;top:50%;z-index:50;display:flex;height:1.5rem;width:1.5rem;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;border-width:1px;--tw-border-opacity: 1;border-color:rgb(var(--border-default) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary) / var(--tw-bg-opacity, 1));--tw-shadow: 0 1px 2px 0 rgb(var(--shadow-color) / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);right:-12px;transition:all .2s ease}.toggle-btn:hover{--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary-hover) / var(--tw-bg-opacity, 1));--tw-shadow: 0 4px 6px -1px rgb(var(--shadow-color) / .1), 0 2px 4px -2px rgb(var(--shadow-color) / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.toggle-btn:active{transform:translateY(-50%) scale(.9)}.toggle-btn:focus-visible{outline-width:2px;outline-offset:2px;outline-color:rgb(var(--primary) / 1)}.drawer-nav{flex:1 1 0%;overflow-y:auto;overflow-x:hidden;padding-top:.5rem;padding-bottom:.5rem}.drawer-nav::-webkit-scrollbar{width:.375rem}.drawer-nav::-webkit-scrollbar-track{background-color:transparent}.drawer-nav::-webkit-scrollbar-thumb{border-radius:.125rem;--tw-bg-opacity: 1;background-color:rgb(var(--border-default) / var(--tw-bg-opacity, 1))}.drawer-nav::-webkit-scrollbar-thumb:hover{--tw-bg-opacity: 1;background-color:rgb(var(--text-placeholder) / var(--tw-bg-opacity, 1))}.drawer-item-wrapper{position:relative}.drawer-item{position:relative;margin-top:.25rem;display:flex;min-height:2rem;width:100%;cursor:pointer;align-items:center;border-radius:.25rem;border-style:none;background-color:transparent;padding:.5rem 1rem;--tw-text-opacity: 1;color:rgb(var(--text-primary) / var(--tw-text-opacity, 1));text-decoration-line:none;transition:all .2s ease}.drawer-item:hover{--tw-scale-x: .95;--tw-scale-y: .95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary-hover) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(var(--text-primary) / var(--tw-text-opacity, 1))}.drawer-item.active{background-image:linear-gradient(135deg,rgb(var(--gradient-primary-start)),rgb(var(--gradient-primary-end)));font-weight:500;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.drawer-item.active .item-icon{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.drawer-item:active{transform:scale(.98)}.drawer-item:focus-visible{outline-width:2px;outline-offset:2px;outline-color:rgb(var(--primary) / 1)}.drawer-item{-webkit-tap-highlight-color:transparent;outline:2px solid transparent;outline-offset:2px}.item-content{display:flex;width:100%;align-items:center;gap:.75rem;overflow:hidden}.item-icon{flex-shrink:0;color:inherit}.item-label{flex:1 1 0%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;font-size:13px;line-height:1.25rem}.chevron-icon{margin-left:auto;flex-shrink:0;--tw-text-opacity: 1;color:rgb(var(--text-primary) / var(--tw-text-opacity, 1));transition:transform .3s cubic-bezier(.4,0,.2,1)}.chevron-icon.rotated{transform:rotate(180deg)}.accordion-children{overflow:hidden}.drawer-version{display:flex;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center;border-top-width:1px;--tw-border-opacity: 1;border-color:rgb(var(--border-default) / var(--tw-border-opacity, 1));padding:.75rem 1rem;font-size:11px;--tw-text-opacity: 1;color:rgb(var(--text-placeholder) / var(--tw-text-opacity, 1));font-family:Roboto,monospace}.drawer-version-dot{display:block;height:.375rem;width:.375rem;border-radius:9999px;--tw-bg-opacity: 1;background-color:rgb(var(--text-placeholder) / var(--tw-bg-opacity, 1))}.drawer-container[style*=\"width: 64px\"] .drawer-item{justify-content:center;padding-left:16px!important}.drawer-container[style*=\"width: 64px\"] .item-content{justify-content:center}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }], animations: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: DrawerComponent, isStandalone: false, selector: "fx-ui-drawer", inputs: { items: "items", isExpanded: "isExpanded", logo: "logo", version: "version" }, outputs: { toggleExpanded: "toggleExpanded", itemClicked: "itemClicked" }, ngImport: i0, template: "<div class=\"drawer-host-wrapper\">\n  <a\n    href=\"/\"\n    class=\"h-[60px]\"\n    [ngClass]=\"{ 'flex items-center justify-center': !isExpanded, 'p-4': isExpanded }\"\n  >\n    @if (logo) {\n      <img\n        [src]=\"logo\"\n        class=\"h-[20px] w-auto transition-all duration-300 ease-in-out\"\n        [ngClass]=\"{ 'scale-90': !isExpanded, 'ml-5': isExpanded }\"\n      />\n    } @else {\n      <div class=\"h-[30px] w-auto transition-all duration-300 ease-in-out\"></div>\n    }\n  </a>\n  <div class=\"drawer-container\" [@drawerExpand]=\"getDrawerState()\">\n    <!-- Navigation Items -->\n    <nav class=\"drawer-nav\">\n      <ng-container *ngFor=\"let item of items\">\n        <ng-container\n          *ngTemplateOutlet=\"drawerItem; context: { $implicit: item, level: 0 }\"\n        ></ng-container>\n      </ng-container>\n    </nav>\n\n    <!-- Version -->\n    <div *ngIf=\"version\" class=\"drawer-version\" [matTooltip]=\"!isExpanded ? version : ''\" matTooltipPosition=\"right\">\n      <span *ngIf=\"isExpanded\">{{ version }}</span>\n      <span *ngIf=\"!isExpanded\" class=\"drawer-version-dot\"></span>\n    </div>\n  </div>\n\n  <!-- Floating Toggle Button on right border -->\n  <button\n    type=\"button\"\n    class=\"toggle-btn\"\n    (click)=\"toggleDrawer()\"\n    [matTooltip]=\"isExpanded ? 'Collapse' : 'Expand'\"\n    matTooltipClass=\"text-text-primary text-xs font-semibold\"\n    matTooltipPosition=\"right\"\n  >\n    <fx-ui-hero-icon\n      [icon]=\"isExpanded ? 'chevron-left' : 'chevron-right'\"\n      [size]=\"16\"\n      class=\"text-text-primary\"\n    ></fx-ui-hero-icon>\n  </button>\n</div>\n\n<!-- Recursive Template for Drawer Items -->\n<ng-template #drawerItem let-item let-level=\"level\">\n  <div class=\"drawer-item-wrapper\">\n    <!-- Item Button/Link -->\n    <a\n      *ngIf=\"item.route && !item.children\"\n      [routerLink]=\"item.route\"\n      class=\"drawer-item\"\n      [class.active]=\"isActiveRoute(item.route)\"\n      [class.has-children]=\"item.children && item.children.length > 0\"\n      [style.paddingLeft.px]=\"isExpanded ? 16 + level * 16 : 16\"\n      [matTooltip]=\"!isExpanded ? item.label : ''\"\n      matTooltipPosition=\"right\"\n      matTooltipClass=\"text-text-primary text-xs font-semibold\"\n      (click)=\"onItemClick(item, $event)\"\n    >\n      <div class=\"item-content\">\n        <fx-ui-hero-icon [icon]=\"item.icon\" [size]=\"20\" class=\"item-icon\"></fx-ui-hero-icon>\n        <span *ngIf=\"isExpanded\" class=\"item-label\">{{ item.label }}</span>\n      </div>\n    </a>\n\n    <button\n      *ngIf=\"!item.route || item.children\"\n      type=\"button\"\n      class=\"drawer-item\"\n      [class.active]=\"isActiveRoute(item.route)\"\n      [class.has-children]=\"item.children && item.children.length > 0\"\n      [style.paddingLeft.px]=\"isExpanded ? 16 + level * 16 : 16\"\n      [matTooltip]=\"!isExpanded ? item.label : ''\"\n      matTooltipPosition=\"right\"\n      matTooltipClass=\"text-text-primary text-sm font-semibold\"\n      (click)=\"onItemClick(item, $event)\"\n    >\n      <div class=\"item-content\">\n        <fx-ui-hero-icon [icon]=\"item.icon\" [size]=\"20\" class=\"item-icon\"></fx-ui-hero-icon>\n        <span *ngIf=\"isExpanded\" class=\"item-label\">{{ item.label }}</span>\n        <fx-ui-hero-icon\n          *ngIf=\"isExpanded && item.children && item.children.length > 0\"\n          [icon]=\"'chevron-down'\"\n          [size]=\"16\"\n          class=\"chevron-icon\"\n          [class.rotated]=\"isAccordionExpanded(item.id)\"\n        ></fx-ui-hero-icon>\n      </div>\n    </button>\n\n    <!-- Accordion Children -->\n    <div\n      *ngIf=\"item.children && item.children.length > 0\"\n      class=\"accordion-children\"\n      [@accordionExpand]=\"getAccordionState(item.id)\"\n    >\n      <ng-container *ngFor=\"let child of item.children\">\n        <ng-container\n          *ngTemplateOutlet=\"drawerItem; context: { $implicit: child, level: level + 1 }\"\n        ></ng-container>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block;height:100%}.drawer-host-wrapper{position:relative;height:100%;border-right-width:1px;--tw-border-opacity: 1;border-color:rgb(var(--border-default) / var(--tw-border-opacity, 1))}.drawer-container{display:flex;height:100%;flex-direction:column;overflow:auto;--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary) / var(--tw-bg-opacity, 1));padding-left:.5rem;padding-right:.5rem;transition:width .3s cubic-bezier(.4,0,.2,1)}.toggle-btn{position:absolute;top:50%;z-index:50;display:flex;height:1.5rem;width:1.5rem;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;border-width:1px;--tw-border-opacity: 1;border-color:rgb(var(--border-default) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary) / var(--tw-bg-opacity, 1));--tw-shadow: 0 1px 2px 0 rgb(var(--shadow-color) / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);right:-12px;transition:all .2s ease}.toggle-btn:hover{--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary-hover) / var(--tw-bg-opacity, 1));--tw-shadow: 0 4px 6px -1px rgb(var(--shadow-color) / .1), 0 2px 4px -2px rgb(var(--shadow-color) / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.toggle-btn:active{transform:translateY(-50%) scale(.9)}.toggle-btn:focus-visible{outline-width:2px;outline-offset:2px;outline-color:rgb(var(--primary) / 1)}.drawer-nav{flex:1 1 0%;overflow-y:auto;overflow-x:hidden;padding-top:.5rem;padding-bottom:.5rem}.drawer-nav::-webkit-scrollbar{width:.375rem}.drawer-nav::-webkit-scrollbar-track{background-color:transparent}.drawer-nav::-webkit-scrollbar-thumb{border-radius:.125rem;--tw-bg-opacity: 1;background-color:rgb(var(--border-default) / var(--tw-bg-opacity, 1))}.drawer-nav::-webkit-scrollbar-thumb:hover{--tw-bg-opacity: 1;background-color:rgb(var(--text-placeholder) / var(--tw-bg-opacity, 1))}.drawer-item-wrapper{position:relative}.drawer-item{position:relative;margin-top:.25rem;display:flex;min-height:2rem;width:100%;cursor:pointer;align-items:center;border-radius:.25rem;border-style:none;background-color:transparent;padding:.5rem 1rem;--tw-text-opacity: 1;color:rgb(var(--text-primary) / var(--tw-text-opacity, 1));text-decoration-line:none;transition:all .2s ease;-webkit-tap-highlight-color:transparent;outline:2px solid transparent;outline-offset:2px}.drawer-item:hover{--tw-scale-x: .95;--tw-scale-y: .95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary-hover) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(var(--text-primary) / var(--tw-text-opacity, 1))}.drawer-item.active{background-image:linear-gradient(135deg,rgb(var(--gradient-primary-start)),rgb(var(--gradient-primary-end)));font-weight:500;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.drawer-item.active .item-icon{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.drawer-item:active{transform:scale(.98)}.drawer-item:focus-visible{outline-width:2px;outline-offset:2px;outline-color:rgb(var(--primary) / 1)}.item-content{display:flex;width:100%;align-items:center;gap:.75rem;overflow:hidden}.item-icon{flex-shrink:0;color:inherit}.item-label{flex:1 1 0%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;font-size:13px;line-height:1.25rem}.chevron-icon{margin-left:auto;flex-shrink:0;--tw-text-opacity: 1;color:rgb(var(--text-primary) / var(--tw-text-opacity, 1));transition:transform .3s cubic-bezier(.4,0,.2,1)}.chevron-icon.rotated{transform:rotate(180deg)}.accordion-children{overflow:hidden}.drawer-version{display:flex;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center;border-top-width:1px;--tw-border-opacity: 1;border-color:rgb(var(--border-default) / var(--tw-border-opacity, 1));padding:.75rem 1rem;font-size:11px;--tw-text-opacity: 1;color:rgb(var(--text-placeholder) / var(--tw-text-opacity, 1));font-family:Roboto,monospace}.drawer-version-dot{display:block;height:.375rem;width:.375rem;border-radius:9999px;--tw-bg-opacity: 1;background-color:rgb(var(--text-placeholder) / var(--tw-bg-opacity, 1))}.drawer-container[style*=\"width: 64px\"] .drawer-item{justify-content:center;padding-left:16px!important}.drawer-container[style*=\"width: 64px\"] .item-content{justify-content:center}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i56.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }], animations: [
             trigger('drawerExpand', [
                 state('collapsed', style({ width: '70px' })),
                 state('expanded', style({ width: '260px' })),
@@ -3522,7 +4031,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                             state('expanded', style({ height: '*', overflow: 'visible', opacity: 1 })),
                             transition('collapsed <=> expanded', animate('300ms cubic-bezier(0.4, 0, 0.2, 1)')),
                         ]),
-                    ], template: "<div class=\"drawer-host-wrapper\">\n  <a\n    href=\"/\"\n    class=\"h-[60px]\"\n    [ngClass]=\"{ 'flex items-center justify-center': !isExpanded, 'p-4': isExpanded }\"\n  >\n    @if (logo) {\n      <img\n        [src]=\"logo\"\n        class=\"h-[20px] w-auto transition-all duration-300 ease-in-out\"\n        [ngClass]=\"{ 'scale-90': !isExpanded, 'ml-5': isExpanded }\"\n      />\n    } @else {\n      <div class=\"h-[30px] w-auto transition-all duration-300 ease-in-out\"></div>\n    }\n  </a>\n  <div class=\"drawer-container\" [@drawerExpand]=\"getDrawerState()\">\n    <!-- Navigation Items -->\n    <nav class=\"drawer-nav\">\n      <ng-container *ngFor=\"let item of items\">\n        <ng-container\n          *ngTemplateOutlet=\"drawerItem; context: { $implicit: item, level: 0 }\"\n        ></ng-container>\n      </ng-container>\n    </nav>\n\n    <!-- Version -->\n    <div *ngIf=\"version\" class=\"drawer-version\" [matTooltip]=\"!isExpanded ? version : ''\" matTooltipPosition=\"right\">\n      <span *ngIf=\"isExpanded\">{{ version }}</span>\n      <span *ngIf=\"!isExpanded\" class=\"drawer-version-dot\"></span>\n    </div>\n  </div>\n\n  <!-- Floating Toggle Button on right border -->\n  <button\n    type=\"button\"\n    class=\"toggle-btn\"\n    (click)=\"toggleDrawer()\"\n    [matTooltip]=\"isExpanded ? 'Collapse' : 'Expand'\"\n    matTooltipClass=\"text-text-primary text-xs font-semibold\"\n    matTooltipPosition=\"right\"\n  >\n    <fx-ui-hero-icon\n      [icon]=\"isExpanded ? 'chevron-left' : 'chevron-right'\"\n      [size]=\"16\"\n      class=\"text-text-primary\"\n    ></fx-ui-hero-icon>\n  </button>\n</div>\n\n<!-- Recursive Template for Drawer Items -->\n<ng-template #drawerItem let-item let-level=\"level\">\n  <div class=\"drawer-item-wrapper\">\n    <!-- Item Button/Link -->\n    <a\n      *ngIf=\"item.route && !item.children\"\n      [routerLink]=\"item.route\"\n      class=\"drawer-item\"\n      [class.active]=\"isActiveRoute(item.route)\"\n      [class.has-children]=\"item.children && item.children.length > 0\"\n      [style.paddingLeft.px]=\"isExpanded ? 16 + level * 16 : 16\"\n      [matTooltip]=\"!isExpanded ? item.label : ''\"\n      matTooltipPosition=\"right\"\n      matTooltipClass=\"text-text-primary text-xs font-semibold\"\n      (click)=\"onItemClick(item, $event)\"\n    >\n      <div class=\"item-content\">\n        <fx-ui-hero-icon [icon]=\"item.icon\" [size]=\"20\" class=\"item-icon\"></fx-ui-hero-icon>\n        <span *ngIf=\"isExpanded\" class=\"item-label\">{{ item.label }}</span>\n      </div>\n    </a>\n\n    <button\n      *ngIf=\"!item.route || item.children\"\n      type=\"button\"\n      class=\"drawer-item\"\n      [class.active]=\"isActiveRoute(item.route)\"\n      [class.has-children]=\"item.children && item.children.length > 0\"\n      [style.paddingLeft.px]=\"isExpanded ? 16 + level * 16 : 16\"\n      [matTooltip]=\"!isExpanded ? item.label : ''\"\n      matTooltipPosition=\"right\"\n      matTooltipClass=\"text-text-primary text-sm font-semibold\"\n      (click)=\"onItemClick(item, $event)\"\n    >\n      <div class=\"item-content\">\n        <fx-ui-hero-icon [icon]=\"item.icon\" [size]=\"20\" class=\"item-icon\"></fx-ui-hero-icon>\n        <span *ngIf=\"isExpanded\" class=\"item-label\">{{ item.label }}</span>\n        <fx-ui-hero-icon\n          *ngIf=\"isExpanded && item.children && item.children.length > 0\"\n          [icon]=\"'chevron-down'\"\n          [size]=\"16\"\n          class=\"chevron-icon\"\n          [class.rotated]=\"isAccordionExpanded(item.id)\"\n        ></fx-ui-hero-icon>\n      </div>\n    </button>\n\n    <!-- Accordion Children -->\n    <div\n      *ngIf=\"item.children && item.children.length > 0\"\n      class=\"accordion-children\"\n      [@accordionExpand]=\"getAccordionState(item.id)\"\n    >\n      <ng-container *ngFor=\"let child of item.children\">\n        <ng-container\n          *ngTemplateOutlet=\"drawerItem; context: { $implicit: child, level: level + 1 }\"\n        ></ng-container>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block;height:100%}.drawer-host-wrapper{position:relative;height:100%;border-right-width:1px;--tw-border-opacity: 1;border-color:rgb(var(--border-default) / var(--tw-border-opacity, 1))}.drawer-container{display:flex;height:100%;flex-direction:column;overflow:auto;--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary) / var(--tw-bg-opacity, 1));padding-left:.5rem;padding-right:.5rem;transition:width .3s cubic-bezier(.4,0,.2,1)}.toggle-btn{position:absolute;top:50%;z-index:50;display:flex;height:1.5rem;width:1.5rem;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;border-width:1px;--tw-border-opacity: 1;border-color:rgb(var(--border-default) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary) / var(--tw-bg-opacity, 1));--tw-shadow: 0 1px 2px 0 rgb(var(--shadow-color) / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);right:-12px;transition:all .2s ease}.toggle-btn:hover{--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary-hover) / var(--tw-bg-opacity, 1));--tw-shadow: 0 4px 6px -1px rgb(var(--shadow-color) / .1), 0 2px 4px -2px rgb(var(--shadow-color) / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.toggle-btn:active{transform:translateY(-50%) scale(.9)}.toggle-btn:focus-visible{outline-width:2px;outline-offset:2px;outline-color:rgb(var(--primary) / 1)}.drawer-nav{flex:1 1 0%;overflow-y:auto;overflow-x:hidden;padding-top:.5rem;padding-bottom:.5rem}.drawer-nav::-webkit-scrollbar{width:.375rem}.drawer-nav::-webkit-scrollbar-track{background-color:transparent}.drawer-nav::-webkit-scrollbar-thumb{border-radius:.125rem;--tw-bg-opacity: 1;background-color:rgb(var(--border-default) / var(--tw-bg-opacity, 1))}.drawer-nav::-webkit-scrollbar-thumb:hover{--tw-bg-opacity: 1;background-color:rgb(var(--text-placeholder) / var(--tw-bg-opacity, 1))}.drawer-item-wrapper{position:relative}.drawer-item{position:relative;margin-top:.25rem;display:flex;min-height:2rem;width:100%;cursor:pointer;align-items:center;border-radius:.25rem;border-style:none;background-color:transparent;padding:.5rem 1rem;--tw-text-opacity: 1;color:rgb(var(--text-primary) / var(--tw-text-opacity, 1));text-decoration-line:none;transition:all .2s ease}.drawer-item:hover{--tw-scale-x: .95;--tw-scale-y: .95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary-hover) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(var(--text-primary) / var(--tw-text-opacity, 1))}.drawer-item.active{background-image:linear-gradient(135deg,rgb(var(--gradient-primary-start)),rgb(var(--gradient-primary-end)));font-weight:500;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.drawer-item.active .item-icon{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.drawer-item:active{transform:scale(.98)}.drawer-item:focus-visible{outline-width:2px;outline-offset:2px;outline-color:rgb(var(--primary) / 1)}.drawer-item{-webkit-tap-highlight-color:transparent;outline:2px solid transparent;outline-offset:2px}.item-content{display:flex;width:100%;align-items:center;gap:.75rem;overflow:hidden}.item-icon{flex-shrink:0;color:inherit}.item-label{flex:1 1 0%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;font-size:13px;line-height:1.25rem}.chevron-icon{margin-left:auto;flex-shrink:0;--tw-text-opacity: 1;color:rgb(var(--text-primary) / var(--tw-text-opacity, 1));transition:transform .3s cubic-bezier(.4,0,.2,1)}.chevron-icon.rotated{transform:rotate(180deg)}.accordion-children{overflow:hidden}.drawer-version{display:flex;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center;border-top-width:1px;--tw-border-opacity: 1;border-color:rgb(var(--border-default) / var(--tw-border-opacity, 1));padding:.75rem 1rem;font-size:11px;--tw-text-opacity: 1;color:rgb(var(--text-placeholder) / var(--tw-text-opacity, 1));font-family:Roboto,monospace}.drawer-version-dot{display:block;height:.375rem;width:.375rem;border-radius:9999px;--tw-bg-opacity: 1;background-color:rgb(var(--text-placeholder) / var(--tw-bg-opacity, 1))}.drawer-container[style*=\"width: 64px\"] .drawer-item{justify-content:center;padding-left:16px!important}.drawer-container[style*=\"width: 64px\"] .item-content{justify-content:center}\n"] }]
+                    ], template: "<div class=\"drawer-host-wrapper\">\n  <a\n    href=\"/\"\n    class=\"h-[60px]\"\n    [ngClass]=\"{ 'flex items-center justify-center': !isExpanded, 'p-4': isExpanded }\"\n  >\n    @if (logo) {\n      <img\n        [src]=\"logo\"\n        class=\"h-[20px] w-auto transition-all duration-300 ease-in-out\"\n        [ngClass]=\"{ 'scale-90': !isExpanded, 'ml-5': isExpanded }\"\n      />\n    } @else {\n      <div class=\"h-[30px] w-auto transition-all duration-300 ease-in-out\"></div>\n    }\n  </a>\n  <div class=\"drawer-container\" [@drawerExpand]=\"getDrawerState()\">\n    <!-- Navigation Items -->\n    <nav class=\"drawer-nav\">\n      <ng-container *ngFor=\"let item of items\">\n        <ng-container\n          *ngTemplateOutlet=\"drawerItem; context: { $implicit: item, level: 0 }\"\n        ></ng-container>\n      </ng-container>\n    </nav>\n\n    <!-- Version -->\n    <div *ngIf=\"version\" class=\"drawer-version\" [matTooltip]=\"!isExpanded ? version : ''\" matTooltipPosition=\"right\">\n      <span *ngIf=\"isExpanded\">{{ version }}</span>\n      <span *ngIf=\"!isExpanded\" class=\"drawer-version-dot\"></span>\n    </div>\n  </div>\n\n  <!-- Floating Toggle Button on right border -->\n  <button\n    type=\"button\"\n    class=\"toggle-btn\"\n    (click)=\"toggleDrawer()\"\n    [matTooltip]=\"isExpanded ? 'Collapse' : 'Expand'\"\n    matTooltipClass=\"text-text-primary text-xs font-semibold\"\n    matTooltipPosition=\"right\"\n  >\n    <fx-ui-hero-icon\n      [icon]=\"isExpanded ? 'chevron-left' : 'chevron-right'\"\n      [size]=\"16\"\n      class=\"text-text-primary\"\n    ></fx-ui-hero-icon>\n  </button>\n</div>\n\n<!-- Recursive Template for Drawer Items -->\n<ng-template #drawerItem let-item let-level=\"level\">\n  <div class=\"drawer-item-wrapper\">\n    <!-- Item Button/Link -->\n    <a\n      *ngIf=\"item.route && !item.children\"\n      [routerLink]=\"item.route\"\n      class=\"drawer-item\"\n      [class.active]=\"isActiveRoute(item.route)\"\n      [class.has-children]=\"item.children && item.children.length > 0\"\n      [style.paddingLeft.px]=\"isExpanded ? 16 + level * 16 : 16\"\n      [matTooltip]=\"!isExpanded ? item.label : ''\"\n      matTooltipPosition=\"right\"\n      matTooltipClass=\"text-text-primary text-xs font-semibold\"\n      (click)=\"onItemClick(item, $event)\"\n    >\n      <div class=\"item-content\">\n        <fx-ui-hero-icon [icon]=\"item.icon\" [size]=\"20\" class=\"item-icon\"></fx-ui-hero-icon>\n        <span *ngIf=\"isExpanded\" class=\"item-label\">{{ item.label }}</span>\n      </div>\n    </a>\n\n    <button\n      *ngIf=\"!item.route || item.children\"\n      type=\"button\"\n      class=\"drawer-item\"\n      [class.active]=\"isActiveRoute(item.route)\"\n      [class.has-children]=\"item.children && item.children.length > 0\"\n      [style.paddingLeft.px]=\"isExpanded ? 16 + level * 16 : 16\"\n      [matTooltip]=\"!isExpanded ? item.label : ''\"\n      matTooltipPosition=\"right\"\n      matTooltipClass=\"text-text-primary text-sm font-semibold\"\n      (click)=\"onItemClick(item, $event)\"\n    >\n      <div class=\"item-content\">\n        <fx-ui-hero-icon [icon]=\"item.icon\" [size]=\"20\" class=\"item-icon\"></fx-ui-hero-icon>\n        <span *ngIf=\"isExpanded\" class=\"item-label\">{{ item.label }}</span>\n        <fx-ui-hero-icon\n          *ngIf=\"isExpanded && item.children && item.children.length > 0\"\n          [icon]=\"'chevron-down'\"\n          [size]=\"16\"\n          class=\"chevron-icon\"\n          [class.rotated]=\"isAccordionExpanded(item.id)\"\n        ></fx-ui-hero-icon>\n      </div>\n    </button>\n\n    <!-- Accordion Children -->\n    <div\n      *ngIf=\"item.children && item.children.length > 0\"\n      class=\"accordion-children\"\n      [@accordionExpand]=\"getAccordionState(item.id)\"\n    >\n      <ng-container *ngFor=\"let child of item.children\">\n        <ng-container\n          *ngTemplateOutlet=\"drawerItem; context: { $implicit: child, level: level + 1 }\"\n        ></ng-container>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block;height:100%}.drawer-host-wrapper{position:relative;height:100%;border-right-width:1px;--tw-border-opacity: 1;border-color:rgb(var(--border-default) / var(--tw-border-opacity, 1))}.drawer-container{display:flex;height:100%;flex-direction:column;overflow:auto;--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary) / var(--tw-bg-opacity, 1));padding-left:.5rem;padding-right:.5rem;transition:width .3s cubic-bezier(.4,0,.2,1)}.toggle-btn{position:absolute;top:50%;z-index:50;display:flex;height:1.5rem;width:1.5rem;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;border-width:1px;--tw-border-opacity: 1;border-color:rgb(var(--border-default) / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary) / var(--tw-bg-opacity, 1));--tw-shadow: 0 1px 2px 0 rgb(var(--shadow-color) / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);right:-12px;transition:all .2s ease}.toggle-btn:hover{--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary-hover) / var(--tw-bg-opacity, 1));--tw-shadow: 0 4px 6px -1px rgb(var(--shadow-color) / .1), 0 2px 4px -2px rgb(var(--shadow-color) / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.toggle-btn:active{transform:translateY(-50%) scale(.9)}.toggle-btn:focus-visible{outline-width:2px;outline-offset:2px;outline-color:rgb(var(--primary) / 1)}.drawer-nav{flex:1 1 0%;overflow-y:auto;overflow-x:hidden;padding-top:.5rem;padding-bottom:.5rem}.drawer-nav::-webkit-scrollbar{width:.375rem}.drawer-nav::-webkit-scrollbar-track{background-color:transparent}.drawer-nav::-webkit-scrollbar-thumb{border-radius:.125rem;--tw-bg-opacity: 1;background-color:rgb(var(--border-default) / var(--tw-bg-opacity, 1))}.drawer-nav::-webkit-scrollbar-thumb:hover{--tw-bg-opacity: 1;background-color:rgb(var(--text-placeholder) / var(--tw-bg-opacity, 1))}.drawer-item-wrapper{position:relative}.drawer-item{position:relative;margin-top:.25rem;display:flex;min-height:2rem;width:100%;cursor:pointer;align-items:center;border-radius:.25rem;border-style:none;background-color:transparent;padding:.5rem 1rem;--tw-text-opacity: 1;color:rgb(var(--text-primary) / var(--tw-text-opacity, 1));text-decoration-line:none;transition:all .2s ease;-webkit-tap-highlight-color:transparent;outline:2px solid transparent;outline-offset:2px}.drawer-item:hover{--tw-scale-x: .95;--tw-scale-y: .95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-bg-opacity: 1;background-color:rgb(var(--bg-primary-hover) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(var(--text-primary) / var(--tw-text-opacity, 1))}.drawer-item.active{background-image:linear-gradient(135deg,rgb(var(--gradient-primary-start)),rgb(var(--gradient-primary-end)));font-weight:500;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.drawer-item.active .item-icon{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.drawer-item:active{transform:scale(.98)}.drawer-item:focus-visible{outline-width:2px;outline-offset:2px;outline-color:rgb(var(--primary) / 1)}.item-content{display:flex;width:100%;align-items:center;gap:.75rem;overflow:hidden}.item-icon{flex-shrink:0;color:inherit}.item-label{flex:1 1 0%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;font-size:13px;line-height:1.25rem}.chevron-icon{margin-left:auto;flex-shrink:0;--tw-text-opacity: 1;color:rgb(var(--text-primary) / var(--tw-text-opacity, 1));transition:transform .3s cubic-bezier(.4,0,.2,1)}.chevron-icon.rotated{transform:rotate(180deg)}.accordion-children{overflow:hidden}.drawer-version{display:flex;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center;border-top-width:1px;--tw-border-opacity: 1;border-color:rgb(var(--border-default) / var(--tw-border-opacity, 1));padding:.75rem 1rem;font-size:11px;--tw-text-opacity: 1;color:rgb(var(--text-placeholder) / var(--tw-text-opacity, 1));font-family:Roboto,monospace}.drawer-version-dot{display:block;height:.375rem;width:.375rem;border-radius:9999px;--tw-bg-opacity: 1;background-color:rgb(var(--text-placeholder) / var(--tw-bg-opacity, 1))}.drawer-container[style*=\"width: 64px\"] .drawer-item{justify-content:center;padding-left:16px!important}.drawer-container[style*=\"width: 64px\"] .item-content{justify-content:center}\n"] }]
         }], ctorParameters: () => [{ type: i1$4.Router }], propDecorators: { items: [{
                 type: Input
             }], isExpanded: [{
@@ -3537,6 +4046,294 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Output
             }] } });
 
+/** Row-card skeleton placeholder for master-detail list panes. */
+class SkeletonListComponent {
+    rows = 5;
+    range(n) {
+        return Array.from({ length: Number(n) || 0 }, (_, i) => i);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SkeletonListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: SkeletonListComponent, isStandalone: false, selector: "fx-ui-skeleton-list", inputs: { rows: "rows" }, ngImport: i0, template: "<div class=\"flex flex-col gap-normal animate-pulse\">\n  @for (r of range(rows); track r) {\n    <div class=\"rounded-normal border border-border-default p-semi\">\n      <div class=\"flex items-center gap-normal mb-small\">\n        <div class=\"w-8 h-8 rounded-normal bg-bg-hover shrink-0\"></div>\n        <div class=\"h-4 flex-1 rounded bg-bg-hover\"></div>\n        <div class=\"h-5 w-12 rounded-full bg-bg-hover shrink-0\"></div>\n      </div>\n      <div class=\"h-3 w-3/4 rounded bg-bg-hover\"></div>\n    </div>\n  }\n</div>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SkeletonListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-skeleton-list', standalone: false, template: "<div class=\"flex flex-col gap-normal animate-pulse\">\n  @for (r of range(rows); track r) {\n    <div class=\"rounded-normal border border-border-default p-semi\">\n      <div class=\"flex items-center gap-normal mb-small\">\n        <div class=\"w-8 h-8 rounded-normal bg-bg-hover shrink-0\"></div>\n        <div class=\"h-4 flex-1 rounded bg-bg-hover\"></div>\n        <div class=\"h-5 w-12 rounded-full bg-bg-hover shrink-0\"></div>\n      </div>\n      <div class=\"h-3 w-3/4 rounded bg-bg-hover\"></div>\n    </div>\n  }\n</div>\n" }]
+        }], propDecorators: { rows: [{
+                type: Input
+            }] } });
+
+/** Card-shaped skeleton placeholder for detail panels. */
+class SkeletonDetailComponent {
+    /** Number of content cards rendered below the header card. */
+    cards = 3;
+    /** Rows per content card. */
+    rows = 4;
+    range(n) {
+        return Array.from({ length: Number(n) || 0 }, (_, i) => i);
+    }
+    rowWidth(i) {
+        return [90, 70, 80, 60][i % 4];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SkeletonDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: SkeletonDetailComponent, isStandalone: false, selector: "fx-ui-skeleton-detail", inputs: { cards: "cards", rows: "rows" }, ngImport: i0, template: "<div class=\"flex flex-col gap-xl animate-pulse\">\n  <div class=\"card-common\">\n    <div class=\"flex items-start gap-normal\">\n      <div class=\"w-10 h-10 rounded-lg bg-bg-hover shrink-0\"></div>\n      <div class=\"flex-1 min-w-0 flex flex-col gap-normal\">\n        <div class=\"h-5 w-1/2 rounded bg-bg-hover\"></div>\n        <div class=\"h-3 w-3/4 rounded bg-bg-hover\"></div>\n      </div>\n    </div>\n  </div>\n\n  @for (c of range(cards); track c) {\n    <div class=\"card-common flex flex-col gap-large\">\n      <div class=\"h-4 w-1/3 rounded bg-bg-hover\"></div>\n      <div class=\"flex flex-col gap-normal\">\n        @for (r of range(rows); track r) {\n          <div class=\"h-3 rounded bg-bg-hover\" [style.width.%]=\"rowWidth(r)\"></div>\n        }\n      </div>\n    </div>\n  }\n</div>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SkeletonDetailComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-skeleton-detail', standalone: false, template: "<div class=\"flex flex-col gap-xl animate-pulse\">\n  <div class=\"card-common\">\n    <div class=\"flex items-start gap-normal\">\n      <div class=\"w-10 h-10 rounded-lg bg-bg-hover shrink-0\"></div>\n      <div class=\"flex-1 min-w-0 flex flex-col gap-normal\">\n        <div class=\"h-5 w-1/2 rounded bg-bg-hover\"></div>\n        <div class=\"h-3 w-3/4 rounded bg-bg-hover\"></div>\n      </div>\n    </div>\n  </div>\n\n  @for (c of range(cards); track c) {\n    <div class=\"card-common flex flex-col gap-large\">\n      <div class=\"h-4 w-1/3 rounded bg-bg-hover\"></div>\n      <div class=\"flex flex-col gap-normal\">\n        @for (r of range(rows); track r) {\n          <div class=\"h-3 rounded bg-bg-hover\" [style.width.%]=\"rowWidth(r)\"></div>\n        }\n      </div>\n    </div>\n  }\n</div>\n" }]
+        }], propDecorators: { cards: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }] } });
+
+/** KPI tile row: big number + tinted icon box + caption, in a responsive grid. */
+class StatCardsComponent {
+    cards = [];
+    /** Grid columns; defaults to one column per card. */
+    cols;
+    get gridColumns() {
+        // No explicit cols → responsive auto-fit so tiles stack on narrow viewports.
+        if (this.cols === undefined) {
+            return 'repeat(auto-fit, minmax(180px, 1fr))';
+        }
+        return `repeat(${this.cols}, minmax(0, 1fr))`;
+    }
+    numClass(card) {
+        return card.tone ? toneText(card.tone) : 'text-text-primary';
+    }
+    boxClass(card) {
+        return card.tone ? `bg-${card.tone}/10 ${toneText(card.tone)}` : 'bg-bg-hover text-text-secondary';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StatCardsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: StatCardsComponent, isStandalone: false, selector: "fx-ui-stat-cards", inputs: { cards: "cards", cols: "cols" }, ngImport: i0, template: "<div class=\"grid gap-normal\" [ngStyle]=\"{ 'grid-template-columns': gridColumns }\">\n  @for (card of cards; track card.label) {\n    <div class=\"card-common flex items-center gap-normal\">\n      @if (card.icon) {\n        <div\n          class=\"w-10 h-10 rounded-lg flex items-center justify-center shrink-0\"\n          [ngClass]=\"boxClass(card)\"\n        >\n          <fx-ui-hero-icon [icon]=\"card.icon\" [size]=\"20\"></fx-ui-hero-icon>\n        </div>\n      }\n      <div class=\"flex flex-col min-w-0\">\n        <span class=\"txt-heading-04\" [ngClass]=\"numClass(card)\">{{ card.value }}</span>\n        <span class=\"txt-utility-caption text-text-secondary truncate\">{{ card.label }}</span>\n      </div>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StatCardsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-stat-cards', standalone: false, template: "<div class=\"grid gap-normal\" [ngStyle]=\"{ 'grid-template-columns': gridColumns }\">\n  @for (card of cards; track card.label) {\n    <div class=\"card-common flex items-center gap-normal\">\n      @if (card.icon) {\n        <div\n          class=\"w-10 h-10 rounded-lg flex items-center justify-center shrink-0\"\n          [ngClass]=\"boxClass(card)\"\n        >\n          <fx-ui-hero-icon [icon]=\"card.icon\" [size]=\"20\"></fx-ui-hero-icon>\n        </div>\n      }\n      <div class=\"flex flex-col min-w-0\">\n        <span class=\"txt-heading-04\" [ngClass]=\"numClass(card)\">{{ card.value }}</span>\n        <span class=\"txt-utility-caption text-text-secondary truncate\">{{ card.label }}</span>\n      </div>\n    </div>\n  }\n</div>\n" }]
+        }], propDecorators: { cards: [{
+                type: Input
+            }], cols: [{
+                type: Input
+            }] } });
+
+/** Centered "no data" block. The message is caller-translated (no i18n in lib). */
+class EmptyStateComponent {
+    message = 'No data';
+    /** Optional icon (hero-icon name). */
+    icon;
+    /** Min height of the block, CSS length. */
+    height = '120px';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: EmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: EmptyStateComponent, isStandalone: false, selector: "fx-ui-empty-state", inputs: { message: "message", icon: "icon", height: "height" }, ngImport: i0, template: "<div\n  class=\"flex flex-col items-center justify-center gap-small w-full\"\n  [style.minHeight]=\"height\"\n>\n  @if (icon) {\n    <fx-ui-hero-icon class=\"text-text-placeholder\" [icon]=\"icon\" [size]=\"24\"></fx-ui-hero-icon>\n  }\n  <div class=\"txt-default text-text-placeholder\">{{ message }}</div>\n</div>\n", dependencies: [{ kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: EmptyStateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-empty-state', standalone: false, template: "<div\n  class=\"flex flex-col items-center justify-center gap-small w-full\"\n  [style.minHeight]=\"height\"\n>\n  @if (icon) {\n    <fx-ui-hero-icon class=\"text-text-placeholder\" [icon]=\"icon\" [size]=\"24\"></fx-ui-hero-icon>\n  }\n  <div class=\"txt-default text-text-placeholder\">{{ message }}</div>\n</div>\n" }]
+        }], propDecorators: { message: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }] } });
+
+/**
+ * Tone-tinted filter chip row. Replaces the per-tab chipClass() copies —
+ * including their classic bug of comparing a hardcoded filter key: the active
+ * chip here is always derived from [value].
+ */
+class FilterChipsComponent {
+    options = [];
+    value = '';
+    valueChange = new EventEmitter();
+    /** Per-value tone overrides (e.g. { Safe: 'information', Protected: 'discovery' as any }). */
+    toneOverrides = {};
+    select(option) {
+        this.value = option.value;
+        this.valueChange.emit(option.value);
+    }
+    chipClass(option) {
+        const active = this.value === option.value;
+        if (!option.value) {
+            return active
+                ? 'bg-text-primary text-text-focus'
+                : 'bg-bg-hover text-text-secondary hover:bg-gradient-primary-start/10 hover:text-gradient-primary-start';
+        }
+        const tone = option.value in this.toneOverrides
+            ? this.toneOverrides[option.value]
+            : severityTone(option.value);
+        if (!tone) {
+            return active ? 'bg-text-primary text-text-focus' : `${toneBadge(null)} hover:opacity-50`;
+        }
+        return active ? `bg-${tone} text-text-focus` : `${toneBadge(tone)} hover:opacity-50`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FilterChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: FilterChipsComponent, isStandalone: false, selector: "fx-ui-filter-chips", inputs: { options: "options", value: "value", toneOverrides: "toneOverrides" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"flex flex-wrap items-center gap-small\">\n  @for (option of options; track option.value) {\n    <button\n      type=\"button\"\n      class=\"px-3 py-1 rounded-full txt-utility-caption font-medium transition-colors cursor-pointer\"\n      [ngClass]=\"chipClass(option)\"\n      (click)=\"select(option)\"\n    >\n      {{ option.label }}\n    </button>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FilterChipsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-filter-chips', standalone: false, template: "<div class=\"flex flex-wrap items-center gap-small\">\n  @for (option of options; track option.value) {\n    <button\n      type=\"button\"\n      class=\"px-3 py-1 rounded-full txt-utility-caption font-medium transition-colors cursor-pointer\"\n      [ngClass]=\"chipClass(option)\"\n      (click)=\"select(option)\"\n    >\n      {{ option.label }}\n    </button>\n  }\n</div>\n" }]
+        }], propDecorators: { options: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], toneOverrides: [{
+                type: Input
+            }] } });
+
+/** Thin tone-coloured progress/score bar with optional label and caption. */
+class MeterComponent {
+    value = 0;
+    max = 10;
+    tone = null;
+    /** Caller-translated texts; omitted → bar only. */
+    label;
+    caption;
+    get percent() {
+        const max = Number(this.max) || 1;
+        const pct = (Number(this.value) / max) * 100;
+        return Math.min(100, Math.max(0, pct));
+    }
+    get fillClass() {
+        return toneBg(this.tone);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MeterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: MeterComponent, isStandalone: false, selector: "fx-ui-meter", inputs: { value: "value", max: "max", tone: "tone", label: "label", caption: "caption" }, ngImport: i0, template: "<div class=\"flex flex-col gap-small w-full\">\n  @if (label || caption) {\n    <div class=\"flex items-center justify-between gap-normal\">\n      @if (label) {\n        <span class=\"txt-field-label !mb-0\">{{ label }}</span>\n      }\n      @if (caption) {\n        <span class=\"txt-utility-caption text-text-secondary\">{{ caption }}</span>\n      }\n    </div>\n  }\n  <div class=\"h-2 rounded-full bg-bg-hover overflow-hidden\">\n    <div class=\"h-full rounded-full\" [ngClass]=\"fillClass\" [style.width.%]=\"percent\"></div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MeterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-meter', standalone: false, template: "<div class=\"flex flex-col gap-small w-full\">\n  @if (label || caption) {\n    <div class=\"flex items-center justify-between gap-normal\">\n      @if (label) {\n        <span class=\"txt-field-label !mb-0\">{{ label }}</span>\n      }\n      @if (caption) {\n        <span class=\"txt-utility-caption text-text-secondary\">{{ caption }}</span>\n      }\n    </div>\n  }\n  <div class=\"h-2 rounded-full bg-bg-hover overflow-hidden\">\n    <div class=\"h-full rounded-full\" [ngClass]=\"fillClass\" [style.width.%]=\"percent\"></div>\n  </div>\n</div>\n" }]
+        }], propDecorators: { value: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], tone: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], caption: [{
+                type: Input
+            }] } });
+
+/** Detail-panel section: card with an icon + heading header and projected body. */
+class SectionCardComponent {
+    /** Caller-translated heading. */
+    title = '';
+    /** hero-icon name; omitted → text-only header. */
+    icon;
+    iconTone = null;
+    get iconClass() {
+        return this.iconTone ? toneText(this.iconTone) : 'text-text-secondary';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SectionCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: SectionCardComponent, isStandalone: false, selector: "fx-ui-section-card", inputs: { title: "title", icon: "icon", iconTone: "iconTone" }, ngImport: i0, template: "<div class=\"card-common\">\n  <div class=\"flex items-center gap-normal mb-large\">\n    @if (icon) {\n      <fx-ui-hero-icon [ngClass]=\"iconClass\" [icon]=\"icon\" [size]=\"18\"></fx-ui-hero-icon>\n    }\n    <span class=\"txt-heading-06\">{{ title }}</span>\n  </div>\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SectionCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-section-card', standalone: false, template: "<div class=\"card-common\">\n  <div class=\"flex items-center gap-normal mb-large\">\n    @if (icon) {\n      <fx-ui-hero-icon [ngClass]=\"iconClass\" [icon]=\"icon\" [size]=\"18\"></fx-ui-hero-icon>\n    }\n    <span class=\"txt-heading-06\">{{ title }}</span>\n  </div>\n  <ng-content></ng-content>\n</div>\n" }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], iconTone: [{
+                type: Input
+            }] } });
+
+/**
+ * Label-over-value field for detail panels. The label uses txt-field-label
+ * with its baked-in margin neutralised (the known mb-1 alignment gotcha) —
+ * spacing is owned by this component.
+ */
+class InfoFieldComponent {
+    /** Caller-translated label. */
+    label = '';
+    value;
+    /** Colours the value; null/undefined renders the primary text colour. */
+    tone = null;
+    /** Monospace value (hashes, paths). */
+    mono = false;
+    /** Placeholder when value is empty. */
+    placeholder = '---';
+    get displayValue() {
+        if (this.value === null || this.value === undefined || this.value === '') {
+            return this.placeholder;
+        }
+        return String(this.value);
+    }
+    get valueClass() {
+        const toneClass = this.tone ? toneText(this.tone) : 'text-text-primary';
+        return this.mono ? `${toneClass} font-mono break-all` : toneClass;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: InfoFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: InfoFieldComponent, isStandalone: false, selector: "fx-ui-info-field", inputs: { label: "label", value: "value", tone: "tone", mono: "mono", placeholder: "placeholder" }, ngImport: i0, template: "<div class=\"flex flex-col gap-small min-w-0\">\n  <span class=\"txt-field-label !mb-0\">{{ label }}</span>\n  <span class=\"txt-default\" [ngClass]=\"valueClass\">{{ displayValue }}</span>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: InfoFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-info-field', standalone: false, template: "<div class=\"flex flex-col gap-small min-w-0\">\n  <span class=\"txt-field-label !mb-0\">{{ label }}</span>\n  <span class=\"txt-default\" [ngClass]=\"valueClass\">{{ displayValue }}</span>\n</div>\n" }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], tone: [{
+                type: Input
+            }], mono: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }] } });
+
+/**
+ * Compact total/critical/high/medium(/low) badge cluster used in table cells.
+ * Pass counts via [stats]; missing fields are skipped. Labels are numbers, so
+ * no i18n is involved; the total badge renders neutral.
+ */
+class SeverityBadgesComponent {
+    stats = null;
+    /** Show zero-count badges (default true, mirrors the table-cell usage). */
+    showZero = true;
+    /** Append the severity letter to counts ("3C", "5H", "2M") per the report design. */
+    suffixed = false;
+    badgeClick = new EventEmitter();
+    static TONES = {
+        total: null,
+        critical: 'critical',
+        high: 'danger',
+        medium: 'warning',
+        low: 'success',
+    };
+    get badges() {
+        const s = this.stats ?? {};
+        return ['total', 'critical', 'high', 'medium', 'low']
+            .filter((key) => s[key] !== undefined && (this.showZero || Number(s[key]) > 0))
+            .map((key) => {
+            const count = Number(s[key]) || 0;
+            const label = this.suffixed && key !== 'total' ? `${count}${key.charAt(0).toUpperCase()}` : count;
+            return { key, label, tone: SeverityBadgesComponent.TONES[key] };
+        });
+    }
+    badgeClass(badge) {
+        return badge.tone
+            ? `bg-${badge.tone}/10 text-${badge.tone}`
+            : 'bg-bg-hover text-text-primary';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SeverityBadgesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: SeverityBadgesComponent, isStandalone: false, selector: "fx-ui-severity-badges", inputs: { stats: "stats", showZero: "showZero", suffixed: "suffixed" }, outputs: { badgeClick: "badgeClick" }, ngImport: i0, template: "<div class=\"flex items-center gap-small\">\n  @for (badge of badges; track badge.key) {\n    <span\n      class=\"px-2 py-0.5 rounded-full txt-utility-caption font-medium cursor-pointer\"\n      [ngClass]=\"badgeClass(badge)\"\n      (click)=\"badgeClick.emit(badge.key)\"\n      >{{ badge.label }}</span\n    >\n  }\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SeverityBadgesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-severity-badges', standalone: false, template: "<div class=\"flex items-center gap-small\">\n  @for (badge of badges; track badge.key) {\n    <span\n      class=\"px-2 py-0.5 rounded-full txt-utility-caption font-medium cursor-pointer\"\n      [ngClass]=\"badgeClass(badge)\"\n      (click)=\"badgeClick.emit(badge.key)\"\n      >{{ badge.label }}</span\n    >\n  }\n</div>\n" }]
+        }], propDecorators: { stats: [{
+                type: Input
+            }], showZero: [{
+                type: Input
+            }], suffixed: [{
+                type: Input
+            }], badgeClick: [{
+                type: Output
+            }] } });
+
 const FX_COMPONENTS = [
     InputComponent,
     SelectComponent,
@@ -3565,6 +4362,15 @@ const FX_COMPONENTS = [
     TableCell,
     KanbanBoardComponent,
     DrawerComponent,
+    SkeletonListComponent,
+    SkeletonDetailComponent,
+    StatCardsComponent,
+    EmptyStateComponent,
+    FilterChipsComponent,
+    MeterComponent,
+    SectionCardComponent,
+    InfoFieldComponent,
+    SeverityBadgesComponent,
 ];
 
 class ConfirmationDialogComponent {
@@ -3594,13 +4400,13 @@ class ConfirmationDialogComponent {
     cancel() {
         this.ref.close(false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ConfirmationDialogComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: ConfirmationDialogComponent, isStandalone: false, selector: "fx-ui-confirmation-dialog", ngImport: i0, template: "<div animate.enter=\"fade-in-animation\" class=\"dialog-container\">\n  <h1 class=\"txt-heading-05 dialog-header\">{{ title }}</h1>\n  <mat-dialog-content>\n    <div class=\"txt-default\">{{ message }}</div>\n  </mat-dialog-content>\n  <mat-dialog-actions align=\"end\">\n    <fx-ui-button class=\"mr-1\" [label]=\"cancelLabel\" (clicked)=\"cancel()\"></fx-ui-button>\n    <fx-ui-button\n      buttonVariant=\"primary\"\n      class=\"mr-1\"\n      [label]=\"confirmLabel\"\n      (clicked)=\"accept()\"\n      [loading]=\"loading\"\n      class=\"min-w-[100px]\"\n    ></fx-ui-button>\n  </mat-dialog-actions>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: ButtonComponent, selector: "fx-ui-button", inputs: ["label", "disabled", "buttonVariant", "icon", "class", "loading"], outputs: ["clicked"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ConfirmationDialogComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: ConfirmationDialogComponent, isStandalone: false, selector: "fx-ui-confirmation-dialog", ngImport: i0, template: "<div animate.enter=\"fade-in-animation\" class=\"dialog-container\">\n  <h1 class=\"txt-heading-05 dialog-header\">{{ title }}</h1>\n  <mat-dialog-content>\n    <div class=\"txt-default\">{{ message }}</div>\n  </mat-dialog-content>\n  <mat-dialog-actions align=\"end\">\n    <fx-ui-button class=\"mr-1\" [label]=\"cancelLabel\" (clicked)=\"cancel()\"></fx-ui-button>\n    <fx-ui-button\n      buttonVariant=\"primary\"\n      class=\"mr-1\"\n      [label]=\"confirmLabel\"\n      (clicked)=\"accept()\"\n      [loading]=\"loading\"\n      class=\"min-w-[100px]\"\n    ></fx-ui-button>\n  </mat-dialog-actions>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: ButtonComponent, selector: "fx-ui-button", inputs: ["label", "disabled", "buttonVariant", "icon", "class", "loading"], outputs: ["clicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fx-ui-confirmation-dialog', standalone: false, template: "<div animate.enter=\"fade-in-animation\" class=\"dialog-container\">\n  <h1 class=\"txt-heading-05 dialog-header\">{{ title }}</h1>\n  <mat-dialog-content>\n    <div class=\"txt-default\">{{ message }}</div>\n  </mat-dialog-content>\n  <mat-dialog-actions align=\"end\">\n    <fx-ui-button class=\"mr-1\" [label]=\"cancelLabel\" (clicked)=\"cancel()\"></fx-ui-button>\n    <fx-ui-button\n      buttonVariant=\"primary\"\n      class=\"mr-1\"\n      [label]=\"confirmLabel\"\n      (clicked)=\"accept()\"\n      [loading]=\"loading\"\n      class=\"min-w-[100px]\"\n    ></fx-ui-button>\n  </mat-dialog-actions>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i1$2.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
                 }] }] });
@@ -3620,7 +4426,7 @@ const MY_MOMENT_FORMATS = {
 };
 class UiModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: UiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: UiModule, declarations: [InputComponent, SelectComponent, RadioButtonComponent, CheckboxComponent, DndUploadComponent, ButtonComponent, RadioButtonToggleComponent, DatetimePicker, LoadingPanel, SearchBarComponent, TabGroupComponent, TabComponent, HeroIconComponent, ToastComponent, ToastContainerComponent, TagComponent, ChartComponent, SliderComponent, SwitchComponent, RichTextAreaComponent, SkeletonTableLoadingComponent, FlowConnection, CircleProgressBar, TreeDiagram, TableCell, KanbanBoardComponent, DrawerComponent, ConfirmationDialogComponent], imports: [CommonModule,
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: UiModule, declarations: [InputComponent, SelectComponent, RadioButtonComponent, CheckboxComponent, DndUploadComponent, ButtonComponent, RadioButtonToggleComponent, DatetimePicker, LoadingPanel, SearchBarComponent, TabGroupComponent, TabComponent, HeroIconComponent, ToastComponent, ToastContainerComponent, TagComponent, ChartComponent, SliderComponent, SwitchComponent, RichTextAreaComponent, SkeletonTableLoadingComponent, FlowConnection, CircleProgressBar, TreeDiagram, TableCell, KanbanBoardComponent, DrawerComponent, SkeletonListComponent, SkeletonDetailComponent, StatCardsComponent, EmptyStateComponent, FilterChipsComponent, MeterComponent, SectionCardComponent, InfoFieldComponent, SeverityBadgesComponent, ConfirmationDialogComponent], imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             RouterModule,
@@ -3629,7 +4435,7 @@ class UiModule {
             OwlMomentDateTimeModule,
             HasPermissionDirective,
             TrimOnBlurDirective,
-            NgHeroiconsModule, i29.VflowComponent, i29.HandleComponent, i29.ResizableComponent, i29.SelectableDirective, i29.MiniMapComponent, i29.NodeToolbarComponent, i29.CustomTemplateEdgeComponent, i29.DragHandleDirective, i29.ConnectionControllerDirective, i29.NodeHtmlTemplateDirective, i29.NodeSvgTemplateDirective, i29.GroupNodeTemplateDirective, i29.EdgeLabelHtmlTemplateDirective, i29.EdgeTemplateDirective, i29.ConnectionTemplateDirective, i29.HandleTemplateDirective, i1$5.NgxEchartsModule, i3$2.MatSelectModule, i32.MatRadioModule, i33.MatButtonModule, i34.MatIconModule, i35.MatPaginatorModule, i36.MatTableModule, i37.MatSnackBarModule, i1$1.MatDialogModule, i39.MatCheckboxModule, i40.MatCardModule, i41.MatDatepickerModule, i42.MatTimepickerModule, i43.MatBadgeModule, i44.MatExpansionModule, i45.MatFormFieldModule, i46.MatMenuModule, i3$1.MatTooltipModule, i2$2.DragDropModule], exports: [InputComponent, SelectComponent, RadioButtonComponent, CheckboxComponent, DndUploadComponent, ButtonComponent, RadioButtonToggleComponent, DatetimePicker, LoadingPanel, SearchBarComponent, TabGroupComponent, TabComponent, HeroIconComponent, ToastComponent, ToastContainerComponent, TagComponent, ChartComponent, SliderComponent, SwitchComponent, RichTextAreaComponent, SkeletonTableLoadingComponent, FlowConnection, CircleProgressBar, TreeDiagram, TableCell, KanbanBoardComponent, DrawerComponent, ConfirmationDialogComponent, 
+            NgHeroiconsModule, i38.VflowComponent, i38.HandleComponent, i38.ResizableComponent, i38.SelectableDirective, i38.MiniMapComponent, i38.NodeToolbarComponent, i38.CustomTemplateEdgeComponent, i38.DragHandleDirective, i38.ConnectionControllerDirective, i38.NodeHtmlTemplateDirective, i38.NodeSvgTemplateDirective, i38.GroupNodeTemplateDirective, i38.EdgeLabelHtmlTemplateDirective, i38.EdgeTemplateDirective, i38.ConnectionTemplateDirective, i38.HandleTemplateDirective, i1$5.NgxEchartsModule, i3.MatSelectModule, i41.MatRadioModule, i42.MatButtonModule, i43.MatIconModule, i44.MatPaginatorModule, i45.MatTableModule, i46.MatSnackBarModule, i1$2.MatDialogModule, i48.MatCheckboxModule, i49.MatCardModule, i50.MatDatepickerModule, i51.MatTimepickerModule, i52.MatBadgeModule, i53.MatExpansionModule, i54.MatFormFieldModule, i55.MatMenuModule, i56.MatTooltipModule, i2$3.DragDropModule], exports: [InputComponent, SelectComponent, RadioButtonComponent, CheckboxComponent, DndUploadComponent, ButtonComponent, RadioButtonToggleComponent, DatetimePicker, LoadingPanel, SearchBarComponent, TabGroupComponent, TabComponent, HeroIconComponent, ToastComponent, ToastContainerComponent, TagComponent, ChartComponent, SliderComponent, SwitchComponent, RichTextAreaComponent, SkeletonTableLoadingComponent, FlowConnection, CircleProgressBar, TreeDiagram, TableCell, KanbanBoardComponent, DrawerComponent, SkeletonListComponent, SkeletonDetailComponent, StatCardsComponent, EmptyStateComponent, FilterChipsComponent, MeterComponent, SectionCardComponent, InfoFieldComponent, SeverityBadgesComponent, ConfirmationDialogComponent, 
             // Module
             FormsModule,
             ReactiveFormsModule,
@@ -3637,7 +4443,7 @@ class UiModule {
             OwlDateTimeModule,
             OwlNativeDateTimeModule,
             HasPermissionDirective,
-            NgHeroiconsModule, i3$2.MatSelectModule, i32.MatRadioModule, i33.MatButtonModule, i34.MatIconModule, i35.MatPaginatorModule, i36.MatTableModule, i37.MatSnackBarModule, i1$1.MatDialogModule, i39.MatCheckboxModule, i40.MatCardModule, i41.MatDatepickerModule, i42.MatTimepickerModule, i43.MatBadgeModule, i44.MatExpansionModule, i45.MatFormFieldModule, i46.MatMenuModule, i3$1.MatTooltipModule, i2$2.DragDropModule] });
+            NgHeroiconsModule, i3.MatSelectModule, i41.MatRadioModule, i42.MatButtonModule, i43.MatIconModule, i44.MatPaginatorModule, i45.MatTableModule, i46.MatSnackBarModule, i1$2.MatDialogModule, i48.MatCheckboxModule, i49.MatCardModule, i50.MatDatepickerModule, i51.MatTimepickerModule, i52.MatBadgeModule, i53.MatExpansionModule, i54.MatFormFieldModule, i55.MatMenuModule, i56.MatTooltipModule, i2$3.DragDropModule] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: UiModule, providers: [
             importProvidersFrom(NgHeroiconsModule.forRoot()),
             { provide: OWL_DATE_TIME_FORMATS, useValue: MY_MOMENT_FORMATS },
@@ -3648,14 +4454,14 @@ class UiModule {
             OwlDateTimeModule,
             OwlNativeDateTimeModule,
             OwlMomentDateTimeModule,
-            NgHeroiconsModule, i29.VflowComponent, i29.HandleComponent, i29.ResizableComponent, i29.MiniMapComponent, i29.NodeToolbarComponent, i29.CustomTemplateEdgeComponent, NgxEchartsModule.forRoot({ echarts: () => import('echarts') }), MATERIAL_MODULE, 
+            NgHeroiconsModule, i38.VflowComponent, i38.HandleComponent, i38.ResizableComponent, i38.MiniMapComponent, i38.NodeToolbarComponent, i38.CustomTemplateEdgeComponent, NgxEchartsModule.forRoot({ echarts: () => import('echarts') }), MATERIAL_MODULE, 
             // Module
             FormsModule,
             ReactiveFormsModule,
             RouterModule,
             OwlDateTimeModule,
             OwlNativeDateTimeModule,
-            NgHeroiconsModule, i3$2.MatSelectModule, i32.MatRadioModule, i33.MatButtonModule, i34.MatIconModule, i35.MatPaginatorModule, i36.MatTableModule, i37.MatSnackBarModule, i1$1.MatDialogModule, i39.MatCheckboxModule, i40.MatCardModule, i41.MatDatepickerModule, i42.MatTimepickerModule, i43.MatBadgeModule, i44.MatExpansionModule, i45.MatFormFieldModule, i46.MatMenuModule, i3$1.MatTooltipModule, i2$2.DragDropModule] });
+            NgHeroiconsModule, i3.MatSelectModule, i41.MatRadioModule, i42.MatButtonModule, i43.MatIconModule, i44.MatPaginatorModule, i45.MatTableModule, i46.MatSnackBarModule, i1$2.MatDialogModule, i48.MatCheckboxModule, i49.MatCardModule, i50.MatDatepickerModule, i51.MatTimepickerModule, i52.MatBadgeModule, i53.MatExpansionModule, i54.MatFormFieldModule, i55.MatMenuModule, i56.MatTooltipModule, i2$3.DragDropModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: UiModule, decorators: [{
             type: NgModule,
@@ -3705,5 +4511,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AuthInterceptor, AuthStateService, BaseComponent, BaseDialogComponent, BaseResolver, BaseTableComponent, BreadcrumbService, ButtonComponent, ChartComponent, CheckboxComponent, CircleProgressBar, ConfirmationDialogComponent, DatetimePicker, DndUploadComponent, DrawerComponent, FlowConnection, FxLoadingService, FxStorageService, FxToastrService, FxUtils, FxValidators, HasPermissionDirective, HeroIconComponent, HttpLoaderFactory, HttpWrapper, InputComponent, KanbanBoardComponent, LoadingPanel, MY_MOMENT_FORMATS, NotificationService, PermissionGuard, PermissionService, QuillStyleLoaderService, RadioButtonComponent, RadioButtonToggleComponent, RichTextAreaComponent, SearchBarComponent, SelectComponent, SkeletonTableLoadingComponent, SliderComponent, SwitchComponent, TabComponent, TabGroupComponent, TableCell, TagComponent, ThemeService, ToastComponent, ToastContainerComponent, TranslationModule, TranslationService, TreeDiagram, TrimOnBlurDirective, UiModule };
+export { AuthInterceptor, AuthStateService, BaseComponent, BaseDialogComponent, BaseResolver, BaseTableComponent, BreadcrumbService, ButtonComponent, ChartComponent, CheckboxComponent, CircleProgressBar, ConfirmationDialogComponent, DatetimePicker, DndUploadComponent, DrawerComponent, EmptyStateComponent, FilterChipsComponent, FlowConnection, FxLoadingService, FxStorageService, FxToastrService, FxUtils, FxValidators, HasPermissionDirective, HeroIconComponent, HttpLoaderFactory, HttpWrapper, InfoFieldComponent, InputComponent, KanbanBoardComponent, LoadingPanel, MY_MOMENT_FORMATS, MeterComponent, NotificationService, PermissionGuard, PermissionService, QuillStyleLoaderService, RadioButtonComponent, RadioButtonToggleComponent, RealtimeTableSync, RichTextAreaComponent, SearchBarComponent, SectionCardComponent, SelectComponent, SeverityBadgesComponent, SkeletonDetailComponent, SkeletonListComponent, SkeletonTableLoadingComponent, SliderComponent, StatCardsComponent, SwitchComponent, TabComponent, TabGroupComponent, TableCell, TagComponent, ThemeService, ToastComponent, ToastContainerComponent, TranslationModule, TranslationService, TreeDiagram, TrimOnBlurDirective, UiModule, countTone, createApi, fxListResolver, scoreTone, severityTone, toneBadge, toneBg, toneColor, toneText };
 //# sourceMappingURL=foxeltech-angular-ui.mjs.map