@foxeltech/angular-ui 0.3.0 → 0.4.0

package/fesm2022/foxeltech-angular-ui.mjs

@@ -1,68 +1,35 @@
 import * as i0 from '@angular/core';
-import { inject, DestroyRef, Injector, Directive, Input, Component, createComponent, Injectable, ViewChild, Inject, EventEmitter, NgModule, HostListener, PLATFORM_ID, Output, ChangeDetectionStrategy, TemplateRef, ContentChildren, ViewChildren, ContentChild, importProvidersFrom } from '@angular/core';
-import * as i45 from '@angular/material/paginator';
-import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
-import * as i46 from '@angular/material/table';
-import { MatTableDataSource, MatTable, MatTableModule } from '@angular/material/table';
-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 { inject, DestroyRef, Injector, Directive, InjectionToken, input, isDevMode, ChangeDetectionStrategy, Component, Input, createComponent, Injectable, viewChild, ViewChild, Inject, EventEmitter, NgModule, HostListener, output, ChangeDetectorRef, TemplateRef, contentChildren, Output, ViewChildren, contentChild } from '@angular/core';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatTableDataSource, MatTable } from '@angular/material/table';
+import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
 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$2 from '@angular/material/dialog';
-import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
-import * as i1$3 from '@ngx-translate/core';
+import * as i1 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialog } from '@angular/material/dialog';
+import * as i1$1 from '@ngx-translate/core';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
-import * as i2$1 from '@angular/forms';
+import * as i1$3 from '@angular/forms';
 import { NgControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i1$4 from '@angular/router';
-import { NavigationEnd, RouterModule } from '@angular/router';
+import * as i2$1 from '@angular/router';
+import { NavigationEnd, RouterLink, RouterModule } from '@angular/router';
 import { catchError } from 'rxjs/operators';
 import * as signalR from '@microsoft/signalr';
-import * as i3 from '@angular/material/select';
-import { MatSelectModule } from '@angular/material/select';
-import * as i42 from '@angular/material/radio';
-import { MatRadioModule } from '@angular/material/radio';
-import * as i43 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
-import * as i44 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
-import * as i47 from '@angular/material/snack-bar';
-import { MatSnackBarModule } from '@angular/material/snack-bar';
-import * as i49 from '@angular/material/checkbox';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i50 from '@angular/material/card';
-import { MatCardModule } from '@angular/material/card';
-import * as i51 from '@angular/material/datepicker';
+import { CdkScrollable } from '@angular/cdk/scrolling';
+import * as i1$2 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i52 from '@angular/material/timepicker';
+import * as i2$2 from '@angular/material/timepicker';
 import { MatTimepickerModule } from '@angular/material/timepicker';
-import * as i53 from '@angular/material/badge';
-import { MatBadgeModule } from '@angular/material/badge';
-import * as i54 from '@angular/material/expansion';
-import { MatExpansionModule } from '@angular/material/expansion';
-import * as i55 from '@angular/material/form-field';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i56 from '@angular/material/menu';
+import { MAT_DATE_LOCALE, provideNativeDateAdapter } from '@angular/material/core';
+import { MatTooltip } from '@angular/material/tooltip';
+import { MatFormField, MatSelect, MatOption } from '@angular/material/select';
+import { moveItemInArray, transferArrayItem, CdkDropList, CdkDrag, CdkDragPlaceholder } from '@angular/cdk/drag-drop';
+import { trigger, state, style, transition, animate } from '@angular/animations';
+import * as i1$4 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import * as i57 from '@angular/material/tooltip';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i2$3 from '@angular/cdk/drag-drop';
-import { DragDropModule, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
-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 * as i39 from 'ngx-vflow';
-import { Vflow } from 'ngx-vflow';
-import { trigger, state, transition, style, animate } from '@angular/animations';
-import { OwlMomentDateTimeModule } from '@danielmoncada/angular-datetime-picker-moment-adapter';
 
 class BaseComponent {
     injector;
@@ -76,63 +43,79 @@ class BaseComponent {
     }
     // 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: BaseComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.20", type: BaseComponent, isStandalone: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: BaseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: BaseComponent, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: i0.Injector }] });
 
+/**
+ * Where the generated Heroicons sprite is served from. Defaults to
+ * 'fx-icons.svg' at the app base — consumers copy it from the package via an
+ * angular.json assets glob (same pattern as the lib fonts):
+ *   { "input": "node_modules/@foxeltech/angular-ui", "glob": "fx-icons.svg", "output": "." }
+ */
+const FX_ICON_SPRITE_URL = new InjectionToken('FX_ICON_SPRITE_URL', {
+    providedIn: 'root',
+    factory: () => 'fx-icons.svg',
+});
+let spriteChecked = false;
+/**
+ * Heroicons rendered from the self-hosted sprite (see
+ * scripts/generate-icon-sprite.mjs) — every 24px outline/solid icon is
+ * available by name with no per-icon registration and no runtime icon
+ * library. API kept compatible with the old @dimaslz/ng-heroicons wrapper.
+ */
 class HeroIconComponent {
-    stroke = 1.5;
-    icon;
-    solid;
-    outline;
-    size;
-    color;
-    class;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: HeroIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: HeroIconComponent, isStandalone: false, selector: "fx-ui-hero-icon", inputs: { stroke: "stroke", icon: "icon", solid: "solid", outline: "outline", size: "size", color: "color", class: "class" }, ngImport: i0, template: "<ng-heroicons\n  [stroke]=\"stroke\"\n  [icon]=\"icon\"\n  [size]=\"size\"\n  [solid]=\"solid\"\n  [outline]=\"outline\"\n  [color]=\"color\"\n  [class]=\"class\"\n/>\n", styles: [""], dependencies: [{ kind: "component", type: i1.DynamicComponent, selector: "ng-heroicons", inputs: ["icon", "size", "color", "stroke", "outline", "solid", "class", "style"] }] });
+    stroke = input(1.5, ...(ngDevMode ? [{ debugName: "stroke" }] : /* istanbul ignore next */ []));
+    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
+    solid = input(...(ngDevMode ? [undefined, { debugName: "solid" }] : /* istanbul ignore next */ []));
+    outline = input(...(ngDevMode ? [undefined, { debugName: "outline" }] : /* istanbul ignore next */ []));
+    size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
+    color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
+    class = input(...(ngDevMode ? [undefined, { debugName: "class" }] : /* istanbul ignore next */ []));
+    spriteUrl = inject(FX_ICON_SPRITE_URL);
+    constructor() {
+        // One warning per app when the sprite asset was not copied — otherwise
+        // every icon just renders blank and nobody knows why.
+        if (isDevMode() && !spriteChecked && typeof fetch === 'function') {
+            spriteChecked = true;
+            fetch(this.spriteUrl, { method: 'HEAD' })
+                .then((r) => {
+                if (!r.ok)
+                    throw new Error(String(r.status));
+            })
+                .catch(() => console.warn(`[fx-ui-hero-icon] Sprite '${this.spriteUrl}' not found — add the fx-icons.svg ` +
+                `assets glob from @foxeltech/angular-ui to angular.json (see FX_ICON_SPRITE_URL docs).`));
+        }
+    }
+    get href() {
+        const name = this.solid() ? `${this.icon()}-solid` : this.icon();
+        return `${this.spriteUrl}#${name}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: HeroIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.20", type: HeroIconComponent, isStandalone: true, selector: "fx-ui-hero-icon", inputs: { stroke: { classPropertyName: "stroke", publicName: "stroke", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, solid: { classPropertyName: "solid", publicName: "solid", isSignal: true, isRequired: false, transformFunction: null }, outline: { classPropertyName: "outline", publicName: "outline", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<svg\n  [attr.width]=\"size() || 24\"\n  [attr.height]=\"size() || 24\"\n  [attr.stroke-width]=\"solid() ? null : stroke()\"\n  [style.color]=\"color() || null\"\n  [class]=\"class()\"\n  aria-hidden=\"true\"\n>\n  <use [attr.href]=\"href\" />\n</svg>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: HeroIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: HeroIconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fx-ui-hero-icon', standalone: false, template: "<ng-heroicons\n  [stroke]=\"stroke\"\n  [icon]=\"icon\"\n  [size]=\"size\"\n  [solid]=\"solid\"\n  [outline]=\"outline\"\n  [color]=\"color\"\n  [class]=\"class\"\n/>\n" }]
-        }], propDecorators: { stroke: [{
-                type: Input
-            }], icon: [{
-                type: Input
-            }], solid: [{
-                type: Input
-            }], outline: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], class: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'fx-ui-hero-icon', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg\n  [attr.width]=\"size() || 24\"\n  [attr.height]=\"size() || 24\"\n  [attr.stroke-width]=\"solid() ? null : stroke()\"\n  [style.color]=\"color() || null\"\n  [class]=\"class()\"\n  aria-hidden=\"true\"\n>\n  <use [attr.href]=\"href\" />\n</svg>\n" }]
+        }], ctorParameters: () => [], propDecorators: { stroke: [{ type: i0.Input, args: [{ isSignal: true, alias: "stroke", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], solid: [{ type: i0.Input, args: [{ isSignal: true, alias: "solid", required: false }] }], outline: [{ type: i0.Input, args: [{ isSignal: true, alias: "outline", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 class ToastComponent {
-    toastId;
+    toastId = input.required(...(ngDevMode ? [{ debugName: "toastId" }] : /* istanbul ignore next */ []));
     title = '';
-    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  [attr.role]=\"type === 'error' ? 'alert' : 'status'\"\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=\"\" aria-hidden=\"true\">\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"] }] });
+    message = input('', ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+    type = input(...(ngDevMode ? [undefined, { debugName: "type" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: ToastComponent, isStandalone: true, selector: "fx-ui-toast", inputs: { toastId: { classPropertyName: "toastId", publicName: "toastId", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: false, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  animate.enter=\"horizontal-fade-in-animation\"\n  animate.leave=\"horizontal-fade-out-animation\"\n  [attr.role]=\"type() === 'error' ? 'alert' : 'status'\"\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=\"\" aria-hidden=\"true\">\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      @if (title) {\n        <strong class=\"txt-field-label\">{{ title }}</strong>\n      }\n      <p class=\"txt-default\">{{ message() }}</p>\n    </div>\n  </div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: ToastComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ToastComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fx-ui-toast', standalone: false, template: "<div\n  animate.enter=\"horizontal-fade-in-animation\"\n  animate.leave=\"horizontal-fade-out-animation\"\n  [attr.role]=\"type === 'error' ? 'alert' : 'status'\"\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=\"\" aria-hidden=\"true\">\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" }]
-        }], propDecorators: { toastId: [{
-                type: Input
-            }], title: [{
+            args: [{ selector: 'fx-ui-toast', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, HeroIconComponent], template: "<div\n  animate.enter=\"horizontal-fade-in-animation\"\n  animate.leave=\"horizontal-fade-out-animation\"\n  [attr.role]=\"type() === 'error' ? 'alert' : 'status'\"\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=\"\" aria-hidden=\"true\">\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      @if (title) {\n        <strong class=\"txt-field-label\">{{ title }}</strong>\n      }\n      <p class=\"txt-default\">{{ message() }}</p>\n    </div>\n  </div>\n" }]
+        }], propDecorators: { toastId: [{ type: i0.Input, args: [{ isSignal: true, alias: "toastId", required: true }] }], title: [{
                 type: Input
-            }], message: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }] } });
+            }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }] } });
 
 // import { ToastData } from '../../../../public-api';
 class ToastContainerComponent {
@@ -150,12 +133,12 @@ class ToastContainerComponent {
         this.toasts = this.toasts.filter(t => t.id !== id);
         this.ref.detectChanges();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ToastContainerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ToastContainerComponent, isStandalone: false, selector: "fx-ui-toast-container", ngImport: i0, template: "<div\n  class=\"fixed top-5 right-5 flex flex-col items-end gap-3 z-[10000] pointer-events-none\"\n>\n  @for (toast of toasts; track toast) {\n    <fx-ui-toast\n      class=\"pointer-events-auto\"\n      [message]=\"toast.message\"\n      [title]=\"toast.title\"\n      [type]=\"toast.type\"\n    ></fx-ui-toast>\n  }\n</div>", styles: [""], dependencies: [{ kind: "component", type: ToastComponent, selector: "fx-ui-toast", inputs: ["toastId", "title", "message", "type"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ToastContainerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: ToastContainerComponent, isStandalone: true, selector: "fx-ui-toast-container", ngImport: i0, template: "<div\n  class=\"fixed top-5 right-5 flex flex-col items-end gap-3 z-[10000] pointer-events-none\"\n>\n  @for (toast of toasts; track toast) {\n    <fx-ui-toast\n      class=\"pointer-events-auto\"\n      [toastId]=\"toast.id\"\n      [message]=\"toast.message\"\n      [title]=\"toast.title\"\n      [type]=\"toast.type\"\n    ></fx-ui-toast>\n  }\n</div>", styles: [""], dependencies: [{ kind: "component", type: ToastComponent, selector: "fx-ui-toast", inputs: ["toastId", "title", "message", "type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ToastContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ToastContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fx-ui-toast-container', standalone: false, template: "<div\n  class=\"fixed top-5 right-5 flex flex-col items-end gap-3 z-[10000] pointer-events-none\"\n>\n  @for (toast of toasts; track toast) {\n    <fx-ui-toast\n      class=\"pointer-events-auto\"\n      [message]=\"toast.message\"\n      [title]=\"toast.title\"\n      [type]=\"toast.type\"\n    ></fx-ui-toast>\n  }\n</div>" }]
+            args: [{ selector: 'fx-ui-toast-container', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ToastComponent], template: "<div\n  class=\"fixed top-5 right-5 flex flex-col items-end gap-3 z-[10000] pointer-events-none\"\n>\n  @for (toast of toasts; track toast) {\n    <fx-ui-toast\n      class=\"pointer-events-auto\"\n      [toastId]=\"toast.id\"\n      [message]=\"toast.message\"\n      [title]=\"toast.title\"\n      [type]=\"toast.type\"\n    ></fx-ui-toast>\n  }\n</div>" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
 
 class FxToastrService {
@@ -203,10 +186,10 @@ class FxToastrService {
     warning(message, title) {
         this.show(message, 'warning', title);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FxToastrService, deps: [{ token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FxToastrService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: FxToastrService, deps: [{ token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: FxToastrService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FxToastrService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: FxToastrService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -214,6 +197,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
         }], ctorParameters: () => [{ type: i0.ApplicationRef }] });
 
 class FxUtils {
+    /** Dot-path accessor (lodash _.get replacement — supports 'a.b.c'). */
+    static get(obj, path, defaultValue) {
+        if (obj == null)
+            return defaultValue;
+        let cur = obj;
+        for (const key of path.split('.')) {
+            if (cur == null)
+                return defaultValue;
+            cur = cur[key];
+        }
+        return cur === undefined ? defaultValue : cur;
+    }
+    /** Dot-path setter (lodash _.set replacement — creates missing objects). */
+    static set(obj, path, value) {
+        const keys = path.split('.');
+        let cur = obj;
+        for (let i = 0; i < keys.length - 1; i++) {
+            if (cur[keys[i]] == null || typeof cur[keys[i]] !== 'object')
+                cur[keys[i]] = {};
+            cur = cur[keys[i]];
+        }
+        cur[keys[keys.length - 1]] = value;
+        return obj;
+    }
+    /** Structural equality (lodash _.isEqual replacement for plain data). */
+    static deepEqual(a, b) {
+        if (a === b)
+            return true;
+        if (a instanceof Date && b instanceof Date)
+            return a.getTime() === b.getTime();
+        if (a == null || b == null || typeof a !== 'object' || typeof b !== 'object')
+            return false;
+        if (Array.isArray(a) !== Array.isArray(b))
+            return false;
+        const ka = Object.keys(a);
+        const kb = Object.keys(b);
+        if (ka.length !== kb.length)
+            return false;
+        return ka.every((k) => FxUtils.deepEqual(a[k], b[k]));
+    }
+    /** Deep clone for plain data (objects/arrays/Date); functions stay by reference. */
+    static cloneDeep(v) {
+        if (v === null || typeof v !== 'object')
+            return v;
+        if (v instanceof Date)
+            return new Date(v.getTime());
+        if (Array.isArray(v))
+            return v.map((x) => FxUtils.cloneDeep(x));
+        const out = {};
+        for (const k of Object.keys(v))
+            out[k] = FxUtils.cloneDeep(v[k]);
+        return out;
+    }
     static async preresolve(promises, value, key) {
         if (key === 'callback' || key === 'socket' || key === 'listener') {
             promises.push(value);
@@ -254,7 +290,7 @@ class FxUtils {
         const values = await Promise.all(promises);
         const raw = {};
         keys.forEach((key, index) => {
-            _.set(raw, key, values[index]);
+            FxUtils.set(raw, key, values[index]);
         });
         return raw;
     }
@@ -313,13 +349,15 @@ class FxUtils {
         }
     }
     static isSameCollection(collection, compareCollection) {
-        return _.isEmpty(_.xor(collection, compareCollection));
+        const a = new Set(collection ?? []);
+        const b = new Set(compareCollection ?? []);
+        return a.size === b.size && [...a].every((x) => b.has(x));
     }
     static isSameValue(model, compareModel) {
-        return _.isEqual(model, compareModel);
+        return FxUtils.deepEqual(model, compareModel);
     }
     static parseError(err) {
-        const status = _.get(err, 'status');
+        const status = err?.status;
         switch (status) {
             case 401:
                 return 'Session timeout. Please login again.';
@@ -346,13 +384,13 @@ class FxUtils {
             case 504:
                 return 'The server took too long to respond. Please try again later.';
         }
-        const message = this.isStringEmpty(_.get(err, 'error.errors', ''))
-            ? _.get(err, 'error.message', 'Unknown Error')
-            : _.get(err, 'error.errors');
-        if (this.isStringEmpty(_.get(err, 'error.code'))) {
+        const message = this.isStringEmpty(err?.error?.errors ?? '')
+            ? (err?.error?.message ?? 'Unknown Error')
+            : err?.error?.errors;
+        if (this.isStringEmpty(err?.error?.code)) {
             return message;
         }
-        return `${_.get(err, 'error.code')}: ${message}`;
+        return `${err?.error?.code}: ${message}`;
     }
     /**
      * Resolve a theme channel triple (`--danger: 255 122 0`) to a CSS colour.
@@ -418,7 +456,7 @@ class FxUtils {
     }
     /** Safe deep accessor with the org-wide empty placeholder. */
     static value(model, key, defaultValue = '---') {
-        return _.get(model, key, defaultValue);
+        return FxUtils.get(model, key, defaultValue);
     }
     /**
      * Severity weight for ordering — kept next to getTagClass so ordering and
@@ -445,12 +483,16 @@ class FxUtils {
     static formatDateTime(time) {
         if (FxUtils.isNull(time))
             return '';
-        return moment.parseZone(time).local().format('DD/MM/YYYY HH:mm:ss');
+        const d = time instanceof Date ? time : new Date(String(time).replace(' ', 'T'));
+        if (isNaN(d.getTime()))
+            return '';
+        const p = (n) => String(n).padStart(2, '0');
+        return `${p(d.getDate())}/${p(d.getMonth() + 1)}/${d.getFullYear()} ${p(d.getHours())}:${p(d.getMinutes())}:${p(d.getSeconds())}`;
     }
     /** Seconds → compact duration ("2d 4h", "3h 12m", "45s"). */
     static formatDuration(totalSeconds) {
         const sec = Number(totalSeconds);
-        if (!_.isFinite(sec) || sec < 0)
+        if (!Number.isFinite(sec) || sec < 0)
             return '';
         const d = Math.floor(sec / 86400);
         const h = Math.floor((sec % 86400) / 3600);
@@ -468,8 +510,20 @@ class FxUtils {
     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');
+        const d = time instanceof Date ? time : new Date(String(time).replace(' ', 'T'));
+        if (isNaN(d.getTime()))
+            return '';
+        const diffMs = Date.now() - d.getTime();
+        if (diffMs < 24 * 3600_000) {
+            // Same wording moment.fromNow() produced for the < 24h range.
+            const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });
+            const mins = Math.round(diffMs / 60_000);
+            if (Math.abs(mins) < 60)
+                return rtf.format(-mins, 'minute');
+            return rtf.format(-Math.round(mins / 60), 'hour');
+        }
+        const p = (n) => String(n).padStart(2, '0');
+        return `${p(d.getDate())}/${p(d.getMonth() + 1)}/${d.getFullYear()}`;
     }
     /**
      * Normalize a snake_case + protobuf-Long API payload for camelCase binding:
@@ -493,7 +547,7 @@ class FxUtils {
             }
             const out = {};
             for (const k of keys) {
-                const nk = /^[a-z][a-z0-9]*(_[a-z0-9]+)+$/.test(k) ? _.camelCase(k) : k;
+                const nk = /^[a-z][a-z0-9]*(_[a-z0-9]+)+$/.test(k) ? k.replace(/_([a-z0-9])/g, (_m, c) => c.toUpperCase()) : k;
                 out[nk] = FxUtils.camelizeDeep(input[k]);
             }
             return out;
@@ -629,7 +683,7 @@ class BaseTableComponent extends BaseComponent {
     dataSourcePlaceholder;
     config;
     paginator;
-    table;
+    table = viewChild.required(MatTable);
     constructor(injector, api, modal, ref) {
         super(injector);
         this.api = api;
@@ -675,8 +729,8 @@ class BaseTableComponent extends BaseComponent {
     listKey = 'data';
     totalKey = 'total';
     setDataSource(result) {
-        this.dataSource.data = _.get(result, this.listKey);
-        this.total = _.get(result, this.totalKey);
+        this.dataSource.data = FxUtils.get(result, this.listKey);
+        this.total = FxUtils.get(result, this.totalKey);
     }
     _fetchSeq = 0;
     async fetch() {
@@ -723,10 +777,10 @@ class BaseTableComponent extends BaseComponent {
         this.keywordChange$.next(keyword);
     }
     async create() {
-        const conf = _.get(this.config, 'create');
-        const dialog = _.get(conf, 'dialog');
-        const size = _.get(conf, 'size');
-        if (_.isNil(conf) || _.isNil(dialog)) {
+        const conf = this.config?.create;
+        const dialog = conf?.dialog;
+        const size = conf?.size;
+        if (conf == null || dialog == null) {
             return;
         }
         if (this._lock) {
@@ -758,10 +812,10 @@ class BaseTableComponent extends BaseComponent {
         });
     }
     async update(model) {
-        const conf = _.get(this.config, 'update');
-        const dialog = _.get(conf, 'dialog');
-        const size = _.get(conf, 'size');
-        if (_.isNil(dialog) || _.isNil(conf)) {
+        const conf = this.config?.update;
+        const dialog = conf?.dialog;
+        const size = conf?.size;
+        if (dialog == null || conf == null) {
             return;
         }
         if (this._lock) {
@@ -793,10 +847,10 @@ class BaseTableComponent extends BaseComponent {
         });
     }
     async view(model) {
-        const conf = _.get(this.config, 'view');
-        const dialog = _.get(conf, 'dialog');
-        const size = _.get(conf, 'size');
-        if (_.isNil(dialog) || _.isNil(conf)) {
+        const conf = this.config?.view;
+        const dialog = conf?.dialog;
+        const size = conf?.size;
+        if (dialog == null || conf == null) {
             return;
         }
         if (this._lock) {
@@ -826,9 +880,9 @@ class BaseTableComponent extends BaseComponent {
         });
     }
     async delete(model) {
-        const conf = _.get(this.config, 'delete');
-        const dialog = _.get(conf, 'dialog');
-        if (_.isNil(conf) || _.isNil(dialog)) {
+        const conf = this.config?.delete;
+        const dialog = conf?.dialog;
+        if (conf == null || dialog == null) {
             return;
         }
         if (this._lock) {
@@ -841,10 +895,10 @@ class BaseTableComponent extends BaseComponent {
                 autoFocus: 'first-tabbable',
                 width: '400px',
                 data: {
-                    title: _.get(conf, 'title'),
-                    message: _.get(conf, 'message'),
-                    cancelLabel: _.get(conf, 'cancelTitle'),
-                    confirmLabel: _.get(conf, 'confirmTitle'),
+                    title: conf?.title,
+                    message: conf?.message,
+                    cancelLabel: conf?.cancelTitle,
+                    confirmLabel: conf?.confirmTitle,
                     callback: async () => {
                         await this.remove(model);
                     },
@@ -876,10 +930,10 @@ class BaseTableComponent extends BaseComponent {
         return FxUtils.getTagClass(tag, true);
     }
     capitalize(label) {
-        return _.capitalize(label);
+        return label ? label.charAt(0).toUpperCase() + label.slice(1).toLowerCase() : label;
     }
     value(model, key, defaultValue = '---') {
-        return _.get(model, key, defaultValue);
+        return FxUtils.get(model, key, defaultValue);
     }
     toggleExpand(element) {
         this.expandedElement = this.expandedElement === element ? null : element;
@@ -887,7 +941,7 @@ class BaseTableComponent extends BaseComponent {
     async updateStatus(params) {
         try {
             await this.api.updateStatus(params);
-            this.toastr.success(_.get(this.config, 'updateStatus.message', 'Update Success'));
+            this.toastr.success(this.config?.updateStatus?.message ?? 'Update Success');
         }
         catch (err) {
             this.toastr.error(FxUtils.parseError(err));
@@ -896,18 +950,15 @@ class BaseTableComponent extends BaseComponent {
             await this.refresh();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: BaseTableComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.4", type: BaseTableComponent, isStandalone: true, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "table", first: true, predicate: MatTable, descendants: true }], usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: BaseTableComponent, deps: [{ token: i0.Injector }, { token: HttpWrapper }, { token: i1.MatDialog }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.20", type: BaseTableComponent, isStandalone: true, viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true, isSignal: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: BaseTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: BaseTableComponent, decorators: [{
             type: Directive
-        }], ctorParameters: () => [{ type: i0.Injector }, { type: HttpWrapper }, { type: undefined }, { type: i0.ChangeDetectorRef }], propDecorators: { paginator: [{
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: HttpWrapper }, { type: i1.MatDialog }, { type: i0.ChangeDetectorRef }], propDecorators: { paginator: [{
                 type: ViewChild,
                 args: [MatPaginator]
-            }], table: [{
-                type: ViewChild,
-                args: [MatTable]
-            }] } });
+            }], table: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatTable), { isSignal: true }] }] } });
 
 /**
  * List + detail-pane counterpart of BaseTableComponent: the page keeps a
@@ -989,12 +1040,12 @@ class BaseMasterDetailComponent extends BaseTableComponent {
             this.ref.detectChanges();
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: BaseMasterDetailComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.4", type: BaseMasterDetailComponent, isStandalone: true, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: BaseMasterDetailComponent, deps: [{ token: i0.Injector }, { token: HttpWrapper }, { token: i1.MatDialog }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.20", type: BaseMasterDetailComponent, isStandalone: true, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: BaseMasterDetailComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: BaseMasterDetailComponent, decorators: [{
             type: Directive
-        }], ctorParameters: () => [{ type: i0.Injector }, { type: HttpWrapper }, { type: undefined }, { type: i0.ChangeDetectorRef }] });
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: HttpWrapper }, { type: i1.MatDialog }, { type: i0.ChangeDetectorRef }] });
 
 class BaseDialogComponent extends BaseComponent {
     ref;
@@ -1002,7 +1053,7 @@ class BaseDialogComponent extends BaseComponent {
     toastr;
     api;
     dialog;
-    ngForm;
+    ngForm = viewChild('f', ...(ngDevMode ? [{ debugName: "ngForm" }] : /* istanbul ignore next */ []));
     method;
     title;
     model;
@@ -1021,12 +1072,12 @@ class BaseDialogComponent extends BaseComponent {
         this.dialog = dialog;
         // 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');
+        this.model = FxUtils.cloneDeep(bindings?.['data']);
+        this.method = bindings?.['method'];
+        this.title = bindings?.['title'];
+        this.disabled = bindings?.['disabled'];
+        this.message = bindings?.['message'];
+        this.resolve = 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() { }
@@ -1108,18 +1159,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$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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: BaseDialogComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: FxToastrService }, { token: HttpWrapper }, { token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.20", type: BaseDialogComponent, isStandalone: true, viewQueries: [{ propertyName: "ngForm", first: true, predicate: ["f"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: BaseDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: BaseDialogComponent, decorators: [{
             type: Directive
-        }], ctorParameters: () => [{ type: i1$2.MatDialogRef }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
-                }] }, { type: FxToastrService }, { type: HttpWrapper }, { type: i1$2.MatDialog }], propDecorators: { ngForm: [{
-                type: ViewChild,
-                args: ['f', { static: true }]
-            }] } });
+                }] }, { type: FxToastrService }, { type: HttpWrapper }, { type: i1.MatDialog }], propDecorators: { ngForm: [{ type: i0.ViewChild, args: ['f', { isSignal: true }] }] } });
 
 class FxLoadingService {
     listener = new EventEmitter();
@@ -1136,10 +1184,10 @@ class FxLoadingService {
     stopAction() {
         this.listenerAction.emit(false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FxLoadingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FxLoadingService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: FxLoadingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: FxLoadingService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FxLoadingService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: FxLoadingService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1169,10 +1217,10 @@ class FxStorageService {
     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' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: FxStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: FxStorageService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FxStorageService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: FxStorageService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1401,7 +1449,7 @@ const TONE_BADGE = {
     information: 'bg-information/10 text-information',
 };
 function hasVal(v) {
-    if (_.isNil(v))
+    if (v == null)
         return false;
     const s = String(v).trim();
     return s !== '' && s !== '-' && s !== '--';
@@ -1420,7 +1468,7 @@ function severityTone(value) {
  */
 function scoreTone(score) {
     let n = Number(score);
-    if (!_.isFinite(n) || n <= 0)
+    if (!Number.isFinite(n) || n <= 0)
         return null;
     if (n > 10)
         n = n / 10;
@@ -1440,7 +1488,7 @@ function scoreTone(score) {
  */
 function countTone(count, positiveTone = 'danger') {
     const n = Number(count);
-    if (!_.isFinite(n))
+    if (!Number.isFinite(n))
         return null;
     return n > 0 ? positiveTone : 'success';
 }
@@ -1604,11 +1652,11 @@ class TranslationModule {
             providers: []
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TranslationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: TranslationModule, imports: [TranslateModule], exports: [TranslateModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TranslationModule, imports: [TranslateModule, TranslateModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TranslationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.20", ngImport: i0, type: TranslationModule, imports: [TranslateModule], exports: [TranslateModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TranslationModule, imports: [TranslateModule, TranslateModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TranslationModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TranslationModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [TranslateModule],
@@ -1652,13 +1700,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$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' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TranslationService, deps: [{ token: i1$1.TranslateService }, { token: i2.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TranslationService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TranslationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TranslationService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1$3.TranslateService }, { type: i2.HttpClient }] });
+        }], ctorParameters: () => [{ type: i1$1.TranslateService }, { type: i2.HttpClient }] });
 
 class PermissionService {
     permissions = [];
@@ -1666,15 +1714,15 @@ class PermissionService {
         this.permissions = perms;
     }
     hasPermission(requiredPermissions) {
-        return _.some(requiredPermissions, permission => this.permissions.includes(permission));
+        return requiredPermissions.some((permission) => this.permissions.includes(permission));
     }
     getPermissions() {
         return [...this.permissions];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PermissionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PermissionService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: PermissionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: PermissionService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PermissionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: PermissionService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1691,16 +1739,16 @@ class HasPermissionDirective {
         this.permissionService = permissionService;
     }
     set hasPermission(required) {
-        const requiredPermissions = _.isArray(required) ? required : [required];
+        const requiredPermissions = Array.isArray(required) ? required : [required];
         this.viewContainerRef.clear();
         if (this.permissionService.hasPermission(requiredPermissions)) {
             this.viewContainerRef.createEmbeddedView(this.templateRef);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: HasPermissionDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: PermissionService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.4", type: HasPermissionDirective, isStandalone: true, selector: "[hasPermission]", inputs: { hasPermission: "hasPermission" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: HasPermissionDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: PermissionService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.20", type: HasPermissionDirective, isStandalone: true, selector: "[hasPermission]", inputs: { hasPermission: "hasPermission" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: HasPermissionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", 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
@@ -1712,18 +1760,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
 
 class TrimOnBlurDirective {
     el;
-    ngControl;
-    collapseWhitespace = false;
-    constructor(el, ngControl) {
+    collapseWhitespace = input(false, { ...(ngDevMode ? { debugName: "collapseWhitespace" } : /* istanbul ignore next */ {}), alias: "appTrimOnBlurCollapse" });
+    /* Optional on purpose: the onBlur fallback below already handles the
+     * no-form case, but the injection was required and crashed any unbound
+     * input once the directive actually entered the compilation scope. */
+    ngControl = inject(NgControl, { optional: true });
+    constructor(el) {
         this.el = el;
-        this.ngControl = ngControl;
     }
     onBlur() {
         const native = this.el.nativeElement;
         if (!native)
             return;
         let value = native.value ?? '';
-        if (this.collapseWhitespace) {
+        if (this.collapseWhitespace()) {
             value = value.replace(/\s+/g, ' ').trim();
         }
         else {
@@ -1740,19 +1790,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: 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TrimOnBlurDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.20", type: TrimOnBlurDirective, isStandalone: true, selector: "[appTrimOnBlur]", inputs: { collapseWhitespace: { classPropertyName: "collapseWhitespace", publicName: "appTrimOnBlurCollapse", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "blur": "onBlur()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TrimOnBlurDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", 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: i2$1.NgControl }], propDecorators: { collapseWhitespace: [{
-                type: Input,
-                args: ['appTrimOnBlurCollapse']
-            }], onBlur: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { collapseWhitespace: [{ type: i0.Input, args: [{ isSignal: true, alias: "appTrimOnBlurCollapse", required: false }] }], onBlur: [{
                 type: HostListener,
                 args: ['blur']
             }] } });
@@ -1772,15 +1819,15 @@ class PermissionGuard {
         this.router.navigate(['/unauthorized']);
         return false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PermissionGuard, deps: [{ token: PermissionService }, { token: i1$4.Router }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PermissionGuard, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: PermissionGuard, deps: [{ token: PermissionService }, { token: i2$1.Router }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: PermissionGuard, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PermissionGuard, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: PermissionGuard, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: PermissionService }, { type: i1$4.Router }] });
+        }], ctorParameters: () => [{ type: PermissionService }, { type: i2$1.Router }] });
 
 class AuthStateService {
     _isLoggedIn$ = new BehaviorSubject(null);
@@ -1797,10 +1844,10 @@ class AuthStateService {
         this.setLoggedIn(false);
         this.unauthorized$.next();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AuthStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AuthStateService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: AuthStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: AuthStateService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AuthStateService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: AuthStateService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -1830,10 +1877,10 @@ class AuthInterceptor {
             return throwError(() => error);
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AuthInterceptor, deps: [{ token: AuthStateService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AuthInterceptor });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: AuthInterceptor, deps: [{ token: AuthStateService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: AuthInterceptor });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AuthInterceptor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: AuthInterceptor, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: AuthStateService }] });
 
@@ -1848,81 +1895,16 @@ class BreadcrumbService {
     clear() {
         this.breadcrumbs$.next([]);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: BreadcrumbService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: BreadcrumbService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: BreadcrumbService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: BreadcrumbService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: BreadcrumbService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: BreadcrumbService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
         }] });
 
-class QuillStyleLoaderService {
-    platformId;
-    loaded = false;
-    loadingPromise = null;
-    constructor(platformId) {
-        this.platformId = platformId;
-    }
-    /**
-     * Load Quill CSS (only in browser). Returns a promise that resolves when
-     * the CSS links have been appended.
-     */
-    load() {
-        if (!isPlatformBrowser(this.platformId)) {
-            // Server: do nothing and resolve immediately.
-            return Promise.resolve();
-        }
-        if (this.loaded)
-            return Promise.resolve();
-        if (this.loadingPromise)
-            return this.loadingPromise;
-        this.loadingPromise = new Promise((resolve) => {
-            const cssUrls = [
-                // Using CDN is simplest — no consumer angular.json edits needed.
-                'https://cdn.jsdelivr.net/npm/quill/dist/quill.core.css',
-                'https://cdn.jsdelivr.net/npm/quill/dist/quill.snow.css'
-            ];
-            let remaining = cssUrls.length;
-            const onLoad = () => {
-                remaining -= 1;
-                if (remaining === 0) {
-                    this.loaded = true;
-                    resolve();
-                }
-            };
-            cssUrls.forEach((href) => {
-                // Do not add duplicate links
-                if (document.querySelector(`link[href="${href}"]`)) {
-                    onLoad();
-                    return;
-                }
-                const link = document.createElement('link');
-                link.rel = 'stylesheet';
-                link.href = href;
-                link.onload = () => onLoad();
-                link.onerror = () => {
-                    // still count it as loaded to avoid hanging if CDN fails
-                    console.warn(`[QuillStyleLoader] failed to load: ${href}`);
-                    onLoad();
-                };
-                document.head.appendChild(link);
-            });
-        });
-        return this.loadingPromise;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: QuillStyleLoaderService, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: QuillStyleLoaderService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: QuillStyleLoaderService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [PLATFORM_ID]
-                }] }] });
-
 class ThemeService {
     renderer;
     lightClass = 'light_theme';
@@ -1967,10 +1949,10 @@ class ThemeService {
     getLogoPath() {
         return 'assets/images/logo.png';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ThemeService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ThemeService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ThemeService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ThemeService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ThemeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ThemeService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i0.RendererFactory2 }] });
@@ -2192,482 +2174,115 @@ class NotificationService {
     getConnectionId() {
         return this.hubConnection?.connectionId ?? null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: NotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: NotificationService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: NotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: NotificationService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: NotificationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: NotificationService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
         }] });
 
-const MATERIAL_MODULE = [
-    MatSelectModule,
-    MatRadioModule,
-    MatButtonModule,
-    MatIconModule,
-    MatPaginatorModule,
-    MatTableModule,
-    MatSnackBarModule,
-    MatDialogModule,
-    MatCheckboxModule,
-    MatCardModule,
-    MatDatepickerModule,
-    MatTimepickerModule,
-    MatBadgeModule,
-    MatExpansionModule,
-    MatFormFieldModule,
-    MatMenuModule,
-    MatTooltipModule,
-    DragDropModule,
-];
-
 class ButtonComponent {
     label;
-    disabled = false;
-    buttonVariant = 'alternative';
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    buttonVariant = input('alternative', ...(ngDevMode ? [{ debugName: "buttonVariant" }] : /* istanbul ignore next */ []));
     icon;
-    class;
-    loading = false;
+    class = input(...(ngDevMode ? [undefined, { debugName: "class" }] : /* istanbul ignore next */ []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
     /** Native button type. Defaults to 'button' so it never implicitly submits a form. */
-    type = 'button';
+    type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
     /** Accessible name for icon-only usage (icon set, no label). */
-    ariaLabel = '';
-    clicked = new EventEmitter();
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    clicked = output();
     onClick() {
-        if (!this.disabled)
+        if (!this.disabled())
             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", type: "type", ariaLabel: "ariaLabel" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n  [attr.type]=\"type\"\n  [attr.aria-label]=\"ariaLabel || null\"\n  [attr.aria-busy]=\"loading || null\"\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\" aria-hidden=\"true\">\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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: ButtonComponent, isStandalone: true, selector: "fx-ui-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, buttonVariant: { classPropertyName: "buttonVariant", publicName: "buttonVariant", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n  [attr.type]=\"type()\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  [attr.aria-busy]=\"loading() || null\"\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\" aria-hidden=\"true\">\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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: ButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fx-ui-button', standalone: false, template: "<button\n  [attr.type]=\"type\"\n  [attr.aria-label]=\"ariaLabel || null\"\n  [attr.aria-busy]=\"loading || null\"\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\" aria-hidden=\"true\">\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" }]
+            args: [{ selector: 'fx-ui-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, HeroIconComponent], template: "<button\n  [attr.type]=\"type()\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  [attr.aria-busy]=\"loading() || null\"\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\" aria-hidden=\"true\">\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" }]
         }], propDecorators: { label: [{
                 type: Input
-            }], disabled: [{
-                type: Input
-            }], buttonVariant: [{
-                type: Input
-            }], icon: [{
-                type: Input
-            }], class: [{
-                type: Input
-            }], loading: [{
-                type: Input
-            }], type: [{
+            }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], buttonVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonVariant", required: false }] }], icon: [{
                 type: Input
-            }], ariaLabel: [{
-                type: Input
-            }], clicked: [{
-                type: Output
-            }] } });
+            }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
 
-class ChartComponent {
+class ConfirmationDialogComponent {
     ref;
-    cdr;
-    /* ================= INPUTS ================= */
-    type = 'auto';
-    data;
-    options;
-    palette;
-    height = '400px';
+    bindings;
     loading = false;
-    // pie controls
-    pieLegendAlign = '10%';
-    pieLegendPosition = 'middle';
-    showPieLabel = true;
-    mobileWidth = 350;
-    labelFontFamily = 'Roboto';
-    emptyText = 'No data available';
-    /* ================= OUTPUTS ================= */
-    chartClick = new EventEmitter();
-    chartInit = new EventEmitter();
-    /* ================= INTERNAL ================= */
-    chartOptions = {};
-    isEmpty = false;
-    labelFontSize = 12;
-    chartInstance;
-    resizeObserver;
-    intersectionObserver;
-    canInit = false;
-    isMobile = false;
-    containerWidth = 0;
-    constructor(ref, cdr) {
+    title = '';
+    message = '';
+    cancelLabel = 'Cancel';
+    confirmLabel = 'Submit';
+    constructor(ref, bindings) {
         this.ref = ref;
-        this.cdr = cdr;
-    }
-    /* ================= LIFECYCLE ================= */
-    ngAfterViewInit() {
-        // Only initialize when visible (tab-safe)
-        this.intersectionObserver = new IntersectionObserver(([entry]) => {
-            if (entry.isIntersecting && !this.canInit) {
-                this.canInit = true;
-                this.updateResponsiveState();
-                this.rebuildChart();
-                this.cdr.detectChanges();
-            }
-        }, { threshold: 0.1 });
-        this.intersectionObserver.observe(this.ref.nativeElement);
-        // Resize-safe (tabs, flex, async layout)
-        this.resizeObserver = new ResizeObserver(() => {
-            if (!this.canInit)
-                return;
-            this.updateResponsiveState();
-            this.forceMediaRecalc();
-        });
-        this.resizeObserver.observe(this.ref.nativeElement);
-    }
-    ngOnChanges() {
-        if (this.canInit) {
-            this.updateResponsiveState();
-            this.rebuildChart();
-        }
-    }
-    ngOnDestroy() {
-        this.resizeObserver?.disconnect();
-        this.intersectionObserver?.disconnect();
-    }
-    onThemeChange() {
-        if (!this.canInit)
-            return;
-        requestAnimationFrame(() => this.rebuildChart());
-    }
-    /* ================= EVENTS ================= */
-    onChartClick(event) {
-        this.chartClick.emit(event);
-    }
-    onChartInit(chart) {
-        this.chartInstance = chart;
-        this.chartInit.emit(chart);
-        requestAnimationFrame(() => this.forceMediaRecalc());
-    }
-    /* ================= CORE FIX ================= */
-    updateResponsiveState() {
-        const { width } = this.ref.nativeElement.getBoundingClientRect();
-        if (width > 0) {
-            this.containerWidth = width;
-            this.isMobile = width < this.mobileWidth;
-        }
-    }
-    forceMediaRecalc(retry = 0) {
-        if (!this.chartInstance)
-            return;
-        const { width, height } = this.ref.nativeElement.getBoundingClientRect();
-        if ((width === 0 || height === 0) && retry < 10) {
-            requestAnimationFrame(() => this.forceMediaRecalc(retry + 1));
-            return;
-        }
-        this.rebuildChart();
-        this.chartInstance.resize();
-    }
-    rebuildChart() {
-        this.isEmpty = this.checkEmpty();
-        if (this.isEmpty) {
-            if (this.chartInstance) {
-                this.chartInstance.clear();
-            }
-            return;
-        }
-        this.chartOptions = this.buildOptions();
-        if (this.chartInstance) {
-            this.chartInstance.clear();
-            this.chartInstance.setOption(this.chartOptions, true);
-        }
-    }
-    checkEmpty() {
-        const type = this.detectType();
-        if (type === 'bar') {
-            const categories = this.data?.categories;
-            const values = this.data?.values;
-            return !categories?.length || !values?.length;
-        }
-        if (type === 'pie') {
-            if (!Array.isArray(this.data) || this.data.length === 0)
-                return true;
-            const total = this.data.reduce((sum, d) => sum + (d.value || 0), 0);
-            return total === 0;
-        }
-        return false;
+        this.bindings = bindings;
+        this.title = bindings?.['title'];
+        this.message = bindings?.['message'];
+        this.cancelLabel = bindings?.['cancelLabel'];
+        this.confirmLabel = bindings?.['confirmLabel'];
     }
-    /* ================= REGISTRY ================= */
-    registry = {
-        bar: (data, colors) => ({
-            color: colors,
-            tooltip: { trigger: 'axis' },
-            grid: { left: '5%', right: '5%', bottom: '10%', containLabel: true },
-            xAxis: {
-                type: 'category',
-                data: data?.categories || [],
-                axisLabel: {
-                    interval: 0,
-                    width: 80,
-                    overflow: 'truncate',
-                    ellipsis: '…',
-                    fontFamily: this.labelFontFamily,
-                    fontSize: this.labelFontSize,
-                    color: FxUtils.convertColorFromVariable('--text-secondary'),
-                },
-                axisLine: {
-                    lineStyle: {
-                        color: FxUtils.convertColorFromVariable('--border-strong'),
-                    },
-                },
-            },
-            yAxis: {
-                type: 'value',
-                axisLabel: {
-                    fontFamily: this.labelFontFamily,
-                    fontSize: this.labelFontSize,
-                    color: FxUtils.convertColorFromVariable('--text-secondary'),
-                },
-                axisLine: {
-                    lineStyle: {
-                        color: FxUtils.convertColorFromVariable('--border-strong'),
-                    },
-                },
-                splitLine: {
-                    lineStyle: {
-                        color: FxUtils.convertColorFromVariable('--border-default'),
-                    },
-                },
-            },
-            series: [
-                {
-                    type: 'bar',
-                    data: data?.values || [],
-                    barMaxWidth: 70,
-                    itemStyle: {
-                        color: (p) => colors[p.dataIndex % colors.length],
-                    },
-                    label: {
-                        show: true,
-                        position: 'top',
-                        fontFamily: this.labelFontFamily,
-                        fontSize: this.labelFontSize,
-                        color: FxUtils.convertColorFromVariable('--text-primary'),
-                    },
-                },
-            ],
-        }),
-        pie: (data, colors) => {
-            const total = data.reduce((sum, d) => sum + d.value, 0);
-            const layout = this.calcPieLayout(data);
-            return {
-                color: colors,
-                tooltip: { trigger: 'item' },
-                legend: {
-                    type: 'scroll',
-                    orient: layout.legendOrient,
-                    icon: 'circle',
-                    itemGap: 12,
-                    right: layout.legendRight,
-                    top: layout.legendTop,
-                    left: layout.legendLeft,
-                    bottom: layout.legendBottom,
-                    width: layout.legendWidth,
-                    formatter: (name) => {
-                        const item = data.find((d) => d.name === name);
-                        return item ? `${name}: ${item.value}` : name;
-                    },
-                    textStyle: {
-                        fontFamily: this.labelFontFamily,
-                        fontSize: 13,
-                        fontWeight: 500,
-                        color: FxUtils.convertColorFromVariable('--text-primary'),
-                        overflow: 'truncate',
-                    },
-                },
-                series: [
-                    {
-                        type: 'pie',
-                        radius: ['40%', '70%'],
-                        center: layout.pieCenter,
-                        data,
-                        label: {
-                            show: this.showPieLabel,
-                            position: 'outside',
-                            formatter: '{d}%',
-                            fontSize: this.labelFontSize,
-                            fontFamily: this.labelFontFamily,
-                            color: FxUtils.convertColorFromVariable('--text-primary'),
-                            textBorderWidth: 0,
-                            textBorderColor: 'transparent',
-                        },
-                        labelLine: {
-                            show: this.showPieLabel,
-                            length: 7,
-                            length2: 7,
-                        },
-                    },
-                ],
-                graphic: {
-                    type: 'group',
-                    left: layout.graphicLeft,
-                    top: layout.graphicTop,
-                    bounding: 'raw',
-                    children: [
-                        {
-                            type: 'text',
-                            style: {
-                                text: total.toString(),
-                                fontSize: 24,
-                                fontWeight: 600,
-                                fontFamily: this.labelFontFamily,
-                                fill: FxUtils.convertColorFromVariable('--text-primary'),
-                                align: 'center',
-                                verticalAlign: 'middle',
-                            },
-                        },
-                    ],
-                },
-            };
-        },
-        sunburst: (data, colors) => ({
-            color: colors,
-            series: [
-                {
-                    type: 'sunburst',
-                    data,
-                    radius: ['15%', '90%'],
-                    itemStyle: {
-                        borderWidth: 1,
-                        borderColor: FxUtils.convertColorFromVariable('--border-default'),
-                    },
-                    label: {
-                        rotate: 'tangential',
-                        fontSize: this.labelFontSize,
-                        fontFamily: this.labelFontFamily,
-                        color: FxUtils.convertColorFromVariable('--text-primary'),
-                        textBorderWidth: 0,
-                        textBorderColor: 'transparent',
-                    },
-                },
-            ],
-        }),
-    };
-    /* ================= PIE LAYOUT ================= */
-    calcPieLayout(data) {
-        const cw = this.containerWidth || 400;
-        if (this.isMobile) {
-            return {
-                legendOrient: 'horizontal',
-                legendLeft: 'center',
-                legendRight: undefined,
-                legendTop: undefined,
-                legendBottom: 0,
-                legendWidth: undefined,
-                pieCenter: ['50%', '40%'],
-                graphicLeft: '50%',
-                graphicTop: '40%',
-            };
+    async accept() {
+        this.loading = true;
+        if (this.bindings?.['callback']) {
+            await this.bindings.callback();
+            this.loading = false;
         }
-        // Estimate legend pixel width from longest formatted label
-        const CHAR_WIDTH = 7.5; // approx px per char at fontSize 13
-        const ICON_GAP = 30; // legend icon + padding
-        const longestLabel = data.reduce((max, d) => {
-            return Math.max(max, `${d.name}: ${d.value}`.length);
-        }, 0);
-        const rawLegendPx = longestLabel * CHAR_WIDTH + ICON_GAP;
-        // Clamp: min 100px, max 45% of container
-        const legendPx = Math.max(100, Math.min(rawLegendPx, cw * 0.45));
-        const legendPct = (legendPx / cw) * 100;
-        // Pie center: middle of the remaining space after legend
-        const pieCenterX = Math.round((100 - legendPct) / 2);
-        return {
-            legendOrient: 'vertical',
-            legendLeft: undefined,
-            legendRight: '2%',
-            legendTop: 'middle',
-            legendBottom: undefined,
-            legendWidth: Math.round(legendPx),
-            pieCenter: [`${pieCenterX}%`, '50%'],
-            graphicLeft: `${pieCenterX}%`,
-            graphicTop: '50%',
-        };
-    }
-    /* ================= BUILD ================= */
-    detectType() {
-        if (this.type !== 'auto')
-            return this.type;
-        if (this.data?.children)
-            return 'sunburst';
-        if (this.data?.categories && this.data?.values)
-            return 'bar';
-        if (Array.isArray(this.data))
-            return 'pie';
-        return 'bar';
-    }
-    buildOptions() {
-        const type = this.detectType();
-        const palette = this.resolvePalette();
-        const base = this.registry[type]?.(this.data, palette) || {};
-        return {
-            ...base,
-            ...this.options,
-        };
+        this.ref.close(true);
     }
-    resolvePalette() {
-        const defaults = [
-            'rgba(var(--success) / 1)',
-            'rgba(var(--information) / 1)',
-            'rgba(var(--critical) / 1)',
-            'rgba(var(--danger) / 1)',
-            'rgba(var(--warning) / 1)',
-            'rgba(var(--discovery) / 1)',
-        ];
-        const palette = this.palette?.length ? this.palette : defaults;
-        return palette.map((raw) => {
-            if (!raw.includes('var('))
-                return raw;
-            const cssVar = raw.match(/var\((.*?)\)/)?.[1];
-            const rgb = getComputedStyle(document.body)
-                .getPropertyValue(cssVar || '')
-                .trim()
-                .replace(/\s+/g, ',');
-            return `rgba(${rgb},1)`;
-        });
+    cancel() {
+        this.ref.close(false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ChartComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ChartComponent, isStandalone: false, selector: "fx-ui-chart", inputs: { type: "type", data: "data", options: "options", palette: "palette", height: "height", loading: "loading", pieLegendAlign: "pieLegendAlign", pieLegendPosition: "pieLegendPosition", showPieLabel: "showPieLabel", mobileWidth: "mobileWidth", labelFontFamily: "labelFontFamily", emptyText: "emptyText" }, outputs: { chartClick: "chartClick", chartInit: "chartInit" }, host: { listeners: { "window:theme-changed": "onThemeChange()" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"chart-wrapper\" [style.height]=\"height\">\n  @if (isEmpty) {\n    <div class=\"chart-empty\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"chart-empty-icon\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z\" />\n      </svg>\n      <span class=\"chart-empty-text\">{{ emptyText }}</span>\n    </div>\n  } @else {\n    <div\n      echarts\n      [options]=\"chartOptions\"\n      [loading]=\"loading\"\n      (chartInit)=\"onChartInit($event)\"\n      (chartClick)=\"onChartClick($event)\"\n      class=\"fx-chart\"\n      [style.height]=\"height\"\n    ></div>\n  }\n</div>\n", styles: [":host{display:block;width:100%}.chart-wrapper{position:relative;width:100%;height:100%}.chart-container{width:100%;height:100%}.chart-loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(var(--bg-primary-hover)/.6);font-weight:500;font-size:1.1rem;z-index:2;border-radius:4px}.chart-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:12px;color:rgba(var(--text-secondary)/1)}.chart-empty-icon{width:48px;height:48px;opacity:.4}.chart-empty-text{font-size:14px;font-weight:500}\n"], dependencies: [{ kind: "directive", type: i1$5.NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ConfirmationDialogComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.20", type: ConfirmationDialogComponent, isStandalone: true, selector: "fx-ui-confirmation-dialog", ngImport: i0, template: "<div animate.enter=\"fade-in-animation\" class=\"dialog-container\">\n  <h1 mat-dialog-title 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: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: ButtonComponent, selector: "fx-ui-button", inputs: ["label", "disabled", "buttonVariant", "icon", "class", "loading", "type", "ariaLabel"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fx-ui-chart', standalone: false, template: "<div class=\"chart-wrapper\" [style.height]=\"height\">\n  @if (isEmpty) {\n    <div class=\"chart-empty\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"chart-empty-icon\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z\" />\n      </svg>\n      <span class=\"chart-empty-text\">{{ emptyText }}</span>\n    </div>\n  } @else {\n    <div\n      echarts\n      [options]=\"chartOptions\"\n      [loading]=\"loading\"\n      (chartInit)=\"onChartInit($event)\"\n      (chartClick)=\"onChartClick($event)\"\n      class=\"fx-chart\"\n      [style.height]=\"height\"\n    ></div>\n  }\n</div>\n", styles: [":host{display:block;width:100%}.chart-wrapper{position:relative;width:100%;height:100%}.chart-container{width:100%;height:100%}.chart-loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(var(--bg-primary-hover)/.6);font-weight:500;font-size:1.1rem;z-index:2;border-radius:4px}.chart-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:12px;color:rgba(var(--text-secondary)/1)}.chart-empty-icon{width:48px;height:48px;opacity:.4}.chart-empty-text{font-size:14px;font-weight:500}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { type: [{
-                type: Input
-            }], data: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }], palette: [{
-                type: Input
-            }], height: [{
-                type: Input
-            }], loading: [{
-                type: Input
-            }], pieLegendAlign: [{
-                type: Input
-            }], pieLegendPosition: [{
-                type: Input
-            }], showPieLabel: [{
-                type: Input
-            }], mobileWidth: [{
-                type: Input
-            }], labelFontFamily: [{
-                type: Input
-            }], emptyText: [{
-                type: Input
-            }], chartClick: [{
-                type: Output
-            }], chartInit: [{
-                type: Output
-            }], onThemeChange: [{
-                type: HostListener,
-                args: ['window:theme-changed']
-            }] } });
+            args: [{ selector: 'fx-ui-confirmation-dialog', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        MatDialogTitle,
+                        CdkScrollable,
+                        MatDialogContent,
+                        MatDialogActions,
+                        ButtonComponent,
+                    ], template: "<div animate.enter=\"fade-in-animation\" class=\"dialog-container\">\n  <h1 mat-dialog-title 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.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }] });
+
+/**
+ * Thin façade over MatDialog so app code never imports @angular/material
+ * directly (behavior-layer rule, Playbook §5.1). Same semantics — the
+ * returned ref is the Material one, typed through this service.
+ */
+class FxDialogService {
+    dialog = inject(MatDialog);
+    open(component, config) {
+        return this.dialog.open(component, config);
+    }
+    /** Standard confirmation flow — resolves true when the user confirms. */
+    async confirm(options = {}) {
+        // ConfirmationDialogComponent reads MAT_DIALOG_DATA as its bindings and
+        // closes with true/false.
+        const ref = this.dialog.open(ConfirmationDialogComponent, { data: { ...options } });
+        return !!(await firstValueFrom(ref.afterClosed()));
+    }
+    closeAll() {
+        this.dialog.closeAll();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: FxDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: FxDialogService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: FxDialogService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
 
 class FxComponent {
     /**
@@ -2677,6 +2292,9 @@ class FxComponent {
      * bind to an ancestor's NgControl.
      */
     ngControl = inject(NgControl, { optional: true, self: true });
+    /** With OnPush, programmatic writes (form.setValue / setDisabledState) must
+     *  mark the view — CVA calls come from outside the component's own events. */
+    cdr = inject(ChangeDetectorRef);
     disabled = false;
     value;
     onChange = () => undefined;
@@ -2701,6 +2319,7 @@ class FxComponent {
         // Pass through as-is. Coercing null to '' here broke boolean/number
         // controls; string controls that want '' as their empty value override.
         this.value = value;
+        this.cdr.markForCheck();
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -2710,6 +2329,7 @@ class FxComponent {
     }
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
+        this.cdr.markForCheck();
     }
     get invalid() {
         return !!(this.ngControl?.invalid && this.ngControl?.touched);
@@ -2763,10 +2383,10 @@ class FxComponent {
         const firstKey = Object.keys(this.errors)[0];
         return messages[firstKey] || `Invalid ${label ?? 'value'}`;
     }
-    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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: FxComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.20", type: FxComponent, isStandalone: true, inputs: { disabled: "disabled" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: FxComponent, decorators: [{
             type: Directive
         }], ctorParameters: () => [], propDecorators: { disabled: [{
                 type: Input
@@ -2775,8 +2395,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
 class CheckboxComponent extends FxComponent {
     ref;
     label = '';
-    rounded;
-    valueChange = new EventEmitter();
+    rounded = input(...(ngDevMode ? [undefined, { debugName: "rounded" }] : /* istanbul ignore next */ []));
+    valueChange = output();
     constructor(ref) {
         super();
         this.ref = ref;
@@ -2796,59 +2416,63 @@ 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: 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  <!-- sr-only (not `hidden`): keeps the input focusable and in the a11y tree -->\n  <input\n    type=\"checkbox\"\n    class=\"peer sr-only\"\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 peer-focus-visible:ring-2 peer-focus-visible:ring-primary/50\"\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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: CheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: CheckboxComponent, isStandalone: true, selector: "fx-ui-checkbox", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null } }, 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  <!-- sr-only (not `hidden`): keeps the input focusable and in the a11y tree -->\n  <input\n    type=\"checkbox\"\n    class=\"peer sr-only\"\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 peer-focus-visible:ring-2 peer-focus-visible:ring-primary/50\"\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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", 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  <!-- sr-only (not `hidden`): keeps the input focusable and in the a11y tree -->\n  <input\n    type=\"checkbox\"\n    class=\"peer sr-only\"\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 peer-focus-visible:ring-2 peer-focus-visible:ring-primary/50\"\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" }]
+            args: [{ selector: 'fx-ui-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], 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  <!-- sr-only (not `hidden`): keeps the input focusable and in the a11y tree -->\n  <input\n    type=\"checkbox\"\n    class=\"peer sr-only\"\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 peer-focus-visible:ring-2 peer-focus-visible:ring-primary/50\"\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: i0.ChangeDetectorRef }], propDecorators: { label: [{
                 type: Input
-            }], rounded: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }] } });
+            }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
 
 class CircleProgressBar {
-    percent = 0;
-    showPercent = false;
+    percent = input(0, ...(ngDevMode ? [{ debugName: "percent" }] : /* istanbul ignore next */ []));
+    showPercent = input(false, ...(ngDevMode ? [{ debugName: "showPercent" }] : /* istanbul ignore next */ []));
     radius = 35;
     stroke = 10;
     normalizedRadius = this.radius - this.stroke / 2;
     circumference = 2 * Math.PI * this.normalizedRadius;
     get dashOffset() {
-        const clamped = Math.max(0, Math.min(100, this.percent));
+        const clamped = Math.max(0, Math.min(100, this.percent()));
         return this.circumference - (clamped / 100) * this.circumference;
     }
     get ariaLabel() {
-        return `${Math.round(this.percent)}%`;
+        return `${Math.round(this.percent())}%`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CircleProgressBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: CircleProgressBar, isStandalone: false, selector: "fx-ui-circle-progress-bar", inputs: { percent: "percent", showPercent: "showPercent" }, ngImport: i0, template: "<div class=\"flex items-center justify-center w-full h-full\">\n  <svg\n    class=\"transform -rotate-90 block\"\n    [attr.viewBox]=\"'0 0 ' + radius * 2 + ' ' + radius * 2\"\n    width=\"100%\"\n    height=\"100%\"\n  >\n    <circle\n      class=\"opacity-20\"\n      [attr.cx]=\"radius\"\n      [attr.cy]=\"radius\"\n      [attr.r]=\"normalizedRadius\"\n      [attr.stroke-width]=\"stroke\"\n      fill=\"transparent\"\n      stroke=\"currentColor\"\n    ></circle>\n\n    <circle\n      class=\"stroke-current\"\n      [attr.cx]=\"radius\"\n      [attr.cy]=\"radius\"\n      [attr.r]=\"normalizedRadius\"\n      [attr.stroke-width]=\"stroke\"\n      fill=\"transparent\"\n      stroke-linecap=\"round\"\n      [attr.stroke-dasharray]=\"circumference\"\n      [attr.stroke-dashoffset]=\"dashOffset\"\n      style=\"transition: stroke-dashoffset 300ms linear\"\n    ></circle>\n\n    @if(showPercent){\n      <text\n        [attr.x]=\"radius\"\n        [attr.y]=\"radius\"\n        dominant-baseline=\"central\"\n        text-anchor=\"middle\"\n        class=\"text-xs font-medium\"\n        fill=\"currentColor\"\n      >\n        {{ percent }}%\n      </text>\n    }\n  </svg>\n</div>\n", styles: [""] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: CircleProgressBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: CircleProgressBar, isStandalone: true, selector: "fx-ui-circle-progress-bar", inputs: { percent: { classPropertyName: "percent", publicName: "percent", isSignal: true, isRequired: false, transformFunction: null }, showPercent: { classPropertyName: "showPercent", publicName: "showPercent", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex items-center justify-center w-full h-full\">\n  <svg\n    class=\"transform -rotate-90 block\"\n    [attr.viewBox]=\"'0 0 ' + radius * 2 + ' ' + radius * 2\"\n    width=\"100%\"\n    height=\"100%\"\n  >\n    <circle\n      class=\"opacity-20\"\n      [attr.cx]=\"radius\"\n      [attr.cy]=\"radius\"\n      [attr.r]=\"normalizedRadius\"\n      [attr.stroke-width]=\"stroke\"\n      fill=\"transparent\"\n      stroke=\"currentColor\"\n    ></circle>\n\n    <circle\n      class=\"stroke-current\"\n      [attr.cx]=\"radius\"\n      [attr.cy]=\"radius\"\n      [attr.r]=\"normalizedRadius\"\n      [attr.stroke-width]=\"stroke\"\n      fill=\"transparent\"\n      stroke-linecap=\"round\"\n      [attr.stroke-dasharray]=\"circumference\"\n      [attr.stroke-dashoffset]=\"dashOffset\"\n      style=\"transition: stroke-dashoffset 300ms linear\"\n    ></circle>\n\n    @if(showPercent()){\n      <text\n        [attr.x]=\"radius\"\n        [attr.y]=\"radius\"\n        dominant-baseline=\"central\"\n        text-anchor=\"middle\"\n        class=\"text-xs font-medium\"\n        fill=\"currentColor\"\n      >\n        {{ percent() }}%\n      </text>\n    }\n  </svg>\n</div>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CircleProgressBar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: CircleProgressBar, decorators: [{
             type: Component,
-            args: [{ selector: 'fx-ui-circle-progress-bar', standalone: false, template: "<div class=\"flex items-center justify-center w-full h-full\">\n  <svg\n    class=\"transform -rotate-90 block\"\n    [attr.viewBox]=\"'0 0 ' + radius * 2 + ' ' + radius * 2\"\n    width=\"100%\"\n    height=\"100%\"\n  >\n    <circle\n      class=\"opacity-20\"\n      [attr.cx]=\"radius\"\n      [attr.cy]=\"radius\"\n      [attr.r]=\"normalizedRadius\"\n      [attr.stroke-width]=\"stroke\"\n      fill=\"transparent\"\n      stroke=\"currentColor\"\n    ></circle>\n\n    <circle\n      class=\"stroke-current\"\n      [attr.cx]=\"radius\"\n      [attr.cy]=\"radius\"\n      [attr.r]=\"normalizedRadius\"\n      [attr.stroke-width]=\"stroke\"\n      fill=\"transparent\"\n      stroke-linecap=\"round\"\n      [attr.stroke-dasharray]=\"circumference\"\n      [attr.stroke-dashoffset]=\"dashOffset\"\n      style=\"transition: stroke-dashoffset 300ms linear\"\n    ></circle>\n\n    @if(showPercent){\n      <text\n        [attr.x]=\"radius\"\n        [attr.y]=\"radius\"\n        dominant-baseline=\"central\"\n        text-anchor=\"middle\"\n        class=\"text-xs font-medium\"\n        fill=\"currentColor\"\n      >\n        {{ percent }}%\n      </text>\n    }\n  </svg>\n</div>\n" }]
-        }], propDecorators: { percent: [{
-                type: Input
-            }], showPercent: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'fx-ui-circle-progress-bar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex items-center justify-center w-full h-full\">\n  <svg\n    class=\"transform -rotate-90 block\"\n    [attr.viewBox]=\"'0 0 ' + radius * 2 + ' ' + radius * 2\"\n    width=\"100%\"\n    height=\"100%\"\n  >\n    <circle\n      class=\"opacity-20\"\n      [attr.cx]=\"radius\"\n      [attr.cy]=\"radius\"\n      [attr.r]=\"normalizedRadius\"\n      [attr.stroke-width]=\"stroke\"\n      fill=\"transparent\"\n      stroke=\"currentColor\"\n    ></circle>\n\n    <circle\n      class=\"stroke-current\"\n      [attr.cx]=\"radius\"\n      [attr.cy]=\"radius\"\n      [attr.r]=\"normalizedRadius\"\n      [attr.stroke-width]=\"stroke\"\n      fill=\"transparent\"\n      stroke-linecap=\"round\"\n      [attr.stroke-dasharray]=\"circumference\"\n      [attr.stroke-dashoffset]=\"dashOffset\"\n      style=\"transition: stroke-dashoffset 300ms linear\"\n    ></circle>\n\n    @if(showPercent()){\n      <text\n        [attr.x]=\"radius\"\n        [attr.y]=\"radius\"\n        dominant-baseline=\"central\"\n        text-anchor=\"middle\"\n        class=\"text-xs font-medium\"\n        fill=\"currentColor\"\n      >\n        {{ percent() }}%\n      </text>\n    }\n  </svg>\n</div>\n" }]
+        }], propDecorators: { percent: [{ type: i0.Input, args: [{ isSignal: true, alias: "percent", required: false }] }], showPercent: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPercent", required: false }] }] } });
 
 let nextPickerId = 0;
+const pad = (n) => String(n).padStart(2, '0');
+/**
+ * Date/time field backed by first-party Material pickers (mat-datepicker +
+ * mat-timepicker, the latter first-party since Material 19) — replaces the
+ * former @danielmoncada/angular-datetime-picker + moment adapter stack.
+ *
+ * The public contract is unchanged: the CVA value is a plain string
+ * ('YYYY-MM-DD HH:mm' for type 'both', 'YYYY-MM-DD' for 'calendar',
+ * 'HH:mm' for 'timer'), so existing forms keep working as-is.
+ */
 class DatetimePicker extends FxComponent {
     ref;
     label;
-    placeholder = 'Select date and time';
-    required = false;
-    type = 'both';
-    minDate;
-    maxDate;
+    placeholder = input('Select date and time', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    /** 'both' | 'calendar' | 'timer' — same values the Owl picker accepted. */
+    type = input('both', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    minDate = input(...(ngDevMode ? [undefined, { debugName: "minDate" }] : /* istanbul ignore next */ []));
+    maxDate = input(...(ngDevMode ? [undefined, { debugName: "maxDate" }] : /* istanbul ignore next */ []));
     errorMessages = {};
-    validateFn;
+    validateFn = input(...(ngDevMode ? [undefined, { debugName: "validateFn" }] : /* istanbul ignore next */ []));
     fieldId = `fx-datetime-${nextPickerId++}`;
-    startAt;
+    /** Internal Date the Material pickers operate on; `value` stays a string. */
+    dateValue = null;
     constructor(ref) {
         super();
         this.ref = ref;
@@ -2858,65 +2482,119 @@ class DatetimePicker extends FxComponent {
             this.ref.detectChanges();
         });
     }
+    get showDate() {
+        return this.type() !== 'timer';
+    }
+    get showTime() {
+        return this.type() !== 'calendar';
+    }
+    get min() {
+        return this.toDate(this.minDate());
+    }
+    get max() {
+        return this.toDate(this.maxDate());
+    }
     onBlur() {
         this.onTouched();
-        this.validate(this.validateFn);
+        this.validate(this.validateFn());
     }
     writeValue(value) {
         this.value = value ?? '';
-        this.startAt = value ?? '';
+        this.dateValue = this.toDate(value);
         this.ref.markForCheck();
     }
-    onValueChange(date) {
+    onDateChange(date) {
         if (this.disabled)
             return;
-        this.value = date;
-        this.onChange(date);
+        const next = date ? new Date(date) : null;
+        // Keep the already-picked time when only the calendar part changes.
+        if (next && this.dateValue) {
+            next.setHours(this.dateValue.getHours(), this.dateValue.getMinutes(), 0, 0);
+        }
+        this.commit(next);
+    }
+    onTimeChange(time) {
+        if (this.disabled || !time)
+            return;
+        const next = this.dateValue ? new Date(this.dateValue) : new Date();
+        next.setHours(time.getHours(), time.getMinutes(), 0, 0);
+        this.commit(next);
+    }
+    commit(next) {
+        this.dateValue = next;
+        this.value = this.format(next);
+        this.onChange(this.value);
         this.onTouched();
+        this.ref.markForCheck();
     }
-    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\" [attr.for]=\"fieldId\">\n      {{ label }}\n      <span *ngIf=\"required\" class=\"txt-required\" aria-hidden=\"true\">*</span>\n    </label>\n  }\n\n  <div class=\"relative\">\n    <input\n      [id]=\"fieldId\"\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: ["@charset \"UTF-8\";@layer properties;::ng-deep .owl-dt-container{border-radius:.75rem;border-style:var(--tw-border-style);border-width:1px;border-color:rgb(var(--border-default));background-color:rgb(var(--bg-primary));--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(var(--shadow-color) / .1)), 0 10px 10px -5px var(--tw-shadow-color, rgb(var(--shadow-color) / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),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){background-color:rgb(var(--bg-primary-hover))}::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-style:var(--tw-border-style);border-width:1px;border-color:rgb(var(--border-strong));background-color:rgb(var(--bg-primary));color:rgb(var(--text-primary))}::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{--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgb(var(--text-primary))}::ng-deep .owl-dt-control-arrow-button .owl-dt-control-button-content{color:rgb(var(--text-primary))}::ng-deep .owl-dt-calendar-table .owl-dt-calendar-header{color:rgb(var(--text-secondary))}::ng-deep .owl-dt-calendar-table .owl-dt-calendar-header .owl-dt-weekdays th{--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgb(var(--text-secondary))}::ng-deep .owl-dt-inline-container,::ng-deep .owl-dt-popup-container{border-radius:.75rem;border-style:var(--tw-border-style);border-width:1px;border-color:rgb(var(--border-strong));--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(var(--shadow-color) / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(var(--shadow-color) / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\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 });
+    toDate(value) {
+        if (!value)
+            return null;
+        if (value instanceof Date)
+            return isNaN(value.getTime()) ? null : value;
+        // Accepted string shapes: 'YYYY-MM-DD', 'YYYY-MM-DD HH:mm[:ss]', 'HH:mm'.
+        const s = String(value).trim();
+        if (/^\d{2}:\d{2}/.test(s)) {
+            const d = new Date();
+            d.setHours(+s.slice(0, 2), +s.slice(3, 5), 0, 0);
+            return d;
+        }
+        const d = new Date(s.replace(' ', 'T'));
+        return isNaN(d.getTime()) ? null : d;
+    }
+    format(d) {
+        if (!d)
+            return '';
+        const date = `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+        const time = `${pad(d.getHours())}:${pad(d.getMinutes())}`;
+        const type = this.type();
+        if (type === 'calendar')
+            return date;
+        if (type === 'timer')
+            return time;
+        return `${date} ${time}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: DatetimePicker, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: DatetimePicker, isStandalone: true, selector: "fx-ui-datetime-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: false, isRequired: false, transformFunction: null }, validateFn: { classPropertyName: "validateFn", publicName: "validateFn", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            provideNativeDateAdapter(),
+            // en-GB display ⇒ DD/MM/YYYY + 24h — matches FxUtils.formatDateTime.
+            { provide: MAT_DATE_LOCALE, useValue: 'en-GB' },
+        ], 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\" [attr.for]=\"fieldId\">\n      {{ label }}\n      @if (required()) {\n        <span class=\"txt-required\" aria-hidden=\"true\">*</span>\n      }\n    </label>\n  }\n\n  <div class=\"flex gap-normal\">\n    @if (showDate) {\n      <div class=\"relative flex-1\">\n        <input\n          [id]=\"fieldId\"\n          [matDatepicker]=\"datePicker\"\n          [placeholder]=\"placeholder()\"\n          [disabled]=\"disabled\"\n          [min]=\"min\"\n          [max]=\"max\"\n          [value]=\"dateValue\"\n          (dateChange)=\"onDateChange($event.value)\"\n          (click)=\"!disabled && datePicker.open()\"\n          (blur)=\"onBlur()\"\n          readonly\n          class=\"input-default pr-9\"\n        />\n        <span\n          (click)=\"!disabled && datePicker.open()\"\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        <mat-datepicker #datePicker></mat-datepicker>\n      </div>\n    }\n    @if (showTime) {\n      <div class=\"relative\" [class.flex-1]=\"!showDate\" [class.w-32]=\"showDate\">\n        <input\n          [matTimepicker]=\"timePicker\"\n          placeholder=\"HH:mm\"\n          [disabled]=\"disabled\"\n          [value]=\"dateValue\"\n          (valueChange)=\"onTimeChange($event)\"\n          (click)=\"!disabled && timePicker.open()\"\n          (blur)=\"onBlur()\"\n          readonly\n          class=\"input-default pr-9\"\n        />\n        <span\n          (click)=\"!disabled && timePicker.open()\"\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=\"clock\" [size]=\"20\" class=\"text-text-primary\"></fx-ui-hero-icon>\n        </span>\n        <mat-timepicker #timePicker></mat-timepicker>\n      </div>\n    }\n  </div>\n  @if (invalid) {\n    <div class=\"txt-invalid\">{{ getErrorMessage(label) }}</div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";@layer properties;::ng-deep .mat-datepicker-content,::ng-deep mat-timepicker .mat-timepicker-panel,::ng-deep .mat-timepicker-panel{border-radius:.75rem;border-style:var(--tw-border-style);border-width:1px;border-color:rgb(var(--border-default));background-color:rgb(var(--bg-primary));--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(var(--shadow-color) / .1)), 0 10px 10px -5px var(--tw-shadow-color, rgb(var(--shadow-color) / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);color:rgb(var(--text-primary));--mat-datepicker-calendar-container-background-color: rgb(var(--bg-primary));--mat-datepicker-calendar-container-text-color: rgb(var(--text-primary));--mat-datepicker-calendar-date-text-color: rgb(var(--text-primary));--mat-datepicker-calendar-date-selected-state-background-color: rgb(var(--primary));--mat-datepicker-calendar-date-selected-state-text-color: #fff;--mat-datepicker-calendar-date-today-outline-color: rgb(var(--primary));--mat-datepicker-calendar-date-hover-state-background-color: rgb(var(--bg-primary-hover));--mat-datepicker-calendar-header-text-color: rgb(var(--text-secondary));--mat-datepicker-calendar-period-button-text-color: rgb(var(--text-primary));--mat-datepicker-calendar-navigation-button-icon-color: rgb(var(--text-primary));--mat-datepicker-calendar-date-disabled-state-text-color: rgb(var(--text-placeholder));--mat-timepicker-container-background-color: rgb(var(--bg-primary))}::ng-deep .mat-timepicker-panel .mat-mdc-option{color:rgb(var(--text-primary))}::ng-deep .mat-timepicker-panel .mat-mdc-option:hover:not(.mdc-list-item--disabled){background-color:rgb(var(--bg-primary-hover))}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i1$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "ngmodule", type: MatTimepickerModule }, { kind: "component", type: i2$2.MatTimepicker, selector: "mat-timepicker", inputs: ["interval", "options", "disableRipple", "aria-label", "aria-labelledby", "panelClass"], outputs: ["selected", "opened", "closed"], exportAs: ["matTimepicker"] }, { kind: "directive", type: i2$2.MatTimepickerInput, selector: "input[matTimepicker]", inputs: ["value", "matTimepicker", "matTimepickerMin", "matTimepickerMax", "matTimepickerOpenOnClick", "disabled"], outputs: ["valueChange"], exportAs: ["matTimepickerInput"] }, { 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", 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\" [attr.for]=\"fieldId\">\n      {{ label }}\n      <span *ngIf=\"required\" class=\"txt-required\" aria-hidden=\"true\">*</span>\n    </label>\n  }\n\n  <div class=\"relative\">\n    <input\n      [id]=\"fieldId\"\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: ["@charset \"UTF-8\";@layer properties;::ng-deep .owl-dt-container{border-radius:.75rem;border-style:var(--tw-border-style);border-width:1px;border-color:rgb(var(--border-default));background-color:rgb(var(--bg-primary));--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(var(--shadow-color) / .1)), 0 10px 10px -5px var(--tw-shadow-color, rgb(var(--shadow-color) / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),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){background-color:rgb(var(--bg-primary-hover))}::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-style:var(--tw-border-style);border-width:1px;border-color:rgb(var(--border-strong));background-color:rgb(var(--bg-primary));color:rgb(var(--text-primary))}::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{--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgb(var(--text-primary))}::ng-deep .owl-dt-control-arrow-button .owl-dt-control-button-content{color:rgb(var(--text-primary))}::ng-deep .owl-dt-calendar-table .owl-dt-calendar-header{color:rgb(var(--text-secondary))}::ng-deep .owl-dt-calendar-table .owl-dt-calendar-header .owl-dt-weekdays th{--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgb(var(--text-secondary))}::ng-deep .owl-dt-inline-container,::ng-deep .owl-dt-popup-container{border-radius:.75rem;border-style:var(--tw-border-style);border-width:1px;border-color:rgb(var(--border-strong));--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(var(--shadow-color) / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(var(--shadow-color) / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'fx-ui-datetime-picker', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatDatepickerModule, MatTimepickerModule, HeroIconComponent], providers: [
+                        provideNativeDateAdapter(),
+                        // en-GB display ⇒ DD/MM/YYYY + 24h — matches FxUtils.formatDateTime.
+                        { provide: MAT_DATE_LOCALE, useValue: 'en-GB' },
+                    ], template: "<div class=\"flex flex-col mb-4 w-full text-left\">\n  @if (label) {\n    <label class=\"txt-field-label\" [attr.for]=\"fieldId\">\n      {{ label }}\n      @if (required()) {\n        <span class=\"txt-required\" aria-hidden=\"true\">*</span>\n      }\n    </label>\n  }\n\n  <div class=\"flex gap-normal\">\n    @if (showDate) {\n      <div class=\"relative flex-1\">\n        <input\n          [id]=\"fieldId\"\n          [matDatepicker]=\"datePicker\"\n          [placeholder]=\"placeholder()\"\n          [disabled]=\"disabled\"\n          [min]=\"min\"\n          [max]=\"max\"\n          [value]=\"dateValue\"\n          (dateChange)=\"onDateChange($event.value)\"\n          (click)=\"!disabled && datePicker.open()\"\n          (blur)=\"onBlur()\"\n          readonly\n          class=\"input-default pr-9\"\n        />\n        <span\n          (click)=\"!disabled && datePicker.open()\"\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        <mat-datepicker #datePicker></mat-datepicker>\n      </div>\n    }\n    @if (showTime) {\n      <div class=\"relative\" [class.flex-1]=\"!showDate\" [class.w-32]=\"showDate\">\n        <input\n          [matTimepicker]=\"timePicker\"\n          placeholder=\"HH:mm\"\n          [disabled]=\"disabled\"\n          [value]=\"dateValue\"\n          (valueChange)=\"onTimeChange($event)\"\n          (click)=\"!disabled && timePicker.open()\"\n          (blur)=\"onBlur()\"\n          readonly\n          class=\"input-default pr-9\"\n        />\n        <span\n          (click)=\"!disabled && timePicker.open()\"\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=\"clock\" [size]=\"20\" class=\"text-text-primary\"></fx-ui-hero-icon>\n        </span>\n        <mat-timepicker #timePicker></mat-timepicker>\n      </div>\n    }\n  </div>\n  @if (invalid) {\n    <div class=\"txt-invalid\">{{ getErrorMessage(label) }}</div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";@layer properties;::ng-deep .mat-datepicker-content,::ng-deep mat-timepicker .mat-timepicker-panel,::ng-deep .mat-timepicker-panel{border-radius:.75rem;border-style:var(--tw-border-style);border-width:1px;border-color:rgb(var(--border-default));background-color:rgb(var(--bg-primary));--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(var(--shadow-color) / .1)), 0 10px 10px -5px var(--tw-shadow-color, rgb(var(--shadow-color) / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);color:rgb(var(--text-primary));--mat-datepicker-calendar-container-background-color: rgb(var(--bg-primary));--mat-datepicker-calendar-container-text-color: rgb(var(--text-primary));--mat-datepicker-calendar-date-text-color: rgb(var(--text-primary));--mat-datepicker-calendar-date-selected-state-background-color: rgb(var(--primary));--mat-datepicker-calendar-date-selected-state-text-color: #fff;--mat-datepicker-calendar-date-today-outline-color: rgb(var(--primary));--mat-datepicker-calendar-date-hover-state-background-color: rgb(var(--bg-primary-hover));--mat-datepicker-calendar-header-text-color: rgb(var(--text-secondary));--mat-datepicker-calendar-period-button-text-color: rgb(var(--text-primary));--mat-datepicker-calendar-navigation-button-icon-color: rgb(var(--text-primary));--mat-datepicker-calendar-date-disabled-state-text-color: rgb(var(--text-placeholder));--mat-timepicker-container-background-color: rgb(var(--bg-primary))}::ng-deep .mat-timepicker-panel .mat-mdc-option{color:rgb(var(--text-primary))}::ng-deep .mat-timepicker-panel .mat-mdc-option:hover:not(.mdc-list-item--disabled){background-color:rgb(var(--bg-primary-hover))}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { label: [{
                 type: Input
-            }], placeholder: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], minDate: [{
-                type: Input
-            }], maxDate: [{
-                type: Input
-            }], errorMessages: [{
-                type: Input
-            }], validateFn: [{
+            }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], errorMessages: [{
                 type: Input
-            }] } });
+            }], validateFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "validateFn", required: false }] }] } });
 
 class DndUploadComponent {
-    multiple = false;
+    cdr = inject(ChangeDetectorRef);
+    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
     accept = '';
-    maxSizeMB = 10;
-    strictSize = true;
+    maxSizeMB = input(10, ...(ngDevMode ? [{ debugName: "maxSizeMB" }] : /* istanbul ignore next */ []));
+    strictSize = input(true, ...(ngDevMode ? [{ debugName: "strictSize" }] : /* istanbul ignore next */ []));
     /** Icon name from heroicons (outline). Default: 'arrow-up-tray' */
-    icon = 'arrow-up-tray';
+    icon = input('arrow-up-tray', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
     /** CSS color value for accent (border, icon, link). Default uses --gradient-primary-start */
-    accentColor = '';
-    fileDrop = new EventEmitter();
-    fileClick = new EventEmitter();
-    uploadComplete = new EventEmitter();
-    uploadError = new EventEmitter();
+    accentColor = input('', ...(ngDevMode ? [{ debugName: "accentColor" }] : /* istanbul ignore next */ []));
+    fileDrop = output();
+    fileClick = output();
+    uploadComplete = output();
+    uploadError = output();
     isDragOver = false;
     isOpening = false;
     get accentStyle() {
-        if (!this.accentColor)
+        const accentColor = this.accentColor();
+        if (!accentColor)
             return {};
-        return { '--dnd-accent': this.accentColor };
+        return { '--dnd-accent': accentColor };
     }
     onDragOver(event) {
         event.preventDefault();
@@ -2943,6 +2621,7 @@ class DndUploadComponent {
         setTimeout(() => {
             inputEl?.click();
             this.isOpening = false;
+            this.cdr.markForCheck();
         }, 0);
     }
     onFileSelected(event) {
@@ -2961,10 +2640,10 @@ class DndUploadComponent {
             .filter((t) => t);
         for (const file of files) {
             const sizeMB = file.size / 1024 / 1024;
-            if (this.strictSize && sizeMB > this.maxSizeMB) {
+            if (this.strictSize() && sizeMB > this.maxSizeMB()) {
                 this.uploadError.emit({
                     file,
-                    reason: `File too large: ${sizeMB.toFixed(2)} MB > ${this.maxSizeMB} MB`,
+                    reason: `File too large: ${sizeMB.toFixed(2)} MB > ${this.maxSizeMB()} MB`,
                 });
                 continue;
             }
@@ -2998,63 +2677,15 @@ class DndUploadComponent {
             return a === fileType;
         });
     }
-    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: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: "21.2.20", ngImport: i0, type: DndUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: DndUploadComponent, isStandalone: true, selector: "fx-ui-dnd-upload", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: false, isRequired: false, transformFunction: null }, maxSizeMB: { classPropertyName: "maxSizeMB", publicName: "maxSizeMB", isSignal: true, isRequired: false, transformFunction: null }, strictSize: { classPropertyName: "strictSize", publicName: "strictSize", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, accentColor: { classPropertyName: "accentColor", publicName: "accentColor", isSignal: true, isRequired: false, transformFunction: null } }, 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: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: DndUploadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", 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"] }]
-        }], propDecorators: { multiple: [{
-                type: Input
-            }], accept: [{
-                type: Input
-            }], maxSizeMB: [{
+            args: [{ selector: 'fx-ui-dnd-upload', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgStyle, HeroIconComponent], 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: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], accept: [{
                 type: Input
-            }], strictSize: [{
-                type: Input
-            }], icon: [{
-                type: Input
-            }], accentColor: [{
-                type: Input
-            }], fileDrop: [{
-                type: Output
-            }], fileClick: [{
-                type: Output
-            }], uploadComplete: [{
-                type: Output
-            }], uploadError: [{
-                type: Output
-            }] } });
-
-class FlowConnection {
-    nodes = [];
-    edges = [];
-    backgroundColor = '--bg-hover-primary';
-    view = ['100%', '400px'];
-    handleConnection(connection) {
-        this.edges = [
-            ...this.edges,
-            {
-                id: `${connection.source} -> ${connection.target}`,
-                ...connection,
-            },
-        ];
-    }
-    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: i39.VflowComponent, selector: "vflow", inputs: ["view", "minZoom", "maxZoom", "background", "optimization", "entitiesSelectable", "keyboardShortcuts", "connection", "snapGrid", "elevateNodesOnSelect", "elevateEdgesOnSelect", "nodes", "alignmentHelper", "edges"], outputs: ["onComponentNodeEvent"] }, { kind: "directive", type: i39.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,
-            args: [{ selector: 'fx-ui-flow-connection', standalone: false, 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" }]
-        }], propDecorators: { nodes: [{
-                type: Input
-            }], edges: [{
-                type: Input
-            }], backgroundColor: [{
-                type: Input
-            }], view: [{
-                type: Input
-            }] } });
+            }], maxSizeMB: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSizeMB", required: false }] }], strictSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "strictSize", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], accentColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "accentColor", required: false }] }], fileDrop: [{ type: i0.Output, args: ["fileDrop"] }], fileClick: [{ type: i0.Output, args: ["fileClick"] }], uploadComplete: [{ type: i0.Output, args: ["uploadComplete"] }], uploadError: [{ type: i0.Output, args: ["uploadError"] }] } });
 
 let nextInputId = 0;
 class InputComponent extends FxComponent {
@@ -3062,18 +2693,18 @@ class InputComponent extends FxComponent {
     label = '';
     tooltip = '';
     type = 'text';
-    placeholder = '';
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     errorMessages = {};
-    required = false;
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
     suffixIcon;
-    class;
-    maxlength;
-    validateFn;
-    blurred = new EventEmitter();
-    focused = new EventEmitter();
-    suffixClick = new EventEmitter();
+    class = input(...(ngDevMode ? [undefined, { debugName: "class" }] : /* istanbul ignore next */ []));
+    maxlength = input(...(ngDevMode ? [undefined, { debugName: "maxlength" }] : /* istanbul ignore next */ []));
+    validateFn = input(...(ngDevMode ? [undefined, { debugName: "validateFn" }] : /* istanbul ignore next */ []));
+    blurred = output();
+    focused = output();
+    suffixClick = output();
     /** Accessible name for the suffix icon button (it renders no text). */
-    suffixAriaLabel = '';
+    suffixAriaLabel = input('', ...(ngDevMode ? [{ debugName: "suffixAriaLabel" }] : /* istanbul ignore next */ []));
     fieldId = `fx-input-${nextInputId++}`;
     showPassword = false;
     validateError = null;
@@ -3090,8 +2721,9 @@ class InputComponent extends FxComponent {
     onInput(event) {
         const input = event.target;
         let newValue = input.value;
-        if (this.maxlength && newValue.length > this.maxlength) {
-            newValue = newValue.slice(0, this.maxlength);
+        const maxlength = this.maxlength();
+        if (maxlength && newValue.length > maxlength) {
+            newValue = newValue.slice(0, maxlength);
             input.value = newValue;
         }
         this.value = newValue;
@@ -3104,9 +2736,10 @@ class InputComponent extends FxComponent {
     onBlur() {
         this.onTouched();
         this.blurred.emit();
-        if (this.validateFn) {
-            this.validateError = this.validateFn(this.value);
-            this.validate(this.validateFn);
+        const validateFn = this.validateFn();
+        if (validateFn) {
+            this.validateError = validateFn(this.value);
+            this.validate(validateFn);
         }
     }
     togglePassword() {
@@ -3127,54 +2760,38 @@ 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: 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", suffixAriaLabel: "suffixAriaLabel" }, 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\" [attr.for]=\"fieldId\">\n      {{ label }}\n      @if (required) {\n        <span class=\"txt-required\" aria-hidden=\"true\">*</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      [id]=\"fieldId\"\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      [attr.aria-invalid]=\"invalid || null\"\n      [attr.aria-describedby]=\"invalid ? fieldId + '-error' : null\"\n      [attr.aria-required]=\"required ? true : null\"\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        [attr.aria-label]=\"\n          type === 'password'\n            ? (showPassword ? 'Hide password' : 'Show password')\n            : (suffixAriaLabel || null)\n        \"\n        [attr.aria-pressed]=\"type === 'password' ? showPassword : null\"\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            aria-hidden=\"true\"\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            aria-hidden=\"true\"\n          ></fx-ui-hero-icon>\n        }\n      </button>\n    }\n  </div>\n\n  @if (invalid) {\n    <div class=\"txt-invalid\" role=\"alert\" [id]=\"fieldId + '-error'\">\n      {{ getErrorMessage(label) }}\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: TrimOnBlurDirective, selector: "[appTrimOnBlur]", inputs: ["appTrimOnBlurCollapse"] }, { kind: "directive", type: i57.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: "21.2.20", ngImport: i0, type: InputComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: InputComponent, isStandalone: true, selector: "fx-ui-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, suffixIcon: { classPropertyName: "suffixIcon", publicName: "suffixIcon", isSignal: false, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, validateFn: { classPropertyName: "validateFn", publicName: "validateFn", isSignal: true, isRequired: false, transformFunction: null }, suffixAriaLabel: { classPropertyName: "suffixAriaLabel", publicName: "suffixAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, 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\" [attr.for]=\"fieldId\">\n      {{ label }}\n      @if (required()) {\n        <span class=\"txt-required\" aria-hidden=\"true\">*</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      [id]=\"fieldId\"\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      [attr.aria-invalid]=\"invalid || null\"\n      [attr.aria-describedby]=\"invalid ? fieldId + '-error' : null\"\n      [attr.aria-required]=\"required() ? true : null\"\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        [attr.aria-label]=\"\n          type === 'password'\n            ? (showPassword ? 'Hide password' : 'Show password')\n            : (suffixAriaLabel() || null)\n        \"\n        [attr.aria-pressed]=\"type === 'password' ? showPassword : null\"\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            aria-hidden=\"true\"\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            aria-hidden=\"true\"\n          ></fx-ui-hero-icon>\n        }\n      </button>\n    }\n  </div>\n\n  @if (invalid) {\n    <div class=\"txt-invalid\" role=\"alert\" [id]=\"fieldId + '-error'\">\n      {{ getErrorMessage(label) }}\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: TrimOnBlurDirective, selector: "[appTrimOnBlur]", inputs: ["appTrimOnBlurCollapse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: InputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", 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\" [attr.for]=\"fieldId\">\n      {{ label }}\n      @if (required) {\n        <span class=\"txt-required\" aria-hidden=\"true\">*</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      [id]=\"fieldId\"\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      [attr.aria-invalid]=\"invalid || null\"\n      [attr.aria-describedby]=\"invalid ? fieldId + '-error' : null\"\n      [attr.aria-required]=\"required ? true : null\"\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        [attr.aria-label]=\"\n          type === 'password'\n            ? (showPassword ? 'Hide password' : 'Show password')\n            : (suffixAriaLabel || null)\n        \"\n        [attr.aria-pressed]=\"type === 'password' ? showPassword : null\"\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            aria-hidden=\"true\"\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            aria-hidden=\"true\"\n          ></fx-ui-hero-icon>\n        }\n      </button>\n    }\n  </div>\n\n  @if (invalid) {\n    <div class=\"txt-invalid\" role=\"alert\" [id]=\"fieldId + '-error'\">\n      {{ getErrorMessage(label) }}\n    </div>\n  }\n</div>\n" }]
+            args: [{ selector: 'fx-ui-input', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        HeroIconComponent,
+                        MatTooltip,
+                        TrimOnBlurDirective,
+                    ], template: "<div class=\"mb-4 text-left w-full text-text-primary\" [class]=\"class()\">\n  @if (label) {\n    <label class=\"block txt-field-label\" [attr.for]=\"fieldId\">\n      {{ label }}\n      @if (required()) {\n        <span class=\"txt-required\" aria-hidden=\"true\">*</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      [id]=\"fieldId\"\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      [attr.aria-invalid]=\"invalid || null\"\n      [attr.aria-describedby]=\"invalid ? fieldId + '-error' : null\"\n      [attr.aria-required]=\"required() ? true : null\"\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        [attr.aria-label]=\"\n          type === 'password'\n            ? (showPassword ? 'Hide password' : 'Show password')\n            : (suffixAriaLabel() || null)\n        \"\n        [attr.aria-pressed]=\"type === 'password' ? showPassword : null\"\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            aria-hidden=\"true\"\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            aria-hidden=\"true\"\n          ></fx-ui-hero-icon>\n        }\n      </button>\n    }\n  </div>\n\n  @if (invalid) {\n    <div class=\"txt-invalid\" role=\"alert\" [id]=\"fieldId + '-error'\">\n      {{ getErrorMessage(label) }}\n    </div>\n  }\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { label: [{
                 type: Input
             }], tooltip: [{
                 type: Input
             }], type: [{
                 type: Input
-            }], placeholder: [{
-                type: Input
-            }], errorMessages: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], suffixIcon: [{
+            }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], errorMessages: [{
                 type: Input
-            }], class: [{
+            }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], suffixIcon: [{
                 type: Input
-            }], maxlength: [{
-                type: Input
-            }], validateFn: [{
-                type: Input
-            }], blurred: [{
-                type: Output
-            }], focused: [{
-                type: Output
-            }], suffixClick: [{
-                type: Output
-            }], suffixAriaLabel: [{
-                type: Input
-            }] } });
+            }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], validateFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "validateFn", required: false }] }], blurred: [{ type: i0.Output, args: ["blurred"] }], focused: [{ type: i0.Output, args: ["focused"] }], suffixClick: [{ type: i0.Output, args: ["suffixClick"] }], suffixAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffixAriaLabel", required: false }] }] } });
 
 class LoadingPanel {
-    show = false;
+    show = input(false, ...(ngDevMode ? [{ debugName: "show" }] : /* istanbul ignore next */ []));
     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: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: LoadingPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: LoadingPanel, isStandalone: true, selector: "fx-ui-loading-panel", inputs: { show: { classPropertyName: "show", publicName: "show", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- Full-screen glass overlay -->\n@if (show()) {\n  <div\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    <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      @if (message) {\n        <div class=\"text-sm text-text-primary text-center\">\n          {{ message }}\n        </div>\n      }\n    </div>\n  </div>\n}\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: LoadingPanel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: LoadingPanel, decorators: [{
             type: Component,
-            args: [{ selector: 'fx-ui-loading-panel', standalone: false, 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" }]
-        }], propDecorators: { show: [{
-                type: Input
-            }], message: [{
+            args: [{ selector: 'fx-ui-loading-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Full-screen glass overlay -->\n@if (show()) {\n  <div\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    <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      @if (message) {\n        <div class=\"text-sm text-text-primary text-center\">\n          {{ message }}\n        </div>\n      }\n    </div>\n  </div>\n}\n" }]
+        }], propDecorators: { show: [{ type: i0.Input, args: [{ isSignal: true, alias: "show", required: false }] }], message: [{
                 type: Input
             }] } });
 
@@ -3183,10 +2800,10 @@ class RadioButtonToggleComponent extends FxComponent {
     ref;
     groupId = `fx-radio-toggle-${nextToggleGroupId++}`;
     label;
-    required = false;
-    options = [];
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
     errorMessages = {};
-    class;
+    class = input(...(ngDevMode ? [undefined, { debugName: "class" }] : /* istanbul ignore next */ []));
     constructor(ref) {
         super();
         this.ref = ref;
@@ -3201,23 +2818,17 @@ 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: 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  <!-- A radiogroup has no single control a <label> could point at \u2014 name it via aria-labelledby. -->\n  @if(label){<span class=\"txt-field-label\" [id]=\"groupId + '-label'\">\n    {{ label }}\n    @if(required) {<span class=\"txt-required\" aria-hidden=\"true\">*</span>} </span\n  >}\n\n  <div\n    class=\"inline-flex w-full rounded-lg overflow-hidden\"\n    role=\"radiogroup\"\n    [attr.aria-labelledby]=\"label ? groupId + '-label' : null\"\n  >\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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: RadioButtonToggleComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: RadioButtonToggleComponent, isStandalone: true, selector: "fx-ui-radio-toggle, [fx-ui-radio-toggle]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: false, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col text-left mb-4 w-full\" [class]=\"class()\">\n  <!-- A radiogroup has no single control a <label> could point at \u2014 name it via aria-labelledby. -->\n  @if(label){<span class=\"txt-field-label\" [id]=\"groupId + '-label'\">\n    {{ label }}\n    @if(required()) {<span class=\"txt-required\" aria-hidden=\"true\">*</span>} </span\n  >}\n\n  <div\n    class=\"inline-flex w-full rounded-lg overflow-hidden\"\n    role=\"radiogroup\"\n    [attr.aria-labelledby]=\"label ? groupId + '-label' : null\"\n  >\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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RadioButtonToggleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", 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  <!-- A radiogroup has no single control a <label> could point at \u2014 name it via aria-labelledby. -->\n  @if(label){<span class=\"txt-field-label\" [id]=\"groupId + '-label'\">\n    {{ label }}\n    @if(required) {<span class=\"txt-required\" aria-hidden=\"true\">*</span>} </span\n  >}\n\n  <div\n    class=\"inline-flex w-full rounded-lg overflow-hidden\"\n    role=\"radiogroup\"\n    [attr.aria-labelledby]=\"label ? groupId + '-label' : null\"\n  >\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" }]
+            args: [{ selector: 'fx-ui-radio-toggle, [fx-ui-radio-toggle]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "<div class=\"flex flex-col text-left mb-4 w-full\" [class]=\"class()\">\n  <!-- A radiogroup has no single control a <label> could point at \u2014 name it via aria-labelledby. -->\n  @if(label){<span class=\"txt-field-label\" [id]=\"groupId + '-label'\">\n    {{ label }}\n    @if(required()) {<span class=\"txt-required\" aria-hidden=\"true\">*</span>} </span\n  >}\n\n  <div\n    class=\"inline-flex w-full rounded-lg overflow-hidden\"\n    role=\"radiogroup\"\n    [attr.aria-labelledby]=\"label ? groupId + '-label' : null\"\n  >\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: i0.ChangeDetectorRef }], propDecorators: { label: [{
                 type: Input
-            }], required: [{
+            }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], errorMessages: [{
                 type: Input
-            }], options: [{
-                type: Input
-            }], errorMessages: [{
-                type: Input
-            }], class: [{
-                type: Input
-            }] } });
+            }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 let nextRadioGroupId = 0;
 class RadioButtonComponent extends FxComponent {
@@ -3225,10 +2836,10 @@ class RadioButtonComponent extends FxComponent {
     groupId = `fx-radio-${nextRadioGroupId++}`;
     label;
     tooltip = '';
-    required = false;
-    options = [];
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
     errorMessages = {};
-    class;
+    class = input(...(ngDevMode ? [undefined, { debugName: "class" }] : /* istanbul ignore next */ []));
     constructor(ref) {
         super();
         this.ref = ref;
@@ -3243,122 +2854,29 @@ 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: 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\n  class=\"w-full rounded-lg overflow-hidden\"\n  [class]=\"class\"\n  role=\"radiogroup\"\n  [attr.aria-labelledby]=\"label ? groupId + '-label' : null\"\n>\n  <!-- A radiogroup has no single control a <label> could point at \u2014 name it via aria-labelledby. -->\n  @if (label) {\n    <span class=\"txt-field-label block\" [id]=\"groupId + '-label'\">\n      {{ label }}\n      @if (required) {\n        <span class=\"txt-required\" aria-hidden=\"true\">*</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    </span>\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: i57.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: "21.2.20", ngImport: i0, type: RadioButtonComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: RadioButtonComponent, isStandalone: true, selector: "fx-ui-radio", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: false, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div\n  class=\"w-full rounded-lg overflow-hidden\"\n  [class]=\"class()\"\n  role=\"radiogroup\"\n  [attr.aria-labelledby]=\"label ? groupId + '-label' : null\"\n  >\n  <!-- A radiogroup has no single control a <label> could point at \u2014 name it via aria-labelledby. -->\n  @if (label) {\n    <span class=\"txt-field-label block\" [id]=\"groupId + '-label'\">\n      {{ label }}\n      @if (required()) {\n        <span class=\"txt-required\" aria-hidden=\"true\">*</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    </span>\n  }\n\n  @for (opt of options(); track opt) {\n    <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 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      <span class=\"txt-default mb-0\">{{ opt.label }}</span>\n    </button>\n  }\n  @if (invalid) {\n    <div class=\"txt-invalid\">\n      {{ getErrorMessage(label) }}\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RadioButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: RadioButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fx-ui-radio', standalone: false, template: "<div\n  class=\"w-full rounded-lg overflow-hidden\"\n  [class]=\"class\"\n  role=\"radiogroup\"\n  [attr.aria-labelledby]=\"label ? groupId + '-label' : null\"\n>\n  <!-- A radiogroup has no single control a <label> could point at \u2014 name it via aria-labelledby. -->\n  @if (label) {\n    <span class=\"txt-field-label block\" [id]=\"groupId + '-label'\">\n      {{ label }}\n      @if (required) {\n        <span class=\"txt-required\" aria-hidden=\"true\">*</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    </span>\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" }]
+            args: [{ selector: 'fx-ui-radio', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        HeroIconComponent,
+                        MatTooltip,
+                        NgClass,
+                    ], template: "<div\n  class=\"w-full rounded-lg overflow-hidden\"\n  [class]=\"class()\"\n  role=\"radiogroup\"\n  [attr.aria-labelledby]=\"label ? groupId + '-label' : null\"\n  >\n  <!-- A radiogroup has no single control a <label> could point at \u2014 name it via aria-labelledby. -->\n  @if (label) {\n    <span class=\"txt-field-label block\" [id]=\"groupId + '-label'\">\n      {{ label }}\n      @if (required()) {\n        <span class=\"txt-required\" aria-hidden=\"true\">*</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    </span>\n  }\n\n  @for (opt of options(); track opt) {\n    <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 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      <span class=\"txt-default mb-0\">{{ opt.label }}</span>\n    </button>\n  }\n  @if (invalid) {\n    <div class=\"txt-invalid\">\n      {{ getErrorMessage(label) }}\n    </div>\n  }\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { label: [{
                 type: Input
             }], tooltip: [{
                 type: Input
-            }], required: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }], errorMessages: [{
-                type: Input
-            }], class: [{
-                type: Input
-            }] } });
-
-class RichTextAreaComponent extends FxComponent {
-    cdr;
-    styleLoader;
-    platformId;
-    editorContainer;
-    placeholder = 'Write something...';
-    toolbarOptions = [
-        // ['undo', 'redo'],
-        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
-        [{ 'font': [] }],
-        [{ 'size': ['small', false, 'large', 'huge'] }],
-        [{ 'align': [] }],
-        [{ 'color': [] }, { 'background': [] }],
-        ['bold', 'italic', 'underline', 'strike'],
-        ['blockquote', 'code-block'],
-        [{ 'list': 'ordered' }, { 'list': 'bullet' }],
-        [{ 'indent': '-1' }, { 'indent': '+1' }],
-        ['link', 'image'],
-        ['clean']
-    ];
-    contentChange = new EventEmitter();
-    quillInstance;
-    constructor(cdr, styleLoader, platformId) {
-        super();
-        this.cdr = cdr;
-        this.styleLoader = styleLoader;
-        this.platformId = platformId;
-    }
-    async ngAfterViewInit() {
-        if (!isPlatformBrowser(this.platformId))
-            return;
-        await this.styleLoader.load();
-        const QuillModule = await import('quill');
-        const Quill = QuillModule.default || QuillModule;
-        const icons = Quill.import('ui/icons');
-        // icons['undo'] = `<svg viewBox="0 0 18 18"><path d="M6.4 5.2H3L6.8 1l3.8 4.2H7.9C10.2 5.4 12 7.4 12 9.8c0 2.7-2.2 4.9-4.9 4.9S2.2 12.5 2.2 9.8H0c0 3.8 3.1 6.9 6.9 6.9s6.9-3.1 6.9-6.9S10.7 3 7 3v2.2z"></path></svg>`;
-        // icons['redo'] = `<svg viewBox="0 0 18 18"><path d="M11.6 5.2H15L11.2 1 7.4 5.2h2.7C7.8 5.4 6 7.4 6 9.8c0 2.7 2.2 4.9 4.9 4.9s4.9-2.2 4.9-4.9H18c0 3.8-3.1 6.9-6.9 6.9S4.2 13.6 4.2 9.8 7.3 3 11 3v2.2z"></path></svg>`;
-        this.quillInstance = new Quill(this.editorContainer.nativeElement, {
-            theme: 'snow',
-            placeholder: this.placeholder,
-            modules: {
-                history: true,
-                toolbar: this.toolbarOptions,
-            }
-        });
-        this.quillInstance.root.style.color = FxUtils.convertColorFromVariable('--text-primary');
-        const toolbar = this.quillInstance.getModule('toolbar');
-        toolbar.addHandler('undo', () => this.quillInstance.history.undo());
-        toolbar.addHandler('redo', () => this.quillInstance.history.redo());
-        if (this.value) {
-            this.quillInstance.root.innerHTML = this.value;
-        }
-        this.quillInstance.on('text-change', () => {
-            const html = this.quillInstance.root.innerHTML || '';
-            this.value = html;
-            this.onChange(html);
-            this.contentChange.emit(html);
-        });
-    }
-    writeValue(value) {
-        this.value = value || '';
-        if (this.quillInstance) {
-            this.quillInstance.root.innerHTML = this.value;
-        }
-    }
-    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: 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: ["@charset \"UTF-8\";@layer properties;:host{display:block}.ql-toolbar{border-top-left-radius:.25rem;border-top-right-radius:.25rem;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgb(var(--border-default));padding:calc(var(--spacing, .25rem) * 2)}.ql-container{border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.ql-editor{min-height:200px;padding:calc(var(--spacing, .25rem) * 3);font-size:1rem;line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ))}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\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: ["@charset \"UTF-8\";@layer properties;:host{display:block}.ql-toolbar{border-top-left-radius:.25rem;border-top-right-radius:.25rem;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgb(var(--border-default));padding:calc(var(--spacing, .25rem) * 2)}.ql-container{border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.ql-editor{min-height:200px;padding:calc(var(--spacing, .25rem) * 3);font-size:1rem;line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ))}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: QuillStyleLoaderService }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [PLATFORM_ID]
-                }] }], propDecorators: { editorContainer: [{
-                type: ViewChild,
-                args: ['editorContainer', { static: true }]
-            }], placeholder: [{
-                type: Input
-            }], toolbarOptions: [{
+            }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], errorMessages: [{
                 type: Input
-            }], contentChange: [{
-                type: Output
-            }] } });
+            }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 class SearchBarComponent extends FxComponent {
     ref;
-    placeholder = 'Search...';
-    search = new EventEmitter();
-    valueChange = new EventEmitter();
+    placeholder = input('Search...', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    search = output();
+    valueChange = output();
     constructor(ref) {
         super();
         this.ref = ref;
@@ -3384,35 +2902,29 @@ 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: 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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: SearchBarComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: SearchBarComponent, isStandalone: true, selector: "fx-ui-search-bar", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, 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  @if (value && !disabled) {\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)=\"clear()\"\n      aria-label=\"Clear\"\n      >\n      <i class=\"material-symbols-outlined text-lg select-none\">close</i>\n    </button>\n  }\n</div>\n", styles: [""], dependencies: [{ 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: SearchBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", 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: i0.ChangeDetectorRef }], propDecorators: { placeholder: [{
-                type: Input
-            }], search: [{
-                type: Output
-            }], valueChange: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'fx-ui-search-bar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [HeroIconComponent], 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  @if (value && !disabled) {\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)=\"clear()\"\n      aria-label=\"Clear\"\n      >\n      <i class=\"material-symbols-outlined text-lg select-none\">close</i>\n    </button>\n  }\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], search: [{ type: i0.Output, args: ["search"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
 
 let nextSelectId = 0;
 class SelectComponent extends FxComponent {
     ref;
     label = '';
     tooltip = '';
-    placeholder = '';
-    options = [];
-    multiple = false;
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
     errorMessages = {};
-    required = false;
-    class;
-    enableSearch = false;
-    searchFn;
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    class = input(...(ngDevMode ? [undefined, { debugName: "class" }] : /* istanbul ignore next */ []));
+    enableSearch = input(false, ...(ngDevMode ? [{ debugName: "enableSearch" }] : /* istanbul ignore next */ []));
+    searchFn = input(...(ngDevMode ? [undefined, { debugName: "searchFn" }] : /* istanbul ignore next */ []));
     /** Emits the current value when the select panel closes (useful for multiple mode). */
-    closed = new EventEmitter();
+    closed = output();
     fieldId = `fx-select-${nextSelectId++}`;
     searchTerm = '';
     filteredOptions = [];
@@ -3427,7 +2939,7 @@ class SelectComponent extends FxComponent {
         this.value = value ?? '';
     }
     ngOnInit() {
-        this.filteredOptions = this.options;
+        this.filteredOptions = this.options();
         this.search$
             .pipe(debounceTime(300), distinctUntilChanged(), takeUntilDestroyed(this.destroyRef))
             .subscribe((term) => this.performSearch(term));
@@ -3436,7 +2948,7 @@ class SelectComponent extends FxComponent {
         // 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.filteredOptions = this.options() ?? [];
             this.ref?.detectChanges();
         }
     }
@@ -3445,8 +2957,8 @@ class SelectComponent extends FxComponent {
     }
     onOpened(open) {
         if (open) {
-            this.filteredOptions = this.options;
-            if (this.enableSearch)
+            this.filteredOptions = this.options();
+            if (this.enableSearch())
                 this.searchTerm = '';
         }
         else {
@@ -3454,19 +2966,20 @@ class SelectComponent extends FxComponent {
         }
     }
     onSearchChange(value) {
-        if (!this.enableSearch)
+        if (!this.enableSearch())
             return;
         this.search$.next(value);
     }
     async performSearch(term) {
-        if (!this.enableSearch)
+        if (!this.enableSearch())
             return;
-        if (!this.searchFn) {
-            this.filteredOptions = this.options.filter((o) => o.label?.toLowerCase().includes(term.toLowerCase()));
+        const searchFn = this.searchFn();
+        if (!searchFn) {
+            this.filteredOptions = this.options().filter((o) => o.label?.toLowerCase().includes(term.toLowerCase()));
             this.ref.detectChanges();
             return;
         }
-        const result = await this.searchFn(term);
+        const result = await searchFn(term);
         this.filteredOptions = result;
         Promise.resolve().then(() => this.ref.detectChanges());
     }
@@ -3480,60 +2993,47 @@ 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: 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\" [attr.for]=\"fieldId\">\n      {{ label }}\n      @if (required) {\n        <span class=\"txt-required\" aria-hidden=\"true\">*</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      [id]=\"fieldId\"\n      [required]=\"!!required\"\n      [attr.aria-invalid]=\"invalid || null\"\n      [attr.aria-describedby]=\"invalid ? fieldId + '-error' : null\"\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            aria-label=\"Search\"\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 focus-visible:ring-2 focus-visible:ring-primary/50 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\" role=\"alert\" [id]=\"fieldId + '-error'\">\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: i57.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: "21.2.20", ngImport: i0, type: SelectComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: SelectComponent, isStandalone: true, selector: "fx-ui-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, enableSearch: { classPropertyName: "enableSearch", publicName: "enableSearch", isSignal: true, isRequired: false, transformFunction: null }, searchFn: { classPropertyName: "searchFn", publicName: "searchFn", isSignal: true, isRequired: false, transformFunction: null } }, 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\" [attr.for]=\"fieldId\">\n      {{ label }}\n      @if (required()) {\n        <span class=\"txt-required\" aria-hidden=\"true\">*</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      [id]=\"fieldId\"\n      [required]=\"!!required()\"\n      [attr.aria-invalid]=\"invalid || null\"\n      [attr.aria-describedby]=\"invalid ? fieldId + '-error' : null\"\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            aria-label=\"Search\"\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 focus-visible:ring-2 focus-visible:ring-primary/50 text-sm text-text-primary tracking-normal ring-0 transition-colors duration-500 ease-in-out\"\n            />\n        </div>\n      }\n      @for (option of filteredOptions; track option) {\n        <mat-option [value]=\"option.value\">\n          <span class=\"txt-default\">{{ option.label }}</span>\n        </mat-option>\n      }\n    </mat-select>\n  </mat-form-field>\n\n  @if (invalid) {\n    <div class=\"txt-invalid text-left\" role=\"alert\" [id]=\"fieldId + '-error'\">\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: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: 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: "ngmodule", type: FormsModule }, { 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: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", 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\" [attr.for]=\"fieldId\">\n      {{ label }}\n      @if (required) {\n        <span class=\"txt-required\" aria-hidden=\"true\">*</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      [id]=\"fieldId\"\n      [required]=\"!!required\"\n      [attr.aria-invalid]=\"invalid || null\"\n      [attr.aria-describedby]=\"invalid ? fieldId + '-error' : null\"\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            aria-label=\"Search\"\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 focus-visible:ring-2 focus-visible:ring-primary/50 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\" role=\"alert\" [id]=\"fieldId + '-error'\">\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"] }]
+            args: [{ selector: 'fx-ui-select', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        HeroIconComponent,
+                        MatTooltip,
+                        MatFormField,
+                        MatSelect,
+                        FormsModule,
+                        MatOption,
+                    ], template: "<div class=\"mb-4 text-left w-full\" [class]=\"class()\">\n  @if (label) {\n    <label class=\"block txt-field-label\" [attr.for]=\"fieldId\">\n      {{ label }}\n      @if (required()) {\n        <span class=\"txt-required\" aria-hidden=\"true\">*</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      [id]=\"fieldId\"\n      [required]=\"!!required()\"\n      [attr.aria-invalid]=\"invalid || null\"\n      [attr.aria-describedby]=\"invalid ? fieldId + '-error' : null\"\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            aria-label=\"Search\"\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 focus-visible:ring-2 focus-visible:ring-primary/50 text-sm text-text-primary tracking-normal ring-0 transition-colors duration-500 ease-in-out\"\n            />\n        </div>\n      }\n      @for (option of filteredOptions; track option) {\n        <mat-option [value]=\"option.value\">\n          <span class=\"txt-default\">{{ option.label }}</span>\n        </mat-option>\n      }\n    </mat-select>\n  </mat-form-field>\n\n  @if (invalid) {\n    <div class=\"txt-invalid text-left\" role=\"alert\" [id]=\"fieldId + '-error'\">\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
-            }], placeholder: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }], multiple: [{
-                type: Input
-            }], errorMessages: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], class: [{
-                type: Input
-            }], enableSearch: [{
+            }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], errorMessages: [{
                 type: Input
-            }], searchFn: [{
-                type: Input
-            }], closed: [{
-                type: Output
-            }] } });
+            }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], enableSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableSearch", required: false }] }], searchFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchFn", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 
 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: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    columns = input(5, ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    rows = input(5, ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: SkeletonTableLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: SkeletonTableLoadingComponent, isStandalone: true, selector: "fx-ui-skeleton-table-loading", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null } }, 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: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SkeletonTableLoadingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: SkeletonTableLoadingComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fx-ui-skeleton-table-loading', standalone: false, 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" }]
-        }], propDecorators: { columns: [{
-                type: Input
-            }], rows: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'fx-ui-skeleton-table-loading', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgStyle], 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" }]
+        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }] } });
 
 class SliderComponent extends FxComponent {
     ref;
-    trackRef;
-    thumbRef;
-    min = 0;
-    max = 100;
-    step = 1;
-    vertical = false;
-    valueChange = new EventEmitter();
+    trackRef = viewChild.required('track');
+    thumbRef = viewChild.required('thumb');
+    min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+    vertical = input(false, ...(ngDevMode ? [{ debugName: "vertical" }] : /* istanbul ignore next */ []));
+    valueChange = output();
     dragging = false;
     constructor(ref) {
         super();
@@ -3548,15 +3048,15 @@ class SliderComponent extends FxComponent {
         this.ref.markForCheck();
     }
     writeValue(value) {
-        this.value = this._normalizeValue(value ?? this.min);
+        this.value = this._normalizeValue(value ?? this.min());
         this.ref.markForCheck();
     }
     _normalizeValue(v) {
         if (!Number.isFinite(v))
-            v = this.min;
-        const clamped = clamp(v, this.min, this.max);
-        const stepped = Math.round((clamped - this.min) / this.step) * this.step + this.min;
-        const precision = Math.max(0, this._decimalPlaces(this.step));
+            v = this.min();
+        const clamped = Math.min(this.max(), Math.max(this.min(), v));
+        const stepped = Math.round((clamped - this.min()) / this.step()) * this.step() + this.min();
+        const precision = Math.max(0, this._decimalPlaces(this.step()));
         return parseFloat(stepped.toFixed(precision));
     }
     _decimalPlaces(n) {
@@ -3595,12 +3095,12 @@ class SliderComponent extends FxComponent {
         this._applyValue(newVal);
     }
     _coordToValue(clientX, clientY) {
-        const rect = this.trackRef.nativeElement.getBoundingClientRect();
-        let ratio = this.vertical
+        const rect = this.trackRef().nativeElement.getBoundingClientRect();
+        let ratio = this.vertical()
             ? 1 - (clientY - rect.top) / rect.height
             : (clientX - rect.left) / rect.width;
-        ratio = clamp(ratio, 0, 1);
-        const raw = this.min + ratio * (this.max - this.min);
+        ratio = Math.min(1, Math.max(0, ratio));
+        const raw = this.min() + ratio * (this.max() - this.min());
         return this._normalizeValue(raw);
     }
     onTrackClick(event) {
@@ -3614,20 +3114,20 @@ class SliderComponent extends FxComponent {
         if (this.disabled)
             return;
         const key = ev.key;
-        const largeStep = (this.max - this.min) / 10;
+        const largeStep = (this.max() - this.min()) / 10;
         let delta = 0;
         if (key === 'ArrowLeft' || key === 'ArrowDown')
-            delta = -this.step;
+            delta = -this.step();
         else if (key === 'ArrowRight' || key === 'ArrowUp')
-            delta = this.step;
+            delta = this.step();
         else if (key === 'PageDown')
             delta = -largeStep;
         else if (key === 'PageUp')
             delta = largeStep;
         else if (key === 'Home')
-            return this._applyValue(this.min);
+            return this._applyValue(this.min());
         else if (key === 'End')
-            return this._applyValue(this.max);
+            return this._applyValue(this.max());
         if (delta !== 0) {
             this._applyValue(this.value + delta);
             ev.preventDefault();
@@ -3643,54 +3143,39 @@ class SliderComponent extends FxComponent {
         }
     }
     get percent() {
-        if (this.max === this.min)
+        const min = this.min();
+        const max = this.max();
+        if (max === min)
             return 0;
-        return ((this.value - this.min) / (this.max - this.min)) * 100;
+        return ((this.value - min) / (max - min)) * 100;
     }
     thumbStyle() {
-        return this.vertical
+        return this.vertical()
             ? { 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: 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  <!-- Track click is a pointer shortcut; the thumb button below owns keyboard/focus. -->\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\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          aria-label=\"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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: SliderComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: SliderComponent, isStandalone: true, selector: "fx-ui-slider", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { listeners: { "keydown": "onKeydown($event)" } }, viewQueries: [{ propertyName: "trackRef", first: true, predicate: ["track"], descendants: true, isSignal: true }, { propertyName: "thumbRef", first: true, predicate: ["thumb"], descendants: true, isSignal: 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  <!-- Track click is a pointer shortcut; the thumb button below owns keyboard/focus. -->\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\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        @if (!vertical()) {\n          <div\n            class=\"absolute left-0 top-0 h-full rounded-full bg-primary\"\n            [style.width.%]=\"percent\"\n          ></div>\n        }\n\n        @if (vertical()) {\n          <div\n            class=\"absolute bottom-0 left-0 w-full rounded-full bg-primary\"\n            [style.height.%]=\"percent\"\n            style=\"transform-origin: bottom;\"\n          ></div>\n        }\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          aria-label=\"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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SliderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", 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  <!-- Track click is a pointer shortcut; the thumb button below owns keyboard/focus. -->\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\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          aria-label=\"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: i0.ChangeDetectorRef }], propDecorators: { trackRef: [{
-                type: ViewChild,
-                args: ['track', { static: true }]
-            }], thumbRef: [{
-                type: ViewChild,
-                args: ['thumb', { static: true }]
-            }], min: [{
-                type: Input
-            }], max: [{
-                type: Input
-            }], step: [{
-                type: Input
-            }], vertical: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }], onKeydown: [{
+            args: [{ selector: 'fx-ui-slider', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        NgClass,
+                        NgStyle,
+                        InputComponent,
+                    ], template: "<div\n  class=\"w-full select-none\"\n  [class.cursor-not-allowed]=\"disabled\"\n  [class.opacity-60]=\"disabled\"\n  role=\"group\"\n  >\n  <!-- Track click is a pointer shortcut; the thumb button below owns keyboard/focus. -->\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\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        @if (!vertical()) {\n          <div\n            class=\"absolute left-0 top-0 h-full rounded-full bg-primary\"\n            [style.width.%]=\"percent\"\n          ></div>\n        }\n\n        @if (vertical()) {\n          <div\n            class=\"absolute bottom-0 left-0 w-full rounded-full bg-primary\"\n            [style.height.%]=\"percent\"\n            style=\"transform-origin: bottom;\"\n          ></div>\n        }\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          aria-label=\"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: i0.ChangeDetectorRef }], propDecorators: { trackRef: [{ type: i0.ViewChild, args: ['track', { isSignal: true }] }], thumbRef: [{ type: i0.ViewChild, args: ['thumb', { isSignal: true }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], onKeydown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
             }] } });
 
 class SwitchComponent extends FxComponent {
-    cdr;
-    onSwitch = new EventEmitter();
+    onSwitch = output();
     /** Accessible name — the switch renders no visible text of its own. */
-    ariaLabel = '';
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     ngAfterViewInit() {
         this.cdr.detectChanges();
     }
-    constructor(cdr) {
-        super();
-        this.cdr = cdr;
-    }
     writeValue(value) {
         this.value = value ?? false;
     }
@@ -3702,43 +3187,35 @@ 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: 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: { ariaLabel: "ariaLabel" }, outputs: { onSwitch: "onSwitch" }, usesInheritance: true, ngImport: i0, template: "<button\n  type=\"button\"\n  role=\"switch\"\n  [attr.aria-checked]=\"!!value\"\n  [attr.aria-label]=\"ariaLabel || null\"\n  [disabled]=\"disabled\"\n  class=\"relative flex items-center w-10 h-5 rounded-full transition-colors duration-300 cursor-pointer disabled:cursor-not-allowed focus-visible:ring-2 focus-visible:ring-primary/50\"\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\" aria-hidden=\"true\">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\" aria-hidden=\"true\">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</button>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: SwitchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: SwitchComponent, isStandalone: true, selector: "fx-ui-switch", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSwitch: "onSwitch" }, usesInheritance: true, ngImport: i0, template: "<button\n  type=\"button\"\n  role=\"switch\"\n  [attr.aria-checked]=\"!!value\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  [disabled]=\"disabled\"\n  class=\"relative flex items-center w-10 h-5 rounded-full transition-colors duration-300 cursor-pointer disabled:cursor-not-allowed focus-visible:ring-2 focus-visible:ring-primary/50\"\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\" aria-hidden=\"true\">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\" aria-hidden=\"true\">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</button>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SwitchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: SwitchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fx-ui-switch', standalone: false, template: "<button\n  type=\"button\"\n  role=\"switch\"\n  [attr.aria-checked]=\"!!value\"\n  [attr.aria-label]=\"ariaLabel || null\"\n  [disabled]=\"disabled\"\n  class=\"relative flex items-center w-10 h-5 rounded-full transition-colors duration-300 cursor-pointer disabled:cursor-not-allowed focus-visible:ring-2 focus-visible:ring-primary/50\"\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\" aria-hidden=\"true\">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\" aria-hidden=\"true\">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</button>\n" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { onSwitch: [{
-                type: Output
-            }], ariaLabel: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'fx-ui-switch', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "<button\n  type=\"button\"\n  role=\"switch\"\n  [attr.aria-checked]=\"!!value\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  [disabled]=\"disabled\"\n  class=\"relative flex items-center w-10 h-5 rounded-full transition-colors duration-300 cursor-pointer disabled:cursor-not-allowed focus-visible:ring-2 focus-visible:ring-primary/50\"\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\" aria-hidden=\"true\">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\" aria-hidden=\"true\">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</button>\n" }]
+        }], propDecorators: { onSwitch: [{ type: i0.Output, args: ["onSwitch"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
 class TabComponent {
-    label;
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     icon;
-    content;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: TabComponent, isStandalone: false, selector: "fx-ui-tab", inputs: { label: "label", icon: "icon" }, viewQueries: [{ propertyName: "content", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: "<ng-template><ng-content></ng-content></ng-template>\n" });
+    content = viewChild.required(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.20", type: TabComponent, isStandalone: true, selector: "fx-ui-tab", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "content", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template><ng-content></ng-content></ng-template>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TabComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TabComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fx-ui-tab', standalone: false, template: "<ng-template><ng-content></ng-content></ng-template>\n" }]
-        }], propDecorators: { label: [{
+            args: [{ selector: 'fx-ui-tab', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template><ng-content></ng-content></ng-template>\n" }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{
                 type: Input
-            }], icon: [{
-                type: Input
-            }], content: [{
-                type: ViewChild,
-                args: [TemplateRef, { static: true }]
-            }] } });
+            }], content: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
 
 class TabGroupComponent {
     renderer;
-    tabs;
+    cdr = inject(ChangeDetectorRef);
+    tabs = contentChildren(TabComponent, ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
     activeIndex = 0;
-    tabListRef;
-    underlineRef;
+    tabListRef = viewChild.required('tabList');
+    underlineRef = viewChild.required('underline');
     canScrollLeft = false;
     canScrollRight = false;
     animateDelay = 50;
@@ -3752,6 +3229,7 @@ class TabGroupComponent {
             this.updateScrollButtons();
             this.updateUnderlinePosition();
             this.scrollToActiveTab(false);
+            this.cdr.markForCheck();
         }, 0);
     }
     selectTab(index) {
@@ -3760,7 +3238,7 @@ class TabGroupComponent {
     }
     /** Roving tablist keyboard nav: arrows move AND activate (selection follows focus). */
     onTabKeydown(event, index) {
-        const count = this.tabs.length;
+        const count = this.tabs().length;
         if (!count)
             return;
         let next;
@@ -3782,12 +3260,12 @@ class TabGroupComponent {
         }
         event.preventDefault();
         this.selectTab(next);
-        const buttons = this.tabListRef.nativeElement.querySelectorAll('.tab-btn');
+        const buttons = this.tabListRef().nativeElement.querySelectorAll('.tab-btn');
         buttons[next]?.focus();
     }
     updateUnderlinePosition() {
-        const tabListEl = this.tabListRef.nativeElement;
-        const underlineEl = this.underlineRef.nativeElement;
+        const tabListEl = this.tabListRef().nativeElement;
+        const underlineEl = this.underlineRef().nativeElement;
         const tabButtons = tabListEl.querySelectorAll('.tab-btn');
         const activeTab = tabButtons[this.activeIndex];
         if (!activeTab || !underlineEl)
@@ -3800,7 +3278,7 @@ class TabGroupComponent {
         this.renderer.setStyle(underlineEl, 'transform', `translateX(${translateX}px)`);
     }
     scrollToActiveTab(updateUnderlineAfter = true) {
-        const tabListEl = this.tabListRef.nativeElement;
+        const tabListEl = this.tabListRef().nativeElement;
         const tabButtons = tabListEl.querySelectorAll('.tab-btn');
         const activeTab = tabButtons[this.activeIndex];
         if (!activeTab)
@@ -3819,15 +3297,17 @@ class TabGroupComponent {
         setTimeout(() => {
             this.updateScrollButtons();
             this.updateUnderlinePosition();
+            this.cdr.markForCheck();
         }, updateUnderlineAfter ? this.animateDelay : 0);
     }
     scroll(direction) {
-        const tabListEl = this.tabListRef.nativeElement;
+        const tabListEl = this.tabListRef().nativeElement;
         const delta = direction === 'left' ? -this.scrollAmount : this.scrollAmount;
         tabListEl.scrollBy({ left: delta, behavior: 'smooth' });
         setTimeout(() => {
             this.updateScrollButtons();
             this.updateUnderlinePosition();
+            this.cdr.markForCheck();
         }, this.animateDelay);
     }
     onScroll() {
@@ -3835,7 +3315,7 @@ class TabGroupComponent {
         this.updateUnderlinePosition();
     }
     updateScrollButtons() {
-        const el = this.tabListRef.nativeElement;
+        const el = this.tabListRef().nativeElement;
         const scrollLeft = el.scrollLeft;
         const maxScrollLeft = el.scrollWidth - el.clientWidth;
         this.canScrollLeft = scrollLeft > 2;
@@ -3844,80 +3324,66 @@ class TabGroupComponent {
     onResize() {
         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    aria-label=\"Scroll tabs left\"\n    (click)=\"scroll('left')\"\n    [style.opacity]=\"canScrollLeft ? 1 : 0\"\n    [style.pointerEvents]=\"canScrollLeft ? 'auto' : 'none'\"\n    [attr.tabindex]=\"canScrollLeft ? null : -1\"\n    [attr.aria-hidden]=\"!canScrollLeft\"\n  >\n    <svg\n      aria-hidden=\"true\"\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    role=\"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      type=\"button\"\n      role=\"tab\"\n      [attr.aria-selected]=\"i === activeIndex\"\n      [tabindex]=\"i === activeIndex ? 0 : -1\"\n      (click)=\"selectTab(i)\"\n      (keydown)=\"onTabKeydown($event, 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    aria-label=\"Scroll tabs right\"\n    (click)=\"scroll('right')\"\n    [style.opacity]=\"canScrollRight ? 1 : 0\"\n    [style.pointerEvents]=\"canScrollRight ? 'auto' : 'none'\"\n    [attr.tabindex]=\"canScrollRight ? null : -1\"\n    [attr.aria-hidden]=\"!canScrollRight\"\n  >\n    <svg\n      aria-hidden=\"true\"\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\" role=\"tabpanel\" class=\"animate-fadeIn\">\n      <ng-container *ngTemplateOutlet=\"tab.content\"></ng-container>\n    </div>\n  </ng-container>\n</div>\n", styles: ["@charset \"UTF-8\";@layer properties;@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;top:0;left:0;z-index:10;display:flex;height:100%;align-items:center;background-color:rgb(var(--bg-primary));padding-inline:.5rem;transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}.right-scroll-button{position:absolute;top:0;right:0;z-index:10;display:flex;height:100%;align-items:center;background-color:rgb(var(--bg-primary));padding-inline:.5rem;transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}.tab-bar-btn{position:relative;padding-inline:1rem;padding-block:.5rem;font-size:.875rem;line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));white-space:nowrap;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}@property --tw-duration{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-duration: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TabGroupComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: TabGroupComponent, isStandalone: true, selector: "fx-ui-tab-group", inputs: { activeIndex: "activeIndex" }, host: { listeners: { "window:resize": "onResize()" } }, queries: [{ propertyName: "tabs", predicate: TabComponent, isSignal: true }], viewQueries: [{ propertyName: "tabListRef", first: true, predicate: ["tabList"], descendants: true, isSignal: true }, { propertyName: "underlineRef", first: true, predicate: ["underline"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"relative\">\n  <!-- Left scroll button -->\n  <button\n    class=\"left-scroll-button\"\n    type=\"button\"\n    aria-label=\"Scroll tabs left\"\n    (click)=\"scroll('left')\"\n    [style.opacity]=\"canScrollLeft ? 1 : 0\"\n    [style.pointerEvents]=\"canScrollLeft ? 'auto' : 'none'\"\n    [attr.tabindex]=\"canScrollLeft ? null : -1\"\n    [attr.aria-hidden]=\"!canScrollLeft\"\n    >\n    <svg\n      aria-hidden=\"true\"\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    role=\"tablist\"\n    class=\"relative flex overflow-x-auto no-scrollbar scroll-smooth\"\n    (scroll)=\"onScroll()\"\n    >\n    @for (tab of tabs(); track tab; let i = $index) {\n      <button\n        type=\"button\"\n        role=\"tab\"\n        [attr.aria-selected]=\"i === activeIndex\"\n        [tabindex]=\"i === activeIndex ? 0 : -1\"\n        (click)=\"selectTab(i)\"\n        (keydown)=\"onTabKeydown($event, 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\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    aria-label=\"Scroll tabs right\"\n    (click)=\"scroll('right')\"\n    [style.opacity]=\"canScrollRight ? 1 : 0\"\n    [style.pointerEvents]=\"canScrollRight ? 'auto' : 'none'\"\n    [attr.tabindex]=\"canScrollRight ? null : -1\"\n    [attr.aria-hidden]=\"!canScrollRight\"\n    >\n    <svg\n      aria-hidden=\"true\"\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  @for (tab of tabs(); track tab; let i = $index) {\n    @if (i === activeIndex) {\n      <div role=\"tabpanel\" class=\"animate-fadeIn\">\n        <ng-container *ngTemplateOutlet=\"tab.content()\"></ng-container>\n      </div>\n    }\n  }\n</div>\n", styles: ["@charset \"UTF-8\";@layer properties;@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;top:0;left:0;z-index:10;display:flex;height:100%;align-items:center;background-color:rgb(var(--bg-primary));padding-inline:.5rem;transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}.right-scroll-button{position:absolute;top:0;right:0;z-index:10;display:flex;height:100%;align-items:center;background-color:rgb(var(--bg-primary));padding-inline:.5rem;transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}.tab-bar-btn{position:relative;padding-inline:1rem;padding-block:.5rem;font-size:.875rem;line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));white-space:nowrap;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}@property --tw-duration{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-duration: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TabGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TabGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fx-ui-tab-group', standalone: false, template: "<div class=\"relative\">\n  <!-- Left scroll button -->\n  <button\n    class=\"left-scroll-button\"\n    type=\"button\"\n    aria-label=\"Scroll tabs left\"\n    (click)=\"scroll('left')\"\n    [style.opacity]=\"canScrollLeft ? 1 : 0\"\n    [style.pointerEvents]=\"canScrollLeft ? 'auto' : 'none'\"\n    [attr.tabindex]=\"canScrollLeft ? null : -1\"\n    [attr.aria-hidden]=\"!canScrollLeft\"\n  >\n    <svg\n      aria-hidden=\"true\"\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    role=\"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      type=\"button\"\n      role=\"tab\"\n      [attr.aria-selected]=\"i === activeIndex\"\n      [tabindex]=\"i === activeIndex ? 0 : -1\"\n      (click)=\"selectTab(i)\"\n      (keydown)=\"onTabKeydown($event, 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    aria-label=\"Scroll tabs right\"\n    (click)=\"scroll('right')\"\n    [style.opacity]=\"canScrollRight ? 1 : 0\"\n    [style.pointerEvents]=\"canScrollRight ? 'auto' : 'none'\"\n    [attr.tabindex]=\"canScrollRight ? null : -1\"\n    [attr.aria-hidden]=\"!canScrollRight\"\n  >\n    <svg\n      aria-hidden=\"true\"\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\" role=\"tabpanel\" class=\"animate-fadeIn\">\n      <ng-container *ngTemplateOutlet=\"tab.content\"></ng-container>\n    </div>\n  </ng-container>\n</div>\n", styles: ["@charset \"UTF-8\";@layer properties;@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;top:0;left:0;z-index:10;display:flex;height:100%;align-items:center;background-color:rgb(var(--bg-primary));padding-inline:.5rem;transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}.right-scroll-button{position:absolute;top:0;right:0;z-index:10;display:flex;height:100%;align-items:center;background-color:rgb(var(--bg-primary));padding-inline:.5rem;transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}.tab-bar-btn{position:relative;padding-inline:1rem;padding-block:.5rem;font-size:.875rem;line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));white-space:nowrap;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}@property --tw-duration{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-duration: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { tabs: [{
-                type: ContentChildren,
-                args: [TabComponent]
-            }], activeIndex: [{
-                type: Input
-            }], tabListRef: [{
-                type: ViewChild,
-                args: ['tabList', { static: true }]
-            }], underlineRef: [{
-                type: ViewChild,
-                args: ['underline', { static: true }]
-            }], onResize: [{
+            args: [{ selector: 'fx-ui-tab-group', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        HeroIconComponent,
+                        NgClass,
+                        NgTemplateOutlet,
+                        InputComponent,
+                    ], template: "<div class=\"relative\">\n  <!-- Left scroll button -->\n  <button\n    class=\"left-scroll-button\"\n    type=\"button\"\n    aria-label=\"Scroll tabs left\"\n    (click)=\"scroll('left')\"\n    [style.opacity]=\"canScrollLeft ? 1 : 0\"\n    [style.pointerEvents]=\"canScrollLeft ? 'auto' : 'none'\"\n    [attr.tabindex]=\"canScrollLeft ? null : -1\"\n    [attr.aria-hidden]=\"!canScrollLeft\"\n    >\n    <svg\n      aria-hidden=\"true\"\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    role=\"tablist\"\n    class=\"relative flex overflow-x-auto no-scrollbar scroll-smooth\"\n    (scroll)=\"onScroll()\"\n    >\n    @for (tab of tabs(); track tab; let i = $index) {\n      <button\n        type=\"button\"\n        role=\"tab\"\n        [attr.aria-selected]=\"i === activeIndex\"\n        [tabindex]=\"i === activeIndex ? 0 : -1\"\n        (click)=\"selectTab(i)\"\n        (keydown)=\"onTabKeydown($event, 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\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    aria-label=\"Scroll tabs right\"\n    (click)=\"scroll('right')\"\n    [style.opacity]=\"canScrollRight ? 1 : 0\"\n    [style.pointerEvents]=\"canScrollRight ? 'auto' : 'none'\"\n    [attr.tabindex]=\"canScrollRight ? null : -1\"\n    [attr.aria-hidden]=\"!canScrollRight\"\n    >\n    <svg\n      aria-hidden=\"true\"\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  @for (tab of tabs(); track tab; let i = $index) {\n    @if (i === activeIndex) {\n      <div role=\"tabpanel\" class=\"animate-fadeIn\">\n        <ng-container *ngTemplateOutlet=\"tab.content()\"></ng-container>\n      </div>\n    }\n  }\n</div>\n", styles: ["@charset \"UTF-8\";@layer properties;@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;top:0;left:0;z-index:10;display:flex;height:100%;align-items:center;background-color:rgb(var(--bg-primary));padding-inline:.5rem;transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}.right-scroll-button{position:absolute;top:0;right:0;z-index:10;display:flex;height:100%;align-items:center;background-color:rgb(var(--bg-primary));padding-inline:.5rem;transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}.tab-bar-btn{position:relative;padding-inline:1rem;padding-block:.5rem;font-size:.875rem;line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));white-space:nowrap;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}@property --tw-duration{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-duration: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TabComponent), { isSignal: true }] }], activeIndex: [{
+                type: Input
+            }], tabListRef: [{ type: i0.ViewChild, args: ['tabList', { isSignal: true }] }], underlineRef: [{ type: i0.ViewChild, args: ['underline', { isSignal: true }] }], onResize: [{
                 type: HostListener,
                 args: ['window:resize']
             }] } });
 
 class TableCell {
-    loading;
-    skeletonClass = 'h-4 w-full';
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TableCell, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: TableCell, isStandalone: false, selector: "fx-ui-table-cell", inputs: { loading: "loading", skeletonClass: "skeletonClass" }, ngImport: i0, template: "@if (!loading) {\n  <div animate.enter=\"fade-in-animation\" class=\"inline-block my-normal\">\n    <ng-content />\n  </div>\n} @else {\n  <div animate.enter=\"fade-in-animation\" class=\"skeleton-load my-semi\" [class]=\"skeletonClass\"></div>\n}\n", styles: [""] });
+    loading = input.required(...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    skeletonClass = input('h-4 w-full', ...(ngDevMode ? [{ debugName: "skeletonClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TableCell, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: TableCell, isStandalone: true, selector: "fx-ui-table-cell", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: true, transformFunction: null }, skeletonClass: { classPropertyName: "skeletonClass", publicName: "skeletonClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (!loading()) {\n  <div animate.enter=\"fade-in-animation\" class=\"inline-block my-normal\">\n    <ng-content />\n  </div>\n} @else {\n  <div animate.enter=\"fade-in-animation\" class=\"skeleton-load my-semi\" [class]=\"skeletonClass()\"></div>\n}\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TableCell, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TableCell, decorators: [{
             type: Component,
-            args: [{ selector: 'fx-ui-table-cell', standalone: false, template: "@if (!loading) {\n  <div animate.enter=\"fade-in-animation\" class=\"inline-block my-normal\">\n    <ng-content />\n  </div>\n} @else {\n  <div animate.enter=\"fade-in-animation\" class=\"skeleton-load my-semi\" [class]=\"skeletonClass\"></div>\n}\n" }]
-        }], propDecorators: { loading: [{
-                type: Input,
-                args: [{ required: true }]
-            }], skeletonClass: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'fx-ui-table-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!loading()) {\n  <div animate.enter=\"fade-in-animation\" class=\"inline-block my-normal\">\n    <ng-content />\n  </div>\n} @else {\n  <div animate.enter=\"fade-in-animation\" class=\"skeleton-load my-semi\" [class]=\"skeletonClass()\"></div>\n}\n" }]
+        }], propDecorators: { loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: true }] }], skeletonClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "skeletonClass", required: false }] }] } });
 
 class TagComponent {
-    label;
-    type = 'default';
-    rounded = true;
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    type = input('default', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    rounded = input(true, ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
     icon;
-    solid = false;
+    solid = input(false, ...(ngDevMode ? [{ debugName: "solid" }] : /* istanbul ignore next */ []));
+    /* EventEmitter (not output()) on purpose: the template branches on
+     * `clicked.observed` to only expose button semantics when someone listens —
+     * OutputEmitterRef has no equivalent. */
     clicked = new EventEmitter();
     onClick() {
         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: { clicked: "clicked" }, ngImport: i0, template: "<!-- Interactive semantics only when a (clicked) listener is attached. -->\n<div\n  (click)=\"onClick()\"\n  (keydown.enter)=\"onClick()\"\n  (keydown.space)=\"$event.preventDefault(); onClick()\"\n  [attr.role]=\"clicked.observed ? 'button' : null\"\n  [attr.tabindex]=\"clicked.observed ? 0 : null\"\n  [class]=\"\n    `flex flex-row gap-small ${rounded ? 'tag-round' : 'tag-square'} tag-${type}${solid ? '-solid' : ''}${clicked.observed ? ' cursor-pointer focus-visible:ring-2 focus-visible:ring-primary/50' : ''}`\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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: TagComponent, isStandalone: true, selector: "fx-ui-tag", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, solid: { classPropertyName: "solid", publicName: "solid", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<!-- Interactive semantics only when a (clicked) listener is attached. -->\n<div\n  (click)=\"onClick()\"\n  (keydown.enter)=\"onClick()\"\n  (keydown.space)=\"$event.preventDefault(); onClick()\"\n  [attr.role]=\"clicked.observed ? 'button' : null\"\n  [attr.tabindex]=\"clicked.observed ? 0 : null\"\n  [class]=\"\n    `flex flex-row gap-small ${rounded() ? 'tag-round' : 'tag-square'} tag-${type()}${solid() ? '-solid' : ''}${clicked.observed ? ' cursor-pointer focus-visible:ring-2 focus-visible:ring-primary/50' : ''}`\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TagComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TagComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fx-ui-tag', standalone: false, template: "<!-- Interactive semantics only when a (clicked) listener is attached. -->\n<div\n  (click)=\"onClick()\"\n  (keydown.enter)=\"onClick()\"\n  (keydown.space)=\"$event.preventDefault(); onClick()\"\n  [attr.role]=\"clicked.observed ? 'button' : null\"\n  [attr.tabindex]=\"clicked.observed ? 0 : null\"\n  [class]=\"\n    `flex flex-row gap-small ${rounded ? 'tag-round' : 'tag-square'} tag-${type}${solid ? '-solid' : ''}${clicked.observed ? ' cursor-pointer focus-visible:ring-2 focus-visible:ring-primary/50' : ''}`\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" }]
-        }], propDecorators: { label: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], rounded: [{
-                type: Input
-            }], icon: [{
-                type: Input
-            }], solid: [{
+            args: [{ selector: 'fx-ui-tag', changeDetection: ChangeDetectionStrategy.OnPush, imports: [HeroIconComponent], template: "<!-- Interactive semantics only when a (clicked) listener is attached. -->\n<div\n  (click)=\"onClick()\"\n  (keydown.enter)=\"onClick()\"\n  (keydown.space)=\"$event.preventDefault(); onClick()\"\n  [attr.role]=\"clicked.observed ? 'button' : null\"\n  [attr.tabindex]=\"clicked.observed ? 0 : null\"\n  [class]=\"\n    `flex flex-row gap-small ${rounded() ? 'tag-round' : 'tag-square'} tag-${type()}${solid() ? '-solid' : ''}${clicked.observed ? ' cursor-pointer focus-visible:ring-2 focus-visible:ring-primary/50' : ''}`\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" }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], icon: [{
                 type: Input
-            }], clicked: [{
+            }], solid: [{ type: i0.Input, args: [{ isSignal: true, alias: "solid", required: false }] }], clicked: [{
                 type: Output
             }] } });
 
 class TreeDiagram {
     zone;
     cdr;
-    data;
-    container;
-    root;
+    data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    container = viewChild.required('container');
+    root = viewChild.required('root');
     children;
     lines = [];
     svgWidth = 0;
@@ -3936,7 +3402,7 @@ class TreeDiagram {
                     return;
                 this.scheduleDraw();
             });
-            this.resizeObserver.observe(this.container.nativeElement);
+            this.resizeObserver.observe(this.container().nativeElement);
             setTimeout(() => this.scheduleDraw(), 50);
             setTimeout(() => this.scheduleDraw(), 150);
         });
@@ -3955,13 +3421,14 @@ class TreeDiagram {
         });
     }
     drawLines() {
-        if (!this.root || !this.children.length)
+        const root = this.root();
+        if (!root || !this.children.length)
             return;
-        const containerEl = this.container.nativeElement;
+        const containerEl = this.container().nativeElement;
         const rect = containerEl.getBoundingClientRect();
         if (rect.width === 0 || rect.height === 0)
             return;
-        const rootRect = this.root.nativeElement.getBoundingClientRect();
+        const rootRect = root.nativeElement.getBoundingClientRect();
         const rootX = rootRect.left + rootRect.width / 2 - rect.left;
         const rootBottomY = rootRect.bottom - rect.top;
         const childRects = this.children.map(c => c.nativeElement.getBoundingClientRect());
@@ -3996,34 +3463,26 @@ 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: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TreeDiagram, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: TreeDiagram, isStandalone: true, selector: "fx-ui-tree-diagram", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "root", first: true, predicate: ["root"], descendants: true, isSignal: 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    @for (child of data().children; track child) {\n      <div\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    }\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    @for (line of lines; track line) {\n      <line\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    }\n  </svg>\n\n</div>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TreeDiagram, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: TreeDiagram, decorators: [{
             type: Component,
-            args: [{ selector: 'fx-ui-tree-diagram', standalone: false, 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" }]
-        }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { data: [{
-                type: Input
-            }], container: [{
-                type: ViewChild,
-                args: ['container']
-            }], root: [{
-                type: ViewChild,
-                args: ['root']
-            }], children: [{
+            args: [{ selector: 'fx-ui-tree-diagram', changeDetection: ChangeDetectionStrategy.OnPush, 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    @for (child of data().children; track child) {\n      <div\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    }\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    @for (line of lines; track line) {\n      <line\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    }\n  </svg>\n\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], container: [{ type: i0.ViewChild, args: ['container', { isSignal: true }] }], root: [{ type: i0.ViewChild, args: ['root', { isSignal: true }] }], children: [{
                 type: ViewChildren,
                 args: ['child']
             }] } });
 
 class KanbanBoardComponent {
-    columns = [];
+    columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
     itemTemplate;
-    columnChanged = new EventEmitter();
+    columnChanged = output();
     /**
      * Get all column IDs for connecting drop lists
      */
     getColumnIds() {
-        return this.columns.map((col) => col.id);
+        return this.columns().map((col) => col.id);
     }
     /**
      * Handle drop event when item is moved
@@ -4049,28 +3508,30 @@ class KanbanBoardComponent {
             currentIndex: event.currentIndex,
         });
     }
-    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: ["@charset \"UTF-8\";@layer properties;.kanban-board{height:100%;width:100%;overflow-x:auto}.kanban-columns{display:flex;min-height:100%;gap:calc(var(--spacing, .25rem) * 4);padding:calc(var(--spacing, .25rem) * 4)}.kanban-column{display:flex;min-width:300px;flex-direction:column;border-radius:.5rem;background-color:var(--color-gray-50, oklch(98.5% .002 247.839));flex-shrink:0}@media (prefers-color-scheme: dark){.kanban-column{background-color:var(--color-gray-800, oklch(27.8% .033 256.848))}}.kanban-column-header{display:flex;align-items:center;justify-content:space-between;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-gray-200, oklch(92.8% .006 264.531));padding:calc(var(--spacing, .25rem) * 4)}@media (prefers-color-scheme: dark){.kanban-column-header{border-color:var(--color-gray-700, oklch(37.3% .034 259.733))}}.kanban-column-title{margin:0;font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:var(--color-gray-900, oklch(21% .034 264.665))}@media (prefers-color-scheme: dark){.kanban-column-title{color:var(--color-gray-100, oklch(96.7% .003 264.542))}}.kanban-column-count{border-radius:calc(infinity * 1px);background-color:var(--color-gray-200, oklch(92.8% .006 264.531));padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:var(--spacing, .25rem);font-size:.875rem;line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--color-gray-700, oklch(37.3% .034 259.733))}@media (prefers-color-scheme: dark){.kanban-column-count{background-color:var(--color-gray-700, oklch(37.3% .034 259.733))}}@media (prefers-color-scheme: dark){.kanban-column-count{color:var(--color-gray-300, oklch(87.2% .01 258.338))}}.kanban-column-content{flex:1;overflow-y:auto;padding:calc(var(--spacing, .25rem) * 4);min-height:200px}:where(.kanban-column-content>:not(:last-child)){--tw-space-y-reverse: 0;margin-block-start:calc(calc(var(--spacing, .25rem) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing, .25rem) * 3) * calc(1 - var(--tw-space-y-reverse)))}.kanban-item{border-radius:.5rem;border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-gray-200, oklch(92.8% .006 264.531));background-color:var(--color-white, #fff);--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(var(--shadow-color) / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);transition-property:box-shadow;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s;cursor:move}@media (prefers-color-scheme: dark){.kanban-item{border-color:var(--color-gray-600, oklch(44.6% .03 256.802))}}@media (prefers-color-scheme: dark){.kanban-item{background-color:var(--color-gray-700, oklch(37.3% .034 259.733))}}.kanban-item:hover{--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(var(--shadow-color) / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(var(--shadow-color) / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.kanban-item-default{padding:calc(var(--spacing, .25rem) * 4);color:var(--color-gray-900, oklch(21% .034 264.665))}@media (prefers-color-scheme: dark){.kanban-item-default{color:var(--color-gray-100, oklch(96.7% .003 264.542))}}.kanban-item-placeholder{border-radius:.5rem;border-style:var(--tw-border-style);border-width:2px;--tw-border-style: dashed;border-style:dashed;border-color:var(--color-gray-400, oklch(70.7% .022 261.325));background-color:var(--color-gray-200, oklch(92.8% .006 264.531));opacity:50%;min-height:60px}@media (prefers-color-scheme: dark){.kanban-item-placeholder{border-color:var(--color-gray-500, oklch(55.1% .027 264.364))}}@media (prefers-color-scheme: dark){.kanban-item-placeholder{background-color:var(--color-gray-600, oklch(44.6% .03 256.802))}}.kanban-column-empty{display:flex;height:calc(var(--spacing, .25rem) * 32);align-items:center;justify-content:center;font-size:.875rem;line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-gray-400, oklch(70.7% .022 261.325));border-radius:.5rem;border-style:var(--tw-border-style);border-width:2px;--tw-border-style: dashed;border-style:dashed;border-color:var(--color-gray-300, oklch(87.2% .01 258.338))}@media (prefers-color-scheme: dark){.kanban-column-empty{color:var(--color-gray-500, oklch(55.1% .027 264.364))}}@media (prefers-color-scheme: dark){.kanban-column-empty{border-color:var(--color-gray-600, oklch(44.6% .03 256.802))}}.cdk-drag-preview{border-radius:.5rem;opacity:80%;--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(var(--shadow-color) / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(var(--shadow-color) / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),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)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-space-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-duration{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial;--tw-space-y-reverse: 0;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-duration: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: KanbanBoardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: KanbanBoardComponent, isStandalone: true, selector: "fx-ui-kanban-board", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: false, isRequired: false, transformFunction: null } }, 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: ["@charset \"UTF-8\";@layer properties;.kanban-board{height:100%;width:100%;overflow-x:auto}.kanban-columns{display:flex;min-height:100%;gap:calc(var(--spacing, .25rem) * 4);padding:calc(var(--spacing, .25rem) * 4)}.kanban-column{display:flex;min-width:300px;flex-direction:column;border-radius:.5rem;background-color:var(--color-gray-50, oklch(98.5% .002 247.839));flex-shrink:0}@media(prefers-color-scheme:dark){.kanban-column{background-color:var(--color-gray-800, oklch(27.8% .033 256.848))}}.kanban-column-header{display:flex;align-items:center;justify-content:space-between;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-gray-200, oklch(92.8% .006 264.531));padding:calc(var(--spacing, .25rem) * 4)}@media(prefers-color-scheme:dark){.kanban-column-header{border-color:var(--color-gray-700, oklch(37.3% .034 259.733))}}.kanban-column-title{margin:0;font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:var(--color-gray-900, oklch(21% .034 264.665))}@media(prefers-color-scheme:dark){.kanban-column-title{color:var(--color-gray-100, oklch(96.7% .003 264.542))}}.kanban-column-count{border-radius:calc(infinity * 1px);background-color:var(--color-gray-200, oklch(92.8% .006 264.531));padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:var(--spacing, .25rem);font-size:.875rem;line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--color-gray-700, oklch(37.3% .034 259.733))}@media(prefers-color-scheme:dark){.kanban-column-count{background-color:var(--color-gray-700, oklch(37.3% .034 259.733))}}@media(prefers-color-scheme:dark){.kanban-column-count{color:var(--color-gray-300, oklch(87.2% .01 258.338))}}.kanban-column-content{flex:1;overflow-y:auto;padding:calc(var(--spacing, .25rem) * 4);min-height:200px}:where(.kanban-column-content>:not(:last-child)){--tw-space-y-reverse: 0;margin-block-start:calc(calc(var(--spacing, .25rem) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing, .25rem) * 3) * calc(1 - var(--tw-space-y-reverse)))}.kanban-item{border-radius:.5rem;border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-gray-200, oklch(92.8% .006 264.531));background-color:var(--color-white, #fff);--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(var(--shadow-color) / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);transition-property:box-shadow;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s;cursor:move}@media(prefers-color-scheme:dark){.kanban-item{border-color:var(--color-gray-600, oklch(44.6% .03 256.802))}}@media(prefers-color-scheme:dark){.kanban-item{background-color:var(--color-gray-700, oklch(37.3% .034 259.733))}}.kanban-item:hover{--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(var(--shadow-color) / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(var(--shadow-color) / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.kanban-item-default{padding:calc(var(--spacing, .25rem) * 4);color:var(--color-gray-900, oklch(21% .034 264.665))}@media(prefers-color-scheme:dark){.kanban-item-default{color:var(--color-gray-100, oklch(96.7% .003 264.542))}}.kanban-item-placeholder{border-radius:.5rem;border-style:var(--tw-border-style);border-width:2px;--tw-border-style: dashed;border-style:dashed;border-color:var(--color-gray-400, oklch(70.7% .022 261.325));background-color:var(--color-gray-200, oklch(92.8% .006 264.531));opacity:50%;min-height:60px}@media(prefers-color-scheme:dark){.kanban-item-placeholder{border-color:var(--color-gray-500, oklch(55.1% .027 264.364))}}@media(prefers-color-scheme:dark){.kanban-item-placeholder{background-color:var(--color-gray-600, oklch(44.6% .03 256.802))}}.kanban-column-empty{display:flex;height:calc(var(--spacing, .25rem) * 32);align-items:center;justify-content:center;font-size:.875rem;line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-gray-400, oklch(70.7% .022 261.325));border-radius:.5rem;border-style:var(--tw-border-style);border-width:2px;--tw-border-style: dashed;border-style:dashed;border-color:var(--color-gray-300, oklch(87.2% .01 258.338))}@media(prefers-color-scheme:dark){.kanban-column-empty{color:var(--color-gray-500, oklch(55.1% .027 264.364))}}@media(prefers-color-scheme:dark){.kanban-column-empty{border-color:var(--color-gray-600, oklch(44.6% .03 256.802))}}.cdk-drag-preview{border-radius:.5rem;opacity:80%;--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(var(--shadow-color) / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(var(--shadow-color) / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),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)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-space-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-duration{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial;--tw-space-y-reverse: 0;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-duration: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: 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: 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: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KanbanBoardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", 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: ["@charset \"UTF-8\";@layer properties;.kanban-board{height:100%;width:100%;overflow-x:auto}.kanban-columns{display:flex;min-height:100%;gap:calc(var(--spacing, .25rem) * 4);padding:calc(var(--spacing, .25rem) * 4)}.kanban-column{display:flex;min-width:300px;flex-direction:column;border-radius:.5rem;background-color:var(--color-gray-50, oklch(98.5% .002 247.839));flex-shrink:0}@media (prefers-color-scheme: dark){.kanban-column{background-color:var(--color-gray-800, oklch(27.8% .033 256.848))}}.kanban-column-header{display:flex;align-items:center;justify-content:space-between;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-gray-200, oklch(92.8% .006 264.531));padding:calc(var(--spacing, .25rem) * 4)}@media (prefers-color-scheme: dark){.kanban-column-header{border-color:var(--color-gray-700, oklch(37.3% .034 259.733))}}.kanban-column-title{margin:0;font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:var(--color-gray-900, oklch(21% .034 264.665))}@media (prefers-color-scheme: dark){.kanban-column-title{color:var(--color-gray-100, oklch(96.7% .003 264.542))}}.kanban-column-count{border-radius:calc(infinity * 1px);background-color:var(--color-gray-200, oklch(92.8% .006 264.531));padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:var(--spacing, .25rem);font-size:.875rem;line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--color-gray-700, oklch(37.3% .034 259.733))}@media (prefers-color-scheme: dark){.kanban-column-count{background-color:var(--color-gray-700, oklch(37.3% .034 259.733))}}@media (prefers-color-scheme: dark){.kanban-column-count{color:var(--color-gray-300, oklch(87.2% .01 258.338))}}.kanban-column-content{flex:1;overflow-y:auto;padding:calc(var(--spacing, .25rem) * 4);min-height:200px}:where(.kanban-column-content>:not(:last-child)){--tw-space-y-reverse: 0;margin-block-start:calc(calc(var(--spacing, .25rem) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing, .25rem) * 3) * calc(1 - var(--tw-space-y-reverse)))}.kanban-item{border-radius:.5rem;border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-gray-200, oklch(92.8% .006 264.531));background-color:var(--color-white, #fff);--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(var(--shadow-color) / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);transition-property:box-shadow;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s;cursor:move}@media (prefers-color-scheme: dark){.kanban-item{border-color:var(--color-gray-600, oklch(44.6% .03 256.802))}}@media (prefers-color-scheme: dark){.kanban-item{background-color:var(--color-gray-700, oklch(37.3% .034 259.733))}}.kanban-item:hover{--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(var(--shadow-color) / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(var(--shadow-color) / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.kanban-item-default{padding:calc(var(--spacing, .25rem) * 4);color:var(--color-gray-900, oklch(21% .034 264.665))}@media (prefers-color-scheme: dark){.kanban-item-default{color:var(--color-gray-100, oklch(96.7% .003 264.542))}}.kanban-item-placeholder{border-radius:.5rem;border-style:var(--tw-border-style);border-width:2px;--tw-border-style: dashed;border-style:dashed;border-color:var(--color-gray-400, oklch(70.7% .022 261.325));background-color:var(--color-gray-200, oklch(92.8% .006 264.531));opacity:50%;min-height:60px}@media (prefers-color-scheme: dark){.kanban-item-placeholder{border-color:var(--color-gray-500, oklch(55.1% .027 264.364))}}@media (prefers-color-scheme: dark){.kanban-item-placeholder{background-color:var(--color-gray-600, oklch(44.6% .03 256.802))}}.kanban-column-empty{display:flex;height:calc(var(--spacing, .25rem) * 32);align-items:center;justify-content:center;font-size:.875rem;line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-gray-400, oklch(70.7% .022 261.325));border-radius:.5rem;border-style:var(--tw-border-style);border-width:2px;--tw-border-style: dashed;border-style:dashed;border-color:var(--color-gray-300, oklch(87.2% .01 258.338))}@media (prefers-color-scheme: dark){.kanban-column-empty{color:var(--color-gray-500, oklch(55.1% .027 264.364))}}@media (prefers-color-scheme: dark){.kanban-column-empty{border-color:var(--color-gray-600, oklch(44.6% .03 256.802))}}.cdk-drag-preview{border-radius:.5rem;opacity:80%;--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(var(--shadow-color) / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(var(--shadow-color) / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),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)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-space-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-duration{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial;--tw-space-y-reverse: 0;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-duration: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
-        }], propDecorators: { columns: [{
-                type: Input
-            }], itemTemplate: [{
-                type: Input
-            }], columnChanged: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'fx-ui-kanban-board', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CdkDropList,
+                        CdkDrag,
+                        CdkDragPlaceholder,
+                        NgTemplateOutlet,
+                    ], 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: ["@charset \"UTF-8\";@layer properties;.kanban-board{height:100%;width:100%;overflow-x:auto}.kanban-columns{display:flex;min-height:100%;gap:calc(var(--spacing, .25rem) * 4);padding:calc(var(--spacing, .25rem) * 4)}.kanban-column{display:flex;min-width:300px;flex-direction:column;border-radius:.5rem;background-color:var(--color-gray-50, oklch(98.5% .002 247.839));flex-shrink:0}@media(prefers-color-scheme:dark){.kanban-column{background-color:var(--color-gray-800, oklch(27.8% .033 256.848))}}.kanban-column-header{display:flex;align-items:center;justify-content:space-between;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-gray-200, oklch(92.8% .006 264.531));padding:calc(var(--spacing, .25rem) * 4)}@media(prefers-color-scheme:dark){.kanban-column-header{border-color:var(--color-gray-700, oklch(37.3% .034 259.733))}}.kanban-column-title{margin:0;font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:var(--color-gray-900, oklch(21% .034 264.665))}@media(prefers-color-scheme:dark){.kanban-column-title{color:var(--color-gray-100, oklch(96.7% .003 264.542))}}.kanban-column-count{border-radius:calc(infinity * 1px);background-color:var(--color-gray-200, oklch(92.8% .006 264.531));padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:var(--spacing, .25rem);font-size:.875rem;line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--color-gray-700, oklch(37.3% .034 259.733))}@media(prefers-color-scheme:dark){.kanban-column-count{background-color:var(--color-gray-700, oklch(37.3% .034 259.733))}}@media(prefers-color-scheme:dark){.kanban-column-count{color:var(--color-gray-300, oklch(87.2% .01 258.338))}}.kanban-column-content{flex:1;overflow-y:auto;padding:calc(var(--spacing, .25rem) * 4);min-height:200px}:where(.kanban-column-content>:not(:last-child)){--tw-space-y-reverse: 0;margin-block-start:calc(calc(var(--spacing, .25rem) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing, .25rem) * 3) * calc(1 - var(--tw-space-y-reverse)))}.kanban-item{border-radius:.5rem;border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-gray-200, oklch(92.8% .006 264.531));background-color:var(--color-white, #fff);--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(var(--shadow-color) / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);transition-property:box-shadow;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s;cursor:move}@media(prefers-color-scheme:dark){.kanban-item{border-color:var(--color-gray-600, oklch(44.6% .03 256.802))}}@media(prefers-color-scheme:dark){.kanban-item{background-color:var(--color-gray-700, oklch(37.3% .034 259.733))}}.kanban-item:hover{--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(var(--shadow-color) / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(var(--shadow-color) / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.kanban-item-default{padding:calc(var(--spacing, .25rem) * 4);color:var(--color-gray-900, oklch(21% .034 264.665))}@media(prefers-color-scheme:dark){.kanban-item-default{color:var(--color-gray-100, oklch(96.7% .003 264.542))}}.kanban-item-placeholder{border-radius:.5rem;border-style:var(--tw-border-style);border-width:2px;--tw-border-style: dashed;border-style:dashed;border-color:var(--color-gray-400, oklch(70.7% .022 261.325));background-color:var(--color-gray-200, oklch(92.8% .006 264.531));opacity:50%;min-height:60px}@media(prefers-color-scheme:dark){.kanban-item-placeholder{border-color:var(--color-gray-500, oklch(55.1% .027 264.364))}}@media(prefers-color-scheme:dark){.kanban-item-placeholder{background-color:var(--color-gray-600, oklch(44.6% .03 256.802))}}.kanban-column-empty{display:flex;height:calc(var(--spacing, .25rem) * 32);align-items:center;justify-content:center;font-size:.875rem;line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-gray-400, oklch(70.7% .022 261.325));border-radius:.5rem;border-style:var(--tw-border-style);border-width:2px;--tw-border-style: dashed;border-style:dashed;border-color:var(--color-gray-300, oklch(87.2% .01 258.338))}@media(prefers-color-scheme:dark){.kanban-column-empty{color:var(--color-gray-500, oklch(55.1% .027 264.364))}}@media(prefers-color-scheme:dark){.kanban-column-empty{border-color:var(--color-gray-600, oklch(44.6% .03 256.802))}}.cdk-drag-preview{border-radius:.5rem;opacity:80%;--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(var(--shadow-color) / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(var(--shadow-color) / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),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)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-space-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-duration{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial;--tw-space-y-reverse: 0;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-duration: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], itemTemplate: [{
+                type: Input
+            }], columnChanged: [{ type: i0.Output, args: ["columnChanged"] }] } });
 
 class DrawerComponent {
     router;
-    items = [];
+    cdr = inject(ChangeDetectorRef);
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
     isExpanded = true;
     logo;
     version;
-    toggleExpanded = new EventEmitter();
-    itemClicked = new EventEmitter();
+    toggleExpanded = output();
+    itemClicked = output();
     expandedItems = new Set();
     currentRoute = '';
     destroy$ = new Subject();
@@ -4086,6 +3547,7 @@ class DrawerComponent {
             .subscribe((event) => {
             this.currentRoute = event.urlAfterRedirects || event.url;
             this.autoExpandActiveParents();
+            this.cdr.markForCheck();
         });
         // Auto-expand parents of active route on init
         this.autoExpandActiveParents();
@@ -4157,7 +3619,7 @@ class DrawerComponent {
             }
             return false;
         };
-        expandParents(this.items);
+        expandParents(this.items());
     }
     getAccordionState(itemId) {
         return this.isAccordionExpanded(itemId) ? 'expanded' : 'collapsed';
@@ -4165,8 +3627,8 @@ class DrawerComponent {
     getDrawerState() {
         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        alt=\"Home\"\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    [attr.aria-label]=\"isExpanded ? 'Collapse navigation' : 'Expand navigation'\"\n    [attr.aria-expanded]=\"isExpanded\"\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\";@layer properties;:host{display:block;height:100%}.drawer-host-wrapper{position:relative;height:100%;border-right-style:var(--tw-border-style);border-right-width:1px;border-color:rgb(var(--border-default))}.drawer-container{display:flex;height:100%;flex-direction:column;overflow:auto;background-color:rgb(var(--bg-primary));padding-inline:calc(var(--spacing, .25rem) * 2);transition:width .3s cubic-bezier(.4,0,.2,1)}.toggle-btn{position:absolute;top:50%;z-index:50;display:flex;height:calc(var(--spacing, .25rem) * 6);width:calc(var(--spacing, .25rem) * 6);--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;border-color:rgb(var(--border-default));background-color:rgb(var(--bg-primary));--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(var(--shadow-color) / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);right:-12px;transition:all .2s ease}.toggle-btn:hover{background-color:rgb(var(--bg-primary-hover));--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(var(--shadow-color) / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(var(--shadow-color) / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.toggle-btn:active{transform:translateY(-50%) scale(.9)}.toggle-btn:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgb(var(--primary))}.drawer-nav{flex:1;overflow-x:hidden;overflow-y:auto;padding-block:calc(var(--spacing, .25rem) * 2)}.drawer-nav::-webkit-scrollbar{width:calc(var(--spacing, .25rem) * 1.5)}.drawer-nav::-webkit-scrollbar-track{background-color:transparent}.drawer-nav::-webkit-scrollbar-thumb{border-radius:.125rem;background-color:rgb(var(--border-default))}.drawer-nav::-webkit-scrollbar-thumb:hover{background-color:rgb(var(--text-placeholder))}.drawer-item-wrapper{position:relative}.drawer-item{position:relative;margin-top:var(--spacing, .25rem);display:flex;min-height:calc(var(--spacing, .25rem) * 8);width:100%;cursor:pointer;align-items:center;border-radius:.25rem;--tw-border-style: none;border-style:none;background-color:transparent;padding-inline:1rem;padding-block:calc(var(--spacing, .25rem) * 2);color:rgb(var(--text-primary));text-decoration-line:none;transition:all .2s ease;-webkit-tap-highlight-color:transparent;--tw-outline-style: none;outline-style:none}.drawer-item:hover{--tw-scale-x: 95%;--tw-scale-y: 95%;--tw-scale-z: 95%;scale:var(--tw-scale-x) var(--tw-scale-y);background-color:rgb(var(--bg-primary-hover));color:rgb(var(--text-primary))}.drawer-item.active{background-image:linear-gradient(135deg,rgb(var(--gradient-primary-start)),rgb(var(--gradient-primary-end)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--color-white, #fff)}.drawer-item.active .item-icon{color:var(--color-white, #fff)}.drawer-item:active{transform:scale(.98)}.drawer-item:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgb(var(--primary))}.item-content{display:flex;width:100%;align-items:center;gap:calc(var(--spacing, .25rem) * 3);overflow:hidden}.item-icon{flex-shrink:0;color:inherit}.item-label{flex:1;overflow:hidden;text-align:left;font-size:13px;--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);text-overflow:ellipsis;white-space:nowrap}.chevron-icon{margin-left:auto;flex-shrink:0;color:rgb(var(--text-primary));transition:transform .3s cubic-bezier(.4,0,.2,1)}.chevron-icon.rotated{transform:rotate(180deg)}.accordion-children{overflow:hidden}.drawer-version{display:flex;align-items:center;justify-content:center;border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgb(var(--border-default));padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3);font-size:11px;color:rgb(var(--text-placeholder));-webkit-user-select:none;user-select:none;font-family:Roboto,monospace}.drawer-version-dot{display:block;height:calc(var(--spacing, .25rem) * 1.5);width:calc(var(--spacing, .25rem) * 1.5);border-radius:calc(infinity * 1px);background-color:rgb(var(--text-placeholder))}.drawer-container[style*=\"width: 64px\"] .drawer-item{justify-content:center;padding-left:16px!important}.drawer-container[style*=\"width: 64px\"] .item-content{justify-content:center}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-translate-x{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-y{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-z{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-scale-x{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-scale-y{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-scale-z{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-translate-x: 0;--tw-translate-y: 0;--tw-translate-z: 0;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-outline-style: solid;--tw-scale-x: 1;--tw-scale-y: 1;--tw-scale-z: 1;--tw-font-weight: initial;--tw-leading: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\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: i57.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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: DrawerComponent, deps: [{ token: i2$1.Router }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: DrawerComponent, isStandalone: true, selector: "fx-ui-drawer", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: false, isRequired: false, transformFunction: null }, logo: { classPropertyName: "logo", publicName: "logo", isSignal: false, isRequired: false, transformFunction: null }, version: { classPropertyName: "version", publicName: "version", isSignal: false, isRequired: false, transformFunction: null } }, 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        alt=\"Home\"\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      @for (item of items(); track item) {\n        <ng-container\n          *ngTemplateOutlet=\"drawerItem; context: { $implicit: item, level: 0 }\"\n        ></ng-container>\n      }\n    </nav>\n\n    <!-- Version -->\n    @if (version) {\n      <div class=\"drawer-version\" [matTooltip]=\"!isExpanded ? version : ''\" matTooltipPosition=\"right\">\n        @if (isExpanded) {\n          <span>{{ version }}</span>\n        }\n        @if (!isExpanded) {\n          <span class=\"drawer-version-dot\"></span>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Floating Toggle Button on right border -->\n  <button\n    type=\"button\"\n    class=\"toggle-btn\"\n    [attr.aria-label]=\"isExpanded ? 'Collapse navigation' : 'Expand navigation'\"\n    [attr.aria-expanded]=\"isExpanded\"\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    @if (item.route && !item.children) {\n      <a\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          @if (isExpanded) {\n            <span class=\"item-label\">{{ item.label }}</span>\n          }\n        </div>\n      </a>\n    }\n\n    @if (!item.route || item.children) {\n      <button\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          @if (isExpanded) {\n            <span class=\"item-label\">{{ item.label }}</span>\n          }\n          @if (isExpanded && item.children && item.children.length > 0) {\n            <fx-ui-hero-icon\n              [icon]=\"'chevron-down'\"\n              [size]=\"16\"\n              class=\"chevron-icon\"\n              [class.rotated]=\"isAccordionExpanded(item.id)\"\n            ></fx-ui-hero-icon>\n          }\n        </div>\n      </button>\n    }\n\n    <!-- Accordion Children -->\n    @if (item.children && item.children.length > 0) {\n      <div\n        class=\"accordion-children\"\n        [@accordionExpand]=\"getAccordionState(item.id)\"\n        >\n        @for (child of item.children; track child) {\n          <ng-container\n            *ngTemplateOutlet=\"drawerItem; context: { $implicit: child, level: level + 1 }\"\n          ></ng-container>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";@layer properties;:host{display:block;height:100%}.drawer-host-wrapper{position:relative;height:100%;border-right-style:var(--tw-border-style);border-right-width:1px;border-color:rgb(var(--border-default))}.drawer-container{display:flex;height:100%;flex-direction:column;overflow:auto;background-color:rgb(var(--bg-primary));padding-inline:calc(var(--spacing, .25rem) * 2);transition:width .3s cubic-bezier(.4,0,.2,1)}.toggle-btn{position:absolute;top:50%;z-index:50;display:flex;height:calc(var(--spacing, .25rem) * 6);width:calc(var(--spacing, .25rem) * 6);--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;border-color:rgb(var(--border-default));background-color:rgb(var(--bg-primary));--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(var(--shadow-color) / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);right:-12px;transition:all .2s ease}.toggle-btn:hover{background-color:rgb(var(--bg-primary-hover));--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(var(--shadow-color) / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(var(--shadow-color) / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.toggle-btn:active{transform:translateY(-50%) scale(.9)}.toggle-btn:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgb(var(--primary))}.drawer-nav{flex:1;overflow-x:hidden;overflow-y:auto;padding-block:calc(var(--spacing, .25rem) * 2)}.drawer-nav::-webkit-scrollbar{width:calc(var(--spacing, .25rem) * 1.5)}.drawer-nav::-webkit-scrollbar-track{background-color:transparent}.drawer-nav::-webkit-scrollbar-thumb{border-radius:.125rem;background-color:rgb(var(--border-default))}.drawer-nav::-webkit-scrollbar-thumb:hover{background-color:rgb(var(--text-placeholder))}.drawer-item-wrapper{position:relative}.drawer-item{position:relative;margin-top:var(--spacing, .25rem);display:flex;min-height:calc(var(--spacing, .25rem) * 8);width:100%;cursor:pointer;align-items:center;border-radius:.25rem;--tw-border-style: none;border-style:none;background-color:transparent;padding-inline:1rem;padding-block:calc(var(--spacing, .25rem) * 2);color:rgb(var(--text-primary));text-decoration-line:none;transition:all .2s ease}.drawer-item:hover{--tw-scale-x: 95%;--tw-scale-y: 95%;--tw-scale-z: 95%;scale:var(--tw-scale-x) var(--tw-scale-y);background-color:rgb(var(--bg-primary-hover));color:rgb(var(--text-primary))}.drawer-item.active{background-image:linear-gradient(135deg,rgb(var(--gradient-primary-start)),rgb(var(--gradient-primary-end)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--color-white, #fff)}.drawer-item.active .item-icon{color:var(--color-white, #fff)}.drawer-item:active{transform:scale(.98)}.drawer-item:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgb(var(--primary))}.drawer-item{-webkit-tap-highlight-color:transparent;--tw-outline-style: none;outline-style:none}.item-content{display:flex;width:100%;align-items:center;gap:calc(var(--spacing, .25rem) * 3);overflow:hidden}.item-icon{flex-shrink:0;color:inherit}.item-label{flex:1;overflow:hidden;text-align:left;font-size:13px;--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);text-overflow:ellipsis;white-space:nowrap}.chevron-icon{margin-left:auto;flex-shrink:0;color:rgb(var(--text-primary));transition:transform .3s cubic-bezier(.4,0,.2,1)}.chevron-icon.rotated{transform:rotate(180deg)}.accordion-children{overflow:hidden}.drawer-version{display:flex;align-items:center;justify-content:center;border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgb(var(--border-default));padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3);font-size:11px;color:rgb(var(--text-placeholder));-webkit-user-select:none;user-select:none;font-family:Roboto,monospace}.drawer-version-dot{display:block;height:calc(var(--spacing, .25rem) * 1.5);width:calc(var(--spacing, .25rem) * 1.5);border-radius:calc(infinity * 1px);background-color:rgb(var(--text-placeholder))}.drawer-container[style*=\"width: 64px\"] .drawer-item{justify-content:center;padding-left:16px!important}.drawer-container[style*=\"width: 64px\"] .item-content{justify-content:center}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-translate-x{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-y{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-z{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-scale-x{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-scale-y{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-scale-z{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-translate-x: 0;--tw-translate-y: 0;--tw-translate-z: 0;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-outline-style: solid;--tw-scale-x: 1;--tw-scale-y: 1;--tw-scale-z: 1;--tw-font-weight: initial;--tw-leading: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: 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"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], animations: [
             trigger('drawerExpand', [
                 state('collapsed', style({ width: '70px' })),
                 state('expanded', style({ width: '260px' })),
@@ -4177,11 +3639,11 @@ class DrawerComponent {
                 state('expanded', style({ height: '*', overflow: 'visible', opacity: 1 })),
                 transition('collapsed <=> expanded', animate('300ms cubic-bezier(0.4, 0, 0.2, 1)')),
             ]),
-        ] });
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DrawerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: DrawerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fx-ui-drawer', standalone: false, animations: [
+            args: [{ selector: 'fx-ui-drawer', animations: [
                         trigger('drawerExpand', [
                             state('collapsed', style({ width: '70px' })),
                             state('expanded', style({ width: '260px' })),
@@ -4192,64 +3654,58 @@ 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        alt=\"Home\"\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    [attr.aria-label]=\"isExpanded ? 'Collapse navigation' : 'Expand navigation'\"\n    [attr.aria-expanded]=\"isExpanded\"\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\";@layer properties;:host{display:block;height:100%}.drawer-host-wrapper{position:relative;height:100%;border-right-style:var(--tw-border-style);border-right-width:1px;border-color:rgb(var(--border-default))}.drawer-container{display:flex;height:100%;flex-direction:column;overflow:auto;background-color:rgb(var(--bg-primary));padding-inline:calc(var(--spacing, .25rem) * 2);transition:width .3s cubic-bezier(.4,0,.2,1)}.toggle-btn{position:absolute;top:50%;z-index:50;display:flex;height:calc(var(--spacing, .25rem) * 6);width:calc(var(--spacing, .25rem) * 6);--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;border-color:rgb(var(--border-default));background-color:rgb(var(--bg-primary));--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(var(--shadow-color) / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);right:-12px;transition:all .2s ease}.toggle-btn:hover{background-color:rgb(var(--bg-primary-hover));--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(var(--shadow-color) / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(var(--shadow-color) / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.toggle-btn:active{transform:translateY(-50%) scale(.9)}.toggle-btn:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgb(var(--primary))}.drawer-nav{flex:1;overflow-x:hidden;overflow-y:auto;padding-block:calc(var(--spacing, .25rem) * 2)}.drawer-nav::-webkit-scrollbar{width:calc(var(--spacing, .25rem) * 1.5)}.drawer-nav::-webkit-scrollbar-track{background-color:transparent}.drawer-nav::-webkit-scrollbar-thumb{border-radius:.125rem;background-color:rgb(var(--border-default))}.drawer-nav::-webkit-scrollbar-thumb:hover{background-color:rgb(var(--text-placeholder))}.drawer-item-wrapper{position:relative}.drawer-item{position:relative;margin-top:var(--spacing, .25rem);display:flex;min-height:calc(var(--spacing, .25rem) * 8);width:100%;cursor:pointer;align-items:center;border-radius:.25rem;--tw-border-style: none;border-style:none;background-color:transparent;padding-inline:1rem;padding-block:calc(var(--spacing, .25rem) * 2);color:rgb(var(--text-primary));text-decoration-line:none;transition:all .2s ease;-webkit-tap-highlight-color:transparent;--tw-outline-style: none;outline-style:none}.drawer-item:hover{--tw-scale-x: 95%;--tw-scale-y: 95%;--tw-scale-z: 95%;scale:var(--tw-scale-x) var(--tw-scale-y);background-color:rgb(var(--bg-primary-hover));color:rgb(var(--text-primary))}.drawer-item.active{background-image:linear-gradient(135deg,rgb(var(--gradient-primary-start)),rgb(var(--gradient-primary-end)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--color-white, #fff)}.drawer-item.active .item-icon{color:var(--color-white, #fff)}.drawer-item:active{transform:scale(.98)}.drawer-item:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgb(var(--primary))}.item-content{display:flex;width:100%;align-items:center;gap:calc(var(--spacing, .25rem) * 3);overflow:hidden}.item-icon{flex-shrink:0;color:inherit}.item-label{flex:1;overflow:hidden;text-align:left;font-size:13px;--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);text-overflow:ellipsis;white-space:nowrap}.chevron-icon{margin-left:auto;flex-shrink:0;color:rgb(var(--text-primary));transition:transform .3s cubic-bezier(.4,0,.2,1)}.chevron-icon.rotated{transform:rotate(180deg)}.accordion-children{overflow:hidden}.drawer-version{display:flex;align-items:center;justify-content:center;border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgb(var(--border-default));padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3);font-size:11px;color:rgb(var(--text-placeholder));-webkit-user-select:none;user-select:none;font-family:Roboto,monospace}.drawer-version-dot{display:block;height:calc(var(--spacing, .25rem) * 1.5);width:calc(var(--spacing, .25rem) * 1.5);border-radius:calc(infinity * 1px);background-color:rgb(var(--text-placeholder))}.drawer-container[style*=\"width: 64px\"] .drawer-item{justify-content:center;padding-left:16px!important}.drawer-container[style*=\"width: 64px\"] .item-content{justify-content:center}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-translate-x{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-y{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-z{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-scale-x{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-scale-y{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-scale-z{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-translate-x: 0;--tw-translate-y: 0;--tw-translate-z: 0;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-outline-style: solid;--tw-scale-x: 1;--tw-scale-y: 1;--tw-scale-z: 1;--tw-font-weight: initial;--tw-leading: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
-        }], ctorParameters: () => [{ type: i1$4.Router }], propDecorators: { items: [{
-                type: Input
-            }], isExpanded: [{
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        NgClass,
+                        NgTemplateOutlet,
+                        MatTooltip,
+                        HeroIconComponent,
+                        RouterLink,
+                    ], 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        alt=\"Home\"\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      @for (item of items(); track item) {\n        <ng-container\n          *ngTemplateOutlet=\"drawerItem; context: { $implicit: item, level: 0 }\"\n        ></ng-container>\n      }\n    </nav>\n\n    <!-- Version -->\n    @if (version) {\n      <div class=\"drawer-version\" [matTooltip]=\"!isExpanded ? version : ''\" matTooltipPosition=\"right\">\n        @if (isExpanded) {\n          <span>{{ version }}</span>\n        }\n        @if (!isExpanded) {\n          <span class=\"drawer-version-dot\"></span>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Floating Toggle Button on right border -->\n  <button\n    type=\"button\"\n    class=\"toggle-btn\"\n    [attr.aria-label]=\"isExpanded ? 'Collapse navigation' : 'Expand navigation'\"\n    [attr.aria-expanded]=\"isExpanded\"\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    @if (item.route && !item.children) {\n      <a\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          @if (isExpanded) {\n            <span class=\"item-label\">{{ item.label }}</span>\n          }\n        </div>\n      </a>\n    }\n\n    @if (!item.route || item.children) {\n      <button\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          @if (isExpanded) {\n            <span class=\"item-label\">{{ item.label }}</span>\n          }\n          @if (isExpanded && item.children && item.children.length > 0) {\n            <fx-ui-hero-icon\n              [icon]=\"'chevron-down'\"\n              [size]=\"16\"\n              class=\"chevron-icon\"\n              [class.rotated]=\"isAccordionExpanded(item.id)\"\n            ></fx-ui-hero-icon>\n          }\n        </div>\n      </button>\n    }\n\n    <!-- Accordion Children -->\n    @if (item.children && item.children.length > 0) {\n      <div\n        class=\"accordion-children\"\n        [@accordionExpand]=\"getAccordionState(item.id)\"\n        >\n        @for (child of item.children; track child) {\n          <ng-container\n            *ngTemplateOutlet=\"drawerItem; context: { $implicit: child, level: level + 1 }\"\n          ></ng-container>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";@layer properties;:host{display:block;height:100%}.drawer-host-wrapper{position:relative;height:100%;border-right-style:var(--tw-border-style);border-right-width:1px;border-color:rgb(var(--border-default))}.drawer-container{display:flex;height:100%;flex-direction:column;overflow:auto;background-color:rgb(var(--bg-primary));padding-inline:calc(var(--spacing, .25rem) * 2);transition:width .3s cubic-bezier(.4,0,.2,1)}.toggle-btn{position:absolute;top:50%;z-index:50;display:flex;height:calc(var(--spacing, .25rem) * 6);width:calc(var(--spacing, .25rem) * 6);--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;border-color:rgb(var(--border-default));background-color:rgb(var(--bg-primary));--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(var(--shadow-color) / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);right:-12px;transition:all .2s ease}.toggle-btn:hover{background-color:rgb(var(--bg-primary-hover));--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(var(--shadow-color) / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(var(--shadow-color) / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.toggle-btn:active{transform:translateY(-50%) scale(.9)}.toggle-btn:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgb(var(--primary))}.drawer-nav{flex:1;overflow-x:hidden;overflow-y:auto;padding-block:calc(var(--spacing, .25rem) * 2)}.drawer-nav::-webkit-scrollbar{width:calc(var(--spacing, .25rem) * 1.5)}.drawer-nav::-webkit-scrollbar-track{background-color:transparent}.drawer-nav::-webkit-scrollbar-thumb{border-radius:.125rem;background-color:rgb(var(--border-default))}.drawer-nav::-webkit-scrollbar-thumb:hover{background-color:rgb(var(--text-placeholder))}.drawer-item-wrapper{position:relative}.drawer-item{position:relative;margin-top:var(--spacing, .25rem);display:flex;min-height:calc(var(--spacing, .25rem) * 8);width:100%;cursor:pointer;align-items:center;border-radius:.25rem;--tw-border-style: none;border-style:none;background-color:transparent;padding-inline:1rem;padding-block:calc(var(--spacing, .25rem) * 2);color:rgb(var(--text-primary));text-decoration-line:none;transition:all .2s ease}.drawer-item:hover{--tw-scale-x: 95%;--tw-scale-y: 95%;--tw-scale-z: 95%;scale:var(--tw-scale-x) var(--tw-scale-y);background-color:rgb(var(--bg-primary-hover));color:rgb(var(--text-primary))}.drawer-item.active{background-image:linear-gradient(135deg,rgb(var(--gradient-primary-start)),rgb(var(--gradient-primary-end)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--color-white, #fff)}.drawer-item.active .item-icon{color:var(--color-white, #fff)}.drawer-item:active{transform:scale(.98)}.drawer-item:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgb(var(--primary))}.drawer-item{-webkit-tap-highlight-color:transparent;--tw-outline-style: none;outline-style:none}.item-content{display:flex;width:100%;align-items:center;gap:calc(var(--spacing, .25rem) * 3);overflow:hidden}.item-icon{flex-shrink:0;color:inherit}.item-label{flex:1;overflow:hidden;text-align:left;font-size:13px;--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);text-overflow:ellipsis;white-space:nowrap}.chevron-icon{margin-left:auto;flex-shrink:0;color:rgb(var(--text-primary));transition:transform .3s cubic-bezier(.4,0,.2,1)}.chevron-icon.rotated{transform:rotate(180deg)}.accordion-children{overflow:hidden}.drawer-version{display:flex;align-items:center;justify-content:center;border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgb(var(--border-default));padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3);font-size:11px;color:rgb(var(--text-placeholder));-webkit-user-select:none;user-select:none;font-family:Roboto,monospace}.drawer-version-dot{display:block;height:calc(var(--spacing, .25rem) * 1.5);width:calc(var(--spacing, .25rem) * 1.5);border-radius:calc(infinity * 1px);background-color:rgb(var(--text-placeholder))}.drawer-container[style*=\"width: 64px\"] .drawer-item{justify-content:center;padding-left:16px!important}.drawer-container[style*=\"width: 64px\"] .item-content{justify-content:center}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-translate-x{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-y{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-z{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-scale-x{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-scale-y{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-scale-z{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-translate-x: 0;--tw-translate-y: 0;--tw-translate-z: 0;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-outline-style: solid;--tw-scale-x: 1;--tw-scale-y: 1;--tw-scale-z: 1;--tw-font-weight: initial;--tw-leading: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+        }], ctorParameters: () => [{ type: i2$1.Router }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], isExpanded: [{
                 type: Input
             }], logo: [{
                 type: Input
             }], version: [{
                 type: Input
-            }], toggleExpanded: [{
-                type: Output
-            }], itemClicked: [{
-                type: Output
-            }] } });
+            }], toggleExpanded: [{ type: i0.Output, args: ["toggleExpanded"] }], itemClicked: [{ type: i0.Output, args: ["itemClicked"] }] } });
 
 /** Row-card skeleton placeholder for master-detail list panes. */
 class SkeletonListComponent {
-    rows = 5;
+    rows = input(5, ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
     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-lg border border-border-default p-semi\">\n      <div class=\"flex items-center gap-normal mb-small\">\n        <div class=\"w-8 h-8 rounded-lg 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" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: SkeletonListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: SkeletonListComponent, isStandalone: true, selector: "fx-ui-skeleton-list", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-col gap-normal animate-pulse\">\n  @for (r of range(rows()); track r) {\n    <div class=\"rounded-lg border border-border-default p-semi\">\n      <div class=\"flex items-center gap-normal mb-small\">\n        <div class=\"w-8 h-8 rounded-lg 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", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SkeletonListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", 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-lg border border-border-default p-semi\">\n      <div class=\"flex items-center gap-normal mb-small\">\n        <div class=\"w-8 h-8 rounded-lg 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
-            }] } });
+            args: [{ selector: 'fx-ui-skeleton-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col gap-normal animate-pulse\">\n  @for (r of range(rows()); track r) {\n    <div class=\"rounded-lg border border-border-default p-semi\">\n      <div class=\"flex items-center gap-normal mb-small\">\n        <div class=\"w-8 h-8 rounded-lg 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: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }] } });
 
 /** Card-shaped skeleton placeholder for detail panels. */
 class SkeletonDetailComponent {
     /** Number of content cards rendered below the header card. */
-    cards = 3;
+    cards = input(3, ...(ngDevMode ? [{ debugName: "cards" }] : /* istanbul ignore next */ []));
     /** Rows per content card. */
-    rows = 4;
+    rows = input(4, ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
     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" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: SkeletonDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: SkeletonDetailComponent, isStandalone: true, selector: "fx-ui-skeleton-detail", inputs: { cards: { classPropertyName: "cards", publicName: "cards", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null } }, 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", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SkeletonDetailComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", 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
-            }] } });
+            args: [{ selector: 'fx-ui-skeleton-detail', changeDetection: ChangeDetectionStrategy.OnPush, 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: i0.Input, args: [{ isSignal: true, alias: "cards", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }] } });
 
 /** KPI tile row: big number + tinted icon box + caption, in a responsive grid. */
 class StatCardsComponent {
-    cards = [];
+    cards = input([], ...(ngDevMode ? [{ debugName: "cards" }] : /* istanbul ignore next */ []));
     /** Grid columns; defaults to one column per card. */
     cols;
     get gridColumns() {
@@ -4265,38 +3721,36 @@ class StatCardsComponent {
     boxClass(card) {
         return card.tone ? toneBadge(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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: StatCardsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: StatCardsComponent, isStandalone: true, selector: "fx-ui-stat-cards", inputs: { cards: { classPropertyName: "cards", publicName: "cards", isSignal: true, isRequired: false, transformFunction: null }, cols: { classPropertyName: "cols", publicName: "cols", isSignal: false, isRequired: false, transformFunction: null } }, 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: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: StatCardsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", 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: [{
+            args: [{ selector: 'fx-ui-stat-cards', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        NgStyle,
+                        NgClass,
+                        HeroIconComponent,
+                    ], 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: i0.Input, args: [{ isSignal: true, alias: "cards", required: false }] }], cols: [{
                 type: Input
             }] } });
 
 /** Centered "no data" block. The message is caller-translated (no i18n in lib). */
 class EmptyStateComponent {
-    message = 'No data';
+    message = input('No data', ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
     /** 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"] }] });
+    height = input('120px', ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: EmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: EmptyStateComponent, isStandalone: true, selector: "fx-ui-empty-state", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: EmptyStateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", 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: [{
+            args: [{ selector: 'fx-ui-empty-state', changeDetection: ChangeDetectionStrategy.OnPush, imports: [HeroIconComponent], 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: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], icon: [{
                 type: Input
-            }] } });
+            }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }] } });
 
 /**
  * Tone-tinted filter chip row. Replaces the per-tab chipClass() copies —
@@ -4305,8 +3759,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
  */
 class FilterChipsComponent {
     options = [];
+    /* Accepts undefined so screens can bind [value]="filters.x" where the
+     * filter bag keys are optional; '' and undefined both mean "All". */
     value = '';
-    valueChange = new EventEmitter();
+    valueChange = output();
     /** Per-value tone overrides (e.g. { Safe: 'information', Protected: 'discovery' as any }). */
     toneOverrides = {};
     select(option) {
@@ -4314,7 +3770,7 @@ class FilterChipsComponent {
         this.valueChange.emit(option.value);
     }
     chipClass(option) {
-        const active = this.value === option.value;
+        const active = (this.value ?? '') === option.value;
         if (!option.value) {
             return active
                 ? 'bg-text-primary text-text-focus'
@@ -4328,19 +3784,17 @@ class FilterChipsComponent {
         }
         return active ? `${toneBg(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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: FilterChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: FilterChipsComponent, isStandalone: true, 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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FilterChipsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", 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" }]
+            args: [{ selector: 'fx-ui-filter-chips', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], 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: [{
+            }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], toneOverrides: [{
                 type: Input
             }] } });
 
@@ -4348,7 +3802,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
 class MeterComponent {
     value = 0;
     max = 10;
-    tone = null;
+    tone = input(null, ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
     /** Caller-translated texts; omitted → bar only. */
     label;
     caption;
@@ -4358,21 +3812,19 @@ class MeterComponent {
         return Math.min(100, Math.max(0, pct));
     }
     get fillClass() {
-        return toneBg(this.tone);
+        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\n    class=\"h-2 rounded-full bg-bg-hover overflow-hidden\"\n    role=\"progressbar\"\n    [attr.aria-valuemin]=\"0\"\n    [attr.aria-valuemax]=\"max\"\n    [attr.aria-valuenow]=\"value\"\n    [attr.aria-label]=\"label || null\"\n  >\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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: MeterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: MeterComponent, isStandalone: true, selector: "fx-ui-meter", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: false, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: false, isRequired: false, transformFunction: null } }, 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\n    class=\"h-2 rounded-full bg-bg-hover overflow-hidden\"\n    role=\"progressbar\"\n    [attr.aria-valuemin]=\"0\"\n    [attr.aria-valuemax]=\"max\"\n    [attr.aria-valuenow]=\"value\"\n    [attr.aria-label]=\"label || null\"\n  >\n    <div class=\"h-full rounded-full\" [ngClass]=\"fillClass\" [style.width.%]=\"percent\"></div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MeterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", 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\n    class=\"h-2 rounded-full bg-bg-hover overflow-hidden\"\n    role=\"progressbar\"\n    [attr.aria-valuemin]=\"0\"\n    [attr.aria-valuemax]=\"max\"\n    [attr.aria-valuenow]=\"value\"\n    [attr.aria-label]=\"label || null\"\n  >\n    <div class=\"h-full rounded-full\" [ngClass]=\"fillClass\" [style.width.%]=\"percent\"></div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'fx-ui-meter', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], 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\n    class=\"h-2 rounded-full bg-bg-hover overflow-hidden\"\n    role=\"progressbar\"\n    [attr.aria-valuemin]=\"0\"\n    [attr.aria-valuemax]=\"max\"\n    [attr.aria-valuenow]=\"value\"\n    [attr.aria-label]=\"label || null\"\n  >\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: [{
+            }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], label: [{
                 type: Input
             }], caption: [{
                 type: Input
@@ -4381,26 +3833,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
 /** Detail-panel section: card with an icon + heading header and projected body. */
 class SectionCardComponent {
     /** Caller-translated heading. */
-    title = '';
+    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
     /** hero-icon name; omitted → text-only header. */
     icon;
-    iconTone = null;
+    iconTone = input(null, ...(ngDevMode ? [{ debugName: "iconTone" }] : /* istanbul ignore next */ []));
     get iconClass() {
-        return this.iconTone ? toneText(this.iconTone) : 'text-text-secondary';
+        const iconTone = this.iconTone();
+        return iconTone ? toneText(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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: SectionCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: SectionCardComponent, isStandalone: true, selector: "fx-ui-section-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, iconTone: { classPropertyName: "iconTone", publicName: "iconTone", isSignal: true, isRequired: false, transformFunction: null } }, 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: "component", type: HeroIconComponent, selector: "fx-ui-hero-icon", inputs: ["stroke", "icon", "solid", "outline", "size", "color", "class"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SectionCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", 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: [{
+            args: [{ selector: 'fx-ui-section-card', changeDetection: ChangeDetectionStrategy.OnPush, imports: [HeroIconComponent, NgClass], 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: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], icon: [{
                 type: Input
-            }], iconTone: [{
-                type: Input
-            }] } });
+            }], iconTone: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTone", required: false }] }] } });
 
 /**
  * Label-over-value field for detail panels. The label uses txt-field-label
@@ -4409,17 +3858,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
  */
 class InfoFieldComponent {
     /** Caller-translated label. */
-    label = '';
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     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 = '---';
+    placeholder = input('---', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     get displayValue() {
         if (this.value === null || this.value === undefined || this.value === '') {
-            return this.placeholder;
+            return this.placeholder();
         }
         return String(this.value);
     }
@@ -4427,23 +3876,19 @@ class InfoFieldComponent {
         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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: InfoFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.20", type: InfoFieldComponent, isStandalone: true, selector: "fx-ui-info-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: false, isRequired: false, transformFunction: null }, mono: { classPropertyName: "mono", publicName: "mono", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, 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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: InfoFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", 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: [{
+            args: [{ selector: 'fx-ui-info-field', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], 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: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{
                 type: Input
             }], tone: [{
                 type: Input
             }], mono: [{
                 type: Input
-            }], placeholder: [{
-                type: Input
-            }] } });
+            }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }] } });
 
 /**
  * Compact total/critical/high/medium(/low) badge cluster used in table cells.
@@ -4456,7 +3901,7 @@ class SeverityBadgesComponent {
     showZero = true;
     /** Append the severity letter to counts ("3C", "5H", "2M") per the report design. */
     suffixed = false;
-    badgeClick = new EventEmitter();
+    badgeClick = output();
     static TONES = {
         total: null,
         critical: 'critical',
@@ -4477,21 +3922,19 @@ class SeverityBadgesComponent {
     badgeClass(badge) {
         return badge.tone ? toneBadge(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    <button\n      type=\"button\"\n      class=\"px-2 py-0.5 rounded-full txt-utility-caption font-medium cursor-pointer focus-visible:ring-2 focus-visible:ring-primary/50\"\n      [ngClass]=\"badgeClass(badge)\"\n      [attr.aria-label]=\"badge.key + ': ' + badge.label\"\n      (click)=\"badgeClick.emit(badge.key)\"\n    >{{ badge.label }}</button>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: SeverityBadgesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: SeverityBadgesComponent, isStandalone: true, 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    <button\n      type=\"button\"\n      class=\"px-2 py-0.5 rounded-full txt-utility-caption font-medium cursor-pointer focus-visible:ring-2 focus-visible:ring-primary/50\"\n      [ngClass]=\"badgeClass(badge)\"\n      [attr.aria-label]=\"badge.key + ': ' + badge.label\"\n      (click)=\"badgeClick.emit(badge.key)\"\n    >{{ badge.label }}</button>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SeverityBadgesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", 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    <button\n      type=\"button\"\n      class=\"px-2 py-0.5 rounded-full txt-utility-caption font-medium cursor-pointer focus-visible:ring-2 focus-visible:ring-primary/50\"\n      [ngClass]=\"badgeClass(badge)\"\n      [attr.aria-label]=\"badge.key + ': ' + badge.label\"\n      (click)=\"badgeClick.emit(badge.key)\"\n    >{{ badge.label }}</button>\n  }\n</div>\n" }]
+            args: [{ selector: 'fx-ui-severity-badges', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "<div class=\"flex items-center gap-small\">\n  @for (badge of badges; track badge.key) {\n    <button\n      type=\"button\"\n      class=\"px-2 py-0.5 rounded-full txt-utility-caption font-medium cursor-pointer focus-visible:ring-2 focus-visible:ring-primary/50\"\n      [ngClass]=\"badgeClass(badge)\"\n      [attr.aria-label]=\"badge.key + ': ' + badge.label\"\n      (click)=\"badgeClick.emit(badge.key)\"\n    >{{ badge.label }}</button>\n  }\n</div>\n" }]
         }], propDecorators: { stats: [{
                 type: Input
             }], showZero: [{
                 type: Input
             }], suffixed: [{
                 type: Input
-            }], badgeClick: [{
-                type: Output
-            }] } });
+            }], badgeClick: [{ type: i0.Output, args: ["badgeClick"] }] } });
 
 let nextUid = 0;
 /**
@@ -4512,23 +3955,23 @@ let nextUid = 0;
 class MasterDetailComponent {
     table;
     /** Fixed list-pane width on lg+ viewports (stacked full-width below). */
-    listWidth = '420px';
-    maxListHeight = '640px';
-    pageSizeOptions = [5, 10, 20, 50];
+    listWidth = input('420px', ...(ngDevMode ? [{ debugName: "listWidth" }] : /* istanbul ignore next */ []));
+    maxListHeight = input('640px', ...(ngDevMode ? [{ debugName: "maxListHeight" }] : /* istanbul ignore next */ []));
+    pageSizeOptions = input([5, 10, 20, 50], ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : /* istanbul ignore next */ []));
     /** Labels come in via inputs — the lib carries no i18n. */
-    emptyMessage = 'No data';
-    listLabel = '';
-    skeletonCards = 3;
-    rowTemplate;
-    detailTemplate;
-    paginator;
+    emptyMessage = input('No data', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
+    listLabel = input('', ...(ngDevMode ? [{ debugName: "listLabel" }] : /* istanbul ignore next */ []));
+    skeletonCards = input(3, ...(ngDevMode ? [{ debugName: "skeletonCards" }] : /* istanbul ignore next */ []));
+    rowTemplate = contentChild.required('row');
+    detailTemplate = contentChild.required('detail');
+    paginator = viewChild.required(MatPaginator);
     uid = `fx-md-${nextUid++}`;
     ngAfterViewInit() {
         // The paginator lives in this view, not the host page's, so the host's
         // @ViewChild(MatPaginator) never finds it. Hand it to the table so
         // refresh() keeps resetting pageIndex.
         if (this.table) {
-            this.table.paginator = this.paginator;
+            this.table.paginator = this.paginator();
         }
     }
     isSelected(row) {
@@ -4568,36 +4011,60 @@ class MasterDetailComponent {
         el?.focus();
         el?.scrollIntoView({ block: 'nearest' });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MasterDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: MasterDetailComponent, isStandalone: false, selector: "fx-ui-master-detail", inputs: { table: "table", listWidth: "listWidth", maxListHeight: "maxListHeight", pageSizeOptions: "pageSizeOptions", emptyMessage: "emptyMessage", listLabel: "listLabel", skeletonCards: "skeletonCards" }, queries: [{ propertyName: "rowTemplate", first: true, predicate: ["row"], descendants: true }, { propertyName: "detailTemplate", first: true, predicate: ["detail"], descendants: true }], viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col lg:flex-row items-start gap-xl\" [style.--fx-md-list-width]=\"listWidth\">\n  <!-- Master: list pane -->\n  <div class=\"fx-md-list card-common\">\n    <ng-content select=\"[mdHeader]\"></ng-content>\n    <ng-content select=\"[mdFilters]\"></ng-content>\n    <div\n      class=\"flex flex-col gap-normal overflow-auto pr-xs\"\n      [style.maxHeight]=\"maxListHeight\"\n      role=\"listbox\"\n      [attr.aria-label]=\"listLabel || null\"\n    >\n      @if (table.loading) {\n        <fx-ui-skeleton-list [rows]=\"table.pageSize\"></fx-ui-skeleton-list>\n      } @else {\n        @for (row of table.dataSource.data; track table.idOf(row); let i = $index) {\n          <button\n            type=\"button\"\n            role=\"option\"\n            [id]=\"optionId(i)\"\n            [attr.aria-selected]=\"isSelected(row)\"\n            [tabindex]=\"isSelected(row) ? 0 : -1\"\n            (click)=\"table.selectItem(row)\"\n            (keydown)=\"onKeydown($event, i)\"\n            class=\"text-left rounded-lg border p-semi transition-colors\"\n            [ngClass]=\"\n              isSelected(row)\n                ? 'border-gradient-primary-start bg-gradient-primary-start/5'\n                : 'border-border-default hover:border-border-interactive bg-bg-primary'\n            \"\n          >\n            <ng-container\n              [ngTemplateOutlet]=\"rowTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: row, selected: isSelected(row) }\"\n            ></ng-container>\n          </button>\n        }\n        @if (!table.dataSource.data.length) {\n          <fx-ui-empty-state [message]=\"emptyMessage\"></fx-ui-empty-state>\n        }\n      }\n    </div>\n    <!-- No (page) binding: ngAfterViewInit hands this paginator to the table,\n         whose own BaseTable subscription (running after this child's hook)\n         wires page events \u2014 a binding here would double-fetch every change. -->\n    <mat-paginator\n      class=\"mt-normal\"\n      [length]=\"table.total\"\n      [pageSize]=\"table.pageSize\"\n      [pageSizeOptions]=\"pageSizeOptions\"\n    ></mat-paginator>\n  </div>\n\n  <!-- Detail pane -->\n  <div class=\"w-full lg:flex-1 min-w-0\">\n    @if (table.selected) {\n      @if (table.detailBusy) {\n        <fx-ui-skeleton-detail [cards]=\"skeletonCards\"></fx-ui-skeleton-detail>\n      } @else {\n        <ng-container\n          [ngTemplateOutlet]=\"detailTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: table.detail, selected: table.selected }\"\n        ></ng-container>\n      }\n    } @else {\n      <div class=\"card-common flex items-center justify-center h-[300px]\">\n        <fx-ui-empty-state [message]=\"emptyMessage\"></fx-ui-empty-state>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".fx-md-list{width:100%}@media (min-width: 1080px){.fx-md-list{width:var(--fx-md-list-width, 420px);flex-shrink:0}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i45.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: SkeletonListComponent, selector: "fx-ui-skeleton-list", inputs: ["rows"] }, { kind: "component", type: SkeletonDetailComponent, selector: "fx-ui-skeleton-detail", inputs: ["cards", "rows"] }, { kind: "component", type: EmptyStateComponent, selector: "fx-ui-empty-state", inputs: ["message", "icon", "height"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: MasterDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: MasterDetailComponent, isStandalone: true, selector: "fx-ui-master-detail", inputs: { table: { classPropertyName: "table", publicName: "table", isSignal: false, isRequired: false, transformFunction: null }, listWidth: { classPropertyName: "listWidth", publicName: "listWidth", isSignal: true, isRequired: false, transformFunction: null }, maxListHeight: { classPropertyName: "maxListHeight", publicName: "maxListHeight", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, listLabel: { classPropertyName: "listLabel", publicName: "listLabel", isSignal: true, isRequired: false, transformFunction: null }, skeletonCards: { classPropertyName: "skeletonCards", publicName: "skeletonCards", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "rowTemplate", first: true, predicate: ["row"], descendants: true, isSignal: true }, { propertyName: "detailTemplate", first: true, predicate: ["detail"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex flex-col lg:flex-row items-start gap-xl\" [style.--fx-md-list-width]=\"listWidth()\">\n  <!-- Master: list pane -->\n  <div class=\"fx-md-list card-common\">\n    <ng-content select=\"[mdHeader]\"></ng-content>\n    <ng-content select=\"[mdFilters]\"></ng-content>\n    <div\n      class=\"flex flex-col gap-normal overflow-auto pr-xs\"\n      [style.maxHeight]=\"maxListHeight()\"\n      role=\"listbox\"\n      [attr.aria-label]=\"listLabel() || null\"\n    >\n      @if (table.loading) {\n        <fx-ui-skeleton-list [rows]=\"table.pageSize\"></fx-ui-skeleton-list>\n      } @else {\n        @for (row of table.dataSource.data; track table.idOf(row); let i = $index) {\n          <button\n            type=\"button\"\n            role=\"option\"\n            [id]=\"optionId(i)\"\n            [attr.aria-selected]=\"isSelected(row)\"\n            [tabindex]=\"isSelected(row) ? 0 : -1\"\n            (click)=\"table.selectItem(row)\"\n            (keydown)=\"onKeydown($event, i)\"\n            class=\"text-left rounded-lg border p-semi transition-colors\"\n            [ngClass]=\"\n              isSelected(row)\n                ? 'border-gradient-primary-start bg-gradient-primary-start/5'\n                : 'border-border-default hover:border-border-interactive bg-bg-primary'\n            \"\n          >\n            <ng-container\n              [ngTemplateOutlet]=\"rowTemplate()\"\n              [ngTemplateOutletContext]=\"{ $implicit: row, selected: isSelected(row) }\"\n            ></ng-container>\n          </button>\n        }\n        @if (!table.dataSource.data.length) {\n          <fx-ui-empty-state [message]=\"emptyMessage()\"></fx-ui-empty-state>\n        }\n      }\n    </div>\n    <!-- No (page) binding: ngAfterViewInit hands this paginator to the table,\n         whose own BaseTable subscription (running after this child's hook)\n         wires page events \u2014 a binding here would double-fetch every change. -->\n    <mat-paginator\n      class=\"mt-normal\"\n      [length]=\"table.total\"\n      [pageSize]=\"table.pageSize\"\n      [pageSizeOptions]=\"pageSizeOptions()\"\n    ></mat-paginator>\n  </div>\n\n  <!-- Detail pane -->\n  <div class=\"w-full lg:flex-1 min-w-0\">\n    @if (table.selected) {\n      @if (table.detailBusy) {\n        <fx-ui-skeleton-detail [cards]=\"skeletonCards()\"></fx-ui-skeleton-detail>\n      } @else {\n        <ng-container\n          [ngTemplateOutlet]=\"detailTemplate()\"\n          [ngTemplateOutletContext]=\"{ $implicit: table.detail, selected: table.selected }\"\n        ></ng-container>\n      }\n    } @else {\n      <div class=\"card-common flex items-center justify-center h-[300px]\">\n        <fx-ui-empty-state [message]=\"emptyMessage()\"></fx-ui-empty-state>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".fx-md-list{width:100%}@media(min-width:1080px){.fx-md-list{width:var(--fx-md-list-width, 420px);flex-shrink:0}}\n"], dependencies: [{ kind: "component", type: SkeletonListComponent, selector: "fx-ui-skeleton-list", inputs: ["rows"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EmptyStateComponent, selector: "fx-ui-empty-state", inputs: ["message", "icon", "height"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: SkeletonDetailComponent, selector: "fx-ui-skeleton-detail", inputs: ["cards", "rows"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MasterDetailComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: MasterDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fx-ui-master-detail', standalone: false, template: "<div class=\"flex flex-col lg:flex-row items-start gap-xl\" [style.--fx-md-list-width]=\"listWidth\">\n  <!-- Master: list pane -->\n  <div class=\"fx-md-list card-common\">\n    <ng-content select=\"[mdHeader]\"></ng-content>\n    <ng-content select=\"[mdFilters]\"></ng-content>\n    <div\n      class=\"flex flex-col gap-normal overflow-auto pr-xs\"\n      [style.maxHeight]=\"maxListHeight\"\n      role=\"listbox\"\n      [attr.aria-label]=\"listLabel || null\"\n    >\n      @if (table.loading) {\n        <fx-ui-skeleton-list [rows]=\"table.pageSize\"></fx-ui-skeleton-list>\n      } @else {\n        @for (row of table.dataSource.data; track table.idOf(row); let i = $index) {\n          <button\n            type=\"button\"\n            role=\"option\"\n            [id]=\"optionId(i)\"\n            [attr.aria-selected]=\"isSelected(row)\"\n            [tabindex]=\"isSelected(row) ? 0 : -1\"\n            (click)=\"table.selectItem(row)\"\n            (keydown)=\"onKeydown($event, i)\"\n            class=\"text-left rounded-lg border p-semi transition-colors\"\n            [ngClass]=\"\n              isSelected(row)\n                ? 'border-gradient-primary-start bg-gradient-primary-start/5'\n                : 'border-border-default hover:border-border-interactive bg-bg-primary'\n            \"\n          >\n            <ng-container\n              [ngTemplateOutlet]=\"rowTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: row, selected: isSelected(row) }\"\n            ></ng-container>\n          </button>\n        }\n        @if (!table.dataSource.data.length) {\n          <fx-ui-empty-state [message]=\"emptyMessage\"></fx-ui-empty-state>\n        }\n      }\n    </div>\n    <!-- No (page) binding: ngAfterViewInit hands this paginator to the table,\n         whose own BaseTable subscription (running after this child's hook)\n         wires page events \u2014 a binding here would double-fetch every change. -->\n    <mat-paginator\n      class=\"mt-normal\"\n      [length]=\"table.total\"\n      [pageSize]=\"table.pageSize\"\n      [pageSizeOptions]=\"pageSizeOptions\"\n    ></mat-paginator>\n  </div>\n\n  <!-- Detail pane -->\n  <div class=\"w-full lg:flex-1 min-w-0\">\n    @if (table.selected) {\n      @if (table.detailBusy) {\n        <fx-ui-skeleton-detail [cards]=\"skeletonCards\"></fx-ui-skeleton-detail>\n      } @else {\n        <ng-container\n          [ngTemplateOutlet]=\"detailTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: table.detail, selected: table.selected }\"\n        ></ng-container>\n      }\n    } @else {\n      <div class=\"card-common flex items-center justify-center h-[300px]\">\n        <fx-ui-empty-state [message]=\"emptyMessage\"></fx-ui-empty-state>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".fx-md-list{width:100%}@media (min-width: 1080px){.fx-md-list{width:var(--fx-md-list-width, 420px);flex-shrink:0}}\n"] }]
+            args: [{ selector: 'fx-ui-master-detail', imports: [
+                        SkeletonListComponent,
+                        NgClass,
+                        NgTemplateOutlet,
+                        EmptyStateComponent,
+                        MatPaginator,
+                        SkeletonDetailComponent,
+                    ], template: "<div class=\"flex flex-col lg:flex-row items-start gap-xl\" [style.--fx-md-list-width]=\"listWidth()\">\n  <!-- Master: list pane -->\n  <div class=\"fx-md-list card-common\">\n    <ng-content select=\"[mdHeader]\"></ng-content>\n    <ng-content select=\"[mdFilters]\"></ng-content>\n    <div\n      class=\"flex flex-col gap-normal overflow-auto pr-xs\"\n      [style.maxHeight]=\"maxListHeight()\"\n      role=\"listbox\"\n      [attr.aria-label]=\"listLabel() || null\"\n    >\n      @if (table.loading) {\n        <fx-ui-skeleton-list [rows]=\"table.pageSize\"></fx-ui-skeleton-list>\n      } @else {\n        @for (row of table.dataSource.data; track table.idOf(row); let i = $index) {\n          <button\n            type=\"button\"\n            role=\"option\"\n            [id]=\"optionId(i)\"\n            [attr.aria-selected]=\"isSelected(row)\"\n            [tabindex]=\"isSelected(row) ? 0 : -1\"\n            (click)=\"table.selectItem(row)\"\n            (keydown)=\"onKeydown($event, i)\"\n            class=\"text-left rounded-lg border p-semi transition-colors\"\n            [ngClass]=\"\n              isSelected(row)\n                ? 'border-gradient-primary-start bg-gradient-primary-start/5'\n                : 'border-border-default hover:border-border-interactive bg-bg-primary'\n            \"\n          >\n            <ng-container\n              [ngTemplateOutlet]=\"rowTemplate()\"\n              [ngTemplateOutletContext]=\"{ $implicit: row, selected: isSelected(row) }\"\n            ></ng-container>\n          </button>\n        }\n        @if (!table.dataSource.data.length) {\n          <fx-ui-empty-state [message]=\"emptyMessage()\"></fx-ui-empty-state>\n        }\n      }\n    </div>\n    <!-- No (page) binding: ngAfterViewInit hands this paginator to the table,\n         whose own BaseTable subscription (running after this child's hook)\n         wires page events \u2014 a binding here would double-fetch every change. -->\n    <mat-paginator\n      class=\"mt-normal\"\n      [length]=\"table.total\"\n      [pageSize]=\"table.pageSize\"\n      [pageSizeOptions]=\"pageSizeOptions()\"\n    ></mat-paginator>\n  </div>\n\n  <!-- Detail pane -->\n  <div class=\"w-full lg:flex-1 min-w-0\">\n    @if (table.selected) {\n      @if (table.detailBusy) {\n        <fx-ui-skeleton-detail [cards]=\"skeletonCards()\"></fx-ui-skeleton-detail>\n      } @else {\n        <ng-container\n          [ngTemplateOutlet]=\"detailTemplate()\"\n          [ngTemplateOutletContext]=\"{ $implicit: table.detail, selected: table.selected }\"\n        ></ng-container>\n      }\n    } @else {\n      <div class=\"card-common flex items-center justify-center h-[300px]\">\n        <fx-ui-empty-state [message]=\"emptyMessage()\"></fx-ui-empty-state>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".fx-md-list{width:100%}@media(min-width:1080px){.fx-md-list{width:var(--fx-md-list-width, 420px);flex-shrink:0}}\n"] }]
         }], propDecorators: { table: [{
                 type: Input
-            }], listWidth: [{
-                type: Input
-            }], maxListHeight: [{
-                type: Input
-            }], pageSizeOptions: [{
-                type: Input
-            }], emptyMessage: [{
-                type: Input
-            }], listLabel: [{
-                type: Input
-            }], skeletonCards: [{
-                type: Input
-            }], rowTemplate: [{
-                type: ContentChild,
-                args: ['row']
-            }], detailTemplate: [{
-                type: ContentChild,
-                args: ['detail']
-            }], paginator: [{
-                type: ViewChild,
-                args: [MatPaginator]
-            }] } });
+            }], listWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "listWidth", required: false }] }], maxListHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxListHeight", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], listLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "listLabel", required: false }] }], skeletonCards: [{ type: i0.Input, args: [{ isSignal: true, alias: "skeletonCards", required: false }] }], rowTemplate: [{ type: i0.ContentChild, args: ['row', { isSignal: true }] }], detailTemplate: [{ type: i0.ContentChild, args: ['detail', { isSignal: true }] }], paginator: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatPaginator), { isSignal: true }] }] } });
+
+/**
+ * Row-action dropdown wrapper over mat-menu (behavior-layer rule, Playbook
+ * §5.1 — apps never import @angular/material directly). Project the trigger
+ * content; items render from [items] and come back through (select).
+ *
+ *   <fx-ui-menu [items]="actions" (select)="onAction($event)">
+ *     <fx-ui-hero-icon icon="ellipsis-vertical" [size]="20" />
+ *   </fx-ui-menu>
+ */
+class MenuComponent {
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Accessible name for the trigger button. */
+    ariaLabel = input('Open menu', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    select = output();
+    toneClass(item) {
+        switch (item.tone) {
+            case 'critical':
+            case 'danger':
+                return 'text-danger';
+            case 'warning':
+                return 'text-warning';
+            case 'success':
+                return 'text-success';
+            case 'information':
+                return 'text-information';
+            default:
+                return 'text-text-primary';
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: MenuComponent, isStandalone: true, selector: "fx-ui-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { select: "select" }, ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"inline-flex items-center justify-center rounded-lg p-1 hover:bg-bg-hover transition-colors disabled:opacity-50 disabled:cursor-not-allowed\"\n  [matMenuTriggerFor]=\"menu\"\n  [disabled]=\"disabled()\"\n  [attr.aria-label]=\"ariaLabel()\"\n>\n  <ng-content></ng-content>\n</button>\n\n<mat-menu #menu=\"matMenu\">\n  @for (item of items(); track item.label) {\n    <button\n      mat-menu-item\n      type=\"button\"\n      [disabled]=\"item.disabled\"\n      (click)=\"select.emit(item)\"\n    >\n      <span class=\"flex items-center gap-normal\" [class]=\"toneClass(item)\">\n        @if (item.icon) {\n          <fx-ui-hero-icon [icon]=\"item.icon\" [size]=\"18\"></fx-ui-hero-icon>\n        }\n        <span>{{ item.label }}</span>\n      </span>\n    </button>\n  }\n</mat-menu>\n", dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: 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: "21.2.20", ngImport: i0, type: MenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fx-ui-menu', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatMenuModule, HeroIconComponent], template: "<button\n  type=\"button\"\n  class=\"inline-flex items-center justify-center rounded-lg p-1 hover:bg-bg-hover transition-colors disabled:opacity-50 disabled:cursor-not-allowed\"\n  [matMenuTriggerFor]=\"menu\"\n  [disabled]=\"disabled()\"\n  [attr.aria-label]=\"ariaLabel()\"\n>\n  <ng-content></ng-content>\n</button>\n\n<mat-menu #menu=\"matMenu\">\n  @for (item of items(); track item.label) {\n    <button\n      mat-menu-item\n      type=\"button\"\n      [disabled]=\"item.disabled\"\n      (click)=\"select.emit(item)\"\n    >\n      <span class=\"flex items-center gap-normal\" [class]=\"toneClass(item)\">\n        @if (item.icon) {\n          <fx-ui-hero-icon [icon]=\"item.icon\" [size]=\"18\"></fx-ui-hero-icon>\n        }\n        <span>{{ item.label }}</span>\n      </span>\n    </button>\n  }\n</mat-menu>\n" }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], select: [{ type: i0.Output, args: ["select"] }] } });
 
 const FX_COMPONENTS = [
     InputComponent,
@@ -4616,12 +4083,9 @@ const FX_COMPONENTS = [
     ToastComponent,
     ToastContainerComponent,
     TagComponent,
-    ChartComponent,
     SliderComponent,
     SwitchComponent,
-    RichTextAreaComponent,
     SkeletonTableLoadingComponent,
-    FlowConnection,
     CircleProgressBar,
     TreeDiagram,
     TableCell,
@@ -4637,134 +4101,61 @@ const FX_COMPONENTS = [
     InfoFieldComponent,
     SeverityBadgesComponent,
     MasterDetailComponent,
+    MenuComponent,
 ];
 
-class ConfirmationDialogComponent {
-    ref;
-    bindings;
-    loading = false;
-    title = '';
-    message = '';
-    cancelLabel = 'Cancel';
-    confirmLabel = 'Submit';
-    constructor(ref, bindings) {
-        this.ref = ref;
-        this.bindings = bindings;
-        this.title = _.get(bindings, 'title');
-        this.message = _.get(bindings, 'message');
-        this.cancelLabel = _.get(bindings, 'cancelLabel');
-        this.confirmLabel = _.get(bindings, 'confirmLabel');
-    }
-    async accept() {
-        this.loading = true;
-        if (_.get(this.bindings, 'callback')) {
-            await this.bindings.callback();
-            this.loading = false;
-        }
-        this.ref.close(true);
-    }
-    cancel() {
-        this.ref.close(false);
-    }
-    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 mat-dialog-title 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.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { 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", "type", "ariaLabel"], 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 mat-dialog-title 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$2.MatDialogRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
-                }] }] });
-
 const DIALOGS_COMPONENT = [
     ConfirmationDialogComponent
 ];
 
-const MY_MOMENT_FORMATS = {
-    parseInput: 'YYYY-MM-DD',
-    fullPickerInput: 'YYYY-MM-DD HH:mm',
-    datePickerInput: 'YYYY-MM-DD',
-    timePickerInput: 'HH:mm',
-    monthYearLabel: 'MMM YYYY',
-    dateA11yLabel: 'LL',
-    monthYearA11yLabel: 'MMMM YYYY',
-};
+/**
+ * Compatibility barrel over the (now standalone) core components.
+ *
+ * Deliberately NOT re-exported anymore: Angular Material —
+ * Material is a behavior layer that stays an
+ * implementation detail of this lib (Playbook §5.1); each standalone
+ * component imports what it needs itself. Apps consume fx-ui-* only.
+ *
+ * Heavy components live in secondary entry points and are not part of this
+ * barrel: @foxeltech/angular-ui/chart, /flow, /rich-text.
+ */
 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, SkeletonListComponent, SkeletonDetailComponent, StatCardsComponent, EmptyStateComponent, FilterChipsComponent, MeterComponent, SectionCardComponent, InfoFieldComponent, SeverityBadgesComponent, MasterDetailComponent, ConfirmationDialogComponent], imports: [CommonModule,
-            FormsModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.20", ngImport: i0, type: UiModule, imports: [FormsModule,
             ReactiveFormsModule,
             RouterModule,
-            OwlDateTimeModule,
-            OwlNativeDateTimeModule,
-            OwlMomentDateTimeModule,
             HasPermissionDirective,
-            TrimOnBlurDirective,
-            NgHeroiconsModule, i39.VflowComponent, i39.HandleComponent, i39.ResizableComponent, i39.SelectableDirective, i39.MiniMapComponent, i39.NodeToolbarComponent, i39.CustomTemplateEdgeComponent, i39.DragHandleDirective, i39.ConnectionControllerDirective, i39.NodeHtmlTemplateDirective, i39.NodeSvgTemplateDirective, i39.GroupNodeTemplateDirective, i39.EdgeLabelHtmlTemplateDirective, i39.EdgeTemplateDirective, i39.ConnectionTemplateDirective, i39.HandleTemplateDirective, i1$5.NgxEchartsModule, i3.MatSelectModule, i42.MatRadioModule, i43.MatButtonModule, i44.MatIconModule, i45.MatPaginatorModule, i46.MatTableModule, i47.MatSnackBarModule, i1$2.MatDialogModule, i49.MatCheckboxModule, i50.MatCardModule, i51.MatDatepickerModule, i52.MatTimepickerModule, i53.MatBadgeModule, i54.MatExpansionModule, i55.MatFormFieldModule, i56.MatMenuModule, i57.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, MasterDetailComponent, ConfirmationDialogComponent, 
-            // Module
-            FormsModule,
+            TrimOnBlurDirective, InputComponent, SelectComponent, RadioButtonComponent, CheckboxComponent, DndUploadComponent, ButtonComponent, RadioButtonToggleComponent, DatetimePicker, LoadingPanel, SearchBarComponent, TabGroupComponent, TabComponent, HeroIconComponent, ToastComponent, ToastContainerComponent, TagComponent, SliderComponent, SwitchComponent, SkeletonTableLoadingComponent, CircleProgressBar, TreeDiagram, TableCell, KanbanBoardComponent, DrawerComponent, SkeletonListComponent, SkeletonDetailComponent, StatCardsComponent, EmptyStateComponent, FilterChipsComponent, MeterComponent, SectionCardComponent, InfoFieldComponent, SeverityBadgesComponent, MasterDetailComponent, MenuComponent, ConfirmationDialogComponent], exports: [InputComponent, SelectComponent, RadioButtonComponent, CheckboxComponent, DndUploadComponent, ButtonComponent, RadioButtonToggleComponent, DatetimePicker, LoadingPanel, SearchBarComponent, TabGroupComponent, TabComponent, HeroIconComponent, ToastComponent, ToastContainerComponent, TagComponent, SliderComponent, SwitchComponent, SkeletonTableLoadingComponent, CircleProgressBar, TreeDiagram, TableCell, KanbanBoardComponent, DrawerComponent, SkeletonListComponent, SkeletonDetailComponent, StatCardsComponent, EmptyStateComponent, FilterChipsComponent, MeterComponent, SectionCardComponent, InfoFieldComponent, SeverityBadgesComponent, MasterDetailComponent, MenuComponent, ConfirmationDialogComponent, FormsModule,
             ReactiveFormsModule,
             RouterModule,
-            OwlDateTimeModule,
-            OwlNativeDateTimeModule,
             HasPermissionDirective,
-            NgHeroiconsModule, i3.MatSelectModule, i42.MatRadioModule, i43.MatButtonModule, i44.MatIconModule, i45.MatPaginatorModule, i46.MatTableModule, i47.MatSnackBarModule, i1$2.MatDialogModule, i49.MatCheckboxModule, i50.MatCardModule, i51.MatDatepickerModule, i52.MatTimepickerModule, i53.MatBadgeModule, i54.MatExpansionModule, i55.MatFormFieldModule, i56.MatMenuModule, i57.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 },
-        ], imports: [CommonModule,
-            FormsModule,
+            TrimOnBlurDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiModule, imports: [FormsModule,
             ReactiveFormsModule,
-            RouterModule,
-            OwlDateTimeModule,
-            OwlNativeDateTimeModule,
-            OwlMomentDateTimeModule,
-            NgHeroiconsModule, i39.VflowComponent, i39.HandleComponent, i39.ResizableComponent, i39.MiniMapComponent, i39.NodeToolbarComponent, i39.CustomTemplateEdgeComponent, NgxEchartsModule.forRoot({ echarts: () => import('echarts') }), MATERIAL_MODULE, 
-            // Module
-            FormsModule,
+            RouterModule, SelectComponent, DatetimePicker, MasterDetailComponent, MenuComponent, FormsModule,
             ReactiveFormsModule,
-            RouterModule,
-            OwlDateTimeModule,
-            OwlNativeDateTimeModule,
-            NgHeroiconsModule, i3.MatSelectModule, i42.MatRadioModule, i43.MatButtonModule, i44.MatIconModule, i45.MatPaginatorModule, i46.MatTableModule, i47.MatSnackBarModule, i1$2.MatDialogModule, i49.MatCheckboxModule, i50.MatCardModule, i51.MatDatepickerModule, i52.MatTimepickerModule, i53.MatBadgeModule, i54.MatExpansionModule, i55.MatFormFieldModule, i56.MatMenuModule, i57.MatTooltipModule, i2$3.DragDropModule] });
+            RouterModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: UiModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: UiModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...FX_COMPONENTS, ...DIALOGS_COMPONENT],
                     imports: [
-                        CommonModule,
                         FormsModule,
                         ReactiveFormsModule,
                         RouterModule,
-                        OwlDateTimeModule,
-                        OwlNativeDateTimeModule,
-                        OwlMomentDateTimeModule,
                         HasPermissionDirective,
                         TrimOnBlurDirective,
-                        NgHeroiconsModule,
-                        ...Vflow,
-                        NgxEchartsModule.forRoot({ echarts: () => import('echarts') }),
-                        ...MATERIAL_MODULE,
+                        ...FX_COMPONENTS,
+                        ...DIALOGS_COMPONENT,
                     ],
                     exports: [
-                        // Component
                         ...FX_COMPONENTS,
                         ...DIALOGS_COMPONENT,
-                        // Module
                         FormsModule,
                         ReactiveFormsModule,
                         RouterModule,
-                        OwlDateTimeModule,
-                        OwlNativeDateTimeModule,
                         HasPermissionDirective,
-                        NgHeroiconsModule,
-                        ...MATERIAL_MODULE,
-                    ],
-                    providers: [
-                        importProvidersFrom(NgHeroiconsModule.forRoot()),
-                        { provide: OWL_DATE_TIME_FORMATS, useValue: MY_MOMENT_FORMATS },
+                        TrimOnBlurDirective,
                     ],
                 }]
         }] });
@@ -4777,5 +4168,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AuthInterceptor, AuthStateService, BaseComponent, BaseDialogComponent, BaseMasterDetailComponent, 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, MasterDetailComponent, 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 };
+export { AuthInterceptor, AuthStateService, BaseComponent, BaseDialogComponent, BaseMasterDetailComponent, BaseResolver, BaseTableComponent, BreadcrumbService, ButtonComponent, CheckboxComponent, CircleProgressBar, ConfirmationDialogComponent, DatetimePicker, DndUploadComponent, DrawerComponent, EmptyStateComponent, FX_ICON_SPRITE_URL, FilterChipsComponent, FxComponent, FxDialogService, FxLoadingService, FxStorageService, FxToastrService, FxUtils, FxValidators, HasPermissionDirective, HeroIconComponent, HttpLoaderFactory, HttpWrapper, InfoFieldComponent, InputComponent, KanbanBoardComponent, LoadingPanel, MasterDetailComponent, MenuComponent, MeterComponent, NotificationService, PermissionGuard, PermissionService, RadioButtonComponent, RadioButtonToggleComponent, RealtimeTableSync, 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