@flusys/ng-ui 6.0.0-rc.1 → 6.0.0

package/fesm2022/flusys-ng-ui.mjs

@@ -326,7 +326,7 @@ class ButtonComponent {
     }), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ButtonComponent, isStandalone: true, selector: "f-button", inputs: { 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 }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", 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 }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, plain: { classPropertyName: "plain", publicName: "plain", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, raised: { classPropertyName: "raised", publicName: "raised", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", 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 }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, badgeSeverity: { classPropertyName: "badgeSeverity", publicName: "badgeSeverity", isSignal: true, isRequired: false, transformFunction: null }, badgeClass: { classPropertyName: "badgeClass", publicName: "badgeClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick", onFocus: "onFocus", onBlur: "onBlur" }, host: { classAttribute: "relative block" }, queries: [{ propertyName: "iconTemplate", first: true, predicate: ["icon"], descendants: true, isSignal: true }, { propertyName: "loadingIconTemplate", first: true, predicate: ["loadingicon"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ButtonComponent, isStandalone: true, selector: "f-button", inputs: { 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 }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", 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 }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, plain: { classPropertyName: "plain", publicName: "plain", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, raised: { classPropertyName: "raised", publicName: "raised", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", 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 }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, badgeSeverity: { classPropertyName: "badgeSeverity", publicName: "badgeSeverity", isSignal: true, isRequired: false, transformFunction: null }, badgeClass: { classPropertyName: "badgeClass", publicName: "badgeClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick", onFocus: "onFocus", onBlur: "onBlur" }, host: { classAttribute: "relative" }, queries: [{ propertyName: "iconTemplate", first: true, predicate: ["icon"], descendants: true, isSignal: true }, { propertyName: "loadingIconTemplate", first: true, predicate: ["loadingicon"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <button
       [type]="type()"
       [disabled]="isDisabled()"
@@ -345,9 +345,15 @@ class ButtonComponent {
       @if (loading()) {
         @if (iconPos() === 'left' || iconPos() === 'top') {
           @if (loadingIconTemplate()) {
-            <ng-container [ngTemplateOutlet]="loadingIconTemplate()"></ng-container>
+            <ng-container
+              [ngTemplateOutlet]="loadingIconTemplate()"
+            ></ng-container>
           } @else {
-            <ui-icon [name]="loadingIcon() || 'loader-circle'" [spin]="true" class="shrink-0"></ui-icon>
+            <ui-icon
+              [name]="loadingIcon() || 'loader-circle'"
+              [spin]="true"
+              class="shrink-0"
+            ></ui-icon>
           }
         }
       } @else if (icon() && (iconPos() === 'left' || iconPos() === 'top')) {
@@ -364,9 +370,15 @@ class ButtonComponent {
       @if (loading()) {
         @if (iconPos() === 'right' || iconPos() === 'bottom') {
           @if (loadingIconTemplate()) {
-            <ng-container [ngTemplateOutlet]="loadingIconTemplate()"></ng-container>
+            <ng-container
+              [ngTemplateOutlet]="loadingIconTemplate()"
+            ></ng-container>
           } @else {
-            <ui-icon [name]="loadingIcon() || 'loader-circle'" [spin]="true" class="shrink-0"></ui-icon>
+            <ui-icon
+              [name]="loadingIcon() || 'loader-circle'"
+              [spin]="true"
+              class="shrink-0"
+            ></ui-icon>
           }
         }
       } @else if (icon() && (iconPos() === 'right' || iconPos() === 'bottom')) {
@@ -412,9 +424,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
       @if (loading()) {
         @if (iconPos() === 'left' || iconPos() === 'top') {
           @if (loadingIconTemplate()) {
-            <ng-container [ngTemplateOutlet]="loadingIconTemplate()"></ng-container>
+            <ng-container
+              [ngTemplateOutlet]="loadingIconTemplate()"
+            ></ng-container>
           } @else {
-            <ui-icon [name]="loadingIcon() || 'loader-circle'" [spin]="true" class="shrink-0"></ui-icon>
+            <ui-icon
+              [name]="loadingIcon() || 'loader-circle'"
+              [spin]="true"
+              class="shrink-0"
+            ></ui-icon>
           }
         }
       } @else if (icon() && (iconPos() === 'left' || iconPos() === 'top')) {
@@ -431,9 +449,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
       @if (loading()) {
         @if (iconPos() === 'right' || iconPos() === 'bottom') {
           @if (loadingIconTemplate()) {
-            <ng-container [ngTemplateOutlet]="loadingIconTemplate()"></ng-container>
+            <ng-container
+              [ngTemplateOutlet]="loadingIconTemplate()"
+            ></ng-container>
           } @else {
-            <ui-icon [name]="loadingIcon() || 'loader-circle'" [spin]="true" class="shrink-0"></ui-icon>
+            <ui-icon
+              [name]="loadingIcon() || 'loader-circle'"
+              [spin]="true"
+              class="shrink-0"
+            ></ui-icon>
           }
         }
       } @else if (icon() && (iconPos() === 'right' || iconPos() === 'bottom')) {
@@ -455,7 +479,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
     }
   `,
                     host: {
-                        class: 'relative block',
+                        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 }] }] } });
@@ -2274,6 +2298,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }], 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"] }] } });
 
+// `capture: true` is required because scroll events on inner scroll containers don't bubble to window.
+function repositionOnScroll(isActive, reposition) {
+    effect(onCleanup => {
+        if (!isActive() || typeof window === 'undefined')
+            return;
+        window.addEventListener('scroll', reposition, true);
+        window.addEventListener('resize', reposition);
+        onCleanup(() => {
+            window.removeEventListener('scroll', reposition, true);
+            window.removeEventListener('resize', reposition);
+        });
+    });
+}
+
 class PopoverComponent {
     dismissable = input(true, { ...(ngDevMode ? { debugName: "dismissable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     appendTo = input('body', /* @ts-ignore */
@@ -2344,6 +2382,7 @@ class PopoverComponent {
                 .pipe(takeUntilDestroyed())
                 .subscribe(() => this._windowWidth.set(window.innerWidth));
         }
+        repositionOnScroll(() => this.visible() && this.appendTo() === 'body', () => { this.position(); this.adjustForViewport(); });
     }
     toggle(event) {
         this._anchor = event.target;
@@ -2489,8 +2528,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
   `, styles: ["@keyframes popover-in{0%{opacity:0;transform:scale(.95) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}.popover-panel{animation:popover-in .15s cubic-bezier(.16,1,.3,1);transform-origin:top}\n"] }]
         }], ctorParameters: () => [], propDecorators: { dismissable: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissable", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], showCloseIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseIcon", required: false }] }], closeAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeAriaLabel", required: false }] }], focusOnShow: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusOnShow", required: false }] }], returnFocusOnHide: [{ type: i0.Input, args: [{ isSignal: true, alias: "returnFocusOnHide", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], breakpoints: [{ type: i0.Input, args: [{ isSignal: true, alias: "breakpoints", required: false }] }], onShow: [{ type: i0.Output, args: ["onShow"] }], onHide: [{ type: i0.Output, args: ["onHide"] }], panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }] } });
 
-const MONTH_NAMES = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
-const MONTH_SHORT_NAMES = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+const MONTH_NAMES = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+];
+const MONTH_SHORT_NAMES = [
+    'Jan',
+    'Feb',
+    'Mar',
+    'Apr',
+    'May',
+    'Jun',
+    'Jul',
+    'Aug',
+    'Sep',
+    'Oct',
+    'Nov',
+    'Dec',
+];
 const DAY_NAMES = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
 function stripTime(date) {
     return new Date(date.getFullYear(), date.getMonth(), date.getDate());
@@ -2498,7 +2563,9 @@ function stripTime(date) {
 function isSameDay(a, b) {
     if (!a || !b)
         return false;
-    return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+    return (a.getFullYear() === b.getFullYear() &&
+        a.getMonth() === b.getMonth() &&
+        a.getDate() === b.getDate());
 }
 function addDays(date, n) {
     const d = new Date(date);
@@ -2547,7 +2614,14 @@ function formatTime(date, hourFormat, showSeconds) {
 function parseDate(text, format) {
     if (!text.trim())
         return null;
-    const patternMap = { yyyy: '(\\d{4})', yy: '(\\d{2})', mm: '(\\d{2})', m: '(\\d{1,2})', dd: '(\\d{2})', d: '(\\d{1,2})' };
+    const patternMap = {
+        yyyy: '(\\d{4})',
+        yy: '(\\d{2})',
+        mm: '(\\d{2})',
+        m: '(\\d{1,2})',
+        dd: '(\\d{2})',
+        d: '(\\d{1,2})',
+    };
     const tokens = format.match(/yyyy|yy|mm|m|dd|d|[^a-zA-Z]+/g) ?? [];
     let regexStr = '';
     const order = [];
@@ -2630,7 +2704,7 @@ class DatePickerComponent {
     showOtherMonths = input(true, { ...(ngDevMode ? { debugName: "showOtherMonths" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     selectOtherMonths = input(false, { ...(ngDevMode ? { debugName: "selectOtherMonths" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     firstDayOfWeek = input(0, { ...(ngDevMode ? { debugName: "firstDayOfWeek" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-    appendTo = input('self', /* @ts-ignore */
+    appendTo = input('body', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "appendTo" }] : /* istanbul ignore next */ []));
     styleClass = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "styleClass" }] : /* istanbul ignore next */ []));
@@ -2659,7 +2733,7 @@ class DatePickerComponent {
     viewYear = this._viewYear.asReadonly();
     _gridMode = signal('date', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_gridMode" }] : /* istanbul ignore next */ []));
-    gridMode = computed(() => (this.view() !== 'date' ? this.view() : this._gridMode()), /* @ts-ignore */
+    gridMode = computed(() => this.view() !== 'date' ? this.view() : this._gridMode(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "gridMode" }] : /* istanbul ignore next */ []));
     _focusedDate = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_focusedDate" }] : /* istanbul ignore next */ []));
@@ -2686,7 +2760,9 @@ class DatePickerComponent {
     ...(ngDevMode ? [{ debugName: "popoverRef" }] : /* istanbul ignore next */ []));
     _inputRef = viewChild('inputEl', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_inputRef" }] : /* istanbul ignore next */ []));
-    open = computed(() => (this.appendTo() === 'body' ? (this.popoverRef()?.visible() ?? false) : this._open()), /* @ts-ignore */
+    open = computed(() => this.appendTo() === 'body'
+        ? (this.popoverRef()?.visible() ?? false)
+        : this._open(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     _el = inject(ElementRef);
     _onChange = () => { };
@@ -2701,7 +2777,7 @@ class DatePickerComponent {
     fTemplates = contentChildren(FTemplateDirective, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "fTemplates" }] : /* istanbul ignore next */ []));
     namedTemplate(name) {
-        return this.fTemplates().find(t => t.fTemplate() === name)?.templateRef ?? null;
+        return (this.fTemplates().find((t) => t.fTemplate() === name)?.templateRef ?? null);
     }
     headerTpl = computed(() => this.headerRef() ?? this.namedTemplate('header'), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "headerTpl" }] : /* istanbul ignore next */ []));
@@ -2742,7 +2818,7 @@ class DatePickerComponent {
         if (v == null)
             return false;
         if (Array.isArray(v))
-            return v.some(d => d instanceof Date);
+            return v.some((d) => d instanceof Date);
         return true;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
@@ -2756,12 +2832,17 @@ class DatePickerComponent {
             if (this.timeOnly())
                 return formatTime(d, this.hourFormat(), this.showSeconds());
             const base = this.formatDate(d, fmt);
-            return this.showTime() ? `${base} ${formatTime(d, this.hourFormat(), this.showSeconds())}` : base;
+            return this.showTime()
+                ? `${base} ${formatTime(d, this.hourFormat(), this.showSeconds())}`
+                : base;
         };
         if (mode === 'single' && v instanceof Date)
             return withTime(v);
         if (mode === 'multiple' && Array.isArray(v))
-            return v.filter((d) => d instanceof Date).map(withTime).join(', ');
+            return v
+                .filter((d) => d instanceof Date)
+                .map(withTime)
+                .join(', ');
         if (mode === 'range' && Array.isArray(v)) {
             const [start, end] = v;
             if (!start)
@@ -2774,9 +2855,15 @@ class DatePickerComponent {
     wrapperClass = computed(() => {
         const showInvalid = this.invalid() && this.touched();
         const stateClass = this.open()
-            ? (showInvalid ? 'border-red-400' : 'border-primary')
-            : (showInvalid ? 'border-red-400 hover:border-red-300' : 'border-(--f-form-field-border-color) hover:border-(--f-form-field-hover-border-color)');
-        const disabledClass = this.disabled() ? 'opacity-60 cursor-not-allowed' : '';
+            ? showInvalid
+                ? 'border-red-400'
+                : 'border-primary'
+            : showInvalid
+                ? 'border-red-400 hover:border-red-300'
+                : 'border-(--f-form-field-border-color) hover:border-(--f-form-field-hover-border-color)';
+        const disabledClass = this.disabled()
+            ? 'opacity-60 cursor-not-allowed'
+            : '';
         return `flex items-center border rounded-lg overflow-hidden bg-(--f-form-field-background) focus-within:ring-focus transition-all duration-[var(--f-transition-duration)] ${stateClass} ${disabledClass}`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "wrapperClass" }] : /* istanbul ignore next */ []));
@@ -2787,17 +2874,23 @@ class DatePickerComponent {
     ...(ngDevMode ? [{ debugName: "inputClass" }] : /* istanbul ignore next */ []));
     prevAriaLabel = computed(() => {
         switch (this.gridMode()) {
-            case 'month': return 'Previous year';
-            case 'year': return 'Previous years';
-            default: return 'Previous month';
+            case 'month':
+                return 'Previous year';
+            case 'year':
+                return 'Previous years';
+            default:
+                return 'Previous month';
         }
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "prevAriaLabel" }] : /* istanbul ignore next */ []));
     nextAriaLabel = computed(() => {
         switch (this.gridMode()) {
-            case 'month': return 'Next year';
-            case 'year': return 'Next years';
-            default: return 'Next month';
+            case 'month':
+                return 'Next year';
+            case 'year':
+                return 'Next years';
+            default:
+                return 'Next month';
         }
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "nextAriaLabel" }] : /* istanbul ignore next */ []));
@@ -2842,7 +2935,7 @@ class DatePickerComponent {
         return new Date();
     }
     syncViewToDate(date) {
-        const inView = this.calendarMonths().some(m => m.month === date.getMonth() && m.year === date.getFullYear());
+        const inView = this.calendarMonths().some((m) => m.month === date.getMonth() && m.year === date.getFullYear());
         if (!inView) {
             this._viewMonth.set(date.getMonth());
             this._viewYear.set(date.getFullYear());
@@ -2872,7 +2965,7 @@ class DatePickerComponent {
             return true;
         if (this.disabledDays().includes(date.getDay()))
             return true;
-        if (this.disabledDates().some(d => isSameDay(d, date)))
+        if (this.disabledDates().some((d) => isSameDay(d, date)))
             return true;
         return false;
     }
@@ -2913,7 +3006,7 @@ class DatePickerComponent {
             selected = isSameDay(value, date);
         }
         else if (mode === 'multiple' && Array.isArray(value)) {
-            selected = value.some(d => isSameDay(d, date));
+            selected = value.some((d) => isSameDay(d, date));
         }
         else if (mode === 'range' && Array.isArray(value)) {
             const [start, end] = value;
@@ -2941,7 +3034,11 @@ class DatePickerComponent {
             return `${base} text-(--f-text-muted-color) opacity-60 rounded-md`;
         }
         if (this.selectionMode() === 'range' && (day.rangeStart || day.rangeEnd)) {
-            const shape = day.rangeStart && day.rangeEnd ? 'rounded-md' : day.rangeStart ? 'rounded-l-md' : 'rounded-r-md';
+            const shape = day.rangeStart && day.rangeEnd
+                ? 'rounded-md'
+                : day.rangeStart
+                    ? 'rounded-l-md'
+                    : 'rounded-r-md';
             return `${base} bg-primary text-primary-contrast ${shape}`;
         }
         if (day.inRange) {
@@ -2974,7 +3071,9 @@ class DatePickerComponent {
         return pad2(n);
     }
     onDocumentClick(e) {
-        if (this.appendTo() === 'self' && this.open() && !this._el.nativeElement.contains(e.target)) {
+        if (this.appendTo() === 'self' &&
+            this.open() &&
+            !this._el.nativeElement.contains(e.target)) {
             this._open.set(false);
         }
     }
@@ -3016,7 +3115,7 @@ class DatePickerComponent {
         if (this.appendTo() === 'body')
             this.popoverRef()?.toggle(event);
         else
-            this._open.update(v => !v);
+            this._open.update((v) => !v);
     }
     closePanel() {
         if (this.appendTo() === 'body')
@@ -3063,8 +3162,10 @@ class DatePickerComponent {
             return;
         }
         if (mode === 'multiple') {
-            const arr = Array.isArray(this.value()) ? [...this.value()] : [];
-            const idx = arr.findIndex(d => isSameDay(d, finalDate));
+            const arr = Array.isArray(this.value())
+                ? [...this.value()]
+                : [];
+            const idx = arr.findIndex((d) => isSameDay(d, finalDate));
             if (idx >= 0)
                 arr.splice(idx, 1);
             else
@@ -3074,7 +3175,9 @@ class DatePickerComponent {
             this.onSelect.emit(finalDate);
             return;
         }
-        const cur = Array.isArray(this.value()) ? this.value() : [];
+        const cur = Array.isArray(this.value())
+            ? this.value()
+            : [];
         const [start, end] = cur;
         let next;
         if (!start || (start && end)) {
@@ -3145,11 +3248,11 @@ class DatePickerComponent {
                 this.prevMonth();
                 break;
             case 'month':
-                this._viewYear.update(y => y - 1);
+                this._viewYear.update((y) => y - 1);
                 this.emitNavChange();
                 break;
             case 'year':
-                this._viewYear.update(y => y - 12);
+                this._viewYear.update((y) => y - 12);
                 this.emitNavChange();
                 break;
         }
@@ -3160,11 +3263,11 @@ class DatePickerComponent {
                 this.nextMonth();
                 break;
             case 'month':
-                this._viewYear.update(y => y + 1);
+                this._viewYear.update((y) => y + 1);
                 this.emitNavChange();
                 break;
             case 'year':
-                this._viewYear.update(y => y + 12);
+                this._viewYear.update((y) => y + 12);
                 this.emitNavChange();
                 break;
         }
@@ -3172,19 +3275,19 @@ class DatePickerComponent {
     prevMonth() {
         if (this.viewMonth() === 0) {
             this._viewMonth.set(11);
-            this._viewYear.update(y => y - 1);
+            this._viewYear.update((y) => y - 1);
         }
         else
-            this._viewMonth.update(m => m - 1);
+            this._viewMonth.update((m) => m - 1);
         this.emitNavChange();
     }
     nextMonth() {
         if (this.viewMonth() === 11) {
             this._viewMonth.set(0);
-            this._viewYear.update(y => y + 1);
+            this._viewYear.update((y) => y + 1);
         }
         else
-            this._viewMonth.update(m => m + 1);
+            this._viewMonth.update((m) => m + 1);
         this.emitNavChange();
     }
     onGridKeyDown(event) {
@@ -3240,19 +3343,52 @@ class DatePickerComponent {
             this.commitValue(combineDateTime(v, this._timeHour(), this._timeMinute(), this._timeSecond()));
         }
     }
-    incrementHour() { this._timeHour.update(h => (h + 1) % 24); this.commitTimeChange(); }
-    decrementHour() { this._timeHour.update(h => (h + 23) % 24); this.commitTimeChange(); }
-    incrementMinute() { this._timeMinute.update(m => (m + 1) % 60); this.commitTimeChange(); }
-    decrementMinute() { this._timeMinute.update(m => (m + 59) % 60); this.commitTimeChange(); }
-    incrementSecond() { this._timeSecond.update(s => (s + 1) % 60); this.commitTimeChange(); }
-    decrementSecond() { this._timeSecond.update(s => (s + 59) % 60); this.commitTimeChange(); }
-    togglePeriod() { this._timeHour.update(h => (h + 12) % 24); this.commitTimeChange(); }
-    writeValue(v) { this._value.set(v ?? null); }
-    registerOnChange(fn) { this._onChange = fn; }
-    registerOnTouched(fn) { this._onTouched = fn; }
+    incrementHour() {
+        this._timeHour.update((h) => (h + 1) % 24);
+        this.commitTimeChange();
+    }
+    decrementHour() {
+        this._timeHour.update((h) => (h + 23) % 24);
+        this.commitTimeChange();
+    }
+    incrementMinute() {
+        this._timeMinute.update((m) => (m + 1) % 60);
+        this.commitTimeChange();
+    }
+    decrementMinute() {
+        this._timeMinute.update((m) => (m + 59) % 60);
+        this.commitTimeChange();
+    }
+    incrementSecond() {
+        this._timeSecond.update((s) => (s + 1) % 60);
+        this.commitTimeChange();
+    }
+    decrementSecond() {
+        this._timeSecond.update((s) => (s + 59) % 60);
+        this.commitTimeChange();
+    }
+    togglePeriod() {
+        this._timeHour.update((h) => (h + 12) % 24);
+        this.commitTimeChange();
+    }
+    writeValue(v) {
+        this._value.set(v ?? null);
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
     setDisabledState() { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", 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: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DatePickerComponent), multi: true }], queries: [{ propertyName: "headerRef", first: true, predicate: ["header"], descendants: true, isSignal: true }, { propertyName: "footerRef", first: true, predicate: ["footer"], descendants: true, isSignal: true }, { propertyName: "dateRef", first: true, predicate: ["date"], descendants: true, isSignal: true }, { propertyName: "fTemplates", predicate: FTemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "popoverRef", first: true, predicate: ["pop"], descendants: true, isSignal: true }, { propertyName: "_inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", 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: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => DatePickerComponent),
+                multi: true,
+            },
+        ], queries: [{ propertyName: "headerRef", first: true, predicate: ["header"], descendants: true, isSignal: true }, { propertyName: "footerRef", first: true, predicate: ["footer"], descendants: true, isSignal: true }, { propertyName: "dateRef", first: true, predicate: ["date"], descendants: true, isSignal: true }, { propertyName: "fTemplates", predicate: FTemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "popoverRef", first: true, predicate: ["pop"], descendants: true, isSignal: true }, { propertyName: "_inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (inline()) {
       <div [class]="inlinePanelClass()">
         <ng-container [ngTemplateOutlet]="panelContent" />
@@ -3261,7 +3397,9 @@ class DatePickerComponent {
       <div class="relative">
         <div [class]="wrapperClass()">
           @if (iconDisplay() === 'input' && showIcon()) {
-            <span class="inline-flex items-center justify-center pl-2 text-(--f-form-field-placeholder-color)">
+            <span
+              class="inline-flex items-center justify-center pl-2 text-(--f-form-field-placeholder-color)"
+            >
               <ui-icon name="calendar" class="text-sm"></ui-icon>
             </span>
           }
@@ -3281,12 +3419,22 @@ class DatePickerComponent {
             (change)="onInputChange($any($event.target).value)"
           />
           @if (showClear() && hasValue() && !disabled() && !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" (click)="clear($event)" aria-label="Clear">
+            <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"
+              (click)="clear($event)"
+              aria-label="Clear"
+            >
               <ui-icon name="times" class="text-xs"></ui-icon>
             </button>
           }
           @if (showIcon() && iconDisplay() === 'button') {
-            <button type="button" class="inline-flex items-center justify-center px-2 text-(--f-form-field-placeholder-color) border-l border-(--f-content-border-color) cursor-pointer" (click)="toggleCalendar($event)" aria-label="Choose date">
+            <button
+              type="button"
+              class="inline-flex items-center justify-center px-2 text-(--f-form-field-placeholder-color) border-l border-(--f-content-border-color) cursor-pointer"
+              (click)="toggleCalendar($event)"
+              aria-label="Choose date"
+            >
               <ui-icon name="calendar" class="text-sm"></ui-icon>
             </button>
           }
@@ -3299,7 +3447,10 @@ class DatePickerComponent {
             </div>
           </f-popover>
         } @else if (open()) {
-          <div class="absolute z-50 mt-1 bg-(--f-overlay-popover-background) border border-(--f-content-border-color) rounded-lg shadow-[0_8px_30px_rgb(0,0,0,0.1)] p-3 min-w-64" (keydown.escape)="closeAndFocusInput()">
+          <div
+            class="absolute z-50 mt-1 bg-(--f-overlay-popover-background) border border-(--f-content-border-color) rounded-lg shadow-[0_8px_30px_rgb(0,0,0,0.1)] p-3 min-w-64"
+            (keydown.escape)="closeAndFocusInput()"
+          >
             <ng-container [ngTemplateOutlet]="panelContent" />
           </div>
         }
@@ -3309,25 +3460,56 @@ class DatePickerComponent {
     <ng-template #panelContent>
       @if (gridMode() === 'date') {
         <div class="flex gap-4">
-          @for (mv of calendarMonths(); track mv.month + '-' + mv.year; let i = $index) {
-            <div>
+          @for (
+            mv of calendarMonths();
+            track mv.month + '-' + mv.year;
+            let i = $index
+          ) {
+            <div class="w-full">
               <div class="flex items-center justify-between mb-3">
                 @if (headerTpl()) {
-                  <ng-container [ngTemplateOutlet]="headerTpl()" [ngTemplateOutletContext]="{ $implicit: mv }" />
+                  <ng-container
+                    [ngTemplateOutlet]="headerTpl()"
+                    [ngTemplateOutletContext]="{ $implicit: mv }"
+                  />
                 } @else {
                   @if (i === 0) {
-                    <button type="button" class="inline-flex items-center justify-center p-1 hover:bg-(--f-content-hover-background) rounded-md cursor-pointer" [attr.aria-label]="prevAriaLabel()" (click)="onPrevClick()">
+                    <button
+                      type="button"
+                      class="inline-flex items-center justify-center p-1 hover:bg-(--f-content-hover-background) rounded-md cursor-pointer"
+                      [attr.aria-label]="prevAriaLabel()"
+                      (click)="onPrevClick()"
+                    >
                       <ui-icon name="chevron-left" class="text-xs"></ui-icon>
                     </button>
                   } @else {
                     <span class="w-6"></span>
                   }
                   <span class="flex items-center gap-1">
-                    <button type="button" class="text-sm font-semibold px-1 py-0.5 rounded-md hover:bg-(--f-content-hover-background) cursor-pointer" [disabled]="view() !== 'date'" (click)="onHeaderMonthClick()">{{ MONTHS[mv.month] }}</button>
-                    <button type="button" class="text-sm font-semibold px-1 py-0.5 rounded-md hover:bg-(--f-content-hover-background) cursor-pointer" [disabled]="view() !== 'date'" (click)="onHeaderYearClick()">{{ mv.year }}</button>
+                    <button
+                      type="button"
+                      class="text-sm font-semibold px-1 py-0.5 rounded-md hover:bg-(--f-content-hover-background) cursor-pointer"
+                      [disabled]="view() !== 'date'"
+                      (click)="onHeaderMonthClick()"
+                    >
+                      {{ MONTHS[mv.month] }}
+                    </button>
+                    <button
+                      type="button"
+                      class="text-sm font-semibold px-1 py-0.5 rounded-md hover:bg-(--f-content-hover-background) cursor-pointer"
+                      [disabled]="view() !== 'date'"
+                      (click)="onHeaderYearClick()"
+                    >
+                      {{ mv.year }}
+                    </button>
                   </span>
                   @if (i === calendarMonths().length - 1) {
-                    <button type="button" class="inline-flex items-center justify-center p-1 hover:bg-(--f-content-hover-background) rounded-md cursor-pointer" [attr.aria-label]="nextAriaLabel()" (click)="onNextClick()">
+                    <button
+                      type="button"
+                      class="inline-flex items-center justify-center p-1 hover:bg-(--f-content-hover-background) rounded-md cursor-pointer"
+                      [attr.aria-label]="nextAriaLabel()"
+                      (click)="onNextClick()"
+                    >
                       <ui-icon name="chevron-right" class="text-xs"></ui-icon>
                     </button>
                   } @else {
@@ -3337,11 +3519,23 @@ class DatePickerComponent {
               </div>
               <div class="grid grid-cols-7 gap-0.5 mb-1">
                 @for (d of orderedDayNames(); track d) {
-                  <div class="text-center text-xs text-(--f-text-muted-color) py-1">{{ d }}</div>
+                  <div
+                    class="text-center text-xs text-(--f-text-muted-color) py-1"
+                  >
+                    {{ d }}
+                  </div>
                 }
               </div>
-              <div class="grid grid-cols-7 gap-0.5" role="grid" [attr.aria-label]="MONTHS[mv.month] + ' ' + mv.year" (keydown)="onGridKeyDown($event)">
-                @for (day of daysFor(mv.month, mv.year); track day.date.getTime()) {
+              <div
+                class="grid grid-cols-7 gap-0.5"
+                role="grid"
+                [attr.aria-label]="MONTHS[mv.month] + ' ' + mv.year"
+                (keydown)="onGridKeyDown($event)"
+              >
+                @for (
+                  day of daysFor(mv.month, mv.year);
+                  track day.date.getTime()
+                ) {
                   @if (day.otherMonth && !showOtherMonths()) {
                     <span class="invisible"></span>
                   } @else {
@@ -3358,7 +3552,10 @@ class DatePickerComponent {
                       (focus)="onDayFocus(day)"
                     >
                       @if (dateTpl()) {
-                        <ng-container [ngTemplateOutlet]="dateTpl()" [ngTemplateOutletContext]="{ $implicit: day.date }" />
+                        <ng-container
+                          [ngTemplateOutlet]="dateTpl()"
+                          [ngTemplateOutletContext]="{ $implicit: day.date }"
+                        />
                       } @else {
                         {{ day.day }}
                       }
@@ -3371,15 +3568,36 @@ class DatePickerComponent {
         </div>
       } @else if (gridMode() === 'month') {
         <div class="flex items-center justify-between mb-3">
-          <button type="button" class="inline-flex items-center justify-center p-1 hover:bg-(--f-content-hover-background) rounded-md cursor-pointer" [attr.aria-label]="prevAriaLabel()" (click)="onPrevClick()">
+          <button
+            type="button"
+            class="inline-flex items-center justify-center p-1 hover:bg-(--f-content-hover-background) rounded-md cursor-pointer"
+            [attr.aria-label]="prevAriaLabel()"
+            (click)="onPrevClick()"
+          >
             <ui-icon name="chevron-left" class="text-xs"></ui-icon>
           </button>
-          <button type="button" class="text-sm font-semibold px-1 py-0.5 rounded-md hover:bg-(--f-content-hover-background) cursor-pointer" [disabled]="view() !== 'date'" (click)="onHeaderYearClick()">{{ viewYear() }}</button>
-          <button type="button" class="inline-flex items-center justify-center p-1 hover:bg-(--f-content-hover-background) rounded-md cursor-pointer" [attr.aria-label]="nextAriaLabel()" (click)="onNextClick()">
+          <button
+            type="button"
+            class="text-sm font-semibold px-1 py-0.5 rounded-md hover:bg-(--f-content-hover-background) cursor-pointer"
+            [disabled]="view() !== 'date'"
+            (click)="onHeaderYearClick()"
+          >
+            {{ viewYear() }}
+          </button>
+          <button
+            type="button"
+            class="inline-flex items-center justify-center p-1 hover:bg-(--f-content-hover-background) rounded-md cursor-pointer"
+            [attr.aria-label]="nextAriaLabel()"
+            (click)="onNextClick()"
+          >
             <ui-icon name="chevron-right" class="text-xs"></ui-icon>
           </button>
         </div>
-        <div class="grid grid-cols-3 gap-1.5" role="grid" [attr.aria-label]="'Select month'">
+        <div
+          class="grid grid-cols-3 gap-1.5"
+          role="grid"
+          [attr.aria-label]="'Select month'"
+        >
           @for (m of MONTH_SHORT; track m; let i = $index) {
             <button
               type="button"
@@ -3389,20 +3607,39 @@ class DatePickerComponent {
               [class.bg-primary]="i === viewMonth()"
               [class.text-primary-contrast]="i === viewMonth()"
               (click)="selectMonth(i)"
-            >{{ m }}</button>
+            >
+              {{ m }}
+            </button>
           }
         </div>
       } @else {
         <div class="flex items-center justify-between mb-3">
-          <button type="button" class="inline-flex items-center justify-center p-1 hover:bg-(--f-content-hover-background) rounded-md cursor-pointer" [attr.aria-label]="prevAriaLabel()" (click)="onPrevClick()">
+          <button
+            type="button"
+            class="inline-flex items-center justify-center p-1 hover:bg-(--f-content-hover-background) rounded-md cursor-pointer"
+            [attr.aria-label]="prevAriaLabel()"
+            (click)="onPrevClick()"
+          >
             <ui-icon name="chevron-left" class="text-xs"></ui-icon>
           </button>
-          <span class="text-sm font-semibold">{{ yearGridYears()[0] }} - {{ yearGridYears()[yearGridYears().length - 1] }}</span>
-          <button type="button" class="inline-flex items-center justify-center p-1 hover:bg-(--f-content-hover-background) rounded-md cursor-pointer" [attr.aria-label]="nextAriaLabel()" (click)="onNextClick()">
+          <span class="text-sm font-semibold"
+            >{{ yearGridYears()[0] }} -
+            {{ yearGridYears()[yearGridYears().length - 1] }}</span
+          >
+          <button
+            type="button"
+            class="inline-flex items-center justify-center p-1 hover:bg-(--f-content-hover-background) rounded-md cursor-pointer"
+            [attr.aria-label]="nextAriaLabel()"
+            (click)="onNextClick()"
+          >
             <ui-icon name="chevron-right" class="text-xs"></ui-icon>
           </button>
         </div>
-        <div class="grid grid-cols-3 gap-1.5" role="grid" [attr.aria-label]="'Select year'">
+        <div
+          class="grid grid-cols-3 gap-1.5"
+          role="grid"
+          [attr.aria-label]="'Select year'"
+        >
           @for (y of yearGridYears(); track y) {
             <button
               type="button"
@@ -3412,34 +3649,92 @@ class DatePickerComponent {
               [class.bg-primary]="y === viewYear()"
               [class.text-primary-contrast]="y === viewYear()"
               (click)="selectYear(y)"
-            >{{ y }}</button>
+            >
+              {{ y }}
+            </button>
           }
         </div>
       }
 
       @if (gridMode() === 'date' && (showTime() || timeOnly())) {
-        <div class="flex items-center justify-center gap-2 mt-3 pt-3 border-t border-(--f-content-border-color)">
+        <div
+          class="flex items-center justify-center gap-2 mt-3 pt-3 border-t border-(--f-content-border-color)"
+        >
           <div class="flex flex-col items-center">
-            <button type="button" class="p-0.5 hover:bg-(--f-content-hover-background) rounded-md cursor-pointer" (click)="incrementHour()" aria-label="Increment hour"><ui-icon name="chevron-up" class="text-xs"></ui-icon></button>
-            <span class="text-sm font-mono tabular-nums w-6 text-center">{{ displayHourText() }}</span>
-            <button type="button" class="p-0.5 hover:bg-(--f-content-hover-background) rounded-md cursor-pointer" (click)="decrementHour()" aria-label="Decrement hour"><ui-icon name="chevron-down" class="text-xs"></ui-icon></button>
+            <button
+              type="button"
+              class="p-0.5 hover:bg-(--f-content-hover-background) rounded-md cursor-pointer"
+              (click)="incrementHour()"
+              aria-label="Increment hour"
+            >
+              <ui-icon name="chevron-up" class="text-xs"></ui-icon>
+            </button>
+            <span class="text-sm font-mono tabular-nums w-6 text-center">{{
+              displayHourText()
+            }}</span>
+            <button
+              type="button"
+              class="p-0.5 hover:bg-(--f-content-hover-background) rounded-md cursor-pointer"
+              (click)="decrementHour()"
+              aria-label="Decrement hour"
+            >
+              <ui-icon name="chevron-down" class="text-xs"></ui-icon>
+            </button>
           </div>
           <span class="text-sm font-semibold">:</span>
           <div class="flex flex-col items-center">
-            <button type="button" class="p-0.5 hover:bg-(--f-content-hover-background) rounded-md cursor-pointer" (click)="incrementMinute()" aria-label="Increment minute"><ui-icon name="chevron-up" class="text-xs"></ui-icon></button>
-            <span class="text-sm font-mono tabular-nums w-6 text-center">{{ pad2(timeMinute()) }}</span>
-            <button type="button" class="p-0.5 hover:bg-(--f-content-hover-background) rounded-md cursor-pointer" (click)="decrementMinute()" aria-label="Decrement minute"><ui-icon name="chevron-down" class="text-xs"></ui-icon></button>
+            <button
+              type="button"
+              class="p-0.5 hover:bg-(--f-content-hover-background) rounded-md cursor-pointer"
+              (click)="incrementMinute()"
+              aria-label="Increment minute"
+            >
+              <ui-icon name="chevron-up" class="text-xs"></ui-icon>
+            </button>
+            <span class="text-sm font-mono tabular-nums w-6 text-center">{{
+              pad2(timeMinute())
+            }}</span>
+            <button
+              type="button"
+              class="p-0.5 hover:bg-(--f-content-hover-background) rounded-md cursor-pointer"
+              (click)="decrementMinute()"
+              aria-label="Decrement minute"
+            >
+              <ui-icon name="chevron-down" class="text-xs"></ui-icon>
+            </button>
           </div>
           @if (showSeconds()) {
             <span class="text-sm font-semibold">:</span>
             <div class="flex flex-col items-center">
-              <button type="button" class="p-0.5 hover:bg-(--f-content-hover-background) rounded-md cursor-pointer" (click)="incrementSecond()" aria-label="Increment second"><ui-icon name="chevron-up" class="text-xs"></ui-icon></button>
-              <span class="text-sm font-mono tabular-nums w-6 text-center">{{ pad2(timeSecond()) }}</span>
-              <button type="button" class="p-0.5 hover:bg-(--f-content-hover-background) rounded-md cursor-pointer" (click)="decrementSecond()" aria-label="Decrement second"><ui-icon name="chevron-down" class="text-xs"></ui-icon></button>
+              <button
+                type="button"
+                class="p-0.5 hover:bg-(--f-content-hover-background) rounded-md cursor-pointer"
+                (click)="incrementSecond()"
+                aria-label="Increment second"
+              >
+                <ui-icon name="chevron-up" class="text-xs"></ui-icon>
+              </button>
+              <span class="text-sm font-mono tabular-nums w-6 text-center">{{
+                pad2(timeSecond())
+              }}</span>
+              <button
+                type="button"
+                class="p-0.5 hover:bg-(--f-content-hover-background) rounded-md cursor-pointer"
+                (click)="decrementSecond()"
+                aria-label="Decrement second"
+              >
+                <ui-icon name="chevron-down" class="text-xs"></ui-icon>
+              </button>
             </div>
           }
           @if (hourFormat() === '12') {
-            <button type="button" class="ml-1 px-2 py-1 text-xs font-semibold rounded-md border border-(--f-content-border-color) hover:bg-(--f-content-hover-background) cursor-pointer" (click)="togglePeriod()">{{ isPM() ? 'PM' : 'AM' }}</button>
+            <button
+              type="button"
+              class="ml-1 px-2 py-1 text-xs font-semibold rounded-md border border-(--f-content-border-color) hover:bg-(--f-content-hover-background) cursor-pointer"
+              (click)="togglePeriod()"
+            >
+              {{ isPM() ? 'PM' : 'AM' }}
+            </button>
           }
         </div>
       }
@@ -3449,9 +3744,23 @@ class DatePickerComponent {
           <ng-container [ngTemplateOutlet]="footerTpl()" />
         </div>
       } @else if (showButtonBar()) {
-        <div class="flex items-center justify-between mt-3 pt-2 border-t border-(--f-content-border-color)">
-          <button type="button" class="text-xs font-medium text-primary hover:underline cursor-pointer" (click)="handleTodayClick()">Today</button>
-          <button type="button" class="text-xs font-medium text-(--f-text-muted-color) hover:underline cursor-pointer" (click)="handleClearClick()">Clear</button>
+        <div
+          class="flex items-center justify-between mt-3 pt-2 border-t border-(--f-content-border-color)"
+        >
+          <button
+            type="button"
+            class="text-xs font-medium text-primary hover:underline cursor-pointer"
+            (click)="handleTodayClick()"
+          >
+            Today
+          </button>
+          <button
+            type="button"
+            class="text-xs font-medium text-(--f-text-muted-color) hover:underline cursor-pointer"
+            (click)="handleClearClick()"
+          >
+            Clear
+          </button>
         </div>
       }
     </ng-template>
@@ -3462,7 +3771,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
             args: [{
                     selector: 'f-datepicker',
                     imports: [UiIconComponent, NgTemplateOutlet, PopoverComponent],
-                    providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DatePickerComponent), multi: true }],
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => DatePickerComponent),
+                            multi: true,
+                        },
+                    ],
                     host: {
                         '[class]': 'hostClass()',
                         '[style]': 'style()',
@@ -3477,7 +3792,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
       <div class="relative">
         <div [class]="wrapperClass()">
           @if (iconDisplay() === 'input' && showIcon()) {
-            <span class="inline-flex items-center justify-center pl-2 text-(--f-form-field-placeholder-color)">
+            <span
+              class="inline-flex items-center justify-center pl-2 text-(--f-form-field-placeholder-color)"
+            >
               <ui-icon name="calendar" class="text-sm"></ui-icon>
             </span>
           }
@@ -3497,12 +3814,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
             (change)="onInputChange($any($event.target).value)"
           />
           @if (showClear() && hasValue() && !disabled() && !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" (click)="clear($event)" aria-label="Clear">
+            <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"
+              (click)="clear($event)"
+              aria-label="Clear"
+            >
               <ui-icon name="times" class="text-xs"></ui-icon>
             </button>
           }
           @if (showIcon() && iconDisplay() === 'button') {
-            <button type="button" class="inline-flex items-center justify-center px-2 text-(--f-form-field-placeholder-color) border-l border-(--f-content-border-color) cursor-pointer" (click)="toggleCalendar($event)" aria-label="Choose date">
+            <button
+              type="button"
+              class="inline-flex items-center justify-center px-2 text-(--f-form-field-placeholder-color) border-l border-(--f-content-border-color) cursor-pointer"
+              (click)="toggleCalendar($event)"
+              aria-label="Choose date"
+            >
               <ui-icon name="calendar" class="text-sm"></ui-icon>
             </button>
           }
@@ -3515,7 +3842,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
             </div>
           </f-popover>
         } @else if (open()) {
-          <div class="absolute z-50 mt-1 bg-(--f-overlay-popover-background) border border-(--f-content-border-color) rounded-lg shadow-[0_8px_30px_rgb(0,0,0,0.1)] p-3 min-w-64" (keydown.escape)="closeAndFocusInput()">
+          <div
+            class="absolute z-50 mt-1 bg-(--f-overlay-popover-background) border border-(--f-content-border-color) rounded-lg shadow-[0_8px_30px_rgb(0,0,0,0.1)] p-3 min-w-64"
+            (keydown.escape)="closeAndFocusInput()"
+          >
             <ng-container [ngTemplateOutlet]="panelContent" />
           </div>
         }
@@ -3525,25 +3855,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
     <ng-template #panelContent>
       @if (gridMode() === 'date') {
         <div class="flex gap-4">
-          @for (mv of calendarMonths(); track mv.month + '-' + mv.year; let i = $index) {
-            <div>
+          @for (
+            mv of calendarMonths();
+            track mv.month + '-' + mv.year;
+            let i = $index
+          ) {
+            <div class="w-full">
               <div class="flex items-center justify-between mb-3">
                 @if (headerTpl()) {
-                  <ng-container [ngTemplateOutlet]="headerTpl()" [ngTemplateOutletContext]="{ $implicit: mv }" />
+                  <ng-container
+                    [ngTemplateOutlet]="headerTpl()"
+                    [ngTemplateOutletContext]="{ $implicit: mv }"
+                  />
                 } @else {
                   @if (i === 0) {
-                    <button type="button" class="inline-flex items-center justify-center p-1 hover:bg-(--f-content-hover-background) rounded-md cursor-pointer" [attr.aria-label]="prevAriaLabel()" (click)="onPrevClick()">
+                    <button
+                      type="button"
+                      class="inline-flex items-center justify-center p-1 hover:bg-(--f-content-hover-background) rounded-md cursor-pointer"
+                      [attr.aria-label]="prevAriaLabel()"
+                      (click)="onPrevClick()"
+                    >
                       <ui-icon name="chevron-left" class="text-xs"></ui-icon>
                     </button>
                   } @else {
                     <span class="w-6"></span>
                   }
                   <span class="flex items-center gap-1">
-                    <button type="button" class="text-sm font-semibold px-1 py-0.5 rounded-md hover:bg-(--f-content-hover-background) cursor-pointer" [disabled]="view() !== 'date'" (click)="onHeaderMonthClick()">{{ MONTHS[mv.month] }}</button>
-                    <button type="button" class="text-sm font-semibold px-1 py-0.5 rounded-md hover:bg-(--f-content-hover-background) cursor-pointer" [disabled]="view() !== 'date'" (click)="onHeaderYearClick()">{{ mv.year }}</button>
+                    <button
+                      type="button"
+                      class="text-sm font-semibold px-1 py-0.5 rounded-md hover:bg-(--f-content-hover-background) cursor-pointer"
+                      [disabled]="view() !== 'date'"
+                      (click)="onHeaderMonthClick()"
+                    >
+                      {{ MONTHS[mv.month] }}
+                    </button>
+                    <button
+                      type="button"
+                      class="text-sm font-semibold px-1 py-0.5 rounded-md hover:bg-(--f-content-hover-background) cursor-pointer"
+                      [disabled]="view() !== 'date'"
+                      (click)="onHeaderYearClick()"
+                    >
+                      {{ mv.year }}
+                    </button>
                   </span>
                   @if (i === calendarMonths().length - 1) {
-                    <button type="button" class="inline-flex items-center justify-center p-1 hover:bg-(--f-content-hover-background) rounded-md cursor-pointer" [attr.aria-label]="nextAriaLabel()" (click)="onNextClick()">
+                    <button
+                      type="button"
+                      class="inline-flex items-center justify-center p-1 hover:bg-(--f-content-hover-background) rounded-md cursor-pointer"
+                      [attr.aria-label]="nextAriaLabel()"
+                      (click)="onNextClick()"
+                    >
                       <ui-icon name="chevron-right" class="text-xs"></ui-icon>
                     </button>
                   } @else {
@@ -3553,11 +3914,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
               </div>
               <div class="grid grid-cols-7 gap-0.5 mb-1">
                 @for (d of orderedDayNames(); track d) {
-                  <div class="text-center text-xs text-(--f-text-muted-color) py-1">{{ d }}</div>
+                  <div
+                    class="text-center text-xs text-(--f-text-muted-color) py-1"
+                  >
+                    {{ d }}
+                  </div>
                 }
               </div>
-              <div class="grid grid-cols-7 gap-0.5" role="grid" [attr.aria-label]="MONTHS[mv.month] + ' ' + mv.year" (keydown)="onGridKeyDown($event)">
-                @for (day of daysFor(mv.month, mv.year); track day.date.getTime()) {
+              <div
+                class="grid grid-cols-7 gap-0.5"
+                role="grid"
+                [attr.aria-label]="MONTHS[mv.month] + ' ' + mv.year"
+                (keydown)="onGridKeyDown($event)"
+              >
+                @for (
+                  day of daysFor(mv.month, mv.year);
+                  track day.date.getTime()
+                ) {
                   @if (day.otherMonth && !showOtherMonths()) {
                     <span class="invisible"></span>
                   } @else {
@@ -3574,7 +3947,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                       (focus)="onDayFocus(day)"
                     >
                       @if (dateTpl()) {
-                        <ng-container [ngTemplateOutlet]="dateTpl()" [ngTemplateOutletContext]="{ $implicit: day.date }" />
+                        <ng-container
+                          [ngTemplateOutlet]="dateTpl()"
+                          [ngTemplateOutletContext]="{ $implicit: day.date }"
+                        />
                       } @else {
                         {{ day.day }}
                       }
@@ -3587,15 +3963,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
         </div>
       } @else if (gridMode() === 'month') {
         <div class="flex items-center justify-between mb-3">
-          <button type="button" class="inline-flex items-center justify-center p-1 hover:bg-(--f-content-hover-background) rounded-md cursor-pointer" [attr.aria-label]="prevAriaLabel()" (click)="onPrevClick()">
+          <button
+            type="button"
+            class="inline-flex items-center justify-center p-1 hover:bg-(--f-content-hover-background) rounded-md cursor-pointer"
+            [attr.aria-label]="prevAriaLabel()"
+            (click)="onPrevClick()"
+          >
             <ui-icon name="chevron-left" class="text-xs"></ui-icon>
           </button>
-          <button type="button" class="text-sm font-semibold px-1 py-0.5 rounded-md hover:bg-(--f-content-hover-background) cursor-pointer" [disabled]="view() !== 'date'" (click)="onHeaderYearClick()">{{ viewYear() }}</button>
-          <button type="button" class="inline-flex items-center justify-center p-1 hover:bg-(--f-content-hover-background) rounded-md cursor-pointer" [attr.aria-label]="nextAriaLabel()" (click)="onNextClick()">
+          <button
+            type="button"
+            class="text-sm font-semibold px-1 py-0.5 rounded-md hover:bg-(--f-content-hover-background) cursor-pointer"
+            [disabled]="view() !== 'date'"
+            (click)="onHeaderYearClick()"
+          >
+            {{ viewYear() }}
+          </button>
+          <button
+            type="button"
+            class="inline-flex items-center justify-center p-1 hover:bg-(--f-content-hover-background) rounded-md cursor-pointer"
+            [attr.aria-label]="nextAriaLabel()"
+            (click)="onNextClick()"
+          >
             <ui-icon name="chevron-right" class="text-xs"></ui-icon>
           </button>
         </div>
-        <div class="grid grid-cols-3 gap-1.5" role="grid" [attr.aria-label]="'Select month'">
+        <div
+          class="grid grid-cols-3 gap-1.5"
+          role="grid"
+          [attr.aria-label]="'Select month'"
+        >
           @for (m of MONTH_SHORT; track m; let i = $index) {
             <button
               type="button"
@@ -3605,20 +4002,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
               [class.bg-primary]="i === viewMonth()"
               [class.text-primary-contrast]="i === viewMonth()"
               (click)="selectMonth(i)"
-            >{{ m }}</button>
+            >
+              {{ m }}
+            </button>
           }
         </div>
       } @else {
         <div class="flex items-center justify-between mb-3">
-          <button type="button" class="inline-flex items-center justify-center p-1 hover:bg-(--f-content-hover-background) rounded-md cursor-pointer" [attr.aria-label]="prevAriaLabel()" (click)="onPrevClick()">
+          <button
+            type="button"
+            class="inline-flex items-center justify-center p-1 hover:bg-(--f-content-hover-background) rounded-md cursor-pointer"
+            [attr.aria-label]="prevAriaLabel()"
+            (click)="onPrevClick()"
+          >
             <ui-icon name="chevron-left" class="text-xs"></ui-icon>
           </button>
-          <span class="text-sm font-semibold">{{ yearGridYears()[0] }} - {{ yearGridYears()[yearGridYears().length - 1] }}</span>
-          <button type="button" class="inline-flex items-center justify-center p-1 hover:bg-(--f-content-hover-background) rounded-md cursor-pointer" [attr.aria-label]="nextAriaLabel()" (click)="onNextClick()">
+          <span class="text-sm font-semibold"
+            >{{ yearGridYears()[0] }} -
+            {{ yearGridYears()[yearGridYears().length - 1] }}</span
+          >
+          <button
+            type="button"
+            class="inline-flex items-center justify-center p-1 hover:bg-(--f-content-hover-background) rounded-md cursor-pointer"
+            [attr.aria-label]="nextAriaLabel()"
+            (click)="onNextClick()"
+          >
             <ui-icon name="chevron-right" class="text-xs"></ui-icon>
           </button>
         </div>
-        <div class="grid grid-cols-3 gap-1.5" role="grid" [attr.aria-label]="'Select year'">
+        <div
+          class="grid grid-cols-3 gap-1.5"
+          role="grid"
+          [attr.aria-label]="'Select year'"
+        >
           @for (y of yearGridYears(); track y) {
             <button
               type="button"
@@ -3628,34 +4044,92 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
               [class.bg-primary]="y === viewYear()"
               [class.text-primary-contrast]="y === viewYear()"
               (click)="selectYear(y)"
-            >{{ y }}</button>
+            >
+              {{ y }}
+            </button>
           }
         </div>
       }
 
       @if (gridMode() === 'date' && (showTime() || timeOnly())) {
-        <div class="flex items-center justify-center gap-2 mt-3 pt-3 border-t border-(--f-content-border-color)">
+        <div
+          class="flex items-center justify-center gap-2 mt-3 pt-3 border-t border-(--f-content-border-color)"
+        >
           <div class="flex flex-col items-center">
-            <button type="button" class="p-0.5 hover:bg-(--f-content-hover-background) rounded-md cursor-pointer" (click)="incrementHour()" aria-label="Increment hour"><ui-icon name="chevron-up" class="text-xs"></ui-icon></button>
-            <span class="text-sm font-mono tabular-nums w-6 text-center">{{ displayHourText() }}</span>
-            <button type="button" class="p-0.5 hover:bg-(--f-content-hover-background) rounded-md cursor-pointer" (click)="decrementHour()" aria-label="Decrement hour"><ui-icon name="chevron-down" class="text-xs"></ui-icon></button>
+            <button
+              type="button"
+              class="p-0.5 hover:bg-(--f-content-hover-background) rounded-md cursor-pointer"
+              (click)="incrementHour()"
+              aria-label="Increment hour"
+            >
+              <ui-icon name="chevron-up" class="text-xs"></ui-icon>
+            </button>
+            <span class="text-sm font-mono tabular-nums w-6 text-center">{{
+              displayHourText()
+            }}</span>
+            <button
+              type="button"
+              class="p-0.5 hover:bg-(--f-content-hover-background) rounded-md cursor-pointer"
+              (click)="decrementHour()"
+              aria-label="Decrement hour"
+            >
+              <ui-icon name="chevron-down" class="text-xs"></ui-icon>
+            </button>
           </div>
           <span class="text-sm font-semibold">:</span>
           <div class="flex flex-col items-center">
-            <button type="button" class="p-0.5 hover:bg-(--f-content-hover-background) rounded-md cursor-pointer" (click)="incrementMinute()" aria-label="Increment minute"><ui-icon name="chevron-up" class="text-xs"></ui-icon></button>
-            <span class="text-sm font-mono tabular-nums w-6 text-center">{{ pad2(timeMinute()) }}</span>
-            <button type="button" class="p-0.5 hover:bg-(--f-content-hover-background) rounded-md cursor-pointer" (click)="decrementMinute()" aria-label="Decrement minute"><ui-icon name="chevron-down" class="text-xs"></ui-icon></button>
+            <button
+              type="button"
+              class="p-0.5 hover:bg-(--f-content-hover-background) rounded-md cursor-pointer"
+              (click)="incrementMinute()"
+              aria-label="Increment minute"
+            >
+              <ui-icon name="chevron-up" class="text-xs"></ui-icon>
+            </button>
+            <span class="text-sm font-mono tabular-nums w-6 text-center">{{
+              pad2(timeMinute())
+            }}</span>
+            <button
+              type="button"
+              class="p-0.5 hover:bg-(--f-content-hover-background) rounded-md cursor-pointer"
+              (click)="decrementMinute()"
+              aria-label="Decrement minute"
+            >
+              <ui-icon name="chevron-down" class="text-xs"></ui-icon>
+            </button>
           </div>
           @if (showSeconds()) {
             <span class="text-sm font-semibold">:</span>
             <div class="flex flex-col items-center">
-              <button type="button" class="p-0.5 hover:bg-(--f-content-hover-background) rounded-md cursor-pointer" (click)="incrementSecond()" aria-label="Increment second"><ui-icon name="chevron-up" class="text-xs"></ui-icon></button>
-              <span class="text-sm font-mono tabular-nums w-6 text-center">{{ pad2(timeSecond()) }}</span>
-              <button type="button" class="p-0.5 hover:bg-(--f-content-hover-background) rounded-md cursor-pointer" (click)="decrementSecond()" aria-label="Decrement second"><ui-icon name="chevron-down" class="text-xs"></ui-icon></button>
+              <button
+                type="button"
+                class="p-0.5 hover:bg-(--f-content-hover-background) rounded-md cursor-pointer"
+                (click)="incrementSecond()"
+                aria-label="Increment second"
+              >
+                <ui-icon name="chevron-up" class="text-xs"></ui-icon>
+              </button>
+              <span class="text-sm font-mono tabular-nums w-6 text-center">{{
+                pad2(timeSecond())
+              }}</span>
+              <button
+                type="button"
+                class="p-0.5 hover:bg-(--f-content-hover-background) rounded-md cursor-pointer"
+                (click)="decrementSecond()"
+                aria-label="Decrement second"
+              >
+                <ui-icon name="chevron-down" class="text-xs"></ui-icon>
+              </button>
             </div>
           }
           @if (hourFormat() === '12') {
-            <button type="button" class="ml-1 px-2 py-1 text-xs font-semibold rounded-md border border-(--f-content-border-color) hover:bg-(--f-content-hover-background) cursor-pointer" (click)="togglePeriod()">{{ isPM() ? 'PM' : 'AM' }}</button>
+            <button
+              type="button"
+              class="ml-1 px-2 py-1 text-xs font-semibold rounded-md border border-(--f-content-border-color) hover:bg-(--f-content-hover-background) cursor-pointer"
+              (click)="togglePeriod()"
+            >
+              {{ isPM() ? 'PM' : 'AM' }}
+            </button>
           }
         </div>
       }
@@ -3665,9 +4139,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
           <ng-container [ngTemplateOutlet]="footerTpl()" />
         </div>
       } @else if (showButtonBar()) {
-        <div class="flex items-center justify-between mt-3 pt-2 border-t border-(--f-content-border-color)">
-          <button type="button" class="text-xs font-medium text-primary hover:underline cursor-pointer" (click)="handleTodayClick()">Today</button>
-          <button type="button" class="text-xs font-medium text-(--f-text-muted-color) hover:underline cursor-pointer" (click)="handleClearClick()">Clear</button>
+        <div
+          class="flex items-center justify-between mt-3 pt-2 border-t border-(--f-content-border-color)"
+        >
+          <button
+            type="button"
+            class="text-xs font-medium text-primary hover:underline cursor-pointer"
+            (click)="handleTodayClick()"
+          >
+            Today
+          </button>
+          <button
+            type="button"
+            class="text-xs font-medium text-(--f-text-muted-color) hover:underline cursor-pointer"
+            (click)="handleClearClick()"
+          >
+            Clear
+          </button>
         </div>
       }
     </ng-template>
@@ -4896,6 +5384,7 @@ class MultiSelectComponent {
                 queueMicrotask(() => this._filterInputRef()?.nativeElement.focus());
             }
         });
+        repositionOnScroll(() => this.open() && this.appendTo() === 'body', () => { this.position(); this.adjustForViewport(); });
     }
     onDocumentClick(e) {
         if (this.open() && !this._el.nativeElement.contains(e.target)) {
@@ -4906,6 +5395,47 @@ class MultiSelectComponent {
     ...(ngDevMode ? [{ debugName: "_triggerRef" }] : /* istanbul ignore next */ []));
     _filterInputRef = viewChild('filterInput', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_filterInputRef" }] : /* istanbul ignore next */ []));
+    _panelRef = viewChild('panel', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_panelRef" }] : /* istanbul ignore next */ []));
+    _panelTop = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_panelTop" }] : /* istanbul ignore next */ []));
+    _panelLeft = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_panelLeft" }] : /* istanbul ignore next */ []));
+    _panelWidth = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_panelWidth" }] : /* istanbul ignore next */ []));
+    panelClass = computed(() => {
+        const position = this.appendTo() === 'body' ? 'fixed' : 'absolute w-full mt-1';
+        return `${position} z-50 bg-(--f-overlay-popover-background) border border-(--f-content-border-color) rounded-lg shadow-lg overflow-hidden`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
+    panelStyle = computed(() => {
+        if (this.appendTo() !== 'body')
+            return {};
+        return { top: `${this._panelTop()}px`, left: `${this._panelLeft()}px`, width: `${this._panelWidth()}px` };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelStyle" }] : /* istanbul ignore next */ []));
+    position() {
+        const anchorEl = this._triggerRef()?.nativeElement;
+        if (!anchorEl || typeof window === 'undefined')
+            return;
+        const rect = anchorEl.getBoundingClientRect();
+        this._panelTop.set(rect.bottom + 4);
+        this._panelLeft.set(Math.max(8, rect.left));
+        this._panelWidth.set(rect.width);
+    }
+    adjustForViewport() {
+        const panelEl = this._panelRef()?.nativeElement;
+        const anchorEl = this._triggerRef()?.nativeElement;
+        if (!panelEl || !anchorEl || typeof window === 'undefined')
+            return;
+        const anchorRect = anchorEl.getBoundingClientRect();
+        const panelRect = panelEl.getBoundingClientRect();
+        const gap = 4;
+        this._panelLeft.set(Math.max(8, Math.min(anchorRect.left, window.innerWidth - panelRect.width - 8)));
+        if (anchorRect.bottom + panelRect.height + gap > window.innerHeight) {
+            this._panelTop.set(Math.max(8, anchorRect.top - panelRect.height - gap));
+        }
+    }
     triggerClass = computed(() => {
         const base = 'w-full min-h-[38px] flex items-center gap-2 px-3 py-1.5 text-sm rounded-lg border bg-(--f-form-field-background) focus:outline-none focus-visible:ring-focus transition-all duration-[var(--f-transition-duration)]';
         const showInvalid = this.invalid() && this.touched();
@@ -4960,6 +5490,8 @@ class MultiSelectComponent {
     ...(ngDevMode ? [{ debugName: "styleClass" }] : /* istanbul ignore next */ []));
     style = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "style" }] : /* istanbul ignore next */ []));
+    appendTo = input('self', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appendTo" }] : /* istanbul ignore next */ []));
     readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     autofocus = input(false, { ...(ngDevMode ? { debugName: "autofocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -5181,6 +5713,10 @@ class MultiSelectComponent {
         this.onShow.emit();
         if (this.lazy())
             this.onLazyLoad.emit({ filter: this.filterText() });
+        if (this.appendTo() === 'body') {
+            this.position();
+            setTimeout(() => this.adjustForViewport(), 0);
+        }
     }
     closeList() {
         this._open.set(false);
@@ -5339,7 +5875,7 @@ class MultiSelectComponent {
     registerOnTouched(fn) { this._onTouched = fn; }
     setDisabledState() { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: MultiSelectComponent, isStandalone: true, selector: "f-multiselect", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, filterBy: { classPropertyName: "filterBy", publicName: "filterBy", isSignal: true, isRequired: false, transformFunction: null }, filterMatchMode: { classPropertyName: "filterMatchMode", publicName: "filterMatchMode", isSignal: true, isRequired: false, transformFunction: null }, filterLocale: { classPropertyName: "filterLocale", publicName: "filterLocale", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, resetFilterOnHide: { classPropertyName: "resetFilterOnHide", publicName: "resetFilterOnHide", isSignal: true, isRequired: false, transformFunction: null }, autofocusFilter: { classPropertyName: "autofocusFilter", publicName: "autofocusFilter", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, emptyFilterMessage: { classPropertyName: "emptyFilterMessage", publicName: "emptyFilterMessage", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, optionDisabled: { classPropertyName: "optionDisabled", publicName: "optionDisabled", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedLabels: { classPropertyName: "maxSelectedLabels", publicName: "maxSelectedLabels", isSignal: true, isRequired: false, transformFunction: null }, selectionLimit: { classPropertyName: "selectionLimit", publicName: "selectionLimit", isSignal: true, isRequired: false, transformFunction: null }, showToggleAll: { classPropertyName: "showToggleAll", publicName: "showToggleAll", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingIcon: { classPropertyName: "loadingIcon", publicName: "loadingIcon", isSignal: true, isRequired: false, transformFunction: null }, dropdownIcon: { classPropertyName: "dropdownIcon", publicName: "dropdownIcon", isSignal: true, isRequired: false, transformFunction: null }, clearIcon: { classPropertyName: "clearIcon", publicName: "clearIcon", isSignal: true, isRequired: false, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, optionGroupLabel: { classPropertyName: "optionGroupLabel", publicName: "optionGroupLabel", isSignal: true, isRequired: false, transformFunction: null }, optionGroupChildren: { classPropertyName: "optionGroupChildren", publicName: "optionGroupChildren", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollItemSize: { classPropertyName: "virtualScrollItemSize", publicName: "virtualScrollItemSize", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onBlur: "onBlur", onFocus: "onFocus", onChange: "onChange", onFilter: "onFilter", onShow: "onShow", onHide: "onHide", onClear: "onClear", onLazyLoad: "onLazyLoad", onSelectAllChange: "onSelectAllChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "hostClass()", "style": "style()" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => MultiSelectComponent), multi: true }], queries: [{ propertyName: "selectedItemRef", first: true, predicate: ["selectedItem"], descendants: true, isSignal: true }, { propertyName: "itemRef", first: true, predicate: ["item"], descendants: true, isSignal: true }, { propertyName: "groupRef", first: true, predicate: ["group"], descendants: true, isSignal: true }, { propertyName: "headerRef", first: true, predicate: ["header"], descendants: true, isSignal: true }, { propertyName: "footerRef", first: true, predicate: ["footer"], descendants: true, isSignal: true }, { propertyName: "emptyRef", first: true, predicate: ["empty"], descendants: true, isSignal: true }, { propertyName: "emptyFilterRef", first: true, predicate: ["emptyfilter"], descendants: true, isSignal: true }, { propertyName: "loaderRef", first: true, predicate: ["loader"], descendants: true, isSignal: true }, { propertyName: "filterRef", first: true, predicate: ["filter"], descendants: true, isSignal: true }, { propertyName: "fTemplates", predicate: FTemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "_triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "_filterInputRef", first: true, predicate: ["filterInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: MultiSelectComponent, isStandalone: true, selector: "f-multiselect", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, filterBy: { classPropertyName: "filterBy", publicName: "filterBy", isSignal: true, isRequired: false, transformFunction: null }, filterMatchMode: { classPropertyName: "filterMatchMode", publicName: "filterMatchMode", isSignal: true, isRequired: false, transformFunction: null }, filterLocale: { classPropertyName: "filterLocale", publicName: "filterLocale", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, resetFilterOnHide: { classPropertyName: "resetFilterOnHide", publicName: "resetFilterOnHide", isSignal: true, isRequired: false, transformFunction: null }, autofocusFilter: { classPropertyName: "autofocusFilter", publicName: "autofocusFilter", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, emptyFilterMessage: { classPropertyName: "emptyFilterMessage", publicName: "emptyFilterMessage", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, optionDisabled: { classPropertyName: "optionDisabled", publicName: "optionDisabled", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedLabels: { classPropertyName: "maxSelectedLabels", publicName: "maxSelectedLabels", isSignal: true, isRequired: false, transformFunction: null }, selectionLimit: { classPropertyName: "selectionLimit", publicName: "selectionLimit", isSignal: true, isRequired: false, transformFunction: null }, showToggleAll: { classPropertyName: "showToggleAll", publicName: "showToggleAll", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingIcon: { classPropertyName: "loadingIcon", publicName: "loadingIcon", isSignal: true, isRequired: false, transformFunction: null }, dropdownIcon: { classPropertyName: "dropdownIcon", publicName: "dropdownIcon", isSignal: true, isRequired: false, transformFunction: null }, clearIcon: { classPropertyName: "clearIcon", publicName: "clearIcon", isSignal: true, isRequired: false, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, optionGroupLabel: { classPropertyName: "optionGroupLabel", publicName: "optionGroupLabel", isSignal: true, isRequired: false, transformFunction: null }, optionGroupChildren: { classPropertyName: "optionGroupChildren", publicName: "optionGroupChildren", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollItemSize: { classPropertyName: "virtualScrollItemSize", publicName: "virtualScrollItemSize", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onBlur: "onBlur", onFocus: "onFocus", onChange: "onChange", onFilter: "onFilter", onShow: "onShow", onHide: "onHide", onClear: "onClear", onLazyLoad: "onLazyLoad", onSelectAllChange: "onSelectAllChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "hostClass()", "style": "style()" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => MultiSelectComponent), multi: true }], queries: [{ propertyName: "selectedItemRef", first: true, predicate: ["selectedItem"], descendants: true, isSignal: true }, { propertyName: "itemRef", first: true, predicate: ["item"], descendants: true, isSignal: true }, { propertyName: "groupRef", first: true, predicate: ["group"], descendants: true, isSignal: true }, { propertyName: "headerRef", first: true, predicate: ["header"], descendants: true, isSignal: true }, { propertyName: "footerRef", first: true, predicate: ["footer"], descendants: true, isSignal: true }, { propertyName: "emptyRef", first: true, predicate: ["empty"], descendants: true, isSignal: true }, { propertyName: "emptyFilterRef", first: true, predicate: ["emptyfilter"], descendants: true, isSignal: true }, { propertyName: "loaderRef", first: true, predicate: ["loader"], descendants: true, isSignal: true }, { propertyName: "filterRef", first: true, predicate: ["filter"], descendants: true, isSignal: true }, { propertyName: "fTemplates", predicate: FTemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "_triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "_filterInputRef", first: true, predicate: ["filterInput"], descendants: true, isSignal: true }, { propertyName: "_panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="relative w-full">
       <div
         #trigger
@@ -5397,7 +5933,7 @@ class MultiSelectComponent {
       </div>
 
       @if (open()) {
-        <div class="absolute z-50 w-full mt-1 bg-(--f-overlay-popover-background) border border-(--f-content-border-color) rounded-lg shadow-lg overflow-hidden">
+        <div #panel [class]="panelClass()" [style]="panelStyle()">
           @if (headerTpl()) {
             <div class="border-b border-(--f-content-border-color)">
               <ng-container [ngTemplateOutlet]="headerTpl()" />
@@ -5595,7 +6131,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
       </div>
 
       @if (open()) {
-        <div class="absolute z-50 w-full mt-1 bg-(--f-overlay-popover-background) border border-(--f-content-border-color) rounded-lg shadow-lg overflow-hidden">
+        <div #panel [class]="panelClass()" [style]="panelStyle()">
           @if (headerTpl()) {
             <div class="border-b border-(--f-content-border-color)">
               <ng-container [ngTemplateOutlet]="headerTpl()" />
@@ -5724,7 +6260,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
     </ng-template>
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { _triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], _filterInputRef: [{ type: i0.ViewChild, args: ['filterInput', { isSignal: true }] }], 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 }] }], 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 }] }], filterMatchMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterMatchMode", required: false }] }], filterLocale: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterLocale", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], resetFilterOnHide: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetFilterOnHide", required: false }] }], autofocusFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocusFilter", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], emptyFilterMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyFilterMessage", 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 }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], optionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionDisabled", required: false }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], maxSelectedLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelectedLabels", required: false }] }], selectionLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionLimit", required: false }] }], showToggleAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToggleAll", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingIcon", required: false }] }], dropdownIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownIcon", required: false }] }], clearIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearIcon", 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 }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], onBlur: [{ type: i0.Output, args: ["onBlur"] }], onFocus: [{ type: i0.Output, args: ["onFocus"] }], onChange: [{ type: i0.Output, args: ["onChange"] }], onFilter: [{ type: i0.Output, args: ["onFilter"] }], onShow: [{ type: i0.Output, args: ["onShow"] }], onHide: [{ type: i0.Output, args: ["onHide"] }], onClear: [{ type: i0.Output, args: ["onClear"] }], onLazyLoad: [{ type: i0.Output, args: ["onLazyLoad"] }], onSelectAllChange: [{ type: i0.Output, args: ["onSelectAllChange"] }], selectedItemRef: [{ type: i0.ContentChild, args: ['selectedItem', { isSignal: true }] }], 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 }] }], loaderRef: [{ type: i0.ContentChild, args: ['loader', { isSignal: true }] }], filterRef: [{ type: i0.ContentChild, args: ['filter', { isSignal: true }] }], fTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FTemplateDirective), { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { _triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], _filterInputRef: [{ type: i0.ViewChild, args: ['filterInput', { isSignal: true }] }], _panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], 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 }] }], 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 }] }], filterMatchMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterMatchMode", required: false }] }], filterLocale: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterLocale", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], resetFilterOnHide: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetFilterOnHide", required: false }] }], autofocusFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocusFilter", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], emptyFilterMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyFilterMessage", 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 }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], optionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionDisabled", required: false }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], maxSelectedLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelectedLabels", required: false }] }], selectionLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionLimit", required: false }] }], showToggleAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToggleAll", 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 }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingIcon", required: false }] }], dropdownIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownIcon", required: false }] }], clearIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearIcon", 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 }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], onBlur: [{ type: i0.Output, args: ["onBlur"] }], onFocus: [{ type: i0.Output, args: ["onFocus"] }], onChange: [{ type: i0.Output, args: ["onChange"] }], onFilter: [{ type: i0.Output, args: ["onFilter"] }], onShow: [{ type: i0.Output, args: ["onShow"] }], onHide: [{ type: i0.Output, args: ["onHide"] }], onClear: [{ type: i0.Output, args: ["onClear"] }], onLazyLoad: [{ type: i0.Output, args: ["onLazyLoad"] }], onSelectAllChange: [{ type: i0.Output, args: ["onSelectAllChange"] }], selectedItemRef: [{ type: i0.ContentChild, args: ['selectedItem', { isSignal: true }] }], 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 }] }], loaderRef: [{ type: i0.ContentChild, args: ['loader', { isSignal: true }] }], filterRef: [{ type: i0.ContentChild, args: ['filter', { isSignal: true }] }], fTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FTemplateDirective), { isSignal: true }] }] } });
 
 class PasswordComponent {
     toggleMask = input(true, { ...(ngDevMode ? { debugName: "toggleMask" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -6226,7 +6762,8 @@ class SelectComponent {
         afterNextRender(() => {
             if (!this.autofocus())
                 return;
-            const el = this._editableInputRef()?.nativeElement ?? this._triggerRef()?.nativeElement;
+            const el = this._editableInputRef()?.nativeElement ??
+                this._triggerRef()?.nativeElement;
             el?.focus();
         });
         effect(() => {
@@ -6241,6 +6778,7 @@ class SelectComponent {
                 queueMicrotask(() => this._filterInputRef()?.nativeElement.focus());
             }
         });
+        repositionOnScroll(() => this.open() && this.appendTo() === 'body', () => { this.position(); this.adjustForViewport(); });
     }
     onDocumentClick(e) {
         if (this.open() && !this._el.nativeElement.contains(e.target)) {
@@ -6289,6 +6827,8 @@ class SelectComponent {
     ...(ngDevMode ? [{ debugName: "styleClass" }] : /* istanbul ignore next */ []));
     style = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "style" }] : /* istanbul ignore next */ []));
+    appendTo = input('self', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appendTo" }] : /* istanbul ignore next */ []));
     editable = input(false, { ...(ngDevMode ? { debugName: "editable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     autofocus = input(false, { ...(ngDevMode ? { debugName: "autofocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -6330,6 +6870,51 @@ class SelectComponent {
     ...(ngDevMode ? [{ debugName: "_editableInputRef" }] : /* istanbul ignore next */ []));
     _filterInputRef = viewChild('filterInput', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_filterInputRef" }] : /* istanbul ignore next */ []));
+    _panelRef = viewChild('panel', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_panelRef" }] : /* istanbul ignore next */ []));
+    _panelTop = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_panelTop" }] : /* istanbul ignore next */ []));
+    _panelLeft = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_panelLeft" }] : /* istanbul ignore next */ []));
+    _panelWidth = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_panelWidth" }] : /* istanbul ignore next */ []));
+    panelClass = computed(() => {
+        const position = this.appendTo() === 'body' ? 'fixed' : 'absolute w-full mt-1';
+        return `${position} z-50 bg-(--f-overlay-popover-background) border border-(--f-content-border-color) rounded-lg shadow-lg overflow-hidden`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
+    panelStyle = computed(() => {
+        if (this.appendTo() !== 'body')
+            return {};
+        return {
+            top: `${this._panelTop()}px`,
+            left: `${this._panelLeft()}px`,
+            width: `${this._panelWidth()}px`,
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelStyle" }] : /* istanbul ignore next */ []));
+    position() {
+        const anchorEl = this._triggerRef()?.nativeElement;
+        if (!anchorEl || typeof window === 'undefined')
+            return;
+        const rect = anchorEl.getBoundingClientRect();
+        this._panelTop.set(rect.bottom + 4);
+        this._panelLeft.set(Math.max(8, rect.left));
+        this._panelWidth.set(rect.width);
+    }
+    adjustForViewport() {
+        const panelEl = this._panelRef()?.nativeElement;
+        const anchorEl = this._triggerRef()?.nativeElement;
+        if (!panelEl || !anchorEl || typeof window === 'undefined')
+            return;
+        const anchorRect = anchorEl.getBoundingClientRect();
+        const panelRect = panelEl.getBoundingClientRect();
+        const gap = 4;
+        this._panelLeft.set(Math.max(8, Math.min(anchorRect.left, window.innerWidth - panelRect.width - 8)));
+        if (anchorRect.bottom + panelRect.height + gap > window.innerHeight) {
+            this._panelTop.set(Math.max(8, anchorRect.top - panelRect.height - gap));
+        }
+    }
     selectedItemRef = contentChild('selectedItem', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selectedItemRef" }] : /* istanbul ignore next */ []));
     itemRef = contentChild('item', /* @ts-ignore */
@@ -6351,7 +6936,7 @@ class SelectComponent {
     fTemplates = contentChildren(FTemplateDirective, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "fTemplates" }] : /* istanbul ignore next */ []));
     namedTemplate(name) {
-        return this.fTemplates().find(t => t.fTemplate() === name)?.templateRef ?? null;
+        return (this.fTemplates().find((t) => t.fTemplate() === name)?.templateRef ?? null);
     }
     selectedItemTpl = computed(() => this.selectedItemRef() ?? this.namedTemplate('selectedItem'), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selectedItemTpl" }] : /* istanbul ignore next */ []));
@@ -6385,20 +6970,32 @@ class SelectComponent {
     ...(ngDevMode ? [{ debugName: "listId" }] : /* istanbul ignore next */ []));
     filterFieldList = computed(() => {
         const by = this.filterBy();
-        return by ? by.split(',').map(f => f.trim()).filter(Boolean) : [this.optionLabel()];
+        return by
+            ? by
+                .split(',')
+                .map((f) => f.trim())
+                .filter(Boolean)
+            : [this.optionLabel()];
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "filterFieldList" }] : /* istanbul ignore next */ []));
     matchesFilter(raw, query) {
         const locale = this.filterLocale() || undefined;
-        const s = locale ? String(raw ?? '').toLocaleLowerCase(locale) : String(raw ?? '').toLowerCase();
+        const s = locale
+            ? String(raw ?? '').toLocaleLowerCase(locale)
+            : String(raw ?? '').toLowerCase();
         const q = locale ? query.toLocaleLowerCase(locale) : query.toLowerCase();
         switch (this.filterMatchMode()) {
-            case 'startsWith': return s.startsWith(q);
-            case 'endsWith': return s.endsWith(q);
-            case 'equals': return s === q;
-            case 'notEquals': return s !== q;
+            case 'startsWith':
+                return s.startsWith(q);
+            case 'endsWith':
+                return s.endsWith(q);
+            case 'equals':
+                return s === q;
+            case 'notEquals':
+                return s !== q;
             case 'contains':
-            default: return s.includes(q);
+            default:
+                return s.includes(q);
         }
     }
     optionMatchesQuery(opt, query) {
@@ -6407,36 +7004,41 @@ class SelectComponent {
         if (opt === null || typeof opt !== 'object')
             return this.matchesFilter(opt, query);
         const rec = opt;
-        return this.filterFieldList().some(f => this.matchesFilter(rec[f], query));
+        return this.filterFieldList().some((f) => this.matchesFilter(rec[f], query));
     }
     filteredOptions = computed(() => {
         const opts = this.options();
         const q = this.filterText();
         if (!q)
             return opts;
-        return opts.filter(o => this.optionMatchesQuery(o, q));
+        return opts.filter((o) => this.optionMatchesQuery(o, q));
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
     allLeafOptions = computed(() => {
         if (!this.group())
             return this.options();
         const groups = this.options();
-        return groups.flatMap(g => g[this.optionGroupChildren()] ?? []);
+        return groups.flatMap((g) => g[this.optionGroupChildren()] ?? []);
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "allLeafOptions" }] : /* istanbul ignore next */ []));
     flatItems = computed(() => {
         const q = this.filterText();
         if (!this.group()) {
-            return this.filteredOptions().map(o => ({ kind: 'option', option: o }));
+            return this.filteredOptions().map((o) => ({ kind: 'option', option: o }));
         }
         const groups = this.options();
         const out = [];
         for (const g of groups) {
             const children = g[this.optionGroupChildren()] ?? [];
-            const filteredChildren = q ? children.filter(o => this.optionMatchesQuery(o, q)) : children;
+            const filteredChildren = q
+                ? children.filter((o) => this.optionMatchesQuery(o, q))
+                : children;
             if (!filteredChildren.length)
                 continue;
-            out.push({ kind: 'group', label: String(g[this.optionGroupLabel()] ?? '') });
+            out.push({
+                kind: 'group',
+                label: String(g[this.optionGroupLabel()] ?? ''),
+            });
             for (const c of filteredChildren)
                 out.push({ kind: 'option', option: c });
         }
@@ -6445,7 +7047,7 @@ class SelectComponent {
     ...(ngDevMode ? [{ debugName: "flatItems" }] : /* istanbul ignore next */ []));
     navigableOptions = computed(() => this.flatItems()
         .filter((i) => i.kind === 'option')
-        .map(i => i.option), /* @ts-ignore */
+        .map((i) => i.option), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "navigableOptions" }] : /* istanbul ignore next */ []));
     activeDescendantId = computed(() => {
         const idx = this._focusedOptionIndex();
@@ -6474,7 +7076,7 @@ class SelectComponent {
         const v = this.value();
         if (v == null)
             return '';
-        const found = this.allLeafOptions().find(o => this.getOptionValue(o) === v);
+        const found = this.allLeafOptions().find((o) => this.getOptionValue(o) === v);
         return found ? this.getOptionLabel(found) : String(v);
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selectedLabel" }] : /* istanbul ignore next */ []));
@@ -6482,9 +7084,17 @@ class SelectComponent {
         const base = 'w-full flex items-center justify-between px-3 py-2 text-sm rounded-lg border bg-(--f-form-field-background) text-(--f-form-field-color) focus:outline-none focus-visible:ring-focus transition-all duration-[var(--f-transition-duration)]';
         const showInvalid = this.invalid() && this.touched();
         const stateClass = this.open()
-            ? (showInvalid ? 'border-red-400' : 'border-primary')
-            : (showInvalid ? 'border-red-400 hover:border-red-300' : 'border-(--f-form-field-border-color) hover:border-(--f-form-field-hover-border-color)');
-        const disabledClass = this.disabled() ? 'opacity-60 cursor-not-allowed' : (this.readonly() ? 'cursor-default' : 'cursor-pointer');
+            ? showInvalid
+                ? 'border-red-400'
+                : 'border-primary'
+            : showInvalid
+                ? 'border-red-400 hover:border-red-300'
+                : 'border-(--f-form-field-border-color) hover:border-(--f-form-field-hover-border-color)';
+        const disabledClass = this.disabled()
+            ? 'opacity-60 cursor-not-allowed'
+            : this.readonly()
+                ? 'cursor-default'
+                : 'cursor-pointer';
         return `${base} ${stateClass} ${disabledClass}`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "triggerClass" }] : /* istanbul ignore next */ []));
@@ -6492,7 +7102,7 @@ class SelectComponent {
         const v = this.value();
         if (v == null)
             return null;
-        return this.allLeafOptions().find(o => this.getOptionValue(o) === v) ?? null;
+        return (this.allLeafOptions().find((o) => this.getOptionValue(o) === v) ?? null);
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selectedOption" }] : /* istanbul ignore next */ []));
     getOptionLabel(opt) {
@@ -6517,7 +7127,7 @@ class SelectComponent {
         if (this.readonly())
             return;
         this._editableOverride.set(text);
-        const match = this.allLeafOptions().find(o => this.getOptionLabel(o) === text);
+        const match = this.allLeafOptions().find((o) => this.getOptionLabel(o) === text);
         const v = match ? this.getOptionValue(match) : text;
         this._value.set(v);
         this._onChange(v);
@@ -6546,6 +7156,10 @@ class SelectComponent {
         this.onShow.emit();
         if (this.lazy())
             this.onLazyLoad.emit({ filter: this.filterText() });
+        if (this.appendTo() === 'body') {
+            this.position();
+            setTimeout(() => this.adjustForViewport(), 0);
+        }
     }
     closeList() {
         this._open.set(false);
@@ -6569,15 +7183,19 @@ class SelectComponent {
     }
     focusFirstOrSelected() {
         const opts = this.navigableOptions();
-        const idx = opts.findIndex(o => this.getOptionValue(o) === this.value());
-        this._focusedOptionIndex.set(idx >= 0 ? idx : (opts.length ? 0 : -1));
+        const idx = opts.findIndex((o) => this.getOptionValue(o) === this.value());
+        this._focusedOptionIndex.set(idx >= 0 ? idx : opts.length ? 0 : -1);
     }
     moveFocus(delta) {
         const len = this.navigableOptions().length;
         if (!len)
             return;
         const cur = this._focusedOptionIndex();
-        const next = cur < 0 ? (delta > 0 ? 0 : len - 1) : Math.min(len - 1, Math.max(0, cur + delta));
+        const next = cur < 0
+            ? delta > 0
+                ? 0
+                : len - 1
+            : Math.min(len - 1, Math.max(0, cur + delta));
         this._focusedOptionIndex.set(next);
     }
     _typeaheadStr = '';
@@ -6588,13 +7206,15 @@ class SelectComponent {
         this._typeaheadStr += char.toLowerCase();
         if (this._typeaheadTimer)
             clearTimeout(this._typeaheadTimer);
-        this._typeaheadTimer = setTimeout(() => { this._typeaheadStr = ''; }, 500);
+        this._typeaheadTimer = setTimeout(() => {
+            this._typeaheadStr = '';
+        }, 500);
         const opts = this.navigableOptions();
         if (!opts.length)
             return;
         const start = this._focusedOptionIndex() + 1;
         const ordered = [...opts.slice(start), ...opts.slice(0, start)];
-        const match = ordered.find(o => this.getOptionLabel(o).toLowerCase().startsWith(this._typeaheadStr));
+        const match = ordered.find((o) => this.getOptionLabel(o).toLowerCase().startsWith(this._typeaheadStr));
         if (match)
             this._focusedOptionIndex.set(opts.indexOf(match));
     }
@@ -6655,17 +7275,33 @@ class SelectComponent {
                     this.closeList();
                 break;
             default:
-                if (!this.editable() && event.key.length === 1 && !event.altKey && !event.ctrlKey && !event.metaKey) {
+                if (!this.editable() &&
+                    event.key.length === 1 &&
+                    !event.altKey &&
+                    !event.ctrlKey &&
+                    !event.metaKey) {
                     this.typeahead(event.key);
                 }
         }
     }
-    writeValue(val) { this._value.set(val); }
-    registerOnChange(fn) { this._onChange = fn; }
-    registerOnTouched(fn) { this._onTouched = fn; }
+    writeValue(val) {
+        this._value.set(val);
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
     setDisabledState() { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", 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 }, 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 } }, 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: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SelectComponent), multi: true }], queries: [{ propertyName: "selectedItemRef", first: true, predicate: ["selectedItem"], descendants: true, isSignal: true }, { propertyName: "itemRef", first: true, predicate: ["item"], descendants: true, isSignal: true }, { propertyName: "groupRef", first: true, predicate: ["group"], descendants: true, isSignal: true }, { propertyName: "headerRef", first: true, predicate: ["header"], descendants: true, isSignal: true }, { propertyName: "footerRef", first: true, predicate: ["footer"], descendants: true, isSignal: true }, { propertyName: "emptyRef", first: true, predicate: ["empty"], descendants: true, isSignal: true }, { propertyName: "emptyFilterRef", first: true, predicate: ["emptyfilter"], descendants: true, isSignal: true }, { propertyName: "loaderRef", first: true, predicate: ["loader"], descendants: true, isSignal: true }, { propertyName: "filterRef", first: true, predicate: ["filter"], descendants: true, isSignal: true }, { propertyName: "fTemplates", predicate: FTemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "_triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "_editableInputRef", first: true, predicate: ["editableInputEl"], descendants: true, isSignal: true }, { propertyName: "_filterInputRef", first: true, predicate: ["filterInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", 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 } }, 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: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SelectComponent),
+                multi: true,
+            },
+        ], queries: [{ propertyName: "selectedItemRef", first: true, predicate: ["selectedItem"], descendants: true, isSignal: true }, { propertyName: "itemRef", first: true, predicate: ["item"], descendants: true, isSignal: true }, { propertyName: "groupRef", first: true, predicate: ["group"], descendants: true, isSignal: true }, { propertyName: "headerRef", first: true, predicate: ["header"], descendants: true, isSignal: true }, { propertyName: "footerRef", first: true, predicate: ["footer"], descendants: true, isSignal: true }, { propertyName: "emptyRef", first: true, predicate: ["empty"], descendants: true, isSignal: true }, { propertyName: "emptyFilterRef", first: true, predicate: ["emptyfilter"], descendants: true, isSignal: true }, { propertyName: "loaderRef", first: true, predicate: ["loader"], descendants: true, isSignal: true }, { propertyName: "filterRef", first: true, predicate: ["filter"], descendants: true, isSignal: true }, { propertyName: "fTemplates", predicate: FTemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "_triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "_editableInputRef", first: true, predicate: ["editableInputEl"], descendants: true, isSignal: true }, { propertyName: "_filterInputRef", first: true, predicate: ["filterInput"], descendants: true, isSignal: true }, { propertyName: "_panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="relative w-full">
       <button
         #trigger
@@ -6700,25 +7336,45 @@ class SelectComponent {
           />
         } @else if (selectedItemTpl() && selectedOption() != null) {
           <span class="flex-1 min-w-0 truncate text-left">
-            <ng-container [ngTemplateOutlet]="selectedItemTpl()" [ngTemplateOutletContext]="{ $implicit: selectedOption() }" />
+            <ng-container
+              [ngTemplateOutlet]="selectedItemTpl()"
+              [ngTemplateOutletContext]="{ $implicit: selectedOption() }"
+            />
           </span>
         } @else {
-          <span data-select-label class="flex-1 min-w-0 truncate text-left" [class.text-(--f-form-field-placeholder-color)]="!selectedLabel()">{{ selectedLabel() || placeholder() }}</span>
+          <span
+            data-select-label
+            class="flex-1 min-w-0 truncate text-left"
+            [class.text-(--f-form-field-placeholder-color)]="!selectedLabel()"
+            >{{ selectedLabel() || placeholder() }}</span
+          >
         }
         <span class="flex items-center gap-1 shrink-0">
           @if (showClear() && value() != null && !disabled() && !readonly()) {
-            <ui-icon [name]="clearIcon()" class="text-xs text-(--f-form-field-placeholder-color) hover:text-(--f-text-color) shrink-0" (click)="clear($event)"></ui-icon>
+            <ui-icon
+              [name]="clearIcon()"
+              class="text-xs text-(--f-form-field-placeholder-color) hover:text-(--f-text-color) shrink-0"
+              (click)="clear($event)"
+            ></ui-icon>
           }
           @if (loading()) {
-            <ui-icon [name]="loadingIcon()" [spin]="true" class="text-xs text-(--f-form-field-placeholder-color) shrink-0"></ui-icon>
+            <ui-icon
+              [name]="loadingIcon()"
+              [spin]="true"
+              class="text-xs text-(--f-form-field-placeholder-color) shrink-0"
+            ></ui-icon>
           } @else {
-            <ui-icon [name]="dropdownIcon()" class="text-xs text-(--f-form-field-placeholder-color) transition-transform duration-[var(--f-transition-duration)] shrink-0" [class.rotate-180]="open()"></ui-icon>
+            <ui-icon
+              [name]="dropdownIcon()"
+              class="text-xs text-(--f-form-field-placeholder-color) transition-transform duration-[var(--f-transition-duration)] shrink-0"
+              [class.rotate-180]="open()"
+            ></ui-icon>
           }
         </span>
       </button>
 
       @if (open()) {
-        <div class="absolute z-50 w-full mt-1 bg-(--f-overlay-popover-background) border border-(--f-content-border-color) rounded-lg shadow-lg overflow-hidden">
+        <div #panel [class]="panelClass()" [style]="panelStyle()">
           @if (headerTpl()) {
             <div class="border-b border-(--f-content-border-color)">
               <ng-container [ngTemplateOutlet]="headerTpl()" />
@@ -6727,10 +7383,21 @@ class SelectComponent {
           @if (filter()) {
             <div class="p-2 border-b border-(--f-content-border-color)">
               @if (filterTpl()) {
-                <ng-container [ngTemplateOutlet]="filterTpl()" [ngTemplateOutletContext]="{ $implicit: filterText(), filter: setFilterFn }" />
+                <ng-container
+                  [ngTemplateOutlet]="filterTpl()"
+                  [ngTemplateOutletContext]="{
+                    $implicit: filterText(),
+                    filter: setFilterFn,
+                  }"
+                />
               } @else {
-                <div class="flex items-center gap-2 px-2 py-1.5 bg-(--f-content-hover-background) rounded-lg border border-(--f-content-border-color)">
-                  <ui-icon name="search" class="text-xs text-(--f-text-muted-color) shrink-0"></ui-icon>
+                <div
+                  class="flex items-center gap-2 px-2 py-1.5 bg-(--f-content-hover-background) rounded-lg border border-(--f-content-border-color)"
+                >
+                  <ui-icon
+                    name="search"
+                    class="text-xs text-(--f-text-muted-color) shrink-0"
+                  ></ui-icon>
                   <input
                     #filterInput
                     type="text"
@@ -6745,24 +7412,43 @@ class SelectComponent {
               }
             </div>
           }
-          <div data-select-list [id]="listId()" role="listbox" class="max-h-56 overflow-auto py-1">
+          <div
+            data-select-list
+            [id]="listId()"
+            role="listbox"
+            class="max-h-56 overflow-auto py-1"
+          >
             @if (loading()) {
               @if (loaderTpl()) {
                 <ng-container [ngTemplateOutlet]="loaderTpl()" />
               } @else {
                 <div class="py-6 flex flex-col items-center gap-2">
-                  <ui-icon [name]="loadingIcon()" [spin]="true" class="text-xl text-(--f-text-muted-color)"></ui-icon>
+                  <ui-icon
+                    [name]="loadingIcon()"
+                    [spin]="true"
+                    class="text-xl text-(--f-text-muted-color)"
+                  ></ui-icon>
                 </div>
               }
             } @else if (virtualScroll()) {
-              <f-scroller [items]="flatItems()" [itemSize]="virtualScrollItemSize()" scrollHeight="14rem">
+              <f-scroller
+                [items]="flatItems()"
+                [itemSize]="virtualScrollItemSize()"
+                scrollHeight="14rem"
+              >
                 <ng-template let-item let-i="index">
-                  <ng-container [ngTemplateOutlet]="rowTpl" [ngTemplateOutletContext]="{ $implicit: item, index: i }" />
+                  <ng-container
+                    [ngTemplateOutlet]="rowTpl"
+                    [ngTemplateOutletContext]="{ $implicit: item, index: i }"
+                  />
                 </ng-template>
               </f-scroller>
             } @else {
               @for (item of flatItems(); track $index) {
-                <ng-container [ngTemplateOutlet]="rowTpl" [ngTemplateOutletContext]="{ $implicit: item, index: $index }" />
+                <ng-container
+                  [ngTemplateOutlet]="rowTpl"
+                  [ngTemplateOutletContext]="{ $implicit: item, index: $index }"
+                />
               } @empty {
                 <ng-container [ngTemplateOutlet]="emptyStateTpl" />
               }
@@ -6779,9 +7465,14 @@ class SelectComponent {
 
     <ng-template #rowTpl let-item let-i="index">
       @if (item.kind === 'group') {
-        <div class="h-full flex items-center px-3 py-1.5 text-xs font-semibold uppercase tracking-wide text-(--f-text-muted-color) bg-(--f-content-hover-background)">
+        <div
+          class="h-full flex items-center px-3 py-1.5 text-xs font-semibold uppercase tracking-wide text-(--f-text-muted-color) bg-(--f-content-hover-background)"
+        >
           @if (groupTpl()) {
-            <ng-container [ngTemplateOutlet]="groupTpl()" [ngTemplateOutletContext]="{ $implicit: item.label }" />
+            <ng-container
+              [ngTemplateOutlet]="groupTpl()"
+              [ngTemplateOutletContext]="{ $implicit: item.label }"
+            />
           } @else {
             {{ item.label }}
           }
@@ -6802,7 +7493,10 @@ class SelectComponent {
           }
           <span class="flex-1 truncate">
             @if (itemTpl()) {
-              <ng-container [ngTemplateOutlet]="itemTpl()" [ngTemplateOutletContext]="{ $implicit: item.option }" />
+              <ng-container
+                [ngTemplateOutlet]="itemTpl()"
+                [ngTemplateOutletContext]="{ $implicit: item.option }"
+              />
             } @else {
               {{ getOptionLabel(item.option) }}
             }
@@ -6819,15 +7513,25 @@ class SelectComponent {
         <ng-container [ngTemplateOutlet]="emptyFilterTpl()" />
       } @else if (filterText()) {
         <div class="py-6 flex flex-col items-center gap-2">
-          <ui-icon name="search" class="text-2xl text-(--f-text-muted-color)"></ui-icon>
-          <span class="text-sm text-(--f-text-muted-color)">{{ emptyFilterMessage() }}</span>
+          <ui-icon
+            name="search"
+            class="text-2xl text-(--f-text-muted-color)"
+          ></ui-icon>
+          <span class="text-sm text-(--f-text-muted-color)">{{
+            emptyFilterMessage()
+          }}</span>
         </div>
       } @else if (emptyTpl()) {
         <ng-container [ngTemplateOutlet]="emptyTpl()" />
       } @else {
         <div class="py-6 flex flex-col items-center gap-2">
-          <ui-icon name="inbox" class="text-2xl text-(--f-text-muted-color)"></ui-icon>
-          <span class="text-sm text-(--f-text-muted-color)">{{ emptyMessage() }}</span>
+          <ui-icon
+            name="inbox"
+            class="text-2xl text-(--f-text-muted-color)"
+          ></ui-icon>
+          <span class="text-sm text-(--f-text-muted-color)">{{
+            emptyMessage()
+          }}</span>
         </div>
       }
     </ng-template>
@@ -6838,7 +7542,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
             args: [{
                     selector: 'f-select',
                     imports: [UiIconComponent, NgTemplateOutlet, ScrollerComponent],
-                    providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SelectComponent), multi: true }],
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SelectComponent),
+                            multi: true,
+                        },
+                    ],
                     host: {
                         '[class]': 'hostClass()',
                         '[style]': 'style()',
@@ -6879,25 +7589,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
           />
         } @else if (selectedItemTpl() && selectedOption() != null) {
           <span class="flex-1 min-w-0 truncate text-left">
-            <ng-container [ngTemplateOutlet]="selectedItemTpl()" [ngTemplateOutletContext]="{ $implicit: selectedOption() }" />
+            <ng-container
+              [ngTemplateOutlet]="selectedItemTpl()"
+              [ngTemplateOutletContext]="{ $implicit: selectedOption() }"
+            />
           </span>
         } @else {
-          <span data-select-label class="flex-1 min-w-0 truncate text-left" [class.text-(--f-form-field-placeholder-color)]="!selectedLabel()">{{ selectedLabel() || placeholder() }}</span>
+          <span
+            data-select-label
+            class="flex-1 min-w-0 truncate text-left"
+            [class.text-(--f-form-field-placeholder-color)]="!selectedLabel()"
+            >{{ selectedLabel() || placeholder() }}</span
+          >
         }
         <span class="flex items-center gap-1 shrink-0">
           @if (showClear() && value() != null && !disabled() && !readonly()) {
-            <ui-icon [name]="clearIcon()" class="text-xs text-(--f-form-field-placeholder-color) hover:text-(--f-text-color) shrink-0" (click)="clear($event)"></ui-icon>
+            <ui-icon
+              [name]="clearIcon()"
+              class="text-xs text-(--f-form-field-placeholder-color) hover:text-(--f-text-color) shrink-0"
+              (click)="clear($event)"
+            ></ui-icon>
           }
           @if (loading()) {
-            <ui-icon [name]="loadingIcon()" [spin]="true" class="text-xs text-(--f-form-field-placeholder-color) shrink-0"></ui-icon>
+            <ui-icon
+              [name]="loadingIcon()"
+              [spin]="true"
+              class="text-xs text-(--f-form-field-placeholder-color) shrink-0"
+            ></ui-icon>
           } @else {
-            <ui-icon [name]="dropdownIcon()" class="text-xs text-(--f-form-field-placeholder-color) transition-transform duration-[var(--f-transition-duration)] shrink-0" [class.rotate-180]="open()"></ui-icon>
+            <ui-icon
+              [name]="dropdownIcon()"
+              class="text-xs text-(--f-form-field-placeholder-color) transition-transform duration-[var(--f-transition-duration)] shrink-0"
+              [class.rotate-180]="open()"
+            ></ui-icon>
           }
         </span>
       </button>
 
       @if (open()) {
-        <div class="absolute z-50 w-full mt-1 bg-(--f-overlay-popover-background) border border-(--f-content-border-color) rounded-lg shadow-lg overflow-hidden">
+        <div #panel [class]="panelClass()" [style]="panelStyle()">
           @if (headerTpl()) {
             <div class="border-b border-(--f-content-border-color)">
               <ng-container [ngTemplateOutlet]="headerTpl()" />
@@ -6906,10 +7636,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
           @if (filter()) {
             <div class="p-2 border-b border-(--f-content-border-color)">
               @if (filterTpl()) {
-                <ng-container [ngTemplateOutlet]="filterTpl()" [ngTemplateOutletContext]="{ $implicit: filterText(), filter: setFilterFn }" />
+                <ng-container
+                  [ngTemplateOutlet]="filterTpl()"
+                  [ngTemplateOutletContext]="{
+                    $implicit: filterText(),
+                    filter: setFilterFn,
+                  }"
+                />
               } @else {
-                <div class="flex items-center gap-2 px-2 py-1.5 bg-(--f-content-hover-background) rounded-lg border border-(--f-content-border-color)">
-                  <ui-icon name="search" class="text-xs text-(--f-text-muted-color) shrink-0"></ui-icon>
+                <div
+                  class="flex items-center gap-2 px-2 py-1.5 bg-(--f-content-hover-background) rounded-lg border border-(--f-content-border-color)"
+                >
+                  <ui-icon
+                    name="search"
+                    class="text-xs text-(--f-text-muted-color) shrink-0"
+                  ></ui-icon>
                   <input
                     #filterInput
                     type="text"
@@ -6924,24 +7665,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
               }
             </div>
           }
-          <div data-select-list [id]="listId()" role="listbox" class="max-h-56 overflow-auto py-1">
+          <div
+            data-select-list
+            [id]="listId()"
+            role="listbox"
+            class="max-h-56 overflow-auto py-1"
+          >
             @if (loading()) {
               @if (loaderTpl()) {
                 <ng-container [ngTemplateOutlet]="loaderTpl()" />
               } @else {
                 <div class="py-6 flex flex-col items-center gap-2">
-                  <ui-icon [name]="loadingIcon()" [spin]="true" class="text-xl text-(--f-text-muted-color)"></ui-icon>
+                  <ui-icon
+                    [name]="loadingIcon()"
+                    [spin]="true"
+                    class="text-xl text-(--f-text-muted-color)"
+                  ></ui-icon>
                 </div>
               }
             } @else if (virtualScroll()) {
-              <f-scroller [items]="flatItems()" [itemSize]="virtualScrollItemSize()" scrollHeight="14rem">
+              <f-scroller
+                [items]="flatItems()"
+                [itemSize]="virtualScrollItemSize()"
+                scrollHeight="14rem"
+              >
                 <ng-template let-item let-i="index">
-                  <ng-container [ngTemplateOutlet]="rowTpl" [ngTemplateOutletContext]="{ $implicit: item, index: i }" />
+                  <ng-container
+                    [ngTemplateOutlet]="rowTpl"
+                    [ngTemplateOutletContext]="{ $implicit: item, index: i }"
+                  />
                 </ng-template>
               </f-scroller>
             } @else {
               @for (item of flatItems(); track $index) {
-                <ng-container [ngTemplateOutlet]="rowTpl" [ngTemplateOutletContext]="{ $implicit: item, index: $index }" />
+                <ng-container
+                  [ngTemplateOutlet]="rowTpl"
+                  [ngTemplateOutletContext]="{ $implicit: item, index: $index }"
+                />
               } @empty {
                 <ng-container [ngTemplateOutlet]="emptyStateTpl" />
               }
@@ -6958,9 +7718,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 
     <ng-template #rowTpl let-item let-i="index">
       @if (item.kind === 'group') {
-        <div class="h-full flex items-center px-3 py-1.5 text-xs font-semibold uppercase tracking-wide text-(--f-text-muted-color) bg-(--f-content-hover-background)">
+        <div
+          class="h-full flex items-center px-3 py-1.5 text-xs font-semibold uppercase tracking-wide text-(--f-text-muted-color) bg-(--f-content-hover-background)"
+        >
           @if (groupTpl()) {
-            <ng-container [ngTemplateOutlet]="groupTpl()" [ngTemplateOutletContext]="{ $implicit: item.label }" />
+            <ng-container
+              [ngTemplateOutlet]="groupTpl()"
+              [ngTemplateOutletContext]="{ $implicit: item.label }"
+            />
           } @else {
             {{ item.label }}
           }
@@ -6981,7 +7746,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
           }
           <span class="flex-1 truncate">
             @if (itemTpl()) {
-              <ng-container [ngTemplateOutlet]="itemTpl()" [ngTemplateOutletContext]="{ $implicit: item.option }" />
+              <ng-container
+                [ngTemplateOutlet]="itemTpl()"
+                [ngTemplateOutletContext]="{ $implicit: item.option }"
+              />
             } @else {
               {{ getOptionLabel(item.option) }}
             }
@@ -6998,21 +7766,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
         <ng-container [ngTemplateOutlet]="emptyFilterTpl()" />
       } @else if (filterText()) {
         <div class="py-6 flex flex-col items-center gap-2">
-          <ui-icon name="search" class="text-2xl text-(--f-text-muted-color)"></ui-icon>
-          <span class="text-sm text-(--f-text-muted-color)">{{ emptyFilterMessage() }}</span>
+          <ui-icon
+            name="search"
+            class="text-2xl text-(--f-text-muted-color)"
+          ></ui-icon>
+          <span class="text-sm text-(--f-text-muted-color)">{{
+            emptyFilterMessage()
+          }}</span>
         </div>
       } @else if (emptyTpl()) {
         <ng-container [ngTemplateOutlet]="emptyTpl()" />
       } @else {
         <div class="py-6 flex flex-col items-center gap-2">
-          <ui-icon name="inbox" class="text-2xl text-(--f-text-muted-color)"></ui-icon>
-          <span class="text-sm text-(--f-text-muted-color)">{{ emptyMessage() }}</span>
+          <ui-icon
+            name="inbox"
+            class="text-2xl text-(--f-text-muted-color)"
+          ></ui-icon>
+          <span class="text-sm text-(--f-text-muted-color)">{{
+            emptyMessage()
+          }}</span>
         </div>
       }
     </ng-template>
   `,
                 }]
-        }], 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 }] }], 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 }] }], filterMatchMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterMatchMode", required: false }] }], filterLocale: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterLocale", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], resetFilterOnHide: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetFilterOnHide", required: false }] }], autofocusFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocusFilter", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], emptyFilterMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyFilterMessage", 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 }] }], dropdownIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownIcon", required: false }] }], clearIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearIcon", 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 }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], checkmark: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkmark", 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 }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], onFilter: [{ type: i0.Output, args: ["onFilter"] }], onChange: [{ type: i0.Output, args: ["onChange"] }], onShow: [{ type: i0.Output, args: ["onShow"] }], onHide: [{ type: i0.Output, args: ["onHide"] }], onBlur: [{ type: i0.Output, args: ["onBlur"] }], onFocus: [{ type: i0.Output, args: ["onFocus"] }], onClear: [{ type: i0.Output, args: ["onClear"] }], onLazyLoad: [{ type: i0.Output, args: ["onLazyLoad"] }], _triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], _editableInputRef: [{ type: i0.ViewChild, args: ['editableInputEl', { isSignal: true }] }], _filterInputRef: [{ type: i0.ViewChild, args: ['filterInput', { isSignal: true }] }], selectedItemRef: [{ type: i0.ContentChild, args: ['selectedItem', { isSignal: true }] }], 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 }] }], loaderRef: [{ type: i0.ContentChild, args: ['loader', { 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 }] }], 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 }] }], filterMatchMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterMatchMode", required: false }] }], filterLocale: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterLocale", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], resetFilterOnHide: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetFilterOnHide", required: false }] }], autofocusFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocusFilter", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], emptyFilterMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyFilterMessage", 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 }] }], dropdownIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownIcon", required: false }] }], clearIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearIcon", 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 }] }], 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 }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], checkmark: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkmark", 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 }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], onFilter: [{ type: i0.Output, args: ["onFilter"] }], onChange: [{ type: i0.Output, args: ["onChange"] }], onShow: [{ type: i0.Output, args: ["onShow"] }], onHide: [{ type: i0.Output, args: ["onHide"] }], onBlur: [{ type: i0.Output, args: ["onBlur"] }], onFocus: [{ type: i0.Output, args: ["onFocus"] }], onClear: [{ type: i0.Output, args: ["onClear"] }], onLazyLoad: [{ type: i0.Output, args: ["onLazyLoad"] }], _triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], _editableInputRef: [{ type: i0.ViewChild, args: ['editableInputEl', { isSignal: true }] }], _filterInputRef: [{ type: i0.ViewChild, args: ['filterInput', { isSignal: true }] }], _panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], selectedItemRef: [{ type: i0.ContentChild, args: ['selectedItem', { isSignal: true }] }], 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 }] }], loaderRef: [{ type: i0.ContentChild, args: ['loader', { isSignal: true }] }], filterRef: [{ type: i0.ContentChild, args: ['filter', { isSignal: true }] }], fTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FTemplateDirective), { isSignal: true }] }] } });
 
 class SelectButtonComponent {
     options = input([], /* @ts-ignore */
@@ -10962,12 +11740,26 @@ class SortIconComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SortIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SortIconComponent, isStandalone: true, selector: "f-sorticon", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <span class="inline-flex items-center gap-0.5 ml-1">
-      <span class="inline-flex flex-col text-[8px] leading-none">
-        <ui-icon name="chevron-up" [class]="direction() === 1 ? 'opacity-100 text-primary' : 'opacity-40'"></ui-icon>
-        <ui-icon name="chevron-down" [class]="direction() === -1 ? 'opacity-100 text-primary' : 'opacity-40'"></ui-icon>
+      <span class="inline-flex flex-col leading-none">
+        <ui-icon
+          name="chevron-up"
+          [class]="
+            'h-[10px] w-[10px] ' +
+            (direction() === 1 ? 'opacity-100 text-primary' : 'opacity-40')
+          "
+        ></ui-icon>
+        <ui-icon
+          name="chevron-down"
+          [class]="
+            'h-[10px] w-[10px] ' +
+            (direction() === -1 ? 'opacity-100 text-primary' : 'opacity-40')
+          "
+        ></ui-icon>
       </span>
       @if (priority() !== null) {
-        <sup class="text-[9px] font-semibold text-primary">{{ priority() }}</sup>
+        <sup class="text-[9px] font-semibold text-primary">{{
+          priority()
+        }}</sup>
       }
     </span>
   `, isInline: true, dependencies: [{ kind: "component", type: UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }] });
@@ -10979,12 +11771,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                     imports: [UiIconComponent],
                     template: `
     <span class="inline-flex items-center gap-0.5 ml-1">
-      <span class="inline-flex flex-col text-[8px] leading-none">
-        <ui-icon name="chevron-up" [class]="direction() === 1 ? 'opacity-100 text-primary' : 'opacity-40'"></ui-icon>
-        <ui-icon name="chevron-down" [class]="direction() === -1 ? 'opacity-100 text-primary' : 'opacity-40'"></ui-icon>
+      <span class="inline-flex flex-col leading-none">
+        <ui-icon
+          name="chevron-up"
+          [class]="
+            'h-[10px] w-[10px] ' +
+            (direction() === 1 ? 'opacity-100 text-primary' : 'opacity-40')
+          "
+        ></ui-icon>
+        <ui-icon
+          name="chevron-down"
+          [class]="
+            'h-[10px] w-[10px] ' +
+            (direction() === -1 ? 'opacity-100 text-primary' : 'opacity-40')
+          "
+        ></ui-icon>
       </span>
       @if (priority() !== null) {
-        <sup class="text-[9px] font-semibold text-primary">{{ priority() }}</sup>
+        <sup class="text-[9px] font-semibold text-primary">{{
+          priority()
+        }}</sup>
       }
     </span>
   `,
@@ -11328,6 +12134,63 @@ class AutoCompleteComponent {
     _el = inject(ElementRef);
     _id = `f-autocomplete-${nextAutoCompleteId++}`;
     listboxId = `${this._id}-list`;
+    anchorRef = viewChild('anchor', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "anchorRef" }] : /* istanbul ignore next */ []));
+    panelRef = viewChild('panel', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelRef" }] : /* istanbul ignore next */ []));
+    _panelTop = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_panelTop" }] : /* istanbul ignore next */ []));
+    _panelLeft = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_panelLeft" }] : /* istanbul ignore next */ []));
+    _panelWidth = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_panelWidth" }] : /* istanbul ignore next */ []));
+    panelClass = computed(() => {
+        const position = this.appendTo() === 'body' ? 'fixed' : 'absolute w-full mt-1';
+        return `${position} z-50 bg-(--f-overlay-popover-background) border border-(--f-content-border-color) rounded-lg shadow-lg overflow-hidden`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
+    panelStyle = computed(() => {
+        if (this.appendTo() !== 'body')
+            return {};
+        return {
+            top: `${this._panelTop()}px`,
+            left: `${this._panelLeft()}px`,
+            width: `${this._panelWidth()}px`,
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelStyle" }] : /* istanbul ignore next */ []));
+    position() {
+        const anchorEl = this.anchorRef()?.nativeElement;
+        if (!anchorEl || typeof window === 'undefined')
+            return;
+        const rect = anchorEl.getBoundingClientRect();
+        this._panelTop.set(rect.bottom + 4);
+        this._panelLeft.set(Math.max(8, rect.left));
+        this._panelWidth.set(rect.width);
+    }
+    adjustForViewport() {
+        const panelEl = this.panelRef()?.nativeElement;
+        const anchorEl = this.anchorRef()?.nativeElement;
+        if (!panelEl || !anchorEl || typeof window === 'undefined')
+            return;
+        const anchorRect = anchorEl.getBoundingClientRect();
+        const panelRect = panelEl.getBoundingClientRect();
+        const gap = 4;
+        this._panelLeft.set(Math.max(8, Math.min(anchorRect.left, window.innerWidth - panelRect.width - 8)));
+        if (anchorRect.bottom + panelRect.height + gap > window.innerHeight) {
+            this._panelTop.set(Math.max(8, anchorRect.top - panelRect.height - gap));
+        }
+    }
+    openPanel() {
+        if (this.appendTo() === 'body') {
+            this.position();
+            setTimeout(() => this.adjustForViewport(), 0);
+        }
+        this._open.set(true);
+    }
+    constructor() {
+        repositionOnScroll(() => this.open() && this.appendTo() === 'body', () => { this.position(); this.adjustForViewport(); });
+    }
     onDocumentClick(e) {
         if (this.open() && !this._el.nativeElement.contains(e.target)) {
             this._open.set(false);
@@ -11359,6 +12222,8 @@ class AutoCompleteComponent {
     ...(ngDevMode ? [{ debugName: "styleClass" }] : /* istanbul ignore next */ []));
     style = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "style" }] : /* istanbul ignore next */ []));
+    appendTo = input('self', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appendTo" }] : /* istanbul ignore next */ []));
     virtualScroll = input(false, { ...(ngDevMode ? { debugName: "virtualScroll" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     virtualScrollItemSize = input(38, { ...(ngDevMode ? { debugName: "virtualScrollItemSize" } : /* istanbul ignore next */ {}), transform: numberAttribute });
     scrollHeight = input('14rem', /* @ts-ignore */
@@ -11411,19 +12276,34 @@ class AutoCompleteComponent {
     ...(ngDevMode ? [{ debugName: "loaderRef" }] : /* istanbul ignore next */ []));
     fTemplates = contentChildren(FTemplateDirective, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "fTemplates" }] : /* istanbul ignore next */ []));
-    itemTpl = computed(() => this.itemRef() ?? this.fTemplates().find(t => t.fTemplate() === 'item')?.templateRef ?? null, /* @ts-ignore */
+    itemTpl = computed(() => this.itemRef() ??
+        this.fTemplates().find((t) => t.fTemplate() === 'item')?.templateRef ??
+        null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "itemTpl" }] : /* istanbul ignore next */ []));
-    groupTpl = computed(() => this.groupRef() ?? this.fTemplates().find(t => t.fTemplate() === 'group')?.templateRef ?? null, /* @ts-ignore */
+    groupTpl = computed(() => this.groupRef() ??
+        this.fTemplates().find((t) => t.fTemplate() === 'group')?.templateRef ??
+        null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "groupTpl" }] : /* istanbul ignore next */ []));
-    headerTpl = computed(() => this.headerRef() ?? this.fTemplates().find(t => t.fTemplate() === 'header')?.templateRef ?? null, /* @ts-ignore */
+    headerTpl = computed(() => this.headerRef() ??
+        this.fTemplates().find((t) => t.fTemplate() === 'header')?.templateRef ??
+        null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "headerTpl" }] : /* istanbul ignore next */ []));
-    footerTpl = computed(() => this.footerRef() ?? this.fTemplates().find(t => t.fTemplate() === 'footer')?.templateRef ?? null, /* @ts-ignore */
+    footerTpl = computed(() => this.footerRef() ??
+        this.fTemplates().find((t) => t.fTemplate() === 'footer')?.templateRef ??
+        null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "footerTpl" }] : /* istanbul ignore next */ []));
-    emptyTpl = computed(() => this.emptyRef() ?? this.fTemplates().find(t => t.fTemplate() === 'empty')?.templateRef ?? null, /* @ts-ignore */
+    emptyTpl = computed(() => this.emptyRef() ??
+        this.fTemplates().find((t) => t.fTemplate() === 'empty')?.templateRef ??
+        null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "emptyTpl" }] : /* istanbul ignore next */ []));
-    selectedItemTpl = computed(() => this.selectedItemRef() ?? this.fTemplates().find(t => t.fTemplate() === 'selectedItem')?.templateRef ?? null, /* @ts-ignore */
+    selectedItemTpl = computed(() => this.selectedItemRef() ??
+        this.fTemplates().find((t) => t.fTemplate() === 'selectedItem')
+            ?.templateRef ??
+        null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selectedItemTpl" }] : /* istanbul ignore next */ []));
-    loaderTpl = computed(() => this.loaderRef() ?? this.fTemplates().find(t => t.fTemplate() === 'loader')?.templateRef ?? null, /* @ts-ignore */
+    loaderTpl = computed(() => this.loaderRef() ??
+        this.fTemplates().find((t) => t.fTemplate() === 'loader')?.templateRef ??
+        null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "loaderTpl" }] : /* istanbul ignore next */ []));
     filteredSuggestions = computed(() => this.suggestions(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "filteredSuggestions" }] : /* istanbul ignore next */ []));
@@ -11432,18 +12312,26 @@ class AutoCompleteComponent {
         if (!this.group())
             return list;
         const groups = list;
-        return groups.flatMap(g => (g[this.optionGroupChildren()] ?? []));
+        return groups.flatMap((g) => g[this.optionGroupChildren()] ?? []);
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "flatSuggestions" }] : /* istanbul ignore next */ []));
     rows = computed(() => {
         if (!this.group()) {
-            return this.filteredSuggestions().map((item, i) => ({ type: 'item', item, flatIndex: i }));
+            return this.filteredSuggestions().map((item, i) => ({
+                type: 'item',
+                item,
+                flatIndex: i,
+            }));
         }
         const groups = this.filteredSuggestions();
         const rows = [];
         let flatIndex = 0;
         for (const g of groups) {
-            rows.push({ type: 'group', groupItem: g, groupLabel: String(g[this.optionGroupLabel()] ?? '') });
+            rows.push({
+                type: 'group',
+                groupItem: g,
+                groupLabel: String(g[this.optionGroupLabel()] ?? ''),
+            });
             const children = g[this.optionGroupChildren()] ?? [];
             for (const item of children) {
                 rows.push({ type: 'item', item, flatIndex: flatIndex++ });
@@ -11467,7 +12355,7 @@ class AutoCompleteComponent {
     onDropdownButtonClick(e) {
         this.onDropdownClick.emit(e);
         this.completeMethod.emit({ originalEvent: e, query: this.query });
-        this._open.set(true);
+        this.openPanel();
         this._activeIndex.set(-1);
     }
     wrapperClass = computed(() => {
@@ -11493,15 +12381,18 @@ class AutoCompleteComponent {
         }
         this._debounce = setTimeout(() => {
             this.completeMethod.emit({ originalEvent: new Event('input'), query: q });
-            this._open.set(true);
+            this.openPanel();
             this._activeIndex.set(-1);
         }, this.delay());
     }
     _handleFocus() {
         this.focusEvent.emit();
         if (this.completeOnFocus() && this.query.length >= this.minLength()) {
-            this.completeMethod.emit({ originalEvent: new Event('focus'), query: this.query });
-            this._open.set(true);
+            this.completeMethod.emit({
+                originalEvent: new Event('focus'),
+                query: this.query,
+            });
+            this.openPanel();
         }
     }
     _handleBlur() {
@@ -11518,11 +12409,11 @@ class AutoCompleteComponent {
         const len = this.flatSuggestions().length;
         if (e.key === 'ArrowDown') {
             e.preventDefault();
-            this._activeIndex.update(i => Math.min(i + 1, len - 1));
+            this._activeIndex.update((i) => Math.min(i + 1, len - 1));
         }
         else if (e.key === 'ArrowUp') {
             e.preventDefault();
-            this._activeIndex.update(i => Math.max(i - 1, -1));
+            this._activeIndex.update((i) => Math.max(i - 1, -1));
         }
         else if (e.key === 'Enter') {
             e.preventDefault();
@@ -11533,7 +12424,10 @@ class AutoCompleteComponent {
         else if (e.key === 'Escape') {
             this._open.set(false);
         }
-        else if (e.key === 'Backspace' && this.multiple() && this.query === '' && this.selectedItems().length) {
+        else if (e.key === 'Backspace' &&
+            this.multiple() &&
+            this.query === '' &&
+            this.selectedItems().length) {
             this.removeChip(this.selectedItems().length - 1, e);
         }
     }
@@ -11542,13 +12436,17 @@ class AutoCompleteComponent {
             return;
         const el = e.target;
         if (el.scrollHeight - el.scrollTop - el.clientHeight < 40) {
-            this.onLazyLoad.emit({ originalEvent: e, first: 0, last: this.flatSuggestions().length });
+            this.onLazyLoad.emit({
+                originalEvent: e,
+                first: 0,
+                last: this.flatSuggestions().length,
+            });
         }
     }
     selectItem(e, item) {
         e.preventDefault();
         if (this.multiple()) {
-            this._selectedItems.update(arr => [...arr, item]);
+            this._selectedItems.update((arr) => [...arr, item]);
             this.query = '';
             const val = this.selectedItems();
             this._onChange(val);
@@ -11567,7 +12465,7 @@ class AutoCompleteComponent {
     }
     removeChip(idx, e) {
         const removed = this.selectedItems()[idx];
-        this._selectedItems.update(arr => arr.filter((_, i) => i !== idx));
+        this._selectedItems.update((arr) => arr.filter((_, i) => i !== idx));
         this.onUnselect.emit({ originalEvent: e, value: removed });
         this._onChange(this.selectedItems());
     }
@@ -11593,12 +12491,27 @@ class AutoCompleteComponent {
             this.query = val ? this.getLabel(val) : '';
         }
     }
-    registerOnChange(fn) { this._onChange = fn; }
-    registerOnTouched(fn) { this._onTouched = fn; }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
     setDisabledState() { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AutoCompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", 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 }, 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 }], ngImport: i0, template: `
-    <div class="relative w-full" [class.opacity-60]="disabled()" [class.pointer-events-none]="disabled()">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", 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: [
+            {
+                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: `
+    <div
+      #anchor
+      class="relative w-full"
+      [class.opacity-60]="disabled()"
+      [class.pointer-events-none]="disabled()"
+    >
       @if (multiple()) {
         <div class="relative">
           <div
@@ -11608,13 +12521,23 @@ class AutoCompleteComponent {
             (click)="inputEl.focus()"
           >
             @for (chip of selectedItems(); track $index) {
-              <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-primary/10 text-primary text-xs font-medium">
+              <span
+                class="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-primary/10 text-primary text-xs font-medium"
+              >
                 @if (selectedItemTpl()) {
-                  <ng-container [ngTemplateOutlet]="selectedItemTpl()" [ngTemplateOutletContext]="{ $implicit: chip }" />
+                  <ng-container
+                    [ngTemplateOutlet]="selectedItemTpl()"
+                    [ngTemplateOutletContext]="{ $implicit: chip }"
+                  />
                 } @else {
                   {{ getLabel(chip) }}
                 }
-                <button type="button" aria-label="Remove" class="inline-flex items-center justify-center hover:text-primary-emphasis cursor-pointer" (click)="removeChip($index, $event)">
+                <button
+                  type="button"
+                  aria-label="Remove"
+                  class="inline-flex items-center justify-center hover:text-primary-emphasis cursor-pointer"
+                  (click)="removeChip($index, $event)"
+                >
                   <ui-icon name="times" class="text-[10px]"></ui-icon>
                 </button>
               </span>
@@ -11634,14 +12557,24 @@ class AutoCompleteComponent {
               aria-haspopup="listbox"
               [attr.aria-expanded]="open()"
               [attr.aria-controls]="listboxId"
-              [attr.aria-activedescendant]="activeIndex() >= 0 ? listboxId + '-' + activeIndex() : null"
+              [attr.aria-activedescendant]="
+                activeIndex() >= 0 ? listboxId + '-' + activeIndex() : null
+              "
             />
           </div>
           <span class="absolute right-2 top-0 h-full flex items-center gap-1">
             @if (loading()) {
-              <ui-icon [name]="loadingIcon()" [spin]="true" class="text-xs text-(--f-form-field-placeholder-color)"></ui-icon>
+              <ui-icon
+                [name]="loadingIcon()"
+                [spin]="true"
+                class="text-xs text-(--f-form-field-placeholder-color)"
+              ></ui-icon>
             } @else if (showClear() && selectedItems().length && !disabled()) {
-              <ui-icon name="x" class="text-xs text-(--f-form-field-placeholder-color) hover:text-(--f-text-color) cursor-pointer" (click)="clear($event)"></ui-icon>
+              <ui-icon
+                name="x"
+                class="text-xs text-(--f-form-field-placeholder-color) hover:text-(--f-text-color) cursor-pointer"
+                (click)="clear($event)"
+              ></ui-icon>
             }
           </span>
         </div>
@@ -11662,17 +12595,33 @@ class AutoCompleteComponent {
             aria-haspopup="listbox"
             [attr.aria-expanded]="open()"
             [attr.aria-controls]="listboxId"
-            [attr.aria-activedescendant]="activeIndex() >= 0 ? listboxId + '-' + activeIndex() : null"
+            [attr.aria-activedescendant]="
+              activeIndex() >= 0 ? listboxId + '-' + activeIndex() : null
+            "
           />
-          <span class="absolute right-0 top-0 h-full flex items-center gap-1 pr-3">
+          <span
+            class="absolute right-0 top-0 h-full flex items-center gap-1 pr-3"
+          >
             @if (loading()) {
-              <ui-icon [name]="loadingIcon()" [spin]="true" class="text-xs text-(--f-form-field-placeholder-color)"></ui-icon>
+              <ui-icon
+                [name]="loadingIcon()"
+                [spin]="true"
+                class="text-xs text-(--f-form-field-placeholder-color)"
+              ></ui-icon>
             } @else {
               @if (showClear() && query && !disabled()) {
-                <ui-icon name="x" class="text-xs text-(--f-form-field-placeholder-color) hover:text-(--f-text-color) cursor-pointer" (click)="clear($event)"></ui-icon>
+                <ui-icon
+                  name="x"
+                  class="text-xs text-(--f-form-field-placeholder-color) hover:text-(--f-text-color) cursor-pointer"
+                  (click)="clear($event)"
+                ></ui-icon>
               }
               @if (dropdown()) {
-                <button type="button" class="inline-flex items-center text-(--f-text-muted-color) hover:text-(--f-text-hover-color)" (click)="onDropdownButtonClick($event)">
+                <button
+                  type="button"
+                  class="inline-flex items-center text-(--f-text-muted-color) hover:text-(--f-text-hover-color)"
+                  (click)="onDropdownButtonClick($event)"
+                >
                   <ui-icon name="chevron-down" class="text-xs"></ui-icon>
                 </button>
               }
@@ -11682,7 +12631,7 @@ class AutoCompleteComponent {
       }
 
       @if (open()) {
-        <div class="absolute z-50 w-full mt-1 bg-(--f-overlay-popover-background) border border-(--f-content-border-color) rounded-lg shadow-lg overflow-hidden">
+        <div #panel [class]="panelClass()" [style]="panelStyle()">
           @if (headerTpl()) {
             <div class="p-2 border-b border-(--f-content-border-color)">
               <ng-container [ngTemplateOutlet]="headerTpl()" />
@@ -11694,11 +12643,17 @@ class AutoCompleteComponent {
               @if (loaderTpl()) {
                 <ng-container [ngTemplateOutlet]="loaderTpl()" />
               } @else {
-                <ui-icon [name]="loadingIcon()" [spin]="true" class="text-lg text-(--f-text-muted-color)"></ui-icon>
+                <ui-icon
+                  [name]="loadingIcon()"
+                  [spin]="true"
+                  class="text-lg text-(--f-text-muted-color)"
+                ></ui-icon>
               }
             </div>
           } @else if (flatSuggestions().length === 0) {
-            <div class="px-3 py-6 flex flex-col items-center gap-2 text-(--f-text-muted-color)">
+            <div
+              class="px-3 py-6 flex flex-col items-center gap-2 text-(--f-text-muted-color)"
+            >
               @if (emptyTpl()) {
                 <ng-container [ngTemplateOutlet]="emptyTpl()" />
               } @else {
@@ -11707,18 +12662,29 @@ class AutoCompleteComponent {
               }
             </div>
           } @else if (virtualScroll() && !group()) {
-            <f-scroller [items]="flatSuggestions()" [itemSize]="virtualScrollItemSize()" [scrollHeight]="scrollHeight()">
+            <f-scroller
+              [items]="flatSuggestions()"
+              [itemSize]="virtualScrollItemSize()"
+              [scrollHeight]="scrollHeight()"
+            >
               <ng-template let-item let-i="index">
                 <div
                   [id]="listboxId + '-' + i"
                   role="option"
                   [attr.aria-selected]="i === activeIndex()"
                   class="px-3 py-2 text-sm cursor-pointer flex items-center gap-2 transition-colors"
-                  [class]="i === activeIndex() ? 'bg-(--f-highlight-background) text-(--f-highlight-color)' : 'text-(--f-text-color) hover:bg-(--f-content-hover-background)'"
+                  [class]="
+                    i === activeIndex()
+                      ? 'bg-(--f-highlight-background) text-(--f-highlight-color)'
+                      : 'text-(--f-text-color) hover:bg-(--f-content-hover-background)'
+                  "
                   (mousedown)="selectItem($event, item)"
                 >
                   @if (itemTpl()) {
-                    <ng-container [ngTemplateOutlet]="itemTpl()" [ngTemplateOutletContext]="{ $implicit: item, index: i }" />
+                    <ng-container
+                      [ngTemplateOutlet]="itemTpl()"
+                      [ngTemplateOutletContext]="{ $implicit: item, index: i }"
+                    />
                   } @else {
                     <span class="flex-1 truncate">{{ getLabel(item) }}</span>
                   }
@@ -11726,12 +12692,24 @@ class AutoCompleteComponent {
               </ng-template>
             </f-scroller>
           } @else {
-            <ul [id]="listboxId" class="overflow-auto py-1" [style.max-height]="scrollHeight()" role="listbox" [attr.aria-multiselectable]="multiple()" (scroll)="onListScroll($event)">
+            <ul
+              [id]="listboxId"
+              class="overflow-auto py-1"
+              [style.max-height]="scrollHeight()"
+              role="listbox"
+              [attr.aria-multiselectable]="multiple()"
+              (scroll)="onListScroll($event)"
+            >
               @for (row of rows(); track $index) {
                 @if (row.type === 'group') {
-                  <li class="px-3 py-1.5 text-xs font-semibold text-(--f-text-muted-color) uppercase tracking-wide">
+                  <li
+                    class="px-3 py-1.5 text-xs font-semibold text-(--f-text-muted-color) uppercase tracking-wide"
+                  >
                     @if (groupTpl()) {
-                      <ng-container [ngTemplateOutlet]="groupTpl()" [ngTemplateOutletContext]="{ $implicit: row.groupItem }" />
+                      <ng-container
+                        [ngTemplateOutlet]="groupTpl()"
+                        [ngTemplateOutletContext]="{ $implicit: row.groupItem }"
+                      />
                     } @else {
                       {{ row.groupLabel }}
                     }
@@ -11742,13 +12720,25 @@ class AutoCompleteComponent {
                     role="option"
                     [attr.aria-selected]="row.flatIndex === activeIndex()"
                     class="px-3 py-2 text-sm cursor-pointer flex items-center gap-2 transition-colors"
-                    [class]="row.flatIndex === activeIndex() ? 'bg-(--f-highlight-background) text-(--f-highlight-color)' : 'text-(--f-text-color) hover:bg-(--f-content-hover-background)'"
+                    [class]="
+                      row.flatIndex === activeIndex()
+                        ? 'bg-(--f-highlight-background) text-(--f-highlight-color)'
+                        : 'text-(--f-text-color) hover:bg-(--f-content-hover-background)'
+                    "
                     (mousedown)="selectItem($event, row.item)"
                   >
                     @if (itemTpl()) {
-                      <ng-container [ngTemplateOutlet]="itemTpl()" [ngTemplateOutletContext]="{ $implicit: row.item, index: row.flatIndex }" />
+                      <ng-container
+                        [ngTemplateOutlet]="itemTpl()"
+                        [ngTemplateOutletContext]="{
+                          $implicit: row.item,
+                          index: row.flatIndex,
+                        }"
+                      />
                     } @else {
-                      <span class="flex-1 truncate">{{ getLabel(row.item) }}</span>
+                      <span class="flex-1 truncate">{{
+                        getLabel(row.item)
+                      }}</span>
                     }
                   </li>
                 }
@@ -11771,14 +12761,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
             args: [{
                     selector: 'f-autocomplete',
                     imports: [UiIconComponent, FormsModule, NgTemplateOutlet, ScrollerComponent],
-                    providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => AutoCompleteComponent), multi: true }],
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => AutoCompleteComponent),
+                            multi: true,
+                        },
+                    ],
                     host: {
                         '[class]': 'hostClass()',
                         '[style]': 'style()',
                         '(document:click)': 'onDocumentClick($event)',
                     },
                     template: `
-    <div class="relative w-full" [class.opacity-60]="disabled()" [class.pointer-events-none]="disabled()">
+    <div
+      #anchor
+      class="relative w-full"
+      [class.opacity-60]="disabled()"
+      [class.pointer-events-none]="disabled()"
+    >
       @if (multiple()) {
         <div class="relative">
           <div
@@ -11788,13 +12789,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
             (click)="inputEl.focus()"
           >
             @for (chip of selectedItems(); track $index) {
-              <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-primary/10 text-primary text-xs font-medium">
+              <span
+                class="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-primary/10 text-primary text-xs font-medium"
+              >
                 @if (selectedItemTpl()) {
-                  <ng-container [ngTemplateOutlet]="selectedItemTpl()" [ngTemplateOutletContext]="{ $implicit: chip }" />
+                  <ng-container
+                    [ngTemplateOutlet]="selectedItemTpl()"
+                    [ngTemplateOutletContext]="{ $implicit: chip }"
+                  />
                 } @else {
                   {{ getLabel(chip) }}
                 }
-                <button type="button" aria-label="Remove" class="inline-flex items-center justify-center hover:text-primary-emphasis cursor-pointer" (click)="removeChip($index, $event)">
+                <button
+                  type="button"
+                  aria-label="Remove"
+                  class="inline-flex items-center justify-center hover:text-primary-emphasis cursor-pointer"
+                  (click)="removeChip($index, $event)"
+                >
                   <ui-icon name="times" class="text-[10px]"></ui-icon>
                 </button>
               </span>
@@ -11814,14 +12825,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
               aria-haspopup="listbox"
               [attr.aria-expanded]="open()"
               [attr.aria-controls]="listboxId"
-              [attr.aria-activedescendant]="activeIndex() >= 0 ? listboxId + '-' + activeIndex() : null"
+              [attr.aria-activedescendant]="
+                activeIndex() >= 0 ? listboxId + '-' + activeIndex() : null
+              "
             />
           </div>
           <span class="absolute right-2 top-0 h-full flex items-center gap-1">
             @if (loading()) {
-              <ui-icon [name]="loadingIcon()" [spin]="true" class="text-xs text-(--f-form-field-placeholder-color)"></ui-icon>
+              <ui-icon
+                [name]="loadingIcon()"
+                [spin]="true"
+                class="text-xs text-(--f-form-field-placeholder-color)"
+              ></ui-icon>
             } @else if (showClear() && selectedItems().length && !disabled()) {
-              <ui-icon name="x" class="text-xs text-(--f-form-field-placeholder-color) hover:text-(--f-text-color) cursor-pointer" (click)="clear($event)"></ui-icon>
+              <ui-icon
+                name="x"
+                class="text-xs text-(--f-form-field-placeholder-color) hover:text-(--f-text-color) cursor-pointer"
+                (click)="clear($event)"
+              ></ui-icon>
             }
           </span>
         </div>
@@ -11842,17 +12863,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
             aria-haspopup="listbox"
             [attr.aria-expanded]="open()"
             [attr.aria-controls]="listboxId"
-            [attr.aria-activedescendant]="activeIndex() >= 0 ? listboxId + '-' + activeIndex() : null"
+            [attr.aria-activedescendant]="
+              activeIndex() >= 0 ? listboxId + '-' + activeIndex() : null
+            "
           />
-          <span class="absolute right-0 top-0 h-full flex items-center gap-1 pr-3">
+          <span
+            class="absolute right-0 top-0 h-full flex items-center gap-1 pr-3"
+          >
             @if (loading()) {
-              <ui-icon [name]="loadingIcon()" [spin]="true" class="text-xs text-(--f-form-field-placeholder-color)"></ui-icon>
+              <ui-icon
+                [name]="loadingIcon()"
+                [spin]="true"
+                class="text-xs text-(--f-form-field-placeholder-color)"
+              ></ui-icon>
             } @else {
               @if (showClear() && query && !disabled()) {
-                <ui-icon name="x" class="text-xs text-(--f-form-field-placeholder-color) hover:text-(--f-text-color) cursor-pointer" (click)="clear($event)"></ui-icon>
+                <ui-icon
+                  name="x"
+                  class="text-xs text-(--f-form-field-placeholder-color) hover:text-(--f-text-color) cursor-pointer"
+                  (click)="clear($event)"
+                ></ui-icon>
               }
               @if (dropdown()) {
-                <button type="button" class="inline-flex items-center text-(--f-text-muted-color) hover:text-(--f-text-hover-color)" (click)="onDropdownButtonClick($event)">
+                <button
+                  type="button"
+                  class="inline-flex items-center text-(--f-text-muted-color) hover:text-(--f-text-hover-color)"
+                  (click)="onDropdownButtonClick($event)"
+                >
                   <ui-icon name="chevron-down" class="text-xs"></ui-icon>
                 </button>
               }
@@ -11862,7 +12899,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
       }
 
       @if (open()) {
-        <div class="absolute z-50 w-full mt-1 bg-(--f-overlay-popover-background) border border-(--f-content-border-color) rounded-lg shadow-lg overflow-hidden">
+        <div #panel [class]="panelClass()" [style]="panelStyle()">
           @if (headerTpl()) {
             <div class="p-2 border-b border-(--f-content-border-color)">
               <ng-container [ngTemplateOutlet]="headerTpl()" />
@@ -11874,11 +12911,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
               @if (loaderTpl()) {
                 <ng-container [ngTemplateOutlet]="loaderTpl()" />
               } @else {
-                <ui-icon [name]="loadingIcon()" [spin]="true" class="text-lg text-(--f-text-muted-color)"></ui-icon>
+                <ui-icon
+                  [name]="loadingIcon()"
+                  [spin]="true"
+                  class="text-lg text-(--f-text-muted-color)"
+                ></ui-icon>
               }
             </div>
           } @else if (flatSuggestions().length === 0) {
-            <div class="px-3 py-6 flex flex-col items-center gap-2 text-(--f-text-muted-color)">
+            <div
+              class="px-3 py-6 flex flex-col items-center gap-2 text-(--f-text-muted-color)"
+            >
               @if (emptyTpl()) {
                 <ng-container [ngTemplateOutlet]="emptyTpl()" />
               } @else {
@@ -11887,18 +12930,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
               }
             </div>
           } @else if (virtualScroll() && !group()) {
-            <f-scroller [items]="flatSuggestions()" [itemSize]="virtualScrollItemSize()" [scrollHeight]="scrollHeight()">
+            <f-scroller
+              [items]="flatSuggestions()"
+              [itemSize]="virtualScrollItemSize()"
+              [scrollHeight]="scrollHeight()"
+            >
               <ng-template let-item let-i="index">
                 <div
                   [id]="listboxId + '-' + i"
                   role="option"
                   [attr.aria-selected]="i === activeIndex()"
                   class="px-3 py-2 text-sm cursor-pointer flex items-center gap-2 transition-colors"
-                  [class]="i === activeIndex() ? 'bg-(--f-highlight-background) text-(--f-highlight-color)' : 'text-(--f-text-color) hover:bg-(--f-content-hover-background)'"
+                  [class]="
+                    i === activeIndex()
+                      ? 'bg-(--f-highlight-background) text-(--f-highlight-color)'
+                      : 'text-(--f-text-color) hover:bg-(--f-content-hover-background)'
+                  "
                   (mousedown)="selectItem($event, item)"
                 >
                   @if (itemTpl()) {
-                    <ng-container [ngTemplateOutlet]="itemTpl()" [ngTemplateOutletContext]="{ $implicit: item, index: i }" />
+                    <ng-container
+                      [ngTemplateOutlet]="itemTpl()"
+                      [ngTemplateOutletContext]="{ $implicit: item, index: i }"
+                    />
                   } @else {
                     <span class="flex-1 truncate">{{ getLabel(item) }}</span>
                   }
@@ -11906,12 +12960,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
               </ng-template>
             </f-scroller>
           } @else {
-            <ul [id]="listboxId" class="overflow-auto py-1" [style.max-height]="scrollHeight()" role="listbox" [attr.aria-multiselectable]="multiple()" (scroll)="onListScroll($event)">
+            <ul
+              [id]="listboxId"
+              class="overflow-auto py-1"
+              [style.max-height]="scrollHeight()"
+              role="listbox"
+              [attr.aria-multiselectable]="multiple()"
+              (scroll)="onListScroll($event)"
+            >
               @for (row of rows(); track $index) {
                 @if (row.type === 'group') {
-                  <li class="px-3 py-1.5 text-xs font-semibold text-(--f-text-muted-color) uppercase tracking-wide">
+                  <li
+                    class="px-3 py-1.5 text-xs font-semibold text-(--f-text-muted-color) uppercase tracking-wide"
+                  >
                     @if (groupTpl()) {
-                      <ng-container [ngTemplateOutlet]="groupTpl()" [ngTemplateOutletContext]="{ $implicit: row.groupItem }" />
+                      <ng-container
+                        [ngTemplateOutlet]="groupTpl()"
+                        [ngTemplateOutletContext]="{ $implicit: row.groupItem }"
+                      />
                     } @else {
                       {{ row.groupLabel }}
                     }
@@ -11922,13 +12988,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                     role="option"
                     [attr.aria-selected]="row.flatIndex === activeIndex()"
                     class="px-3 py-2 text-sm cursor-pointer flex items-center gap-2 transition-colors"
-                    [class]="row.flatIndex === activeIndex() ? 'bg-(--f-highlight-background) text-(--f-highlight-color)' : 'text-(--f-text-color) hover:bg-(--f-content-hover-background)'"
+                    [class]="
+                      row.flatIndex === activeIndex()
+                        ? 'bg-(--f-highlight-background) text-(--f-highlight-color)'
+                        : 'text-(--f-text-color) hover:bg-(--f-content-hover-background)'
+                    "
                     (mousedown)="selectItem($event, row.item)"
                   >
                     @if (itemTpl()) {
-                      <ng-container [ngTemplateOutlet]="itemTpl()" [ngTemplateOutletContext]="{ $implicit: row.item, index: row.flatIndex }" />
+                      <ng-container
+                        [ngTemplateOutlet]="itemTpl()"
+                        [ngTemplateOutletContext]="{
+                          $implicit: row.item,
+                          index: row.flatIndex,
+                        }"
+                      />
                     } @else {
-                      <span class="flex-1 truncate">{{ getLabel(row.item) }}</span>
+                      <span class="flex-1 truncate">{{
+                        getLabel(row.item)
+                      }}</span>
                     }
                   </li>
                 }
@@ -11946,7 +13024,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
     </div>
   `,
                 }]
-        }], propDecorators: { 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 }] }], 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 }] }], 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 }] }] } });
 
 function hexToRgb(hex) {
     const clean = hex.replace('#', '');
@@ -12896,6 +13974,9 @@ class SplitButtonComponent {
     ...(ngDevMode ? [{ debugName: "_menuLeft" }] : /* istanbul ignore next */ []));
     menuTop = this._menuTop.asReadonly();
     menuLeft = this._menuLeft.asReadonly();
+    constructor() {
+        repositionOnScroll(() => this.open() && this.appendTo() === 'body', () => { this.positionMenu(); this.adjustMenuForViewport(); });
+    }
     groupClass = computed(() => {
         const shape = this.rounded() ? 'rounded-full' : 'rounded-lg';
         const raisedCls = this.raised() ? 'shadow-md' : '';
@@ -13201,7 +14282,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", 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$3 = 0;
 function assignKey$3(node) {
@@ -13267,8 +14348,9 @@ class TreeTableTogglerComponent {
         [attr.aria-expanded]="rowNode().expanded"
       >
         <ui-icon
-          [name]="rowNode().expanded ? 'chevron-down' : 'chevron-right'"
-          class="text-xs"
+          name="chevron-right"
+          class="text-xs transition-transform duration-150"
+          [class.rotate-90]="rowNode().expanded"
         ></ui-icon>
       </button>
     } @else {
@@ -13290,8 +14372,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
         [attr.aria-expanded]="rowNode().expanded"
       >
         <ui-icon
-          [name]="rowNode().expanded ? 'chevron-down' : 'chevron-right'"
-          class="text-xs"
+          name="chevron-right"
+          class="text-xs transition-transform duration-150"
+          [class.rotate-90]="rowNode().expanded"
         ></ui-icon>
       </button>
     } @else {
@@ -14187,6 +15270,9 @@ function assignKey$2(node) {
 }
 class TreeSelectComponent {
     _el = inject(ElementRef);
+    constructor() {
+        repositionOnScroll(() => this.open() && this.appendTo() === 'body', () => { this.position(); this.adjustForViewport(); });
+    }
     options = input([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
     placeholder = input('Select', /* @ts-ignore */
@@ -14215,8 +15301,53 @@ class TreeSelectComponent {
     ...(ngDevMode ? [{ debugName: "styleClass" }] : /* istanbul ignore next */ []));
     style = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "style" }] : /* istanbul ignore next */ []));
+    appendTo = input('self', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appendTo" }] : /* istanbul ignore next */ []));
     hostClass = computed(() => `block w-full ${this.styleClass()}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
+    triggerRef = viewChild('trigger', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerRef" }] : /* istanbul ignore next */ []));
+    panelRef = viewChild('panel', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelRef" }] : /* istanbul ignore next */ []));
+    _panelTop = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_panelTop" }] : /* istanbul ignore next */ []));
+    _panelLeft = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_panelLeft" }] : /* istanbul ignore next */ []));
+    _panelWidth = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_panelWidth" }] : /* istanbul ignore next */ []));
+    panelClass = computed(() => {
+        const position = this.appendTo() === 'body' ? 'fixed' : 'absolute w-full mt-1';
+        return `${position} z-50 bg-(--f-overlay-popover-background) border border-(--f-content-border-color) rounded-lg shadow-lg overflow-hidden`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
+    panelStyle = computed(() => {
+        if (this.appendTo() !== 'body')
+            return {};
+        return { top: `${this._panelTop()}px`, left: `${this._panelLeft()}px`, width: `${this._panelWidth()}px` };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelStyle" }] : /* istanbul ignore next */ []));
+    position() {
+        const anchorEl = this.triggerRef()?.nativeElement;
+        if (!anchorEl || typeof window === 'undefined')
+            return;
+        const rect = anchorEl.getBoundingClientRect();
+        this._panelTop.set(rect.bottom + 4);
+        this._panelLeft.set(Math.max(8, rect.left));
+        this._panelWidth.set(rect.width);
+    }
+    adjustForViewport() {
+        const panelEl = this.panelRef()?.nativeElement;
+        const anchorEl = this.triggerRef()?.nativeElement;
+        if (!panelEl || !anchorEl || typeof window === 'undefined')
+            return;
+        const anchorRect = anchorEl.getBoundingClientRect();
+        const panelRect = panelEl.getBoundingClientRect();
+        const gap = 4;
+        this._panelLeft.set(Math.max(8, Math.min(anchorRect.left, window.innerWidth - panelRect.width - 8)));
+        if (anchorRect.bottom + panelRect.height + gap > window.innerHeight) {
+            this._panelTop.set(Math.max(8, anchorRect.top - panelRect.height - gap));
+        }
+    }
     _open = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_open" }] : /* istanbul ignore next */ []));
     open = this._open.asReadonly();
@@ -14323,8 +15454,14 @@ class TreeSelectComponent {
         if (this.disabled())
             return;
         this._open.update(v => !v);
-        if (!this.open())
+        if (!this.open()) {
             this._onTouched();
+            return;
+        }
+        if (this.appendTo() === 'body') {
+            this.position();
+            setTimeout(() => this.adjustForViewport(), 0);
+        }
     }
     onTriggerKeyDown(e) {
         if (this.disabled())
@@ -14475,9 +15612,10 @@ class TreeSelectComponent {
     registerOnTouched(fn) { this._onTouched = fn; }
     setDisabledState() { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TreeSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TreeSelectComponent, isStandalone: true, selector: "f-treeselect", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, filterBy: { classPropertyName: "filterBy", publicName: "filterBy", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, propagateSelectionDown: { classPropertyName: "propagateSelectionDown", publicName: "propagateSelectionDown", isSignal: true, isRequired: false, transformFunction: null }, propagateSelectionUp: { classPropertyName: "propagateSelectionUp", publicName: "propagateSelectionUp", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollItemSize: { classPropertyName: "virtualScrollItemSize", publicName: "virtualScrollItemSize", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "hostClass()", "style": "style()" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TreeSelectComponent), multi: true }], queries: [{ propertyName: "valueRef", first: true, predicate: ["value"], descendants: true, isSignal: true }, { propertyName: "headerRef", first: true, predicate: ["header"], descendants: true, isSignal: true }, { propertyName: "footerRef", first: true, predicate: ["footer"], descendants: true, isSignal: true }, { propertyName: "emptyRef", first: true, predicate: ["empty"], descendants: true, isSignal: true }, { propertyName: "fTemplates", predicate: FTemplateDirective, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TreeSelectComponent, isStandalone: true, selector: "f-treeselect", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, filterBy: { classPropertyName: "filterBy", publicName: "filterBy", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, propagateSelectionDown: { classPropertyName: "propagateSelectionDown", publicName: "propagateSelectionDown", isSignal: true, isRequired: false, transformFunction: null }, propagateSelectionUp: { classPropertyName: "propagateSelectionUp", publicName: "propagateSelectionUp", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollItemSize: { classPropertyName: "virtualScrollItemSize", publicName: "virtualScrollItemSize", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "hostClass()", "style": "style()" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TreeSelectComponent), multi: true }], queries: [{ propertyName: "valueRef", first: true, predicate: ["value"], descendants: true, isSignal: true }, { propertyName: "headerRef", first: true, predicate: ["header"], descendants: true, isSignal: true }, { propertyName: "footerRef", first: true, predicate: ["footer"], descendants: true, isSignal: true }, { propertyName: "emptyRef", first: true, predicate: ["empty"], descendants: true, isSignal: true }, { propertyName: "fTemplates", predicate: FTemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="relative w-full">
       <div
+        #trigger
         role="combobox"
         aria-haspopup="tree"
         [attr.aria-expanded]="open()"
@@ -14524,7 +15662,7 @@ class TreeSelectComponent {
       </div>
 
       @if (open()) {
-        <div class="absolute z-50 w-full mt-1 bg-(--f-overlay-popover-background) border border-(--f-content-border-color) rounded-lg shadow-lg overflow-hidden">
+        <div #panel [class]="panelClass()" [style]="panelStyle()">
           @if (headerTpl()) {
             <ng-container [ngTemplateOutlet]="headerTpl()" [ngTemplateOutletContext]="{ $implicit: options() }" />
           }
@@ -14581,7 +15719,7 @@ class TreeSelectComponent {
       >
         @if (!row.leaf) {
           <button type="button" class="inline-flex items-center justify-center w-5 h-5 rounded-md hover:bg-(--f-content-hover-background) shrink-0 cursor-pointer" (click)="toggleExpand($event, row.key)">
-            <ui-icon [name]="isExpanded(row.key) ? 'chevron-down' : 'chevron-right'" class="text-[10px]"></ui-icon>
+            <ui-icon name="chevron-right" class="text-[10px] transition-transform duration-150" [class.rotate-90]="isExpanded(row.key)"></ui-icon>
           </button>
         } @else {
           <span class="inline-block w-5 h-5 shrink-0"></span>
@@ -14616,6 +15754,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                     template: `
     <div class="relative w-full">
       <div
+        #trigger
         role="combobox"
         aria-haspopup="tree"
         [attr.aria-expanded]="open()"
@@ -14662,7 +15801,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
       </div>
 
       @if (open()) {
-        <div class="absolute z-50 w-full mt-1 bg-(--f-overlay-popover-background) border border-(--f-content-border-color) rounded-lg shadow-lg overflow-hidden">
+        <div #panel [class]="panelClass()" [style]="panelStyle()">
           @if (headerTpl()) {
             <ng-container [ngTemplateOutlet]="headerTpl()" [ngTemplateOutletContext]="{ $implicit: options() }" />
           }
@@ -14719,7 +15858,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
       >
         @if (!row.leaf) {
           <button type="button" class="inline-flex items-center justify-center w-5 h-5 rounded-md hover:bg-(--f-content-hover-background) shrink-0 cursor-pointer" (click)="toggleExpand($event, row.key)">
-            <ui-icon [name]="isExpanded(row.key) ? 'chevron-down' : 'chevron-right'" class="text-[10px]"></ui-icon>
+            <ui-icon name="chevron-right" class="text-[10px] transition-transform duration-150" [class.rotate-90]="isExpanded(row.key)"></ui-icon>
           </button>
         } @else {
           <span class="inline-block w-5 h-5 shrink-0"></span>
@@ -14744,7 +15883,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
     </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 }] }], 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 }] }], 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 */
@@ -14840,8 +15979,9 @@ class FieldsetComponent {
       >
         @if (toggleable()) {
           <ui-icon
-            [name]="collapsed() ? 'chevron-right' : 'chevron-down'"
-            class="text-xs"
+            name="chevron-right"
+            class="text-xs transition-transform duration-150"
+            [class.rotate-90]="!collapsed()"
           ></ui-icon>
         }
         @if (legendTemplateResolved()) {
@@ -14886,8 +16026,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
       >
         @if (toggleable()) {
           <ui-icon
-            [name]="collapsed() ? 'chevron-right' : 'chevron-down'"
-            class="text-xs"
+            name="chevron-right"
+            class="text-xs transition-transform duration-150"
+            [class.rotate-90]="!collapsed()"
           ></ui-icon>
         }
         @if (legendTemplateResolved()) {
@@ -15381,6 +16522,9 @@ class MenuComponent {
     ...(ngDevMode ? [{ debugName: "_left" }] : /* istanbul ignore next */ []));
     _openedAt = 0;
     _anchor = null;
+    constructor() {
+        repositionOnScroll(() => this.popup() && this.visible() && this.appendTo() === 'body', () => { this.position(); this.adjustForViewport(); });
+    }
     fTemplates = contentChildren(FTemplateDirective, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "fTemplates" }] : /* istanbul ignore next */ []));
     namedTemplate(name) {
@@ -15738,7 +16882,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
     }
   `,
                 }]
-        }], propDecorators: { containerRef: [{ type: i0.ViewChild, args: ['container', { isSignal: true }] }], model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }], popup: [{ type: i0.Input, args: [{ isSignal: true, alias: "popup", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], onShow: [{ type: i0.Output, args: ["onShow"] }], onHide: [{ type: i0.Output, args: ["onHide"] }], fTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FTemplateDirective), { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { containerRef: [{ type: i0.ViewChild, args: ['container', { isSignal: true }] }], model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }], popup: [{ type: i0.Input, args: [{ isSignal: true, alias: "popup", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], onShow: [{ type: i0.Output, args: ["onShow"] }], onHide: [{ type: i0.Output, args: ["onHide"] }], fTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FTemplateDirective), { isSignal: true }] }] } });
 
 const SUBMENU_ESTIMATED_WIDTH$2 = 192;
 class MenubarComponent {
@@ -19372,6 +20516,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 
 class CascadeSelectComponent {
     _el = inject(ElementRef);
+    constructor() {
+        repositionOnScroll(() => this.open() && this.appendTo() === 'body', () => { this.position(); this.adjustForViewport(); });
+    }
     options = input([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
     optionLabel = input('label', /* @ts-ignore */
@@ -19398,8 +20545,50 @@ class CascadeSelectComponent {
     ...(ngDevMode ? [{ debugName: "styleClass" }] : /* istanbul ignore next */ []));
     style = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "style" }] : /* istanbul ignore next */ []));
+    appendTo = input('self', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appendTo" }] : /* istanbul ignore next */ []));
     hostClass = computed(() => `block w-full ${this.styleClass()}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
+    triggerRef = viewChild('trigger', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerRef" }] : /* istanbul ignore next */ []));
+    panelRef = viewChild('panel', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelRef" }] : /* istanbul ignore next */ []));
+    _panelTop = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_panelTop" }] : /* istanbul ignore next */ []));
+    _panelLeft = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_panelLeft" }] : /* istanbul ignore next */ []));
+    panelClass = computed(() => {
+        const position = this.appendTo() === 'body' ? 'fixed' : 'absolute mt-1';
+        return `${position} z-50 flex bg-(--f-overlay-popover-background) border border-(--f-content-border-color) rounded-lg shadow-lg overflow-hidden`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
+    panelStyle = computed(() => {
+        if (this.appendTo() !== 'body')
+            return {};
+        return { top: `${this._panelTop()}px`, left: `${this._panelLeft()}px` };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelStyle" }] : /* istanbul ignore next */ []));
+    position() {
+        const anchorEl = this.triggerRef()?.nativeElement;
+        if (!anchorEl || typeof window === 'undefined')
+            return;
+        const rect = anchorEl.getBoundingClientRect();
+        this._panelTop.set(rect.bottom + 4);
+        this._panelLeft.set(Math.max(8, rect.left));
+    }
+    adjustForViewport() {
+        const panelEl = this.panelRef()?.nativeElement;
+        const anchorEl = this.triggerRef()?.nativeElement;
+        if (!panelEl || !anchorEl || typeof window === 'undefined')
+            return;
+        const anchorRect = anchorEl.getBoundingClientRect();
+        const panelRect = panelEl.getBoundingClientRect();
+        const gap = 4;
+        this._panelLeft.set(Math.max(8, Math.min(anchorRect.left, window.innerWidth - panelRect.width - 8)));
+        if (anchorRect.bottom + panelRect.height + gap > window.innerHeight) {
+            this._panelTop.set(Math.max(8, anchorRect.top - panelRect.height - gap));
+        }
+    }
     _open = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_open" }] : /* istanbul ignore next */ []));
     open = this._open.asReadonly();
@@ -19499,6 +20688,10 @@ class CascadeSelectComponent {
             this._activePath.set([]);
             this._focusedPath.set([]);
         }
+        if (this.appendTo() === 'body') {
+            this.position();
+            setTimeout(() => this.adjustForViewport(), 0);
+        }
     }
     closePanel() {
         this._open.set(false);
@@ -19645,15 +20838,16 @@ class CascadeSelectComponent {
     }
     setDisabledState() { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CascadeSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", 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 } }, host: { listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "hostClass()", "style": "style()" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", 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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CascadeSelectComponent),
                 multi: true,
             },
-        ], queries: [{ propertyName: "valueRef", first: true, predicate: ["value"], descendants: true, isSignal: true }, { propertyName: "optionRef", first: true, predicate: ["option"], descendants: true, isSignal: true }, { propertyName: "groupRef", first: true, predicate: ["group"], descendants: true, isSignal: true }, { propertyName: "emptyRef", first: true, predicate: ["empty"], descendants: true, isSignal: true }, { propertyName: "fTemplates", predicate: FTemplateDirective, isSignal: true }], ngImport: i0, template: `
+        ], queries: [{ propertyName: "valueRef", first: true, predicate: ["value"], descendants: true, isSignal: true }, { propertyName: "optionRef", first: true, predicate: ["option"], descendants: true, isSignal: true }, { propertyName: "groupRef", first: true, predicate: ["group"], descendants: true, isSignal: true }, { propertyName: "emptyRef", first: true, predicate: ["empty"], descendants: true, isSignal: true }, { propertyName: "fTemplates", predicate: FTemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="relative w-full">
       <button
+        #trigger
         type="button"
         role="combobox"
         aria-haspopup="tree"
@@ -19696,7 +20890,9 @@ class CascadeSelectComponent {
 
       @if (open()) {
         <div
-          class="absolute z-50 mt-1 flex bg-(--f-overlay-popover-background) border border-(--f-content-border-color) rounded-lg shadow-lg overflow-hidden"
+          #panel
+          [class]="panelClass()"
+          [style]="panelStyle()"
           role="tree"
         >
           @if (levels()[0].length) {
@@ -19780,6 +20976,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                     template: `
     <div class="relative w-full">
       <button
+        #trigger
         type="button"
         role="combobox"
         aria-haspopup="tree"
@@ -19822,7 +21019,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 
       @if (open()) {
         <div
-          class="absolute z-50 mt-1 flex bg-(--f-overlay-popover-background) border border-(--f-content-border-color) rounded-lg shadow-lg overflow-hidden"
+          #panel
+          [class]="panelClass()"
+          [style]="panelStyle()"
           role="tree"
         >
           @if (levels()[0].length) {
@@ -19886,7 +21085,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", 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 }] }], 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$1 = {
     pint: /\d/,
@@ -21031,7 +22230,7 @@ class TreeComponent {
             @if (row.loading) {
               <ui-icon name="loader-circle" [spin]="true" class="text-[10px]"></ui-icon>
             } @else {
-              <ui-icon [name]="isExpanded(row.key) ? 'chevron-down' : 'chevron-right'" class="text-[10px]"></ui-icon>
+              <ui-icon name="chevron-right" class="text-[10px] transition-transform duration-150" [class.rotate-90]="isExpanded(row.key)"></ui-icon>
             }
           </button>
         } @else {
@@ -21144,7 +22343,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
             @if (row.loading) {
               <ui-icon name="loader-circle" [spin]="true" class="text-[10px]"></ui-icon>
             } @else {
-              <ui-icon [name]="isExpanded(row.key) ? 'chevron-down' : 'chevron-right'" class="text-[10px]"></ui-icon>
+              <ui-icon name="chevron-right" class="text-[10px] transition-transform duration-150" [class.rotate-90]="isExpanded(row.key)"></ui-icon>
             }
           </button>
         } @else {
@@ -22336,7 +23535,7 @@ class OrganizationChartComponent {
               @if (togglerIconTpl()) {
                 <ng-container [ngTemplateOutlet]="togglerIconTpl()" [ngTemplateOutletContext]="{ $implicit: isExpanded(node) }" />
               } @else {
-                <ui-icon [name]="isExpanded(node) ? 'chevron-up' : 'chevron-down'" class="text-[10px]"></ui-icon>
+                <ui-icon name="chevron-down" class="text-[10px] transition-transform duration-150" [class.rotate-180]="isExpanded(node)"></ui-icon>
               }
             </button>
           }
@@ -22397,7 +23596,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
               @if (togglerIconTpl()) {
                 <ng-container [ngTemplateOutlet]="togglerIconTpl()" [ngTemplateOutletContext]="{ $implicit: isExpanded(node) }" />
               } @else {
-                <ui-icon [name]="isExpanded(node) ? 'chevron-up' : 'chevron-down'" class="text-[10px]"></ui-icon>
+                <ui-icon name="chevron-down" class="text-[10px] transition-transform duration-150" [class.rotate-180]="isExpanded(node)"></ui-icon>
               }
             </button>
           }
@@ -23408,29 +24607,39 @@ class GalleriaComponent {
     ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
     hostClass = computed(() => `block w-full ${this.styleClass()}`.trim(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
-    isThumbVertical = computed(() => this.thumbnailsPosition() === 'left' || this.thumbnailsPosition() === 'right', /* @ts-ignore */
+    isThumbVertical = computed(() => this.thumbnailsPosition() === 'left' ||
+        this.thumbnailsPosition() === 'right', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isThumbVertical" }] : /* istanbul ignore next */ []));
     containerFlexClass = computed(() => {
         if (this.isThumbVertical())
-            return this.thumbnailsPosition() === 'left' ? 'flex-row' : 'flex-row-reverse';
-        return this.thumbnailsPosition() === 'top' ? 'flex-col-reverse' : 'flex-col';
+            return this.thumbnailsPosition() === 'left'
+                ? 'flex-row'
+                : 'flex-row-reverse';
+        return this.thumbnailsPosition() === 'top'
+            ? 'flex-col-reverse'
+            : 'flex-col';
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "containerFlexClass" }] : /* istanbul ignore next */ []));
     activeItem = computed(() => this.value()[this.activeIndex()] ?? null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "activeItem" }] : /* istanbul ignore next */ []));
     indices = computed(() => Array.from({ length: this.value().length }, (_, i) => i), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "indices" }] : /* istanbul ignore next */ []));
-    isForwardDisabled = computed(() => this.value().length === 0 || (!this.circular() && this.activeIndex() >= this.value().length - 1), /* @ts-ignore */
+    isForwardDisabled = computed(() => this.value().length === 0 ||
+        (!this.circular() && this.activeIndex() >= this.value().length - 1), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isForwardDisabled" }] : /* istanbul ignore next */ []));
-    isBackwardDisabled = computed(() => this.value().length === 0 || (!this.circular() && this.activeIndex() <= 0), /* @ts-ignore */
+    isBackwardDisabled = computed(() => this.value().length === 0 ||
+        (!this.circular() && this.activeIndex() <= 0), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isBackwardDisabled" }] : /* istanbul ignore next */ []));
     fTemplates = contentChildren(FTemplateDirective, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "fTemplates" }] : /* istanbul ignore next */ []));
-    itemTpl = computed(() => this.fTemplates().find(t => t.fTemplate() === 'item')?.templateRef ?? null, /* @ts-ignore */
+    itemTpl = computed(() => this.fTemplates().find((t) => t.fTemplate() === 'item')?.templateRef ??
+        null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "itemTpl" }] : /* istanbul ignore next */ []));
-    thumbnailTpl = computed(() => this.fTemplates().find(t => t.fTemplate() === 'thumbnail')?.templateRef ?? null, /* @ts-ignore */
+    thumbnailTpl = computed(() => this.fTemplates().find((t) => t.fTemplate() === 'thumbnail')
+        ?.templateRef ?? null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "thumbnailTpl" }] : /* istanbul ignore next */ []));
-    captionTpl = computed(() => this.fTemplates().find(t => t.fTemplate() === 'caption')?.templateRef ?? null, /* @ts-ignore */
+    captionTpl = computed(() => this.fTemplates().find((t) => t.fTemplate() === 'caption')?.templateRef ??
+        null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "captionTpl" }] : /* istanbul ignore next */ []));
     thumbStrip = viewChild('thumbStrip', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "thumbStrip" }] : /* istanbul ignore next */ []));
@@ -23449,7 +24658,11 @@ class GalleriaComponent {
             if (!strip)
                 return;
             const active = strip.children.item(index);
-            active?.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
+            active?.scrollIntoView({
+                behavior: 'smooth',
+                block: 'nearest',
+                inline: 'center',
+            });
         });
     }
     setIndex(i) {
@@ -23477,7 +24690,9 @@ class GalleriaComponent {
         else if (this.circular())
             this.setIndex(len - 1);
     }
-    selectIndex(i) { this.setIndex(i); }
+    selectIndex(i) {
+        this.setIndex(i);
+    }
     onKeydown(event) {
         if (event.key === 'ArrowRight') {
             event.preventDefault();
@@ -23531,32 +24746,58 @@ class GalleriaComponent {
     }
 
     <ng-template #contentTpl>
-      <div role="region" aria-roledescription="carousel" tabindex="0" (keydown)="onKeydown($event)">
+      <div
+        role="region"
+        aria-roledescription="carousel"
+        tabindex="0"
+        (keydown)="onKeydown($event)"
+      >
         <div class="flex gap-2" [class]="containerFlexClass()">
-          <div class="relative bg-black/90 rounded-lg overflow-hidden flex-1 min-w-0" [style.height]="height()">
+          <div
+            class="relative bg-black/90 rounded-lg overflow-hidden flex-1 min-w-0"
+            [style.height]="height()"
+          >
             @if (itemTpl()) {
-              <ng-container [ngTemplateOutlet]="itemTpl()!" [ngTemplateOutletContext]="{ $implicit: activeItem() }" />
+              <ng-container
+                [ngTemplateOutlet]="itemTpl()!"
+                [ngTemplateOutletContext]="{ $implicit: activeItem() }"
+              />
             } @else if (activeItem()) {
-              <img [src]="activeItem()!.itemImageSrc" [alt]="activeItem()!.alt ?? ''" class="w-full h-full object-contain" />
+              <img
+                [src]="activeItem()!.itemImageSrc"
+                [alt]="activeItem()!.alt ?? ''"
+                class="w-full h-full object-contain"
+              />
             }
 
             @if (showItemNavigators() && value().length > 1) {
-              <button type="button" aria-label="Previous"
+              <button
+                type="button"
+                aria-label="Previous"
                 class="absolute left-2 top-1/2 -translate-y-1/2 w-9 h-9 rounded-full bg-black/40 hover:bg-black/60 text-white flex items-center justify-center transition-colors cursor-pointer disabled:cursor-default disabled:opacity-40 disabled:pointer-events-none"
                 [disabled]="isBackwardDisabled()"
                 (click)="prev()"
-              ><ui-icon name="chevron-left" class="text-sm"></ui-icon></button>
-              <button type="button" aria-label="Next"
+              >
+                <ui-icon name="chevron-left" class="text-sm"></ui-icon>
+              </button>
+              <button
+                type="button"
+                aria-label="Next"
                 class="absolute right-2 top-1/2 -translate-y-1/2 w-9 h-9 rounded-full bg-black/40 hover:bg-black/60 text-white flex items-center justify-center transition-colors cursor-pointer disabled:cursor-default disabled:opacity-40 disabled:pointer-events-none"
                 [disabled]="isForwardDisabled()"
                 (click)="next()"
-              ><ui-icon name="chevron-right" class="text-sm"></ui-icon></button>
+              >
+                <ui-icon name="chevron-right" class="text-sm"></ui-icon>
+              </button>
             }
 
             @if (showIndicators() && value().length > 1) {
-              <div class="absolute bottom-2 left-0 right-0 flex justify-center gap-1.5">
+              <div
+                class="absolute bottom-2 left-0 right-0 flex justify-center gap-1.5"
+              >
                 @for (i of indices(); track i) {
-                  <button type="button"
+                  <button
+                    type="button"
                     [attr.aria-label]="'Page ' + (i + 1)"
                     [attr.aria-selected]="i === activeIndex()"
                     class="w-2 h-2 rounded-full transition-colors cursor-pointer"
@@ -23568,45 +24809,92 @@ class GalleriaComponent {
             }
 
             @if (captionTpl() && activeItem()) {
-              <div class="absolute bottom-0 left-0 right-0 bg-black/60 text-white p-3">
-                <ng-container [ngTemplateOutlet]="captionTpl()!" [ngTemplateOutletContext]="{ $implicit: activeItem() }" />
+              <div
+                class="absolute bottom-0 left-0 right-0 bg-black/60 text-white p-3"
+              >
+                <ng-container
+                  [ngTemplateOutlet]="captionTpl()!"
+                  [ngTemplateOutletContext]="{ $implicit: activeItem() }"
+                />
               </div>
             }
           </div>
 
           @if (showThumbnails() && value().length > 1) {
-            <div class="flex items-center gap-2" [class.flex-col]="isThumbVertical()">
+            <div
+              class="flex items-center gap-2 justify-between"
+              [class.flex-col]="isThumbVertical()"
+            >
               @if (showThumbnailNavigators()) {
-                <button type="button" aria-label="Previous thumbnails"
+                <button
+                  type="button"
+                  aria-label="Previous thumbnails"
                   class="w-7 h-7 shrink-0 flex items-center justify-center rounded-full border border-(--f-content-border-color) hover:bg-(--f-content-hover-background) cursor-pointer transition-colors"
                   (click)="scrollThumbnails(-1)"
-                ><ui-icon [name]="isThumbVertical() ? 'chevron-up' : 'chevron-left'" class="text-xs"></ui-icon></button>
+                >
+                  <ui-icon
+                    [name]="isThumbVertical() ? 'chevron-up' : 'chevron-left'"
+                    class="text-xs"
+                  ></ui-icon>
+                </button>
               }
 
-              <div #thumbStrip class="flex gap-2 overflow-auto py-1 scroll-smooth" [class.flex-col]="isThumbVertical()" [style.max-height]="isThumbVertical() ? height() : null">
+              <div
+                #thumbStrip
+                class="flex gap-2 overflow-auto py-1 scroll-smooth"
+                [class.flex-col]="isThumbVertical()"
+                [style.max-height]="isThumbVertical() ? height() : null"
+              >
                 @for (item of value(); track $index) {
-                  <button type="button"
+                  <button
+                    type="button"
                     class="shrink-0 rounded-md overflow-hidden border-2 transition-colors cursor-pointer"
-                    [style.width]="isThumbVertical() ? '4rem' : 'calc(' + (100 / numVisible()) + '% - 0.5rem)'"
+                    [style.width]="
+                      isThumbVertical()
+                        ? '4rem'
+                        : 'calc(' + 100 / numVisible() + '% - 0.5rem)'
+                    "
                     style="height: 4rem;"
-                    [class]="$index === activeIndex() ? 'border-primary' : 'border-transparent opacity-70 hover:opacity-100'"
-                    [attr.aria-current]="$index === activeIndex() ? 'true' : null"
+                    [class]="
+                      $index === activeIndex()
+                        ? 'border-primary'
+                        : 'border-transparent opacity-70 hover:opacity-100'
+                    "
+                    [attr.aria-current]="
+                      $index === activeIndex() ? 'true' : null
+                    "
                     (click)="selectIndex($index)"
                   >
                     @if (thumbnailTpl()) {
-                      <ng-container [ngTemplateOutlet]="thumbnailTpl()!" [ngTemplateOutletContext]="{ $implicit: item }" />
+                      <ng-container
+                        [ngTemplateOutlet]="thumbnailTpl()!"
+                        [ngTemplateOutletContext]="{ $implicit: item }"
+                      />
                     } @else {
-                      <img [src]="item.thumbnailImageSrc ?? item.itemImageSrc" [alt]="item.alt ?? ''" class="w-full h-full object-cover" />
+                      <img
+                        [src]="item.thumbnailImageSrc ?? item.itemImageSrc"
+                        [alt]="item.alt ?? ''"
+                        class="w-full h-full object-cover"
+                      />
                     }
                   </button>
                 }
               </div>
 
               @if (showThumbnailNavigators()) {
-                <button type="button" aria-label="Next thumbnails"
+                <button
+                  type="button"
+                  aria-label="Next thumbnails"
                   class="w-7 h-7 shrink-0 flex items-center justify-center rounded-full border border-(--f-content-border-color) hover:bg-(--f-content-hover-background) cursor-pointer transition-colors"
                   (click)="scrollThumbnails(1)"
-                ><ui-icon [name]="isThumbVertical() ? 'chevron-down' : 'chevron-right'" class="text-xs"></ui-icon></button>
+                >
+                  <ui-icon
+                    [name]="
+                      isThumbVertical() ? 'chevron-down' : 'chevron-right'
+                    "
+                    class="text-xs"
+                  ></ui-icon>
+                </button>
               }
             </div>
           }
@@ -23640,32 +24928,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
     }
 
     <ng-template #contentTpl>
-      <div role="region" aria-roledescription="carousel" tabindex="0" (keydown)="onKeydown($event)">
+      <div
+        role="region"
+        aria-roledescription="carousel"
+        tabindex="0"
+        (keydown)="onKeydown($event)"
+      >
         <div class="flex gap-2" [class]="containerFlexClass()">
-          <div class="relative bg-black/90 rounded-lg overflow-hidden flex-1 min-w-0" [style.height]="height()">
+          <div
+            class="relative bg-black/90 rounded-lg overflow-hidden flex-1 min-w-0"
+            [style.height]="height()"
+          >
             @if (itemTpl()) {
-              <ng-container [ngTemplateOutlet]="itemTpl()!" [ngTemplateOutletContext]="{ $implicit: activeItem() }" />
+              <ng-container
+                [ngTemplateOutlet]="itemTpl()!"
+                [ngTemplateOutletContext]="{ $implicit: activeItem() }"
+              />
             } @else if (activeItem()) {
-              <img [src]="activeItem()!.itemImageSrc" [alt]="activeItem()!.alt ?? ''" class="w-full h-full object-contain" />
+              <img
+                [src]="activeItem()!.itemImageSrc"
+                [alt]="activeItem()!.alt ?? ''"
+                class="w-full h-full object-contain"
+              />
             }
 
             @if (showItemNavigators() && value().length > 1) {
-              <button type="button" aria-label="Previous"
+              <button
+                type="button"
+                aria-label="Previous"
                 class="absolute left-2 top-1/2 -translate-y-1/2 w-9 h-9 rounded-full bg-black/40 hover:bg-black/60 text-white flex items-center justify-center transition-colors cursor-pointer disabled:cursor-default disabled:opacity-40 disabled:pointer-events-none"
                 [disabled]="isBackwardDisabled()"
                 (click)="prev()"
-              ><ui-icon name="chevron-left" class="text-sm"></ui-icon></button>
-              <button type="button" aria-label="Next"
+              >
+                <ui-icon name="chevron-left" class="text-sm"></ui-icon>
+              </button>
+              <button
+                type="button"
+                aria-label="Next"
                 class="absolute right-2 top-1/2 -translate-y-1/2 w-9 h-9 rounded-full bg-black/40 hover:bg-black/60 text-white flex items-center justify-center transition-colors cursor-pointer disabled:cursor-default disabled:opacity-40 disabled:pointer-events-none"
                 [disabled]="isForwardDisabled()"
                 (click)="next()"
-              ><ui-icon name="chevron-right" class="text-sm"></ui-icon></button>
+              >
+                <ui-icon name="chevron-right" class="text-sm"></ui-icon>
+              </button>
             }
 
             @if (showIndicators() && value().length > 1) {
-              <div class="absolute bottom-2 left-0 right-0 flex justify-center gap-1.5">
+              <div
+                class="absolute bottom-2 left-0 right-0 flex justify-center gap-1.5"
+              >
                 @for (i of indices(); track i) {
-                  <button type="button"
+                  <button
+                    type="button"
                     [attr.aria-label]="'Page ' + (i + 1)"
                     [attr.aria-selected]="i === activeIndex()"
                     class="w-2 h-2 rounded-full transition-colors cursor-pointer"
@@ -23677,45 +24991,92 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
             }
 
             @if (captionTpl() && activeItem()) {
-              <div class="absolute bottom-0 left-0 right-0 bg-black/60 text-white p-3">
-                <ng-container [ngTemplateOutlet]="captionTpl()!" [ngTemplateOutletContext]="{ $implicit: activeItem() }" />
+              <div
+                class="absolute bottom-0 left-0 right-0 bg-black/60 text-white p-3"
+              >
+                <ng-container
+                  [ngTemplateOutlet]="captionTpl()!"
+                  [ngTemplateOutletContext]="{ $implicit: activeItem() }"
+                />
               </div>
             }
           </div>
 
           @if (showThumbnails() && value().length > 1) {
-            <div class="flex items-center gap-2" [class.flex-col]="isThumbVertical()">
+            <div
+              class="flex items-center gap-2 justify-between"
+              [class.flex-col]="isThumbVertical()"
+            >
               @if (showThumbnailNavigators()) {
-                <button type="button" aria-label="Previous thumbnails"
+                <button
+                  type="button"
+                  aria-label="Previous thumbnails"
                   class="w-7 h-7 shrink-0 flex items-center justify-center rounded-full border border-(--f-content-border-color) hover:bg-(--f-content-hover-background) cursor-pointer transition-colors"
                   (click)="scrollThumbnails(-1)"
-                ><ui-icon [name]="isThumbVertical() ? 'chevron-up' : 'chevron-left'" class="text-xs"></ui-icon></button>
+                >
+                  <ui-icon
+                    [name]="isThumbVertical() ? 'chevron-up' : 'chevron-left'"
+                    class="text-xs"
+                  ></ui-icon>
+                </button>
               }
 
-              <div #thumbStrip class="flex gap-2 overflow-auto py-1 scroll-smooth" [class.flex-col]="isThumbVertical()" [style.max-height]="isThumbVertical() ? height() : null">
+              <div
+                #thumbStrip
+                class="flex gap-2 overflow-auto py-1 scroll-smooth"
+                [class.flex-col]="isThumbVertical()"
+                [style.max-height]="isThumbVertical() ? height() : null"
+              >
                 @for (item of value(); track $index) {
-                  <button type="button"
+                  <button
+                    type="button"
                     class="shrink-0 rounded-md overflow-hidden border-2 transition-colors cursor-pointer"
-                    [style.width]="isThumbVertical() ? '4rem' : 'calc(' + (100 / numVisible()) + '% - 0.5rem)'"
+                    [style.width]="
+                      isThumbVertical()
+                        ? '4rem'
+                        : 'calc(' + 100 / numVisible() + '% - 0.5rem)'
+                    "
                     style="height: 4rem;"
-                    [class]="$index === activeIndex() ? 'border-primary' : 'border-transparent opacity-70 hover:opacity-100'"
-                    [attr.aria-current]="$index === activeIndex() ? 'true' : null"
+                    [class]="
+                      $index === activeIndex()
+                        ? 'border-primary'
+                        : 'border-transparent opacity-70 hover:opacity-100'
+                    "
+                    [attr.aria-current]="
+                      $index === activeIndex() ? 'true' : null
+                    "
                     (click)="selectIndex($index)"
                   >
                     @if (thumbnailTpl()) {
-                      <ng-container [ngTemplateOutlet]="thumbnailTpl()!" [ngTemplateOutletContext]="{ $implicit: item }" />
+                      <ng-container
+                        [ngTemplateOutlet]="thumbnailTpl()!"
+                        [ngTemplateOutletContext]="{ $implicit: item }"
+                      />
                     } @else {
-                      <img [src]="item.thumbnailImageSrc ?? item.itemImageSrc" [alt]="item.alt ?? ''" class="w-full h-full object-cover" />
+                      <img
+                        [src]="item.thumbnailImageSrc ?? item.itemImageSrc"
+                        [alt]="item.alt ?? ''"
+                        class="w-full h-full object-cover"
+                      />
                     }
                   </button>
                 }
               </div>
 
               @if (showThumbnailNavigators()) {
-                <button type="button" aria-label="Next thumbnails"
+                <button
+                  type="button"
+                  aria-label="Next thumbnails"
                   class="w-7 h-7 shrink-0 flex items-center justify-center rounded-full border border-(--f-content-border-color) hover:bg-(--f-content-hover-background) cursor-pointer transition-colors"
                   (click)="scrollThumbnails(1)"
-                ><ui-icon [name]="isThumbVertical() ? 'chevron-down' : 'chevron-right'" class="text-xs"></ui-icon></button>
+                >
+                  <ui-icon
+                    [name]="
+                      isThumbVertical() ? 'chevron-down' : 'chevron-right'
+                    "
+                    class="text-xs"
+                  ></ui-icon>
+                </button>
               }
             </div>
           }