yukit-web 0.2.4 → 0.2.6

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

@@ -1,2 +1,2 @@
 
-306825ec23777287506378110cf58a133cb9862a	{"key":"make-fetch-happen:request-cache:https://registry.npmjs.org/yukit-web","integrity":"sha512-VEgvTq5kPx3WfBu9hZ9+qn/QS7aQmzu8csvTLNfvDgSvdjzHXA4bt8wpFtBlwKwQiD6gePMAhlqNcYzXkAjBwA==","time":1791184572032,"size":432887,"metadata":{"time":1791184572017,"url":"https://registry.npmjs.org/yukit-web","reqHeaders":{"accept":"application/json"},"resHeaders":{"cache-control":"public, max-age=300","content-encoding":"gzip","content-type":"application/json","date":"Mon, 05 Oct 2026 07:16:12 GMT","etag":"W/\"0d72e63ba715f75d6beff2056768eb97\"","last-modified":"Fri, 02 Oct 2026 15:25:20 GMT","vary":"accept-encoding, accept"},"options":{"compress":true}}}
+bcc0b080d2001264ae10fd34254f6909e6e93411	{"key":"make-fetch-happen:request-cache:https://registry.npmjs.org/yukit-web","integrity":"sha512-vsJYXRhkfcCdAQWk9NVBK7Ri60ls9mc5xHgfIvWucUHy4N/EEXsmYV8/B9AtduNss11Syfj6WgKfLNvja1yaCA==","time":1791188741390,"size":451691,"metadata":{"time":1791188741378,"url":"https://registry.npmjs.org/yukit-web","reqHeaders":{"accept":"application/json"},"resHeaders":{"cache-control":"public, max-age=300","content-encoding":"gzip","content-type":"application/json","date":"Mon, 05 Oct 2026 08:25:41 GMT","etag":"W/\"22a7d325116db3f71eb0ed596f615980\"","last-modified":"Mon, 05 Oct 2026 08:01:35 GMT","vary":"accept-encoding, accept"},"options":{"compress":true}}}

package/.npm/_logs/{2026-10-05T07_16_11_636Z-debug-0.log → 2026-10-05T08_25_41_092Z-debug-0.log}

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

package/.npm/_logs/{2026-10-05T07_16_12_109Z-debug-0.log → 2026-10-05T08_25_41_448Z-debug-0.log}

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

package/fesm2022/yukit-web.mjs

@@ -15,7 +15,7 @@ import * as i1 from '@spartan-ng/brain/tooltip';
 import { provideBrnTooltipDefaultOptions, BrnTooltip } from '@spartan-ng/brain/tooltip';
 import { tooltipPositionVariants, DEFAULT_TOOLTIP_CONTENT_CLASSES, DEFAULT_TOOLTIP_SVG_CLASS } from 'yukit-web/helm/tooltip';
 import { NgIcon, provideIcons } from '@ng-icons/core';
-import { lucideX, lucideChevronRight, lucideChevronLeft, lucideArrowLeft, lucidePlus, lucideSearch, lucideEyeOff, lucideEye, lucideSettings2, lucideDownload, lucideTrash2, lucidePencil, lucideEllipsis, lucideStar, lucideFilter, lucideChevronsUpDown, lucideChevronUp, lucideChevronDown } from '@ng-icons/lucide';
+import { lucideX, lucideChevronRight, lucideChevronLeft, lucideArrowLeft, lucidePlus, lucideSearch, lucideEyeOff, lucideEye, lucideSettings2, lucideList, lucideLayoutGrid, lucideDownload, lucideTrash2, lucidePencil, lucideEllipsis, lucideStar, lucideFilter, lucideChevronsUpDown, lucideChevronUp, lucideChevronDown } from '@ng-icons/lucide';
 import * as i1$1 from 'yukit-web/helm/badge';
 import { HlmBadge } from 'yukit-web/helm/badge';
 import * as i1$2 from 'yukit-web/helm/breadcrumb';
@@ -3287,6 +3287,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                     }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  hlmPopover\n  [state]=\"_popoverState()\"\n  [align]=\"align()\"\n  [sideOffset]=\"sideOffset()\"\n  [offsetX]=\"offsetX()\"\n  [attachTo]=\"_trigger()\"\n  (stateChanged)=\"onOpenChange($event)\"\n>\n  @if (showTrigger()) {\n    <yuw-button\n      #trigger\n      yuwPopoverTriggerButton\n      [color]=\"triggerColor()\"\n      [variant]=\"triggerVariant()\"\n      [size]=\"triggerSize()\"\n      [transparent]=\"triggerTransparent()\"\n      [class]=\"triggerClass()\"\n    >\n      <ng-content select=\"[yuwPopoverTrigger]\" />\n    </yuw-button>\n  }\n\n  <hlm-popover-content *hlmPopoverPortal [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmPopoverHeader>\n        @if (title()) {\n          <p hlmPopoverTitle>{{ title() }}</p>\n        }\n        @if (description()) {\n          <p hlmPopoverDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    <ng-content />\n  </hlm-popover-content>\n</div>\n" }]
         }], propDecorators: { _trigger: [{ type: i0.ViewChild, args: ['trigger', { ...{ read: ElementRef }, isSignal: true }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], offsetX: [{ type: i0.Input, args: [{ isSignal: true, alias: "offsetX", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], showTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTrigger", required: false }] }], sideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideOffset", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], triggerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerClass", required: false }] }], triggerColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerColor", required: false }] }], triggerSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerSize", required: false }] }], triggerTransparent: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerTransparent", required: false }] }], triggerVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerVariant", required: false }] }] } });
 
+const VIEW_MODES = ['list', 'block'];
 /**
  * What counts as inside the columns popover: its trigger, its panel and the combobox list, which
  * renders in its own overlay outside the panel.
@@ -3303,6 +3304,10 @@ const INSIDE_COLUMNS_SELECTOR = '.yuw-columns-trigger, hlm-popover-content, hlm-
  * popover also opens the combobox list, so the choice is one click away. That list lives in its own
  * overlay, which swallows the first outside press, so a press outside both closes the popover
  * directly and one click is enough. Tabbing focus out of the popover closes it the same way.
+ *
+ * A set `viewMode` adds the list/block switch. The selected entry drops its border so both entries
+ * keep the same height, and the entry after it takes back the leading border the group strips, so the
+ * seam stays drawn. Consumers get that for free and bind only `viewMode`.
  */
 class YuwListToolbarActionsComponent {
     constructor() {
@@ -3316,6 +3321,7 @@ class YuwListToolbarActionsComponent {
         this.search = model('', ...(ngDevMode ? [{ debugName: "search" }] : /* istanbul ignore next */ []));
         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.exported = output();
         this.searched = output();
         this.searchOpen = signal(false, ...(ngDevMode ? [{ debugName: "searchOpen" }] : /* istanbul ignore next */ []));
@@ -3324,6 +3330,18 @@ class YuwListToolbarActionsComponent {
         this.hasHiddenColumns = computed(() => this.hiddenColumns().length > 0, ...(ngDevMode ? [{ debugName: "hasHiddenColumns" }] : /* istanbul ignore next */ []));
         this.searchPopoverAlign = computed(() => (this._searchIsOnlyAction() ? 'end' : 'center'), ...(ngDevMode ? [{ debugName: "searchPopoverAlign" }] : /* istanbul ignore next */ []));
         this.searchPopoverOffsetX = computed(() => (this._searchIsOnlyAction() ? 0 : -16), ...(ngDevMode ? [{ debugName: "searchPopoverOffsetX" }] : /* istanbul ignore next */ []));
+        this.viewModeButtons = computed(() => VIEW_MODES.map((mode, index) => {
+            const selected = mode === this.viewMode();
+            const followsSelected = VIEW_MODES[index - 1] === this.viewMode();
+            return {
+                id: mode,
+                ariaLabel: this.labels().viewMode?.[mode],
+                tooltip: this.labels().viewMode?.[mode],
+                size: 'icon',
+                selected,
+                class: cn(selected && 'border-0', followsSelected && 'border-s!'),
+            };
+        }), ...(ngDevMode ? [{ debugName: "viewModeButtons" }] : /* istanbul ignore next */ []));
         effect(() => {
             if (this.settingsOpen()) {
                 afterNextRender(() => this._columnsCombobox()?.open(), { injector: this._injector });
@@ -3349,8 +3367,11 @@ class YuwListToolbarActionsComponent {
     onHiddenColumnsChange(value) {
         this.hiddenColumns.set(Array.isArray(value) ? value : value ? [value] : []);
     }
+    onViewModeClicked({ id }) {
+        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 } }, outputs: { hiddenColumns: "hiddenColumnsChange", search: "searchChange", exported: "exported", searched: "searched" }, host: { classAttribute: "flex items-center gap-2" }, providers: [provideIcons({ lucideDownload, 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", 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: 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 } }, 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwListToolbarActionsComponent, decorators: [{
             type: Component,
@@ -3358,11 +3379,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                         NgIcon,
                         YuwBadgeComponent,
                         YuwButtonComponent,
+                        YuwButtonGroupComponent,
+                        YuwButtonGroupContentDirective,
                         YuwComboboxComponent,
                         YuwPopoverComponent,
                         YuwSearchInputComponent,
-                    ], providers: [provideIcons({ lucideDownload, 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" }]
-        }], 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 }] }], 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    [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"] }] } });
 
 /**
  * Makes a `<yuw-button>` the trigger of the surrounding `<yuw-sheet>`.
@@ -4014,7 +4037,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * trailing one, and projected content after them.
  *
  * Each control renders only when its input is set: `filterGroups`, `searchPlaceholder`,
- * `showExport`, `hideableColumns`. Saved filter sets need `filterSets` and `labels.filters.sets`;
+ * `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.
  */
@@ -4031,6 +4055,7 @@ class YuwListToolbarComponent {
         this.searchPlaceholder = input(...(ngDevMode ? [undefined, { debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
         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.exported = output();
         this.searched = output();
         this.setDeleted = output();
@@ -4039,12 +4064,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 } }, outputs: { hiddenColumns: "hiddenColumnsChange", search: "searchChange", selection: "selectionChange", 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    [(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"], outputs: ["hiddenColumnsChange", "searchChange", "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 } }, 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 }); }
 }
 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    [(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 }] }], 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      [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"] }] } });
 
 const YUW_DATATABLE_FEATURES = {
     columnMeta: {},