@flusys/ng-ui 6.0.0 → 6.0.2

package/fesm2022/flusys-ng-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, computed, Component, output, contentChild, signal, Injectable, inject, viewChild, effect, ElementRef, Directive, TemplateRef, contentChildren, afterNextRender, numberAttribute, model, forwardRef, DestroyRef, untracked, viewChildren, PLATFORM_ID, Renderer2, InjectionToken, Injector, SecurityContext, NgModule, makeEnvironmentProviders, APP_INITIALIZER } from '@angular/core';
+import { input, booleanAttribute, computed, Component, signal, Injectable, output, contentChild, inject, viewChild, effect, ElementRef, Directive, TemplateRef, contentChildren, afterNextRender, numberAttribute, model, forwardRef, DestroyRef, untracked, viewChildren, PLATFORM_ID, Renderer2, InjectionToken, Injector, SecurityContext, NgModule, makeEnvironmentProviders, APP_INITIALIZER } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import * as lucideNamespace from '@lucide/angular';
@@ -167,6 +167,7 @@ class UiIconComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: UiIconComponent, isStandalone: true, selector: "ui-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, spin: { classPropertyName: "spin", publicName: "spin", isSignal: true, isRequired: false, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--ui-icon-size": "size() + 'px'" }, classAttribute: "inline-flex items-center leading-none" }, providers: [provideLucideIcons(...allLucideIcons)], ngImport: i0, template: `
     @if (lucideName()) {
       <svg
+        ngSkipHydration
         [lucideIcon]="lucideName()"
         [size]="size()"
         [class]="iconClass()"
@@ -182,6 +183,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                     }, template: `
     @if (lucideName()) {
       <svg
+        ngSkipHydration
         [lucideIcon]="lucideName()"
         [size]="size()"
         [class]="iconClass()"
@@ -190,6 +192,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
   `, styles: [":host ::ng-deep svg[lucideIcon]{width:var(--ui-icon-size);height:var(--ui-icon-size);display:block}\n"] }]
         }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], spin: [{ type: i0.Input, args: [{ isSignal: true, alias: "spin", required: false }] }], fill: [{ type: i0.Input, args: [{ isSignal: true, alias: "fill", required: false }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }] } });
 
+class ConfirmationService {
+    _confirmation = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_confirmation" }] : /* istanbul ignore next */ []));
+    confirmation = this._confirmation.asReadonly();
+    confirm(options) {
+        this._confirmation.set(options);
+    }
+    close() {
+        this._confirmation.set(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ConfirmationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ConfirmationService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ConfirmationService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 class BadgeComponent {
     value = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
@@ -587,24 +607,6 @@ function plainVariant(kind) {
     return 'bg-transparent text-(--f-text-color) hover:bg-(--f-content-hover-background) active:bg-(--f-content-hover-background) border border-transparent';
 }
 
-class ConfirmationService {
-    _confirmation = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_confirmation" }] : /* istanbul ignore next */ []));
-    confirmation = this._confirmation.asReadonly();
-    confirm(options) {
-        this._confirmation.set(options);
-    }
-    close() {
-        this._confirmation.set(null);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ConfirmationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ConfirmationService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ConfirmationService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
 const FOCUSABLE_SELECTOR$3 = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
 class ConfirmDialog {
     static idCounter = 0;
@@ -650,7 +652,10 @@ class ConfirmDialog {
         effect(() => {
             const visible = !!this.activeConfirmation();
             if (visible) {
-                this._previouslyFocused = typeof document !== 'undefined' ? document.activeElement : null;
+                this._previouslyFocused =
+                    typeof document !== 'undefined'
+                        ? document.activeElement
+                        : null;
                 if (this.blockScroll())
                     this._doc.body.style.overflow = 'hidden';
             }
@@ -719,64 +724,89 @@ class ConfirmDialog {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ConfirmDialog, isStandalone: true, selector: "f-confirmdialog", inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, acceptLabel: { classPropertyName: "acceptLabel", publicName: "acceptLabel", isSignal: true, isRequired: false, transformFunction: null }, rejectLabel: { classPropertyName: "rejectLabel", publicName: "rejectLabel", isSignal: true, isRequired: false, transformFunction: null }, acceptIcon: { classPropertyName: "acceptIcon", publicName: "acceptIcon", isSignal: true, isRequired: false, transformFunction: null }, rejectIcon: { classPropertyName: "rejectIcon", publicName: "rejectIcon", isSignal: true, isRequired: false, transformFunction: null }, acceptButtonStyleClass: { classPropertyName: "acceptButtonStyleClass", publicName: "acceptButtonStyleClass", isSignal: true, isRequired: false, transformFunction: null }, rejectButtonStyleClass: { classPropertyName: "rejectButtonStyleClass", publicName: "rejectButtonStyleClass", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, blockScroll: { classPropertyName: "blockScroll", publicName: "blockScroll", isSignal: true, isRequired: false, transformFunction: null }, defaultFocus: { classPropertyName: "defaultFocus", publicName: "defaultFocus", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:keydown.escape": "onEscape()" }, classAttribute: "block" }, viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (activeConfirmation(); as c) {
       @if (c.acceptVisible !== false || c.rejectVisible !== false) {
-      <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
-        <div class="confirm-backdrop absolute inset-0 bg-black/50 backdrop-blur-[2px]" (click)="c.closable !== false && reject(c.reject)"></div>
-        <div
-          #panel
-          class="confirm-panel relative bg-(--f-overlay-popover-background) rounded-2xl shadow-2xl w-full max-w-sm mx-auto overflow-hidden"
-          [class]="styleClass()"
-          [style]="style()"
-          role="alertdialog"
-          aria-modal="true"
-          [attr.aria-labelledby]="c.header ? headerId : null"
-          [attr.aria-describedby]="c.message ? descId : null"
-          (keydown.tab)="onTab($event)"
-          (keydown.shift.tab)="onShiftTab($event)"
-        >
-          <div class="p-6">
-            <div class="flex items-start gap-4">
-              @if (resolvedIcon(c)) {
-                <div
-                  class="w-10 h-10 rounded-full flex items-center justify-center shrink-0"
-                  [style.background-color]="'color-mix(in srgb, var(--f-yellow-500) 12%, transparent)'"
-                >
-                  <ui-icon [name]="resolvedIcon(c)" class="text-lg" [style.color]="'var(--f-yellow-500)'"></ui-icon>
-                </div>
-              }
-              <div class="flex-1 min-w-0">
-                @if (c.header) {
-                  <h3 [id]="headerId" class="text-base font-semibold text-(--f-text-color) tracking-tight">{{ c.header }}</h3>
-                }
-                @if (c.message) {
-                  <p [id]="descId" class="text-sm text-(--f-text-muted-color) mt-1 leading-relaxed">{{ c.message }}</p>
+        <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
+          <div
+            class="confirm-backdrop absolute inset-0 bg-black/50 backdrop-blur-[2px]"
+            (click)="c.closable !== false && reject(c.reject)"
+          ></div>
+          <div
+            #panel
+            class="confirm-panel relative bg-(--f-overlay-popover-background) rounded-2xl shadow-2xl w-full max-w-sm mx-auto overflow-hidden"
+            [class]="styleClass()"
+            [style]="style()"
+            role="alertdialog"
+            aria-modal="true"
+            [attr.aria-labelledby]="c.header ? headerId : null"
+            [attr.aria-describedby]="c.message ? descId : null"
+            (keydown.tab)="onTab($event)"
+            (keydown.shift.tab)="onShiftTab($event)"
+          >
+            <div class="p-6">
+              <div class="flex items-start gap-4">
+                @if (resolvedIcon(c)) {
+                  <div
+                    class="w-10 h-10 rounded-full flex items-center justify-center shrink-0"
+                    [style.background-color]="
+                      'color-mix(in srgb, var(--f-yellow-500) 12%, transparent)'
+                    "
+                  >
+                    <ui-icon
+                      [name]="resolvedIcon(c)"
+                      class="text-lg"
+                      [style.color]="'var(--f-yellow-500)'"
+                    ></ui-icon>
+                  </div>
                 }
+                <div class="flex-1 min-w-0">
+                  @if (c.header) {
+                    <h3
+                      [id]="headerId"
+                      class="text-base font-semibold text-(--f-text-color) tracking-tight"
+                    >
+                      {{ c.header }}
+                    </h3>
+                  }
+                  @if (c.message) {
+                    <p
+                      [id]="descId"
+                      class="text-sm text-(--f-text-muted-color) mt-1 leading-relaxed"
+                    >
+                      {{ c.message }}
+                    </p>
+                  }
+                </div>
               </div>
             </div>
-          </div>
-          <div class="flex justify-end gap-2 px-6 py-4 bg-(--f-content-hover-background)/60 border-t border-(--f-content-border-color)">
-            @if (c.rejectVisible !== false) {
-              <f-button
-                severity="secondary"
-                [outlined]="true"
-                [label]="resolvedRejectLabel(c)"
-                [icon]="resolvedRejectIcon(c)"
-                [styleClass]="c.rejectButtonStyleClass ?? rejectButtonStyleClass()"
-                [autofocus]="defaultFocus() === 'reject'"
-                (onClick)="reject(c.reject)"
-              ></f-button>
-            }
-            @if (c.acceptVisible !== false) {
-              <f-button
-                [label]="resolvedAcceptLabel(c)"
-                [icon]="resolvedAcceptIcon(c)"
-                [styleClass]="c.acceptButtonStyleClass ?? acceptButtonStyleClass()"
-                [autofocus]="defaultFocus() === 'accept'"
-                (onClick)="accept(c.accept)"
-              ></f-button>
-            }
+            <div
+              class="flex justify-end gap-2 px-6 py-2 bg-(--f-content-hover-background)/60 border-t border-(--f-content-border-color)"
+            >
+              @if (c.rejectVisible !== false) {
+                <f-button
+                  severity="secondary"
+                  [outlined]="true"
+                  [label]="resolvedRejectLabel(c)"
+                  [icon]="resolvedRejectIcon(c)"
+                  [styleClass]="
+                    c.rejectButtonStyleClass ?? rejectButtonStyleClass()
+                  "
+                  [autofocus]="defaultFocus() === 'reject'"
+                  (onClick)="reject(c.reject)"
+                ></f-button>
+              }
+              @if (c.acceptVisible !== false) {
+                <f-button
+                  [label]="resolvedAcceptLabel(c)"
+                  [icon]="resolvedAcceptIcon(c)"
+                  [styleClass]="
+                    c.acceptButtonStyleClass ?? acceptButtonStyleClass()
+                  "
+                  [autofocus]="defaultFocus() === 'accept'"
+                  (onClick)="accept(c.accept)"
+                ></f-button>
+              }
+            </div>
           </div>
         </div>
-      </div>
       }
     }
   `, isInline: true, styles: ["@keyframes confirm-in{0%{opacity:0;transform:scale(.95) translateY(-8px)}to{opacity:1;transform:scale(1) translateY(0)}}.confirm-panel{animation:confirm-in .22s cubic-bezier(.16,1,.3,1)}@keyframes confirm-backdrop-in{0%{opacity:0}to{opacity:1}}.confirm-backdrop{animation:confirm-backdrop-in .15s ease-out}\n"], dependencies: [{ kind: "component", type: UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "component", type: ButtonComponent, selector: "f-button", inputs: ["label", "icon", "iconPos", "severity", "type", "disabled", "loading", "loadingIcon", "text", "link", "outlined", "plain", "variant", "raised", "rounded", "fluid", "size", "ariaLabel", "autofocus", "tabindex", "styleClass", "style", "badge", "badgeSeverity", "badgeClass"], outputs: ["onClick", "onFocus", "onBlur"] }] });
@@ -786,64 +816,89 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
             args: [{ selector: 'f-confirmdialog', imports: [UiIconComponent, ButtonComponent], host: { class: 'block', '(document:keydown.escape)': 'onEscape()' }, template: `
     @if (activeConfirmation(); as c) {
       @if (c.acceptVisible !== false || c.rejectVisible !== false) {
-      <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
-        <div class="confirm-backdrop absolute inset-0 bg-black/50 backdrop-blur-[2px]" (click)="c.closable !== false && reject(c.reject)"></div>
-        <div
-          #panel
-          class="confirm-panel relative bg-(--f-overlay-popover-background) rounded-2xl shadow-2xl w-full max-w-sm mx-auto overflow-hidden"
-          [class]="styleClass()"
-          [style]="style()"
-          role="alertdialog"
-          aria-modal="true"
-          [attr.aria-labelledby]="c.header ? headerId : null"
-          [attr.aria-describedby]="c.message ? descId : null"
-          (keydown.tab)="onTab($event)"
-          (keydown.shift.tab)="onShiftTab($event)"
-        >
-          <div class="p-6">
-            <div class="flex items-start gap-4">
-              @if (resolvedIcon(c)) {
-                <div
-                  class="w-10 h-10 rounded-full flex items-center justify-center shrink-0"
-                  [style.background-color]="'color-mix(in srgb, var(--f-yellow-500) 12%, transparent)'"
-                >
-                  <ui-icon [name]="resolvedIcon(c)" class="text-lg" [style.color]="'var(--f-yellow-500)'"></ui-icon>
-                </div>
-              }
-              <div class="flex-1 min-w-0">
-                @if (c.header) {
-                  <h3 [id]="headerId" class="text-base font-semibold text-(--f-text-color) tracking-tight">{{ c.header }}</h3>
-                }
-                @if (c.message) {
-                  <p [id]="descId" class="text-sm text-(--f-text-muted-color) mt-1 leading-relaxed">{{ c.message }}</p>
+        <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
+          <div
+            class="confirm-backdrop absolute inset-0 bg-black/50 backdrop-blur-[2px]"
+            (click)="c.closable !== false && reject(c.reject)"
+          ></div>
+          <div
+            #panel
+            class="confirm-panel relative bg-(--f-overlay-popover-background) rounded-2xl shadow-2xl w-full max-w-sm mx-auto overflow-hidden"
+            [class]="styleClass()"
+            [style]="style()"
+            role="alertdialog"
+            aria-modal="true"
+            [attr.aria-labelledby]="c.header ? headerId : null"
+            [attr.aria-describedby]="c.message ? descId : null"
+            (keydown.tab)="onTab($event)"
+            (keydown.shift.tab)="onShiftTab($event)"
+          >
+            <div class="p-6">
+              <div class="flex items-start gap-4">
+                @if (resolvedIcon(c)) {
+                  <div
+                    class="w-10 h-10 rounded-full flex items-center justify-center shrink-0"
+                    [style.background-color]="
+                      'color-mix(in srgb, var(--f-yellow-500) 12%, transparent)'
+                    "
+                  >
+                    <ui-icon
+                      [name]="resolvedIcon(c)"
+                      class="text-lg"
+                      [style.color]="'var(--f-yellow-500)'"
+                    ></ui-icon>
+                  </div>
                 }
+                <div class="flex-1 min-w-0">
+                  @if (c.header) {
+                    <h3
+                      [id]="headerId"
+                      class="text-base font-semibold text-(--f-text-color) tracking-tight"
+                    >
+                      {{ c.header }}
+                    </h3>
+                  }
+                  @if (c.message) {
+                    <p
+                      [id]="descId"
+                      class="text-sm text-(--f-text-muted-color) mt-1 leading-relaxed"
+                    >
+                      {{ c.message }}
+                    </p>
+                  }
+                </div>
               </div>
             </div>
-          </div>
-          <div class="flex justify-end gap-2 px-6 py-4 bg-(--f-content-hover-background)/60 border-t border-(--f-content-border-color)">
-            @if (c.rejectVisible !== false) {
-              <f-button
-                severity="secondary"
-                [outlined]="true"
-                [label]="resolvedRejectLabel(c)"
-                [icon]="resolvedRejectIcon(c)"
-                [styleClass]="c.rejectButtonStyleClass ?? rejectButtonStyleClass()"
-                [autofocus]="defaultFocus() === 'reject'"
-                (onClick)="reject(c.reject)"
-              ></f-button>
-            }
-            @if (c.acceptVisible !== false) {
-              <f-button
-                [label]="resolvedAcceptLabel(c)"
-                [icon]="resolvedAcceptIcon(c)"
-                [styleClass]="c.acceptButtonStyleClass ?? acceptButtonStyleClass()"
-                [autofocus]="defaultFocus() === 'accept'"
-                (onClick)="accept(c.accept)"
-              ></f-button>
-            }
+            <div
+              class="flex justify-end gap-2 px-6 py-2 bg-(--f-content-hover-background)/60 border-t border-(--f-content-border-color)"
+            >
+              @if (c.rejectVisible !== false) {
+                <f-button
+                  severity="secondary"
+                  [outlined]="true"
+                  [label]="resolvedRejectLabel(c)"
+                  [icon]="resolvedRejectIcon(c)"
+                  [styleClass]="
+                    c.rejectButtonStyleClass ?? rejectButtonStyleClass()
+                  "
+                  [autofocus]="defaultFocus() === 'reject'"
+                  (onClick)="reject(c.reject)"
+                ></f-button>
+              }
+              @if (c.acceptVisible !== false) {
+                <f-button
+                  [label]="resolvedAcceptLabel(c)"
+                  [icon]="resolvedAcceptIcon(c)"
+                  [styleClass]="
+                    c.acceptButtonStyleClass ?? acceptButtonStyleClass()
+                  "
+                  [autofocus]="defaultFocus() === 'accept'"
+                  (onClick)="accept(c.accept)"
+                ></f-button>
+              }
+            </div>
           </div>
         </div>
-      </div>
       }
     }
   `, styles: ["@keyframes confirm-in{0%{opacity:0;transform:scale(.95) translateY(-8px)}to{opacity:1;transform:scale(1) translateY(0)}}.confirm-panel{animation:confirm-in .22s cubic-bezier(.16,1,.3,1)}@keyframes confirm-backdrop-in{0%{opacity:0}to{opacity:1}}.confirm-backdrop{animation:confirm-backdrop-in .15s ease-out}\n"] }]
@@ -5384,7 +5439,10 @@ class MultiSelectComponent {
                 queueMicrotask(() => this._filterInputRef()?.nativeElement.focus());
             }
         });
-        repositionOnScroll(() => this.open() && this.appendTo() === 'body', () => { this.position(); this.adjustForViewport(); });
+        repositionOnScroll(() => this.open() && this.appendTo() === 'body', () => {
+            this.position();
+            this.adjustForViewport();
+        });
     }
     onDocumentClick(e) {
         if (this.open() && !this._el.nativeElement.contains(e.target)) {
@@ -5411,7 +5469,11 @@ class MultiSelectComponent {
     panelStyle = computed(() => {
         if (this.appendTo() !== 'body')
             return {};
-        return { top: `${this._panelTop()}px`, left: `${this._panelLeft()}px`, width: `${this._panelWidth()}px` };
+        return {
+            top: `${this._panelTop()}px`,
+            left: `${this._panelLeft()}px`,
+            width: `${this._panelWidth()}px`,
+        };
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panelStyle" }] : /* istanbul ignore next */ []));
     position() {
@@ -5437,12 +5499,20 @@ class MultiSelectComponent {
         }
     }
     triggerClass = computed(() => {
-        const base = 'w-full min-h-[38px] flex items-center gap-2 px-3 py-1.5 text-sm rounded-lg border bg-(--f-form-field-background) focus:outline-none focus-visible:ring-focus transition-all duration-[var(--f-transition-duration)]';
+        const base = 'w-full min-h-[34px] flex items-center gap-2 px-3 py-1.5 text-sm rounded-lg border bg-(--f-form-field-background) focus:outline-none focus-visible:ring-focus transition-all duration-[var(--f-transition-duration)]';
         const showInvalid = this.invalid() && this.touched();
         const stateClass = this.open()
-            ? (showInvalid ? 'border-red-400' : 'border-primary')
-            : (showInvalid ? 'border-red-400 hover:border-red-300' : 'border-(--f-form-field-border-color) hover:border-(--f-form-field-hover-border-color)');
-        const disabledClass = this.disabled() ? 'opacity-60 cursor-not-allowed' : (this.readonly() ? 'cursor-default' : 'cursor-pointer');
+            ? showInvalid
+                ? 'border-red-400'
+                : 'border-primary'
+            : showInvalid
+                ? 'border-red-400 hover:border-red-300'
+                : 'border-(--f-form-field-border-color) hover:border-(--f-form-field-hover-border-color)';
+        const disabledClass = this.disabled()
+            ? 'opacity-60 cursor-not-allowed'
+            : this.readonly()
+                ? 'cursor-default'
+                : 'cursor-pointer';
         return `${base} ${stateClass} ${disabledClass}`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "triggerClass" }] : /* istanbul ignore next */ []));
@@ -5554,7 +5624,7 @@ class MultiSelectComponent {
     fTemplates = contentChildren(FTemplateDirective, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "fTemplates" }] : /* istanbul ignore next */ []));
     namedTemplate(name) {
-        return this.fTemplates().find(t => t.fTemplate() === name)?.templateRef ?? null;
+        return (this.fTemplates().find((t) => t.fTemplate() === name)?.templateRef ?? null);
     }
     selectedItemTpl = computed(() => this.selectedItemRef() ?? this.namedTemplate('selectedItem'), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selectedItemTpl" }] : /* istanbul ignore next */ []));
@@ -5588,20 +5658,32 @@ class MultiSelectComponent {
     }
     filterFieldList = computed(() => {
         const by = this.filterBy();
-        return by ? by.split(',').map(f => f.trim()).filter(Boolean) : [this.optionLabel()];
+        return by
+            ? by
+                .split(',')
+                .map((f) => f.trim())
+                .filter(Boolean)
+            : [this.optionLabel()];
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "filterFieldList" }] : /* istanbul ignore next */ []));
     matchesFilter(raw, query) {
         const locale = this.filterLocale() || undefined;
-        const s = locale ? String(raw ?? '').toLocaleLowerCase(locale) : String(raw ?? '').toLowerCase();
+        const s = locale
+            ? String(raw ?? '').toLocaleLowerCase(locale)
+            : String(raw ?? '').toLowerCase();
         const q = locale ? query.toLocaleLowerCase(locale) : query.toLowerCase();
         switch (this.filterMatchMode()) {
-            case 'startsWith': return s.startsWith(q);
-            case 'endsWith': return s.endsWith(q);
-            case 'equals': return s === q;
-            case 'notEquals': return s !== q;
+            case 'startsWith':
+                return s.startsWith(q);
+            case 'endsWith':
+                return s.endsWith(q);
+            case 'equals':
+                return s === q;
+            case 'notEquals':
+                return s !== q;
             case 'contains':
-            default: return s.includes(q);
+            default:
+                return s.includes(q);
         }
     }
     optionMatchesQuery(opt, query) {
@@ -5610,36 +5692,41 @@ class MultiSelectComponent {
         if (opt === null || typeof opt !== 'object')
             return this.matchesFilter(opt, query);
         const rec = opt;
-        return this.filterFieldList().some(f => this.matchesFilter(rec[f], query));
+        return this.filterFieldList().some((f) => this.matchesFilter(rec[f], query));
     }
     filteredOptions = computed(() => {
         const opts = this.options();
         const q = this.filterText();
         if (!q)
             return opts;
-        return opts.filter(o => this.optionMatchesQuery(o, q));
+        return opts.filter((o) => this.optionMatchesQuery(o, q));
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
     allLeafOptions = computed(() => {
         if (!this.group())
             return this.options();
         const groups = this.options();
-        return groups.flatMap(g => g[this.optionGroupChildren()] ?? []);
+        return groups.flatMap((g) => g[this.optionGroupChildren()] ?? []);
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "allLeafOptions" }] : /* istanbul ignore next */ []));
     flatItems = computed(() => {
         const q = this.filterText();
         if (!this.group()) {
-            return this.filteredOptions().map(o => ({ kind: 'option', option: o }));
+            return this.filteredOptions().map((o) => ({ kind: 'option', option: o }));
         }
         const groups = this.options();
         const out = [];
         for (const g of groups) {
             const children = g[this.optionGroupChildren()] ?? [];
-            const filteredChildren = q ? children.filter(o => this.optionMatchesQuery(o, q)) : children;
+            const filteredChildren = q
+                ? children.filter((o) => this.optionMatchesQuery(o, q))
+                : children;
             if (!filteredChildren.length)
                 continue;
-            out.push({ kind: 'group', label: String(g[this.optionGroupLabel()] ?? '') });
+            out.push({
+                kind: 'group',
+                label: String(g[this.optionGroupLabel()] ?? ''),
+            });
             for (const c of filteredChildren)
                 out.push({ kind: 'option', option: c });
         }
@@ -5648,7 +5735,7 @@ class MultiSelectComponent {
     ...(ngDevMode ? [{ debugName: "flatItems" }] : /* istanbul ignore next */ []));
     navigableOptions = computed(() => this.flatItems()
         .filter((i) => i.kind === 'option')
-        .map(i => i.option), /* @ts-ignore */
+        .map((i) => i.option), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "navigableOptions" }] : /* istanbul ignore next */ []));
     activeDescendantId = computed(() => {
         const idx = this._focusedOptionIndex();
@@ -5671,10 +5758,10 @@ class MultiSelectComponent {
     }
     selectedOptions = computed(() => {
         const vals = this.values();
-        return this.allLeafOptions().filter(o => vals.includes(this.getOptionValue(o)));
+        return this.allLeafOptions().filter((o) => vals.includes(this.getOptionValue(o)));
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selectedOptions" }] : /* istanbul ignore next */ []));
-    selectedLabels = computed(() => this.selectedOptions().map(o => this.getOptionLabel(o)), /* @ts-ignore */
+    selectedLabels = computed(() => this.selectedOptions().map((o) => this.getOptionLabel(o)), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selectedLabels" }] : /* istanbul ignore next */ []));
     getOptionLabel(opt) {
         if (opt === null || opt === undefined)
@@ -5690,7 +5777,9 @@ class MultiSelectComponent {
             return opt;
         return opt[this.optionValue()];
     }
-    isSelected(opt) { return this.values().includes(this.getOptionValue(opt)); }
+    isSelected(opt) {
+        return this.values().includes(this.getOptionValue(opt));
+    }
     isOptionDisabled(opt) {
         const field = this.optionDisabled();
         if (!field || opt === null || typeof opt !== 'object')
@@ -5737,7 +5826,7 @@ class MultiSelectComponent {
         const limit = this.selectionLimit();
         if (selecting && limit != null && cur.length >= limit)
             return;
-        const next = selecting ? [...cur, v] : cur.filter(x => x !== v);
+        const next = selecting ? [...cur, v] : cur.filter((x) => x !== v);
         this._values.set(next);
         this._onChange(next);
         this.onChange.emit(next);
@@ -5753,22 +5842,24 @@ class MultiSelectComponent {
         this.onClear.emit();
     }
     allFilteredSelected = computed(() => {
-        const selectable = this.filteredOptions().filter(o => !this.isOptionDisabled(o));
-        return selectable.length > 0 && selectable.every(o => this.isSelected(o));
+        const selectable = this.filteredOptions().filter((o) => !this.isOptionDisabled(o));
+        return selectable.length > 0 && selectable.every((o) => this.isSelected(o));
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "allFilteredSelected" }] : /* istanbul ignore next */ []));
     toggleAll(e) {
         e.stopPropagation();
         if (this.readonly())
             return;
-        const selectable = this.filteredOptions().filter(o => !this.isOptionDisabled(o));
-        const selectableValues = selectable.map(o => this.getOptionValue(o));
+        const selectable = this.filteredOptions().filter((o) => !this.isOptionDisabled(o));
+        const selectableValues = selectable.map((o) => this.getOptionValue(o));
         const cur = this.values();
         const selectingAll = !this.allFilteredSelected();
         const next = selectingAll
-            ? [...cur, ...selectableValues.filter(v => !cur.includes(v))]
-            : cur.filter(v => !selectableValues.includes(v));
-        const limited = this.selectionLimit() != null ? next.slice(0, this.selectionLimit()) : next;
+            ? [...cur, ...selectableValues.filter((v) => !cur.includes(v))]
+            : cur.filter((v) => !selectableValues.includes(v));
+        const limited = this.selectionLimit() != null
+            ? next.slice(0, this.selectionLimit())
+            : next;
         this._values.set(limited);
         this._onChange(limited);
         this.onChange.emit(limited);
@@ -5786,7 +5877,11 @@ class MultiSelectComponent {
         if (!len)
             return;
         const cur = this._focusedOptionIndex();
-        const next = cur < 0 ? (delta > 0 ? 0 : len - 1) : Math.min(len - 1, Math.max(0, cur + delta));
+        const next = cur < 0
+            ? delta > 0
+                ? 0
+                : len - 1
+            : Math.min(len - 1, Math.max(0, cur + delta));
         this._focusedOptionIndex.set(next);
     }
     _typeaheadStr = '';
@@ -5797,13 +5892,15 @@ class MultiSelectComponent {
         this._typeaheadStr += char.toLowerCase();
         if (this._typeaheadTimer)
             clearTimeout(this._typeaheadTimer);
-        this._typeaheadTimer = setTimeout(() => { this._typeaheadStr = ''; }, 500);
+        this._typeaheadTimer = setTimeout(() => {
+            this._typeaheadStr = '';
+        }, 500);
         const opts = this.navigableOptions();
         if (!opts.length)
             return;
         const start = this._focusedOptionIndex() + 1;
         const ordered = [...opts.slice(start), ...opts.slice(0, start)];
-        const match = ordered.find(o => this.getOptionLabel(o).toLowerCase().startsWith(this._typeaheadStr));
+        const match = ordered.find((o) => this.getOptionLabel(o).toLowerCase().startsWith(this._typeaheadStr));
         if (match)
             this._focusedOptionIndex.set(opts.indexOf(match));
     }
@@ -5865,17 +5962,32 @@ class MultiSelectComponent {
                     this.closeList();
                 break;
             default:
-                if (event.key.length === 1 && !event.altKey && !event.ctrlKey && !event.metaKey) {
+                if (event.key.length === 1 &&
+                    !event.altKey &&
+                    !event.ctrlKey &&
+                    !event.metaKey) {
                     this.typeahead(event.key);
                 }
         }
     }
-    writeValue(v) { this._values.set(Array.isArray(v) ? v : []); }
-    registerOnChange(fn) { this._onChange = fn; }
-    registerOnTouched(fn) { this._onTouched = fn; }
+    writeValue(v) {
+        this._values.set(Array.isArray(v) ? v : []);
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
     setDisabledState() { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: MultiSelectComponent, isStandalone: true, selector: "f-multiselect", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, filterBy: { classPropertyName: "filterBy", publicName: "filterBy", isSignal: true, isRequired: false, transformFunction: null }, filterMatchMode: { classPropertyName: "filterMatchMode", publicName: "filterMatchMode", isSignal: true, isRequired: false, transformFunction: null }, filterLocale: { classPropertyName: "filterLocale", publicName: "filterLocale", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, resetFilterOnHide: { classPropertyName: "resetFilterOnHide", publicName: "resetFilterOnHide", isSignal: true, isRequired: false, transformFunction: null }, autofocusFilter: { classPropertyName: "autofocusFilter", publicName: "autofocusFilter", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, emptyFilterMessage: { classPropertyName: "emptyFilterMessage", publicName: "emptyFilterMessage", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, optionDisabled: { classPropertyName: "optionDisabled", publicName: "optionDisabled", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedLabels: { classPropertyName: "maxSelectedLabels", publicName: "maxSelectedLabels", isSignal: true, isRequired: false, transformFunction: null }, selectionLimit: { classPropertyName: "selectionLimit", publicName: "selectionLimit", isSignal: true, isRequired: false, transformFunction: null }, showToggleAll: { classPropertyName: "showToggleAll", publicName: "showToggleAll", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingIcon: { classPropertyName: "loadingIcon", publicName: "loadingIcon", isSignal: true, isRequired: false, transformFunction: null }, dropdownIcon: { classPropertyName: "dropdownIcon", publicName: "dropdownIcon", isSignal: true, isRequired: false, transformFunction: null }, clearIcon: { classPropertyName: "clearIcon", publicName: "clearIcon", isSignal: true, isRequired: false, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, optionGroupLabel: { classPropertyName: "optionGroupLabel", publicName: "optionGroupLabel", isSignal: true, isRequired: false, transformFunction: null }, optionGroupChildren: { classPropertyName: "optionGroupChildren", publicName: "optionGroupChildren", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollItemSize: { classPropertyName: "virtualScrollItemSize", publicName: "virtualScrollItemSize", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onBlur: "onBlur", onFocus: "onFocus", onChange: "onChange", onFilter: "onFilter", onShow: "onShow", onHide: "onHide", onClear: "onClear", onLazyLoad: "onLazyLoad", onSelectAllChange: "onSelectAllChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "hostClass()", "style": "style()" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => MultiSelectComponent), multi: true }], queries: [{ propertyName: "selectedItemRef", first: true, predicate: ["selectedItem"], descendants: true, isSignal: true }, { propertyName: "itemRef", first: true, predicate: ["item"], descendants: true, isSignal: true }, { propertyName: "groupRef", first: true, predicate: ["group"], descendants: true, isSignal: true }, { propertyName: "headerRef", first: true, predicate: ["header"], descendants: true, isSignal: true }, { propertyName: "footerRef", first: true, predicate: ["footer"], descendants: true, isSignal: true }, { propertyName: "emptyRef", first: true, predicate: ["empty"], descendants: true, isSignal: true }, { propertyName: "emptyFilterRef", first: true, predicate: ["emptyfilter"], descendants: true, isSignal: true }, { propertyName: "loaderRef", first: true, predicate: ["loader"], descendants: true, isSignal: true }, { propertyName: "filterRef", first: true, predicate: ["filter"], descendants: true, isSignal: true }, { propertyName: "fTemplates", predicate: FTemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "_triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "_filterInputRef", first: true, predicate: ["filterInput"], descendants: true, isSignal: true }, { propertyName: "_panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: MultiSelectComponent, isStandalone: true, selector: "f-multiselect", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, filterBy: { classPropertyName: "filterBy", publicName: "filterBy", isSignal: true, isRequired: false, transformFunction: null }, filterMatchMode: { classPropertyName: "filterMatchMode", publicName: "filterMatchMode", isSignal: true, isRequired: false, transformFunction: null }, filterLocale: { classPropertyName: "filterLocale", publicName: "filterLocale", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, resetFilterOnHide: { classPropertyName: "resetFilterOnHide", publicName: "resetFilterOnHide", isSignal: true, isRequired: false, transformFunction: null }, autofocusFilter: { classPropertyName: "autofocusFilter", publicName: "autofocusFilter", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, emptyFilterMessage: { classPropertyName: "emptyFilterMessage", publicName: "emptyFilterMessage", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, optionDisabled: { classPropertyName: "optionDisabled", publicName: "optionDisabled", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedLabels: { classPropertyName: "maxSelectedLabels", publicName: "maxSelectedLabels", isSignal: true, isRequired: false, transformFunction: null }, selectionLimit: { classPropertyName: "selectionLimit", publicName: "selectionLimit", isSignal: true, isRequired: false, transformFunction: null }, showToggleAll: { classPropertyName: "showToggleAll", publicName: "showToggleAll", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingIcon: { classPropertyName: "loadingIcon", publicName: "loadingIcon", isSignal: true, isRequired: false, transformFunction: null }, dropdownIcon: { classPropertyName: "dropdownIcon", publicName: "dropdownIcon", isSignal: true, isRequired: false, transformFunction: null }, clearIcon: { classPropertyName: "clearIcon", publicName: "clearIcon", isSignal: true, isRequired: false, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, optionGroupLabel: { classPropertyName: "optionGroupLabel", publicName: "optionGroupLabel", isSignal: true, isRequired: false, transformFunction: null }, optionGroupChildren: { classPropertyName: "optionGroupChildren", publicName: "optionGroupChildren", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollItemSize: { classPropertyName: "virtualScrollItemSize", publicName: "virtualScrollItemSize", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onBlur: "onBlur", onFocus: "onFocus", onChange: "onChange", onFilter: "onFilter", onShow: "onShow", onHide: "onHide", onClear: "onClear", onLazyLoad: "onLazyLoad", onSelectAllChange: "onSelectAllChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "hostClass()", "style": "style()" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => MultiSelectComponent),
+                multi: true,
+            },
+        ], queries: [{ propertyName: "selectedItemRef", first: true, predicate: ["selectedItem"], descendants: true, isSignal: true }, { propertyName: "itemRef", first: true, predicate: ["item"], descendants: true, isSignal: true }, { propertyName: "groupRef", first: true, predicate: ["group"], descendants: true, isSignal: true }, { propertyName: "headerRef", first: true, predicate: ["header"], descendants: true, isSignal: true }, { propertyName: "footerRef", first: true, predicate: ["footer"], descendants: true, isSignal: true }, { propertyName: "emptyRef", first: true, predicate: ["empty"], descendants: true, isSignal: true }, { propertyName: "emptyFilterRef", first: true, predicate: ["emptyfilter"], descendants: true, isSignal: true }, { propertyName: "loaderRef", first: true, predicate: ["loader"], descendants: true, isSignal: true }, { propertyName: "filterRef", first: true, predicate: ["filter"], descendants: true, isSignal: true }, { propertyName: "fTemplates", predicate: FTemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "_triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "_filterInputRef", first: true, predicate: ["filterInput"], descendants: true, isSignal: true }, { propertyName: "_panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="relative w-full">
       <div
         #trigger
@@ -5896,20 +6008,36 @@ class MultiSelectComponent {
       >
         @if (selectedLabels().length) {
           @if (display() === 'comma') {
-            <span class="flex-1 min-w-0 truncate text-sm text-(--f-form-field-color)">{{ commaLabel() }}</span>
+            <span
+              class="flex-1 min-w-0 truncate text-sm text-(--f-form-field-color)"
+              >{{ commaLabel() }}</span
+            >
           } @else if (selectedLabels().length > maxSelectedLabels()) {
-            <span class="flex-1 min-w-0 truncate text-sm text-(--f-form-field-color)">{{ selectedLabels().length }} items selected</span>
+            <span
+              class="flex-1 min-w-0 truncate text-sm text-(--f-form-field-color)"
+              >{{ selectedLabels().length }} items selected</span
+            >
           } @else {
             <div class="flex flex-wrap items-center gap-1 flex-1 min-w-0">
               @for (opt of selectedOptions(); track getOptionValue(opt)) {
-                <span class="inline-flex items-center gap-1 px-2 py-0.5 bg-primary/10 text-primary rounded-md text-xs font-medium shrink-0">
+                <span
+                  class="inline-flex items-center gap-1 px-2 py-0.5 bg-primary/10 text-primary rounded-md text-xs font-medium shrink-0"
+                >
                   @if (selectedItemTpl()) {
-                    <ng-container [ngTemplateOutlet]="selectedItemTpl()" [ngTemplateOutletContext]="{ $implicit: opt }" />
+                    <ng-container
+                      [ngTemplateOutlet]="selectedItemTpl()"
+                      [ngTemplateOutletContext]="{ $implicit: opt }"
+                    />
                   } @else {
                     {{ getOptionLabel(opt) }}
                   }
                   @if (!disabled() && !readonly()) {
-                    <button type="button" aria-label="Remove" class="inline-flex items-center justify-center hover:opacity-70 cursor-pointer" (click)="removeOption($event, opt)">
+                    <button
+                      type="button"
+                      aria-label="Remove"
+                      class="inline-flex items-center justify-center hover:opacity-70 cursor-pointer"
+                      (click)="removeOption($event, opt)"
+                    >
                       <ui-icon name="times" class="text-[10px]"></ui-icon>
                     </button>
                   }
@@ -5918,16 +6046,30 @@ class MultiSelectComponent {
             </div>
           }
         } @else {
-          <span class="text-(--f-form-field-placeholder-color) text-sm">{{ placeholder() }}</span>
+          <span class="text-(--f-form-field-placeholder-color) text-sm">{{
+            placeholder()
+          }}</span>
         }
         <span class="flex items-center gap-1 shrink-0 ml-auto">
           @if (showClear() && values().length && !disabled() && !readonly()) {
-            <ui-icon [name]="clearIcon()" class="text-xs text-(--f-form-field-placeholder-color) hover:text-(--f-text-color) shrink-0" (click)="clearAll($event)"></ui-icon>
+            <ui-icon
+              [name]="clearIcon()"
+              class="text-xs text-(--f-form-field-placeholder-color) hover:text-(--f-text-color) shrink-0"
+              (click)="clearAll($event)"
+            ></ui-icon>
           }
           @if (loading()) {
-            <ui-icon [name]="loadingIcon()" [spin]="true" class="text-xs text-(--f-form-field-placeholder-color) shrink-0"></ui-icon>
+            <ui-icon
+              [name]="loadingIcon()"
+              [spin]="true"
+              class="text-xs text-(--f-form-field-placeholder-color) shrink-0"
+            ></ui-icon>
           } @else {
-            <ui-icon [name]="dropdownIcon()" class="text-xs text-(--f-form-field-placeholder-color) transition-transform duration-[var(--f-transition-duration)] shrink-0" [class.rotate-180]="open()"></ui-icon>
+            <ui-icon
+              [name]="dropdownIcon()"
+              class="text-xs text-(--f-form-field-placeholder-color) transition-transform duration-[var(--f-transition-duration)] shrink-0"
+              [class.rotate-180]="open()"
+            ></ui-icon>
           }
         </span>
       </div>
@@ -5942,10 +6084,21 @@ class MultiSelectComponent {
           @if (filter()) {
             <div class="p-2 border-b border-(--f-content-border-color)">
               @if (filterTpl()) {
-                <ng-container [ngTemplateOutlet]="filterTpl()" [ngTemplateOutletContext]="{ $implicit: filterText(), filter: setFilterFn }" />
+                <ng-container
+                  [ngTemplateOutlet]="filterTpl()"
+                  [ngTemplateOutletContext]="{
+                    $implicit: filterText(),
+                    filter: setFilterFn,
+                  }"
+                />
               } @else {
-                <div class="flex items-center gap-2 px-2 py-1.5 bg-(--f-content-hover-background) rounded-lg border border-(--f-content-border-color)">
-                  <ui-icon name="search" class="text-xs text-(--f-text-muted-color) shrink-0"></ui-icon>
+                <div
+                  class="flex items-center gap-2 px-2 py-1.5 bg-(--f-content-hover-background) rounded-lg border border-(--f-content-border-color)"
+                >
+                  <ui-icon
+                    name="search"
+                    class="text-xs text-(--f-text-muted-color) shrink-0"
+                  ></ui-icon>
                   <input
                     #filterInput
                     type="text"
@@ -5961,36 +6114,67 @@ class MultiSelectComponent {
             </div>
           }
           @if (showToggleAll() && filteredOptions().length) {
-            <button type="button"
+            <button
+              type="button"
               class="w-full text-left px-3 py-2 text-sm flex items-center gap-2.5 border-b border-(--f-content-border-color) text-(--f-text-color) hover:bg-(--f-content-hover-background) transition-colors cursor-pointer"
-              (click)="toggleAll($event)">
-              <div class="w-4 h-4 rounded-sm border flex items-center justify-center shrink-0 transition-colors"
-                [class]="allFilteredSelected() ? 'bg-primary border-primary' : 'border-(--f-form-field-border-color) bg-(--f-form-field-background)'">
+              (click)="toggleAll($event)"
+            >
+              <div
+                class="w-4 h-4 rounded-sm border flex items-center justify-center shrink-0 transition-colors"
+                [class]="
+                  allFilteredSelected()
+                    ? 'bg-primary border-primary'
+                    : 'border-(--f-form-field-border-color) bg-(--f-form-field-background)'
+                "
+              >
                 @if (allFilteredSelected()) {
-                  <ui-icon name="check" class="text-[9px] text-primary-contrast"></ui-icon>
+                  <ui-icon
+                    name="check"
+                    class="text-[9px] text-primary-contrast"
+                  ></ui-icon>
                 }
               </div>
               <span class="flex-1 truncate font-medium">Select All</span>
             </button>
           }
-          <div data-multiselect-list [id]="listId()" role="listbox" [attr.aria-multiselectable]="true" class="max-h-56 overflow-auto py-1">
+          <div
+            data-multiselect-list
+            [id]="listId()"
+            role="listbox"
+            [attr.aria-multiselectable]="true"
+            class="max-h-56 overflow-auto py-1"
+          >
             @if (loading()) {
               @if (loaderTpl()) {
                 <ng-container [ngTemplateOutlet]="loaderTpl()" />
               } @else {
                 <div class="py-6 flex flex-col items-center gap-2">
-                  <ui-icon [name]="loadingIcon()" [spin]="true" class="text-xl text-(--f-text-muted-color)"></ui-icon>
+                  <ui-icon
+                    [name]="loadingIcon()"
+                    [spin]="true"
+                    class="text-xl text-(--f-text-muted-color)"
+                  ></ui-icon>
                 </div>
               }
             } @else if (virtualScroll()) {
-              <f-scroller [items]="flatItems()" [itemSize]="virtualScrollItemSize()" scrollHeight="14rem">
+              <f-scroller
+                [items]="flatItems()"
+                [itemSize]="virtualScrollItemSize()"
+                scrollHeight="14rem"
+              >
                 <ng-template let-item let-i="index">
-                  <ng-container [ngTemplateOutlet]="rowTpl" [ngTemplateOutletContext]="{ $implicit: item, index: i }" />
+                  <ng-container
+                    [ngTemplateOutlet]="rowTpl"
+                    [ngTemplateOutletContext]="{ $implicit: item, index: i }"
+                  />
                 </ng-template>
               </f-scroller>
             } @else {
               @for (item of flatItems(); track $index) {
-                <ng-container [ngTemplateOutlet]="rowTpl" [ngTemplateOutletContext]="{ $implicit: item, index: $index }" />
+                <ng-container
+                  [ngTemplateOutlet]="rowTpl"
+                  [ngTemplateOutletContext]="{ $implicit: item, index: $index }"
+                />
               } @empty {
                 <ng-container [ngTemplateOutlet]="emptyStateTpl" />
               }
@@ -6007,9 +6191,14 @@ class MultiSelectComponent {
 
     <ng-template #rowTpl let-item let-i="index">
       @if (item.kind === 'group') {
-        <div class="h-full flex items-center px-3 py-1.5 text-xs font-semibold uppercase tracking-wide text-(--f-text-muted-color) bg-(--f-content-hover-background)">
+        <div
+          class="h-full flex items-center px-3 py-1.5 text-xs font-semibold uppercase tracking-wide text-(--f-text-muted-color) bg-(--f-content-hover-background)"
+        >
           @if (groupTpl()) {
-            <ng-container [ngTemplateOutlet]="groupTpl()" [ngTemplateOutletContext]="{ $implicit: item.label }" />
+            <ng-container
+              [ngTemplateOutlet]="groupTpl()"
+              [ngTemplateOutletContext]="{ $implicit: item.label }"
+            />
           } @else {
             {{ item.label }}
           }
@@ -6026,15 +6215,27 @@ class MultiSelectComponent {
           (click)="toggleOption($event, item.option)"
           (mouseenter)="onOptionMouseEnter(item.option)"
         >
-          <div class="w-4 h-4 rounded-sm border flex items-center justify-center shrink-0 transition-colors"
-            [class]="isSelected(item.option) ? 'bg-primary border-primary' : 'border-(--f-form-field-border-color) bg-(--f-form-field-background)'">
+          <div
+            class="w-4 h-4 rounded-sm border flex items-center justify-center shrink-0 transition-colors"
+            [class]="
+              isSelected(item.option)
+                ? 'bg-primary border-primary'
+                : 'border-(--f-form-field-border-color) bg-(--f-form-field-background)'
+            "
+          >
             @if (isSelected(item.option)) {
-              <ui-icon name="check" class="text-[9px] text-primary-contrast"></ui-icon>
+              <ui-icon
+                name="check"
+                class="text-[9px] text-primary-contrast"
+              ></ui-icon>
             }
           </div>
           <span class="flex-1 truncate">
             @if (itemTpl()) {
-              <ng-container [ngTemplateOutlet]="itemTpl()" [ngTemplateOutletContext]="{ $implicit: item.option }" />
+              <ng-container
+                [ngTemplateOutlet]="itemTpl()"
+                [ngTemplateOutletContext]="{ $implicit: item.option }"
+              />
             } @else {
               {{ getOptionLabel(item.option) }}
             }
@@ -6048,15 +6249,25 @@ class MultiSelectComponent {
         <ng-container [ngTemplateOutlet]="emptyFilterTpl()" />
       } @else if (filterText()) {
         <div class="py-6 flex flex-col items-center gap-2">
-          <ui-icon name="search" class="text-2xl text-(--f-text-muted-color)"></ui-icon>
-          <span class="text-sm text-(--f-text-muted-color)">{{ emptyFilterMessage() }}</span>
+          <ui-icon
+            name="search"
+            class="text-2xl text-(--f-text-muted-color)"
+          ></ui-icon>
+          <span class="text-sm text-(--f-text-muted-color)">{{
+            emptyFilterMessage()
+          }}</span>
         </div>
       } @else if (emptyTpl()) {
         <ng-container [ngTemplateOutlet]="emptyTpl()" />
       } @else {
         <div class="py-6 flex flex-col items-center gap-2">
-          <ui-icon name="inbox" class="text-2xl text-(--f-text-muted-color)"></ui-icon>
-          <span class="text-sm text-(--f-text-muted-color)">{{ emptyMessage() }}</span>
+          <ui-icon
+            name="inbox"
+            class="text-2xl text-(--f-text-muted-color)"
+          ></ui-icon>
+          <span class="text-sm text-(--f-text-muted-color)">{{
+            emptyMessage()
+          }}</span>
         </div>
       }
     </ng-template>
@@ -6067,7 +6278,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
             args: [{
                     selector: 'f-multiselect',
                     imports: [UiIconComponent, NgTemplateOutlet, ScrollerComponent],
-                    providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => MultiSelectComponent), multi: true }],
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => MultiSelectComponent),
+                            multi: true,
+                        },
+                    ],
                     host: {
                         '[class]': 'hostClass()',
                         '[style]': 'style()',
@@ -6094,20 +6311,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
       >
         @if (selectedLabels().length) {
           @if (display() === 'comma') {
-            <span class="flex-1 min-w-0 truncate text-sm text-(--f-form-field-color)">{{ commaLabel() }}</span>
+            <span
+              class="flex-1 min-w-0 truncate text-sm text-(--f-form-field-color)"
+              >{{ commaLabel() }}</span
+            >
           } @else if (selectedLabels().length > maxSelectedLabels()) {
-            <span class="flex-1 min-w-0 truncate text-sm text-(--f-form-field-color)">{{ selectedLabels().length }} items selected</span>
+            <span
+              class="flex-1 min-w-0 truncate text-sm text-(--f-form-field-color)"
+              >{{ selectedLabels().length }} items selected</span
+            >
           } @else {
             <div class="flex flex-wrap items-center gap-1 flex-1 min-w-0">
               @for (opt of selectedOptions(); track getOptionValue(opt)) {
-                <span class="inline-flex items-center gap-1 px-2 py-0.5 bg-primary/10 text-primary rounded-md text-xs font-medium shrink-0">
+                <span
+                  class="inline-flex items-center gap-1 px-2 py-0.5 bg-primary/10 text-primary rounded-md text-xs font-medium shrink-0"
+                >
                   @if (selectedItemTpl()) {
-                    <ng-container [ngTemplateOutlet]="selectedItemTpl()" [ngTemplateOutletContext]="{ $implicit: opt }" />
+                    <ng-container
+                      [ngTemplateOutlet]="selectedItemTpl()"
+                      [ngTemplateOutletContext]="{ $implicit: opt }"
+                    />
                   } @else {
                     {{ getOptionLabel(opt) }}
                   }
                   @if (!disabled() && !readonly()) {
-                    <button type="button" aria-label="Remove" class="inline-flex items-center justify-center hover:opacity-70 cursor-pointer" (click)="removeOption($event, opt)">
+                    <button
+                      type="button"
+                      aria-label="Remove"
+                      class="inline-flex items-center justify-center hover:opacity-70 cursor-pointer"
+                      (click)="removeOption($event, opt)"
+                    >
                       <ui-icon name="times" class="text-[10px]"></ui-icon>
                     </button>
                   }
@@ -6116,16 +6349,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
             </div>
           }
         } @else {
-          <span class="text-(--f-form-field-placeholder-color) text-sm">{{ placeholder() }}</span>
+          <span class="text-(--f-form-field-placeholder-color) text-sm">{{
+            placeholder()
+          }}</span>
         }
         <span class="flex items-center gap-1 shrink-0 ml-auto">
           @if (showClear() && values().length && !disabled() && !readonly()) {
-            <ui-icon [name]="clearIcon()" class="text-xs text-(--f-form-field-placeholder-color) hover:text-(--f-text-color) shrink-0" (click)="clearAll($event)"></ui-icon>
+            <ui-icon
+              [name]="clearIcon()"
+              class="text-xs text-(--f-form-field-placeholder-color) hover:text-(--f-text-color) shrink-0"
+              (click)="clearAll($event)"
+            ></ui-icon>
           }
           @if (loading()) {
-            <ui-icon [name]="loadingIcon()" [spin]="true" class="text-xs text-(--f-form-field-placeholder-color) shrink-0"></ui-icon>
+            <ui-icon
+              [name]="loadingIcon()"
+              [spin]="true"
+              class="text-xs text-(--f-form-field-placeholder-color) shrink-0"
+            ></ui-icon>
           } @else {
-            <ui-icon [name]="dropdownIcon()" class="text-xs text-(--f-form-field-placeholder-color) transition-transform duration-[var(--f-transition-duration)] shrink-0" [class.rotate-180]="open()"></ui-icon>
+            <ui-icon
+              [name]="dropdownIcon()"
+              class="text-xs text-(--f-form-field-placeholder-color) transition-transform duration-[var(--f-transition-duration)] shrink-0"
+              [class.rotate-180]="open()"
+            ></ui-icon>
           }
         </span>
       </div>
@@ -6140,10 +6387,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
           @if (filter()) {
             <div class="p-2 border-b border-(--f-content-border-color)">
               @if (filterTpl()) {
-                <ng-container [ngTemplateOutlet]="filterTpl()" [ngTemplateOutletContext]="{ $implicit: filterText(), filter: setFilterFn }" />
+                <ng-container
+                  [ngTemplateOutlet]="filterTpl()"
+                  [ngTemplateOutletContext]="{
+                    $implicit: filterText(),
+                    filter: setFilterFn,
+                  }"
+                />
               } @else {
-                <div class="flex items-center gap-2 px-2 py-1.5 bg-(--f-content-hover-background) rounded-lg border border-(--f-content-border-color)">
-                  <ui-icon name="search" class="text-xs text-(--f-text-muted-color) shrink-0"></ui-icon>
+                <div
+                  class="flex items-center gap-2 px-2 py-1.5 bg-(--f-content-hover-background) rounded-lg border border-(--f-content-border-color)"
+                >
+                  <ui-icon
+                    name="search"
+                    class="text-xs text-(--f-text-muted-color) shrink-0"
+                  ></ui-icon>
                   <input
                     #filterInput
                     type="text"
@@ -6159,36 +6417,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
             </div>
           }
           @if (showToggleAll() && filteredOptions().length) {
-            <button type="button"
+            <button
+              type="button"
               class="w-full text-left px-3 py-2 text-sm flex items-center gap-2.5 border-b border-(--f-content-border-color) text-(--f-text-color) hover:bg-(--f-content-hover-background) transition-colors cursor-pointer"
-              (click)="toggleAll($event)">
-              <div class="w-4 h-4 rounded-sm border flex items-center justify-center shrink-0 transition-colors"
-                [class]="allFilteredSelected() ? 'bg-primary border-primary' : 'border-(--f-form-field-border-color) bg-(--f-form-field-background)'">
+              (click)="toggleAll($event)"
+            >
+              <div
+                class="w-4 h-4 rounded-sm border flex items-center justify-center shrink-0 transition-colors"
+                [class]="
+                  allFilteredSelected()
+                    ? 'bg-primary border-primary'
+                    : 'border-(--f-form-field-border-color) bg-(--f-form-field-background)'
+                "
+              >
                 @if (allFilteredSelected()) {
-                  <ui-icon name="check" class="text-[9px] text-primary-contrast"></ui-icon>
+                  <ui-icon
+                    name="check"
+                    class="text-[9px] text-primary-contrast"
+                  ></ui-icon>
                 }
               </div>
               <span class="flex-1 truncate font-medium">Select All</span>
             </button>
           }
-          <div data-multiselect-list [id]="listId()" role="listbox" [attr.aria-multiselectable]="true" class="max-h-56 overflow-auto py-1">
+          <div
+            data-multiselect-list
+            [id]="listId()"
+            role="listbox"
+            [attr.aria-multiselectable]="true"
+            class="max-h-56 overflow-auto py-1"
+          >
             @if (loading()) {
               @if (loaderTpl()) {
                 <ng-container [ngTemplateOutlet]="loaderTpl()" />
               } @else {
                 <div class="py-6 flex flex-col items-center gap-2">
-                  <ui-icon [name]="loadingIcon()" [spin]="true" class="text-xl text-(--f-text-muted-color)"></ui-icon>
+                  <ui-icon
+                    [name]="loadingIcon()"
+                    [spin]="true"
+                    class="text-xl text-(--f-text-muted-color)"
+                  ></ui-icon>
                 </div>
               }
             } @else if (virtualScroll()) {
-              <f-scroller [items]="flatItems()" [itemSize]="virtualScrollItemSize()" scrollHeight="14rem">
+              <f-scroller
+                [items]="flatItems()"
+                [itemSize]="virtualScrollItemSize()"
+                scrollHeight="14rem"
+              >
                 <ng-template let-item let-i="index">
-                  <ng-container [ngTemplateOutlet]="rowTpl" [ngTemplateOutletContext]="{ $implicit: item, index: i }" />
+                  <ng-container
+                    [ngTemplateOutlet]="rowTpl"
+                    [ngTemplateOutletContext]="{ $implicit: item, index: i }"
+                  />
                 </ng-template>
               </f-scroller>
             } @else {
               @for (item of flatItems(); track $index) {
-                <ng-container [ngTemplateOutlet]="rowTpl" [ngTemplateOutletContext]="{ $implicit: item, index: $index }" />
+                <ng-container
+                  [ngTemplateOutlet]="rowTpl"
+                  [ngTemplateOutletContext]="{ $implicit: item, index: $index }"
+                />
               } @empty {
                 <ng-container [ngTemplateOutlet]="emptyStateTpl" />
               }
@@ -6205,9 +6494,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 
     <ng-template #rowTpl let-item let-i="index">
       @if (item.kind === 'group') {
-        <div class="h-full flex items-center px-3 py-1.5 text-xs font-semibold uppercase tracking-wide text-(--f-text-muted-color) bg-(--f-content-hover-background)">
+        <div
+          class="h-full flex items-center px-3 py-1.5 text-xs font-semibold uppercase tracking-wide text-(--f-text-muted-color) bg-(--f-content-hover-background)"
+        >
           @if (groupTpl()) {
-            <ng-container [ngTemplateOutlet]="groupTpl()" [ngTemplateOutletContext]="{ $implicit: item.label }" />
+            <ng-container
+              [ngTemplateOutlet]="groupTpl()"
+              [ngTemplateOutletContext]="{ $implicit: item.label }"
+            />
           } @else {
             {{ item.label }}
           }
@@ -6224,15 +6518,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
           (click)="toggleOption($event, item.option)"
           (mouseenter)="onOptionMouseEnter(item.option)"
         >
-          <div class="w-4 h-4 rounded-sm border flex items-center justify-center shrink-0 transition-colors"
-            [class]="isSelected(item.option) ? 'bg-primary border-primary' : 'border-(--f-form-field-border-color) bg-(--f-form-field-background)'">
+          <div
+            class="w-4 h-4 rounded-sm border flex items-center justify-center shrink-0 transition-colors"
+            [class]="
+              isSelected(item.option)
+                ? 'bg-primary border-primary'
+                : 'border-(--f-form-field-border-color) bg-(--f-form-field-background)'
+            "
+          >
             @if (isSelected(item.option)) {
-              <ui-icon name="check" class="text-[9px] text-primary-contrast"></ui-icon>
+              <ui-icon
+                name="check"
+                class="text-[9px] text-primary-contrast"
+              ></ui-icon>
             }
           </div>
           <span class="flex-1 truncate">
             @if (itemTpl()) {
-              <ng-container [ngTemplateOutlet]="itemTpl()" [ngTemplateOutletContext]="{ $implicit: item.option }" />
+              <ng-container
+                [ngTemplateOutlet]="itemTpl()"
+                [ngTemplateOutletContext]="{ $implicit: item.option }"
+              />
             } @else {
               {{ getOptionLabel(item.option) }}
             }
@@ -6246,15 +6552,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
         <ng-container [ngTemplateOutlet]="emptyFilterTpl()" />
       } @else if (filterText()) {
         <div class="py-6 flex flex-col items-center gap-2">
-          <ui-icon name="search" class="text-2xl text-(--f-text-muted-color)"></ui-icon>
-          <span class="text-sm text-(--f-text-muted-color)">{{ emptyFilterMessage() }}</span>
+          <ui-icon
+            name="search"
+            class="text-2xl text-(--f-text-muted-color)"
+          ></ui-icon>
+          <span class="text-sm text-(--f-text-muted-color)">{{
+            emptyFilterMessage()
+          }}</span>
         </div>
       } @else if (emptyTpl()) {
         <ng-container [ngTemplateOutlet]="emptyTpl()" />
       } @else {
         <div class="py-6 flex flex-col items-center gap-2">
-          <ui-icon name="inbox" class="text-2xl text-(--f-text-muted-color)"></ui-icon>
-          <span class="text-sm text-(--f-text-muted-color)">{{ emptyMessage() }}</span>
+          <ui-icon
+            name="inbox"
+            class="text-2xl text-(--f-text-muted-color)"
+          ></ui-icon>
+          <span class="text-sm text-(--f-text-muted-color)">{{
+            emptyMessage()
+          }}</span>
         </div>
       }
     </ng-template>
@@ -8259,7 +8575,9 @@ class DialogComponent {
     _maximized = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_maximized" }] : /* istanbul ignore next */ []));
     maximized = this._maximized.asReadonly();
-    _windowWidth = signal(typeof window !== 'undefined' ? window.innerWidth : Number.POSITIVE_INFINITY, /* @ts-ignore */
+    _windowWidth = signal(typeof window !== 'undefined'
+        ? window.innerWidth
+        : Number.POSITIVE_INFINITY, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_windowWidth" }] : /* istanbul ignore next */ []));
     breakpointWidth = computed(() => {
         const bp = this.breakpoints();
@@ -8275,7 +8593,13 @@ class DialogComponent {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "breakpointWidth" }] : /* istanbul ignore next */ []));
     panelStyle = computed(() => {
-        const maximizedStyle = { width: '100vw', height: '100vh', maxWidth: '100vw', maxHeight: '100vh', margin: '0' };
+        const maximizedStyle = {
+            width: '100vw',
+            height: '100vh',
+            maxWidth: '100vw',
+            maxHeight: '100vh',
+            margin: '0',
+        };
         if (this._maximized())
             return maximizedStyle;
         return {
@@ -8305,7 +8629,9 @@ class DialogComponent {
     panelClass = computed(() => {
         const max = this._maximized();
         const base = 'dialog-panel relative bg-(--f-overlay-popover-background) shadow-2xl flex flex-col overflow-hidden pointer-events-auto';
-        const shape = max ? 'inset-0 w-screen h-screen rounded-none' : 'rounded-2xl max-h-[90vh] max-w-[calc(100vw-2rem)]';
+        const shape = max
+            ? 'inset-0 w-screen h-screen rounded-none'
+            : 'rounded-2xl max-h-[90vh] max-w-[calc(100vw-2rem)]';
         return `${base} ${shape} ${this.styleClass()}`.trim();
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
@@ -8321,14 +8647,14 @@ class DialogComponent {
     resolvedHeader = computed(() => {
         if (this.headerRef())
             return this.headerRef() ?? null;
-        const tpl = this.fTemplates().find(t => t.fTemplate() === 'header');
+        const tpl = this.fTemplates().find((t) => t.fTemplate() === 'header');
         return tpl?.templateRef ?? null;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resolvedHeader" }] : /* istanbul ignore next */ []));
     resolvedFooter = computed(() => {
         if (this.footerRef())
             return this.footerRef() ?? null;
-        const tpl = this.fTemplates().find(t => t.fTemplate() === 'footer');
+        const tpl = this.fTemplates().find((t) => t.fTemplate() === 'footer');
         return tpl?.templateRef ?? null;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resolvedFooter" }] : /* istanbul ignore next */ []));
@@ -8352,7 +8678,10 @@ class DialogComponent {
             if (visible) {
                 this._closing.set(false);
                 this._rendered.set(true);
-                this._previouslyFocused = typeof document !== 'undefined' ? document.activeElement : null;
+                this._previouslyFocused =
+                    typeof document !== 'undefined'
+                        ? document.activeElement
+                        : null;
                 if (this.modal() || this.blockScroll())
                     this._doc.body.style.overflow = 'hidden';
                 this.onShow.emit();
@@ -8384,7 +8713,7 @@ class DialogComponent {
         this.onHide.emit();
     }
     toggleMaximize() {
-        this._maximized.update(v => !v);
+        this._maximized.update((v) => !v);
         if (this._maximized()) {
             this._resizedSize.set(null);
             this._dragPosition.set(null);
@@ -8440,11 +8769,21 @@ class DialogComponent {
         const startY = event.clientY;
         const startLeft = rect.left;
         const startTop = rect.top;
-        this._dragPosition.set({ position: 'fixed', margin: '0', left: `${startLeft}px`, top: `${startTop}px` });
+        this._dragPosition.set({
+            position: 'fixed',
+            margin: '0',
+            left: `${startLeft}px`,
+            top: `${startTop}px`,
+        });
         const onMove = (e) => {
             const left = Math.max(0, startLeft + (e.clientX - startX));
             const top = Math.max(0, startTop + (e.clientY - startY));
-            this._dragPosition.set({ position: 'fixed', margin: '0', left: `${left}px`, top: `${top}px` });
+            this._dragPosition.set({
+                position: 'fixed',
+                margin: '0',
+                left: `${left}px`,
+                top: `${top}px`,
+            });
         };
         const onUp = () => {
             document.removeEventListener('pointermove', onMove);
@@ -8480,7 +8819,11 @@ class DialogComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: DialogComponent, isStandalone: true, selector: "f-dialog", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, dismissableMask: { classPropertyName: "dismissableMask", publicName: "dismissableMask", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, maximizable: { classPropertyName: "maximizable", publicName: "maximizable", isSignal: true, isRequired: false, transformFunction: null }, blockScroll: { classPropertyName: "blockScroll", publicName: "blockScroll", isSignal: true, isRequired: false, transformFunction: null }, returnFocusOnClose: { classPropertyName: "returnFocusOnClose", publicName: "returnFocusOnClose", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, breakpoints: { classPropertyName: "breakpoints", publicName: "breakpoints", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", onShow: "onShow", onHide: "onHide", onMaximize: "onMaximize" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, queries: [{ propertyName: "headerRef", first: true, predicate: ["header"], descendants: true, isSignal: true }, { propertyName: "footerRef", first: true, predicate: ["footer"], descendants: true, isSignal: true }, { propertyName: "fTemplates", predicate: FTemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (rendered()) {
-      <div class="fixed inset-0 z-40 flex p-4" [class]="containerPositionClass()" [class.pointer-events-none]="!modal()">
+      <div
+        class="fixed inset-0 z-999 flex p-4"
+        [class]="containerPositionClass()"
+        [class.pointer-events-none]="!modal()"
+      >
         @if (modal()) {
           <div
             class="dialog-backdrop absolute inset-0 bg-black/50 backdrop-blur-[2px]"
@@ -8500,7 +8843,10 @@ class DialogComponent {
           (keydown.shift.tab)="onShiftTab($event)"
         >
           @if (resizable() && !maximized()) {
-            <div class="dialog-resize-handle" (pointerdown)="onResizeStart($event)"></div>
+            <div
+              class="dialog-resize-handle"
+              (pointerdown)="onResizeStart($event)"
+            ></div>
           }
           @if (header() || resolvedHeader() || closable() || maximizable()) {
             <div
@@ -8511,7 +8857,12 @@ class DialogComponent {
               @if (resolvedHeader()) {
                 <ng-container [ngTemplateOutlet]="resolvedHeader()" />
               } @else {
-                <h2 [id]="headerId" class="text-base font-semibold text-(--f-text-color) tracking-tight">{{ header() }}</h2>
+                <h2
+                  [id]="headerId"
+                  class="text-base font-semibold text-(--f-text-color) tracking-tight"
+                >
+                  {{ header() }}
+                </h2>
               }
               <div class="flex items-center gap-1">
                 @if (maximizable()) {
@@ -8521,7 +8872,10 @@ class DialogComponent {
                     class="w-7 h-7 flex items-center justify-center rounded-lg cursor-pointer text-(--f-text-muted-color) hover:text-(--f-text-hover-color) hover:bg-(--f-content-hover-background) transition-all duration-[var(--f-transition-duration)] focus-visible:outline-none focus-visible:ring-focus"
                     (click)="toggleMaximize()"
                   >
-                    <ui-icon [name]="maximized() ? 'minimize-2' : 'window-maximize'" class="text-xs"></ui-icon>
+                    <ui-icon
+                      [name]="maximized() ? 'minimize-2' : 'window-maximize'"
+                      class="text-xs"
+                    ></ui-icon>
                   </button>
                 }
                 @if (closable()) {
@@ -8541,7 +8895,9 @@ class DialogComponent {
             <ng-content />
           </div>
           @if (resolvedFooter()) {
-            <div class="px-6 py-4 border-t border-(--f-content-border-color) shrink-0 flex items-center justify-end gap-2 bg-(--f-content-hover-background)/50">
+            <div
+              class="px-6 py-4 border-t border-(--f-content-border-color) shrink-0 flex items-center justify-end gap-2 bg-(--f-content-hover-background)/50"
+            >
               <ng-container [ngTemplateOutlet]="resolvedFooter()" />
             </div>
           }
@@ -8554,7 +8910,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
             type: Component,
             args: [{ selector: 'f-dialog', imports: [NgTemplateOutlet, UiIconComponent], host: { '(document:keydown.escape)': 'onEscape()' }, template: `
     @if (rendered()) {
-      <div class="fixed inset-0 z-40 flex p-4" [class]="containerPositionClass()" [class.pointer-events-none]="!modal()">
+      <div
+        class="fixed inset-0 z-999 flex p-4"
+        [class]="containerPositionClass()"
+        [class.pointer-events-none]="!modal()"
+      >
         @if (modal()) {
           <div
             class="dialog-backdrop absolute inset-0 bg-black/50 backdrop-blur-[2px]"
@@ -8574,7 +8934,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
           (keydown.shift.tab)="onShiftTab($event)"
         >
           @if (resizable() && !maximized()) {
-            <div class="dialog-resize-handle" (pointerdown)="onResizeStart($event)"></div>
+            <div
+              class="dialog-resize-handle"
+              (pointerdown)="onResizeStart($event)"
+            ></div>
           }
           @if (header() || resolvedHeader() || closable() || maximizable()) {
             <div
@@ -8585,7 +8948,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
               @if (resolvedHeader()) {
                 <ng-container [ngTemplateOutlet]="resolvedHeader()" />
               } @else {
-                <h2 [id]="headerId" class="text-base font-semibold text-(--f-text-color) tracking-tight">{{ header() }}</h2>
+                <h2
+                  [id]="headerId"
+                  class="text-base font-semibold text-(--f-text-color) tracking-tight"
+                >
+                  {{ header() }}
+                </h2>
               }
               <div class="flex items-center gap-1">
                 @if (maximizable()) {
@@ -8595,7 +8963,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                     class="w-7 h-7 flex items-center justify-center rounded-lg cursor-pointer text-(--f-text-muted-color) hover:text-(--f-text-hover-color) hover:bg-(--f-content-hover-background) transition-all duration-[var(--f-transition-duration)] focus-visible:outline-none focus-visible:ring-focus"
                     (click)="toggleMaximize()"
                   >
-                    <ui-icon [name]="maximized() ? 'minimize-2' : 'window-maximize'" class="text-xs"></ui-icon>
+                    <ui-icon
+                      [name]="maximized() ? 'minimize-2' : 'window-maximize'"
+                      class="text-xs"
+                    ></ui-icon>
                   </button>
                 }
                 @if (closable()) {
@@ -8615,7 +8986,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
             <ng-content />
           </div>
           @if (resolvedFooter()) {
-            <div class="px-6 py-4 border-t border-(--f-content-border-color) shrink-0 flex items-center justify-end gap-2 bg-(--f-content-hover-background)/50">
+            <div
+              class="px-6 py-4 border-t border-(--f-content-border-color) shrink-0 flex items-center justify-end gap-2 bg-(--f-content-hover-background)/50"
+            >
               <ng-container [ngTemplateOutlet]="resolvedFooter()" />
             </div>
           }
@@ -8661,21 +9034,21 @@ class DrawerComponent {
     resolvedHeader = computed(() => {
         if (this.headerRef())
             return this.headerRef() ?? null;
-        const tpl = this.fTemplates().find(t => t.fTemplate() === 'header');
+        const tpl = this.fTemplates().find((t) => t.fTemplate() === 'header');
         return tpl?.templateRef ?? null;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resolvedHeader" }] : /* istanbul ignore next */ []));
     resolvedFooter = computed(() => {
         if (this.footerRef())
             return this.footerRef() ?? null;
-        const tpl = this.fTemplates().find(t => t.fTemplate() === 'footer');
+        const tpl = this.fTemplates().find((t) => t.fTemplate() === 'footer');
         return tpl?.templateRef ?? null;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resolvedFooter" }] : /* istanbul ignore next */ []));
     resolvedContent = computed(() => {
         if (this.contentRef())
             return this.contentRef() ?? null;
-        const tpl = this.fTemplates().find(t => t.fTemplate() === 'content');
+        const tpl = this.fTemplates().find((t) => t.fTemplate() === 'content');
         return tpl?.templateRef ?? null;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resolvedContent" }] : /* istanbul ignore next */ []));
@@ -8710,7 +9083,10 @@ class DrawerComponent {
             if (this.visible()) {
                 this._closing.set(false);
                 this._rendered.set(true);
-                this._previouslyFocused = typeof document !== 'undefined' ? document.activeElement : null;
+                this._previouslyFocused =
+                    typeof document !== 'undefined'
+                        ? document.activeElement
+                        : null;
                 if (this.modal() && this.blockScroll())
                     this._doc.body.style.overflow = 'hidden';
                 this.onShow.emit();
@@ -8776,9 +9152,16 @@ class DrawerComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: DrawerComponent, isStandalone: true, selector: "f-drawer", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, fullScreen: { classPropertyName: "fullScreen", publicName: "fullScreen", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, dismissable: { classPropertyName: "dismissable", publicName: "dismissable", isSignal: true, isRequired: false, transformFunction: null }, blockScroll: { classPropertyName: "blockScroll", publicName: "blockScroll", isSignal: true, isRequired: false, transformFunction: null }, returnFocusOnClose: { classPropertyName: "returnFocusOnClose", publicName: "returnFocusOnClose", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", onShow: "onShow", onHide: "onHide" }, host: { listeners: { "document:keydown.escape": "onEscape()" }, classAttribute: "block" }, queries: [{ propertyName: "headerRef", first: true, predicate: ["header"], descendants: true, isSignal: true }, { propertyName: "footerRef", first: true, predicate: ["footer"], descendants: true, isSignal: true }, { propertyName: "contentRef", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "fTemplates", predicate: FTemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (rendered()) {
-      <div class="fixed inset-0 z-40 flex" [class.pointer-events-none]="!modal()">
+      <div
+        class="fixed inset-0 z-999 flex"
+        [class.pointer-events-none]="!modal()"
+      >
         @if (modal()) {
-          <div class="drawer-backdrop absolute inset-0 bg-black/50 backdrop-blur-[2px]" [class.closing]="closing()" (click)="dismissable() && close()"></div>
+          <div
+            class="drawer-backdrop absolute inset-0 bg-black/50 backdrop-blur-[2px]"
+            [class.closing]="closing()"
+            (click)="dismissable() && close()"
+          ></div>
         }
         <div
           #panel
@@ -8791,11 +9174,18 @@ class DrawerComponent {
           (keydown.tab)="onTab($event)"
           (keydown.shift.tab)="onShiftTab($event)"
         >
-          <div class="flex items-center justify-between px-6 py-4 border-b border-(--f-content-border-color) shrink-0">
+          <div
+            class="flex items-center justify-between px-6 py-4 border-b border-(--f-content-border-color) shrink-0"
+          >
             @if (resolvedHeader()) {
               <ng-container [ngTemplateOutlet]="resolvedHeader()" />
             } @else {
-              <h2 [id]="headerId" class="text-base font-semibold text-(--f-text-color) tracking-tight">{{ header() }}</h2>
+              <h2
+                [id]="headerId"
+                class="text-base font-semibold text-(--f-text-color) tracking-tight"
+              >
+                {{ header() }}
+              </h2>
             }
             @if (closable()) {
               <button
@@ -8815,7 +9205,9 @@ class DrawerComponent {
             <ng-content />
           </div>
           @if (resolvedFooter()) {
-            <div class="px-6 py-4 border-t border-(--f-content-border-color) shrink-0">
+            <div
+              class="px-6 py-4 border-t border-(--f-content-border-color) shrink-0"
+            >
               <ng-container [ngTemplateOutlet]="resolvedFooter()" />
             </div>
           }
@@ -8828,9 +9220,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
             type: Component,
             args: [{ selector: 'f-drawer', imports: [UiIconComponent, NgTemplateOutlet], host: { class: 'block', '(document:keydown.escape)': 'onEscape()' }, template: `
     @if (rendered()) {
-      <div class="fixed inset-0 z-40 flex" [class.pointer-events-none]="!modal()">
+      <div
+        class="fixed inset-0 z-999 flex"
+        [class.pointer-events-none]="!modal()"
+      >
         @if (modal()) {
-          <div class="drawer-backdrop absolute inset-0 bg-black/50 backdrop-blur-[2px]" [class.closing]="closing()" (click)="dismissable() && close()"></div>
+          <div
+            class="drawer-backdrop absolute inset-0 bg-black/50 backdrop-blur-[2px]"
+            [class.closing]="closing()"
+            (click)="dismissable() && close()"
+          ></div>
         }
         <div
           #panel
@@ -8843,11 +9242,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
           (keydown.tab)="onTab($event)"
           (keydown.shift.tab)="onShiftTab($event)"
         >
-          <div class="flex items-center justify-between px-6 py-4 border-b border-(--f-content-border-color) shrink-0">
+          <div
+            class="flex items-center justify-between px-6 py-4 border-b border-(--f-content-border-color) shrink-0"
+          >
             @if (resolvedHeader()) {
               <ng-container [ngTemplateOutlet]="resolvedHeader()" />
             } @else {
-              <h2 [id]="headerId" class="text-base font-semibold text-(--f-text-color) tracking-tight">{{ header() }}</h2>
+              <h2
+                [id]="headerId"
+                class="text-base font-semibold text-(--f-text-color) tracking-tight"
+              >
+                {{ header() }}
+              </h2>
             }
             @if (closable()) {
               <button
@@ -8867,7 +9273,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
             <ng-content />
           </div>
           @if (resolvedFooter()) {
-            <div class="px-6 py-4 border-t border-(--f-content-border-color) shrink-0">
+            <div
+              class="px-6 py-4 border-t border-(--f-content-border-color) shrink-0"
+            >
               <ng-container [ngTemplateOutlet]="resolvedFooter()" />
             </div>
           }
@@ -9699,7 +10107,7 @@ class TabsComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: TabsComponent, isStandalone: true, selector: "f-tabs", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onTabChange: "onTabChange" }, host: { classAttribute: "block" }, providers: [TabsContext], ngImport: i0, template: `<div [class]="'flex flex-col ' + styleClass()" [style]="style()"><ng-content /></div>`, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: TabsComponent, isStandalone: true, selector: "f-tabs", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onTabChange: "onTabChange" }, host: { classAttribute: "block" }, providers: [TabsContext], ngImport: i0, template: `<div [class]="'flex flex-col h-full ' + styleClass()" [style]="style()"><ng-content /></div>`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TabsComponent, decorators: [{
             type: Component,
@@ -9707,7 +10115,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                     selector: 'f-tabs',
                     providers: [TabsContext],
                     host: { class: 'block' },
-                    template: `<div [class]="'flex flex-col ' + styleClass()" [style]="style()"><ng-content /></div>`,
+                    template: `<div [class]="'flex flex-col h-full ' + styleClass()" [style]="style()"><ng-content /></div>`,
                 }]
         }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], scrollable: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollable", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], onTabChange: [{ type: i0.Output, args: ["onTabChange"] }] } });
 // ─── TabList — wraps tab buttons, with optional scroll navigators ────────────
@@ -9957,14 +10365,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 // ─── TabPanels — wrapper around individual panels ─────────────────────────────
 class TabPanelsComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TabPanelsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: TabPanelsComponent, isStandalone: true, selector: "f-tabpanels", host: { classAttribute: "block" }, ngImport: i0, template: `<div class="pt-5"><ng-content /></div>`, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: TabPanelsComponent, isStandalone: true, selector: "f-tabpanels", host: { classAttribute: "block" }, ngImport: i0, template: `<div class="pt-5 h-full min-h-0"><ng-content /></div>`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TabPanelsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'f-tabpanels',
                     host: { class: 'block' },
-                    template: `<div class="pt-5"><ng-content /></div>`,
+                    template: `<div class="pt-5 h-full min-h-0"><ng-content /></div>`,
                 }]
         }] });
 // ─── TabPanel — renders content only when active ──────────────────────────────
@@ -9982,7 +10390,7 @@ class TabPanelComponent {
     panelId = computed(() => `f-tab-panel-${this.value()}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panelId" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TabPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TabPanelComponent, isStandalone: true, selector: "f-tabpanel", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tabpanel" }, properties: { "id": "panelId()", "attr.aria-labelledby": "triggerId()" }, classAttribute: "block" }, ngImport: i0, template: `@if (isActive()) { <ng-content /> }`, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TabPanelComponent, isStandalone: true, selector: "f-tabpanel", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tabpanel" }, properties: { "class.hidden": "!isActive()", "id": "panelId()", "attr.aria-labelledby": "triggerId()" }, classAttribute: "block" }, ngImport: i0, template: `@if (isActive()) { <ng-content /> }`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TabPanelComponent, decorators: [{
             type: Component,
@@ -9991,6 +10399,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                     host: {
                         class: 'block',
                         role: 'tabpanel',
+                        '[class.hidden]': '!isActive()',
                         '[id]': 'panelId()',
                         '[attr.aria-labelledby]': 'triggerId()',
                     },
@@ -15271,7 +15680,10 @@ function assignKey$2(node) {
 class TreeSelectComponent {
     _el = inject(ElementRef);
     constructor() {
-        repositionOnScroll(() => this.open() && this.appendTo() === 'body', () => { this.position(); this.adjustForViewport(); });
+        repositionOnScroll(() => this.open() && this.appendTo() === 'body', () => {
+            this.position();
+            this.adjustForViewport();
+        });
     }
     options = input([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
@@ -15323,7 +15735,11 @@ class TreeSelectComponent {
     panelStyle = computed(() => {
         if (this.appendTo() !== 'body')
             return {};
-        return { top: `${this._panelTop()}px`, left: `${this._panelLeft()}px`, width: `${this._panelWidth()}px` };
+        return {
+            top: `${this._panelTop()}px`,
+            left: `${this._panelLeft()}px`,
+            width: `${this._panelWidth()}px`,
+        };
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panelStyle" }] : /* istanbul ignore next */ []));
     position() {
@@ -15373,21 +15789,35 @@ class TreeSelectComponent {
     ...(ngDevMode ? [{ debugName: "emptyRef" }] : /* istanbul ignore next */ []));
     fTemplates = contentChildren(FTemplateDirective, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "fTemplates" }] : /* istanbul ignore next */ []));
-    valueTpl = computed(() => this.valueRef() ?? this.fTemplates().find((t) => t.fTemplate() === 'value')?.templateRef ?? null, /* @ts-ignore */
+    valueTpl = computed(() => this.valueRef() ??
+        this.fTemplates().find((t) => t.fTemplate() === 'value')?.templateRef ??
+        null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "valueTpl" }] : /* istanbul ignore next */ []));
-    headerTpl = computed(() => this.headerRef() ?? this.fTemplates().find((t) => t.fTemplate() === 'header')?.templateRef ?? null, /* @ts-ignore */
+    headerTpl = computed(() => this.headerRef() ??
+        this.fTemplates().find((t) => t.fTemplate() === 'header')?.templateRef ??
+        null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "headerTpl" }] : /* istanbul ignore next */ []));
-    footerTpl = computed(() => this.footerRef() ?? this.fTemplates().find((t) => t.fTemplate() === 'footer')?.templateRef ?? null, /* @ts-ignore */
+    footerTpl = computed(() => this.footerRef() ??
+        this.fTemplates().find((t) => t.fTemplate() === 'footer')?.templateRef ??
+        null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "footerTpl" }] : /* istanbul ignore next */ []));
-    emptyTpl = computed(() => this.emptyRef() ?? this.fTemplates().find((t) => t.fTemplate() === 'empty')?.templateRef ?? null, /* @ts-ignore */
+    emptyTpl = computed(() => this.emptyRef() ??
+        this.fTemplates().find((t) => t.fTemplate() === 'empty')?.templateRef ??
+        null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "emptyTpl" }] : /* istanbul ignore next */ []));
     triggerClass = computed(() => {
-        const base = 'w-full min-h-[38px] flex items-center gap-2 px-3 py-1.5 text-sm rounded-lg border bg-(--f-form-field-background) focus:outline-none focus-visible:ring-focus transition-all duration-[var(--f-transition-duration)]';
+        const base = 'w-full min-h-[34px] flex items-center gap-2 px-3 py-1.5 text-sm rounded-lg border bg-(--f-form-field-background) focus:outline-none focus-visible:ring-focus transition-all duration-[var(--f-transition-duration)]';
         const showInvalid = this.invalid() && this.touched();
         const stateClass = this.open()
-            ? (showInvalid ? 'border-red-400' : 'border-primary')
-            : (showInvalid ? 'border-red-400' : 'border-(--f-form-field-border-color) hover:border-(--f-form-field-hover-border-color)');
-        const disabledClass = this.disabled() ? 'opacity-60 cursor-not-allowed' : 'cursor-pointer';
+            ? showInvalid
+                ? 'border-red-400'
+                : 'border-primary'
+            : showInvalid
+                ? 'border-red-400'
+                : 'border-(--f-form-field-border-color) hover:border-(--f-form-field-hover-border-color)';
+        const disabledClass = this.disabled()
+            ? 'opacity-60 cursor-not-allowed'
+            : 'cursor-pointer';
         return `${base} ${stateClass} ${disabledClass}`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "triggerClass" }] : /* istanbul ignore next */ []));
@@ -15418,10 +15848,15 @@ class TreeSelectComponent {
     matchesFilter(node, query) {
         if (!query)
             return true;
-        const fields = this.filterBy().split(',').map((f) => f.trim()).filter(Boolean);
+        const fields = this.filterBy()
+            .split(',')
+            .map((f) => f.trim())
+            .filter(Boolean);
         if (!fields.length)
             fields.push('label');
-        return fields.some((field) => String(node[field] ?? '').toLowerCase().includes(query));
+        return fields.some((field) => String(node[field] ?? '')
+            .toLowerCase()
+            .includes(query));
     }
     _flatten(nodes, out, level, parentVisible, expanded, query, parent) {
         let anyMatch = false;
@@ -15449,11 +15884,13 @@ class TreeSelectComponent {
             this._onTouched();
         }
     }
-    onFilterInput(v) { this._filterText.set(v); }
+    onFilterInput(v) {
+        this._filterText.set(v);
+    }
     toggleOpen() {
         if (this.disabled())
             return;
-        this._open.update(v => !v);
+        this._open.update((v) => !v);
         if (!this.open()) {
             this._onTouched();
             return;
@@ -15478,7 +15915,7 @@ class TreeSelectComponent {
     }
     toggleExpand(e, key) {
         e.stopPropagation();
-        this.expandedKeys.update(s => {
+        this.expandedKeys.update((s) => {
             const next = new Set(s);
             next.has(key) ? next.delete(key) : next.add(key);
             return next;
@@ -15522,7 +15959,7 @@ class TreeSelectComponent {
         }
     }
     toggleMultiple(key) {
-        this._selectedKeys.update(s => {
+        this._selectedKeys.update((s) => {
             const next = new Set(s);
             next.has(key) ? next.delete(key) : next.add(key);
             return next;
@@ -15608,11 +16045,21 @@ class TreeSelectComponent {
             this._selectedKeys.set(new Set([v]));
         }
     }
-    registerOnChange(fn) { this._onChange = fn; }
-    registerOnTouched(fn) { this._onTouched = fn; }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
     setDisabledState() { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TreeSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TreeSelectComponent, isStandalone: true, selector: "f-treeselect", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, filterBy: { classPropertyName: "filterBy", publicName: "filterBy", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, propagateSelectionDown: { classPropertyName: "propagateSelectionDown", publicName: "propagateSelectionDown", isSignal: true, isRequired: false, transformFunction: null }, propagateSelectionUp: { classPropertyName: "propagateSelectionUp", publicName: "propagateSelectionUp", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollItemSize: { classPropertyName: "virtualScrollItemSize", publicName: "virtualScrollItemSize", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "hostClass()", "style": "style()" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TreeSelectComponent), multi: true }], queries: [{ propertyName: "valueRef", first: true, predicate: ["value"], descendants: true, isSignal: true }, { propertyName: "headerRef", first: true, predicate: ["header"], descendants: true, isSignal: true }, { propertyName: "footerRef", first: true, predicate: ["footer"], descendants: true, isSignal: true }, { propertyName: "emptyRef", first: true, predicate: ["empty"], descendants: true, isSignal: true }, { propertyName: "fTemplates", predicate: FTemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TreeSelectComponent, isStandalone: true, selector: "f-treeselect", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, filterBy: { classPropertyName: "filterBy", publicName: "filterBy", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, propagateSelectionDown: { classPropertyName: "propagateSelectionDown", publicName: "propagateSelectionDown", isSignal: true, isRequired: false, transformFunction: null }, propagateSelectionUp: { classPropertyName: "propagateSelectionUp", publicName: "propagateSelectionUp", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollItemSize: { classPropertyName: "virtualScrollItemSize", publicName: "virtualScrollItemSize", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "hostClass()", "style": "style()" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TreeSelectComponent),
+                multi: true,
+            },
+        ], queries: [{ propertyName: "valueRef", first: true, predicate: ["value"], descendants: true, isSignal: true }, { propertyName: "headerRef", first: true, predicate: ["header"], descendants: true, isSignal: true }, { propertyName: "footerRef", first: true, predicate: ["footer"], descendants: true, isSignal: true }, { propertyName: "emptyRef", first: true, predicate: ["empty"], descendants: true, isSignal: true }, { propertyName: "fTemplates", predicate: FTemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="relative w-full">
       <div
         #trigger
@@ -15627,10 +16074,21 @@ class TreeSelectComponent {
       >
         @if (valueTpl()) {
           <span class="flex-1 min-w-0 truncate text-left text-sm">
-            <ng-container [ngTemplateOutlet]="valueTpl()" [ngTemplateOutletContext]="{ $implicit: selectedNodes(), placeholder: placeholder() }" />
+            <ng-container
+              [ngTemplateOutlet]="valueTpl()"
+              [ngTemplateOutletContext]="{
+                $implicit: selectedNodes(),
+                placeholder: placeholder(),
+              }"
+            />
           </span>
         } @else if (selectionMode() === 'single') {
-          <span class="truncate text-sm" [class.text-(--f-form-field-placeholder-color)]="!selectedLabels().length">
+          <span
+            class="truncate text-sm"
+            [class.text-(--f-form-field-placeholder-color)]="
+              !selectedLabels().length
+            "
+          >
             @if (selectedLabels().length) {
               {{ selectedLabels()[0] }}
             } @else {
@@ -15640,38 +16098,71 @@ class TreeSelectComponent {
         } @else if (selectedLabels().length && display() === 'chip') {
           <div class="flex flex-wrap items-center gap-1 flex-1 min-w-0">
             @for (lbl of selectedLabels(); track $index) {
-              <span class="inline-flex items-center gap-1 px-2 py-0.5 bg-primary/10 text-primary rounded-md text-xs font-medium shrink-0">
+              <span
+                class="inline-flex items-center gap-1 px-2 py-0.5 bg-primary/10 text-primary rounded-md text-xs font-medium shrink-0"
+              >
                 {{ lbl }}
-                <button type="button" aria-label="Remove" class="inline-flex items-center justify-center hover:opacity-70 cursor-pointer" (click)="removeByKey($event, findKeyByLabel(lbl))">
+                <button
+                  type="button"
+                  aria-label="Remove"
+                  class="inline-flex items-center justify-center hover:opacity-70 cursor-pointer"
+                  (click)="removeByKey($event, findKeyByLabel(lbl))"
+                >
                   <ui-icon name="times" class="text-[10px]"></ui-icon>
                 </button>
               </span>
             }
           </div>
         } @else if (selectedLabels().length) {
-          <span class="flex-1 min-w-0 truncate text-sm text-(--f-text-color)">{{ selectedLabels().join(', ') }}</span>
+          <span class="flex-1 min-w-0 truncate text-sm text-(--f-text-color)">{{
+            selectedLabels().join(', ')
+          }}</span>
         } @else {
-          <span class="text-(--f-form-field-placeholder-color) text-sm">{{ placeholder() }}</span>
+          <span class="text-(--f-form-field-placeholder-color) text-sm">{{
+            placeholder()
+          }}</span>
         }
         <span class="ml-auto flex items-center gap-1 shrink-0">
           @if (showClear() && selectedKeys().size && !disabled()) {
-            <ui-icon name="x" class="text-xs text-(--f-form-field-placeholder-color) hover:text-(--f-text-color) shrink-0" (click)="clear($event)"></ui-icon>
+            <ui-icon
+              name="x"
+              class="text-xs text-(--f-form-field-placeholder-color) hover:text-(--f-text-color) shrink-0"
+              (click)="clear($event)"
+            ></ui-icon>
           }
-          <ui-icon name="chevron-down" class="text-xs text-(--f-form-field-placeholder-color) shrink-0 transition-transform duration-[var(--f-transition-duration)]" [class.rotate-180]="open()"></ui-icon>
+          <ui-icon
+            name="chevron-down"
+            class="text-xs text-(--f-form-field-placeholder-color) shrink-0 transition-transform duration-[var(--f-transition-duration)]"
+            [class.rotate-180]="open()"
+          ></ui-icon>
         </span>
       </div>
 
       @if (open()) {
         <div #panel [class]="panelClass()" [style]="panelStyle()">
           @if (headerTpl()) {
-            <ng-container [ngTemplateOutlet]="headerTpl()" [ngTemplateOutletContext]="{ $implicit: options() }" />
+            <ng-container
+              [ngTemplateOutlet]="headerTpl()"
+              [ngTemplateOutletContext]="{ $implicit: options() }"
+            />
           }
           @if (filter()) {
             <div class="p-2 border-b border-(--f-content-border-color)">
-              <div class="flex items-center gap-2 px-2 py-1.5 bg-(--f-content-hover-background) rounded-lg border border-(--f-content-border-color)">
-                <ui-icon name="search" class="text-xs text-(--f-text-muted-color) shrink-0"></ui-icon>
-                <input type="text" class="flex-1 text-sm bg-transparent focus:outline-none text-(--f-text-color) placeholder:text-(--f-form-field-placeholder-color)"
-                  placeholder="Search..." [value]="filterText()" (input)="onFilterInput($any($event.target).value)" (click)="$event.stopPropagation()" />
+              <div
+                class="flex items-center gap-2 px-2 py-1.5 bg-(--f-content-hover-background) rounded-lg border border-(--f-content-border-color)"
+              >
+                <ui-icon
+                  name="search"
+                  class="text-xs text-(--f-text-muted-color) shrink-0"
+                ></ui-icon>
+                <input
+                  type="text"
+                  class="flex-1 text-sm bg-transparent focus:outline-none text-(--f-text-color) placeholder:text-(--f-form-field-placeholder-color)"
+                  placeholder="Search..."
+                  [value]="filterText()"
+                  (input)="onFilterInput($any($event.target).value)"
+                  (click)="$event.stopPropagation()"
+                />
               </div>
             </div>
           }
@@ -15681,26 +16172,45 @@ class TreeSelectComponent {
               @if (emptyTpl()) {
                 <ng-container [ngTemplateOutlet]="emptyTpl()" />
               } @else {
-                <ui-icon name="inbox" class="text-2xl text-(--f-text-muted-color)"></ui-icon>
-                <span class="text-sm text-(--f-text-muted-color)">{{ emptyMessage() }}</span>
+                <ui-icon
+                  name="inbox"
+                  class="text-2xl text-(--f-text-muted-color)"
+                ></ui-icon>
+                <span class="text-sm text-(--f-text-muted-color)">{{
+                  emptyMessage()
+                }}</span>
               }
             </div>
           } @else if (virtualScroll()) {
-            <f-scroller role="tree" [items]="visibleFlatNodes()" [itemSize]="virtualScrollItemSize()" scrollHeight="16rem">
+            <f-scroller
+              role="tree"
+              [items]="visibleFlatNodes()"
+              [itemSize]="virtualScrollItemSize()"
+              scrollHeight="16rem"
+            >
               <ng-template let-row>
-                <ng-container [ngTemplateOutlet]="rowTpl" [ngTemplateOutletContext]="{ $implicit: row }" />
+                <ng-container
+                  [ngTemplateOutlet]="rowTpl"
+                  [ngTemplateOutletContext]="{ $implicit: row }"
+                />
               </ng-template>
             </f-scroller>
           } @else {
             <div class="max-h-64 overflow-auto py-1" role="tree">
               @for (row of visibleFlatNodes(); track row.key) {
-                <ng-container [ngTemplateOutlet]="rowTpl" [ngTemplateOutletContext]="{ $implicit: row }" />
+                <ng-container
+                  [ngTemplateOutlet]="rowTpl"
+                  [ngTemplateOutletContext]="{ $implicit: row }"
+                />
               }
             </div>
           }
 
           @if (footerTpl()) {
-            <ng-container [ngTemplateOutlet]="footerTpl()" [ngTemplateOutletContext]="{ $implicit: options() }" />
+            <ng-container
+              [ngTemplateOutlet]="footerTpl()"
+              [ngTemplateOutletContext]="{ $implicit: options() }"
+            />
           }
         </div>
       }
@@ -15710,7 +16220,11 @@ class TreeSelectComponent {
       <div
         class="w-full text-left px-2 py-1.5 text-sm flex items-center gap-1.5 transition-colors cursor-pointer"
         [style.padding-left.px]="row.level * 16 + 8"
-        [class]="isSelected(row.key) && selectionMode() !== 'checkbox' ? 'bg-(--f-highlight-background) text-(--f-highlight-color)' : 'text-(--f-text-color) hover:bg-(--f-content-hover-background)'"
+        [class]="
+          isSelected(row.key) && selectionMode() !== 'checkbox'
+            ? 'bg-(--f-highlight-background) text-(--f-highlight-color)'
+            : 'text-(--f-text-color) hover:bg-(--f-content-hover-background)'
+        "
         role="treeitem"
         [attr.aria-level]="row.level + 1"
         [attr.aria-expanded]="row.leaf ? null : isExpanded(row.key)"
@@ -15718,26 +16232,51 @@ class TreeSelectComponent {
         (click)="onNodeClick($event, row)"
       >
         @if (!row.leaf) {
-          <button type="button" class="inline-flex items-center justify-center w-5 h-5 rounded-md hover:bg-(--f-content-hover-background) shrink-0 cursor-pointer" (click)="toggleExpand($event, row.key)">
-            <ui-icon name="chevron-right" class="text-[10px] transition-transform duration-150" [class.rotate-90]="isExpanded(row.key)"></ui-icon>
+          <button
+            type="button"
+            class="inline-flex items-center justify-center w-5 h-5 rounded-md hover:bg-(--f-content-hover-background) shrink-0 cursor-pointer"
+            (click)="toggleExpand($event, row.key)"
+          >
+            <ui-icon
+              name="chevron-right"
+              class="text-[10px] transition-transform duration-150"
+              [class.rotate-90]="isExpanded(row.key)"
+            ></ui-icon>
           </button>
         } @else {
           <span class="inline-block w-5 h-5 shrink-0"></span>
         }
 
         @if (selectionMode() === 'checkbox') {
-          <div class="w-4 h-4 rounded-sm border flex items-center justify-center shrink-0 transition-colors"
-            [class]="isSelected(row.key) ? 'bg-primary border-primary' : (isPartial(row.key) ? 'bg-primary/30 border-primary' : 'border-(--f-form-field-border-color) bg-(--f-form-field-background)')">
+          <div
+            class="w-4 h-4 rounded-sm border flex items-center justify-center shrink-0 transition-colors"
+            [class]="
+              isSelected(row.key)
+                ? 'bg-primary border-primary'
+                : isPartial(row.key)
+                  ? 'bg-primary/30 border-primary'
+                  : 'border-(--f-form-field-border-color) bg-(--f-form-field-background)'
+            "
+          >
             @if (isSelected(row.key)) {
-              <ui-icon name="check" class="text-[9px] text-primary-contrast"></ui-icon>
+              <ui-icon
+                name="check"
+                class="text-[9px] text-primary-contrast"
+              ></ui-icon>
             } @else if (isPartial(row.key)) {
-              <ui-icon name="minus" class="text-[9px] text-primary-contrast"></ui-icon>
+              <ui-icon
+                name="minus"
+                class="text-[9px] text-primary-contrast"
+              ></ui-icon>
             }
           </div>
         }
 
         @if (row.node.icon) {
-          <ui-icon [name]="row.node.icon" class="text-xs text-(--f-text-muted-color) shrink-0"></ui-icon>
+          <ui-icon
+            [name]="row.node.icon"
+            class="text-xs text-(--f-text-muted-color) shrink-0"
+          ></ui-icon>
         }
         <span class="flex-1 truncate">{{ row.node.label }}</span>
       </div>
@@ -15749,8 +16288,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
             args: [{
                     selector: 'f-treeselect',
                     imports: [UiIconComponent, NgTemplateOutlet, ScrollerComponent],
-                    providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TreeSelectComponent), multi: true }],
-                    host: { '[class]': 'hostClass()', '[style]': 'style()', '(document:click)': 'onDocumentClick($event)' },
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TreeSelectComponent),
+                            multi: true,
+                        },
+                    ],
+                    host: {
+                        '[class]': 'hostClass()',
+                        '[style]': 'style()',
+                        '(document:click)': 'onDocumentClick($event)',
+                    },
                     template: `
     <div class="relative w-full">
       <div
@@ -15766,10 +16315,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
       >
         @if (valueTpl()) {
           <span class="flex-1 min-w-0 truncate text-left text-sm">
-            <ng-container [ngTemplateOutlet]="valueTpl()" [ngTemplateOutletContext]="{ $implicit: selectedNodes(), placeholder: placeholder() }" />
+            <ng-container
+              [ngTemplateOutlet]="valueTpl()"
+              [ngTemplateOutletContext]="{
+                $implicit: selectedNodes(),
+                placeholder: placeholder(),
+              }"
+            />
           </span>
         } @else if (selectionMode() === 'single') {
-          <span class="truncate text-sm" [class.text-(--f-form-field-placeholder-color)]="!selectedLabels().length">
+          <span
+            class="truncate text-sm"
+            [class.text-(--f-form-field-placeholder-color)]="
+              !selectedLabels().length
+            "
+          >
             @if (selectedLabels().length) {
               {{ selectedLabels()[0] }}
             } @else {
@@ -15779,38 +16339,71 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
         } @else if (selectedLabels().length && display() === 'chip') {
           <div class="flex flex-wrap items-center gap-1 flex-1 min-w-0">
             @for (lbl of selectedLabels(); track $index) {
-              <span class="inline-flex items-center gap-1 px-2 py-0.5 bg-primary/10 text-primary rounded-md text-xs font-medium shrink-0">
+              <span
+                class="inline-flex items-center gap-1 px-2 py-0.5 bg-primary/10 text-primary rounded-md text-xs font-medium shrink-0"
+              >
                 {{ lbl }}
-                <button type="button" aria-label="Remove" class="inline-flex items-center justify-center hover:opacity-70 cursor-pointer" (click)="removeByKey($event, findKeyByLabel(lbl))">
+                <button
+                  type="button"
+                  aria-label="Remove"
+                  class="inline-flex items-center justify-center hover:opacity-70 cursor-pointer"
+                  (click)="removeByKey($event, findKeyByLabel(lbl))"
+                >
                   <ui-icon name="times" class="text-[10px]"></ui-icon>
                 </button>
               </span>
             }
           </div>
         } @else if (selectedLabels().length) {
-          <span class="flex-1 min-w-0 truncate text-sm text-(--f-text-color)">{{ selectedLabels().join(', ') }}</span>
+          <span class="flex-1 min-w-0 truncate text-sm text-(--f-text-color)">{{
+            selectedLabels().join(', ')
+          }}</span>
         } @else {
-          <span class="text-(--f-form-field-placeholder-color) text-sm">{{ placeholder() }}</span>
+          <span class="text-(--f-form-field-placeholder-color) text-sm">{{
+            placeholder()
+          }}</span>
         }
         <span class="ml-auto flex items-center gap-1 shrink-0">
           @if (showClear() && selectedKeys().size && !disabled()) {
-            <ui-icon name="x" class="text-xs text-(--f-form-field-placeholder-color) hover:text-(--f-text-color) shrink-0" (click)="clear($event)"></ui-icon>
+            <ui-icon
+              name="x"
+              class="text-xs text-(--f-form-field-placeholder-color) hover:text-(--f-text-color) shrink-0"
+              (click)="clear($event)"
+            ></ui-icon>
           }
-          <ui-icon name="chevron-down" class="text-xs text-(--f-form-field-placeholder-color) shrink-0 transition-transform duration-[var(--f-transition-duration)]" [class.rotate-180]="open()"></ui-icon>
+          <ui-icon
+            name="chevron-down"
+            class="text-xs text-(--f-form-field-placeholder-color) shrink-0 transition-transform duration-[var(--f-transition-duration)]"
+            [class.rotate-180]="open()"
+          ></ui-icon>
         </span>
       </div>
 
       @if (open()) {
         <div #panel [class]="panelClass()" [style]="panelStyle()">
           @if (headerTpl()) {
-            <ng-container [ngTemplateOutlet]="headerTpl()" [ngTemplateOutletContext]="{ $implicit: options() }" />
+            <ng-container
+              [ngTemplateOutlet]="headerTpl()"
+              [ngTemplateOutletContext]="{ $implicit: options() }"
+            />
           }
           @if (filter()) {
             <div class="p-2 border-b border-(--f-content-border-color)">
-              <div class="flex items-center gap-2 px-2 py-1.5 bg-(--f-content-hover-background) rounded-lg border border-(--f-content-border-color)">
-                <ui-icon name="search" class="text-xs text-(--f-text-muted-color) shrink-0"></ui-icon>
-                <input type="text" class="flex-1 text-sm bg-transparent focus:outline-none text-(--f-text-color) placeholder:text-(--f-form-field-placeholder-color)"
-                  placeholder="Search..." [value]="filterText()" (input)="onFilterInput($any($event.target).value)" (click)="$event.stopPropagation()" />
+              <div
+                class="flex items-center gap-2 px-2 py-1.5 bg-(--f-content-hover-background) rounded-lg border border-(--f-content-border-color)"
+              >
+                <ui-icon
+                  name="search"
+                  class="text-xs text-(--f-text-muted-color) shrink-0"
+                ></ui-icon>
+                <input
+                  type="text"
+                  class="flex-1 text-sm bg-transparent focus:outline-none text-(--f-text-color) placeholder:text-(--f-form-field-placeholder-color)"
+                  placeholder="Search..."
+                  [value]="filterText()"
+                  (input)="onFilterInput($any($event.target).value)"
+                  (click)="$event.stopPropagation()"
+                />
               </div>
             </div>
           }
@@ -15820,26 +16413,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
               @if (emptyTpl()) {
                 <ng-container [ngTemplateOutlet]="emptyTpl()" />
               } @else {
-                <ui-icon name="inbox" class="text-2xl text-(--f-text-muted-color)"></ui-icon>
-                <span class="text-sm text-(--f-text-muted-color)">{{ emptyMessage() }}</span>
+                <ui-icon
+                  name="inbox"
+                  class="text-2xl text-(--f-text-muted-color)"
+                ></ui-icon>
+                <span class="text-sm text-(--f-text-muted-color)">{{
+                  emptyMessage()
+                }}</span>
               }
             </div>
           } @else if (virtualScroll()) {
-            <f-scroller role="tree" [items]="visibleFlatNodes()" [itemSize]="virtualScrollItemSize()" scrollHeight="16rem">
+            <f-scroller
+              role="tree"
+              [items]="visibleFlatNodes()"
+              [itemSize]="virtualScrollItemSize()"
+              scrollHeight="16rem"
+            >
               <ng-template let-row>
-                <ng-container [ngTemplateOutlet]="rowTpl" [ngTemplateOutletContext]="{ $implicit: row }" />
+                <ng-container
+                  [ngTemplateOutlet]="rowTpl"
+                  [ngTemplateOutletContext]="{ $implicit: row }"
+                />
               </ng-template>
             </f-scroller>
           } @else {
             <div class="max-h-64 overflow-auto py-1" role="tree">
               @for (row of visibleFlatNodes(); track row.key) {
-                <ng-container [ngTemplateOutlet]="rowTpl" [ngTemplateOutletContext]="{ $implicit: row }" />
+                <ng-container
+                  [ngTemplateOutlet]="rowTpl"
+                  [ngTemplateOutletContext]="{ $implicit: row }"
+                />
               }
             </div>
           }
 
           @if (footerTpl()) {
-            <ng-container [ngTemplateOutlet]="footerTpl()" [ngTemplateOutletContext]="{ $implicit: options() }" />
+            <ng-container
+              [ngTemplateOutlet]="footerTpl()"
+              [ngTemplateOutletContext]="{ $implicit: options() }"
+            />
           }
         </div>
       }
@@ -15849,7 +16461,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
       <div
         class="w-full text-left px-2 py-1.5 text-sm flex items-center gap-1.5 transition-colors cursor-pointer"
         [style.padding-left.px]="row.level * 16 + 8"
-        [class]="isSelected(row.key) && selectionMode() !== 'checkbox' ? 'bg-(--f-highlight-background) text-(--f-highlight-color)' : 'text-(--f-text-color) hover:bg-(--f-content-hover-background)'"
+        [class]="
+          isSelected(row.key) && selectionMode() !== 'checkbox'
+            ? 'bg-(--f-highlight-background) text-(--f-highlight-color)'
+            : 'text-(--f-text-color) hover:bg-(--f-content-hover-background)'
+        "
         role="treeitem"
         [attr.aria-level]="row.level + 1"
         [attr.aria-expanded]="row.leaf ? null : isExpanded(row.key)"
@@ -15857,26 +16473,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
         (click)="onNodeClick($event, row)"
       >
         @if (!row.leaf) {
-          <button type="button" class="inline-flex items-center justify-center w-5 h-5 rounded-md hover:bg-(--f-content-hover-background) shrink-0 cursor-pointer" (click)="toggleExpand($event, row.key)">
-            <ui-icon name="chevron-right" class="text-[10px] transition-transform duration-150" [class.rotate-90]="isExpanded(row.key)"></ui-icon>
+          <button
+            type="button"
+            class="inline-flex items-center justify-center w-5 h-5 rounded-md hover:bg-(--f-content-hover-background) shrink-0 cursor-pointer"
+            (click)="toggleExpand($event, row.key)"
+          >
+            <ui-icon
+              name="chevron-right"
+              class="text-[10px] transition-transform duration-150"
+              [class.rotate-90]="isExpanded(row.key)"
+            ></ui-icon>
           </button>
         } @else {
           <span class="inline-block w-5 h-5 shrink-0"></span>
         }
 
         @if (selectionMode() === 'checkbox') {
-          <div class="w-4 h-4 rounded-sm border flex items-center justify-center shrink-0 transition-colors"
-            [class]="isSelected(row.key) ? 'bg-primary border-primary' : (isPartial(row.key) ? 'bg-primary/30 border-primary' : 'border-(--f-form-field-border-color) bg-(--f-form-field-background)')">
+          <div
+            class="w-4 h-4 rounded-sm border flex items-center justify-center shrink-0 transition-colors"
+            [class]="
+              isSelected(row.key)
+                ? 'bg-primary border-primary'
+                : isPartial(row.key)
+                  ? 'bg-primary/30 border-primary'
+                  : 'border-(--f-form-field-border-color) bg-(--f-form-field-background)'
+            "
+          >
             @if (isSelected(row.key)) {
-              <ui-icon name="check" class="text-[9px] text-primary-contrast"></ui-icon>
+              <ui-icon
+                name="check"
+                class="text-[9px] text-primary-contrast"
+              ></ui-icon>
             } @else if (isPartial(row.key)) {
-              <ui-icon name="minus" class="text-[9px] text-primary-contrast"></ui-icon>
+              <ui-icon
+                name="minus"
+                class="text-[9px] text-primary-contrast"
+              ></ui-icon>
             }
           </div>
         }
 
         @if (row.node.icon) {
-          <ui-icon [name]="row.node.icon" class="text-xs text-(--f-text-muted-color) shrink-0"></ui-icon>
+          <ui-icon
+            [name]="row.node.icon"
+            class="text-xs text-(--f-text-muted-color) shrink-0"
+          ></ui-icon>
         }
         <span class="flex-1 truncate">{{ row.node.label }}</span>
       </div>
@@ -19369,7 +20010,9 @@ class SpeedDialComponent {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "buttonIcon" }] : /* istanbul ignore next */ []));
     onDocumentClick(e) {
-        if (this.visible() && this.hideOnClickOutside() && !this._el.nativeElement.contains(e.target)) {
+        if (this.visible() &&
+            this.hideOnClickOutside() &&
+            !this._el.nativeElement.contains(e.target)) {
             this.hide();
         }
     }
@@ -19415,7 +20058,8 @@ class SpeedDialComponent {
         }
         const rad = (deg * Math.PI) / 180;
         style['position'] = 'absolute';
-        style['transform'] = `translate(${Math.cos(rad) * r}px, ${Math.sin(rad) * r}px)`;
+        style['transform'] =
+            `translate(${Math.cos(rad) * r}px, ${Math.sin(rad) * r}px)`;
         return style;
     }
     show() {
@@ -19449,7 +20093,11 @@ class SpeedDialComponent {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SpeedDialComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SpeedDialComponent, isStandalone: true, selector: "f-speeddial", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, hideIcon: { classPropertyName: "hideIcon", publicName: "hideIcon", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, rotateAnimation: { classPropertyName: "rotateAnimation", publicName: "rotateAnimation", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, transitionDelay: { classPropertyName: "transitionDelay", publicName: "transitionDelay", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hideOnClickOutside: { classPropertyName: "hideOnClickOutside", publicName: "hideOnClickOutside", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", onClick: "onClick", onShow: "onShow", onHide: "onHide", onVisibleChange: "onVisibleChange" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscapeKey()" }, properties: { "class": "hostClass()", "style": "style()" } }, viewQueries: [{ propertyName: "_toggleBtn", first: true, predicate: ["toggleButton"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <div [class]="containerClass()" [class.opacity-60]="disabled()" [class.pointer-events-none]="disabled()">
+    <div
+      [class]="containerClass()"
+      [class.opacity-60]="disabled()"
+      [class.pointer-events-none]="disabled()"
+    >
       <div class="contents" role="menu" [attr.aria-label]="ariaLabel() || null">
         @if (visible()) {
           @for (item of model(); track $index) {
@@ -19486,7 +20134,10 @@ class SpeedDialComponent {
       </button>
     </div>
     @if (mask() && visible()) {
-      <div class="fixed inset-0 z-40 bg-(--f-mask-background)" (click)="hide()"></div>
+      <div
+        class="fixed inset-0 z-999 bg-(--f-mask-background)"
+        (click)="hide()"
+      ></div>
     }
   `, isInline: true, dependencies: [{ kind: "component", type: UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }] });
 }
@@ -19502,7 +20153,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         '(document:keydown.escape)': 'onEscapeKey()',
                     },
                     template: `
-    <div [class]="containerClass()" [class.opacity-60]="disabled()" [class.pointer-events-none]="disabled()">
+    <div
+      [class]="containerClass()"
+      [class.opacity-60]="disabled()"
+      [class.pointer-events-none]="disabled()"
+    >
       <div class="contents" role="menu" [attr.aria-label]="ariaLabel() || null">
         @if (visible()) {
           @for (item of model(); track $index) {
@@ -19539,7 +20194,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
       </button>
     </div>
     @if (mask() && visible()) {
-      <div class="fixed inset-0 z-40 bg-(--f-mask-background)" (click)="hide()"></div>
+      <div
+        class="fixed inset-0 z-999 bg-(--f-mask-background)"
+        (click)="hide()"
+      ></div>
     }
   `,
                 }]
@@ -20517,7 +21175,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 class CascadeSelectComponent {
     _el = inject(ElementRef);
     constructor() {
-        repositionOnScroll(() => this.open() && this.appendTo() === 'body', () => { this.position(); this.adjustForViewport(); });
+        repositionOnScroll(() => this.open() && this.appendTo() === 'body', () => {
+            this.position();
+            this.adjustForViewport();
+        });
     }
     options = input([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
@@ -20619,16 +21280,24 @@ class CascadeSelectComponent {
     ...(ngDevMode ? [{ debugName: "emptyRef" }] : /* istanbul ignore next */ []));
     fTemplates = contentChildren(FTemplateDirective, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "fTemplates" }] : /* istanbul ignore next */ []));
-    valueTpl = computed(() => this.valueRef() ?? this.fTemplates().find((t) => t.fTemplate() === 'value')?.templateRef ?? null, /* @ts-ignore */
+    valueTpl = computed(() => this.valueRef() ??
+        this.fTemplates().find((t) => t.fTemplate() === 'value')?.templateRef ??
+        null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "valueTpl" }] : /* istanbul ignore next */ []));
-    optionTpl = computed(() => this.optionRef() ?? this.fTemplates().find((t) => t.fTemplate() === 'option')?.templateRef ?? null, /* @ts-ignore */
+    optionTpl = computed(() => this.optionRef() ??
+        this.fTemplates().find((t) => t.fTemplate() === 'option')?.templateRef ??
+        null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "optionTpl" }] : /* istanbul ignore next */ []));
-    groupTpl = computed(() => this.groupRef() ?? this.fTemplates().find((t) => t.fTemplate() === 'group')?.templateRef ?? null, /* @ts-ignore */
+    groupTpl = computed(() => this.groupRef() ??
+        this.fTemplates().find((t) => t.fTemplate() === 'group')?.templateRef ??
+        null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "groupTpl" }] : /* istanbul ignore next */ []));
-    emptyTpl = computed(() => this.emptyRef() ?? this.fTemplates().find((t) => t.fTemplate() === 'empty')?.templateRef ?? null, /* @ts-ignore */
+    emptyTpl = computed(() => this.emptyRef() ??
+        this.fTemplates().find((t) => t.fTemplate() === 'empty')?.templateRef ??
+        null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "emptyTpl" }] : /* istanbul ignore next */ []));
     triggerClass = computed(() => {
-        const base = 'w-full min-h-[38px] flex items-center gap-2 px-3 py-1.5 text-sm rounded-lg border bg-(--f-form-field-background) focus:outline-none focus-visible:ring-focus transition-all duration-[var(--f-transition-duration)]';
+        const base = 'w-full min-h-[34px] flex items-center gap-2 px-3 py-1.5 text-sm rounded-lg border bg-(--f-form-field-background) focus:outline-none focus-visible:ring-focus transition-all duration-[var(--f-transition-duration)]';
         const showInvalid = this.invalid() && this.touched();
         const stateClass = this.open()
             ? showInvalid
@@ -20780,7 +21449,10 @@ class CascadeSelectComponent {
         if (!children.length)
             return;
         this.openGroup(opt, level);
-        this._focusedPath.set([...this._focusedPath().slice(0, level + 1), children[0]]);
+        this._focusedPath.set([
+            ...this._focusedPath().slice(0, level + 1),
+            children[0],
+        ]);
     }
     drillOut() {
         const level = this._focusedPath().length - 1;
@@ -20860,12 +21532,20 @@ class CascadeSelectComponent {
       >
         @if (valueTpl()) {
           <span class="flex-1 min-w-0 truncate text-left text-sm">
-            <ng-container [ngTemplateOutlet]="valueTpl()" [ngTemplateOutletContext]="{ $implicit: value(), placeholder: placeholder() }" />
+            <ng-container
+              [ngTemplateOutlet]="valueTpl()"
+              [ngTemplateOutletContext]="{
+                $implicit: value(),
+                placeholder: placeholder(),
+              }"
+            />
           </span>
         } @else {
           <span
             class="flex-1 min-w-0 truncate text-left text-sm"
-            [class.text-(--f-form-field-placeholder-color)]="!selectedPath().length"
+            [class.text-(--f-form-field-placeholder-color)]="
+              !selectedPath().length
+            "
           >
             {{
               selectedPath().length ? selectedPath().join(' / ') : placeholder()
@@ -20873,11 +21553,21 @@ class CascadeSelectComponent {
           </span>
         }
         <span class="flex items-center gap-1 shrink-0">
-          @if (showClear() && selectedPath().length && !disabled() && !loading()) {
-            <ui-icon name="x" class="text-xs text-(--f-form-field-placeholder-color) hover:text-(--f-text-color) shrink-0" (click)="clear($event)"></ui-icon>
+          @if (
+            showClear() && selectedPath().length && !disabled() && !loading()
+          ) {
+            <ui-icon
+              name="x"
+              class="text-xs text-(--f-form-field-placeholder-color) hover:text-(--f-text-color) shrink-0"
+              (click)="clear($event)"
+            ></ui-icon>
           }
           @if (loading()) {
-            <ui-icon name="loader-circle" [spin]="true" class="text-xs text-(--f-form-field-placeholder-color) shrink-0"></ui-icon>
+            <ui-icon
+              name="loader-circle"
+              [spin]="true"
+              class="text-xs text-(--f-form-field-placeholder-color) shrink-0"
+            ></ui-icon>
           } @else {
             <ui-icon
               [name]="dropdownIcon()"
@@ -20889,12 +21579,7 @@ class CascadeSelectComponent {
       </button>
 
       @if (open()) {
-        <div
-          #panel
-          [class]="panelClass()"
-          [style]="panelStyle()"
-          role="tree"
-        >
+        <div #panel [class]="panelClass()" [style]="panelStyle()" role="tree">
           @if (levels()[0].length) {
             @for (level of levels(); track $index) {
               <ul
@@ -20905,8 +21590,16 @@ class CascadeSelectComponent {
                   <li
                     role="treeitem"
                     [attr.aria-level]="$index + 1"
-                    [attr.aria-expanded]="getChildren(opt, $index).length ? isActive(opt, $index) : null"
-                    [attr.aria-selected]="getChildren(opt, $index).length ? null : isSelectedOption(opt)"
+                    [attr.aria-expanded]="
+                      getChildren(opt, $index).length
+                        ? isActive(opt, $index)
+                        : null
+                    "
+                    [attr.aria-selected]="
+                      getChildren(opt, $index).length
+                        ? null
+                        : isSelectedOption(opt)
+                    "
                   >
                     <button
                       type="button"
@@ -20921,9 +21614,21 @@ class CascadeSelectComponent {
                     >
                       <span class="truncate">
                         @if (getChildren(opt, $index).length && groupTpl()) {
-                          <ng-container [ngTemplateOutlet]="groupTpl()" [ngTemplateOutletContext]="{ $implicit: opt, level: $index }" />
+                          <ng-container
+                            [ngTemplateOutlet]="groupTpl()"
+                            [ngTemplateOutletContext]="{
+                              $implicit: opt,
+                              level: $index,
+                            }"
+                          />
                         } @else if (optionTpl()) {
-                          <ng-container [ngTemplateOutlet]="optionTpl()" [ngTemplateOutletContext]="{ $implicit: opt, level: $index }" />
+                          <ng-container
+                            [ngTemplateOutlet]="optionTpl()"
+                            [ngTemplateOutletContext]="{
+                              $implicit: opt,
+                              level: $index,
+                            }"
+                          />
                         } @else {
                           {{ getLabel(opt) }}
                         }
@@ -20945,8 +21650,13 @@ class CascadeSelectComponent {
                 <ng-container [ngTemplateOutlet]="emptyTpl()" />
               } @else {
                 <div class="py-6 px-4 flex flex-col items-center gap-2">
-                  <ui-icon name="inbox" class="text-2xl text-(--f-text-muted-color)"></ui-icon>
-                  <span class="text-sm text-(--f-text-muted-color)">{{ emptyMessage() }}</span>
+                  <ui-icon
+                    name="inbox"
+                    class="text-2xl text-(--f-text-muted-color)"
+                  ></ui-icon>
+                  <span class="text-sm text-(--f-text-muted-color)">{{
+                    emptyMessage()
+                  }}</span>
                 </div>
               }
             </div>
@@ -20989,12 +21699,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
       >
         @if (valueTpl()) {
           <span class="flex-1 min-w-0 truncate text-left text-sm">
-            <ng-container [ngTemplateOutlet]="valueTpl()" [ngTemplateOutletContext]="{ $implicit: value(), placeholder: placeholder() }" />
+            <ng-container
+              [ngTemplateOutlet]="valueTpl()"
+              [ngTemplateOutletContext]="{
+                $implicit: value(),
+                placeholder: placeholder(),
+              }"
+            />
           </span>
         } @else {
           <span
             class="flex-1 min-w-0 truncate text-left text-sm"
-            [class.text-(--f-form-field-placeholder-color)]="!selectedPath().length"
+            [class.text-(--f-form-field-placeholder-color)]="
+              !selectedPath().length
+            "
           >
             {{
               selectedPath().length ? selectedPath().join(' / ') : placeholder()
@@ -21002,11 +21720,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
           </span>
         }
         <span class="flex items-center gap-1 shrink-0">
-          @if (showClear() && selectedPath().length && !disabled() && !loading()) {
-            <ui-icon name="x" class="text-xs text-(--f-form-field-placeholder-color) hover:text-(--f-text-color) shrink-0" (click)="clear($event)"></ui-icon>
+          @if (
+            showClear() && selectedPath().length && !disabled() && !loading()
+          ) {
+            <ui-icon
+              name="x"
+              class="text-xs text-(--f-form-field-placeholder-color) hover:text-(--f-text-color) shrink-0"
+              (click)="clear($event)"
+            ></ui-icon>
           }
           @if (loading()) {
-            <ui-icon name="loader-circle" [spin]="true" class="text-xs text-(--f-form-field-placeholder-color) shrink-0"></ui-icon>
+            <ui-icon
+              name="loader-circle"
+              [spin]="true"
+              class="text-xs text-(--f-form-field-placeholder-color) shrink-0"
+            ></ui-icon>
           } @else {
             <ui-icon
               [name]="dropdownIcon()"
@@ -21018,12 +21746,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
       </button>
 
       @if (open()) {
-        <div
-          #panel
-          [class]="panelClass()"
-          [style]="panelStyle()"
-          role="tree"
-        >
+        <div #panel [class]="panelClass()" [style]="panelStyle()" role="tree">
           @if (levels()[0].length) {
             @for (level of levels(); track $index) {
               <ul
@@ -21034,8 +21757,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                   <li
                     role="treeitem"
                     [attr.aria-level]="$index + 1"
-                    [attr.aria-expanded]="getChildren(opt, $index).length ? isActive(opt, $index) : null"
-                    [attr.aria-selected]="getChildren(opt, $index).length ? null : isSelectedOption(opt)"
+                    [attr.aria-expanded]="
+                      getChildren(opt, $index).length
+                        ? isActive(opt, $index)
+                        : null
+                    "
+                    [attr.aria-selected]="
+                      getChildren(opt, $index).length
+                        ? null
+                        : isSelectedOption(opt)
+                    "
                   >
                     <button
                       type="button"
@@ -21050,9 +21781,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                     >
                       <span class="truncate">
                         @if (getChildren(opt, $index).length && groupTpl()) {
-                          <ng-container [ngTemplateOutlet]="groupTpl()" [ngTemplateOutletContext]="{ $implicit: opt, level: $index }" />
+                          <ng-container
+                            [ngTemplateOutlet]="groupTpl()"
+                            [ngTemplateOutletContext]="{
+                              $implicit: opt,
+                              level: $index,
+                            }"
+                          />
                         } @else if (optionTpl()) {
-                          <ng-container [ngTemplateOutlet]="optionTpl()" [ngTemplateOutletContext]="{ $implicit: opt, level: $index }" />
+                          <ng-container
+                            [ngTemplateOutlet]="optionTpl()"
+                            [ngTemplateOutletContext]="{
+                              $implicit: opt,
+                              level: $index,
+                            }"
+                          />
                         } @else {
                           {{ getLabel(opt) }}
                         }
@@ -21074,8 +21817,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 <ng-container [ngTemplateOutlet]="emptyTpl()" />
               } @else {
                 <div class="py-6 px-4 flex flex-col items-center gap-2">
-                  <ui-icon name="inbox" class="text-2xl text-(--f-text-muted-color)"></ui-icon>
-                  <span class="text-sm text-(--f-text-muted-color)">{{ emptyMessage() }}</span>
+                  <ui-icon
+                    name="inbox"
+                    class="text-2xl text-(--f-text-muted-color)"
+                  ></ui-icon>
+                  <span class="text-sm text-(--f-text-muted-color)">{{
+                    emptyMessage()
+                  }}</span>
                 </div>
               }
             </div>