yukit-web 0.3.0 → 0.3.1

package/fesm2022/yukit-web.mjs

@@ -1831,7 +1831,7 @@ let nextYuwInputFileId = 0;
  * `ngModel`), validation styling and helper/error text.
  *
  * `avatar` (default) shows a `yuw-avatar` with the chosen image — or `src` while nothing is chosen —
- * beside an upload button, like a profile-photo field. `inline` is a full-width outline button with
+ * beside an upload button, like a profile-photo field; clicking the avatar opens the picker too. `inline` is a full-width outline button with
  * an upload icon; once a file is chosen, the button is replaced by a single line showing its name, size and a remove icon.
  * With several files the line reads `countLabel(n)` and opens the list, one removable row each — in
  * a popover from `md` up and a bottom sheet below it, like the list-toolbar filters.
@@ -1945,7 +1945,7 @@ class YuwInputFileComponent extends YuwValueAccessorBase {
         this._commit(Array.from(event.target.files ?? []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwInputFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwInputFileComponent, isStandalone: true, selector: "yuw-input-file", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, countLabel: { classPropertyName: "countLabel", publicName: "countLabel", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, fallback: { classPropertyName: "fallback", publicName: "fallback", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, uploadLabel: { classPropertyName: "uploadLabel", publicName: "uploadLabel", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", removed: "removed" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwInputFileComponent), provideIcons({ lucideUpload, lucideX })], viewQueries: [{ propertyName: "_native", first: true, predicate: ["native"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #fileRow let-entry>\n  <span class=\"min-w-0 flex-1 truncate\">{{ entry.file.name }}</span>\n  <span class=\"shrink-0 text-muted-foreground\">{{ entry.size }}</span>\n  <yuw-button\n    variant=\"ghost\"\n    size=\"icon-xs\"\n    [ariaLabel]=\"removeLabel()\"\n    [disabled]=\"_disabled()\"\n    (clicked)=\"removed.emit(entry.file)\"\n  >\n    <ng-icon name=\"lucideX\" size=\"14\" />\n  </yuw-button>\n</ng-template>\n\n<hlm-field\n  yuwFieldFeedback\n  #feedback=\"yuwFieldFeedback\"\n  class=\"min-w-0 data-[matches-spartan-invalid=true]:text-inherit\"\n  [invalid]=\"invalid()\"\n  [errorText]=\"errorText()\"\n>\n  <input\n    #native\n    hlmInput\n    hidden\n    type=\"file\"\n    [id]=\"_inputId()\"\n    [attr.accept]=\"accept()\"\n    [multiple]=\"multiple()\"\n    [disabled]=\"_disabled()\"\n    [required]=\"required()\"\n    [forceInvalid]=\"feedback.forcedInvalid()\"\n    [attr.name]=\"name()\"\n    (change)=\"onChange($event)\"\n  />\n\n  @if (variant() === 'avatar') {\n    <div class=\"flex min-w-0 flex-wrap items-center gap-3\">\n      <yuw-avatar size=\"lg\" [class]=\"userClass()\" [src]=\"_avatarSrc()\" [alt]=\"alt()\" [fallback]=\"fallback()\" />\n      <yuw-button\n        type=\"button\"\n        variant=\"outline\"\n        [size]=\"size()\"\n        [disabled]=\"_disabled()\"\n        (clicked)=\"native.click()\"\n        (focusout)=\"_onBlur()\"\n      >\n        {{ uploadLabel() }}\n      </yuw-button>\n    </div>\n  } @else {\n    <div [class]=\"_inlineClasses()\">\n      @if (_entries().length === 0) {\n        <yuw-button\n          type=\"button\"\n          variant=\"outline\"\n          color=\"secondary\"\n          class=\"w-full\"\n          [size]=\"size()\"\n          [disabled]=\"_disabled()\"\n          (clicked)=\"native.click()\"\n          (focusout)=\"_onBlur()\"\n        >\n          <ng-icon name=\"lucideUpload\" size=\"16\" />\n          {{ uploadLabel() }}\n        </yuw-button>\n      } @else if (_entries().length === 1) {\n        <div [class]=\"_boxClasses()\" [class.border-destructive]=\"feedback.showError()\">\n          <ng-container [ngTemplateOutlet]=\"fileRow\" [ngTemplateOutletContext]=\"{ $implicit: _entries()[0] }\" />\n        </div>\n      } @else {\n        @if (_isMobile()) {\n          <yuw-button\n            type=\"button\"\n            variant=\"outline\"\n            class=\"w-full justify-start font-normal\"\n            [size]=\"size()\"\n            [disabled]=\"_disabled()\"\n            (clicked)=\"_listOpen.set(true)\"\n          >\n            {{ _countText() }}\n          </yuw-button>\n\n          <yuw-sheet\n            side=\"bottom\"\n            panelClass=\"max-h-[85svh] overflow-y-auto\"\n            [showTrigger]=\"false\"\n            [title]=\"_countText()\"\n            [(open)]=\"_listOpen\"\n          >\n            <ul class=\"flex flex-col gap-1 pb-3\">\n              @for (entry of _entries(); track entry.file) {\n                <li class=\"flex items-center gap-2 text-sm\">\n                  <ng-container [ngTemplateOutlet]=\"fileRow\" [ngTemplateOutletContext]=\"{ $implicit: entry }\" />\n                </li>\n              }\n            </ul>\n          </yuw-sheet>\n        } @else {\n          <div class=\"[&_yuw-button]:flex [&_yuw-button]:w-full\">\n            <yuw-popover\n              align=\"start\"\n              panelClass=\"w-80 p-2\"\n              triggerVariant=\"outline\"\n              triggerClass=\"w-full justify-start font-normal\"\n              [triggerSize]=\"size()\"\n              [(open)]=\"_listOpen\"\n            >\n              <span yuwPopoverTrigger>{{ _countText() }}</span>\n\n              <ul class=\"flex flex-col gap-1\">\n                @for (entry of _entries(); track entry.file) {\n                  <li class=\"flex items-center gap-2 text-sm\">\n                    <ng-container [ngTemplateOutlet]=\"fileRow\" [ngTemplateOutletContext]=\"{ $implicit: entry }\" />\n                  </li>\n                }\n              </ul>\n            </yuw-popover>\n          </div>\n        }\n      }\n    </div>\n  }\n\n  @if (feedback.showError()) {\n    <hlm-field-description role=\"alert\" class=\"text-destructive\">{{ feedback.errorMessage() }}</hlm-field-description>\n  } @else if (helperText(); as helper) {\n    <hlm-field-description>{{ helper }}</hlm-field-description>\n  }\n</hlm-field>\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: "directive", type: HlmField, selector: "[hlmField],hlm-field", inputs: ["orientation"] }, { kind: "directive", type: HlmFieldDescription, selector: "[hlmFieldDescription],hlm-field-description", inputs: ["id"] }, { kind: "directive", type: YuwFieldFeedbackDirective, selector: "hlm-field[yuwFieldFeedback]", inputs: ["errorText", "invalid"], exportAs: ["yuwFieldFeedback"] }, { kind: "directive", type: HlmInput, selector: "[hlmInput]" }, { kind: "component", type: YuwAvatarComponent, selector: "yuw-avatar", inputs: ["alt", "badge", "fallback", "group", "groupCount", "size", "src", "class"] }, { 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: 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwInputFileComponent, isStandalone: true, selector: "yuw-input-file", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, countLabel: { classPropertyName: "countLabel", publicName: "countLabel", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, fallback: { classPropertyName: "fallback", publicName: "fallback", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, uploadLabel: { classPropertyName: "uploadLabel", publicName: "uploadLabel", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", removed: "removed" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwInputFileComponent), provideIcons({ lucideUpload, lucideX })], viewQueries: [{ propertyName: "_native", first: true, predicate: ["native"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #fileRow let-entry>\n  <span class=\"min-w-0 flex-1 truncate\">{{ entry.file.name }}</span>\n  <span class=\"shrink-0 text-muted-foreground\">{{ entry.size }}</span>\n  <yuw-button\n    variant=\"ghost\"\n    size=\"icon-xs\"\n    [ariaLabel]=\"removeLabel()\"\n    [disabled]=\"_disabled()\"\n    (clicked)=\"removed.emit(entry.file)\"\n  >\n    <ng-icon name=\"lucideX\" size=\"14\" />\n  </yuw-button>\n</ng-template>\n\n<hlm-field\n  yuwFieldFeedback\n  #feedback=\"yuwFieldFeedback\"\n  class=\"min-w-0 data-[matches-spartan-invalid=true]:text-inherit\"\n  [invalid]=\"invalid()\"\n  [errorText]=\"errorText()\"\n>\n  <input\n    #native\n    hlmInput\n    hidden\n    type=\"file\"\n    [id]=\"_inputId()\"\n    [attr.accept]=\"accept()\"\n    [multiple]=\"multiple()\"\n    [disabled]=\"_disabled()\"\n    [required]=\"required()\"\n    [forceInvalid]=\"feedback.forcedInvalid()\"\n    [attr.name]=\"name()\"\n    (change)=\"onChange($event)\"\n  />\n\n  @if (variant() === 'avatar') {\n    <div class=\"flex min-w-0 flex-wrap items-center gap-3\">\n      <button\n        type=\"button\"\n        class=\"cursor-pointer rounded-full disabled:cursor-not-allowed\"\n        tabindex=\"-1\"\n        [attr.aria-label]=\"uploadLabel()\"\n        [disabled]=\"_disabled()\"\n        (click)=\"native.click()\"\n      >\n        <yuw-avatar size=\"lg\" [class]=\"userClass()\" [src]=\"_avatarSrc()\" [alt]=\"alt()\" [fallback]=\"fallback()\" />\n      </button>\n      <yuw-button\n        type=\"button\"\n        variant=\"outline\"\n        [size]=\"size()\"\n        [disabled]=\"_disabled()\"\n        (clicked)=\"native.click()\"\n        (focusout)=\"_onBlur()\"\n      >\n        {{ uploadLabel() }}\n      </yuw-button>\n    </div>\n  } @else {\n    <div [class]=\"_inlineClasses()\">\n      @if (_entries().length === 0) {\n        <yuw-button\n          type=\"button\"\n          variant=\"outline\"\n          color=\"secondary\"\n          class=\"w-full\"\n          [size]=\"size()\"\n          [disabled]=\"_disabled()\"\n          (clicked)=\"native.click()\"\n          (focusout)=\"_onBlur()\"\n        >\n          <ng-icon name=\"lucideUpload\" size=\"16\" />\n          {{ uploadLabel() }}\n        </yuw-button>\n      } @else if (_entries().length === 1) {\n        <div [class]=\"_boxClasses()\" [class.border-destructive]=\"feedback.showError()\">\n          <ng-container [ngTemplateOutlet]=\"fileRow\" [ngTemplateOutletContext]=\"{ $implicit: _entries()[0] }\" />\n        </div>\n      } @else {\n        @if (_isMobile()) {\n          <yuw-button\n            type=\"button\"\n            variant=\"outline\"\n            class=\"w-full justify-start font-normal\"\n            [size]=\"size()\"\n            [disabled]=\"_disabled()\"\n            (clicked)=\"_listOpen.set(true)\"\n          >\n            {{ _countText() }}\n          </yuw-button>\n\n          <yuw-sheet\n            side=\"bottom\"\n            panelClass=\"max-h-[85svh] overflow-y-auto\"\n            [showTrigger]=\"false\"\n            [title]=\"_countText()\"\n            [(open)]=\"_listOpen\"\n          >\n            <ul class=\"flex flex-col gap-1 pb-3\">\n              @for (entry of _entries(); track entry.file) {\n                <li class=\"flex items-center gap-2 text-sm\">\n                  <ng-container [ngTemplateOutlet]=\"fileRow\" [ngTemplateOutletContext]=\"{ $implicit: entry }\" />\n                </li>\n              }\n            </ul>\n          </yuw-sheet>\n        } @else {\n          <div class=\"[&_yuw-button]:flex [&_yuw-button]:w-full\">\n            <yuw-popover\n              align=\"start\"\n              panelClass=\"w-80 p-2\"\n              triggerVariant=\"outline\"\n              triggerClass=\"w-full justify-start font-normal\"\n              [triggerSize]=\"size()\"\n              [(open)]=\"_listOpen\"\n            >\n              <span yuwPopoverTrigger>{{ _countText() }}</span>\n\n              <ul class=\"flex flex-col gap-1\">\n                @for (entry of _entries(); track entry.file) {\n                  <li class=\"flex items-center gap-2 text-sm\">\n                    <ng-container [ngTemplateOutlet]=\"fileRow\" [ngTemplateOutletContext]=\"{ $implicit: entry }\" />\n                  </li>\n                }\n              </ul>\n            </yuw-popover>\n          </div>\n        }\n      }\n    </div>\n  }\n\n  @if (feedback.showError()) {\n    <hlm-field-description role=\"alert\" class=\"text-destructive\">{{ feedback.errorMessage() }}</hlm-field-description>\n  } @else if (helperText(); as helper) {\n    <hlm-field-description>{{ helper }}</hlm-field-description>\n  }\n</hlm-field>\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: "directive", type: HlmField, selector: "[hlmField],hlm-field", inputs: ["orientation"] }, { kind: "directive", type: HlmFieldDescription, selector: "[hlmFieldDescription],hlm-field-description", inputs: ["id"] }, { kind: "directive", type: YuwFieldFeedbackDirective, selector: "hlm-field[yuwFieldFeedback]", inputs: ["errorText", "invalid"], exportAs: ["yuwFieldFeedback"] }, { kind: "directive", type: HlmInput, selector: "[hlmInput]" }, { kind: "component", type: YuwAvatarComponent, selector: "yuw-avatar", inputs: ["alt", "badge", "fallback", "group", "groupCount", "size", "src", "class"] }, { 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: 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwInputFileComponent, decorators: [{
             type: Component,
@@ -1962,7 +1962,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                         YuwSheetComponent,
                     ], providers: [provideValueAccessor(YuwInputFileComponent), provideIcons({ lucideUpload, lucideX })], host: {
                         class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #fileRow let-entry>\n  <span class=\"min-w-0 flex-1 truncate\">{{ entry.file.name }}</span>\n  <span class=\"shrink-0 text-muted-foreground\">{{ entry.size }}</span>\n  <yuw-button\n    variant=\"ghost\"\n    size=\"icon-xs\"\n    [ariaLabel]=\"removeLabel()\"\n    [disabled]=\"_disabled()\"\n    (clicked)=\"removed.emit(entry.file)\"\n  >\n    <ng-icon name=\"lucideX\" size=\"14\" />\n  </yuw-button>\n</ng-template>\n\n<hlm-field\n  yuwFieldFeedback\n  #feedback=\"yuwFieldFeedback\"\n  class=\"min-w-0 data-[matches-spartan-invalid=true]:text-inherit\"\n  [invalid]=\"invalid()\"\n  [errorText]=\"errorText()\"\n>\n  <input\n    #native\n    hlmInput\n    hidden\n    type=\"file\"\n    [id]=\"_inputId()\"\n    [attr.accept]=\"accept()\"\n    [multiple]=\"multiple()\"\n    [disabled]=\"_disabled()\"\n    [required]=\"required()\"\n    [forceInvalid]=\"feedback.forcedInvalid()\"\n    [attr.name]=\"name()\"\n    (change)=\"onChange($event)\"\n  />\n\n  @if (variant() === 'avatar') {\n    <div class=\"flex min-w-0 flex-wrap items-center gap-3\">\n      <yuw-avatar size=\"lg\" [class]=\"userClass()\" [src]=\"_avatarSrc()\" [alt]=\"alt()\" [fallback]=\"fallback()\" />\n      <yuw-button\n        type=\"button\"\n        variant=\"outline\"\n        [size]=\"size()\"\n        [disabled]=\"_disabled()\"\n        (clicked)=\"native.click()\"\n        (focusout)=\"_onBlur()\"\n      >\n        {{ uploadLabel() }}\n      </yuw-button>\n    </div>\n  } @else {\n    <div [class]=\"_inlineClasses()\">\n      @if (_entries().length === 0) {\n        <yuw-button\n          type=\"button\"\n          variant=\"outline\"\n          color=\"secondary\"\n          class=\"w-full\"\n          [size]=\"size()\"\n          [disabled]=\"_disabled()\"\n          (clicked)=\"native.click()\"\n          (focusout)=\"_onBlur()\"\n        >\n          <ng-icon name=\"lucideUpload\" size=\"16\" />\n          {{ uploadLabel() }}\n        </yuw-button>\n      } @else if (_entries().length === 1) {\n        <div [class]=\"_boxClasses()\" [class.border-destructive]=\"feedback.showError()\">\n          <ng-container [ngTemplateOutlet]=\"fileRow\" [ngTemplateOutletContext]=\"{ $implicit: _entries()[0] }\" />\n        </div>\n      } @else {\n        @if (_isMobile()) {\n          <yuw-button\n            type=\"button\"\n            variant=\"outline\"\n            class=\"w-full justify-start font-normal\"\n            [size]=\"size()\"\n            [disabled]=\"_disabled()\"\n            (clicked)=\"_listOpen.set(true)\"\n          >\n            {{ _countText() }}\n          </yuw-button>\n\n          <yuw-sheet\n            side=\"bottom\"\n            panelClass=\"max-h-[85svh] overflow-y-auto\"\n            [showTrigger]=\"false\"\n            [title]=\"_countText()\"\n            [(open)]=\"_listOpen\"\n          >\n            <ul class=\"flex flex-col gap-1 pb-3\">\n              @for (entry of _entries(); track entry.file) {\n                <li class=\"flex items-center gap-2 text-sm\">\n                  <ng-container [ngTemplateOutlet]=\"fileRow\" [ngTemplateOutletContext]=\"{ $implicit: entry }\" />\n                </li>\n              }\n            </ul>\n          </yuw-sheet>\n        } @else {\n          <div class=\"[&_yuw-button]:flex [&_yuw-button]:w-full\">\n            <yuw-popover\n              align=\"start\"\n              panelClass=\"w-80 p-2\"\n              triggerVariant=\"outline\"\n              triggerClass=\"w-full justify-start font-normal\"\n              [triggerSize]=\"size()\"\n              [(open)]=\"_listOpen\"\n            >\n              <span yuwPopoverTrigger>{{ _countText() }}</span>\n\n              <ul class=\"flex flex-col gap-1\">\n                @for (entry of _entries(); track entry.file) {\n                  <li class=\"flex items-center gap-2 text-sm\">\n                    <ng-container [ngTemplateOutlet]=\"fileRow\" [ngTemplateOutletContext]=\"{ $implicit: entry }\" />\n                  </li>\n                }\n              </ul>\n            </yuw-popover>\n          </div>\n        }\n      }\n    </div>\n  }\n\n  @if (feedback.showError()) {\n    <hlm-field-description role=\"alert\" class=\"text-destructive\">{{ feedback.errorMessage() }}</hlm-field-description>\n  } @else if (helperText(); as helper) {\n    <hlm-field-description>{{ helper }}</hlm-field-description>\n  }\n</hlm-field>\n" }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #fileRow let-entry>\n  <span class=\"min-w-0 flex-1 truncate\">{{ entry.file.name }}</span>\n  <span class=\"shrink-0 text-muted-foreground\">{{ entry.size }}</span>\n  <yuw-button\n    variant=\"ghost\"\n    size=\"icon-xs\"\n    [ariaLabel]=\"removeLabel()\"\n    [disabled]=\"_disabled()\"\n    (clicked)=\"removed.emit(entry.file)\"\n  >\n    <ng-icon name=\"lucideX\" size=\"14\" />\n  </yuw-button>\n</ng-template>\n\n<hlm-field\n  yuwFieldFeedback\n  #feedback=\"yuwFieldFeedback\"\n  class=\"min-w-0 data-[matches-spartan-invalid=true]:text-inherit\"\n  [invalid]=\"invalid()\"\n  [errorText]=\"errorText()\"\n>\n  <input\n    #native\n    hlmInput\n    hidden\n    type=\"file\"\n    [id]=\"_inputId()\"\n    [attr.accept]=\"accept()\"\n    [multiple]=\"multiple()\"\n    [disabled]=\"_disabled()\"\n    [required]=\"required()\"\n    [forceInvalid]=\"feedback.forcedInvalid()\"\n    [attr.name]=\"name()\"\n    (change)=\"onChange($event)\"\n  />\n\n  @if (variant() === 'avatar') {\n    <div class=\"flex min-w-0 flex-wrap items-center gap-3\">\n      <button\n        type=\"button\"\n        class=\"cursor-pointer rounded-full disabled:cursor-not-allowed\"\n        tabindex=\"-1\"\n        [attr.aria-label]=\"uploadLabel()\"\n        [disabled]=\"_disabled()\"\n        (click)=\"native.click()\"\n      >\n        <yuw-avatar size=\"lg\" [class]=\"userClass()\" [src]=\"_avatarSrc()\" [alt]=\"alt()\" [fallback]=\"fallback()\" />\n      </button>\n      <yuw-button\n        type=\"button\"\n        variant=\"outline\"\n        [size]=\"size()\"\n        [disabled]=\"_disabled()\"\n        (clicked)=\"native.click()\"\n        (focusout)=\"_onBlur()\"\n      >\n        {{ uploadLabel() }}\n      </yuw-button>\n    </div>\n  } @else {\n    <div [class]=\"_inlineClasses()\">\n      @if (_entries().length === 0) {\n        <yuw-button\n          type=\"button\"\n          variant=\"outline\"\n          color=\"secondary\"\n          class=\"w-full\"\n          [size]=\"size()\"\n          [disabled]=\"_disabled()\"\n          (clicked)=\"native.click()\"\n          (focusout)=\"_onBlur()\"\n        >\n          <ng-icon name=\"lucideUpload\" size=\"16\" />\n          {{ uploadLabel() }}\n        </yuw-button>\n      } @else if (_entries().length === 1) {\n        <div [class]=\"_boxClasses()\" [class.border-destructive]=\"feedback.showError()\">\n          <ng-container [ngTemplateOutlet]=\"fileRow\" [ngTemplateOutletContext]=\"{ $implicit: _entries()[0] }\" />\n        </div>\n      } @else {\n        @if (_isMobile()) {\n          <yuw-button\n            type=\"button\"\n            variant=\"outline\"\n            class=\"w-full justify-start font-normal\"\n            [size]=\"size()\"\n            [disabled]=\"_disabled()\"\n            (clicked)=\"_listOpen.set(true)\"\n          >\n            {{ _countText() }}\n          </yuw-button>\n\n          <yuw-sheet\n            side=\"bottom\"\n            panelClass=\"max-h-[85svh] overflow-y-auto\"\n            [showTrigger]=\"false\"\n            [title]=\"_countText()\"\n            [(open)]=\"_listOpen\"\n          >\n            <ul class=\"flex flex-col gap-1 pb-3\">\n              @for (entry of _entries(); track entry.file) {\n                <li class=\"flex items-center gap-2 text-sm\">\n                  <ng-container [ngTemplateOutlet]=\"fileRow\" [ngTemplateOutletContext]=\"{ $implicit: entry }\" />\n                </li>\n              }\n            </ul>\n          </yuw-sheet>\n        } @else {\n          <div class=\"[&_yuw-button]:flex [&_yuw-button]:w-full\">\n            <yuw-popover\n              align=\"start\"\n              panelClass=\"w-80 p-2\"\n              triggerVariant=\"outline\"\n              triggerClass=\"w-full justify-start font-normal\"\n              [triggerSize]=\"size()\"\n              [(open)]=\"_listOpen\"\n            >\n              <span yuwPopoverTrigger>{{ _countText() }}</span>\n\n              <ul class=\"flex flex-col gap-1\">\n                @for (entry of _entries(); track entry.file) {\n                  <li class=\"flex items-center gap-2 text-sm\">\n                    <ng-container [ngTemplateOutlet]=\"fileRow\" [ngTemplateOutletContext]=\"{ $implicit: entry }\" />\n                  </li>\n                }\n              </ul>\n            </yuw-popover>\n          </div>\n        }\n      }\n    </div>\n  }\n\n  @if (feedback.showError()) {\n    <hlm-field-description role=\"alert\" class=\"text-destructive\">{{ feedback.errorMessage() }}</hlm-field-description>\n  } @else if (helperText(); as helper) {\n    <hlm-field-description>{{ helper }}</hlm-field-description>\n  }\n</hlm-field>\n" }]
         }], ctorParameters: () => [], propDecorators: { _native: [{ type: i0.ViewChild, args: ['native', { isSignal: true }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], countLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "countLabel", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], fallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "fallback", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], removeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeLabel", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], uploadLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadLabel", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }] } });
 
 let nextYuwTextareaId = 0;
@@ -3767,7 +3767,44 @@ const YuwTableImports = [
     YuwDatatablePaginationDirective,
 ];
 
+/**
+ * Replaces the checkbox list of one filter group inside `<yuw-list-toolbar>` with projected markup.
+ * Apply it to an `<ng-template>` and pass the id of the group it renders; that group needs no
+ * `options`.
+ *
+ * The template feeds the same staged selection as the checkboxes: calling `change` stages the value
+ * under the group id, so the pending dot, the applied count, Apply, Clear and saved sets all work
+ * without extra wiring.
+ *
+ * Usage:
+ * ```html
+ * <yuw-list-toolbar [filterGroups]="groups" [(selection)]="selection" [labels]="labels">
+ *   <ng-template yuwFilterContent="customer" let-value="value" let-change="change">
+ *     <yuw-combobox [options]="customers" [value]="value ?? ''" (valueChange)="change($event)" />
+ *   </ng-template>
+ * </yuw-list-toolbar>
+ * ```
+ *
+ * Inputs:
+ * - `yuwFilterContent`: Required string; id of the filter group this template renders.
+ */
+class YuwFilterContentDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+        this.groupId = input.required({ ...(ngDevMode ? { debugName: "groupId" } : /* istanbul ignore next */ {}), alias: 'yuwFilterContent' });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwFilterContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.22", type: YuwFilterContentDirective, isStandalone: true, selector: "ng-template[yuwFilterContent]", inputs: { groupId: { classPropertyName: "groupId", publicName: "yuwFilterContent", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwFilterContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[yuwFilterContent]',
+                }]
+        }], propDecorators: { groupId: [{ type: i0.Input, args: [{ isSignal: true, alias: "yuwFilterContent", required: true }] }] } });
+
 const VIEW_MODES = ['list', 'block'];
+const DEFAULT_VIEW_MODE_ICONS = { list: 'lucideList', block: 'lucideLayoutGrid' };
 /**
  * What counts as inside the columns popover: its trigger, its panel and the combobox list, which
  * renders in its own overlay outside the panel.
@@ -3798,6 +3835,7 @@ const INSIDE_COLUMNS_SELECTOR = '.yuw-columns-trigger, hlm-popover-content, hlm-
  * - `searchPlaceholder`: Placeholder of the search field; the search renders only when set.
  * - `showExport`: Renders the export button. Default is `false`.
  * - `viewMode`: Two-way (`[(viewMode)]`) `YuwViewMode` (`'list'` or `'block'`); the list/block switch renders only when set.
+ * - `viewModeIcons`: Partial override of the switch icons by mode (ng-icon names, registered by the consumer with `provideIcons`). Defaults are `lucideList` and `lucideLayoutGrid`.
  *
  * Outputs:
  * - `exported`: Emits the `MouseEvent` of the export button click.
@@ -3816,6 +3854,7 @@ class YuwListToolbarActionsComponent {
         this.searchPlaceholder = input(...(ngDevMode ? [undefined, { debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
         this.showExport = input(false, { ...(ngDevMode ? { debugName: "showExport" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.viewMode = model(...(ngDevMode ? [undefined, { debugName: "viewMode" }] : /* istanbul ignore next */ []));
+        this.viewModeIcons = input(...(ngDevMode ? [undefined, { debugName: "viewModeIcons" }] : /* istanbul ignore next */ []));
         this.exported = output();
         this.searched = output();
         this.searchOpen = signal(false, ...(ngDevMode ? [{ debugName: "searchOpen" }] : /* istanbul ignore next */ []));
@@ -3836,6 +3875,10 @@ class YuwListToolbarActionsComponent {
                 class: cn(selected && 'border-0', followsSelected && 'border-s!'),
             };
         }), ...(ngDevMode ? [{ debugName: "viewModeButtons" }] : /* istanbul ignore next */ []));
+        this.viewModeIconNames = computed(() => ({
+            ...DEFAULT_VIEW_MODE_ICONS,
+            ...this.viewModeIcons(),
+        }), ...(ngDevMode ? [{ debugName: "viewModeIconNames" }] : /* istanbul ignore next */ []));
         effect(() => {
             if (this.settingsOpen()) {
                 afterNextRender(() => this._columnsCombobox()?.open(), { injector: this._injector });
@@ -3865,7 +3908,7 @@ class YuwListToolbarActionsComponent {
         this.viewMode.set(id);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwListToolbarActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwListToolbarActionsComponent, isStandalone: true, selector: "yuw-list-toolbar-actions", inputs: { hiddenColumns: { classPropertyName: "hiddenColumns", publicName: "hiddenColumns", isSignal: true, isRequired: false, transformFunction: null }, hideableColumns: { classPropertyName: "hideableColumns", publicName: "hideableColumns", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, showExport: { classPropertyName: "showExport", publicName: "showExport", isSignal: true, isRequired: false, transformFunction: null }, viewMode: { classPropertyName: "viewMode", publicName: "viewMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hiddenColumns: "hiddenColumnsChange", search: "searchChange", viewMode: "viewModeChange", exported: "exported", searched: "searched" }, host: { classAttribute: "flex items-center gap-2" }, providers: [provideIcons({ lucideDownload, lucideLayoutGrid, lucideList, lucideSearch, lucideSettings2 })], viewQueries: [{ propertyName: "_columnsCombobox", first: true, predicate: YuwComboboxComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (searchPlaceholder(); as placeholder) {\n  @if (isMobile()) {\n    <yuw-popover\n      [align]=\"searchPopoverAlign()\"\n      class=\"mr-5\"\n      triggerVariant=\"outline\"\n      triggerSize=\"icon\"\n      panelClass=\"w-[min(20rem,calc(100vw-2rem))] p-2\"\n      [offsetX]=\"searchPopoverOffsetX()\"\n      [(open)]=\"searchOpen\"\n    >\n      <span yuwPopoverTrigger class=\"flex items-center\" [attr.aria-label]=\"labels().search.expand\">\n        <ng-icon name=\"lucideSearch\" size=\"16\" />\n      </span>\n\n      <yuw-search-input\n        expandedWidth=\"100%\"\n        [(value)]=\"search\"\n        [placeholder]=\"placeholder\"\n        [clearAriaLabel]=\"labels().search.clear\"\n        (searched)=\"searched.emit($event)\"\n      />\n    </yuw-popover>\n  } @else {\n    <yuw-search-input\n      collapseFrom=\"right\"\n      expandedWidth=\"18rem\"\n      [(value)]=\"search\"\n      [placeholder]=\"placeholder\"\n      [clearAriaLabel]=\"labels().search.clear\"\n      [expandAriaLabel]=\"labels().search.expand\"\n      (searched)=\"searched.emit($event)\"\n    />\n  }\n}\n\n@if (showExport()) {\n  <yuw-button variant=\"outline\" class=\"gap-2\" (clicked)=\"exported.emit($event)\">\n    <ng-icon name=\"lucideDownload\" size=\"16\" />\n    <span class=\"max-md:hidden\">\n      {{ labels().export }}\n    </span>\n  </yuw-button>\n}\n\n@if (hideableColumns(); as columns) {\n  <yuw-popover\n    align=\"end\"\n    panelClass=\"w-auto p-2 dark:border max-w-3xs\"\n    triggerVariant=\"outline\"\n    triggerSize=\"icon\"\n    triggerClass=\"yuw-columns-trigger relative\"\n    [(open)]=\"settingsOpen\"\n  >\n    <span yuwPopoverTrigger class=\"flex items-center\" [attr.aria-label]=\"labels().columns.trigger\">\n      <ng-icon name=\"lucideSettings2\" size=\"16\" />\n\n      @if (hasHiddenColumns()) {\n        <yuw-badge\n          dot\n          color=\"destructive\"\n          class=\"absolute -top-1 -right-1\"\n          style=\"width: 0.5rem; height: 0.5rem\"\n          data-testid=\"hidden-columns-dot\"\n        />\n      }\n    </span>\n\n    <div>\n      <yuw-combobox\n        multiple\n        keepValueOnEscape\n        [options]=\"columns\"\n        [value]=\"hiddenColumns()\"\n        [placeholder]=\"labels().columns.placeholder\"\n        [emptyText]=\"labels().columns.empty\"\n        [triggerAriaLabel]=\"labels().columns.toggle\"\n        (valueChange)=\"onHiddenColumnsChange($event)\"\n      />\n    </div>\n  </yuw-popover>\n}\n\n@if (viewMode()) {\n  <yuw-button-group\n    variant=\"outline\"\n    selectedVariant=\"secondary\"\n    [buttons]=\"viewModeButtons()\"\n    (buttonClicked)=\"onViewModeClicked($event)\"\n  >\n    <ng-template yuwButtonGroupContent=\"list\">\n      <ng-icon name=\"lucideList\" size=\"16\" />\n    </ng-template>\n    <ng-template yuwButtonGroupContent=\"block\">\n      <ng-icon name=\"lucideLayoutGrid\" size=\"16\" />\n    </ng-template>\n  </yuw-button-group>\n}\n", dependencies: [{ 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: YuwComboboxComponent, selector: "yuw-combobox", inputs: ["clearAriaLabel", "emptyText", "inputId", "invalid", "keepValueOnEscape", "multiple", "options", "placeholder", "readonlyTrigger", "search", "searchPlaceholder", "size", "triggerAriaLabel", "value"], outputs: ["searchChange", "valueChange"] }, { 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: YuwSearchInputComponent, selector: "yuw-search-input", inputs: ["clearAriaLabel", "collapseFrom", "expandAriaLabel", "expandedWidth", "size", "transparent"], outputs: ["searched"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwListToolbarActionsComponent, isStandalone: true, selector: "yuw-list-toolbar-actions", inputs: { hiddenColumns: { classPropertyName: "hiddenColumns", publicName: "hiddenColumns", isSignal: true, isRequired: false, transformFunction: null }, hideableColumns: { classPropertyName: "hideableColumns", publicName: "hideableColumns", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, showExport: { classPropertyName: "showExport", publicName: "showExport", isSignal: true, isRequired: false, transformFunction: null }, viewMode: { classPropertyName: "viewMode", publicName: "viewMode", isSignal: true, isRequired: false, transformFunction: null }, viewModeIcons: { classPropertyName: "viewModeIcons", publicName: "viewModeIcons", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hiddenColumns: "hiddenColumnsChange", search: "searchChange", viewMode: "viewModeChange", exported: "exported", searched: "searched" }, host: { classAttribute: "flex items-center gap-2" }, providers: [provideIcons({ lucideDownload, lucideLayoutGrid, lucideList, lucideSearch, lucideSettings2 })], viewQueries: [{ propertyName: "_columnsCombobox", first: true, predicate: YuwComboboxComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (searchPlaceholder(); as placeholder) {\n  @if (isMobile()) {\n    <yuw-popover\n      [align]=\"searchPopoverAlign()\"\n      class=\"mr-5\"\n      triggerVariant=\"outline\"\n      triggerSize=\"icon\"\n      panelClass=\"w-[min(20rem,calc(100vw-2rem))] p-2\"\n      [offsetX]=\"searchPopoverOffsetX()\"\n      [(open)]=\"searchOpen\"\n    >\n      <span yuwPopoverTrigger class=\"flex items-center\" [attr.aria-label]=\"labels().search.expand\">\n        <ng-icon name=\"lucideSearch\" size=\"16\" />\n      </span>\n\n      <yuw-search-input\n        expandedWidth=\"100%\"\n        [(value)]=\"search\"\n        [placeholder]=\"placeholder\"\n        [clearAriaLabel]=\"labels().search.clear\"\n        (searched)=\"searched.emit($event)\"\n      />\n    </yuw-popover>\n  } @else {\n    <yuw-search-input\n      collapseFrom=\"right\"\n      expandedWidth=\"18rem\"\n      [(value)]=\"search\"\n      [placeholder]=\"placeholder\"\n      [clearAriaLabel]=\"labels().search.clear\"\n      [expandAriaLabel]=\"labels().search.expand\"\n      (searched)=\"searched.emit($event)\"\n    />\n  }\n}\n\n@if (showExport()) {\n  <yuw-button variant=\"outline\" class=\"gap-2\" (clicked)=\"exported.emit($event)\">\n    <ng-icon name=\"lucideDownload\" size=\"16\" />\n    <span class=\"max-md:hidden\">\n      {{ labels().export }}\n    </span>\n  </yuw-button>\n}\n\n@if (hideableColumns(); as columns) {\n  <yuw-popover\n    align=\"end\"\n    panelClass=\"w-auto p-2 dark:border max-w-3xs\"\n    triggerVariant=\"outline\"\n    triggerSize=\"icon\"\n    triggerClass=\"yuw-columns-trigger relative\"\n    [(open)]=\"settingsOpen\"\n  >\n    <span yuwPopoverTrigger class=\"flex items-center\" [attr.aria-label]=\"labels().columns.trigger\">\n      <ng-icon name=\"lucideSettings2\" size=\"16\" />\n\n      @if (hasHiddenColumns()) {\n        <yuw-badge\n          dot\n          color=\"destructive\"\n          class=\"absolute -top-1 -right-1\"\n          style=\"width: 0.5rem; height: 0.5rem\"\n          data-testid=\"hidden-columns-dot\"\n        />\n      }\n    </span>\n\n    <div>\n      <yuw-combobox\n        multiple\n        keepValueOnEscape\n        [options]=\"columns\"\n        [value]=\"hiddenColumns()\"\n        [placeholder]=\"labels().columns.placeholder\"\n        [emptyText]=\"labels().columns.empty\"\n        [triggerAriaLabel]=\"labels().columns.toggle\"\n        (valueChange)=\"onHiddenColumnsChange($event)\"\n      />\n    </div>\n  </yuw-popover>\n}\n\n@if (viewMode()) {\n  <yuw-button-group\n    variant=\"outline\"\n    selectedVariant=\"secondary\"\n    selectedColor=\"secondary\"\n    [buttons]=\"viewModeButtons()\"\n    (buttonClicked)=\"onViewModeClicked($event)\"\n  >\n    <ng-template yuwButtonGroupContent=\"list\">\n      <ng-icon [name]=\"viewModeIconNames().list\" size=\"16\" />\n    </ng-template>\n    <ng-template yuwButtonGroupContent=\"block\">\n      <ng-icon [name]=\"viewModeIconNames().block\" size=\"16\" />\n    </ng-template>\n  </yuw-button-group>\n}\n", dependencies: [{ 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: YuwComboboxComponent, selector: "yuw-combobox", inputs: ["clearAriaLabel", "emptyText", "inputId", "invalid", "keepValueOnEscape", "multiple", "options", "placeholder", "readonlyTrigger", "search", "searchPlaceholder", "size", "triggerAriaLabel", "value"], outputs: ["searchChange", "valueChange"] }, { 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: YuwSearchInputComponent, selector: "yuw-search-input", inputs: ["clearAriaLabel", "collapseFrom", "expandAriaLabel", "expandedWidth", "size", "transparent"], outputs: ["searched"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwListToolbarActionsComponent, decorators: [{
             type: Component,
@@ -3878,8 +3921,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                         YuwComboboxComponent,
                         YuwPopoverComponent,
                         YuwSearchInputComponent,
-                    ], providers: [provideIcons({ lucideDownload, lucideLayoutGrid, lucideList, lucideSearch, lucideSettings2 })], host: { class: 'flex items-center gap-2' }, template: "@if (searchPlaceholder(); as placeholder) {\n  @if (isMobile()) {\n    <yuw-popover\n      [align]=\"searchPopoverAlign()\"\n      class=\"mr-5\"\n      triggerVariant=\"outline\"\n      triggerSize=\"icon\"\n      panelClass=\"w-[min(20rem,calc(100vw-2rem))] p-2\"\n      [offsetX]=\"searchPopoverOffsetX()\"\n      [(open)]=\"searchOpen\"\n    >\n      <span yuwPopoverTrigger class=\"flex items-center\" [attr.aria-label]=\"labels().search.expand\">\n        <ng-icon name=\"lucideSearch\" size=\"16\" />\n      </span>\n\n      <yuw-search-input\n        expandedWidth=\"100%\"\n        [(value)]=\"search\"\n        [placeholder]=\"placeholder\"\n        [clearAriaLabel]=\"labels().search.clear\"\n        (searched)=\"searched.emit($event)\"\n      />\n    </yuw-popover>\n  } @else {\n    <yuw-search-input\n      collapseFrom=\"right\"\n      expandedWidth=\"18rem\"\n      [(value)]=\"search\"\n      [placeholder]=\"placeholder\"\n      [clearAriaLabel]=\"labels().search.clear\"\n      [expandAriaLabel]=\"labels().search.expand\"\n      (searched)=\"searched.emit($event)\"\n    />\n  }\n}\n\n@if (showExport()) {\n  <yuw-button variant=\"outline\" class=\"gap-2\" (clicked)=\"exported.emit($event)\">\n    <ng-icon name=\"lucideDownload\" size=\"16\" />\n    <span class=\"max-md:hidden\">\n      {{ labels().export }}\n    </span>\n  </yuw-button>\n}\n\n@if (hideableColumns(); as columns) {\n  <yuw-popover\n    align=\"end\"\n    panelClass=\"w-auto p-2 dark:border max-w-3xs\"\n    triggerVariant=\"outline\"\n    triggerSize=\"icon\"\n    triggerClass=\"yuw-columns-trigger relative\"\n    [(open)]=\"settingsOpen\"\n  >\n    <span yuwPopoverTrigger class=\"flex items-center\" [attr.aria-label]=\"labels().columns.trigger\">\n      <ng-icon name=\"lucideSettings2\" size=\"16\" />\n\n      @if (hasHiddenColumns()) {\n        <yuw-badge\n          dot\n          color=\"destructive\"\n          class=\"absolute -top-1 -right-1\"\n          style=\"width: 0.5rem; height: 0.5rem\"\n          data-testid=\"hidden-columns-dot\"\n        />\n      }\n    </span>\n\n    <div>\n      <yuw-combobox\n        multiple\n        keepValueOnEscape\n        [options]=\"columns\"\n        [value]=\"hiddenColumns()\"\n        [placeholder]=\"labels().columns.placeholder\"\n        [emptyText]=\"labels().columns.empty\"\n        [triggerAriaLabel]=\"labels().columns.toggle\"\n        (valueChange)=\"onHiddenColumnsChange($event)\"\n      />\n    </div>\n  </yuw-popover>\n}\n\n@if (viewMode()) {\n  <yuw-button-group\n    variant=\"outline\"\n    selectedVariant=\"secondary\"\n    [buttons]=\"viewModeButtons()\"\n    (buttonClicked)=\"onViewModeClicked($event)\"\n  >\n    <ng-template yuwButtonGroupContent=\"list\">\n      <ng-icon name=\"lucideList\" size=\"16\" />\n    </ng-template>\n    <ng-template yuwButtonGroupContent=\"block\">\n      <ng-icon name=\"lucideLayoutGrid\" size=\"16\" />\n    </ng-template>\n  </yuw-button-group>\n}\n" }]
-        }], ctorParameters: () => [], propDecorators: { _columnsCombobox: [{ type: i0.ViewChild, args: [i0.forwardRef(() => YuwComboboxComponent), { isSignal: true }] }], hiddenColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "hiddenColumns", required: false }] }, { type: i0.Output, args: ["hiddenColumnsChange"] }], hideableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideableColumns", required: false }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: true }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: true }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }, { type: i0.Output, args: ["searchChange"] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], showExport: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExport", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }, { type: i0.Output, args: ["viewModeChange"] }], exported: [{ type: i0.Output, args: ["exported"] }], searched: [{ type: i0.Output, args: ["searched"] }] } });
+                    ], providers: [provideIcons({ lucideDownload, lucideLayoutGrid, lucideList, lucideSearch, lucideSettings2 })], host: { class: 'flex items-center gap-2' }, template: "@if (searchPlaceholder(); as placeholder) {\n  @if (isMobile()) {\n    <yuw-popover\n      [align]=\"searchPopoverAlign()\"\n      class=\"mr-5\"\n      triggerVariant=\"outline\"\n      triggerSize=\"icon\"\n      panelClass=\"w-[min(20rem,calc(100vw-2rem))] p-2\"\n      [offsetX]=\"searchPopoverOffsetX()\"\n      [(open)]=\"searchOpen\"\n    >\n      <span yuwPopoverTrigger class=\"flex items-center\" [attr.aria-label]=\"labels().search.expand\">\n        <ng-icon name=\"lucideSearch\" size=\"16\" />\n      </span>\n\n      <yuw-search-input\n        expandedWidth=\"100%\"\n        [(value)]=\"search\"\n        [placeholder]=\"placeholder\"\n        [clearAriaLabel]=\"labels().search.clear\"\n        (searched)=\"searched.emit($event)\"\n      />\n    </yuw-popover>\n  } @else {\n    <yuw-search-input\n      collapseFrom=\"right\"\n      expandedWidth=\"18rem\"\n      [(value)]=\"search\"\n      [placeholder]=\"placeholder\"\n      [clearAriaLabel]=\"labels().search.clear\"\n      [expandAriaLabel]=\"labels().search.expand\"\n      (searched)=\"searched.emit($event)\"\n    />\n  }\n}\n\n@if (showExport()) {\n  <yuw-button variant=\"outline\" class=\"gap-2\" (clicked)=\"exported.emit($event)\">\n    <ng-icon name=\"lucideDownload\" size=\"16\" />\n    <span class=\"max-md:hidden\">\n      {{ labels().export }}\n    </span>\n  </yuw-button>\n}\n\n@if (hideableColumns(); as columns) {\n  <yuw-popover\n    align=\"end\"\n    panelClass=\"w-auto p-2 dark:border max-w-3xs\"\n    triggerVariant=\"outline\"\n    triggerSize=\"icon\"\n    triggerClass=\"yuw-columns-trigger relative\"\n    [(open)]=\"settingsOpen\"\n  >\n    <span yuwPopoverTrigger class=\"flex items-center\" [attr.aria-label]=\"labels().columns.trigger\">\n      <ng-icon name=\"lucideSettings2\" size=\"16\" />\n\n      @if (hasHiddenColumns()) {\n        <yuw-badge\n          dot\n          color=\"destructive\"\n          class=\"absolute -top-1 -right-1\"\n          style=\"width: 0.5rem; height: 0.5rem\"\n          data-testid=\"hidden-columns-dot\"\n        />\n      }\n    </span>\n\n    <div>\n      <yuw-combobox\n        multiple\n        keepValueOnEscape\n        [options]=\"columns\"\n        [value]=\"hiddenColumns()\"\n        [placeholder]=\"labels().columns.placeholder\"\n        [emptyText]=\"labels().columns.empty\"\n        [triggerAriaLabel]=\"labels().columns.toggle\"\n        (valueChange)=\"onHiddenColumnsChange($event)\"\n      />\n    </div>\n  </yuw-popover>\n}\n\n@if (viewMode()) {\n  <yuw-button-group\n    variant=\"outline\"\n    selectedVariant=\"secondary\"\n    selectedColor=\"secondary\"\n    [buttons]=\"viewModeButtons()\"\n    (buttonClicked)=\"onViewModeClicked($event)\"\n  >\n    <ng-template yuwButtonGroupContent=\"list\">\n      <ng-icon [name]=\"viewModeIconNames().list\" size=\"16\" />\n    </ng-template>\n    <ng-template yuwButtonGroupContent=\"block\">\n      <ng-icon [name]=\"viewModeIconNames().block\" size=\"16\" />\n    </ng-template>\n  </yuw-button-group>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { _columnsCombobox: [{ type: i0.ViewChild, args: [i0.forwardRef(() => YuwComboboxComponent), { isSignal: true }] }], hiddenColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "hiddenColumns", required: false }] }, { type: i0.Output, args: ["hiddenColumnsChange"] }], hideableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideableColumns", required: false }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: true }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: true }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }, { type: i0.Output, args: ["searchChange"] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], showExport: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExport", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }, { type: i0.Output, args: ["viewModeChange"] }], viewModeIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewModeIcons", required: false }] }], exported: [{ type: i0.Output, args: ["exported"] }], searched: [{ type: i0.Output, args: ["searched"] }] } });
 
 /**
  * Declares the content of a single tab entry. Apply it to an `<ng-template>` and pass the id of the
@@ -4045,6 +4088,7 @@ class YuwFilterDraft {
     constructor(applied) {
         this.applied = applied;
         this._entries = linkedSignal(() => ({ ...this.applied() }), ...(ngDevMode ? [{ debugName: "_entries" }] : /* istanbul ignore next */ []));
+        this.values = this._entries.asReadonly();
         this.pendingGroupIds = computed(() => {
             const committed = this.applied();
             const staged = this._entries();
@@ -4059,6 +4103,10 @@ class YuwFilterDraft {
     reset() {
         this._entries.set({ ...this.applied() });
     }
+    /** Stages a whole value for a group; `undefined` or an empty array clears it. */
+    set(groupId, value) {
+        this._setSingle(groupId, Array.isArray(value) && value.length === 0 ? undefined : value);
+    }
     snapshot() {
         return this._entries();
     }
@@ -4253,6 +4301,7 @@ const FORM_VIEWS = new Set(['save', 'rename', 'delete']);
  * Persisting is the consumer's job: this component only emits `setSaved`, `setRenamed`, `setDeleted`.
  *
  * Inputs:
+ * - `contents`: `yuwFilterContent` templates; a group whose id has one renders it instead of the checkbox list. Default is `[]`.
  * - `disabled`: Disables every button of the group. Default is `false`.
  * - `groups`: Required filter groups the editor offers, one pane or tab each.
  * - `idleColor`: Required tone of the buttons while no filter is applied.
@@ -4263,6 +4312,7 @@ const FORM_VIEWS = new Set(['save', 'rename', 'delete']);
  */
 class YuwListToolbarFiltersComponent {
     constructor() {
+        this.contents = input([], ...(ngDevMode ? [{ debugName: "contents" }] : /* 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 */ []));
@@ -4318,6 +4368,8 @@ class YuwListToolbarFiltersComponent {
         }, ...(ngDevMode ? [{ debugName: "buttons" }] : /* istanbul ignore next */ []));
         this.buttonsColor = computed(() => (this.hasActive() ? 'secondary' : this.idleColor()), ...(ngDevMode ? [{ debugName: "buttonsColor" }] : /* istanbul ignore next */ []));
         this.canSaveSet = computed(() => this.hasActive() && !this.matchingSet(), ...(ngDevMode ? [{ debugName: "canSaveSet" }] : /* istanbul ignore next */ []));
+        this.changers = computed(() => Object.fromEntries(this.groups().map((group) => [group.id, (value) => this.draft.set(group.id, value)])), ...(ngDevMode ? [{ debugName: "changers" }] : /* istanbul ignore next */ []));
+        this.contentTemplates = computed(() => Object.fromEntries(this.contents().map((content) => [content.groupId(), content.templateRef])), ...(ngDevMode ? [{ debugName: "contentTemplates" }] : /* 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.setPanelMode = computed(() => {
@@ -4414,7 +4466,7 @@ class YuwListToolbarFiltersComponent {
         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({ 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwListToolbarFiltersComponent, isStandalone: true, selector: "yuw-list-toolbar-filters", inputs: { contents: { classPropertyName: "contents", publicName: "contents", isSignal: true, isRequired: false, transformFunction: null }, 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  @if (contentTemplates()[group.id]; as content) {\n    <ng-container\n      [ngTemplateOutlet]=\"content\"\n      [ngTemplateOutletContext]=\"{ $implicit: group, value: draft.values()[group.id], change: changers()[group.id] }\"\n    />\n  } @else {\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  }\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,
@@ -4433,8 +4485,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                         YuwTabContentDirective,
                         YuwTabPanelDirective,
                         YuwTabsComponent,
-                    ], 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"] }] } });
+                    ], 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  @if (contentTemplates()[group.id]; as content) {\n    <ng-container\n      [ngTemplateOutlet]=\"content\"\n      [ngTemplateOutletContext]=\"{ $implicit: group, value: draft.values()[group.id], change: changers()[group.id] }\"\n    />\n  } @else {\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  }\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: { contents: [{ type: i0.Input, args: [{ isSignal: true, alias: "contents", required: false }] }], 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
@@ -4444,7 +4496,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * `showExport`, `hideableColumns`, `viewMode`. Setting `viewMode` adds a list/block switch bound
  * two-way to it (`viewModeChange` is the click listener); its names come from `labels.viewMode`. Saved filter sets need `filterSets` and `labels.filters.sets`;
  * the toolbar emits `setSaved`, `setRenamed` and `setDeleted` and the consumer persists them. `labels` holds every text and the consumer translates it;
- * `idleColor` is the filter trigger tone while nothing is applied.
+ * `idleColor` is the filter trigger tone while nothing is applied. A filter group may omit `options` and be
+ * rendered by a projected `<ng-template yuwFilterContent="groupId">` instead (a combobox, say); see
+ * `YuwFilterContentDirective`.
  *
  * Inputs:
  * - `filterGroups`: Filter groups the editor offers; the filter control renders only when set.
@@ -4459,6 +4513,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * - `selection`: Two-way (`[(selection)]`) applied filter selection, values keyed by group id. Default is `{}`.
  * - `showExport`: Renders the export button. Default is `false`.
  * - `viewMode`: Two-way (`[(viewMode)]`) `YuwViewMode` (`'list'` or `'block'`); the list/block switch renders only when set.
+ * - `viewModeIcons`: Partial override of the switch icons by mode (ng-icon names, registered by the consumer with `provideIcons`). Defaults are `lucideList` and `lucideLayoutGrid`.
  *
  * Outputs:
  * - `exported`: Emits the `MouseEvent` of the export button click.
@@ -4466,6 +4521,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  */
 class YuwListToolbarComponent {
     constructor() {
+        this.filterContents = contentChildren(YuwFilterContentDirective, ...(ngDevMode ? [{ debugName: "filterContents" }] : /* istanbul ignore next */ []));
         this.filterGroups = input(...(ngDevMode ? [undefined, { debugName: "filterGroups" }] : /* istanbul ignore next */ []));
         this.filtersDisabled = input(false, { ...(ngDevMode ? { debugName: "filtersDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.filterSets = input(...(ngDevMode ? [undefined, { debugName: "filterSets" }] : /* istanbul ignore next */ []));
@@ -4478,6 +4534,7 @@ class YuwListToolbarComponent {
         this.selection = model({}, ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
         this.showExport = input(false, { ...(ngDevMode ? { debugName: "showExport" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.viewMode = model(...(ngDevMode ? [undefined, { debugName: "viewMode" }] : /* istanbul ignore next */ []));
+        this.viewModeIcons = input(...(ngDevMode ? [undefined, { debugName: "viewModeIcons" }] : /* istanbul ignore next */ []));
         this.exported = output();
         this.searched = output();
         this.setDeleted = output();
@@ -4486,12 +4543,12 @@ class YuwListToolbarComponent {
         this.isMobile = injectIsMobile();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwListToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwListToolbarComponent, isStandalone: true, selector: "yuw-list-toolbar", inputs: { filterGroups: { classPropertyName: "filterGroups", publicName: "filterGroups", isSignal: true, isRequired: false, transformFunction: null }, filtersDisabled: { classPropertyName: "filtersDisabled", publicName: "filtersDisabled", isSignal: true, isRequired: false, transformFunction: null }, filterSets: { classPropertyName: "filterSets", publicName: "filterSets", isSignal: true, isRequired: false, transformFunction: null }, hiddenColumns: { classPropertyName: "hiddenColumns", publicName: "hiddenColumns", isSignal: true, isRequired: false, transformFunction: null }, hideableColumns: { classPropertyName: "hideableColumns", publicName: "hideableColumns", isSignal: true, isRequired: false, transformFunction: null }, idleColor: { classPropertyName: "idleColor", publicName: "idleColor", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, showExport: { classPropertyName: "showExport", publicName: "showExport", isSignal: true, isRequired: false, transformFunction: null }, viewMode: { classPropertyName: "viewMode", publicName: "viewMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hiddenColumns: "hiddenColumnsChange", search: "searchChange", selection: "selectionChange", viewMode: "viewModeChange", exported: "exported", searched: "searched", setDeleted: "setDeleted", setRenamed: "setRenamed", setSaved: "setSaved" }, host: { classAttribute: "flex flex-wrap items-center justify-between gap-3" }, ngImport: i0, template: "<!-- Filters -->\n<div class=\"flex min-w-0 max-w-full items-center\">\n  @if (filterGroups(); as groups) {\n    <yuw-list-toolbar-filters\n      [disabled]=\"filtersDisabled()\"\n      [groups]=\"groups\"\n      [idleColor]=\"idleColor()\"\n      [isMobile]=\"isMobile()\"\n      [labels]=\"labels().filters\"\n      [sets]=\"filterSets()\"\n      [(selection)]=\"selection\"\n      (setDeleted)=\"setDeleted.emit($event)\"\n      (setRenamed)=\"setRenamed.emit($event)\"\n      (setSaved)=\"setSaved.emit($event)\"\n    />\n  }\n</div>\n\n<!-- Actions -->\n<div class=\"ms-auto flex items-center gap-2\">\n  <yuw-list-toolbar-actions\n    [hideableColumns]=\"hideableColumns()\"\n    [(hiddenColumns)]=\"hiddenColumns\"\n    [isMobile]=\"isMobile()\"\n    [labels]=\"labels()\"\n    [searchPlaceholder]=\"searchPlaceholder()\"\n    [showExport]=\"showExport()\"\n    [(viewMode)]=\"viewMode\"\n    [(search)]=\"search\"\n    (exported)=\"exported.emit($event)\"\n    (searched)=\"searched.emit($event)\"\n  />\n\n  <ng-content />\n</div>\n", dependencies: [{ kind: "component", type: YuwListToolbarActionsComponent, selector: "yuw-list-toolbar-actions", inputs: ["hiddenColumns", "hideableColumns", "isMobile", "labels", "search", "searchPlaceholder", "showExport", "viewMode"], outputs: ["hiddenColumnsChange", "searchChange", "viewModeChange", "exported", "searched"] }, { kind: "component", type: YuwListToolbarFiltersComponent, selector: "yuw-list-toolbar-filters", inputs: ["disabled", "groups", "idleColor", "isMobile", "labels", "selection", "sets"], outputs: ["selectionChange", "setDeleted", "setRenamed", "setSaved"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwListToolbarComponent, isStandalone: true, selector: "yuw-list-toolbar", inputs: { filterGroups: { classPropertyName: "filterGroups", publicName: "filterGroups", isSignal: true, isRequired: false, transformFunction: null }, filtersDisabled: { classPropertyName: "filtersDisabled", publicName: "filtersDisabled", isSignal: true, isRequired: false, transformFunction: null }, filterSets: { classPropertyName: "filterSets", publicName: "filterSets", isSignal: true, isRequired: false, transformFunction: null }, hiddenColumns: { classPropertyName: "hiddenColumns", publicName: "hiddenColumns", isSignal: true, isRequired: false, transformFunction: null }, hideableColumns: { classPropertyName: "hideableColumns", publicName: "hideableColumns", isSignal: true, isRequired: false, transformFunction: null }, idleColor: { classPropertyName: "idleColor", publicName: "idleColor", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, showExport: { classPropertyName: "showExport", publicName: "showExport", isSignal: true, isRequired: false, transformFunction: null }, viewMode: { classPropertyName: "viewMode", publicName: "viewMode", isSignal: true, isRequired: false, transformFunction: null }, viewModeIcons: { classPropertyName: "viewModeIcons", publicName: "viewModeIcons", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hiddenColumns: "hiddenColumnsChange", search: "searchChange", selection: "selectionChange", viewMode: "viewModeChange", exported: "exported", searched: "searched", setDeleted: "setDeleted", setRenamed: "setRenamed", setSaved: "setSaved" }, host: { classAttribute: "flex flex-wrap items-center justify-between gap-3" }, queries: [{ propertyName: "filterContents", predicate: YuwFilterContentDirective, isSignal: true }], ngImport: i0, template: "<!-- Filters -->\n<div class=\"flex min-w-0 max-w-full items-center\">\n  @if (filterGroups(); as groups) {\n    <yuw-list-toolbar-filters\n      [disabled]=\"filtersDisabled()\"\n      [groups]=\"groups\"\n      [contents]=\"filterContents()\"\n      [idleColor]=\"idleColor()\"\n      [isMobile]=\"isMobile()\"\n      [labels]=\"labels().filters\"\n      [sets]=\"filterSets()\"\n      [(selection)]=\"selection\"\n      (setDeleted)=\"setDeleted.emit($event)\"\n      (setRenamed)=\"setRenamed.emit($event)\"\n      (setSaved)=\"setSaved.emit($event)\"\n    />\n  }\n</div>\n\n<!-- Actions -->\n<div class=\"ms-auto flex items-center gap-2\">\n  <yuw-list-toolbar-actions\n    [hideableColumns]=\"hideableColumns()\"\n    [(hiddenColumns)]=\"hiddenColumns\"\n    [isMobile]=\"isMobile()\"\n    [labels]=\"labels()\"\n    [searchPlaceholder]=\"searchPlaceholder()\"\n    [showExport]=\"showExport()\"\n    [(viewMode)]=\"viewMode\"\n    [viewModeIcons]=\"viewModeIcons()\"\n    [(search)]=\"search\"\n    (exported)=\"exported.emit($event)\"\n    (searched)=\"searched.emit($event)\"\n  />\n\n  <ng-content />\n</div>\n", dependencies: [{ kind: "component", type: YuwListToolbarActionsComponent, selector: "yuw-list-toolbar-actions", inputs: ["hiddenColumns", "hideableColumns", "isMobile", "labels", "search", "searchPlaceholder", "showExport", "viewMode", "viewModeIcons"], outputs: ["hiddenColumnsChange", "searchChange", "viewModeChange", "exported", "searched"] }, { kind: "component", type: YuwListToolbarFiltersComponent, selector: "yuw-list-toolbar-filters", inputs: ["contents", "disabled", "groups", "idleColor", "isMobile", "labels", "selection", "sets"], outputs: ["selectionChange", "setDeleted", "setRenamed", "setSaved"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwListToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuw-list-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [YuwListToolbarActionsComponent, YuwListToolbarFiltersComponent], host: { class: 'flex flex-wrap items-center justify-between gap-3' }, template: "<!-- Filters -->\n<div class=\"flex min-w-0 max-w-full items-center\">\n  @if (filterGroups(); as groups) {\n    <yuw-list-toolbar-filters\n      [disabled]=\"filtersDisabled()\"\n      [groups]=\"groups\"\n      [idleColor]=\"idleColor()\"\n      [isMobile]=\"isMobile()\"\n      [labels]=\"labels().filters\"\n      [sets]=\"filterSets()\"\n      [(selection)]=\"selection\"\n      (setDeleted)=\"setDeleted.emit($event)\"\n      (setRenamed)=\"setRenamed.emit($event)\"\n      (setSaved)=\"setSaved.emit($event)\"\n    />\n  }\n</div>\n\n<!-- Actions -->\n<div class=\"ms-auto flex items-center gap-2\">\n  <yuw-list-toolbar-actions\n    [hideableColumns]=\"hideableColumns()\"\n    [(hiddenColumns)]=\"hiddenColumns\"\n    [isMobile]=\"isMobile()\"\n    [labels]=\"labels()\"\n    [searchPlaceholder]=\"searchPlaceholder()\"\n    [showExport]=\"showExport()\"\n    [(viewMode)]=\"viewMode\"\n    [(search)]=\"search\"\n    (exported)=\"exported.emit($event)\"\n    (searched)=\"searched.emit($event)\"\n  />\n\n  <ng-content />\n</div>\n" }]
-        }], propDecorators: { filterGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterGroups", required: false }] }], filtersDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "filtersDisabled", required: false }] }], filterSets: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterSets", required: false }] }], hiddenColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "hiddenColumns", required: false }] }, { type: i0.Output, args: ["hiddenColumnsChange"] }], hideableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideableColumns", required: false }] }], idleColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "idleColor", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: true }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }, { type: i0.Output, args: ["searchChange"] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], showExport: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExport", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }, { type: i0.Output, args: ["viewModeChange"] }], exported: [{ type: i0.Output, args: ["exported"] }], searched: [{ type: i0.Output, args: ["searched"] }], setDeleted: [{ type: i0.Output, args: ["setDeleted"] }], setRenamed: [{ type: i0.Output, args: ["setRenamed"] }], setSaved: [{ type: i0.Output, args: ["setSaved"] }] } });
+            args: [{ selector: 'yuw-list-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [YuwListToolbarActionsComponent, YuwListToolbarFiltersComponent], host: { class: 'flex flex-wrap items-center justify-between gap-3' }, template: "<!-- Filters -->\n<div class=\"flex min-w-0 max-w-full items-center\">\n  @if (filterGroups(); as groups) {\n    <yuw-list-toolbar-filters\n      [disabled]=\"filtersDisabled()\"\n      [groups]=\"groups\"\n      [contents]=\"filterContents()\"\n      [idleColor]=\"idleColor()\"\n      [isMobile]=\"isMobile()\"\n      [labels]=\"labels().filters\"\n      [sets]=\"filterSets()\"\n      [(selection)]=\"selection\"\n      (setDeleted)=\"setDeleted.emit($event)\"\n      (setRenamed)=\"setRenamed.emit($event)\"\n      (setSaved)=\"setSaved.emit($event)\"\n    />\n  }\n</div>\n\n<!-- Actions -->\n<div class=\"ms-auto flex items-center gap-2\">\n  <yuw-list-toolbar-actions\n    [hideableColumns]=\"hideableColumns()\"\n    [(hiddenColumns)]=\"hiddenColumns\"\n    [isMobile]=\"isMobile()\"\n    [labels]=\"labels()\"\n    [searchPlaceholder]=\"searchPlaceholder()\"\n    [showExport]=\"showExport()\"\n    [(viewMode)]=\"viewMode\"\n    [viewModeIcons]=\"viewModeIcons()\"\n    [(search)]=\"search\"\n    (exported)=\"exported.emit($event)\"\n    (searched)=\"searched.emit($event)\"\n  />\n\n  <ng-content />\n</div>\n" }]
+        }], propDecorators: { filterContents: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwFilterContentDirective), { isSignal: true }] }], filterGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterGroups", required: false }] }], filtersDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "filtersDisabled", required: false }] }], filterSets: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterSets", required: false }] }], hiddenColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "hiddenColumns", required: false }] }, { type: i0.Output, args: ["hiddenColumnsChange"] }], hideableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideableColumns", required: false }] }], idleColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "idleColor", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: true }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }, { type: i0.Output, args: ["searchChange"] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], showExport: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExport", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }, { type: i0.Output, args: ["viewModeChange"] }], viewModeIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewModeIcons", required: false }] }], exported: [{ type: i0.Output, args: ["exported"] }], searched: [{ type: i0.Output, args: ["searched"] }], setDeleted: [{ type: i0.Output, args: ["setDeleted"] }], setRenamed: [{ type: i0.Output, args: ["setRenamed"] }], setSaved: [{ type: i0.Output, args: ["setSaved"] }] } });
 
 const YUW_DATATABLE_FEATURES = {
     columnMeta: {},
@@ -7032,5 +7089,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { DATATABLE_ALIGN_CLASS, DATATABLE_LAYOUT_CLASS, DATATABLE_WRAP_CONTENT_CLASS, YUW_DATATABLE_FEATURES, YUW_DATATABLE_WRAP_MIN_WIDTH, YUW_PASSWORD_REVEAL_STATES, YUW_SIDEBAR_RAIL_ICON_SIZE, YUW_SIDEBAR_RAIL_PADDING, YUW_SIDEBAR_RAIL_WIDTH, YuwAccordion, YuwAccordionContentComponent, YuwAccordionImports, YuwAccordionItem, YuwAccordionTriggerComponent, YuwActionsCellComponent, YuwAlertActionDirective, YuwAlertComponent, YuwAlertDescriptionDirective, YuwAlertDialogComponent, YuwAlertDialogMediaDirective, YuwAlertDialogTriggerDirective, YuwAlertImports, YuwAlertTitleDirective, YuwAttachmentActionDirective, YuwAttachmentActionsDirective, YuwAttachmentContentDirective, YuwAttachmentDescriptionDirective, YuwAttachmentDirective, YuwAttachmentGroupDirective, YuwAttachmentMediaDirective, YuwAttachmentTitleDirective, YuwAttachmentTriggerDirective, YuwAvatarComponent, YuwBadgeComponent, YuwBreadcrumbComponent, YuwBreadcrumbTrailService, YuwButtonComponent, YuwButtonGroupComponent, YuwButtonGroupContentDirective, YuwCaptionDirective, YuwCardActionDirective, YuwCardContentDirective, YuwCardDescriptionDirective, YuwCardDirective, YuwCardFooterDirective, YuwCardGridComponent, YuwCardGridItemComponent, YuwCardHeaderDirective, YuwCardImports, YuwCardTitleDirective, YuwCheckboxComponent, YuwClassDirective, YuwComboboxComponent, YuwComboboxItemDirective, YuwCommandComponent, YuwCommandDialogComponent, YuwContextMenuCheckboxDirective, YuwContextMenuCheckboxIndicatorComponent, YuwContextMenuDirective, YuwContextMenuGroupDirective, YuwContextMenuImports, YuwContextMenuItemDirective, YuwContextMenuLabelDirective, YuwContextMenuRadioDirective, YuwContextMenuRadioIndicatorComponent, YuwContextMenuSeparatorDirective, YuwContextMenuShortcutDirective, YuwContextMenuSubDirective, YuwContextMenuSubIndicatorComponent, YuwContextMenuSubTriggerDirective, YuwContextMenuTriggerDirective, YuwDatatableComponent, YuwDatatablePaginationDirective, YuwDatatableRowSelect, YuwDatepickerComponent, YuwDialogCloseDirective, YuwDialogComponent, YuwDialogFooterDirective, YuwDialogImports, YuwDialogTriggerDirective, YuwEmptyContentDirective, YuwEmptyDescriptionDirective, YuwEmptyDirective, YuwEmptyHeaderDirective, YuwEmptyImports, YuwEmptyMediaDirective, YuwEmptyTitleDirective, YuwFieldBase, YuwInputAddonImports, YuwInputComponent, YuwInputFileComponent, YuwInputOtpComponent, YuwItemActionsDirective, YuwItemContentDirective, YuwItemDescriptionDirective, YuwItemDirective, YuwItemFooterDirective, YuwItemGroupDirective, YuwItemHeaderDirective, YuwItemImports, YuwItemMediaDirective, YuwItemSeparatorDirective, YuwItemTitleDirective, YuwLabel, YuwLeftAddonDirective, YuwListPaginationComponent, YuwListToolbarComponent, YuwPageHeaderComponent, YuwPageSizeComponent, YuwPaginationComponent, YuwPasswordInputComponent, YuwPopoverComponent, YuwPopoverTriggerDirective, YuwRadioGroupComponent, YuwRightAddonDirective, YuwSearchInputComponent, YuwSheetCloseDirective, YuwSheetComponent, YuwSheetFooterDirective, YuwSheetImports, YuwSheetTriggerDirective, YuwSidebarComponent, YuwSidebarContentDirective, YuwSidebarContentExtraDirective, YuwSidebarFooterDirective, YuwSidebarFooterExtraDirective, YuwSidebarGroupContentDirective, YuwSidebarGroupDirective, YuwSidebarGroupLabelDirective, YuwSidebarHeaderDirective, YuwSidebarInsetDirective, YuwSidebarMenuAvatarButtonDirective, YuwSidebarMenuBadgeDirective, YuwSidebarMenuButtonDirective, YuwSidebarMenuDirective, YuwSidebarMenuItemDirective, YuwSidebarMenuSubButtonDirective, YuwSidebarMenuSubDirective, YuwSidebarMenuSubItemDirective, YuwSidebarRailDirective, YuwSidebarRailService, YuwSidebarSeparatorDirective, YuwSidebarSubmenuService, YuwSidebarTriggerComponent, YuwSidebarWrapperDirective, YuwSkeletonDirective, YuwSpinnerComponent, YuwSwitchComponent, YuwTBodyDirective, YuwTFootDirective, YuwTHeadDirective, YuwTabContentDirective, YuwTabPanelDirective, YuwTableContainerDirective, YuwTableDirective, YuwTableImports, YuwTabsComponent, YuwTdDirective, YuwTextFieldBase, YuwTextareaComponent, YuwThDirective, YuwToasterComponent, YuwTooltipDirective, YuwTrDirective, YuwValueAccessorBase, buildInputOtpGroups, buildYuwActionsColumn, cn, createPagedList, datatableCellVariants, datatableContainerVariants, datatableHeadVariants, datatableHeaderCellVariants, datatableRowVariants, getPaginationRange, provideValueAccessor, totalInputOtpLength, yuwCommandDefaultFilter };
+export { DATATABLE_ALIGN_CLASS, DATATABLE_LAYOUT_CLASS, DATATABLE_WRAP_CONTENT_CLASS, YUW_DATATABLE_FEATURES, YUW_DATATABLE_WRAP_MIN_WIDTH, YUW_PASSWORD_REVEAL_STATES, YUW_SIDEBAR_RAIL_ICON_SIZE, YUW_SIDEBAR_RAIL_PADDING, YUW_SIDEBAR_RAIL_WIDTH, YuwAccordion, YuwAccordionContentComponent, YuwAccordionImports, YuwAccordionItem, YuwAccordionTriggerComponent, YuwActionsCellComponent, YuwAlertActionDirective, YuwAlertComponent, YuwAlertDescriptionDirective, YuwAlertDialogComponent, YuwAlertDialogMediaDirective, YuwAlertDialogTriggerDirective, YuwAlertImports, YuwAlertTitleDirective, YuwAttachmentActionDirective, YuwAttachmentActionsDirective, YuwAttachmentContentDirective, YuwAttachmentDescriptionDirective, YuwAttachmentDirective, YuwAttachmentGroupDirective, YuwAttachmentMediaDirective, YuwAttachmentTitleDirective, YuwAttachmentTriggerDirective, YuwAvatarComponent, YuwBadgeComponent, YuwBreadcrumbComponent, YuwBreadcrumbTrailService, YuwButtonComponent, YuwButtonGroupComponent, YuwButtonGroupContentDirective, YuwCaptionDirective, YuwCardActionDirective, YuwCardContentDirective, YuwCardDescriptionDirective, YuwCardDirective, YuwCardFooterDirective, YuwCardGridComponent, YuwCardGridItemComponent, YuwCardHeaderDirective, YuwCardImports, YuwCardTitleDirective, YuwCheckboxComponent, YuwClassDirective, YuwComboboxComponent, YuwComboboxItemDirective, YuwCommandComponent, YuwCommandDialogComponent, YuwContextMenuCheckboxDirective, YuwContextMenuCheckboxIndicatorComponent, YuwContextMenuDirective, YuwContextMenuGroupDirective, YuwContextMenuImports, YuwContextMenuItemDirective, YuwContextMenuLabelDirective, YuwContextMenuRadioDirective, YuwContextMenuRadioIndicatorComponent, YuwContextMenuSeparatorDirective, YuwContextMenuShortcutDirective, YuwContextMenuSubDirective, YuwContextMenuSubIndicatorComponent, YuwContextMenuSubTriggerDirective, YuwContextMenuTriggerDirective, YuwDatatableComponent, YuwDatatablePaginationDirective, YuwDatatableRowSelect, YuwDatepickerComponent, YuwDialogCloseDirective, YuwDialogComponent, YuwDialogFooterDirective, YuwDialogImports, YuwDialogTriggerDirective, YuwEmptyContentDirective, YuwEmptyDescriptionDirective, YuwEmptyDirective, YuwEmptyHeaderDirective, YuwEmptyImports, YuwEmptyMediaDirective, YuwEmptyTitleDirective, YuwFieldBase, YuwFilterContentDirective, YuwInputAddonImports, YuwInputComponent, YuwInputFileComponent, YuwInputOtpComponent, YuwItemActionsDirective, YuwItemContentDirective, YuwItemDescriptionDirective, YuwItemDirective, YuwItemFooterDirective, YuwItemGroupDirective, YuwItemHeaderDirective, YuwItemImports, YuwItemMediaDirective, YuwItemSeparatorDirective, YuwItemTitleDirective, YuwLabel, YuwLeftAddonDirective, YuwListPaginationComponent, YuwListToolbarComponent, YuwPageHeaderComponent, YuwPageSizeComponent, YuwPaginationComponent, YuwPasswordInputComponent, YuwPopoverComponent, YuwPopoverTriggerDirective, YuwRadioGroupComponent, YuwRightAddonDirective, YuwSearchInputComponent, YuwSheetCloseDirective, YuwSheetComponent, YuwSheetFooterDirective, YuwSheetImports, YuwSheetTriggerDirective, YuwSidebarComponent, YuwSidebarContentDirective, YuwSidebarContentExtraDirective, YuwSidebarFooterDirective, YuwSidebarFooterExtraDirective, YuwSidebarGroupContentDirective, YuwSidebarGroupDirective, YuwSidebarGroupLabelDirective, YuwSidebarHeaderDirective, YuwSidebarInsetDirective, YuwSidebarMenuAvatarButtonDirective, YuwSidebarMenuBadgeDirective, YuwSidebarMenuButtonDirective, YuwSidebarMenuDirective, YuwSidebarMenuItemDirective, YuwSidebarMenuSubButtonDirective, YuwSidebarMenuSubDirective, YuwSidebarMenuSubItemDirective, YuwSidebarRailDirective, YuwSidebarRailService, YuwSidebarSeparatorDirective, YuwSidebarSubmenuService, YuwSidebarTriggerComponent, YuwSidebarWrapperDirective, YuwSkeletonDirective, YuwSpinnerComponent, YuwSwitchComponent, YuwTBodyDirective, YuwTFootDirective, YuwTHeadDirective, YuwTabContentDirective, YuwTabPanelDirective, YuwTableContainerDirective, YuwTableDirective, YuwTableImports, YuwTabsComponent, YuwTdDirective, YuwTextFieldBase, YuwTextareaComponent, YuwThDirective, YuwToasterComponent, YuwTooltipDirective, YuwTrDirective, YuwValueAccessorBase, buildInputOtpGroups, buildYuwActionsColumn, cn, createPagedList, datatableCellVariants, datatableContainerVariants, datatableHeadVariants, datatableHeaderCellVariants, datatableRowVariants, getPaginationRange, provideValueAccessor, totalInputOtpLength, yuwCommandDefaultFilter };
 //# sourceMappingURL=yukit-web.mjs.map