@flusys/ng-ui 8.1.5 → 9.1.0

package/fesm2022/flusys-ng-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { signal, Service, makeEnvironmentProviders, provideAppInitializer, inject, PLATFORM_ID, input, booleanAttribute, computed, Component, output, contentChild, viewChild, effect, DestroyRef, ElementRef, Directive, numberAttribute, afterNextRender, TemplateRef, contentChildren, untracked, forwardRef, model, viewChildren, Renderer2, InjectionToken, Injector, SecurityContext } from '@angular/core';
+import { signal, Service, makeEnvironmentProviders, provideAppInitializer, inject, PLATFORM_ID, input, booleanAttribute, computed, Component, ElementRef, DestroyRef, output, contentChild, viewChild, effect, ViewContainerRef, untracked, Directive, numberAttribute, afterNextRender, TemplateRef, contentChildren, forwardRef, model, viewChildren, Renderer2, InjectionToken, Injector, SecurityContext } from '@angular/core';
 import { isPlatformBrowser, DOCUMENT, NgTemplateOutlet, NgComponentOutlet } from '@angular/common';
 import * as lucideNamespace from '@lucide/angular';
 import { isLucideIconComponent, LucideDynamicIcon, provideLucideIcons } from '@lucide/angular';
@@ -1014,6 +1014,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
   `, styles: [":host ::ng-deep svg[lucideIcon]{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 }] }] } });
 
+const BLOCKED_EVENTS = ['click', 'auxclick'];
+// Host-level listeners (routerLink, (click), row handlers) fire even when the inner control is
+// disabled, so swallow the click in the capture phase before any of them run. `auxclick` covers
+// middle-click, which would otherwise open a disabled link's href in a new tab.
+function blockClicksWhileDisabled(isDisabled) {
+    const host = inject(ElementRef).nativeElement;
+    const listener = (e) => {
+        if (!isDisabled())
+            return;
+        e.preventDefault();
+        e.stopImmediatePropagation();
+    };
+    for (const type of BLOCKED_EVENTS)
+        host.addEventListener(type, listener, true);
+    inject(DestroyRef).onDestroy(() => {
+        for (const type of BLOCKED_EVENTS)
+            host.removeEventListener(type, listener, true);
+    });
+}
+
 class ButtonComponent {
     label = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
@@ -1064,6 +1084,9 @@ class ButtonComponent {
     ...(ngDevMode ? [{ debugName: "loadingIconTemplate" }] : /* istanbul ignore next */ []));
     isDisabled = computed(() => this.disabled() || this.loading(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    constructor() {
+        blockClicksWhileDisabled(this.isDisabled);
+    }
     hostClass = computed(() => computeButtonClasses({
         severity: this.severity(),
         text: this.text() || this.variant() === 'text',
@@ -1117,7 +1140,7 @@ class ButtonComponent {
         }
       }
       @if (label()) {
-        <span class="leading-none">{{ label() }}</span>
+        <span>{{ label() }}</span>
       }
       <ng-content />
       @if (loading()) {
@@ -1195,7 +1218,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
         }
       }
       @if (label()) {
-        <span class="leading-none">{{ label() }}</span>
+        <span>{{ label() }}</span>
       }
       <ng-content />
       @if (loading()) {
@@ -1234,7 +1257,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                         class: 'relative',
                     },
                 }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconPos: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPos", required: false }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingIcon", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: false }] }], outlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "outlined", required: false }] }], plain: [{ type: i0.Input, args: [{ isSignal: true, alias: "plain", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], raised: [{ type: i0.Input, args: [{ isSignal: true, alias: "raised", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], fluid: [{ type: i0.Input, args: [{ isSignal: true, alias: "fluid", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], badgeSeverity: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeSeverity", required: false }] }], badgeClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeClass", required: false }] }], onClick: [{ type: i0.Output, args: ["onClick"] }], onFocus: [{ type: i0.Output, args: ["onFocus"] }], onBlur: [{ type: i0.Output, args: ["onBlur"] }], iconTemplate: [{ type: i0.ContentChild, args: ['icon', { isSignal: true }] }], loadingIconTemplate: [{ type: i0.ContentChild, args: ['loadingicon', { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconPos: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPos", required: false }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingIcon", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: false }] }], outlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "outlined", required: false }] }], plain: [{ type: i0.Input, args: [{ isSignal: true, alias: "plain", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], raised: [{ type: i0.Input, args: [{ isSignal: true, alias: "raised", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], fluid: [{ type: i0.Input, args: [{ isSignal: true, alias: "fluid", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], badgeSeverity: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeSeverity", required: false }] }], badgeClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeClass", required: false }] }], onClick: [{ type: i0.Output, args: ["onClick"] }], onFocus: [{ type: i0.Output, args: ["onFocus"] }], onBlur: [{ type: i0.Output, args: ["onBlur"] }], iconTemplate: [{ type: i0.ContentChild, args: ['icon', { isSignal: true }] }], loadingIconTemplate: [{ type: i0.ContentChild, args: ['loadingicon', { isSignal: true }] }] } });
 function computeButtonClasses(opts) {
     const { severity: sev, text: isText, link: isLink, outlined: isOutlined, plain: isPlain = false, rounded: isRounded, raised, fluid: isFluid, size: sz, iconPos = 'left', iconOnly, styleClass = '', } = opts;
     const isVertical = iconPos === 'top' || iconPos === 'bottom';
@@ -1867,7 +1890,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
 class FButtonDirective {
     _el = inject((ElementRef));
     _doc = inject(DOCUMENT);
+    _vcr = inject(ViewContainerRef);
     _appliedContentNodes = [];
+    _iconRefs = [];
     severity = input('primary', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "severity" }] : /* istanbul ignore next */ []));
     text = input(false, { ...(ngDevMode ? { debugName: "text" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -1908,32 +1933,53 @@ class FButtonDirective {
     }), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
     constructor() {
+        blockClicksWhileDisabled(() => this.disabled() || this.loading());
+        // The native `disabled` attribute does nothing on <a> and other non-form hosts, so drop them
+        // out of the tab order while disabled and restore whatever tabindex the consumer set.
+        const el = this._el.nativeElement;
+        if (!(el instanceof HTMLButtonElement || el instanceof HTMLInputElement)) {
+            const originalTabindex = el.getAttribute('tabindex');
+            effect(() => {
+                if (this.disabled() || this.loading())
+                    el.setAttribute('tabindex', '-1');
+                else if (originalTabindex === null)
+                    el.removeAttribute('tabindex');
+                else
+                    el.setAttribute('tabindex', originalTabindex);
+            });
+        }
         effect(() => {
             const el = this._el.nativeElement;
             const loading = this.loading();
-            const iconClass = loading ? this.loadingIcon() || 'loader-circle' : this.icon();
+            const iconName = loading ? this.loadingIcon() || 'loader-circle' : this.icon();
             const label = this.label();
             const pos = this.iconPos();
             for (const n of this._appliedContentNodes)
                 n.remove();
+            for (const ref of this._iconRefs)
+                ref.destroy();
             this._appliedContentNodes = [];
+            this._iconRefs = [];
             const nodes = [];
-            if (iconClass && (pos === 'left' || pos === 'top')) {
-                const i = this._doc.createElement('i');
-                i.className = `${iconClass} shrink-0${loading ? ' animate-spin' : ''}`;
-                nodes.push(i);
-            }
+            const createIcon = () => untracked(() => {
+                const ref = this._vcr.createComponent(UiIconComponent);
+                ref.setInput('name', iconName);
+                ref.setInput('spin', loading);
+                ref.changeDetectorRef.detectChanges();
+                const node = ref.location.nativeElement;
+                node.classList.add('shrink-0');
+                this._iconRefs.push(ref);
+                return node;
+            });
+            if (iconName && (pos === 'left' || pos === 'top'))
+                nodes.push(createIcon());
             if (label) {
                 const span = this._doc.createElement('span');
-                span.className = 'leading-none';
                 span.textContent = label;
                 nodes.push(span);
             }
-            if (iconClass && (pos === 'right' || pos === 'bottom')) {
-                const i = this._doc.createElement('i');
-                i.className = `${iconClass} shrink-0${loading ? ' animate-spin' : ''}`;
-                nodes.push(i);
-            }
+            if (iconName && (pos === 'right' || pos === 'bottom'))
+                nodes.push(createIcon());
             nodes.reverse().forEach(n => el.insertBefore(n, el.firstChild));
             this._appliedContentNodes = nodes;
         });
@@ -1947,7 +1993,7 @@ class FButtonDirective {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: FButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.5", type: FButtonDirective, isStandalone: true, selector: "[fButton]", inputs: { severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, raised: { classPropertyName: "raised", publicName: "raised", isSignal: true, isRequired: false, transformFunction: null }, fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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 }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPos: { classPropertyName: "iconPos", publicName: "iconPos", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, plain: { classPropertyName: "plain", publicName: "plain", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClass()", "attr.disabled": "disabled() || loading() ? '' : null", "attr.aria-disabled": "disabled() ? 'true' : null", "attr.aria-busy": "loading() ? 'true' : null" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.5", type: FButtonDirective, isStandalone: true, selector: "[fButton]", inputs: { severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, raised: { classPropertyName: "raised", publicName: "raised", isSignal: true, isRequired: false, transformFunction: null }, fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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 }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPos: { classPropertyName: "iconPos", publicName: "iconPos", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, plain: { classPropertyName: "plain", publicName: "plain", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClass()", "attr.disabled": "disabled() || loading() ? '' : null", "attr.aria-disabled": "disabled() || loading() ? 'true' : null", "attr.aria-busy": "loading() ? 'true' : null" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: FButtonDirective, decorators: [{
             type: Directive,
@@ -1956,7 +2002,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                     host: {
                         '[class]': 'hostClass()',
                         '[attr.disabled]': "disabled() || loading() ? '' : null",
-                        '[attr.aria-disabled]': "disabled() ? 'true' : null",
+                        '[attr.aria-disabled]': "disabled() || loading() ? 'true' : null",
                         '[attr.aria-busy]': 'loading() ? \'true\' : null',
                     },
                 }]
@@ -2318,6 +2364,7 @@ class ChipComponent {
     ...(ngDevMode ? [{ debugName: "_imageLoadFailed" }] : /* istanbul ignore next */ []));
     imageLoadFailed = this._imageLoadFailed.asReadonly();
     constructor() {
+        blockClicksWhileDisabled(this.disabled);
         effect(() => {
             this.image();
             this._imageLoadFailed.set(false);
@@ -2617,8 +2664,8 @@ class MessageComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: MessageComponent, isStandalone: true, selector: "f-message", inputs: { severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, life: { classPropertyName: "life", publicName: "life", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClose: "onClose" }, host: { properties: { "style.display": "visible() ? null : 'none'" }, classAttribute: "block" }, ngImport: i0, template: `
     <div [class]="classes()" role="alert">
       <ui-icon [name]="iconName()" [class]="'mt-0.5 shrink-0 ' + iconColor()"></ui-icon>
-      <div class="flex-1 min-w-0">
-        @if (text()) { <span class="text-sm leading-snug" [innerHTML]="text()"></span> }
+      <div class="flex-1 min-w-0 text-sm leading-snug">
+        @if (text()) { <span [innerHTML]="text()"></span> }
         <ng-content />
       </div>
       @if (closable()) {
@@ -2646,8 +2693,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                     template: `
     <div [class]="classes()" role="alert">
       <ui-icon [name]="iconName()" [class]="'mt-0.5 shrink-0 ' + iconColor()"></ui-icon>
-      <div class="flex-1 min-w-0">
-        @if (text()) { <span class="text-sm leading-snug" [innerHTML]="text()"></span> }
+      <div class="flex-1 min-w-0 text-sm leading-snug">
+        @if (text()) { <span [innerHTML]="text()"></span> }
         <ng-content />
       </div>
       @if (closable()) {
@@ -3432,6 +3479,7 @@ function attachOverlayPosition(anchor, panel, options = {}) {
 class SelectComponent {
     _el = inject(ElementRef);
     constructor() {
+        blockClicksWhileDisabled(this.isDisabled);
         afterNextRender(() => {
             if (!this.autofocus())
                 return;
@@ -3466,6 +3514,10 @@ class SelectComponent {
     placeholder = input('Select', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    _formDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_formDisabled" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this._formDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
     filter = input(false, { ...(ngDevMode ? { debugName: "filter" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     filterBy = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "filterBy" }] : /* istanbul ignore next */ []));
@@ -3761,7 +3813,7 @@ class SelectComponent {
             : 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()
+        const disabledClass = this.isDisabled()
             ? 'opacity-60 cursor-not-allowed'
             : this.readonly()
                 ? 'cursor-default'
@@ -3814,7 +3866,7 @@ class SelectComponent {
         this.onClear.emit();
     }
     toggleOpen() {
-        if (this.disabled() || this.loading() || this.readonly())
+        if (this.isDisabled() || this.loading() || this.readonly())
             return;
         if (this.open())
             this.closeList();
@@ -3886,7 +3938,7 @@ class SelectComponent {
             this._focusedOptionIndex.set(opts.indexOf(match));
     }
     onTriggerKeyDown(event) {
-        if (this.disabled() || this.loading())
+        if (this.isDisabled() || this.loading())
             return;
         switch (event.key) {
             case 'ArrowDown':
@@ -3960,7 +4012,7 @@ class SelectComponent {
     registerOnTouched(fn) {
         this._onTouched = fn;
     }
-    setDisabledState() { }
+    setDisabledState(isDisabled) { this._formDisabled.set(isDisabled); }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: SelectComponent, isStandalone: true, selector: "f-select", 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 }, showClear: { classPropertyName: "showClear", publicName: "showClear", 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 }, 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 }, 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 }, editable: { classPropertyName: "editable", publicName: "editable", 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 }, checkmark: { classPropertyName: "checkmark", publicName: "checkmark", 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 }, selectedObject: { classPropertyName: "selectedObject", publicName: "selectedObject", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFilter: "onFilter", onChange: "onChange", onShow: "onShow", onHide: "onHide", onBlur: "onBlur", onFocus: "onFocus", onClear: "onClear", onLazyLoad: "onLazyLoad" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "hostClass()", "style": "style()" } }, providers: [
             {
@@ -3975,7 +4027,7 @@ class SelectComponent {
         type="button"
         data-select-trigger
         [id]="editable() ? null : inputId()"
-        [disabled]="disabled() || loading()"
+        [disabled]="isDisabled() || loading()"
         (click)="toggleOpen()"
         (keydown)="onTriggerKeyDown($event)"
         (focus)="onFocus.emit($event)"
@@ -4017,7 +4069,7 @@ class SelectComponent {
           >
         }
         <span class="flex items-center gap-1 shrink-0">
-          @if (showClear() && value() != null && !disabled() && !readonly()) {
+          @if (showClear() && value() != null && !isDisabled() && !readonly()) {
             <ui-icon
               [name]="clearIcon()"
               class="text-xs text-(--f-form-field-placeholder-color) hover:text-(--f-text-color) shrink-0"
@@ -4228,7 +4280,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
         type="button"
         data-select-trigger
         [id]="editable() ? null : inputId()"
-        [disabled]="disabled() || loading()"
+        [disabled]="isDisabled() || loading()"
         (click)="toggleOpen()"
         (keydown)="onTriggerKeyDown($event)"
         (focus)="onFocus.emit($event)"
@@ -4270,7 +4322,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
           >
         }
         <span class="flex items-center gap-1 shrink-0">
-          @if (showClear() && value() != null && !disabled() && !readonly()) {
+          @if (showClear() && value() != null && !isDisabled() && !readonly()) {
             <ui-icon
               [name]="clearIcon()"
               class="text-xs text-(--f-form-field-placeholder-color) hover:text-(--f-text-color) shrink-0"
@@ -4462,6 +4514,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
 class MultiSelectComponent {
     _el = inject(ElementRef);
     constructor() {
+        blockClicksWhileDisabled(this.isDisabled);
         afterNextRender(() => {
             if (!this.autofocus())
                 return;
@@ -4505,7 +4558,7 @@ class MultiSelectComponent {
     panelStyle = computed(() => this.appendTo() === 'body' ? overlayPlacementStyle(this._placement()) : {}, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panelStyle" }] : /* istanbul ignore next */ []));
     triggerClass = computed(() => {
-        const base = 'w-full min-h-[34px] flex items-center gap-2 f-field-compact text-sm border bg-(--f-form-field-background) focus:outline-none focus-visible:ring-focus transition-all duration-[var(--f-transition-duration)]';
+        const base = 'w-full flex items-center gap-2 f-field-compact text-sm 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
@@ -4514,7 +4567,7 @@ class MultiSelectComponent {
             : 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()
+        const disabledClass = this.isDisabled()
             ? 'opacity-60 cursor-not-allowed'
             : this.readonly()
                 ? 'cursor-default'
@@ -4531,6 +4584,10 @@ class MultiSelectComponent {
     placeholder = input('Select', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    _formDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_formDisabled" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this._formDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
     filter = input(false, { ...(ngDevMode ? { debugName: "filter" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     filterBy = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "filterBy" }] : /* istanbul ignore next */ []));
@@ -4817,7 +4874,7 @@ class MultiSelectComponent {
     commaLabel = computed(() => this.selectedLabels().join(', '), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "commaLabel" }] : /* istanbul ignore next */ []));
     toggleOpen() {
-        if (this.disabled() || this.loading() || this.readonly())
+        if (this.isDisabled() || this.loading() || this.readonly())
             return;
         if (this.open())
             this.closeList();
@@ -4929,7 +4986,7 @@ class MultiSelectComponent {
             this._focusedOptionIndex.set(opts.indexOf(match));
     }
     onTriggerKeyDown(event) {
-        if (this.disabled() || this.loading())
+        if (this.isDisabled() || this.loading())
             return;
         switch (event.key) {
             case 'ArrowDown':
@@ -5003,7 +5060,7 @@ class MultiSelectComponent {
     registerOnTouched(fn) {
         this._onTouched = fn;
     }
-    setDisabledState() { }
+    setDisabledState(isDisabled) { this._formDisabled.set(isDisabled); }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: MultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", 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 }, selectedObjects: { classPropertyName: "selectedObjects", publicName: "selectedObjects", 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: [
             {
@@ -5017,7 +5074,7 @@ class MultiSelectComponent {
         #trigger
         tabindex="0"
         [id]="inputId()"
-        [attr.aria-disabled]="disabled() || loading() ? true : null"
+        [attr.aria-disabled]="isDisabled() || loading() ? true : null"
         (click)="toggleOpen()"
         (keydown)="onTriggerKeyDown($event)"
         (focus)="onFocus.emit($event)"
@@ -5055,7 +5112,7 @@ class MultiSelectComponent {
                   } @else {
                     {{ getOptionLabel(opt) }}
                   }
-                  @if (!disabled() && !readonly()) {
+                  @if (!isDisabled() && !readonly()) {
                     <button
                       type="button"
                       aria-label="Remove"
@@ -5075,7 +5132,7 @@ class MultiSelectComponent {
           }}</span>
         }
         <span class="flex items-center gap-1 shrink-0 ml-auto">
-          @if (showClear() && values().length && !disabled() && !readonly()) {
+          @if (showClear() && values().length && !isDisabled() && !readonly()) {
             <ui-icon
               [name]="clearIcon()"
               class="text-xs text-(--f-form-field-placeholder-color) hover:text-(--f-text-color) shrink-0"
@@ -5320,7 +5377,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
         #trigger
         tabindex="0"
         [id]="inputId()"
-        [attr.aria-disabled]="disabled() || loading() ? true : null"
+        [attr.aria-disabled]="isDisabled() || loading() ? true : null"
         (click)="toggleOpen()"
         (keydown)="onTriggerKeyDown($event)"
         (focus)="onFocus.emit($event)"
@@ -5358,7 +5415,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                   } @else {
                     {{ getOptionLabel(opt) }}
                   }
-                  @if (!disabled() && !readonly()) {
+                  @if (!isDisabled() && !readonly()) {
                     <button
                       type="button"
                       aria-label="Remove"
@@ -5378,7 +5435,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
           }}</span>
         }
         <span class="flex items-center gap-1 shrink-0 ml-auto">
-          @if (showClear() && values().length && !disabled() && !readonly()) {
+          @if (showClear() && values().length && !isDisabled() && !readonly()) {
             <ui-icon
               [name]="clearIcon()"
               class="text-xs text-(--f-form-field-placeholder-color) hover:text-(--f-text-color) shrink-0"
@@ -5607,6 +5664,13 @@ class CheckboxComponent {
     ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     binary = input(true, { ...(ngDevMode ? { debugName: "binary" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    _formDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_formDisabled" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this._formDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    constructor() {
+        blockClicksWhileDisabled(this.isDisabled);
+    }
     readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     inputId = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
@@ -5668,17 +5732,17 @@ class CheckboxComponent {
     writeValue(val) { this.checked.set(!!val); }
     registerOnChange(fn) { this._onChange = fn; }
     registerOnTouched(fn) { this._onTouched = fn; }
-    setDisabledState() { }
+    setDisabledState(isDisabled) { this._formDisabled.set(isDisabled); }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: CheckboxComponent, isStandalone: true, selector: "f-checkbox", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, binary: { classPropertyName: "binary", publicName: "binary", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", 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 }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", 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 }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChangeEvent: "onChange", onBlur: "onBlur", touch: "touch", checked: "checkedChange" }, host: { properties: { "class": "hostClass()", "style": "style()" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CheckboxComponent), multi: true }], ngImport: i0, template: `
-    <label class="inline-flex items-center gap-2 cursor-pointer select-none" [class.opacity-60]="disabled()" [class.pointer-events-none]="disabled()">
+    <label class="inline-flex items-center gap-2 cursor-pointer select-none" [class.opacity-60]="isDisabled()" [class.pointer-events-none]="isDisabled()">
       <div class="relative shrink-0">
         <input
           type="checkbox"
           class="sr-only peer"
           [id]="inputId()"
           [checked]="checked()"
-          [disabled]="disabled()"
+          [disabled]="isDisabled()"
           [indeterminate]="indeterminate()"
           [attr.aria-checked]="indeterminate() ? 'mixed' : checked()"
           [attr.aria-readonly]="readonly() || null"
@@ -5708,14 +5772,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                     providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CheckboxComponent), multi: true }],
                     host: { '[class]': 'hostClass()', '[style]': 'style()' },
                     template: `
-    <label class="inline-flex items-center gap-2 cursor-pointer select-none" [class.opacity-60]="disabled()" [class.pointer-events-none]="disabled()">
+    <label class="inline-flex items-center gap-2 cursor-pointer select-none" [class.opacity-60]="isDisabled()" [class.pointer-events-none]="isDisabled()">
       <div class="relative shrink-0">
         <input
           type="checkbox"
           class="sr-only peer"
           [id]="inputId()"
           [checked]="checked()"
-          [disabled]="disabled()"
+          [disabled]="isDisabled()"
           [indeterminate]="indeterminate()"
           [attr.aria-checked]="indeterminate() ? 'mixed' : checked()"
           [attr.aria-readonly]="readonly() || null"
@@ -5737,7 +5801,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
     </label>
   `,
                 }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], binary: [{ type: i0.Input, args: [{ isSignal: true, alias: "binary", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], onChangeEvent: [{ type: i0.Output, args: ["onChange"] }], onBlur: [{ type: i0.Output, args: ["onBlur"] }], touch: [{ type: i0.Output, args: ["touch"] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }] } });
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], binary: [{ type: i0.Input, args: [{ isSignal: true, alias: "binary", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], onChangeEvent: [{ type: i0.Output, args: ["onChange"] }], onBlur: [{ type: i0.Output, args: ["onBlur"] }], touch: [{ type: i0.Output, args: ["touch"] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }] } });
 
 class ToggleSwitchComponent {
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -5765,6 +5829,9 @@ class ToggleSwitchComponent {
     ...(ngDevMode ? [{ debugName: "_formDisabled" }] : /* istanbul ignore next */ []));
     isDisabled = computed(() => this.disabled() || this._formDisabled(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    constructor() {
+        blockClicksWhileDisabled(this.isDisabled);
+    }
     _onChange = () => { };
     _onTouched = () => { };
     hostClass = computed(() => `inline-block ${this.styleClass()}`, /* @ts-ignore */
@@ -5837,7 +5904,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
     </button>
   `,
                 }]
-        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], trueValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "trueValue", required: false }] }], falseValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "falseValue", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], trueValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "trueValue", required: false }] }], falseValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "falseValue", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }] } });
 
 class ToggleButtonComponent {
     onLabel = input('Yes', /* @ts-ignore */
@@ -5855,6 +5922,13 @@ class ToggleButtonComponent {
     size = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    _formDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_formDisabled" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this._formDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    constructor() {
+        blockClicksWhileDisabled(this.isDisabled);
+    }
     readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     ariaLabel = input('', /* @ts-ignore */
@@ -5881,7 +5955,7 @@ class ToggleButtonComponent {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "buttonClass" }] : /* istanbul ignore next */ []));
     toggle() {
-        if (this.disabled() || this.readonly())
+        if (this.isDisabled() || this.readonly())
             return;
         const v = !this.checked();
         this._checked.set(v);
@@ -5891,17 +5965,17 @@ class ToggleButtonComponent {
     writeValue(v) { this._checked.set(!!v); }
     registerOnChange(fn) { this._onChange = fn; }
     registerOnTouched(fn) { this._onTouched = fn; }
-    setDisabledState() { }
+    setDisabledState(isDisabled) { this._formDisabled.set(isDisabled); }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ToggleButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: ToggleButtonComponent, isStandalone: true, selector: "f-togglebutton", inputs: { onLabel: { classPropertyName: "onLabel", publicName: "onLabel", isSignal: true, isRequired: false, transformFunction: null }, offLabel: { classPropertyName: "offLabel", publicName: "offLabel", isSignal: true, isRequired: false, transformFunction: null }, onIcon: { classPropertyName: "onIcon", publicName: "onIcon", isSignal: true, isRequired: false, transformFunction: null }, offIcon: { classPropertyName: "offIcon", publicName: "offIcon", isSignal: true, isRequired: false, transformFunction: null }, iconPos: { classPropertyName: "iconPos", publicName: "iconPos", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", 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: { properties: { "class": "hostClass()", "style": "style()" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ToggleButtonComponent), multi: true }], ngImport: i0, template: `
     <button
       type="button"
       [class]="buttonClass()"
-      [disabled]="disabled()"
+      [disabled]="isDisabled()"
       [attr.aria-pressed]="checked()"
       [attr.aria-readonly]="readonly() || null"
       [attr.aria-label]="ariaLabel() || null"
-      [attr.tabindex]="disabled() ? -1 : tabindex()"
+      [attr.tabindex]="isDisabled() ? -1 : tabindex()"
       role="switch"
       (click)="toggle()"
     >
@@ -5909,7 +5983,7 @@ class ToggleButtonComponent {
         @if (checked() && onIcon()) { <ui-icon [name]="onIcon()" class="text-sm"></ui-icon> }
         @if (!checked() && offIcon()) { <ui-icon [name]="offIcon()" class="text-sm"></ui-icon> }
       }
-      <span class="leading-none">{{ checked() ? onLabel() : offLabel() }}</span>
+      <span>{{ checked() ? onLabel() : offLabel() }}</span>
       @if (iconPos() === 'right') {
         @if (checked() && onIcon()) { <ui-icon [name]="onIcon()" class="text-sm"></ui-icon> }
         @if (!checked() && offIcon()) { <ui-icon [name]="offIcon()" class="text-sm"></ui-icon> }
@@ -5928,11 +6002,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
     <button
       type="button"
       [class]="buttonClass()"
-      [disabled]="disabled()"
+      [disabled]="isDisabled()"
       [attr.aria-pressed]="checked()"
       [attr.aria-readonly]="readonly() || null"
       [attr.aria-label]="ariaLabel() || null"
-      [attr.tabindex]="disabled() ? -1 : tabindex()"
+      [attr.tabindex]="isDisabled() ? -1 : tabindex()"
       role="switch"
       (click)="toggle()"
     >
@@ -5940,7 +6014,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
         @if (checked() && onIcon()) { <ui-icon [name]="onIcon()" class="text-sm"></ui-icon> }
         @if (!checked() && offIcon()) { <ui-icon [name]="offIcon()" class="text-sm"></ui-icon> }
       }
-      <span class="leading-none">{{ checked() ? onLabel() : offLabel() }}</span>
+      <span>{{ checked() ? onLabel() : offLabel() }}</span>
       @if (iconPos() === 'right') {
         @if (checked() && onIcon()) { <ui-icon [name]="onIcon()" class="text-sm"></ui-icon> }
         @if (!checked() && offIcon()) { <ui-icon [name]="offIcon()" class="text-sm"></ui-icon> }
@@ -5948,7 +6022,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
     </button>
   `,
                 }]
-        }], propDecorators: { onLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "onLabel", required: false }] }], offLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "offLabel", required: false }] }], onIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "onIcon", required: false }] }], offIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "offIcon", required: false }] }], iconPos: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPos", required: false }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { onLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "onLabel", required: false }] }], offLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "offLabel", required: false }] }], onIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "onIcon", required: false }] }], offIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "offIcon", required: false }] }], iconPos: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPos", required: false }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }] } });
 
 class SelectButtonComponent {
     options = input([], /* @ts-ignore */
@@ -5961,6 +6035,13 @@ class SelectButtonComponent {
     ...(ngDevMode ? [{ debugName: "optionDisabled" }] : /* istanbul ignore next */ []));
     multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    _formDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_formDisabled" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this._formDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    constructor() {
+        blockClicksWhileDisabled(this.isDisabled);
+    }
     invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     allowEmpty = input(true, { ...(ngDevMode ? { debugName: "allowEmpty" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     size = input('', /* @ts-ignore */
@@ -6002,7 +6083,7 @@ class SelectButtonComponent {
         return this.multiple() ? this._values().includes(v) : this._value() === v;
     }
     select(opt, event) {
-        if (this.disabled() || this.getOptionDisabled(opt))
+        if (this.isDisabled() || this.getOptionDisabled(opt))
             return;
         const v = this.getOptionValue(opt);
         if (this.multiple()) {
@@ -6052,7 +6133,7 @@ class SelectButtonComponent {
     }
     registerOnChange(fn) { this._onChange = fn; }
     registerOnTouched(fn) { this._onTouched = fn; }
-    setDisabledState() { }
+    setDisabledState(isDisabled) { this._formDisabled.set(isDisabled); }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: SelectButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: SelectButtonComponent, isStandalone: true, selector: "f-selectbutton", 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 }, optionDisabled: { classPropertyName: "optionDisabled", publicName: "optionDisabled", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, allowEmpty: { classPropertyName: "allowEmpty", publicName: "allowEmpty", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", 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: { onChange: "onChange" }, host: { properties: { "class": "hostClass()", "style": "style()" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SelectButtonComponent), multi: true }], ngImport: i0, template: `
     <div
@@ -6068,15 +6149,15 @@ class SelectButtonComponent {
           role="button"
           class="f-selectbutton-item"
           [class.f-selectbutton-item-checked]="isSelected(opt)"
-          [disabled]="disabled() || getOptionDisabled(opt)"
+          [disabled]="isDisabled() || getOptionDisabled(opt)"
           [attr.aria-pressed]="isSelected(opt)"
-          [attr.aria-disabled]="disabled() || getOptionDisabled(opt) || null"
+          [attr.aria-disabled]="isDisabled() || getOptionDisabled(opt) || null"
           (click)="select(opt, $event)"
           (keydown)="onKeydown($event)"
         >{{ getOptionLabel(opt) }}</button>
       }
     </div>
-  `, isInline: true, styles: [".f-selectbutton{display:inline-flex;align-items:stretch;background:var(--f-selectbutton-background);border:1px solid var(--f-selectbutton-border-color);border-radius:var(--f-border-radius-md);padding:var(--f-selectbutton-padding);overflow:hidden}.f-selectbutton-invalid{border-color:var(--f-red-500)}.f-selectbutton-item{border:0;border-inline-start:1px solid var(--f-selectbutton-divider-color);border-radius:var(--f-selectbutton-item-border-radius);background:transparent;color:var(--f-selectbutton-item-color);font-weight:var(--f-selectbutton-font-weight);font-size:.875rem;padding:.45rem .875rem;cursor:pointer;transition:background-color var(--f-transition-duration),color var(--f-transition-duration),box-shadow var(--f-transition-duration)}.f-selectbutton-item:first-child{border-inline-start:0}.f-selectbutton-item:not(.f-selectbutton-item-checked):hover:not(:disabled){color:var(--f-text-color);background:var(--f-selectbutton-item-hover-background)}.f-selectbutton-item:focus-visible{outline-width:var(--f-focus-ring-width);outline-style:var(--f-focus-ring-style);outline-offset:var(--f-focus-ring-offset);outline-color:var(--f-focus-ring-color)}.f-selectbutton-item-checked{background:var(--f-selectbutton-checked-background);color:var(--f-selectbutton-checked-color);box-shadow:var(--f-selectbutton-checked-shadow)}.f-selectbutton-item:disabled{opacity:.6;cursor:default}.f-selectbutton-sm .f-selectbutton-item{font-size:.8125rem;padding:.3rem .7rem}.f-selectbutton-lg .f-selectbutton-item{font-size:.9375rem;padding:.6rem 1.05rem}\n"] });
+  `, isInline: true, styles: [".f-selectbutton{display:inline-flex;align-items:stretch;background:var(--f-selectbutton-background);border:1px solid var(--f-selectbutton-border-color);border-radius:var(--f-border-radius-md);padding:var(--f-selectbutton-padding);overflow:hidden}.f-selectbutton-invalid{border-color:var(--f-red-500)}.f-selectbutton-item{border:0;border-inline-start:1px solid var(--f-selectbutton-divider-color);border-radius:var(--f-selectbutton-item-border-radius);background:transparent;color:var(--f-selectbutton-item-color);font-weight:var(--f-selectbutton-font-weight);font-size:.875rem;line-height:1.25rem;padding:max(0px,calc(var(--f-field-padding-y) - var(--f-selectbutton-padding))) .875rem;cursor:pointer;transition:background-color var(--f-transition-duration),color var(--f-transition-duration),box-shadow var(--f-transition-duration)}.f-selectbutton-item:first-child{border-inline-start:0}.f-selectbutton-item:not(.f-selectbutton-item-checked):hover:not(:disabled){color:var(--f-text-color);background:var(--f-selectbutton-item-hover-background)}.f-selectbutton-item:focus-visible{outline-width:var(--f-focus-ring-width);outline-style:var(--f-focus-ring-style);outline-offset:var(--f-focus-ring-offset);outline-color:var(--f-focus-ring-color)}.f-selectbutton-item-checked{background:var(--f-selectbutton-checked-background);color:var(--f-selectbutton-checked-color);box-shadow:var(--f-selectbutton-checked-shadow)}.f-selectbutton-item:disabled{opacity:.6;cursor:default}.f-selectbutton-sm .f-selectbutton-item{font-size:.75rem;line-height:1rem;padding:max(0px,calc(var(--f-field-padding-y) - .125rem - var(--f-selectbutton-padding))) .7rem}.f-selectbutton-lg .f-selectbutton-item{font-size:1rem;line-height:1.5rem;padding:max(0px,calc(var(--f-field-padding-y) + .25rem - var(--f-selectbutton-padding))) 1.05rem}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: SelectButtonComponent, decorators: [{
             type: Component,
@@ -6094,21 +6175,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
           role="button"
           class="f-selectbutton-item"
           [class.f-selectbutton-item-checked]="isSelected(opt)"
-          [disabled]="disabled() || getOptionDisabled(opt)"
+          [disabled]="isDisabled() || getOptionDisabled(opt)"
           [attr.aria-pressed]="isSelected(opt)"
-          [attr.aria-disabled]="disabled() || getOptionDisabled(opt) || null"
+          [attr.aria-disabled]="isDisabled() || getOptionDisabled(opt) || null"
           (click)="select(opt, $event)"
           (keydown)="onKeydown($event)"
         >{{ getOptionLabel(opt) }}</button>
       }
     </div>
-  `, styles: [".f-selectbutton{display:inline-flex;align-items:stretch;background:var(--f-selectbutton-background);border:1px solid var(--f-selectbutton-border-color);border-radius:var(--f-border-radius-md);padding:var(--f-selectbutton-padding);overflow:hidden}.f-selectbutton-invalid{border-color:var(--f-red-500)}.f-selectbutton-item{border:0;border-inline-start:1px solid var(--f-selectbutton-divider-color);border-radius:var(--f-selectbutton-item-border-radius);background:transparent;color:var(--f-selectbutton-item-color);font-weight:var(--f-selectbutton-font-weight);font-size:.875rem;padding:.45rem .875rem;cursor:pointer;transition:background-color var(--f-transition-duration),color var(--f-transition-duration),box-shadow var(--f-transition-duration)}.f-selectbutton-item:first-child{border-inline-start:0}.f-selectbutton-item:not(.f-selectbutton-item-checked):hover:not(:disabled){color:var(--f-text-color);background:var(--f-selectbutton-item-hover-background)}.f-selectbutton-item:focus-visible{outline-width:var(--f-focus-ring-width);outline-style:var(--f-focus-ring-style);outline-offset:var(--f-focus-ring-offset);outline-color:var(--f-focus-ring-color)}.f-selectbutton-item-checked{background:var(--f-selectbutton-checked-background);color:var(--f-selectbutton-checked-color);box-shadow:var(--f-selectbutton-checked-shadow)}.f-selectbutton-item:disabled{opacity:.6;cursor:default}.f-selectbutton-sm .f-selectbutton-item{font-size:.8125rem;padding:.3rem .7rem}.f-selectbutton-lg .f-selectbutton-item{font-size:.9375rem;padding:.6rem 1.05rem}\n"] }]
-        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], optionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionDisabled", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], allowEmpty: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowEmpty", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], onChange: [{ type: i0.Output, args: ["onChange"] }] } });
+  `, styles: [".f-selectbutton{display:inline-flex;align-items:stretch;background:var(--f-selectbutton-background);border:1px solid var(--f-selectbutton-border-color);border-radius:var(--f-border-radius-md);padding:var(--f-selectbutton-padding);overflow:hidden}.f-selectbutton-invalid{border-color:var(--f-red-500)}.f-selectbutton-item{border:0;border-inline-start:1px solid var(--f-selectbutton-divider-color);border-radius:var(--f-selectbutton-item-border-radius);background:transparent;color:var(--f-selectbutton-item-color);font-weight:var(--f-selectbutton-font-weight);font-size:.875rem;line-height:1.25rem;padding:max(0px,calc(var(--f-field-padding-y) - var(--f-selectbutton-padding))) .875rem;cursor:pointer;transition:background-color var(--f-transition-duration),color var(--f-transition-duration),box-shadow var(--f-transition-duration)}.f-selectbutton-item:first-child{border-inline-start:0}.f-selectbutton-item:not(.f-selectbutton-item-checked):hover:not(:disabled){color:var(--f-text-color);background:var(--f-selectbutton-item-hover-background)}.f-selectbutton-item:focus-visible{outline-width:var(--f-focus-ring-width);outline-style:var(--f-focus-ring-style);outline-offset:var(--f-focus-ring-offset);outline-color:var(--f-focus-ring-color)}.f-selectbutton-item-checked{background:var(--f-selectbutton-checked-background);color:var(--f-selectbutton-checked-color);box-shadow:var(--f-selectbutton-checked-shadow)}.f-selectbutton-item:disabled{opacity:.6;cursor:default}.f-selectbutton-sm .f-selectbutton-item{font-size:.75rem;line-height:1rem;padding:max(0px,calc(var(--f-field-padding-y) - .125rem - var(--f-selectbutton-padding))) .7rem}.f-selectbutton-lg .f-selectbutton-item{font-size:1rem;line-height:1.5rem;padding:max(0px,calc(var(--f-field-padding-y) + .25rem - var(--f-selectbutton-padding))) 1.05rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], optionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionDisabled", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], allowEmpty: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowEmpty", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], onChange: [{ type: i0.Output, args: ["onChange"] }] } });
 
 class PasswordComponent {
     toggleMask = input(true, { ...(ngDevMode ? { debugName: "toggleMask" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     feedback = input(false, { ...(ngDevMode ? { debugName: "feedback" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    _formDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_formDisabled" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this._formDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    constructor() {
+        blockClicksWhileDisabled(this.isDisabled);
+    }
     placeholder = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     inputId = input('', /* @ts-ignore */
@@ -6189,16 +6277,13 @@ class PasswordComponent {
                 ? 'border-transparent'
                 : 'border-(--f-form-field-border-color)';
         const variantClass = variant === 'filled' ? 'bg-(--f-form-field-filled-background)' : 'bg-(--f-form-field-background)';
-        const paddingY = size === 'small' ? 'py-1.5' : size === 'large' ? 'py-3' : 'py-2';
+        const shape = size === 'small' ? 'f-field-sm' : size === 'large' ? 'f-field-lg' : 'f-field';
         const textSize = size === 'small' ? 'text-xs' : size === 'large' ? 'text-base' : 'text-sm';
-        const paddingLeft = size === 'small' ? 'pl-2.5' : size === 'large' ? 'pl-4' : 'pl-3';
-        const paddingRight = this.toggleMask()
-            ? (size === 'small' ? 'pr-8' : size === 'large' ? 'pr-11' : 'pr-10')
-            : (size === 'small' ? 'pr-2.5' : size === 'large' ? 'pr-4' : 'pr-3');
+        const maskPadding = this.toggleMask() ? 'pr-[calc(var(--f-field-padding-x)+1.75rem)]!' : '';
         return [
-            'block f-field-shape border',
+            'block border',
             this.fluid() ? 'w-full' : 'w-auto',
-            paddingLeft, paddingRight, paddingY, textSize,
+            shape, maskPadding, textSize,
             variantClass,
             'text-(--f-form-field-color) placeholder:text-(--f-form-field-placeholder-color)',
             'focus:outline-none focus-visible:ring-focus',
@@ -6229,7 +6314,7 @@ class PasswordComponent {
     writeValue(v) { this._value.set(v ?? ''); }
     registerOnChange(fn) { this._onChange = fn; }
     registerOnTouched(fn) { this._onTouched = fn; }
-    setDisabledState() { }
+    setDisabledState(isDisabled) { this._formDisabled.set(isDisabled); }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: PasswordComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: PasswordComponent, isStandalone: true, selector: "f-password", inputs: { toggleMask: { classPropertyName: "toggleMask", publicName: "toggleMask", isSignal: true, isRequired: false, transformFunction: null }, feedback: { classPropertyName: "feedback", publicName: "feedback", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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 }, inputStyleClass: { classPropertyName: "inputStyleClass", publicName: "inputStyleClass", 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 }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, promptLabel: { classPropertyName: "promptLabel", publicName: "promptLabel", isSignal: true, isRequired: false, transformFunction: null }, weakLabel: { classPropertyName: "weakLabel", publicName: "weakLabel", isSignal: true, isRequired: false, transformFunction: null }, mediumLabel: { classPropertyName: "mediumLabel", publicName: "mediumLabel", isSignal: true, isRequired: false, transformFunction: null }, strongLabel: { classPropertyName: "strongLabel", publicName: "strongLabel", isSignal: true, isRequired: false, transformFunction: null }, mediumRegex: { classPropertyName: "mediumRegex", publicName: "mediumRegex", isSignal: true, isRequired: false, transformFunction: null }, strongRegex: { classPropertyName: "strongRegex", publicName: "strongRegex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onBlur: "onBlur", onFocus: "onFocus" }, host: { properties: { "class": "hostClass()", "style": "style()" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => PasswordComponent), multi: true }], ngImport: i0, template: `
     <div class="relative">
@@ -6239,7 +6324,7 @@ class PasswordComponent {
         [id]="inputId()"
         [placeholder]="placeholder()"
         [value]="value()"
-        [disabled]="disabled()"
+        [disabled]="isDisabled()"
         [attr.aria-invalid]="invalid() && touched() ? 'true' : null"
         [attr.aria-describedby]="ariaDescribedby() || null"
         [attr.autocomplete]="autocomplete() || null"
@@ -6250,7 +6335,7 @@ class PasswordComponent {
       @if (toggleMask()) {
         <button
           type="button"
-          class="inline-flex items-center absolute right-3 top-1/2 -translate-y-1/2 text-(--f-form-field-placeholder-color) hover:text-(--f-text-hover-color) cursor-pointer focus:outline-none focus-visible:ring-focus rounded-sm"
+          class="inline-flex items-center absolute right-(--f-field-padding-x) top-1/2 -translate-y-1/2 text-(--f-form-field-placeholder-color) hover:text-(--f-text-hover-color) cursor-pointer focus:outline-none focus-visible:ring-focus rounded-sm"
           [attr.aria-label]="show() ? 'Hide password' : 'Show password'"
           [attr.aria-pressed]="show()"
           (click)="toggleShow()"
@@ -6286,7 +6371,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
         [id]="inputId()"
         [placeholder]="placeholder()"
         [value]="value()"
-        [disabled]="disabled()"
+        [disabled]="isDisabled()"
         [attr.aria-invalid]="invalid() && touched() ? 'true' : null"
         [attr.aria-describedby]="ariaDescribedby() || null"
         [attr.autocomplete]="autocomplete() || null"
@@ -6297,7 +6382,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
       @if (toggleMask()) {
         <button
           type="button"
-          class="inline-flex items-center absolute right-3 top-1/2 -translate-y-1/2 text-(--f-form-field-placeholder-color) hover:text-(--f-text-hover-color) cursor-pointer focus:outline-none focus-visible:ring-focus rounded-sm"
+          class="inline-flex items-center absolute right-(--f-field-padding-x) top-1/2 -translate-y-1/2 text-(--f-form-field-placeholder-color) hover:text-(--f-text-hover-color) cursor-pointer focus:outline-none focus-visible:ring-focus rounded-sm"
           [attr.aria-label]="show() ? 'Hide password' : 'Show password'"
           [attr.aria-pressed]="show()"
           (click)="toggleShow()"
@@ -6318,7 +6403,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
     }
   `,
                 }]
-        }], propDecorators: { toggleMask: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleMask", required: false }] }], feedback: [{ type: i0.Input, args: [{ isSignal: true, alias: "feedback", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], inputStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputStyleClass", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fluid: [{ type: i0.Input, args: [{ isSignal: true, alias: "fluid", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], promptLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "promptLabel", required: false }] }], weakLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "weakLabel", required: false }] }], mediumLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "mediumLabel", required: false }] }], strongLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "strongLabel", required: false }] }], mediumRegex: [{ type: i0.Input, args: [{ isSignal: true, alias: "mediumRegex", required: false }] }], strongRegex: [{ type: i0.Input, args: [{ isSignal: true, alias: "strongRegex", required: false }] }], onBlur: [{ type: i0.Output, args: ["onBlur"] }], onFocus: [{ type: i0.Output, args: ["onFocus"] }] } });
+        }], ctorParameters: () => [], propDecorators: { toggleMask: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleMask", required: false }] }], feedback: [{ type: i0.Input, args: [{ isSignal: true, alias: "feedback", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], inputStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputStyleClass", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fluid: [{ type: i0.Input, args: [{ isSignal: true, alias: "fluid", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], promptLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "promptLabel", required: false }] }], weakLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "weakLabel", required: false }] }], mediumLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "mediumLabel", required: false }] }], strongLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "strongLabel", required: false }] }], mediumRegex: [{ type: i0.Input, args: [{ isSignal: true, alias: "mediumRegex", required: false }] }], strongRegex: [{ type: i0.Input, args: [{ isSignal: true, alias: "strongRegex", required: false }] }], onBlur: [{ type: i0.Output, args: ["onBlur"] }], onFocus: [{ type: i0.Output, args: ["onFocus"] }] } });
 
 class InputNumberComponent {
     mode = input('decimal', /* @ts-ignore */
@@ -6383,6 +6468,9 @@ class InputNumberComponent {
     ...(ngDevMode ? [{ debugName: "_formDisabled" }] : /* istanbul ignore next */ []));
     isDisabled = computed(() => this.disabled() || this._formDisabled(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    constructor() {
+        blockClicksWhileDisabled(this.isDisabled);
+    }
     numberFormat = computed(() => {
         const options = {
             style: this.mode(),
@@ -6696,7 +6784,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
     </div>
   `,
                 }]
-        }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], currencyDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencyDisplay", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], showButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showButtons", required: false }] }], buttonLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonLayout", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], useGrouping: [{ type: i0.Input, args: [{ isSignal: true, alias: "useGrouping", required: false }] }], minFractionDigits: [{ type: i0.Input, args: [{ isSignal: true, alias: "minFractionDigits", required: false }] }], maxFractionDigits: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFractionDigits", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], inputStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputStyleClass", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], onInputEvent: [{ type: i0.Output, args: ["onInput"] }], onFocus: [{ type: i0.Output, args: ["onFocus"] }], onBlur: [{ type: i0.Output, args: ["onBlur"] }], onKeyDown: [{ type: i0.Output, args: ["onKeyDown"] }] } });
+        }], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], currencyDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencyDisplay", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], showButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showButtons", required: false }] }], buttonLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonLayout", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], useGrouping: [{ type: i0.Input, args: [{ isSignal: true, alias: "useGrouping", required: false }] }], minFractionDigits: [{ type: i0.Input, args: [{ isSignal: true, alias: "minFractionDigits", required: false }] }], maxFractionDigits: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFractionDigits", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], inputStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputStyleClass", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], onInputEvent: [{ type: i0.Output, args: ["onInput"] }], onFocus: [{ type: i0.Output, args: ["onFocus"] }], onBlur: [{ type: i0.Output, args: ["onBlur"] }], onKeyDown: [{ type: i0.Output, args: ["onKeyDown"] }] } });
 
 class RadioButtonComponent {
     name = input('', /* @ts-ignore */
@@ -6706,6 +6794,13 @@ class RadioButtonComponent {
     label = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    _formDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_formDisabled" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this._formDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    constructor() {
+        blockClicksWhileDisabled(this.isDisabled);
+    }
     readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     inputId = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
@@ -6762,10 +6857,10 @@ class RadioButtonComponent {
     writeValue(v) { this._modelValue.set(v); }
     registerOnChange(fn) { this._onChange = fn; }
     registerOnTouched(fn) { this._onTouched = fn; }
-    setDisabledState() { }
+    setDisabledState(isDisabled) { this._formDisabled.set(isDisabled); }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: RadioButtonComponent, isStandalone: true, selector: "f-radiobutton", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", 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 }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", 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: { onClick: "onClick", onBlur: "onBlur" }, host: { properties: { "class": "hostClass()", "style": "style()" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RadioButtonComponent), multi: true }], ngImport: i0, template: `
-    <label class="inline-flex items-center gap-2 cursor-pointer select-none" [class.opacity-60]="disabled()" [class.pointer-events-none]="disabled()">
+    <label class="inline-flex items-center gap-2 cursor-pointer select-none" [class.opacity-60]="isDisabled()" [class.pointer-events-none]="isDisabled()">
       <div class="relative">
         <input type="radio"
           class="sr-only peer"
@@ -6773,7 +6868,7 @@ class RadioButtonComponent {
           [name]="name()"
           [value]="value()"
           [checked]="isChecked()"
-          [disabled]="disabled()"
+          [disabled]="isDisabled()"
           [attr.aria-checked]="isChecked()"
           [attr.aria-readonly]="readonly() || null"
           (click)="onInputClick($event)"
@@ -6797,7 +6892,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                     providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RadioButtonComponent), multi: true }],
                     host: { '[class]': 'hostClass()', '[style]': 'style()' },
                     template: `
-    <label class="inline-flex items-center gap-2 cursor-pointer select-none" [class.opacity-60]="disabled()" [class.pointer-events-none]="disabled()">
+    <label class="inline-flex items-center gap-2 cursor-pointer select-none" [class.opacity-60]="isDisabled()" [class.pointer-events-none]="isDisabled()">
       <div class="relative">
         <input type="radio"
           class="sr-only peer"
@@ -6805,7 +6900,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
           [name]="name()"
           [value]="value()"
           [checked]="isChecked()"
-          [disabled]="disabled()"
+          [disabled]="isDisabled()"
           [attr.aria-checked]="isChecked()"
           [attr.aria-readonly]="readonly() || null"
           (click)="onInputClick($event)"
@@ -6822,13 +6917,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
     </label>
   `,
                 }]
-        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], onClick: [{ type: i0.Output, args: ["onClick"] }], onBlur: [{ type: i0.Output, args: ["onBlur"] }] } });
+        }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], onClick: [{ type: i0.Output, args: ["onClick"] }], onBlur: [{ type: i0.Output, args: ["onBlur"] }] } });
 
 class RatingComponent {
     stars = input(5, { ...(ngDevMode ? { debugName: "stars" } : /* istanbul ignore next */ {}), transform: numberAttribute });
     cancel = input(true, { ...(ngDevMode ? { debugName: "cancel" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    _formDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_formDisabled" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this._formDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    constructor() {
+        blockClicksWhileDisabled(this.isDisabled);
+    }
     invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     iconOn = input('star-fill', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "iconOn" }] : /* istanbul ignore next */ []));
@@ -6855,12 +6957,12 @@ class RatingComponent {
     _onChange = () => { };
     _onTouched = () => { };
     onHover(v) {
-        if (this.readonly() || this.disabled())
+        if (this.readonly() || this.isDisabled())
             return;
         this._hovered.set(v);
     }
     applyValue(v) {
-        if (this.readonly() || this.disabled())
+        if (this.readonly() || this.isDisabled())
             return;
         const clamped = Math.min(this.stars(), Math.max(0, v));
         this._value.set(clamped);
@@ -6869,12 +6971,12 @@ class RatingComponent {
         this.onRate.emit({ value: clamped });
     }
     setValue(v) {
-        if (this.readonly() || this.disabled())
+        if (this.readonly() || this.isDisabled())
             return;
         this.applyValue(this.cancel() && v === this.value() ? 0 : v);
     }
     onKeydown(e) {
-        if (this.readonly() || this.disabled())
+        if (this.readonly() || this.isDisabled())
             return;
         switch (e.key) {
             case 'ArrowRight':
@@ -6900,20 +7002,20 @@ class RatingComponent {
     writeValue(v) { this._value.set(v ?? 0); }
     registerOnChange(fn) { this._onChange = fn; }
     registerOnTouched(fn) { this._onTouched = fn; }
-    setDisabledState() { }
+    setDisabledState(isDisabled) { this._formDisabled.set(isDisabled); }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: RatingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: RatingComponent, isStandalone: true, selector: "f-rating", inputs: { stars: { classPropertyName: "stars", publicName: "stars", isSignal: true, isRequired: false, transformFunction: null }, cancel: { classPropertyName: "cancel", publicName: "cancel", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, iconOn: { classPropertyName: "iconOn", publicName: "iconOn", isSignal: true, isRequired: false, transformFunction: null }, iconOff: { classPropertyName: "iconOff", publicName: "iconOff", isSignal: true, isRequired: false, transformFunction: null }, cancelIcon: { classPropertyName: "cancelIcon", publicName: "cancelIcon", 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: { onRate: "onRate", onBlur: "onBlur" }, host: { properties: { "class": "hostClass()", "style": "style()" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RatingComponent), multi: true }], ngImport: i0, template: `
     <div
       class="inline-flex items-center gap-1"
       role="radiogroup"
       [class.pointer-events-none]="readonly()"
-      [class.opacity-60]="disabled()"
-      [attr.aria-disabled]="disabled() || null"
+      [class.opacity-60]="isDisabled()"
+      [attr.aria-disabled]="isDisabled() || null"
       [attr.aria-readonly]="readonly() || null"
       (keydown)="onKeydown($event)"
     >
       @if (cancel()) {
-        <button type="button" class="text-(--f-text-muted-color) hover:text-red-500 cursor-pointer disabled:cursor-default disabled:pointer-events-none disabled:opacity-50" [disabled]="disabled()" [attr.aria-label]="'Clear rating'" (click)="applyValue(0)">
+        <button type="button" class="text-(--f-text-muted-color) hover:text-red-500 cursor-pointer disabled:cursor-default disabled:pointer-events-none disabled:opacity-50" [disabled]="isDisabled()" [attr.aria-label]="'Clear rating'" (click)="applyValue(0)">
           <ui-icon [name]="cancelIcon()"></ui-icon>
         </button>
       }
@@ -6925,7 +7027,7 @@ class RatingComponent {
           [class.text-yellow-400]="star <= (hovered() || value())"
           [class.text-(--f-content-border-color)]="star > (hovered() || value())"
           [class.drop-shadow-sm]="star <= (hovered() || value())"
-          [disabled]="disabled()"
+          [disabled]="isDisabled()"
           [attr.aria-checked]="star <= value()"
           [attr.aria-label]="'Rate as ' + star"
           [attr.aria-invalid]="invalid() ? 'true' : null"
@@ -6949,13 +7051,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
       class="inline-flex items-center gap-1"
       role="radiogroup"
       [class.pointer-events-none]="readonly()"
-      [class.opacity-60]="disabled()"
-      [attr.aria-disabled]="disabled() || null"
+      [class.opacity-60]="isDisabled()"
+      [attr.aria-disabled]="isDisabled() || null"
       [attr.aria-readonly]="readonly() || null"
       (keydown)="onKeydown($event)"
     >
       @if (cancel()) {
-        <button type="button" class="text-(--f-text-muted-color) hover:text-red-500 cursor-pointer disabled:cursor-default disabled:pointer-events-none disabled:opacity-50" [disabled]="disabled()" [attr.aria-label]="'Clear rating'" (click)="applyValue(0)">
+        <button type="button" class="text-(--f-text-muted-color) hover:text-red-500 cursor-pointer disabled:cursor-default disabled:pointer-events-none disabled:opacity-50" [disabled]="isDisabled()" [attr.aria-label]="'Clear rating'" (click)="applyValue(0)">
           <ui-icon [name]="cancelIcon()"></ui-icon>
         </button>
       }
@@ -6967,7 +7069,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
           [class.text-yellow-400]="star <= (hovered() || value())"
           [class.text-(--f-content-border-color)]="star > (hovered() || value())"
           [class.drop-shadow-sm]="star <= (hovered() || value())"
-          [disabled]="disabled()"
+          [disabled]="isDisabled()"
           [attr.aria-checked]="star <= value()"
           [attr.aria-label]="'Rate as ' + star"
           [attr.aria-invalid]="invalid() ? 'true' : null"
@@ -6979,7 +7081,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
     </div>
   `,
                 }]
-        }], propDecorators: { stars: [{ type: i0.Input, args: [{ isSignal: true, alias: "stars", required: false }] }], cancel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancel", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], iconOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOn", required: false }] }], iconOff: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOff", required: false }] }], cancelIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelIcon", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], onRate: [{ type: i0.Output, args: ["onRate"] }], onBlur: [{ type: i0.Output, args: ["onBlur"] }] } });
+        }], ctorParameters: () => [], propDecorators: { stars: [{ type: i0.Input, args: [{ isSignal: true, alias: "stars", required: false }] }], cancel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancel", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], iconOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOn", required: false }] }], iconOff: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOff", required: false }] }], cancelIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelIcon", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], onRate: [{ type: i0.Output, args: ["onRate"] }], onBlur: [{ type: i0.Output, args: ["onBlur"] }] } });
 
 class InputIconComponent {
     _iconField = inject(IconFieldComponent, { optional: true });
@@ -7391,6 +7493,10 @@ class DatePickerComponent {
     dateFormat = input('mm/dd/yy', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dateFormat" }] : /* istanbul ignore next */ []));
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    _formDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_formDisabled" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this._formDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
     readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     readonlyInput = input(true, { ...(ngDevMode ? { debugName: "readonlyInput" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     showTime = input(false, { ...(ngDevMode ? { debugName: "showTime" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -7588,7 +7694,7 @@ class DatePickerComponent {
             : 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()
+        const disabledClass = this.isDisabled()
             ? 'opacity-60 cursor-not-allowed'
             : '';
         return `flex items-center border f-field-shape overflow-hidden bg-(--f-form-field-background) focus-within:ring-focus transition-all duration-[var(--f-transition-duration)] ${stateClass} ${disabledClass}`;
@@ -7622,6 +7728,7 @@ class DatePickerComponent {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "nextAriaLabel" }] : /* istanbul ignore next */ []));
     constructor() {
+        blockClicksWhileDisabled(this.isDisabled);
         effect(() => {
             const isOpen = this.open();
             if (isOpen === this._wasOpen)
@@ -7819,7 +7926,7 @@ class DatePickerComponent {
         }
     }
     onInputKeyDown(event) {
-        if (this.disabled() || this.readonly())
+        if (this.isDisabled() || this.readonly())
             return;
         switch (event.key) {
             case 'ArrowDown':
@@ -7837,7 +7944,7 @@ class DatePickerComponent {
         }
     }
     onInputChange(text) {
-        if (this.readonlyInput() || this.disabled() || this.readonly())
+        if (this.readonlyInput() || this.isDisabled() || this.readonly())
             return;
         if (!text) {
             this.commitValue(null);
@@ -7848,7 +7955,7 @@ class DatePickerComponent {
             this.selectDate(parsed);
     }
     toggleCalendar(event) {
-        if (this.disabled() || this.readonly())
+        if (this.isDisabled() || this.readonly())
             return;
         if (this.appendTo() === 'body')
             this.popoverRef()?.toggle(event);
@@ -8118,7 +8225,7 @@ class DatePickerComponent {
     registerOnTouched(fn) {
         this._onTouched = fn;
     }
-    setDisabledState() { }
+    setDisabledState(isDisabled) { this._formDisabled.set(isDisabled); }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: DatePickerComponent, isStandalone: true, selector: "f-datepicker", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, readonlyInput: { classPropertyName: "readonlyInput", publicName: "readonlyInput", isSignal: true, isRequired: false, transformFunction: null }, showTime: { classPropertyName: "showTime", publicName: "showTime", isSignal: true, isRequired: false, transformFunction: null }, timeOnly: { classPropertyName: "timeOnly", publicName: "timeOnly", isSignal: true, isRequired: false, transformFunction: null }, hourFormat: { classPropertyName: "hourFormat", publicName: "hourFormat", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, disabledDays: { classPropertyName: "disabledDays", publicName: "disabledDays", 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 }, inputStyleClass: { classPropertyName: "inputStyleClass", publicName: "inputStyleClass", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, iconDisplay: { classPropertyName: "iconDisplay", publicName: "iconDisplay", isSignal: true, isRequired: false, transformFunction: null }, showButtonBar: { classPropertyName: "showButtonBar", publicName: "showButtonBar", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, numberOfMonths: { classPropertyName: "numberOfMonths", publicName: "numberOfMonths", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, showOtherMonths: { classPropertyName: "showOtherMonths", publicName: "showOtherMonths", isSignal: true, isRequired: false, transformFunction: null }, selectOtherMonths: { classPropertyName: "selectOtherMonths", publicName: "selectOtherMonths", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", 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: { onBlur: "onBlur", onSelect: "onSelect", onShow: "onShow", onHide: "onHide", onClearClick: "onClearClick", onTodayClick: "onTodayClick", onMonthChange: "onMonthChange", onYearChange: "onYearChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "hostClass()", "style": "style()" } }, providers: [
             {
@@ -8147,7 +8254,7 @@ class DatePickerComponent {
             [class]="inputClass()"
             [id]="inputId()"
             [readOnly]="readonlyInput()"
-            [disabled]="disabled()"
+            [disabled]="isDisabled()"
             [value]="displayValue()"
             [placeholder]="placeholder()"
             [attr.aria-invalid]="invalid() ? true : null"
@@ -8156,7 +8263,7 @@ class DatePickerComponent {
             (keydown)="onInputKeyDown($event)"
             (change)="onInputChange($any($event.target).value)"
           />
-          @if (showClear() && hasValue() && !disabled() && !readonly()) {
+          @if (showClear() && hasValue() && !isDisabled() && !readonly()) {
             <button
               type="button"
               class="inline-flex items-center justify-center px-1 text-(--f-form-field-placeholder-color) hover:text-(--f-text-color) cursor-pointer"
@@ -8538,7 +8645,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
             [class]="inputClass()"
             [id]="inputId()"
             [readOnly]="readonlyInput()"
-            [disabled]="disabled()"
+            [disabled]="isDisabled()"
             [value]="displayValue()"
             [placeholder]="placeholder()"
             [attr.aria-invalid]="invalid() ? true : null"
@@ -8547,7 +8654,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
             (keydown)="onInputKeyDown($event)"
             (change)="onInputChange($any($event.target).value)"
           />
-          @if (showClear() && hasValue() && !disabled() && !readonly()) {
+          @if (showClear() && hasValue() && !isDisabled() && !readonly()) {
             <button
               type="button"
               class="inline-flex items-center justify-center px-1 text-(--f-form-field-placeholder-color) hover:text-(--f-text-color) cursor-pointer"
@@ -8905,6 +9012,9 @@ class FileUploadComponent {
     fileLimit = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "fileLimit" }] : /* istanbul ignore next */ []));
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    constructor() {
+        blockClicksWhileDisabled(this.disabled);
+    }
     url = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "url" }] : /* istanbul ignore next */ []));
     headers = input(null, /* @ts-ignore */
@@ -8918,6 +9028,27 @@ class FileUploadComponent {
     ...(ngDevMode ? [{ debugName: "uploadLabel" }] : /* istanbul ignore next */ []));
     cancelLabel = input('Cancel', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "cancelLabel" }] : /* istanbul ignore next */ []));
+    removeLabel = input('Remove', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "removeLabel" }] : /* istanbul ignore next */ []));
+    dragDropLabel = input('Drag & drop files here', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragDropLabel" }] : /* istanbul ignore next */ []));
+    dragDropHintLabel = input('or use the choose button above', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragDropHintLabel" }] : /* istanbul ignore next */ []));
+    contentRef = contentChild('content', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentRef" }] : /* istanbul ignore next */ []));
+    fTemplates = contentChildren(FTemplateDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fTemplates" }] : /* istanbul ignore next */ []));
+    contentTpl = computed(() => this.contentRef() ?? this.fTemplates().find(t => t.fTemplate() === 'content')?.templateRef ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentTpl" }] : /* istanbul ignore next */ []));
+    contentContext = computed(() => ({
+        $implicit: this.files(),
+        files: this.files(),
+        items: this.items(),
+        disabled: this.disabled(),
+        removeFile: (file) => this.removeFile(file),
+        clear: () => this.clear(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentContext" }] : /* istanbul ignore next */ []));
     chooseIcon = input('upload', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "chooseIcon" }] : /* istanbul ignore next */ []));
     uploadIcon = input('upload', /* @ts-ignore */
@@ -9149,7 +9280,7 @@ class FileUploadComponent {
         this.revokeItemUrls(this._items());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: FileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: FileUploadComponent, isStandalone: true, selector: "f-fileupload", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, auto: { classPropertyName: "auto", publicName: "auto", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, fileLimit: { classPropertyName: "fileLimit", publicName: "fileLimit", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, headers: { classPropertyName: "headers", publicName: "headers", isSignal: true, isRequired: false, transformFunction: null }, customUpload: { classPropertyName: "customUpload", publicName: "customUpload", isSignal: true, isRequired: false, transformFunction: null }, showUploadButton: { classPropertyName: "showUploadButton", publicName: "showUploadButton", isSignal: true, isRequired: false, transformFunction: null }, showCancelButton: { classPropertyName: "showCancelButton", publicName: "showCancelButton", isSignal: true, isRequired: false, transformFunction: null }, chooseLabel: { classPropertyName: "chooseLabel", publicName: "chooseLabel", isSignal: true, isRequired: false, transformFunction: null }, uploadLabel: { classPropertyName: "uploadLabel", publicName: "uploadLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, chooseIcon: { classPropertyName: "chooseIcon", publicName: "chooseIcon", isSignal: true, isRequired: false, transformFunction: null }, uploadIcon: { classPropertyName: "uploadIcon", publicName: "uploadIcon", isSignal: true, isRequired: false, transformFunction: null }, cancelIcon: { classPropertyName: "cancelIcon", publicName: "cancelIcon", isSignal: true, isRequired: false, transformFunction: null }, previewWidth: { classPropertyName: "previewWidth", publicName: "previewWidth", 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 }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect", onRemove: "onRemove", onClear: "onClear", onError: "onError", onUpload: "onUpload", onProgress: "onProgress", uploadHandler: "uploadHandler" }, host: { properties: { "class": "hostClass()", "style": "style()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: FileUploadComponent, isStandalone: true, selector: "f-fileupload", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, auto: { classPropertyName: "auto", publicName: "auto", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, fileLimit: { classPropertyName: "fileLimit", publicName: "fileLimit", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, headers: { classPropertyName: "headers", publicName: "headers", isSignal: true, isRequired: false, transformFunction: null }, customUpload: { classPropertyName: "customUpload", publicName: "customUpload", isSignal: true, isRequired: false, transformFunction: null }, showUploadButton: { classPropertyName: "showUploadButton", publicName: "showUploadButton", isSignal: true, isRequired: false, transformFunction: null }, showCancelButton: { classPropertyName: "showCancelButton", publicName: "showCancelButton", isSignal: true, isRequired: false, transformFunction: null }, chooseLabel: { classPropertyName: "chooseLabel", publicName: "chooseLabel", isSignal: true, isRequired: false, transformFunction: null }, uploadLabel: { classPropertyName: "uploadLabel", publicName: "uploadLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null }, dragDropLabel: { classPropertyName: "dragDropLabel", publicName: "dragDropLabel", isSignal: true, isRequired: false, transformFunction: null }, dragDropHintLabel: { classPropertyName: "dragDropHintLabel", publicName: "dragDropHintLabel", isSignal: true, isRequired: false, transformFunction: null }, chooseIcon: { classPropertyName: "chooseIcon", publicName: "chooseIcon", isSignal: true, isRequired: false, transformFunction: null }, uploadIcon: { classPropertyName: "uploadIcon", publicName: "uploadIcon", isSignal: true, isRequired: false, transformFunction: null }, cancelIcon: { classPropertyName: "cancelIcon", publicName: "cancelIcon", isSignal: true, isRequired: false, transformFunction: null }, previewWidth: { classPropertyName: "previewWidth", publicName: "previewWidth", 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 }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect", onRemove: "onRemove", onClear: "onClear", onError: "onError", onUpload: "onUpload", onProgress: "onProgress", uploadHandler: "uploadHandler" }, host: { properties: { "class": "hostClass()", "style": "style()" } }, queries: [{ propertyName: "contentRef", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "fTemplates", predicate: FTemplateDirective, isSignal: true }], ngImport: i0, template: `
     @if (mode() === 'advanced') {
       <div class="flex flex-wrap items-center gap-2 mb-3">
         <f-button
@@ -9185,64 +9316,77 @@ class FileUploadComponent {
         />
       </div>
 
-      <div
-        class="border-2 border-dashed rounded-lg p-8 text-center transition-colors"
-        [class]="isDragging() ? 'border-primary bg-primary/5' : 'border-(--f-content-border-color) hover:border-primary/60 hover:bg-(--f-content-hover-background)'"
-        [class.opacity-50]="disabled()"
-        [class.pointer-events-none]="disabled()"
-        [attr.aria-disabled]="disabled() ? 'true' : null"
-        (dragover)="onDragOver($event)"
-        (dragleave)="onDragLeave()"
-        (drop)="onDrop($event)"
-      >
-        <div class="flex flex-col items-center gap-2">
-          <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center">
-            <ui-icon [name]="chooseIcon()" class="text-primary text-xl"></ui-icon>
-          </div>
-          <div>
-            <p class="text-sm font-medium text-(--f-text-color)">Drag &amp; drop files here</p>
-            <p class="text-xs text-(--f-text-muted-color) mt-0.5">or use the choose button above</p>
+      @if (contentTpl(); as tpl) {
+        <div
+          [class.opacity-50]="disabled()"
+          [attr.aria-disabled]="disabled() ? 'true' : null"
+          (dragover)="onDragOver($event)"
+          (dragleave)="onDragLeave()"
+          (drop)="onDrop($event)"
+        >
+          <ng-container [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="contentContext()" />
+        </div>
+      } @else {
+        <div
+          class="border-2 border-dashed rounded-lg p-8 text-center transition-colors"
+          [class]="isDragging() ? 'border-primary bg-primary/5' : 'border-(--f-content-border-color) hover:border-primary/60 hover:bg-(--f-content-hover-background)'"
+          [class.opacity-50]="disabled()"
+          [class.pointer-events-none]="disabled()"
+          [attr.aria-disabled]="disabled() ? 'true' : null"
+          (dragover)="onDragOver($event)"
+          (dragleave)="onDragLeave()"
+          (drop)="onDrop($event)"
+        >
+          <div class="flex flex-col items-center gap-2">
+            <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center">
+              <ui-icon [name]="chooseIcon()" class="text-primary text-xl"></ui-icon>
+            </div>
+            <div>
+              <p class="text-sm font-medium text-(--f-text-color)">{{ dragDropLabel() }}</p>
+              <p class="text-xs text-(--f-text-muted-color) mt-0.5">{{ dragDropHintLabel() }}</p>
+            </div>
           </div>
         </div>
-      </div>
 
-      @if (items().length) {
-        <div class="mt-5 space-y-1.5 text-left">
-          @for (item of items(); track item.file) {
-            <div class="flex items-center gap-3 py-2 px-3 bg-(--f-content-hover-background) border border-(--f-content-border-color) rounded-lg">
-              @if (item.objectUrl) {
-                <img [src]="item.objectUrl" [alt]="item.file.name" [style.width.px]="previewWidth()" [style.height.px]="previewWidth()" class="rounded-md object-cover shrink-0" />
-              } @else {
-                <ui-icon name="file" class="text-(--f-text-muted-color) shrink-0 text-lg"></ui-icon>
-              }
-              <div class="flex-1 min-w-0">
-                <div class="flex items-center gap-2">
-                  <span class="flex-1 truncate text-sm text-(--f-text-color)">{{ item.file.name }}</span>
-                  <span class="text-xs text-(--f-text-muted-color) shrink-0">{{ formatSize(item.file.size) }}</span>
+        @if (items().length) {
+          <div class="mt-5 space-y-1.5 text-left">
+            @for (item of items(); track item.file) {
+              <div class="flex items-center gap-3 py-2 px-3 bg-(--f-content-hover-background) border border-(--f-content-border-color) rounded-lg">
+                @if (item.objectUrl) {
+                  <img [src]="item.objectUrl" [alt]="item.file.name" [style.width.px]="previewWidth()" [style.height.px]="previewWidth()" class="rounded-md object-cover shrink-0" />
+                } @else {
+                  <ui-icon name="file" class="text-(--f-text-muted-color) shrink-0 text-lg"></ui-icon>
+                }
+                <div class="flex-1 min-w-0">
+                  <div class="flex items-center gap-2">
+                    <span class="flex-1 truncate text-sm text-(--f-text-color)">{{ item.file.name }}</span>
+                    <span class="text-xs text-(--f-text-muted-color) shrink-0">{{ formatSize(item.file.size) }}</span>
+                  </div>
+                  @if (item.status === 'uploading' || item.status === 'done') {
+                    <f-progressbar
+                      [value]="item.progress"
+                      [showValue]="false"
+                      [severity]="item.status === 'done' ? 'success' : null"
+                      styleClass="mt-1"
+                    ></f-progressbar>
+                  }
                 </div>
-                @if (item.status === 'uploading' || item.status === 'done') {
-                  <f-progressbar
-                    [value]="item.progress"
-                    [showValue]="false"
-                    [severity]="item.status === 'done' ? 'success' : null"
-                    styleClass="mt-1"
-                  ></f-progressbar>
+                @if (item.status === 'done') {
+                  <ui-icon name="check-circle" class="text-green-500 shrink-0 text-sm"></ui-icon>
+                } @else if (item.status === 'error') {
+                  <ui-icon name="exclamation-circle" class="text-red-500 shrink-0 text-sm"></ui-icon>
                 }
+                <button type="button"
+                  class="inline-flex items-center justify-center text-(--f-text-muted-color) hover:text-red-500 transition-colors shrink-0 cursor-pointer disabled:opacity-50 disabled:pointer-events-none"
+                  [disabled]="disabled() || item.status === 'uploading'"
+                  [attr.aria-label]="removeLabel()"
+                  (click)="removeFile(item.file)">
+                  <ui-icon name="times" class="text-xs"></ui-icon>
+                </button>
               </div>
-              @if (item.status === 'done') {
-                <ui-icon name="check-circle" class="text-green-500 shrink-0 text-sm"></ui-icon>
-              } @else if (item.status === 'error') {
-                <ui-icon name="exclamation-circle" class="text-red-500 shrink-0 text-sm"></ui-icon>
-              }
-              <button type="button"
-                class="inline-flex items-center justify-center text-(--f-text-muted-color) hover:text-red-500 transition-colors shrink-0 cursor-pointer disabled:opacity-50 disabled:pointer-events-none"
-                [disabled]="item.status === 'uploading'"
-                (click)="removeFile(item.file)">
-                <ui-icon name="times" class="text-xs"></ui-icon>
-              </button>
-            </div>
-          }
-        </div>
+            }
+          </div>
+        }
       }
     } @else {
       <div class="flex items-center gap-3">
@@ -9264,13 +9408,13 @@ class FileUploadComponent {
         }
       </div>
     }
-  `, isInline: true, 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"] }, { kind: "component", type: ProgressbarComponent, selector: "f-progressbar", inputs: ["value", "mode", "showValue", "unit", "severity", "color", "styleClass"] }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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"] }, { kind: "component", type: ProgressbarComponent, selector: "f-progressbar", inputs: ["value", "mode", "showValue", "unit", "severity", "color", "styleClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: FileUploadComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'f-fileupload',
-                    imports: [UiIconComponent, ButtonComponent, ProgressbarComponent],
+                    imports: [NgTemplateOutlet, UiIconComponent, ButtonComponent, ProgressbarComponent],
                     host: { '[class]': 'hostClass()', '[style]': 'style()' },
                     template: `
     @if (mode() === 'advanced') {
@@ -9308,64 +9452,77 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
         />
       </div>
 
-      <div
-        class="border-2 border-dashed rounded-lg p-8 text-center transition-colors"
-        [class]="isDragging() ? 'border-primary bg-primary/5' : 'border-(--f-content-border-color) hover:border-primary/60 hover:bg-(--f-content-hover-background)'"
-        [class.opacity-50]="disabled()"
-        [class.pointer-events-none]="disabled()"
-        [attr.aria-disabled]="disabled() ? 'true' : null"
-        (dragover)="onDragOver($event)"
-        (dragleave)="onDragLeave()"
-        (drop)="onDrop($event)"
-      >
-        <div class="flex flex-col items-center gap-2">
-          <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center">
-            <ui-icon [name]="chooseIcon()" class="text-primary text-xl"></ui-icon>
-          </div>
-          <div>
-            <p class="text-sm font-medium text-(--f-text-color)">Drag &amp; drop files here</p>
-            <p class="text-xs text-(--f-text-muted-color) mt-0.5">or use the choose button above</p>
+      @if (contentTpl(); as tpl) {
+        <div
+          [class.opacity-50]="disabled()"
+          [attr.aria-disabled]="disabled() ? 'true' : null"
+          (dragover)="onDragOver($event)"
+          (dragleave)="onDragLeave()"
+          (drop)="onDrop($event)"
+        >
+          <ng-container [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="contentContext()" />
+        </div>
+      } @else {
+        <div
+          class="border-2 border-dashed rounded-lg p-8 text-center transition-colors"
+          [class]="isDragging() ? 'border-primary bg-primary/5' : 'border-(--f-content-border-color) hover:border-primary/60 hover:bg-(--f-content-hover-background)'"
+          [class.opacity-50]="disabled()"
+          [class.pointer-events-none]="disabled()"
+          [attr.aria-disabled]="disabled() ? 'true' : null"
+          (dragover)="onDragOver($event)"
+          (dragleave)="onDragLeave()"
+          (drop)="onDrop($event)"
+        >
+          <div class="flex flex-col items-center gap-2">
+            <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center">
+              <ui-icon [name]="chooseIcon()" class="text-primary text-xl"></ui-icon>
+            </div>
+            <div>
+              <p class="text-sm font-medium text-(--f-text-color)">{{ dragDropLabel() }}</p>
+              <p class="text-xs text-(--f-text-muted-color) mt-0.5">{{ dragDropHintLabel() }}</p>
+            </div>
           </div>
         </div>
-      </div>
 
-      @if (items().length) {
-        <div class="mt-5 space-y-1.5 text-left">
-          @for (item of items(); track item.file) {
-            <div class="flex items-center gap-3 py-2 px-3 bg-(--f-content-hover-background) border border-(--f-content-border-color) rounded-lg">
-              @if (item.objectUrl) {
-                <img [src]="item.objectUrl" [alt]="item.file.name" [style.width.px]="previewWidth()" [style.height.px]="previewWidth()" class="rounded-md object-cover shrink-0" />
-              } @else {
-                <ui-icon name="file" class="text-(--f-text-muted-color) shrink-0 text-lg"></ui-icon>
-              }
-              <div class="flex-1 min-w-0">
-                <div class="flex items-center gap-2">
-                  <span class="flex-1 truncate text-sm text-(--f-text-color)">{{ item.file.name }}</span>
-                  <span class="text-xs text-(--f-text-muted-color) shrink-0">{{ formatSize(item.file.size) }}</span>
+        @if (items().length) {
+          <div class="mt-5 space-y-1.5 text-left">
+            @for (item of items(); track item.file) {
+              <div class="flex items-center gap-3 py-2 px-3 bg-(--f-content-hover-background) border border-(--f-content-border-color) rounded-lg">
+                @if (item.objectUrl) {
+                  <img [src]="item.objectUrl" [alt]="item.file.name" [style.width.px]="previewWidth()" [style.height.px]="previewWidth()" class="rounded-md object-cover shrink-0" />
+                } @else {
+                  <ui-icon name="file" class="text-(--f-text-muted-color) shrink-0 text-lg"></ui-icon>
+                }
+                <div class="flex-1 min-w-0">
+                  <div class="flex items-center gap-2">
+                    <span class="flex-1 truncate text-sm text-(--f-text-color)">{{ item.file.name }}</span>
+                    <span class="text-xs text-(--f-text-muted-color) shrink-0">{{ formatSize(item.file.size) }}</span>
+                  </div>
+                  @if (item.status === 'uploading' || item.status === 'done') {
+                    <f-progressbar
+                      [value]="item.progress"
+                      [showValue]="false"
+                      [severity]="item.status === 'done' ? 'success' : null"
+                      styleClass="mt-1"
+                    ></f-progressbar>
+                  }
                 </div>
-                @if (item.status === 'uploading' || item.status === 'done') {
-                  <f-progressbar
-                    [value]="item.progress"
-                    [showValue]="false"
-                    [severity]="item.status === 'done' ? 'success' : null"
-                    styleClass="mt-1"
-                  ></f-progressbar>
+                @if (item.status === 'done') {
+                  <ui-icon name="check-circle" class="text-green-500 shrink-0 text-sm"></ui-icon>
+                } @else if (item.status === 'error') {
+                  <ui-icon name="exclamation-circle" class="text-red-500 shrink-0 text-sm"></ui-icon>
                 }
+                <button type="button"
+                  class="inline-flex items-center justify-center text-(--f-text-muted-color) hover:text-red-500 transition-colors shrink-0 cursor-pointer disabled:opacity-50 disabled:pointer-events-none"
+                  [disabled]="disabled() || item.status === 'uploading'"
+                  [attr.aria-label]="removeLabel()"
+                  (click)="removeFile(item.file)">
+                  <ui-icon name="times" class="text-xs"></ui-icon>
+                </button>
               </div>
-              @if (item.status === 'done') {
-                <ui-icon name="check-circle" class="text-green-500 shrink-0 text-sm"></ui-icon>
-              } @else if (item.status === 'error') {
-                <ui-icon name="exclamation-circle" class="text-red-500 shrink-0 text-sm"></ui-icon>
-              }
-              <button type="button"
-                class="inline-flex items-center justify-center text-(--f-text-muted-color) hover:text-red-500 transition-colors shrink-0 cursor-pointer disabled:opacity-50 disabled:pointer-events-none"
-                [disabled]="item.status === 'uploading'"
-                (click)="removeFile(item.file)">
-                <ui-icon name="times" class="text-xs"></ui-icon>
-              </button>
-            </div>
-          }
-        </div>
+            }
+          </div>
+        }
       }
     } @else {
       <div class="flex items-center gap-3">
@@ -9389,7 +9546,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
     }
   `,
                 }]
-        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], auto: [{ type: i0.Input, args: [{ isSignal: true, alias: "auto", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], fileLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileLimit", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], url: [{ type: i0.Input, args: [{ isSignal: true, alias: "url", required: false }] }], headers: [{ type: i0.Input, args: [{ isSignal: true, alias: "headers", required: false }] }], customUpload: [{ type: i0.Input, args: [{ isSignal: true, alias: "customUpload", required: false }] }], showUploadButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showUploadButton", required: false }] }], showCancelButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCancelButton", required: false }] }], chooseLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "chooseLabel", required: false }] }], uploadLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadLabel", required: false }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: false }] }], chooseIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "chooseIcon", required: false }] }], uploadIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadIcon", required: false }] }], cancelIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelIcon", required: false }] }], previewWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewWidth", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }], onRemove: [{ type: i0.Output, args: ["onRemove"] }], onClear: [{ type: i0.Output, args: ["onClear"] }], onError: [{ type: i0.Output, args: ["onError"] }], onUpload: [{ type: i0.Output, args: ["onUpload"] }], onProgress: [{ type: i0.Output, args: ["onProgress"] }], uploadHandler: [{ type: i0.Output, args: ["uploadHandler"] }] } });
+        }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], auto: [{ type: i0.Input, args: [{ isSignal: true, alias: "auto", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], fileLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileLimit", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], url: [{ type: i0.Input, args: [{ isSignal: true, alias: "url", required: false }] }], headers: [{ type: i0.Input, args: [{ isSignal: true, alias: "headers", required: false }] }], customUpload: [{ type: i0.Input, args: [{ isSignal: true, alias: "customUpload", required: false }] }], showUploadButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showUploadButton", required: false }] }], showCancelButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCancelButton", required: false }] }], chooseLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "chooseLabel", required: false }] }], uploadLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadLabel", required: false }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: false }] }], removeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeLabel", required: false }] }], dragDropLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragDropLabel", required: false }] }], dragDropHintLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragDropHintLabel", required: false }] }], contentRef: [{ type: i0.ContentChild, args: ['content', { isSignal: true }] }], fTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FTemplateDirective), { isSignal: true }] }], chooseIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "chooseIcon", required: false }] }], uploadIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadIcon", required: false }] }], cancelIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelIcon", required: false }] }], previewWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewWidth", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }], onRemove: [{ type: i0.Output, args: ["onRemove"] }], onClear: [{ type: i0.Output, args: ["onClear"] }], onError: [{ type: i0.Output, args: ["onError"] }], onUpload: [{ type: i0.Output, args: ["onUpload"] }], onProgress: [{ type: i0.Output, args: ["onProgress"] }], uploadHandler: [{ type: i0.Output, args: ["uploadHandler"] }] } });
 
 const CLOSE_ANIMATION_MS$1 = 180;
 const FOCUSABLE_SELECTOR$2 = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
@@ -10504,6 +10661,9 @@ class TabComponent {
     isActive = computed(() => this.ctx.active() === this.value(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
     onClose = output();
+    constructor() {
+        blockClicksWhileDisabled(this.disabled);
+    }
     triggerId = computed(() => `f-tab-trigger-${this.value()}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "triggerId" }] : /* istanbul ignore next */ []));
     panelId = computed(() => `f-tab-panel-${this.value()}`, /* @ts-ignore */
@@ -10595,7 +10755,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
     }
   `,
                 }]
-        }], propDecorators: { buttonRef: [{ type: i0.ViewChild, args: ['btn', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], onClose: [{ type: i0.Output, args: ["onClose"] }] } });
+        }], ctorParameters: () => [], propDecorators: { buttonRef: [{ type: i0.ViewChild, args: ['btn', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], onClose: [{ type: i0.Output, args: ["onClose"] }] } });
 // ─── TabList — wraps tab buttons, with optional scroll navigators ────────────
 class TabListComponent {
     ctx = inject(TabsContext);
@@ -10855,6 +11015,9 @@ class AccordionHeaderComponent {
     ...(ngDevMode ? [{ debugName: "buttonRef" }] : /* istanbul ignore next */ []));
     disabled = computed(() => this.panelCtx.disabled(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    constructor() {
+        blockClicksWhileDisabled(this.disabled);
+    }
     headerId = computed(() => `${this.accordionCtx?.id ?? 'f-accordion'}-header-${this.panelCtx.value()}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "headerId" }] : /* istanbul ignore next */ []));
     contentId = computed(() => `${this.accordionCtx?.id ?? 'f-accordion'}-content-${this.panelCtx.value()}`, /* @ts-ignore */
@@ -10911,7 +11074,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
     </button>
   `,
                 }]
-        }], propDecorators: { buttonRef: [{ type: i0.ViewChild, args: ['btn', { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { buttonRef: [{ type: i0.ViewChild, args: ['btn', { isSignal: true }] }] } });
 // ─── Accordion root — provides context ────────────────────────────────────────
 class AccordionComponent {
     multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -14425,8 +14588,10 @@ class AutoCompleteComponent {
     ...(ngDevMode ? [{ debugName: "anchorRef" }] : /* istanbul ignore next */ []));
     panelRef = viewChild('panel', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panelRef" }] : /* istanbul ignore next */ []));
+    singleInputRef = viewChild('singleInputEl', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "singleInputRef" }] : /* istanbul ignore next */ []));
     _placement = overlayPosition({
-        active: () => this.open() && this.appendTo() === 'body',
+        active: () => this.panelVisible() && this.appendTo() === 'body',
         anchor: () => this.anchorRef()?.nativeElement,
         panel: () => this.panelRef()?.nativeElement,
         options: () => ({ matchAnchorWidth: true }),
@@ -14452,11 +14617,22 @@ class AutoCompleteComponent {
     ...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
     placeholder = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    _formDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_formDisabled" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this._formDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    constructor() {
+        blockClicksWhileDisabled(this.isDisabled);
+    }
     dropdown = input(false, { ...(ngDevMode ? { debugName: "dropdown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     forceSelection = input(false, { ...(ngDevMode ? { debugName: "forceSelection" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     completeOnFocus = input(false, { ...(ngDevMode ? { debugName: "completeOnFocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    freeText = input(false, { ...(ngDevMode ? { debugName: "freeText" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    filterLocally = input(false, { ...(ngDevMode ? { debugName: "filterLocally" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     delay = input(300, { ...(ngDevMode ? { debugName: "delay" } : /* istanbul ignore next */ {}), transform: numberAttribute });
     minLength = input(1, { ...(ngDevMode ? { debugName: "minLength" } : /* istanbul ignore next */ {}), transform: numberAttribute });
     invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -14507,6 +14683,8 @@ class AutoCompleteComponent {
     selectedItems = this._selectedItems.asReadonly();
     _value = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
+    _filterQuery = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_filterQuery" }] : /* istanbul ignore next */ []));
     _onChange = () => { };
     _onTouched = () => { };
     _debounce;
@@ -14555,7 +14733,22 @@ class AutoCompleteComponent {
         this.fTemplates().find((t) => t.fTemplate() === 'loader')?.templateRef ??
         null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "loaderTpl" }] : /* istanbul ignore next */ []));
-    filteredSuggestions = computed(() => this.suggestions(), /* @ts-ignore */
+    filteredSuggestions = computed(() => {
+        const list = (this.suggestions() ?? []);
+        const q = this._filterQuery().trim().toLowerCase();
+        if (!this.filterLocally() || !q)
+            return list;
+        const matches = (item) => this.getLabel(item).toLowerCase().includes(q);
+        if (!this.group())
+            return list.filter(matches);
+        const key = this.optionGroupChildren();
+        return list
+            .map((g) => ({
+            ...g,
+            [key]: (g[key] ?? []).filter(matches),
+        }))
+            .filter((g) => g[key].length > 0);
+    }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "filteredSuggestions" }] : /* istanbul ignore next */ []));
     flatSuggestions = computed(() => {
         const list = this.filteredSuggestions();
@@ -14590,6 +14783,11 @@ class AutoCompleteComponent {
         return rows;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    panelVisible = computed(() => this.open() &&
+        !(this.freeText() &&
+            !this.loading() &&
+            this.flatSuggestions().length === 0), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelVisible" }] : /* istanbul ignore next */ []));
     inputClass = computed(() => {
         const focused = this.open();
         const base = 'border bg-(--f-form-field-background) text-(--f-form-field-color) placeholder:text-(--f-form-field-placeholder-color)';
@@ -14604,6 +14802,15 @@ class AutoCompleteComponent {
     ...(ngDevMode ? [{ debugName: "inputClass" }] : /* istanbul ignore next */ []));
     onDropdownButtonClick(e) {
         this.onDropdownClick.emit(e);
+        const wasOpen = this.panelVisible();
+        const inputEl = this.singleInputRef()?.nativeElement;
+        if (inputEl && document.activeElement !== inputEl)
+            inputEl.focus();
+        if (wasOpen) {
+            this._open.set(false);
+            return;
+        }
+        this._filterQuery.set('');
         this.completeMethod.emit({ originalEvent: e, query: this.query });
         this.openPanel();
         this._activeIndex.set(-1);
@@ -14624,6 +14831,12 @@ class AutoCompleteComponent {
     }
     onQueryChange(q) {
         this.query = q;
+        this._filterQuery.set(q);
+        if (this.freeText() && !this.multiple()) {
+            this._value.set(q);
+            this._onChange(q);
+            this.onChange.emit(q);
+        }
         clearTimeout(this._debounce);
         if (q.length < this.minLength()) {
             this._open.set(false);
@@ -14637,6 +14850,7 @@ class AutoCompleteComponent {
     }
     _handleFocus() {
         this.focusEvent.emit();
+        this._filterQuery.set('');
         if (this.completeOnFocus() && this.query.length >= this.minLength()) {
             this.completeMethod.emit({
                 originalEvent: new Event('focus'),
@@ -14727,8 +14941,9 @@ class AutoCompleteComponent {
         }
         else {
             this.query = '';
-            this._value.set(null);
-            this._onChange(null);
+            const empty = this.freeText() ? '' : null;
+            this._value.set(empty);
+            this._onChange(empty);
         }
         this.onClear.emit();
     }
@@ -14747,25 +14962,25 @@ class AutoCompleteComponent {
     registerOnTouched(fn) {
         this._onTouched = fn;
     }
-    setDisabledState() { }
+    setDisabledState(isDisabled) { this._formDisabled.set(isDisabled); }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AutoCompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: AutoCompleteComponent, isStandalone: true, selector: "f-autocomplete", inputs: { suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", 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 }, dropdown: { classPropertyName: "dropdown", publicName: "dropdown", isSignal: true, isRequired: false, transformFunction: null }, forceSelection: { classPropertyName: "forceSelection", publicName: "forceSelection", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, completeOnFocus: { classPropertyName: "completeOnFocus", publicName: "completeOnFocus", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", 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 }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingIcon: { classPropertyName: "loadingIcon", publicName: "loadingIcon", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", 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 }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollItemSize: { classPropertyName: "virtualScrollItemSize", publicName: "virtualScrollItemSize", isSignal: true, isRequired: false, transformFunction: null }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", 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 } }, outputs: { completeMethod: "completeMethod", onSelect: "onSelect", onUnselect: "onUnselect", onDropdownClick: "onDropdownClick", onClear: "onClear", focusEvent: "focusEvent", blurEvent: "blurEvent", onChange: "onChange", onLazyLoad: "onLazyLoad" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "hostClass()", "style": "style()" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: AutoCompleteComponent, isStandalone: true, selector: "f-autocomplete", inputs: { suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, dropdown: { classPropertyName: "dropdown", publicName: "dropdown", isSignal: true, isRequired: false, transformFunction: null }, forceSelection: { classPropertyName: "forceSelection", publicName: "forceSelection", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, completeOnFocus: { classPropertyName: "completeOnFocus", publicName: "completeOnFocus", isSignal: true, isRequired: false, transformFunction: null }, freeText: { classPropertyName: "freeText", publicName: "freeText", isSignal: true, isRequired: false, transformFunction: null }, filterLocally: { classPropertyName: "filterLocally", publicName: "filterLocally", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", 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 }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingIcon: { classPropertyName: "loadingIcon", publicName: "loadingIcon", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", 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 }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollItemSize: { classPropertyName: "virtualScrollItemSize", publicName: "virtualScrollItemSize", isSignal: true, isRequired: false, transformFunction: null }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", 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 } }, outputs: { completeMethod: "completeMethod", onSelect: "onSelect", onUnselect: "onUnselect", onDropdownClick: "onDropdownClick", onClear: "onClear", focusEvent: "focusEvent", blurEvent: "blurEvent", onChange: "onChange", onLazyLoad: "onLazyLoad" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "hostClass()", "style": "style()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => AutoCompleteComponent),
                 multi: true,
             },
-        ], queries: [{ 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: "selectedItemRef", first: true, predicate: ["selectedItem"], descendants: true, isSignal: true }, { propertyName: "loaderRef", first: true, predicate: ["loader"], descendants: true, isSignal: true }, { propertyName: "fTemplates", predicate: FTemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "anchorRef", first: true, predicate: ["anchor"], descendants: true, isSignal: true }, { propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: `
+        ], queries: [{ 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: "selectedItemRef", first: true, predicate: ["selectedItem"], descendants: true, isSignal: true }, { propertyName: "loaderRef", first: true, predicate: ["loader"], descendants: true, isSignal: true }, { propertyName: "fTemplates", predicate: FTemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "anchorRef", first: true, predicate: ["anchor"], descendants: true, isSignal: true }, { propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }, { propertyName: "singleInputRef", first: true, predicate: ["singleInputEl"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div
       #anchor
       class="relative w-full"
-      [class.opacity-60]="disabled()"
-      [class.pointer-events-none]="disabled()"
+      [class.opacity-60]="isDisabled()"
+      [class.pointer-events-none]="isDisabled()"
     >
       @if (multiple()) {
         <div class="relative">
           <div
-            class="min-h-[2.375rem] flex flex-wrap items-center gap-1.5 f-field-compact border bg-(--f-form-field-background) focus-within:ring-focus transition-all duration-[var(--f-transition-duration)] cursor-text"
+            class="flex flex-wrap items-center gap-1.5 f-field-compact text-sm border bg-(--f-form-field-background) focus-within:ring-focus transition-all duration-[var(--f-transition-duration)] cursor-text"
             [class]="wrapperClass()"
             [class.pr-7]="showClear() || loading()"
             (click)="inputEl.focus()"
@@ -14797,6 +15012,7 @@ class AutoCompleteComponent {
               type="text"
               class="flex-1 min-w-[6rem] text-sm bg-transparent focus:outline-none text-(--f-form-field-color) placeholder:text-(--f-form-field-placeholder-color)"
               [placeholder]="selectedItems().length === 0 ? placeholder() : ''"
+              [attr.aria-label]="ariaLabel() || null"
               [(ngModel)]="query"
               (ngModelChange)="onQueryChange($event)"
               (keydown)="onKeyDown($event)"
@@ -14805,7 +15021,7 @@ class AutoCompleteComponent {
               role="combobox"
               aria-autocomplete="list"
               aria-haspopup="listbox"
-              [attr.aria-expanded]="open()"
+              [attr.aria-expanded]="panelVisible()"
               [attr.aria-controls]="listboxId"
               [attr.aria-activedescendant]="
                 activeIndex() >= 0 ? listboxId + '-' + activeIndex() : null
@@ -14819,7 +15035,7 @@ class AutoCompleteComponent {
                 [spin]="true"
                 class="text-xs text-(--f-form-field-placeholder-color)"
               ></ui-icon>
-            } @else if (showClear() && selectedItems().length && !disabled()) {
+            } @else if (showClear() && selectedItems().length && !isDisabled()) {
               <ui-icon
                 name="x"
                 class="text-xs text-(--f-form-field-placeholder-color) hover:text-(--f-text-color) cursor-pointer"
@@ -14831,10 +15047,14 @@ class AutoCompleteComponent {
       } @else {
         <div class="relative">
           <input
+            #singleInputEl
             type="text"
-            class="w-full f-field text-sm border bg-(--f-form-field-background) focus:outline-none focus-visible:ring-focus transition-all duration-[var(--f-transition-duration)]"
+            class="w-full f-field text-sm border bg-(--f-form-field-background) focus:outline-none focus-visible:ring-focus transition-all duration-[var(--f-transition-duration)] truncate"
             [class]="inputClass()"
+            [class.pr-8!]="dropdown() || showClear() || loading()"
+            [class.pr-12!]="dropdown() && showClear() && !!query"
             [placeholder]="placeholder()"
+            [attr.aria-label]="ariaLabel() || null"
             [(ngModel)]="query"
             (ngModelChange)="onQueryChange($event)"
             (keydown)="onKeyDown($event)"
@@ -14843,7 +15063,7 @@ class AutoCompleteComponent {
             role="combobox"
             aria-autocomplete="list"
             aria-haspopup="listbox"
-            [attr.aria-expanded]="open()"
+            [attr.aria-expanded]="panelVisible()"
             [attr.aria-controls]="listboxId"
             [attr.aria-activedescendant]="
               activeIndex() >= 0 ? listboxId + '-' + activeIndex() : null
@@ -14859,7 +15079,7 @@ class AutoCompleteComponent {
                 class="text-xs text-(--f-form-field-placeholder-color)"
               ></ui-icon>
             } @else {
-              @if (showClear() && query && !disabled()) {
+              @if (showClear() && query && !isDisabled()) {
                 <ui-icon
                   name="x"
                   class="text-xs text-(--f-form-field-placeholder-color) hover:text-(--f-text-color) cursor-pointer"
@@ -14869,10 +15089,17 @@ class AutoCompleteComponent {
               @if (dropdown()) {
                 <button
                   type="button"
-                  class="inline-flex items-center text-(--f-text-muted-color) hover:text-(--f-text-hover-color)"
+                  tabindex="-1"
+                  aria-hidden="true"
+                  class="inline-flex items-center justify-center p-0 border-0 bg-transparent cursor-pointer focus:outline-none text-(--f-form-field-placeholder-color) hover:text-(--f-text-color)"
+                  (mousedown)="$event.preventDefault()"
                   (click)="onDropdownButtonClick($event)"
                 >
-                  <ui-icon name="chevron-down" class="text-xs"></ui-icon>
+                  <ui-icon
+                    name="chevron-down"
+                    class="text-xs transition-transform duration-[var(--f-transition-duration)]"
+                    [class.rotate-180]="panelVisible()"
+                  ></ui-icon>
                 </button>
               }
             }
@@ -14880,7 +15107,7 @@ class AutoCompleteComponent {
         </div>
       }
 
-      @if (open()) {
+      @if (panelVisible()) {
         <div #panel [class]="panelClass()" [style]="panelStyle()">
           @if (headerTpl()) {
             <div class="p-2 border-b border-(--f-content-border-color)">
@@ -15027,13 +15254,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
     <div
       #anchor
       class="relative w-full"
-      [class.opacity-60]="disabled()"
-      [class.pointer-events-none]="disabled()"
+      [class.opacity-60]="isDisabled()"
+      [class.pointer-events-none]="isDisabled()"
     >
       @if (multiple()) {
         <div class="relative">
           <div
-            class="min-h-[2.375rem] flex flex-wrap items-center gap-1.5 f-field-compact border bg-(--f-form-field-background) focus-within:ring-focus transition-all duration-[var(--f-transition-duration)] cursor-text"
+            class="flex flex-wrap items-center gap-1.5 f-field-compact text-sm border bg-(--f-form-field-background) focus-within:ring-focus transition-all duration-[var(--f-transition-duration)] cursor-text"
             [class]="wrapperClass()"
             [class.pr-7]="showClear() || loading()"
             (click)="inputEl.focus()"
@@ -15065,6 +15292,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
               type="text"
               class="flex-1 min-w-[6rem] text-sm bg-transparent focus:outline-none text-(--f-form-field-color) placeholder:text-(--f-form-field-placeholder-color)"
               [placeholder]="selectedItems().length === 0 ? placeholder() : ''"
+              [attr.aria-label]="ariaLabel() || null"
               [(ngModel)]="query"
               (ngModelChange)="onQueryChange($event)"
               (keydown)="onKeyDown($event)"
@@ -15073,7 +15301,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
               role="combobox"
               aria-autocomplete="list"
               aria-haspopup="listbox"
-              [attr.aria-expanded]="open()"
+              [attr.aria-expanded]="panelVisible()"
               [attr.aria-controls]="listboxId"
               [attr.aria-activedescendant]="
                 activeIndex() >= 0 ? listboxId + '-' + activeIndex() : null
@@ -15087,7 +15315,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                 [spin]="true"
                 class="text-xs text-(--f-form-field-placeholder-color)"
               ></ui-icon>
-            } @else if (showClear() && selectedItems().length && !disabled()) {
+            } @else if (showClear() && selectedItems().length && !isDisabled()) {
               <ui-icon
                 name="x"
                 class="text-xs text-(--f-form-field-placeholder-color) hover:text-(--f-text-color) cursor-pointer"
@@ -15099,10 +15327,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
       } @else {
         <div class="relative">
           <input
+            #singleInputEl
             type="text"
-            class="w-full f-field text-sm border bg-(--f-form-field-background) focus:outline-none focus-visible:ring-focus transition-all duration-[var(--f-transition-duration)]"
+            class="w-full f-field text-sm border bg-(--f-form-field-background) focus:outline-none focus-visible:ring-focus transition-all duration-[var(--f-transition-duration)] truncate"
             [class]="inputClass()"
+            [class.pr-8!]="dropdown() || showClear() || loading()"
+            [class.pr-12!]="dropdown() && showClear() && !!query"
             [placeholder]="placeholder()"
+            [attr.aria-label]="ariaLabel() || null"
             [(ngModel)]="query"
             (ngModelChange)="onQueryChange($event)"
             (keydown)="onKeyDown($event)"
@@ -15111,7 +15343,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
             role="combobox"
             aria-autocomplete="list"
             aria-haspopup="listbox"
-            [attr.aria-expanded]="open()"
+            [attr.aria-expanded]="panelVisible()"
             [attr.aria-controls]="listboxId"
             [attr.aria-activedescendant]="
               activeIndex() >= 0 ? listboxId + '-' + activeIndex() : null
@@ -15127,7 +15359,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                 class="text-xs text-(--f-form-field-placeholder-color)"
               ></ui-icon>
             } @else {
-              @if (showClear() && query && !disabled()) {
+              @if (showClear() && query && !isDisabled()) {
                 <ui-icon
                   name="x"
                   class="text-xs text-(--f-form-field-placeholder-color) hover:text-(--f-text-color) cursor-pointer"
@@ -15137,10 +15369,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
               @if (dropdown()) {
                 <button
                   type="button"
-                  class="inline-flex items-center text-(--f-text-muted-color) hover:text-(--f-text-hover-color)"
+                  tabindex="-1"
+                  aria-hidden="true"
+                  class="inline-flex items-center justify-center p-0 border-0 bg-transparent cursor-pointer focus:outline-none text-(--f-form-field-placeholder-color) hover:text-(--f-text-color)"
+                  (mousedown)="$event.preventDefault()"
                   (click)="onDropdownButtonClick($event)"
                 >
-                  <ui-icon name="chevron-down" class="text-xs"></ui-icon>
+                  <ui-icon
+                    name="chevron-down"
+                    class="text-xs transition-transform duration-[var(--f-transition-duration)]"
+                    [class.rotate-180]="panelVisible()"
+                  ></ui-icon>
                 </button>
               }
             }
@@ -15148,7 +15387,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
         </div>
       }
 
-      @if (open()) {
+      @if (panelVisible()) {
         <div #panel [class]="panelClass()" [style]="panelStyle()">
           @if (headerTpl()) {
             <div class="p-2 border-b border-(--f-content-border-color)">
@@ -15274,7 +15513,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
     </div>
   `,
                 }]
-        }], propDecorators: { anchorRef: [{ type: i0.ViewChild, args: ['anchor', { isSignal: true }] }], panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], suggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestions", required: false }] }], field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], dropdown: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdown", required: false }] }], forceSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceSelection", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], completeOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "completeOnFocus", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingIcon", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], virtualScrollItemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScrollItemSize", required: false }] }], scrollHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollHeight", required: false }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: false }] }], optionGroupLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroupLabel", required: false }] }], optionGroupChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroupChildren", required: false }] }], completeMethod: [{ type: i0.Output, args: ["completeMethod"] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }], onUnselect: [{ type: i0.Output, args: ["onUnselect"] }], onDropdownClick: [{ type: i0.Output, args: ["onDropdownClick"] }], onClear: [{ type: i0.Output, args: ["onClear"] }], focusEvent: [{ type: i0.Output, args: ["focusEvent"] }], blurEvent: [{ type: i0.Output, args: ["blurEvent"] }], onChange: [{ type: i0.Output, args: ["onChange"] }], onLazyLoad: [{ type: i0.Output, args: ["onLazyLoad"] }], itemRef: [{ type: i0.ContentChild, args: ['item', { isSignal: true }] }], groupRef: [{ type: i0.ContentChild, args: ['group', { isSignal: true }] }], headerRef: [{ type: i0.ContentChild, args: ['header', { isSignal: true }] }], footerRef: [{ type: i0.ContentChild, args: ['footer', { isSignal: true }] }], emptyRef: [{ type: i0.ContentChild, args: ['empty', { isSignal: true }] }], selectedItemRef: [{ type: i0.ContentChild, args: ['selectedItem', { isSignal: true }] }], loaderRef: [{ type: i0.ContentChild, args: ['loader', { isSignal: true }] }], fTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FTemplateDirective), { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { anchorRef: [{ type: i0.ViewChild, args: ['anchor', { isSignal: true }] }], panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], singleInputRef: [{ type: i0.ViewChild, args: ['singleInputEl', { isSignal: true }] }], suggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestions", required: false }] }], field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], dropdown: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdown", required: false }] }], forceSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceSelection", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], completeOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "completeOnFocus", required: false }] }], freeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "freeText", required: false }] }], filterLocally: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterLocally", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingIcon", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], virtualScrollItemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScrollItemSize", required: false }] }], scrollHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollHeight", required: false }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: false }] }], optionGroupLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroupLabel", required: false }] }], optionGroupChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroupChildren", required: false }] }], completeMethod: [{ type: i0.Output, args: ["completeMethod"] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }], onUnselect: [{ type: i0.Output, args: ["onUnselect"] }], onDropdownClick: [{ type: i0.Output, args: ["onDropdownClick"] }], onClear: [{ type: i0.Output, args: ["onClear"] }], focusEvent: [{ type: i0.Output, args: ["focusEvent"] }], blurEvent: [{ type: i0.Output, args: ["blurEvent"] }], onChange: [{ type: i0.Output, args: ["onChange"] }], onLazyLoad: [{ type: i0.Output, args: ["onLazyLoad"] }], itemRef: [{ type: i0.ContentChild, args: ['item', { isSignal: true }] }], groupRef: [{ type: i0.ContentChild, args: ['group', { isSignal: true }] }], headerRef: [{ type: i0.ContentChild, args: ['header', { isSignal: true }] }], footerRef: [{ type: i0.ContentChild, args: ['footer', { isSignal: true }] }], emptyRef: [{ type: i0.ContentChild, args: ['empty', { isSignal: true }] }], selectedItemRef: [{ type: i0.ContentChild, args: ['selectedItem', { isSignal: true }] }], loaderRef: [{ type: i0.ContentChild, args: ['loader', { isSignal: true }] }], fTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FTemplateDirective), { isSignal: true }] }] } });
 
 function hexToRgb(hex) {
     const clean = hex.replace('#', '');
@@ -15355,6 +15594,10 @@ class ColorPickerComponent {
     ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
     inline = input(false, { ...(ngDevMode ? { debugName: "inline" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    _formDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_formDisabled" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this._formDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
     invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     appendTo = input('self', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "appendTo" }] : /* istanbul ignore next */ []));
@@ -15384,6 +15627,7 @@ class ColorPickerComponent {
     _onTouched = () => { };
     _wasOpen = false;
     constructor() {
+        blockClicksWhileDisabled(this.isDisabled);
         effect(() => {
             const nowOpen = this.open();
             if (nowOpen !== this._wasOpen) {
@@ -15396,7 +15640,7 @@ class ColorPickerComponent {
         });
     }
     togglePanel(event) {
-        if (this.disabled())
+        if (this.isDisabled())
             return;
         if (this.appendTo() === 'body') {
             this.popoverRef()?.toggle(event);
@@ -15438,7 +15682,7 @@ class ColorPickerComponent {
     writeValue(val) { this._value.set(val ? parseColor(String(val)) : '#000000'); }
     registerOnChange(fn) { this._onChange = fn; }
     registerOnTouched(fn) { this._onTouched = fn; }
-    setDisabledState() { }
+    setDisabledState(isDisabled) { this._formDisabled.set(isDisabled); }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: ColorPickerComponent, isStandalone: true, selector: "f-colorpicker", inputs: { format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", 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 } }, outputs: { onChange: "onChange", onShow: "onShow", onHide: "onHide" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "hostClass()", "style": "style()" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ColorPickerComponent), multi: true }], viewQueries: [{ propertyName: "popoverRef", first: true, predicate: ["pop"], descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (inline()) {
@@ -15448,7 +15692,7 @@ class ColorPickerComponent {
         type="button"
         class="w-8 h-8 rounded-lg border-2 border-(--f-content-border-color) shadow-sm hover:border-(--f-form-field-hover-border-color) transition-all cursor-pointer overflow-hidden focus:outline-none focus-visible:ring-focus disabled:opacity-60 disabled:cursor-not-allowed"
         [style.background-color]="value()"
-        [disabled]="disabled()"
+        [disabled]="isDisabled()"
         (click)="togglePanel($event)"
         (keydown)="onTriggerKeydown($event)"
         [attr.aria-label]="ariaLabel()"
@@ -15534,7 +15778,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
         type="button"
         class="w-8 h-8 rounded-lg border-2 border-(--f-content-border-color) shadow-sm hover:border-(--f-form-field-hover-border-color) transition-all cursor-pointer overflow-hidden focus:outline-none focus-visible:ring-focus disabled:opacity-60 disabled:cursor-not-allowed"
         [style.background-color]="value()"
-        [disabled]="disabled()"
+        [disabled]="isDisabled()"
         (click)="togglePanel($event)"
         (keydown)="onTriggerKeydown($event)"
         [attr.aria-label]="ariaLabel()"
@@ -15621,6 +15865,13 @@ class ListboxComponent {
     filterPlaceholder = input('Search...', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "filterPlaceholder" }] : /* istanbul ignore next */ []));
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    _formDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_formDisabled" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this._formDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    constructor() {
+        blockClicksWhileDisabled(this.isDisabled);
+    }
     listStyle = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "listStyle" }] : /* istanbul ignore next */ []));
     metaKeySelection = input(false, { ...(ngDevMode ? { debugName: "metaKeySelection" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -15807,7 +16058,7 @@ class ListboxComponent {
     ...(ngDevMode ? [{ debugName: "allFilteredSelected" }] : /* istanbul ignore next */ []));
     toggleSelectAll(e) {
         e.stopPropagation();
-        if (this.disabled())
+        if (this.isDisabled())
             return;
         const selectable = this.filteredOptions().filter(o => !this.isOptionDisabled(o));
         const selectableValues = selectable.map(o => this.getOptionValue(o));
@@ -15822,7 +16073,7 @@ class ListboxComponent {
         this.onSelectAllChange.emit(selectingAll);
     }
     onOptionClick(e, opt) {
-        if (this.disabled() || this.isOptionDisabled(opt))
+        if (this.isDisabled() || this.isOptionDisabled(opt))
             return;
         const v = this.getOptionValue(opt);
         let newVal;
@@ -15853,7 +16104,7 @@ class ListboxComponent {
         this._focusedOptionIndex.set(next);
     }
     onKeyDown(event) {
-        if (this.disabled())
+        if (this.isDisabled())
             return;
         switch (event.key) {
             case 'ArrowDown':
@@ -15885,13 +16136,13 @@ class ListboxComponent {
     writeValue(val) { this._value.set(val ?? (this.multiple() ? [] : null)); }
     registerOnChange(fn) { this._onChange = fn; }
     registerOnTouched(fn) { this._onTouched = fn; }
-    setDisabledState() { }
+    setDisabledState(isDisabled) { this._formDisabled.set(isDisabled); }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ListboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: ListboxComponent, isStandalone: true, selector: "f-listbox", 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 }, optionDisabled: { classPropertyName: "optionDisabled", publicName: "optionDisabled", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", 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 }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, listStyle: { classPropertyName: "listStyle", publicName: "listStyle", isSignal: true, isRequired: false, transformFunction: null }, metaKeySelection: { classPropertyName: "metaKeySelection", publicName: "metaKeySelection", 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 }, selectAll: { classPropertyName: "selectAll", publicName: "selectAll", 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 }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChange: "onChange", onSelectAllChange: "onSelectAllChange" }, host: { classAttribute: "block" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ListboxComponent), multi: true }], queries: [{ 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: "filterRef", first: true, predicate: ["filter"], descendants: true, isSignal: true }, { propertyName: "fTemplates", predicate: FTemplateDirective, isSignal: true }], ngImport: i0, template: `
     <div
       class="w-full border border-(--f-content-border-color) rounded-lg bg-(--f-content-background) overflow-hidden shadow-sm"
-      [class.opacity-60]="disabled()"
-      [class.pointer-events-none]="disabled()"
+      [class.opacity-60]="isDisabled()"
+      [class.pointer-events-none]="isDisabled()"
     >
       @if (headerTpl()) {
         <div class="border-b border-(--f-content-border-color)">
@@ -16035,8 +16286,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                     template: `
     <div
       class="w-full border border-(--f-content-border-color) rounded-lg bg-(--f-content-background) overflow-hidden shadow-sm"
-      [class.opacity-60]="disabled()"
-      [class.pointer-events-none]="disabled()"
+      [class.opacity-60]="isDisabled()"
+      [class.pointer-events-none]="isDisabled()"
     >
       @if (headerTpl()) {
         <div class="border-b border-(--f-content-border-color)">
@@ -16170,7 +16421,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
     </ng-template>
   `,
                 }]
-        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], optionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionDisabled", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterBy", required: false }] }], filterMatchMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterMatchMode", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], listStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "listStyle", required: false }] }], metaKeySelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "metaKeySelection", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], emptyFilterMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyFilterMessage", required: false }] }], selectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAll", required: false }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: false }] }], optionGroupLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroupLabel", required: false }] }], optionGroupChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroupChildren", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], virtualScrollItemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScrollItemSize", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], onChange: [{ type: i0.Output, args: ["onChange"] }], onSelectAllChange: [{ type: i0.Output, args: ["onSelectAllChange"] }], itemRef: [{ type: i0.ContentChild, args: ['item', { isSignal: true }] }], groupRef: [{ type: i0.ContentChild, args: ['group', { isSignal: true }] }], headerRef: [{ type: i0.ContentChild, args: ['header', { isSignal: true }] }], footerRef: [{ type: i0.ContentChild, args: ['footer', { isSignal: true }] }], emptyRef: [{ type: i0.ContentChild, args: ['empty', { isSignal: true }] }], emptyFilterRef: [{ type: i0.ContentChild, args: ['emptyfilter', { isSignal: true }] }], filterRef: [{ type: i0.ContentChild, args: ['filter', { isSignal: true }] }], fTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FTemplateDirective), { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], optionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionDisabled", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterBy", required: false }] }], filterMatchMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterMatchMode", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], listStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "listStyle", required: false }] }], metaKeySelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "metaKeySelection", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], emptyFilterMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyFilterMessage", required: false }] }], selectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAll", required: false }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: false }] }], optionGroupLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroupLabel", required: false }] }], optionGroupChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroupChildren", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], virtualScrollItemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScrollItemSize", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], onChange: [{ type: i0.Output, args: ["onChange"] }], onSelectAllChange: [{ type: i0.Output, args: ["onSelectAllChange"] }], itemRef: [{ type: i0.ContentChild, args: ['item', { isSignal: true }] }], groupRef: [{ type: i0.ContentChild, args: ['group', { isSignal: true }] }], headerRef: [{ type: i0.ContentChild, args: ['header', { isSignal: true }] }], footerRef: [{ type: i0.ContentChild, args: ['footer', { isSignal: true }] }], emptyRef: [{ type: i0.ContentChild, args: ['empty', { isSignal: true }] }], emptyFilterRef: [{ type: i0.ContentChild, args: ['emptyfilter', { isSignal: true }] }], filterRef: [{ type: i0.ContentChild, args: ['filter', { isSignal: true }] }], fTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FTemplateDirective), { isSignal: true }] }] } });
 
 class SplitButtonComponent {
     _el = inject(ElementRef);
@@ -16215,6 +16466,9 @@ class SplitButtonComponent {
     onDropdownClick = output();
     onShow = output();
     onHide = output();
+    constructor() {
+        blockClicksWhileDisabled(this.disabled);
+    }
     _open = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_open" }] : /* istanbul ignore next */ []));
     open = this._open.asReadonly();
@@ -16510,7 +16764,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
     </div>
   `,
                 }]
-        }], propDecorators: { _group: [{ type: i0.ViewChild, args: ['group', { isSignal: true }] }], _dropdownBtn: [{ type: i0.ViewChild, args: ['dropdownButton', { isSignal: true }] }], _menuPanel: [{ type: i0.ViewChild, args: ['menuPanel', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], raised: [{ type: i0.Input, args: [{ isSignal: true, alias: "raised", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], outlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "outlined", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], iconPos: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPos", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], menuStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuStyleClass", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], dropdownIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownIcon", required: false }] }], expandAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandAriaLabel", required: false }] }], onClick: [{ type: i0.Output, args: ["onClick"] }], onDropdownClick: [{ type: i0.Output, args: ["onDropdownClick"] }], onShow: [{ type: i0.Output, args: ["onShow"] }], onHide: [{ type: i0.Output, args: ["onHide"] }] } });
+        }], ctorParameters: () => [], propDecorators: { _group: [{ type: i0.ViewChild, args: ['group', { isSignal: true }] }], _dropdownBtn: [{ type: i0.ViewChild, args: ['dropdownButton', { isSignal: true }] }], _menuPanel: [{ type: i0.ViewChild, args: ['menuPanel', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], raised: [{ type: i0.Input, args: [{ isSignal: true, alias: "raised", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], outlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "outlined", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], iconPos: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPos", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], menuStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuStyleClass", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], dropdownIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownIcon", required: false }] }], expandAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandAriaLabel", required: false }] }], onClick: [{ type: i0.Output, args: ["onClick"] }], onDropdownClick: [{ type: i0.Output, args: ["onDropdownClick"] }], onShow: [{ type: i0.Output, args: ["onShow"] }], onHide: [{ type: i0.Output, args: ["onHide"] }] } });
 
 let _uidCounter$2 = 0;
 function assignKey$2(node) {
@@ -16525,7 +16779,16 @@ class TreeSelectComponent {
     ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
     placeholder = input('Select', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    inputId = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    _formDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_formDisabled" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this._formDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    constructor() {
+        blockClicksWhileDisabled(this.isDisabled);
+    }
     filter = input(false, { ...(ngDevMode ? { debugName: "filter" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     filterBy = input('label', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "filterBy" }] : /* istanbul ignore next */ []));
@@ -16612,7 +16875,7 @@ class TreeSelectComponent {
         null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "emptyTpl" }] : /* istanbul ignore next */ []));
     triggerClass = computed(() => {
-        const base = 'w-full min-h-[34px] flex items-center gap-2 f-field-compact text-sm border bg-(--f-form-field-background) focus:outline-none focus-visible:ring-focus transition-all duration-[var(--f-transition-duration)]';
+        const base = 'w-full flex items-center gap-2 f-field-compact text-sm 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
@@ -16621,7 +16884,7 @@ class TreeSelectComponent {
             : showInvalid
                 ? 'border-red-400'
                 : 'border-(--f-form-field-border-color) hover:border-(--f-form-field-hover-border-color)';
-        const disabledClass = this.disabled()
+        const disabledClass = this.isDisabled()
             ? 'opacity-60 cursor-not-allowed'
             : 'cursor-pointer';
         return `${base} ${stateClass} ${disabledClass}`;
@@ -16694,7 +16957,7 @@ class TreeSelectComponent {
         this._filterText.set(v);
     }
     toggleOpen() {
-        if (this.disabled())
+        if (this.isDisabled())
             return;
         this._open.update((v) => !v);
         if (!this.open()) {
@@ -16703,7 +16966,7 @@ class TreeSelectComponent {
         }
     }
     onTriggerKeyDown(e) {
-        if (this.disabled())
+        if (this.isDisabled())
             return;
         if (e.key === 'Enter' || e.key === ' ') {
             e.preventDefault();
@@ -16747,6 +17010,11 @@ class TreeSelectComponent {
     }
     onNodeClick(e, row) {
         e.stopPropagation();
+        if (row.node.selectable === false) {
+            if (!row.leaf)
+                this.toggleExpand(e, row.key);
+            return;
+        }
         if (this.selectionMode() === 'checkbox') {
             this.toggleCheckbox(row.key);
         }
@@ -16853,9 +17121,9 @@ class TreeSelectComponent {
     registerOnTouched(fn) {
         this._onTouched = fn;
     }
-    setDisabledState() { }
+    setDisabledState(isDisabled) { this._formDisabled.set(isDisabled); }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: TreeSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", 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: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", 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 }, inputId: { classPropertyName: "inputId", publicName: "inputId", 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),
@@ -16866,10 +17134,11 @@ class TreeSelectComponent {
       <div
         #trigger
         role="combobox"
+        [attr.id]="inputId() || null"
         aria-haspopup="tree"
         [attr.aria-expanded]="open()"
-        [attr.aria-disabled]="disabled() || null"
-        [attr.tabindex]="disabled() ? -1 : 0"
+        [attr.aria-disabled]="isDisabled() || null"
+        [attr.tabindex]="isDisabled() ? -1 : 0"
         [class]="triggerClass()"
         (click)="toggleOpen()"
         (keydown)="onTriggerKeyDown($event)"
@@ -16925,7 +17194,7 @@ class TreeSelectComponent {
           }}</span>
         }
         <span class="ml-auto flex items-center gap-1 shrink-0">
-          @if (showClear() && selectedKeys().size && !disabled()) {
+          @if (showClear() && selectedKeys().size && !isDisabled()) {
             <ui-icon
               name="x"
               class="text-xs text-(--f-form-field-placeholder-color) hover:text-(--f-text-color) shrink-0"
@@ -17030,7 +17299,7 @@ class TreeSelectComponent {
         role="treeitem"
         [attr.aria-level]="row.level + 1"
         [attr.aria-expanded]="row.leaf ? null : isExpanded(row.key)"
-        [attr.aria-selected]="isSelected(row.key)"
+        [attr.aria-selected]="row.node.selectable === false ? null : isSelected(row.key)"
         (click)="onNodeClick($event, row)"
       >
         @if (!row.leaf) {
@@ -17049,7 +17318,7 @@ class TreeSelectComponent {
           <span class="inline-block w-5 h-5 shrink-0"></span>
         }
 
-        @if (selectionMode() === 'checkbox') {
+        @if (selectionMode() === 'checkbox' && row.node.selectable !== false) {
           <div
             class="w-4 h-4 rounded-sm border flex items-center justify-center shrink-0 transition-colors"
             [class]="
@@ -17080,7 +17349,7 @@ class TreeSelectComponent {
             class="text-xs text-(--f-text-muted-color) shrink-0"
           ></ui-icon>
         }
-        <span class="flex-1 truncate">{{ row.node.label }}</span>
+        <span class="flex-1 truncate" [class.font-medium]="row.node.selectable === false">{{ row.node.label }}</span>
       </div>
     </ng-template>
   `, isInline: true, dependencies: [{ kind: "component", type: UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ScrollerComponent, selector: "f-scroller", inputs: ["items", "itemSize", "scrollHeight", "scrollWidth", "orientation", "lazy", "loading", "trackBy", "styleClass", "style"], outputs: ["onLazyLoad", "onScrollIndexChange"] }] });
@@ -17107,10 +17376,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
       <div
         #trigger
         role="combobox"
+        [attr.id]="inputId() || null"
         aria-haspopup="tree"
         [attr.aria-expanded]="open()"
-        [attr.aria-disabled]="disabled() || null"
-        [attr.tabindex]="disabled() ? -1 : 0"
+        [attr.aria-disabled]="isDisabled() || null"
+        [attr.tabindex]="isDisabled() ? -1 : 0"
         [class]="triggerClass()"
         (click)="toggleOpen()"
         (keydown)="onTriggerKeyDown($event)"
@@ -17166,7 +17436,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
           }}</span>
         }
         <span class="ml-auto flex items-center gap-1 shrink-0">
-          @if (showClear() && selectedKeys().size && !disabled()) {
+          @if (showClear() && selectedKeys().size && !isDisabled()) {
             <ui-icon
               name="x"
               class="text-xs text-(--f-form-field-placeholder-color) hover:text-(--f-text-color) shrink-0"
@@ -17271,7 +17541,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
         role="treeitem"
         [attr.aria-level]="row.level + 1"
         [attr.aria-expanded]="row.leaf ? null : isExpanded(row.key)"
-        [attr.aria-selected]="isSelected(row.key)"
+        [attr.aria-selected]="row.node.selectable === false ? null : isSelected(row.key)"
         (click)="onNodeClick($event, row)"
       >
         @if (!row.leaf) {
@@ -17290,7 +17560,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
           <span class="inline-block w-5 h-5 shrink-0"></span>
         }
 
-        @if (selectionMode() === 'checkbox') {
+        @if (selectionMode() === 'checkbox' && row.node.selectable !== false) {
           <div
             class="w-4 h-4 rounded-sm border flex items-center justify-center shrink-0 transition-colors"
             [class]="
@@ -17321,12 +17591,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
             class="text-xs text-(--f-text-muted-color) shrink-0"
           ></ui-icon>
         }
-        <span class="flex-1 truncate">{{ row.node.label }}</span>
+        <span class="flex-1 truncate" [class.font-medium]="row.node.selectable === false">{{ row.node.label }}</span>
       </div>
     </ng-template>
   `,
                 }]
-        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterBy", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], propagateSelectionDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "propagateSelectionDown", required: false }] }], propagateSelectionUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "propagateSelectionUp", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], virtualScrollItemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScrollItemSize", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], valueRef: [{ type: i0.ContentChild, args: ['value', { isSignal: true }] }], headerRef: [{ type: i0.ContentChild, args: ['header', { isSignal: true }] }], footerRef: [{ type: i0.ContentChild, args: ['footer', { isSignal: true }] }], emptyRef: [{ type: i0.ContentChild, args: ['empty', { isSignal: true }] }], fTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FTemplateDirective), { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterBy", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], propagateSelectionDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "propagateSelectionDown", required: false }] }], propagateSelectionUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "propagateSelectionUp", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], virtualScrollItemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScrollItemSize", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], valueRef: [{ type: i0.ContentChild, args: ['value', { isSignal: true }] }], headerRef: [{ type: i0.ContentChild, args: ['header', { isSignal: true }] }], footerRef: [{ type: i0.ContentChild, args: ['footer', { isSignal: true }] }], emptyRef: [{ type: i0.ContentChild, args: ['empty', { isSignal: true }] }], fTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FTemplateDirective), { isSignal: true }] }] } });
 
 class OverlayBadgeComponent {
     value = input('', /* @ts-ignore */
@@ -18022,8 +18292,10 @@ class MenuComponent {
         }
     }
     onItemClick(e, item) {
-        if (item.disabled)
+        if (item.disabled) {
+            e.preventDefault();
             return;
+        }
         item.command?.({ originalEvent: e, item });
         if (this.popup())
             this.hide();
@@ -18106,7 +18378,7 @@ class MenuComponent {
               [attr.aria-disabled]="item.disabled ? true : null"
               [attr.data-p-disabled]="item.disabled ? true : null"
               [class]="itemClass"
-              [routerLink]="item.routerLink"
+              [routerLink]="item.disabled ? null : item.routerLink"
               [queryParams]="item.queryParams"
               (click)="onItemClick($event, item)"
             >
@@ -18119,7 +18391,7 @@ class MenuComponent {
               [attr.aria-disabled]="item.disabled ? true : null"
               [attr.data-p-disabled]="item.disabled ? true : null"
               [class]="itemClass"
-              [href]="item.url"
+              [attr.href]="item.disabled ? null : item.url"
               [target]="item.target ?? null"
               (click)="onItemClick($event, item)"
             >
@@ -18222,7 +18494,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
               [attr.aria-disabled]="item.disabled ? true : null"
               [attr.data-p-disabled]="item.disabled ? true : null"
               [class]="itemClass"
-              [routerLink]="item.routerLink"
+              [routerLink]="item.disabled ? null : item.routerLink"
               [queryParams]="item.queryParams"
               (click)="onItemClick($event, item)"
             >
@@ -18235,7 +18507,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
               [attr.aria-disabled]="item.disabled ? true : null"
               [attr.data-p-disabled]="item.disabled ? true : null"
               [class]="itemClass"
-              [href]="item.url"
+              [attr.href]="item.disabled ? null : item.url"
               [target]="item.target ?? null"
               (click)="onItemClick($event, item)"
             >
@@ -18393,8 +18665,10 @@ class MenubarComponent {
         }, 150);
     }
     onItemClick(e, item, level) {
-        if (item.disabled)
+        if (item.disabled) {
+            e.preventDefault();
             return;
+        }
         if (item.items?.length) {
             e.preventDefault();
             this._dirty = true;
@@ -18563,7 +18837,7 @@ class MenubarComponent {
                   [attr.aria-haspopup]="item.items?.length ? 'menu' : null"
                   [attr.aria-expanded]="item.items?.length ? isItemActive(item, level) : null"
                   [class]="itemClass"
-                  [routerLink]="item.routerLink"
+                  [routerLink]="item.disabled ? null : item.routerLink"
                   [queryParams]="item.queryParams"
                   (click)="onItemClick($event, item, level)"
                 >
@@ -18578,7 +18852,7 @@ class MenubarComponent {
                   [attr.aria-haspopup]="item.items?.length ? 'menu' : null"
                   [attr.aria-expanded]="item.items?.length ? isItemActive(item, level) : null"
                   [class]="itemClass"
-                  [href]="item.url"
+                  [attr.href]="item.disabled ? null : item.url"
                   [target]="item.target ?? null"
                   (click)="onItemClick($event, item, level)"
                 >
@@ -18653,7 +18927,7 @@ class MenubarComponent {
                   [attr.aria-haspopup]="item.items?.length ? 'menu' : null"
                   [attr.aria-expanded]="item.items?.length ? isItemActive(item, 0) : null"
                   [class]="rootClass"
-                  [routerLink]="item.routerLink"
+                  [routerLink]="item.disabled ? null : item.routerLink"
                   [queryParams]="item.queryParams"
                   (click)="onItemClick($event, item, 0)"
                 >
@@ -18668,7 +18942,7 @@ class MenubarComponent {
                   [attr.aria-haspopup]="item.items?.length ? 'menu' : null"
                   [attr.aria-expanded]="item.items?.length ? isItemActive(item, 0) : null"
                   [class]="rootClass"
-                  [href]="item.url"
+                  [attr.href]="item.disabled ? null : item.url"
                   [target]="item.target ?? null"
                   (click)="onItemClick($event, item, 0)"
                 >
@@ -18755,7 +19029,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                   [attr.aria-haspopup]="item.items?.length ? 'menu' : null"
                   [attr.aria-expanded]="item.items?.length ? isItemActive(item, level) : null"
                   [class]="itemClass"
-                  [routerLink]="item.routerLink"
+                  [routerLink]="item.disabled ? null : item.routerLink"
                   [queryParams]="item.queryParams"
                   (click)="onItemClick($event, item, level)"
                 >
@@ -18770,7 +19044,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                   [attr.aria-haspopup]="item.items?.length ? 'menu' : null"
                   [attr.aria-expanded]="item.items?.length ? isItemActive(item, level) : null"
                   [class]="itemClass"
-                  [href]="item.url"
+                  [attr.href]="item.disabled ? null : item.url"
                   [target]="item.target ?? null"
                   (click)="onItemClick($event, item, level)"
                 >
@@ -18845,7 +19119,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                   [attr.aria-haspopup]="item.items?.length ? 'menu' : null"
                   [attr.aria-expanded]="item.items?.length ? isItemActive(item, 0) : null"
                   [class]="rootClass"
-                  [routerLink]="item.routerLink"
+                  [routerLink]="item.disabled ? null : item.routerLink"
                   [queryParams]="item.queryParams"
                   (click)="onItemClick($event, item, 0)"
                 >
@@ -18860,7 +19134,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                   [attr.aria-haspopup]="item.items?.length ? 'menu' : null"
                   [attr.aria-expanded]="item.items?.length ? isItemActive(item, 0) : null"
                   [class]="rootClass"
-                  [href]="item.url"
+                  [attr.href]="item.disabled ? null : item.url"
                   [target]="item.target ?? null"
                   (click)="onItemClick($event, item, 0)"
                 >
@@ -19002,8 +19276,10 @@ class TieredMenuComponent {
         }
     }
     onItemClick(e, item, level) {
-        if (item.disabled)
+        if (item.disabled) {
+            e.preventDefault();
             return;
+        }
         if (item.items?.length) {
             e.preventDefault();
             const path = this._activeItemPath();
@@ -19125,7 +19401,7 @@ class TieredMenuComponent {
                   [attr.aria-haspopup]="item.items?.length ? 'menu' : null"
                   [attr.aria-expanded]="item.items?.length ? isItemActive(item, level) : null"
                   [class]="itemClass"
-                  [routerLink]="item.routerLink"
+                  [routerLink]="item.disabled ? null : item.routerLink"
                   [queryParams]="item.queryParams"
                   (click)="onItemClick($event, item, level)"
                   (keydown.arrowRight)="onArrowRight($event, item, level)"
@@ -19142,7 +19418,7 @@ class TieredMenuComponent {
                   [attr.aria-haspopup]="item.items?.length ? 'menu' : null"
                   [attr.aria-expanded]="item.items?.length ? isItemActive(item, level) : null"
                   [class]="itemClass"
-                  [href]="item.url"
+                  [attr.href]="item.disabled ? null : item.url"
                   [target]="item.target ?? null"
                   (click)="onItemClick($event, item, level)"
                   (keydown.arrowRight)="onArrowRight($event, item, level)"
@@ -19252,7 +19528,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                   [attr.aria-haspopup]="item.items?.length ? 'menu' : null"
                   [attr.aria-expanded]="item.items?.length ? isItemActive(item, level) : null"
                   [class]="itemClass"
-                  [routerLink]="item.routerLink"
+                  [routerLink]="item.disabled ? null : item.routerLink"
                   [queryParams]="item.queryParams"
                   (click)="onItemClick($event, item, level)"
                   (keydown.arrowRight)="onArrowRight($event, item, level)"
@@ -19269,7 +19545,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                   [attr.aria-haspopup]="item.items?.length ? 'menu' : null"
                   [attr.aria-expanded]="item.items?.length ? isItemActive(item, level) : null"
                   [class]="itemClass"
-                  [href]="item.url"
+                  [attr.href]="item.disabled ? null : item.url"
                   [target]="item.target ?? null"
                   (click)="onItemClick($event, item, level)"
                   (keydown.arrowRight)="onArrowRight($event, item, level)"
@@ -19412,8 +19688,10 @@ class ContextMenuComponent {
         this._activeItemPath.set(path);
     }
     onItemClick(e, item, level) {
-        if (item.disabled)
+        if (item.disabled) {
+            e.preventDefault();
             return;
+        }
         if (item.items?.length) {
             e.preventDefault();
             const path = this._activeItemPath();
@@ -19538,7 +19816,7 @@ class ContextMenuComponent {
                   [attr.data-level]="level"
                   [attr.aria-haspopup]="item.items?.length ? 'menu' : null"
                   [attr.aria-expanded]="item.items?.length ? isItemActive(item, level) : null"
-                  [routerLink]="item.routerLink"
+                  [routerLink]="item.disabled ? null : item.routerLink"
                   [queryParams]="item.queryParams"
                   (click)="onItemClick($event, item, level)"
                 >
@@ -19551,7 +19829,7 @@ class ContextMenuComponent {
                   [attr.data-level]="level"
                   [attr.aria-haspopup]="item.items?.length ? 'menu' : null"
                   [attr.aria-expanded]="item.items?.length ? isItemActive(item, level) : null"
-                  [href]="item.url"
+                  [attr.href]="item.disabled ? null : item.url"
                   [target]="item.target ?? null"
                   (click)="onItemClick($event, item, level)"
                 >
@@ -19638,7 +19916,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                   [attr.data-level]="level"
                   [attr.aria-haspopup]="item.items?.length ? 'menu' : null"
                   [attr.aria-expanded]="item.items?.length ? isItemActive(item, level) : null"
-                  [routerLink]="item.routerLink"
+                  [routerLink]="item.disabled ? null : item.routerLink"
                   [queryParams]="item.queryParams"
                   (click)="onItemClick($event, item, level)"
                 >
@@ -19651,7 +19929,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                   [attr.data-level]="level"
                   [attr.aria-haspopup]="item.items?.length ? 'menu' : null"
                   [attr.aria-expanded]="item.items?.length ? isItemActive(item, level) : null"
-                  [href]="item.url"
+                  [attr.href]="item.disabled ? null : item.url"
                   [target]="item.target ?? null"
                   (click)="onItemClick($event, item, level)"
                 >
@@ -19780,8 +20058,10 @@ class MegaMenuComponent {
         }
     }
     onRootClick(e, item) {
-        if (item.disabled)
+        if (item.disabled) {
+            e.preventDefault();
             return;
+        }
         if (item.items?.length) {
             const opening = this.activeItem() !== item;
             this._activeItem.set(opening ? item : null);
@@ -19795,15 +20075,19 @@ class MegaMenuComponent {
         this._dirty = false;
     }
     onLeafClick(e, item) {
-        if (item.disabled)
+        if (item.disabled) {
+            e.preventDefault();
             return;
+        }
         item.command?.({ originalEvent: e, item });
         this._activeItem.set(null);
         this._dirty = false;
     }
     onMobileItemClick(e, item) {
-        if (item.disabled)
+        if (item.disabled) {
+            e.preventDefault();
             return;
+        }
         if (item.items?.length) {
             this._mobileExpanded.update(s => {
                 const next = new Set(s);
@@ -19991,11 +20275,11 @@ class MegaMenuComponent {
           @if (item.visible !== false) {
             <li class="relative" role="none" (mouseenter)="onRootEnter(item)">
               @if (item.routerLink) {
-                <a role="menuitem" [class]="rootItemClass(item)" [routerLink]="item.routerLink" [queryParams]="item.queryParams" (click)="onRootClick($event, item)">
+                <a role="menuitem" [class]="rootItemClass(item)" [routerLink]="item.disabled ? null : item.routerLink" [queryParams]="item.queryParams" (click)="onRootClick($event, item)">
                   <ng-container [ngTemplateOutlet]="contentTpl" [ngTemplateOutletContext]="{ $implicit: item, root: true }" />
                 </a>
               } @else if (item.url) {
-                <a role="menuitem" [class]="rootItemClass(item)" [href]="item.url" [target]="item.target ?? null" (click)="onRootClick($event, item)">
+                <a role="menuitem" [class]="rootItemClass(item)" [attr.href]="item.disabled ? null : item.url" [target]="item.target ?? null" (click)="onRootClick($event, item)">
                   <ng-container [ngTemplateOutlet]="contentTpl" [ngTemplateOutletContext]="{ $implicit: item, root: true }" />
                 </a>
               } @else {
@@ -20024,11 +20308,11 @@ class MegaMenuComponent {
                               @let linkClass = leafItemClass(link);
                               <li [class]="link.styleClass ?? null" [style]="link.style ?? null">
                                 @if (link.routerLink) {
-                                  <a role="menuitem" [class]="linkClass" [routerLink]="link.routerLink" [queryParams]="link.queryParams" (click)="onLeafClick($event, link)">
+                                  <a role="menuitem" [class]="linkClass" [routerLink]="link.disabled ? null : link.routerLink" [queryParams]="link.queryParams" (click)="onLeafClick($event, link)">
                                     <ng-container [ngTemplateOutlet]="contentTpl" [ngTemplateOutletContext]="{ $implicit: link, root: false }" />
                                   </a>
                                 } @else if (link.url) {
-                                  <a role="menuitem" [class]="linkClass" [href]="link.url" [target]="link.target ?? null" (click)="onLeafClick($event, link)">
+                                  <a role="menuitem" [class]="linkClass" [attr.href]="link.disabled ? null : link.url" [target]="link.target ?? null" (click)="onLeafClick($event, link)">
                                     <ng-container [ngTemplateOutlet]="contentTpl" [ngTemplateOutletContext]="{ $implicit: link, root: false }" />
                                   </a>
                                 } @else {
@@ -20078,11 +20362,11 @@ class MegaMenuComponent {
             @let mClass = leafItemClass(item);
             <li [class]="item.styleClass ?? null" [style]="item.style ?? null">
               @if (item.routerLink) {
-                <a role="menuitem" [class]="mClass" [routerLink]="item.routerLink" [queryParams]="item.queryParams" (click)="onMobileItemClick($event, item)">
+                <a role="menuitem" [class]="mClass" [routerLink]="item.disabled ? null : item.routerLink" [queryParams]="item.queryParams" (click)="onMobileItemClick($event, item)">
                   <ng-container [ngTemplateOutlet]="mobileContentTpl" [ngTemplateOutletContext]="{ $implicit: item }" />
                 </a>
               } @else if (item.url) {
-                <a role="menuitem" [class]="mClass" [href]="item.url" [target]="item.target ?? null" (click)="onMobileItemClick($event, item)">
+                <a role="menuitem" [class]="mClass" [attr.href]="item.disabled ? null : item.url" [target]="item.target ?? null" (click)="onMobileItemClick($event, item)">
                   <ng-container [ngTemplateOutlet]="mobileContentTpl" [ngTemplateOutletContext]="{ $implicit: item }" />
                 </a>
               } @else {
@@ -20148,11 +20432,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
           @if (item.visible !== false) {
             <li class="relative" role="none" (mouseenter)="onRootEnter(item)">
               @if (item.routerLink) {
-                <a role="menuitem" [class]="rootItemClass(item)" [routerLink]="item.routerLink" [queryParams]="item.queryParams" (click)="onRootClick($event, item)">
+                <a role="menuitem" [class]="rootItemClass(item)" [routerLink]="item.disabled ? null : item.routerLink" [queryParams]="item.queryParams" (click)="onRootClick($event, item)">
                   <ng-container [ngTemplateOutlet]="contentTpl" [ngTemplateOutletContext]="{ $implicit: item, root: true }" />
                 </a>
               } @else if (item.url) {
-                <a role="menuitem" [class]="rootItemClass(item)" [href]="item.url" [target]="item.target ?? null" (click)="onRootClick($event, item)">
+                <a role="menuitem" [class]="rootItemClass(item)" [attr.href]="item.disabled ? null : item.url" [target]="item.target ?? null" (click)="onRootClick($event, item)">
                   <ng-container [ngTemplateOutlet]="contentTpl" [ngTemplateOutletContext]="{ $implicit: item, root: true }" />
                 </a>
               } @else {
@@ -20181,11 +20465,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                               @let linkClass = leafItemClass(link);
                               <li [class]="link.styleClass ?? null" [style]="link.style ?? null">
                                 @if (link.routerLink) {
-                                  <a role="menuitem" [class]="linkClass" [routerLink]="link.routerLink" [queryParams]="link.queryParams" (click)="onLeafClick($event, link)">
+                                  <a role="menuitem" [class]="linkClass" [routerLink]="link.disabled ? null : link.routerLink" [queryParams]="link.queryParams" (click)="onLeafClick($event, link)">
                                     <ng-container [ngTemplateOutlet]="contentTpl" [ngTemplateOutletContext]="{ $implicit: link, root: false }" />
                                   </a>
                                 } @else if (link.url) {
-                                  <a role="menuitem" [class]="linkClass" [href]="link.url" [target]="link.target ?? null" (click)="onLeafClick($event, link)">
+                                  <a role="menuitem" [class]="linkClass" [attr.href]="link.disabled ? null : link.url" [target]="link.target ?? null" (click)="onLeafClick($event, link)">
                                     <ng-container [ngTemplateOutlet]="contentTpl" [ngTemplateOutletContext]="{ $implicit: link, root: false }" />
                                   </a>
                                 } @else {
@@ -20235,11 +20519,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
             @let mClass = leafItemClass(item);
             <li [class]="item.styleClass ?? null" [style]="item.style ?? null">
               @if (item.routerLink) {
-                <a role="menuitem" [class]="mClass" [routerLink]="item.routerLink" [queryParams]="item.queryParams" (click)="onMobileItemClick($event, item)">
+                <a role="menuitem" [class]="mClass" [routerLink]="item.disabled ? null : item.routerLink" [queryParams]="item.queryParams" (click)="onMobileItemClick($event, item)">
                   <ng-container [ngTemplateOutlet]="mobileContentTpl" [ngTemplateOutletContext]="{ $implicit: item }" />
                 </a>
               } @else if (item.url) {
-                <a role="menuitem" [class]="mClass" [href]="item.url" [target]="item.target ?? null" (click)="onMobileItemClick($event, item)">
+                <a role="menuitem" [class]="mClass" [attr.href]="item.disabled ? null : item.url" [target]="item.target ?? null" (click)="onMobileItemClick($event, item)">
                   <ng-container [ngTemplateOutlet]="mobileContentTpl" [ngTemplateOutletContext]="{ $implicit: item }" />
                 </a>
               } @else {
@@ -20305,8 +20589,10 @@ class PanelMenuComponent {
             : 'w-full flex items-center gap-2.5 px-3 py-2.5 text-sm text-left rounded-md transition-colors text-(--f-text-color) hover:bg-(--f-content-hover-background) cursor-pointer focus:outline-none focus-visible:ring-focus';
     }
     onItemClick(e, item, level) {
-        if (item.disabled)
+        if (item.disabled) {
+            e.preventDefault();
             return;
+        }
         if (item.items?.length) {
             this.expanded.update(s => {
                 const next = new Set(s);
@@ -20401,7 +20687,7 @@ class PanelMenuComponent {
                   [attr.aria-level]="level + 1"
                   [attr.aria-expanded]="item.items?.length ? isExpanded(item) : null"
                   [attr.aria-disabled]="item.disabled || null"
-                  [routerLink]="item.routerLink"
+                  [routerLink]="item.disabled ? null : item.routerLink"
                   [queryParams]="item.queryParams"
                   (click)="onItemClick($event, item, level)"
                 >
@@ -20414,7 +20700,7 @@ class PanelMenuComponent {
                   [attr.aria-level]="level + 1"
                   [attr.aria-expanded]="item.items?.length ? isExpanded(item) : null"
                   [attr.aria-disabled]="item.disabled || null"
-                  [href]="item.url"
+                  [attr.href]="item.disabled ? null : item.url"
                   [target]="item.target ?? null"
                   (click)="onItemClick($event, item, level)"
                 >
@@ -20481,7 +20767,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                   [attr.aria-level]="level + 1"
                   [attr.aria-expanded]="item.items?.length ? isExpanded(item) : null"
                   [attr.aria-disabled]="item.disabled || null"
-                  [routerLink]="item.routerLink"
+                  [routerLink]="item.disabled ? null : item.routerLink"
                   [queryParams]="item.queryParams"
                   (click)="onItemClick($event, item, level)"
                 >
@@ -20494,7 +20780,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                   [attr.aria-level]="level + 1"
                   [attr.aria-expanded]="item.items?.length ? isExpanded(item) : null"
                   [attr.aria-disabled]="item.disabled || null"
-                  [href]="item.url"
+                  [attr.href]="item.disabled ? null : item.url"
                   [target]="item.target ?? null"
                   (click)="onItemClick($event, item, level)"
                 >
@@ -20580,11 +20866,11 @@ class BreadcrumbComponent {
             @if (itemTpl()) {
               <ng-container [ngTemplateOutlet]="itemTpl()" [ngTemplateOutletContext]="{ $implicit: home() }" />
             } @else if (home()!.routerLink) {
-              <a [class]="homeClass()" [attr.aria-disabled]="home()!.disabled ? true : null" [attr.tabindex]="home()!.disabled ? -1 : null" [routerLink]="home()!.routerLink" [queryParams]="home()!.queryParams" (click)="onItemClick($event, home()!)">
+              <a [class]="homeClass()" [attr.aria-disabled]="home()!.disabled ? true : null" [attr.tabindex]="home()!.disabled ? -1 : null" [routerLink]="home()!.disabled ? null : home()!.routerLink" [queryParams]="home()!.queryParams" (click)="onItemClick($event, home()!)">
                 <ui-icon [name]="home()!.icon || 'home'" class="text-xs"></ui-icon>
               </a>
             } @else if (home()!.url) {
-              <a [class]="homeClass()" [attr.aria-disabled]="home()!.disabled ? true : null" [attr.tabindex]="home()!.disabled ? -1 : null" [href]="home()!.url" [target]="home()!.target ?? null" (click)="onItemClick($event, home()!)">
+              <a [class]="homeClass()" [attr.aria-disabled]="home()!.disabled ? true : null" [attr.tabindex]="home()!.disabled ? -1 : null" [attr.href]="home()!.disabled ? null : home()!.url" [target]="home()!.target ?? null" (click)="onItemClick($event, home()!)">
                 <ui-icon [name]="home()!.icon || 'home'" class="text-xs"></ui-icon>
               </a>
             } @else {
@@ -20606,12 +20892,12 @@ class BreadcrumbComponent {
             @if (itemTpl()) {
               <ng-container [ngTemplateOutlet]="itemTpl()" [ngTemplateOutletContext]="{ $implicit: item }" />
             } @else if (item.routerLink) {
-              <a [class]="itemLinkClass(item, $last)" [attr.aria-current]="$last ? 'page' : null" [attr.aria-disabled]="item.disabled ? true : null" [attr.tabindex]="item.disabled ? -1 : null" [routerLink]="item.routerLink" [queryParams]="item.queryParams" (click)="onItemClick($event, item)">
+              <a [class]="itemLinkClass(item, $last)" [attr.aria-current]="$last ? 'page' : null" [attr.aria-disabled]="item.disabled ? true : null" [attr.tabindex]="item.disabled ? -1 : null" [routerLink]="item.disabled ? null : item.routerLink" [queryParams]="item.queryParams" (click)="onItemClick($event, item)">
                 @if (item.icon) { <ui-icon [name]="item.icon" class="text-xs"></ui-icon> }
                 {{ item.label }}
               </a>
             } @else if (item.url) {
-              <a [class]="itemLinkClass(item, $last)" [attr.aria-current]="$last ? 'page' : null" [attr.aria-disabled]="item.disabled ? true : null" [attr.tabindex]="item.disabled ? -1 : null" [href]="item.url" [target]="item.target ?? null" (click)="onItemClick($event, item)">
+              <a [class]="itemLinkClass(item, $last)" [attr.aria-current]="$last ? 'page' : null" [attr.aria-disabled]="item.disabled ? true : null" [attr.tabindex]="item.disabled ? -1 : null" [attr.href]="item.disabled ? null : item.url" [target]="item.target ?? null" (click)="onItemClick($event, item)">
                 @if (item.icon) { <ui-icon [name]="item.icon" class="text-xs"></ui-icon> }
                 {{ item.label }}
               </a>
@@ -20648,11 +20934,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
             @if (itemTpl()) {
               <ng-container [ngTemplateOutlet]="itemTpl()" [ngTemplateOutletContext]="{ $implicit: home() }" />
             } @else if (home()!.routerLink) {
-              <a [class]="homeClass()" [attr.aria-disabled]="home()!.disabled ? true : null" [attr.tabindex]="home()!.disabled ? -1 : null" [routerLink]="home()!.routerLink" [queryParams]="home()!.queryParams" (click)="onItemClick($event, home()!)">
+              <a [class]="homeClass()" [attr.aria-disabled]="home()!.disabled ? true : null" [attr.tabindex]="home()!.disabled ? -1 : null" [routerLink]="home()!.disabled ? null : home()!.routerLink" [queryParams]="home()!.queryParams" (click)="onItemClick($event, home()!)">
                 <ui-icon [name]="home()!.icon || 'home'" class="text-xs"></ui-icon>
               </a>
             } @else if (home()!.url) {
-              <a [class]="homeClass()" [attr.aria-disabled]="home()!.disabled ? true : null" [attr.tabindex]="home()!.disabled ? -1 : null" [href]="home()!.url" [target]="home()!.target ?? null" (click)="onItemClick($event, home()!)">
+              <a [class]="homeClass()" [attr.aria-disabled]="home()!.disabled ? true : null" [attr.tabindex]="home()!.disabled ? -1 : null" [attr.href]="home()!.disabled ? null : home()!.url" [target]="home()!.target ?? null" (click)="onItemClick($event, home()!)">
                 <ui-icon [name]="home()!.icon || 'home'" class="text-xs"></ui-icon>
               </a>
             } @else {
@@ -20674,12 +20960,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
             @if (itemTpl()) {
               <ng-container [ngTemplateOutlet]="itemTpl()" [ngTemplateOutletContext]="{ $implicit: item }" />
             } @else if (item.routerLink) {
-              <a [class]="itemLinkClass(item, $last)" [attr.aria-current]="$last ? 'page' : null" [attr.aria-disabled]="item.disabled ? true : null" [attr.tabindex]="item.disabled ? -1 : null" [routerLink]="item.routerLink" [queryParams]="item.queryParams" (click)="onItemClick($event, item)">
+              <a [class]="itemLinkClass(item, $last)" [attr.aria-current]="$last ? 'page' : null" [attr.aria-disabled]="item.disabled ? true : null" [attr.tabindex]="item.disabled ? -1 : null" [routerLink]="item.disabled ? null : item.routerLink" [queryParams]="item.queryParams" (click)="onItemClick($event, item)">
                 @if (item.icon) { <ui-icon [name]="item.icon" class="text-xs"></ui-icon> }
                 {{ item.label }}
               </a>
             } @else if (item.url) {
-              <a [class]="itemLinkClass(item, $last)" [attr.aria-current]="$last ? 'page' : null" [attr.aria-disabled]="item.disabled ? true : null" [attr.tabindex]="item.disabled ? -1 : null" [href]="item.url" [target]="item.target ?? null" (click)="onItemClick($event, item)">
+              <a [class]="itemLinkClass(item, $last)" [attr.aria-current]="$last ? 'page' : null" [attr.aria-disabled]="item.disabled ? true : null" [attr.tabindex]="item.disabled ? -1 : null" [attr.href]="item.disabled ? null : item.url" [target]="item.target ?? null" (click)="onItemClick($event, item)">
                 @if (item.icon) { <ui-icon [name]="item.icon" class="text-xs"></ui-icon> }
                 {{ item.label }}
               </a>
@@ -20749,6 +21035,9 @@ class SpeedDialComponent {
     onShow = output();
     onHide = output();
     onVisibleChange = output();
+    constructor() {
+        blockClicksWhileDisabled(this.disabled);
+    }
     _el = inject(ElementRef);
     _overlayStack = inject(OverlayStackService);
     _toggleBtn = viewChild('toggleButton', /* @ts-ignore */
@@ -20965,7 +21254,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
     }
   `,
                 }]
-        }], propDecorators: { model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], hideIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideIcon", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], rotateAnimation: [{ type: i0.Input, args: [{ isSignal: true, alias: "rotateAnimation", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], transitionDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "transitionDelay", required: false }] }], mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], hideOnClickOutside: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideOnClickOutside", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], onClick: [{ type: i0.Output, args: ["onClick"] }], onShow: [{ type: i0.Output, args: ["onShow"] }], onHide: [{ type: i0.Output, args: ["onHide"] }], onVisibleChange: [{ type: i0.Output, args: ["onVisibleChange"] }], _toggleBtn: [{ type: i0.ViewChild, args: ['toggleButton', { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], hideIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideIcon", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], rotateAnimation: [{ type: i0.Input, args: [{ isSignal: true, alias: "rotateAnimation", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], transitionDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "transitionDelay", required: false }] }], mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], hideOnClickOutside: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideOnClickOutside", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], onClick: [{ type: i0.Output, args: ["onClick"] }], onShow: [{ type: i0.Output, args: ["onShow"] }], onHide: [{ type: i0.Output, args: ["onHide"] }], onVisibleChange: [{ type: i0.Output, args: ["onVisibleChange"] }], _toggleBtn: [{ type: i0.ViewChild, args: ['toggleButton', { isSignal: true }] }] } });
 
 class DockComponent {
     model = input([], /* @ts-ignore */
@@ -21273,6 +21562,13 @@ class InputOtpComponent {
     ...(ngDevMode ? [{ debugName: "length" }] : /* istanbul ignore next */ []));
     mask = input(false, { ...(ngDevMode ? { debugName: "mask" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    _formDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_formDisabled" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this._formDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    constructor() {
+        blockClicksWhileDisabled(this.isDisabled);
+    }
     readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     integerOnly = input(true, { ...(ngDevMode ? { debugName: "integerOnly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -21368,7 +21664,7 @@ class InputOtpComponent {
         }
     }
     onPaste(e) {
-        if (this.readonly() || this.disabled())
+        if (this.readonly() || this.isDisabled())
             return;
         e.preventDefault();
         let text = e.clipboardData?.getData('text') ?? '';
@@ -21399,7 +21695,7 @@ class InputOtpComponent {
     }
     registerOnChange(fn) { this._onChange = fn; }
     registerOnTouched(fn) { this._onTouched = fn; }
-    setDisabledState() { }
+    setDisabledState(isDisabled) { this._formDisabled.set(isDisabled); }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: InputOtpComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: InputOtpComponent, isStandalone: true, selector: "f-inputotp", inputs: { length: { classPropertyName: "length", publicName: "length", 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 }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, integerOnly: { classPropertyName: "integerOnly", publicName: "integerOnly", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChangeEvent: "onChange", onFocus: "onFocus", onBlur: "onBlur" }, host: { classAttribute: "inline-block" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputOtpComponent), multi: true }], queries: [{ propertyName: "cellTemplate", first: true, predicate: ["cell"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "cells", predicate: ["cell"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div [class]="groupClass()">
@@ -21417,7 +21713,7 @@ class InputOtpComponent {
             [class]="cellClass()"
             [value]="digits()[i] || ''"
             [type]="mask() ? 'password' : 'text'"
-            [disabled]="disabled()"
+            [disabled]="isDisabled()"
             [readOnly]="readonly()"
             (input)="onDigitInput($event, i)"
             (keydown)="onKeydown($event, i)"
@@ -21453,7 +21749,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
             [class]="cellClass()"
             [value]="digits()[i] || ''"
             [type]="mask() ? 'password' : 'text'"
-            [disabled]="disabled()"
+            [disabled]="isDisabled()"
             [readOnly]="readonly()"
             (input)="onDigitInput($event, i)"
             (keydown)="onKeydown($event, i)"
@@ -21466,7 +21762,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
     </div>
   `,
                 }]
-        }], propDecorators: { length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], integerOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "integerOnly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], onChangeEvent: [{ type: i0.Output, args: ["onChange"] }], onFocus: [{ type: i0.Output, args: ["onFocus"] }], onBlur: [{ type: i0.Output, args: ["onBlur"] }], cellTemplate: [{ type: i0.ContentChild, args: ['cell', { isSignal: true }] }], cells: [{ type: i0.ViewChildren, args: ['cell', { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], integerOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "integerOnly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], onChangeEvent: [{ type: i0.Output, args: ["onChange"] }], onFocus: [{ type: i0.Output, args: ["onFocus"] }], onBlur: [{ type: i0.Output, args: ["onBlur"] }], cellTemplate: [{ type: i0.ContentChild, args: ['cell', { isSignal: true }] }], cells: [{ type: i0.ViewChildren, args: ['cell', { isSignal: true }] }] } });
 
 class SliderComponent {
     _track = viewChild('track', /* @ts-ignore */
@@ -21476,6 +21772,13 @@ class SliderComponent {
     step = input(1, { ...(ngDevMode ? { debugName: "step" } : /* istanbul ignore next */ {}), transform: numberAttribute });
     range = input(false, { ...(ngDevMode ? { debugName: "range" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    _formDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_formDisabled" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this._formDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    constructor() {
+        blockClicksWhileDisabled(this.isDisabled);
+    }
     orientation = input('horizontal', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
     styleClass = input('', /* @ts-ignore */
@@ -21508,7 +21811,7 @@ class SliderComponent {
     ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
     trackClass = computed(() => {
         const dims = this.orientation() === 'vertical' ? 'relative w-1.5 h-full' : 'relative h-1.5 w-full';
-        const state = this.disabled() ? 'opacity-60 pointer-events-none' : 'cursor-pointer';
+        const state = this.isDisabled() ? 'opacity-60 pointer-events-none' : 'cursor-pointer';
         return `${dims} rounded-full bg-(--f-content-hover-background) ${state}`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "trackClass" }] : /* istanbul ignore next */ []));
@@ -21534,7 +21837,7 @@ class SliderComponent {
         return Math.min(this.max(), Math.max(this.min(), stepped));
     }
     onTrackDown(e) {
-        if (this.disabled())
+        if (this.isDisabled())
             return;
         const value = this.fromPointer(e.clientX, e.clientY);
         if (this.range()) {
@@ -21549,19 +21852,19 @@ class SliderComponent {
     }
     onHandleDown(e, idx) {
         e.stopPropagation();
-        if (this.disabled())
+        if (this.isDisabled())
             return;
         e.currentTarget.focus();
         this.startDrag(idx);
     }
     onHandleTouchStart(e, idx) {
         e.stopPropagation();
-        if (this.disabled())
+        if (this.isDisabled())
             return;
         this.startTouchDrag(idx);
     }
     onKeydown(e, idx) {
-        if (this.disabled())
+        if (this.isDisabled())
             return;
         const step = this.step();
         const current = idx === 0 ? this.start() : this.end();
@@ -21640,7 +21943,7 @@ class SliderComponent {
     }
     registerOnChange(fn) { this._onChange = fn; }
     registerOnTouched(fn) { this._onTouched = fn; }
-    setDisabledState() { }
+    setDisabledState(isDisabled) { this._formDisabled.set(isDisabled); }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: SliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: SliderComponent, isStandalone: true, selector: "f-slider", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", 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: { onChangeEvent: "onChange", onSlideEnd: "onSlideEnd" }, host: { properties: { "class": "hostClass()", "style": "style()" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SliderComponent), multi: true }], viewQueries: [{ propertyName: "_track", first: true, predicate: ["track"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div
@@ -21660,7 +21963,7 @@ class SliderComponent {
           [attr.aria-valuemax]="max()"
           [attr.aria-valuenow]="start()"
           [attr.aria-orientation]="orientation()"
-          [attr.aria-disabled]="disabled() || null"
+          [attr.aria-disabled]="isDisabled() || null"
           [style.left.%]="orientation() === 'horizontal' ? startPercent() : null"
           [style.bottom.%]="orientation() === 'vertical' ? startPercent() : null"
           (mousedown)="onHandleDown($event, 0)"
@@ -21676,7 +21979,7 @@ class SliderComponent {
         [attr.aria-valuemax]="max()"
         [attr.aria-valuenow]="end()"
         [attr.aria-orientation]="orientation()"
-        [attr.aria-disabled]="disabled() || null"
+        [attr.aria-disabled]="isDisabled() || null"
         [style.left.%]="orientation() === 'horizontal' ? endPercent() : null"
         [style.bottom.%]="orientation() === 'vertical' ? endPercent() : null"
         (mousedown)="onHandleDown($event, 1)"
@@ -21710,7 +22013,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
           [attr.aria-valuemax]="max()"
           [attr.aria-valuenow]="start()"
           [attr.aria-orientation]="orientation()"
-          [attr.aria-disabled]="disabled() || null"
+          [attr.aria-disabled]="isDisabled() || null"
           [style.left.%]="orientation() === 'horizontal' ? startPercent() : null"
           [style.bottom.%]="orientation() === 'vertical' ? startPercent() : null"
           (mousedown)="onHandleDown($event, 0)"
@@ -21726,7 +22029,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
         [attr.aria-valuemax]="max()"
         [attr.aria-valuenow]="end()"
         [attr.aria-orientation]="orientation()"
-        [attr.aria-disabled]="disabled() || null"
+        [attr.aria-disabled]="isDisabled() || null"
         [style.left.%]="orientation() === 'horizontal' ? endPercent() : null"
         [style.bottom.%]="orientation() === 'vertical' ? endPercent() : null"
         (mousedown)="onHandleDown($event, 1)"
@@ -21736,7 +22039,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
     </div>
   `,
                 }]
-        }], propDecorators: { _track: [{ type: i0.ViewChild, args: ['track', { isSignal: true }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], onChangeEvent: [{ type: i0.Output, args: ["onChange"] }], onSlideEnd: [{ type: i0.Output, args: ["onSlideEnd"] }] } });
+        }], ctorParameters: () => [], propDecorators: { _track: [{ type: i0.ViewChild, args: ['track', { isSignal: true }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], onChangeEvent: [{ type: i0.Output, args: ["onChange"] }], onSlideEnd: [{ type: i0.Output, args: ["onSlideEnd"] }] } });
 
 class KnobComponent {
     _el = inject((ElementRef));
@@ -21752,6 +22055,13 @@ class KnobComponent {
     ...(ngDevMode ? [{ debugName: "strokeWidth" }] : /* istanbul ignore next */ []));
     showValue = input(true, { ...(ngDevMode ? { debugName: "showValue" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    _formDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_formDisabled" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this._formDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    constructor() {
+        blockClicksWhileDisabled(this.isDisabled);
+    }
     readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     valueColor = input('var(--color-primary)', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "valueColor" }] : /* istanbul ignore next */ []));
@@ -21786,7 +22096,7 @@ class KnobComponent {
     displayValue = computed(() => this.valueTemplate().replace('{value}', String(this.value())), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
     onKeydown(e) {
-        if (this.disabled() || this.readonly())
+        if (this.isDisabled() || this.readonly())
             return;
         const step = this.step();
         const current = this.value();
@@ -21810,7 +22120,7 @@ class KnobComponent {
         this._onTouched();
     }
     onDown(e) {
-        if (this.disabled() || this.readonly())
+        if (this.isDisabled() || this.readonly())
             return;
         this.updateFromEvent(e);
         const onMove = (ev) => this.updateFromEvent(ev);
@@ -21842,7 +22152,7 @@ class KnobComponent {
     writeValue(v) { this._value.set(v ?? this.min()); }
     registerOnChange(fn) { this._onChange = fn; }
     registerOnTouched(fn) { this._onTouched = fn; }
-    setDisabledState() { }
+    setDisabledState(isDisabled) { this._formDisabled.set(isDisabled); }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: KnobComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: KnobComponent, isStandalone: true, selector: "f-knob", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, valueColor: { classPropertyName: "valueColor", publicName: "valueColor", isSignal: true, isRequired: false, transformFunction: null }, rangeColor: { classPropertyName: "rangeColor", publicName: "rangeColor", isSignal: true, isRequired: false, transformFunction: null }, textColor: { classPropertyName: "textColor", publicName: "textColor", isSignal: true, isRequired: false, transformFunction: null }, valueTemplate: { classPropertyName: "valueTemplate", publicName: "valueTemplate", 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 } }, host: { properties: { "class": "hostClass()", "style": "style()" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => KnobComponent), multi: true }], ngImport: i0, template: `
     <svg
@@ -21850,9 +22160,9 @@ class KnobComponent {
       [attr.height]="size()"
       [attr.viewBox]="'0 0 ' + size() + ' ' + size()"
       class="select-none focus:outline-none focus-visible:ring-focus rounded-full"
-      [class.cursor-pointer]="!disabled() && !readonly()"
-      [class.opacity-60]="disabled()"
-      [attr.tabindex]="disabled() ? null : 0"
+      [class.cursor-pointer]="!isDisabled() && !readonly()"
+      [class.opacity-60]="isDisabled()"
+      [attr.tabindex]="isDisabled() ? null : 0"
       role="slider"
       [attr.aria-valuemin]="min()"
       [attr.aria-valuemax]="max()"
@@ -21860,7 +22170,7 @@ class KnobComponent {
       [attr.aria-valuetext]="displayValue()"
       [attr.aria-label]="ariaLabel() || null"
       [attr.aria-readonly]="readonly() ? 'true' : null"
-      [attr.aria-disabled]="disabled() ? 'true' : null"
+      [attr.aria-disabled]="isDisabled() ? 'true' : null"
       (mousedown)="onDown($event)"
       (keydown)="onKeydown($event)"
     >
@@ -21898,9 +22208,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
       [attr.height]="size()"
       [attr.viewBox]="'0 0 ' + size() + ' ' + size()"
       class="select-none focus:outline-none focus-visible:ring-focus rounded-full"
-      [class.cursor-pointer]="!disabled() && !readonly()"
-      [class.opacity-60]="disabled()"
-      [attr.tabindex]="disabled() ? null : 0"
+      [class.cursor-pointer]="!isDisabled() && !readonly()"
+      [class.opacity-60]="isDisabled()"
+      [attr.tabindex]="isDisabled() ? null : 0"
       role="slider"
       [attr.aria-valuemin]="min()"
       [attr.aria-valuemax]="max()"
@@ -21908,7 +22218,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
       [attr.aria-valuetext]="displayValue()"
       [attr.aria-label]="ariaLabel() || null"
       [attr.aria-readonly]="readonly() ? 'true' : null"
-      [attr.aria-disabled]="disabled() ? 'true' : null"
+      [attr.aria-disabled]="isDisabled() ? 'true' : null"
       (mousedown)="onDown($event)"
       (keydown)="onKeydown($event)"
     >
@@ -21934,7 +22244,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
     </svg>
   `,
                 }]
-        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], valueColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueColor", required: false }] }], rangeColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeColor", required: false }] }], textColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "textColor", required: false }] }], valueTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueTemplate", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], valueColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueColor", required: false }] }], rangeColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeColor", required: false }] }], textColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "textColor", required: false }] }], valueTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueTemplate", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }] } });
 
 class CascadeSelectComponent {
     _el = inject(ElementRef);
@@ -21951,6 +22261,13 @@ class CascadeSelectComponent {
     placeholder = input('Select', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    _formDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_formDisabled" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this._formDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    constructor() {
+        blockClicksWhileDisabled(this.isDisabled);
+    }
     invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     touched = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
@@ -22031,7 +22348,7 @@ class CascadeSelectComponent {
         null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "emptyTpl" }] : /* istanbul ignore next */ []));
     triggerClass = computed(() => {
-        const base = 'w-full min-h-[34px] flex items-center gap-2 f-field-compact text-sm border bg-(--f-form-field-background) focus:outline-none focus-visible:ring-focus transition-all duration-[var(--f-transition-duration)]';
+        const base = 'w-full flex items-center gap-2 f-field-compact text-sm 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
@@ -22040,7 +22357,7 @@ class CascadeSelectComponent {
             : showInvalid
                 ? 'border-red-400'
                 : 'border-(--f-form-field-border-color) hover:border-(--f-form-field-hover-border-color)';
-        const disabledClass = this.disabled() || this.loading()
+        const disabledClass = this.isDisabled() || this.loading()
             ? 'opacity-60 cursor-not-allowed'
             : 'cursor-pointer';
         return `${base} ${stateClass} ${disabledClass}`;
@@ -22076,7 +22393,7 @@ class CascadeSelectComponent {
         return path.length > 0 && path[path.length - 1] === opt;
     }
     toggleOpen() {
-        if (this.disabled() || this.loading())
+        if (this.isDisabled() || this.loading())
             return;
         this.open() ? this.closePanel() : this.openPanel();
     }
@@ -22120,7 +22437,7 @@ class CascadeSelectComponent {
         this.closePanel();
     }
     onKeyDown(e) {
-        if (this.disabled() || this.loading())
+        if (this.isDisabled() || this.loading())
             return;
         switch (e.key) {
             case 'ArrowDown':
@@ -22238,7 +22555,7 @@ class CascadeSelectComponent {
     registerOnTouched(fn) {
         this._onTouched = fn;
     }
-    setDisabledState() { }
+    setDisabledState(isDisabled) { this._formDisabled.set(isDisabled); }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: CascadeSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: CascadeSelectComponent, isStandalone: true, selector: "f-cascadeselect", 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 }, optionChildren: { classPropertyName: "optionChildren", publicName: "optionChildren", isSignal: true, isRequired: false, transformFunction: null }, optionGroupChildren: { classPropertyName: "optionGroupChildren", publicName: "optionGroupChildren", 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 }, 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 }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, dropdownIcon: { classPropertyName: "dropdownIcon", publicName: "dropdownIcon", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", 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: [
             {
@@ -22254,9 +22571,9 @@ class CascadeSelectComponent {
         role="combobox"
         aria-haspopup="tree"
         [attr.aria-expanded]="open()"
-        [attr.aria-disabled]="disabled() || null"
+        [attr.aria-disabled]="isDisabled() || null"
         [class]="triggerClass()"
-        [disabled]="disabled() || loading()"
+        [disabled]="isDisabled() || loading()"
         (click)="toggleOpen()"
         (keydown)="onKeyDown($event)"
       >
@@ -22284,7 +22601,7 @@ class CascadeSelectComponent {
         }
         <span class="flex items-center gap-1 shrink-0">
           @if (
-            showClear() && selectedPath().length && !disabled() && !loading()
+            showClear() && selectedPath().length && !isDisabled() && !loading()
           ) {
             <ui-icon
               name="x"
@@ -22421,9 +22738,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
         role="combobox"
         aria-haspopup="tree"
         [attr.aria-expanded]="open()"
-        [attr.aria-disabled]="disabled() || null"
+        [attr.aria-disabled]="isDisabled() || null"
         [class]="triggerClass()"
-        [disabled]="disabled() || loading()"
+        [disabled]="isDisabled() || loading()"
         (click)="toggleOpen()"
         (keydown)="onKeyDown($event)"
       >
@@ -22451,7 +22768,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
         }
         <span class="flex items-center gap-1 shrink-0">
           @if (
-            showClear() && selectedPath().length && !disabled() && !loading()
+            showClear() && selectedPath().length && !isDisabled() && !loading()
           ) {
             <ui-icon
               name="x"
@@ -22563,7 +22880,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
     </div>
   `,
                 }]
-        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], optionChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionChildren", required: false }] }], optionGroupChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroupChildren", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], dropdownIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownIcon", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], valueRef: [{ type: i0.ContentChild, args: ['value', { isSignal: true }] }], optionRef: [{ type: i0.ContentChild, args: ['option', { isSignal: true }] }], groupRef: [{ type: i0.ContentChild, args: ['group', { isSignal: true }] }], emptyRef: [{ type: i0.ContentChild, args: ['empty', { isSignal: true }] }], fTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FTemplateDirective), { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], optionChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionChildren", required: false }] }], optionGroupChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroupChildren", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], dropdownIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownIcon", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], valueRef: [{ type: i0.ContentChild, args: ['value', { isSignal: true }] }], optionRef: [{ type: i0.ContentChild, args: ['option', { isSignal: true }] }], groupRef: [{ type: i0.ContentChild, args: ['group', { isSignal: true }] }], emptyRef: [{ type: i0.ContentChild, args: ['empty', { isSignal: true }] }], fTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FTemplateDirective), { isSignal: true }] }] } });
 
 const PRESETS = {
     pint: /\d/,
@@ -23060,6 +23377,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
 
 class InplaceComponent {
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    constructor() {
+        blockClicksWhileDisabled(this.disabled);
+    }
     closable = input(true, { ...(ngDevMode ? { debugName: "closable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     active = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
@@ -23154,7 +23474,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
     }
   `,
                 }]
-        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }, { type: i0.Output, args: ["activeChange"] }], onActivate: [{ type: i0.Output, args: ["onActivate"] }], onDeactivate: [{ type: i0.Output, args: ["onDeactivate"] }] } });
+        }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }, { type: i0.Output, args: ["activeChange"] }], onActivate: [{ type: i0.Output, args: ["onActivate"] }], onDeactivate: [{ type: i0.Output, args: ["onDeactivate"] }] } });
 
 let _uidCounter$1 = 0;
 function assignKey$1(node) {
@@ -23174,6 +23494,9 @@ class TreeComponent {
     emptyMessage = input('No records found', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    constructor() {
+        blockClicksWhileDisabled(this.disabled);
+    }
     styleClass = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "styleClass" }] : /* istanbul ignore next */ []));
     style = input(null, /* @ts-ignore */
@@ -23837,7 +24160,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
     </ng-template>
   `,
                 }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterBy", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], propagateSelectionUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "propagateSelectionUp", required: false }] }], propagateSelectionDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "propagateSelectionDown", required: false }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], virtualScrollItemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScrollItemSize", required: false }] }], dragdropScope: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragdropScope", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], nodeSelect: [{ type: i0.Output, args: ["nodeSelect"] }], nodeUnselect: [{ type: i0.Output, args: ["nodeUnselect"] }], nodeExpand: [{ type: i0.Output, args: ["nodeExpand"] }], nodeCollapse: [{ type: i0.Output, args: ["nodeCollapse"] }], nodeContextMenu: [{ type: i0.Output, args: ["nodeContextMenu"] }], nodeDrop: [{ type: i0.Output, args: ["nodeDrop"] }], onFilter: [{ type: i0.Output, args: ["onFilter"] }], headerRef: [{ type: i0.ContentChild, args: ['header', { isSignal: true }] }], footerRef: [{ type: i0.ContentChild, args: ['footer', { isSignal: true }] }], emptyRef: [{ type: i0.ContentChild, args: ['empty', { isSignal: true }] }], fTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FTemplateDirective), { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterBy", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], propagateSelectionUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "propagateSelectionUp", required: false }] }], propagateSelectionDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "propagateSelectionDown", required: false }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], virtualScrollItemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScrollItemSize", required: false }] }], dragdropScope: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragdropScope", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], nodeSelect: [{ type: i0.Output, args: ["nodeSelect"] }], nodeUnselect: [{ type: i0.Output, args: ["nodeUnselect"] }], nodeExpand: [{ type: i0.Output, args: ["nodeExpand"] }], nodeCollapse: [{ type: i0.Output, args: ["nodeCollapse"] }], nodeContextMenu: [{ type: i0.Output, args: ["nodeContextMenu"] }], nodeDrop: [{ type: i0.Output, args: ["nodeDrop"] }], onFilter: [{ type: i0.Output, args: ["onFilter"] }], headerRef: [{ type: i0.ContentChild, args: ['header', { isSignal: true }] }], footerRef: [{ type: i0.ContentChild, args: ['footer', { isSignal: true }] }], emptyRef: [{ type: i0.ContentChild, args: ['empty', { isSignal: true }] }], fTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FTemplateDirective), { isSignal: true }] }] } });
 
 class TimelineComponent {
     value = input([], /* @ts-ignore */
@@ -24861,6 +25184,9 @@ class OrganizationChartComponent {
     ...(ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []));
     collapsible = input(false, { ...(ngDevMode ? { debugName: "collapsible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    constructor() {
+        blockClicksWhileDisabled(this.disabled);
+    }
     loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     emptyMessage = input('No data', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
@@ -25089,7 +25415,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
       }
     </div>
   `, styles: [".f-orgchart-node{position:relative}.f-orgchart-children{display:flex;justify-content:center;position:relative;padding-top:1.5rem}.f-orgchart-children:before{content:\"\";position:absolute;top:0;left:50%;width:1px;height:1.5rem;background:var(--f-content-border-color)}.f-orgchart-child{position:relative;padding:0 1rem}.f-orgchart-child:before{content:\"\";position:absolute;top:0;left:0;right:0;height:1px;background:var(--f-content-border-color)}.f-orgchart-child:first-child:before{left:50%}.f-orgchart-child:last-child:before{right:50%}.f-orgchart-child:after{content:\"\";position:absolute;top:0;left:50%;width:1px;height:1rem;background:var(--f-content-border-color)}\n"] }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], nodeSelect: [{ type: i0.Output, args: ["nodeSelect"] }], nodeUnselect: [{ type: i0.Output, args: ["nodeUnselect"] }], nodeExpand: [{ type: i0.Output, args: ["nodeExpand"] }], nodeCollapse: [{ type: i0.Output, args: ["nodeCollapse"] }], contentTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], togglerIconRef: [{ type: i0.ContentChild, args: ['togglericon', { isSignal: true }] }], fTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FTemplateDirective), { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], nodeSelect: [{ type: i0.Output, args: ["nodeSelect"] }], nodeUnselect: [{ type: i0.Output, args: ["nodeUnselect"] }], nodeExpand: [{ type: i0.Output, args: ["nodeExpand"] }], nodeCollapse: [{ type: i0.Output, args: ["nodeCollapse"] }], contentTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], togglerIconRef: [{ type: i0.ContentChild, args: ['togglericon', { isSignal: true }] }], fTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FTemplateDirective), { isSignal: true }] }] } });
 
 class PickListComponent {
     source = model([], /* @ts-ignore */
@@ -25111,6 +25437,9 @@ class PickListComponent {
     stripedRows = input(false, { ...(ngDevMode ? { debugName: "stripedRows" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     responsive = input(false, { ...(ngDevMode ? { debugName: "responsive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    constructor() {
+        blockClicksWhileDisabled(this.disabled);
+    }
     sourceEmptyMessage = input('No records found', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "sourceEmptyMessage" }] : /* istanbul ignore next */ []));
     targetEmptyMessage = input('No records found', /* @ts-ignore */
@@ -25621,7 +25950,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
     </div>
   `,
                 }]
-        }], propDecorators: { source: [{ type: i0.Input, args: [{ isSignal: true, alias: "source", required: false }] }, { type: i0.Output, args: ["sourceChange"] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }, { type: i0.Output, args: ["targetChange"] }], sourceHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceHeader", required: false }] }], targetHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetHeader", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterBy", required: false }] }], sourceFilterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceFilterPlaceholder", required: false }] }], targetFilterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetFilterPlaceholder", required: false }] }], dragdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragdrop", required: false }] }], stripedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "stripedRows", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], sourceEmptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceEmptyMessage", required: false }] }], targetEmptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetEmptyMessage", required: false }] }], emptyFilterMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyFilterMessage", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], itemTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], sourceHeaderRef: [{ type: i0.ContentChild, args: ['sourceHeader', { isSignal: true }] }], targetHeaderRef: [{ type: i0.ContentChild, args: ['targetHeader', { isSignal: true }] }], fTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FTemplateDirective), { isSignal: true }] }], onMoveToTarget: [{ type: i0.Output, args: ["onMoveToTarget"] }], onMoveToSource: [{ type: i0.Output, args: ["onMoveToSource"] }], onSourceReorder: [{ type: i0.Output, args: ["onSourceReorder"] }], onTargetReorder: [{ type: i0.Output, args: ["onTargetReorder"] }] } });
+        }], ctorParameters: () => [], propDecorators: { source: [{ type: i0.Input, args: [{ isSignal: true, alias: "source", required: false }] }, { type: i0.Output, args: ["sourceChange"] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }, { type: i0.Output, args: ["targetChange"] }], sourceHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceHeader", required: false }] }], targetHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetHeader", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterBy", required: false }] }], sourceFilterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceFilterPlaceholder", required: false }] }], targetFilterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetFilterPlaceholder", required: false }] }], dragdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragdrop", required: false }] }], stripedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "stripedRows", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], sourceEmptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceEmptyMessage", required: false }] }], targetEmptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetEmptyMessage", required: false }] }], emptyFilterMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyFilterMessage", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], itemTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], sourceHeaderRef: [{ type: i0.ContentChild, args: ['sourceHeader', { isSignal: true }] }], targetHeaderRef: [{ type: i0.ContentChild, args: ['targetHeader', { isSignal: true }] }], fTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FTemplateDirective), { isSignal: true }] }], onMoveToTarget: [{ type: i0.Output, args: ["onMoveToTarget"] }], onMoveToSource: [{ type: i0.Output, args: ["onMoveToSource"] }], onSourceReorder: [{ type: i0.Output, args: ["onSourceReorder"] }], onTargetReorder: [{ type: i0.Output, args: ["onTargetReorder"] }] } });
 
 class OrderListComponent {
     value = model([], /* @ts-ignore */
@@ -25638,6 +25967,9 @@ class OrderListComponent {
     stripedRows = input(false, { ...(ngDevMode ? { debugName: "stripedRows" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     responsive = input(false, { ...(ngDevMode ? { debugName: "responsive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    constructor() {
+        blockClicksWhileDisabled(this.disabled);
+    }
     loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     emptyMessage = input('No records found', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
@@ -26037,7 +26369,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
     </div>
   `,
                 }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterBy", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], dragdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragdrop", required: false }] }], stripedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "stripedRows", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], emptyFilterMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyFilterMessage", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], itemTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], headerRef: [{ type: i0.ContentChild, args: ['header', { isSignal: true }] }], emptyRef: [{ type: i0.ContentChild, args: ['empty', { isSignal: true }] }], fTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FTemplateDirective), { isSignal: true }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], onReorder: [{ type: i0.Output, args: ["onReorder"] }], onSelectionChange: [{ type: i0.Output, args: ["onSelectionChange"] }] } });
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterBy", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], dragdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragdrop", required: false }] }], stripedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "stripedRows", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], emptyFilterMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyFilterMessage", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], itemTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], headerRef: [{ type: i0.ContentChild, args: ['header', { isSignal: true }] }], emptyRef: [{ type: i0.ContentChild, args: ['empty', { isSignal: true }] }], fTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FTemplateDirective), { isSignal: true }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], onReorder: [{ type: i0.Output, args: ["onReorder"] }], onSelectionChange: [{ type: i0.Output, args: ["onSelectionChange"] }] } });
 
 class GalleriaComponent {
     value = input([], /* @ts-ignore */