@area8975/ui 0.2.2-dev.35 → 0.2.2-dev.37

package/fesm2022/area8975-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from "@angular/core";
-import { ChangeDetectorRef, Component, DestroyRef, Directive, ElementRef, Injectable, InjectionToken, Injector, ViewEncapsulation, afterNextRender, booleanAttribute, computed, contentChild, contentChildren, effect, inject, input, isDevMode, linkedSignal, makeEnvironmentProviders, model, numberAttribute, output, provideAppInitializer, signal, untracked, viewChild } from "@angular/core";
+import { ChangeDetectorRef, Component, DestroyRef, Directive, ElementRef, Injectable, InjectionToken, Injector, TemplateRef, ViewEncapsulation, afterNextRender, booleanAttribute, computed, contentChild, contentChildren, effect, inject, input, isDevMode, linkedSignal, makeEnvironmentProviders, model, numberAttribute, output, provideAppInitializer, signal, untracked, viewChild } from "@angular/core";
 import { DOCUMENT, NgTemplateOutlet } from "@angular/common";
 import { NgIcon, provideIcons } from "@ng-icons/core";
 import { heroArrowUp, heroArrowUpTray, heroBars2, heroBars3, heroCalendar, heroCalendarDateRange, heroCheck, heroChevronDoubleLeft, heroChevronDown, heroChevronLeft, heroChevronRight, heroClock, heroDocument, heroEye, heroEyeSlash, heroFunnel, heroMagnifyingGlass, heroMinus, heroPlus, heroQuestionMarkCircle, heroViewColumns, heroXMark } from "@ng-icons/heroicons/outline";
@@ -5049,7 +5049,7 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-let nextId$3 = 0;
+let nextId$4 = 0;
 var UiSelectComponent = class UiSelectComponent {
 	isOpen = signal(false, ...ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []);
 	placement = input("bottom-start", ...ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []);
@@ -5100,7 +5100,7 @@ var UiSelectComponent = class UiSelectComponent {
 	optionTemplate = contentChild("option", ...ngDevMode ? [{ debugName: "optionTemplate" }] : /* istanbul ignore next */ []);
 	triggerTemplate = contentChild("trigger", ...ngDevMode ? [{ debugName: "triggerTemplate" }] : /* istanbul ignore next */ []);
 	activeIndex = signal(0, ...ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []);
-	listId = `ui-select-${nextId$3++}`;
+	listId = `ui-select-${nextId$4++}`;
 	hasSelection = computed(() => this.multiple() ? this.selectedItems().length > 0 : this.selectedItem() !== null, ...ngDevMode ? [{ debugName: "hasSelection" }] : /* istanbul ignore next */ []);
 	triggerLabel = computed(() => {
 		const display = this.displayWith();
@@ -7402,6 +7402,277 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}]
 });
+var UiDisclosurePanelDirective = class UiDisclosurePanelDirective {
+	template = inject(TemplateRef);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiDisclosurePanelDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		type: UiDisclosurePanelDirective,
+		isStandalone: true,
+		selector: "ng-template[uiDisclosurePanel]",
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiDisclosurePanelDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "ng-template[uiDisclosurePanel]" }]
+	}]
+});
+let nextId$3 = 0;
+var UiDisclosureComponent = class UiDisclosureComponent {
+	expanded = model(false, ...ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []);
+	panelId = input("", ...ngDevMode ? [{ debugName: "panelId" }] : /* istanbul ignore next */ []);
+	generatedId = `ui-disclosure-${nextId$3++}`;
+	regionId = computed(() => this.panelId() || this.generatedId, ...ngDevMode ? [{ debugName: "regionId" }] : /* istanbul ignore next */ []);
+	panel = contentChild(UiDisclosurePanelDirective, ...ngDevMode ? [{ debugName: "panel" }] : /* istanbul ignore next */ []);
+	toggle = () => this.expanded.update((value) => !value);
+	open = () => this.expanded.set(true);
+	close = () => this.expanded.set(false);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiDisclosureComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: UiDisclosureComponent,
+		isStandalone: true,
+		selector: "ui-disclosure",
+		inputs: {
+			expanded: {
+				classPropertyName: "expanded",
+				publicName: "expanded",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			panelId: {
+				classPropertyName: "panelId",
+				publicName: "panelId",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { expanded: "expandedChange" },
+		queries: [{
+			propertyName: "panel",
+			first: true,
+			predicate: UiDisclosurePanelDirective,
+			descendants: true,
+			isSignal: true
+		}],
+		exportAs: ["uiDisclosure"],
+		ngImport: i0,
+		template: "<ng-content />\n\n<div class=\"ui-disclosure-panel\" [id]=\"regionId()\" [hidden]=\"!expanded()\">\n    @if (expanded()) {\n        <ng-container [ngTemplateOutlet]=\"panel()?.template ?? null\" />\n    }\n</div>\n",
+		styles: [":host{position:relative;display:block}.ui-disclosure-panel{position:relative}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
+		dependencies: [{
+			kind: "directive",
+			type: NgTemplateOutlet,
+			selector: "[ngTemplateOutlet]",
+			inputs: [
+				"ngTemplateOutletContext",
+				"ngTemplateOutlet",
+				"ngTemplateOutletInjector"
+			]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiDisclosureComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-disclosure",
+			exportAs: "uiDisclosure",
+			imports: [NgTemplateOutlet],
+			template: "<ng-content />\n\n<div class=\"ui-disclosure-panel\" [id]=\"regionId()\" [hidden]=\"!expanded()\">\n    @if (expanded()) {\n        <ng-container [ngTemplateOutlet]=\"panel()?.template ?? null\" />\n    }\n</div>\n",
+			styles: [":host{position:relative;display:block}.ui-disclosure-panel{position:relative}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
+		}]
+	}],
+	propDecorators: {
+		expanded: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "expanded",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["expandedChange"]
+		}],
+		panelId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "panelId",
+				required: false
+			}]
+		}],
+		panel: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => UiDisclosurePanelDirective), { isSignal: true }]
+		}]
+	}
+});
+const DisclosureTriggerAppearances = ["section", "row"];
+var UiDisclosureChevronComponent = class UiDisclosureChevronComponent {
+	disclosure = inject(UiDisclosureComponent);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiDisclosureChevronComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		type: UiDisclosureChevronComponent,
+		isStandalone: true,
+		selector: "ui-disclosure-chevron",
+		host: { attributes: { "aria-hidden": "true" } },
+		providers: [provideIcons({ heroChevronDown })],
+		ngImport: i0,
+		template: `
+        <ng-icon
+            name="heroChevronDown"
+            class="ui-disclosure-chevron"
+            [class.ui-disclosure-chevron--expanded]="disclosure.expanded()"
+        />
+    `,
+		isInline: true,
+		styles: ["@layer properties;:host{display:inline-flex;flex-shrink:0}.ui-disclosure-chevron{width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4);color:var(--muted-foreground);transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s}@media(prefers-reduced-motion:reduce){.ui-disclosure-chevron{transition-property:none}}.ui-disclosure-chevron--expanded{rotate:180deg}@property --tw-duration{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-duration: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
+		dependencies: [{
+			kind: "component",
+			type: NgIcon,
+			selector: "ng-icon",
+			inputs: [
+				"name",
+				"svg",
+				"size",
+				"strokeWidth",
+				"color"
+			]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiDisclosureChevronComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-disclosure-chevron",
+			template: `
+        <ng-icon
+            name="heroChevronDown"
+            class="ui-disclosure-chevron"
+            [class.ui-disclosure-chevron--expanded]="disclosure.expanded()"
+        />
+    `,
+			imports: [NgIcon],
+			host: { "aria-hidden": "true" },
+			providers: [provideIcons({ heroChevronDown })],
+			styles: ["@layer properties;:host{display:inline-flex;flex-shrink:0}.ui-disclosure-chevron{width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4);color:var(--muted-foreground);transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s}@media(prefers-reduced-motion:reduce){.ui-disclosure-chevron{transition-property:none}}.ui-disclosure-chevron--expanded{rotate:180deg}@property --tw-duration{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-duration: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
+		}]
+	}]
+});
+var UiDisclosureTriggerComponent = class UiDisclosureTriggerComponent {
+	disclosure = inject(UiDisclosureComponent);
+	appearance = input("section", ...ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []);
+	ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiDisclosureTriggerComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: UiDisclosureTriggerComponent,
+		isStandalone: true,
+		selector: "ui-disclosure-trigger",
+		inputs: {
+			appearance: {
+				classPropertyName: "appearance",
+				publicName: "appearance",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: "<button\n    type=\"button\"\n    [class]=\"'ui-disclosure-trigger ui-disclosure-trigger--' + appearance()\"\n    [attr.aria-expanded]=\"disclosure.expanded()\"\n    [attr.aria-controls]=\"disclosure.regionId()\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    (click)=\"disclosure.toggle()\"\n>\n    <ng-content />\n</button>\n",
+		styles: ["@layer properties;:host{display:block;min-width:0px}.ui-disclosure-trigger{cursor:pointer;text-align:start}.ui-disclosure-trigger:focus{--tw-outline-style: none;outline-style:none}.ui-disclosure-trigger--section{display:flex;width:100%;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-lg, .5rem);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--foreground);transition-property:box-shadow;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s}.ui-disclosure-trigger--section:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-disclosure-trigger--section:focus-visible{--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-disclosure-trigger--row{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-disclosure-trigger--row:after{content:var(--tw-content);position:absolute}.ui-disclosure-trigger--row:after{content:var(--tw-content);inset:0}.ui-disclosure-trigger--row:after{content:var(--tw-content);border-radius:var(--radius-lg, .5rem)}.ui-disclosure-trigger--row:focus-visible:after{content:var(--tw-content);--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-disclosure-trigger--row:focus-visible:after{content:var(--tw-content);--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-content{syntax: \"*\"; initial-value: \"\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-duration: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-content: \"\"}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiDisclosureTriggerComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-disclosure-trigger",
+			template: "<button\n    type=\"button\"\n    [class]=\"'ui-disclosure-trigger ui-disclosure-trigger--' + appearance()\"\n    [attr.aria-expanded]=\"disclosure.expanded()\"\n    [attr.aria-controls]=\"disclosure.regionId()\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    (click)=\"disclosure.toggle()\"\n>\n    <ng-content />\n</button>\n",
+			styles: ["@layer properties;:host{display:block;min-width:0px}.ui-disclosure-trigger{cursor:pointer;text-align:start}.ui-disclosure-trigger:focus{--tw-outline-style: none;outline-style:none}.ui-disclosure-trigger--section{display:flex;width:100%;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-lg, .5rem);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--foreground);transition-property:box-shadow;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s}.ui-disclosure-trigger--section:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-disclosure-trigger--section:focus-visible{--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-disclosure-trigger--row{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-disclosure-trigger--row:after{content:var(--tw-content);position:absolute}.ui-disclosure-trigger--row:after{content:var(--tw-content);inset:0}.ui-disclosure-trigger--row:after{content:var(--tw-content);border-radius:var(--radius-lg, .5rem)}.ui-disclosure-trigger--row:focus-visible:after{content:var(--tw-content);--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-disclosure-trigger--row:focus-visible:after{content:var(--tw-content);--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-content{syntax: \"*\"; initial-value: \"\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-duration: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-content: \"\"}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
+		}]
+	}],
+	propDecorators: {
+		appearance: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "appearance",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}]
+	}
+});
 var UiModalCloseButtonComponent = class UiModalCloseButtonComponent {
 	isOpen = model.required(...ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []);
 	static ɵfac = i0.ɵɵngDeclareFactory({
@@ -9963,7 +10234,7 @@ var UiTableComponent = class UiTableComponent {
 			heroBars2
 		})],
 		ngImport: i0,
-		template: "@if (searchable() || hasFilterableColumns() || toggleableColumns()) {\n    <div class=\"ui-table-toolbar\">\n        @if (searchable()) {\n            <ui-input\n                [value]=\"query()\"\n                (valueChange)=\"onQueryChange($event)\"\n                [placeholder]=\"searchPlaceholder()\"\n                class=\"max-w-xs\"\n            >\n                <ng-template #leading>\n                    <ng-icon\n                        name=\"heroMagnifyingGlass\"\n                        class=\"ms-3 size-4 text-muted-foreground-1\"\n                    />\n                </ng-template>\n            </ui-input>\n        }\n\n        @if (hasFilterableColumns()) {\n            <ui-dropdown\n                [isOpen]=\"filterMenuOpen\"\n                placement=\"bottom-start\"\n                closeBehaviour=\"whenClickOutside\"\n            >\n                <ui-button\n                    size=\"sm\"\n                    appearance=\"white\"\n                    intent=\"secondary\"\n                    (click)=\"filterMenuOpen.update(open => !open)\"\n                >\n                    <ng-icon name=\"heroFunnel\" class=\"size-4\" />\n                    Filters\n                    @if (activeFilterCount()) {\n                        <span class=\"ui-table-filter-count ui-text-caption\">\n                            {{ activeFilterCount() }}\n                        </span>\n                    }\n                </ui-button>\n\n                @if (filterMenuOpen()) {\n                    <div uiDropdownContent class=\"py-2\">\n                        <div class=\"ui-table-filter-menu\">\n                            @for (column of filterableColumns(); track column.id) {\n                                <div class=\"flex flex-col gap-1\">\n                                    <span\n                                        class=\"text-muted-foreground-1 ui-text-caption\"\n                                    >\n                                        {{ column.header }}\n                                    </span>\n\n                                    @if (column.filterOptions) {\n                                        <ui-select\n                                            [dataSource]=\"filterDataSource(column)\"\n                                            [selectedItem]=\"selectedFilterOption(column)\"\n                                            (selectionChange)=\"onFilterSelect(column.id, $event)\"\n                                            [displayWith]=\"column.sensitive ? sensitiveFilterOptionLabel : filterOptionLabel\"\n                                            [clearable]=\"true\"\n                                            clearLabel=\"All\"\n                                            placeholder=\"All\"\n                                        />\n                                    } @else {\n                                        <ui-input\n                                            [value]=\"filterValue(column.id)\"\n                                            (valueChange)=\"onFilterInput(column.id, $event)\"\n                                            placeholder=\"Filter...\"\n                                            [ariaLabel]=\"'Filter ' + column.header\"\n                                        />\n                                    }\n                                </div>\n                            }\n\n                            @if (activeFilterCount()) {\n                                <ui-button\n                                    appearance=\"link\"\n                                    intent=\"secondary\"\n                                    class=\"text-end\"\n                                    classes=\"self-end p-0! text-sm\"\n                                    (click)=\"clearFilters()\"\n                                >\n                                    Clear filters\n                                </ui-button>\n                            }\n                        </div>\n                    </div>\n                }\n            </ui-dropdown>\n        }\n\n        @if (toggleableColumns()) {\n            <ui-dropdown\n                [isOpen]=\"columnMenuOpen\"\n                placement=\"bottom-end\"\n                closeBehaviour=\"whenClickOutside\"\n                class=\"ms-auto\"\n            >\n                <ui-button\n                    size=\"sm\"\n                    appearance=\"white\"\n                    intent=\"secondary\"\n                    (click)=\"columnMenuOpen.update(open => !open)\"\n                >\n                    <ng-icon name=\"heroViewColumns\" class=\"size-4\" />\n                    Columns\n                </ui-button>\n\n                @if (columnMenuOpen()) {\n                    <div uiDropdownContent class=\"py-2\">\n                        <div class=\"bg-layer shadow-xs py-1 border border-dropdown-divider rounded-lg min-w-40\">\n                            @for (column of hideableColumns(); track column.id) {\n                                <label\n                                    class=\"flex items-center gap-2 hover:bg-dropdown-item-hover px-3 py-2 ui-text-body-alt cursor-pointer\"\n                                >\n                                    <ui-checkbox\n                                        [value]=\"isColumnVisible(column)\"\n                                        (valueChange)=\"toggleColumnVisibility(column)\"\n                                    />\n                                    {{ column.header }}\n                                </label>\n                            }\n                        </div>\n                    </div>\n                }\n            </ui-dropdown>\n        }\n    </div>\n}\n\n<div class=\"ui-table-scroll\">\n    <table [class]=\"generatedClasses()\" [style.width.px]=\"fixedWidth()\">\n        <colgroup>\n            @if (selectable()) {\n                <col [style.width.px]=\"44\" />\n            }\n\n            @for (column of renderColumns(); track column.id) {\n                <col [style.width.px]=\"columnWidth(column)\" />\n            }\n\n            @if (hasActions()) {\n                <col [style.width.px]=\"actionsColumnWidth()\" />\n            }\n        </colgroup>\n\n        <thead [class.ui-table-sticky]=\"stickyHeader()\">\n            <tr>\n                @if (selectable()) {\n                    <th class=\"text-center! ui-table-select-cell\">\n                        <ui-checkbox\n                            [value]=\"allSelected()\"\n                            [indeterminate]=\"someSelected()\"\n                            (valueChange)=\"toggleSelectAll()\"\n                        />\n                    </th>\n                }\n\n                @for (column of renderColumns(); track column.id) {\n                    <th\n                        scope=\"col\"\n                        [attr.data-column-id]=\"column.id\"\n                        [class.ui-table-pinned]=\"isPinned(column)\"\n                        [attr.data-pin]=\"column.pin || null\"\n                        [class.ui-table-column-dragging]=\"draggedColumnId() === column.id\"\n                        [class.ui-table-column-drag-over]=\"dragOverColumnId() === column.id\"\n                        [style.left.px]=\"leftOffset(column)\"\n                        [style.right.px]=\"rightOffset(column)\"\n                    >\n                        <div class=\"ui-table-th-content\">\n                            @if (reorderableColumns() && column.reorderable !== false) {\n                                <ng-icon\n                                    name=\"heroBars2\"\n                                    class=\"ui-table-drag-handle\"\n                                    (pointerdown)=\"onColumnDragStart($event, column)\"\n                                />\n                            }\n\n                            @if (column.sortable) {\n                                <ui-button\n                                    appearance=\"none\"\n                                    classes=\"flex items-center gap-1 p-0! border-transparent! rounded-none! cursor-pointer hocus:text-foreground\"\n                                    (click)=\"toggleSort(column)\"\n                                >\n                                    <span\n                                        class=\"font-medium text-muted-foreground-1 ui-text-caption uppercase\"\n                                    >\n                                        {{ column.header }}\n                                    </span>\n                                    <svg\n                                        viewBox=\"0 0 8 13\"\n                                        aria-hidden=\"true\"\n                                        class=\"ui-table-sort\"\n                                        [attr.data-direction]=\"sortDirection(column)\"\n                                    >\n                                        <path class=\"ui-table-sort-asc\" d=\"M4 0 8 5H0z\" />\n                                        <path class=\"ui-table-sort-desc\" d=\"M4 13 0 8h8z\" />\n                                    </svg>\n                                </ui-button>\n                            } @else {\n                                <span\n                                    class=\"font-medium text-muted-foreground-1 ui-text-caption ui-text-caption uppercase\"\n                                >\n                                    {{ column.header }}\n                                </span>\n                            }\n                        </div>\n\n                        @if (column.resizable) {\n                            <span\n                                class=\"ui-table-resize-handle\"\n                                (pointerdown)=\"startResize($event, column)\"\n                            ></span>\n                        }\n                    </th>\n                }\n\n                @if (hasActions()) {\n                    <th class=\"ui-table-actions-cell\"></th>\n                }\n            </tr>\n        </thead>\n\n        <tbody class=\"ui-text-body-alt\">\n            @if (loading()) {\n                <tr>\n                    <td\n                        [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n                        class=\"ui-table-status\"\n                    >\n                        <ui-loading type=\"loading-dots\" />\n                    </td>\n                </tr>\n            } @else if (error()) {\n                <tr>\n                    <td\n                        [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n                        class=\"ui-table-status ui-table-status-error\"\n                    >\n                        {{ errorMessage() }}\n                        <ui-button\n                            appearance=\"link\"\n                            intent=\"danger\"\n                            classes=\"ms-1 p-0! text-sm underline\"\n                            (click)=\"reload()\"\n                        >\n                            Retry\n                        </ui-button>\n                    </td>\n                </tr>\n            } @else if (isEmpty()) {\n                <tr>\n                    <td\n                        [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n                        class=\"ui-table-status\"\n                    >\n                        {{ emptyMessage() }}\n                    </td>\n                </tr>\n            } @else {\n                @for (row of rows(); track rowId()(row, $index); let i = $index) {\n                    <tr\n                        [class.ui-table-row-selected]=\"isRowSelected(row, i)\"\n                        [class.ui-table-row-dragging]=\"draggedRowIndex() === i\"\n                        [draggable]=\"canReorderRows()\"\n                        (dragstart)=\"onRowDragStart($event, i)\"\n                        (dragover)=\"onRowDragOver($event)\"\n                        (drop)=\"onRowDrop($event, i)\"\n                    >\n                        @if (selectable()) {\n                            <td class=\"ui-table-select-cell\">\n                                <ui-checkbox\n                                    [value]=\"isRowSelected(row, i)\"\n                                    (valueChange)=\"toggleRow(row, i)\"\n                                />\n                            </td>\n                        }\n\n                        @for (column of renderColumns(); track column.id) {\n                            <td\n                                [class.ui-table-pinned]=\"isPinned(column)\"\n                                [attr.data-pin]=\"column.pin || null\"\n                                [style.left.px]=\"leftOffset(column)\"\n                                [style.right.px]=\"rightOffset(column)\"\n                            >\n                                @if (column.displayType === 'icon') {\n                                    <ng-icon\n                                        [name]=\"cellIconValue(column, row)\"\n                                        class=\"size-4\"\n                                    />\n                                } @else if (column.displayType === 'currency') {\n                                    <ui-money\n                                        [value]=\"moneyCellValue(column, row)\"\n                                        [currency]=\"column.currency ?? uiFormat.currency\"\n                                        placeholder=\"\"\n                                    />\n                                } @else if (column.sensitive) {\n                                    <ui-private [text]=\"formattedCellValue(column, row)\" />\n                                } @else {\n                                    {{ formattedCellValue(column, row) }}\n                                }\n                            </td>\n                        }\n\n                        @if (hasActions()) {\n                            <td class=\"ui-table-actions-cell\">\n                                @for (action of actions(); track action.id) {\n                                    <ui-button\n                                        appearance=\"none\"\n                                        classes=\"p-1.5! border-transparent! rounded-md! text-muted-foreground-1 cursor-pointer hocus:bg-surface hocus:text-foreground disabled:opacity-40! disabled:cursor-not-allowed\"\n                                        [disabled]=\"!!action.disabled?.(row)\"\n                                        [ariaLabel]=\"action.label\"\n                                        [title]=\"action.label\"\n                                        (click)=\"action.onClick(row)\"\n                                    >\n                                        <ng-icon\n                                            [name]=\"action.icon\"\n                                            class=\"size-4\"\n                                        />\n                                    </ui-button>\n                                }\n                            </td>\n                        }\n                    </tr>\n                }\n            }\n        </tbody>\n    </table>\n</div>\n\n@if (dragPreview(); as preview) {\n    <div\n        class=\"ui-table-drag-preview ui-text-body-alt\"\n        [style.left.px]=\"preview.x\"\n        [style.top.px]=\"preview.y\"\n        [style.width.px]=\"preview.width\"\n        [style.height.px]=\"preview.height\"\n    >\n        <ng-icon name=\"heroBars2\" class=\"ui-table-drag-preview-icon\" />\n        <span class=\"truncate\">{{ preview.label }}</span>\n    </div>\n}\n\n@if (paginated()) {\n    <div class=\"ui-table-footer\">\n        <span class=\"text-muted-foreground-1 ui-text-caption\">{{\n                resultsLabel()\n            }}</span>\n\n        <div class=\"ui-table-pagination\">\n            <ui-button\n                size=\"sm\"\n                appearance=\"white\"\n                intent=\"secondary\"\n                [disabled]=\"currentPage() === 0\"\n                (click)=\"goToPage(currentPage() - 1)\"\n            >\n                Prev\n            </ui-button>\n\n            <span class=\"ui-text-body-alt\">Page {{ currentPage() + 1 }} of {{\n                    totalPages()\n                }}</span>\n\n            <ui-button\n                size=\"sm\"\n                appearance=\"white\"\n                intent=\"secondary\"\n                [disabled]=\"currentPage() + 1 >= totalPages()\"\n                (click)=\"goToPage(currentPage() + 1)\"\n            >\n                Next\n            </ui-button>\n        </div>\n    </div>\n}\n",
+		template: "@if (searchable() || hasFilterableColumns() || toggleableColumns()) {\n    <div class=\"ui-table-toolbar\">\n        @if (searchable()) {\n            <ui-input\n                [value]=\"query()\"\n                (valueChange)=\"onQueryChange($event)\"\n                [placeholder]=\"searchPlaceholder()\"\n                class=\"max-w-xs\"\n            >\n                <ng-template #leading>\n                    <ng-icon\n                        name=\"heroMagnifyingGlass\"\n                        class=\"ms-3 size-4 text-muted-foreground-1\"\n                    />\n                </ng-template>\n            </ui-input>\n        }\n\n        @if (hasFilterableColumns()) {\n            <ui-dropdown\n                [isOpen]=\"filterMenuOpen\"\n                placement=\"bottom-start\"\n                closeBehaviour=\"whenClickOutside\"\n            >\n                <ui-button\n                    size=\"sm\"\n                    appearance=\"white\"\n                    intent=\"secondary\"\n                    (click)=\"filterMenuOpen.update(open => !open)\"\n                >\n                    <ng-icon name=\"heroFunnel\" class=\"size-4\" />\n                    Filters\n                    @if (activeFilterCount()) {\n                        <span class=\"ui-table-filter-count ui-text-caption\">\n                            {{ activeFilterCount() }}\n                        </span>\n                    }\n                </ui-button>\n\n                @if (filterMenuOpen()) {\n                    <div uiDropdownContent class=\"py-2\">\n                        <div class=\"ui-table-filter-menu\">\n                            @for (column of filterableColumns(); track column.id) {\n                                <div class=\"flex flex-col gap-1\">\n                                    <span\n                                        class=\"text-muted-foreground-1 ui-text-caption\"\n                                    >\n                                        {{ column.header }}\n                                    </span>\n\n                                    @if (column.filterOptions) {\n                                        <ui-select\n                                            [dataSource]=\"filterDataSource(column)\"\n                                            [selectedItem]=\"selectedFilterOption(column)\"\n                                            (selectionChange)=\"onFilterSelect(column.id, $event)\"\n                                            [displayWith]=\"column.sensitive ? sensitiveFilterOptionLabel : filterOptionLabel\"\n                                            [clearable]=\"true\"\n                                            clearLabel=\"All\"\n                                            placeholder=\"All\"\n                                        />\n                                    } @else {\n                                        <ui-input\n                                            [value]=\"filterValue(column.id)\"\n                                            (valueChange)=\"onFilterInput(column.id, $event)\"\n                                            placeholder=\"Filter...\"\n                                            [ariaLabel]=\"'Filter ' + column.header\"\n                                        />\n                                    }\n                                </div>\n                            }\n\n                            @if (activeFilterCount()) {\n                                <ui-button\n                                    appearance=\"link\"\n                                    intent=\"secondary\"\n                                    class=\"text-end\"\n                                    classes=\"self-end p-0! text-sm\"\n                                    (click)=\"clearFilters()\"\n                                >\n                                    Clear filters\n                                </ui-button>\n                            }\n                        </div>\n                    </div>\n                }\n            </ui-dropdown>\n        }\n\n        @if (toggleableColumns()) {\n            <ui-dropdown\n                [isOpen]=\"columnMenuOpen\"\n                placement=\"bottom-end\"\n                closeBehaviour=\"whenClickOutside\"\n                class=\"ms-auto\"\n            >\n                <ui-button\n                    size=\"sm\"\n                    appearance=\"white\"\n                    intent=\"secondary\"\n                    (click)=\"columnMenuOpen.update(open => !open)\"\n                >\n                    <ng-icon name=\"heroViewColumns\" class=\"size-4\" />\n                    Columns\n                </ui-button>\n\n                @if (columnMenuOpen()) {\n                    <div uiDropdownContent class=\"py-2\">\n                        <div class=\"bg-layer shadow-xs py-1 border border-dropdown-divider rounded-lg min-w-40\">\n                            @for (column of hideableColumns(); track column.id) {\n                                <label\n                                    class=\"flex items-center gap-2 hover:bg-dropdown-item-hover px-3 py-2 ui-text-body-alt cursor-pointer\"\n                                >\n                                    <ui-checkbox\n                                        [value]=\"isColumnVisible(column)\"\n                                        (valueChange)=\"toggleColumnVisibility(column)\"\n                                    />\n                                    {{ column.header }}\n                                </label>\n                            }\n                        </div>\n                    </div>\n                }\n            </ui-dropdown>\n        }\n    </div>\n}\n\n<div class=\"ui-table-scroll\">\n    <table [class]=\"generatedClasses()\" [style.width.px]=\"fixedWidth()\">\n        <colgroup>\n            @if (selectable()) {\n                <col [style.width.px]=\"44\" />\n            }\n\n            @for (column of renderColumns(); track column.id) {\n                <col [style.width.px]=\"columnWidth(column)\" />\n            }\n\n            @if (hasActions()) {\n                <col [style.width.px]=\"actionsColumnWidth()\" />\n            }\n        </colgroup>\n\n        <thead [class.ui-table-sticky]=\"stickyHeader()\">\n            <tr>\n                @if (selectable()) {\n                    <th class=\"text-center! ui-table-select-cell\">\n                        <ui-checkbox\n                            [value]=\"allSelected()\"\n                            [indeterminate]=\"someSelected()\"\n                            (valueChange)=\"toggleSelectAll()\"\n                        />\n                    </th>\n                }\n\n                @for (column of renderColumns(); track column.id) {\n                    <th\n                        scope=\"col\"\n                        [attr.data-column-id]=\"column.id\"\n                        [class.ui-table-pinned]=\"isPinned(column)\"\n                        [attr.data-pin]=\"column.pin || null\"\n                        [class.ui-table-column-dragging]=\"draggedColumnId() === column.id\"\n                        [class.ui-table-column-drag-over]=\"dragOverColumnId() === column.id\"\n                        [style.left.px]=\"leftOffset(column)\"\n                        [style.right.px]=\"rightOffset(column)\"\n                    >\n                        <div class=\"ui-table-th-content\">\n                            @if (reorderableColumns() && column.reorderable !== false) {\n                                <ng-icon\n                                    name=\"heroBars2\"\n                                    class=\"ui-table-drag-handle\"\n                                    (pointerdown)=\"onColumnDragStart($event, column)\"\n                                />\n                            }\n\n                            @if (column.sortable) {\n                                <ui-button\n                                    appearance=\"none\"\n                                    classes=\"flex items-center gap-1 p-0! border-transparent! rounded-none! cursor-pointer hover:text-foreground focus-visible:text-foreground\"\n                                    (click)=\"toggleSort(column)\"\n                                >\n                                    <span\n                                        class=\"font-medium text-muted-foreground-1 ui-text-caption uppercase\"\n                                    >\n                                        {{ column.header }}\n                                    </span>\n                                    <svg\n                                        viewBox=\"0 0 8 13\"\n                                        aria-hidden=\"true\"\n                                        class=\"ui-table-sort\"\n                                        [attr.data-direction]=\"sortDirection(column)\"\n                                    >\n                                        <path class=\"ui-table-sort-asc\" d=\"M4 0 8 5H0z\" />\n                                        <path class=\"ui-table-sort-desc\" d=\"M4 13 0 8h8z\" />\n                                    </svg>\n                                </ui-button>\n                            } @else {\n                                <span\n                                    class=\"font-medium text-muted-foreground-1 ui-text-caption ui-text-caption uppercase\"\n                                >\n                                    {{ column.header }}\n                                </span>\n                            }\n                        </div>\n\n                        @if (column.resizable) {\n                            <span\n                                class=\"ui-table-resize-handle\"\n                                (pointerdown)=\"startResize($event, column)\"\n                            ></span>\n                        }\n                    </th>\n                }\n\n                @if (hasActions()) {\n                    <th class=\"ui-table-actions-cell\"></th>\n                }\n            </tr>\n        </thead>\n\n        <tbody class=\"ui-text-body-alt\">\n            @if (loading()) {\n                <tr>\n                    <td\n                        [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n                        class=\"ui-table-status\"\n                    >\n                        <ui-loading type=\"loading-dots\" />\n                    </td>\n                </tr>\n            } @else if (error()) {\n                <tr>\n                    <td\n                        [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n                        class=\"ui-table-status ui-table-status-error\"\n                    >\n                        {{ errorMessage() }}\n                        <ui-button\n                            appearance=\"link\"\n                            intent=\"danger\"\n                            classes=\"ms-1 p-0! text-sm underline\"\n                            (click)=\"reload()\"\n                        >\n                            Retry\n                        </ui-button>\n                    </td>\n                </tr>\n            } @else if (isEmpty()) {\n                <tr>\n                    <td\n                        [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n                        class=\"ui-table-status\"\n                    >\n                        {{ emptyMessage() }}\n                    </td>\n                </tr>\n            } @else {\n                @for (row of rows(); track rowId()(row, $index); let i = $index) {\n                    <tr\n                        [class.ui-table-row-selected]=\"isRowSelected(row, i)\"\n                        [class.ui-table-row-dragging]=\"draggedRowIndex() === i\"\n                        [draggable]=\"canReorderRows()\"\n                        (dragstart)=\"onRowDragStart($event, i)\"\n                        (dragover)=\"onRowDragOver($event)\"\n                        (drop)=\"onRowDrop($event, i)\"\n                    >\n                        @if (selectable()) {\n                            <td class=\"ui-table-select-cell\">\n                                <ui-checkbox\n                                    [value]=\"isRowSelected(row, i)\"\n                                    (valueChange)=\"toggleRow(row, i)\"\n                                />\n                            </td>\n                        }\n\n                        @for (column of renderColumns(); track column.id) {\n                            <td\n                                [class.ui-table-pinned]=\"isPinned(column)\"\n                                [attr.data-pin]=\"column.pin || null\"\n                                [style.left.px]=\"leftOffset(column)\"\n                                [style.right.px]=\"rightOffset(column)\"\n                            >\n                                @if (column.displayType === 'icon') {\n                                    <ng-icon\n                                        [name]=\"cellIconValue(column, row)\"\n                                        class=\"size-4\"\n                                    />\n                                } @else if (column.displayType === 'currency') {\n                                    <ui-money\n                                        [value]=\"moneyCellValue(column, row)\"\n                                        [currency]=\"column.currency ?? uiFormat.currency\"\n                                        placeholder=\"\"\n                                    />\n                                } @else if (column.sensitive) {\n                                    <ui-private [text]=\"formattedCellValue(column, row)\" />\n                                } @else {\n                                    {{ formattedCellValue(column, row) }}\n                                }\n                            </td>\n                        }\n\n                        @if (hasActions()) {\n                            <td class=\"ui-table-actions-cell\">\n                                @for (action of actions(); track action.id) {\n                                    <ui-tooltip [text]=\"action.label\">\n                                        <ui-button\n                                            appearance=\"none\"\n                                            classes=\"p-1.5! border-transparent! rounded-md! text-muted-foreground-1 cursor-pointer hover:bg-surface-hover hover:text-foreground focus-visible:bg-surface-hover focus-visible:text-foreground disabled:opacity-40! disabled:cursor-not-allowed\"\n                                            [disabled]=\"!!action.disabled?.(row)\"\n                                            [ariaLabel]=\"action.label\"\n                                            (click)=\"action.onClick(row)\"\n                                        >\n                                            <ng-icon\n                                                [name]=\"action.icon\"\n                                                class=\"size-4\"\n                                            />\n                                        </ui-button>\n                                    </ui-tooltip>\n                                }\n                            </td>\n                        }\n                    </tr>\n                }\n            }\n        </tbody>\n    </table>\n</div>\n\n@if (dragPreview(); as preview) {\n    <div\n        class=\"ui-table-drag-preview ui-text-body-alt\"\n        [style.left.px]=\"preview.x\"\n        [style.top.px]=\"preview.y\"\n        [style.width.px]=\"preview.width\"\n        [style.height.px]=\"preview.height\"\n    >\n        <ng-icon name=\"heroBars2\" class=\"ui-table-drag-preview-icon\" />\n        <span class=\"truncate\">{{ preview.label }}</span>\n    </div>\n}\n\n@if (paginated()) {\n    <div class=\"ui-table-footer\">\n        <span class=\"text-muted-foreground-1 ui-text-caption\">{{\n                resultsLabel()\n            }}</span>\n\n        <div class=\"ui-table-pagination\">\n            <ui-button\n                size=\"sm\"\n                appearance=\"white\"\n                intent=\"secondary\"\n                [disabled]=\"currentPage() === 0\"\n                (click)=\"goToPage(currentPage() - 1)\"\n            >\n                Prev\n            </ui-button>\n\n            <span class=\"ui-text-body-alt\">Page {{ currentPage() + 1 }} of {{\n                    totalPages()\n                }}</span>\n\n            <ui-button\n                size=\"sm\"\n                appearance=\"white\"\n                intent=\"secondary\"\n                [disabled]=\"currentPage() + 1 >= totalPages()\"\n                (click)=\"goToPage(currentPage() + 1)\"\n            >\n                Next\n            </ui-button>\n        </div>\n    </div>\n}\n",
 		styles: ["@layer properties;:host{min-width:100%}.ui-table-toolbar{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 3)}.ui-table-scroll{overflow-x:auto;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--table-line)}.ui-table-scroll::-webkit-scrollbar{height:calc(var(--spacing, .25rem) * 2)}.ui-table-scroll::-webkit-scrollbar-thumb{border-radius:0}.ui-table-scroll::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb)}.ui-table-scroll::-webkit-scrollbar-track{background-color:var(--scrollbar-track)}.ui-table-scroll:has(.ui-table-sticky){max-height:480px}.ui-table{min-width:100%}.ui-table--fixed{table-layout:fixed}.ui-table thead{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--table-line);background-color:var(--muted)}.ui-table thead:where(.dark,.dark *){background-color:var(--color-neutral-700, oklch(37.1% 0 none))}.ui-table thead.ui-table-sticky{position:sticky;top:0;z-index:20}.ui-table th{padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 3);text-align:start}.ui-table td{overflow:hidden;text-overflow:ellipsis;padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 4);white-space:nowrap}.ui-table tbody{background-color:var(--layer)}:where(.ui-table tbody>:not(:last-child)){--tw-divide-y-reverse: 0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(.ui-table tbody>:not(:last-child)){border-color:var(--table-line)}.ui-table tbody tr:last-child{border-bottom-style:var(--tw-border-style)!important;border-bottom-width:0px!important}.ui-table tbody tr:hover{background-color:var(--muted)}.ui-table-row-selected{background-color:var(--color-primary-50, var(--color-blue-50))}.ui-table-row-dragging{opacity:40%}.ui-table-pinned{position:sticky;z-index:10;background-color:var(--layer)}.ui-table-row-selected .ui-table-pinned{background-color:var(--color-primary-50, var(--color-blue-50))}.ui-table th.ui-table-pinned{position:sticky;z-index:30;background-color:var(--muted)}.ui-table th.ui-table-pinned:where(.dark,.dark *){background-color:var(--color-neutral-700, oklch(37.1% 0 none))}.ui-table [data-pin=left]{border-right-style:var(--tw-border-style);border-right-width:1px;border-color:var(--border-line-2)}.ui-table [data-pin=right]{border-left-style:var(--tw-border-style);border-left-width:1px;border-color:var(--border-line-2)}.ui-table-th-content{display:flex;align-items:center;gap:var(--spacing, .25rem)}.ui-table-sort{height:calc(var(--spacing, .25rem) * 3);width:calc(var(--spacing, .25rem) * 2);flex-shrink:0;fill:currentcolor;color:var(--muted-foreground-1)}.ui-table-sort path{opacity:30%;transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s))}.ui-table-sort[data-direction]{color:var(--color-primary-500, var(--color-blue-500))}.ui-table-sort[data-direction=asc] .ui-table-sort-asc,.ui-table-sort[data-direction=desc] .ui-table-sort-desc{opacity:100%}.ui-table-drag-handle{width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4);flex-shrink:0;cursor:grab;color:var(--muted-foreground-1)}.ui-table-column-dragging{opacity:40%}.ui-table-column-drag-over{background-color:var(--color-primary-50, var(--color-blue-50))}.ui-table-drag-preview{pointer-events:none;position:fixed;z-index:50;display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2);background-color:var(--layer);padding-right:calc(var(--spacing, .25rem) * 3);padding-left:calc(var(--spacing, .25rem) * 2);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--foreground);--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-table-drag-preview-icon{width:calc(var(--spacing, .25rem) * 3.5);height:calc(var(--spacing, .25rem) * 3.5);flex-shrink:0;color:var(--color-primary-500, var(--color-blue-500))}.ui-table-resize-handle{position:absolute;top:0;right:0;height:100%;width:calc(var(--spacing, .25rem) * 1.5);cursor:col-resize}.ui-table-resize-handle:hover,.ui-table-resize-handle:focus-visible{background-color:var(--color-primary-300, var(--color-blue-300))}.ui-table-filter-menu{display:flex;width:calc(var(--spacing, .25rem) * 64);flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--dropdown-divider);background-color:var(--layer);padding:calc(var(--spacing, .25rem) * 3);--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-table-filter-count{display:inline-flex;height:calc(var(--spacing, .25rem) * 5);min-width:calc(var(--spacing, .25rem) * 5);align-items:center;justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px));background-color:var(--color-primary-50, var(--color-blue-50));padding-inline:var(--spacing, .25rem);color:var(--color-primary-600, var(--color-blue-600))}.ui-table-select-cell,.ui-table-actions-cell{padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);text-align:center}.ui-table-actions-cell{display:flex;align-items:center;justify-content:flex-end;gap:var(--spacing, .25rem)}.ui-table-status{padding-block:calc(var(--spacing, .25rem) * 8);text-align:center;color:var(--muted-foreground-1)}.ui-table-status-error{color:var(--color-danger-500, var(--color-red-500))}.ui-table-footer{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 3)}.ui-table-pagination{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-divide-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-divide-y-reverse: 0;--tw-font-weight: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
 		dependencies: [
 			{
@@ -10135,6 +10406,19 @@ var UiTableComponent = class UiTableComponent {
 				type: UiPrivateComponent,
 				selector: "ui-private",
 				inputs: ["text"]
+			},
+			{
+				kind: "component",
+				type: UiTooltipComponent,
+				selector: "ui-tooltip",
+				inputs: [
+					"text",
+					"placement",
+					"trigger",
+					"classes",
+					"isOpen"
+				],
+				exportAs: ["uiTooltip"]
 			}
 		]
 	});
@@ -10158,7 +10442,8 @@ i0.ɵɵngDeclareClassMetadata({
 				UiSelectComponent,
 				UiLoadingComponent,
 				UiMoneyComponent,
-				UiPrivateComponent
+				UiPrivateComponent,
+				UiTooltipComponent
 			],
 			host: { class: "block" },
 			providers: [provideIcons({
@@ -10167,7 +10452,7 @@ i0.ɵɵngDeclareClassMetadata({
 				heroViewColumns,
 				heroBars2
 			})],
-			template: "@if (searchable() || hasFilterableColumns() || toggleableColumns()) {\n    <div class=\"ui-table-toolbar\">\n        @if (searchable()) {\n            <ui-input\n                [value]=\"query()\"\n                (valueChange)=\"onQueryChange($event)\"\n                [placeholder]=\"searchPlaceholder()\"\n                class=\"max-w-xs\"\n            >\n                <ng-template #leading>\n                    <ng-icon\n                        name=\"heroMagnifyingGlass\"\n                        class=\"ms-3 size-4 text-muted-foreground-1\"\n                    />\n                </ng-template>\n            </ui-input>\n        }\n\n        @if (hasFilterableColumns()) {\n            <ui-dropdown\n                [isOpen]=\"filterMenuOpen\"\n                placement=\"bottom-start\"\n                closeBehaviour=\"whenClickOutside\"\n            >\n                <ui-button\n                    size=\"sm\"\n                    appearance=\"white\"\n                    intent=\"secondary\"\n                    (click)=\"filterMenuOpen.update(open => !open)\"\n                >\n                    <ng-icon name=\"heroFunnel\" class=\"size-4\" />\n                    Filters\n                    @if (activeFilterCount()) {\n                        <span class=\"ui-table-filter-count ui-text-caption\">\n                            {{ activeFilterCount() }}\n                        </span>\n                    }\n                </ui-button>\n\n                @if (filterMenuOpen()) {\n                    <div uiDropdownContent class=\"py-2\">\n                        <div class=\"ui-table-filter-menu\">\n                            @for (column of filterableColumns(); track column.id) {\n                                <div class=\"flex flex-col gap-1\">\n                                    <span\n                                        class=\"text-muted-foreground-1 ui-text-caption\"\n                                    >\n                                        {{ column.header }}\n                                    </span>\n\n                                    @if (column.filterOptions) {\n                                        <ui-select\n                                            [dataSource]=\"filterDataSource(column)\"\n                                            [selectedItem]=\"selectedFilterOption(column)\"\n                                            (selectionChange)=\"onFilterSelect(column.id, $event)\"\n                                            [displayWith]=\"column.sensitive ? sensitiveFilterOptionLabel : filterOptionLabel\"\n                                            [clearable]=\"true\"\n                                            clearLabel=\"All\"\n                                            placeholder=\"All\"\n                                        />\n                                    } @else {\n                                        <ui-input\n                                            [value]=\"filterValue(column.id)\"\n                                            (valueChange)=\"onFilterInput(column.id, $event)\"\n                                            placeholder=\"Filter...\"\n                                            [ariaLabel]=\"'Filter ' + column.header\"\n                                        />\n                                    }\n                                </div>\n                            }\n\n                            @if (activeFilterCount()) {\n                                <ui-button\n                                    appearance=\"link\"\n                                    intent=\"secondary\"\n                                    class=\"text-end\"\n                                    classes=\"self-end p-0! text-sm\"\n                                    (click)=\"clearFilters()\"\n                                >\n                                    Clear filters\n                                </ui-button>\n                            }\n                        </div>\n                    </div>\n                }\n            </ui-dropdown>\n        }\n\n        @if (toggleableColumns()) {\n            <ui-dropdown\n                [isOpen]=\"columnMenuOpen\"\n                placement=\"bottom-end\"\n                closeBehaviour=\"whenClickOutside\"\n                class=\"ms-auto\"\n            >\n                <ui-button\n                    size=\"sm\"\n                    appearance=\"white\"\n                    intent=\"secondary\"\n                    (click)=\"columnMenuOpen.update(open => !open)\"\n                >\n                    <ng-icon name=\"heroViewColumns\" class=\"size-4\" />\n                    Columns\n                </ui-button>\n\n                @if (columnMenuOpen()) {\n                    <div uiDropdownContent class=\"py-2\">\n                        <div class=\"bg-layer shadow-xs py-1 border border-dropdown-divider rounded-lg min-w-40\">\n                            @for (column of hideableColumns(); track column.id) {\n                                <label\n                                    class=\"flex items-center gap-2 hover:bg-dropdown-item-hover px-3 py-2 ui-text-body-alt cursor-pointer\"\n                                >\n                                    <ui-checkbox\n                                        [value]=\"isColumnVisible(column)\"\n                                        (valueChange)=\"toggleColumnVisibility(column)\"\n                                    />\n                                    {{ column.header }}\n                                </label>\n                            }\n                        </div>\n                    </div>\n                }\n            </ui-dropdown>\n        }\n    </div>\n}\n\n<div class=\"ui-table-scroll\">\n    <table [class]=\"generatedClasses()\" [style.width.px]=\"fixedWidth()\">\n        <colgroup>\n            @if (selectable()) {\n                <col [style.width.px]=\"44\" />\n            }\n\n            @for (column of renderColumns(); track column.id) {\n                <col [style.width.px]=\"columnWidth(column)\" />\n            }\n\n            @if (hasActions()) {\n                <col [style.width.px]=\"actionsColumnWidth()\" />\n            }\n        </colgroup>\n\n        <thead [class.ui-table-sticky]=\"stickyHeader()\">\n            <tr>\n                @if (selectable()) {\n                    <th class=\"text-center! ui-table-select-cell\">\n                        <ui-checkbox\n                            [value]=\"allSelected()\"\n                            [indeterminate]=\"someSelected()\"\n                            (valueChange)=\"toggleSelectAll()\"\n                        />\n                    </th>\n                }\n\n                @for (column of renderColumns(); track column.id) {\n                    <th\n                        scope=\"col\"\n                        [attr.data-column-id]=\"column.id\"\n                        [class.ui-table-pinned]=\"isPinned(column)\"\n                        [attr.data-pin]=\"column.pin || null\"\n                        [class.ui-table-column-dragging]=\"draggedColumnId() === column.id\"\n                        [class.ui-table-column-drag-over]=\"dragOverColumnId() === column.id\"\n                        [style.left.px]=\"leftOffset(column)\"\n                        [style.right.px]=\"rightOffset(column)\"\n                    >\n                        <div class=\"ui-table-th-content\">\n                            @if (reorderableColumns() && column.reorderable !== false) {\n                                <ng-icon\n                                    name=\"heroBars2\"\n                                    class=\"ui-table-drag-handle\"\n                                    (pointerdown)=\"onColumnDragStart($event, column)\"\n                                />\n                            }\n\n                            @if (column.sortable) {\n                                <ui-button\n                                    appearance=\"none\"\n                                    classes=\"flex items-center gap-1 p-0! border-transparent! rounded-none! cursor-pointer hocus:text-foreground\"\n                                    (click)=\"toggleSort(column)\"\n                                >\n                                    <span\n                                        class=\"font-medium text-muted-foreground-1 ui-text-caption uppercase\"\n                                    >\n                                        {{ column.header }}\n                                    </span>\n                                    <svg\n                                        viewBox=\"0 0 8 13\"\n                                        aria-hidden=\"true\"\n                                        class=\"ui-table-sort\"\n                                        [attr.data-direction]=\"sortDirection(column)\"\n                                    >\n                                        <path class=\"ui-table-sort-asc\" d=\"M4 0 8 5H0z\" />\n                                        <path class=\"ui-table-sort-desc\" d=\"M4 13 0 8h8z\" />\n                                    </svg>\n                                </ui-button>\n                            } @else {\n                                <span\n                                    class=\"font-medium text-muted-foreground-1 ui-text-caption ui-text-caption uppercase\"\n                                >\n                                    {{ column.header }}\n                                </span>\n                            }\n                        </div>\n\n                        @if (column.resizable) {\n                            <span\n                                class=\"ui-table-resize-handle\"\n                                (pointerdown)=\"startResize($event, column)\"\n                            ></span>\n                        }\n                    </th>\n                }\n\n                @if (hasActions()) {\n                    <th class=\"ui-table-actions-cell\"></th>\n                }\n            </tr>\n        </thead>\n\n        <tbody class=\"ui-text-body-alt\">\n            @if (loading()) {\n                <tr>\n                    <td\n                        [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n                        class=\"ui-table-status\"\n                    >\n                        <ui-loading type=\"loading-dots\" />\n                    </td>\n                </tr>\n            } @else if (error()) {\n                <tr>\n                    <td\n                        [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n                        class=\"ui-table-status ui-table-status-error\"\n                    >\n                        {{ errorMessage() }}\n                        <ui-button\n                            appearance=\"link\"\n                            intent=\"danger\"\n                            classes=\"ms-1 p-0! text-sm underline\"\n                            (click)=\"reload()\"\n                        >\n                            Retry\n                        </ui-button>\n                    </td>\n                </tr>\n            } @else if (isEmpty()) {\n                <tr>\n                    <td\n                        [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n                        class=\"ui-table-status\"\n                    >\n                        {{ emptyMessage() }}\n                    </td>\n                </tr>\n            } @else {\n                @for (row of rows(); track rowId()(row, $index); let i = $index) {\n                    <tr\n                        [class.ui-table-row-selected]=\"isRowSelected(row, i)\"\n                        [class.ui-table-row-dragging]=\"draggedRowIndex() === i\"\n                        [draggable]=\"canReorderRows()\"\n                        (dragstart)=\"onRowDragStart($event, i)\"\n                        (dragover)=\"onRowDragOver($event)\"\n                        (drop)=\"onRowDrop($event, i)\"\n                    >\n                        @if (selectable()) {\n                            <td class=\"ui-table-select-cell\">\n                                <ui-checkbox\n                                    [value]=\"isRowSelected(row, i)\"\n                                    (valueChange)=\"toggleRow(row, i)\"\n                                />\n                            </td>\n                        }\n\n                        @for (column of renderColumns(); track column.id) {\n                            <td\n                                [class.ui-table-pinned]=\"isPinned(column)\"\n                                [attr.data-pin]=\"column.pin || null\"\n                                [style.left.px]=\"leftOffset(column)\"\n                                [style.right.px]=\"rightOffset(column)\"\n                            >\n                                @if (column.displayType === 'icon') {\n                                    <ng-icon\n                                        [name]=\"cellIconValue(column, row)\"\n                                        class=\"size-4\"\n                                    />\n                                } @else if (column.displayType === 'currency') {\n                                    <ui-money\n                                        [value]=\"moneyCellValue(column, row)\"\n                                        [currency]=\"column.currency ?? uiFormat.currency\"\n                                        placeholder=\"\"\n                                    />\n                                } @else if (column.sensitive) {\n                                    <ui-private [text]=\"formattedCellValue(column, row)\" />\n                                } @else {\n                                    {{ formattedCellValue(column, row) }}\n                                }\n                            </td>\n                        }\n\n                        @if (hasActions()) {\n                            <td class=\"ui-table-actions-cell\">\n                                @for (action of actions(); track action.id) {\n                                    <ui-button\n                                        appearance=\"none\"\n                                        classes=\"p-1.5! border-transparent! rounded-md! text-muted-foreground-1 cursor-pointer hocus:bg-surface hocus:text-foreground disabled:opacity-40! disabled:cursor-not-allowed\"\n                                        [disabled]=\"!!action.disabled?.(row)\"\n                                        [ariaLabel]=\"action.label\"\n                                        [title]=\"action.label\"\n                                        (click)=\"action.onClick(row)\"\n                                    >\n                                        <ng-icon\n                                            [name]=\"action.icon\"\n                                            class=\"size-4\"\n                                        />\n                                    </ui-button>\n                                }\n                            </td>\n                        }\n                    </tr>\n                }\n            }\n        </tbody>\n    </table>\n</div>\n\n@if (dragPreview(); as preview) {\n    <div\n        class=\"ui-table-drag-preview ui-text-body-alt\"\n        [style.left.px]=\"preview.x\"\n        [style.top.px]=\"preview.y\"\n        [style.width.px]=\"preview.width\"\n        [style.height.px]=\"preview.height\"\n    >\n        <ng-icon name=\"heroBars2\" class=\"ui-table-drag-preview-icon\" />\n        <span class=\"truncate\">{{ preview.label }}</span>\n    </div>\n}\n\n@if (paginated()) {\n    <div class=\"ui-table-footer\">\n        <span class=\"text-muted-foreground-1 ui-text-caption\">{{\n                resultsLabel()\n            }}</span>\n\n        <div class=\"ui-table-pagination\">\n            <ui-button\n                size=\"sm\"\n                appearance=\"white\"\n                intent=\"secondary\"\n                [disabled]=\"currentPage() === 0\"\n                (click)=\"goToPage(currentPage() - 1)\"\n            >\n                Prev\n            </ui-button>\n\n            <span class=\"ui-text-body-alt\">Page {{ currentPage() + 1 }} of {{\n                    totalPages()\n                }}</span>\n\n            <ui-button\n                size=\"sm\"\n                appearance=\"white\"\n                intent=\"secondary\"\n                [disabled]=\"currentPage() + 1 >= totalPages()\"\n                (click)=\"goToPage(currentPage() + 1)\"\n            >\n                Next\n            </ui-button>\n        </div>\n    </div>\n}\n",
+			template: "@if (searchable() || hasFilterableColumns() || toggleableColumns()) {\n    <div class=\"ui-table-toolbar\">\n        @if (searchable()) {\n            <ui-input\n                [value]=\"query()\"\n                (valueChange)=\"onQueryChange($event)\"\n                [placeholder]=\"searchPlaceholder()\"\n                class=\"max-w-xs\"\n            >\n                <ng-template #leading>\n                    <ng-icon\n                        name=\"heroMagnifyingGlass\"\n                        class=\"ms-3 size-4 text-muted-foreground-1\"\n                    />\n                </ng-template>\n            </ui-input>\n        }\n\n        @if (hasFilterableColumns()) {\n            <ui-dropdown\n                [isOpen]=\"filterMenuOpen\"\n                placement=\"bottom-start\"\n                closeBehaviour=\"whenClickOutside\"\n            >\n                <ui-button\n                    size=\"sm\"\n                    appearance=\"white\"\n                    intent=\"secondary\"\n                    (click)=\"filterMenuOpen.update(open => !open)\"\n                >\n                    <ng-icon name=\"heroFunnel\" class=\"size-4\" />\n                    Filters\n                    @if (activeFilterCount()) {\n                        <span class=\"ui-table-filter-count ui-text-caption\">\n                            {{ activeFilterCount() }}\n                        </span>\n                    }\n                </ui-button>\n\n                @if (filterMenuOpen()) {\n                    <div uiDropdownContent class=\"py-2\">\n                        <div class=\"ui-table-filter-menu\">\n                            @for (column of filterableColumns(); track column.id) {\n                                <div class=\"flex flex-col gap-1\">\n                                    <span\n                                        class=\"text-muted-foreground-1 ui-text-caption\"\n                                    >\n                                        {{ column.header }}\n                                    </span>\n\n                                    @if (column.filterOptions) {\n                                        <ui-select\n                                            [dataSource]=\"filterDataSource(column)\"\n                                            [selectedItem]=\"selectedFilterOption(column)\"\n                                            (selectionChange)=\"onFilterSelect(column.id, $event)\"\n                                            [displayWith]=\"column.sensitive ? sensitiveFilterOptionLabel : filterOptionLabel\"\n                                            [clearable]=\"true\"\n                                            clearLabel=\"All\"\n                                            placeholder=\"All\"\n                                        />\n                                    } @else {\n                                        <ui-input\n                                            [value]=\"filterValue(column.id)\"\n                                            (valueChange)=\"onFilterInput(column.id, $event)\"\n                                            placeholder=\"Filter...\"\n                                            [ariaLabel]=\"'Filter ' + column.header\"\n                                        />\n                                    }\n                                </div>\n                            }\n\n                            @if (activeFilterCount()) {\n                                <ui-button\n                                    appearance=\"link\"\n                                    intent=\"secondary\"\n                                    class=\"text-end\"\n                                    classes=\"self-end p-0! text-sm\"\n                                    (click)=\"clearFilters()\"\n                                >\n                                    Clear filters\n                                </ui-button>\n                            }\n                        </div>\n                    </div>\n                }\n            </ui-dropdown>\n        }\n\n        @if (toggleableColumns()) {\n            <ui-dropdown\n                [isOpen]=\"columnMenuOpen\"\n                placement=\"bottom-end\"\n                closeBehaviour=\"whenClickOutside\"\n                class=\"ms-auto\"\n            >\n                <ui-button\n                    size=\"sm\"\n                    appearance=\"white\"\n                    intent=\"secondary\"\n                    (click)=\"columnMenuOpen.update(open => !open)\"\n                >\n                    <ng-icon name=\"heroViewColumns\" class=\"size-4\" />\n                    Columns\n                </ui-button>\n\n                @if (columnMenuOpen()) {\n                    <div uiDropdownContent class=\"py-2\">\n                        <div class=\"bg-layer shadow-xs py-1 border border-dropdown-divider rounded-lg min-w-40\">\n                            @for (column of hideableColumns(); track column.id) {\n                                <label\n                                    class=\"flex items-center gap-2 hover:bg-dropdown-item-hover px-3 py-2 ui-text-body-alt cursor-pointer\"\n                                >\n                                    <ui-checkbox\n                                        [value]=\"isColumnVisible(column)\"\n                                        (valueChange)=\"toggleColumnVisibility(column)\"\n                                    />\n                                    {{ column.header }}\n                                </label>\n                            }\n                        </div>\n                    </div>\n                }\n            </ui-dropdown>\n        }\n    </div>\n}\n\n<div class=\"ui-table-scroll\">\n    <table [class]=\"generatedClasses()\" [style.width.px]=\"fixedWidth()\">\n        <colgroup>\n            @if (selectable()) {\n                <col [style.width.px]=\"44\" />\n            }\n\n            @for (column of renderColumns(); track column.id) {\n                <col [style.width.px]=\"columnWidth(column)\" />\n            }\n\n            @if (hasActions()) {\n                <col [style.width.px]=\"actionsColumnWidth()\" />\n            }\n        </colgroup>\n\n        <thead [class.ui-table-sticky]=\"stickyHeader()\">\n            <tr>\n                @if (selectable()) {\n                    <th class=\"text-center! ui-table-select-cell\">\n                        <ui-checkbox\n                            [value]=\"allSelected()\"\n                            [indeterminate]=\"someSelected()\"\n                            (valueChange)=\"toggleSelectAll()\"\n                        />\n                    </th>\n                }\n\n                @for (column of renderColumns(); track column.id) {\n                    <th\n                        scope=\"col\"\n                        [attr.data-column-id]=\"column.id\"\n                        [class.ui-table-pinned]=\"isPinned(column)\"\n                        [attr.data-pin]=\"column.pin || null\"\n                        [class.ui-table-column-dragging]=\"draggedColumnId() === column.id\"\n                        [class.ui-table-column-drag-over]=\"dragOverColumnId() === column.id\"\n                        [style.left.px]=\"leftOffset(column)\"\n                        [style.right.px]=\"rightOffset(column)\"\n                    >\n                        <div class=\"ui-table-th-content\">\n                            @if (reorderableColumns() && column.reorderable !== false) {\n                                <ng-icon\n                                    name=\"heroBars2\"\n                                    class=\"ui-table-drag-handle\"\n                                    (pointerdown)=\"onColumnDragStart($event, column)\"\n                                />\n                            }\n\n                            @if (column.sortable) {\n                                <ui-button\n                                    appearance=\"none\"\n                                    classes=\"flex items-center gap-1 p-0! border-transparent! rounded-none! cursor-pointer hover:text-foreground focus-visible:text-foreground\"\n                                    (click)=\"toggleSort(column)\"\n                                >\n                                    <span\n                                        class=\"font-medium text-muted-foreground-1 ui-text-caption uppercase\"\n                                    >\n                                        {{ column.header }}\n                                    </span>\n                                    <svg\n                                        viewBox=\"0 0 8 13\"\n                                        aria-hidden=\"true\"\n                                        class=\"ui-table-sort\"\n                                        [attr.data-direction]=\"sortDirection(column)\"\n                                    >\n                                        <path class=\"ui-table-sort-asc\" d=\"M4 0 8 5H0z\" />\n                                        <path class=\"ui-table-sort-desc\" d=\"M4 13 0 8h8z\" />\n                                    </svg>\n                                </ui-button>\n                            } @else {\n                                <span\n                                    class=\"font-medium text-muted-foreground-1 ui-text-caption ui-text-caption uppercase\"\n                                >\n                                    {{ column.header }}\n                                </span>\n                            }\n                        </div>\n\n                        @if (column.resizable) {\n                            <span\n                                class=\"ui-table-resize-handle\"\n                                (pointerdown)=\"startResize($event, column)\"\n                            ></span>\n                        }\n                    </th>\n                }\n\n                @if (hasActions()) {\n                    <th class=\"ui-table-actions-cell\"></th>\n                }\n            </tr>\n        </thead>\n\n        <tbody class=\"ui-text-body-alt\">\n            @if (loading()) {\n                <tr>\n                    <td\n                        [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n                        class=\"ui-table-status\"\n                    >\n                        <ui-loading type=\"loading-dots\" />\n                    </td>\n                </tr>\n            } @else if (error()) {\n                <tr>\n                    <td\n                        [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n                        class=\"ui-table-status ui-table-status-error\"\n                    >\n                        {{ errorMessage() }}\n                        <ui-button\n                            appearance=\"link\"\n                            intent=\"danger\"\n                            classes=\"ms-1 p-0! text-sm underline\"\n                            (click)=\"reload()\"\n                        >\n                            Retry\n                        </ui-button>\n                    </td>\n                </tr>\n            } @else if (isEmpty()) {\n                <tr>\n                    <td\n                        [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n                        class=\"ui-table-status\"\n                    >\n                        {{ emptyMessage() }}\n                    </td>\n                </tr>\n            } @else {\n                @for (row of rows(); track rowId()(row, $index); let i = $index) {\n                    <tr\n                        [class.ui-table-row-selected]=\"isRowSelected(row, i)\"\n                        [class.ui-table-row-dragging]=\"draggedRowIndex() === i\"\n                        [draggable]=\"canReorderRows()\"\n                        (dragstart)=\"onRowDragStart($event, i)\"\n                        (dragover)=\"onRowDragOver($event)\"\n                        (drop)=\"onRowDrop($event, i)\"\n                    >\n                        @if (selectable()) {\n                            <td class=\"ui-table-select-cell\">\n                                <ui-checkbox\n                                    [value]=\"isRowSelected(row, i)\"\n                                    (valueChange)=\"toggleRow(row, i)\"\n                                />\n                            </td>\n                        }\n\n                        @for (column of renderColumns(); track column.id) {\n                            <td\n                                [class.ui-table-pinned]=\"isPinned(column)\"\n                                [attr.data-pin]=\"column.pin || null\"\n                                [style.left.px]=\"leftOffset(column)\"\n                                [style.right.px]=\"rightOffset(column)\"\n                            >\n                                @if (column.displayType === 'icon') {\n                                    <ng-icon\n                                        [name]=\"cellIconValue(column, row)\"\n                                        class=\"size-4\"\n                                    />\n                                } @else if (column.displayType === 'currency') {\n                                    <ui-money\n                                        [value]=\"moneyCellValue(column, row)\"\n                                        [currency]=\"column.currency ?? uiFormat.currency\"\n                                        placeholder=\"\"\n                                    />\n                                } @else if (column.sensitive) {\n                                    <ui-private [text]=\"formattedCellValue(column, row)\" />\n                                } @else {\n                                    {{ formattedCellValue(column, row) }}\n                                }\n                            </td>\n                        }\n\n                        @if (hasActions()) {\n                            <td class=\"ui-table-actions-cell\">\n                                @for (action of actions(); track action.id) {\n                                    <ui-tooltip [text]=\"action.label\">\n                                        <ui-button\n                                            appearance=\"none\"\n                                            classes=\"p-1.5! border-transparent! rounded-md! text-muted-foreground-1 cursor-pointer hover:bg-surface-hover hover:text-foreground focus-visible:bg-surface-hover focus-visible:text-foreground disabled:opacity-40! disabled:cursor-not-allowed\"\n                                            [disabled]=\"!!action.disabled?.(row)\"\n                                            [ariaLabel]=\"action.label\"\n                                            (click)=\"action.onClick(row)\"\n                                        >\n                                            <ng-icon\n                                                [name]=\"action.icon\"\n                                                class=\"size-4\"\n                                            />\n                                        </ui-button>\n                                    </ui-tooltip>\n                                }\n                            </td>\n                        }\n                    </tr>\n                }\n            }\n        </tbody>\n    </table>\n</div>\n\n@if (dragPreview(); as preview) {\n    <div\n        class=\"ui-table-drag-preview ui-text-body-alt\"\n        [style.left.px]=\"preview.x\"\n        [style.top.px]=\"preview.y\"\n        [style.width.px]=\"preview.width\"\n        [style.height.px]=\"preview.height\"\n    >\n        <ng-icon name=\"heroBars2\" class=\"ui-table-drag-preview-icon\" />\n        <span class=\"truncate\">{{ preview.label }}</span>\n    </div>\n}\n\n@if (paginated()) {\n    <div class=\"ui-table-footer\">\n        <span class=\"text-muted-foreground-1 ui-text-caption\">{{\n                resultsLabel()\n            }}</span>\n\n        <div class=\"ui-table-pagination\">\n            <ui-button\n                size=\"sm\"\n                appearance=\"white\"\n                intent=\"secondary\"\n                [disabled]=\"currentPage() === 0\"\n                (click)=\"goToPage(currentPage() - 1)\"\n            >\n                Prev\n            </ui-button>\n\n            <span class=\"ui-text-body-alt\">Page {{ currentPage() + 1 }} of {{\n                    totalPages()\n                }}</span>\n\n            <ui-button\n                size=\"sm\"\n                appearance=\"white\"\n                intent=\"secondary\"\n                [disabled]=\"currentPage() + 1 >= totalPages()\"\n                (click)=\"goToPage(currentPage() + 1)\"\n            >\n                Next\n            </ui-button>\n        </div>\n    </div>\n}\n",
 			styles: ["@layer properties;:host{min-width:100%}.ui-table-toolbar{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 3)}.ui-table-scroll{overflow-x:auto;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--table-line)}.ui-table-scroll::-webkit-scrollbar{height:calc(var(--spacing, .25rem) * 2)}.ui-table-scroll::-webkit-scrollbar-thumb{border-radius:0}.ui-table-scroll::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb)}.ui-table-scroll::-webkit-scrollbar-track{background-color:var(--scrollbar-track)}.ui-table-scroll:has(.ui-table-sticky){max-height:480px}.ui-table{min-width:100%}.ui-table--fixed{table-layout:fixed}.ui-table thead{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--table-line);background-color:var(--muted)}.ui-table thead:where(.dark,.dark *){background-color:var(--color-neutral-700, oklch(37.1% 0 none))}.ui-table thead.ui-table-sticky{position:sticky;top:0;z-index:20}.ui-table th{padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 3);text-align:start}.ui-table td{overflow:hidden;text-overflow:ellipsis;padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 4);white-space:nowrap}.ui-table tbody{background-color:var(--layer)}:where(.ui-table tbody>:not(:last-child)){--tw-divide-y-reverse: 0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(.ui-table tbody>:not(:last-child)){border-color:var(--table-line)}.ui-table tbody tr:last-child{border-bottom-style:var(--tw-border-style)!important;border-bottom-width:0px!important}.ui-table tbody tr:hover{background-color:var(--muted)}.ui-table-row-selected{background-color:var(--color-primary-50, var(--color-blue-50))}.ui-table-row-dragging{opacity:40%}.ui-table-pinned{position:sticky;z-index:10;background-color:var(--layer)}.ui-table-row-selected .ui-table-pinned{background-color:var(--color-primary-50, var(--color-blue-50))}.ui-table th.ui-table-pinned{position:sticky;z-index:30;background-color:var(--muted)}.ui-table th.ui-table-pinned:where(.dark,.dark *){background-color:var(--color-neutral-700, oklch(37.1% 0 none))}.ui-table [data-pin=left]{border-right-style:var(--tw-border-style);border-right-width:1px;border-color:var(--border-line-2)}.ui-table [data-pin=right]{border-left-style:var(--tw-border-style);border-left-width:1px;border-color:var(--border-line-2)}.ui-table-th-content{display:flex;align-items:center;gap:var(--spacing, .25rem)}.ui-table-sort{height:calc(var(--spacing, .25rem) * 3);width:calc(var(--spacing, .25rem) * 2);flex-shrink:0;fill:currentcolor;color:var(--muted-foreground-1)}.ui-table-sort path{opacity:30%;transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s))}.ui-table-sort[data-direction]{color:var(--color-primary-500, var(--color-blue-500))}.ui-table-sort[data-direction=asc] .ui-table-sort-asc,.ui-table-sort[data-direction=desc] .ui-table-sort-desc{opacity:100%}.ui-table-drag-handle{width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4);flex-shrink:0;cursor:grab;color:var(--muted-foreground-1)}.ui-table-column-dragging{opacity:40%}.ui-table-column-drag-over{background-color:var(--color-primary-50, var(--color-blue-50))}.ui-table-drag-preview{pointer-events:none;position:fixed;z-index:50;display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2);background-color:var(--layer);padding-right:calc(var(--spacing, .25rem) * 3);padding-left:calc(var(--spacing, .25rem) * 2);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--foreground);--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-table-drag-preview-icon{width:calc(var(--spacing, .25rem) * 3.5);height:calc(var(--spacing, .25rem) * 3.5);flex-shrink:0;color:var(--color-primary-500, var(--color-blue-500))}.ui-table-resize-handle{position:absolute;top:0;right:0;height:100%;width:calc(var(--spacing, .25rem) * 1.5);cursor:col-resize}.ui-table-resize-handle:hover,.ui-table-resize-handle:focus-visible{background-color:var(--color-primary-300, var(--color-blue-300))}.ui-table-filter-menu{display:flex;width:calc(var(--spacing, .25rem) * 64);flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--dropdown-divider);background-color:var(--layer);padding:calc(var(--spacing, .25rem) * 3);--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-table-filter-count{display:inline-flex;height:calc(var(--spacing, .25rem) * 5);min-width:calc(var(--spacing, .25rem) * 5);align-items:center;justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px));background-color:var(--color-primary-50, var(--color-blue-50));padding-inline:var(--spacing, .25rem);color:var(--color-primary-600, var(--color-blue-600))}.ui-table-select-cell,.ui-table-actions-cell{padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);text-align:center}.ui-table-actions-cell{display:flex;align-items:center;justify-content:flex-end;gap:var(--spacing, .25rem)}.ui-table-status{padding-block:calc(var(--spacing, .25rem) * 8);text-align:center;color:var(--muted-foreground-1)}.ui-table-status-error{color:var(--color-danger-500, var(--color-red-500))}.ui-table-footer{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 3)}.ui-table-pagination{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-divide-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-divide-y-reverse: 0;--tw-font-weight: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
 		}]
 	}],
@@ -13648,6 +13933,7 @@ var UiTableFiltersComponent = class UiTableFiltersComponent {
 	anyDate = "any";
 	customDate = "custom";
 	customDates = signal(/* @__PURE__ */ new Set(), ...ngDevMode ? [{ debugName: "customDates" }] : /* istanbul ignore next */ []);
+	expanded = signal(/* @__PURE__ */ new Set(), ...ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []);
 	linked = computed(() => {
 		const id = this.table();
 		return id ? this.registry.get(id) : null;
@@ -13706,6 +13992,22 @@ var UiTableFiltersComponent = class UiTableFiltersComponent {
 		const next = checked ? [...picked, option.value] : picked;
 		this.apply(facet.id, next.length ? next : void 0);
 	}
+	isExpanded(facet) {
+		return this.expanded().has(facet.id);
+	}
+	isShown(facet, option, index) {
+		return this.isExpanded(facet) || !this.isPastCutoff(facet, index) || this.isSelected(facet, option);
+	}
+	hiddenCount(facet) {
+		return facet.options.filter((option, index) => this.isPastCutoff(facet, index) && !this.isSelected(facet, option)).length;
+	}
+	toggleExpanded(facet) {
+		this.expanded.update((ids) => {
+			const next = new Set(ids);
+			if (!next.delete(facet.id)) next.add(facet.id);
+			return next;
+		});
+	}
 	range(facet) {
 		return this.value()[facet.id] ?? {
 			start: null,
@@ -13742,6 +14044,12 @@ var UiTableFiltersComponent = class UiTableFiltersComponent {
 			return next;
 		});
 	}
+	isPastCutoff(facet, index) {
+		return facet.visibleOptions !== void 0 && index >= facet.visibleOptions;
+	}
+	isSelected(facet, option) {
+		return facet.multiple ? this.isChecked(facet, option) : this.picked(facet) === option.value;
+	}
 	apply(id, applied) {
 		const next = { ...this.currentFilters() };
 		if (applied === void 0) delete next[id];
@@ -13813,8 +14121,8 @@ var UiTableFiltersComponent = class UiTableFiltersComponent {
 		outputs: { value: "valueChange" },
 		host: { classAttribute: "block" },
 		ngImport: i0,
-		template: "@if (wide()) {\n    <div class=\"ui-table-filters-panel ui-table-filters-panel--card\">\n        <ng-container *ngTemplateOutlet=\"body; context: { $implicit: true }\" />\n    </div>\n} @else {\n    <ui-button\n        appearance=\"white\"\n        intent=\"secondary\"\n        size=\"sm\"\n        classes=\"gap-x-2 h-9.5 py-0!\"\n        (click)=\"drawer.isOpen.set(true)\"\n    >\n        Filters\n        @if (appliedCount()) {\n            <ui-badge appearance=\"soft\" size=\"xs\" class=\"ui-text-caption\">{{\n                    appliedCount()\n                }}</ui-badge>\n        }\n    </ui-button>\n\n    <ui-drawer #drawer label=\"Filters\">\n        <button\n            drawer-actions\n            type=\"button\"\n            class=\"ui-table-filters-clear ui-text-body-alt\"\n            [class.invisible]=\"!anyApplied()\"\n            (click)=\"clearAll()\"\n        >\n            Clear all\n        </button>\n\n        <div class=\"ui-table-filters-panel\">\n            <ng-container\n                *ngTemplateOutlet=\"body; context: { $implicit: false }\"\n            />\n        </div>\n    </ui-drawer>\n}\n\n<ng-template #body let-showHeader>\n    @if (showHeader) {\n        <div class=\"ui-table-filters-header\">\n            <span class=\"ui-table-filters-title ui-text-body\">\n                Filters\n            </span>\n\n            <button\n                type=\"button\"\n                class=\"ui-table-filters-clear ui-text-body-alt\"\n                [class.invisible]=\"!anyApplied()\"\n                (click)=\"clearAll()\"\n            >\n                Clear all\n            </button>\n        </div>\n    }\n\n    @for (facet of facets(); track facet.id) {\n        <fieldset class=\"ui-table-filters-facet\">\n            <legend class=\"ui-table-filters-legend ui-text-body-alt\">\n                {{ facet.label }}\n            </legend>\n\n            <div class=\"ui-table-filters-choices\">\n                @switch (facet.kind) {\n                    @case ('options') {\n                        @if (facet.multiple) {\n                            @for (option of facet.options; track option.value; let index = $index) {\n                                <label\n                                    class=\"ui-table-filters-choice ui-text-body-alt\"\n                                    [for]=\"choiceId(facet, index)\"\n                                >\n                                    <ui-checkbox\n                                        [id]=\"choiceId(facet, index)\"\n                                        [value]=\"isChecked(facet, option)\"\n                                        (valueChange)=\"check(facet, option, $event)\"\n                                    />\n                                    <span class=\"truncate\">{{\n                                            option.label\n                                        }}</span>\n                                </label>\n                            }\n                        } @else {\n                            <label\n                                class=\"ui-table-filters-choice ui-text-body-alt\"\n                                [for]=\"choiceId(facet, 'any')\"\n                            >\n                                <ui-radio\n                                    [id]=\"choiceId(facet, 'any')\"\n                                    [value]=\"picked(facet)\"\n                                    (valueChange)=\"pick(facet, $event)\"\n                                    [option]=\"null\"\n                                    [name]=\"groupName(facet)\"\n                                />\n                                <span class=\"truncate\">Any</span>\n                            </label>\n\n                            @for (option of facet.options; track option.value; let index = $index) {\n                                <label\n                                    class=\"ui-table-filters-choice ui-text-body-alt\"\n                                    [for]=\"choiceId(facet, index)\"\n                                >\n                                    <ui-radio\n                                        [id]=\"choiceId(facet, index)\"\n                                        [value]=\"picked(facet)\"\n                                        (valueChange)=\"pick(facet, $event)\"\n                                        [option]=\"option.value\"\n                                        [name]=\"groupName(facet)\"\n                                    />\n                                    <span class=\"truncate\">{{\n                                            option.label\n                                        }}</span>\n                                </label>\n                            }\n                        }\n                    }\n                    @case ('dateRange') {\n                        <label\n                            class=\"ui-table-filters-choice ui-text-body-alt\"\n                            [for]=\"choiceId(facet, 'any')\"\n                        >\n                            <ui-radio\n                                [id]=\"choiceId(facet, 'any')\"\n                                [value]=\"dateMode(facet)\"\n                                (valueChange)=\"pickDate(facet, $event)\"\n                                [option]=\"anyDate\"\n                                [name]=\"groupName(facet)\"\n                            />\n                            <span class=\"truncate\">Any time</span>\n                        </label>\n\n                        @for (preset of facet.presets ?? []; track preset.label; let index = $index) {\n                            <label\n                                class=\"ui-table-filters-choice ui-text-body-alt\"\n                                [for]=\"choiceId(facet, index)\"\n                            >\n                                <ui-radio\n                                    [id]=\"choiceId(facet, index)\"\n                                    [value]=\"dateMode(facet)\"\n                                    (valueChange)=\"pickDate(facet, $event)\"\n                                    [option]=\"index\"\n                                    [name]=\"groupName(facet)\"\n                                />\n                                <span class=\"truncate\">{{ preset.label }}</span>\n                            </label>\n                        }\n\n                        <label\n                            class=\"ui-table-filters-choice ui-text-body-alt\"\n                            [for]=\"choiceId(facet, 'custom')\"\n                        >\n                            <ui-radio\n                                [id]=\"choiceId(facet, 'custom')\"\n                                [value]=\"dateMode(facet)\"\n                                (valueChange)=\"pickDate(facet, $event)\"\n                                [option]=\"customDate\"\n                                [name]=\"groupName(facet)\"\n                            />\n                            <span class=\"truncate\">Custom range</span>\n                        </label>\n\n                        @if (dateMode(facet) === 'custom') {\n                            <label\n                                class=\"sr-only\"\n                                [for]=\"groupName(facet) + '-range'\"\n                            >{{ facet.label }} range</label>\n                            <ui-date-range-picker\n                                class=\"ui-table-filters-range\"\n                                [id]=\"groupName(facet) + '-range'\"\n                                [value]=\"range(facet)\"\n                                (valueChange)=\"setRange(facet, $event)\"\n                                [placeholder]=\"facet.placeholder ?? 'Select dates'\"\n                                [min]=\"facet.min ?? null\"\n                                [max]=\"facet.max ?? null\"\n                            />\n                        }\n                    }\n                }\n            </div>\n        </fieldset>\n    }\n</ng-template>\n",
-		styles: ["@layer properties;.ui-table-filters-panel{display:flex;flex-direction:column;row-gap:calc(var(--spacing, .25rem) * 6)}.ui-table-filters-panel--card{border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--card-line);background-color:var(--card);padding:calc(var(--spacing, .25rem) * 5)}.ui-table-filters-header{display:flex;align-items:center;justify-content:space-between;column-gap:calc(var(--spacing, .25rem) * 3)}.ui-table-filters-title{display:flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--foreground)}.ui-table-filters-clear{cursor:pointer;color:var(--muted-foreground-1)}.ui-table-filters-clear:hover{color:var(--foreground)}.ui-table-filters-clear:focus-visible{text-decoration-line:underline}.ui-table-filters-clear:focus-visible{--tw-outline-style: none;outline-style:none}.ui-table-filters-facet{margin:0;min-width:0px;border-style:var(--tw-border-style);border-width:0px;padding:0}.ui-table-filters-legend{margin-bottom:calc(var(--spacing, .25rem) * 3);padding:0;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--foreground)}.ui-table-filters-choices{display:flex;flex-direction:column;row-gap:calc(var(--spacing, .25rem) * 2.5)}.ui-table-filters-choice{display:flex;min-width:0px;cursor:pointer;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2.5);color:var(--muted-foreground-2)}.ui-table-filters-choice:hover{color:var(--foreground)}.ui-table-filters-range{margin-top:calc(var(--spacing, .25rem) * .5)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
+		template: "@if (wide()) {\n    <div class=\"ui-table-filters-panel ui-table-filters-panel--card\">\n        <ng-container *ngTemplateOutlet=\"body; context: { $implicit: true }\" />\n    </div>\n} @else {\n    <ui-button\n        appearance=\"white\"\n        intent=\"secondary\"\n        size=\"sm\"\n        classes=\"gap-x-2 h-9.5 py-0!\"\n        (click)=\"drawer.isOpen.set(true)\"\n    >\n        Filters\n        @if (appliedCount()) {\n            <ui-badge appearance=\"soft\" size=\"xs\" class=\"ui-text-caption\">{{\n                    appliedCount()\n                }}</ui-badge>\n        }\n    </ui-button>\n\n    <ui-drawer #drawer label=\"Filters\">\n        <button\n            drawer-actions\n            type=\"button\"\n            class=\"ui-table-filters-clear ui-text-body-alt\"\n            [class.invisible]=\"!anyApplied()\"\n            (click)=\"clearAll()\"\n        >\n            Clear all\n        </button>\n\n        <div class=\"ui-table-filters-panel\">\n            <ng-container\n                *ngTemplateOutlet=\"body; context: { $implicit: false }\"\n            />\n        </div>\n    </ui-drawer>\n}\n\n<ng-template #body let-showHeader>\n    @if (showHeader) {\n        <div class=\"ui-table-filters-header\">\n            <span class=\"ui-table-filters-title ui-text-body\">\n                Filters\n            </span>\n\n            <button\n                type=\"button\"\n                class=\"ui-table-filters-clear ui-text-body-alt\"\n                [class.invisible]=\"!anyApplied()\"\n                (click)=\"clearAll()\"\n            >\n                Clear all\n            </button>\n        </div>\n    }\n\n    @for (facet of facets(); track facet.id) {\n        <fieldset class=\"ui-table-filters-facet\">\n            <legend class=\"ui-table-filters-legend ui-text-body-alt\">\n                {{ facet.label }}\n            </legend>\n\n            <div\n                class=\"ui-table-filters-choices\"\n                [id]=\"groupName(facet) + '-options'\"\n            >\n                @switch (facet.kind) {\n                    @case ('options') {\n                        @if (facet.multiple) {\n                            @for (option of facet.options; track option.value; let index = $index) {\n                                @if (isShown(facet, option, index)) {\n                                    <label\n                                        class=\"ui-table-filters-choice ui-text-body-alt\"\n                                        [for]=\"choiceId(facet, index)\"\n                                    >\n                                        <ui-checkbox\n                                            [id]=\"choiceId(facet, index)\"\n                                            [value]=\"isChecked(facet, option)\"\n                                            (valueChange)=\"check(facet, option, $event)\"\n                                        />\n                                        <span class=\"truncate\">{{\n                                                option.label\n                                            }}</span>\n                                    </label>\n                                }\n                            }\n                        } @else {\n                            <label\n                                class=\"ui-table-filters-choice ui-text-body-alt\"\n                                [for]=\"choiceId(facet, 'any')\"\n                            >\n                                <ui-radio\n                                    [id]=\"choiceId(facet, 'any')\"\n                                    [value]=\"picked(facet)\"\n                                    (valueChange)=\"pick(facet, $event)\"\n                                    [option]=\"null\"\n                                    [name]=\"groupName(facet)\"\n                                />\n                                <span class=\"truncate\">Any</span>\n                            </label>\n\n                            @for (option of facet.options; track option.value; let index = $index) {\n                                @if (isShown(facet, option, index)) {\n                                    <label\n                                        class=\"ui-table-filters-choice ui-text-body-alt\"\n                                        [for]=\"choiceId(facet, index)\"\n                                    >\n                                        <ui-radio\n                                            [id]=\"choiceId(facet, index)\"\n                                            [value]=\"picked(facet)\"\n                                            (valueChange)=\"pick(facet, $event)\"\n                                            [option]=\"option.value\"\n                                            [name]=\"groupName(facet)\"\n                                        />\n                                        <span class=\"truncate\">{{\n                                                option.label\n                                            }}</span>\n                                    </label>\n                                }\n                            }\n                        }\n                    }\n                    @case ('dateRange') {\n                        <label\n                            class=\"ui-table-filters-choice ui-text-body-alt\"\n                            [for]=\"choiceId(facet, 'any')\"\n                        >\n                            <ui-radio\n                                [id]=\"choiceId(facet, 'any')\"\n                                [value]=\"dateMode(facet)\"\n                                (valueChange)=\"pickDate(facet, $event)\"\n                                [option]=\"anyDate\"\n                                [name]=\"groupName(facet)\"\n                            />\n                            <span class=\"truncate\">Any time</span>\n                        </label>\n\n                        @for (preset of facet.presets ?? []; track preset.label; let index = $index) {\n                            <label\n                                class=\"ui-table-filters-choice ui-text-body-alt\"\n                                [for]=\"choiceId(facet, index)\"\n                            >\n                                <ui-radio\n                                    [id]=\"choiceId(facet, index)\"\n                                    [value]=\"dateMode(facet)\"\n                                    (valueChange)=\"pickDate(facet, $event)\"\n                                    [option]=\"index\"\n                                    [name]=\"groupName(facet)\"\n                                />\n                                <span class=\"truncate\">{{ preset.label }}</span>\n                            </label>\n                        }\n\n                        <label\n                            class=\"ui-table-filters-choice ui-text-body-alt\"\n                            [for]=\"choiceId(facet, 'custom')\"\n                        >\n                            <ui-radio\n                                [id]=\"choiceId(facet, 'custom')\"\n                                [value]=\"dateMode(facet)\"\n                                (valueChange)=\"pickDate(facet, $event)\"\n                                [option]=\"customDate\"\n                                [name]=\"groupName(facet)\"\n                            />\n                            <span class=\"truncate\">Custom range</span>\n                        </label>\n\n                        @if (dateMode(facet) === 'custom') {\n                            <label\n                                class=\"sr-only\"\n                                [for]=\"groupName(facet) + '-range'\"\n                            >{{ facet.label }} range</label>\n                            <ui-date-range-picker\n                                class=\"ui-table-filters-range\"\n                                [id]=\"groupName(facet) + '-range'\"\n                                [value]=\"range(facet)\"\n                                (valueChange)=\"setRange(facet, $event)\"\n                                [placeholder]=\"facet.placeholder ?? 'Select dates'\"\n                                [min]=\"facet.min ?? null\"\n                                [max]=\"facet.max ?? null\"\n                            />\n                        }\n                    }\n                }\n            </div>\n\n            @if (facet.kind === 'options' && hiddenCount(facet)) {\n                <button\n                    type=\"button\"\n                    class=\"ui-table-filters-more ui-text-body-alt\"\n                    [attr.aria-expanded]=\"isExpanded(facet)\"\n                    [attr.aria-controls]=\"groupName(facet) + '-options'\"\n                    (click)=\"toggleExpanded(facet)\"\n                >\n                    @if (isExpanded(facet)) {\n                        Show fewer\n                    } @else {\n                        Show {{ hiddenCount(facet) }} more\n                    }\n                </button>\n            }\n        </fieldset>\n    }\n</ng-template>\n",
+		styles: ["@layer properties;.ui-table-filters-panel{display:flex;flex-direction:column;row-gap:calc(var(--spacing, .25rem) * 6)}.ui-table-filters-panel--card{border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--card-line);background-color:var(--card);padding:calc(var(--spacing, .25rem) * 5)}.ui-table-filters-header{display:flex;align-items:center;justify-content:space-between;column-gap:calc(var(--spacing, .25rem) * 3)}.ui-table-filters-title{display:flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--foreground)}.ui-table-filters-clear{cursor:pointer;color:var(--muted-foreground-1)}.ui-table-filters-clear:hover{color:var(--foreground)}.ui-table-filters-clear:focus-visible{text-decoration-line:underline}.ui-table-filters-clear:focus-visible{--tw-outline-style: none;outline-style:none}.ui-table-filters-facet{margin:0;min-width:0px;border-style:var(--tw-border-style);border-width:0px;padding:0}.ui-table-filters-legend{margin-bottom:calc(var(--spacing, .25rem) * 3);padding:0;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--foreground)}.ui-table-filters-choices{display:flex;flex-direction:column;row-gap:calc(var(--spacing, .25rem) * 2.5)}.ui-table-filters-choice{display:flex;min-width:0px;cursor:pointer;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2.5);color:var(--muted-foreground-2)}.ui-table-filters-choice:hover{color:var(--foreground)}.ui-table-filters-range{margin-top:calc(var(--spacing, .25rem) * .5)}.ui-table-filters-more{margin-top:calc(var(--spacing, .25rem) * 2.5);cursor:pointer;color:var(--color-primary-500, var(--color-blue-500))}.ui-table-filters-more:hover{color:var(--color-primary-600, var(--color-blue-600))}.ui-table-filters-more:hover{text-decoration-line:underline}.ui-table-filters-more:focus-visible{color:var(--color-primary-600, var(--color-blue-600))}.ui-table-filters-more:focus-visible{text-decoration-line:underline}.ui-table-filters-more:focus-visible{--tw-outline-style: none;outline-style:none}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
 		dependencies: [
 			{
 				kind: "directive",
@@ -13937,8 +14245,8 @@ i0.ɵɵngDeclareClassMetadata({
 				UiDateRangePickerComponent
 			],
 			host: { class: "block" },
-			template: "@if (wide()) {\n    <div class=\"ui-table-filters-panel ui-table-filters-panel--card\">\n        <ng-container *ngTemplateOutlet=\"body; context: { $implicit: true }\" />\n    </div>\n} @else {\n    <ui-button\n        appearance=\"white\"\n        intent=\"secondary\"\n        size=\"sm\"\n        classes=\"gap-x-2 h-9.5 py-0!\"\n        (click)=\"drawer.isOpen.set(true)\"\n    >\n        Filters\n        @if (appliedCount()) {\n            <ui-badge appearance=\"soft\" size=\"xs\" class=\"ui-text-caption\">{{\n                    appliedCount()\n                }}</ui-badge>\n        }\n    </ui-button>\n\n    <ui-drawer #drawer label=\"Filters\">\n        <button\n            drawer-actions\n            type=\"button\"\n            class=\"ui-table-filters-clear ui-text-body-alt\"\n            [class.invisible]=\"!anyApplied()\"\n            (click)=\"clearAll()\"\n        >\n            Clear all\n        </button>\n\n        <div class=\"ui-table-filters-panel\">\n            <ng-container\n                *ngTemplateOutlet=\"body; context: { $implicit: false }\"\n            />\n        </div>\n    </ui-drawer>\n}\n\n<ng-template #body let-showHeader>\n    @if (showHeader) {\n        <div class=\"ui-table-filters-header\">\n            <span class=\"ui-table-filters-title ui-text-body\">\n                Filters\n            </span>\n\n            <button\n                type=\"button\"\n                class=\"ui-table-filters-clear ui-text-body-alt\"\n                [class.invisible]=\"!anyApplied()\"\n                (click)=\"clearAll()\"\n            >\n                Clear all\n            </button>\n        </div>\n    }\n\n    @for (facet of facets(); track facet.id) {\n        <fieldset class=\"ui-table-filters-facet\">\n            <legend class=\"ui-table-filters-legend ui-text-body-alt\">\n                {{ facet.label }}\n            </legend>\n\n            <div class=\"ui-table-filters-choices\">\n                @switch (facet.kind) {\n                    @case ('options') {\n                        @if (facet.multiple) {\n                            @for (option of facet.options; track option.value; let index = $index) {\n                                <label\n                                    class=\"ui-table-filters-choice ui-text-body-alt\"\n                                    [for]=\"choiceId(facet, index)\"\n                                >\n                                    <ui-checkbox\n                                        [id]=\"choiceId(facet, index)\"\n                                        [value]=\"isChecked(facet, option)\"\n                                        (valueChange)=\"check(facet, option, $event)\"\n                                    />\n                                    <span class=\"truncate\">{{\n                                            option.label\n                                        }}</span>\n                                </label>\n                            }\n                        } @else {\n                            <label\n                                class=\"ui-table-filters-choice ui-text-body-alt\"\n                                [for]=\"choiceId(facet, 'any')\"\n                            >\n                                <ui-radio\n                                    [id]=\"choiceId(facet, 'any')\"\n                                    [value]=\"picked(facet)\"\n                                    (valueChange)=\"pick(facet, $event)\"\n                                    [option]=\"null\"\n                                    [name]=\"groupName(facet)\"\n                                />\n                                <span class=\"truncate\">Any</span>\n                            </label>\n\n                            @for (option of facet.options; track option.value; let index = $index) {\n                                <label\n                                    class=\"ui-table-filters-choice ui-text-body-alt\"\n                                    [for]=\"choiceId(facet, index)\"\n                                >\n                                    <ui-radio\n                                        [id]=\"choiceId(facet, index)\"\n                                        [value]=\"picked(facet)\"\n                                        (valueChange)=\"pick(facet, $event)\"\n                                        [option]=\"option.value\"\n                                        [name]=\"groupName(facet)\"\n                                    />\n                                    <span class=\"truncate\">{{\n                                            option.label\n                                        }}</span>\n                                </label>\n                            }\n                        }\n                    }\n                    @case ('dateRange') {\n                        <label\n                            class=\"ui-table-filters-choice ui-text-body-alt\"\n                            [for]=\"choiceId(facet, 'any')\"\n                        >\n                            <ui-radio\n                                [id]=\"choiceId(facet, 'any')\"\n                                [value]=\"dateMode(facet)\"\n                                (valueChange)=\"pickDate(facet, $event)\"\n                                [option]=\"anyDate\"\n                                [name]=\"groupName(facet)\"\n                            />\n                            <span class=\"truncate\">Any time</span>\n                        </label>\n\n                        @for (preset of facet.presets ?? []; track preset.label; let index = $index) {\n                            <label\n                                class=\"ui-table-filters-choice ui-text-body-alt\"\n                                [for]=\"choiceId(facet, index)\"\n                            >\n                                <ui-radio\n                                    [id]=\"choiceId(facet, index)\"\n                                    [value]=\"dateMode(facet)\"\n                                    (valueChange)=\"pickDate(facet, $event)\"\n                                    [option]=\"index\"\n                                    [name]=\"groupName(facet)\"\n                                />\n                                <span class=\"truncate\">{{ preset.label }}</span>\n                            </label>\n                        }\n\n                        <label\n                            class=\"ui-table-filters-choice ui-text-body-alt\"\n                            [for]=\"choiceId(facet, 'custom')\"\n                        >\n                            <ui-radio\n                                [id]=\"choiceId(facet, 'custom')\"\n                                [value]=\"dateMode(facet)\"\n                                (valueChange)=\"pickDate(facet, $event)\"\n                                [option]=\"customDate\"\n                                [name]=\"groupName(facet)\"\n                            />\n                            <span class=\"truncate\">Custom range</span>\n                        </label>\n\n                        @if (dateMode(facet) === 'custom') {\n                            <label\n                                class=\"sr-only\"\n                                [for]=\"groupName(facet) + '-range'\"\n                            >{{ facet.label }} range</label>\n                            <ui-date-range-picker\n                                class=\"ui-table-filters-range\"\n                                [id]=\"groupName(facet) + '-range'\"\n                                [value]=\"range(facet)\"\n                                (valueChange)=\"setRange(facet, $event)\"\n                                [placeholder]=\"facet.placeholder ?? 'Select dates'\"\n                                [min]=\"facet.min ?? null\"\n                                [max]=\"facet.max ?? null\"\n                            />\n                        }\n                    }\n                }\n            </div>\n        </fieldset>\n    }\n</ng-template>\n",
-			styles: ["@layer properties;.ui-table-filters-panel{display:flex;flex-direction:column;row-gap:calc(var(--spacing, .25rem) * 6)}.ui-table-filters-panel--card{border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--card-line);background-color:var(--card);padding:calc(var(--spacing, .25rem) * 5)}.ui-table-filters-header{display:flex;align-items:center;justify-content:space-between;column-gap:calc(var(--spacing, .25rem) * 3)}.ui-table-filters-title{display:flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--foreground)}.ui-table-filters-clear{cursor:pointer;color:var(--muted-foreground-1)}.ui-table-filters-clear:hover{color:var(--foreground)}.ui-table-filters-clear:focus-visible{text-decoration-line:underline}.ui-table-filters-clear:focus-visible{--tw-outline-style: none;outline-style:none}.ui-table-filters-facet{margin:0;min-width:0px;border-style:var(--tw-border-style);border-width:0px;padding:0}.ui-table-filters-legend{margin-bottom:calc(var(--spacing, .25rem) * 3);padding:0;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--foreground)}.ui-table-filters-choices{display:flex;flex-direction:column;row-gap:calc(var(--spacing, .25rem) * 2.5)}.ui-table-filters-choice{display:flex;min-width:0px;cursor:pointer;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2.5);color:var(--muted-foreground-2)}.ui-table-filters-choice:hover{color:var(--foreground)}.ui-table-filters-range{margin-top:calc(var(--spacing, .25rem) * .5)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
+			template: "@if (wide()) {\n    <div class=\"ui-table-filters-panel ui-table-filters-panel--card\">\n        <ng-container *ngTemplateOutlet=\"body; context: { $implicit: true }\" />\n    </div>\n} @else {\n    <ui-button\n        appearance=\"white\"\n        intent=\"secondary\"\n        size=\"sm\"\n        classes=\"gap-x-2 h-9.5 py-0!\"\n        (click)=\"drawer.isOpen.set(true)\"\n    >\n        Filters\n        @if (appliedCount()) {\n            <ui-badge appearance=\"soft\" size=\"xs\" class=\"ui-text-caption\">{{\n                    appliedCount()\n                }}</ui-badge>\n        }\n    </ui-button>\n\n    <ui-drawer #drawer label=\"Filters\">\n        <button\n            drawer-actions\n            type=\"button\"\n            class=\"ui-table-filters-clear ui-text-body-alt\"\n            [class.invisible]=\"!anyApplied()\"\n            (click)=\"clearAll()\"\n        >\n            Clear all\n        </button>\n\n        <div class=\"ui-table-filters-panel\">\n            <ng-container\n                *ngTemplateOutlet=\"body; context: { $implicit: false }\"\n            />\n        </div>\n    </ui-drawer>\n}\n\n<ng-template #body let-showHeader>\n    @if (showHeader) {\n        <div class=\"ui-table-filters-header\">\n            <span class=\"ui-table-filters-title ui-text-body\">\n                Filters\n            </span>\n\n            <button\n                type=\"button\"\n                class=\"ui-table-filters-clear ui-text-body-alt\"\n                [class.invisible]=\"!anyApplied()\"\n                (click)=\"clearAll()\"\n            >\n                Clear all\n            </button>\n        </div>\n    }\n\n    @for (facet of facets(); track facet.id) {\n        <fieldset class=\"ui-table-filters-facet\">\n            <legend class=\"ui-table-filters-legend ui-text-body-alt\">\n                {{ facet.label }}\n            </legend>\n\n            <div\n                class=\"ui-table-filters-choices\"\n                [id]=\"groupName(facet) + '-options'\"\n            >\n                @switch (facet.kind) {\n                    @case ('options') {\n                        @if (facet.multiple) {\n                            @for (option of facet.options; track option.value; let index = $index) {\n                                @if (isShown(facet, option, index)) {\n                                    <label\n                                        class=\"ui-table-filters-choice ui-text-body-alt\"\n                                        [for]=\"choiceId(facet, index)\"\n                                    >\n                                        <ui-checkbox\n                                            [id]=\"choiceId(facet, index)\"\n                                            [value]=\"isChecked(facet, option)\"\n                                            (valueChange)=\"check(facet, option, $event)\"\n                                        />\n                                        <span class=\"truncate\">{{\n                                                option.label\n                                            }}</span>\n                                    </label>\n                                }\n                            }\n                        } @else {\n                            <label\n                                class=\"ui-table-filters-choice ui-text-body-alt\"\n                                [for]=\"choiceId(facet, 'any')\"\n                            >\n                                <ui-radio\n                                    [id]=\"choiceId(facet, 'any')\"\n                                    [value]=\"picked(facet)\"\n                                    (valueChange)=\"pick(facet, $event)\"\n                                    [option]=\"null\"\n                                    [name]=\"groupName(facet)\"\n                                />\n                                <span class=\"truncate\">Any</span>\n                            </label>\n\n                            @for (option of facet.options; track option.value; let index = $index) {\n                                @if (isShown(facet, option, index)) {\n                                    <label\n                                        class=\"ui-table-filters-choice ui-text-body-alt\"\n                                        [for]=\"choiceId(facet, index)\"\n                                    >\n                                        <ui-radio\n                                            [id]=\"choiceId(facet, index)\"\n                                            [value]=\"picked(facet)\"\n                                            (valueChange)=\"pick(facet, $event)\"\n                                            [option]=\"option.value\"\n                                            [name]=\"groupName(facet)\"\n                                        />\n                                        <span class=\"truncate\">{{\n                                                option.label\n                                            }}</span>\n                                    </label>\n                                }\n                            }\n                        }\n                    }\n                    @case ('dateRange') {\n                        <label\n                            class=\"ui-table-filters-choice ui-text-body-alt\"\n                            [for]=\"choiceId(facet, 'any')\"\n                        >\n                            <ui-radio\n                                [id]=\"choiceId(facet, 'any')\"\n                                [value]=\"dateMode(facet)\"\n                                (valueChange)=\"pickDate(facet, $event)\"\n                                [option]=\"anyDate\"\n                                [name]=\"groupName(facet)\"\n                            />\n                            <span class=\"truncate\">Any time</span>\n                        </label>\n\n                        @for (preset of facet.presets ?? []; track preset.label; let index = $index) {\n                            <label\n                                class=\"ui-table-filters-choice ui-text-body-alt\"\n                                [for]=\"choiceId(facet, index)\"\n                            >\n                                <ui-radio\n                                    [id]=\"choiceId(facet, index)\"\n                                    [value]=\"dateMode(facet)\"\n                                    (valueChange)=\"pickDate(facet, $event)\"\n                                    [option]=\"index\"\n                                    [name]=\"groupName(facet)\"\n                                />\n                                <span class=\"truncate\">{{ preset.label }}</span>\n                            </label>\n                        }\n\n                        <label\n                            class=\"ui-table-filters-choice ui-text-body-alt\"\n                            [for]=\"choiceId(facet, 'custom')\"\n                        >\n                            <ui-radio\n                                [id]=\"choiceId(facet, 'custom')\"\n                                [value]=\"dateMode(facet)\"\n                                (valueChange)=\"pickDate(facet, $event)\"\n                                [option]=\"customDate\"\n                                [name]=\"groupName(facet)\"\n                            />\n                            <span class=\"truncate\">Custom range</span>\n                        </label>\n\n                        @if (dateMode(facet) === 'custom') {\n                            <label\n                                class=\"sr-only\"\n                                [for]=\"groupName(facet) + '-range'\"\n                            >{{ facet.label }} range</label>\n                            <ui-date-range-picker\n                                class=\"ui-table-filters-range\"\n                                [id]=\"groupName(facet) + '-range'\"\n                                [value]=\"range(facet)\"\n                                (valueChange)=\"setRange(facet, $event)\"\n                                [placeholder]=\"facet.placeholder ?? 'Select dates'\"\n                                [min]=\"facet.min ?? null\"\n                                [max]=\"facet.max ?? null\"\n                            />\n                        }\n                    }\n                }\n            </div>\n\n            @if (facet.kind === 'options' && hiddenCount(facet)) {\n                <button\n                    type=\"button\"\n                    class=\"ui-table-filters-more ui-text-body-alt\"\n                    [attr.aria-expanded]=\"isExpanded(facet)\"\n                    [attr.aria-controls]=\"groupName(facet) + '-options'\"\n                    (click)=\"toggleExpanded(facet)\"\n                >\n                    @if (isExpanded(facet)) {\n                        Show fewer\n                    } @else {\n                        Show {{ hiddenCount(facet) }} more\n                    }\n                </button>\n            }\n        </fieldset>\n    }\n</ng-template>\n",
+			styles: ["@layer properties;.ui-table-filters-panel{display:flex;flex-direction:column;row-gap:calc(var(--spacing, .25rem) * 6)}.ui-table-filters-panel--card{border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--card-line);background-color:var(--card);padding:calc(var(--spacing, .25rem) * 5)}.ui-table-filters-header{display:flex;align-items:center;justify-content:space-between;column-gap:calc(var(--spacing, .25rem) * 3)}.ui-table-filters-title{display:flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--foreground)}.ui-table-filters-clear{cursor:pointer;color:var(--muted-foreground-1)}.ui-table-filters-clear:hover{color:var(--foreground)}.ui-table-filters-clear:focus-visible{text-decoration-line:underline}.ui-table-filters-clear:focus-visible{--tw-outline-style: none;outline-style:none}.ui-table-filters-facet{margin:0;min-width:0px;border-style:var(--tw-border-style);border-width:0px;padding:0}.ui-table-filters-legend{margin-bottom:calc(var(--spacing, .25rem) * 3);padding:0;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--foreground)}.ui-table-filters-choices{display:flex;flex-direction:column;row-gap:calc(var(--spacing, .25rem) * 2.5)}.ui-table-filters-choice{display:flex;min-width:0px;cursor:pointer;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2.5);color:var(--muted-foreground-2)}.ui-table-filters-choice:hover{color:var(--foreground)}.ui-table-filters-range{margin-top:calc(var(--spacing, .25rem) * .5)}.ui-table-filters-more{margin-top:calc(var(--spacing, .25rem) * 2.5);cursor:pointer;color:var(--color-primary-500, var(--color-blue-500))}.ui-table-filters-more:hover{color:var(--color-primary-600, var(--color-blue-600))}.ui-table-filters-more:hover{text-decoration-line:underline}.ui-table-filters-more:focus-visible{color:var(--color-primary-600, var(--color-blue-600))}.ui-table-filters-more:focus-visible{text-decoration-line:underline}.ui-table-filters-more:focus-visible{--tw-outline-style: none;outline-style:none}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -14353,6 +14661,6 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-export { AlertAppearances, AlertIntents, AvatarSizes, BadgeAppearances, BadgeIntents, BadgeSizes, BarChartOrientations, ButtonAppearances, ButtonGroupAppearances, ButtonIntents, ButtonSizes, ButtonTypes, CHART_COLOURS, CHART_INK, CHART_INK_DARK, CHART_MAX_LINE_SERIES, CHART_MAX_SERIES, CHART_PALETTE, CHART_PALETTE_DARK, CalendarModes, CardHeadingLevels, CardRadii, FileRejectionReasons, InputAriaAutocompletes, InputAriaHasPopups, InputModes, InputTypes, LineChartCurves, MoneySignDisplays, PRIVATE_TEXT_LABEL, PRIVATE_TEXT_MASK, PieChartVariants, ProgressIntents, ProgressLabelPositions, ProgressOrientations, ProgressShapes, ProgressSizes, SelectLocalDataSource, SelectMultipleDisplays, SelectRemoteDataSource, SkeletonShapes, TableFiltersBreakpoints, TableLocalDataSource, TableRemoteDataSource, TextareaResizeOptions, ToastIntents, ToasterPositions, UI_BUTTON_GROUP, UI_FORMAT, UI_FORMAT_DEFAULTS, UI_LOADING_TYPES, UI_PRIVACY, UI_THEME_CONFIG, UiAlertComponent, UiAvatarComponent, UiBadgeComponent, UiBarChartComponent, UiButtonComponent, UiButtonGroupComponent, UiCalendarComponent, UiCardComponent, UiCardHeaderComponent, UiChartComponent, UiChartFrameComponent, UiChartLegendComponent, UiChartTableComponent, UiCheckboxComponent, UiColourComponent, UiContainerComponent, UiCounterComponent, UiDateRangePickerComponent, UiDatepickerComponent, UiDrawerComponent, UiDropdownButtonComponent, UiDropdownComponent, UiDropdownDirective, UiDropdownMenuComponent, UiDropzoneComponent, UiFieldComponent, UiFileInputComponent, UiInputAddonComponent, UiInputComponent, UiInputGroupComponent, UiKpiComponent, UiLayoutComponent, UiLineChartComponent, UiLoadingComponent, UiModalComponent, UiMoneyComponent, UiOverlayComponent, UiPaginationComponent, UiPieChartComponent, UiPrivacies, UiPrivateComponent, UiProgressComponent, UiRadioComponent, UiSearchComponent, UiSegmentedComponent, UiSelectComponent, UiSidebarComponent, UiSidebarGroupComponent, UiSidebarItemComponent, UiSkeletonComponent, UiStatComponent, UiSwitchComponent, UiTabComponent, UiTabDirective, UiTableComponent, UiTableFiltersComponent, UiTableRegistry, UiTextareaComponent, UiThemeService, UiThemeSwitchComponent, UiTimeSelectComponent, UiToastComponent, UiToastService, UiToasterComponent, UiTooltipComponent, UiUserMenuComponent, WeekStarts, chartColour, chartInk, chartSeriesStyle, defaultDateRangePresets, financialYearPreset, injectMoneyFormatter, injectPrivateText, lastDaysPreset, maskMoney, moneyFormatterParts, monthPreset, pickedChartColour, provideUiFormat, provideUiPrivacy, provideUiTheme, radiusClasses, thisWeekPreset, todayPreset, yearPreset };
+export { AlertAppearances, AlertIntents, AvatarSizes, BadgeAppearances, BadgeIntents, BadgeSizes, BarChartOrientations, ButtonAppearances, ButtonGroupAppearances, ButtonIntents, ButtonSizes, ButtonTypes, CHART_COLOURS, CHART_INK, CHART_INK_DARK, CHART_MAX_LINE_SERIES, CHART_MAX_SERIES, CHART_PALETTE, CHART_PALETTE_DARK, CalendarModes, CardHeadingLevels, CardRadii, DisclosureTriggerAppearances, FileRejectionReasons, InputAriaAutocompletes, InputAriaHasPopups, InputModes, InputTypes, LineChartCurves, MoneySignDisplays, PRIVATE_TEXT_LABEL, PRIVATE_TEXT_MASK, PieChartVariants, ProgressIntents, ProgressLabelPositions, ProgressOrientations, ProgressShapes, ProgressSizes, SelectLocalDataSource, SelectMultipleDisplays, SelectRemoteDataSource, SkeletonShapes, TableFiltersBreakpoints, TableLocalDataSource, TableRemoteDataSource, TextareaResizeOptions, ToastIntents, ToasterPositions, UI_BUTTON_GROUP, UI_FORMAT, UI_FORMAT_DEFAULTS, UI_LOADING_TYPES, UI_PRIVACY, UI_THEME_CONFIG, UiAlertComponent, UiAvatarComponent, UiBadgeComponent, UiBarChartComponent, UiButtonComponent, UiButtonGroupComponent, UiCalendarComponent, UiCardComponent, UiCardHeaderComponent, UiChartComponent, UiChartFrameComponent, UiChartLegendComponent, UiChartTableComponent, UiCheckboxComponent, UiColourComponent, UiContainerComponent, UiCounterComponent, UiDateRangePickerComponent, UiDatepickerComponent, UiDisclosureChevronComponent, UiDisclosureComponent, UiDisclosurePanelDirective, UiDisclosureTriggerComponent, UiDrawerComponent, UiDropdownButtonComponent, UiDropdownComponent, UiDropdownDirective, UiDropdownMenuComponent, UiDropzoneComponent, UiFieldComponent, UiFileInputComponent, UiInputAddonComponent, UiInputComponent, UiInputGroupComponent, UiKpiComponent, UiLayoutComponent, UiLineChartComponent, UiLoadingComponent, UiModalComponent, UiMoneyComponent, UiOverlayComponent, UiPaginationComponent, UiPieChartComponent, UiPrivacies, UiPrivateComponent, UiProgressComponent, UiRadioComponent, UiSearchComponent, UiSegmentedComponent, UiSelectComponent, UiSidebarComponent, UiSidebarGroupComponent, UiSidebarItemComponent, UiSkeletonComponent, UiStatComponent, UiSwitchComponent, UiTabComponent, UiTabDirective, UiTableComponent, UiTableFiltersComponent, UiTableRegistry, UiTextareaComponent, UiThemeService, UiThemeSwitchComponent, UiTimeSelectComponent, UiToastComponent, UiToastService, UiToasterComponent, UiTooltipComponent, UiUserMenuComponent, WeekStarts, chartColour, chartInk, chartSeriesStyle, defaultDateRangePresets, financialYearPreset, injectMoneyFormatter, injectPrivateText, lastDaysPreset, maskMoney, moneyFormatterParts, monthPreset, pickedChartColour, provideUiFormat, provideUiPrivacy, provideUiTheme, radiusClasses, thisWeekPreset, todayPreset, yearPreset };
 
 //# sourceMappingURL=area8975-ui.mjs.map