npm - @flusys/ng-ui - Versions diffs - 6.0.0-beta.1 → 6.0.0-beta.2 - Mend

@flusys/ng-ui 6.0.0-beta.1 → 6.0.0-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/fesm2022/flusys-ng-ui.mjs +523 -145
package/fesm2022/flusys-ng-ui.mjs.map +1 -1
package/package.json +1 -1

package/fesm2022/flusys-ng-ui.mjs CHANGED Viewed

@@ -538,10 +538,17 @@ class AvatarComponent {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: AvatarComponent, isStandalone: true, selector: "f-avatar", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <div [class]="classes()" [style.background-color]="!image() && color() ? color() : null">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: AvatarComponent, isStandalone: true, selector: "f-avatar", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    <div
+      [class]="classes()"
+      [style.background-color]="!image() && color() ? color() : null"
+    >
       @if (image()) {
-        <img [src]="image()" [alt]="label()" class="w-full h-full object-cover" />
+        <img
+          [src]="image()"
+          [alt]="label()"
+          class="w-full h-full object-cover"
+        />
       } @else if (icon()) {
         <ui-icon [name]="icon()"></ui-icon>
       } @else {
@@ -554,11 +561,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
             type: Component,
             args: [{
                     selector: 'f-avatar',
+                    host: {
+                        class: 'block',
+                    },
                     imports: [UiIconComponent],
                     template: `
-    <div [class]="classes()" [style.background-color]="!image() && color() ? color() : null">
+    <div
+      [class]="classes()"
+      [style.background-color]="!image() && color() ? color() : null"
+    >
       @if (image()) {
-        <img [src]="image()" [alt]="label()" class="w-full h-full object-cover" />
+        <img
+          [src]="image()"
+          [alt]="label()"
+          class="w-full h-full object-cover"
+        />
       } @else if (icon()) {
         <ui-icon [name]="icon()"></ui-icon>
       } @else {
@@ -571,12 +588,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 class AvatarGroupComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AvatarGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: AvatarGroupComponent, isStandalone: true, selector: "f-avatar-group", ngImport: i0, template: `<div class="flex -space-x-2"><ng-content /></div>`, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: AvatarGroupComponent, isStandalone: true, selector: "f-avatar-group", host: { classAttribute: "block" }, ngImport: i0, template: `<div class="flex -space-x-2"><ng-content /></div>`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AvatarGroupComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'f-avatar-group',
+                    host: {
+                        class: 'block',
+                    },
                     template: `<div class="flex -space-x-2"><ng-content /></div>`,
                 }]
         }] });
@@ -616,7 +636,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 }, 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 }, 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 } }, outputs: { onClick: "onClick" }, 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 }, 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 }, 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 } }, outputs: { onClick: "onClick" }, host: { classAttribute: "block" }, ngImport: i0, template: `
     <button
       [type]="type()"
       [disabled]="disabled() || loading()"
@@ -666,10 +686,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
       }
     </button>
   `,
+                    host: {
+                        class: 'block',
+                    },
                 }]
         }], 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 }] }], 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 }] }], 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 }] }], onClick: [{ type: i0.Output, args: ["onClick"] }] } });
 function computeButtonClasses(opts) {
-    const { severity: sev, text: isText, link: isLink, outlined: isOutlined, rounded: isRounded, raised, fluid: isFluid, size: sz, iconOnly } = opts;
+    const { severity: sev, text: isText, link: isLink, outlined: isOutlined, rounded: isRounded, raised, fluid: isFluid, size: sz, iconOnly, } = opts;
     const parts = [
         'inline-flex items-center justify-center gap-2 cursor-pointer select-none transition-all duration-[var(--f-transition-duration)]',
         'focus:outline-none focus-visible:ring-focus',
@@ -680,10 +703,16 @@ function computeButtonClasses(opts) {
         raised ? 'shadow-md hover:shadow-lg active:shadow-sm' : '',
     ];
     const sizing = sz === 'small'
-        ? (iconOnly ? 'p-1.5 text-xs' : 'px-3 py-1.5 text-xs')
+        ? iconOnly
+            ? 'p-1.5 text-xs'
+            : 'px-3 py-1.5 text-xs'
         : sz === 'large'
-            ? (iconOnly ? 'p-3 text-base' : 'px-5 py-3 text-base')
-            : (iconOnly ? 'p-2 text-sm' : 'px-4 py-2 text-sm');
+            ? iconOnly
+                ? 'p-3 text-base'
+                : 'px-5 py-3 text-base'
+            : iconOnly
+                ? 'p-2 text-sm'
+                : 'px-4 py-2 text-sm';
     let variant = '';
     if (isLink) {
         variant = 'text-primary hover:underline bg-transparent border-none p-0';
@@ -723,7 +752,9 @@ function solidVariant(sev) {
         contrast: 'active:bg-surface-700',
         help: 'active:bg-purple-700',
     };
-    const border = sev === 'secondary' ? 'border border-(--f-content-border-color) shadow-sm' : 'border border-transparent';
+    const border = sev === 'secondary'
+        ? 'border border-(--f-content-border-color) shadow-sm'
+        : 'border border-transparent';
     return `${severitySolidBackground(sev)} ${activeMap[sev]} ${border}`;
 }
 function outlinedVariant(sev) {
@@ -1109,17 +1140,26 @@ class ProgressbarComponent {
     ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
     showValue = input(true, { ...(ngDevMode ? { debugName: "showValue" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ProgressbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ProgressbarComponent, isStandalone: true, selector: "f-progressbar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <div class="relative w-full h-5 bg-(--f-content-border-color) rounded-lg overflow-hidden" role="progressbar" [attr.aria-valuenow]="value()">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ProgressbarComponent, isStandalone: true, selector: "f-progressbar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "relative z-999999" }, ngImport: i0, template: `
+    <div
+      class="relative w-full h-2 bg-(--f-content-border-color) rounded-lg overflow-hidden"
+      role="progressbar"
+      [attr.aria-valuenow]="value()"
+    >
       @if (mode() === 'indeterminate') {
-        <div class="absolute inset-y-0 bg-primary rounded-lg w-1/3 indeterminate-bar"></div>
+        <div
+          class="absolute inset-y-0 bg-primary rounded-lg w-1/3 indeterminate-bar"
+        ></div>
       } @else {
         <div
           class="h-full bg-primary rounded-lg transition-all duration-500 ease-out flex items-center justify-center overflow-hidden"
           [style.width]="value() + '%'"
         >
           @if (showValue()) {
-            <span class="text-xs font-semibold text-primary-contrast whitespace-nowrap px-1">{{ value() }}%</span>
+            <span
+              class="text-xs font-semibold text-primary-contrast whitespace-nowrap px-1"
+              >{{ value() }}%</span
+            >
           }
         </div>
       }
@@ -1128,17 +1168,26 @@ class ProgressbarComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ProgressbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'f-progressbar', template: `
-    <div class="relative w-full h-5 bg-(--f-content-border-color) rounded-lg overflow-hidden" role="progressbar" [attr.aria-valuenow]="value()">
+            args: [{ selector: 'f-progressbar', host: { class: 'relative z-999999' }, template: `
+    <div
+      class="relative w-full h-2 bg-(--f-content-border-color) rounded-lg overflow-hidden"
+      role="progressbar"
+      [attr.aria-valuenow]="value()"
+    >
       @if (mode() === 'indeterminate') {
-        <div class="absolute inset-y-0 bg-primary rounded-lg w-1/3 indeterminate-bar"></div>
+        <div
+          class="absolute inset-y-0 bg-primary rounded-lg w-1/3 indeterminate-bar"
+        ></div>
       } @else {
         <div
           class="h-full bg-primary rounded-lg transition-all duration-500 ease-out flex items-center justify-center overflow-hidden"
           [style.width]="value() + '%'"
         >
           @if (showValue()) {
-            <span class="text-xs font-semibold text-primary-contrast whitespace-nowrap px-1">{{ value() }}%</span>
+            <span
+              class="text-xs font-semibold text-primary-contrast whitespace-nowrap px-1"
+              >{{ value() }}%</span
+            >
           }
         </div>
       }
@@ -1236,10 +1285,14 @@ class TagComponent {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "inlineStyle" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TagComponent, isStandalone: true, selector: "f-tag", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TagComponent, isStandalone: true, selector: "f-tag", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
     <span [class]="classes()" [style]="inlineStyle()" role="status">
-      @if (icon()) { <ui-icon [name]="icon()" class="text-xs"></ui-icon> }
-      @if (value()) { <span>{{ value() }}</span> }
+      @if (icon()) {
+        <ui-icon [name]="icon()" class="text-xs"></ui-icon>
+      }
+      @if (value()) {
+        <span>{{ value() }}</span>
+      }
       <ng-content></ng-content>
     </span>
   `, isInline: true, dependencies: [{ kind: "component", type: UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill"] }] });
@@ -1251,11 +1304,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                     imports: [UiIconComponent],
                     template: `
     <span [class]="classes()" [style]="inlineStyle()" role="status">
-      @if (icon()) { <ui-icon [name]="icon()" class="text-xs"></ui-icon> }
-      @if (value()) { <span>{{ value() }}</span> }
+      @if (icon()) {
+        <ui-icon [name]="icon()" class="text-xs"></ui-icon>
+      }
+      @if (value()) {
+        <span>{{ value() }}</span>
+      }
       <ng-content></ng-content>
     </span>
   `,
+                    host: {
+                        class: 'block',
+                    },
                 }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
@@ -3971,19 +4031,31 @@ class PanelComponent {
     toggleable = input(false, { ...(ngDevMode ? { debugName: "toggleable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     collapsed = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
-    toggleCollapsed() { this.collapsed.update(v => !v); }
+    toggleCollapsed() {
+        this.collapsed.update((v) => !v);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: PanelComponent, isStandalone: true, selector: "f-panel", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, toggleable: { classPropertyName: "toggleable", publicName: "toggleable", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, ngImport: i0, template: `
-    <div class="border border-(--f-content-border-color) rounded-lg overflow-hidden shadow-sm">
-      <div class="flex items-center justify-between px-5 py-3.5 bg-(--f-content-hover-background)/80 border-b border-(--f-content-border-color)">
-        <span class="font-semibold text-(--f-text-color) text-sm tracking-tight">{{ header() }}</span>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: PanelComponent, isStandalone: true, selector: "f-panel", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, toggleable: { classPropertyName: "toggleable", publicName: "toggleable", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    <div
+      class="border border-(--f-content-border-color) rounded-lg overflow-hidden shadow-sm"
+    >
+      <div
+        class="flex items-center justify-between px-5 py-3.5 bg-(--f-content-hover-background)/80 border-b border-(--f-content-border-color)"
+      >
+        <span
+          class="font-semibold text-(--f-text-color) text-sm tracking-tight"
+          >{{ header() }}</span
+        >
         @if (toggleable()) {
           <button
             type="button"
             class="w-6 h-6 flex items-center justify-center rounded-md text-(--f-text-muted-color) hover:text-(--f-text-hover-color) hover:bg-(--f-content-border-color)/70 transition-all duration-[var(--f-transition-duration)] focus:outline-none focus-visible:ring-focus cursor-pointer"
             (click)="toggleCollapsed()"
           >
-            <ui-icon [name]="collapsed() ? 'chevron-down' : 'chevron-up'" class="text-xs transition-transform duration-[var(--f-transition-duration)]"></ui-icon>
+            <ui-icon
+              [name]="collapsed() ? 'chevron-down' : 'chevron-up'"
+              class="text-xs transition-transform duration-[var(--f-transition-duration)]"
+            ></ui-icon>
           </button>
         }
       </div>
@@ -4000,17 +4072,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
             args: [{
                     selector: 'f-panel',
                     imports: [UiIconComponent],
+                    host: {
+                        class: 'block',
+                    },
                     template: `
-    <div class="border border-(--f-content-border-color) rounded-lg overflow-hidden shadow-sm">
-      <div class="flex items-center justify-between px-5 py-3.5 bg-(--f-content-hover-background)/80 border-b border-(--f-content-border-color)">
-        <span class="font-semibold text-(--f-text-color) text-sm tracking-tight">{{ header() }}</span>
+    <div
+      class="border border-(--f-content-border-color) rounded-lg overflow-hidden shadow-sm"
+    >
+      <div
+        class="flex items-center justify-between px-5 py-3.5 bg-(--f-content-hover-background)/80 border-b border-(--f-content-border-color)"
+      >
+        <span
+          class="font-semibold text-(--f-text-color) text-sm tracking-tight"
+          >{{ header() }}</span
+        >
         @if (toggleable()) {
           <button
             type="button"
             class="w-6 h-6 flex items-center justify-center rounded-md text-(--f-text-muted-color) hover:text-(--f-text-hover-color) hover:bg-(--f-content-border-color)/70 transition-all duration-[var(--f-transition-duration)] focus:outline-none focus-visible:ring-focus cursor-pointer"
             (click)="toggleCollapsed()"
           >
-            <ui-icon [name]="collapsed() ? 'chevron-down' : 'chevron-up'" class="text-xs transition-transform duration-[var(--f-transition-duration)]"></ui-icon>
+            <ui-icon
+              [name]="collapsed() ? 'chevron-down' : 'chevron-up'"
+              class="text-xs transition-transform duration-[var(--f-transition-duration)]"
+            ></ui-icon>
           </button>
         }
       </div>
@@ -4266,7 +4351,7 @@ class ToolbarComponent {
     styleClass = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "styleClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: ToolbarComponent, isStandalone: true, selector: "f-toolbar", inputs: { styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: ToolbarComponent, isStandalone: true, selector: "f-toolbar", inputs: { styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
     <div
       class="flex items-center justify-between gap-3 py-2.5 px-4 bg-(--f-content-background) border border-(--f-content-border-color) rounded-lg shadow-sm"
       [class]="styleClass()"
@@ -4305,6 +4390,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
       <ng-content />
     </div>
   `,
+                    host: {
+                        class: 'block',
+                    },
                 }]
         }], propDecorators: { styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }] } });
@@ -4595,7 +4683,7 @@ class AccordionComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: AccordionComponent, isStandalone: true, selector: "f-accordion", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onOpen: "onOpen", onClose: "onClose" }, providers: [AccordionContext], ngImport: i0, template: `<div
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: AccordionComponent, isStandalone: true, selector: "f-accordion", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onOpen: "onOpen", onClose: "onClose" }, host: { classAttribute: "block" }, providers: [AccordionContext], ngImport: i0, template: `<div
     class="border border-(--f-content-border-color) rounded-lg overflow-hidden shadow-sm bg-(--f-content-background)"
   >
     <ng-content />
@@ -4606,6 +4694,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
             args: [{
                     selector: 'f-accordion',
                     providers: [AccordionContext],
+                    host: {
+                        class: 'block',
+                    },
                     template: `<div
     class="border border-(--f-content-border-color) rounded-lg overflow-hidden shadow-sm bg-(--f-content-background)"
   >
@@ -4801,12 +4892,15 @@ class ChartComponent {
         this.chart?.destroy();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: ChartComponent, isStandalone: true, selector: "f-chart", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, isSignal: true }], ngImport: i0, template: `<canvas #canvas></canvas>`, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: ChartComponent, isStandalone: true, selector: "f-chart", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, isSignal: true }], ngImport: i0, template: `<canvas #canvas></canvas>`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ChartComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'f-chart',
+                    host: {
+                        class: 'block',
+                    },
                     template: `<canvas #canvas></canvas>`,
                 }]
         }], ctorParameters: () => [], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], canvasRef: [{ type: i0.ViewChild, args: ['canvas', { isSignal: true }] }] } });
@@ -5050,7 +5144,9 @@ class TableComponent {
             this.onLazyLoad.emit(this.buildLazyEvent(this.first(), this.rows()));
         }
     }
-    onFilterInput(v) { this._filterText.set(v); }
+    onFilterInput(v) {
+        this._filterText.set(v);
+    }
     trackByRow(index, row) {
         const key = this.dataKey();
         const value = row?.[key];
@@ -5077,7 +5173,10 @@ class TableComponent {
             this.sortField.set(null);
             this.sortOrder.set(1);
         }
-        this.onSort.emit({ sortField: this.sortField(), sortOrder: this.sortOrder() });
+        this.onSort.emit({
+            sortField: this.sortField(),
+            sortOrder: this.sortOrder(),
+        });
         if (this.lazy()) {
             this.onLazyLoad.emit(this.buildLazyEvent(this.currentFirst(), this.currentRows()));
         }
@@ -5101,37 +5200,83 @@ class TableComponent {
             return a.getTime() - b.getTime();
         if (typeof a === 'number' && typeof b === 'number')
             return a - b;
-        return String(a).localeCompare(String(b), undefined, { numeric: true, sensitivity: 'base' });
+        return String(a).localeCompare(String(b), undefined, {
+            numeric: true,
+            sensitivity: 'base',
+        });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TableComponent, isStandalone: true, selector: "f-table", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: true, isRequired: false, transformFunction: null }, rowHover: { classPropertyName: "rowHover", publicName: "rowHover", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: true, isRequired: false, transformFunction: null }, first: { classPropertyName: "first", publicName: "first", isSignal: true, isRequired: false, transformFunction: null }, rowsPerPageOptions: { classPropertyName: "rowsPerPageOptions", publicName: "rowsPerPageOptions", isSignal: true, isRequired: false, transformFunction: null }, showCurrentPageReport: { classPropertyName: "showCurrentPageReport", publicName: "showCurrentPageReport", isSignal: true, isRequired: false, transformFunction: null }, currentPageReportTemplate: { classPropertyName: "currentPageReportTemplate", publicName: "currentPageReportTemplate", isSignal: true, isRequired: false, transformFunction: null }, tableStyle: { classPropertyName: "tableStyle", publicName: "tableStyle", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, globalFilterFields: { classPropertyName: "globalFilterFields", publicName: "globalFilterFields", isSignal: true, isRequired: false, transformFunction: null }, sortField: { classPropertyName: "sortField", publicName: "sortField", isSignal: true, isRequired: false, transformFunction: null }, sortOrder: { classPropertyName: "sortOrder", publicName: "sortOrder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortField: "sortFieldChange", sortOrder: "sortOrderChange", onLazyLoad: "onLazyLoad", onSort: "onSort" }, host: { properties: { "class.row-hover": "rowHover()", "class": "styleClass()" } }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true, isSignal: true }, { propertyName: "bodyTemplate", first: true, predicate: ["body"], descendants: true, isSignal: true }, { propertyName: "emptyTemplate", first: true, predicate: ["emptymessage"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <div class="w-full rounded-lg border border-(--f-content-border-color) bg-(--f-content-background) shadow-sm" [class]="scrollable() ? 'overflow-auto max-h-[28rem]' : 'overflow-x-auto'">
+    <div
+      class="w-full rounded-lg border border-(--f-content-border-color) bg-(--f-content-background) shadow-sm"
+      [class]="scrollable() ? 'overflow-auto max-h-[28rem]' : 'overflow-x-auto'"
+    >
       @if (globalFilterFields().length > 0) {
-        <div [class]="'p-2 border-b border-(--f-content-border-color) ' + (scrollable() ? 'sticky top-0 z-10 bg-(--f-content-background)' : '')">
-          <div class="flex items-center gap-2 px-2 py-1.5 max-w-xs bg-(--f-content-hover-background) rounded-lg border border-(--f-content-border-color)">
-            <ui-icon name="search" class="text-xs text-(--f-text-muted-color) shrink-0"></ui-icon>
-            <input type="text" class="flex-1 text-sm bg-transparent focus:outline-none text-(--f-text-color) placeholder:text-(--f-form-field-placeholder-color)"
-              placeholder="Search..." [value]="filterText()" (input)="onFilterInput($any($event.target).value)" />
+        <div
+          [class]="
+            'p-2 border-b border-(--f-content-border-color) ' +
+            (scrollable()
+              ? 'sticky top-0 z-10 bg-(--f-content-background)'
+              : '')
+          "
+        >
+          <div
+            class="flex items-center gap-2 px-2 py-1.5 max-w-xs bg-(--f-content-hover-background) rounded-lg border border-(--f-content-border-color)"
+          >
+            <ui-icon
+              name="search"
+              class="text-xs text-(--f-text-muted-color) shrink-0"
+            ></ui-icon>
+            <input
+              type="text"
+              class="flex-1 text-sm bg-transparent focus:outline-none text-(--f-text-color) placeholder:text-(--f-form-field-placeholder-color)"
+              placeholder="Search..."
+              [value]="filterText()"
+              (input)="onFilterInput($any($event.target).value)"
+            />
           </div>
         </div>
       }
       @if (loading()) {
-        <div class="flex flex-col items-center justify-center py-20 text-(--f-text-muted-color) gap-3">
-          <ui-icon name="loader-circle" [spin]="true" class="text-2xl text-primary/60"></ui-icon>
-          <span class="text-sm text-(--f-text-muted-color)">Loading data...</span>
+        <div
+          class="flex flex-col items-center justify-center py-20 text-(--f-text-muted-color) gap-3"
+        >
+          <ui-icon
+            name="loader-circle"
+            [spin]="true"
+            class="text-2xl text-primary/60"
+          ></ui-icon>
+          <span class="text-sm text-(--f-text-muted-color)"
+            >Loading data...</span
+          >
         </div>
       } @else {
-        <table class="w-full text-sm text-left border-collapse" [style]="tableStyle()">
-          <thead class="bg-(--f-content-hover-background) border-b border-(--f-content-border-color)" [class.sticky]="scrollable()" [class.top-0]="scrollable()" [class.z-10]="scrollable()">
+        <table
+          class="w-full text-sm text-left border-collapse"
+          [style]="tableStyle()"
+        >
+          <thead
+            class="bg-(--f-content-hover-background) border-b border-(--f-content-border-color)"
+            [class.sticky]="scrollable()"
+            [class.top-0]="scrollable()"
+            [class.z-10]="scrollable()"
+          >
             @if (headerTemplate()) {
               <ng-container [ngTemplateOutlet]="headerTemplate()" />
             }
           </thead>
           <tbody class="divide-y divide-(--f-content-border-color)">
             @if (pageRows().length > 0) {
-              @for (row of pageRows(); track trackByRow($index, row); let i = $index) {
+              @for (
+                row of pageRows();
+                track trackByRow($index, row);
+                let i = $index
+              ) {
                 @if (bodyTemplate()) {
-                  <ng-container [ngTemplateOutlet]="bodyTemplate()" [ngTemplateOutletContext]="{ $implicit: row, rowIndex: i }" />
+                  <ng-container
+                    [ngTemplateOutlet]="bodyTemplate()"
+                    [ngTemplateOutletContext]="{ $implicit: row, rowIndex: i }"
+                  />
                 }
               }
             } @else {
@@ -5139,14 +5284,28 @@ class TableComponent {
                 <ng-container [ngTemplateOutlet]="emptyTemplate()" />
               } @else {
                 <tr>
-                  <td [attr.colspan]="100" class="text-center py-16 text-(--f-text-muted-color)">
+                  <td
+                    [attr.colspan]="100"
+                    class="text-center py-16 text-(--f-text-muted-color)"
+                  >
                     <div class="flex flex-col items-center gap-3">
-                      <div class="w-12 h-12 rounded-full bg-(--f-content-hover-background) flex items-center justify-center">
-                        <ui-icon name="inbox" class="text-xl text-(--f-text-muted-color)"></ui-icon>
+                      <div
+                        class="w-12 h-12 rounded-full bg-(--f-content-hover-background) flex items-center justify-center"
+                      >
+                        <ui-icon
+                          name="inbox"
+                          class="text-xl text-(--f-text-muted-color)"
+                        ></ui-icon>
                       </div>
                       <div>
-                        <p class="text-sm font-medium text-(--f-text-muted-color)">No records found</p>
-                        <p class="text-xs text-(--f-text-muted-color) mt-0.5">Try adjusting your filters</p>
+                        <p
+                          class="text-sm font-medium text-(--f-text-muted-color)"
+                        >
+                          No records found
+                        </p>
+                        <p class="text-xs text-(--f-text-muted-color) mt-0.5">
+                          Try adjusting your filters
+                        </p>
                       </div>
                     </div>
                   </td>
@@ -5170,7 +5329,7 @@ class TableComponent {
         </div>
       }
     </div>
-  `, isInline: true, styles: [":host ::ng-deep thead tr th{padding:.625rem 1rem;font-size:.68rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--f-text-muted-color);white-space:nowrap;background:transparent}:host ::ng-deep tbody tr{transition:background-color var(--f-transition-duration) ease}:host.row-hover ::ng-deep tbody tr:hover{background-color:var(--f-content-hover-background)}:host ::ng-deep tbody tr td{padding:.8125rem 1rem;color:var(--f-text-color);font-size:.875rem;vertical-align:middle}\n"], dependencies: [{ kind: "component", type: UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PaginatorComponent, selector: "f-paginator", inputs: ["first", "rows", "totalRecords", "rowsPerPageOptions", "showCurrentPageReport", "currentPageReportTemplate"], outputs: ["onPageChange"] }] });
+  `, isInline: true, styles: [":host ::ng-deep thead tr th{padding:.8125rem 1rem;font-size:.875rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--f-text-muted-color);white-space:nowrap;background:transparent}:host ::ng-deep tbody tr{transition:background-color var(--f-transition-duration) ease}:host.row-hover ::ng-deep tbody tr:hover{background-color:var(--f-content-hover-background)}:host ::ng-deep tbody tr td{padding:.8125rem 1rem;color:var(--f-text-color);font-size:.875rem;vertical-align:middle}\n"], dependencies: [{ kind: "component", type: UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PaginatorComponent, selector: "f-paginator", inputs: ["first", "rows", "totalRecords", "rowsPerPageOptions", "showCurrentPageReport", "currentPageReportTemplate"], outputs: ["onPageChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
@@ -5178,33 +5337,76 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         '[class.row-hover]': 'rowHover()',
                         '[class]': 'styleClass()',
                     }, template: `
-    <div class="w-full rounded-lg border border-(--f-content-border-color) bg-(--f-content-background) shadow-sm" [class]="scrollable() ? 'overflow-auto max-h-[28rem]' : 'overflow-x-auto'">
+    <div
+      class="w-full rounded-lg border border-(--f-content-border-color) bg-(--f-content-background) shadow-sm"
+      [class]="scrollable() ? 'overflow-auto max-h-[28rem]' : 'overflow-x-auto'"
+    >
       @if (globalFilterFields().length > 0) {
-        <div [class]="'p-2 border-b border-(--f-content-border-color) ' + (scrollable() ? 'sticky top-0 z-10 bg-(--f-content-background)' : '')">
-          <div class="flex items-center gap-2 px-2 py-1.5 max-w-xs bg-(--f-content-hover-background) rounded-lg border border-(--f-content-border-color)">
-            <ui-icon name="search" class="text-xs text-(--f-text-muted-color) shrink-0"></ui-icon>
-            <input type="text" class="flex-1 text-sm bg-transparent focus:outline-none text-(--f-text-color) placeholder:text-(--f-form-field-placeholder-color)"
-              placeholder="Search..." [value]="filterText()" (input)="onFilterInput($any($event.target).value)" />
+        <div
+          [class]="
+            'p-2 border-b border-(--f-content-border-color) ' +
+            (scrollable()
+              ? 'sticky top-0 z-10 bg-(--f-content-background)'
+              : '')
+          "
+        >
+          <div
+            class="flex items-center gap-2 px-2 py-1.5 max-w-xs bg-(--f-content-hover-background) rounded-lg border border-(--f-content-border-color)"
+          >
+            <ui-icon
+              name="search"
+              class="text-xs text-(--f-text-muted-color) shrink-0"
+            ></ui-icon>
+            <input
+              type="text"
+              class="flex-1 text-sm bg-transparent focus:outline-none text-(--f-text-color) placeholder:text-(--f-form-field-placeholder-color)"
+              placeholder="Search..."
+              [value]="filterText()"
+              (input)="onFilterInput($any($event.target).value)"
+            />
           </div>
         </div>
       }
       @if (loading()) {
-        <div class="flex flex-col items-center justify-center py-20 text-(--f-text-muted-color) gap-3">
-          <ui-icon name="loader-circle" [spin]="true" class="text-2xl text-primary/60"></ui-icon>
-          <span class="text-sm text-(--f-text-muted-color)">Loading data...</span>
+        <div
+          class="flex flex-col items-center justify-center py-20 text-(--f-text-muted-color) gap-3"
+        >
+          <ui-icon
+            name="loader-circle"
+            [spin]="true"
+            class="text-2xl text-primary/60"
+          ></ui-icon>
+          <span class="text-sm text-(--f-text-muted-color)"
+            >Loading data...</span
+          >
         </div>
       } @else {
-        <table class="w-full text-sm text-left border-collapse" [style]="tableStyle()">
-          <thead class="bg-(--f-content-hover-background) border-b border-(--f-content-border-color)" [class.sticky]="scrollable()" [class.top-0]="scrollable()" [class.z-10]="scrollable()">
+        <table
+          class="w-full text-sm text-left border-collapse"
+          [style]="tableStyle()"
+        >
+          <thead
+            class="bg-(--f-content-hover-background) border-b border-(--f-content-border-color)"
+            [class.sticky]="scrollable()"
+            [class.top-0]="scrollable()"
+            [class.z-10]="scrollable()"
+          >
             @if (headerTemplate()) {
               <ng-container [ngTemplateOutlet]="headerTemplate()" />
             }
           </thead>
           <tbody class="divide-y divide-(--f-content-border-color)">
             @if (pageRows().length > 0) {
-              @for (row of pageRows(); track trackByRow($index, row); let i = $index) {
+              @for (
+                row of pageRows();
+                track trackByRow($index, row);
+                let i = $index
+              ) {
                 @if (bodyTemplate()) {
-                  <ng-container [ngTemplateOutlet]="bodyTemplate()" [ngTemplateOutletContext]="{ $implicit: row, rowIndex: i }" />
+                  <ng-container
+                    [ngTemplateOutlet]="bodyTemplate()"
+                    [ngTemplateOutletContext]="{ $implicit: row, rowIndex: i }"
+                  />
                 }
               }
             } @else {
@@ -5212,14 +5414,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 <ng-container [ngTemplateOutlet]="emptyTemplate()" />
               } @else {
                 <tr>
-                  <td [attr.colspan]="100" class="text-center py-16 text-(--f-text-muted-color)">
+                  <td
+                    [attr.colspan]="100"
+                    class="text-center py-16 text-(--f-text-muted-color)"
+                  >
                     <div class="flex flex-col items-center gap-3">
-                      <div class="w-12 h-12 rounded-full bg-(--f-content-hover-background) flex items-center justify-center">
-                        <ui-icon name="inbox" class="text-xl text-(--f-text-muted-color)"></ui-icon>
+                      <div
+                        class="w-12 h-12 rounded-full bg-(--f-content-hover-background) flex items-center justify-center"
+                      >
+                        <ui-icon
+                          name="inbox"
+                          class="text-xl text-(--f-text-muted-color)"
+                        ></ui-icon>
                       </div>
                       <div>
-                        <p class="text-sm font-medium text-(--f-text-muted-color)">No records found</p>
-                        <p class="text-xs text-(--f-text-muted-color) mt-0.5">Try adjusting your filters</p>
+                        <p
+                          class="text-sm font-medium text-(--f-text-muted-color)"
+                        >
+                          No records found
+                        </p>
+                        <p class="text-xs text-(--f-text-muted-color) mt-0.5">
+                          Try adjusting your filters
+                        </p>
                       </div>
                     </div>
                   </td>
@@ -5243,7 +5459,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
         </div>
       }
     </div>
-  `, styles: [":host ::ng-deep thead tr th{padding:.625rem 1rem;font-size:.68rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--f-text-muted-color);white-space:nowrap;background:transparent}:host ::ng-deep tbody tr{transition:background-color var(--f-transition-duration) ease}:host.row-hover ::ng-deep tbody tr:hover{background-color:var(--f-content-hover-background)}:host ::ng-deep tbody tr td{padding:.8125rem 1rem;color:var(--f-text-color);font-size:.875rem;vertical-align:middle}\n"] }]
+  `, styles: [":host ::ng-deep thead tr th{padding:.8125rem 1rem;font-size:.875rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--f-text-muted-color);white-space:nowrap;background:transparent}:host ::ng-deep tbody tr{transition:background-color var(--f-transition-duration) ease}:host.row-hover ::ng-deep tbody tr:hover{background-color:var(--f-content-hover-background)}:host ::ng-deep tbody tr td{padding:.8125rem 1rem;color:var(--f-text-color);font-size:.875rem;vertical-align:middle}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], totalRecords: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalRecords", required: false }] }], rowHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHover", required: false }] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], scrollable: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollable", required: false }] }], paginator: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginator", required: false }] }], first: [{ type: i0.Input, args: [{ isSignal: true, alias: "first", required: false }] }], rowsPerPageOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsPerPageOptions", required: false }] }], showCurrentPageReport: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCurrentPageReport", required: false }] }], currentPageReportTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPageReportTemplate", required: false }] }], tableStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableStyle", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], globalFilterFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "globalFilterFields", required: false }] }], sortField: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortField", required: false }] }, { type: i0.Output, args: ["sortFieldChange"] }], sortOrder: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortOrder", required: false }] }, { type: i0.Output, args: ["sortOrderChange"] }], onLazyLoad: [{ type: i0.Output, args: ["onLazyLoad"] }], onSort: [{ type: i0.Output, args: ["onSort"] }], headerTemplate: [{ type: i0.ContentChild, args: ['header', { isSignal: true }] }], bodyTemplate: [{ type: i0.ContentChild, args: ['body', { isSignal: true }] }], emptyTemplate: [{ type: i0.ContentChild, args: ['emptymessage', { isSignal: true }] }] } });
 class SortableColumnDirective {
@@ -6563,7 +6779,7 @@ class TreeTableService {
     ...(ngDevMode ? [{ debugName: "_expanded" }] : /* istanbul ignore next */ []));
     expanded = this._expanded.asReadonly();
     toggle(key, node) {
-        this._expanded.update(s => {
+        this._expanded.update((s) => {
             const next = new Set(s);
             if (next.has(key)) {
                 next.delete(key);
@@ -6604,7 +6820,10 @@ class TreeTableTogglerComponent {
         (click)="onToggle($event)"
         [attr.aria-expanded]="rowNode().expanded"
       >
-        <ui-icon [name]="rowNode().expanded ? 'chevron-down' : 'chevron-right'" class="text-xs"></ui-icon>
+        <ui-icon
+          [name]="rowNode().expanded ? 'chevron-down' : 'chevron-right'"
+          class="text-xs"
+        ></ui-icon>
       </button>
     } @else {
       <span class="inline-block w-6 h-6 shrink-0"></span>
@@ -6624,7 +6843,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
         (click)="onToggle($event)"
         [attr.aria-expanded]="rowNode().expanded"
       >
-        <ui-icon [name]="rowNode().expanded ? 'chevron-down' : 'chevron-right'" class="text-xs"></ui-icon>
+        <ui-icon
+          [name]="rowNode().expanded ? 'chevron-down' : 'chevron-right'"
+          class="text-xs"
+        ></ui-icon>
       </button>
     } @else {
       <span class="inline-block w-6 h-6 shrink-0"></span>
@@ -6689,12 +6911,18 @@ class TreeTableComponent {
     >
       @if (loading()) {
         <div class="flex flex-col items-center justify-center py-20 gap-3">
-          <ui-icon name="loader-circle" [spin]="true" class="text-2xl text-primary/60"></ui-icon>
+          <ui-icon
+            name="loader-circle"
+            [spin]="true"
+            class="text-2xl text-primary/60"
+          ></ui-icon>
           <span class="text-sm text-(--f-text-muted-color)">Loading...</span>
         </div>
       } @else {
         <table class="w-full text-sm text-left border-collapse">
-          <thead class="bg-(--f-content-hover-background) border-b border-(--f-content-border-color)">
+          <thead
+            class="bg-(--f-content-hover-background) border-b border-(--f-content-border-color)"
+          >
             @if (headerTemplate()) {
               <ng-container [ngTemplateOutlet]="headerTemplate()" />
             }
@@ -6706,7 +6934,11 @@ class TreeTableComponent {
                   @if (bodyTemplate()) {
                     <ng-container
                       [ngTemplateOutlet]="bodyTemplate()"
-                      [ngTemplateOutletContext]="{ $implicit: row, rowData: row.node.data, rowNode: row }"
+                      [ngTemplateOutletContext]="{
+                        $implicit: row,
+                        rowData: row.node.data,
+                        rowNode: row,
+                      }"
                     />
                   }
                 }
@@ -6716,12 +6948,24 @@ class TreeTableComponent {
                 <ng-container [ngTemplateOutlet]="emptyTemplate()" />
               } @else {
                 <tr>
-                  <td [attr.colspan]="100" class="text-center py-16 text-(--f-text-muted-color)">
+                  <td
+                    [attr.colspan]="100"
+                    class="text-center py-16 text-(--f-text-muted-color)"
+                  >
                     <div class="flex flex-col items-center gap-3">
-                      <div class="w-12 h-12 rounded-full bg-(--f-content-hover-background) flex items-center justify-center">
-                        <ui-icon name="inbox" class="text-xl text-(--f-text-muted-color)"></ui-icon>
+                      <div
+                        class="w-12 h-12 rounded-full bg-(--f-content-hover-background) flex items-center justify-center"
+                      >
+                        <ui-icon
+                          name="inbox"
+                          class="text-xl text-(--f-text-muted-color)"
+                        ></ui-icon>
                       </div>
-                      <p class="text-sm font-medium text-(--f-text-muted-color)">No records found</p>
+                      <p
+                        class="text-sm font-medium text-(--f-text-muted-color)"
+                      >
+                        No records found
+                      </p>
                     </div>
                   </td>
                 </tr>
@@ -6731,7 +6975,7 @@ class TreeTableComponent {
         </table>
       }
     </div>
-  `, isInline: true, styles: [":host ::ng-deep table thead tr th{padding:.625rem 1rem;font-size:.68rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--f-text-muted-color);white-space:nowrap;background:transparent}:host ::ng-deep table tbody tr td{padding:.8125rem 1rem;color:var(--f-text-color);font-size:.875rem;vertical-align:middle}:host ::ng-deep table tbody tr:hover td{background-color:var(--f-content-hover-background)}\n"], dependencies: [{ kind: "component", type: UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+  `, isInline: true, styles: [":host ::ng-deep table thead tr th{padding:.8125rem 1rem;font-size:.875rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--f-text-muted-color);white-space:nowrap;background:transparent}:host ::ng-deep table tbody tr td{padding:.8125rem 1rem;color:var(--f-text-color);font-size:.875rem;vertical-align:middle}:host ::ng-deep table tbody tr:hover td{background-color:var(--f-content-hover-background)}\n"], dependencies: [{ kind: "component", type: UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TreeTableComponent, decorators: [{
             type: Component,
@@ -6742,12 +6986,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
     >
       @if (loading()) {
         <div class="flex flex-col items-center justify-center py-20 gap-3">
-          <ui-icon name="loader-circle" [spin]="true" class="text-2xl text-primary/60"></ui-icon>
+          <ui-icon
+            name="loader-circle"
+            [spin]="true"
+            class="text-2xl text-primary/60"
+          ></ui-icon>
           <span class="text-sm text-(--f-text-muted-color)">Loading...</span>
         </div>
       } @else {
         <table class="w-full text-sm text-left border-collapse">
-          <thead class="bg-(--f-content-hover-background) border-b border-(--f-content-border-color)">
+          <thead
+            class="bg-(--f-content-hover-background) border-b border-(--f-content-border-color)"
+          >
             @if (headerTemplate()) {
               <ng-container [ngTemplateOutlet]="headerTemplate()" />
             }
@@ -6759,7 +7009,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                   @if (bodyTemplate()) {
                     <ng-container
                       [ngTemplateOutlet]="bodyTemplate()"
-                      [ngTemplateOutletContext]="{ $implicit: row, rowData: row.node.data, rowNode: row }"
+                      [ngTemplateOutletContext]="{
+                        $implicit: row,
+                        rowData: row.node.data,
+                        rowNode: row,
+                      }"
                     />
                   }
                 }
@@ -6769,12 +7023,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 <ng-container [ngTemplateOutlet]="emptyTemplate()" />
               } @else {
                 <tr>
-                  <td [attr.colspan]="100" class="text-center py-16 text-(--f-text-muted-color)">
+                  <td
+                    [attr.colspan]="100"
+                    class="text-center py-16 text-(--f-text-muted-color)"
+                  >
                     <div class="flex flex-col items-center gap-3">
-                      <div class="w-12 h-12 rounded-full bg-(--f-content-hover-background) flex items-center justify-center">
-                        <ui-icon name="inbox" class="text-xl text-(--f-text-muted-color)"></ui-icon>
+                      <div
+                        class="w-12 h-12 rounded-full bg-(--f-content-hover-background) flex items-center justify-center"
+                      >
+                        <ui-icon
+                          name="inbox"
+                          class="text-xl text-(--f-text-muted-color)"
+                        ></ui-icon>
                       </div>
-                      <p class="text-sm font-medium text-(--f-text-muted-color)">No records found</p>
+                      <p
+                        class="text-sm font-medium text-(--f-text-muted-color)"
+                      >
+                        No records found
+                      </p>
                     </div>
                   </td>
                 </tr>
@@ -6784,7 +7050,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
         </table>
       }
     </div>
-  `, host: { '[class]': 'styleClass()' }, styles: [":host ::ng-deep table thead tr th{padding:.625rem 1rem;font-size:.68rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--f-text-muted-color);white-space:nowrap;background:transparent}:host ::ng-deep table tbody tr td{padding:.8125rem 1rem;color:var(--f-text-color);font-size:.875rem;vertical-align:middle}:host ::ng-deep table tbody tr:hover td{background-color:var(--f-content-hover-background)}\n"] }]
+  `, host: { '[class]': 'styleClass()' }, styles: [":host ::ng-deep table thead tr th{padding:.8125rem 1rem;font-size:.875rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--f-text-muted-color);white-space:nowrap;background:transparent}:host ::ng-deep table tbody tr td{padding:.8125rem 1rem;color:var(--f-text-color);font-size:.875rem;vertical-align:middle}:host ::ng-deep table tbody tr:hover td{background-color:var(--f-content-hover-background)}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], tableStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableStyle", required: false }] }], scrollable: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollable", required: false }] }], headerTemplate: [{ type: i0.ContentChild, args: ['header', { isSignal: true }] }], bodyTemplate: [{ type: i0.ContentChild, args: ['body', { isSignal: true }] }], emptyTemplate: [{ type: i0.ContentChild, args: ['emptymessage', { isSignal: true }] }] } });
 let _uidCounter$1 = 0;
@@ -7207,22 +7473,25 @@ class BadgeComponent {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: BadgeComponent, isStandalone: true, selector: "f-badge", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <span [class]="classes()">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: BadgeComponent, isStandalone: true, selector: "f-badge", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    <p [class]="classes()">
       {{ value() }}
       <ng-content></ng-content>
-    </span>
+    </p>
   `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BadgeComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'f-badge',
+                    host: {
+                        class: 'block',
+                    },
                     template: `
-    <span [class]="classes()">
+    <p [class]="classes()">
       {{ value() }}
       <ng-content></ng-content>
-    </span>
+    </p>
   `,
                 }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
@@ -7236,9 +7505,14 @@ class OverlayBadgeComponent {
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: OverlayBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: OverlayBadgeComponent, isStandalone: true, selector: "f-overlaybadge", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <div class="relative inline-flex">
+    <div class="relative flex items-center justify-center">
       <ng-content></ng-content>
-      <f-badge [value]="value()" [severity]="severity()" [size]="size()" class="absolute -top-1 -right-1"></f-badge>
+      <f-badge
+        [value]="value()"
+        [severity]="severity()"
+        [size]="size()"
+        class="absolute -top-2 -right-2"
+      ></f-badge>
     </div>
   `, isInline: true, dependencies: [{ kind: "component", type: BadgeComponent, selector: "f-badge", inputs: ["value", "severity", "size"] }] });
 }
@@ -7248,9 +7522,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                     selector: 'f-overlaybadge',
                     imports: [BadgeComponent],
                     template: `
-    <div class="relative inline-flex">
+    <div class="relative flex items-center justify-center">
       <ng-content></ng-content>
-      <f-badge [value]="value()" [severity]="severity()" [size]="size()" class="absolute -top-1 -right-1"></f-badge>
+      <f-badge
+        [value]="value()"
+        [severity]="severity()"
+        [size]="size()"
+        class="absolute -top-2 -right-2"
+      ></f-badge>
     </div>
   `,
                 }]
@@ -7262,7 +7541,9 @@ class FieldsetComponent {
     toggleable = input(false, { ...(ngDevMode ? { debugName: "toggleable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     collapsed = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
-    toggleCollapsed() { this.collapsed.update(v => !v); }
+    toggleCollapsed() {
+        this.collapsed.update((v) => !v);
+    }
     onSpace(event) {
         if (!this.toggleable())
             return;
@@ -7270,8 +7551,10 @@ class FieldsetComponent {
         this.toggleCollapsed();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FieldsetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: FieldsetComponent, isStandalone: true, selector: "f-fieldset", inputs: { legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: false, transformFunction: null }, toggleable: { classPropertyName: "toggleable", publicName: "toggleable", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, ngImport: i0, template: `
-    <fieldset class="border border-(--f-content-border-color) rounded-lg p-4 pt-0">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: FieldsetComponent, isStandalone: true, selector: "f-fieldset", inputs: { legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: false, transformFunction: null }, toggleable: { classPropertyName: "toggleable", publicName: "toggleable", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    <fieldset
+      class="border border-(--f-content-border-color) rounded-lg p-4 pt-0"
+    >
       <legend
         class="px-2 text-sm font-semibold text-(--f-text-color) flex items-center gap-2 rounded focus-visible:outline-none focus-visible:ring-focus"
         [class.cursor-pointer]="toggleable()"
@@ -7283,7 +7566,10 @@ class FieldsetComponent {
         (keydown.space)="onSpace($event)"
       >
         @if (toggleable()) {
-          <ui-icon [name]="collapsed() ? 'chevron-right' : 'chevron-down'" class="text-xs"></ui-icon>
+          <ui-icon
+            [name]="collapsed() ? 'chevron-right' : 'chevron-down'"
+            class="text-xs"
+          ></ui-icon>
         }
         {{ legend() }}
       </legend>
@@ -7301,7 +7587,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                     selector: 'f-fieldset',
                     imports: [UiIconComponent],
                     template: `
-    <fieldset class="border border-(--f-content-border-color) rounded-lg p-4 pt-0">
+    <fieldset
+      class="border border-(--f-content-border-color) rounded-lg p-4 pt-0"
+    >
       <legend
         class="px-2 text-sm font-semibold text-(--f-text-color) flex items-center gap-2 rounded focus-visible:outline-none focus-visible:ring-focus"
         [class.cursor-pointer]="toggleable()"
@@ -7313,7 +7601,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
         (keydown.space)="onSpace($event)"
       >
         @if (toggleable()) {
-          <ui-icon [name]="collapsed() ? 'chevron-right' : 'chevron-down'" class="text-xs"></ui-icon>
+          <ui-icon
+            [name]="collapsed() ? 'chevron-right' : 'chevron-down'"
+            class="text-xs"
+          ></ui-icon>
         }
         {{ legend() }}
       </legend>
@@ -7324,6 +7615,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
       }
     </fieldset>
   `,
+                    host: {
+                        class: 'block',
+                    },
                 }]
         }], propDecorators: { legend: [{ type: i0.Input, args: [{ isSignal: true, alias: "legend", required: false }] }], toggleable: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleable", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }] } });
@@ -7612,12 +7906,10 @@ class MenuComponent {
     visible = this._visible.asReadonly();
     _openedAt = 0;
     toggle(event) {
-        event?.stopPropagation();
         this._openedAt = Date.now();
         this._visible.update(v => !v);
     }
     show(event) {
-        event?.stopPropagation();
         this._openedAt = Date.now();
         this._visible.set(true);
     }
@@ -9908,9 +10200,15 @@ class CascadeSelectComponent {
         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();
         const stateClass = this.open()
-            ? (showInvalid ? 'border-red-400' : 'border-primary')
-            : (showInvalid ? 'border-red-400' : 'border-(--f-form-field-border-color) hover:border-(--f-form-field-hover-border-color)');
-        const disabledClass = this.disabled() ? 'opacity-60 cursor-not-allowed' : 'cursor-pointer';
+            ? showInvalid
+                ? 'border-red-400'
+                : 'border-primary'
+            : showInvalid
+                ? 'border-red-400'
+                : 'border-(--f-form-field-border-color) hover:border-(--f-form-field-hover-border-color)';
+        const disabledClass = this.disabled()
+            ? 'opacity-60 cursor-not-allowed'
+            : 'cursor-pointer';
         return `${base} ${stateClass} ${disabledClass}`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "triggerClass" }] : /* istanbul ignore next */ []));
@@ -9924,16 +10222,22 @@ class CascadeSelectComponent {
         return cols;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "levels" }] : /* istanbul ignore next */ []));
-    getLabel(opt) { return String(opt[this.optionLabel()] ?? ''); }
-    getValue(opt) { return opt[this.optionValue()]; }
-    getChildren(opt) { return opt[this.optionChildren()] ?? []; }
+    getLabel(opt) {
+        return String(opt[this.optionLabel()] ?? '');
+    }
+    getValue(opt) {
+        return opt[this.optionValue()];
+    }
+    getChildren(opt) {
+        return opt[this.optionChildren()] ?? [];
+    }
     isActive(opt, level) {
         return this.activePath()[level] === opt;
     }
     toggleOpen() {
         if (this.disabled())
             return;
-        this._open.update(v => !v);
+        this._open.update((v) => !v);
         if (!this.open())
             this._onTouched();
     }
@@ -9944,7 +10248,7 @@ class CascadeSelectComponent {
         const children = this.getChildren(opt);
         if (!children.length) {
             this._selectedValue = this.getValue(opt);
-            this._selectedPath.set(path.map(p => this.getLabel(p)));
+            this._selectedPath.set(path.map((p) => this.getLabel(p)));
             this._onChange(this._selectedValue);
             this._open.set(false);
             this._onTouched();
@@ -9963,7 +10267,7 @@ class CascadeSelectComponent {
             return;
         }
         const path = this.findPath(this.options(), v);
-        this._selectedPath.set(path.map(p => this.getLabel(p)));
+        this._selectedPath.set(path.map((p) => this.getLabel(p)));
     }
     findPath(options, value, trail = []) {
         for (const opt of options) {
@@ -9976,33 +10280,72 @@ class CascadeSelectComponent {
         }
         return [];
     }
-    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: 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 }, 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 } }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CascadeSelectComponent), multi: true }], ngImport: i0, template: `
+    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 }, 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 } }, host: { listeners: { "document:click": "onDocumentClick($event)" }, classAttribute: "block" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => CascadeSelectComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: `
     <div class="relative w-full">
-      <button type="button" [class]="triggerClass()" [disabled]="disabled()" (click)="toggleOpen()">
-        <span class="truncate text-sm" [class.text-(--f-form-field-placeholder-color)]="!selectedPath().length">
-          {{ selectedPath().length ? selectedPath().join(' / ') : placeholder() }}
+      <button
+        type="button"
+        [class]="triggerClass()"
+        [disabled]="disabled()"
+        (click)="toggleOpen()"
+      >
+        <span
+          class="truncate text-sm"
+          [class.text-(--f-form-field-placeholder-color)]="
+            !selectedPath().length
+          "
+        >
+          {{
+            selectedPath().length ? selectedPath().join(' / ') : placeholder()
+          }}
         </span>
-        <ui-icon name="chevron-down" class="ml-auto text-xs text-(--f-form-field-placeholder-color) shrink-0 transition-transform duration-[var(--f-transition-duration)]" [class.rotate-180]="open()"></ui-icon>
+        <ui-icon
+          name="chevron-down"
+          class="ml-auto text-xs text-(--f-form-field-placeholder-color) shrink-0 transition-transform duration-[var(--f-transition-duration)]"
+          [class.rotate-180]="open()"
+        ></ui-icon>
       </button>
       @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">
+        <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"
+        >
           @for (level of levels(); track $index) {
-            <ul class="max-h-64 overflow-auto py-1 min-w-[10rem] border-r border-(--f-content-border-color) last:border-r-0">
+            <ul
+              class="max-h-64 overflow-auto py-1 min-w-[10rem] border-r border-(--f-content-border-color) last:border-r-0"
+            >
               @for (opt of level; track getLabel(opt)) {
                 <li>
                   <button
                     type="button"
                     class="w-full flex items-center justify-between gap-2 px-3 py-2 text-sm text-left transition-colors cursor-pointer"
-                    [class]="isActive(opt, $index) ? 'bg-(--f-highlight-background) text-(--f-highlight-color)' : 'text-(--f-text-color) hover:bg-(--f-content-hover-background)'"
+                    [class]="
+                      isActive(opt, $index)
+                        ? 'bg-(--f-highlight-background) text-(--f-highlight-color)'
+                        : 'text-(--f-text-color) hover:bg-(--f-content-hover-background)'
+                    "
                     (click)="onOptionClick(opt, $index)"
                   >
                     <span class="truncate">{{ getLabel(opt) }}</span>
-                    @if (getChildren(opt).length) { <ui-icon name="chevron-right" class="text-[10px] text-(--f-text-muted-color) shrink-0"></ui-icon> }
+                    @if (getChildren(opt).length) {
+                      <ui-icon
+                        name="chevron-right"
+                        class="text-[10px] text-(--f-text-muted-color) shrink-0"
+                      ></ui-icon>
+                    }
                   </button>
                 </li>
               }
@@ -10018,31 +10361,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
             args: [{
                     selector: 'f-cascadeselect',
                     imports: [UiIconComponent],
-                    providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CascadeSelectComponent), multi: true }],
-                    host: { '(document:click)': 'onDocumentClick($event)' },
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => CascadeSelectComponent),
+                            multi: true,
+                        },
+                    ],
+                    host: { class: 'block', '(document:click)': 'onDocumentClick($event)' },
                     template: `
     <div class="relative w-full">
-      <button type="button" [class]="triggerClass()" [disabled]="disabled()" (click)="toggleOpen()">
-        <span class="truncate text-sm" [class.text-(--f-form-field-placeholder-color)]="!selectedPath().length">
-          {{ selectedPath().length ? selectedPath().join(' / ') : placeholder() }}
+      <button
+        type="button"
+        [class]="triggerClass()"
+        [disabled]="disabled()"
+        (click)="toggleOpen()"
+      >
+        <span
+          class="truncate text-sm"
+          [class.text-(--f-form-field-placeholder-color)]="
+            !selectedPath().length
+          "
+        >
+          {{
+            selectedPath().length ? selectedPath().join(' / ') : placeholder()
+          }}
         </span>
-        <ui-icon name="chevron-down" class="ml-auto text-xs text-(--f-form-field-placeholder-color) shrink-0 transition-transform duration-[var(--f-transition-duration)]" [class.rotate-180]="open()"></ui-icon>
+        <ui-icon
+          name="chevron-down"
+          class="ml-auto text-xs text-(--f-form-field-placeholder-color) shrink-0 transition-transform duration-[var(--f-transition-duration)]"
+          [class.rotate-180]="open()"
+        ></ui-icon>
       </button>
       @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">
+        <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"
+        >
           @for (level of levels(); track $index) {
-            <ul class="max-h-64 overflow-auto py-1 min-w-[10rem] border-r border-(--f-content-border-color) last:border-r-0">
+            <ul
+              class="max-h-64 overflow-auto py-1 min-w-[10rem] border-r border-(--f-content-border-color) last:border-r-0"
+            >
               @for (opt of level; track getLabel(opt)) {
                 <li>
                   <button
                     type="button"
                     class="w-full flex items-center justify-between gap-2 px-3 py-2 text-sm text-left transition-colors cursor-pointer"
-                    [class]="isActive(opt, $index) ? 'bg-(--f-highlight-background) text-(--f-highlight-color)' : 'text-(--f-text-color) hover:bg-(--f-content-hover-background)'"
+                    [class]="
+                      isActive(opt, $index)
+                        ? 'bg-(--f-highlight-background) text-(--f-highlight-color)'
+                        : 'text-(--f-text-color) hover:bg-(--f-content-hover-background)'
+                    "
                     (click)="onOptionClick(opt, $index)"
                   >
                     <span class="truncate">{{ getLabel(opt) }}</span>
-                    @if (getChildren(opt).length) { <ui-icon name="chevron-right" class="text-[10px] text-(--f-text-muted-color) shrink-0"></ui-icon> }
+                    @if (getChildren(opt).length) {
+                      <ui-icon
+                        name="chevron-right"
+                        class="text-[10px] text-(--f-text-muted-color) shrink-0"
+                      ></ui-icon>
+                    }
                   </button>
                 </li>
               }