@lucca-front/ng 22.0.0-rc.5 → 22.0.0

package/fesm2022/lucca-front-ng-multi-select.mjs

@@ -1,17 +1,16 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Pipe, signal, Injector, computed, afterNextRender, forwardRef, ChangeDetectionStrategy, Component, ChangeDetectorRef, ElementRef, Injectable, input, model, numberAttribute, booleanAttribute, viewChild, ViewContainerRef, ViewEncapsulation, DestroyRef, Directive, effect } from '@angular/core';
+import { InjectionToken, inject, Pipe, signal, ElementRef, Injector, computed, afterNextRender, forwardRef, ChangeDetectionStrategy, Component, ChangeDetectorRef, Injectable, input, model, viewChild, ViewContainerRef, LOCALE_ID, ViewEncapsulation, DestroyRef, Directive, effect } from '@angular/core';
 import { toSignal, takeUntilDestroyed, outputToObservable } from '@angular/core/rxjs-interop';
-import { isNotNil, PortalDirective, getPushPanelViewportMargin, intlInputOptions, ɵeffectWithDeps as _effectWithDeps, isNil, syncInputSignal } from '@lucca-front/ng/core';
-import * as i1$2 from '@lucca-front/ng/core-select';
-import { LuSelectPanelRef, ɵIsSelectedStrategy as _IsSelectedStrategy, SELECT_ID, CoreSelectKeyManager, ɵgetGroupTemplateLocation as _getGroupTemplateLocation, LuSelectPanelLayoutComponent, ɵLuOptionComponent as _LuOptionComponent, ɵCoreSelectPanelElement as _CoreSelectPanelElement, LuIsOptionSelectedPipe, ɵLuOptionGroupPipe as _LuOptionGroupPipe, TreeDisplayPipe, SELECT_PANEL_INSTANCE, SELECT_LABEL_ID, addAttributesOnCdkContainer, ALuSelectInputComponent, LU_CORE_SELECT_TRANSLATIONS, ɵLuOptionOutletDirective as _LuOptionOutletDirective, provideLuSelectLabelsAndIds, LU_OPTION_CONTEXT, CORE_SELECT_API_TOTAL_COUNT_PROVIDER } from '@lucca-front/ng/core-select';
-import * as i1 from '@angular/common';
+import { isNotNil, PortalDirective, getPushPanelViewportMargin, intlInputOptions, luNumberAttribute, luBooleanAttribute, LOCALE_PLURAL_RULES, getIntlPluralLabel, ɵeffectWithDeps as _effectWithDeps, isNil, syncInputSignal } from '@lucca-front/ng/core';
+import * as i1$1 from '@lucca-front/ng/core-select';
+import { LuSelectPanelRef, ɵIsSelectedStrategy as _IsSelectedStrategy, SELECT_ID, ɵinjectPointerNavigation as _injectPointerNavigation, CoreSelectKeyManager, ɵgetGroupTemplateLocation as _getGroupTemplateLocation, LuSelectPanelLayoutComponent, ɵLuOptionComponent as _LuOptionComponent, ɵCoreSelectPanelElement as _CoreSelectPanelElement, LuIsOptionSelectedPipe, ɵLuOptionGroupPipe as _LuOptionGroupPipe, TreeDisplayPipe, SELECT_PANEL_INSTANCE, SELECT_LABEL_ID, addAttributesOnCdkContainer, ALuSelectInputComponent, LU_CORE_SELECT_TRANSLATIONS, ɵLuOptionOutletDirective as _LuOptionOutletDirective, provideLuSelectLabelsAndIds, LU_OPTION_CONTEXT, ɵscrollIntoViewOnceReady as _scrollIntoViewOnceReady, CORE_SELECT_API_TOTAL_COUNT_PROVIDER } from '@lucca-front/ng/core-select';
 import { NgTemplateOutlet, CommonModule, AsyncPipe } from '@angular/common';
 import * as i2 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { ClearComponent } from '@lucca-front/ng/clear';
 import { FilterPillDisplayerDirective, FilterPillLabelDirective, FILTER_PILL_INPUT_COMPONENT } from '@lucca-front/ng/filter-pills';
-import * as i1$1 from '@lucca-front/ng/form-field';
-import { ɵPresentationDisplayDefaultDirective as _PresentationDisplayDefaultDirective, PresentationDisplayDirective, InputDirective, FormFieldComponent } from '@lucca-front/ng/form-field';
+import * as i1 from '@lucca-front/ng/form-field';
+import { ɵPresentationDisplayDefaultDirective as _PresentationDisplayDefaultDirective, InputDirective, FormFieldComponent } from '@lucca-front/ng/form-field';
 import { LuTooltipModule } from '@lucca-front/ng/tooltip';
 import { IconComponent } from '@lucca/prisme/icon';
 import { firstValueFrom, EMPTY, takeUntil, Subject, BehaviorSubject } from 'rxjs';
@@ -145,17 +144,17 @@ const Translations$1 = {
         selectCountOptions: 'Select all results ({{optionsCount}})',
     },
     pl: {
-        placeholder: 'Wybierz..',
-        search: 'Wyszukaj',
+        placeholder: 'Wybierz…',
+        search: 'Szukaj',
         clear: 'Wyczyść zaznaczenie',
-        clearSearch: 'Puste wyszukiwanie',
+        clearSearch: 'Wyczyść wyszukiwanie',
         emptyResults: 'Wyszukiwanie nie przyniosło żadnych rezultatów.',
         emptySelection: 'Wybierz elementy z listy po lewej stronie, aby rozpocząć',
         expand: 'Rozwiń',
         reduce: 'Zmniejsz',
         selectAll: 'Zaznacz wszystko',
         unselectAll: 'Odznacz wszystko',
-        loading: 'Trwa ładowanie...',
+        loading: 'Trwa ładowanie…',
         emptyOptions: 'Brak dostępnych wartości. Aby uzyskać więcej informacji, skontaktuj się z administratorem.',
         selectCountOptions: 'Zaznacz wszystkie wyniki ({{optionsCount}})',
     },
@@ -166,6 +165,53 @@ const LU_MULTI_SELECT_TRANSLATIONS = new InjectionToken('LuMultiSelectTranslatio
 });
 const luMultiSelectTranslations = Translations$1;
 
+/**
+ * Returns the `itemCount - 1` separators `Intl.ListFormat` puts between `itemCount` items, so they can be
+ * interleaved with values rendered by a template rather than by `format()`.
+ *
+ * @example
+ * ```ts
+ * listSeparators(new Intl.ListFormat('fr-FR'), 3); // [', ', ' et ']
+ * ```
+ */
+function listSeparators(listFormat, itemCount) {
+    return listFormat
+        .formatToParts(Array.from({ length: itemCount }, (_, index) => `${index}`))
+        .filter(({ type }) => type === 'literal')
+        .map(({ value }) => value);
+}
+function selectionToQueryParams(key, value, selector) {
+    if (value.mode === 'all' || value.mode === 'none') {
+        return {};
+    }
+    return { [value.mode === 'include' ? key : `-${key}`]: value.values.map(selector).join(',') };
+}
+/**
+ * Transforms a selection from withSelectAll, the complete list of options and a getKey function to a list of options.
+ *
+ * @example
+ * ```ts
+ * const selection = { mode: 'exclude', values: [{ id: 1, name: 'foo' }] };
+ * const allOptions = [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }, { id: 3, name: 'baz' }];
+ *
+ * const selectedOptions = selectionToOptions(selection, allOptions, (o) => o.id);
+ * ```
+ */
+function selectionToOptions(selection, options, getKeyFn) {
+    switch (selection.mode) {
+        case 'include':
+            return selection.values;
+        case 'exclude': {
+            const excludedKeys = new Set(selection.values.map(getKeyFn));
+            return options.filter((o) => !excludedKeys.has(getKeyFn(o)));
+        }
+        case 'all':
+            return options;
+        case 'none':
+            return [];
+    }
+}
+
 class LuMultiSelectPanelRef extends LuSelectPanelRef {
 }
 
@@ -180,10 +226,10 @@ class LuOptionsGroupContextPipe {
             isGroupSelected: this.#selectionStrategy.isGroupSelected(groupOptions, notSelectedOptions),
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LuOptionsGroupContextPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.4", ngImport: i0, type: LuOptionsGroupContextPipe, isStandalone: true, name: "luOptionsGroupContext" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuOptionsGroupContextPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: LuOptionsGroupContextPipe, isStandalone: true, name: "luOptionsGroupContext" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LuOptionsGroupContextPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuOptionsGroupContextPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'luOptionsGroupContext',
@@ -208,8 +254,7 @@ class LuMultiSelectPanelComponent {
         this.optionTpl = this.selectInput.optionTpl;
         this.options = signal([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
-        this.pointerNavigation = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "pointerNavigation" }] : /* istanbul ignore next */ []));
+        this.pointerNavigation = _injectPointerNavigation(inject(ElementRef).nativeElement);
         this.keyManager = inject(CoreSelectKeyManager);
         this.#injector = inject(Injector);
         this.someGroupOptionEnabled = computed(() => {
@@ -229,7 +274,7 @@ class LuMultiSelectPanelComponent {
         ...(ngDevMode ? [{ debugName: "hasGrouping" }] : /* istanbul ignore next */ []));
         this.clue = toSignal(this.selectInput.clue$.pipe(map((clue) => clue ?? '')), { initialValue: '' });
         this.shouldDisplayAddOption = this.selectInput.shouldDisplayAddOption;
-        this.groupTemplateLocation = _getGroupTemplateLocation(this.hasGrouping, this.clue, this.searchable);
+        this.groupTemplateLocation = _getGroupTemplateLocation(this.hasGrouping, this.clue, this.dataSourceOptions, this.searchable);
         // Loading takes precedence over empty so the "no result" message never flashes during a fetch
         this.listboxState = computed(() => (this.loading() ? 'loading' : this.dataSourceOptions().length === 0 ? 'empty' : null), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "listboxState" }] : /* istanbul ignore next */ []));
@@ -242,12 +287,6 @@ class LuMultiSelectPanelComponent {
         ...(ngDevMode ? [{ debugName: "listboxStatusMsg" }] : /* istanbul ignore next */ []));
     }
     #injector;
-    onKeydown() {
-        this.pointerNavigation.set(false);
-    }
-    onMousemove() {
-        this.pointerNavigation.set(true);
-    }
     onScroll(evt) {
         if (!(evt.target instanceof HTMLElement)) {
             return;
@@ -329,20 +368,20 @@ class LuMultiSelectPanelComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LuMultiSelectPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: LuMultiSelectPanelComponent, isStandalone: true, selector: "lu-select-panel", host: { listeners: { "document:keydown": "onKeydown()", "document:mousemove": "onMousemove()" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuMultiSelectPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: LuMultiSelectPanelComponent, isStandalone: true, selector: "lu-select-panel", host: { properties: { "class.is-pointerNavigation": "pointerNavigation()" }, classAttribute: "selectPanel" }, providers: [
             CoreSelectKeyManager,
             {
                 provide: SELECT_PANEL_INSTANCE,
                 useExisting: forwardRef(() => LuMultiSelectPanelComponent),
             },
-        ], ngImport: i0, template: "<lu-select-panel-layout\n\tclass=\"lu-option-picker-panel mod-multiple\"\n\tdata-testid=\"dialog-panel\"\n\t[loading]=\"loading()\"\n\t[contentTabIndex]=\"0\"\n\t(scrolled)=\"onScroll($event)\"\n>\n\t<lu-listbox multiple [tree]=\"!!treeGenerator\" [state]=\"listboxState()\" [statusMsg]=\"listboxStatusMsg()\">\n\t\t<!-- The header is projected inside the listbox because it can contain selectable elements\n\t\t(e.g. the select-all checkbox) that are referenced by aria-activedescendant -->\n\t\t<ng-container ngProjectAs=\"[listbox-header]\">\n\t\t\t@if (selectInput.panelHeaderTpl(); as tpl) {\n\t\t\t\t<div>\n\t\t\t\t\t<ng-container *luPortal=\"tpl\" />\n\t\t\t\t</div>\n\t\t\t}\n\t\t</ng-container>\n\t\t@if (grouping() && groupTemplateLocation() === \"group-header\") {\n\t\t\t@for (group of dataSourceOptions() | luOptionGroup: grouping().selector; track group.key; let groupIndex = $index) {\n\t\t\t\t<lu-listbox-option group [groupId]=\"selectId + '-group-' + group.key\">\n\t\t\t\t\t<span #groupingTitleRef>\n\t\t\t\t\t\t<ng-container *luPortal=\"grouping().content; context: { $implicit: group }\" />\n\t\t\t\t\t</span>\n\t\t\t\t\t@if (someGroupOptionEnabled()(group.options)) {\n\t\t\t\t\t\t@let groupCtx = group.options | luOptionsGroupContext: selectedOptions : optionComparer();\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tgroup-action\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"link\"\n\t\t\t\t\t\t\t[disabled]=\"groupLoadingKeys().has(group.key)\"\n\t\t\t\t\t\t\t(click)=\"toggleOptions(groupCtx.notSelectedOptions, group.options, group.key)\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t@if (groupLoadingKeys().has(group.key)) {\n\t\t\t\t\t\t\t\t<span class=\"loading\"></span>\n\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t<span class=\"pr-u-mask\">{{ groupingTitleRef.innerText }}&nbsp;\u2013 </span\n\t\t\t\t\t\t\t\t>{{ groupCtx.isGroupSelected ? intl().unselectAll : intl().selectAll }}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t}\n\t\t\t\t\t<div optgroup class=\"listboxOptionWrapper\">\n\t\t\t\t\t\t<ng-template\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"optionsList\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: group.options, groupIndex: groupIndex }\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</lu-listbox-option>\n\t\t\t}\n\t\t}\n\t\t@if (!grouping() || groupTemplateLocation() !== \"group-header\") {\n\t\t\t<ng-template [ngTemplateOutlet]=\"optionsList\" [ngTemplateOutletContext]=\"{ $implicit: dataSourceOptions() }\" />\n\t\t}\n\t\t<ng-template #optionsList let-options let-groupIndex=\"groupIndex\">\n\t\t\t@if (treeGenerator) {\n\t\t\t\t@for (branch of options | luTreeDisplay: treeGenerator; let index = $index; track optionKey()(branch.node)) {\n\t\t\t\t\t<lu-tree-branch\n\t\t\t\t\t\t[branch]=\"branch\"\n\t\t\t\t\t\t[optionTpl]=\"optionTpl()\"\n\t\t\t\t\t\t[selectedOptions]=\"selectedOptions\"\n\t\t\t\t\t\t[optionComparer]=\"optionComparer()\"\n\t\t\t\t\t\t[optionIndex]=\"index\"\n\t\t\t\t\t\t(toggleOne)=\"toggleOption($event)\"\n\t\t\t\t\t\t(selectMany)=\"toggleOptions($event, [])\"\n\t\t\t\t\t\t(unselectMany)=\"toggleOptions([], $event)\"\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t} @else {\n\t\t\t\t@for (option of options; track optionKey()(option); let index = $index) {\n\t\t\t\t\t<lu-select-option\n\t\t\t\t\t\tluCoreSelectPanelElement\n\t\t\t\t\t\t[option]=\"option\"\n\t\t\t\t\t\t[optionTpl]=\"optionTpl()\"\n\t\t\t\t\t\t[optionIndex]=\"index\"\n\t\t\t\t\t\t[grouping]=\"groupTemplateLocation() === 'option' ? grouping() : undefined\"\n\t\t\t\t\t\t[groupIndex]=\"groupIndex\"\n\t\t\t\t\t\t[groupTemplateLocation]=\"groupTemplateLocation()\"\n\t\t\t\t\t\t[scrollIntoViewOptions]=\"{ block: 'nearest' }\"\n\t\t\t\t\t\t[isSelected]=\"option | luIsOptionSelected: optionComparer() : selectedOptions\"\n\t\t\t\t\t\t(selected)=\"toggleOption(option)\"\n\t\t\t\t\t\t(click)=\"toggleOption(option)\"\n\t\t\t\t\t\t[class.withAddOption]=\"shouldDisplayAddOption()\"\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t}\n\t\t</ng-template>\n\t</lu-listbox>\n\t@if (shouldDisplayAddOption()) {\n\t\t<lu-listbox-option\n\t\t\tadd\n\t\t\tclass=\"palette-product\"\n\t\t\tluCoreSelectPanelElement\n\t\t\t#addOptionElement=\"luCoreSelectPanelElement\"\n\t\t\telementId=\"picker-content-add\"\n\t\t\t[hovered]=\"addOptionElement.isHighlighted()\"\n\t\t\t(click)=\"selectInput.emitAddOption()\"\n\t\t\t(selected)=\"selectInput.emitAddOption()\"\n\t\t>\n\t\t\t<ng-container *luPortal=\"selectInput.addOptionLabel\" />\n\t\t</lu-listbox-option>\n\t}\n</lu-select-panel-layout>\n", styles: ["@layer components{.optionItem-groupKey{padding-block:var(--components-options-item-padding-vertical) var(--pr-t-spacings-50);padding-inline:var(--components-options-item-padding-horizontal);font:var(--pr-t-font-body-S);inline-size:100%;text-align:start;color:var(--palettes-neutral-600);margin:0}}@layer components{.listboxOption[role=group]{display:flex;flex-direction:column;gap:var(--pr-t-spacings-50)}.listboxOption[role=group]:not(:hover,:has(.is-highlighted)) .link{opacity:.0001}.listboxOption[role=group]>.listboxOption-content{font:var(--pr-t-font-body-S);font-weight:var(--pr-t-font-fontWeight-semibold);padding-block:var(--components-options-item-padding-vertical);padding-inline:var(--components-options-item-padding-horizontal);color:var(--palettes-neutral-600);position:sticky;inset-block-start:0;background-color:var(--pr-t-elevation-surface-raised);z-index:1;display:flex;gap:var(--pr-t-spacings-100);justify-content:space-between;box-shadow:calc(var(--pr-t-spacings-50) * -.5) calc(var(--pr-t-spacings-50) * -.5) 0 2px var(--pr-t-elevation-surface-raised)}}\n"], dependencies: [{ kind: "component", type: LuSelectPanelLayoutComponent, selector: "lu-select-panel-layout", inputs: ["loading", "trapFocus", "contentTabIndex"], outputs: ["scrolled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: _LuOptionComponent, selector: "lu-select-option", inputs: ["intl", "optionTpl", "option", "grouping", "hasChildren", "groupIndex", "optionIndex", "scrollIntoViewOptions", "groupTemplateLocation"], outputs: ["onlyParent", "onlyChildren"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: PortalDirective, selector: "[luPortal]", inputs: ["luPortal", "luPortalContext"] }, { kind: "directive", type: _CoreSelectPanelElement, selector: "[luCoreSelectPanelElement]", inputs: ["elementId", "isSelected", "option", "disabled"], outputs: ["isSelectedChange", "selected"], exportAs: ["luCoreSelectPanelElement"] }, { kind: "component", type: ListboxComponent, selector: "lu-listbox", inputs: ["multiple", "tree", "state", "statusMsg"] }, { kind: "component", type: OptionComponent, selector: "lu-listbox-option", inputs: ["presentation", "checked", "mixed", "disabled", "hovered", "add", "group", "groupId", "select", "selectAll"] }, { kind: "component", type: TreeBranchComponent, selector: "lu-tree-branch", inputs: ["branch", "optionTpl", "optionIndex", "optionComparer", "selectedOptions", "simpleMode"], outputs: ["toggleOne", "selectMany", "unselectMany"] }, { kind: "pipe", type: LuIsOptionSelectedPipe, name: "luIsOptionSelected" }, { kind: "pipe", type: _LuOptionGroupPipe, name: "luOptionGroup" }, { kind: "pipe", type: LuOptionsGroupContextPipe, name: "luOptionsGroupContext" }, { kind: "pipe", type: TreeDisplayPipe, name: "luTreeDisplay" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<lu-select-panel-layout\n\tclass=\"lu-option-picker-panel mod-multiple\"\n\tdata-testid=\"dialog-panel\"\n\t[loading]=\"loading()\"\n\t[contentTabIndex]=\"0\"\n\t(scrolled)=\"onScroll($event)\"\n>\n\t<lu-listbox multiple [tree]=\"!!treeGenerator\" [state]=\"listboxState()\" [statusMsg]=\"listboxStatusMsg()\">\n\t\t<!-- The header is projected inside the listbox because it can contain selectable elements\n\t\t(e.g. the select-all checkbox) that are referenced by aria-activedescendant -->\n\t\t<ng-container ngProjectAs=\"[listbox-header]\">\n\t\t\t@if (selectInput.panelHeaderTpl(); as tpl) {\n\t\t\t\t<div>\n\t\t\t\t\t<ng-container *luPortal=\"tpl\" />\n\t\t\t\t</div>\n\t\t\t}\n\t\t</ng-container>\n\t\t@if (grouping() && groupTemplateLocation() === \"group-header\") {\n\t\t\t@for (group of dataSourceOptions() | luOptionGroup: grouping().selector; track group.key; let groupIndex = $index) {\n\t\t\t\t<lu-listbox-option group [groupId]=\"selectId + '-group-' + group.key\" [elementId]=\"selectId + '-group-' + group.key\">\n\t\t\t\t\t<span #groupingTitleRef>\n\t\t\t\t\t\t<ng-container *luPortal=\"grouping().content; context: { $implicit: group }\" />\n\t\t\t\t\t</span>\n\t\t\t\t\t@if (someGroupOptionEnabled()(group.options)) {\n\t\t\t\t\t\t@let groupCtx = group.options | luOptionsGroupContext: selectedOptions : optionComparer();\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tgroup-action\n\t\t\t\t\t\t\tclass=\"link\"\n\t\t\t\t\t\t\tluCoreSelectPanelElement\n\t\t\t\t\t\t\t[elementId]=\"selectId + '-group-' + group.key + '-action'\"\n\t\t\t\t\t\t\t(selected)=\"toggleOptions(groupCtx.notSelectedOptions, group.options, group.key)\"\n\t\t\t\t\t\t\t[disabled]=\"groupLoadingKeys().has(group.key)\"\n\t\t\t\t\t\t\t(click)=\"toggleOptions(groupCtx.notSelectedOptions, group.options, group.key)\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t@if (groupLoadingKeys().has(group.key)) {\n\t\t\t\t\t\t\t\t<span class=\"loading\"></span>\n\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t<span class=\"pr-u-mask\">{{ groupingTitleRef.innerText }}&nbsp;\u2013 </span\n\t\t\t\t\t\t\t\t>{{ groupCtx.isGroupSelected ? intl().unselectAll : intl().selectAll }}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t\t<div optgroup class=\"listboxOptionWrapper\">\n\t\t\t\t\t\t<ng-template\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"optionsList\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: group.options, groupIndex: groupIndex }\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</lu-listbox-option>\n\t\t\t}\n\t\t}\n\t\t@if (!grouping() || groupTemplateLocation() !== \"group-header\") {\n\t\t\t<ng-template [ngTemplateOutlet]=\"optionsList\" [ngTemplateOutletContext]=\"{ $implicit: dataSourceOptions() }\" />\n\t\t}\n\t\t<ng-template #optionsList let-options let-groupIndex=\"groupIndex\">\n\t\t\t@if (treeGenerator) {\n\t\t\t\t@for (branch of options | luTreeDisplay: treeGenerator; let index = $index; track optionKey()(branch.node)) {\n\t\t\t\t\t<lu-tree-branch\n\t\t\t\t\t\t[branch]=\"branch\"\n\t\t\t\t\t\t[optionTpl]=\"optionTpl()\"\n\t\t\t\t\t\t[selectedOptions]=\"selectedOptions\"\n\t\t\t\t\t\t[optionComparer]=\"optionComparer()\"\n\t\t\t\t\t\t[optionIndex]=\"index\"\n\t\t\t\t\t\t(toggleOne)=\"toggleOption($event)\"\n\t\t\t\t\t\t(selectMany)=\"toggleOptions($event, [])\"\n\t\t\t\t\t\t(unselectMany)=\"toggleOptions([], $event)\"\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t} @else {\n\t\t\t\t@for (option of options; track optionKey()(option); let index = $index) {\n\t\t\t\t\t<lu-select-option\n\t\t\t\t\t\tluCoreSelectPanelElement\n\t\t\t\t\t\t[option]=\"option\"\n\t\t\t\t\t\t[optionTpl]=\"optionTpl()\"\n\t\t\t\t\t\t[optionIndex]=\"index\"\n\t\t\t\t\t\t[grouping]=\"groupTemplateLocation() === 'option' ? grouping() : undefined\"\n\t\t\t\t\t\t[groupIndex]=\"groupIndex\"\n\t\t\t\t\t\t[groupTemplateLocation]=\"groupTemplateLocation()\"\n\t\t\t\t\t\t[scrollIntoViewOptions]=\"{ block: 'nearest' }\"\n\t\t\t\t\t\t[isSelected]=\"option | luIsOptionSelected: optionComparer() : selectedOptions\"\n\t\t\t\t\t\t(selected)=\"toggleOption(option)\"\n\t\t\t\t\t\t(click)=\"toggleOption(option)\"\n\t\t\t\t\t\t[class.withAddOption]=\"shouldDisplayAddOption()\"\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t}\n\t\t</ng-template>\n\t</lu-listbox>\n\t@if (shouldDisplayAddOption()) {\n\t\t<lu-listbox-option\n\t\t\tadd\n\t\t\tclass=\"palette-product\"\n\t\t\tluCoreSelectPanelElement\n\t\t\t#addOptionElement=\"luCoreSelectPanelElement\"\n\t\t\telementId=\"picker-content-add\"\n\t\t\t[hovered]=\"addOptionElement.isHighlighted()\"\n\t\t\t(click)=\"selectInput.emitAddOption()\"\n\t\t\t(selected)=\"selectInput.emitAddOption()\"\n\t\t>\n\t\t\t<ng-container *luPortal=\"selectInput.addOptionLabel\" />\n\t\t</lu-listbox-option>\n\t}\n</lu-select-panel-layout>\n", styles: [""], dependencies: [{ kind: "component", type: LuSelectPanelLayoutComponent, selector: "lu-select-panel-layout", inputs: ["loading", "trapFocus", "contentTabIndex"], outputs: ["scrolled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: _LuOptionComponent, selector: "lu-select-option", inputs: ["intl", "optionTpl", "option", "grouping", "hasChildren", "groupIndex", "optionIndex", "scrollIntoViewOptions", "groupTemplateLocation"], outputs: ["onlyParent", "onlyChildren"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: PortalDirective, selector: "[luPortal]", inputs: ["luPortal", "luPortalContext"] }, { kind: "directive", type: _CoreSelectPanelElement, selector: "[luCoreSelectPanelElement]", inputs: ["elementId", "isSelected", "option", "disabled"], outputs: ["isSelectedChange", "selected"], exportAs: ["luCoreSelectPanelElement"] }, { kind: "component", type: ListboxComponent, selector: "lu-listbox", inputs: ["multiple", "tree", "state", "statusMsg"] }, { kind: "component", type: OptionComponent, selector: "lu-listbox-option", inputs: ["elementId", "checked", "mixed", "disabled", "hovered", "add", "group", "groupId", "select", "selectAll", "treeitemLevel"] }, { kind: "component", type: TreeBranchComponent, selector: "lu-tree-branch", inputs: ["branch", "optionTpl", "optionIndex", "optionComparer", "selectedOptions", "simpleMode"], outputs: ["toggleOne", "selectMany", "unselectMany"] }, { kind: "pipe", type: LuIsOptionSelectedPipe, name: "luIsOptionSelected" }, { kind: "pipe", type: _LuOptionGroupPipe, name: "luOptionGroup" }, { kind: "pipe", type: LuOptionsGroupContextPipe, name: "luOptionsGroupContext" }, { kind: "pipe", type: TreeDisplayPipe, name: "luTreeDisplay" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LuMultiSelectPanelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuMultiSelectPanelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lu-select-panel', changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '(document:keydown)': 'onKeydown()',
-                        '(document:mousemove)': 'onMousemove()',
+                        class: 'selectPanel',
+                        '[class.is-pointerNavigation]': 'pointerNavigation()',
                     }, imports: [
                         LuSelectPanelLayoutComponent,
                         FormsModule,
@@ -363,7 +402,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                             provide: SELECT_PANEL_INSTANCE,
                             useExisting: forwardRef(() => LuMultiSelectPanelComponent),
                         },
-                    ], template: "<lu-select-panel-layout\n\tclass=\"lu-option-picker-panel mod-multiple\"\n\tdata-testid=\"dialog-panel\"\n\t[loading]=\"loading()\"\n\t[contentTabIndex]=\"0\"\n\t(scrolled)=\"onScroll($event)\"\n>\n\t<lu-listbox multiple [tree]=\"!!treeGenerator\" [state]=\"listboxState()\" [statusMsg]=\"listboxStatusMsg()\">\n\t\t<!-- The header is projected inside the listbox because it can contain selectable elements\n\t\t(e.g. the select-all checkbox) that are referenced by aria-activedescendant -->\n\t\t<ng-container ngProjectAs=\"[listbox-header]\">\n\t\t\t@if (selectInput.panelHeaderTpl(); as tpl) {\n\t\t\t\t<div>\n\t\t\t\t\t<ng-container *luPortal=\"tpl\" />\n\t\t\t\t</div>\n\t\t\t}\n\t\t</ng-container>\n\t\t@if (grouping() && groupTemplateLocation() === \"group-header\") {\n\t\t\t@for (group of dataSourceOptions() | luOptionGroup: grouping().selector; track group.key; let groupIndex = $index) {\n\t\t\t\t<lu-listbox-option group [groupId]=\"selectId + '-group-' + group.key\">\n\t\t\t\t\t<span #groupingTitleRef>\n\t\t\t\t\t\t<ng-container *luPortal=\"grouping().content; context: { $implicit: group }\" />\n\t\t\t\t\t</span>\n\t\t\t\t\t@if (someGroupOptionEnabled()(group.options)) {\n\t\t\t\t\t\t@let groupCtx = group.options | luOptionsGroupContext: selectedOptions : optionComparer();\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tgroup-action\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"link\"\n\t\t\t\t\t\t\t[disabled]=\"groupLoadingKeys().has(group.key)\"\n\t\t\t\t\t\t\t(click)=\"toggleOptions(groupCtx.notSelectedOptions, group.options, group.key)\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t@if (groupLoadingKeys().has(group.key)) {\n\t\t\t\t\t\t\t\t<span class=\"loading\"></span>\n\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t<span class=\"pr-u-mask\">{{ groupingTitleRef.innerText }}&nbsp;\u2013 </span\n\t\t\t\t\t\t\t\t>{{ groupCtx.isGroupSelected ? intl().unselectAll : intl().selectAll }}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t}\n\t\t\t\t\t<div optgroup class=\"listboxOptionWrapper\">\n\t\t\t\t\t\t<ng-template\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"optionsList\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: group.options, groupIndex: groupIndex }\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</lu-listbox-option>\n\t\t\t}\n\t\t}\n\t\t@if (!grouping() || groupTemplateLocation() !== \"group-header\") {\n\t\t\t<ng-template [ngTemplateOutlet]=\"optionsList\" [ngTemplateOutletContext]=\"{ $implicit: dataSourceOptions() }\" />\n\t\t}\n\t\t<ng-template #optionsList let-options let-groupIndex=\"groupIndex\">\n\t\t\t@if (treeGenerator) {\n\t\t\t\t@for (branch of options | luTreeDisplay: treeGenerator; let index = $index; track optionKey()(branch.node)) {\n\t\t\t\t\t<lu-tree-branch\n\t\t\t\t\t\t[branch]=\"branch\"\n\t\t\t\t\t\t[optionTpl]=\"optionTpl()\"\n\t\t\t\t\t\t[selectedOptions]=\"selectedOptions\"\n\t\t\t\t\t\t[optionComparer]=\"optionComparer()\"\n\t\t\t\t\t\t[optionIndex]=\"index\"\n\t\t\t\t\t\t(toggleOne)=\"toggleOption($event)\"\n\t\t\t\t\t\t(selectMany)=\"toggleOptions($event, [])\"\n\t\t\t\t\t\t(unselectMany)=\"toggleOptions([], $event)\"\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t} @else {\n\t\t\t\t@for (option of options; track optionKey()(option); let index = $index) {\n\t\t\t\t\t<lu-select-option\n\t\t\t\t\t\tluCoreSelectPanelElement\n\t\t\t\t\t\t[option]=\"option\"\n\t\t\t\t\t\t[optionTpl]=\"optionTpl()\"\n\t\t\t\t\t\t[optionIndex]=\"index\"\n\t\t\t\t\t\t[grouping]=\"groupTemplateLocation() === 'option' ? grouping() : undefined\"\n\t\t\t\t\t\t[groupIndex]=\"groupIndex\"\n\t\t\t\t\t\t[groupTemplateLocation]=\"groupTemplateLocation()\"\n\t\t\t\t\t\t[scrollIntoViewOptions]=\"{ block: 'nearest' }\"\n\t\t\t\t\t\t[isSelected]=\"option | luIsOptionSelected: optionComparer() : selectedOptions\"\n\t\t\t\t\t\t(selected)=\"toggleOption(option)\"\n\t\t\t\t\t\t(click)=\"toggleOption(option)\"\n\t\t\t\t\t\t[class.withAddOption]=\"shouldDisplayAddOption()\"\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t}\n\t\t</ng-template>\n\t</lu-listbox>\n\t@if (shouldDisplayAddOption()) {\n\t\t<lu-listbox-option\n\t\t\tadd\n\t\t\tclass=\"palette-product\"\n\t\t\tluCoreSelectPanelElement\n\t\t\t#addOptionElement=\"luCoreSelectPanelElement\"\n\t\t\telementId=\"picker-content-add\"\n\t\t\t[hovered]=\"addOptionElement.isHighlighted()\"\n\t\t\t(click)=\"selectInput.emitAddOption()\"\n\t\t\t(selected)=\"selectInput.emitAddOption()\"\n\t\t>\n\t\t\t<ng-container *luPortal=\"selectInput.addOptionLabel\" />\n\t\t</lu-listbox-option>\n\t}\n</lu-select-panel-layout>\n", styles: ["@layer components{.optionItem-groupKey{padding-block:var(--components-options-item-padding-vertical) var(--pr-t-spacings-50);padding-inline:var(--components-options-item-padding-horizontal);font:var(--pr-t-font-body-S);inline-size:100%;text-align:start;color:var(--palettes-neutral-600);margin:0}}@layer components{.listboxOption[role=group]{display:flex;flex-direction:column;gap:var(--pr-t-spacings-50)}.listboxOption[role=group]:not(:hover,:has(.is-highlighted)) .link{opacity:.0001}.listboxOption[role=group]>.listboxOption-content{font:var(--pr-t-font-body-S);font-weight:var(--pr-t-font-fontWeight-semibold);padding-block:var(--components-options-item-padding-vertical);padding-inline:var(--components-options-item-padding-horizontal);color:var(--palettes-neutral-600);position:sticky;inset-block-start:0;background-color:var(--pr-t-elevation-surface-raised);z-index:1;display:flex;gap:var(--pr-t-spacings-100);justify-content:space-between;box-shadow:calc(var(--pr-t-spacings-50) * -.5) calc(var(--pr-t-spacings-50) * -.5) 0 2px var(--pr-t-elevation-surface-raised)}}\n"] }]
+                    ], template: "<lu-select-panel-layout\n\tclass=\"lu-option-picker-panel mod-multiple\"\n\tdata-testid=\"dialog-panel\"\n\t[loading]=\"loading()\"\n\t[contentTabIndex]=\"0\"\n\t(scrolled)=\"onScroll($event)\"\n>\n\t<lu-listbox multiple [tree]=\"!!treeGenerator\" [state]=\"listboxState()\" [statusMsg]=\"listboxStatusMsg()\">\n\t\t<!-- The header is projected inside the listbox because it can contain selectable elements\n\t\t(e.g. the select-all checkbox) that are referenced by aria-activedescendant -->\n\t\t<ng-container ngProjectAs=\"[listbox-header]\">\n\t\t\t@if (selectInput.panelHeaderTpl(); as tpl) {\n\t\t\t\t<div>\n\t\t\t\t\t<ng-container *luPortal=\"tpl\" />\n\t\t\t\t</div>\n\t\t\t}\n\t\t</ng-container>\n\t\t@if (grouping() && groupTemplateLocation() === \"group-header\") {\n\t\t\t@for (group of dataSourceOptions() | luOptionGroup: grouping().selector; track group.key; let groupIndex = $index) {\n\t\t\t\t<lu-listbox-option group [groupId]=\"selectId + '-group-' + group.key\" [elementId]=\"selectId + '-group-' + group.key\">\n\t\t\t\t\t<span #groupingTitleRef>\n\t\t\t\t\t\t<ng-container *luPortal=\"grouping().content; context: { $implicit: group }\" />\n\t\t\t\t\t</span>\n\t\t\t\t\t@if (someGroupOptionEnabled()(group.options)) {\n\t\t\t\t\t\t@let groupCtx = group.options | luOptionsGroupContext: selectedOptions : optionComparer();\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tgroup-action\n\t\t\t\t\t\t\tclass=\"link\"\n\t\t\t\t\t\t\tluCoreSelectPanelElement\n\t\t\t\t\t\t\t[elementId]=\"selectId + '-group-' + group.key + '-action'\"\n\t\t\t\t\t\t\t(selected)=\"toggleOptions(groupCtx.notSelectedOptions, group.options, group.key)\"\n\t\t\t\t\t\t\t[disabled]=\"groupLoadingKeys().has(group.key)\"\n\t\t\t\t\t\t\t(click)=\"toggleOptions(groupCtx.notSelectedOptions, group.options, group.key)\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t@if (groupLoadingKeys().has(group.key)) {\n\t\t\t\t\t\t\t\t<span class=\"loading\"></span>\n\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t<span class=\"pr-u-mask\">{{ groupingTitleRef.innerText }}&nbsp;\u2013 </span\n\t\t\t\t\t\t\t\t>{{ groupCtx.isGroupSelected ? intl().unselectAll : intl().selectAll }}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t\t<div optgroup class=\"listboxOptionWrapper\">\n\t\t\t\t\t\t<ng-template\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"optionsList\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: group.options, groupIndex: groupIndex }\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</lu-listbox-option>\n\t\t\t}\n\t\t}\n\t\t@if (!grouping() || groupTemplateLocation() !== \"group-header\") {\n\t\t\t<ng-template [ngTemplateOutlet]=\"optionsList\" [ngTemplateOutletContext]=\"{ $implicit: dataSourceOptions() }\" />\n\t\t}\n\t\t<ng-template #optionsList let-options let-groupIndex=\"groupIndex\">\n\t\t\t@if (treeGenerator) {\n\t\t\t\t@for (branch of options | luTreeDisplay: treeGenerator; let index = $index; track optionKey()(branch.node)) {\n\t\t\t\t\t<lu-tree-branch\n\t\t\t\t\t\t[branch]=\"branch\"\n\t\t\t\t\t\t[optionTpl]=\"optionTpl()\"\n\t\t\t\t\t\t[selectedOptions]=\"selectedOptions\"\n\t\t\t\t\t\t[optionComparer]=\"optionComparer()\"\n\t\t\t\t\t\t[optionIndex]=\"index\"\n\t\t\t\t\t\t(toggleOne)=\"toggleOption($event)\"\n\t\t\t\t\t\t(selectMany)=\"toggleOptions($event, [])\"\n\t\t\t\t\t\t(unselectMany)=\"toggleOptions([], $event)\"\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t} @else {\n\t\t\t\t@for (option of options; track optionKey()(option); let index = $index) {\n\t\t\t\t\t<lu-select-option\n\t\t\t\t\t\tluCoreSelectPanelElement\n\t\t\t\t\t\t[option]=\"option\"\n\t\t\t\t\t\t[optionTpl]=\"optionTpl()\"\n\t\t\t\t\t\t[optionIndex]=\"index\"\n\t\t\t\t\t\t[grouping]=\"groupTemplateLocation() === 'option' ? grouping() : undefined\"\n\t\t\t\t\t\t[groupIndex]=\"groupIndex\"\n\t\t\t\t\t\t[groupTemplateLocation]=\"groupTemplateLocation()\"\n\t\t\t\t\t\t[scrollIntoViewOptions]=\"{ block: 'nearest' }\"\n\t\t\t\t\t\t[isSelected]=\"option | luIsOptionSelected: optionComparer() : selectedOptions\"\n\t\t\t\t\t\t(selected)=\"toggleOption(option)\"\n\t\t\t\t\t\t(click)=\"toggleOption(option)\"\n\t\t\t\t\t\t[class.withAddOption]=\"shouldDisplayAddOption()\"\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t}\n\t\t</ng-template>\n\t</lu-listbox>\n\t@if (shouldDisplayAddOption()) {\n\t\t<lu-listbox-option\n\t\t\tadd\n\t\t\tclass=\"palette-product\"\n\t\t\tluCoreSelectPanelElement\n\t\t\t#addOptionElement=\"luCoreSelectPanelElement\"\n\t\t\telementId=\"picker-content-add\"\n\t\t\t[hovered]=\"addOptionElement.isHighlighted()\"\n\t\t\t(click)=\"selectInput.emitAddOption()\"\n\t\t\t(selected)=\"selectInput.emitAddOption()\"\n\t\t>\n\t\t\t<ng-container *luPortal=\"selectInput.addOptionLabel\" />\n\t\t</lu-listbox-option>\n\t}\n</lu-select-panel-layout>\n" }]
         }] });
 
 class BaseMultiSelectPanelRef extends LuMultiSelectPanelRef {
@@ -496,10 +535,10 @@ class LuMultiSelectPanelRefFactory {
             ...(config.offsetY ? { offsetY: yDirection === 'bottom' ? config.offsetY : -config.offsetY } : {}),
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LuMultiSelectPanelRefFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LuMultiSelectPanelRefFactory }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuMultiSelectPanelRefFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuMultiSelectPanelRefFactory }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LuMultiSelectPanelRefFactory, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuMultiSelectPanelRefFactory, decorators: [{
             type: Injectable
         }] });
 
@@ -510,10 +549,26 @@ class LuMultiSelectInputComponent extends ALuSelectInputComponent {
         ...(ngDevMode ? [{ debugName: "intl" }] : /* istanbul ignore next */ []));
         this.valuesTpl = model(LuMultiSelectDefaultDisplayerComponent, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "valuesTpl" }] : /* istanbul ignore next */ []));
-        this.maxValuesShown = input(500, { ...(ngDevMode ? { debugName: "maxValuesShown" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-        this.keepSearchAfterSelection = input(false, { ...(ngDevMode ? { debugName: "keepSearchAfterSelection" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.maxValuesShown = input(500, { ...(ngDevMode ? { debugName: "maxValuesShown" } : /* istanbul ignore next */ {}), transform: luNumberAttribute });
+        this.keepSearchAfterSelection = input(false, { ...(ngDevMode ? { debugName: "keepSearchAfterSelection" } : /* istanbul ignore next */ {}), transform: luBooleanAttribute });
+        this.pluralRules = inject(LOCALE_PLURAL_RULES);
+        /**
+         * @deprecated use filterPillLabelPluralFn
+         */
         this.filterPillLabelPlural = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "filterPillLabelPlural" }] : /* istanbul ignore next */ []));
+        this.filterPillLabelPluralFn = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "filterPillLabelPluralFn" }] : /* istanbul ignore next */ []));
+        this.filterPillLabelPluralValue = computed(() => {
+            const label = this.filterPillLabelPluralFn();
+            const count = this.valueLength();
+            if (label) {
+                const result = label(count);
+                return typeof result === 'string' ? result : getIntlPluralLabel(this.pluralRules, result, count);
+            }
+            return `${count} ${this.filterPillLabelPlural()}`;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filterPillLabelPluralValue" }] : /* istanbul ignore next */ []));
         this.selectParent$ = new Subject();
         this.selectChildren$ = new Subject();
         this.hideCombobox = computed(() => (this.valueSignal()?.length ?? 0) > 1, /* @ts-ignore */
@@ -531,7 +586,12 @@ class LuMultiSelectInputComponent extends ALuSelectInputComponent {
         // eslint-disable-next-line @angular-eslint/prefer-signals
         this.useSingleOptionDisplayer = signal(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "useSingleOptionDisplayer" }] : /* istanbul ignore next */ []));
+        this.singleOptionForDisplay = computed(() => this.valueSignal()?.[0], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "singleOptionForDisplay" }] : /* istanbul ignore next */ []));
         this._value = [];
+        this.#listFormat = new Intl.ListFormat(inject(LOCALE_ID));
+        this.presentationSeparators = computed(() => listSeparators(this.#listFormat, this.valueSignal()?.length ?? 0), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "presentationSeparators" }] : /* istanbul ignore next */ []));
         this.panelRefFactory = inject(LuMultiSelectPanelRefFactory);
         /**
          * This is used to tell the displayer to focus on the input element
@@ -544,6 +604,7 @@ class LuMultiSelectInputComponent extends ALuSelectInputComponent {
     get filterPillClass() {
         return this.filterPillMode;
     }
+    #listFormat;
     get panelRef() {
         return this._panelRef;
     }
@@ -602,8 +663,8 @@ class LuMultiSelectInputComponent extends ALuSelectInputComponent {
         super.ngOnDestroy();
         this.focusInput$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LuMultiSelectInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: LuMultiSelectInputComponent, isStandalone: true, selector: "lu-multi-select", inputs: { intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null }, valuesTpl: { classPropertyName: "valuesTpl", publicName: "valuesTpl", isSignal: true, isRequired: false, transformFunction: null }, maxValuesShown: { classPropertyName: "maxValuesShown", publicName: "maxValuesShown", isSignal: true, isRequired: false, transformFunction: null }, keepSearchAfterSelection: { classPropertyName: "keepSearchAfterSelection", publicName: "keepSearchAfterSelection", isSignal: true, isRequired: false, transformFunction: null }, filterPillLabelPlural: { classPropertyName: "filterPillLabelPlural", publicName: "filterPillLabelPlural", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valuesTpl: "valuesTplChange" }, host: { listeners: { "keydown.control.enter": "selectParentOnly()", "keydown.shift.enter": "selectChildrenOnly()" }, properties: { "class.mod-filterPill": "filterPillClass" }, classAttribute: "multiSelect" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuMultiSelectInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: LuMultiSelectInputComponent, isStandalone: true, selector: "lu-multi-select", inputs: { intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null }, valuesTpl: { classPropertyName: "valuesTpl", publicName: "valuesTpl", isSignal: true, isRequired: false, transformFunction: null }, maxValuesShown: { classPropertyName: "maxValuesShown", publicName: "maxValuesShown", isSignal: true, isRequired: false, transformFunction: null }, keepSearchAfterSelection: { classPropertyName: "keepSearchAfterSelection", publicName: "keepSearchAfterSelection", isSignal: true, isRequired: false, transformFunction: null }, filterPillLabelPlural: { classPropertyName: "filterPillLabelPlural", publicName: "filterPillLabelPlural", isSignal: true, isRequired: false, transformFunction: null }, filterPillLabelPluralFn: { classPropertyName: "filterPillLabelPluralFn", publicName: "filterPillLabelPluralFn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valuesTpl: "valuesTplChange" }, host: { listeners: { "keydown.control.enter": "selectParentOnly()", "keydown.shift.enter": "selectChildrenOnly()" }, properties: { "class.mod-filterPill": "filterPillClass" }, classAttribute: "multiSelect" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => LuMultiSelectInputComponent),
@@ -619,9 +680,9 @@ class LuMultiSelectInputComponent extends ALuSelectInputComponent {
                 provide: FILTER_PILL_INPUT_COMPONENT,
                 useExisting: forwardRef(() => LuMultiSelectInputComponent),
             },
-        ], viewQueries: [{ propertyName: "filterPillPanelAnchorRef", first: true, predicate: ["filterPillPanelAnchor"], descendants: true, read: ViewContainerRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *luOptionOutlet=\"valuesTpl(); value: value || []\" />\n\n@if (!filterPillMode) {\n\t@if (hasValue() && clearable() && (disabled$ | async) === false) {\n\t\t<lu-clear class=\"multipleSelect-clear\" (onClear)=\"clearValue($event)\">{{ intl().clear }}</lu-clear>\n\t}\n\n\t<lu-icon icon=\"arrowChevronBottom\" class=\"multipleSelect-arrow\" />\n\t<lu-icon icon=\"searchMagnifyingGlass\" class=\"multipleSelect-searchIcon\" />\n}\n\n<ng-container #filterPillPanelAnchor />\n<ng-container *luFilterPillDisplayer>\n\t<div class=\"multipleSelect-displayer-filter\">\n\t\t@if (useSingleOptionDisplayer() && valueLength() === 1) {\n\t\t\t<div class=\"multipleSelect-pill-displayer-chip\">\n\t\t\t\t<ng-container *luOptionOutlet=\"displayerTpl(); value: value[0]\" />\n\t\t\t</div>\n\t\t}\n\t</div>\n</ng-container>\n<ng-container *luFilterPillLabel=\"let label = label; let colon = colon\">\n\t@let minCount = useSingleOptionDisplayer() ? 1 : 0;\n\t@if (valueLength() > minCount) {\n\t\t<span class=\"multipleSelect-pill-displayer-label\">{{ valueLength() }}&nbsp;{{ filterPillLabelPlural() }}</span>\n\t} @else {\n\t\t{{ label }}\n\t\t@if (valueLength() === 1) {\n\t\t\t{{ colon }}\n\t\t}\n\t}\n</ng-container>\n@if (!ignorePresentation()) {\n\t<ng-container *luPresentationDisplayDefault>\n\t\t@for (v of value; track $index) {\n\t\t\t@if ($last) {\n\t\t\t\t<ng-container *ngTemplateOutlet=\"noComma; context: { $implicit: v }\" />\n\t\t\t} @else {\n\t\t\t\t<ng-container *ngTemplateOutlet=\"comma; context: { $implicit: v }\" />\n\t\t\t}\n\t\t} @empty {\n\t\t\t<span aria-hidden=\"true\" data-content-before=\"\u2013\"></span>\n\t\t}\n\t</ng-container>\n}\n\n<ng-template #comma let-value><ng-container *luOptionOutlet=\"displayerTpl(); value: value\" />, </ng-template>\n\n<ng-template #noComma let-value>\n\t<ng-container *luOptionOutlet=\"displayerTpl(); value: value\" />\n</ng-template>\n", styles: ["@layer components{.multiSelect{--components-multiSelect-font: var(--pr-t-font-body-M);--components-multiSelect-padding: var(--pr-t-spacings-100);--components-multiSelect-gap: var(--pr-t-spacings-100);--components-multiSelect-background: var(--pr-t-color-input-background);--components-multiSelect-border-color: var(--pr-t-color-input-border);--components-multiSelect-placeholder: var(--pr-t-color-input-text-placeholder);--components-multiSelect-arrow-color: var(--pr-t-color-input-icon);--components-multiSelect-displayer-suffix-display: contents;display:flex;box-shadow:0 0 0 1px var(--components-multiSelect-border-color);background-color:var(--components-multiSelect-background);border-radius:var(--pr-t-border-radius-input);padding:var(--components-multiSelect-padding);align-items:flex-end;gap:var(--components-multiSelect-gap);cursor:pointer}.multiSelect:hover{--components-multiSelect-border-color: var(--pr-t-color-input-border-hover)}.multiSelect:has(.multipleSelect-displayer-search:focus-visible){outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.multipleSelect-displayer{display:flex;gap:var(--pr-t-spacings-50);flex-wrap:wrap;flex:1}.multipleSelect-displayer-suffix{display:var(--components-multiSelect-displayer-suffix-display);gap:var(--pr-t-spacings-50);flex:1;order:1}.multipleSelect-displayer-chip.chip{min-inline-size:0;--components-chip-backgroundColor: var(--palettes-100, var(--palettes-product-100));--components-chip-kill-disk-color: var(--palettes-800, var(--palettes-product-800));--components-chip-color: var(--palettes-800, var(--palettes-product-800))}.multipleSelect-displayer-chip-value{max-inline-size:8.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.multipleSelect-displayer-search{display:block;min-inline-size:2rem;inline-size:auto;flex:1;order:1;border:0;padding:0;outline:none;color:var(--pr-t-color-input-text);font:var(--components-multiSelect-font);background-color:transparent;cursor:pointer}.multipleSelect-displayer-search::placeholder{color:var(--components-multiSelect-placeholder)}.multipleSelect-displayer-label{font:var(--components-multiSelect-font)}.multipleSelect-clear{margin-block-end:var(--pr-t-spacings-50)}.multipleSelect-arrow,.multipleSelect-searchIcon{--icon-size: 1.5rem;color:var(--components-multiSelect-arrow-color);transition-property:transform;transition-duration:var(--commons-animations-durations-standard)}.multipleSelect-searchIcon{display:none}.multipleSelect-pill-displayer-chip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.multipleSelect-pill-displayer-label{font-weight:var(--pr-t-font-fontWeight-semibold)}.multiSelect-field-icon{order:1}}@layer mods{.multiSelect.mod-S{--components-multiSelect-font: var(--pr-t-font-body-S);--components-multiSelect-padding: var(--pr-t-spacings-75);--components-multiSelect-gap: var(--pr-t-spacings-75)}.multiSelect.mod-S .multipleSelect-arrow,.multiSelect.mod-S .multipleSelect-searchIcon{--icon-size: 1.25rem}.multiSelect.mod-S .multipleSelect-clear.clear,.multiSelect.mod-S .multipleSelect-clear:not(.clear){--components-clear-size: .75rem;--icon-size: .75rem}.multiSelect.mod-S .multipleSelect-displayer-chip.chip,.multiSelect.mod-S .multipleSelect-displayer-chip:not(.chip){--components-chip-font: var(--pr-t-font-body-XS);--components-chip-borderRadius: var(--pr-t-border-radius-small)}.multiSelect.mod-S .multipleSelect-displayer-chip.chip .lucca-icon,.multiSelect.mod-S .multipleSelect-displayer-chip:not(.chip) .lucca-icon{--icon-size: .75rem}.multiSelect.mod-filterPill{--components-multiSelect-displayer-suffix-display: flex;flex-direction:column;align-items:stretch;box-shadow:none;padding:0;gap:0;inline-size:26.5rem;max-inline-size:calc(100vw - 2.5rem)}.multiSelect.mod-filterPill .multipleSelect-displayer{box-shadow:0 0 0 1px var(--components-multiSelect-border-color);border-radius:var(--pr-t-border-radius-input);padding:var(--components-multiSelect-padding);z-index:1;position:relative;max-block-size:min(14rem,80vh);overflow:auto}.multiSelect.mod-filterPill .lu-picker-content{animation:none;box-shadow:none;border-radius:0;background-color:transparent;padding:var(--pr-t-spacings-50);margin:var(--pr-t-spacings-75) calc(var(--pr-t-spacings-100) * -1) calc(var(--pr-t-spacings-100) * -1)}.multiSelect.mod-filterPill .lu-picker-content lu-simple-select-default-option.pr-u-ellipsis{white-space:normal!important}.multiSelect.mod-filterPill:has(.multipleSelect-displayer-search:focus-visible){outline:none}.multiSelect.mod-filterPill .multipleSelect-displayer:has(.multipleSelect-displayer-search:focus-visible){outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.multiSelect.mod-filterPill.is-selected .multipleSelect-displayer-search[readonly]{border:0;clip-path:rect(1px 1px 1px 1px);margin:-1px;overflow:hidden;padding:0;position:absolute;block-size:1px;inline-size:1px;white-space:nowrap;contain:paint}.multiSelect:not(.mod-filterPill).is-selected .multipleSelect-displayer-search:not(:focus),.multiSelect:not(.mod-filterPill).is-selected .multipleSelect-displayer-search[readonly]{border:0;clip-path:rect(1px 1px 1px 1px);margin:-1px;overflow:hidden;padding:0;position:absolute;block-size:1px;inline-size:1px;white-space:nowrap;contain:paint}.multiSelect:has(.multipleSelect-displayer-search:focus-visible){outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.multiSelect:has(.multipleSelect-displayer-search[aria-invalid=true]){--components-multiSelect-border-color: var(--pr-t-color-input-border-critical);--components-multiSelect-background: var(--pr-t-color-input-background-critical);--components-multiSelect-placeholder: var(--pr-t-color-input-text-placeholder-critical)}.multiSelect:has(.multipleSelect-displayer-search:disabled){--components-multiSelect-background: var(--commons-disabled-background);--components-multiSelect-placeholder: var(--commons-disabled-placeholder);--components-multiSelect-arrow-color: var(--pr-t-color-input-icon-disabled);pointer-events:none}.multiSelect:has(.multipleSelect-displayer-search:disabled) .multipleSelect-displayer-chip{--components-chip-backgroundColor: var(--palettes-neutral-200);--components-chip-color: var(--pr-t-color-text-subtle)}.multiSelect:has(.multipleSelect-displayer-search:disabled) .multipleSelect-displayer-chip .chip-kill{display:none}.multiSelect:has([aria-expanded=true]) .multipleSelect-arrow{transform:rotate(180deg)}.multiSelect:not(.mod-noClueIcon):has(.multipleSelect-displayer-search:focus-visible):not(:has(.multipleSelect-displayer-search:read-only)) .multipleSelect-arrow,.multiSelect:not(.mod-noClueIcon):has([aria-expanded=true]):not(:has(.multipleSelect-displayer-search:read-only)) .multipleSelect-arrow{display:none}.multiSelect:not(.mod-noClueIcon):has(.multipleSelect-displayer-search:focus-visible):not(:has(.multipleSelect-displayer-search:read-only)) .multipleSelect-searchIcon,.multiSelect:not(.mod-noClueIcon):has([aria-expanded=true]):not(:has(.multipleSelect-displayer-search:read-only)) .multipleSelect-searchIcon{display:inline-flex;transform:none}}@layer components{.multipleSelect-displayer-filter{min-inline-size:0;display:flex;gap:.5ch}.multipleSelect-displayer-filter:empty{display:none}}@layer components{.clear{--components-clear-display: grid;--components-clear-size: 1rem;--components-clear-background: var(--palettes-800, var(--palettes-neutral-800));--components-clear-cross-color: var(--palettes-0, var(--palettes-neutral-0));--components-clear-background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' fill='none'%3E%3Cpath d='M5.80473 4.86192C5.54438 4.60157 5.12227 4.60157 4.86192 4.86192C4.60157 5.12227 4.60157 5.54438 4.86192 5.80473L7.05718 7.99999L4.86192 10.1953C4.60157 10.4556 4.60157 10.8777 4.86192 11.1381C5.12227 11.3984 5.54438 11.3984 5.80473 11.1381L7.99999 8.9428L10.1953 11.1381C10.4556 11.3984 10.8777 11.3984 11.1381 11.1381C11.3984 10.8777 11.3984 10.4556 11.1381 10.1953L8.9428 7.99999L11.1381 5.80473C11.3984 5.54438 11.3984 5.12227 11.1381 4.86192C10.8777 4.60157 10.4556 4.60157 10.1953 4.86192L7.99999 7.05718L5.80473 4.86192Z' fill='currentColor'/%3E%3C/svg%3E\");padding:0;border:0;inline-size:100%;background-color:transparent;color:inherit;text-align:start;display:block;font:inherit;cursor:pointer;display:var(--components-clear-display);grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:\"main\";align-items:normal;flex-shrink:0;inline-size:var(--components-clear-size);block-size:var(--components-clear-size);border-radius:var(--pr-t-border-radius-full)}.clear:before,.clear:after{content:\"\";grid-area:main}.clear:before{border-radius:var(--pr-t-border-radius-full);background-color:var(--components-clear-background)}.clear:after{-webkit-mask-image:var(--components-clear-background-image);mask-image:var(--components-clear-background-image);-webkit-mask-size:var(--components-clear-size);mask-size:var(--components-clear-size);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:var(--components-clear-cross-color)}.clear:hover{--components-clear-cross-color: var(--palettes-0, var(--palettes-neutral-0));--components-clear-background: var(--palettes-700, var(--palettes-neutral-700))}.clear:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px;border-radius:50%}.clear:active{--components-clear-background: var(--palettes-900, var(--palettes-neutral-900))}.clear .lucca-icon{display:none}}@layer mods{.clear.mod-S{--components-clear-size: .75rem;--icon-size: .75rem}.clear.mod-inverted{--components-clear-cross-color: var(--palettes-800, var(--palettes-neutral-800));--components-clear-background: var(--palettes-0, var(--palettes-neutral-0))}.clear.mod-inverted:hover{--components-clear-background: var(--palettes-50, var(--palettes-neutral-50))}.clear.mod-inverted:active{--components-clear-background: var(--palettes-100, var(--palettes-neutral-100))}.clear[disabled]{cursor:default;--components-clear-cross-color: var(--palettes-neutral-500)}.clear[disabled],.clear[disabled]:hover,.clear[disabled]:active{--components-clear-background: var(--palettes-neutral-300)}.clear[hidden],.filterPill[disabled] .clear,.filterPill:not(.is-filled) .clear,.textfield-input[disabled] .clear,.textfield-input:not(.is-filled) .clear{--components-clear-display: none}.multiSelect.is-selected:has(.multipleSelect-clear) .clear{--components-clear-display: grid}}@layer components{.chip{--components-chip-font: var(--pr-t-font-body-S);--components-chip-backgroundColor: var(--palettes-100, var(--palettes-neutral-100));--components-chip-color: var(--palettes-800, var(--pr-t-color-text));--components-chip-borderRadius: var(--pr-t-border-radius-default);--components-chip-kill-size: .75rem;--components-chip-kill-disk-color: var(--palettes-800, var(--palettes-neutral-800));--components-chip-kill-cross-color: var(--palettes-text, var(--palettes-neutral-text));--components-chip-kill-background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' fill='none'%3E%3Cpath d='M5.80473 4.86192C5.54438 4.60157 5.12227 4.60157 4.86192 4.86192C4.60157 5.12227 4.60157 5.54438 4.86192 5.80473L7.05718 7.99999L4.86192 10.1953C4.60157 10.4556 4.60157 10.8777 4.86192 11.1381C5.12227 11.3984 5.54438 11.3984 5.80473 11.1381L7.99999 8.9428L10.1953 11.1381C10.4556 11.3984 10.8777 11.3984 11.1381 11.1381C11.3984 10.8777 11.3984 10.4556 11.1381 10.1953L8.9428 7.99999L11.1381 5.80473C11.3984 5.54438 11.3984 5.12227 11.1381 4.86192C10.8777 4.60157 10.4556 4.60157 10.1953 4.86192L7.99999 7.05718L5.80473 4.86192Z' fill='currentColor'/%3E%3C/svg%3E\");--components-chip-fontSize: var(--pr-t-font-body-S-fontSize);--components-chip-lineHeight: var(--pr-t-font-body-S-lineHeight);background-color:var(--components-chip-backgroundColor);border:none;border-radius:var(--components-chip-borderRadius);color:var(--components-chip-color);display:inline-flex;align-items:center;position:relative;vertical-align:middle;padding-block:calc(var(--pr-t-spacings-50) / 2);padding-inline:var(--pr-t-spacings-100);font:var(--components-chip-font);max-inline-size:100%}.chip .lucca-icon{--icon-size: 1rem;margin-inline-end:var(--pr-t-spacings-50)}.chip-content{outline:none}.chip-kill{padding:0;border:0;inline-size:100%;background-color:transparent;color:inherit;text-align:start;display:block;font:inherit;display:grid;grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:\"main\";place-items:center;inline-size:var(--pr-t-spacings-300);block-size:var(--pr-t-spacings-300);margin:calc(var(--pr-t-spacings-75) * -1);margin-inline-start:var(--pr-t-spacings-25);flex-shrink:0;cursor:pointer}.chip-kill:before,.chip-kill:after{content:\"\";grid-area:main;inline-size:var(--components-chip-kill-size);block-size:var(--components-chip-kill-size)}.chip-kill:before{border-radius:var(--pr-t-border-radius-full);background-color:var(--components-chip-kill-disk-color)}.chip-kill:after{-webkit-mask-image:var(--components-chip-kill-background-image);mask-image:var(--components-chip-kill-background-image);-webkit-mask-size:var(--components-chip-kill-size);mask-size:var(--components-chip-kill-size);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:var(--components-chip-kill-cross-color)}.chip-kill:hover{--components-chip-kill-disk-color: var(--palettes-700, var(--palettes-neutral-700))}.chip-kill:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:-4px;border-radius:var(--pr-t-border-radius-full)}.chip-kill:active{--components-chip-kill-disk-color: var(--palettes-900, var(--palettes-neutral-900))}}@layer mods{.chip.mod-S{--components-chip-font: var(--pr-t-font-body-XS);--components-chip-borderRadius: var(--pr-t-border-radius-small)}.chip.mod-S .lucca-icon{--icon-size: .75rem}.chip.mod-unkillable .chip-kill{display:none}.chip.mod-clickable{cursor:pointer;text-decoration:none}.chip.is-disabled{--components-chip-backgroundColor: var(--palettes-neutral-200);--components-chip-color: var(--pr-t-color-text-subtle)}.chip.is-disabled .chip-kill{display:none}.chip:has(.chip-content:focus-visible){outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.chip.mod-product{--components-chip-backgroundColor: var(--palettes-100, var(--palettes-product-100));--components-chip-kill-disk-color: var(--palettes-800, var(--palettes-product-800));--components-chip-color: var(--palettes-800, var(--palettes-product-800))}}\n"], dependencies: [{ kind: "ngmodule", type: LuTooltipModule }, { kind: "directive", type: _LuOptionOutletDirective, selector: "[luOptionOutlet]", inputs: ["luOptionOutlet", "luOptionOutletValue", "luOptionShowNull"] }, { kind: "directive", type: FilterPillDisplayerDirective, selector: "[luFilterPillDisplayer]" }, { kind: "directive", type: FilterPillLabelDirective, selector: "[luFilterPillLabel]" }, { kind: "component", type: ClearComponent, selector: "lu-clear", inputs: ["intl", "size", "disabled", "palette", "inverted"], outputs: ["onClear"], exportAs: ["luClearer"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: _PresentationDisplayDefaultDirective, selector: "[luPresentationDisplayDefault]" }, { kind: "component", type: IconComponent, selector: "lu-icon, pr-icon", inputs: ["icon", "alt", "size", "color", "AI"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "filterPillPanelAnchorRef", first: true, predicate: ["filterPillPanelAnchor"], descendants: true, read: ViewContainerRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *luOptionOutlet=\"valuesTpl(); value: value || []\" />\n\n@if (!filterPillMode) {\n\t@if (hasValue() && clearable() && (disabled$ | async) === false) {\n\t\t<lu-clear class=\"multipleSelect-clear\" (onClear)=\"clearValue($event)\">{{ intl().clear }}</lu-clear>\n\t}\n\n\t<lu-icon icon=\"arrowChevronBottom\" class=\"multipleSelect-arrow\" />\n\t<lu-icon icon=\"searchMagnifyingGlass\" class=\"multipleSelect-searchIcon\" />\n}\n\n<ng-container #filterPillPanelAnchor />\n<ng-container *luFilterPillDisplayer>\n\t<div class=\"multipleSelect-displayer-filter\">\n\t\t@if (useSingleOptionDisplayer() && valueLength() === 1 && singleOptionForDisplay() !== undefined) {\n\t\t\t<div class=\"multipleSelect-pill-displayer-chip\">\n\t\t\t\t<ng-container *luOptionOutlet=\"displayerTpl(); value: singleOptionForDisplay()\" />\n\t\t\t</div>\n\t\t}\n\t</div>\n</ng-container>\n<ng-container *luFilterPillLabel=\"let label = label; let colon = colon\">\n\t@let minCount = useSingleOptionDisplayer() ? 1 : 0;\n\t@if (valueLength() > minCount) {\n\t\t<span class=\"multipleSelect-pill-displayer-label\">{{ filterPillLabelPluralValue() }}</span>\n\t} @else {\n\t\t{{ label }}{{ valueLength() === 1 ? colon : \"\" }}\n\t}\n</ng-container>\n@if (!ignorePresentation()) {\n\t<ng-container *luPresentationDisplayDefault>\n\t\t@for (v of value; track $index) {\n\t\t\t<ng-container *luOptionOutlet=\"displayerTpl(); value: v\" />\n\n\t\t\t@let separator = presentationSeparators()[$index];\n\n\t\t\t@if (separator) {\n\t\t\t\t<ng-container>{{ separator }}</ng-container>\n\t\t\t}\n\t\t} @empty {\n\t\t\t<span aria-hidden=\"true\" data-content-before=\"\u2013\"></span>\n\t\t}\n\t</ng-container>\n}\n", styles: ["@layer components{.multiSelect{--components-multiSelect-font: var(--pr-t-font-body-M);--components-multiSelect-padding: var(--pr-t-spacings-100);--components-multiSelect-gap: var(--pr-t-spacings-100);--components-multiSelect-background: var(--pr-t-color-input-background);--components-multiSelect-border-color: var(--pr-t-color-input-border);--components-multiSelect-placeholder: var(--pr-t-color-input-text-placeholder);--components-multiSelect-arrow-color: var(--pr-t-color-input-icon);--components-multiSelect-displayer-suffix-display: contents;display:flex;box-shadow:0 0 0 1px var(--components-multiSelect-border-color);background-color:var(--components-multiSelect-background);border-radius:var(--pr-t-border-radius-input);padding:var(--components-multiSelect-padding);align-items:flex-end;gap:var(--components-multiSelect-gap);cursor:pointer}.multiSelect:hover{--components-multiSelect-border-color: var(--pr-t-color-input-border-hover)}.multiSelect:has(.multipleSelect-displayer-search:focus-visible){outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.multipleSelect-displayer{display:flex;gap:var(--pr-t-spacings-50);flex-wrap:wrap;flex:1}.multipleSelect-displayer-suffix{display:var(--components-multiSelect-displayer-suffix-display);gap:var(--pr-t-spacings-50);flex:1;order:1}.multipleSelect-displayer-chip.chip{min-inline-size:0;--components-chip-backgroundColor: var(--palettes-100, var(--palettes-product-100));--components-chip-kill-disk-color: var(--palettes-800, var(--palettes-product-800));--components-chip-color: var(--palettes-800, var(--palettes-product-800))}.multipleSelect-displayer-chip-value{max-inline-size:8.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.multipleSelect-displayer-search{display:block;min-inline-size:2rem;inline-size:auto;flex:1;order:1;border:0;padding:0;outline:none;color:var(--pr-t-color-input-text);font:var(--components-multiSelect-font);background-color:transparent;cursor:pointer}.multipleSelect-displayer-search::placeholder{color:var(--components-multiSelect-placeholder)}.multipleSelect-displayer-label{font:var(--components-multiSelect-font)}.multipleSelect-clear{margin-block-end:var(--pr-t-spacings-50)}.multipleSelect-arrow,.multipleSelect-searchIcon{--icon-size: 1.5rem;color:var(--components-multiSelect-arrow-color);transition-property:transform;transition-duration:var(--commons-animations-durations-standard)}.multipleSelect-searchIcon{display:none}.multipleSelect-pill-displayer-chip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.multipleSelect-pill-displayer-label{font-weight:var(--pr-t-font-fontWeight-semibold)}.multiSelect-field-icon{order:1}}@layer mods{.multiSelect.mod-S{--components-multiSelect-font: var(--pr-t-font-body-S);--components-multiSelect-padding: var(--pr-t-spacings-75);--components-multiSelect-gap: var(--pr-t-spacings-75)}.multiSelect.mod-S .multipleSelect-arrow,.multiSelect.mod-S .multipleSelect-searchIcon{--icon-size: 1.25rem}.multiSelect.mod-S .multipleSelect-clear.clear,.multiSelect.mod-S .multipleSelect-clear:not(.clear){--components-clear-size: .75rem;--icon-size: .75rem}.multiSelect.mod-S .multipleSelect-displayer-chip.chip,.multiSelect.mod-S .multipleSelect-displayer-chip:not(.chip){--components-chip-font: var(--pr-t-font-body-XS);--components-chip-borderRadius: var(--pr-t-border-radius-small)}.multiSelect.mod-S .multipleSelect-displayer-chip.chip .lucca-icon,.multiSelect.mod-S .multipleSelect-displayer-chip:not(.chip) .lucca-icon{--icon-size: .75rem}.multiSelect.mod-filterPill{--components-multiSelect-displayer-suffix-display: flex;flex-direction:column;align-items:stretch;box-shadow:none;padding:0;gap:0;inline-size:26.5rem;max-inline-size:calc(100vi - 2.5rem)}.multiSelect.mod-filterPill .multipleSelect-displayer{box-shadow:0 0 0 1px var(--components-multiSelect-border-color);border-radius:var(--pr-t-border-radius-input);padding:var(--components-multiSelect-padding);z-index:1;position:relative;max-block-size:min(14rem,80vb);overflow:auto}.multiSelect.mod-filterPill .lu-picker-content{animation:none;box-shadow:none;border-radius:0;background-color:transparent;padding:var(--pr-t-spacings-50);margin:var(--pr-t-spacings-75) calc(var(--pr-t-spacings-100) * -1) calc(var(--pr-t-spacings-100) * -1)}.multiSelect.mod-filterPill .lu-picker-content lu-simple-select-default-option.pr-u-ellipsis{white-space:normal!important}.multiSelect.mod-filterPill:has(.multipleSelect-displayer-search:focus-visible){outline:none}.multiSelect.mod-filterPill .multipleSelect-displayer:has(.multipleSelect-displayer-search:focus-visible){outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.multiSelect.mod-filterPill.is-selected .multipleSelect-displayer-search[readonly]{border:0;clip-path:rect(1px 1px 1px 1px);margin:-1px;overflow:hidden;padding:0;position:absolute;block-size:1px;inline-size:1px;white-space:nowrap;contain:paint}.multiSelect:not(.mod-filterPill).is-selected .multipleSelect-displayer-search:not(:focus),.multiSelect:not(.mod-filterPill).is-selected .multipleSelect-displayer-search[readonly]{border:0;clip-path:rect(1px 1px 1px 1px);margin:-1px;overflow:hidden;padding:0;position:absolute;block-size:1px;inline-size:1px;white-space:nowrap;contain:paint}.multiSelect:has(.multipleSelect-displayer-search:focus-visible){outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.multiSelect:has(.multipleSelect-displayer-search[aria-invalid=true]){--components-multiSelect-border-color: var(--pr-t-color-input-border-critical);--components-multiSelect-background: var(--pr-t-color-input-background-critical);--components-multiSelect-placeholder: var(--pr-t-color-input-text-placeholder-critical)}.multiSelect:has(.multipleSelect-displayer-search:disabled){--components-multiSelect-background: var(--pr-t-color-input-background-disabled);--components-multiSelect-placeholder: var(--commons-disabled-placeholder);--components-multiSelect-arrow-color: var(--pr-t-color-input-icon-disabled);pointer-events:none}.multiSelect:has(.multipleSelect-displayer-search:disabled) .multipleSelect-displayer-chip{--components-chip-backgroundColor: var(--palettes-neutral-200);--components-chip-color: var(--pr-t-color-text-subtle)}.multiSelect:has(.multipleSelect-displayer-search:disabled) .multipleSelect-displayer-chip .chip-kill{display:none}.multiSelect:has([aria-expanded=true]) .multipleSelect-arrow{transform:rotate(180deg)}.multiSelect:not(.mod-noClueIcon):has(.multipleSelect-displayer-search:focus-visible):not(:has(.multipleSelect-displayer-search:read-only)) .multipleSelect-arrow,.multiSelect:not(.mod-noClueIcon):has([aria-expanded=true]):not(:has(.multipleSelect-displayer-search:read-only)) .multipleSelect-arrow{display:none}.multiSelect:not(.mod-noClueIcon):has(.multipleSelect-displayer-search:focus-visible):not(:has(.multipleSelect-displayer-search:read-only)) .multipleSelect-searchIcon,.multiSelect:not(.mod-noClueIcon):has([aria-expanded=true]):not(:has(.multipleSelect-displayer-search:read-only)) .multipleSelect-searchIcon{display:inline-flex;transform:none}}@layer components{.multipleSelect-displayer-filter{min-inline-size:0;display:flex;gap:.5ch}.multipleSelect-displayer-filter:empty{display:none}}@layer components{.clear{--components-clear-display: grid;--components-clear-size: 1rem;--components-clear-background: var(--palettes-800, var(--palettes-neutral-800));--components-clear-cross-color: var(--palettes-0, var(--palettes-neutral-0));--components-clear-background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' fill='none'%3E%3Cpath d='M5.80473 4.86192C5.54438 4.60157 5.12227 4.60157 4.86192 4.86192C4.60157 5.12227 4.60157 5.54438 4.86192 5.80473L7.05718 7.99999L4.86192 10.1953C4.60157 10.4556 4.60157 10.8777 4.86192 11.1381C5.12227 11.3984 5.54438 11.3984 5.80473 11.1381L7.99999 8.9428L10.1953 11.1381C10.4556 11.3984 10.8777 11.3984 11.1381 11.1381C11.3984 10.8777 11.3984 10.4556 11.1381 10.1953L8.9428 7.99999L11.1381 5.80473C11.3984 5.54438 11.3984 5.12227 11.1381 4.86192C10.8777 4.60157 10.4556 4.60157 10.1953 4.86192L7.99999 7.05718L5.80473 4.86192Z' fill='currentColor'/%3E%3C/svg%3E\");padding:0;border:0;inline-size:100%;background-color:transparent;color:inherit;text-align:start;display:block;font:inherit;cursor:pointer;display:var(--components-clear-display);grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:\"main\";align-items:normal;flex-shrink:0;inline-size:var(--components-clear-size);block-size:var(--components-clear-size);border-radius:var(--pr-t-border-radius-full)}.clear:before,.clear:after{content:\"\";grid-area:main}.clear:before{border-radius:var(--pr-t-border-radius-full);background-color:var(--components-clear-background)}.clear:after{-webkit-mask-image:var(--components-clear-background-image);mask-image:var(--components-clear-background-image);-webkit-mask-size:var(--components-clear-size);mask-size:var(--components-clear-size);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:var(--components-clear-cross-color)}.clear:hover{--components-clear-cross-color: var(--palettes-0, var(--palettes-neutral-0));--components-clear-background: var(--palettes-700, var(--palettes-neutral-700))}.clear:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px;border-radius:50%}.clear:active{--components-clear-background: var(--palettes-900, var(--palettes-neutral-900))}.clear .lucca-icon{display:none}}@layer mods{.clear.mod-S{--components-clear-size: .75rem;--icon-size: .75rem}.clear.mod-inverted{--components-clear-cross-color: var(--palettes-800, var(--palettes-neutral-800));--components-clear-background: var(--palettes-0, var(--palettes-neutral-0))}.clear.mod-inverted:hover{--components-clear-background: var(--palettes-50, var(--palettes-neutral-50))}.clear.mod-inverted:active{--components-clear-background: var(--palettes-100, var(--palettes-neutral-100))}.clear[disabled]{cursor:default;--components-clear-cross-color: var(--palettes-neutral-500)}.clear[disabled],.clear[disabled]:hover,.clear[disabled]:active{--components-clear-background: var(--palettes-neutral-300)}.clear[hidden],.filterPill[disabled] .clear,.filterPill:not(.is-filled) .clear,.textfield-input[disabled] .clear,.textfield-input:not(.is-filled) .clear{--components-clear-display: none}.multiSelect.is-selected:has(.multipleSelect-clear) .clear{--components-clear-display: grid}}@layer components{.chip{--components-chip-font: var(--pr-t-font-body-S);--components-chip-backgroundColor: var(--palettes-100, var(--palettes-neutral-100));--components-chip-color: var(--palettes-800, var(--pr-t-color-text));--components-chip-borderRadius: var(--pr-t-border-radius-default);--components-chip-kill-size: .75rem;--components-chip-kill-disk-color: var(--palettes-800, var(--palettes-neutral-800));--components-chip-kill-cross-color: var(--palettes-text, var(--palettes-neutral-text));--components-chip-kill-background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' fill='none'%3E%3Cpath d='M5.80473 4.86192C5.54438 4.60157 5.12227 4.60157 4.86192 4.86192C4.60157 5.12227 4.60157 5.54438 4.86192 5.80473L7.05718 7.99999L4.86192 10.1953C4.60157 10.4556 4.60157 10.8777 4.86192 11.1381C5.12227 11.3984 5.54438 11.3984 5.80473 11.1381L7.99999 8.9428L10.1953 11.1381C10.4556 11.3984 10.8777 11.3984 11.1381 11.1381C11.3984 10.8777 11.3984 10.4556 11.1381 10.1953L8.9428 7.99999L11.1381 5.80473C11.3984 5.54438 11.3984 5.12227 11.1381 4.86192C10.8777 4.60157 10.4556 4.60157 10.1953 4.86192L7.99999 7.05718L5.80473 4.86192Z' fill='currentColor'/%3E%3C/svg%3E\");--components-chip-fontSize: var(--pr-t-font-body-S-fontSize);--components-chip-lineHeight: var(--pr-t-font-body-S-lineHeight);background-color:var(--components-chip-backgroundColor);border:none;border-radius:var(--components-chip-borderRadius);color:var(--components-chip-color);display:inline-flex;align-items:center;position:relative;vertical-align:middle;padding-block:calc(var(--pr-t-spacings-50) / 2);padding-inline:var(--pr-t-spacings-100);font:var(--components-chip-font);max-inline-size:100%}.chip .lucca-icon{--icon-size: 1rem;margin-inline-end:var(--pr-t-spacings-50)}.chip-content{outline:none}.chip-kill{padding:0;border:0;inline-size:100%;background-color:transparent;color:inherit;text-align:start;display:block;font:inherit;display:grid;grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:\"main\";place-items:center;inline-size:var(--pr-t-spacings-300);block-size:var(--pr-t-spacings-300);margin:calc(var(--pr-t-spacings-75) * -1);margin-inline-start:var(--pr-t-spacings-25);flex-shrink:0;cursor:pointer}.chip-kill:before,.chip-kill:after{content:\"\";grid-area:main;inline-size:var(--components-chip-kill-size);block-size:var(--components-chip-kill-size)}.chip-kill:before{border-radius:var(--pr-t-border-radius-full);background-color:var(--components-chip-kill-disk-color)}.chip-kill:after{-webkit-mask-image:var(--components-chip-kill-background-image);mask-image:var(--components-chip-kill-background-image);-webkit-mask-size:var(--components-chip-kill-size);mask-size:var(--components-chip-kill-size);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:var(--components-chip-kill-cross-color)}.chip-kill:hover{--components-chip-kill-disk-color: var(--palettes-700, var(--palettes-neutral-700))}.chip-kill:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:-4px;border-radius:var(--pr-t-border-radius-full)}.chip-kill:active{--components-chip-kill-disk-color: var(--palettes-900, var(--palettes-neutral-900))}}@layer mods{.chip.mod-S{--components-chip-font: var(--pr-t-font-body-XS);--components-chip-borderRadius: var(--pr-t-border-radius-small)}.chip.mod-S .lucca-icon{--icon-size: .75rem}.chip.mod-unkillable .chip-kill{display:none}.chip.mod-clickable{cursor:pointer;text-decoration:none}.chip.is-disabled{--components-chip-backgroundColor: var(--palettes-neutral-200);--components-chip-color: var(--pr-t-color-text-subtle)}.chip.is-disabled .chip-kill{display:none}.chip:has(.chip-content:focus-visible){outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.chip.mod-product{--components-chip-backgroundColor: var(--palettes-100, var(--palettes-product-100));--components-chip-kill-disk-color: var(--palettes-800, var(--palettes-product-800));--components-chip-color: var(--palettes-800, var(--palettes-product-800))}}\n"], dependencies: [{ kind: "ngmodule", type: LuTooltipModule }, { kind: "directive", type: _LuOptionOutletDirective, selector: "[luOptionOutlet]", inputs: ["luOptionOutlet", "luOptionOutletValue", "luOptionShowNull"] }, { kind: "directive", type: FilterPillDisplayerDirective, selector: "[luFilterPillDisplayer]" }, { kind: "directive", type: FilterPillLabelDirective, selector: "[luFilterPillLabel]" }, { kind: "component", type: ClearComponent, selector: "lu-clear", inputs: ["intl", "size", "disabled", "palette", "inverted"], outputs: ["onClear"], exportAs: ["luClearer"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: _PresentationDisplayDefaultDirective, selector: "[luPresentationDisplayDefault]" }, { kind: "component", type: IconComponent, selector: "lu-icon, pr-icon", inputs: ["icon", "alt", "size", "color", "AI"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LuMultiSelectInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuMultiSelectInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lu-multi-select', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         AsyncPipe,
@@ -630,7 +691,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                         FilterPillDisplayerDirective,
                         FilterPillLabelDirective,
                         ClearComponent,
-                        PresentationDisplayDirective,
                         CommonModule,
                         _PresentationDisplayDefaultDirective,
                         IconComponent,
@@ -655,8 +715,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                         '[class.mod-filterPill]': 'filterPillClass',
                         '(keydown.control.enter)': 'selectParentOnly()',
                         '(keydown.shift.enter)': 'selectChildrenOnly()',
-                    }, encapsulation: ViewEncapsulation.None, template: "<ng-container *luOptionOutlet=\"valuesTpl(); value: value || []\" />\n\n@if (!filterPillMode) {\n\t@if (hasValue() && clearable() && (disabled$ | async) === false) {\n\t\t<lu-clear class=\"multipleSelect-clear\" (onClear)=\"clearValue($event)\">{{ intl().clear }}</lu-clear>\n\t}\n\n\t<lu-icon icon=\"arrowChevronBottom\" class=\"multipleSelect-arrow\" />\n\t<lu-icon icon=\"searchMagnifyingGlass\" class=\"multipleSelect-searchIcon\" />\n}\n\n<ng-container #filterPillPanelAnchor />\n<ng-container *luFilterPillDisplayer>\n\t<div class=\"multipleSelect-displayer-filter\">\n\t\t@if (useSingleOptionDisplayer() && valueLength() === 1) {\n\t\t\t<div class=\"multipleSelect-pill-displayer-chip\">\n\t\t\t\t<ng-container *luOptionOutlet=\"displayerTpl(); value: value[0]\" />\n\t\t\t</div>\n\t\t}\n\t</div>\n</ng-container>\n<ng-container *luFilterPillLabel=\"let label = label; let colon = colon\">\n\t@let minCount = useSingleOptionDisplayer() ? 1 : 0;\n\t@if (valueLength() > minCount) {\n\t\t<span class=\"multipleSelect-pill-displayer-label\">{{ valueLength() }}&nbsp;{{ filterPillLabelPlural() }}</span>\n\t} @else {\n\t\t{{ label }}\n\t\t@if (valueLength() === 1) {\n\t\t\t{{ colon }}\n\t\t}\n\t}\n</ng-container>\n@if (!ignorePresentation()) {\n\t<ng-container *luPresentationDisplayDefault>\n\t\t@for (v of value; track $index) {\n\t\t\t@if ($last) {\n\t\t\t\t<ng-container *ngTemplateOutlet=\"noComma; context: { $implicit: v }\" />\n\t\t\t} @else {\n\t\t\t\t<ng-container *ngTemplateOutlet=\"comma; context: { $implicit: v }\" />\n\t\t\t}\n\t\t} @empty {\n\t\t\t<span aria-hidden=\"true\" data-content-before=\"\u2013\"></span>\n\t\t}\n\t</ng-container>\n}\n\n<ng-template #comma let-value><ng-container *luOptionOutlet=\"displayerTpl(); value: value\" />, </ng-template>\n\n<ng-template #noComma let-value>\n\t<ng-container *luOptionOutlet=\"displayerTpl(); value: value\" />\n</ng-template>\n", styles: ["@layer components{.multiSelect{--components-multiSelect-font: var(--pr-t-font-body-M);--components-multiSelect-padding: var(--pr-t-spacings-100);--components-multiSelect-gap: var(--pr-t-spacings-100);--components-multiSelect-background: var(--pr-t-color-input-background);--components-multiSelect-border-color: var(--pr-t-color-input-border);--components-multiSelect-placeholder: var(--pr-t-color-input-text-placeholder);--components-multiSelect-arrow-color: var(--pr-t-color-input-icon);--components-multiSelect-displayer-suffix-display: contents;display:flex;box-shadow:0 0 0 1px var(--components-multiSelect-border-color);background-color:var(--components-multiSelect-background);border-radius:var(--pr-t-border-radius-input);padding:var(--components-multiSelect-padding);align-items:flex-end;gap:var(--components-multiSelect-gap);cursor:pointer}.multiSelect:hover{--components-multiSelect-border-color: var(--pr-t-color-input-border-hover)}.multiSelect:has(.multipleSelect-displayer-search:focus-visible){outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.multipleSelect-displayer{display:flex;gap:var(--pr-t-spacings-50);flex-wrap:wrap;flex:1}.multipleSelect-displayer-suffix{display:var(--components-multiSelect-displayer-suffix-display);gap:var(--pr-t-spacings-50);flex:1;order:1}.multipleSelect-displayer-chip.chip{min-inline-size:0;--components-chip-backgroundColor: var(--palettes-100, var(--palettes-product-100));--components-chip-kill-disk-color: var(--palettes-800, var(--palettes-product-800));--components-chip-color: var(--palettes-800, var(--palettes-product-800))}.multipleSelect-displayer-chip-value{max-inline-size:8.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.multipleSelect-displayer-search{display:block;min-inline-size:2rem;inline-size:auto;flex:1;order:1;border:0;padding:0;outline:none;color:var(--pr-t-color-input-text);font:var(--components-multiSelect-font);background-color:transparent;cursor:pointer}.multipleSelect-displayer-search::placeholder{color:var(--components-multiSelect-placeholder)}.multipleSelect-displayer-label{font:var(--components-multiSelect-font)}.multipleSelect-clear{margin-block-end:var(--pr-t-spacings-50)}.multipleSelect-arrow,.multipleSelect-searchIcon{--icon-size: 1.5rem;color:var(--components-multiSelect-arrow-color);transition-property:transform;transition-duration:var(--commons-animations-durations-standard)}.multipleSelect-searchIcon{display:none}.multipleSelect-pill-displayer-chip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.multipleSelect-pill-displayer-label{font-weight:var(--pr-t-font-fontWeight-semibold)}.multiSelect-field-icon{order:1}}@layer mods{.multiSelect.mod-S{--components-multiSelect-font: var(--pr-t-font-body-S);--components-multiSelect-padding: var(--pr-t-spacings-75);--components-multiSelect-gap: var(--pr-t-spacings-75)}.multiSelect.mod-S .multipleSelect-arrow,.multiSelect.mod-S .multipleSelect-searchIcon{--icon-size: 1.25rem}.multiSelect.mod-S .multipleSelect-clear.clear,.multiSelect.mod-S .multipleSelect-clear:not(.clear){--components-clear-size: .75rem;--icon-size: .75rem}.multiSelect.mod-S .multipleSelect-displayer-chip.chip,.multiSelect.mod-S .multipleSelect-displayer-chip:not(.chip){--components-chip-font: var(--pr-t-font-body-XS);--components-chip-borderRadius: var(--pr-t-border-radius-small)}.multiSelect.mod-S .multipleSelect-displayer-chip.chip .lucca-icon,.multiSelect.mod-S .multipleSelect-displayer-chip:not(.chip) .lucca-icon{--icon-size: .75rem}.multiSelect.mod-filterPill{--components-multiSelect-displayer-suffix-display: flex;flex-direction:column;align-items:stretch;box-shadow:none;padding:0;gap:0;inline-size:26.5rem;max-inline-size:calc(100vw - 2.5rem)}.multiSelect.mod-filterPill .multipleSelect-displayer{box-shadow:0 0 0 1px var(--components-multiSelect-border-color);border-radius:var(--pr-t-border-radius-input);padding:var(--components-multiSelect-padding);z-index:1;position:relative;max-block-size:min(14rem,80vh);overflow:auto}.multiSelect.mod-filterPill .lu-picker-content{animation:none;box-shadow:none;border-radius:0;background-color:transparent;padding:var(--pr-t-spacings-50);margin:var(--pr-t-spacings-75) calc(var(--pr-t-spacings-100) * -1) calc(var(--pr-t-spacings-100) * -1)}.multiSelect.mod-filterPill .lu-picker-content lu-simple-select-default-option.pr-u-ellipsis{white-space:normal!important}.multiSelect.mod-filterPill:has(.multipleSelect-displayer-search:focus-visible){outline:none}.multiSelect.mod-filterPill .multipleSelect-displayer:has(.multipleSelect-displayer-search:focus-visible){outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.multiSelect.mod-filterPill.is-selected .multipleSelect-displayer-search[readonly]{border:0;clip-path:rect(1px 1px 1px 1px);margin:-1px;overflow:hidden;padding:0;position:absolute;block-size:1px;inline-size:1px;white-space:nowrap;contain:paint}.multiSelect:not(.mod-filterPill).is-selected .multipleSelect-displayer-search:not(:focus),.multiSelect:not(.mod-filterPill).is-selected .multipleSelect-displayer-search[readonly]{border:0;clip-path:rect(1px 1px 1px 1px);margin:-1px;overflow:hidden;padding:0;position:absolute;block-size:1px;inline-size:1px;white-space:nowrap;contain:paint}.multiSelect:has(.multipleSelect-displayer-search:focus-visible){outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.multiSelect:has(.multipleSelect-displayer-search[aria-invalid=true]){--components-multiSelect-border-color: var(--pr-t-color-input-border-critical);--components-multiSelect-background: var(--pr-t-color-input-background-critical);--components-multiSelect-placeholder: var(--pr-t-color-input-text-placeholder-critical)}.multiSelect:has(.multipleSelect-displayer-search:disabled){--components-multiSelect-background: var(--commons-disabled-background);--components-multiSelect-placeholder: var(--commons-disabled-placeholder);--components-multiSelect-arrow-color: var(--pr-t-color-input-icon-disabled);pointer-events:none}.multiSelect:has(.multipleSelect-displayer-search:disabled) .multipleSelect-displayer-chip{--components-chip-backgroundColor: var(--palettes-neutral-200);--components-chip-color: var(--pr-t-color-text-subtle)}.multiSelect:has(.multipleSelect-displayer-search:disabled) .multipleSelect-displayer-chip .chip-kill{display:none}.multiSelect:has([aria-expanded=true]) .multipleSelect-arrow{transform:rotate(180deg)}.multiSelect:not(.mod-noClueIcon):has(.multipleSelect-displayer-search:focus-visible):not(:has(.multipleSelect-displayer-search:read-only)) .multipleSelect-arrow,.multiSelect:not(.mod-noClueIcon):has([aria-expanded=true]):not(:has(.multipleSelect-displayer-search:read-only)) .multipleSelect-arrow{display:none}.multiSelect:not(.mod-noClueIcon):has(.multipleSelect-displayer-search:focus-visible):not(:has(.multipleSelect-displayer-search:read-only)) .multipleSelect-searchIcon,.multiSelect:not(.mod-noClueIcon):has([aria-expanded=true]):not(:has(.multipleSelect-displayer-search:read-only)) .multipleSelect-searchIcon{display:inline-flex;transform:none}}@layer components{.multipleSelect-displayer-filter{min-inline-size:0;display:flex;gap:.5ch}.multipleSelect-displayer-filter:empty{display:none}}@layer components{.clear{--components-clear-display: grid;--components-clear-size: 1rem;--components-clear-background: var(--palettes-800, var(--palettes-neutral-800));--components-clear-cross-color: var(--palettes-0, var(--palettes-neutral-0));--components-clear-background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' fill='none'%3E%3Cpath d='M5.80473 4.86192C5.54438 4.60157 5.12227 4.60157 4.86192 4.86192C4.60157 5.12227 4.60157 5.54438 4.86192 5.80473L7.05718 7.99999L4.86192 10.1953C4.60157 10.4556 4.60157 10.8777 4.86192 11.1381C5.12227 11.3984 5.54438 11.3984 5.80473 11.1381L7.99999 8.9428L10.1953 11.1381C10.4556 11.3984 10.8777 11.3984 11.1381 11.1381C11.3984 10.8777 11.3984 10.4556 11.1381 10.1953L8.9428 7.99999L11.1381 5.80473C11.3984 5.54438 11.3984 5.12227 11.1381 4.86192C10.8777 4.60157 10.4556 4.60157 10.1953 4.86192L7.99999 7.05718L5.80473 4.86192Z' fill='currentColor'/%3E%3C/svg%3E\");padding:0;border:0;inline-size:100%;background-color:transparent;color:inherit;text-align:start;display:block;font:inherit;cursor:pointer;display:var(--components-clear-display);grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:\"main\";align-items:normal;flex-shrink:0;inline-size:var(--components-clear-size);block-size:var(--components-clear-size);border-radius:var(--pr-t-border-radius-full)}.clear:before,.clear:after{content:\"\";grid-area:main}.clear:before{border-radius:var(--pr-t-border-radius-full);background-color:var(--components-clear-background)}.clear:after{-webkit-mask-image:var(--components-clear-background-image);mask-image:var(--components-clear-background-image);-webkit-mask-size:var(--components-clear-size);mask-size:var(--components-clear-size);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:var(--components-clear-cross-color)}.clear:hover{--components-clear-cross-color: var(--palettes-0, var(--palettes-neutral-0));--components-clear-background: var(--palettes-700, var(--palettes-neutral-700))}.clear:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px;border-radius:50%}.clear:active{--components-clear-background: var(--palettes-900, var(--palettes-neutral-900))}.clear .lucca-icon{display:none}}@layer mods{.clear.mod-S{--components-clear-size: .75rem;--icon-size: .75rem}.clear.mod-inverted{--components-clear-cross-color: var(--palettes-800, var(--palettes-neutral-800));--components-clear-background: var(--palettes-0, var(--palettes-neutral-0))}.clear.mod-inverted:hover{--components-clear-background: var(--palettes-50, var(--palettes-neutral-50))}.clear.mod-inverted:active{--components-clear-background: var(--palettes-100, var(--palettes-neutral-100))}.clear[disabled]{cursor:default;--components-clear-cross-color: var(--palettes-neutral-500)}.clear[disabled],.clear[disabled]:hover,.clear[disabled]:active{--components-clear-background: var(--palettes-neutral-300)}.clear[hidden],.filterPill[disabled] .clear,.filterPill:not(.is-filled) .clear,.textfield-input[disabled] .clear,.textfield-input:not(.is-filled) .clear{--components-clear-display: none}.multiSelect.is-selected:has(.multipleSelect-clear) .clear{--components-clear-display: grid}}@layer components{.chip{--components-chip-font: var(--pr-t-font-body-S);--components-chip-backgroundColor: var(--palettes-100, var(--palettes-neutral-100));--components-chip-color: var(--palettes-800, var(--pr-t-color-text));--components-chip-borderRadius: var(--pr-t-border-radius-default);--components-chip-kill-size: .75rem;--components-chip-kill-disk-color: var(--palettes-800, var(--palettes-neutral-800));--components-chip-kill-cross-color: var(--palettes-text, var(--palettes-neutral-text));--components-chip-kill-background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' fill='none'%3E%3Cpath d='M5.80473 4.86192C5.54438 4.60157 5.12227 4.60157 4.86192 4.86192C4.60157 5.12227 4.60157 5.54438 4.86192 5.80473L7.05718 7.99999L4.86192 10.1953C4.60157 10.4556 4.60157 10.8777 4.86192 11.1381C5.12227 11.3984 5.54438 11.3984 5.80473 11.1381L7.99999 8.9428L10.1953 11.1381C10.4556 11.3984 10.8777 11.3984 11.1381 11.1381C11.3984 10.8777 11.3984 10.4556 11.1381 10.1953L8.9428 7.99999L11.1381 5.80473C11.3984 5.54438 11.3984 5.12227 11.1381 4.86192C10.8777 4.60157 10.4556 4.60157 10.1953 4.86192L7.99999 7.05718L5.80473 4.86192Z' fill='currentColor'/%3E%3C/svg%3E\");--components-chip-fontSize: var(--pr-t-font-body-S-fontSize);--components-chip-lineHeight: var(--pr-t-font-body-S-lineHeight);background-color:var(--components-chip-backgroundColor);border:none;border-radius:var(--components-chip-borderRadius);color:var(--components-chip-color);display:inline-flex;align-items:center;position:relative;vertical-align:middle;padding-block:calc(var(--pr-t-spacings-50) / 2);padding-inline:var(--pr-t-spacings-100);font:var(--components-chip-font);max-inline-size:100%}.chip .lucca-icon{--icon-size: 1rem;margin-inline-end:var(--pr-t-spacings-50)}.chip-content{outline:none}.chip-kill{padding:0;border:0;inline-size:100%;background-color:transparent;color:inherit;text-align:start;display:block;font:inherit;display:grid;grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:\"main\";place-items:center;inline-size:var(--pr-t-spacings-300);block-size:var(--pr-t-spacings-300);margin:calc(var(--pr-t-spacings-75) * -1);margin-inline-start:var(--pr-t-spacings-25);flex-shrink:0;cursor:pointer}.chip-kill:before,.chip-kill:after{content:\"\";grid-area:main;inline-size:var(--components-chip-kill-size);block-size:var(--components-chip-kill-size)}.chip-kill:before{border-radius:var(--pr-t-border-radius-full);background-color:var(--components-chip-kill-disk-color)}.chip-kill:after{-webkit-mask-image:var(--components-chip-kill-background-image);mask-image:var(--components-chip-kill-background-image);-webkit-mask-size:var(--components-chip-kill-size);mask-size:var(--components-chip-kill-size);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:var(--components-chip-kill-cross-color)}.chip-kill:hover{--components-chip-kill-disk-color: var(--palettes-700, var(--palettes-neutral-700))}.chip-kill:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:-4px;border-radius:var(--pr-t-border-radius-full)}.chip-kill:active{--components-chip-kill-disk-color: var(--palettes-900, var(--palettes-neutral-900))}}@layer mods{.chip.mod-S{--components-chip-font: var(--pr-t-font-body-XS);--components-chip-borderRadius: var(--pr-t-border-radius-small)}.chip.mod-S .lucca-icon{--icon-size: .75rem}.chip.mod-unkillable .chip-kill{display:none}.chip.mod-clickable{cursor:pointer;text-decoration:none}.chip.is-disabled{--components-chip-backgroundColor: var(--palettes-neutral-200);--components-chip-color: var(--pr-t-color-text-subtle)}.chip.is-disabled .chip-kill{display:none}.chip:has(.chip-content:focus-visible){outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.chip.mod-product{--components-chip-backgroundColor: var(--palettes-100, var(--palettes-product-100));--components-chip-kill-disk-color: var(--palettes-800, var(--palettes-product-800));--components-chip-color: var(--palettes-800, var(--palettes-product-800))}}\n"] }]
-        }], propDecorators: { intl: [{ type: i0.Input, args: [{ isSignal: true, alias: "intl", required: false }] }], valuesTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "valuesTpl", required: false }] }, { type: i0.Output, args: ["valuesTplChange"] }], maxValuesShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxValuesShown", required: false }] }], keepSearchAfterSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepSearchAfterSelection", required: false }] }], filterPillLabelPlural: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPillLabelPlural", required: false }] }], filterPillPanelAnchorRef: [{ type: i0.ViewChild, args: ['filterPillPanelAnchor', { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
+                    }, encapsulation: ViewEncapsulation.None, template: "<ng-container *luOptionOutlet=\"valuesTpl(); value: value || []\" />\n\n@if (!filterPillMode) {\n\t@if (hasValue() && clearable() && (disabled$ | async) === false) {\n\t\t<lu-clear class=\"multipleSelect-clear\" (onClear)=\"clearValue($event)\">{{ intl().clear }}</lu-clear>\n\t}\n\n\t<lu-icon icon=\"arrowChevronBottom\" class=\"multipleSelect-arrow\" />\n\t<lu-icon icon=\"searchMagnifyingGlass\" class=\"multipleSelect-searchIcon\" />\n}\n\n<ng-container #filterPillPanelAnchor />\n<ng-container *luFilterPillDisplayer>\n\t<div class=\"multipleSelect-displayer-filter\">\n\t\t@if (useSingleOptionDisplayer() && valueLength() === 1 && singleOptionForDisplay() !== undefined) {\n\t\t\t<div class=\"multipleSelect-pill-displayer-chip\">\n\t\t\t\t<ng-container *luOptionOutlet=\"displayerTpl(); value: singleOptionForDisplay()\" />\n\t\t\t</div>\n\t\t}\n\t</div>\n</ng-container>\n<ng-container *luFilterPillLabel=\"let label = label; let colon = colon\">\n\t@let minCount = useSingleOptionDisplayer() ? 1 : 0;\n\t@if (valueLength() > minCount) {\n\t\t<span class=\"multipleSelect-pill-displayer-label\">{{ filterPillLabelPluralValue() }}</span>\n\t} @else {\n\t\t{{ label }}{{ valueLength() === 1 ? colon : \"\" }}\n\t}\n</ng-container>\n@if (!ignorePresentation()) {\n\t<ng-container *luPresentationDisplayDefault>\n\t\t@for (v of value; track $index) {\n\t\t\t<ng-container *luOptionOutlet=\"displayerTpl(); value: v\" />\n\n\t\t\t@let separator = presentationSeparators()[$index];\n\n\t\t\t@if (separator) {\n\t\t\t\t<ng-container>{{ separator }}</ng-container>\n\t\t\t}\n\t\t} @empty {\n\t\t\t<span aria-hidden=\"true\" data-content-before=\"\u2013\"></span>\n\t\t}\n\t</ng-container>\n}\n", styles: ["@layer components{.multiSelect{--components-multiSelect-font: var(--pr-t-font-body-M);--components-multiSelect-padding: var(--pr-t-spacings-100);--components-multiSelect-gap: var(--pr-t-spacings-100);--components-multiSelect-background: var(--pr-t-color-input-background);--components-multiSelect-border-color: var(--pr-t-color-input-border);--components-multiSelect-placeholder: var(--pr-t-color-input-text-placeholder);--components-multiSelect-arrow-color: var(--pr-t-color-input-icon);--components-multiSelect-displayer-suffix-display: contents;display:flex;box-shadow:0 0 0 1px var(--components-multiSelect-border-color);background-color:var(--components-multiSelect-background);border-radius:var(--pr-t-border-radius-input);padding:var(--components-multiSelect-padding);align-items:flex-end;gap:var(--components-multiSelect-gap);cursor:pointer}.multiSelect:hover{--components-multiSelect-border-color: var(--pr-t-color-input-border-hover)}.multiSelect:has(.multipleSelect-displayer-search:focus-visible){outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.multipleSelect-displayer{display:flex;gap:var(--pr-t-spacings-50);flex-wrap:wrap;flex:1}.multipleSelect-displayer-suffix{display:var(--components-multiSelect-displayer-suffix-display);gap:var(--pr-t-spacings-50);flex:1;order:1}.multipleSelect-displayer-chip.chip{min-inline-size:0;--components-chip-backgroundColor: var(--palettes-100, var(--palettes-product-100));--components-chip-kill-disk-color: var(--palettes-800, var(--palettes-product-800));--components-chip-color: var(--palettes-800, var(--palettes-product-800))}.multipleSelect-displayer-chip-value{max-inline-size:8.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.multipleSelect-displayer-search{display:block;min-inline-size:2rem;inline-size:auto;flex:1;order:1;border:0;padding:0;outline:none;color:var(--pr-t-color-input-text);font:var(--components-multiSelect-font);background-color:transparent;cursor:pointer}.multipleSelect-displayer-search::placeholder{color:var(--components-multiSelect-placeholder)}.multipleSelect-displayer-label{font:var(--components-multiSelect-font)}.multipleSelect-clear{margin-block-end:var(--pr-t-spacings-50)}.multipleSelect-arrow,.multipleSelect-searchIcon{--icon-size: 1.5rem;color:var(--components-multiSelect-arrow-color);transition-property:transform;transition-duration:var(--commons-animations-durations-standard)}.multipleSelect-searchIcon{display:none}.multipleSelect-pill-displayer-chip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.multipleSelect-pill-displayer-label{font-weight:var(--pr-t-font-fontWeight-semibold)}.multiSelect-field-icon{order:1}}@layer mods{.multiSelect.mod-S{--components-multiSelect-font: var(--pr-t-font-body-S);--components-multiSelect-padding: var(--pr-t-spacings-75);--components-multiSelect-gap: var(--pr-t-spacings-75)}.multiSelect.mod-S .multipleSelect-arrow,.multiSelect.mod-S .multipleSelect-searchIcon{--icon-size: 1.25rem}.multiSelect.mod-S .multipleSelect-clear.clear,.multiSelect.mod-S .multipleSelect-clear:not(.clear){--components-clear-size: .75rem;--icon-size: .75rem}.multiSelect.mod-S .multipleSelect-displayer-chip.chip,.multiSelect.mod-S .multipleSelect-displayer-chip:not(.chip){--components-chip-font: var(--pr-t-font-body-XS);--components-chip-borderRadius: var(--pr-t-border-radius-small)}.multiSelect.mod-S .multipleSelect-displayer-chip.chip .lucca-icon,.multiSelect.mod-S .multipleSelect-displayer-chip:not(.chip) .lucca-icon{--icon-size: .75rem}.multiSelect.mod-filterPill{--components-multiSelect-displayer-suffix-display: flex;flex-direction:column;align-items:stretch;box-shadow:none;padding:0;gap:0;inline-size:26.5rem;max-inline-size:calc(100vi - 2.5rem)}.multiSelect.mod-filterPill .multipleSelect-displayer{box-shadow:0 0 0 1px var(--components-multiSelect-border-color);border-radius:var(--pr-t-border-radius-input);padding:var(--components-multiSelect-padding);z-index:1;position:relative;max-block-size:min(14rem,80vb);overflow:auto}.multiSelect.mod-filterPill .lu-picker-content{animation:none;box-shadow:none;border-radius:0;background-color:transparent;padding:var(--pr-t-spacings-50);margin:var(--pr-t-spacings-75) calc(var(--pr-t-spacings-100) * -1) calc(var(--pr-t-spacings-100) * -1)}.multiSelect.mod-filterPill .lu-picker-content lu-simple-select-default-option.pr-u-ellipsis{white-space:normal!important}.multiSelect.mod-filterPill:has(.multipleSelect-displayer-search:focus-visible){outline:none}.multiSelect.mod-filterPill .multipleSelect-displayer:has(.multipleSelect-displayer-search:focus-visible){outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.multiSelect.mod-filterPill.is-selected .multipleSelect-displayer-search[readonly]{border:0;clip-path:rect(1px 1px 1px 1px);margin:-1px;overflow:hidden;padding:0;position:absolute;block-size:1px;inline-size:1px;white-space:nowrap;contain:paint}.multiSelect:not(.mod-filterPill).is-selected .multipleSelect-displayer-search:not(:focus),.multiSelect:not(.mod-filterPill).is-selected .multipleSelect-displayer-search[readonly]{border:0;clip-path:rect(1px 1px 1px 1px);margin:-1px;overflow:hidden;padding:0;position:absolute;block-size:1px;inline-size:1px;white-space:nowrap;contain:paint}.multiSelect:has(.multipleSelect-displayer-search:focus-visible){outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.multiSelect:has(.multipleSelect-displayer-search[aria-invalid=true]){--components-multiSelect-border-color: var(--pr-t-color-input-border-critical);--components-multiSelect-background: var(--pr-t-color-input-background-critical);--components-multiSelect-placeholder: var(--pr-t-color-input-text-placeholder-critical)}.multiSelect:has(.multipleSelect-displayer-search:disabled){--components-multiSelect-background: var(--pr-t-color-input-background-disabled);--components-multiSelect-placeholder: var(--commons-disabled-placeholder);--components-multiSelect-arrow-color: var(--pr-t-color-input-icon-disabled);pointer-events:none}.multiSelect:has(.multipleSelect-displayer-search:disabled) .multipleSelect-displayer-chip{--components-chip-backgroundColor: var(--palettes-neutral-200);--components-chip-color: var(--pr-t-color-text-subtle)}.multiSelect:has(.multipleSelect-displayer-search:disabled) .multipleSelect-displayer-chip .chip-kill{display:none}.multiSelect:has([aria-expanded=true]) .multipleSelect-arrow{transform:rotate(180deg)}.multiSelect:not(.mod-noClueIcon):has(.multipleSelect-displayer-search:focus-visible):not(:has(.multipleSelect-displayer-search:read-only)) .multipleSelect-arrow,.multiSelect:not(.mod-noClueIcon):has([aria-expanded=true]):not(:has(.multipleSelect-displayer-search:read-only)) .multipleSelect-arrow{display:none}.multiSelect:not(.mod-noClueIcon):has(.multipleSelect-displayer-search:focus-visible):not(:has(.multipleSelect-displayer-search:read-only)) .multipleSelect-searchIcon,.multiSelect:not(.mod-noClueIcon):has([aria-expanded=true]):not(:has(.multipleSelect-displayer-search:read-only)) .multipleSelect-searchIcon{display:inline-flex;transform:none}}@layer components{.multipleSelect-displayer-filter{min-inline-size:0;display:flex;gap:.5ch}.multipleSelect-displayer-filter:empty{display:none}}@layer components{.clear{--components-clear-display: grid;--components-clear-size: 1rem;--components-clear-background: var(--palettes-800, var(--palettes-neutral-800));--components-clear-cross-color: var(--palettes-0, var(--palettes-neutral-0));--components-clear-background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' fill='none'%3E%3Cpath d='M5.80473 4.86192C5.54438 4.60157 5.12227 4.60157 4.86192 4.86192C4.60157 5.12227 4.60157 5.54438 4.86192 5.80473L7.05718 7.99999L4.86192 10.1953C4.60157 10.4556 4.60157 10.8777 4.86192 11.1381C5.12227 11.3984 5.54438 11.3984 5.80473 11.1381L7.99999 8.9428L10.1953 11.1381C10.4556 11.3984 10.8777 11.3984 11.1381 11.1381C11.3984 10.8777 11.3984 10.4556 11.1381 10.1953L8.9428 7.99999L11.1381 5.80473C11.3984 5.54438 11.3984 5.12227 11.1381 4.86192C10.8777 4.60157 10.4556 4.60157 10.1953 4.86192L7.99999 7.05718L5.80473 4.86192Z' fill='currentColor'/%3E%3C/svg%3E\");padding:0;border:0;inline-size:100%;background-color:transparent;color:inherit;text-align:start;display:block;font:inherit;cursor:pointer;display:var(--components-clear-display);grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:\"main\";align-items:normal;flex-shrink:0;inline-size:var(--components-clear-size);block-size:var(--components-clear-size);border-radius:var(--pr-t-border-radius-full)}.clear:before,.clear:after{content:\"\";grid-area:main}.clear:before{border-radius:var(--pr-t-border-radius-full);background-color:var(--components-clear-background)}.clear:after{-webkit-mask-image:var(--components-clear-background-image);mask-image:var(--components-clear-background-image);-webkit-mask-size:var(--components-clear-size);mask-size:var(--components-clear-size);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:var(--components-clear-cross-color)}.clear:hover{--components-clear-cross-color: var(--palettes-0, var(--palettes-neutral-0));--components-clear-background: var(--palettes-700, var(--palettes-neutral-700))}.clear:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px;border-radius:50%}.clear:active{--components-clear-background: var(--palettes-900, var(--palettes-neutral-900))}.clear .lucca-icon{display:none}}@layer mods{.clear.mod-S{--components-clear-size: .75rem;--icon-size: .75rem}.clear.mod-inverted{--components-clear-cross-color: var(--palettes-800, var(--palettes-neutral-800));--components-clear-background: var(--palettes-0, var(--palettes-neutral-0))}.clear.mod-inverted:hover{--components-clear-background: var(--palettes-50, var(--palettes-neutral-50))}.clear.mod-inverted:active{--components-clear-background: var(--palettes-100, var(--palettes-neutral-100))}.clear[disabled]{cursor:default;--components-clear-cross-color: var(--palettes-neutral-500)}.clear[disabled],.clear[disabled]:hover,.clear[disabled]:active{--components-clear-background: var(--palettes-neutral-300)}.clear[hidden],.filterPill[disabled] .clear,.filterPill:not(.is-filled) .clear,.textfield-input[disabled] .clear,.textfield-input:not(.is-filled) .clear{--components-clear-display: none}.multiSelect.is-selected:has(.multipleSelect-clear) .clear{--components-clear-display: grid}}@layer components{.chip{--components-chip-font: var(--pr-t-font-body-S);--components-chip-backgroundColor: var(--palettes-100, var(--palettes-neutral-100));--components-chip-color: var(--palettes-800, var(--pr-t-color-text));--components-chip-borderRadius: var(--pr-t-border-radius-default);--components-chip-kill-size: .75rem;--components-chip-kill-disk-color: var(--palettes-800, var(--palettes-neutral-800));--components-chip-kill-cross-color: var(--palettes-text, var(--palettes-neutral-text));--components-chip-kill-background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' fill='none'%3E%3Cpath d='M5.80473 4.86192C5.54438 4.60157 5.12227 4.60157 4.86192 4.86192C4.60157 5.12227 4.60157 5.54438 4.86192 5.80473L7.05718 7.99999L4.86192 10.1953C4.60157 10.4556 4.60157 10.8777 4.86192 11.1381C5.12227 11.3984 5.54438 11.3984 5.80473 11.1381L7.99999 8.9428L10.1953 11.1381C10.4556 11.3984 10.8777 11.3984 11.1381 11.1381C11.3984 10.8777 11.3984 10.4556 11.1381 10.1953L8.9428 7.99999L11.1381 5.80473C11.3984 5.54438 11.3984 5.12227 11.1381 4.86192C10.8777 4.60157 10.4556 4.60157 10.1953 4.86192L7.99999 7.05718L5.80473 4.86192Z' fill='currentColor'/%3E%3C/svg%3E\");--components-chip-fontSize: var(--pr-t-font-body-S-fontSize);--components-chip-lineHeight: var(--pr-t-font-body-S-lineHeight);background-color:var(--components-chip-backgroundColor);border:none;border-radius:var(--components-chip-borderRadius);color:var(--components-chip-color);display:inline-flex;align-items:center;position:relative;vertical-align:middle;padding-block:calc(var(--pr-t-spacings-50) / 2);padding-inline:var(--pr-t-spacings-100);font:var(--components-chip-font);max-inline-size:100%}.chip .lucca-icon{--icon-size: 1rem;margin-inline-end:var(--pr-t-spacings-50)}.chip-content{outline:none}.chip-kill{padding:0;border:0;inline-size:100%;background-color:transparent;color:inherit;text-align:start;display:block;font:inherit;display:grid;grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:\"main\";place-items:center;inline-size:var(--pr-t-spacings-300);block-size:var(--pr-t-spacings-300);margin:calc(var(--pr-t-spacings-75) * -1);margin-inline-start:var(--pr-t-spacings-25);flex-shrink:0;cursor:pointer}.chip-kill:before,.chip-kill:after{content:\"\";grid-area:main;inline-size:var(--components-chip-kill-size);block-size:var(--components-chip-kill-size)}.chip-kill:before{border-radius:var(--pr-t-border-radius-full);background-color:var(--components-chip-kill-disk-color)}.chip-kill:after{-webkit-mask-image:var(--components-chip-kill-background-image);mask-image:var(--components-chip-kill-background-image);-webkit-mask-size:var(--components-chip-kill-size);mask-size:var(--components-chip-kill-size);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:var(--components-chip-kill-cross-color)}.chip-kill:hover{--components-chip-kill-disk-color: var(--palettes-700, var(--palettes-neutral-700))}.chip-kill:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:-4px;border-radius:var(--pr-t-border-radius-full)}.chip-kill:active{--components-chip-kill-disk-color: var(--palettes-900, var(--palettes-neutral-900))}}@layer mods{.chip.mod-S{--components-chip-font: var(--pr-t-font-body-XS);--components-chip-borderRadius: var(--pr-t-border-radius-small)}.chip.mod-S .lucca-icon{--icon-size: .75rem}.chip.mod-unkillable .chip-kill{display:none}.chip.mod-clickable{cursor:pointer;text-decoration:none}.chip.is-disabled{--components-chip-backgroundColor: var(--palettes-neutral-200);--components-chip-color: var(--pr-t-color-text-subtle)}.chip.is-disabled .chip-kill{display:none}.chip:has(.chip-content:focus-visible){outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}.chip.mod-product{--components-chip-backgroundColor: var(--palettes-100, var(--palettes-product-100));--components-chip-kill-disk-color: var(--palettes-800, var(--palettes-product-800));--components-chip-color: var(--palettes-800, var(--palettes-product-800))}}\n"] }]
+        }], propDecorators: { intl: [{ type: i0.Input, args: [{ isSignal: true, alias: "intl", required: false }] }], valuesTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "valuesTpl", required: false }] }, { type: i0.Output, args: ["valuesTplChange"] }], maxValuesShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxValuesShown", required: false }] }], keepSearchAfterSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepSearchAfterSelection", required: false }] }], filterPillLabelPlural: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPillLabelPlural", required: false }] }], filterPillLabelPluralFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPillLabelPluralFn", required: false }] }], filterPillPanelAnchorRef: [{ type: i0.ViewChild, args: ['filterPillPanelAnchor', { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
 
 const Translations = {
     'nl-BE': {
@@ -723,6 +783,7 @@ const luMultiSelectDisplayerTranslations = Translations;
 const MULTI_SELECT_WITH_SELECT_ALL_CONTEXT = new InjectionToken('LuMultiSelectWithSelectAllContext');
 
 class LuMultiSelectDisplayerInputDirective {
+    #injector;
     get panelOpen() {
         return this.#panelOpen();
     }
@@ -756,6 +817,7 @@ class LuMultiSelectDisplayerInputDirective {
         this.context = inject(LU_OPTION_CONTEXT);
         this.elementRef = inject(ElementRef);
         this.destroyRef = inject(DestroyRef);
+        this.#injector = inject(Injector);
         this.#panelOpen = toSignal(this.select.isPanelOpen$);
         this.#activeDescendant = toSignal(this.select.activeDescendant$);
         this.#disabled = toSignal(this.select.disabled$);
@@ -778,6 +840,14 @@ class LuMultiSelectDisplayerInputDirective {
         }
     }
     ngOnInit() {
+        // When the displayer swaps variants while the panel is open (e.g. the content-displayer
+        // gives way to the default displayer on the first selection), the previously focused input
+        // is destroyed. focusInput$ is a plain Subject, so its emission fires before this new input
+        // has subscribed and is lost — focus falls back to <body> and keyboard navigation dies.
+        // A freshly mounted displayer input owns focus whenever the panel is open.
+        if (this.select.isPanelOpen) {
+            afterNextRender(() => this.elementRef.nativeElement.focus(), { injector: this.#injector });
+        }
         this.select.focusInput$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((data) => {
             if (!data?.keepClue) {
                 this.#clearText();
@@ -794,10 +864,10 @@ class LuMultiSelectDisplayerInputDirective {
             this.select.clueChanged('');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LuMultiSelectDisplayerInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: LuMultiSelectDisplayerInputDirective, isStandalone: true, selector: "[luMultiSelectDisplayerInput]", host: { attributes: { "aria-haspopup": "listbox", "role": "combobox", "type": "text" }, listeners: { "input": "onInput()" }, properties: { "attr.aria-expanded": "panelOpen", "attr.aria-activedescendant": "activeDescendant", "attr.aria-controls": "controls", "attr.disabled": "disabled", "attr.placeholder": "placeholder", "attr.readonly": "readonly" }, classAttribute: "multipleSelect-displayer-search" }, hostDirectives: [{ directive: i1$1.InputDirective }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuMultiSelectDisplayerInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: LuMultiSelectDisplayerInputDirective, isStandalone: true, selector: "[luMultiSelectDisplayerInput]", host: { attributes: { "aria-haspopup": "listbox", "role": "combobox", "type": "text" }, listeners: { "input": "onInput()" }, properties: { "attr.aria-expanded": "panelOpen", "attr.aria-activedescendant": "activeDescendant", "attr.aria-controls": "controls", "attr.disabled": "disabled", "attr.placeholder": "placeholder", "attr.readonly": "readonly" }, classAttribute: "multipleSelect-displayer-search" }, hostDirectives: [{ directive: i1.InputDirective }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LuMultiSelectDisplayerInputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuMultiSelectDisplayerInputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[luMultiSelectDisplayerInput]',
@@ -826,44 +896,45 @@ class LuMultiSelectAllDisplayerComponent {
         ...(ngDevMode ? [{ debugName: "isFilled" }] : /* istanbul ignore next */ []));
         this.isIncludeMode = computed(() => this.selectAllContext.mode() === 'include', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isIncludeMode" }] : /* istanbul ignore next */ []));
-        this.displayerLabel = this.selectAllContext.displayerLabel;
+        this.displayerLabelValue = this.selectAllContext.displayerLabelValue;
         this.displayerCount = this.selectAllContext.displayerCount;
+        this.displayedSingleOption = this.select.singleOptionForDisplay;
         this.intl = input(...intlInputOptions(LU_MULTI_SELECT_DISPLAYER_TRANSLATIONS), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "intl" }] : /* istanbul ignore next */ []));
         this.disabled = toSignal(this.select.disabled$);
-        this.inputElementRef = viewChild.required(LuMultiSelectDisplayerInputDirective, { read: ElementRef });
+        this.inputElementRef = viewChild.required(LuMultiSelectDisplayerInputDirective, { ...(ngDevMode ? { debugName: "inputElementRef" } : /* istanbul ignore next */ {}), read: ElementRef });
         this.#injector = inject(Injector);
     }
     #injector;
     unselectOption(option, $event) {
         $event.stopPropagation();
         $event.preventDefault();
-        this.select.updateValue(this.select.value?.filter((o) => o !== option) ?? [], true);
+        this.select.updateValue(this.isIncludeMode() ? (this.select.value?.filter((o) => o !== option) ?? []) : [...(this.select.value ?? []), option], true);
         afterNextRender(() => {
             this.select.panelRef?.updatePosition();
             this.inputElementRef().nativeElement.focus();
         }, { injector: this.#injector });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LuMultiSelectAllDisplayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: LuMultiSelectAllDisplayerComponent, isStandalone: true, selector: "lu-multi-select-all-displayer", inputs: { intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: LuMultiSelectDisplayerInputDirective, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuMultiSelectAllDisplayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: LuMultiSelectAllDisplayerComponent, isStandalone: true, selector: "lu-multi-select-all-displayer", inputs: { intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: LuMultiSelectDisplayerInputDirective, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: `
 		<div class="multipleSelect-displayer mod-filter" [class.is-filled]="isFilled()">
 			<input type="text" luMultiSelectDisplayerInput />
 
 			@if (displayerCount() !== null) {
 				<div class="multipleSelect-displayer-filter">
-					@if (displayerCount() === 1 && isIncludeMode()) {
-						<lu-chip withEllipsis (kill)="unselectOption(select.value[0], $event)" class="multipleSelect-displayer-chip" [unkillable]="disabled()">
-							<ng-template *luOptionOutlet="select.displayerTpl(); value: select.value[0]" />
+					@if (displayedSingleOption(); as singleOption) {
+						<lu-chip withEllipsis (kill)="unselectOption(singleOption, $event)" class="multipleSelect-displayer-chip" [unkillable]="disabled() ?? false">
+							<ng-template *luOptionOutlet="select.displayerTpl(); value: singleOption" />
 						</lu-chip>
 					} @else {
-						<lu-chip class="multipleSelect-displayer-chip" unkillable>{{ displayerCount() }} {{ displayerLabel() }}</lu-chip>
+						<lu-chip class="multipleSelect-displayer-chip" unkillable>{{ displayerLabelValue() }}</lu-chip>
 					}
 				</div>
 			}
 		</div>
 	`, isInline: true, styles: [":host{display:block;inline-size:100%}\n"], dependencies: [{ kind: "directive", type: LuMultiSelectDisplayerInputDirective, selector: "[luMultiSelectDisplayerInput]" }, { kind: "directive", type: _LuOptionOutletDirective, selector: "[luOptionOutlet]", inputs: ["luOptionOutlet", "luOptionOutletValue", "luOptionShowNull"] }, { kind: "component", type: ChipComponent, selector: "lu-chip, button[luChip], a[luChip]", inputs: ["intl", "withEllipsis", "unkillable", "palette", "disabled", "size", "state", "icon"], outputs: ["kill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LuMultiSelectAllDisplayerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuMultiSelectAllDisplayerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lu-multi-select-all-displayer', imports: [LuMultiSelectDisplayerInputDirective, _LuOptionOutletDirective, ChipComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
 		<div class="multipleSelect-displayer mod-filter" [class.is-filled]="isFilled()">
@@ -871,12 +942,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
 
 			@if (displayerCount() !== null) {
 				<div class="multipleSelect-displayer-filter">
-					@if (displayerCount() === 1 && isIncludeMode()) {
-						<lu-chip withEllipsis (kill)="unselectOption(select.value[0], $event)" class="multipleSelect-displayer-chip" [unkillable]="disabled()">
-							<ng-template *luOptionOutlet="select.displayerTpl(); value: select.value[0]" />
+					@if (displayedSingleOption(); as singleOption) {
+						<lu-chip withEllipsis (kill)="unselectOption(singleOption, $event)" class="multipleSelect-displayer-chip" [unkillable]="disabled() ?? false">
+							<ng-template *luOptionOutlet="select.displayerTpl(); value: singleOption" />
 						</lu-chip>
 					} @else {
-						<lu-chip class="multipleSelect-displayer-chip" unkillable>{{ displayerCount() }} {{ displayerLabel() }}</lu-chip>
+						<lu-chip class="multipleSelect-displayer-chip" unkillable>{{ displayerLabelValue() }}</lu-chip>
 					}
 				</div>
 			}
@@ -887,6 +958,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
 class LuMultiSelectAllHeaderComponent {
     #selectableItem;
     #elementRef;
+    #injector;
     constructor() {
         this.selectAllContext = inject(MULTI_SELECT_WITH_SELECT_ALL_CONTEXT);
         this.intl = this.selectAllContext.intl;
@@ -896,12 +968,13 @@ class LuMultiSelectAllHeaderComponent {
         ...(ngDevMode ? [{ debugName: "isSelected" }] : /* istanbul ignore next */ []));
         this.#selectableItem = inject(_CoreSelectPanelElement);
         this.#elementRef = inject(ElementRef);
+        this.#injector = inject(Injector);
         this.#selectableItem.id.set(`multi-select-select-all`);
-        effect(() => {
+        effect((onCleanup) => {
             if (this.#selectableItem.isHighlighted()) {
-                setTimeout(() => {
-                    this.#elementRef.nativeElement.scrollIntoView();
-                }, 50);
+                // Wait for the panel layout to settle (opening animation) before scrolling,
+                // otherwise the browser computes a bogus scroll position.
+                onCleanup(_scrollIntoViewOnceReady(this.#elementRef.nativeElement, this.#injector));
             }
             if (this.isSelected()) {
                 this.#selectableItem.isSelected.set(true);
@@ -913,9 +986,9 @@ class LuMultiSelectAllHeaderComponent {
             this.selectAllContext.setSelectAll(!this.isSelected());
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LuMultiSelectAllHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", type: LuMultiSelectAllHeaderComponent, isStandalone: true, selector: "lu-multi-select-all-header", hostDirectives: [{ directive: i1$2.ɵCoreSelectPanelElement }], ngImport: i0, template: `
-		<div class="multiSelectAllDisplayer">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuMultiSelectAllHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: LuMultiSelectAllHeaderComponent, isStandalone: true, selector: "lu-multi-select-all-header", hostDirectives: [{ directive: i1$1.ɵCoreSelectPanelElement }], ngImport: i0, template: `
+		<div class="multiSelectAllDisplayer" role="option">
 			<lu-form-field [label]="intl().selectAll">
 				<lu-checkbox-input
 					class="multiSelectAllDisplayer-checkbox"
@@ -926,12 +999,12 @@ class LuMultiSelectAllHeaderComponent {
 				/>
 			</lu-form-field>
 		</div>
-	`, isInline: true, styles: ["@layer components{:host{display:block;background-color:var(--palettes-neutral-0);border-block-end:1px solid var(--commons-border-200);padding-block:0 var(--pr-t-spacings-50);padding-inline:var(--components-options-item-padding-vertical);margin-inline:calc(-1 * var(--pr-t-spacings-50));scroll-margin-block-start:var(--pr-t-spacings-50)}}@layer components{.multiSelectAllDisplayer{border-radius:var(--pr-t-border-radius-default);cursor:pointer}.multiSelectAllDisplayer ::ng-deep .formLabel{inline-size:100%;padding-block:var(--components-options-item-padding-vertical);padding-inline:0}}@layer mods{.multiSelectAllDisplayer:hover,:host-context(.optionItem.is-highlighted) .multiSelectAllDisplayer{background-color:var(--palettes-neutral-50)}.multiSelectAllDisplayer:has(.checkboxField-input:checked){background-color:var(--palettes-50, var(--palettes-product-50))}.multiSelectAllDisplayer:has(.checkboxField-input:checked):hover,:host-context(.optionItem.is-highlighted) .multiSelectAllDisplayer:has(.checkboxField-input:checked){background-color:var(--palettes-100, var(--palettes-product-100))}}@layer components{.multiSelectAllDisplayer-checkbox{margin-block:var(--components-options-item-padding-vertical) 0;margin-inline:var(--components-options-item-padding-horizontal) 0}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CheckboxInputComponent, selector: "lu-checkbox-input", inputs: ["checklist", "mixed"] }, { kind: "component", type: FormFieldComponent, selector: "lu-form-field", inputs: ["intl", "label", "hiddenLabel", "rolePresentationLabel", "inline", "statusControl", "tooltip", "tag", "AI", "iconAItooltip", "iconAIalt", "width", "invalid", "inlineMessage", "errorInlineMessage", "inlineMessageState", "size", "extraDescribedBy", "layout", "counter", "presentation"], outputs: ["rolePresentationLabelChange", "layoutChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+	`, isInline: true, styles: ["@layer components{:host{display:block;background-color:var(--palettes-neutral-0);border-block-end:1px solid var(--commons-border-200);padding-block:0 var(--pr-t-spacings-50);padding-inline:var(--components-options-item-padding-vertical);margin-inline:calc(-1 * var(--pr-t-spacings-50));scroll-margin-block-start:var(--pr-t-spacings-50)}}@layer components{.multiSelectAllDisplayer{border-radius:var(--pr-t-border-radius-default);cursor:pointer}.multiSelectAllDisplayer ::ng-deep .formLabel{inline-size:100%;padding-block:var(--components-options-item-padding-vertical);padding-inline:0}}@layer mods{.multiSelectAllDisplayer:hover,:host(.is-highlighted) .multiSelectAllDisplayer{background-color:var(--palettes-neutral-50)}.multiSelectAllDisplayer:has(.checkboxField-input:checked){background-color:var(--palettes-50, var(--palettes-product-50))}.multiSelectAllDisplayer:has(.checkboxField-input:checked):hover,:host(.is-highlighted) .multiSelectAllDisplayer:has(.checkboxField-input:checked){background-color:var(--palettes-100, var(--palettes-product-100))}}@layer components{.multiSelectAllDisplayer-checkbox{margin-block:var(--components-options-item-padding-vertical) 0;margin-inline:var(--components-options-item-padding-horizontal) 0}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CheckboxInputComponent, selector: "lu-checkbox-input", inputs: ["checklist", "mixed"] }, { kind: "component", type: FormFieldComponent, selector: "lu-form-field", inputs: ["intl", "label", "hiddenLabel", "rolePresentationLabel", "inline", "statusControl", "tooltip", "tag", "AI", "iconAItooltip", "iconAIalt", "width", "invalid", "inlineMessage", "errorInlineMessage", "inlineMessageState", "size", "extraDescribedBy", "layout", "counter", "presentation"], outputs: ["rolePresentationLabelChange", "layoutChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LuMultiSelectAllHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuMultiSelectAllHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lu-multi-select-all-header', imports: [FormsModule, CheckboxInputComponent, FormFieldComponent], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [_CoreSelectPanelElement], template: `
-		<div class="multiSelectAllDisplayer">
+		<div class="multiSelectAllDisplayer" role="option">
 			<lu-form-field [label]="intl().selectAll">
 				<lu-checkbox-input
 					class="multiSelectAllDisplayer-checkbox"
@@ -942,12 +1015,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
 				/>
 			</lu-form-field>
 		</div>
-	`, styles: ["@layer components{:host{display:block;background-color:var(--palettes-neutral-0);border-block-end:1px solid var(--commons-border-200);padding-block:0 var(--pr-t-spacings-50);padding-inline:var(--components-options-item-padding-vertical);margin-inline:calc(-1 * var(--pr-t-spacings-50));scroll-margin-block-start:var(--pr-t-spacings-50)}}@layer components{.multiSelectAllDisplayer{border-radius:var(--pr-t-border-radius-default);cursor:pointer}.multiSelectAllDisplayer ::ng-deep .formLabel{inline-size:100%;padding-block:var(--components-options-item-padding-vertical);padding-inline:0}}@layer mods{.multiSelectAllDisplayer:hover,:host-context(.optionItem.is-highlighted) .multiSelectAllDisplayer{background-color:var(--palettes-neutral-50)}.multiSelectAllDisplayer:has(.checkboxField-input:checked){background-color:var(--palettes-50, var(--palettes-product-50))}.multiSelectAllDisplayer:has(.checkboxField-input:checked):hover,:host-context(.optionItem.is-highlighted) .multiSelectAllDisplayer:has(.checkboxField-input:checked){background-color:var(--palettes-100, var(--palettes-product-100))}}@layer components{.multiSelectAllDisplayer-checkbox{margin-block:var(--components-options-item-padding-vertical) 0;margin-inline:var(--components-options-item-padding-horizontal) 0}}\n"] }]
+	`, styles: ["@layer components{:host{display:block;background-color:var(--palettes-neutral-0);border-block-end:1px solid var(--commons-border-200);padding-block:0 var(--pr-t-spacings-50);padding-inline:var(--components-options-item-padding-vertical);margin-inline:calc(-1 * var(--pr-t-spacings-50));scroll-margin-block-start:var(--pr-t-spacings-50)}}@layer components{.multiSelectAllDisplayer{border-radius:var(--pr-t-border-radius-default);cursor:pointer}.multiSelectAllDisplayer ::ng-deep .formLabel{inline-size:100%;padding-block:var(--components-options-item-padding-vertical);padding-inline:0}}@layer mods{.multiSelectAllDisplayer:hover,:host(.is-highlighted) .multiSelectAllDisplayer{background-color:var(--palettes-neutral-50)}.multiSelectAllDisplayer:has(.checkboxField-input:checked){background-color:var(--palettes-50, var(--palettes-product-50))}.multiSelectAllDisplayer:has(.checkboxField-input:checked):hover,:host(.is-highlighted) .multiSelectAllDisplayer:has(.checkboxField-input:checked){background-color:var(--palettes-100, var(--palettes-product-100))}}@layer components{.multiSelectAllDisplayer-checkbox{margin-block:var(--components-options-item-padding-vertical) 0;margin-inline:var(--components-options-item-padding-horizontal) 0}}\n"] }]
         }], ctorParameters: () => [] });
 
 class LuMultiSelectWithSelectAllDirective extends _IsSelectedStrategy {
     #mode;
     #values;
+    #options;
     // only show panel header when no clue && values not empty
     #showPanelHeader;
     #hasValue;
@@ -962,7 +1036,22 @@ class LuMultiSelectWithSelectAllDirective extends _IsSelectedStrategy {
         super();
         this.select = inject(LuMultiSelectInputComponent);
         this.intl = this.select.intl;
-        this.displayerLabel = input.required({ ...(ngDevMode ? { debugName: "displayerLabel" } : /* istanbul ignore next */ {}), alias: 'withSelectAllDisplayerLabel' });
+        this.pluralRules = inject(LOCALE_PLURAL_RULES);
+        /**
+         * @deprecated use withSelectAllDisplayerLabelFn
+         */
+        this.displayerLabel = input(undefined, { ...(ngDevMode ? { debugName: "displayerLabel" } : /* istanbul ignore next */ {}), alias: 'withSelectAllDisplayerLabel' });
+        this.displayerLabelFn = input(undefined, { ...(ngDevMode ? { debugName: "displayerLabelFn" } : /* istanbul ignore next */ {}), alias: 'withSelectAllDisplayerLabelFn' });
+        this.displayerLabelValue = computed(() => {
+            const label = this.displayerLabelFn();
+            const count = this.displayerCount();
+            if (label) {
+                const result = label(count);
+                return typeof result === 'string' ? result : getIntlPluralLabel(this.pluralRules, result, count ?? 0);
+            }
+            return `${count} ${this.displayerLabel()}`;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "displayerLabelValue" }] : /* istanbul ignore next */ []));
         this.#mode = signal('none', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#mode" }] : /* istanbul ignore next */ []));
         this.#values = signal([], /* @ts-ignore */
@@ -971,6 +1060,17 @@ class LuMultiSelectWithSelectAllDirective extends _IsSelectedStrategy {
         this.values = this.#values.asReadonly();
         this.totalCount = toSignal(inject(CORE_SELECT_API_TOTAL_COUNT_PROVIDER).totalCount$, { initialValue: 0 });
         this.clueChange = toSignal(this.select.clueChange$);
+        this.#options = computed(() => this.select.options() ?? [], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#options" }] : /* istanbul ignore next */ []));
+        this.singleRemainingOption = computed(() => {
+            const options = this.#options();
+            const excludedValues = this.#values();
+            if (this.#mode() !== 'exclude' || options.length !== this.totalCount() || options.length - excludedValues.length !== 1) {
+                return undefined;
+            }
+            return options.find((option) => !excludedValues.some((excluded) => this.select.optionComparer()(excluded, option)));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "singleRemainingOption" }] : /* istanbul ignore next */ []));
         // only show panel header when no clue && values not empty
         this.#showPanelHeader = computed(() => isNil(this.clueChange()) || (this.clueChange()?.length === 0 && this.totalCount() !== 0), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#showPanelHeader" }] : /* istanbul ignore next */ []));
@@ -1016,8 +1116,10 @@ class LuMultiSelectWithSelectAllDirective extends _IsSelectedStrategy {
         this.select.hasValue = () => this.#hasValue();
         this.select.isFilterPillEmpty = computed(() => !this.#hasValue(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isFilterPillEmpty" }] : /* istanbul ignore next */ []));
-        this.select.useSingleOptionDisplayer = computed(() => this.#mode() === 'include', /* @ts-ignore */
+        this.select.useSingleOptionDisplayer = computed(() => this.#mode() === 'include' || this.singleRemainingOption() !== undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "useSingleOptionDisplayer" }] : /* istanbul ignore next */ []));
+        this.select.singleOptionForDisplay = computed(() => (this.#mode() === 'include' && this.#valuesCount() === 1 ? this.select.valueSignal()?.[0] : this.singleRemainingOption()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "singleOptionForDisplay" }] : /* istanbul ignore next */ []));
         this.select.valueLength = computed(() => this.displayerCount() ?? 0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "valueLength" }] : /* istanbul ignore next */ []));
     }
@@ -1112,8 +1214,8 @@ class LuMultiSelectWithSelectAllDirective extends _IsSelectedStrategy {
         // No match, keep the same mode
         return fromMode;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LuMultiSelectWithSelectAllDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.4", type: LuMultiSelectWithSelectAllDirective, isStandalone: true, selector: "lu-multi-select[withSelectAll]", inputs: { displayerLabel: { classPropertyName: "displayerLabel", publicName: "withSelectAllDisplayerLabel", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuMultiSelectWithSelectAllDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: LuMultiSelectWithSelectAllDirective, isStandalone: true, selector: "lu-multi-select[withSelectAll]", inputs: { displayerLabel: { classPropertyName: "displayerLabel", publicName: "withSelectAllDisplayerLabel", isSignal: true, isRequired: false, transformFunction: null }, displayerLabelFn: { classPropertyName: "displayerLabelFn", publicName: "withSelectAllDisplayerLabelFn", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: _IsSelectedStrategy,
                 useExisting: forwardRef(() => LuMultiSelectWithSelectAllDirective),
@@ -1124,7 +1226,7 @@ class LuMultiSelectWithSelectAllDirective extends _IsSelectedStrategy {
             },
         ], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LuMultiSelectWithSelectAllDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuMultiSelectWithSelectAllDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -1140,14 +1242,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                         },
                     ],
                 }]
-        }], ctorParameters: () => [], propDecorators: { displayerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "withSelectAllDisplayerLabel", required: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { displayerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "withSelectAllDisplayerLabel", required: false }] }], displayerLabelFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "withSelectAllDisplayerLabelFn", required: false }] }] } });
 
 class LuMultiSelectContentDisplayerComponent {
     constructor() {
         this.select = inject(LuMultiSelectInputComponent);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LuMultiSelectContentDisplayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", type: LuMultiSelectContentDisplayerComponent, isStandalone: true, selector: "lu-multi-select-content-displayer", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuMultiSelectContentDisplayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: LuMultiSelectContentDisplayerComponent, isStandalone: true, selector: "lu-multi-select-content-displayer", ngImport: i0, template: `
 		<div class="multipleSelect-displayer mod-filter">
 			<input type="text" autocomplete="off" #inputElement luMultiSelectDisplayerInput />
 			<div class="multipleSelect-displayer-filter">
@@ -1156,7 +1258,7 @@ class LuMultiSelectContentDisplayerComponent {
 		</div>
 	`, isInline: true, styles: ["@layer components{:host{display:block;inline-size:100%}}\n"], dependencies: [{ kind: "directive", type: LuMultiSelectDisplayerInputDirective, selector: "[luMultiSelectDisplayerInput]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LuMultiSelectContentDisplayerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuMultiSelectContentDisplayerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lu-multi-select-content-displayer', imports: [LuMultiSelectDisplayerInputDirective], template: `
 		<div class="multipleSelect-displayer mod-filter">
@@ -1208,9 +1310,9 @@ class LuMultiSelectCounterDisplayerComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LuMultiSelectCounterDisplayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: LuMultiSelectCounterDisplayerComponent, isStandalone: true, selector: "lu-multi-select-counter-displayer", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], ngImport: i0, template: `
-		<div class="multipleSelect-displayer mod-filter" [class.is-filled]="(selectedOptions$ | async)?.length > 0">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuMultiSelectCounterDisplayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: LuMultiSelectCounterDisplayerComponent, isStandalone: true, selector: "lu-multi-select-counter-displayer", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], ngImport: i0, template: `
+		<div class="multipleSelect-displayer mod-filter" [class.is-filled]="((selectedOptions$ | async)?.length ?? 0) > 0">
 			<input type="text" autocomplete="off" #inputElement luMultiSelectDisplayerInput />
 			@if (selectedOptions$ | async; as selectedOptions) {
 				<div class="multipleSelect-displayer-filter">
@@ -1219,7 +1321,7 @@ class LuMultiSelectCounterDisplayerComponent {
 							<ng-container *luOptionOutlet="select.displayerTpl(); value: selectedOptions[0]" />
 						</lu-chip>
 					}
-					@if (selectedOptions?.length > 1) {
+					@if ((selectedOptions?.length ?? 0) > 1) {
 						<lu-chip class="multipleSelect-displayer-chip" unkillable>{{ selectedOptions?.length }} {{ label() }}</lu-chip>
 					}
 				</div>
@@ -1227,10 +1329,10 @@ class LuMultiSelectCounterDisplayerComponent {
 		</div>
 	`, isInline: true, styles: ["@layer components{:host{display:block;inline-size:100%;min-inline-size:0}}\n"], dependencies: [{ kind: "ngmodule", type: LuTooltipModule }, { kind: "component", type: ChipComponent, selector: "lu-chip, button[luChip], a[luChip]", inputs: ["intl", "withEllipsis", "unkillable", "palette", "disabled", "size", "state", "icon"], outputs: ["kill"] }, { kind: "directive", type: _LuOptionOutletDirective, selector: "[luOptionOutlet]", inputs: ["luOptionOutlet", "luOptionOutletValue", "luOptionShowNull"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: LuMultiSelectDisplayerInputDirective, selector: "[luMultiSelectDisplayerInput]" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LuMultiSelectCounterDisplayerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuMultiSelectCounterDisplayerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lu-multi-select-counter-displayer', imports: [AsyncPipe, LuTooltipModule, ChipComponent, _LuOptionOutletDirective, FormsModule, LuMultiSelectDisplayerInputDirective], template: `
-		<div class="multipleSelect-displayer mod-filter" [class.is-filled]="(selectedOptions$ | async)?.length > 0">
+		<div class="multipleSelect-displayer mod-filter" [class.is-filled]="((selectedOptions$ | async)?.length ?? 0) > 0">
 			<input type="text" autocomplete="off" #inputElement luMultiSelectDisplayerInput />
 			@if (selectedOptions$ | async; as selectedOptions) {
 				<div class="multipleSelect-displayer-filter">
@@ -1239,7 +1341,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
 							<ng-container *luOptionOutlet="select.displayerTpl(); value: selectedOptions[0]" />
 						</lu-chip>
 					}
-					@if (selectedOptions?.length > 1) {
+					@if ((selectedOptions?.length ?? 0) > 1) {
 						<lu-chip class="multipleSelect-displayer-chip" unkillable>{{ selectedOptions?.length }} {{ label() }}</lu-chip>
 					}
 				</div>
@@ -1316,8 +1418,8 @@ class LuMultiSelectDefaultDisplayerComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LuMultiSelectDefaultDisplayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: LuMultiSelectDefaultDisplayerComponent, isStandalone: true, selector: "lu-multi-select-default-displayer", inputs: { intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuMultiSelectDefaultDisplayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: LuMultiSelectDefaultDisplayerComponent, isStandalone: true, selector: "lu-multi-select-default-displayer", inputs: { intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], ngImport: i0, template: `
 		<div class="multipleSelect-displayer">
 			<div class="multipleSelect-displayer-suffix">
 				<input [attr.aria-labelledby]="valueID" autocomplete="off" #inputElement (keydown.backspace)="inputBackspace()" (keydown.space)="inputSpace($event)" luMultiSelectDisplayerInput />
@@ -1335,7 +1437,7 @@ class LuMultiSelectDefaultDisplayerComponent {
 			</div>
 
 			@for (option of displayedOptions$ | async; track option; let index = $index) {
-				<lu-chip aria-hidden="true" class="multipleSelect-displayer-chip" withEllipsis (kill)="unselectOption(option, $event)" [unkillable]="select.disabled$ | async">
+				<lu-chip aria-hidden="true" class="multipleSelect-displayer-chip" withEllipsis (kill)="unselectOption(option, $event)" [unkillable]="(select.disabled$ | async) ?? false">
 					<ng-container *luOptionOutlet="select.displayerTpl(); value: option" />
 				</lu-chip>
 			}
@@ -1345,7 +1447,7 @@ class LuMultiSelectDefaultDisplayerComponent {
 		</div>
 	`, isInline: true, styles: ["@layer components{:host{display:block;inline-size:100%;min-inline-size:0}}\n"], dependencies: [{ kind: "ngmodule", type: LuTooltipModule }, { kind: "directive", type: _LuOptionOutletDirective, selector: "[luOptionOutlet]", inputs: ["luOptionOutlet", "luOptionOutletValue", "luOptionShowNull"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: LuMultiSelectDisplayerInputDirective, selector: "[luMultiSelectDisplayerInput]" }, { kind: "component", type: ChipComponent, selector: "lu-chip, button[luChip], a[luChip]", inputs: ["intl", "withEllipsis", "unkillable", "palette", "disabled", "size", "state", "icon"], outputs: ["kill"] }, { kind: "component", type: IconComponent, selector: "lu-icon, pr-icon", inputs: ["icon", "alt", "size", "color", "AI"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LuMultiSelectDefaultDisplayerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuMultiSelectDefaultDisplayerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lu-multi-select-default-displayer', imports: [AsyncPipe, LuTooltipModule, _LuOptionOutletDirective, FormsModule, LuMultiSelectDisplayerInputDirective, ChipComponent, IconComponent], template: `
 		<div class="multipleSelect-displayer">
@@ -1365,7 +1467,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
 			</div>
 
 			@for (option of displayedOptions$ | async; track option; let index = $index) {
-				<lu-chip aria-hidden="true" class="multipleSelect-displayer-chip" withEllipsis (kill)="unselectOption(option, $event)" [unkillable]="select.disabled$ | async">
+				<lu-chip aria-hidden="true" class="multipleSelect-displayer-chip" withEllipsis (kill)="unselectOption(option, $event)" [unkillable]="(select.disabled$ | async) ?? false">
 					<ng-container *luOptionOutlet="select.displayerTpl(); value: option" />
 				</lu-chip>
 			}
@@ -1387,48 +1489,16 @@ class LuMultiDisplayerDirective {
     static ngTemplateContextGuard(_dir, _ctx) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LuMultiDisplayerDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.4", type: LuMultiDisplayerDirective, isStandalone: true, selector: "[luMultiDisplayer]", inputs: { select: { classPropertyName: "select", publicName: "luMultiDisplayerSelect", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuMultiDisplayerDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: LuMultiDisplayerDirective, isStandalone: true, selector: "[luMultiDisplayer]", inputs: { select: { classPropertyName: "select", publicName: "luMultiDisplayerSelect", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LuMultiDisplayerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuMultiDisplayerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[luMultiDisplayer]',
                 }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { select: [{ type: i0.Input, args: [{ isSignal: true, alias: "luMultiDisplayerSelect", required: false }] }] } });
 
-function selectionToQueryParams(key, value, selector) {
-    if (value.mode === 'all' || value.mode === 'none') {
-        return {};
-    }
-    return { [value.mode === 'include' ? key : `-${key}`]: value.values.map(selector).join(',') };
-}
-/**
- * Transforms a selection from withSelectAll, the complete list of options and a getKey function to a list of options.
- *
- * @example
- * ```ts
- * const selection = { mode: 'exclude', values: [{ id: 1, name: 'foo' }] };
- * const allOptions = [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }, { id: 3, name: 'baz' }];
- *
- * const selectedOptions = selectionToOptions(selection, allOptions, (o) => o.id);
- * ```
- */
-function selectionToOptions(selection, options, getKeyFn) {
-    switch (selection.mode) {
-        case 'include':
-            return selection.values;
-        case 'exclude': {
-            const excludedKeys = new Set(selection.values.map(getKeyFn));
-            return options.filter((o) => !excludedKeys.has(getKeyFn(o)));
-        }
-        case 'all':
-            return options;
-        case 'none':
-            return [];
-    }
-}
-
 const required = (control) => {
     if (!control.value || control.value.mode === 'none') {
         return { required: true };
@@ -1443,5 +1513,5 @@ const LuMultiSelectionValidators = {
  * Generated bundle index. Do not edit.
  */
 
-export { LU_MULTI_SELECT_DISPLAYER_TRANSLATIONS, LU_MULTI_SELECT_TRANSLATIONS, LuMultiDisplayerDirective, LuMultiSelectContentDisplayerComponent, LuMultiSelectCounterDisplayerComponent, LuMultiSelectDefaultDisplayerComponent, LuMultiSelectDisplayerInputDirective, LuMultiSelectInputComponent, LuMultiSelectWithSelectAllDirective, LuMultiSelectionValidators, luMultiSelectDisplayerTranslations, luMultiSelectTranslations, selectionToOptions, selectionToQueryParams };
+export { LU_MULTI_SELECT_DISPLAYER_TRANSLATIONS, LU_MULTI_SELECT_TRANSLATIONS, LuMultiDisplayerDirective, LuMultiSelectContentDisplayerComponent, LuMultiSelectCounterDisplayerComponent, LuMultiSelectDefaultDisplayerComponent, LuMultiSelectDisplayerInputDirective, LuMultiSelectInputComponent, LuMultiSelectWithSelectAllDirective, LuMultiSelectionValidators, listSeparators, luMultiSelectDisplayerTranslations, luMultiSelectTranslations, selectionToOptions, selectionToQueryParams };
 //# sourceMappingURL=lucca-front-ng-multi-select.mjs.map