yukit-web 0.2.1 → 0.2.3

package/.npm/_cacache/index-v5/64/dc/73c7a26f2e6eb0c711133d96c247da5ecf0eba708cd37c450a7b3c7cb488

@@ -1,2 +1,2 @@
 
-73156870f087abb5a501996bd729e4209ae8993a	{"key":"make-fetch-happen:request-cache:https://registry.npmjs.org/yukit-web","integrity":"sha512-uelFM9HXvD6YmCd91rMh6ubuogoSm9GMpjVfIRryARKFLVu7ExOYHI3BzlMqaYujEc7UyNK+5TgfWtdGphaMDQ==","time":1790932554123,"size":404684,"metadata":{"time":1790932554108,"url":"https://registry.npmjs.org/yukit-web","reqHeaders":{"accept":"application/json"},"resHeaders":{"cache-control":"public, max-age=300","content-encoding":"gzip","content-type":"application/json","date":"Fri, 02 Oct 2026 09:15:54 GMT","etag":"W/\"350e8ae7ac80104bec4de38ae2cd6cc7\"","last-modified":"Fri, 02 Oct 2026 08:40:33 GMT","vary":"accept-encoding, accept"},"options":{"compress":true}}}
+6af72865710cb6579780a2d92b5ddf2f7dd108b1	{"key":"make-fetch-happen:request-cache:https://registry.npmjs.org/yukit-web","integrity":"sha512-WwUmvyHjDKW4ry1w+KImJdk1k3Ado2q+FEmUPA+AChb6TU9iTAASxHT7VNcufHhmgODM5bue56xFGEc4PsdnPQ==","time":1790954640812,"size":423486,"metadata":{"time":1790954640794,"url":"https://registry.npmjs.org/yukit-web","reqHeaders":{"accept":"application/json"},"resHeaders":{"cache-control":"public, max-age=300","content-encoding":"gzip","content-type":"application/json","date":"Fri, 02 Oct 2026 15:24:00 GMT","etag":"W/\"bc1192cab9710288042dd212db05b3e0\"","last-modified":"Fri, 02 Oct 2026 13:58:20 GMT","vary":"accept-encoding, accept"},"options":{"compress":true}}}

package/.npm/_logs/{2026-10-02T09_15_53_709Z-debug-0.log → 2026-10-02T15_24_00_394Z-debug-0.log}

@@ -5,24 +5,24 @@
 4 silly config load:file:/builds/yurest/yurest-ui/dist/yukit-web/.npmrc
 5 silly config load:file:/root/.npmrc
 6 silly config load:file:/usr/local/etc/npmrc
-7 verbose title npm view yukit-web@0.2.1 version
-8 verbose argv "view" "yukit-web@0.2.1" "version"
-9 verbose logfile logs-max:10 dir:/builds/yurest/yurest-ui/dist/yukit-web/.npm/_logs/2026-10-02T09_15_53_709Z-
-10 verbose logfile /builds/yurest/yurest-ui/dist/yukit-web/.npm/_logs/2026-10-02T09_15_53_709Z-debug-0.log
+7 verbose title npm view yukit-web@0.2.3 version
+8 verbose argv "view" "yukit-web@0.2.3" "version"
+9 verbose logfile logs-max:10 dir:/builds/yurest/yurest-ui/dist/yukit-web/.npm/_logs/2026-10-02T15_24_00_394Z-
+10 verbose logfile /builds/yurest/yurest-ui/dist/yukit-web/.npm/_logs/2026-10-02T15_24_00_394Z-debug-0.log
 11 silly logfile done cleaning log files
-12 http fetch GET 200 https://registry.npmjs.org/yukit-web 217ms (cache miss)
-13 verbose stack Error: No match found for version 0.2.1
+12 http fetch GET 200 https://registry.npmjs.org/yukit-web 182ms (cache miss)
+13 verbose stack Error: No match found for version 0.2.3
 13 verbose stack     at #getData (/usr/local/lib/node_modules/npm/lib/commands/view.js:192:27)
 13 verbose stack     at async #viewPackage (/usr/local/lib/node_modules/npm/lib/commands/view.js:112:28)
 13 verbose stack     at async View.exec (/usr/local/lib/node_modules/npm/lib/commands/view.js:70:5)
 13 verbose stack     at async Npm.exec (/usr/local/lib/node_modules/npm/lib/npm.js:207:9)
 13 verbose stack     at async module.exports (/usr/local/lib/node_modules/npm/lib/cli/entry.js:74:5)
 14 verbose statusCode 404
-15 verbose pkgid yukit-web@0.2.1
+15 verbose pkgid yukit-web@0.2.3
 16 error code E404
-17 error 404 No match found for version 0.2.1
+17 error 404 No match found for version 0.2.3
 18 error 404
-19 error 404  'yukit-web@0.2.1' is not in this registry.
+19 error 404  'yukit-web@0.2.3' is not in this registry.
 20 error 404
 21 error 404 Note that you can also install from a
 22 error 404 tarball, folder, http url, or git url.
@@ -32,4 +32,4 @@
 26 verbose npm  v10.9.9
 27 verbose exit 1
 28 verbose code 1
-29 error A complete log of this run can be found in: /builds/yurest/yurest-ui/dist/yukit-web/.npm/_logs/2026-10-02T09_15_53_709Z-debug-0.log
+29 error A complete log of this run can be found in: /builds/yurest/yurest-ui/dist/yukit-web/.npm/_logs/2026-10-02T15_24_00_394Z-debug-0.log

package/.npm/_logs/{2026-10-02T09_15_54_206Z-debug-0.log → 2026-10-02T15_24_00_918Z-debug-0.log}

@@ -7,8 +7,8 @@
 6 silly config load:file:/usr/local/etc/npmrc
 7 verbose title npm publish
 8 verbose argv "publish" "--access" "public"
-9 verbose logfile logs-max:10 dir:/builds/yurest/yurest-ui/dist/yukit-web/.npm/_logs/2026-10-02T09_15_54_206Z-
-10 verbose logfile /builds/yurest/yurest-ui/dist/yukit-web/.npm/_logs/2026-10-02T09_15_54_206Z-debug-0.log
+9 verbose logfile logs-max:10 dir:/builds/yurest/yurest-ui/dist/yukit-web/.npm/_logs/2026-10-02T15_24_00_918Z-
+10 verbose logfile /builds/yurest/yurest-ui/dist/yukit-web/.npm/_logs/2026-10-02T15_24_00_918Z-debug-0.log
 11 silly logfile done cleaning log files
 12 verbose publish [ '.' ]
 13 silly packumentCache heap:2197815296 maxSize:549453824 maxEntrySize:274726912

package/fesm2022/yukit-web.mjs

@@ -15,7 +15,7 @@ import * as i1 from '@spartan-ng/brain/tooltip';
 import { provideBrnTooltipDefaultOptions, BrnTooltip } from '@spartan-ng/brain/tooltip';
 import { tooltipPositionVariants, DEFAULT_TOOLTIP_CONTENT_CLASSES, DEFAULT_TOOLTIP_SVG_CLASS } from 'yukit-web/helm/tooltip';
 import { NgIcon, provideIcons } from '@ng-icons/core';
-import { lucideX, lucideChevronRight, lucideChevronLeft, lucideArrowLeft, lucidePlus, lucideSearch, lucideEyeOff, lucideEye, lucideSettings2, lucideDownload, lucideTrash2, lucideStar, lucideEllipsis, lucideChevronDown, lucideChevronsUpDown, lucideChevronUp, lucidePencil } from '@ng-icons/lucide';
+import { lucideX, lucideChevronRight, lucideChevronLeft, lucideArrowLeft, lucidePlus, lucideSearch, lucideEyeOff, lucideEye, lucideSettings2, lucideDownload, lucideTrash2, lucidePencil, lucideEllipsis, lucideStar, lucideFilter, lucideChevronsUpDown, lucideChevronUp, lucideChevronDown } from '@ng-icons/lucide';
 import * as i1$1 from 'yukit-web/helm/badge';
 import { HlmBadge } from 'yukit-web/helm/badge';
 import * as i1$2 from 'yukit-web/helm/breadcrumb';
@@ -3740,38 +3740,93 @@ class YuwListToolbarFilterSetFormComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwListToolbarFilterSetFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwListToolbarFilterSetFormComponent, isStandalone: true, selector: "yuw-list-toolbar-filter-set-form", inputs: { labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, titleHidden: { classPropertyName: "titleHidden", publicName: "titleHidden", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cancelled: "cancelled", confirmed: "confirmed", deleteRequested: "deleteRequested" }, host: { listeners: { "keydown.enter": "onConfirm()" }, classAttribute: "flex max-w-full flex-col gap-3" }, providers: [provideIcons({ lucideTrash2 })], viewQueries: [{ propertyName: "_nameInput", first: true, predicate: YuwInputComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (!titleHidden()) {\n  <p class=\"text-sm font-medium\">{{ title() }}</p>\n}\n\n@if (isDelete()) {\n  <p class=\"text-sm text-muted-foreground\">{{ deleteMessage() }}</p>\n} @else {\n  <div class=\"flex flex-col gap-2\">\n    <label class=\"text-sm\" for=\"yuw-filter-set-name\">{{ labels().nameLabel }}</label>\n    <yuw-input inputId=\"yuw-filter-set-name\" [maxlength]=\"nameMaxLength\" [(value)]=\"draftName\" />\n  </div>\n}\n\n<div class=\"flex flex-wrap items-center gap-1\" [class.justify-between]=\"canDelete()\" [class.justify-end]=\"!canDelete()\">\n  @if (canDelete()) {\n    <yuw-button variant=\"ghost\" color=\"destructive\" size=\"sm\" class=\"gap-1\" (clicked)=\"deleteRequested.emit()\">\n      <ng-icon name=\"lucideTrash2\" size=\"16\" />\n      {{ labels().delete }}\n    </yuw-button>\n  }\n\n  <span class=\"flex gap-1\">\n    <yuw-button variant=\"outline\" size=\"sm\" (clicked)=\"cancelled.emit()\">{{ labels().cancel }}</yuw-button>\n    <yuw-button\n      size=\"sm\"\n      [color]=\"isDelete() ? 'destructive' : 'neutral'\"\n      [disabled]=\"!canConfirm()\"\n      (clicked)=\"onConfirm()\"\n    >\n      {{ isDelete() ? labels().delete : labels().confirm }}\n    </yuw-button>\n  </span>\n</div>\n", dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }, { kind: "component", type: YuwInputComponent, selector: "yuw-input", inputs: ["inputmode", "maxlength", "size", "type"], outputs: ["enterPressed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwListToolbarFilterSetFormComponent, isStandalone: true, selector: "yuw-list-toolbar-filter-set-form", inputs: { labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, titleHidden: { classPropertyName: "titleHidden", publicName: "titleHidden", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cancelled: "cancelled", confirmed: "confirmed", deleteRequested: "deleteRequested" }, host: { listeners: { "keydown.enter": "onConfirm()" }, classAttribute: "flex max-w-full flex-col gap-3" }, providers: [provideIcons({ lucideTrash2 })], viewQueries: [{ propertyName: "_nameInput", first: true, predicate: YuwInputComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (!titleHidden()) {\n  <p class=\"text-sm font-medium\">{{ title() }}</p>\n}\n\n@if (isDelete()) {\n  <p class=\"text-sm text-muted-foreground\">{{ deleteMessage() }}</p>\n} @else {\n  <div class=\"flex flex-col gap-2\">\n    <label class=\"text-sm\" for=\"yuw-filter-set-name\">{{ labels().nameLabel }}</label>\n    <yuw-input inputId=\"yuw-filter-set-name\" [maxlength]=\"nameMaxLength\" [(value)]=\"draftName\" />\n  </div>\n}\n\n<div\n  class=\"flex min-w-0 flex-wrap items-center gap-1\"\n  [class.justify-between]=\"canDelete()\"\n  [class.justify-end]=\"!canDelete()\"\n>\n  @if (canDelete()) {\n    <yuw-button\n      variant=\"ghost\"\n      color=\"destructive\"\n      size=\"sm\"\n      class=\"max-w-full min-w-0 gap-1\"\n      (clicked)=\"deleteRequested.emit()\"\n    >\n      <ng-icon name=\"lucideTrash2\" size=\"16\" class=\"shrink-0\" />\n      <span class=\"truncate\">{{ labels().delete }}</span>\n    </yuw-button>\n  }\n\n  <span class=\"flex min-w-0 max-w-full gap-1\">\n    <yuw-button variant=\"outline\" size=\"sm\" class=\"min-w-0\" (clicked)=\"cancelled.emit()\">\n      <span class=\"truncate\">{{ labels().cancel }}</span>\n    </yuw-button>\n    <yuw-button\n      size=\"sm\"\n      class=\"min-w-0\"\n      [color]=\"isDelete() ? 'destructive' : 'neutral'\"\n      [disabled]=\"!canConfirm()\"\n      (clicked)=\"onConfirm()\"\n    >\n      <span class=\"truncate\">{{ isDelete() ? labels().delete : labels().confirm }}</span>\n    </yuw-button>\n  </span>\n</div>\n", dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }, { kind: "component", type: YuwInputComponent, selector: "yuw-input", inputs: ["inputmode", "maxlength", "size", "type"], outputs: ["enterPressed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwListToolbarFilterSetFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuw-list-toolbar-filter-set-form', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIcon, YuwButtonComponent, YuwInputComponent], providers: [provideIcons({ lucideTrash2 })], host: { class: 'flex max-w-full flex-col gap-3', '(keydown.enter)': 'onConfirm()' }, template: "@if (!titleHidden()) {\n  <p class=\"text-sm font-medium\">{{ title() }}</p>\n}\n\n@if (isDelete()) {\n  <p class=\"text-sm text-muted-foreground\">{{ deleteMessage() }}</p>\n} @else {\n  <div class=\"flex flex-col gap-2\">\n    <label class=\"text-sm\" for=\"yuw-filter-set-name\">{{ labels().nameLabel }}</label>\n    <yuw-input inputId=\"yuw-filter-set-name\" [maxlength]=\"nameMaxLength\" [(value)]=\"draftName\" />\n  </div>\n}\n\n<div class=\"flex flex-wrap items-center gap-1\" [class.justify-between]=\"canDelete()\" [class.justify-end]=\"!canDelete()\">\n  @if (canDelete()) {\n    <yuw-button variant=\"ghost\" color=\"destructive\" size=\"sm\" class=\"gap-1\" (clicked)=\"deleteRequested.emit()\">\n      <ng-icon name=\"lucideTrash2\" size=\"16\" />\n      {{ labels().delete }}\n    </yuw-button>\n  }\n\n  <span class=\"flex gap-1\">\n    <yuw-button variant=\"outline\" size=\"sm\" (clicked)=\"cancelled.emit()\">{{ labels().cancel }}</yuw-button>\n    <yuw-button\n      size=\"sm\"\n      [color]=\"isDelete() ? 'destructive' : 'neutral'\"\n      [disabled]=\"!canConfirm()\"\n      (clicked)=\"onConfirm()\"\n    >\n      {{ isDelete() ? labels().delete : labels().confirm }}\n    </yuw-button>\n  </span>\n</div>\n" }]
+            args: [{ selector: 'yuw-list-toolbar-filter-set-form', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIcon, YuwButtonComponent, YuwInputComponent], providers: [provideIcons({ lucideTrash2 })], host: { class: 'flex max-w-full flex-col gap-3', '(keydown.enter)': 'onConfirm()' }, template: "@if (!titleHidden()) {\n  <p class=\"text-sm font-medium\">{{ title() }}</p>\n}\n\n@if (isDelete()) {\n  <p class=\"text-sm text-muted-foreground\">{{ deleteMessage() }}</p>\n} @else {\n  <div class=\"flex flex-col gap-2\">\n    <label class=\"text-sm\" for=\"yuw-filter-set-name\">{{ labels().nameLabel }}</label>\n    <yuw-input inputId=\"yuw-filter-set-name\" [maxlength]=\"nameMaxLength\" [(value)]=\"draftName\" />\n  </div>\n}\n\n<div\n  class=\"flex min-w-0 flex-wrap items-center gap-1\"\n  [class.justify-between]=\"canDelete()\"\n  [class.justify-end]=\"!canDelete()\"\n>\n  @if (canDelete()) {\n    <yuw-button\n      variant=\"ghost\"\n      color=\"destructive\"\n      size=\"sm\"\n      class=\"max-w-full min-w-0 gap-1\"\n      (clicked)=\"deleteRequested.emit()\"\n    >\n      <ng-icon name=\"lucideTrash2\" size=\"16\" class=\"shrink-0\" />\n      <span class=\"truncate\">{{ labels().delete }}</span>\n    </yuw-button>\n  }\n\n  <span class=\"flex min-w-0 max-w-full gap-1\">\n    <yuw-button variant=\"outline\" size=\"sm\" class=\"min-w-0\" (clicked)=\"cancelled.emit()\">\n      <span class=\"truncate\">{{ labels().cancel }}</span>\n    </yuw-button>\n    <yuw-button\n      size=\"sm\"\n      class=\"min-w-0\"\n      [color]=\"isDelete() ? 'destructive' : 'neutral'\"\n      [disabled]=\"!canConfirm()\"\n      (clicked)=\"onConfirm()\"\n    >\n      <span class=\"truncate\">{{ isDelete() ? labels().delete : labels().confirm }}</span>\n    </yuw-button>\n  </span>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { _nameInput: [{ type: i0.ViewChild, args: [i0.forwardRef(() => YuwInputComponent), { isSignal: true }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], titleHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleHidden", required: false }] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }], confirmed: [{ type: i0.Output, args: ["confirmed"] }], deleteRequested: [{ type: i0.Output, args: ["deleteRequested"] }] } });
 
-const NO_SET = '__yuw_no_set__';
+const NO_FILTER_SET = '__yuw_no_set__';
+const STRETCHED_CELL = 'min-w-0 flex-1 [&>yuw-button]:flex [&>yuw-button]:w-full';
 /**
- * Filter control of `yuw-list-toolbar`. From `md` up the editor is a two-pane panel in a popover;
- * below it, one tab per group in a bottom sheet.
- *
- * Each layout keeps its own trigger: the popover anchors to the element holding
- * `yuwPopoverTrigger`, so it cannot come from a shared `ng-template`. `activeCount` reads the
- * applied selection, not the draft. Opening the editor discards unapplied draft changes.
- *
- * Saved sets are on when both `sets` and `labels.sets` are given. A star left of the title saves the
- * applied selection under a name. While that exact selection is already a set the star is filled and
- * opens that set's rename view, which also offers delete. Once
- * there are sets, a select applies one. Choosing "none" restores the selection held before the first
- * set was applied, but only while a set is the one applied, so it never discards hand-picked filters.
- * Below `md` the sets select collapses to an icon button that opens it, so the toolbar keeps one
- * line; the select stays mounted but invisible, right-aligned under the button, so its list has an
- * anchor and a usable width.
- * Naming, renaming and deleting a set replace the editor inside the same popover or sheet. The view
- * is reset when the panel opens, not when it closes, so it does not flash back while closing. A change
- * of layout closes the panel, since a popover opened from a sheet has no anchor to position against.
+ * Sets view of the filters panel: a select with the saved sets and the action that fits the applied
+ * selection. `canSave` offers to save it as a new set, `canEdit` to edit or delete the set it
+ * matches; with neither it is just the list.
+ *
+ * Every option but "none" shows a three-dots button on hover or keyboard highlight, which closes the
+ * list and emits `itemEditRequested` with that set's id. The component owns no state: choosing an
+ * option emits `picked` and the host applies it. `titleHidden` drops the heading when the host
+ * already shows it. `stretchActions` makes edit and delete share the row 50/50 with no gap; without
+ * it they keep their natural width. Button texts are consumer data, so they are cropped, not wrapped.
+ */
+class YuwListToolbarFilterSetsComponent {
+    constructor() {
+        this._combobox = viewChild(YuwComboboxComponent, ...(ngDevMode ? [{ debugName: "_combobox" }] : /* istanbul ignore next */ []));
+        this.canEdit = input(false, ...(ngDevMode ? [{ debugName: "canEdit" }] : /* istanbul ignore next */ []));
+        this.canSave = input(false, ...(ngDevMode ? [{ debugName: "canSave" }] : /* istanbul ignore next */ []));
+        this.labels = input.required(...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
+        this.selectedId = input(NO_FILTER_SET, ...(ngDevMode ? [{ debugName: "selectedId" }] : /* istanbul ignore next */ []));
+        this.sets = input.required(...(ngDevMode ? [{ debugName: "sets" }] : /* istanbul ignore next */ []));
+        this.stretchActions = input(false, ...(ngDevMode ? [{ debugName: "stretchActions" }] : /* istanbul ignore next */ []));
+        this.titleHidden = input(false, ...(ngDevMode ? [{ debugName: "titleHidden" }] : /* istanbul ignore next */ []));
+        this.deleteRequested = output();
+        this.editRequested = output();
+        this.itemEditRequested = output();
+        this.picked = output();
+        this.saveRequested = output();
+        this.stretchedCell = STRETCHED_CELL;
+        this.options = computed(() => {
+            const sets = this.sets();
+            return sets.length > 0
+                ? [
+                    { value: NO_FILTER_SET, label: this.labels().none, data: false },
+                    ...sets.map((set) => ({ value: set.id, label: set.name, data: true })),
+                ]
+                : [];
+        }, ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    }
+    onItemEdit(id) {
+        this._combobox()?.close();
+        this.itemEditRequested.emit(id);
+    }
+    onPick(value) {
+        if (typeof value === 'string') {
+            this.picked.emit(value);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwListToolbarFilterSetsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwListToolbarFilterSetsComponent, isStandalone: true, selector: "yuw-list-toolbar-filter-sets", inputs: { canEdit: { classPropertyName: "canEdit", publicName: "canEdit", isSignal: true, isRequired: false, transformFunction: null }, canSave: { classPropertyName: "canSave", publicName: "canSave", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, selectedId: { classPropertyName: "selectedId", publicName: "selectedId", isSignal: true, isRequired: false, transformFunction: null }, sets: { classPropertyName: "sets", publicName: "sets", isSignal: true, isRequired: true, transformFunction: null }, stretchActions: { classPropertyName: "stretchActions", publicName: "stretchActions", isSignal: true, isRequired: false, transformFunction: null }, titleHidden: { classPropertyName: "titleHidden", publicName: "titleHidden", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deleteRequested: "deleteRequested", editRequested: "editRequested", itemEditRequested: "itemEditRequested", picked: "picked", saveRequested: "saveRequested" }, host: { classAttribute: "flex max-w-full flex-col gap-3" }, providers: [provideIcons({ lucideEllipsis, lucidePencil, lucideTrash2 })], viewQueries: [{ propertyName: "_combobox", first: true, predicate: YuwComboboxComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (!titleHidden()) {\n  <p class=\"text-sm font-medium\">{{ labels().title }}</p>\n}\n\n<yuw-combobox\n  readonlyTrigger\n  [options]=\"options()\"\n  [value]=\"options().length > 0 ? selectedId() : undefined\"\n  [placeholder]=\"labels().select\"\n  [emptyText]=\"labels().empty\"\n  [triggerAriaLabel]=\"labels().select\"\n  (valueChange)=\"onPick($event)\"\n>\n  <ng-template yuwComboboxItem let-option>\n    <span class=\"min-w-0 flex-1 truncate\">{{ option.label }}</span>\n\n    @if (option.data) {\n      <span\n        class=\"inline-flex opacity-0 transition-opacity duration-150 focus-within:opacity-100 [[data-highlighted]_&]:opacity-100\"\n        (click)=\"$event.stopPropagation()\"\n      >\n        <yuw-button variant=\"ghost\" size=\"icon-sm\" [ariaLabel]=\"labels().edit\" (clicked)=\"onItemEdit(option.value)\">\n          <ng-icon name=\"lucideEllipsis\" size=\"14\" />\n        </yuw-button>\n      </span>\n    }\n  </ng-template>\n</yuw-combobox>\n\n@if (canSave()) {\n  <yuw-button variant=\"outline\" size=\"sm\" class=\"max-w-full min-w-0\" (clicked)=\"saveRequested.emit()\">\n    <span class=\"truncate\">{{ labels().save }}</span>\n  </yuw-button>\n}\n\n@if (canEdit()) {\n  <div class=\"flex min-w-0 max-w-full\" [class.gap-1]=\"!stretchActions()\">\n    <div [class]=\"stretchActions() ? stretchedCell : 'min-w-0'\">\n      <yuw-button\n        variant=\"outline\"\n        size=\"sm\"\n        [class]=\"stretchActions() ? 'w-full min-w-0 gap-1' : 'max-w-full min-w-0 gap-1'\"\n        (clicked)=\"editRequested.emit()\"\n      >\n        <ng-icon name=\"lucidePencil\" size=\"16\" class=\"shrink-0\" />\n        <span class=\"truncate\">{{ labels().edit }}</span>\n      </yuw-button>\n    </div>\n    <div [class]=\"stretchActions() ? stretchedCell : 'min-w-0'\">\n      <yuw-button\n        variant=\"ghost\"\n        color=\"destructive\"\n        size=\"sm\"\n        [class]=\"stretchActions() ? 'w-full min-w-0 gap-1' : 'max-w-full min-w-0 gap-1'\"\n        (clicked)=\"deleteRequested.emit()\"\n      >\n        <ng-icon name=\"lucideTrash2\" size=\"16\" class=\"shrink-0\" />\n        <span class=\"truncate\">{{ labels().delete }}</span>\n      </yuw-button>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }, { kind: "component", type: YuwComboboxComponent, selector: "yuw-combobox", inputs: ["clearAriaLabel", "emptyText", "inputId", "invalid", "keepValueOnEscape", "multiple", "options", "placeholder", "readonlyTrigger", "search", "searchPlaceholder", "size", "triggerAriaLabel", "value"], outputs: ["searchChange", "valueChange"] }, { kind: "directive", type: YuwComboboxItemDirective, selector: "[yuwComboboxItem]", inputs: ["yuwComboboxItemTypeOf"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwListToolbarFilterSetsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuw-list-toolbar-filter-sets', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIcon, YuwButtonComponent, YuwComboboxComponent, YuwComboboxItemDirective], providers: [provideIcons({ lucideEllipsis, lucidePencil, lucideTrash2 })], host: { class: 'flex max-w-full flex-col gap-3' }, template: "@if (!titleHidden()) {\n  <p class=\"text-sm font-medium\">{{ labels().title }}</p>\n}\n\n<yuw-combobox\n  readonlyTrigger\n  [options]=\"options()\"\n  [value]=\"options().length > 0 ? selectedId() : undefined\"\n  [placeholder]=\"labels().select\"\n  [emptyText]=\"labels().empty\"\n  [triggerAriaLabel]=\"labels().select\"\n  (valueChange)=\"onPick($event)\"\n>\n  <ng-template yuwComboboxItem let-option>\n    <span class=\"min-w-0 flex-1 truncate\">{{ option.label }}</span>\n\n    @if (option.data) {\n      <span\n        class=\"inline-flex opacity-0 transition-opacity duration-150 focus-within:opacity-100 [[data-highlighted]_&]:opacity-100\"\n        (click)=\"$event.stopPropagation()\"\n      >\n        <yuw-button variant=\"ghost\" size=\"icon-sm\" [ariaLabel]=\"labels().edit\" (clicked)=\"onItemEdit(option.value)\">\n          <ng-icon name=\"lucideEllipsis\" size=\"14\" />\n        </yuw-button>\n      </span>\n    }\n  </ng-template>\n</yuw-combobox>\n\n@if (canSave()) {\n  <yuw-button variant=\"outline\" size=\"sm\" class=\"max-w-full min-w-0\" (clicked)=\"saveRequested.emit()\">\n    <span class=\"truncate\">{{ labels().save }}</span>\n  </yuw-button>\n}\n\n@if (canEdit()) {\n  <div class=\"flex min-w-0 max-w-full\" [class.gap-1]=\"!stretchActions()\">\n    <div [class]=\"stretchActions() ? stretchedCell : 'min-w-0'\">\n      <yuw-button\n        variant=\"outline\"\n        size=\"sm\"\n        [class]=\"stretchActions() ? 'w-full min-w-0 gap-1' : 'max-w-full min-w-0 gap-1'\"\n        (clicked)=\"editRequested.emit()\"\n      >\n        <ng-icon name=\"lucidePencil\" size=\"16\" class=\"shrink-0\" />\n        <span class=\"truncate\">{{ labels().edit }}</span>\n      </yuw-button>\n    </div>\n    <div [class]=\"stretchActions() ? stretchedCell : 'min-w-0'\">\n      <yuw-button\n        variant=\"ghost\"\n        color=\"destructive\"\n        size=\"sm\"\n        [class]=\"stretchActions() ? 'w-full min-w-0 gap-1' : 'max-w-full min-w-0 gap-1'\"\n        (clicked)=\"deleteRequested.emit()\"\n      >\n        <ng-icon name=\"lucideTrash2\" size=\"16\" class=\"shrink-0\" />\n        <span class=\"truncate\">{{ labels().delete }}</span>\n      </yuw-button>\n    </div>\n  </div>\n}\n" }]
+        }], propDecorators: { _combobox: [{ type: i0.ViewChild, args: [i0.forwardRef(() => YuwComboboxComponent), { isSignal: true }] }], canEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "canEdit", required: false }] }], canSave: [{ type: i0.Input, args: [{ isSignal: true, alias: "canSave", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: true }] }], selectedId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedId", required: false }] }], sets: [{ type: i0.Input, args: [{ isSignal: true, alias: "sets", required: true }] }], stretchActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "stretchActions", required: false }] }], titleHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleHidden", required: false }] }], deleteRequested: [{ type: i0.Output, args: ["deleteRequested"] }], editRequested: [{ type: i0.Output, args: ["editRequested"] }], itemEditRequested: [{ type: i0.Output, args: ["itemEditRequested"] }], picked: [{ type: i0.Output, args: ["picked"] }], saveRequested: [{ type: i0.Output, args: ["saveRequested"] }] } });
+
+const FORM_VIEWS = new Set(['save', 'rename', 'delete']);
+/**
+ * Filter control of `yuw-list-toolbar`: one welded group of buttons that opens a single panel, a
+ * popover from `md` up and a bottom sheet below it. The panel shows one view at a time: the filter
+ * editor (two panes in the popover, one tab per group in the sheet), the saved sets, or the form
+ * that names, renames or deletes a set.
+ *
+ * The group reads: star (sets) followed by the name of the set that matches the applied selection,
+ * filter icon with the count of applied values, and a clear button. Every button swaps the panel view itself
+ * and stops the click, so the popover trigger never double-toggles; pressing the button of the
+ * view already showing closes the panel. `activeCount` reads the applied selection, not the draft,
+ * and opening the panel discards unapplied draft changes.
+ *
+ * Saved sets are on when both `sets` and `labels.sets` are given; without them the star is not
+ * rendered. The star is never disabled. The sets view lists the sets and offers what fits the
+ * applied selection: save it when it matches no set, edit or delete when it matches one. Choosing
+ * "none" restores the selection held before the first set was applied, but only while a set is the
+ * one applied, so it never discards hand-picked filters. The view is reset when the panel is
+ * opened from a button, not when it closes, so it does not flash back while closing. A change of
+ * layout closes the panel, since a popover opened from a sheet has no anchor to position against.
  * Persisting is the consumer's job: this component only emits `setSaved`, `setRenamed`, `setDeleted`.
  */
 class YuwListToolbarFiltersComponent {
     constructor() {
-        this._setsCombobox = viewChild(YuwComboboxComponent, ...(ngDevMode ? [{ debugName: "_setsCombobox" }] : /* istanbul ignore next */ []));
         this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.groups = input.required(...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
         this.idleColor = input.required(...(ngDevMode ? [{ debugName: "idleColor" }] : /* istanbul ignore next */ []));
@@ -3785,10 +3840,9 @@ class YuwListToolbarFiltersComponent {
         this._activeGroupId = signal(null, ...(ngDevMode ? [{ debugName: "_activeGroupId" }] : /* istanbul ignore next */ []));
         this._selectionBeforeSet = signal(undefined, ...(ngDevMode ? [{ debugName: "_selectionBeforeSet" }] : /* istanbul ignore next */ []));
         this._setPanelId = signal(undefined, ...(ngDevMode ? [{ debugName: "_setPanelId" }] : /* istanbul ignore next */ []));
-        this._setPanelRequested = false;
         this.draft = new YuwFilterDraft(this.selection);
         this.open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
-        this.setPanelMode = signal(null, ...(ngDevMode ? [{ debugName: "setPanelMode" }] : /* istanbul ignore next */ []));
+        this.panelView = signal('filters', ...(ngDevMode ? [{ debugName: "panelView" }] : /* istanbul ignore next */ []));
         this.activeCount = computed(() => countSelectedValues(this.selection()), ...(ngDevMode ? [{ debugName: "activeCount" }] : /* istanbul ignore next */ []));
         this.activeGroup = computed(() => {
             const groups = this.groups();
@@ -3802,57 +3856,49 @@ class YuwListToolbarFiltersComponent {
         }, ...(ngDevMode ? [{ debugName: "matchingSet" }] : /* istanbul ignore next */ []));
         this.setLabels = computed(() => (this.sets() ? this.labels().sets : undefined), ...(ngDevMode ? [{ debugName: "setLabels" }] : /* istanbul ignore next */ []));
         this.buttons = computed(() => {
-            const active = this.hasActive();
+            const variant = this.hasActive() ? 'secondary' : 'outline';
             const disabled = this.disabled();
             const { title, clearAll } = this.labels();
             const setLabels = this.setLabels();
-            const matching = this.matchingSet();
             const entries = [
-                {
-                    id: 'filters',
-                    label: active ? `${title} : ${this.activeCount()}` : title,
-                    variant: active ? 'secondary' : 'outline',
-                    disabled,
-                },
+                { id: 'filters', ariaLabel: title, tooltip: title, size: 'icon', variant, disabled },
             ];
             if (setLabels) {
                 entries.unshift({
-                    id: 'save',
-                    ariaLabel: setLabels.save,
-                    tooltip: matching ? setLabels.edit : setLabels.save,
-                    variant: active ? 'secondary' : 'outline',
-                    size: 'icon',
-                    disabled: disabled || !active,
+                    id: 'sets',
+                    ariaLabel: setLabels.title,
+                    tooltip: setLabels.title,
+                    size: this.matchingSet() ? 'default' : 'icon',
+                    variant,
+                    disabled,
                 });
             }
-            if (active) {
+            if (this.hasActive()) {
                 entries.push({ id: 'clear', ariaLabel: clearAll, size: 'icon', disabled });
             }
             return entries;
         }, ...(ngDevMode ? [{ debugName: "buttons" }] : /* istanbul ignore next */ []));
         this.buttonsColor = computed(() => (this.hasActive() ? 'secondary' : this.idleColor()), ...(ngDevMode ? [{ debugName: "buttonsColor" }] : /* istanbul ignore next */ []));
-        this.selectedSetId = computed(() => this.matchingSet()?.id ?? NO_SET, ...(ngDevMode ? [{ debugName: "selectedSetId" }] : /* istanbul ignore next */ []));
+        this.canSaveSet = computed(() => this.hasActive() && !this.matchingSet(), ...(ngDevMode ? [{ debugName: "canSaveSet" }] : /* istanbul ignore next */ []));
+        this.selectedSetId = computed(() => this.matchingSet()?.id ?? NO_FILTER_SET, ...(ngDevMode ? [{ debugName: "selectedSetId" }] : /* istanbul ignore next */ []));
         this.selectedText = computed(() => this.labels().selected(this.draft.selectedCount()), ...(ngDevMode ? [{ debugName: "selectedText" }] : /* istanbul ignore next */ []));
-        this.setOptions = computed(() => {
-            const labels = this.setLabels();
-            const sets = this.sets() ?? [];
-            return labels && sets.length > 0
-                ? [
-                    { value: NO_SET, label: labels.none, data: false },
-                    ...sets.map((set) => ({ value: set.id, label: set.name, data: true })),
-                ]
-                : [];
-        }, ...(ngDevMode ? [{ debugName: "setOptions" }] : /* istanbul ignore next */ []));
+        this.setPanelMode = computed(() => {
+            const view = this.panelView();
+            return FORM_VIEWS.has(view) ? view : null;
+        }, ...(ngDevMode ? [{ debugName: "setPanelMode" }] : /* istanbul ignore next */ []));
         this.setPanelName = computed(() => this.sets()?.find((set) => set.id === this._setPanelId())?.name ?? '', ...(ngDevMode ? [{ debugName: "setPanelName" }] : /* istanbul ignore next */ []));
         this.sheetTitle = computed(() => {
             const mode = this.setPanelMode();
-            const labels = this.setLabels();
-            return mode && labels ? filterSetFormTitle(mode, labels) : this.labels().title;
+            const setLabels = this.setLabels();
+            if (mode && setLabels) {
+                return filterSetFormTitle(mode, setLabels);
+            }
+            return this.panelView() === 'sets' && setLabels ? setLabels.title : this.labels().title;
         }, ...(ngDevMode ? [{ debugName: "sheetTitle" }] : /* istanbul ignore next */ []));
         this.tabs = computed(() => this.groups().map((group) => ({ id: group.id, label: group.label })), ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
         effect(() => {
             if (this.open()) {
-                untracked(() => this._onOpened());
+                untracked(() => this.draft.reset());
             }
         });
         effect(() => {
@@ -3864,28 +3910,19 @@ class YuwListToolbarFiltersComponent {
         this.commit(this.draft.snapshot());
     }
     onButtonClicked({ id, event }) {
-        if (id === 'save') {
-            event.stopPropagation();
-            event.preventDefault();
-            const matching = this.matchingSet();
-            this.openSetPanel(matching ? 'rename' : 'save', matching?.id);
-            return;
-        }
+        event.stopPropagation();
+        event.preventDefault();
         if (id === 'clear') {
-            event.stopPropagation();
-            event.preventDefault();
             this.commit({});
             return;
         }
-        if (this.isMobile()) {
-            this.open.set(true);
-        }
+        this.togglePanel(id === 'filters' ? 'filters' : 'sets');
     }
     onOptionChange(group, value, checked) {
         this.draft.toggle(group, value, checked);
     }
     onSetDeleteRequested() {
-        this.setPanelMode.set('delete');
+        this.panelView.set('delete');
     }
     onSetFormConfirmed(name) {
         const mode = this.setPanelMode();
@@ -3901,10 +3938,10 @@ class YuwListToolbarFiltersComponent {
         this.open.set(false);
     }
     onSetPicked(value) {
-        if (typeof value !== 'string' || value === this.selectedSetId()) {
+        if (value === this.selectedSetId()) {
             return;
         }
-        if (value === NO_SET) {
+        if (value === NO_FILTER_SET) {
             this.selection.set(this._selectionBeforeSet() ?? {});
             this._selectionBeforeSet.set(undefined);
             return;
@@ -3919,34 +3956,27 @@ class YuwListToolbarFiltersComponent {
         this.selection.set(set.selection);
     }
     openSetPanel(mode, setId) {
-        this._setPanelRequested = !this.open();
-        this.setPanelMode.set(mode);
         this._setPanelId.set(setId);
+        this.panelView.set(mode);
         this.open.set(true);
     }
-    openSetPanelFromList(mode, setId) {
-        this._setsCombobox()?.close();
-        requestAnimationFrame(() => this.openSetPanel(mode, setId));
-    }
-    openSetsList() {
-        this._setsCombobox()?.open();
-    }
     selectGroup(groupId) {
         this._activeGroupId.set(groupId);
     }
-    _onOpened() {
-        this.draft.reset();
-        if (!this._setPanelRequested) {
-            this.setPanelMode.set(null);
-        }
-        this._setPanelRequested = false;
-    }
     commit(selection) {
         this.selection.set(selection);
         this.open.set(false);
     }
+    togglePanel(view) {
+        if (this.open() && this.panelView() === view) {
+            this.open.set(false);
+            return;
+        }
+        this.panelView.set(view);
+        this.open.set(true);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwListToolbarFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwListToolbarFiltersComponent, isStandalone: true, selector: "yuw-list-toolbar-filters", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: true, transformFunction: null }, idleColor: { classPropertyName: "idleColor", publicName: "idleColor", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, sets: { classPropertyName: "sets", publicName: "sets", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", setDeleted: "setDeleted", setRenamed: "setRenamed", setSaved: "setSaved" }, host: { classAttribute: "flex min-w-0 max-w-full items-center gap-1" }, providers: [provideIcons({ lucideChevronDown, lucideEllipsis, lucideStar, lucideX })], viewQueries: [{ propertyName: "_setsCombobox", first: true, predicate: YuwComboboxComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #options let-group>\n  <ul class=\"flex flex-col gap-1\" [attr.aria-label]=\"group.label\">\n    @for (option of group.options; track option.value) {\n      <li>\n        <label\n          class=\"flex cursor-pointer items-center justify-between gap-3 rounded-md px-3 py-1 text-sm transition-colors hover:bg-accent/45\"\n          [for]=\"`${group.id}-option-${option.value}`\"\n        >\n          <span class=\"min-w-0 truncate\">{{ option.label }}</span>\n\n          <yuw-checkbox\n            [inputId]=\"`${group.id}-option-${option.value}`\"\n            [checked]=\"draft.checkedValues()[group.id]?.has(option.value) ?? false\"\n            [disabled]=\"option.disabled ?? false\"\n            [ariaLabel]=\"option.label\"\n            (checkedChange)=\"onOptionChange(group, option.value, $event)\"\n          />\n        </label>\n      </li>\n    }\n  </ul>\n</ng-template>\n\n<ng-template #starIcon>\n  <ng-icon name=\"lucideStar\" size=\"16\" [class]=\"matchingSet() ? '[&_svg]:fill-current' : ''\" />\n</ng-template>\n\n<ng-template #setForm let-sheet>\n  @if (setPanelMode(); as mode) {\n    <yuw-list-toolbar-filter-set-form\n      [class]=\"sheet ? 'w-full pb-3' : 'w-64 p-1'\"\n      [titleHidden]=\"sheet\"\n      [labels]=\"setLabels()!\"\n      [mode]=\"mode\"\n      [name]=\"setPanelName()\"\n      (cancelled)=\"open.set(false)\"\n      (confirmed)=\"onSetFormConfirmed($event)\"\n      (deleteRequested)=\"onSetDeleteRequested()\"\n    />\n  }\n</ng-template>\n\n<ng-template #commitRow>\n  @if (selectedText(); as text) {\n    <p class=\"text-end text-xs text-muted-foreground pr-2\">{{ text }}</p>\n  }\n\n  <div class=\"flex justify-end gap-2 pt-3\">\n    <yuw-button variant=\"outline\" (clicked)=\"draft.clear()\">\n      {{ labels().clear }}\n    </yuw-button>\n\n    <yuw-button (clicked)=\"onApply()\">\n      {{ labels().apply }}\n    </yuw-button>\n  </div>\n</ng-template>\n\n@if (isMobile()) {\n  <yuw-button-group\n    variant=\"secondary\"\n    [buttons]=\"buttons()\"\n    [color]=\"buttonsColor()\"\n    [ariaLabel]=\"labels().title\"\n    (buttonClicked)=\"onButtonClicked($event)\"\n  >\n    <ng-template yuwButtonGroupContent=\"save\">\n      <ng-container [ngTemplateOutlet]=\"starIcon\" />\n    </ng-template>\n    <ng-template yuwButtonGroupContent=\"clear\">\n      <ng-icon name=\"lucideX\" size=\"16\" />\n    </ng-template>\n  </yuw-button-group>\n\n  <yuw-sheet\n    side=\"bottom\"\n    panelClass=\"max-h-[85svh] overflow-y-auto\"\n    [showTrigger]=\"false\"\n    [title]=\"sheetTitle()\"\n    [closeLabel]=\"labels().close\"\n    [(open)]=\"open\"\n  >\n    @if (setPanelMode()) {\n      <ng-container [ngTemplateOutlet]=\"setForm\" [ngTemplateOutletContext]=\"{ $implicit: true }\" />\n    } @else {\n      <div class=\"flex min-h-0 flex-col gap-3\">\n        <yuw-tabs\n          class=\"max-w-full justify-start overflow-x-auto overflow-y-hidden scrollbar-none [&::-webkit-scrollbar]:hidden scroll-fade-x\"\n          [tabs]=\"tabs()\"\n          [activeTab]=\"activeGroup()?.id ?? ''\"\n          (activeTabChange)=\"selectGroup($event)\"\n        >\n          @for (group of groups(); track group.id) {\n            <ng-template [yuwTabContent]=\"group.id\">\n              <span class=\"flex items-center gap-1.5 whitespace-nowrap\">\n                {{ group.label }}\n\n                @if (draft.pendingGroupIds().has(group.id)) {\n                  <yuw-badge\n                    dot\n                    color=\"secondary\"\n                    style=\"width: 0.5rem; height: 0.5rem\"\n                    [attr.aria-label]=\"labels().pending\"\n                    [attr.title]=\"labels().pending\"\n                  />\n                }\n              </span>\n            </ng-template>\n\n            <ng-template [yuwTabPanel]=\"group.id\">\n              <div class=\"max-h-[45svh] overflow-y-auto pt-2\">\n                <ng-container [ngTemplateOutlet]=\"options\" [ngTemplateOutletContext]=\"{ $implicit: group }\" />\n              </div>\n            </ng-template>\n          }\n        </yuw-tabs>\n\n        <div class=\"pb-3\">\n          <ng-container [ngTemplateOutlet]=\"commitRow\" />\n        </div>\n      </div>\n    }\n  </yuw-sheet>\n} @else {\n  <yuw-popover align=\"start\" panelClass=\"w-auto p-2 dark:border\" triggerClass=\"px-0\" triggerTransparent [(open)]=\"open\">\n    <yuw-button-group\n      yuwPopoverTrigger\n      variant=\"secondary\"\n      [buttons]=\"buttons()\"\n      [color]=\"buttonsColor()\"\n      [ariaLabel]=\"labels().title\"\n      (buttonClicked)=\"onButtonClicked($event)\"\n    >\n      <ng-template yuwButtonGroupContent=\"save\">\n        <ng-container [ngTemplateOutlet]=\"starIcon\" />\n      </ng-template>\n      <ng-template yuwButtonGroupContent=\"clear\">\n        <ng-icon name=\"lucideX\" size=\"16\" />\n      </ng-template>\n    </yuw-button-group>\n    @if (setPanelMode()) {\n      <ng-container [ngTemplateOutlet]=\"setForm\" [ngTemplateOutletContext]=\"{ $implicit: false }\" />\n    } @else {\n      <div class=\"flex min-w-0\">\n        <ul class=\"flex w-44 shrink-0 flex-col gap-1 pe-2\">\n          @for (group of groups(); track group.id) {\n            <li>\n              <button\n                type=\"button\"\n                class=\"flex w-full items-center gap-2 rounded-md px-3 py-2 text-start text-sm transition-colors hover:bg-accent/45\"\n                [class.bg-accent/45]=\"activeGroup()?.id === group.id\"\n                [attr.aria-current]=\"activeGroup()?.id === group.id ? 'true' : null\"\n                (click)=\"selectGroup(group.id)\"\n              >\n                <span class=\"min-w-0 flex-1 truncate\">{{ group.label }}</span>\n\n                @if (draft.pendingGroupIds().has(group.id)) {\n                  <yuw-badge\n                    dot\n                    color=\"secondary\"\n                    style=\"width: 0.5rem; height: 0.5rem\"\n                    [attr.aria-label]=\"labels().pending\"\n                    [attr.title]=\"labels().pending\"\n                  />\n                }\n              </button>\n            </li>\n          }\n        </ul>\n\n        @if (activeGroup(); as group) {\n          <div class=\"flex min-w-0 flex-1 flex-col gap-3 border-s p-3\">\n            <ng-container [ngTemplateOutlet]=\"options\" [ngTemplateOutletContext]=\"{ $implicit: group }\" />\n            <ng-container [ngTemplateOutlet]=\"commitRow\" />\n          </div>\n        }\n      </div>\n    }\n  </yuw-popover>\n}\n\n@if (setLabels(); as labels) {\n  @if (setOptions().length > 0) {\n    <div [class]=\"isMobile() ? 'relative inline-flex' : 'w-full max-w-52.5'\">\n      @if (isMobile()) {\n        <yuw-button variant=\"outline\" size=\"icon\" [ariaLabel]=\"labels.select\" (clicked)=\"openSetsList()\">\n          <ng-icon name=\"lucideChevronDown\" size=\"16\" />\n        </yuw-button>\n      }\n\n      <div [class]=\"isMobile() ? 'pointer-events-none absolute top-0 right-0 h-full w-52 opacity-0' : 'contents'\">\n        <yuw-combobox\n          readonlyTrigger\n          [options]=\"setOptions()\"\n          [value]=\"selectedSetId()\"\n          [triggerAriaLabel]=\"labels.select\"\n          [placeholder]=\"labels.select\"\n          (valueChange)=\"onSetPicked($event)\"\n        >\n          <ng-template yuwComboboxItem let-option>\n            <span class=\"min-w-0 flex-1 truncate\">{{ option.label }}</span>\n\n            @if (option.data) {\n              <span class=\"inline-flex\" (click)=\"$event.stopPropagation()\">\n                <yuw-button\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  [ariaLabel]=\"labels.edit\"\n                  (clicked)=\"openSetPanelFromList('rename', option.value)\"\n                >\n                  <ng-icon name=\"lucideEllipsis\" size=\"14\" />\n                </yuw-button>\n              </span>\n            }\n          </ng-template>\n        </yuw-combobox>\n      </div>\n    </div>\n  }\n}\n", styles: [".scrollbar-none{scrollbar-width:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: YuwBadgeComponent, selector: "yuw-badge", inputs: ["color", "dot", "removeLabel", "variant"], outputs: ["removed"] }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }, { kind: "component", type: YuwButtonGroupComponent, selector: "yuw-button-group", inputs: ["ariaLabel", "buttons", "color", "orientation", "selectedColor", "selectedVariant", "size", "variant"], outputs: ["buttonClicked"] }, { kind: "directive", type: YuwButtonGroupContentDirective, selector: "ng-template[yuwButtonGroupContent]", inputs: ["yuwButtonGroupContent"] }, { kind: "component", type: YuwCheckboxComponent, selector: "yuw-checkbox", inputs: ["ariaDescribedby", "ariaLabel", "ariaLabelledby", "indeterminate", "inputId", "invalid", "name", "primary", "required", "checked"], outputs: ["indeterminateChange", "checkedChange"] }, { kind: "component", type: YuwComboboxComponent, selector: "yuw-combobox", inputs: ["clearAriaLabel", "emptyText", "inputId", "invalid", "keepValueOnEscape", "multiple", "options", "placeholder", "readonlyTrigger", "search", "searchPlaceholder", "size", "triggerAriaLabel", "value"], outputs: ["searchChange", "valueChange"] }, { kind: "directive", type: YuwComboboxItemDirective, selector: "[yuwComboboxItem]", inputs: ["yuwComboboxItemTypeOf"] }, { kind: "component", type: YuwListToolbarFilterSetFormComponent, selector: "yuw-list-toolbar-filter-set-form", inputs: ["labels", "mode", "name", "titleHidden"], outputs: ["cancelled", "confirmed", "deleteRequested"] }, { kind: "component", type: YuwPopoverComponent, selector: "yuw-popover", inputs: ["align", "description", "offsetX", "open", "panelClass", "showTrigger", "sideOffset", "title", "triggerClass", "triggerColor", "triggerSize", "triggerTransparent", "triggerVariant"], outputs: ["openChange"] }, { kind: "component", type: YuwSheetComponent, selector: "yuw-sheet", inputs: ["ariaLabel", "ariaModal", "closeLabel", "closeOnOutsidePointerEvents", "description", "open", "overlayClass", "panelClass", "scrollStrategy", "showTrigger", "side", "title", "triggerSize", "triggerVariant"], outputs: ["openChange"] }, { kind: "directive", type: YuwTabContentDirective, selector: "ng-template[yuwTabContent]", inputs: ["yuwTabContent"] }, { kind: "directive", type: YuwTabPanelDirective, selector: "ng-template[yuwTabPanel]", inputs: ["yuwTabPanel"] }, { kind: "component", type: YuwTabsComponent, selector: "yuw-tabs", inputs: ["activationMode", "activeTab", "orientation", "size", "tabs", "class", "variant"], outputs: ["activeTabChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwListToolbarFiltersComponent, isStandalone: true, selector: "yuw-list-toolbar-filters", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: true, transformFunction: null }, idleColor: { classPropertyName: "idleColor", publicName: "idleColor", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, sets: { classPropertyName: "sets", publicName: "sets", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", setDeleted: "setDeleted", setRenamed: "setRenamed", setSaved: "setSaved" }, host: { classAttribute: "flex min-w-0 max-w-full items-center gap-1" }, providers: [provideIcons({ lucideFilter, lucideStar, lucideX })], ngImport: i0, template: "<ng-template #options let-group>\n  <ul class=\"flex flex-col gap-1\" [attr.aria-label]=\"group.label\">\n    @for (option of group.options; track option.value) {\n      <li>\n        <label\n          class=\"flex cursor-pointer items-center justify-between gap-3 rounded-md px-3 py-1 text-sm transition-colors hover:bg-accent/45\"\n          [for]=\"`${group.id}-option-${option.value}`\"\n        >\n          <span class=\"min-w-0 truncate\">{{ option.label }}</span>\n\n          <yuw-checkbox\n            [inputId]=\"`${group.id}-option-${option.value}`\"\n            [checked]=\"draft.checkedValues()[group.id]?.has(option.value) ?? false\"\n            [disabled]=\"option.disabled ?? false\"\n            [ariaLabel]=\"option.label\"\n            (checkedChange)=\"onOptionChange(group, option.value, $event)\"\n          />\n        </label>\n      </li>\n    }\n  </ul>\n</ng-template>\n\n<ng-template #starIcon>\n  <ng-icon name=\"lucideStar\" size=\"16\" [class]=\"matchingSet() ? '[&_svg]:fill-current' : ''\" />\n\n  @if (matchingSet(); as set) {\n    <span class=\"block max-w-[25ch] truncate\">{{ set.name }}</span>\n  }\n</ng-template>\n\n<ng-template #filterIcon>\n  <span class=\"relative inline-flex\">\n    <ng-icon name=\"lucideFilter\" size=\"16\" />\n\n    @if (hasActive()) {\n      <yuw-badge\n        color=\"destructive\"\n        class=\"absolute -top-2.5 -right-2.5 h-4 min-w-4 justify-center px-1 text-[10px] leading-none\"\n        data-testid=\"active-filters-count\"\n      >\n        {{ activeCount() }}\n      </yuw-badge>\n    }\n  </span>\n</ng-template>\n\n<ng-template #setForm let-sheet>\n  @if (setPanelMode(); as mode) {\n    <yuw-list-toolbar-filter-set-form\n      [class]=\"sheet ? 'w-full pb-3' : 'w-64 p-1'\"\n      [titleHidden]=\"sheet\"\n      [labels]=\"setLabels()!\"\n      [mode]=\"mode\"\n      [name]=\"setPanelName()\"\n      (cancelled)=\"open.set(false)\"\n      (confirmed)=\"onSetFormConfirmed($event)\"\n      (deleteRequested)=\"onSetDeleteRequested()\"\n    />\n  }\n</ng-template>\n\n<ng-template #setsView let-sheet>\n  <yuw-list-toolbar-filter-sets\n    [class]=\"sheet ? 'w-full pb-3' : 'w-64 p-1'\"\n    [titleHidden]=\"sheet\"\n    [stretchActions]=\"!sheet\"\n    [labels]=\"setLabels()!\"\n    [sets]=\"sets() ?? []\"\n    [selectedId]=\"selectedSetId()\"\n    [canSave]=\"canSaveSet()\"\n    [canEdit]=\"!!matchingSet()\"\n    (picked)=\"onSetPicked($event)\"\n    (itemEditRequested)=\"openSetPanel('rename', $event)\"\n    (saveRequested)=\"openSetPanel('save')\"\n    (editRequested)=\"openSetPanel('rename', matchingSet()?.id)\"\n    (deleteRequested)=\"openSetPanel('delete', matchingSet()?.id)\"\n  />\n</ng-template>\n\n<ng-template #commitRow>\n  @if (selectedText(); as text) {\n    <p class=\"text-end text-xs text-muted-foreground pr-2\">{{ text }}</p>\n  }\n\n  <div class=\"flex justify-end gap-2 pt-3\">\n    <yuw-button variant=\"outline\" (clicked)=\"draft.clear()\">\n      {{ labels().clear }}\n    </yuw-button>\n\n    <yuw-button (clicked)=\"onApply()\">\n      {{ labels().apply }}\n    </yuw-button>\n  </div>\n</ng-template>\n\n@if (isMobile()) {\n  <yuw-button-group\n    variant=\"secondary\"\n    [buttons]=\"buttons()\"\n    [color]=\"buttonsColor()\"\n    [ariaLabel]=\"labels().title\"\n    (buttonClicked)=\"onButtonClicked($event)\"\n  >\n    <ng-template yuwButtonGroupContent=\"sets\">\n      <ng-container [ngTemplateOutlet]=\"starIcon\" />\n    </ng-template>\n    <ng-template yuwButtonGroupContent=\"filters\">\n      <ng-container [ngTemplateOutlet]=\"filterIcon\" />\n    </ng-template>\n    <ng-template yuwButtonGroupContent=\"clear\">\n      <ng-icon name=\"lucideX\" size=\"16\" />\n    </ng-template>\n  </yuw-button-group>\n\n  <yuw-sheet\n    side=\"bottom\"\n    panelClass=\"max-h-[85svh] overflow-y-auto\"\n    [showTrigger]=\"false\"\n    [title]=\"sheetTitle()\"\n    [closeLabel]=\"labels().close\"\n    [(open)]=\"open\"\n  >\n    @switch (panelView()) {\n      @case ('filters') {\n        <div class=\"flex min-h-0 flex-col gap-3\">\n          <yuw-tabs\n            class=\"max-w-full justify-start overflow-x-auto overflow-y-hidden scrollbar-none [&::-webkit-scrollbar]:hidden scroll-fade-x\"\n            [tabs]=\"tabs()\"\n            [activeTab]=\"activeGroup()?.id ?? ''\"\n            (activeTabChange)=\"selectGroup($event)\"\n          >\n            @for (group of groups(); track group.id) {\n              <ng-template [yuwTabContent]=\"group.id\">\n                <span class=\"flex items-center gap-1.5 whitespace-nowrap\">\n                  {{ group.label }}\n\n                  @if (draft.pendingGroupIds().has(group.id)) {\n                    <yuw-badge\n                      dot\n                      color=\"secondary\"\n                      style=\"width: 0.5rem; height: 0.5rem\"\n                      [attr.aria-label]=\"labels().pending\"\n                      [attr.title]=\"labels().pending\"\n                    />\n                  }\n                </span>\n              </ng-template>\n\n              <ng-template [yuwTabPanel]=\"group.id\">\n                <div class=\"max-h-[45svh] overflow-y-auto pt-2\">\n                  <ng-container [ngTemplateOutlet]=\"options\" [ngTemplateOutletContext]=\"{ $implicit: group }\" />\n                </div>\n              </ng-template>\n            }\n          </yuw-tabs>\n\n          <div class=\"pb-3\">\n            <ng-container [ngTemplateOutlet]=\"commitRow\" />\n          </div>\n        </div>\n      }\n      @case ('sets') {\n        <ng-container [ngTemplateOutlet]=\"setsView\" [ngTemplateOutletContext]=\"{ $implicit: true }\" />\n      }\n      @default {\n        <ng-container [ngTemplateOutlet]=\"setForm\" [ngTemplateOutletContext]=\"{ $implicit: true }\" />\n      }\n    }\n  </yuw-sheet>\n} @else {\n  <yuw-popover align=\"start\" panelClass=\"w-auto p-2 dark:border\" triggerClass=\"px-0\" triggerTransparent [(open)]=\"open\">\n    <yuw-button-group\n      yuwPopoverTrigger\n      variant=\"secondary\"\n      [buttons]=\"buttons()\"\n      [color]=\"buttonsColor()\"\n      [ariaLabel]=\"labels().title\"\n      (buttonClicked)=\"onButtonClicked($event)\"\n    >\n      <ng-template yuwButtonGroupContent=\"sets\">\n        <ng-container [ngTemplateOutlet]=\"starIcon\" />\n      </ng-template>\n      <ng-template yuwButtonGroupContent=\"filters\">\n        <ng-container [ngTemplateOutlet]=\"filterIcon\" />\n      </ng-template>\n      <ng-template yuwButtonGroupContent=\"clear\">\n        <ng-icon name=\"lucideX\" size=\"16\" />\n      </ng-template>\n    </yuw-button-group>\n\n    @switch (panelView()) {\n      @case ('filters') {\n        <div class=\"flex min-w-0\">\n          <ul class=\"flex w-44 shrink-0 flex-col gap-1 pe-2\">\n            @for (group of groups(); track group.id) {\n              <li>\n                <button\n                  type=\"button\"\n                  class=\"flex w-full items-center gap-2 rounded-md px-3 py-2 text-start text-sm transition-colors hover:bg-accent/45\"\n                  [class.bg-accent/45]=\"activeGroup()?.id === group.id\"\n                  [attr.aria-current]=\"activeGroup()?.id === group.id ? 'true' : null\"\n                  (click)=\"selectGroup(group.id)\"\n                >\n                  <span class=\"min-w-0 flex-1 truncate\">{{ group.label }}</span>\n\n                  @if (draft.pendingGroupIds().has(group.id)) {\n                    <yuw-badge\n                      dot\n                      color=\"secondary\"\n                      style=\"width: 0.5rem; height: 0.5rem\"\n                      [attr.aria-label]=\"labels().pending\"\n                      [attr.title]=\"labels().pending\"\n                    />\n                  }\n                </button>\n              </li>\n            }\n          </ul>\n\n          @if (activeGroup(); as group) {\n            <div class=\"flex min-w-0 flex-1 flex-col gap-3 border-s p-3\">\n              <ng-container [ngTemplateOutlet]=\"options\" [ngTemplateOutletContext]=\"{ $implicit: group }\" />\n              <ng-container [ngTemplateOutlet]=\"commitRow\" />\n            </div>\n          }\n        </div>\n      }\n      @case ('sets') {\n        <ng-container [ngTemplateOutlet]=\"setsView\" [ngTemplateOutletContext]=\"{ $implicit: false }\" />\n      }\n      @default {\n        <ng-container [ngTemplateOutlet]=\"setForm\" [ngTemplateOutletContext]=\"{ $implicit: false }\" />\n      }\n    }\n  </yuw-popover>\n}\n", styles: [".scrollbar-none{scrollbar-width:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: YuwBadgeComponent, selector: "yuw-badge", inputs: ["color", "dot", "removeLabel", "variant"], outputs: ["removed"] }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }, { kind: "component", type: YuwButtonGroupComponent, selector: "yuw-button-group", inputs: ["ariaLabel", "buttons", "color", "orientation", "selectedColor", "selectedVariant", "size", "variant"], outputs: ["buttonClicked"] }, { kind: "directive", type: YuwButtonGroupContentDirective, selector: "ng-template[yuwButtonGroupContent]", inputs: ["yuwButtonGroupContent"] }, { kind: "component", type: YuwCheckboxComponent, selector: "yuw-checkbox", inputs: ["ariaDescribedby", "ariaLabel", "ariaLabelledby", "indeterminate", "inputId", "invalid", "name", "primary", "required", "checked"], outputs: ["indeterminateChange", "checkedChange"] }, { kind: "component", type: YuwListToolbarFilterSetFormComponent, selector: "yuw-list-toolbar-filter-set-form", inputs: ["labels", "mode", "name", "titleHidden"], outputs: ["cancelled", "confirmed", "deleteRequested"] }, { kind: "component", type: YuwListToolbarFilterSetsComponent, selector: "yuw-list-toolbar-filter-sets", inputs: ["canEdit", "canSave", "labels", "selectedId", "sets", "stretchActions", "titleHidden"], outputs: ["deleteRequested", "editRequested", "itemEditRequested", "picked", "saveRequested"] }, { kind: "component", type: YuwPopoverComponent, selector: "yuw-popover", inputs: ["align", "description", "offsetX", "open", "panelClass", "showTrigger", "sideOffset", "title", "triggerClass", "triggerColor", "triggerSize", "triggerTransparent", "triggerVariant"], outputs: ["openChange"] }, { kind: "component", type: YuwSheetComponent, selector: "yuw-sheet", inputs: ["ariaLabel", "ariaModal", "closeLabel", "closeOnOutsidePointerEvents", "description", "open", "overlayClass", "panelClass", "scrollStrategy", "showTrigger", "side", "title", "triggerSize", "triggerVariant"], outputs: ["openChange"] }, { kind: "directive", type: YuwTabContentDirective, selector: "ng-template[yuwTabContent]", inputs: ["yuwTabContent"] }, { kind: "directive", type: YuwTabPanelDirective, selector: "ng-template[yuwTabPanel]", inputs: ["yuwTabPanel"] }, { kind: "component", type: YuwTabsComponent, selector: "yuw-tabs", inputs: ["activationMode", "activeTab", "orientation", "size", "tabs", "class", "variant"], outputs: ["activeTabChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwListToolbarFiltersComponent, decorators: [{
             type: Component,
@@ -3958,16 +3988,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                         YuwButtonGroupComponent,
                         YuwButtonGroupContentDirective,
                         YuwCheckboxComponent,
-                        YuwComboboxComponent,
-                        YuwComboboxItemDirective,
                         YuwListToolbarFilterSetFormComponent,
+                        YuwListToolbarFilterSetsComponent,
                         YuwPopoverComponent,
                         YuwSheetComponent,
                         YuwTabContentDirective,
                         YuwTabPanelDirective,
                         YuwTabsComponent,
-                    ], providers: [provideIcons({ lucideChevronDown, lucideEllipsis, lucideStar, lucideX })], host: { class: 'flex min-w-0 max-w-full items-center gap-1' }, template: "<ng-template #options let-group>\n  <ul class=\"flex flex-col gap-1\" [attr.aria-label]=\"group.label\">\n    @for (option of group.options; track option.value) {\n      <li>\n        <label\n          class=\"flex cursor-pointer items-center justify-between gap-3 rounded-md px-3 py-1 text-sm transition-colors hover:bg-accent/45\"\n          [for]=\"`${group.id}-option-${option.value}`\"\n        >\n          <span class=\"min-w-0 truncate\">{{ option.label }}</span>\n\n          <yuw-checkbox\n            [inputId]=\"`${group.id}-option-${option.value}`\"\n            [checked]=\"draft.checkedValues()[group.id]?.has(option.value) ?? false\"\n            [disabled]=\"option.disabled ?? false\"\n            [ariaLabel]=\"option.label\"\n            (checkedChange)=\"onOptionChange(group, option.value, $event)\"\n          />\n        </label>\n      </li>\n    }\n  </ul>\n</ng-template>\n\n<ng-template #starIcon>\n  <ng-icon name=\"lucideStar\" size=\"16\" [class]=\"matchingSet() ? '[&_svg]:fill-current' : ''\" />\n</ng-template>\n\n<ng-template #setForm let-sheet>\n  @if (setPanelMode(); as mode) {\n    <yuw-list-toolbar-filter-set-form\n      [class]=\"sheet ? 'w-full pb-3' : 'w-64 p-1'\"\n      [titleHidden]=\"sheet\"\n      [labels]=\"setLabels()!\"\n      [mode]=\"mode\"\n      [name]=\"setPanelName()\"\n      (cancelled)=\"open.set(false)\"\n      (confirmed)=\"onSetFormConfirmed($event)\"\n      (deleteRequested)=\"onSetDeleteRequested()\"\n    />\n  }\n</ng-template>\n\n<ng-template #commitRow>\n  @if (selectedText(); as text) {\n    <p class=\"text-end text-xs text-muted-foreground pr-2\">{{ text }}</p>\n  }\n\n  <div class=\"flex justify-end gap-2 pt-3\">\n    <yuw-button variant=\"outline\" (clicked)=\"draft.clear()\">\n      {{ labels().clear }}\n    </yuw-button>\n\n    <yuw-button (clicked)=\"onApply()\">\n      {{ labels().apply }}\n    </yuw-button>\n  </div>\n</ng-template>\n\n@if (isMobile()) {\n  <yuw-button-group\n    variant=\"secondary\"\n    [buttons]=\"buttons()\"\n    [color]=\"buttonsColor()\"\n    [ariaLabel]=\"labels().title\"\n    (buttonClicked)=\"onButtonClicked($event)\"\n  >\n    <ng-template yuwButtonGroupContent=\"save\">\n      <ng-container [ngTemplateOutlet]=\"starIcon\" />\n    </ng-template>\n    <ng-template yuwButtonGroupContent=\"clear\">\n      <ng-icon name=\"lucideX\" size=\"16\" />\n    </ng-template>\n  </yuw-button-group>\n\n  <yuw-sheet\n    side=\"bottom\"\n    panelClass=\"max-h-[85svh] overflow-y-auto\"\n    [showTrigger]=\"false\"\n    [title]=\"sheetTitle()\"\n    [closeLabel]=\"labels().close\"\n    [(open)]=\"open\"\n  >\n    @if (setPanelMode()) {\n      <ng-container [ngTemplateOutlet]=\"setForm\" [ngTemplateOutletContext]=\"{ $implicit: true }\" />\n    } @else {\n      <div class=\"flex min-h-0 flex-col gap-3\">\n        <yuw-tabs\n          class=\"max-w-full justify-start overflow-x-auto overflow-y-hidden scrollbar-none [&::-webkit-scrollbar]:hidden scroll-fade-x\"\n          [tabs]=\"tabs()\"\n          [activeTab]=\"activeGroup()?.id ?? ''\"\n          (activeTabChange)=\"selectGroup($event)\"\n        >\n          @for (group of groups(); track group.id) {\n            <ng-template [yuwTabContent]=\"group.id\">\n              <span class=\"flex items-center gap-1.5 whitespace-nowrap\">\n                {{ group.label }}\n\n                @if (draft.pendingGroupIds().has(group.id)) {\n                  <yuw-badge\n                    dot\n                    color=\"secondary\"\n                    style=\"width: 0.5rem; height: 0.5rem\"\n                    [attr.aria-label]=\"labels().pending\"\n                    [attr.title]=\"labels().pending\"\n                  />\n                }\n              </span>\n            </ng-template>\n\n            <ng-template [yuwTabPanel]=\"group.id\">\n              <div class=\"max-h-[45svh] overflow-y-auto pt-2\">\n                <ng-container [ngTemplateOutlet]=\"options\" [ngTemplateOutletContext]=\"{ $implicit: group }\" />\n              </div>\n            </ng-template>\n          }\n        </yuw-tabs>\n\n        <div class=\"pb-3\">\n          <ng-container [ngTemplateOutlet]=\"commitRow\" />\n        </div>\n      </div>\n    }\n  </yuw-sheet>\n} @else {\n  <yuw-popover align=\"start\" panelClass=\"w-auto p-2 dark:border\" triggerClass=\"px-0\" triggerTransparent [(open)]=\"open\">\n    <yuw-button-group\n      yuwPopoverTrigger\n      variant=\"secondary\"\n      [buttons]=\"buttons()\"\n      [color]=\"buttonsColor()\"\n      [ariaLabel]=\"labels().title\"\n      (buttonClicked)=\"onButtonClicked($event)\"\n    >\n      <ng-template yuwButtonGroupContent=\"save\">\n        <ng-container [ngTemplateOutlet]=\"starIcon\" />\n      </ng-template>\n      <ng-template yuwButtonGroupContent=\"clear\">\n        <ng-icon name=\"lucideX\" size=\"16\" />\n      </ng-template>\n    </yuw-button-group>\n    @if (setPanelMode()) {\n      <ng-container [ngTemplateOutlet]=\"setForm\" [ngTemplateOutletContext]=\"{ $implicit: false }\" />\n    } @else {\n      <div class=\"flex min-w-0\">\n        <ul class=\"flex w-44 shrink-0 flex-col gap-1 pe-2\">\n          @for (group of groups(); track group.id) {\n            <li>\n              <button\n                type=\"button\"\n                class=\"flex w-full items-center gap-2 rounded-md px-3 py-2 text-start text-sm transition-colors hover:bg-accent/45\"\n                [class.bg-accent/45]=\"activeGroup()?.id === group.id\"\n                [attr.aria-current]=\"activeGroup()?.id === group.id ? 'true' : null\"\n                (click)=\"selectGroup(group.id)\"\n              >\n                <span class=\"min-w-0 flex-1 truncate\">{{ group.label }}</span>\n\n                @if (draft.pendingGroupIds().has(group.id)) {\n                  <yuw-badge\n                    dot\n                    color=\"secondary\"\n                    style=\"width: 0.5rem; height: 0.5rem\"\n                    [attr.aria-label]=\"labels().pending\"\n                    [attr.title]=\"labels().pending\"\n                  />\n                }\n              </button>\n            </li>\n          }\n        </ul>\n\n        @if (activeGroup(); as group) {\n          <div class=\"flex min-w-0 flex-1 flex-col gap-3 border-s p-3\">\n            <ng-container [ngTemplateOutlet]=\"options\" [ngTemplateOutletContext]=\"{ $implicit: group }\" />\n            <ng-container [ngTemplateOutlet]=\"commitRow\" />\n          </div>\n        }\n      </div>\n    }\n  </yuw-popover>\n}\n\n@if (setLabels(); as labels) {\n  @if (setOptions().length > 0) {\n    <div [class]=\"isMobile() ? 'relative inline-flex' : 'w-full max-w-52.5'\">\n      @if (isMobile()) {\n        <yuw-button variant=\"outline\" size=\"icon\" [ariaLabel]=\"labels.select\" (clicked)=\"openSetsList()\">\n          <ng-icon name=\"lucideChevronDown\" size=\"16\" />\n        </yuw-button>\n      }\n\n      <div [class]=\"isMobile() ? 'pointer-events-none absolute top-0 right-0 h-full w-52 opacity-0' : 'contents'\">\n        <yuw-combobox\n          readonlyTrigger\n          [options]=\"setOptions()\"\n          [value]=\"selectedSetId()\"\n          [triggerAriaLabel]=\"labels.select\"\n          [placeholder]=\"labels.select\"\n          (valueChange)=\"onSetPicked($event)\"\n        >\n          <ng-template yuwComboboxItem let-option>\n            <span class=\"min-w-0 flex-1 truncate\">{{ option.label }}</span>\n\n            @if (option.data) {\n              <span class=\"inline-flex\" (click)=\"$event.stopPropagation()\">\n                <yuw-button\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  [ariaLabel]=\"labels.edit\"\n                  (clicked)=\"openSetPanelFromList('rename', option.value)\"\n                >\n                  <ng-icon name=\"lucideEllipsis\" size=\"14\" />\n                </yuw-button>\n              </span>\n            }\n          </ng-template>\n        </yuw-combobox>\n      </div>\n    </div>\n  }\n}\n", styles: [".scrollbar-none{scrollbar-width:none}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { _setsCombobox: [{ type: i0.ViewChild, args: [i0.forwardRef(() => YuwComboboxComponent), { isSignal: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], groups: [{ type: i0.Input, args: [{ isSignal: true, alias: "groups", required: true }] }], idleColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "idleColor", required: true }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: true }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: true }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], sets: [{ type: i0.Input, args: [{ isSignal: true, alias: "sets", required: false }] }], setDeleted: [{ type: i0.Output, args: ["setDeleted"] }], setRenamed: [{ type: i0.Output, args: ["setRenamed"] }], setSaved: [{ type: i0.Output, args: ["setSaved"] }] } });
+                    ], providers: [provideIcons({ lucideFilter, lucideStar, lucideX })], host: { class: 'flex min-w-0 max-w-full items-center gap-1' }, template: "<ng-template #options let-group>\n  <ul class=\"flex flex-col gap-1\" [attr.aria-label]=\"group.label\">\n    @for (option of group.options; track option.value) {\n      <li>\n        <label\n          class=\"flex cursor-pointer items-center justify-between gap-3 rounded-md px-3 py-1 text-sm transition-colors hover:bg-accent/45\"\n          [for]=\"`${group.id}-option-${option.value}`\"\n        >\n          <span class=\"min-w-0 truncate\">{{ option.label }}</span>\n\n          <yuw-checkbox\n            [inputId]=\"`${group.id}-option-${option.value}`\"\n            [checked]=\"draft.checkedValues()[group.id]?.has(option.value) ?? false\"\n            [disabled]=\"option.disabled ?? false\"\n            [ariaLabel]=\"option.label\"\n            (checkedChange)=\"onOptionChange(group, option.value, $event)\"\n          />\n        </label>\n      </li>\n    }\n  </ul>\n</ng-template>\n\n<ng-template #starIcon>\n  <ng-icon name=\"lucideStar\" size=\"16\" [class]=\"matchingSet() ? '[&_svg]:fill-current' : ''\" />\n\n  @if (matchingSet(); as set) {\n    <span class=\"block max-w-[25ch] truncate\">{{ set.name }}</span>\n  }\n</ng-template>\n\n<ng-template #filterIcon>\n  <span class=\"relative inline-flex\">\n    <ng-icon name=\"lucideFilter\" size=\"16\" />\n\n    @if (hasActive()) {\n      <yuw-badge\n        color=\"destructive\"\n        class=\"absolute -top-2.5 -right-2.5 h-4 min-w-4 justify-center px-1 text-[10px] leading-none\"\n        data-testid=\"active-filters-count\"\n      >\n        {{ activeCount() }}\n      </yuw-badge>\n    }\n  </span>\n</ng-template>\n\n<ng-template #setForm let-sheet>\n  @if (setPanelMode(); as mode) {\n    <yuw-list-toolbar-filter-set-form\n      [class]=\"sheet ? 'w-full pb-3' : 'w-64 p-1'\"\n      [titleHidden]=\"sheet\"\n      [labels]=\"setLabels()!\"\n      [mode]=\"mode\"\n      [name]=\"setPanelName()\"\n      (cancelled)=\"open.set(false)\"\n      (confirmed)=\"onSetFormConfirmed($event)\"\n      (deleteRequested)=\"onSetDeleteRequested()\"\n    />\n  }\n</ng-template>\n\n<ng-template #setsView let-sheet>\n  <yuw-list-toolbar-filter-sets\n    [class]=\"sheet ? 'w-full pb-3' : 'w-64 p-1'\"\n    [titleHidden]=\"sheet\"\n    [stretchActions]=\"!sheet\"\n    [labels]=\"setLabels()!\"\n    [sets]=\"sets() ?? []\"\n    [selectedId]=\"selectedSetId()\"\n    [canSave]=\"canSaveSet()\"\n    [canEdit]=\"!!matchingSet()\"\n    (picked)=\"onSetPicked($event)\"\n    (itemEditRequested)=\"openSetPanel('rename', $event)\"\n    (saveRequested)=\"openSetPanel('save')\"\n    (editRequested)=\"openSetPanel('rename', matchingSet()?.id)\"\n    (deleteRequested)=\"openSetPanel('delete', matchingSet()?.id)\"\n  />\n</ng-template>\n\n<ng-template #commitRow>\n  @if (selectedText(); as text) {\n    <p class=\"text-end text-xs text-muted-foreground pr-2\">{{ text }}</p>\n  }\n\n  <div class=\"flex justify-end gap-2 pt-3\">\n    <yuw-button variant=\"outline\" (clicked)=\"draft.clear()\">\n      {{ labels().clear }}\n    </yuw-button>\n\n    <yuw-button (clicked)=\"onApply()\">\n      {{ labels().apply }}\n    </yuw-button>\n  </div>\n</ng-template>\n\n@if (isMobile()) {\n  <yuw-button-group\n    variant=\"secondary\"\n    [buttons]=\"buttons()\"\n    [color]=\"buttonsColor()\"\n    [ariaLabel]=\"labels().title\"\n    (buttonClicked)=\"onButtonClicked($event)\"\n  >\n    <ng-template yuwButtonGroupContent=\"sets\">\n      <ng-container [ngTemplateOutlet]=\"starIcon\" />\n    </ng-template>\n    <ng-template yuwButtonGroupContent=\"filters\">\n      <ng-container [ngTemplateOutlet]=\"filterIcon\" />\n    </ng-template>\n    <ng-template yuwButtonGroupContent=\"clear\">\n      <ng-icon name=\"lucideX\" size=\"16\" />\n    </ng-template>\n  </yuw-button-group>\n\n  <yuw-sheet\n    side=\"bottom\"\n    panelClass=\"max-h-[85svh] overflow-y-auto\"\n    [showTrigger]=\"false\"\n    [title]=\"sheetTitle()\"\n    [closeLabel]=\"labels().close\"\n    [(open)]=\"open\"\n  >\n    @switch (panelView()) {\n      @case ('filters') {\n        <div class=\"flex min-h-0 flex-col gap-3\">\n          <yuw-tabs\n            class=\"max-w-full justify-start overflow-x-auto overflow-y-hidden scrollbar-none [&::-webkit-scrollbar]:hidden scroll-fade-x\"\n            [tabs]=\"tabs()\"\n            [activeTab]=\"activeGroup()?.id ?? ''\"\n            (activeTabChange)=\"selectGroup($event)\"\n          >\n            @for (group of groups(); track group.id) {\n              <ng-template [yuwTabContent]=\"group.id\">\n                <span class=\"flex items-center gap-1.5 whitespace-nowrap\">\n                  {{ group.label }}\n\n                  @if (draft.pendingGroupIds().has(group.id)) {\n                    <yuw-badge\n                      dot\n                      color=\"secondary\"\n                      style=\"width: 0.5rem; height: 0.5rem\"\n                      [attr.aria-label]=\"labels().pending\"\n                      [attr.title]=\"labels().pending\"\n                    />\n                  }\n                </span>\n              </ng-template>\n\n              <ng-template [yuwTabPanel]=\"group.id\">\n                <div class=\"max-h-[45svh] overflow-y-auto pt-2\">\n                  <ng-container [ngTemplateOutlet]=\"options\" [ngTemplateOutletContext]=\"{ $implicit: group }\" />\n                </div>\n              </ng-template>\n            }\n          </yuw-tabs>\n\n          <div class=\"pb-3\">\n            <ng-container [ngTemplateOutlet]=\"commitRow\" />\n          </div>\n        </div>\n      }\n      @case ('sets') {\n        <ng-container [ngTemplateOutlet]=\"setsView\" [ngTemplateOutletContext]=\"{ $implicit: true }\" />\n      }\n      @default {\n        <ng-container [ngTemplateOutlet]=\"setForm\" [ngTemplateOutletContext]=\"{ $implicit: true }\" />\n      }\n    }\n  </yuw-sheet>\n} @else {\n  <yuw-popover align=\"start\" panelClass=\"w-auto p-2 dark:border\" triggerClass=\"px-0\" triggerTransparent [(open)]=\"open\">\n    <yuw-button-group\n      yuwPopoverTrigger\n      variant=\"secondary\"\n      [buttons]=\"buttons()\"\n      [color]=\"buttonsColor()\"\n      [ariaLabel]=\"labels().title\"\n      (buttonClicked)=\"onButtonClicked($event)\"\n    >\n      <ng-template yuwButtonGroupContent=\"sets\">\n        <ng-container [ngTemplateOutlet]=\"starIcon\" />\n      </ng-template>\n      <ng-template yuwButtonGroupContent=\"filters\">\n        <ng-container [ngTemplateOutlet]=\"filterIcon\" />\n      </ng-template>\n      <ng-template yuwButtonGroupContent=\"clear\">\n        <ng-icon name=\"lucideX\" size=\"16\" />\n      </ng-template>\n    </yuw-button-group>\n\n    @switch (panelView()) {\n      @case ('filters') {\n        <div class=\"flex min-w-0\">\n          <ul class=\"flex w-44 shrink-0 flex-col gap-1 pe-2\">\n            @for (group of groups(); track group.id) {\n              <li>\n                <button\n                  type=\"button\"\n                  class=\"flex w-full items-center gap-2 rounded-md px-3 py-2 text-start text-sm transition-colors hover:bg-accent/45\"\n                  [class.bg-accent/45]=\"activeGroup()?.id === group.id\"\n                  [attr.aria-current]=\"activeGroup()?.id === group.id ? 'true' : null\"\n                  (click)=\"selectGroup(group.id)\"\n                >\n                  <span class=\"min-w-0 flex-1 truncate\">{{ group.label }}</span>\n\n                  @if (draft.pendingGroupIds().has(group.id)) {\n                    <yuw-badge\n                      dot\n                      color=\"secondary\"\n                      style=\"width: 0.5rem; height: 0.5rem\"\n                      [attr.aria-label]=\"labels().pending\"\n                      [attr.title]=\"labels().pending\"\n                    />\n                  }\n                </button>\n              </li>\n            }\n          </ul>\n\n          @if (activeGroup(); as group) {\n            <div class=\"flex min-w-0 flex-1 flex-col gap-3 border-s p-3\">\n              <ng-container [ngTemplateOutlet]=\"options\" [ngTemplateOutletContext]=\"{ $implicit: group }\" />\n              <ng-container [ngTemplateOutlet]=\"commitRow\" />\n            </div>\n          }\n        </div>\n      }\n      @case ('sets') {\n        <ng-container [ngTemplateOutlet]=\"setsView\" [ngTemplateOutletContext]=\"{ $implicit: false }\" />\n      }\n      @default {\n        <ng-container [ngTemplateOutlet]=\"setForm\" [ngTemplateOutletContext]=\"{ $implicit: false }\" />\n      }\n    }\n  </yuw-popover>\n}\n", styles: [".scrollbar-none{scrollbar-width:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], groups: [{ type: i0.Input, args: [{ isSignal: true, alias: "groups", required: true }] }], idleColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "idleColor", required: true }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: true }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: true }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], sets: [{ type: i0.Input, args: [{ isSignal: true, alias: "sets", required: false }] }], setDeleted: [{ type: i0.Output, args: ["setDeleted"] }], setRenamed: [{ type: i0.Output, args: ["setRenamed"] }], setSaved: [{ type: i0.Output, args: ["setSaved"] }] } });
 
 /**
  * Toolbar of a list page: filters on the leading edge, search, export and column visibility on the