@area8975/ui 0.2.2-dev.39 → 0.2.2-dev.40
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/area8975-ui.mjs +122 -10
- package/fesm2022/area8975-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/types/area8975-ui.d.ts +34 -7
package/fesm2022/area8975-ui.mjs
CHANGED
|
@@ -13953,9 +13953,10 @@ var UiTableFiltersComponent = class UiTableFiltersComponent {
|
|
|
13953
13953
|
value = model({}, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
|
|
13954
13954
|
collapseBelow = input("lg", ...ngDevMode ? [{ debugName: "collapseBelow" }] : /* istanbul ignore next */ []);
|
|
13955
13955
|
idPrefix = `ui-table-filters-${nextId++}`;
|
|
13956
|
-
|
|
13957
|
-
|
|
13958
|
-
|
|
13956
|
+
anyRange = "any";
|
|
13957
|
+
customRange = "custom";
|
|
13958
|
+
customRanges = signal(/* @__PURE__ */ new Set(), ...ngDevMode ? [{ debugName: "customRanges" }] : /* istanbul ignore next */ []);
|
|
13959
|
+
amountDrafts = signal({}, ...ngDevMode ? [{ debugName: "amountDrafts" }] : /* istanbul ignore next */ []);
|
|
13959
13960
|
expanded = signal(/* @__PURE__ */ new Set(), ...ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []);
|
|
13960
13961
|
linked = computed(() => {
|
|
13961
13962
|
const id = this.table();
|
|
@@ -14038,7 +14039,7 @@ var UiTableFiltersComponent = class UiTableFiltersComponent {
|
|
|
14038
14039
|
};
|
|
14039
14040
|
}
|
|
14040
14041
|
dateMode(facet) {
|
|
14041
|
-
if (this.
|
|
14042
|
+
if (this.customRanges().has(facet.id)) return "custom";
|
|
14042
14043
|
const applied = this.range(facet);
|
|
14043
14044
|
if (!applied.start) return "any";
|
|
14044
14045
|
const index = (facet.presets ?? []).findIndex((preset) => {
|
|
@@ -14055,18 +14056,61 @@ var UiTableFiltersComponent = class UiTableFiltersComponent {
|
|
|
14055
14056
|
setRange(facet, range) {
|
|
14056
14057
|
this.apply(facet.id, range.start ? range : void 0);
|
|
14057
14058
|
}
|
|
14059
|
+
amountRange(facet) {
|
|
14060
|
+
return this.value()[facet.id];
|
|
14061
|
+
}
|
|
14062
|
+
amountMode(facet) {
|
|
14063
|
+
if (this.customRanges().has(facet.id)) return "custom";
|
|
14064
|
+
const applied = this.amountRange(facet);
|
|
14065
|
+
if (!applied) return "any";
|
|
14066
|
+
const index = (facet.presets ?? []).findIndex((preset) => isSameAmountRange(preset.range, applied));
|
|
14067
|
+
return index === -1 ? "custom" : index;
|
|
14068
|
+
}
|
|
14069
|
+
pickAmount(facet, mode) {
|
|
14070
|
+
this.setCustom(facet.id, mode === "custom");
|
|
14071
|
+
this.forgetAmountDraft(facet.id);
|
|
14072
|
+
if (mode === "any") this.apply(facet.id, void 0);
|
|
14073
|
+
else if (mode !== "custom") this.apply(facet.id, facet.presets?.[mode]?.range);
|
|
14074
|
+
}
|
|
14075
|
+
amountText(facet, end) {
|
|
14076
|
+
const draft = this.amountDrafts()[facet.id];
|
|
14077
|
+
const applied = this.amountRange(facet);
|
|
14078
|
+
if (draft && isSameAmountRange(amountRangeFrom(draft), applied)) return draft[end];
|
|
14079
|
+
return applied?.[end]?.toString() ?? "";
|
|
14080
|
+
}
|
|
14081
|
+
typeAmount(facet, end, text) {
|
|
14082
|
+
const draft = {
|
|
14083
|
+
min: this.amountText(facet, "min"),
|
|
14084
|
+
max: this.amountText(facet, "max"),
|
|
14085
|
+
[end]: text
|
|
14086
|
+
};
|
|
14087
|
+
this.amountDrafts.update((drafts) => ({
|
|
14088
|
+
...drafts,
|
|
14089
|
+
[facet.id]: draft
|
|
14090
|
+
}));
|
|
14091
|
+
this.apply(facet.id, amountRangeFrom(draft));
|
|
14092
|
+
}
|
|
14093
|
+
isAmountValid(facet, end) {
|
|
14094
|
+
const draft = this.amountDrafts()[facet.id];
|
|
14095
|
+
if (!draft) return true;
|
|
14096
|
+
return isReadableAmount(draft[end]) && !isBackwards(draft);
|
|
14097
|
+
}
|
|
14058
14098
|
clearAll() {
|
|
14059
|
-
this.
|
|
14099
|
+
this.customRanges.set(/* @__PURE__ */ new Set());
|
|
14100
|
+
this.amountDrafts.set({});
|
|
14060
14101
|
this.write(this.withoutOwn(this.currentFilters()));
|
|
14061
14102
|
}
|
|
14062
14103
|
setCustom(id, custom) {
|
|
14063
|
-
this.
|
|
14104
|
+
this.customRanges.update((ids) => {
|
|
14064
14105
|
const next = new Set(ids);
|
|
14065
14106
|
if (custom) next.add(id);
|
|
14066
14107
|
else next.delete(id);
|
|
14067
14108
|
return next;
|
|
14068
14109
|
});
|
|
14069
14110
|
}
|
|
14111
|
+
forgetAmountDraft(id) {
|
|
14112
|
+
this.amountDrafts.update((drafts) => Object.fromEntries(Object.entries(drafts).filter(([draftId]) => draftId !== id)));
|
|
14113
|
+
}
|
|
14070
14114
|
isPastCutoff(facet, index) {
|
|
14071
14115
|
return facet.visibleOptions !== void 0 && index >= facet.visibleOptions;
|
|
14072
14116
|
}
|
|
@@ -14144,8 +14188,8 @@ var UiTableFiltersComponent = class UiTableFiltersComponent {
|
|
|
14144
14188
|
outputs: { value: "valueChange" },
|
|
14145
14189
|
host: { classAttribute: "block" },
|
|
14146
14190
|
ngImport: i0,
|
|
14147
|
-
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",
|
|
14148
|
-
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"],
|
|
14191
|
+
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",
|
|
14192
|
+
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"],
|
|
14149
14193
|
dependencies: [
|
|
14150
14194
|
{
|
|
14151
14195
|
kind: "directive",
|
|
@@ -14224,6 +14268,49 @@ var UiTableFiltersComponent = class UiTableFiltersComponent {
|
|
|
14224
14268
|
],
|
|
14225
14269
|
outputs: ["valueChange", "validationStateChange"]
|
|
14226
14270
|
},
|
|
14271
|
+
{
|
|
14272
|
+
kind: "component",
|
|
14273
|
+
type: UiInputComponent,
|
|
14274
|
+
selector: "ui-input",
|
|
14275
|
+
inputs: [
|
|
14276
|
+
"value",
|
|
14277
|
+
"classes",
|
|
14278
|
+
"type",
|
|
14279
|
+
"id",
|
|
14280
|
+
"name",
|
|
14281
|
+
"placeholder",
|
|
14282
|
+
"autocomplete",
|
|
14283
|
+
"inputmode",
|
|
14284
|
+
"required",
|
|
14285
|
+
"disabled",
|
|
14286
|
+
"readonly",
|
|
14287
|
+
"validationState",
|
|
14288
|
+
"min",
|
|
14289
|
+
"max",
|
|
14290
|
+
"step",
|
|
14291
|
+
"pattern",
|
|
14292
|
+
"minlength",
|
|
14293
|
+
"maxlength",
|
|
14294
|
+
"autofocus",
|
|
14295
|
+
"spellcheck",
|
|
14296
|
+
"revealable",
|
|
14297
|
+
"list",
|
|
14298
|
+
"ariaLabel",
|
|
14299
|
+
"describedBy",
|
|
14300
|
+
"inputRole",
|
|
14301
|
+
"ariaExpanded",
|
|
14302
|
+
"ariaControls",
|
|
14303
|
+
"ariaActiveDescendant",
|
|
14304
|
+
"ariaAutocomplete",
|
|
14305
|
+
"ariaHasPopup"
|
|
14306
|
+
],
|
|
14307
|
+
outputs: [
|
|
14308
|
+
"valueChange",
|
|
14309
|
+
"validationStateChange",
|
|
14310
|
+
"focused",
|
|
14311
|
+
"blurred"
|
|
14312
|
+
]
|
|
14313
|
+
},
|
|
14227
14314
|
{
|
|
14228
14315
|
kind: "component",
|
|
14229
14316
|
type: UiDateRangePickerComponent,
|
|
@@ -14265,11 +14352,12 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
14265
14352
|
UiDrawerComponent,
|
|
14266
14353
|
UiCheckboxComponent,
|
|
14267
14354
|
UiRadioComponent,
|
|
14355
|
+
UiInputComponent,
|
|
14268
14356
|
UiDateRangePickerComponent
|
|
14269
14357
|
],
|
|
14270
14358
|
host: { class: "block" },
|
|
14271
|
-
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",
|
|
14272
|
-
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"]
|
|
14359
|
+
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",
|
|
14360
|
+
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"]
|
|
14273
14361
|
}]
|
|
14274
14362
|
}],
|
|
14275
14363
|
ctorParameters: () => [],
|
|
@@ -14311,6 +14399,30 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
14311
14399
|
}]
|
|
14312
14400
|
}
|
|
14313
14401
|
});
|
|
14402
|
+
function amountFrom(text) {
|
|
14403
|
+
const digits = text.trim().replaceAll(",", "");
|
|
14404
|
+
if (!digits) return null;
|
|
14405
|
+
const amount = Number(digits);
|
|
14406
|
+
return Number.isFinite(amount) ? amount : null;
|
|
14407
|
+
}
|
|
14408
|
+
function isReadableAmount(text) {
|
|
14409
|
+
return !text.trim() || amountFrom(text) !== null;
|
|
14410
|
+
}
|
|
14411
|
+
function isBackwards(draft) {
|
|
14412
|
+
const min = amountFrom(draft.min);
|
|
14413
|
+
const max = amountFrom(draft.max);
|
|
14414
|
+
return min !== null && max !== null && min > max;
|
|
14415
|
+
}
|
|
14416
|
+
function amountRangeFrom(draft) {
|
|
14417
|
+
const range = {
|
|
14418
|
+
min: amountFrom(draft.min),
|
|
14419
|
+
max: amountFrom(draft.max)
|
|
14420
|
+
};
|
|
14421
|
+
return range.min === null && range.max === null || isBackwards(draft) ? void 0 : range;
|
|
14422
|
+
}
|
|
14423
|
+
function isSameAmountRange(first, second) {
|
|
14424
|
+
return (first?.min ?? null) === (second?.min ?? null) && (first?.max ?? null) === (second?.max ?? null);
|
|
14425
|
+
}
|
|
14314
14426
|
var UiUserMenuComponent = class UiUserMenuComponent {
|
|
14315
14427
|
dropdown = inject(UiDropdownComponent, { optional: true });
|
|
14316
14428
|
name = input.required(...ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []);
|