yukit-web 0.0.27 → 0.0.28

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

@@ -1,2 +1,2 @@
 
-77dc06cf0c5ba39ea98787da2a9e5bc545ccc8c5	{"key":"make-fetch-happen:request-cache:https://registry.npmjs.org/yukit-web","integrity":"sha512-u8hiTHwngrJcvZXAmprAAi837ZVBeuPoNQPY4m6CGH3r0JJAdiCOLLKWdIF/m5LLY0MH3kD+evEFXCHrhPop6g==","time":1790758297418,"size":310641,"metadata":{"time":1790758297405,"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":"Wed, 30 Sep 2026 08:51:37 GMT","etag":"W/\"712569c98b5be63987a3b7a3d67aaadf\"","last-modified":"Tue, 29 Sep 2026 09:41:12 GMT","vary":"accept-encoding, accept"},"options":{"compress":true}}}
+1f2f73b26144e8e476d6544504c785fe6aac5c5c	{"key":"make-fetch-happen:request-cache:https://registry.npmjs.org/yukit-web","integrity":"sha512-WX5ZpHEFkyIxI3Chh+ar6BgqiPHLEZZhCBuujrE6NtZjRvbtdoRj32okkX3nzhO3VGbtRiiUwxu/TEaB8J9EvQ==","time":1790761755821,"size":320048,"metadata":{"time":1790761755806,"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":"Wed, 30 Sep 2026 09:49:15 GMT","etag":"W/\"4c3a930ccb8b28b1d9e180bbbf0531a0\"","last-modified":"Wed, 30 Sep 2026 08:55:06 GMT","vary":"accept-encoding, accept"},"options":{"compress":true}}}

package/.npm/_logs/{2026-09-30T08_51_37_007Z-debug-0.log → 2026-09-30T09_49_15_417Z-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.0.27 version
-8 verbose argv "view" "yukit-web@0.0.27" "version"
-9 verbose logfile logs-max:10 dir:/builds/yurest/yurest-ui/dist/yukit-web/.npm/_logs/2026-09-30T08_51_37_007Z-
-10 verbose logfile /builds/yurest/yurest-ui/dist/yukit-web/.npm/_logs/2026-09-30T08_51_37_007Z-debug-0.log
+7 verbose title npm view yukit-web@0.0.28 version
+8 verbose argv "view" "yukit-web@0.0.28" "version"
+9 verbose logfile logs-max:10 dir:/builds/yurest/yurest-ui/dist/yukit-web/.npm/_logs/2026-09-30T09_49_15_417Z-
+10 verbose logfile /builds/yurest/yurest-ui/dist/yukit-web/.npm/_logs/2026-09-30T09_49_15_417Z-debug-0.log
 11 silly logfile done cleaning log files
-12 http fetch GET 200 https://registry.npmjs.org/yukit-web 218ms (cache miss)
-13 verbose stack Error: No match found for version 0.0.27
+12 http fetch GET 200 https://registry.npmjs.org/yukit-web 186ms (cache miss)
+13 verbose stack Error: No match found for version 0.0.28
 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.0.27
+15 verbose pkgid yukit-web@0.0.28
 16 error code E404
-17 error 404 No match found for version 0.0.27
+17 error 404 No match found for version 0.0.28
 18 error 404
-19 error 404  'yukit-web@0.0.27' is not in this registry.
+19 error 404  'yukit-web@0.0.28' 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-09-30T08_51_37_007Z-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-09-30T09_49_15_417Z-debug-0.log

package/.npm/_logs/{2026-09-30T08_51_37_498Z-debug-0.log → 2026-09-30T09_49_15_907Z-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-09-30T08_51_37_498Z-
-10 verbose logfile /builds/yurest/yurest-ui/dist/yukit-web/.npm/_logs/2026-09-30T08_51_37_498Z-debug-0.log
+9 verbose logfile logs-max:10 dir:/builds/yurest/yurest-ui/dist/yukit-web/.npm/_logs/2026-09-30T09_49_15_907Z-
+10 verbose logfile /builds/yurest/yurest-ui/dist/yukit-web/.npm/_logs/2026-09-30T09_49_15_907Z-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

@@ -19,6 +19,7 @@ import * as i1$1 from 'yukit-web/helm/breadcrumb';
 import { HlmBreadcrumbImports } from 'yukit-web/helm/breadcrumb';
 import { Router, NavigationEnd, isActive, RouterLink, RouterLinkActive } from '@angular/router';
 import { HlmPagination, HlmPaginationContent, HlmPaginationItem, HlmPaginationEllipsis } from 'yukit-web/helm/pagination';
+import { BrnComboboxMultiple, BrnCombobox } from '@spartan-ng/brain/combobox';
 import * as i1$2 from 'yukit-web/helm/combobox';
 import { HlmComboboxContent, HlmComboboxImports } from 'yukit-web/helm/combobox';
 import { BreakpointObserver } from '@angular/cdk/layout';
@@ -662,7 +663,7 @@ class YuwBadgeComponent {
         this.removeLabel = input(undefined, ...(ngDevMode ? [{ debugName: "removeLabel" }] : /* istanbul ignore next */ []));
         this.variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
         this.removed = output();
-        this.dotClass = computed(() => (this.dot() ? 'size-4 p-0' : ''), ...(ngDevMode ? [{ debugName: "dotClass" }] : /* istanbul ignore next */ []));
+        this.dotClass = computed(() => (this.dot() ? 'size-4 p-0!' : ''), ...(ngDevMode ? [{ debugName: "dotClass" }] : /* istanbul ignore next */ []));
         this.removeClass = computed(() => REMOVE_TEXT_CLASS[this.variant() ?? 'default'], ...(ngDevMode ? [{ debugName: "removeClass" }] : /* istanbul ignore next */ []));
     }
     onRemoveClick(event) {
@@ -933,7 +934,9 @@ let nextUniqueId$2 = 0;
 class YuwComboboxComponent extends YuwValueAccessorBase {
     constructor() {
         super(...arguments);
+        this._multipleBox = viewChild(BrnComboboxMultiple, ...(ngDevMode ? [{ debugName: "_multipleBox" }] : /* istanbul ignore next */ []));
         this._panel = viewChild(HlmComboboxContent, { ...(ngDevMode ? { debugName: "_panel" } : /* istanbul ignore next */ {}), read: ElementRef });
+        this._singleBox = viewChild(BrnCombobox, ...(ngDevMode ? [{ debugName: "_singleBox" }] : /* istanbul ignore next */ []));
         this.itemTemplate = contentChild(YuwComboboxItemDirective, ...(ngDevMode ? [{ debugName: "itemTemplate" }] : /* istanbul ignore next */ []));
         this.clearAriaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "clearAriaLabel" }] : /* istanbul ignore next */ []));
         this.emptyText = input(undefined, ...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
@@ -974,6 +977,14 @@ class YuwComboboxComponent extends YuwValueAccessorBase {
         }, ...(ngDevMode ? [{ debugName: "_singleValue" }] : /* istanbul ignore next */ []));
         this._triggerClass = computed(() => yuwButtonVariants({ size: this.size() }), ...(ngDevMode ? [{ debugName: "_triggerClass" }] : /* istanbul ignore next */ []));
     }
+    /**
+     * Focuses the field and opens its option list. For a combobox living inside a popover or sheet:
+     * the container calls it when it opens, so the user sees the options without a second click.
+     */
+    open() {
+        this.focus();
+        (this._multipleBox() ?? this._singleBox())?.open();
+    }
     _emptyValue() {
         return this.multiple() ? [] : undefined;
     }
@@ -994,14 +1005,14 @@ class YuwComboboxComponent extends YuwValueAccessorBase {
         this._commit(next ?? this._emptyValue());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwComboboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwComboboxComponent, isStandalone: true, selector: "yuw-combobox", inputs: { clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", 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 }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonlyTrigger: { classPropertyName: "readonlyTrigger", publicName: "readonlyTrigger", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, triggerAriaLabel: { classPropertyName: "triggerAriaLabel", publicName: "triggerAriaLabel", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { search: "searchChange", value: "valueChange" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwComboboxComponent)], queries: [{ propertyName: "itemTemplate", first: true, predicate: YuwComboboxItemDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_panel", first: true, predicate: HlmComboboxContent, descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #itemContent let-option>\n  @if (itemTemplate(); as custom) {\n    <ng-container\n      [ngTemplateOutlet]=\"custom.templateRef\"\n      [ngTemplateOutletContext]=\"{\n        $implicit: option,\n        option: option,\n        selected: _selectedValues().has(option.value),\n      }\"\n    />\n  } @else {\n    {{ option.label }}\n  }\n</ng-template>\n\n@if (multiple()) {\n  <hlm-combobox-multiple\n    [disabled]=\"_disabled()\"\n    [value]=\"_multipleValue()\"\n    (valueChange)=\"onValueChange($event)\"\n    [(search)]=\"search\"\n    [itemToString]=\"_itemToString\"\n    (focusout)=\"_onFocusOut($event)\"\n  >\n    <hlm-combobox-chips [forceInvalid]=\"invalid()\" [class]=\"_chipsClass()\">\n      @for (chip of _selectedChips(); track chip.value) {\n        <hlm-combobox-chip [value]=\"chip.value\">{{ chip.label }}</hlm-combobox-chip>\n      }\n      <input hlmComboboxChipInput [id]=\"_controlId()\" [placeholder]=\"placeholder() ?? ''\" />\n    </hlm-combobox-chips>\n\n    <hlm-combobox-content *hlmComboboxPortal>\n      <div hlmComboboxList>\n        @for (option of options(); track option.value) {\n          <hlm-combobox-item [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">\n            <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: option }\" />\n          </hlm-combobox-item>\n        }\n      </div>\n      <hlm-combobox-empty>{{ emptyText() ?? '' }}</hlm-combobox-empty>\n    </hlm-combobox-content>\n  </hlm-combobox-multiple>\n} @else {\n  <hlm-combobox\n    [disabled]=\"_disabled()\"\n    [value]=\"_singleValue()\"\n    (valueChange)=\"onValueChange($event)\"\n    [(search)]=\"search\"\n    [itemToString]=\"_itemToString\"\n    (focusout)=\"_onFocusOut($event)\"\n  >\n    @if (readonlyTrigger()) {\n      <hlm-combobox-trigger\n        [buttonId]=\"_controlId()\"\n        [forceInvalid]=\"invalid()\"\n        [class]=\"_triggerClass()\"\n        class=\"w-full justify-between items-center\"\n      >\n        <hlm-combobox-value [placeholder]=\"placeholder() ?? ''\" />\n      </hlm-combobox-trigger>\n    } @else {\n      <hlm-combobox-input\n        [inputId]=\"_controlId()\"\n        [placeholder]=\"placeholder() ?? ''\"\n        [showClear]=\"_clearVisible()\"\n        [clearAriaLabel]=\"clearAriaLabel() ?? ''\"\n        [triggerAriaLabel]=\"triggerAriaLabel()\"\n        [forceInvalid]=\"invalid()\"\n        [class]=\"_fieldClass()\"\n      />\n    }\n\n    <hlm-combobox-content *hlmComboboxPortal>\n      @if (readonlyTrigger()) {\n        <hlm-combobox-input\n          [placeholder]=\"searchPlaceholder() ?? ''\"\n          [showClear]=\"_clearVisible()\"\n          [clearAriaLabel]=\"clearAriaLabel() ?? ''\"\n          [triggerAriaLabel]=\"triggerAriaLabel()\"\n          [showTrigger]=\"false\"\n        />\n      }\n      <div hlmComboboxList>\n        @for (option of options(); track option.value) {\n          <hlm-combobox-item [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">\n            <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: option }\" />\n          </hlm-combobox-item>\n        }\n      </div>\n      <hlm-combobox-empty>{{ emptyText() ?? '' }}</hlm-combobox-empty>\n    </hlm-combobox-content>\n  </hlm-combobox>\n}\n", dependencies: [{ kind: "directive", type: i1$2.HlmCombobox, selector: "[hlmCombobox],hlm-combobox" }, { kind: "component", type: i1$2.HlmComboboxChip, selector: "hlm-combobox-chip", inputs: ["showRemove"] }, { kind: "directive", type: i1$2.HlmComboboxChipInput, selector: "input[hlmComboboxChipInput]" }, { kind: "directive", type: i1$2.HlmComboboxChips, selector: "[hlmComboboxChips],hlm-combobox-chips", inputs: ["forceInvalid"] }, { kind: "directive", type: i1$2.HlmComboboxContent, selector: "[hlmComboboxContent],hlm-combobox-content" }, { kind: "directive", type: i1$2.HlmComboboxEmpty, selector: "[hlmComboboxEmpty],hlm-combobox-empty" }, { kind: "component", type: i1$2.HlmComboboxInput, selector: "hlm-combobox-input", inputs: ["inputId", "placeholder", "showTrigger", "showClear", "forceInvalid", "triggerAriaLabel", "clearAriaLabel", "aria-invalid"] }, { kind: "component", type: i1$2.HlmComboboxItem, selector: "hlm-combobox-item" }, { kind: "directive", type: i1$2.HlmComboboxList, selector: "[hlmComboboxList]" }, { kind: "directive", type: i1$2.HlmComboboxMultiple, selector: "[hlmComboboxMultiple],hlm-combobox-multiple" }, { kind: "directive", type: i1$2.HlmComboboxPortal, selector: "[hlmComboboxPortal]" }, { kind: "component", type: i1$2.HlmComboboxTrigger, selector: "hlm-combobox-trigger", inputs: ["class", "buttonId", "variant", "forceInvalid"] }, { kind: "directive", type: i1$2.HlmComboboxValue, selector: "[hlmComboboxValue],hlm-combobox-value" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwComboboxComponent, isStandalone: true, selector: "yuw-combobox", inputs: { clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", 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 }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonlyTrigger: { classPropertyName: "readonlyTrigger", publicName: "readonlyTrigger", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, triggerAriaLabel: { classPropertyName: "triggerAriaLabel", publicName: "triggerAriaLabel", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { search: "searchChange", value: "valueChange" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwComboboxComponent)], queries: [{ propertyName: "itemTemplate", first: true, predicate: YuwComboboxItemDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_multipleBox", first: true, predicate: BrnComboboxMultiple, descendants: true, isSignal: true }, { propertyName: "_panel", first: true, predicate: HlmComboboxContent, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_singleBox", first: true, predicate: BrnCombobox, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #itemContent let-option>\n  @if (itemTemplate(); as custom) {\n    <ng-container\n      [ngTemplateOutlet]=\"custom.templateRef\"\n      [ngTemplateOutletContext]=\"{\n        $implicit: option,\n        option: option,\n        selected: _selectedValues().has(option.value),\n      }\"\n    />\n  } @else {\n    {{ option.label }}\n  }\n</ng-template>\n\n@if (multiple()) {\n  <hlm-combobox-multiple\n    [disabled]=\"_disabled()\"\n    [value]=\"_multipleValue()\"\n    (valueChange)=\"onValueChange($event)\"\n    [(search)]=\"search\"\n    [itemToString]=\"_itemToString\"\n    (focusout)=\"_onFocusOut($event)\"\n  >\n    <hlm-combobox-chips [forceInvalid]=\"invalid()\" [class]=\"_chipsClass()\">\n      @for (chip of _selectedChips(); track chip.value) {\n        <hlm-combobox-chip [value]=\"chip.value\">{{ chip.label }}</hlm-combobox-chip>\n      }\n      <input hlmComboboxChipInput [id]=\"_controlId()\" [placeholder]=\"placeholder() ?? ''\" />\n    </hlm-combobox-chips>\n\n    <hlm-combobox-content *hlmComboboxPortal>\n      <div hlmComboboxList>\n        @for (option of options(); track option.value) {\n          <hlm-combobox-item [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">\n            <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: option }\" />\n          </hlm-combobox-item>\n        }\n      </div>\n      <hlm-combobox-empty>{{ emptyText() ?? '' }}</hlm-combobox-empty>\n    </hlm-combobox-content>\n  </hlm-combobox-multiple>\n} @else {\n  <hlm-combobox\n    [disabled]=\"_disabled()\"\n    [value]=\"_singleValue()\"\n    (valueChange)=\"onValueChange($event)\"\n    [(search)]=\"search\"\n    [itemToString]=\"_itemToString\"\n    (focusout)=\"_onFocusOut($event)\"\n  >\n    @if (readonlyTrigger()) {\n      <hlm-combobox-trigger\n        [buttonId]=\"_controlId()\"\n        [forceInvalid]=\"invalid()\"\n        [class]=\"_triggerClass()\"\n        class=\"w-full justify-between items-center\"\n      >\n        <hlm-combobox-value [placeholder]=\"placeholder() ?? ''\" />\n      </hlm-combobox-trigger>\n    } @else {\n      <hlm-combobox-input\n        [inputId]=\"_controlId()\"\n        [placeholder]=\"placeholder() ?? ''\"\n        [showClear]=\"_clearVisible()\"\n        [clearAriaLabel]=\"clearAriaLabel() ?? ''\"\n        [triggerAriaLabel]=\"triggerAriaLabel()\"\n        [forceInvalid]=\"invalid()\"\n        [class]=\"_fieldClass()\"\n      />\n    }\n\n    <hlm-combobox-content *hlmComboboxPortal>\n      @if (readonlyTrigger()) {\n        <hlm-combobox-input\n          [placeholder]=\"searchPlaceholder() ?? ''\"\n          [showClear]=\"_clearVisible()\"\n          [clearAriaLabel]=\"clearAriaLabel() ?? ''\"\n          [triggerAriaLabel]=\"triggerAriaLabel()\"\n          [showTrigger]=\"false\"\n        />\n      }\n      <div hlmComboboxList>\n        @for (option of options(); track option.value) {\n          <hlm-combobox-item [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">\n            <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: option }\" />\n          </hlm-combobox-item>\n        }\n      </div>\n      <hlm-combobox-empty>{{ emptyText() ?? '' }}</hlm-combobox-empty>\n    </hlm-combobox-content>\n  </hlm-combobox>\n}\n", dependencies: [{ kind: "directive", type: i1$2.HlmCombobox, selector: "[hlmCombobox],hlm-combobox" }, { kind: "component", type: i1$2.HlmComboboxChip, selector: "hlm-combobox-chip", inputs: ["showRemove"] }, { kind: "directive", type: i1$2.HlmComboboxChipInput, selector: "input[hlmComboboxChipInput]" }, { kind: "directive", type: i1$2.HlmComboboxChips, selector: "[hlmComboboxChips],hlm-combobox-chips", inputs: ["forceInvalid"] }, { kind: "directive", type: i1$2.HlmComboboxContent, selector: "[hlmComboboxContent],hlm-combobox-content" }, { kind: "directive", type: i1$2.HlmComboboxEmpty, selector: "[hlmComboboxEmpty],hlm-combobox-empty" }, { kind: "component", type: i1$2.HlmComboboxInput, selector: "hlm-combobox-input", inputs: ["inputId", "placeholder", "showTrigger", "showClear", "forceInvalid", "triggerAriaLabel", "clearAriaLabel", "aria-invalid"] }, { kind: "component", type: i1$2.HlmComboboxItem, selector: "hlm-combobox-item" }, { kind: "directive", type: i1$2.HlmComboboxList, selector: "[hlmComboboxList]" }, { kind: "directive", type: i1$2.HlmComboboxMultiple, selector: "[hlmComboboxMultiple],hlm-combobox-multiple" }, { kind: "directive", type: i1$2.HlmComboboxPortal, selector: "[hlmComboboxPortal]" }, { kind: "component", type: i1$2.HlmComboboxTrigger, selector: "hlm-combobox-trigger", inputs: ["class", "buttonId", "variant", "forceInvalid"] }, { kind: "directive", type: i1$2.HlmComboboxValue, selector: "[hlmComboboxValue],hlm-combobox-value" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwComboboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuw-combobox', imports: [...HlmComboboxImports, NgTemplateOutlet], providers: [provideValueAccessor(YuwComboboxComponent)], host: {
                         class: 'contents',
                     }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #itemContent let-option>\n  @if (itemTemplate(); as custom) {\n    <ng-container\n      [ngTemplateOutlet]=\"custom.templateRef\"\n      [ngTemplateOutletContext]=\"{\n        $implicit: option,\n        option: option,\n        selected: _selectedValues().has(option.value),\n      }\"\n    />\n  } @else {\n    {{ option.label }}\n  }\n</ng-template>\n\n@if (multiple()) {\n  <hlm-combobox-multiple\n    [disabled]=\"_disabled()\"\n    [value]=\"_multipleValue()\"\n    (valueChange)=\"onValueChange($event)\"\n    [(search)]=\"search\"\n    [itemToString]=\"_itemToString\"\n    (focusout)=\"_onFocusOut($event)\"\n  >\n    <hlm-combobox-chips [forceInvalid]=\"invalid()\" [class]=\"_chipsClass()\">\n      @for (chip of _selectedChips(); track chip.value) {\n        <hlm-combobox-chip [value]=\"chip.value\">{{ chip.label }}</hlm-combobox-chip>\n      }\n      <input hlmComboboxChipInput [id]=\"_controlId()\" [placeholder]=\"placeholder() ?? ''\" />\n    </hlm-combobox-chips>\n\n    <hlm-combobox-content *hlmComboboxPortal>\n      <div hlmComboboxList>\n        @for (option of options(); track option.value) {\n          <hlm-combobox-item [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">\n            <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: option }\" />\n          </hlm-combobox-item>\n        }\n      </div>\n      <hlm-combobox-empty>{{ emptyText() ?? '' }}</hlm-combobox-empty>\n    </hlm-combobox-content>\n  </hlm-combobox-multiple>\n} @else {\n  <hlm-combobox\n    [disabled]=\"_disabled()\"\n    [value]=\"_singleValue()\"\n    (valueChange)=\"onValueChange($event)\"\n    [(search)]=\"search\"\n    [itemToString]=\"_itemToString\"\n    (focusout)=\"_onFocusOut($event)\"\n  >\n    @if (readonlyTrigger()) {\n      <hlm-combobox-trigger\n        [buttonId]=\"_controlId()\"\n        [forceInvalid]=\"invalid()\"\n        [class]=\"_triggerClass()\"\n        class=\"w-full justify-between items-center\"\n      >\n        <hlm-combobox-value [placeholder]=\"placeholder() ?? ''\" />\n      </hlm-combobox-trigger>\n    } @else {\n      <hlm-combobox-input\n        [inputId]=\"_controlId()\"\n        [placeholder]=\"placeholder() ?? ''\"\n        [showClear]=\"_clearVisible()\"\n        [clearAriaLabel]=\"clearAriaLabel() ?? ''\"\n        [triggerAriaLabel]=\"triggerAriaLabel()\"\n        [forceInvalid]=\"invalid()\"\n        [class]=\"_fieldClass()\"\n      />\n    }\n\n    <hlm-combobox-content *hlmComboboxPortal>\n      @if (readonlyTrigger()) {\n        <hlm-combobox-input\n          [placeholder]=\"searchPlaceholder() ?? ''\"\n          [showClear]=\"_clearVisible()\"\n          [clearAriaLabel]=\"clearAriaLabel() ?? ''\"\n          [triggerAriaLabel]=\"triggerAriaLabel()\"\n          [showTrigger]=\"false\"\n        />\n      }\n      <div hlmComboboxList>\n        @for (option of options(); track option.value) {\n          <hlm-combobox-item [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">\n            <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: option }\" />\n          </hlm-combobox-item>\n        }\n      </div>\n      <hlm-combobox-empty>{{ emptyText() ?? '' }}</hlm-combobox-empty>\n    </hlm-combobox-content>\n  </hlm-combobox>\n}\n" }]
-        }], propDecorators: { _panel: [{ type: i0.ViewChild, args: [i0.forwardRef(() => HlmComboboxContent), { ...{ read: ElementRef }, isSignal: true }] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => YuwComboboxItemDirective), { isSignal: true }] }], clearAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAriaLabel", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", 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 }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonlyTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyTrigger", required: false }] }], 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 }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], triggerAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerAriaLabel", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+        }], propDecorators: { _multipleBox: [{ type: i0.ViewChild, args: [i0.forwardRef(() => BrnComboboxMultiple), { isSignal: true }] }], _panel: [{ type: i0.ViewChild, args: [i0.forwardRef(() => HlmComboboxContent), { ...{ read: ElementRef }, isSignal: true }] }], _singleBox: [{ type: i0.ViewChild, args: [i0.forwardRef(() => BrnCombobox), { isSignal: true }] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => YuwComboboxItemDirective), { isSignal: true }] }], clearAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAriaLabel", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", 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 }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonlyTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyTrigger", required: false }] }], 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 }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], triggerAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerAriaLabel", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 /** Page size selector and range message of a `YuwPagedList`; in a datatable it takes the pagination slot. */
 class YuwPageSizeComponent {
@@ -3167,10 +3178,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * holding `yuwPopoverTrigger`.
  *
  * `hiddenColumns` is two-way: the consumer can seed it (a restored preference) and the combobox
- * reflects it. While it is not empty the columns button carries a red dot.
+ * reflects it. While it is not empty the columns button carries a red dot. Opening the columns
+ * popover also opens the combobox list, so the choice is one click away.
  */
 class YuwListToolbarActionsComponent {
     constructor() {
+        this._injector = inject(Injector);
+        this._columnsCombobox = viewChild(YuwComboboxComponent, ...(ngDevMode ? [{ debugName: "_columnsCombobox" }] : /* istanbul ignore next */ []));
         this.hiddenColumns = model([], ...(ngDevMode ? [{ debugName: "hiddenColumns" }] : /* istanbul ignore next */ []));
         this.hideableColumns = input(...(ngDevMode ? [undefined, { debugName: "hideableColumns" }] : /* istanbul ignore next */ []));
         this.isMobile = input.required(...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
@@ -3183,12 +3197,17 @@ class YuwListToolbarActionsComponent {
         this.searchOpen = signal(false, ...(ngDevMode ? [{ debugName: "searchOpen" }] : /* istanbul ignore next */ []));
         this.settingsOpen = signal(false, ...(ngDevMode ? [{ debugName: "settingsOpen" }] : /* istanbul ignore next */ []));
         this.hasHiddenColumns = computed(() => this.hiddenColumns().length > 0, ...(ngDevMode ? [{ debugName: "hasHiddenColumns" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            if (this.settingsOpen()) {
+                afterNextRender(() => this._columnsCombobox()?.open(), { injector: this._injector });
+            }
+        });
     }
     onHiddenColumnsChange(value) {
         this.hiddenColumns.set(Array.isArray(value) ? value : value ? [value] : []);
     }
     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 })], ngImport: i0, template: "@if (searchPlaceholder(); as placeholder) {\n  @if (isMobile()) {\n    <yuw-popover\n      align=\"center\"\n      class=\"mr-5\"\n      triggerVariant=\"outline\"\n      triggerSize=\"icon\"\n      panelClass=\"w-[min(20rem,calc(100vw-2rem))] p-2\"\n      [offsetX]=\"-16\"\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=\"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        [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", "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 } }, 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=\"center\"\n      class=\"mr-5\"\n      triggerVariant=\"outline\"\n      triggerSize=\"icon\"\n      panelClass=\"w-[min(20rem,calc(100vw-2rem))] p-2\"\n      [offsetX]=\"-16\"\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=\"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        [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", "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,
@@ -3200,7 +3219,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                         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=\"center\"\n      class=\"mr-5\"\n      triggerVariant=\"outline\"\n      triggerSize=\"icon\"\n      panelClass=\"w-[min(20rem,calc(100vw-2rem))] p-2\"\n      [offsetX]=\"-16\"\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=\"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        [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" }]
-        }], propDecorators: { 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"] }] } });
+        }], 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"] }] } });
 
 /**
  * Makes a `<yuw-button>` the trigger of the surrounding `<yuw-sheet>`.