@area8975/ui 0.2.2-dev.49 → 0.2.2-dev.50

package/fesm2022/area8975-ui-table-filters.mjs

@@ -0,0 +1,499 @@
+import { DOCUMENT, NgTemplateOutlet } from "@angular/common";
+import * as i0 from "@angular/core";
+import { Component, computed, effect, inject, input, model, signal, untracked } from "@angular/core";
+import { UiBadgeComponent } from "@area8975/ui/badge";
+import { UiButtonComponent } from "@area8975/ui/button";
+import { UiCheckboxComponent } from "@area8975/ui/checkbox";
+import { UiDateRangePickerComponent } from "@area8975/ui/date-range-picker";
+import { UiDrawerComponent } from "@area8975/ui/drawer";
+import { UiInputComponent } from "@area8975/ui/input";
+import { UiRadioComponent } from "@area8975/ui/radio";
+import { UiTableRegistry } from "@area8975/ui/table";
+const TableFiltersBreakpoints = {
+	sm: "40rem",
+	md: "48rem",
+	lg: "64rem",
+	xl: "80rem",
+	"2xl": "96rem"
+};
+let nextId = 0;
+var UiTableFiltersComponent = class UiTableFiltersComponent {
+	registry = inject(UiTableRegistry);
+	facets = input.required(...ngDevMode ? [{ debugName: "facets" }] : /* istanbul ignore next */ []);
+	table = input(null, ...ngDevMode ? [{ debugName: "table" }] : /* istanbul ignore next */ []);
+	value = model({}, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	collapseBelow = input("lg", ...ngDevMode ? [{ debugName: "collapseBelow" }] : /* istanbul ignore next */ []);
+	idPrefix = `ui-table-filters-${nextId++}`;
+	anyRange = "any";
+	customRange = "custom";
+	customRanges = signal(/* @__PURE__ */ new Set(), ...ngDevMode ? [{ debugName: "customRanges" }] : /* istanbul ignore next */ []);
+	amountDrafts = signal({}, ...ngDevMode ? [{ debugName: "amountDrafts" }] : /* 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;
+	}, ...ngDevMode ? [{ debugName: "linked" }] : /* istanbul ignore next */ []);
+	appliedCount = computed(() => this.facets().filter((facet) => facet.id in this.value()).length, ...ngDevMode ? [{ debugName: "appliedCount" }] : /* istanbul ignore next */ []);
+	anyApplied = computed(() => this.appliedCount() > 0, ...ngDevMode ? [{ debugName: "anyApplied" }] : /* istanbul ignore next */ []);
+	window = inject(DOCUMENT).defaultView;
+	wide = signal(true, ...ngDevMode ? [{ debugName: "wide" }] : /* istanbul ignore next */ []);
+	constructor() {
+		effect((onCleanup) => {
+			const media = this.window?.matchMedia?.(`(min-width: ${TableFiltersBreakpoints[this.collapseBelow()]})`);
+			if (!media) return;
+			const onChange = (event) => this.wide.set(event.matches);
+			this.wide.set(media.matches);
+			media.addEventListener("change", onChange);
+			onCleanup(() => media.removeEventListener("change", onChange));
+		});
+		let previous = null;
+		effect(() => {
+			const table = this.linked();
+			const filters = table?.filters() ?? {};
+			untracked(() => {
+				const justLinked = table !== previous;
+				previous = table;
+				if (!table) return;
+				if (justLinked && this.anyApplied() && !this.hasAny(filters)) {
+					table.filters.set({
+						...filters,
+						...this.ownFilters(this.value())
+					});
+					return;
+				}
+				this.value.set(filters);
+			});
+		});
+	}
+	groupName(facet) {
+		return `${this.idPrefix}-${facet.id}`;
+	}
+	choiceId(facet, choice) {
+		return `${this.groupName(facet)}-${choice}`;
+	}
+	picked(facet) {
+		return this.value()[facet.id] ?? null;
+	}
+	pick(facet, value) {
+		this.apply(facet.id, value ?? void 0);
+	}
+	isChecked(facet, option) {
+		const applied = this.value()[facet.id];
+		return Array.isArray(applied) && applied.includes(option.value);
+	}
+	check(facet, option, checked) {
+		const applied = this.value()[facet.id];
+		const picked = (Array.isArray(applied) ? applied : []).filter((value) => value !== option.value);
+		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,
+			end: null
+		};
+	}
+	dateMode(facet) {
+		if (this.customRanges().has(facet.id)) return "custom";
+		const applied = this.range(facet);
+		if (!applied.start) return "any";
+		const index = (facet.presets ?? []).findIndex((preset) => {
+			const range = preset.range();
+			return range.start === applied.start && range.end === applied.end;
+		});
+		return index === -1 ? "custom" : index;
+	}
+	pickDate(facet, mode) {
+		this.setCustom(facet.id, mode === "custom");
+		if (mode === "any") this.apply(facet.id, void 0);
+		else if (mode !== "custom") this.apply(facet.id, facet.presets?.[mode]?.range());
+	}
+	setRange(facet, range) {
+		this.apply(facet.id, range.start ? range : void 0);
+	}
+	amountRange(facet) {
+		return this.value()[facet.id];
+	}
+	amountMode(facet) {
+		if (this.customRanges().has(facet.id)) return "custom";
+		const applied = this.amountRange(facet);
+		if (!applied) return "any";
+		const index = (facet.presets ?? []).findIndex((preset) => isSameAmountRange(preset.range, applied));
+		return index === -1 ? "custom" : index;
+	}
+	pickAmount(facet, mode) {
+		this.setCustom(facet.id, mode === "custom");
+		this.forgetAmountDraft(facet.id);
+		if (mode === "any") this.apply(facet.id, void 0);
+		else if (mode !== "custom") this.apply(facet.id, facet.presets?.[mode]?.range);
+	}
+	amountText(facet, end) {
+		const draft = this.amountDrafts()[facet.id];
+		const applied = this.amountRange(facet);
+		if (draft && isSameAmountRange(amountRangeFrom(draft), applied)) return draft[end];
+		return applied?.[end]?.toString() ?? "";
+	}
+	typeAmount(facet, end, text) {
+		const draft = {
+			min: this.amountText(facet, "min"),
+			max: this.amountText(facet, "max"),
+			[end]: text
+		};
+		this.amountDrafts.update((drafts) => ({
+			...drafts,
+			[facet.id]: draft
+		}));
+		this.apply(facet.id, amountRangeFrom(draft));
+	}
+	isAmountValid(facet, end) {
+		const draft = this.amountDrafts()[facet.id];
+		if (!draft) return true;
+		return isReadableAmount(draft[end]) && !isBackwards(draft);
+	}
+	clearAll() {
+		this.customRanges.set(/* @__PURE__ */ new Set());
+		this.amountDrafts.set({});
+		this.write(this.withoutOwn(this.currentFilters()));
+	}
+	setCustom(id, custom) {
+		this.customRanges.update((ids) => {
+			const next = new Set(ids);
+			if (custom) next.add(id);
+			else next.delete(id);
+			return next;
+		});
+	}
+	forgetAmountDraft(id) {
+		this.amountDrafts.update((drafts) => Object.fromEntries(Object.entries(drafts).filter(([draftId]) => draftId !== id)));
+	}
+	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];
+		else next[id] = applied;
+		this.write(next);
+	}
+	write(filters) {
+		this.value.set(filters);
+		this.linked()?.filters.set(filters);
+	}
+	currentFilters() {
+		return this.linked()?.filters() ?? this.value();
+	}
+	ownFilters(filters) {
+		const ids = new Set(this.facets().map((facet) => facet.id));
+		return Object.fromEntries(Object.entries(filters).filter(([id]) => ids.has(id)));
+	}
+	withoutOwn(filters) {
+		const ids = new Set(this.facets().map((facet) => facet.id));
+		return Object.fromEntries(Object.entries(filters).filter(([id]) => !ids.has(id)));
+	}
+	hasAny(filters) {
+		return Object.keys(this.ownFilters(filters)).length > 0;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiTableFiltersComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: UiTableFiltersComponent,
+		isStandalone: true,
+		selector: "ui-table-filters",
+		inputs: {
+			facets: {
+				classPropertyName: "facets",
+				publicName: "facets",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			table: {
+				classPropertyName: "table",
+				publicName: "table",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			collapseBelow: {
+				classPropertyName: "collapseBelow",
+				publicName: "collapseBelow",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		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\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]=\"anyRange\"\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]=\"customRange\"\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                    @case ('amountRange') {\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]=\"amountMode(facet)\"\n                                (valueChange)=\"pickAmount(facet, $event)\"\n                                [option]=\"anyRange\"\n                                [name]=\"groupName(facet)\"\n                            />\n                            <span class=\"truncate\">Any amount</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]=\"amountMode(facet)\"\n                                    (valueChange)=\"pickAmount(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]=\"amountMode(facet)\"\n                                (valueChange)=\"pickAmount(facet, $event)\"\n                                [option]=\"customRange\"\n                                [name]=\"groupName(facet)\"\n                            />\n                            <span class=\"truncate\">Custom range</span>\n                        </label>\n\n                        @if (amountMode(facet) === 'custom') {\n                            <div class=\"ui-table-filters-amounts\">\n                                <ui-input\n                                    class=\"ui-table-filters-amount ui-text-body-alt\"\n                                    [id]=\"groupName(facet) + '-min'\"\n                                    inputmode=\"decimal\"\n                                    placeholder=\"Min\"\n                                    [ariaLabel]=\"facet.label + ' from'\"\n                                    [value]=\"amountText(facet, 'min')\"\n                                    (valueChange)=\"typeAmount(facet, 'min', $event)\"\n                                    [validationState]=\"isAmountValid(facet, 'min') ? null : false\"\n                                >\n                                    @if (facet.prefix) {\n                                        <ng-template #leading>\n                                            <span class=\"ui-table-filters-prefix\">{{\n                                                    facet.prefix\n                                                }}</span>\n                                        </ng-template>\n                                    }\n                                </ui-input>\n\n                                <span class=\"ui-table-filters-to ui-text-body-alt\">to</span>\n\n                                <ui-input\n                                    class=\"ui-table-filters-amount ui-text-body-alt\"\n                                    [id]=\"groupName(facet) + '-max'\"\n                                    inputmode=\"decimal\"\n                                    placeholder=\"Max\"\n                                    [ariaLabel]=\"facet.label + ' up to'\"\n                                    [value]=\"amountText(facet, 'max')\"\n                                    (valueChange)=\"typeAmount(facet, 'max', $event)\"\n                                    [validationState]=\"isAmountValid(facet, 'max') ? null : false\"\n                                >\n                                    @if (facet.prefix) {\n                                        <ng-template #leading>\n                                            <span class=\"ui-table-filters-prefix\">{{\n                                                    facet.prefix\n                                                }}</span>\n                                        </ng-template>\n                                    }\n                                </ui-input>\n                            </div>\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-amounts{margin-top:calc(var(--spacing, .25rem) * .5);display:flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2)}.ui-table-filters-amount{min-width:0px;flex:1}.ui-table-filters-prefix{padding-inline-start:calc(var(--spacing, .25rem) * 3);color:var(--muted-foreground-1)}.ui-table-filters-to{flex-shrink:0;color:var(--muted-foreground-1)}.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",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				kind: "component",
+				type: UiButtonComponent,
+				selector: "ui-button",
+				inputs: [
+					"appearance",
+					"intent",
+					"size",
+					"classes",
+					"type",
+					"ariaLabel",
+					"disabled",
+					"loading"
+				]
+			},
+			{
+				kind: "component",
+				type: UiBadgeComponent,
+				selector: "ui-badge",
+				inputs: [
+					"appearance",
+					"intent",
+					"size"
+				]
+			},
+			{
+				kind: "component",
+				type: UiDrawerComponent,
+				selector: "ui-drawer",
+				inputs: [
+					"enableBackdrop",
+					"label",
+					"subLabel"
+				]
+			},
+			{
+				kind: "component",
+				type: UiCheckboxComponent,
+				selector: "ui-checkbox",
+				inputs: [
+					"value",
+					"id",
+					"name",
+					"required",
+					"disabled",
+					"indeterminate",
+					"validationState",
+					"classes"
+				],
+				outputs: ["valueChange", "validationStateChange"]
+			},
+			{
+				kind: "component",
+				type: UiRadioComponent,
+				selector: "ui-radio",
+				inputs: [
+					"value",
+					"option",
+					"id",
+					"name",
+					"required",
+					"disabled",
+					"validationState",
+					"compareWith"
+				],
+				outputs: ["valueChange", "validationStateChange"]
+			},
+			{
+				kind: "component",
+				type: UiInputComponent,
+				selector: "ui-input",
+				inputs: [
+					"value",
+					"classes",
+					"type",
+					"id",
+					"name",
+					"placeholder",
+					"autocomplete",
+					"inputmode",
+					"required",
+					"disabled",
+					"readonly",
+					"validationState",
+					"min",
+					"max",
+					"step",
+					"pattern",
+					"minlength",
+					"maxlength",
+					"autofocus",
+					"spellcheck",
+					"revealable",
+					"list",
+					"ariaLabel",
+					"describedBy",
+					"inputRole",
+					"ariaExpanded",
+					"ariaControls",
+					"ariaActiveDescendant",
+					"ariaAutocomplete",
+					"ariaHasPopup"
+				],
+				outputs: [
+					"valueChange",
+					"validationStateChange",
+					"focused",
+					"blurred"
+				]
+			},
+			{
+				kind: "component",
+				type: UiDateRangePickerComponent,
+				selector: "ui-date-range-picker",
+				inputs: [
+					"value",
+					"id",
+					"placeholder",
+					"disabled",
+					"clearable",
+					"validationState",
+					"describedBy",
+					"min",
+					"max",
+					"isDateDisabled",
+					"weekStart",
+					"locale",
+					"format",
+					"presets"
+				],
+				outputs: ["valueChange"]
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiTableFiltersComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-table-filters",
+			imports: [
+				NgTemplateOutlet,
+				UiButtonComponent,
+				UiBadgeComponent,
+				UiDrawerComponent,
+				UiCheckboxComponent,
+				UiRadioComponent,
+				UiInputComponent,
+				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\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]=\"anyRange\"\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]=\"customRange\"\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                    @case ('amountRange') {\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]=\"amountMode(facet)\"\n                                (valueChange)=\"pickAmount(facet, $event)\"\n                                [option]=\"anyRange\"\n                                [name]=\"groupName(facet)\"\n                            />\n                            <span class=\"truncate\">Any amount</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]=\"amountMode(facet)\"\n                                    (valueChange)=\"pickAmount(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]=\"amountMode(facet)\"\n                                (valueChange)=\"pickAmount(facet, $event)\"\n                                [option]=\"customRange\"\n                                [name]=\"groupName(facet)\"\n                            />\n                            <span class=\"truncate\">Custom range</span>\n                        </label>\n\n                        @if (amountMode(facet) === 'custom') {\n                            <div class=\"ui-table-filters-amounts\">\n                                <ui-input\n                                    class=\"ui-table-filters-amount ui-text-body-alt\"\n                                    [id]=\"groupName(facet) + '-min'\"\n                                    inputmode=\"decimal\"\n                                    placeholder=\"Min\"\n                                    [ariaLabel]=\"facet.label + ' from'\"\n                                    [value]=\"amountText(facet, 'min')\"\n                                    (valueChange)=\"typeAmount(facet, 'min', $event)\"\n                                    [validationState]=\"isAmountValid(facet, 'min') ? null : false\"\n                                >\n                                    @if (facet.prefix) {\n                                        <ng-template #leading>\n                                            <span class=\"ui-table-filters-prefix\">{{\n                                                    facet.prefix\n                                                }}</span>\n                                        </ng-template>\n                                    }\n                                </ui-input>\n\n                                <span class=\"ui-table-filters-to ui-text-body-alt\">to</span>\n\n                                <ui-input\n                                    class=\"ui-table-filters-amount ui-text-body-alt\"\n                                    [id]=\"groupName(facet) + '-max'\"\n                                    inputmode=\"decimal\"\n                                    placeholder=\"Max\"\n                                    [ariaLabel]=\"facet.label + ' up to'\"\n                                    [value]=\"amountText(facet, 'max')\"\n                                    (valueChange)=\"typeAmount(facet, 'max', $event)\"\n                                    [validationState]=\"isAmountValid(facet, 'max') ? null : false\"\n                                >\n                                    @if (facet.prefix) {\n                                        <ng-template #leading>\n                                            <span class=\"ui-table-filters-prefix\">{{\n                                                    facet.prefix\n                                                }}</span>\n                                        </ng-template>\n                                    }\n                                </ui-input>\n                            </div>\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-amounts{margin-top:calc(var(--spacing, .25rem) * .5);display:flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2)}.ui-table-filters-amount{min-width:0px;flex:1}.ui-table-filters-prefix{padding-inline-start:calc(var(--spacing, .25rem) * 3);color:var(--muted-foreground-1)}.ui-table-filters-to{flex-shrink:0;color:var(--muted-foreground-1)}.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: () => [],
+	propDecorators: {
+		facets: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "facets",
+				required: true
+			}]
+		}],
+		table: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "table",
+				required: false
+			}]
+		}],
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		collapseBelow: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "collapseBelow",
+				required: false
+			}]
+		}]
+	}
+});
+function amountFrom(text) {
+	const digits = text.trim().replaceAll(",", "");
+	if (!digits) return null;
+	const amount = Number(digits);
+	return Number.isFinite(amount) ? amount : null;
+}
+function isReadableAmount(text) {
+	return !text.trim() || amountFrom(text) !== null;
+}
+function isBackwards(draft) {
+	const min = amountFrom(draft.min);
+	const max = amountFrom(draft.max);
+	return min !== null && max !== null && min > max;
+}
+function amountRangeFrom(draft) {
+	const range = {
+		min: amountFrom(draft.min),
+		max: amountFrom(draft.max)
+	};
+	return range.min === null && range.max === null || isBackwards(draft) ? void 0 : range;
+}
+function isSameAmountRange(first, second) {
+	return (first?.min ?? null) === (second?.min ?? null) && (first?.max ?? null) === (second?.max ?? null);
+}
+export { TableFiltersBreakpoints, UiTableFiltersComponent };
+
+//# sourceMappingURL=area8975-ui-table-filters.mjs.map