yukit-web 0.6.2 → 0.6.4

package/fesm2022/yukit-web.mjs

@@ -26,13 +26,13 @@ import * as i1$3 from '@spartan-ng/brain/combobox';
 import { BrnComboboxTrigger, BrnComboboxAnchor, BrnComboboxPopoverTrigger, BrnComboboxMultiple, BrnCombobox } from '@spartan-ng/brain/combobox';
 import * as i1$4 from 'yukit-web/helm/combobox';
 import { HlmComboboxContent, HlmComboboxImports } from 'yukit-web/helm/combobox';
+import { HlmField, HlmFieldDescription } from 'yukit-web/helm/field';
+import { BrnField } from '@spartan-ng/brain/field';
 import { BrnAccordionItem } from '@spartan-ng/brain/accordion';
 import { HlmAccordion, HlmAccordionItem, HlmAccordionTrigger, HlmAccordionContent } from 'yukit-web/helm/accordion';
-import { HlmField, HlmFieldDescription } from 'yukit-web/helm/field';
 import { HlmInput } from 'yukit-web/helm/input';
 import * as i1$a from 'yukit-web/helm/input-group';
 import { HlmInputGroup, HlmInputGroupInput, HlmInputGroupAddon, HlmInputGroupTextarea, HlmInputGroupImports } from 'yukit-web/helm/input-group';
-import { BrnField } from '@spartan-ng/brain/field';
 import * as i1$5 from 'yukit-web/helm/avatar';
 import { HlmAvatarImports } from 'yukit-web/helm/avatar';
 import * as i1$7 from 'yukit-web/helm/popover';
@@ -1201,6 +1201,55 @@ const yuwFieldMinHeightVariants = cva('', {
     },
 });
 
+/**
+ * Resolves the error state and feedback line of a text control's `hlm-field`: the error, or nothing
+ * (the template then falls back to the helper text).
+ *
+ * Sits on the `hlm-field` itself because `hlm-field-description` registers its id with the field
+ * through a `host`-scoped injection, so feedback markup has to live in the same template as the
+ * field and cannot be moved into a child component.
+ *
+ * - `errorText`: explicit error copy. Wins over the form's own message, so a consumer can always
+ *   override it, and is the only source outside forms or for validators that carry no message
+ *   (e.g. the built-in `Validators.required`, which yields `true`).
+ * - `invalid`: the component's own `invalid` input. Held back until the first blur — any `focusout`
+ *   inside the field, typed into or not — so a pristine field doesn't flag errors while the user is
+ *   still writing; from then on it applies live.
+ * - `forcedInvalid`: `invalid` once blurred; bind it to the control's `forceInvalid`.
+ * - `errorMessage`: `errorText`, else the first `message` on the bound control's validation
+ *   errors — signal forms attach one to every error, reactive validators when they return
+ *   `{ key: { message } }`.
+ * - `showError`: a message exists and the field is in its error state, either the form's (Spartan's
+ *   `ErrorStateMatcher`: invalid and touched or submitted, already blur-gated by the form) or
+ *   `forcedInvalid`.
+ */
+class YuwFieldFeedbackDirective {
+    constructor() {
+        this._field = inject(BrnField, { self: true });
+        this.errorText = input(undefined, ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
+        this.invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+        this._blurred = signal(false, ...(ngDevMode ? [{ debugName: "_blurred" }] : /* istanbul ignore next */ []));
+        this.errorMessage = computed(() => this.errorText() ?? firstErrorMessage(this._field.errors()), ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+        this.forcedInvalid = computed(() => this.invalid() && this._blurred(), ...(ngDevMode ? [{ debugName: "forcedInvalid" }] : /* istanbul ignore next */ []));
+        this.showError = computed(() => this.errorMessage() !== undefined && (this.forcedInvalid() || !!this._field.controlState()?.spartanInvalid), ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwFieldFeedbackDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.22", type: YuwFieldFeedbackDirective, isStandalone: true, selector: "hlm-field[yuwFieldFeedback]", inputs: { errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focusout": "_blurred.set(true)" } }, exportAs: ["yuwFieldFeedback"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwFieldFeedbackDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'hlm-field[yuwFieldFeedback]',
+                    exportAs: 'yuwFieldFeedback',
+                    host: {
+                        '(focusout)': '_blurred.set(true)',
+                    },
+                }]
+        }], propDecorators: { errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }] } });
+function firstErrorMessage(errors) {
+    return Object.values(errors ?? {}).find((error) => typeof error?.message === 'string')?.message;
+}
+
 /**
  * Structural directive for custom option item templates in `yuw-combobox`.
  *
@@ -1324,7 +1373,11 @@ let nextUniqueId$2 = 0;
  * `<yuw-button>` whose content is that template: clicking it opens the option list straight away,
  * with the search field inside it. `triggerAriaLabel` names that button, so pass one that reads well
  * for an icon-only trigger. See `YuwComboboxTriggerDirective`.
- * - `invalid`: Forces invalid styling.
+ * - `invalid`: Forces invalid styling. Applied from the first blur on, so a pristine field is not flagged.
+ * - `helperText`: Hint shown under the control. Replaced by the error while one is displayed.
+ *
+ * Bound with `[formField]` (signal forms), the error state follows the field: shown once it is touched, with the
+ * `message` of its first error under the control.
  *
  * Content marked `yuwComboboxFooter` is projected at the bottom of the option list, for actions
  * that belong with it (a "clear all", say); the consumer renders and styles it.
@@ -1354,6 +1407,7 @@ class YuwComboboxComponent extends YuwValueAccessorBase {
         this.triggerTemplate = contentChild(YuwComboboxTriggerDirective, ...(ngDevMode ? [{ debugName: "triggerTemplate" }] : /* istanbul ignore next */ []));
         this.clearAriaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "clearAriaLabel" }] : /* istanbul ignore next */ []));
         this.emptyText = input(undefined, ...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
+        this.helperText = input(undefined, ...(ngDevMode ? [{ debugName: "helperText" }] : /* istanbul ignore next */ []));
         this.inputId = input(undefined, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
         this.invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.keepValueOnEscape = input(false, { ...(ngDevMode ? { debugName: "keepValueOnEscape" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -1457,14 +1511,22 @@ class YuwComboboxComponent extends YuwValueAccessorBase {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwComboboxComponent, deps: [], 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 }, keepValueOnEscape: { classPropertyName: "keepValueOnEscape", publicName: "keepValueOnEscape", 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 }, triggerClass: { classPropertyName: "triggerClass", publicName: "triggerClass", isSignal: true, isRequired: false, transformFunction: null }, triggerColor: { classPropertyName: "triggerColor", publicName: "triggerColor", isSignal: true, isRequired: false, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, 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 }, { propertyName: "triggerTemplate", first: true, predicate: YuwComboboxTriggerDirective, 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 #footer>\n  <ng-content select=\"[yuwComboboxFooter]\" />\n</ng-template>\n\n<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    @if (triggerTemplate(); as trigger) {\n      <yuw-button\n        yuwComboboxTriggerButton\n        [color]=\"triggerColor()\"\n        [variant]=\"triggerVariant()\"\n        [size]=\"triggerSize()\"\n        [class]=\"triggerClass()\"\n        [ariaLabel]=\"triggerAriaLabel()\"\n        [disabled]=\"_disabled()\"\n      >\n        <ng-container [ngTemplateOutlet]=\"trigger.templateRef\" [ngTemplateOutletContext]=\"_triggerContext()\" />\n      </yuw-button>\n    } @else {\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\n    <hlm-combobox-content *hlmComboboxPortal [class]=\"_contentClass()\">\n      @if (_searchInPanel()) {\n        <hlm-combobox-input\n          [placeholder]=\"searchPlaceholder() ?? ''\"\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      <ng-container [ngTemplateOutlet]=\"footer\" />\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 (triggerTemplate(); as trigger) {\n      <yuw-button\n        yuwComboboxTriggerButton\n        [color]=\"triggerColor()\"\n        [variant]=\"triggerVariant()\"\n        [size]=\"triggerSize()\"\n        [class]=\"triggerClass()\"\n        [ariaLabel]=\"triggerAriaLabel()\"\n        [disabled]=\"_disabled()\"\n      >\n        <ng-container [ngTemplateOutlet]=\"trigger.templateRef\" [ngTemplateOutletContext]=\"_triggerContext()\" />\n      </yuw-button>\n    } @else 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 class=\"min-w-0 truncate\" [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 [class]=\"_contentClass()\">\n      @if (_searchInPanel()) {\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      <ng-container [ngTemplateOutlet]=\"footer\" />\n    </hlm-combobox-content>\n  </hlm-combobox>\n}\n", dependencies: [{ kind: "directive", type: i1$4.HlmCombobox, selector: "[hlmCombobox],hlm-combobox" }, { kind: "component", type: i1$4.HlmComboboxChip, selector: "hlm-combobox-chip", inputs: ["showRemove"] }, { kind: "directive", type: i1$4.HlmComboboxChipInput, selector: "input[hlmComboboxChipInput]" }, { kind: "directive", type: i1$4.HlmComboboxChips, selector: "[hlmComboboxChips],hlm-combobox-chips", inputs: ["forceInvalid"] }, { kind: "directive", type: i1$4.HlmComboboxContent, selector: "[hlmComboboxContent],hlm-combobox-content" }, { kind: "directive", type: i1$4.HlmComboboxEmpty, selector: "[hlmComboboxEmpty],hlm-combobox-empty" }, { kind: "component", type: i1$4.HlmComboboxInput, selector: "hlm-combobox-input", inputs: ["inputId", "placeholder", "showTrigger", "showClear", "forceInvalid", "triggerAriaLabel", "clearAriaLabel", "aria-invalid"] }, { kind: "component", type: i1$4.HlmComboboxItem, selector: "hlm-combobox-item" }, { kind: "directive", type: i1$4.HlmComboboxList, selector: "[hlmComboboxList]" }, { kind: "directive", type: i1$4.HlmComboboxMultiple, selector: "[hlmComboboxMultiple],hlm-combobox-multiple" }, { kind: "directive", type: i1$4.HlmComboboxPortal, selector: "[hlmComboboxPortal]" }, { kind: "component", type: i1$4.HlmComboboxTrigger, selector: "hlm-combobox-trigger", inputs: ["class", "buttonId", "variant", "forceInvalid"] }, { kind: "directive", type: i1$4.HlmComboboxValue, selector: "[hlmComboboxValue],hlm-combobox-value" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }, { kind: "directive", type: YuwComboboxTriggerButtonDirective, selector: "yuw-button[yuwComboboxTriggerButton]" }], 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 }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, keepValueOnEscape: { classPropertyName: "keepValueOnEscape", publicName: "keepValueOnEscape", 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 }, triggerClass: { classPropertyName: "triggerClass", publicName: "triggerClass", isSignal: true, isRequired: false, transformFunction: null }, triggerColor: { classPropertyName: "triggerColor", publicName: "triggerColor", isSignal: true, isRequired: false, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, 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 }, { propertyName: "triggerTemplate", first: true, predicate: YuwComboboxTriggerDirective, 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 #footer>\n  <ng-content select=\"[yuwComboboxFooter]\" />\n</ng-template>\n\n<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<hlm-field\n  yuwFieldFeedback\n  #feedback=\"yuwFieldFeedback\"\n  class=\"w-auto min-w-0 data-[matches-spartan-invalid=true]:text-inherit\"\n  [invalid]=\"invalid()\"\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      @if (triggerTemplate(); as trigger) {\n        <yuw-button\n          yuwComboboxTriggerButton\n          [color]=\"triggerColor()\"\n          [variant]=\"triggerVariant()\"\n          [size]=\"triggerSize()\"\n          [class]=\"triggerClass()\"\n          [ariaLabel]=\"triggerAriaLabel()\"\n          [disabled]=\"_disabled()\"\n        >\n          <ng-container [ngTemplateOutlet]=\"trigger.templateRef\" [ngTemplateOutletContext]=\"_triggerContext()\" />\n        </yuw-button>\n      } @else {\n        <hlm-combobox-chips [forceInvalid]=\"feedback.forcedInvalid()\" [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\n      <hlm-combobox-content *hlmComboboxPortal [class]=\"_contentClass()\">\n        @if (_searchInPanel()) {\n          <hlm-combobox-input\n            [placeholder]=\"searchPlaceholder() ?? ''\"\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        <ng-container [ngTemplateOutlet]=\"footer\" />\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 (triggerTemplate(); as trigger) {\n        <yuw-button\n          yuwComboboxTriggerButton\n          [color]=\"triggerColor()\"\n          [variant]=\"triggerVariant()\"\n          [size]=\"triggerSize()\"\n          [class]=\"triggerClass()\"\n          [ariaLabel]=\"triggerAriaLabel()\"\n          [disabled]=\"_disabled()\"\n        >\n          <ng-container [ngTemplateOutlet]=\"trigger.templateRef\" [ngTemplateOutletContext]=\"_triggerContext()\" />\n        </yuw-button>\n      } @else if (readonlyTrigger()) {\n        <hlm-combobox-trigger\n          [buttonId]=\"_controlId()\"\n          [forceInvalid]=\"feedback.forcedInvalid()\"\n          [class]=\"_triggerClass()\"\n          class=\"w-full justify-between items-center\"\n        >\n          <hlm-combobox-value class=\"min-w-0 truncate\" [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]=\"feedback.forcedInvalid()\"\n          [class]=\"_fieldClass()\"\n        />\n      }\n\n      <hlm-combobox-content *hlmComboboxPortal [class]=\"_contentClass()\">\n        @if (_searchInPanel()) {\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        <ng-container [ngTemplateOutlet]=\"footer\" />\n      </hlm-combobox-content>\n    </hlm-combobox>\n  }\n\n  @if (feedback.showError()) {\n    <hlm-field-description role=\"alert\" class=\"text-destructive\">{{ feedback.errorMessage() }}</hlm-field-description>\n  } @else if (helperText(); as helper) {\n    <hlm-field-description>{{ helper }}</hlm-field-description>\n  }\n</hlm-field>\n", dependencies: [{ kind: "directive", type: i1$4.HlmCombobox, selector: "[hlmCombobox],hlm-combobox" }, { kind: "component", type: i1$4.HlmComboboxChip, selector: "hlm-combobox-chip", inputs: ["showRemove"] }, { kind: "directive", type: i1$4.HlmComboboxChipInput, selector: "input[hlmComboboxChipInput]" }, { kind: "directive", type: i1$4.HlmComboboxChips, selector: "[hlmComboboxChips],hlm-combobox-chips", inputs: ["forceInvalid"] }, { kind: "directive", type: i1$4.HlmComboboxContent, selector: "[hlmComboboxContent],hlm-combobox-content" }, { kind: "directive", type: i1$4.HlmComboboxEmpty, selector: "[hlmComboboxEmpty],hlm-combobox-empty" }, { kind: "component", type: i1$4.HlmComboboxInput, selector: "hlm-combobox-input", inputs: ["inputId", "placeholder", "showTrigger", "showClear", "forceInvalid", "triggerAriaLabel", "clearAriaLabel", "aria-invalid"] }, { kind: "component", type: i1$4.HlmComboboxItem, selector: "hlm-combobox-item" }, { kind: "directive", type: i1$4.HlmComboboxList, selector: "[hlmComboboxList]" }, { kind: "directive", type: i1$4.HlmComboboxMultiple, selector: "[hlmComboboxMultiple],hlm-combobox-multiple" }, { kind: "directive", type: i1$4.HlmComboboxPortal, selector: "[hlmComboboxPortal]" }, { kind: "component", type: i1$4.HlmComboboxTrigger, selector: "hlm-combobox-trigger", inputs: ["class", "buttonId", "variant", "forceInvalid"] }, { kind: "directive", type: i1$4.HlmComboboxValue, selector: "[hlmComboboxValue],hlm-combobox-value" }, { kind: "directive", type: HlmField, selector: "[hlmField],hlm-field", inputs: ["orientation"] }, { kind: "directive", type: HlmFieldDescription, selector: "[hlmFieldDescription],hlm-field-description", inputs: ["id"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }, { kind: "directive", type: YuwComboboxTriggerButtonDirective, selector: "yuw-button[yuwComboboxTriggerButton]" }, { kind: "directive", type: YuwFieldFeedbackDirective, selector: "hlm-field[yuwFieldFeedback]", inputs: ["errorText", "invalid"], exportAs: ["yuwFieldFeedback"] }], 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, YuwButtonComponent, YuwComboboxTriggerButtonDirective], providers: [provideValueAccessor(YuwComboboxComponent)], host: {
+            args: [{ selector: 'yuw-combobox', imports: [
+                        ...HlmComboboxImports,
+                        HlmField,
+                        HlmFieldDescription,
+                        NgTemplateOutlet,
+                        YuwButtonComponent,
+                        YuwComboboxTriggerButtonDirective,
+                        YuwFieldFeedbackDirective,
+                    ], providers: [provideValueAccessor(YuwComboboxComponent)], host: {
                         class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #footer>\n  <ng-content select=\"[yuwComboboxFooter]\" />\n</ng-template>\n\n<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    @if (triggerTemplate(); as trigger) {\n      <yuw-button\n        yuwComboboxTriggerButton\n        [color]=\"triggerColor()\"\n        [variant]=\"triggerVariant()\"\n        [size]=\"triggerSize()\"\n        [class]=\"triggerClass()\"\n        [ariaLabel]=\"triggerAriaLabel()\"\n        [disabled]=\"_disabled()\"\n      >\n        <ng-container [ngTemplateOutlet]=\"trigger.templateRef\" [ngTemplateOutletContext]=\"_triggerContext()\" />\n      </yuw-button>\n    } @else {\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\n    <hlm-combobox-content *hlmComboboxPortal [class]=\"_contentClass()\">\n      @if (_searchInPanel()) {\n        <hlm-combobox-input\n          [placeholder]=\"searchPlaceholder() ?? ''\"\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      <ng-container [ngTemplateOutlet]=\"footer\" />\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 (triggerTemplate(); as trigger) {\n      <yuw-button\n        yuwComboboxTriggerButton\n        [color]=\"triggerColor()\"\n        [variant]=\"triggerVariant()\"\n        [size]=\"triggerSize()\"\n        [class]=\"triggerClass()\"\n        [ariaLabel]=\"triggerAriaLabel()\"\n        [disabled]=\"_disabled()\"\n      >\n        <ng-container [ngTemplateOutlet]=\"trigger.templateRef\" [ngTemplateOutletContext]=\"_triggerContext()\" />\n      </yuw-button>\n    } @else 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 class=\"min-w-0 truncate\" [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 [class]=\"_contentClass()\">\n      @if (_searchInPanel()) {\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      <ng-container [ngTemplateOutlet]=\"footer\" />\n    </hlm-combobox-content>\n  </hlm-combobox>\n}\n" }]
-        }], ctorParameters: () => [], 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 }] }], triggerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => YuwComboboxTriggerDirective), { 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 }] }], keepValueOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepValueOnEscape", 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 }] }], 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 }] }], triggerVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerVariant", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #footer>\n  <ng-content select=\"[yuwComboboxFooter]\" />\n</ng-template>\n\n<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<hlm-field\n  yuwFieldFeedback\n  #feedback=\"yuwFieldFeedback\"\n  class=\"w-auto min-w-0 data-[matches-spartan-invalid=true]:text-inherit\"\n  [invalid]=\"invalid()\"\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      @if (triggerTemplate(); as trigger) {\n        <yuw-button\n          yuwComboboxTriggerButton\n          [color]=\"triggerColor()\"\n          [variant]=\"triggerVariant()\"\n          [size]=\"triggerSize()\"\n          [class]=\"triggerClass()\"\n          [ariaLabel]=\"triggerAriaLabel()\"\n          [disabled]=\"_disabled()\"\n        >\n          <ng-container [ngTemplateOutlet]=\"trigger.templateRef\" [ngTemplateOutletContext]=\"_triggerContext()\" />\n        </yuw-button>\n      } @else {\n        <hlm-combobox-chips [forceInvalid]=\"feedback.forcedInvalid()\" [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\n      <hlm-combobox-content *hlmComboboxPortal [class]=\"_contentClass()\">\n        @if (_searchInPanel()) {\n          <hlm-combobox-input\n            [placeholder]=\"searchPlaceholder() ?? ''\"\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        <ng-container [ngTemplateOutlet]=\"footer\" />\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 (triggerTemplate(); as trigger) {\n        <yuw-button\n          yuwComboboxTriggerButton\n          [color]=\"triggerColor()\"\n          [variant]=\"triggerVariant()\"\n          [size]=\"triggerSize()\"\n          [class]=\"triggerClass()\"\n          [ariaLabel]=\"triggerAriaLabel()\"\n          [disabled]=\"_disabled()\"\n        >\n          <ng-container [ngTemplateOutlet]=\"trigger.templateRef\" [ngTemplateOutletContext]=\"_triggerContext()\" />\n        </yuw-button>\n      } @else if (readonlyTrigger()) {\n        <hlm-combobox-trigger\n          [buttonId]=\"_controlId()\"\n          [forceInvalid]=\"feedback.forcedInvalid()\"\n          [class]=\"_triggerClass()\"\n          class=\"w-full justify-between items-center\"\n        >\n          <hlm-combobox-value class=\"min-w-0 truncate\" [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]=\"feedback.forcedInvalid()\"\n          [class]=\"_fieldClass()\"\n        />\n      }\n\n      <hlm-combobox-content *hlmComboboxPortal [class]=\"_contentClass()\">\n        @if (_searchInPanel()) {\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        <ng-container [ngTemplateOutlet]=\"footer\" />\n      </hlm-combobox-content>\n    </hlm-combobox>\n  }\n\n  @if (feedback.showError()) {\n    <hlm-field-description role=\"alert\" class=\"text-destructive\">{{ feedback.errorMessage() }}</hlm-field-description>\n  } @else if (helperText(); as helper) {\n    <hlm-field-description>{{ helper }}</hlm-field-description>\n  }\n</hlm-field>\n" }]
+        }], ctorParameters: () => [], propDecorators: { _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 }] }], triggerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => YuwComboboxTriggerDirective), { isSignal: true }] }], clearAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAriaLabel", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], keepValueOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepValueOnEscape", 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 }] }], 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 }] }], triggerVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerVariant", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 /**
  * Open state of the sheet a piece of content is declared in. `<yuw-sheet>` and `<yuws-form-sheet>` provide it, so
@@ -1628,55 +1690,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
         }] });
 const YuwInputAddonImports = [YuwLeftAddonDirective, YuwRightAddonDirective];
 
-/**
- * Resolves the error state and feedback line of a text control's `hlm-field`: the error, or nothing
- * (the template then falls back to the helper text).
- *
- * Sits on the `hlm-field` itself because `hlm-field-description` registers its id with the field
- * through a `host`-scoped injection, so feedback markup has to live in the same template as the
- * field and cannot be moved into a child component.
- *
- * - `errorText`: explicit error copy. Wins over the form's own message, so a consumer can always
- *   override it, and is the only source outside forms or for validators that carry no message
- *   (e.g. the built-in `Validators.required`, which yields `true`).
- * - `invalid`: the component's own `invalid` input. Held back until the first blur — any `focusout`
- *   inside the field, typed into or not — so a pristine field doesn't flag errors while the user is
- *   still writing; from then on it applies live.
- * - `forcedInvalid`: `invalid` once blurred; bind it to the control's `forceInvalid`.
- * - `errorMessage`: `errorText`, else the first `message` on the bound control's validation
- *   errors — signal forms attach one to every error, reactive validators when they return
- *   `{ key: { message } }`.
- * - `showError`: a message exists and the field is in its error state, either the form's (Spartan's
- *   `ErrorStateMatcher`: invalid and touched or submitted, already blur-gated by the form) or
- *   `forcedInvalid`.
- */
-class YuwFieldFeedbackDirective {
-    constructor() {
-        this._field = inject(BrnField, { self: true });
-        this.errorText = input(undefined, ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
-        this.invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
-        this._blurred = signal(false, ...(ngDevMode ? [{ debugName: "_blurred" }] : /* istanbul ignore next */ []));
-        this.errorMessage = computed(() => this.errorText() ?? firstErrorMessage(this._field.errors()), ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
-        this.forcedInvalid = computed(() => this.invalid() && this._blurred(), ...(ngDevMode ? [{ debugName: "forcedInvalid" }] : /* istanbul ignore next */ []));
-        this.showError = computed(() => this.errorMessage() !== undefined && (this.forcedInvalid() || !!this._field.controlState()?.spartanInvalid), ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwFieldFeedbackDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.22", type: YuwFieldFeedbackDirective, isStandalone: true, selector: "hlm-field[yuwFieldFeedback]", inputs: { errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focusout": "_blurred.set(true)" } }, exportAs: ["yuwFieldFeedback"], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwFieldFeedbackDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'hlm-field[yuwFieldFeedback]',
-                    exportAs: 'yuwFieldFeedback',
-                    host: {
-                        '(focusout)': '_blurred.set(true)',
-                    },
-                }]
-        }], propDecorators: { errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }] } });
-function firstErrorMessage(errors) {
-    return Object.values(errors ?? {}).find((error) => typeof error?.message === 'string')?.message;
-}
-
 /** Module-level counter backing each instance's stable fallback `id`. */
 let nextYuwInputId = 0;
 /**
@@ -3760,10 +3773,14 @@ let nextUniqueId = 0;
  *   association. When omitted, a unique per-instance id is generated.
  * - `size`: Trigger button height (`YuwFieldSizeDto`), matching the `<yuw-button>` size of the same name. Default is `'default'`.
  * - `class`: Extra classes merged onto the trigger button (e.g. a width), consumer classes win.
- * - `invalid`: Forces invalid styling.
+ * - `invalid`: Forces invalid styling. Applied from the first blur on, so a pristine field is not flagged.
+ * - `helperText`: Hint shown under the control. Replaced by the error while one is displayed.
  * - `formatDate`: Custom date formatter function `(date: Date) => string` for the trigger label.
  *   In `range`/`multiple` modes it formats each date, joined with `' - '` / `', '`.
  *
+ * Bound with `[formField]` (signal forms), the error state follows the field: shown once it is touched, with the
+ * `message` of its first error under the control.
+ *
  * Usage:
  * ```html
  * <yuw-datepicker [(value)]="selectedDate" placeholder="Select date..." />
@@ -3778,6 +3795,7 @@ class YuwDatepickerComponent extends YuwValueAccessorBase {
         this.buttonId = input(undefined, ...(ngDevMode ? [{ debugName: "buttonId" }] : /* istanbul ignore next */ []));
         this.captionLayout = input('label', ...(ngDevMode ? [{ debugName: "captionLayout" }] : /* istanbul ignore next */ []));
         this.formatDate = input(undefined, ...(ngDevMode ? [{ debugName: "formatDate" }] : /* istanbul ignore next */ []));
+        this.helperText = input(undefined, ...(ngDevMode ? [{ debugName: "helperText" }] : /* istanbul ignore next */ []));
         this.invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.maxDate = input(undefined, ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
         this.minDate = input(undefined, ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
@@ -3836,14 +3854,14 @@ class YuwDatepickerComponent extends YuwValueAccessorBase {
         this._commit(next);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwDatepickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwDatepickerComponent, isStandalone: true, selector: "yuw-datepicker", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, buttonId: { classPropertyName: "buttonId", publicName: "buttonId", isSignal: true, isRequired: false, transformFunction: null }, captionLayout: { classPropertyName: "captionLayout", publicName: "captionLayout", isSignal: true, isRequired: false, transformFunction: null }, formatDate: { classPropertyName: "formatDate", publicName: "formatDate", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwDatepickerComponent)], usesInheritance: true, ngImport: i0, template: "@switch (mode()) {\n  @case ('range') {\n    <hlm-date-range-picker\n      [date]=\"_rangeValue()\"\n      [disabled]=\"_disabled()\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      [captionLayout]=\"captionLayout()\"\n      [align]=\"align()\"\n      [formatDates]=\"_formatRange()\"\n      (dateChange)=\"onValueChange($event)\"\n      (focusout)=\"_onBlur()\"\n    >\n      <hlm-date-picker-trigger [buttonId]=\"_buttonId()\" [class]=\"_triggerClass()\" [forceInvalid]=\"invalid()\">\n        {{ placeholder() ?? '' }}\n      </hlm-date-picker-trigger>\n    </hlm-date-range-picker>\n  }\n  @case ('multiple') {\n    <hlm-date-picker-multi\n      [date]=\"_multipleValue()\"\n      [disabled]=\"_disabled()\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      [captionLayout]=\"captionLayout()\"\n      [align]=\"align()\"\n      [formatDates]=\"_formatMulti()\"\n      (dateChange)=\"onValueChange($event)\"\n      (focusout)=\"_onBlur()\"\n    >\n      <hlm-date-picker-trigger [buttonId]=\"_buttonId()\" [class]=\"_triggerClass()\" [forceInvalid]=\"invalid()\">\n        {{ placeholder() ?? '' }}\n      </hlm-date-picker-trigger>\n    </hlm-date-picker-multi>\n  }\n  @case ('monthYear') {\n    <hlm-month-year-picker\n      [date]=\"_singleValue()\"\n      [disabled]=\"_disabled()\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      [align]=\"align()\"\n      [formatDate]=\"_formatMonthYear()\"\n      (dateChange)=\"onValueChange($event)\"\n      (focusout)=\"_onBlur()\"\n    >\n      <hlm-date-picker-trigger [buttonId]=\"_buttonId()\" [class]=\"_triggerClass()\" [forceInvalid]=\"invalid()\">\n        {{ placeholder() ?? '' }}\n      </hlm-date-picker-trigger>\n    </hlm-month-year-picker>\n  }\n  @default {\n    <hlm-date-picker\n      [date]=\"_singleValue()\"\n      [disabled]=\"_disabled()\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      [captionLayout]=\"captionLayout()\"\n      [align]=\"align()\"\n      [formatDate]=\"_formatSingle()\"\n      (dateChange)=\"onValueChange($event)\"\n      (focusout)=\"_onBlur()\"\n    >\n      <hlm-date-picker-trigger [buttonId]=\"_buttonId()\" [class]=\"_triggerClass()\" [forceInvalid]=\"invalid()\">\n        {{ placeholder() ?? '' }}\n      </hlm-date-picker-trigger>\n    </hlm-date-picker>\n  }\n}\n", dependencies: [{ kind: "component", type: i1$i.HlmDatePicker, selector: "hlm-date-picker", inputs: ["align", "captionLayout", "minDate", "maxDate", "disabled", "date", "defaultFocusedDate", "autoCloseOnSelect", "formatDate", "transformDate"], outputs: ["dateChange"] }, { kind: "component", type: i1$i.HlmDatePickerMulti, selector: "hlm-date-picker-multi", inputs: ["align", "captionLayout", "minDate", "maxDate", "minSelection", "maxSelection", "disabled", "date", "autoCloseOnMaxSelection", "formatDates", "transformDates"], outputs: ["dateChange"] }, { kind: "component", type: i1$i.HlmDateRangePicker, selector: "hlm-date-range-picker", inputs: ["align", "captionLayout", "minDate", "maxDate", "disabled", "date", "autoCloseOnEndSelection", "formatDates", "transformDates"], outputs: ["dateChange"] }, { kind: "component", type: i1$i.HlmDatePickerTrigger, selector: "hlm-date-picker-trigger", inputs: ["class", "buttonId", "forceInvalid", "variant", "showTrigger"] }, { kind: "component", type: i1$i.HlmMonthYearPicker, selector: "hlm-month-year-picker", inputs: ["align", "minDate", "maxDate", "disabled", "date", "defaultFocusedDate", "autoCloseOnSelect", "formatDate", "transformDate"], outputs: ["dateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwDatepickerComponent, isStandalone: true, selector: "yuw-datepicker", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, buttonId: { classPropertyName: "buttonId", publicName: "buttonId", isSignal: true, isRequired: false, transformFunction: null }, captionLayout: { classPropertyName: "captionLayout", publicName: "captionLayout", isSignal: true, isRequired: false, transformFunction: null }, formatDate: { classPropertyName: "formatDate", publicName: "formatDate", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwDatepickerComponent)], usesInheritance: true, ngImport: i0, template: "<hlm-field\n  yuwFieldFeedback\n  #feedback=\"yuwFieldFeedback\"\n  class=\"w-auto min-w-0 data-[matches-spartan-invalid=true]:text-inherit\"\n  [invalid]=\"invalid()\"\n>\n  @switch (mode()) {\n    @case ('range') {\n      <hlm-date-range-picker\n        [date]=\"_rangeValue()\"\n        [disabled]=\"_disabled()\"\n        [minDate]=\"minDate()\"\n        [maxDate]=\"maxDate()\"\n        [captionLayout]=\"captionLayout()\"\n        [align]=\"align()\"\n        [formatDates]=\"_formatRange()\"\n        (dateChange)=\"onValueChange($event)\"\n        (focusout)=\"_onBlur()\"\n      >\n        <hlm-date-picker-trigger\n          [buttonId]=\"_buttonId()\"\n          [class]=\"_triggerClass()\"\n          [forceInvalid]=\"feedback.forcedInvalid()\"\n        >\n          {{ placeholder() ?? '' }}\n        </hlm-date-picker-trigger>\n      </hlm-date-range-picker>\n    }\n    @case ('multiple') {\n      <hlm-date-picker-multi\n        [date]=\"_multipleValue()\"\n        [disabled]=\"_disabled()\"\n        [minDate]=\"minDate()\"\n        [maxDate]=\"maxDate()\"\n        [captionLayout]=\"captionLayout()\"\n        [align]=\"align()\"\n        [formatDates]=\"_formatMulti()\"\n        (dateChange)=\"onValueChange($event)\"\n        (focusout)=\"_onBlur()\"\n      >\n        <hlm-date-picker-trigger\n          [buttonId]=\"_buttonId()\"\n          [class]=\"_triggerClass()\"\n          [forceInvalid]=\"feedback.forcedInvalid()\"\n        >\n          {{ placeholder() ?? '' }}\n        </hlm-date-picker-trigger>\n      </hlm-date-picker-multi>\n    }\n    @case ('monthYear') {\n      <hlm-month-year-picker\n        [date]=\"_singleValue()\"\n        [disabled]=\"_disabled()\"\n        [minDate]=\"minDate()\"\n        [maxDate]=\"maxDate()\"\n        [align]=\"align()\"\n        [formatDate]=\"_formatMonthYear()\"\n        (dateChange)=\"onValueChange($event)\"\n        (focusout)=\"_onBlur()\"\n      >\n        <hlm-date-picker-trigger\n          [buttonId]=\"_buttonId()\"\n          [class]=\"_triggerClass()\"\n          [forceInvalid]=\"feedback.forcedInvalid()\"\n        >\n          {{ placeholder() ?? '' }}\n        </hlm-date-picker-trigger>\n      </hlm-month-year-picker>\n    }\n    @default {\n      <hlm-date-picker\n        [date]=\"_singleValue()\"\n        [disabled]=\"_disabled()\"\n        [minDate]=\"minDate()\"\n        [maxDate]=\"maxDate()\"\n        [captionLayout]=\"captionLayout()\"\n        [align]=\"align()\"\n        [formatDate]=\"_formatSingle()\"\n        (dateChange)=\"onValueChange($event)\"\n        (focusout)=\"_onBlur()\"\n      >\n        <hlm-date-picker-trigger\n          [buttonId]=\"_buttonId()\"\n          [class]=\"_triggerClass()\"\n          [forceInvalid]=\"feedback.forcedInvalid()\"\n        >\n          {{ placeholder() ?? '' }}\n        </hlm-date-picker-trigger>\n      </hlm-date-picker>\n    }\n  }\n\n  @if (feedback.showError()) {\n    <hlm-field-description role=\"alert\" class=\"text-destructive\">{{ feedback.errorMessage() }}</hlm-field-description>\n  } @else if (helperText(); as helper) {\n    <hlm-field-description>{{ helper }}</hlm-field-description>\n  }\n</hlm-field>\n", dependencies: [{ kind: "component", type: i1$i.HlmDatePicker, selector: "hlm-date-picker", inputs: ["align", "captionLayout", "minDate", "maxDate", "disabled", "date", "defaultFocusedDate", "autoCloseOnSelect", "formatDate", "transformDate"], outputs: ["dateChange"] }, { kind: "component", type: i1$i.HlmDatePickerMulti, selector: "hlm-date-picker-multi", inputs: ["align", "captionLayout", "minDate", "maxDate", "minSelection", "maxSelection", "disabled", "date", "autoCloseOnMaxSelection", "formatDates", "transformDates"], outputs: ["dateChange"] }, { kind: "component", type: i1$i.HlmDateRangePicker, selector: "hlm-date-range-picker", inputs: ["align", "captionLayout", "minDate", "maxDate", "disabled", "date", "autoCloseOnEndSelection", "formatDates", "transformDates"], outputs: ["dateChange"] }, { kind: "component", type: i1$i.HlmDatePickerTrigger, selector: "hlm-date-picker-trigger", inputs: ["class", "buttonId", "forceInvalid", "variant", "showTrigger"] }, { kind: "component", type: i1$i.HlmMonthYearPicker, selector: "hlm-month-year-picker", inputs: ["align", "minDate", "maxDate", "disabled", "date", "defaultFocusedDate", "autoCloseOnSelect", "formatDate", "transformDate"], outputs: ["dateChange"] }, { kind: "directive", type: HlmField, selector: "[hlmField],hlm-field", inputs: ["orientation"] }, { kind: "directive", type: HlmFieldDescription, selector: "[hlmFieldDescription],hlm-field-description", inputs: ["id"] }, { kind: "directive", type: YuwFieldFeedbackDirective, selector: "hlm-field[yuwFieldFeedback]", inputs: ["errorText", "invalid"], exportAs: ["yuwFieldFeedback"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwDatepickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuw-datepicker', imports: [...HlmDatePickerImports], providers: [provideValueAccessor(YuwDatepickerComponent)], host: {
+            args: [{ selector: 'yuw-datepicker', imports: [...HlmDatePickerImports, HlmField, HlmFieldDescription, YuwFieldFeedbackDirective], providers: [provideValueAccessor(YuwDatepickerComponent)], host: {
                         class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@switch (mode()) {\n  @case ('range') {\n    <hlm-date-range-picker\n      [date]=\"_rangeValue()\"\n      [disabled]=\"_disabled()\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      [captionLayout]=\"captionLayout()\"\n      [align]=\"align()\"\n      [formatDates]=\"_formatRange()\"\n      (dateChange)=\"onValueChange($event)\"\n      (focusout)=\"_onBlur()\"\n    >\n      <hlm-date-picker-trigger [buttonId]=\"_buttonId()\" [class]=\"_triggerClass()\" [forceInvalid]=\"invalid()\">\n        {{ placeholder() ?? '' }}\n      </hlm-date-picker-trigger>\n    </hlm-date-range-picker>\n  }\n  @case ('multiple') {\n    <hlm-date-picker-multi\n      [date]=\"_multipleValue()\"\n      [disabled]=\"_disabled()\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      [captionLayout]=\"captionLayout()\"\n      [align]=\"align()\"\n      [formatDates]=\"_formatMulti()\"\n      (dateChange)=\"onValueChange($event)\"\n      (focusout)=\"_onBlur()\"\n    >\n      <hlm-date-picker-trigger [buttonId]=\"_buttonId()\" [class]=\"_triggerClass()\" [forceInvalid]=\"invalid()\">\n        {{ placeholder() ?? '' }}\n      </hlm-date-picker-trigger>\n    </hlm-date-picker-multi>\n  }\n  @case ('monthYear') {\n    <hlm-month-year-picker\n      [date]=\"_singleValue()\"\n      [disabled]=\"_disabled()\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      [align]=\"align()\"\n      [formatDate]=\"_formatMonthYear()\"\n      (dateChange)=\"onValueChange($event)\"\n      (focusout)=\"_onBlur()\"\n    >\n      <hlm-date-picker-trigger [buttonId]=\"_buttonId()\" [class]=\"_triggerClass()\" [forceInvalid]=\"invalid()\">\n        {{ placeholder() ?? '' }}\n      </hlm-date-picker-trigger>\n    </hlm-month-year-picker>\n  }\n  @default {\n    <hlm-date-picker\n      [date]=\"_singleValue()\"\n      [disabled]=\"_disabled()\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      [captionLayout]=\"captionLayout()\"\n      [align]=\"align()\"\n      [formatDate]=\"_formatSingle()\"\n      (dateChange)=\"onValueChange($event)\"\n      (focusout)=\"_onBlur()\"\n    >\n      <hlm-date-picker-trigger [buttonId]=\"_buttonId()\" [class]=\"_triggerClass()\" [forceInvalid]=\"invalid()\">\n        {{ placeholder() ?? '' }}\n      </hlm-date-picker-trigger>\n    </hlm-date-picker>\n  }\n}\n" }]
-        }], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], buttonId: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonId", required: false }] }], captionLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionLayout", required: false }] }], formatDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatDate", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-field\n  yuwFieldFeedback\n  #feedback=\"yuwFieldFeedback\"\n  class=\"w-auto min-w-0 data-[matches-spartan-invalid=true]:text-inherit\"\n  [invalid]=\"invalid()\"\n>\n  @switch (mode()) {\n    @case ('range') {\n      <hlm-date-range-picker\n        [date]=\"_rangeValue()\"\n        [disabled]=\"_disabled()\"\n        [minDate]=\"minDate()\"\n        [maxDate]=\"maxDate()\"\n        [captionLayout]=\"captionLayout()\"\n        [align]=\"align()\"\n        [formatDates]=\"_formatRange()\"\n        (dateChange)=\"onValueChange($event)\"\n        (focusout)=\"_onBlur()\"\n      >\n        <hlm-date-picker-trigger\n          [buttonId]=\"_buttonId()\"\n          [class]=\"_triggerClass()\"\n          [forceInvalid]=\"feedback.forcedInvalid()\"\n        >\n          {{ placeholder() ?? '' }}\n        </hlm-date-picker-trigger>\n      </hlm-date-range-picker>\n    }\n    @case ('multiple') {\n      <hlm-date-picker-multi\n        [date]=\"_multipleValue()\"\n        [disabled]=\"_disabled()\"\n        [minDate]=\"minDate()\"\n        [maxDate]=\"maxDate()\"\n        [captionLayout]=\"captionLayout()\"\n        [align]=\"align()\"\n        [formatDates]=\"_formatMulti()\"\n        (dateChange)=\"onValueChange($event)\"\n        (focusout)=\"_onBlur()\"\n      >\n        <hlm-date-picker-trigger\n          [buttonId]=\"_buttonId()\"\n          [class]=\"_triggerClass()\"\n          [forceInvalid]=\"feedback.forcedInvalid()\"\n        >\n          {{ placeholder() ?? '' }}\n        </hlm-date-picker-trigger>\n      </hlm-date-picker-multi>\n    }\n    @case ('monthYear') {\n      <hlm-month-year-picker\n        [date]=\"_singleValue()\"\n        [disabled]=\"_disabled()\"\n        [minDate]=\"minDate()\"\n        [maxDate]=\"maxDate()\"\n        [align]=\"align()\"\n        [formatDate]=\"_formatMonthYear()\"\n        (dateChange)=\"onValueChange($event)\"\n        (focusout)=\"_onBlur()\"\n      >\n        <hlm-date-picker-trigger\n          [buttonId]=\"_buttonId()\"\n          [class]=\"_triggerClass()\"\n          [forceInvalid]=\"feedback.forcedInvalid()\"\n        >\n          {{ placeholder() ?? '' }}\n        </hlm-date-picker-trigger>\n      </hlm-month-year-picker>\n    }\n    @default {\n      <hlm-date-picker\n        [date]=\"_singleValue()\"\n        [disabled]=\"_disabled()\"\n        [minDate]=\"minDate()\"\n        [maxDate]=\"maxDate()\"\n        [captionLayout]=\"captionLayout()\"\n        [align]=\"align()\"\n        [formatDate]=\"_formatSingle()\"\n        (dateChange)=\"onValueChange($event)\"\n        (focusout)=\"_onBlur()\"\n      >\n        <hlm-date-picker-trigger\n          [buttonId]=\"_buttonId()\"\n          [class]=\"_triggerClass()\"\n          [forceInvalid]=\"feedback.forcedInvalid()\"\n        >\n          {{ placeholder() ?? '' }}\n        </hlm-date-picker-trigger>\n      </hlm-date-picker>\n    }\n  }\n\n  @if (feedback.showError()) {\n    <hlm-field-description role=\"alert\" class=\"text-destructive\">{{ feedback.errorMessage() }}</hlm-field-description>\n  } @else if (helperText(); as helper) {\n    <hlm-field-description>{{ helper }}</hlm-field-description>\n  }\n</hlm-field>\n" }]
+        }], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], buttonId: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonId", required: false }] }], captionLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionLayout", required: false }] }], formatDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatDate", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 /**
  * Outer wrapper container directive for responsive HTML table scroll container.
@@ -7405,7 +7423,7 @@ class YuwsFilterComboboxComponent {
         this.value = model(undefined, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwsFilterComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwsFilterComboboxComponent, isStandalone: true, selector: "yuws-filter-combobox", inputs: { emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: true, transformFunction: null }, idleColor: { classPropertyName: "idleColor", publicName: "idleColor", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: "<yuw-combobox\n  keepValueOnEscape\n  triggerVariant=\"secondary\"\n  triggerClass=\"max-w-80 gap-1.5\"\n  [triggerColor]=\"idleColor()\"\n  [options]=\"options()\"\n  [searchPlaceholder]=\"searchPlaceholder()\"\n  [emptyText]=\"emptyText()\"\n  [triggerAriaLabel]=\"label()\"\n  [(value)]=\"value\"\n>\n  <ng-template yuwComboboxTrigger let-summary>\n    <span class=\"font-semibold whitespace-nowrap\">{{ label() }}</span>\n    @if (summary) {\n      <span class=\"min-w-0 truncate font-normal\">{{ summary }}</span>\n    }\n  </ng-template>\n</yuw-combobox>\n", dependencies: [{ kind: "component", type: YuwComboboxComponent, selector: "yuw-combobox", inputs: ["clearAriaLabel", "emptyText", "inputId", "invalid", "keepValueOnEscape", "multiple", "options", "placeholder", "readonlyTrigger", "search", "searchPlaceholder", "size", "triggerAriaLabel", "triggerClass", "triggerColor", "triggerSize", "triggerVariant", "value"], outputs: ["searchChange", "valueChange"] }, { kind: "directive", type: YuwComboboxTriggerDirective, selector: "ng-template[yuwComboboxTrigger]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwsFilterComboboxComponent, isStandalone: true, selector: "yuws-filter-combobox", inputs: { emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: true, transformFunction: null }, idleColor: { classPropertyName: "idleColor", publicName: "idleColor", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: "<yuw-combobox\n  keepValueOnEscape\n  triggerVariant=\"secondary\"\n  triggerClass=\"max-w-80 gap-1.5\"\n  [triggerColor]=\"idleColor()\"\n  [options]=\"options()\"\n  [searchPlaceholder]=\"searchPlaceholder()\"\n  [emptyText]=\"emptyText()\"\n  [triggerAriaLabel]=\"label()\"\n  [(value)]=\"value\"\n>\n  <ng-template yuwComboboxTrigger let-summary>\n    <span class=\"font-semibold whitespace-nowrap\">{{ label() }}</span>\n    @if (summary) {\n      <span class=\"min-w-0 truncate font-normal\">{{ summary }}</span>\n    }\n  </ng-template>\n</yuw-combobox>\n", dependencies: [{ kind: "component", type: YuwComboboxComponent, selector: "yuw-combobox", inputs: ["clearAriaLabel", "emptyText", "helperText", "inputId", "invalid", "keepValueOnEscape", "multiple", "options", "placeholder", "readonlyTrigger", "search", "searchPlaceholder", "size", "triggerAriaLabel", "triggerClass", "triggerColor", "triggerSize", "triggerVariant", "value"], outputs: ["searchChange", "valueChange"] }, { kind: "directive", type: YuwComboboxTriggerDirective, selector: "ng-template[yuwComboboxTrigger]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwsFilterComboboxComponent, decorators: [{
             type: Component,
@@ -7558,7 +7576,7 @@ class YuwsPageSizeComponent {
         this.message = computed(() => this.labels().range(this.list().range()), ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwsPageSizeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.22", type: YuwsPageSizeComponent, isStandalone: true, selector: "yuws-page-size", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "flex items-center gap-2" }, ngImport: i0, template: "<yuw-combobox\n  readonlyTrigger\n  class=\"w-32\"\n  [disabled]=\"disabled()\"\n  [options]=\"list().pageSizeOptions\"\n  [triggerAriaLabel]=\"labels().label\"\n  [value]=\"list().pageSize()\"\n  [emptyText]=\"labels().empty\"\n  (valueChange)=\"list().pageSize.set($event)\"\n/>\n<p class=\"text-sm text-muted-foreground\">{{ message() }}</p>\n", dependencies: [{ kind: "component", type: YuwComboboxComponent, selector: "yuw-combobox", inputs: ["clearAriaLabel", "emptyText", "inputId", "invalid", "keepValueOnEscape", "multiple", "options", "placeholder", "readonlyTrigger", "search", "searchPlaceholder", "size", "triggerAriaLabel", "triggerClass", "triggerColor", "triggerSize", "triggerVariant", "value"], outputs: ["searchChange", "valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.22", type: YuwsPageSizeComponent, isStandalone: true, selector: "yuws-page-size", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "flex items-center gap-2" }, ngImport: i0, template: "<yuw-combobox\n  readonlyTrigger\n  class=\"w-32\"\n  [disabled]=\"disabled()\"\n  [options]=\"list().pageSizeOptions\"\n  [triggerAriaLabel]=\"labels().label\"\n  [value]=\"list().pageSize()\"\n  [emptyText]=\"labels().empty\"\n  (valueChange)=\"list().pageSize.set($event)\"\n/>\n<p class=\"text-sm text-muted-foreground\">{{ message() }}</p>\n", dependencies: [{ kind: "component", type: YuwComboboxComponent, selector: "yuw-combobox", inputs: ["clearAriaLabel", "emptyText", "helperText", "inputId", "invalid", "keepValueOnEscape", "multiple", "options", "placeholder", "readonlyTrigger", "search", "searchPlaceholder", "size", "triggerAriaLabel", "triggerClass", "triggerColor", "triggerSize", "triggerVariant", "value"], outputs: ["searchChange", "valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwsPageSizeComponent, decorators: [{
             type: Component,
@@ -7849,7 +7867,7 @@ class YuwsListToolbarActionsComponent {
         this.viewMode.set(id);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwsListToolbarActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwsListToolbarActionsComponent, isStandalone: true, selector: "yuws-list-toolbar-actions", inputs: { hiddenColumns: { classPropertyName: "hiddenColumns", publicName: "hiddenColumns", isSignal: true, isRequired: false, transformFunction: null }, hideableColumns: { classPropertyName: "hideableColumns", publicName: "hideableColumns", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, showExport: { classPropertyName: "showExport", publicName: "showExport", isSignal: true, isRequired: false, transformFunction: null }, viewMode: { classPropertyName: "viewMode", publicName: "viewMode", isSignal: true, isRequired: false, transformFunction: null }, viewModeIcons: { classPropertyName: "viewModeIcons", publicName: "viewModeIcons", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hiddenColumns: "hiddenColumnsChange", search: "searchChange", viewMode: "viewModeChange", exported: "exported", searched: "searched" }, host: { classAttribute: "flex items-center gap-2" }, providers: [provideIcons({ lucideDownload, lucideLayoutGrid, lucideList, lucideSearch, lucideSettings2 })], 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-combobox\n    multiple\n    keepValueOnEscape\n    triggerSize=\"icon\"\n    triggerClass=\"relative\"\n    [options]=\"columns\"\n    [value]=\"hiddenColumns()\"\n    [searchPlaceholder]=\"labels().columns.placeholder\"\n    [emptyText]=\"labels().columns.empty\"\n    [triggerAriaLabel]=\"labels().columns.trigger\"\n    (valueChange)=\"onHiddenColumnsChange($event)\"\n  >\n    <ng-template yuwComboboxTrigger>\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    </ng-template>\n  </yuw-combobox>\n}\n\n@if (viewMode()) {\n  <yuw-button-group\n    variant=\"outline\"\n    selectedVariant=\"secondary\"\n    selectedColor=\"secondary\"\n    [buttons]=\"viewModeButtons()\"\n    (buttonClicked)=\"onViewModeClicked($event)\"\n  >\n    <ng-template yuwButtonGroupContent=\"list\">\n      <ng-icon [name]=\"viewModeIconNames().list\" size=\"16\" />\n    </ng-template>\n    <ng-template yuwButtonGroupContent=\"block\">\n      <ng-icon [name]=\"viewModeIconNames().block\" size=\"16\" />\n    </ng-template>\n  </yuw-button-group>\n}\n", dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: YuwBadgeComponent, selector: "yuw-badge", inputs: ["color", "dot", "removeLabel", "variant"], outputs: ["removed"] }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }, { kind: "component", type: YuwButtonGroupComponent, selector: "yuw-button-group", inputs: ["ariaLabel", "buttons", "color", "orientation", "selectedColor", "selectedVariant", "size", "variant"], outputs: ["buttonClicked"] }, { kind: "directive", type: YuwButtonGroupContentDirective, selector: "ng-template[yuwButtonGroupContent]", inputs: ["yuwButtonGroupContent"] }, { kind: "component", type: YuwComboboxComponent, selector: "yuw-combobox", inputs: ["clearAriaLabel", "emptyText", "inputId", "invalid", "keepValueOnEscape", "multiple", "options", "placeholder", "readonlyTrigger", "search", "searchPlaceholder", "size", "triggerAriaLabel", "triggerClass", "triggerColor", "triggerSize", "triggerVariant", "value"], outputs: ["searchChange", "valueChange"] }, { kind: "directive", type: YuwComboboxTriggerDirective, selector: "ng-template[yuwComboboxTrigger]" }, { 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: YuwsListToolbarActionsComponent, isStandalone: true, selector: "yuws-list-toolbar-actions", inputs: { hiddenColumns: { classPropertyName: "hiddenColumns", publicName: "hiddenColumns", isSignal: true, isRequired: false, transformFunction: null }, hideableColumns: { classPropertyName: "hideableColumns", publicName: "hideableColumns", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, showExport: { classPropertyName: "showExport", publicName: "showExport", isSignal: true, isRequired: false, transformFunction: null }, viewMode: { classPropertyName: "viewMode", publicName: "viewMode", isSignal: true, isRequired: false, transformFunction: null }, viewModeIcons: { classPropertyName: "viewModeIcons", publicName: "viewModeIcons", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hiddenColumns: "hiddenColumnsChange", search: "searchChange", viewMode: "viewModeChange", exported: "exported", searched: "searched" }, host: { classAttribute: "flex items-center gap-2" }, providers: [provideIcons({ lucideDownload, lucideLayoutGrid, lucideList, lucideSearch, lucideSettings2 })], 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-combobox\n    multiple\n    keepValueOnEscape\n    triggerSize=\"icon\"\n    triggerClass=\"relative\"\n    [options]=\"columns\"\n    [value]=\"hiddenColumns()\"\n    [searchPlaceholder]=\"labels().columns.placeholder\"\n    [emptyText]=\"labels().columns.empty\"\n    [triggerAriaLabel]=\"labels().columns.trigger\"\n    (valueChange)=\"onHiddenColumnsChange($event)\"\n  >\n    <ng-template yuwComboboxTrigger>\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    </ng-template>\n  </yuw-combobox>\n}\n\n@if (viewMode()) {\n  <yuw-button-group\n    variant=\"outline\"\n    selectedVariant=\"secondary\"\n    selectedColor=\"secondary\"\n    [buttons]=\"viewModeButtons()\"\n    (buttonClicked)=\"onViewModeClicked($event)\"\n  >\n    <ng-template yuwButtonGroupContent=\"list\">\n      <ng-icon [name]=\"viewModeIconNames().list\" size=\"16\" />\n    </ng-template>\n    <ng-template yuwButtonGroupContent=\"block\">\n      <ng-icon [name]=\"viewModeIconNames().block\" size=\"16\" />\n    </ng-template>\n  </yuw-button-group>\n}\n", dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: YuwBadgeComponent, selector: "yuw-badge", inputs: ["color", "dot", "removeLabel", "variant"], outputs: ["removed"] }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }, { kind: "component", type: YuwButtonGroupComponent, selector: "yuw-button-group", inputs: ["ariaLabel", "buttons", "color", "orientation", "selectedColor", "selectedVariant", "size", "variant"], outputs: ["buttonClicked"] }, { kind: "directive", type: YuwButtonGroupContentDirective, selector: "ng-template[yuwButtonGroupContent]", inputs: ["yuwButtonGroupContent"] }, { kind: "component", type: YuwComboboxComponent, selector: "yuw-combobox", inputs: ["clearAriaLabel", "emptyText", "helperText", "inputId", "invalid", "keepValueOnEscape", "multiple", "options", "placeholder", "readonlyTrigger", "search", "searchPlaceholder", "size", "triggerAriaLabel", "triggerClass", "triggerColor", "triggerSize", "triggerVariant", "value"], outputs: ["searchChange", "valueChange"] }, { kind: "directive", type: YuwComboboxTriggerDirective, selector: "ng-template[yuwComboboxTrigger]" }, { 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: YuwsListToolbarActionsComponent, decorators: [{
             type: Component,
@@ -8023,7 +8041,7 @@ class YuwsListToolbarFilterSetsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwsListToolbarFilterSetsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwsListToolbarFilterSetsComponent, isStandalone: true, selector: "yuws-list-toolbar-filter-sets", inputs: { canEdit: { classPropertyName: "canEdit", publicName: "canEdit", isSignal: true, isRequired: false, transformFunction: null }, canSave: { classPropertyName: "canSave", publicName: "canSave", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, selectedId: { classPropertyName: "selectedId", publicName: "selectedId", isSignal: true, isRequired: false, transformFunction: null }, sets: { classPropertyName: "sets", publicName: "sets", isSignal: true, isRequired: true, transformFunction: null }, stretchActions: { classPropertyName: "stretchActions", publicName: "stretchActions", isSignal: true, isRequired: false, transformFunction: null }, titleHidden: { classPropertyName: "titleHidden", publicName: "titleHidden", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deleteRequested: "deleteRequested", editRequested: "editRequested", itemEditRequested: "itemEditRequested", picked: "picked", saveRequested: "saveRequested" }, host: { classAttribute: "flex max-w-full flex-col gap-3" }, providers: [provideIcons({ lucideEllipsis, lucidePencil, lucideTrash2 })], viewQueries: [{ propertyName: "_combobox", first: true, predicate: YuwComboboxComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (!titleHidden()) {\n  <p class=\"text-sm font-medium\">{{ labels().title }}</p>\n}\n\n<yuw-combobox\n  readonlyTrigger\n  [options]=\"options()\"\n  [value]=\"options().length > 0 ? selectedId() : undefined\"\n  [placeholder]=\"labels().select\"\n  [emptyText]=\"labels().empty\"\n  [triggerAriaLabel]=\"labels().select\"\n  (valueChange)=\"onPick($event)\"\n>\n  <ng-template yuwComboboxItem let-option>\n    <span class=\"min-w-0 flex-1 truncate\">{{ option.label }}</span>\n\n    @if (option.data) {\n      <span class=\"yuw-reveal inline-flex\" (click)=\"$event.stopPropagation()\">\n        <yuw-button variant=\"ghost\" size=\"icon-sm\" [ariaLabel]=\"labels().edit\" (clicked)=\"onItemEdit(option.value)\">\n          <ng-icon name=\"lucideEllipsis\" size=\"14\" />\n        </yuw-button>\n      </span>\n    }\n  </ng-template>\n</yuw-combobox>\n\n@if (canSave()) {\n  <yuw-button variant=\"outline\" size=\"sm\" class=\"max-w-full min-w-0\" (clicked)=\"saveRequested.emit()\">\n    <span class=\"truncate\">{{ labels().save }}</span>\n  </yuw-button>\n}\n\n@if (canEdit()) {\n  <div class=\"flex min-w-0 max-w-full\" [class.gap-1]=\"!stretchActions()\">\n    <div [class]=\"stretchActions() ? stretchedCell : 'min-w-0'\">\n      <yuw-button\n        variant=\"outline\"\n        size=\"sm\"\n        [class]=\"stretchActions() ? 'w-full min-w-0 gap-1' : 'max-w-full min-w-0 gap-1'\"\n        (clicked)=\"editRequested.emit()\"\n      >\n        <ng-icon name=\"lucidePencil\" size=\"16\" class=\"shrink-0\" />\n        <span class=\"truncate\">{{ labels().edit }}</span>\n      </yuw-button>\n    </div>\n    <div [class]=\"stretchActions() ? stretchedCell : 'min-w-0'\">\n      <yuw-button\n        variant=\"ghost\"\n        color=\"destructive\"\n        size=\"sm\"\n        [class]=\"stretchActions() ? 'w-full min-w-0 gap-1' : 'max-w-full min-w-0 gap-1'\"\n        (clicked)=\"deleteRequested.emit()\"\n      >\n        <ng-icon name=\"lucideTrash2\" size=\"16\" class=\"shrink-0\" />\n        <span class=\"truncate\">{{ labels().delete }}</span>\n      </yuw-button>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }, { kind: "component", type: YuwComboboxComponent, selector: "yuw-combobox", inputs: ["clearAriaLabel", "emptyText", "inputId", "invalid", "keepValueOnEscape", "multiple", "options", "placeholder", "readonlyTrigger", "search", "searchPlaceholder", "size", "triggerAriaLabel", "triggerClass", "triggerColor", "triggerSize", "triggerVariant", "value"], outputs: ["searchChange", "valueChange"] }, { kind: "directive", type: YuwComboboxItemDirective, selector: "[yuwComboboxItem]", inputs: ["yuwComboboxItemTypeOf"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwsListToolbarFilterSetsComponent, isStandalone: true, selector: "yuws-list-toolbar-filter-sets", inputs: { canEdit: { classPropertyName: "canEdit", publicName: "canEdit", isSignal: true, isRequired: false, transformFunction: null }, canSave: { classPropertyName: "canSave", publicName: "canSave", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, selectedId: { classPropertyName: "selectedId", publicName: "selectedId", isSignal: true, isRequired: false, transformFunction: null }, sets: { classPropertyName: "sets", publicName: "sets", isSignal: true, isRequired: true, transformFunction: null }, stretchActions: { classPropertyName: "stretchActions", publicName: "stretchActions", isSignal: true, isRequired: false, transformFunction: null }, titleHidden: { classPropertyName: "titleHidden", publicName: "titleHidden", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deleteRequested: "deleteRequested", editRequested: "editRequested", itemEditRequested: "itemEditRequested", picked: "picked", saveRequested: "saveRequested" }, host: { classAttribute: "flex max-w-full flex-col gap-3" }, providers: [provideIcons({ lucideEllipsis, lucidePencil, lucideTrash2 })], viewQueries: [{ propertyName: "_combobox", first: true, predicate: YuwComboboxComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (!titleHidden()) {\n  <p class=\"text-sm font-medium\">{{ labels().title }}</p>\n}\n\n<yuw-combobox\n  readonlyTrigger\n  [options]=\"options()\"\n  [value]=\"options().length > 0 ? selectedId() : undefined\"\n  [placeholder]=\"labels().select\"\n  [emptyText]=\"labels().empty\"\n  [triggerAriaLabel]=\"labels().select\"\n  (valueChange)=\"onPick($event)\"\n>\n  <ng-template yuwComboboxItem let-option>\n    <span class=\"min-w-0 flex-1 truncate\">{{ option.label }}</span>\n\n    @if (option.data) {\n      <span class=\"yuw-reveal inline-flex\" (click)=\"$event.stopPropagation()\">\n        <yuw-button variant=\"ghost\" size=\"icon-sm\" [ariaLabel]=\"labels().edit\" (clicked)=\"onItemEdit(option.value)\">\n          <ng-icon name=\"lucideEllipsis\" size=\"14\" />\n        </yuw-button>\n      </span>\n    }\n  </ng-template>\n</yuw-combobox>\n\n@if (canSave()) {\n  <yuw-button variant=\"outline\" size=\"sm\" class=\"max-w-full min-w-0\" (clicked)=\"saveRequested.emit()\">\n    <span class=\"truncate\">{{ labels().save }}</span>\n  </yuw-button>\n}\n\n@if (canEdit()) {\n  <div class=\"flex min-w-0 max-w-full\" [class.gap-1]=\"!stretchActions()\">\n    <div [class]=\"stretchActions() ? stretchedCell : 'min-w-0'\">\n      <yuw-button\n        variant=\"outline\"\n        size=\"sm\"\n        [class]=\"stretchActions() ? 'w-full min-w-0 gap-1' : 'max-w-full min-w-0 gap-1'\"\n        (clicked)=\"editRequested.emit()\"\n      >\n        <ng-icon name=\"lucidePencil\" size=\"16\" class=\"shrink-0\" />\n        <span class=\"truncate\">{{ labels().edit }}</span>\n      </yuw-button>\n    </div>\n    <div [class]=\"stretchActions() ? stretchedCell : 'min-w-0'\">\n      <yuw-button\n        variant=\"ghost\"\n        color=\"destructive\"\n        size=\"sm\"\n        [class]=\"stretchActions() ? 'w-full min-w-0 gap-1' : 'max-w-full min-w-0 gap-1'\"\n        (clicked)=\"deleteRequested.emit()\"\n      >\n        <ng-icon name=\"lucideTrash2\" size=\"16\" class=\"shrink-0\" />\n        <span class=\"truncate\">{{ labels().delete }}</span>\n      </yuw-button>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }, { kind: "component", type: YuwComboboxComponent, selector: "yuw-combobox", inputs: ["clearAriaLabel", "emptyText", "helperText", "inputId", "invalid", "keepValueOnEscape", "multiple", "options", "placeholder", "readonlyTrigger", "search", "searchPlaceholder", "size", "triggerAriaLabel", "triggerClass", "triggerColor", "triggerSize", "triggerVariant", "value"], outputs: ["searchChange", "valueChange"] }, { kind: "directive", type: YuwComboboxItemDirective, selector: "[yuwComboboxItem]", inputs: ["yuwComboboxItemTypeOf"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwsListToolbarFilterSetsComponent, decorators: [{
             type: Component,
@@ -8256,7 +8274,7 @@ class YuwsListToolbarFiltersComponent {
         filter?.querySelector('button, input, [tabindex]')?.focus();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwsListToolbarFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwsListToolbarFiltersComponent, isStandalone: true, selector: "yuws-list-toolbar-filters", inputs: { contents: { classPropertyName: "contents", publicName: "contents", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: true, transformFunction: null }, idleColor: { classPropertyName: "idleColor", publicName: "idleColor", isSignal: true, isRequired: true, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, sets: { classPropertyName: "sets", publicName: "sets", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", setDeleted: "setDeleted", setRenamed: "setRenamed", setSaved: "setSaved" }, host: { classAttribute: "flex min-w-0 max-w-full flex-1 max-md:contents" }, providers: [provideIcons({ lucidePlus, lucideX })], viewQueries: [{ propertyName: "_addBox", first: true, predicate: ["addBox"], descendants: true, isSignal: true }], ngImport: i0, template: "<fieldset class=\"m-0 flex min-w-0 flex-1 items-center gap-2 border-0 p-0 max-md:contents\" [disabled]=\"disabled()\">\n  <legend class=\"sr-only\">{{ labels().title }}</legend>\n\n  <!-- Saved sets -->\n  @if (setLabels(); as setLabels) {\n    <yuws-list-toolbar-filter-set-picker\n      [idleColor]=\"idleColor()\"\n      [labels]=\"setLabels\"\n      [sets]=\"sets() ?? []\"\n      [selection]=\"selection()\"\n      (selectionChange)=\"onSetApplied($event)\"\n      (setDeleted)=\"setDeleted.emit($event)\"\n      (setRenamed)=\"setRenamed.emit($event)\"\n      (setSaved)=\"setSaved.emit($event)\"\n    />\n  }\n\n  <!-- Add filter -->\n  <yuw-combobox\n    #addBox\n    multiple\n    keepValueOnEscape\n    triggerVariant=\"default\"\n    triggerColor=\"secondary\"\n    triggerClass=\"shrink-0 gap-1.5\"\n    [options]=\"addOptions()\"\n    [value]=\"addValue()\"\n    [emptyText]=\"labels().empty\"\n    [triggerAriaLabel]=\"labels().add\"\n    (valueChange)=\"onActiveChange($event)\"\n  >\n    <ng-template yuwComboboxTrigger>\n      <ng-icon name=\"lucidePlus\" size=\"16\" />\n      <span class=\"whitespace-nowrap max-md:hidden\">{{ labels().add }}</span>\n    </ng-template>\n\n    @if (activeGroups().length > 0) {\n      <div yuwComboboxFooter class=\"border-t p-1\">\n        <yuw-button variant=\"ghost\" size=\"sm\" class=\"w-full [&>button]:w-full\" (clicked)=\"onClearAll()\">\n          <span class=\"truncate\">{{ labels().clearAll }}</span>\n        </yuw-button>\n      </div>\n    }\n  </yuw-combobox>\n\n  <!-- Active filters -->\n  @if (activeGroups().length > 0) {\n    <div\n      yuwMouseScrollX\n      class=\"-my-1 flex min-w-0 flex-1 items-center gap-2 overflow-x-auto contain-inline-size px-px py-1 scroll-fade-x max-md:order-last max-md:basis-full [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\"\n    >\n      @for (group of activeGroups(); track group.id) {\n        <div\n          class=\"flex shrink-0 items-center\"\n          [class]=\"weldClass\"\n          [attr.data-filter-id]=\"group.id\"\n          data-testid=\"active-filter\"\n        >\n          @if (contentTemplates()[group.id]; as content) {\n            <ng-container\n              [ngTemplateOutlet]=\"content\"\n              [ngTemplateOutletContext]=\"{\n                $implicit: group,\n                value: selection()[group.id],\n                change: changers()[group.id],\n              }\"\n            />\n          } @else {\n            <yuw-combobox\n              keepValueOnEscape\n              triggerVariant=\"secondary\"\n              triggerClass=\"max-w-80 gap-1.5\"\n              [triggerColor]=\"idleColor()\"\n              [multiple]=\"group.mode === 'multiple'\"\n              [options]=\"options()[group.id]\"\n              [value]=\"values()[group.id]\"\n              [emptyText]=\"labels().empty\"\n              [triggerAriaLabel]=\"group.label\"\n              (valueChange)=\"onValueChange(group.id, $event)\"\n            >\n              <ng-template yuwComboboxTrigger let-summary>\n                <span class=\"whitespace-nowrap font-semibold\">{{ group.label }}</span>\n\n                @if (summary) {\n                  <span class=\"min-w-0 truncate font-normal\">{{ summary }}</span>\n                }\n              </ng-template>\n            </yuw-combobox>\n          }\n\n          <yuw-button\n            variant=\"secondary\"\n            size=\"icon\"\n            class=\"w-8 rounded-s-none\"\n            [color]=\"idleColor()\"\n            [ariaLabel]=\"labels().remove\"\n            (clicked)=\"onRemoved(group.id)\"\n          >\n            <ng-icon name=\"lucideX\" size=\"14\" />\n          </yuw-button>\n        </div>\n      }\n    </div>\n  }\n</fieldset>\n", dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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", "triggerClass", "triggerColor", "triggerSize", "triggerVariant", "value"], outputs: ["searchChange", "valueChange"] }, { kind: "directive", type: YuwComboboxTriggerDirective, selector: "ng-template[yuwComboboxTrigger]" }, { kind: "component", type: YuwsListToolbarFilterSetPickerComponent, selector: "yuws-list-toolbar-filter-set-picker", inputs: ["idleColor", "labels", "selection", "sets"], outputs: ["selectionChange", "setDeleted", "setRenamed", "setSaved"] }, { kind: "directive", type: YuwMouseScrollXDirective, selector: "[yuwMouseScrollX]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwsListToolbarFiltersComponent, isStandalone: true, selector: "yuws-list-toolbar-filters", inputs: { contents: { classPropertyName: "contents", publicName: "contents", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: true, transformFunction: null }, idleColor: { classPropertyName: "idleColor", publicName: "idleColor", isSignal: true, isRequired: true, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, sets: { classPropertyName: "sets", publicName: "sets", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", setDeleted: "setDeleted", setRenamed: "setRenamed", setSaved: "setSaved" }, host: { classAttribute: "flex min-w-0 max-w-full flex-1 max-md:contents" }, providers: [provideIcons({ lucidePlus, lucideX })], viewQueries: [{ propertyName: "_addBox", first: true, predicate: ["addBox"], descendants: true, isSignal: true }], ngImport: i0, template: "<fieldset class=\"m-0 flex min-w-0 flex-1 items-center gap-2 border-0 p-0 max-md:contents\" [disabled]=\"disabled()\">\n  <legend class=\"sr-only\">{{ labels().title }}</legend>\n\n  <!-- Saved sets -->\n  @if (setLabels(); as setLabels) {\n    <yuws-list-toolbar-filter-set-picker\n      [idleColor]=\"idleColor()\"\n      [labels]=\"setLabels\"\n      [sets]=\"sets() ?? []\"\n      [selection]=\"selection()\"\n      (selectionChange)=\"onSetApplied($event)\"\n      (setDeleted)=\"setDeleted.emit($event)\"\n      (setRenamed)=\"setRenamed.emit($event)\"\n      (setSaved)=\"setSaved.emit($event)\"\n    />\n  }\n\n  <!-- Add filter -->\n  <yuw-combobox\n    #addBox\n    multiple\n    keepValueOnEscape\n    triggerVariant=\"default\"\n    triggerColor=\"secondary\"\n    triggerClass=\"shrink-0 gap-1.5\"\n    [options]=\"addOptions()\"\n    [value]=\"addValue()\"\n    [emptyText]=\"labels().empty\"\n    [triggerAriaLabel]=\"labels().add\"\n    (valueChange)=\"onActiveChange($event)\"\n  >\n    <ng-template yuwComboboxTrigger>\n      <ng-icon name=\"lucidePlus\" size=\"16\" />\n      <span class=\"whitespace-nowrap max-md:hidden\">{{ labels().add }}</span>\n    </ng-template>\n\n    @if (activeGroups().length > 0) {\n      <div yuwComboboxFooter class=\"border-t p-1\">\n        <yuw-button variant=\"ghost\" size=\"sm\" class=\"w-full [&>button]:w-full\" (clicked)=\"onClearAll()\">\n          <span class=\"truncate\">{{ labels().clearAll }}</span>\n        </yuw-button>\n      </div>\n    }\n  </yuw-combobox>\n\n  <!-- Active filters -->\n  @if (activeGroups().length > 0) {\n    <div\n      yuwMouseScrollX\n      class=\"-my-1 flex min-w-0 flex-1 items-center gap-2 overflow-x-auto contain-inline-size px-px py-1 scroll-fade-x max-md:order-last max-md:basis-full [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\"\n    >\n      @for (group of activeGroups(); track group.id) {\n        <div\n          class=\"flex shrink-0 items-center\"\n          [class]=\"weldClass\"\n          [attr.data-filter-id]=\"group.id\"\n          data-testid=\"active-filter\"\n        >\n          @if (contentTemplates()[group.id]; as content) {\n            <ng-container\n              [ngTemplateOutlet]=\"content\"\n              [ngTemplateOutletContext]=\"{\n                $implicit: group,\n                value: selection()[group.id],\n                change: changers()[group.id],\n              }\"\n            />\n          } @else {\n            <yuw-combobox\n              keepValueOnEscape\n              triggerVariant=\"secondary\"\n              triggerClass=\"max-w-80 gap-1.5\"\n              [triggerColor]=\"idleColor()\"\n              [multiple]=\"group.mode === 'multiple'\"\n              [options]=\"options()[group.id]\"\n              [value]=\"values()[group.id]\"\n              [emptyText]=\"labels().empty\"\n              [triggerAriaLabel]=\"group.label\"\n              (valueChange)=\"onValueChange(group.id, $event)\"\n            >\n              <ng-template yuwComboboxTrigger let-summary>\n                <span class=\"whitespace-nowrap font-semibold\">{{ group.label }}</span>\n\n                @if (summary) {\n                  <span class=\"min-w-0 truncate font-normal\">{{ summary }}</span>\n                }\n              </ng-template>\n            </yuw-combobox>\n          }\n\n          <yuw-button\n            variant=\"secondary\"\n            size=\"icon\"\n            class=\"w-8 rounded-s-none\"\n            [color]=\"idleColor()\"\n            [ariaLabel]=\"labels().remove\"\n            (clicked)=\"onRemoved(group.id)\"\n          >\n            <ng-icon name=\"lucideX\" size=\"14\" />\n          </yuw-button>\n        </div>\n      }\n    </div>\n  }\n</fieldset>\n", dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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", "helperText", "inputId", "invalid", "keepValueOnEscape", "multiple", "options", "placeholder", "readonlyTrigger", "search", "searchPlaceholder", "size", "triggerAriaLabel", "triggerClass", "triggerColor", "triggerSize", "triggerVariant", "value"], outputs: ["searchChange", "valueChange"] }, { kind: "directive", type: YuwComboboxTriggerDirective, selector: "ng-template[yuwComboboxTrigger]" }, { kind: "component", type: YuwsListToolbarFilterSetPickerComponent, selector: "yuws-list-toolbar-filter-set-picker", inputs: ["idleColor", "labels", "selection", "sets"], outputs: ["selectionChange", "setDeleted", "setRenamed", "setSaved"] }, { kind: "directive", type: YuwMouseScrollXDirective, selector: "[yuwMouseScrollX]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwsListToolbarFiltersComponent, decorators: [{
             type: Component,