@lucca-front/ng 20.3.3-rc.1 → 20.3.3-rc.3

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

@@ -1,13 +1,14 @@
-import { NgTemplateOutlet, AsyncPipe, NgPlural, NgPluralCase } from '@angular/common';
+import { AsyncPipe, NgTemplateOutlet, NgPlural, NgPluralCase } from '@angular/common';
 import * as i0 from '@angular/core';
 import { InjectionToken, inject, Pipe, signal, computed, forwardRef, ChangeDetectionStrategy, Component, Injector, ChangeDetectorRef, ElementRef, Injectable, model, viewChild, ViewContainerRef, booleanAttribute, numberAttribute, HostListener, HostBinding, Input, ViewEncapsulation, DestroyRef, Directive, effect, input, ViewChild } from '@angular/core';
-import { toObservable, toSignal, takeUntilDestroyed, outputToObservable } from '@angular/core/rxjs-interop';
+import { toSignal, takeUntilDestroyed, outputToObservable } from '@angular/core/rxjs-interop';
 import * as i2 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i1$1 from '@lucca-front/ng/core-select';
-import { LuSelectPanelRef, ɵIsSelectedStrategy as _IsSelectedStrategy, SELECT_ID, CoreSelectKeyManager, ɵgetGroupTemplateLocation as _getGroupTemplateLocation, ɵLuOptionComponent as _LuOptionComponent, ɵCoreSelectPanelElement as _CoreSelectPanelElement, LuIsOptionSelectedPipe, ɵLuOptionGroupPipe as _LuOptionGroupPipe, TreeDisplayPipe, SELECT_PANEL_INSTANCE, SELECT_LABEL_ID, addAttributesOnCdkContainer, ALuSelectInputComponent, ɵLuOptionOutletDirective as _LuOptionOutletDirective, provideLuSelectLabelsAndIds, LU_OPTION_CONTEXT, CORE_SELECT_API_TOTAL_COUNT_PROVIDER } from '@lucca-front/ng/core-select';
+import { LuSelectPanelRef, ɵIsSelectedStrategy as _IsSelectedStrategy, SELECT_ID, CoreSelectKeyManager, ɵgetGroupTemplateLocation as _getGroupTemplateLocation, LuIsOptionSelectedPipe, ɵLuOptionComponent as _LuOptionComponent, ɵLuOptionGroupPipe as _LuOptionGroupPipe, ɵCoreSelectPanelElement as _CoreSelectPanelElement, TreeDisplayPipe, SELECT_PANEL_INSTANCE, SELECT_LABEL_ID, addAttributesOnCdkContainer, ALuSelectInputComponent, ɵLuOptionOutletDirective as _LuOptionOutletDirective, provideLuSelectLabelsAndIds, LU_OPTION_CONTEXT, CORE_SELECT_API_TOTAL_COUNT_PROVIDER } from '@lucca-front/ng/core-select';
 import { LuTooltipModule } from '@lucca-front/ng/tooltip';
 import { EMPTY, takeUntil, Subject, of, BehaviorSubject } from 'rxjs';
+import { ClearComponent } from '@lucca-front/ng/clear';
 import { getIntl, PortalDirective } from '@lucca-front/ng/core';
 import { FilterPillDisplayerDirective, FilterPillLabelDirective, FILTER_PILL_INPUT_COMPONENT } from '@lucca-front/ng/filter-pills';
 import { Overlay, OverlayPositionBuilder, ScrollStrategyOptions } from '@angular/cdk/overlay';
@@ -15,116 +16,125 @@ import { ComponentPortal } from '@angular/cdk/portal';
 import { A11yModule } from '@angular/cdk/a11y';
 import { IconComponent } from '@lucca-front/ng/icon';
 import { TreeBranchComponent } from '@lucca-front/ng/tree-select';
-import { map, startWith, switchMap } from 'rxjs/operators';
+import { ChipComponent } from '@lucca-front/ng/chip';
+import { startWith, switchMap, map } from 'rxjs/operators';
 import * as i1 from '@lucca-front/ng/form-field';
 import { InputDirective, FormFieldComponent } from '@lucca-front/ng/form-field';
 import { NumericBadgeComponent } from '@lucca-front/ng/numeric-badge';
 import { CheckboxInputComponent } from '@lucca-front/ng/forms';
 
 const Translations$1 = {
-    en: {
-        placeholder: 'Select an option',
-        search: 'Search',
-        clear: 'Clear selection',
-        clearSearch: 'Clear search',
-        emptyResults: 'Your search did not produce any results.',
-        emptySelection: 'Select items from the list on the left to start',
-        expand: 'Expand',
-        reduce: 'Collapse',
-        selectAll: 'Select all',
-        unselectAll: 'Deselect all',
-        loading: 'Loading...',
-    },
-    de: {
-        placeholder: 'Wählen Sie eine Option',
-        search: 'Suchen',
-        clear: 'Auswahl leeren',
-        clearSearch: 'Suche leeren',
-        emptyResults: 'Keine Ergebnisse für Ihre Suche',
-        emptySelection: 'Wählen Sie zuerst die Items in der Liste links aus.',
-        expand: 'Erweitern',
-        reduce: 'Reduzieren',
-        selectAll: 'Alles auswählen',
-        unselectAll: 'Alles abwählen',
-        loading: 'Lädt...',
-    },
-    fr: {
-        placeholder: 'Sélectionnez une option',
-        search: 'Rechercher',
-        clear: 'Vider la sélection',
-        clearSearch: 'Vider la recherche',
-        emptyResults: 'Aucun résultat pour votre recherche',
-        emptySelection: 'Sélectionnez les éléments dans la liste de gauche pour commencer',
-        expand: 'Étendre',
-        reduce: 'Réduire',
-        selectAll: 'Tout sélectionner',
-        unselectAll: 'Tout désélectionner',
-        loading: 'Chargement en cours...',
-    },
-    it: {
-        placeholder: 'Seleziona un’opzione',
-        search: 'Cercare',
-        clear: 'Cancellare la selezione',
-        clearSearch: 'Cancellare la ricerca',
-        emptyResults: 'Nessun risultato per la ricerca',
-        emptySelection: 'Per iniziare, seleziona gli elementi dall’elenco a sinistra',
-        expand: 'Estendere',
-        reduce: 'Ridurre',
-        selectAll: 'Selezionare tutto',
-        unselectAll: 'Deselezionare tutto',
-        loading: 'Caricamento in corso...',
-    },
-    nl: {
+    'nl-BE': {
         placeholder: 'Selecteer een optie',
         search: 'Zoeken',
         clear: 'Selectie leegmaken',
         clearSearch: 'Zoekopdracht leegmaken',
-        emptyResults: 'Geen resultaten voor uw zoekopdracht',
+        emptyResults: 'Uw zoekopdracht heeft geen resultaat opgeleverd.',
         emptySelection: 'Selecteer elementen uit de lijst aan de linkerkant om te beginnen',
         expand: 'Vergroten',
         reduce: 'Verkleinen',
         selectAll: 'Alles selecteren',
         unselectAll: 'Alles deselecteren',
         loading: 'Bezig met laden...',
+        emptyOptions: 'Er zijn geen waarden beschikbaar. Neem contact op met uw beheerder voor meer informatie.',
     },
-    'nl-BE': {
+    nl: {
         placeholder: 'Selecteer een optie',
         search: 'Zoeken',
         clear: 'Selectie leegmaken',
         clearSearch: 'Zoekopdracht leegmaken',
-        emptyResults: 'Geen resultaten voor uw zoekopdracht',
+        emptyResults: 'Uw zoekopdracht heeft geen resultaat opgeleverd.',
         emptySelection: 'Selecteer elementen uit de lijst aan de linkerkant om te beginnen',
         expand: 'Vergroten',
         reduce: 'Verkleinen',
         selectAll: 'Alles selecteren',
         unselectAll: 'Alles deselecteren',
         loading: 'Bezig met laden...',
+        emptyOptions: 'Er zijn geen waarden beschikbaar. Neem contact op met uw beheerder voor meer informatie.',
     },
-    es: {
-        placeholder: 'Seleccione una opción',
-        search: 'Buscar',
-        clear: 'Vaciar la selección',
-        clearSearch: 'Vaciar la búsqueda',
-        emptyResults: 'No hay resultados para su búsqueda',
-        emptySelection: 'Seleccione los elementos de la lista de la izquierda para empezar',
-        expand: 'Expandir',
-        reduce: 'Reducir',
-        selectAll: 'Seleccionar todo',
-        unselectAll: 'Desmarcar todo',
-        loading: 'Cargando...',
+    it: {
+        placeholder: 'Seleziona un’opzione',
+        search: 'Cercare',
+        clear: 'Cancellare la selezione',
+        clearSearch: 'Cancellare la ricerca',
+        emptyResults: 'La ricerca non ha prodotto risultati.',
+        emptySelection: 'Per iniziare, seleziona gli elementi dall’elenco a sinistra',
+        expand: 'Estendere',
+        reduce: 'Ridurre',
+        selectAll: 'Selezionare tutto',
+        unselectAll: 'Deselezionare tutto',
+        loading: 'Caricamento in corso...',
+        emptyOptions: "Nessun valore disponibile. Contatta l'amministratore per maggiori informazioni.",
+    },
+    fr: {
+        placeholder: 'Sélectionnez une option',
+        search: 'Rechercher',
+        clear: 'Vider la sélection',
+        clearSearch: 'Vider la recherche',
+        emptyResults: "Votre recherche n'a donné aucun résultat.",
+        emptySelection: 'Sélectionnez les éléments dans la liste de gauche pour commencer',
+        expand: 'Étendre',
+        reduce: 'Réduire',
+        selectAll: 'Tout sélectionner',
+        unselectAll: 'Tout désélectionner',
+        loading: 'Chargement en cours...',
+        emptyOptions: "Aucune valeur n'est disponible. Contactez votre administrateur pour plus d'informations.",
     },
     pt: {
         placeholder: 'Selecione uma opção',
         search: 'Pesquisar',
         clear: 'Limpar seleção',
         clearSearch: 'Limpar pesquisa',
-        emptyResults: 'Nenhum resultado para sua pesquisa',
+        emptyResults: 'A sua pesquisa não produziu resultados.',
         emptySelection: 'Selecione itens na lista à esquerda para começar',
         expand: 'Expandir',
         reduce: 'Reduzir',
         selectAll: 'Selecionar tudo',
         unselectAll: 'Desmarcar tudo',
         loading: 'Carregando...',
+        emptyOptions: 'Não existe nenhum valor disponível. Contacte o seu administrador para obter mais informações.',
+    },
+    es: {
+        placeholder: 'Seleccione una opción',
+        search: 'Buscar',
+        clear: 'Vaciar la selección',
+        clearSearch: 'Vaciar la búsqueda',
+        emptyResults: 'Su búsqueda no ha dado ningún de resultado.',
+        emptySelection: 'Seleccione los elementos de la lista de la izquierda para empezar',
+        expand: 'Expandir',
+        reduce: 'Reducir',
+        selectAll: 'Seleccionar todo',
+        unselectAll: 'Desmarcar todo',
+        loading: 'Cargando...',
+        emptyOptions: 'No hay ningún valor disponible. Póngase en contacto con su administrador para obtener más información.',
+    },
+    de: {
+        placeholder: 'Wählen Sie eine Option',
+        search: 'Suchen',
+        clear: 'Auswahl leeren',
+        clearSearch: 'Suche leeren',
+        emptyResults: 'Ihre Suche hat kein Resultat ergeben.',
+        emptySelection: 'Wählen Sie zuerst die Items in der Liste links aus.',
+        expand: 'Erweitern',
+        reduce: 'Reduzieren',
+        selectAll: 'Alles auswählen',
+        unselectAll: 'Alles abwählen',
+        loading: 'Lädt...',
+        emptyOptions: 'Es ist kein Wert verfügbar. Wenden Sie sich für weitere Informationen an Ihren Administrator.',
+    },
+    en: {
+        placeholder: 'Select an option',
+        search: 'Search',
+        clear: 'Clear selection',
+        clearSearch: 'Clear search',
+        emptyResults: 'Your search did not produce any results.',
+        emptySelection: 'Select items from the list on the left to start',
+        expand: 'Expand',
+        reduce: 'Collapse',
+        selectAll: 'Select all',
+        unselectAll: 'Deselect all',
+        loading: 'Loading...',
+        emptyOptions: 'No values are provided. Contact your administrator for more information.',
     },
 };
 
@@ -147,14 +157,13 @@ class LuOptionsGroupContextPipe {
             isGroupSelected: this.#selectionStrategy.isGroupSelected(groupOptions, notSelectedOptions),
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: LuOptionsGroupContextPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.12", ngImport: i0, type: LuOptionsGroupContextPipe, isStandalone: true, name: "luOptionsGroupContext" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: LuOptionsGroupContextPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.0.2", ngImport: i0, type: LuOptionsGroupContextPipe, isStandalone: true, name: "luOptionsGroupContext" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: LuOptionsGroupContextPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: LuOptionsGroupContextPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'luOptionsGroupContext',
-                    standalone: true,
                     pure: true,
                 }]
         }] });
@@ -166,7 +175,7 @@ class LuMultiSelectPanelComponent {
         this.selectId = inject(SELECT_ID);
         this.intl = getIntl(LU_MULTI_SELECT_TRANSLATIONS);
         this.options$ = this.selectInput.options$;
-        this.grouping = this.selectInput.groupingSignal;
+        this.grouping = this.selectInput.grouping;
         this.treeGenerator = this.selectInput.treeGenerator;
         this.loading$ = this.selectInput.loading$;
         this.searchable = this.selectInput.searchable;
@@ -177,7 +186,7 @@ class LuMultiSelectPanelComponent {
         this.trackBranchesBy = (_, option) => this.optionKey(option.node);
         this.selectedOptions = this.selectInput.value || [];
         this.optionTpl = this.selectInput.optionTpl;
-        this.options = signal([], ...(ngDevMode ? [{ debugName: "options" }] : []));
+        this.options = signal([]);
         this.keyManager = inject(CoreSelectKeyManager);
         this.someGroupOptionEnabled = computed(() => {
             return (groupOptions) => {
@@ -186,11 +195,10 @@ class LuMultiSelectPanelComponent {
                     .map((o) => this.optionKey(o.option()));
                 return groupOptions.some((option) => !disabledOptionIds.includes(this.optionKey(option)));
             };
-        }, ...(ngDevMode ? [{ debugName: "someGroupOptionEnabled" }] : []));
-        this.hasGrouping$ = toObservable(this.grouping).pipe(map((grouping) => !!grouping));
+        });
         this.clueChange$ = this.selectInput.clue$;
         this.shouldDisplayAddOption$ = this.selectInput.shouldDisplayAddOption$;
-        this.groupTemplateLocation$ = _getGroupTemplateLocation(this.hasGrouping$, this.clueChange$, this.options$, this.searchable);
+        this.groupTemplateLocation$ = _getGroupTemplateLocation(!!this.grouping, this.clueChange$, this.options$, this.searchable);
     }
     onScroll(evt) {
         if (!(evt.target instanceof HTMLElement)) {
@@ -246,18 +254,18 @@ class LuMultiSelectPanelComponent {
             this.keyManager.highlightOption(this.selectedOptions[0]);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: LuMultiSelectPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: LuMultiSelectPanelComponent, isStandalone: true, selector: "lu-select-panel", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: LuMultiSelectPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: LuMultiSelectPanelComponent, isStandalone: true, selector: "lu-select-panel", providers: [
             CoreSelectKeyManager,
             {
                 provide: SELECT_PANEL_INSTANCE,
                 useExisting: forwardRef(() => LuMultiSelectPanelComponent),
             },
-        ], ngImport: i0, template: "@if (\n\t{\n\t\toptions: (options$ | async) || [],\n\t\tgroupTemplateLocation: groupTemplateLocation$ | async,\n\t\tshouldDisplayAddOption: shouldDisplayAddOption$ | async,\n\t};\n\tas ctx\n) {\n\t<div class=\"lu-picker-panel lu-option-picker-panel mod-multiple\" data-testid=\"dialog-panel\">\n\t\t<div\n\t\t\tclass=\"lu-picker-content\"\n\t\t\t[class.is-loading]=\"loading$ | async\"\n\t\t\t[class.is-filled]=\"ctx.options.length > 0\"\n\t\t\ttabindex=\"0\"\n\t\t\trole=\"listbox\"\n\t\t\taria-multiselectable=\"true\"\n\t\t\t(scroll)=\"onScroll($event)\"\n\t\t>\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\t<div class=\"lu-picker-content-option\">\n\t\t\t\t@if (grouping() && ctx.groupTemplateLocation === \"group-header\") {\n\t\t\t\t\t@for (\n\t\t\t\t\t\tgroup of ctx.options | luOptionGroup: grouping().selector;\n\t\t\t\t\t\ttrack trackGroupsBy(groupIndex, group);\n\t\t\t\t\t\tlet groupIndex = $index\n\t\t\t\t\t) {\n\t\t\t\t\t\t<div class=\"lu-picker-content-group\" role=\"group\" attr.aria-labelledby=\"lu-select-{{ selectId }}-group-{{ groupIndex }}\">\n\t\t\t\t\t\t\t@let groupCtx = group.options | luOptionsGroupContext: selectedOptions : optionComparer;\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tluCoreSelectPanelElement\n\t\t\t\t\t\t\t\telementId=\"lu-select-{{ selectId }}-group-{{ groupIndex }}\"\n\t\t\t\t\t\t\t\tclass=\"lu-picker-content-option-group-title\"\n\t\t\t\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t\t\t\t(selected)=\"toggleOptions(groupCtx.notSelectedOptions, group.options)\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span #groupingTitleRef>\n\t\t\t\t\t\t\t\t\t<ng-container *luPortal=\"grouping().content; context: { $implicit: group }\" />\n\t\t\t\t\t\t\t\t</span>\n\n\t\t\t\t\t\t\t\t@if (someGroupOptionEnabled()(group.options)) {\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tclass=\"link\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"toggleOptions(groupCtx.notSelectedOptions, group.options)\"\n\t\t\t\t\t\t\t\t\t\t[id]=\"selectId + '-group-' + group.key\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\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\t\t>{{ groupCtx.isGroupSelected ? intl.unselectAll : intl.selectAll }}\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<ng-template\n\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"optionsList\"\n\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: group.options, groupIndex: groupIndex }\"\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}\n\t\t\t\t@if (!grouping() || ctx.groupTemplateLocation !== \"group-header\") {\n\t\t\t\t\t<ng-template [ngTemplateOutlet]=\"optionsList\" [ngTemplateOutletContext]=\"{ $implicit: ctx.options }\" />\n\t\t\t\t}\n\t\t\t\t<ng-template #optionsList let-options let-groupIndex=\"groupIndex\">\n\t\t\t\t\t@if (treeGenerator) {\n\t\t\t\t\t\t@for (branch of options | luTreeDisplay: treeGenerator; let index = $index; track trackBranchesBy(index, branch)) {\n\t\t\t\t\t\t\t<lu-tree-branch\n\t\t\t\t\t\t\t\t[branch]=\"branch\"\n\t\t\t\t\t\t\t\t[optionTpl]=\"optionTpl()\"\n\t\t\t\t\t\t\t\t[selectedOptions]=\"selectedOptions\"\n\t\t\t\t\t\t\t\t[optionComparer]=\"optionComparer\"\n\t\t\t\t\t\t\t\t[optionIndex]=\"index\"\n\t\t\t\t\t\t\t\t(toggleOne)=\"toggleOption($event)\"\n\t\t\t\t\t\t\t\t(selectMany)=\"toggleOptions($event, [])\"\n\t\t\t\t\t\t\t\t(unselectMany)=\"toggleOptions([], $event)\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t}\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t@for (option of options; track trackOptionsBy(index, option); let index = $index) {\n\t\t\t\t\t\t\t<lu-select-option\n\t\t\t\t\t\t\t\tluCoreSelectPanelElement\n\t\t\t\t\t\t\t\t[option]=\"option\"\n\t\t\t\t\t\t\t\t[optionTpl]=\"optionTpl()\"\n\t\t\t\t\t\t\t\t[optionIndex]=\"index\"\n\t\t\t\t\t\t\t\t[grouping]=\"ctx.groupTemplateLocation === 'option' ? grouping() : undefined\"\n\t\t\t\t\t\t\t\t[groupIndex]=\"groupIndex\"\n\t\t\t\t\t\t\t\t[groupTemplateLocation]=\"ctx.groupTemplateLocation\"\n\t\t\t\t\t\t\t\t[scrollIntoViewOptions]=\"{ block: 'nearest' }\"\n\t\t\t\t\t\t\t\t[isSelected]=\"option | luIsOptionSelected: optionComparer : selectedOptions\"\n\t\t\t\t\t\t\t\t(selected)=\"toggleOption(option)\"\n\t\t\t\t\t\t\t\t(click)=\"toggleOption(option)\"\n\t\t\t\t\t\t\t\t[class.withAddOption]=\"ctx.shouldDisplayAddOption\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t</ng-template>\n\t\t\t\t@if (ctx.options.length === 0 && (loading$ | async) === false) {\n\t\t\t\t\t<div class=\"lu-picker-content-option-emptyState\">\n\t\t\t\t\t\t{{ intl.emptyResults }}\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t@if (loading$ | async) {\n\t\t\t\t<div class=\"lu-picker-content-loading\">\n\t\t\t\t\t<div class=\"loading\">{{ intl.loading }}</div>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@if (ctx.shouldDisplayAddOption) {\n\t\t\t\t<div\n\t\t\t\t\tclass=\"addOption palette-product\"\n\t\t\t\t\t(click)=\"selectInput.emitAddOption()\"\n\t\t\t\t\t(selected)=\"selectInput.emitAddOption()\"\n\t\t\t\t\telementId=\"picker-content-add\"\n\t\t\t\t\tluCoreSelectPanelElement\n\t\t\t\t>\n\t\t\t\t\t<lu-icon icon=\"mathsPlus\" />\n\t\t\t\t\t<ng-container *luPortal=\"selectInput.addOptionLabel\" />\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t</div>\n}\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 mods{.addOption{--components-button-font: var(--pr-t-font-body-M);--components-button-borderRadius: var(--pr-t-border-radius-default);--components-button-paddingBlock: var(--pr-t-spacings-100);--components-button-paddingInline: var(--pr-t-spacings-150);--components-button-paddingBlockStart: var(--components-button-paddingBlock);--components-button-paddingBlockEnd: var(--components-button-paddingBlock);--components-button-paddingInlineStart: var(--components-button-paddingInline);--components-button-paddingInlineEnd: var(--components-button-paddingInline);--components-button-padding: var(--components-button-paddingBlockStart) var(--components-button-paddingInlineEnd) var(--components-button-paddingBlockEnd) var(--components-button-paddingInlineStart);--components-button-gap: var(--pr-t-spacings-100);--components-button-opacity: 1;--components-button-cursor: pointer;--components-button-pointerEvents: auto;--components-button-width: auto;--components-button-minWidth: none;--components-button-userSelect: auto;--components-button-boxShadow: var(--pr-t-elevation-shadow-button);--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));--components-button-backgroundColor: var(--palettes-700, var(--palettes-product-700));--components-button-arrow-transform: none;--components-button-font-size: var(--pr-t-font-body-M-fontSize);--components-button-line-height: var(--pr-t-font-body-M-lineHeight);--icon-size: 1.5rem;background-color:var(--components-button-backgroundColor);box-shadow:var(--components-button-boxShadow);border-radius:var(--components-button-borderRadius);padding:var(--components-button-padding);transition-property:background-color,color,border-color,box-shadow;transition-duration:var(--commons-animations-durations-fast);inline-size:var(--components-button-width);min-inline-size:var(--components-button-minWidth);font:var(--components-button-font);font-size:var(--components-button-font-size);line-height:var(--components-button-line-height);font-weight:var(--pr-t-font-fontWeight-semibold);gap:var(--components-button-gap);pointer-events:var(--components-button-pointerEvents);-webkit-user-select:var(--components-button-userSelect);user-select:var(--components-button-userSelect);opacity:var(--components-button-opacity);cursor:var(--components-button-cursor);transition-timing-function:ease;display:inline-flex;align-items:center;justify-content:center;position:relative;text-decoration:none;vertical-align:middle;text-wrap:balance;text-align:center;border:0}.addOption,.addOption:is(a){color:var(--components-button-color)}.addOption .lucca-icon{display:block}.addOption .button-icon{--icon-size: 1.5rem}.addOption:not(.mod-outlined,.mod-outline) .numericBadge{--components-numericBadge-background: var(--palettes-200, var(--palettes-product-200));--components-numericBadge-color: var(--palettes-800, var(--palettes-product-800))}.addOption:hover{--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));--components-button-backgroundColor: var(--palettes-800, var(--palettes-product-800))}.addOption:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:2px;border-radius:var(--components-button-borderRadius)}.addOption:active{--components-button-backgroundColor: var(--palettes-900, var(--palettes-product-900))}.addOption:disabled{--components-button-cursor: default;--components-button-color: var(--palettes-neutral-500);--components-button-backgroundColor: var(--commons-disabled-background);--components-button-pointerEvents: none}.addOption:disabled .numericBadge{--components-numericBadge-background: var(--palettes-neutral-200);--components-numericBadge-color: var(--palettes-neutral-500)}.addOption{--components-button-width: 100%;--components-button-backgroundColor: transparent;--components-button-color: var(--palettes-700, var(--pr-t-color-text-subtle));--components-button-boxShadow: none}.addOption:hover,.addOption:focus-visible{--components-button-color: var(--palettes-700, var(--pr-t-color-text-subtle));--components-button-backgroundColor: var(--palettes-50, var(--palettes-neutral-50))}.addOption:active{--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.addOption:disabled{--components-button-backgroundColor: transparent;--components-button-color: var(--pr-t-color-text-disabled)}.addOption{justify-content:left}.addOption.is-highlighted{--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: _LuOptionComponent, selector: "lu-select-option", inputs: ["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: IconComponent, selector: "lu-icon", inputs: ["icon", "alt", "size", "color", "AI"] }, { kind: "component", type: TreeBranchComponent, selector: "lu-tree-branch", inputs: ["branch", "optionTpl", "optionIndex", "optionComparer", "selectedOptions", "simpleMode", "depth"], outputs: ["toggleOne", "selectMany", "unselectMany"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { 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: "@if (\n\t{\n\t\toptions: (options$ | async) || [],\n\t\tclueChange: (clueChange$ | async) || \"\",\n\t\tgroupTemplateLocation: groupTemplateLocation$ | async,\n\t\tshouldDisplayAddOption: shouldDisplayAddOption$ | async,\n\t};\n\tas ctx\n) {\n\t<div class=\"lu-picker-panel lu-option-picker-panel mod-multiple\" data-testid=\"dialog-panel\">\n\t\t<div\n\t\t\tclass=\"lu-picker-content\"\n\t\t\t[class.is-loading]=\"loading$ | async\"\n\t\t\t[class.is-filled]=\"ctx.options.length > 0\"\n\t\t\ttabindex=\"0\"\n\t\t\trole=\"listbox\"\n\t\t\taria-multiselectable=\"true\"\n\t\t\t(scroll)=\"onScroll($event)\"\n\t\t>\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\t<div class=\"lu-picker-content-option\">\n\t\t\t\t@if (grouping && ctx.groupTemplateLocation === \"group-header\") {\n\t\t\t\t\t@for (group of ctx.options | luOptionGroup: grouping.selector; track trackGroupsBy(groupIndex, group); let groupIndex = $index) {\n\t\t\t\t\t\t<div class=\"lu-picker-content-group\" role=\"group\" attr.aria-labelledby=\"lu-select-{{ selectId }}-group-{{ groupIndex }}\">\n\t\t\t\t\t\t\t@let groupCtx = group.options | luOptionsGroupContext: selectedOptions : optionComparer;\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tluCoreSelectPanelElement\n\t\t\t\t\t\t\t\telementId=\"lu-select-{{ selectId }}-group-{{ groupIndex }}\"\n\t\t\t\t\t\t\t\tclass=\"lu-picker-content-option-group-title\"\n\t\t\t\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t\t\t\t(selected)=\"toggleOptions(groupCtx.notSelectedOptions, group.options)\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span #groupingTitleRef>\n\t\t\t\t\t\t\t\t\t<ng-container *luPortal=\"grouping.content; context: { $implicit: group }\" />\n\t\t\t\t\t\t\t\t</span>\n\n\t\t\t\t\t\t\t\t@if (someGroupOptionEnabled()(group.options)) {\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tclass=\"link\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"toggleOptions(groupCtx.notSelectedOptions, group.options)\"\n\t\t\t\t\t\t\t\t\t\t[id]=\"selectId + '-group-' + group.key\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\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\t\t>{{ groupCtx.isGroupSelected ? intl.unselectAll : intl.selectAll }}\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<ng-template\n\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"optionsList\"\n\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: group.options, groupIndex: groupIndex }\"\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}\n\t\t\t\t@if (!grouping || ctx.groupTemplateLocation !== \"group-header\") {\n\t\t\t\t\t<ng-template [ngTemplateOutlet]=\"optionsList\" [ngTemplateOutletContext]=\"{ $implicit: ctx.options }\" />\n\t\t\t\t}\n\t\t\t\t<ng-template #optionsList let-options let-groupIndex=\"groupIndex\">\n\t\t\t\t\t@if (treeGenerator) {\n\t\t\t\t\t\t@for (branch of options | luTreeDisplay: treeGenerator; let index = $index; track trackBranchesBy(index, branch)) {\n\t\t\t\t\t\t\t<lu-tree-branch\n\t\t\t\t\t\t\t\t[branch]=\"branch\"\n\t\t\t\t\t\t\t\t[optionTpl]=\"optionTpl()\"\n\t\t\t\t\t\t\t\t[selectedOptions]=\"selectedOptions\"\n\t\t\t\t\t\t\t\t[optionComparer]=\"optionComparer\"\n\t\t\t\t\t\t\t\t[optionIndex]=\"index\"\n\t\t\t\t\t\t\t\t(toggleOne)=\"toggleOption($event)\"\n\t\t\t\t\t\t\t\t(selectMany)=\"toggleOptions($event, [])\"\n\t\t\t\t\t\t\t\t(unselectMany)=\"toggleOptions([], $event)\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t}\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t@for (option of options; track trackOptionsBy(index, option); let index = $index) {\n\t\t\t\t\t\t\t<lu-select-option\n\t\t\t\t\t\t\t\tluCoreSelectPanelElement\n\t\t\t\t\t\t\t\t[option]=\"option\"\n\t\t\t\t\t\t\t\t[optionTpl]=\"optionTpl()\"\n\t\t\t\t\t\t\t\t[optionIndex]=\"index\"\n\t\t\t\t\t\t\t\t[grouping]=\"ctx.groupTemplateLocation === 'option' ? grouping : undefined\"\n\t\t\t\t\t\t\t\t[groupIndex]=\"groupIndex\"\n\t\t\t\t\t\t\t\t[groupTemplateLocation]=\"ctx.groupTemplateLocation\"\n\t\t\t\t\t\t\t\t[scrollIntoViewOptions]=\"{ block: 'nearest' }\"\n\t\t\t\t\t\t\t\t[isSelected]=\"option | luIsOptionSelected: optionComparer : selectedOptions\"\n\t\t\t\t\t\t\t\t(selected)=\"toggleOption(option)\"\n\t\t\t\t\t\t\t\t(click)=\"toggleOption(option)\"\n\t\t\t\t\t\t\t\t[class.withAddOption]=\"ctx.shouldDisplayAddOption\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t</ng-template>\n\t\t\t\t@if (ctx.options.length === 0 && (loading$ | async) === false) {\n\t\t\t\t\t<div class=\"lu-picker-content-option-emptyState\">\n\t\t\t\t\t\t{{ ctx.clueChange.length ? intl.emptyResults : intl.emptyOptions }}\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t@if (loading$ | async) {\n\t\t\t\t<div class=\"lu-picker-content-loading\">\n\t\t\t\t\t<div class=\"loading\">{{ intl.loading }}</div>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@if (ctx.shouldDisplayAddOption) {\n\t\t\t\t<div\n\t\t\t\t\tclass=\"addOption palette-product\"\n\t\t\t\t\t(click)=\"selectInput.emitAddOption()\"\n\t\t\t\t\t(selected)=\"selectInput.emitAddOption()\"\n\t\t\t\t\telementId=\"picker-content-add\"\n\t\t\t\t\tluCoreSelectPanelElement\n\t\t\t\t>\n\t\t\t\t\t<lu-icon icon=\"mathsPlus\" />\n\t\t\t\t\t<ng-container *luPortal=\"selectInput.addOptionLabel\" />\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t</div>\n}\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 mods{.addOption{--components-button-font: var(--pr-t-font-body-M);--components-button-borderRadius: var(--pr-t-border-radius-default);--components-button-paddingBlock: var(--pr-t-spacings-100);--components-button-paddingInline: var(--pr-t-spacings-150);--components-button-paddingBlockStart: var(--components-button-paddingBlock);--components-button-paddingBlockEnd: var(--components-button-paddingBlock);--components-button-paddingInlineStart: var(--components-button-paddingInline);--components-button-paddingInlineEnd: var(--components-button-paddingInline);--components-button-padding: var(--components-button-paddingBlockStart) var(--components-button-paddingInlineEnd) var(--components-button-paddingBlockEnd) var(--components-button-paddingInlineStart);--components-button-gap: var(--pr-t-spacings-100);--components-button-opacity: 1;--components-button-cursor: pointer;--components-button-pointerEvents: auto;--components-button-width: auto;--components-button-minWidth: none;--components-button-userSelect: auto;--components-button-boxShadow: var(--pr-t-elevation-shadow-button);--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));--components-button-backgroundColor: var(--palettes-700, var(--palettes-product-700));--components-button-arrow-transform: none;--components-button-font-size: var(--pr-t-font-body-M-fontSize);--components-button-line-height: var(--pr-t-font-body-M-lineHeight);--icon-size: 1.5rem;background-color:var(--components-button-backgroundColor);box-shadow:var(--components-button-boxShadow);border-radius:var(--components-button-borderRadius);padding:var(--components-button-padding);transition-property:background-color,color,border-color,box-shadow;transition-duration:var(--commons-animations-durations-fast);inline-size:var(--components-button-width);min-inline-size:var(--components-button-minWidth);font:var(--components-button-font);font-size:var(--components-button-font-size);line-height:var(--components-button-line-height);font-weight:var(--pr-t-font-fontWeight-semibold);gap:var(--components-button-gap);pointer-events:var(--components-button-pointerEvents);-webkit-user-select:var(--components-button-userSelect);user-select:var(--components-button-userSelect);opacity:var(--components-button-opacity);cursor:var(--components-button-cursor);transition-timing-function:ease;display:inline-flex;align-items:center;justify-content:center;position:relative;text-decoration:none;vertical-align:middle;text-wrap:balance;text-align:center;border:0;--components-button-width: 100%;--components-button-backgroundColor: transparent;--components-button-color: var(--palettes-700, var(--pr-t-color-text-subtle));--components-button-boxShadow: none}.addOption,.addOption:is(a){color:var(--components-button-color)}.addOption .lucca-icon{display:block}.addOption .button-icon{--icon-size: 1.5rem}.addOption:not(.mod-outlined,.mod-outline) .numericBadge{--components-numericBadge-background: var(--palettes-200, var(--palettes-product-200));--components-numericBadge-color: var(--palettes-800, var(--palettes-product-800))}.addOption:hover{--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));--components-button-backgroundColor: var(--palettes-800, var(--palettes-product-800))}.addOption:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:2px;border-radius:var(--components-button-borderRadius)}.addOption:active{--components-button-backgroundColor: var(--palettes-900, var(--palettes-product-900))}.addOption:disabled{--components-button-cursor: default;--components-button-color: var(--palettes-neutral-500);--components-button-backgroundColor: var(--commons-disabled-background);--components-button-pointerEvents: none}.addOption:disabled .numericBadge{--components-numericBadge-background: var(--palettes-neutral-200);--components-numericBadge-color: var(--palettes-neutral-500)}.addOption:hover,.addOption:focus-visible{--components-button-color: var(--palettes-700, var(--pr-t-color-text-subtle));--components-button-backgroundColor: var(--palettes-50, var(--palettes-neutral-50))}.addOption:active{--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.addOption:disabled{--components-button-backgroundColor: transparent;--components-button-color: var(--pr-t-color-text-disabled)}.addOption{justify-content:left}.addOption.is-highlighted{--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: LuIsOptionSelectedPipe, name: "luIsOptionSelected" }, { kind: "component", type: _LuOptionComponent, selector: "lu-select-option", inputs: ["optionTpl", "option", "grouping", "hasChildren", "groupIndex", "optionIndex", "scrollIntoViewOptions", "groupTemplateLocation"], outputs: ["onlyParent", "onlyChildren"] }, { kind: "pipe", type: _LuOptionGroupPipe, name: "luOptionGroup" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: PortalDirective, selector: "[luPortal]", inputs: ["luPortal", "luPortalContext"] }, { kind: "pipe", type: LuOptionsGroupContextPipe, name: "luOptionsGroupContext" }, { kind: "directive", type: _CoreSelectPanelElement, selector: "[luCoreSelectPanelElement]", inputs: ["elementId", "isSelected", "option", "disabled"], outputs: ["isSelectedChange", "selected"], exportAs: ["luCoreSelectPanelElement"] }, { kind: "component", type: IconComponent, selector: "lu-icon", inputs: ["icon", "alt", "size", "color", "AI"] }, { kind: "pipe", type: TreeDisplayPipe, name: "luTreeDisplay" }, { kind: "component", type: TreeBranchComponent, selector: "lu-tree-branch", inputs: ["branch", "optionTpl", "optionIndex", "optionComparer", "selectedOptions", "simpleMode", "depth"], outputs: ["toggleOne", "selectMany", "unselectMany"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: LuMultiSelectPanelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: LuMultiSelectPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lu-select-panel', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+            args: [{ selector: 'lu-select-panel', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         A11yModule,
                         AsyncPipe,
                         FormsModule,
@@ -277,7 +285,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                             provide: SELECT_PANEL_INSTANCE,
                             useExisting: forwardRef(() => LuMultiSelectPanelComponent),
                         },
-                    ], template: "@if (\n\t{\n\t\toptions: (options$ | async) || [],\n\t\tgroupTemplateLocation: groupTemplateLocation$ | async,\n\t\tshouldDisplayAddOption: shouldDisplayAddOption$ | async,\n\t};\n\tas ctx\n) {\n\t<div class=\"lu-picker-panel lu-option-picker-panel mod-multiple\" data-testid=\"dialog-panel\">\n\t\t<div\n\t\t\tclass=\"lu-picker-content\"\n\t\t\t[class.is-loading]=\"loading$ | async\"\n\t\t\t[class.is-filled]=\"ctx.options.length > 0\"\n\t\t\ttabindex=\"0\"\n\t\t\trole=\"listbox\"\n\t\t\taria-multiselectable=\"true\"\n\t\t\t(scroll)=\"onScroll($event)\"\n\t\t>\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\t<div class=\"lu-picker-content-option\">\n\t\t\t\t@if (grouping() && ctx.groupTemplateLocation === \"group-header\") {\n\t\t\t\t\t@for (\n\t\t\t\t\t\tgroup of ctx.options | luOptionGroup: grouping().selector;\n\t\t\t\t\t\ttrack trackGroupsBy(groupIndex, group);\n\t\t\t\t\t\tlet groupIndex = $index\n\t\t\t\t\t) {\n\t\t\t\t\t\t<div class=\"lu-picker-content-group\" role=\"group\" attr.aria-labelledby=\"lu-select-{{ selectId }}-group-{{ groupIndex }}\">\n\t\t\t\t\t\t\t@let groupCtx = group.options | luOptionsGroupContext: selectedOptions : optionComparer;\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tluCoreSelectPanelElement\n\t\t\t\t\t\t\t\telementId=\"lu-select-{{ selectId }}-group-{{ groupIndex }}\"\n\t\t\t\t\t\t\t\tclass=\"lu-picker-content-option-group-title\"\n\t\t\t\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t\t\t\t(selected)=\"toggleOptions(groupCtx.notSelectedOptions, group.options)\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span #groupingTitleRef>\n\t\t\t\t\t\t\t\t\t<ng-container *luPortal=\"grouping().content; context: { $implicit: group }\" />\n\t\t\t\t\t\t\t\t</span>\n\n\t\t\t\t\t\t\t\t@if (someGroupOptionEnabled()(group.options)) {\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tclass=\"link\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"toggleOptions(groupCtx.notSelectedOptions, group.options)\"\n\t\t\t\t\t\t\t\t\t\t[id]=\"selectId + '-group-' + group.key\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\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\t\t>{{ groupCtx.isGroupSelected ? intl.unselectAll : intl.selectAll }}\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<ng-template\n\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"optionsList\"\n\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: group.options, groupIndex: groupIndex }\"\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}\n\t\t\t\t@if (!grouping() || ctx.groupTemplateLocation !== \"group-header\") {\n\t\t\t\t\t<ng-template [ngTemplateOutlet]=\"optionsList\" [ngTemplateOutletContext]=\"{ $implicit: ctx.options }\" />\n\t\t\t\t}\n\t\t\t\t<ng-template #optionsList let-options let-groupIndex=\"groupIndex\">\n\t\t\t\t\t@if (treeGenerator) {\n\t\t\t\t\t\t@for (branch of options | luTreeDisplay: treeGenerator; let index = $index; track trackBranchesBy(index, branch)) {\n\t\t\t\t\t\t\t<lu-tree-branch\n\t\t\t\t\t\t\t\t[branch]=\"branch\"\n\t\t\t\t\t\t\t\t[optionTpl]=\"optionTpl()\"\n\t\t\t\t\t\t\t\t[selectedOptions]=\"selectedOptions\"\n\t\t\t\t\t\t\t\t[optionComparer]=\"optionComparer\"\n\t\t\t\t\t\t\t\t[optionIndex]=\"index\"\n\t\t\t\t\t\t\t\t(toggleOne)=\"toggleOption($event)\"\n\t\t\t\t\t\t\t\t(selectMany)=\"toggleOptions($event, [])\"\n\t\t\t\t\t\t\t\t(unselectMany)=\"toggleOptions([], $event)\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t}\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t@for (option of options; track trackOptionsBy(index, option); let index = $index) {\n\t\t\t\t\t\t\t<lu-select-option\n\t\t\t\t\t\t\t\tluCoreSelectPanelElement\n\t\t\t\t\t\t\t\t[option]=\"option\"\n\t\t\t\t\t\t\t\t[optionTpl]=\"optionTpl()\"\n\t\t\t\t\t\t\t\t[optionIndex]=\"index\"\n\t\t\t\t\t\t\t\t[grouping]=\"ctx.groupTemplateLocation === 'option' ? grouping() : undefined\"\n\t\t\t\t\t\t\t\t[groupIndex]=\"groupIndex\"\n\t\t\t\t\t\t\t\t[groupTemplateLocation]=\"ctx.groupTemplateLocation\"\n\t\t\t\t\t\t\t\t[scrollIntoViewOptions]=\"{ block: 'nearest' }\"\n\t\t\t\t\t\t\t\t[isSelected]=\"option | luIsOptionSelected: optionComparer : selectedOptions\"\n\t\t\t\t\t\t\t\t(selected)=\"toggleOption(option)\"\n\t\t\t\t\t\t\t\t(click)=\"toggleOption(option)\"\n\t\t\t\t\t\t\t\t[class.withAddOption]=\"ctx.shouldDisplayAddOption\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t</ng-template>\n\t\t\t\t@if (ctx.options.length === 0 && (loading$ | async) === false) {\n\t\t\t\t\t<div class=\"lu-picker-content-option-emptyState\">\n\t\t\t\t\t\t{{ intl.emptyResults }}\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t@if (loading$ | async) {\n\t\t\t\t<div class=\"lu-picker-content-loading\">\n\t\t\t\t\t<div class=\"loading\">{{ intl.loading }}</div>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@if (ctx.shouldDisplayAddOption) {\n\t\t\t\t<div\n\t\t\t\t\tclass=\"addOption palette-product\"\n\t\t\t\t\t(click)=\"selectInput.emitAddOption()\"\n\t\t\t\t\t(selected)=\"selectInput.emitAddOption()\"\n\t\t\t\t\telementId=\"picker-content-add\"\n\t\t\t\t\tluCoreSelectPanelElement\n\t\t\t\t>\n\t\t\t\t\t<lu-icon icon=\"mathsPlus\" />\n\t\t\t\t\t<ng-container *luPortal=\"selectInput.addOptionLabel\" />\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t</div>\n}\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 mods{.addOption{--components-button-font: var(--pr-t-font-body-M);--components-button-borderRadius: var(--pr-t-border-radius-default);--components-button-paddingBlock: var(--pr-t-spacings-100);--components-button-paddingInline: var(--pr-t-spacings-150);--components-button-paddingBlockStart: var(--components-button-paddingBlock);--components-button-paddingBlockEnd: var(--components-button-paddingBlock);--components-button-paddingInlineStart: var(--components-button-paddingInline);--components-button-paddingInlineEnd: var(--components-button-paddingInline);--components-button-padding: var(--components-button-paddingBlockStart) var(--components-button-paddingInlineEnd) var(--components-button-paddingBlockEnd) var(--components-button-paddingInlineStart);--components-button-gap: var(--pr-t-spacings-100);--components-button-opacity: 1;--components-button-cursor: pointer;--components-button-pointerEvents: auto;--components-button-width: auto;--components-button-minWidth: none;--components-button-userSelect: auto;--components-button-boxShadow: var(--pr-t-elevation-shadow-button);--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));--components-button-backgroundColor: var(--palettes-700, var(--palettes-product-700));--components-button-arrow-transform: none;--components-button-font-size: var(--pr-t-font-body-M-fontSize);--components-button-line-height: var(--pr-t-font-body-M-lineHeight);--icon-size: 1.5rem;background-color:var(--components-button-backgroundColor);box-shadow:var(--components-button-boxShadow);border-radius:var(--components-button-borderRadius);padding:var(--components-button-padding);transition-property:background-color,color,border-color,box-shadow;transition-duration:var(--commons-animations-durations-fast);inline-size:var(--components-button-width);min-inline-size:var(--components-button-minWidth);font:var(--components-button-font);font-size:var(--components-button-font-size);line-height:var(--components-button-line-height);font-weight:var(--pr-t-font-fontWeight-semibold);gap:var(--components-button-gap);pointer-events:var(--components-button-pointerEvents);-webkit-user-select:var(--components-button-userSelect);user-select:var(--components-button-userSelect);opacity:var(--components-button-opacity);cursor:var(--components-button-cursor);transition-timing-function:ease;display:inline-flex;align-items:center;justify-content:center;position:relative;text-decoration:none;vertical-align:middle;text-wrap:balance;text-align:center;border:0}.addOption,.addOption:is(a){color:var(--components-button-color)}.addOption .lucca-icon{display:block}.addOption .button-icon{--icon-size: 1.5rem}.addOption:not(.mod-outlined,.mod-outline) .numericBadge{--components-numericBadge-background: var(--palettes-200, var(--palettes-product-200));--components-numericBadge-color: var(--palettes-800, var(--palettes-product-800))}.addOption:hover{--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));--components-button-backgroundColor: var(--palettes-800, var(--palettes-product-800))}.addOption:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:2px;border-radius:var(--components-button-borderRadius)}.addOption:active{--components-button-backgroundColor: var(--palettes-900, var(--palettes-product-900))}.addOption:disabled{--components-button-cursor: default;--components-button-color: var(--palettes-neutral-500);--components-button-backgroundColor: var(--commons-disabled-background);--components-button-pointerEvents: none}.addOption:disabled .numericBadge{--components-numericBadge-background: var(--palettes-neutral-200);--components-numericBadge-color: var(--palettes-neutral-500)}.addOption{--components-button-width: 100%;--components-button-backgroundColor: transparent;--components-button-color: var(--palettes-700, var(--pr-t-color-text-subtle));--components-button-boxShadow: none}.addOption:hover,.addOption:focus-visible{--components-button-color: var(--palettes-700, var(--pr-t-color-text-subtle));--components-button-backgroundColor: var(--palettes-50, var(--palettes-neutral-50))}.addOption:active{--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.addOption:disabled{--components-button-backgroundColor: transparent;--components-button-color: var(--pr-t-color-text-disabled)}.addOption{justify-content:left}.addOption.is-highlighted{--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}}\n"] }]
+                    ], template: "@if (\n\t{\n\t\toptions: (options$ | async) || [],\n\t\tclueChange: (clueChange$ | async) || \"\",\n\t\tgroupTemplateLocation: groupTemplateLocation$ | async,\n\t\tshouldDisplayAddOption: shouldDisplayAddOption$ | async,\n\t};\n\tas ctx\n) {\n\t<div class=\"lu-picker-panel lu-option-picker-panel mod-multiple\" data-testid=\"dialog-panel\">\n\t\t<div\n\t\t\tclass=\"lu-picker-content\"\n\t\t\t[class.is-loading]=\"loading$ | async\"\n\t\t\t[class.is-filled]=\"ctx.options.length > 0\"\n\t\t\ttabindex=\"0\"\n\t\t\trole=\"listbox\"\n\t\t\taria-multiselectable=\"true\"\n\t\t\t(scroll)=\"onScroll($event)\"\n\t\t>\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\t<div class=\"lu-picker-content-option\">\n\t\t\t\t@if (grouping && ctx.groupTemplateLocation === \"group-header\") {\n\t\t\t\t\t@for (group of ctx.options | luOptionGroup: grouping.selector; track trackGroupsBy(groupIndex, group); let groupIndex = $index) {\n\t\t\t\t\t\t<div class=\"lu-picker-content-group\" role=\"group\" attr.aria-labelledby=\"lu-select-{{ selectId }}-group-{{ groupIndex }}\">\n\t\t\t\t\t\t\t@let groupCtx = group.options | luOptionsGroupContext: selectedOptions : optionComparer;\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tluCoreSelectPanelElement\n\t\t\t\t\t\t\t\telementId=\"lu-select-{{ selectId }}-group-{{ groupIndex }}\"\n\t\t\t\t\t\t\t\tclass=\"lu-picker-content-option-group-title\"\n\t\t\t\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t\t\t\t(selected)=\"toggleOptions(groupCtx.notSelectedOptions, group.options)\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span #groupingTitleRef>\n\t\t\t\t\t\t\t\t\t<ng-container *luPortal=\"grouping.content; context: { $implicit: group }\" />\n\t\t\t\t\t\t\t\t</span>\n\n\t\t\t\t\t\t\t\t@if (someGroupOptionEnabled()(group.options)) {\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tclass=\"link\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"toggleOptions(groupCtx.notSelectedOptions, group.options)\"\n\t\t\t\t\t\t\t\t\t\t[id]=\"selectId + '-group-' + group.key\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\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\t\t>{{ groupCtx.isGroupSelected ? intl.unselectAll : intl.selectAll }}\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<ng-template\n\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"optionsList\"\n\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: group.options, groupIndex: groupIndex }\"\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}\n\t\t\t\t@if (!grouping || ctx.groupTemplateLocation !== \"group-header\") {\n\t\t\t\t\t<ng-template [ngTemplateOutlet]=\"optionsList\" [ngTemplateOutletContext]=\"{ $implicit: ctx.options }\" />\n\t\t\t\t}\n\t\t\t\t<ng-template #optionsList let-options let-groupIndex=\"groupIndex\">\n\t\t\t\t\t@if (treeGenerator) {\n\t\t\t\t\t\t@for (branch of options | luTreeDisplay: treeGenerator; let index = $index; track trackBranchesBy(index, branch)) {\n\t\t\t\t\t\t\t<lu-tree-branch\n\t\t\t\t\t\t\t\t[branch]=\"branch\"\n\t\t\t\t\t\t\t\t[optionTpl]=\"optionTpl()\"\n\t\t\t\t\t\t\t\t[selectedOptions]=\"selectedOptions\"\n\t\t\t\t\t\t\t\t[optionComparer]=\"optionComparer\"\n\t\t\t\t\t\t\t\t[optionIndex]=\"index\"\n\t\t\t\t\t\t\t\t(toggleOne)=\"toggleOption($event)\"\n\t\t\t\t\t\t\t\t(selectMany)=\"toggleOptions($event, [])\"\n\t\t\t\t\t\t\t\t(unselectMany)=\"toggleOptions([], $event)\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t}\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t@for (option of options; track trackOptionsBy(index, option); let index = $index) {\n\t\t\t\t\t\t\t<lu-select-option\n\t\t\t\t\t\t\t\tluCoreSelectPanelElement\n\t\t\t\t\t\t\t\t[option]=\"option\"\n\t\t\t\t\t\t\t\t[optionTpl]=\"optionTpl()\"\n\t\t\t\t\t\t\t\t[optionIndex]=\"index\"\n\t\t\t\t\t\t\t\t[grouping]=\"ctx.groupTemplateLocation === 'option' ? grouping : undefined\"\n\t\t\t\t\t\t\t\t[groupIndex]=\"groupIndex\"\n\t\t\t\t\t\t\t\t[groupTemplateLocation]=\"ctx.groupTemplateLocation\"\n\t\t\t\t\t\t\t\t[scrollIntoViewOptions]=\"{ block: 'nearest' }\"\n\t\t\t\t\t\t\t\t[isSelected]=\"option | luIsOptionSelected: optionComparer : selectedOptions\"\n\t\t\t\t\t\t\t\t(selected)=\"toggleOption(option)\"\n\t\t\t\t\t\t\t\t(click)=\"toggleOption(option)\"\n\t\t\t\t\t\t\t\t[class.withAddOption]=\"ctx.shouldDisplayAddOption\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t</ng-template>\n\t\t\t\t@if (ctx.options.length === 0 && (loading$ | async) === false) {\n\t\t\t\t\t<div class=\"lu-picker-content-option-emptyState\">\n\t\t\t\t\t\t{{ ctx.clueChange.length ? intl.emptyResults : intl.emptyOptions }}\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t@if (loading$ | async) {\n\t\t\t\t<div class=\"lu-picker-content-loading\">\n\t\t\t\t\t<div class=\"loading\">{{ intl.loading }}</div>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@if (ctx.shouldDisplayAddOption) {\n\t\t\t\t<div\n\t\t\t\t\tclass=\"addOption palette-product\"\n\t\t\t\t\t(click)=\"selectInput.emitAddOption()\"\n\t\t\t\t\t(selected)=\"selectInput.emitAddOption()\"\n\t\t\t\t\telementId=\"picker-content-add\"\n\t\t\t\t\tluCoreSelectPanelElement\n\t\t\t\t>\n\t\t\t\t\t<lu-icon icon=\"mathsPlus\" />\n\t\t\t\t\t<ng-container *luPortal=\"selectInput.addOptionLabel\" />\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t</div>\n}\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 mods{.addOption{--components-button-font: var(--pr-t-font-body-M);--components-button-borderRadius: var(--pr-t-border-radius-default);--components-button-paddingBlock: var(--pr-t-spacings-100);--components-button-paddingInline: var(--pr-t-spacings-150);--components-button-paddingBlockStart: var(--components-button-paddingBlock);--components-button-paddingBlockEnd: var(--components-button-paddingBlock);--components-button-paddingInlineStart: var(--components-button-paddingInline);--components-button-paddingInlineEnd: var(--components-button-paddingInline);--components-button-padding: var(--components-button-paddingBlockStart) var(--components-button-paddingInlineEnd) var(--components-button-paddingBlockEnd) var(--components-button-paddingInlineStart);--components-button-gap: var(--pr-t-spacings-100);--components-button-opacity: 1;--components-button-cursor: pointer;--components-button-pointerEvents: auto;--components-button-width: auto;--components-button-minWidth: none;--components-button-userSelect: auto;--components-button-boxShadow: var(--pr-t-elevation-shadow-button);--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));--components-button-backgroundColor: var(--palettes-700, var(--palettes-product-700));--components-button-arrow-transform: none;--components-button-font-size: var(--pr-t-font-body-M-fontSize);--components-button-line-height: var(--pr-t-font-body-M-lineHeight);--icon-size: 1.5rem;background-color:var(--components-button-backgroundColor);box-shadow:var(--components-button-boxShadow);border-radius:var(--components-button-borderRadius);padding:var(--components-button-padding);transition-property:background-color,color,border-color,box-shadow;transition-duration:var(--commons-animations-durations-fast);inline-size:var(--components-button-width);min-inline-size:var(--components-button-minWidth);font:var(--components-button-font);font-size:var(--components-button-font-size);line-height:var(--components-button-line-height);font-weight:var(--pr-t-font-fontWeight-semibold);gap:var(--components-button-gap);pointer-events:var(--components-button-pointerEvents);-webkit-user-select:var(--components-button-userSelect);user-select:var(--components-button-userSelect);opacity:var(--components-button-opacity);cursor:var(--components-button-cursor);transition-timing-function:ease;display:inline-flex;align-items:center;justify-content:center;position:relative;text-decoration:none;vertical-align:middle;text-wrap:balance;text-align:center;border:0;--components-button-width: 100%;--components-button-backgroundColor: transparent;--components-button-color: var(--palettes-700, var(--pr-t-color-text-subtle));--components-button-boxShadow: none}.addOption,.addOption:is(a){color:var(--components-button-color)}.addOption .lucca-icon{display:block}.addOption .button-icon{--icon-size: 1.5rem}.addOption:not(.mod-outlined,.mod-outline) .numericBadge{--components-numericBadge-background: var(--palettes-200, var(--palettes-product-200));--components-numericBadge-color: var(--palettes-800, var(--palettes-product-800))}.addOption:hover{--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));--components-button-backgroundColor: var(--palettes-800, var(--palettes-product-800))}.addOption:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:2px;border-radius:var(--components-button-borderRadius)}.addOption:active{--components-button-backgroundColor: var(--palettes-900, var(--palettes-product-900))}.addOption:disabled{--components-button-cursor: default;--components-button-color: var(--palettes-neutral-500);--components-button-backgroundColor: var(--commons-disabled-background);--components-button-pointerEvents: none}.addOption:disabled .numericBadge{--components-numericBadge-background: var(--palettes-neutral-200);--components-numericBadge-color: var(--palettes-neutral-500)}.addOption:hover,.addOption:focus-visible{--components-button-color: var(--palettes-700, var(--pr-t-color-text-subtle));--components-button-backgroundColor: var(--palettes-50, var(--palettes-neutral-50))}.addOption:active{--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.addOption:disabled{--components-button-backgroundColor: transparent;--components-button-color: var(--pr-t-color-text-disabled)}.addOption{justify-content:left}.addOption.is-highlighted{--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}}\n"] }]
         }] });
 
 class BaseMultiSelectPanelRef extends LuMultiSelectPanelRef {
@@ -410,10 +418,10 @@ class LuMultiSelectPanelRefFactory {
             ...(config.offsetY ? { offsetY: yDirection === 'bottom' ? config.offsetY : -config.offsetY } : {}),
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: LuMultiSelectPanelRefFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: LuMultiSelectPanelRefFactory }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: LuMultiSelectPanelRefFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: LuMultiSelectPanelRefFactory }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: LuMultiSelectPanelRefFactory, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: LuMultiSelectPanelRefFactory, decorators: [{
             type: Injectable
         }] });
 
@@ -421,19 +429,19 @@ class LuMultiSelectInputComponent extends ALuSelectInputComponent {
     constructor() {
         super(...arguments);
         this.intl = getIntl(LU_MULTI_SELECT_TRANSLATIONS);
-        this.valuesTpl = model(LuMultiSelectDefaultDisplayerComponent, ...(ngDevMode ? [{ debugName: "valuesTpl" }] : []));
+        this.valuesTpl = model(LuMultiSelectDefaultDisplayerComponent);
         this.maxValuesShown = 500;
         this.keepSearchAfterSelection = false;
         this.selectParent$ = new Subject();
         this.selectChildren$ = new Subject();
-        this.hideCombobox = computed(() => this.valueSignal()?.length > 1, ...(ngDevMode ? [{ debugName: "hideCombobox" }] : []));
-        this.filterPillPanelAnchorRef = viewChild('filterPillPanelAnchor', ...(ngDevMode ? [{ debugName: "filterPillPanelAnchorRef", read: ViewContainerRef }] : [{ read: ViewContainerRef }]));
+        this.hideCombobox = computed(() => this.valueSignal()?.length > 1);
+        this.filterPillPanelAnchorRef = viewChild('filterPillPanelAnchor', { read: ViewContainerRef });
         this.isFilterPillEmpty = computed(() => {
             const valueSignal = this.valueSignal();
             return !valueSignal || valueSignal.length === 0;
-        }, ...(ngDevMode ? [{ debugName: "isFilterPillEmpty" }] : []));
-        this.valueLength = computed(() => this.valueSignal()?.length ?? 0, ...(ngDevMode ? [{ debugName: "valueLength" }] : []));
-        this.useSingleOptionDisplayer = signal(true, ...(ngDevMode ? [{ debugName: "useSingleOptionDisplayer" }] : []));
+        });
+        this.valueLength = computed(() => this.valueSignal()?.length ?? 0);
+        this.useSingleOptionDisplayer = signal(true);
         this._value = [];
         this.panelRefFactory = inject(LuMultiSelectPanelRefFactory);
         /**
@@ -502,8 +510,8 @@ class LuMultiSelectInputComponent extends ALuSelectInputComponent {
         super.ngOnDestroy();
         this.focusInput$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: LuMultiSelectInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: LuMultiSelectInputComponent, isStandalone: true, selector: "lu-multi-select", inputs: { valuesTpl: { classPropertyName: "valuesTpl", publicName: "valuesTpl", isSignal: true, isRequired: false, transformFunction: null }, maxValuesShown: { classPropertyName: "maxValuesShown", publicName: "maxValuesShown", isSignal: false, isRequired: false, transformFunction: numberAttribute }, keepSearchAfterSelection: { classPropertyName: "keepSearchAfterSelection", publicName: "keepSearchAfterSelection", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, filterPillLabelPlural: { classPropertyName: "filterPillLabelPlural", publicName: "filterPillLabelPlural", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { valuesTpl: "valuesTplChange" }, host: { listeners: { "keydown.control.enter": "selectParentOnly()", "keydown.shift.enter": "selectChildrenOnly()" }, properties: { "class.mod-filterPill": "this.filterPillClass" }, classAttribute: "multiSelect" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: LuMultiSelectInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: LuMultiSelectInputComponent, isStandalone: true, selector: "lu-multi-select", inputs: { valuesTpl: { classPropertyName: "valuesTpl", publicName: "valuesTpl", isSignal: true, isRequired: false, transformFunction: null }, maxValuesShown: { classPropertyName: "maxValuesShown", publicName: "maxValuesShown", isSignal: false, isRequired: false, transformFunction: numberAttribute }, keepSearchAfterSelection: { classPropertyName: "keepSearchAfterSelection", publicName: "keepSearchAfterSelection", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, filterPillLabelPlural: { classPropertyName: "filterPillLabelPlural", publicName: "filterPillLabelPlural", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { valuesTpl: "valuesTplChange" }, host: { listeners: { "keydown.control.enter": "selectParentOnly()", "keydown.shift.enter": "selectChildrenOnly()" }, properties: { "class.mod-filterPill": "this.filterPillClass" }, classAttribute: "multiSelect" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => LuMultiSelectInputComponent),
@@ -519,11 +527,11 @@ 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<button role=\"button\" type=\"button\" class=\"multipleSelect-clear clear\" (click)=\"clearValue($event)\">\n\t\t\t<span class=\"pr-u-mask\">{{ intl.clear }}</span>\n\t\t</button>\n\t}\n\n\t<span aria-hidden=\"true\" class=\"multipleSelect-arrow lucca-icon icon-arrowChevronBottom\"></span>\n\t<span aria-hidden=\"true\" class=\"multipleSelect-searchIcon lucca-icon icon-searchMagnifyingGlass\"></span>\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", 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);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-product-700);outline-offset:3px}.multipleSelect-displayer{display:flex;gap:var(--pr-t-spacings-50);flex-wrap:wrap;flex:1}.multipleSelect-displayer-chip{min-inline-size:0}.multipleSelect-displayer-chip-value{max-inline-size:8rem;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)}}@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-numericBadge.numericBadge,.multiSelect.mod-S .multipleSelect-displayer-numericBadge:not(.numericBadge){--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.multiSelect.mod-filterPill{flex-direction:column;align-items:stretch;box-shadow:none;padding:0;gap:0;inline-size:21rem;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}.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-50) 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-product-700);outline-offset:3px}.multiSelect.is-selected .multipleSelect-displayer-search[readonly],.multiSelect.is-selected .multipleSelect-displayer-search:not(:focus){border:0;clip: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-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([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}}@layer mods{.multipleSelect-displayer.mod-filter{display:grid}.multipleSelect-displayer.mod-filter .multipleSelect-displayer-filter{grid-column-start:1;grid-row-start:1;display:flex;gap:var(--pr-t-spacings-50);min-inline-size:0}.multipleSelect-displayer.mod-filter .multipleSelect-displayer-search{grid-column-start:1;grid-row-start:1}.multipleSelect-displayer.mod-filter.is-filled .multipleSelect-displayer-search{opacity:0}.multipleSelect-displayer.mod-filter:has([aria-expanded=true]):not(:has(:placeholder-shown)) .multipleSelect-displayer-filter{display:none}.multipleSelect-displayer.mod-filter:has([aria-expanded=true]):not(:has(:placeholder-shown)) .multipleSelect-displayer-search{opacity:1}}@layer components{.clear{--components-clear-size: 1rem;--components-clear-background: var(--palettes-neutral-700);--components-clear-cross-color: 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:grid;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-neutral-0);--components-clear-background: var(--palettes-neutral-600)}.clear:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:2px;border-radius:50%}.clear:active{--components-clear-background: var(--palettes-neutral-800)}.clear .lucca-icon{display:none}}@layer mods{.clear.mod-S{--components-clear-size: .75rem;--icon-size: .75rem}.clear.palette-product:not([disabled]),.clear.palette-primary:not([disabled]){--components-clear-cross-color: var(--palettes-neutral-0);--components-clear-background: var(--palettes-product-700)}.clear.palette-product:not([disabled]):hover,.clear.palette-primary:not([disabled]):hover{--components-clear-background: var(--palettes-product-600)}.clear.palette-product:not([disabled]):active,.clear.palette-primary:not([disabled]):active{--components-clear-background: var(--palettes-product-800)}.clear.mod-inverted:not([disabled]){--components-clear-cross-color: var(--palettes-neutral-700);--components-clear-background: var(--palettes-neutral-0)}.clear.mod-inverted:not([disabled]):hover{--components-clear-background: var(--palettes-neutral-50)}.clear.mod-inverted:not([disabled]):active{--components-clear-background: var(--palettes-neutral-100)}.clear.mod-inverted:not([disabled]).palette-product:not([disabled]){--components-clear-cross-color: var(--palettes-product-700);--components-clear-background: var(--palettes-neutral-0)}.clear.mod-inverted:not([disabled]).palette-product:not([disabled]):hover{--components-clear-background: var(--palettes-product-50)}.clear.mod-inverted:not([disabled]).palette-product:not([disabled]):active{--components-clear-background: var(--palettes-product-50)}.clear[disabled]{--components-clear-cross-color: var(--palettes-neutral-500);--components-clear-background: var(--palettes-neutral-300);cursor:default}}@layer components{.chip{--components-chip-font: var(--pr-t-font-body-S);--components-chip-backgroundColor: var(--palettes-700, var(--palettes-neutral-200));--components-chip-color: var(--palettes-0, var(--palettes-text, var(--pr-t-color-text)));--components-chip-borderRadius: var(--pr-t-border-radius-default);--components-chip-kill-size: .75rem;--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-radius:var(--components-chip-borderRadius);color:var(--components-chip-color);display:inline-flex;align-items:center;gap:var(--pr-t-spacings-100);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)}.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);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, var(--palettes-neutral-700))}.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, var(--palettes-neutral-0))}.chip-kill:hover{--components-chip-kill-disk-color: var(--palettes-neutral-600);--components-chip-kill-cross-color: var(--palettes-700, var(--palettes-neutral-0))}.chip-kill:focus-visible{outline:2px solid 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-50, var(--palettes-neutral-800))}}@layer mods{.chip.mod-S{--components-chip-font: var(--pr-t-font-body-XS);--components-chip-borderRadius: var(--pr-t-border-radius-small)}.chip.palette-product .chip-kill,.chip.palette-primary .chip-kill{--components-chip-kill-cross-color: var(--palettes-product-700);--components-chip-kill-disk-color: var(--palettes-neutral-0)}.chip.palette-product .chip-kill:hover,.chip.palette-primary .chip-kill:hover,.chip.palette-product .chip-kill:active,.chip.palette-primary .chip-kill:active{--components-chip-kill-disk-color: var(--palettes-product-50)}.chip.palette-product .chip-kill:focus-visible,.chip.palette-primary .chip-kill:focus-visible{outline:2px solid var(--palettes-neutral-0);outline-offset:-4px;border-radius:var(--pr-t-border-radius-full)}.chip.mod-unkillable .chip-kill{display:none}.chip.mod-clickable{cursor:pointer;text-decoration:none}.chip.mod-clickable:hover{background-color:var(--palettes-600, var(--palettes-neutral-100))}.chip.is-disabled{--components-chip-backgroundColor: var(--commons-disabled-background);--components-chip-color: var(--pr-t-color-text-disabled)}.chip.is-disabled .chip-kill{display:none}}\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: "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<span aria-hidden=\"true\" class=\"multipleSelect-arrow lucca-icon icon-arrowChevronBottom\"></span>\n\t<span aria-hidden=\"true\" class=\"multipleSelect-searchIcon lucca-icon icon-searchMagnifyingGlass\"></span>\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", 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);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-product-700);outline-offset:3px}.multipleSelect-displayer{display:flex;gap:var(--pr-t-spacings-50);flex-wrap:wrap;flex:1}.multipleSelect-displayer-chip{min-inline-size:0}.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)}}@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-numericBadge.numericBadge,.multiSelect.mod-S .multipleSelect-displayer-numericBadge:not(.numericBadge){--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.multiSelect.mod-filterPill{flex-direction:column;align-items:stretch;box-shadow:none;padding:0;gap:0;inline-size:21rem;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}.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-50) 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-product-700);outline-offset:3px}.multiSelect.is-selected .multipleSelect-displayer-search[readonly],.multiSelect.is-selected .multipleSelect-displayer-search:not(:focus){border:0;clip: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-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([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}}@layer mods{.multipleSelect-displayer.mod-filter{display:grid}.multipleSelect-displayer.mod-filter .multipleSelect-displayer-filter{grid-column-start:1;grid-row-start:1;display:flex;gap:var(--pr-t-spacings-50);min-inline-size:0}.multipleSelect-displayer.mod-filter .multipleSelect-displayer-search{grid-column-start:1;grid-row-start:1}.multipleSelect-displayer.mod-filter.is-filled .multipleSelect-displayer-search{opacity:0}.multipleSelect-displayer.mod-filter:has([aria-expanded=true]):not(:has(:placeholder-shown)) .multipleSelect-displayer-filter{display:none}.multipleSelect-displayer.mod-filter:has([aria-expanded=true]):not(:has(:placeholder-shown)) .multipleSelect-displayer-search{opacity:1}}@layer components{.clear{--components-clear-display: grid;--components-clear-size: 1rem;--components-clear-background: var(--palettes-neutral-700);--components-clear-cross-color: 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-neutral-0);--components-clear-background: var(--palettes-neutral-600)}.clear:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:2px;border-radius:50%}.clear:active{--components-clear-background: var(--palettes-neutral-800)}.clear .lucca-icon{display:none}}@layer mods{.clear.mod-S{--components-clear-size: .75rem;--icon-size: .75rem}.clear.palette-product,.clear.palette-primary{--components-clear-cross-color: var(--palettes-neutral-0);--components-clear-background: var(--palettes-product-700)}.clear.palette-product:hover,.clear.palette-primary:hover{--components-clear-background: var(--palettes-product-600)}.clear.palette-product:active,.clear.palette-primary:active{--components-clear-background: var(--palettes-product-800)}.clear.mod-inverted{--components-clear-cross-color: var(--palettes-neutral-700);--components-clear-background: var(--palettes-neutral-0)}.clear.mod-inverted:hover{--components-clear-background: var(--palettes-neutral-50)}.clear.mod-inverted:active{--components-clear-background: var(--palettes-neutral-100)}.clear.mod-inverted:where(.palette-product){--components-clear-cross-color: var(--palettes-product-700);--components-clear-background: var(--palettes-neutral-0)}.clear.mod-inverted:where(.palette-product):hover{--components-clear-background: var(--palettes-product-50)}.clear.mod-inverted:where(.palette-product):active{--components-clear-background: var(--palettes-product-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,.textfield-input:not(.is-selected) .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-700, var(--palettes-neutral-200));--components-chip-color: var(--palettes-0, var(--palettes-text, var(--pr-t-color-text)));--components-chip-borderRadius: var(--pr-t-border-radius-default);--components-chip-kill-size: .75rem;--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-radius:var(--components-chip-borderRadius);color:var(--components-chip-color);display:inline-flex;align-items:center;gap:var(--pr-t-spacings-100);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-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);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, var(--palettes-neutral-700))}.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, var(--palettes-neutral-0))}.chip-kill:hover{--components-chip-kill-disk-color: var(--palettes-neutral-600);--components-chip-kill-cross-color: var(--palettes-700, var(--palettes-neutral-0))}.chip-kill:focus-visible{outline:2px solid 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-50, var(--palettes-neutral-800))}}@layer mods{.chip.mod-S{--components-chip-font: var(--pr-t-font-body-XS);--components-chip-borderRadius: var(--pr-t-border-radius-small)}.chip.palette-product .chip-kill,.chip.palette-primary .chip-kill{--components-chip-kill-cross-color: var(--palettes-product-700);--components-chip-kill-disk-color: var(--palettes-neutral-0)}.chip.palette-product .chip-kill:hover,.chip.palette-primary .chip-kill:hover,.chip.palette-product .chip-kill:active,.chip.palette-primary .chip-kill:active{--components-chip-kill-disk-color: var(--palettes-product-50)}.chip.palette-product .chip-kill:focus-visible,.chip.palette-primary .chip-kill:focus-visible{outline:2px solid var(--palettes-neutral-0);outline-offset:-4px;border-radius:var(--pr-t-border-radius-full)}.chip.mod-unkillable .chip-kill{display:none}.chip.mod-clickable{cursor:pointer;text-decoration:none}.chip.mod-clickable:hover{background-color:var(--palettes-600, var(--palettes-neutral-100))}.chip.is-disabled{--components-chip-backgroundColor: var(--commons-disabled-background);--components-chip-color: var(--pr-t-color-text-disabled)}.chip.is-disabled .chip-kill{display:none}.chip:has(.chip-content:focus-visible){outline:2px solid var(--palettes-product-700);outline-offset:2px}}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { 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: ["size", "disabled", "product", "inverted"], outputs: ["onClear"], exportAs: ["luClearer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: LuMultiSelectInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: LuMultiSelectInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lu-multi-select', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe, LuTooltipModule, _LuOptionOutletDirective, FilterPillDisplayerDirective, FilterPillLabelDirective], providers: [
+            args: [{ selector: 'lu-multi-select', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe, LuTooltipModule, _LuOptionOutletDirective, FilterPillDisplayerDirective, FilterPillLabelDirective, ClearComponent], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => LuMultiSelectInputComponent),
@@ -541,8 +549,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                         },
                     ], host: {
                         class: 'multiSelect',
-                    }, 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<button role=\"button\" type=\"button\" class=\"multipleSelect-clear clear\" (click)=\"clearValue($event)\">\n\t\t\t<span class=\"pr-u-mask\">{{ intl.clear }}</span>\n\t\t</button>\n\t}\n\n\t<span aria-hidden=\"true\" class=\"multipleSelect-arrow lucca-icon icon-arrowChevronBottom\"></span>\n\t<span aria-hidden=\"true\" class=\"multipleSelect-searchIcon lucca-icon icon-searchMagnifyingGlass\"></span>\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", 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);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-product-700);outline-offset:3px}.multipleSelect-displayer{display:flex;gap:var(--pr-t-spacings-50);flex-wrap:wrap;flex:1}.multipleSelect-displayer-chip{min-inline-size:0}.multipleSelect-displayer-chip-value{max-inline-size:8rem;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)}}@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-numericBadge.numericBadge,.multiSelect.mod-S .multipleSelect-displayer-numericBadge:not(.numericBadge){--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.multiSelect.mod-filterPill{flex-direction:column;align-items:stretch;box-shadow:none;padding:0;gap:0;inline-size:21rem;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}.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-50) 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-product-700);outline-offset:3px}.multiSelect.is-selected .multipleSelect-displayer-search[readonly],.multiSelect.is-selected .multipleSelect-displayer-search:not(:focus){border:0;clip: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-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([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}}@layer mods{.multipleSelect-displayer.mod-filter{display:grid}.multipleSelect-displayer.mod-filter .multipleSelect-displayer-filter{grid-column-start:1;grid-row-start:1;display:flex;gap:var(--pr-t-spacings-50);min-inline-size:0}.multipleSelect-displayer.mod-filter .multipleSelect-displayer-search{grid-column-start:1;grid-row-start:1}.multipleSelect-displayer.mod-filter.is-filled .multipleSelect-displayer-search{opacity:0}.multipleSelect-displayer.mod-filter:has([aria-expanded=true]):not(:has(:placeholder-shown)) .multipleSelect-displayer-filter{display:none}.multipleSelect-displayer.mod-filter:has([aria-expanded=true]):not(:has(:placeholder-shown)) .multipleSelect-displayer-search{opacity:1}}@layer components{.clear{--components-clear-size: 1rem;--components-clear-background: var(--palettes-neutral-700);--components-clear-cross-color: 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:grid;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-neutral-0);--components-clear-background: var(--palettes-neutral-600)}.clear:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:2px;border-radius:50%}.clear:active{--components-clear-background: var(--palettes-neutral-800)}.clear .lucca-icon{display:none}}@layer mods{.clear.mod-S{--components-clear-size: .75rem;--icon-size: .75rem}.clear.palette-product:not([disabled]),.clear.palette-primary:not([disabled]){--components-clear-cross-color: var(--palettes-neutral-0);--components-clear-background: var(--palettes-product-700)}.clear.palette-product:not([disabled]):hover,.clear.palette-primary:not([disabled]):hover{--components-clear-background: var(--palettes-product-600)}.clear.palette-product:not([disabled]):active,.clear.palette-primary:not([disabled]):active{--components-clear-background: var(--palettes-product-800)}.clear.mod-inverted:not([disabled]){--components-clear-cross-color: var(--palettes-neutral-700);--components-clear-background: var(--palettes-neutral-0)}.clear.mod-inverted:not([disabled]):hover{--components-clear-background: var(--palettes-neutral-50)}.clear.mod-inverted:not([disabled]):active{--components-clear-background: var(--palettes-neutral-100)}.clear.mod-inverted:not([disabled]).palette-product:not([disabled]){--components-clear-cross-color: var(--palettes-product-700);--components-clear-background: var(--palettes-neutral-0)}.clear.mod-inverted:not([disabled]).palette-product:not([disabled]):hover{--components-clear-background: var(--palettes-product-50)}.clear.mod-inverted:not([disabled]).palette-product:not([disabled]):active{--components-clear-background: var(--palettes-product-50)}.clear[disabled]{--components-clear-cross-color: var(--palettes-neutral-500);--components-clear-background: var(--palettes-neutral-300);cursor:default}}@layer components{.chip{--components-chip-font: var(--pr-t-font-body-S);--components-chip-backgroundColor: var(--palettes-700, var(--palettes-neutral-200));--components-chip-color: var(--palettes-0, var(--palettes-text, var(--pr-t-color-text)));--components-chip-borderRadius: var(--pr-t-border-radius-default);--components-chip-kill-size: .75rem;--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-radius:var(--components-chip-borderRadius);color:var(--components-chip-color);display:inline-flex;align-items:center;gap:var(--pr-t-spacings-100);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)}.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);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, var(--palettes-neutral-700))}.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, var(--palettes-neutral-0))}.chip-kill:hover{--components-chip-kill-disk-color: var(--palettes-neutral-600);--components-chip-kill-cross-color: var(--palettes-700, var(--palettes-neutral-0))}.chip-kill:focus-visible{outline:2px solid 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-50, var(--palettes-neutral-800))}}@layer mods{.chip.mod-S{--components-chip-font: var(--pr-t-font-body-XS);--components-chip-borderRadius: var(--pr-t-border-radius-small)}.chip.palette-product .chip-kill,.chip.palette-primary .chip-kill{--components-chip-kill-cross-color: var(--palettes-product-700);--components-chip-kill-disk-color: var(--palettes-neutral-0)}.chip.palette-product .chip-kill:hover,.chip.palette-primary .chip-kill:hover,.chip.palette-product .chip-kill:active,.chip.palette-primary .chip-kill:active{--components-chip-kill-disk-color: var(--palettes-product-50)}.chip.palette-product .chip-kill:focus-visible,.chip.palette-primary .chip-kill:focus-visible{outline:2px solid var(--palettes-neutral-0);outline-offset:-4px;border-radius:var(--pr-t-border-radius-full)}.chip.mod-unkillable .chip-kill{display:none}.chip.mod-clickable{cursor:pointer;text-decoration:none}.chip.mod-clickable:hover{background-color:var(--palettes-600, var(--palettes-neutral-100))}.chip.is-disabled{--components-chip-backgroundColor: var(--commons-disabled-background);--components-chip-color: var(--pr-t-color-text-disabled)}.chip.is-disabled .chip-kill{display:none}}\n"] }]
-        }], propDecorators: { valuesTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "valuesTpl", required: false }] }, { type: i0.Output, args: ["valuesTplChange"] }], maxValuesShown: [{
+                    }, 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<span aria-hidden=\"true\" class=\"multipleSelect-arrow lucca-icon icon-arrowChevronBottom\"></span>\n\t<span aria-hidden=\"true\" class=\"multipleSelect-searchIcon lucca-icon icon-searchMagnifyingGlass\"></span>\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", 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);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-product-700);outline-offset:3px}.multipleSelect-displayer{display:flex;gap:var(--pr-t-spacings-50);flex-wrap:wrap;flex:1}.multipleSelect-displayer-chip{min-inline-size:0}.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)}}@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-numericBadge.numericBadge,.multiSelect.mod-S .multipleSelect-displayer-numericBadge:not(.numericBadge){--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.multiSelect.mod-filterPill{flex-direction:column;align-items:stretch;box-shadow:none;padding:0;gap:0;inline-size:21rem;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}.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-50) 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-product-700);outline-offset:3px}.multiSelect.is-selected .multipleSelect-displayer-search[readonly],.multiSelect.is-selected .multipleSelect-displayer-search:not(:focus){border:0;clip: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-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([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}}@layer mods{.multipleSelect-displayer.mod-filter{display:grid}.multipleSelect-displayer.mod-filter .multipleSelect-displayer-filter{grid-column-start:1;grid-row-start:1;display:flex;gap:var(--pr-t-spacings-50);min-inline-size:0}.multipleSelect-displayer.mod-filter .multipleSelect-displayer-search{grid-column-start:1;grid-row-start:1}.multipleSelect-displayer.mod-filter.is-filled .multipleSelect-displayer-search{opacity:0}.multipleSelect-displayer.mod-filter:has([aria-expanded=true]):not(:has(:placeholder-shown)) .multipleSelect-displayer-filter{display:none}.multipleSelect-displayer.mod-filter:has([aria-expanded=true]):not(:has(:placeholder-shown)) .multipleSelect-displayer-search{opacity:1}}@layer components{.clear{--components-clear-display: grid;--components-clear-size: 1rem;--components-clear-background: var(--palettes-neutral-700);--components-clear-cross-color: 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-neutral-0);--components-clear-background: var(--palettes-neutral-600)}.clear:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:2px;border-radius:50%}.clear:active{--components-clear-background: var(--palettes-neutral-800)}.clear .lucca-icon{display:none}}@layer mods{.clear.mod-S{--components-clear-size: .75rem;--icon-size: .75rem}.clear.palette-product,.clear.palette-primary{--components-clear-cross-color: var(--palettes-neutral-0);--components-clear-background: var(--palettes-product-700)}.clear.palette-product:hover,.clear.palette-primary:hover{--components-clear-background: var(--palettes-product-600)}.clear.palette-product:active,.clear.palette-primary:active{--components-clear-background: var(--palettes-product-800)}.clear.mod-inverted{--components-clear-cross-color: var(--palettes-neutral-700);--components-clear-background: var(--palettes-neutral-0)}.clear.mod-inverted:hover{--components-clear-background: var(--palettes-neutral-50)}.clear.mod-inverted:active{--components-clear-background: var(--palettes-neutral-100)}.clear.mod-inverted:where(.palette-product){--components-clear-cross-color: var(--palettes-product-700);--components-clear-background: var(--palettes-neutral-0)}.clear.mod-inverted:where(.palette-product):hover{--components-clear-background: var(--palettes-product-50)}.clear.mod-inverted:where(.palette-product):active{--components-clear-background: var(--palettes-product-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,.textfield-input:not(.is-selected) .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-700, var(--palettes-neutral-200));--components-chip-color: var(--palettes-0, var(--palettes-text, var(--pr-t-color-text)));--components-chip-borderRadius: var(--pr-t-border-radius-default);--components-chip-kill-size: .75rem;--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-radius:var(--components-chip-borderRadius);color:var(--components-chip-color);display:inline-flex;align-items:center;gap:var(--pr-t-spacings-100);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-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);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, var(--palettes-neutral-700))}.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, var(--palettes-neutral-0))}.chip-kill:hover{--components-chip-kill-disk-color: var(--palettes-neutral-600);--components-chip-kill-cross-color: var(--palettes-700, var(--palettes-neutral-0))}.chip-kill:focus-visible{outline:2px solid 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-50, var(--palettes-neutral-800))}}@layer mods{.chip.mod-S{--components-chip-font: var(--pr-t-font-body-XS);--components-chip-borderRadius: var(--pr-t-border-radius-small)}.chip.palette-product .chip-kill,.chip.palette-primary .chip-kill{--components-chip-kill-cross-color: var(--palettes-product-700);--components-chip-kill-disk-color: var(--palettes-neutral-0)}.chip.palette-product .chip-kill:hover,.chip.palette-primary .chip-kill:hover,.chip.palette-product .chip-kill:active,.chip.palette-primary .chip-kill:active{--components-chip-kill-disk-color: var(--palettes-product-50)}.chip.palette-product .chip-kill:focus-visible,.chip.palette-primary .chip-kill:focus-visible{outline:2px solid var(--palettes-neutral-0);outline-offset:-4px;border-radius:var(--pr-t-border-radius-full)}.chip.mod-unkillable .chip-kill{display:none}.chip.mod-clickable{cursor:pointer;text-decoration:none}.chip.mod-clickable:hover{background-color:var(--palettes-600, var(--palettes-neutral-100))}.chip.is-disabled{--components-chip-backgroundColor: var(--commons-disabled-background);--components-chip-color: var(--pr-t-color-text-disabled)}.chip.is-disabled .chip-kill{display:none}.chip:has(.chip-content:focus-visible){outline:2px solid var(--palettes-product-700);outline-offset:2px}}\n"] }]
+        }], propDecorators: { maxValuesShown: [{
                 type: Input,
                 args: [{ transform: numberAttribute }]
             }], keepSearchAfterSelection: [{
@@ -553,7 +561,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
             }], filterPillClass: [{
                 type: HostBinding,
                 args: ['class.mod-filterPill']
-            }], filterPillPanelAnchorRef: [{ type: i0.ViewChild, args: ['filterPillPanelAnchor', { ...{ read: ViewContainerRef }, isSignal: true }] }], selectParentOnly: [{
+            }], selectParentOnly: [{
                 type: HostListener,
                 args: ['keydown.control.enter']
             }], selectChildrenOnly: [{
@@ -562,52 +570,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
             }] } });
 
 const Translations = {
-    en: {
-        otherResult: 'other result',
-        otherResults: 'other results',
-        showResultsDetails: 'Show details',
-        removeOption: 'Remove option',
-    },
-    de: {
-        otherResult: 'anderes Ergebnis',
-        otherResults: 'andere Ergebnisse',
-        showResultsDetails: 'Details anzeigen ',
-        removeOption: 'Option löschen',
-    },
-    fr: {
-        otherResult: 'autre résultat',
-        otherResults: 'autres résultats',
-        showResultsDetails: 'Voir le détail',
-        removeOption: "Supprimer l'option",
-    },
-    it: {
-        otherResult: 'altro risultato',
-        otherResults: 'altri risultati',
-        showResultsDetails: 'Vedere il dettaglio',
-        removeOption: 'Cancellare l’opzione',
-    },
-    nl: {
+    'nl-BE': {
         otherResult: 'ander resultaat',
         otherResults: 'andere resultaten',
         showResultsDetails: 'Zie details',
         removeOption: 'Optie verwijderen',
     },
-    'nl-BE': {
+    nl: {
         otherResult: 'ander resultaat',
         otherResults: 'andere resultaten',
         showResultsDetails: 'Zie details',
         removeOption: 'Optie verwijderen',
     },
+    it: {
+        otherResult: 'altro risultato',
+        otherResults: 'altri risultati',
+        showResultsDetails: 'Vedere il dettaglio',
+        removeOption: 'Cancellare l’opzione',
+    },
+    fr: {
+        otherResult: 'autre résultat',
+        otherResults: 'autres résultats',
+        showResultsDetails: 'Voir le détail',
+        removeOption: "Supprimer l'option",
+    },
+    pt: {
+        otherResult: 'outro resultado',
+        otherResults: 'outros resultados',
+        showResultsDetails: 'Mostrar detalhes',
+        removeOption: 'Remove option',
+    },
     es: {
         otherResult: 'otro resultado',
         otherResults: 'otros resultados',
         showResultsDetails: 'Ver los detalles',
         removeOption: 'Eliminar la opción',
     },
-    pt: {
-        otherResult: 'outro resultado',
-        otherResults: 'outros resultados',
-        showResultsDetails: 'Mostrar detalhes',
+    de: {
+        otherResult: 'anderes Ergebnis',
+        otherResults: 'andere Ergebnisse',
+        showResultsDetails: 'Details anzeigen ',
+        removeOption: 'Option löschen',
+    },
+    en: {
+        otherResult: 'other result',
+        otherResults: 'other results',
+        showResultsDetails: 'Show details',
         removeOption: 'Remove option',
     },
 };
@@ -670,14 +678,13 @@ class LuMultiSelectDisplayerInputDirective {
             this.elementRef.nativeElement.value = '';
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: LuMultiSelectDisplayerInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.12", type: LuMultiSelectDisplayerInputDirective, isStandalone: true, selector: "[luMultiSelectDisplayerInput]", host: { attributes: { "aria-haspopup": "listbox", "role": "combobox", "type": "text" }, listeners: { "input": "onInput()" }, properties: { "attr.aria-expanded": "this.panelOpen", "attr.aria-activedescendant": "this.activeDescendant", "attr.aria-controls": "this.controls", "disabled": "this.disabled", "placeholder": "this.placeholder", "readonly": "this.readonly" }, classAttribute: "multipleSelect-displayer-search" }, hostDirectives: [{ directive: i1.InputDirective }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: LuMultiSelectDisplayerInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.2", type: LuMultiSelectDisplayerInputDirective, isStandalone: true, selector: "[luMultiSelectDisplayerInput]", host: { attributes: { "aria-haspopup": "listbox", "role": "combobox", "type": "text" }, listeners: { "input": "onInput()" }, properties: { "attr.aria-expanded": "this.panelOpen", "attr.aria-activedescendant": "this.activeDescendant", "attr.aria-controls": "this.controls", "disabled": "this.disabled", "placeholder": "this.placeholder", "readonly": "this.readonly" }, classAttribute: "multipleSelect-displayer-search" }, hostDirectives: [{ directive: i1.InputDirective }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: LuMultiSelectDisplayerInputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: LuMultiSelectDisplayerInputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[luMultiSelectDisplayerInput]',
-                    standalone: true,
                     host: {
                         'aria-haspopup': 'listbox',
                         role: 'combobox',
@@ -715,8 +722,8 @@ class LuMultiSelectAllDisplayerComponent {
     constructor() {
         this.selectAllContext = inject(MULTI_SELECT_WITH_SELECT_ALL_CONTEXT);
         this.select = inject(LuMultiSelectInputComponent);
-        this.isFilled = computed(() => this.selectAllContext.mode() !== 'none', ...(ngDevMode ? [{ debugName: "isFilled" }] : []));
-        this.isIncludeMode = computed(() => this.selectAllContext.mode() === 'include', ...(ngDevMode ? [{ debugName: "isIncludeMode" }] : []));
+        this.isFilled = computed(() => this.selectAllContext.mode() !== 'none');
+        this.isIncludeMode = computed(() => this.selectAllContext.mode() === 'include');
         this.displayerLabel = this.selectAllContext.displayerLabel;
         this.displayerCount = this.selectAllContext.displayerCount;
         this.intl = getIntl(LU_MULTI_SELECT_DISPLAYER_TRANSLATIONS);
@@ -732,23 +739,17 @@ class LuMultiSelectAllDisplayerComponent {
             this.inputElementRef().nativeElement.focus();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: LuMultiSelectAllDisplayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: LuMultiSelectAllDisplayerComponent, isStandalone: true, selector: "lu-multi-select-all-displayer", 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: "20.0.2", ngImport: i0, type: LuMultiSelectAllDisplayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: LuMultiSelectAllDisplayerComponent, isStandalone: true, selector: "lu-multi-select-all-displayer", 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()) {
-						<div class="multipleSelect-displayer-chip chip" [class.mod-unkillable]="disabled()">
-							<span class="multipleSelect-displayer-chip-value" *luOptionOutlet="select.displayerTpl(); value: select.value[0]"></span>
-
-							@if (!disabled()) {
-								<button type="button" class="chip-kill" (click)="unselectOption(select.value[0], $event)">
-									<span class="pr-u-mask">{{ intl.removeOption }}</span>
-								</button>
-							}
-						</div>
+						<lu-chip withEllipsis (kill)="unselectOption(select.value[0], $event)" class="multipleSelect-displayer-chip" [unkillable]="disabled()">
+							<ng-template *luOptionOutlet="select.displayerTpl(); value: select.value[0]" />
+						</lu-chip>
 					} @else {
 						<lu-numeric-badge disableTooltip class="multipleSelect-displayer-numericBadge" [value]="displayerCount()" />
 						<span class="multipleSelect-displayer-label"> {{ displayerLabel() }} </span>
@@ -756,26 +757,20 @@ class LuMultiSelectAllDisplayerComponent {
 				</div>
 			}
 		</div>
-	`, isInline: true, styles: [":host{display:block;inline-size:100%}\n"], dependencies: [{ kind: "component", type: NumericBadgeComponent, selector: "lu-numeric-badge", inputs: ["value", "size", "loading", "maxValue", "disableTooltip", "palette"] }, { kind: "directive", type: LuMultiSelectDisplayerInputDirective, selector: "[luMultiSelectDisplayerInput]" }, { kind: "directive", type: _LuOptionOutletDirective, selector: "[luOptionOutlet]", inputs: ["luOptionOutlet", "luOptionOutletValue", "luOptionShowNull"] }] }); }
+	`, isInline: true, styles: [":host{display:block;inline-size:100%}\n"], dependencies: [{ kind: "component", type: NumericBadgeComponent, selector: "lu-numeric-badge", inputs: ["value", "size", "loading", "maxValue", "disableTooltip", "palette"] }, { kind: "directive", type: LuMultiSelectDisplayerInputDirective, selector: "[luMultiSelectDisplayerInput]" }, { kind: "directive", type: _LuOptionOutletDirective, selector: "[luOptionOutlet]", inputs: ["luOptionOutlet", "luOptionOutletValue", "luOptionShowNull"] }, { kind: "component", type: ChipComponent, selector: "lu-chip", inputs: ["withEllipsis", "unkillable", "palette", "disabled"], outputs: ["kill"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: LuMultiSelectAllDisplayerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: LuMultiSelectAllDisplayerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lu-multi-select-all-displayer', standalone: true, imports: [NumericBadgeComponent, LuMultiSelectDisplayerInputDirective, _LuOptionOutletDirective], template: `
+            args: [{ selector: 'lu-multi-select-all-displayer', imports: [NumericBadgeComponent, LuMultiSelectDisplayerInputDirective, _LuOptionOutletDirective, ChipComponent], 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()) {
-						<div class="multipleSelect-displayer-chip chip" [class.mod-unkillable]="disabled()">
-							<span class="multipleSelect-displayer-chip-value" *luOptionOutlet="select.displayerTpl(); value: select.value[0]"></span>
-
-							@if (!disabled()) {
-								<button type="button" class="chip-kill" (click)="unselectOption(select.value[0], $event)">
-									<span class="pr-u-mask">{{ intl.removeOption }}</span>
-								</button>
-							}
-						</div>
+						<lu-chip withEllipsis (kill)="unselectOption(select.value[0], $event)" class="multipleSelect-displayer-chip" [unkillable]="disabled()">
+							<ng-template *luOptionOutlet="select.displayerTpl(); value: select.value[0]" />
+						</lu-chip>
 					} @else {
 						<lu-numeric-badge disableTooltip class="multipleSelect-displayer-numericBadge" [value]="displayerCount()" />
 						<span class="multipleSelect-displayer-label"> {{ displayerLabel() }} </span>
@@ -784,7 +779,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
 			}
 		</div>
 	`, styles: [":host{display:block;inline-size:100%}\n"] }]
-        }], propDecorators: { inputElementRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => LuMultiSelectDisplayerInputDirective), { ...{ read: ElementRef }, isSignal: true }] }] } });
+        }] });
 
 class LuMultiSelectAllHeaderComponent {
     #selectableItem;
@@ -792,8 +787,8 @@ class LuMultiSelectAllHeaderComponent {
     constructor() {
         this.intl = getIntl(LU_MULTI_SELECT_TRANSLATIONS);
         this.selectAllContext = inject(MULTI_SELECT_WITH_SELECT_ALL_CONTEXT);
-        this.mixed = computed(() => this.selectAllContext.mode() === 'exclude' || this.selectAllContext.mode() === 'include', ...(ngDevMode ? [{ debugName: "mixed" }] : []));
-        this.isSelected = computed(() => this.selectAllContext.mode() === 'all' || this.mixed(), ...(ngDevMode ? [{ debugName: "isSelected" }] : []));
+        this.mixed = computed(() => this.selectAllContext.mode() === 'exclude' || this.selectAllContext.mode() === 'include');
+        this.isSelected = computed(() => this.selectAllContext.mode() === 'all' || this.mixed());
         this.#selectableItem = inject(_CoreSelectPanelElement);
         this.#elementRef = inject(ElementRef);
         this.#selectableItem.id.set(`multi-select-select-all`);
@@ -813,8 +808,8 @@ class LuMultiSelectAllHeaderComponent {
             this.selectAllContext.setSelectAll(!this.isSelected());
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: LuMultiSelectAllHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.12", type: LuMultiSelectAllHeaderComponent, isStandalone: true, selector: "lu-multi-select-all-header", hostDirectives: [{ directive: i1$1.ɵCoreSelectPanelElement }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: LuMultiSelectAllHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: LuMultiSelectAllHeaderComponent, isStandalone: true, selector: "lu-multi-select-all-header", hostDirectives: [{ directive: i1$1.ɵCoreSelectPanelElement }], ngImport: i0, template: `
 		<div class="multiSelectAllDisplayer">
 			<lu-form-field [label]="intl.selectAll">
 				<lu-checkbox-input
@@ -828,9 +823,9 @@ class LuMultiSelectAllHeaderComponent {
 		</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-block:0 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(.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(.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: ["label", "hiddenLabel", "rolePresentationLabel", "inline", "statusControl", "tooltip", "tag", "AI", "iconAItooltip", "iconAIalt", "width", "invalid", "inlineMessage", "errorInlineMessage", "inlineMessageState", "size", "extraDescribedBy", "layout", "counter"], outputs: ["rolePresentationLabelChange", "layoutChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: LuMultiSelectAllHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: LuMultiSelectAllHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lu-multi-select-all-header', standalone: true, imports: [FormsModule, CheckboxInputComponent, FormFieldComponent], hostDirectives: [_CoreSelectPanelElement], template: `
+            args: [{ selector: 'lu-multi-select-all-header', imports: [FormsModule, CheckboxInputComponent, FormFieldComponent], hostDirectives: [_CoreSelectPanelElement], template: `
 		<div class="multiSelectAllDisplayer">
 			<lu-form-field [label]="intl.selectAll">
 				<lu-checkbox-input
@@ -860,14 +855,14 @@ class LuMultiSelectWithSelectAllDirective extends _IsSelectedStrategy {
     constructor() {
         super();
         this.#select = inject(LuMultiSelectInputComponent);
-        this.displayerLabel = input.required(...(ngDevMode ? [{ debugName: "displayerLabel", alias: 'withSelectAllDisplayerLabel' }] : [{ alias: 'withSelectAllDisplayerLabel' }]));
-        this.#mode = signal('none', ...(ngDevMode ? [{ debugName: "#mode" }] : []));
-        this.#values = signal([], ...(ngDevMode ? [{ debugName: "#values" }] : []));
+        this.displayerLabel = input.required({ alias: 'withSelectAllDisplayerLabel' });
+        this.#mode = signal('none');
+        this.#values = signal([]);
         this.mode = this.#mode.asReadonly();
         this.values = this.#values.asReadonly();
         this.totalCount = toSignal(inject(CORE_SELECT_API_TOTAL_COUNT_PROVIDER).totalCount$);
-        this.#hasValue = computed(() => this.mode() !== 'none', ...(ngDevMode ? [{ debugName: "#hasValue" }] : []));
-        this.#valuesCount = computed(() => this.values().length, ...(ngDevMode ? [{ debugName: "#valuesCount" }] : []));
+        this.#hasValue = computed(() => this.mode() !== 'none');
+        this.#valuesCount = computed(() => this.values().length);
         this.displayerCount = computed(() => {
             switch (this.mode()) {
                 case 'all':
@@ -879,11 +874,11 @@ class LuMultiSelectWithSelectAllDirective extends _IsSelectedStrategy {
                 case 'none':
                     return null;
             }
-        }, ...(ngDevMode ? [{ debugName: "displayerCount" }] : []));
+        });
         this.#selectAllValue = computed(() => {
             const mode = this.#mode();
             return mode === 'all' || mode === 'none' ? { mode } : { mode, values: this.#values() };
-        }, ...(ngDevMode ? [{ debugName: "#selectAllValue" }] : []));
+        });
         // Keep the original registerOnChange / writeValue / clearValye methods
         this.#selectRegisterOnChange = this.#select.registerOnChange.bind(this.#select);
         this.#selectWriteValue = this.#select.writeValue.bind(this.#select);
@@ -894,8 +889,8 @@ class LuMultiSelectWithSelectAllDirective extends _IsSelectedStrategy {
         this.#select.panelHeaderTpl.set(LuMultiSelectAllHeaderComponent);
         this.#select.valuesTpl.set(LuMultiSelectAllDisplayerComponent);
         this.#select.hasValue = () => this.#hasValue();
-        this.#select.isFilterPillEmpty = computed(() => !this.#hasValue(), ...(ngDevMode ? [{ debugName: "isFilterPillEmpty" }] : []));
-        this.#select.useSingleOptionDisplayer = computed(() => this.#mode() === 'include', ...(ngDevMode ? [{ debugName: "useSingleOptionDisplayer" }] : []));
+        this.#select.isFilterPillEmpty = computed(() => !this.#hasValue());
+        this.#select.useSingleOptionDisplayer = computed(() => this.#mode() === 'include');
         this.#select.valueLength = this.displayerCount;
     }
     setSelectAll(selectAll) {
@@ -986,8 +981,8 @@ class LuMultiSelectWithSelectAllDirective extends _IsSelectedStrategy {
         // No match, keep the same mode
         return fromMode;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: LuMultiSelectWithSelectAllDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.12", 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: "20.0.2", ngImport: i0, type: LuMultiSelectWithSelectAllDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.2", type: LuMultiSelectWithSelectAllDirective, isStandalone: true, selector: "lu-multi-select[withSelectAll]", inputs: { displayerLabel: { classPropertyName: "displayerLabel", publicName: "withSelectAllDisplayerLabel", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
             {
                 provide: _IsSelectedStrategy,
                 useExisting: forwardRef(() => LuMultiSelectWithSelectAllDirective),
@@ -998,12 +993,11 @@ class LuMultiSelectWithSelectAllDirective extends _IsSelectedStrategy {
             },
         ], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: LuMultiSelectWithSelectAllDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: LuMultiSelectWithSelectAllDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
                     selector: 'lu-multi-select[withSelectAll]',
-                    standalone: true,
                     providers: [
                         {
                             provide: _IsSelectedStrategy,
@@ -1015,7 +1009,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                         },
                     ],
                 }]
-        }], ctorParameters: () => [], propDecorators: { displayerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "withSelectAllDisplayerLabel", required: true }] }] } });
+        }], ctorParameters: () => [] });
 
 class LuMultiSelectCounterDisplayerComponent {
     constructor() {
@@ -1043,8 +1037,8 @@ class LuMultiSelectCounterDisplayerComponent {
             this.inputElementRef.nativeElement.value = '';
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: LuMultiSelectCounterDisplayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: LuMultiSelectCounterDisplayerComponent, isStandalone: true, selector: "lu-multi-select-counter-displayer", inputs: { selected: "selected", label: "label" }, viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: LuMultiSelectCounterDisplayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: LuMultiSelectCounterDisplayerComponent, isStandalone: true, selector: "lu-multi-select-counter-displayer", inputs: { selected: "selected", label: "label" }, viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: `
 		<div class="multipleSelect-displayer mod-filter" [class.is-filled]="(selectedOptions$ | async)?.length > 0">
 			<input type="text" autocomplete="off" #inputElement luMultiSelectDisplayerInput />
 			@if (selectedOptions$ | async; as selectedOptions) {
@@ -1061,11 +1055,11 @@ class LuMultiSelectCounterDisplayerComponent {
 				</div>
 			}
 		</div>
-	`, isInline: true, styles: ["@layer components{:host{display:block;inline-size:100%}}\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: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+	`, isInline: true, styles: ["@layer components{:host{display:block;inline-size:100%}}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: LuTooltipModule }, { kind: "directive", type: _LuOptionOutletDirective, selector: "[luOptionOutlet]", inputs: ["luOptionOutlet", "luOptionOutletValue", "luOptionShowNull"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: LuMultiSelectDisplayerInputDirective, selector: "[luMultiSelectDisplayerInput]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: LuMultiSelectCounterDisplayerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: LuMultiSelectCounterDisplayerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lu-multi-select-counter-displayer', standalone: true, imports: [AsyncPipe, LuTooltipModule, NgPlural, NgPluralCase, _LuOptionOutletDirective, FormsModule, LuMultiSelectDisplayerInputDirective], template: `
+            args: [{ selector: 'lu-multi-select-counter-displayer', imports: [AsyncPipe, LuTooltipModule, NgPlural, NgPluralCase, _LuOptionOutletDirective, FormsModule, LuMultiSelectDisplayerInputDirective], template: `
 		<div class="multipleSelect-displayer mod-filter" [class.is-filled]="(selectedOptions$ | async)?.length > 0">
 			<input type="text" autocomplete="off" #inputElement luMultiSelectDisplayerInput />
 			@if (selectedOptions$ | async; as selectedOptions) {
@@ -1151,43 +1145,33 @@ class LuMultiSelectDefaultDisplayerComponent {
             this.inputElementRef.nativeElement.value = '';
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: LuMultiSelectDefaultDisplayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: LuMultiSelectDefaultDisplayerComponent, isStandalone: true, selector: "lu-multi-select-default-displayer", viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: LuMultiSelectDefaultDisplayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: LuMultiSelectDefaultDisplayerComponent, isStandalone: true, selector: "lu-multi-select-default-displayer", viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: `
 		<div class="multipleSelect-displayer">
 			<input autocomplete="off" #inputElement (keydown.backspace)="inputBackspace()" (keydown.space)="inputSpace($event)" luMultiSelectDisplayerInput />
 			@for (option of displayedOptions$ | async; track option; let index = $index) {
-				<div class="multipleSelect-displayer-chip chip" [class.mod-unkillable]="select.disabled$ | async">
-					<span class="multipleSelect-displayer-chip-value"><ng-container *luOptionOutlet="select.displayerTpl(); value: option" /></span>
-					@if ((select.disabled$ | async) === false) {
-						<button type="button" class="chip-kill" (click)="unselectOption(option, $event)">
-							<span class="pr-u-mask">{{ intl.removeOption }}</span>
-						</button>
-					}
-				</div>
+				<lu-chip withEllipsis (kill)="unselectOption(option, $event)" [unkillable]="select.disabled$ | async">
+					<ng-container *luOptionOutlet="select.displayerTpl(); value: option" />
+				</lu-chip>
 			}
 			@if (overflowOptions$ | async; as overflow) {
-				<div class="multipleSelect-displayer-chip chip">+ {{ overflow }}</div>
+				<lu-chip unkillable>+ {{ overflow }}</lu-chip>
 			}
 		</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: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+	`, isInline: true, styles: ["@layer components{:host{display:block;inline-size:100%;min-inline-size:0}}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { 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", inputs: ["withEllipsis", "unkillable", "palette", "disabled"], outputs: ["kill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: LuMultiSelectDefaultDisplayerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: LuMultiSelectDefaultDisplayerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lu-multi-select-default-displayer', standalone: true, imports: [AsyncPipe, LuTooltipModule, _LuOptionOutletDirective, FormsModule, LuMultiSelectDisplayerInputDirective], template: `
+            args: [{ selector: 'lu-multi-select-default-displayer', imports: [AsyncPipe, LuTooltipModule, _LuOptionOutletDirective, FormsModule, LuMultiSelectDisplayerInputDirective, ChipComponent], template: `
 		<div class="multipleSelect-displayer">
 			<input autocomplete="off" #inputElement (keydown.backspace)="inputBackspace()" (keydown.space)="inputSpace($event)" luMultiSelectDisplayerInput />
 			@for (option of displayedOptions$ | async; track option; let index = $index) {
-				<div class="multipleSelect-displayer-chip chip" [class.mod-unkillable]="select.disabled$ | async">
-					<span class="multipleSelect-displayer-chip-value"><ng-container *luOptionOutlet="select.displayerTpl(); value: option" /></span>
-					@if ((select.disabled$ | async) === false) {
-						<button type="button" class="chip-kill" (click)="unselectOption(option, $event)">
-							<span class="pr-u-mask">{{ intl.removeOption }}</span>
-						</button>
-					}
-				</div>
+				<lu-chip withEllipsis (kill)="unselectOption(option, $event)" [unkillable]="select.disabled$ | async">
+					<ng-container *luOptionOutlet="select.displayerTpl(); value: option" />
+				</lu-chip>
 			}
 			@if (overflowOptions$ | async; as overflow) {
-				<div class="multipleSelect-displayer-chip chip">+ {{ overflow }}</div>
+				<lu-chip unkillable>+ {{ overflow }}</lu-chip>
 			}
 		</div>
 	`, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer components{:host{display:block;inline-size:100%;min-inline-size:0}}\n"] }]
@@ -1206,14 +1190,13 @@ class LuMultiDisplayerDirective {
     static ngTemplateContextGuard(_dir, ctx) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: LuMultiDisplayerDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.12", type: LuMultiDisplayerDirective, isStandalone: true, selector: "[luMultiDisplayer]", inputs: { select: ["luMultiDisplayerSelect", "select"] }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: LuMultiDisplayerDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.2", type: LuMultiDisplayerDirective, isStandalone: true, selector: "[luMultiDisplayer]", inputs: { select: ["luMultiDisplayerSelect", "select"] }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: LuMultiDisplayerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: LuMultiDisplayerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[luMultiDisplayer]',
-                    standalone: true,
                 }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { select: [{
                 type: Input,