@lucca-front/ng 16.3.1-rc.2 → 16.4.0-rc.1

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

@@ -0,0 +1,669 @@
+import * as i1$1 from '@angular/common';
+import { AsyncPipe, NgIf, NgFor, NgTemplateOutlet, CommonModule, NgPlural, NgPluralCase } from '@angular/common';
+import * as i0 from '@angular/core';
+import { InjectionToken, EventEmitter, Pipe, inject, ElementRef, Directive, Input, Component, ChangeDetectionStrategy, ViewChild, ViewChildren, HostListener, Injector, ChangeDetectorRef, Injectable, forwardRef, HostBinding, DestroyRef, NgZone } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { getIntl } from '@lucca-front/ng/core';
+import { LuSelectPanelRef, SELECT_ID, ɵLuOptionComponent, ɵLuOptionOutletDirective, ALuSelectInputComponent, provideLuSelectOverlayContainer, provideLuSelectLabelsAndIds, LU_OPTION_CONTEXT } from '@lucca-front/ng/core-select';
+import { LuTooltipModule } from '@lucca-front/ng/tooltip';
+import { observeOn, asyncScheduler, map, filter, take, takeUntil, ReplaySubject, Observable, distinctUntilChanged, concatMap, startWith, combineLatest, debounceTime } from 'rxjs';
+import * as i2 from '@angular/forms';
+import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Overlay, OverlayPositionBuilder, ScrollStrategyOptions } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import * as i1 from '@angular/cdk/a11y';
+import { ActiveDescendantKeyManager, A11yModule } from '@angular/cdk/a11y';
+
+const LU_MULTI_SELECT_TRANSLATIONS = new InjectionToken('LuMultiSelectTranslations', {
+    factory: () => luMultiSelectTranslations,
+});
+const luMultiSelectTranslations = {
+    en: {
+        placeholder: 'Select an option',
+        search: 'Search',
+        clear: 'Clear selection',
+        clearSearch: 'Clear search',
+        emptyResults: 'No results',
+        emptySelection: 'Select items in the left list to start',
+        expand: 'Expand',
+        reduce: 'Reduce',
+        selectAll: 'Select all',
+    },
+    fr: {
+        placeholder: 'Sélectionnez une option',
+        search: 'Rechercher',
+        clear: 'Vider la sélection',
+        clearSearch: 'Vider la recherche',
+        emptySelection: 'Sélectionnez les éléments dans la liste de gauche pour commencer',
+        emptyResults: 'Aucun résultat pour votre recherche',
+        expand: 'Étendre',
+        reduce: 'Réduire',
+        selectAll: 'Tout sélectionner',
+    },
+    de: {
+        placeholder: 'Wählen Sie eine Option',
+        search: 'Suche',
+        clear: 'Auswahl löschen',
+        clearSearch: 'Suche löschen',
+        emptyResults: 'Keine Ergebnisse für Ihre Suche',
+        emptySelection: 'Wählen Sie Elemente in der linken Liste aus, um zu beginnen',
+        expand: 'Erweitern',
+        reduce: 'Reduzieren',
+        selectAll: 'Alles auswählen',
+    },
+    es: {
+        placeholder: 'Seleccione una opción',
+        search: 'Buscar',
+        clear: 'Borrar selección',
+        clearSearch: 'Borrar búsqueda',
+        emptyResults: 'No hay resultados para su búsqueda',
+        emptySelection: 'Seleccione elementos en la lista de la izquierda para comenzar',
+        expand: 'Expandir',
+        reduce: 'Reducir',
+        selectAll: 'Seleccionar todo',
+    },
+    pt: {
+        placeholder: 'Selecione uma opção',
+        search: 'Pesquisar',
+        clear: 'Limpar seleção',
+        clearSearch: 'Limpar pesquisa',
+        emptyResults: 'Nenhum resultado para sua pesquisa',
+        emptySelection: 'Selecione itens na lista à esquerda para começar',
+        expand: 'Expandir',
+        reduce: 'Reduzir',
+        selectAll: 'Selecionar tudo',
+    },
+};
+
+class LuMultiSelectPanelRef extends LuSelectPanelRef {
+    constructor() {
+        super(...arguments);
+        this.selectAll = new EventEmitter();
+    }
+    close() {
+        super.close();
+        this.selectAll.complete();
+    }
+}
+
+const MULTI_SELECT_PANEL_DATA = new InjectionToken('MultiSelectPanelData');
+
+class LuIsOptionSelectedPipe {
+    transform(option, comparer, selectedOptions) {
+        return selectedOptions.some((selectedOption) => comparer(option, selectedOption));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: LuIsOptionSelectedPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.3", ngImport: i0, type: LuIsOptionSelectedPipe, isStandalone: true, name: "luIsOptionSelected" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: LuIsOptionSelectedPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'luIsOptionSelected',
+                    standalone: true,
+                }]
+        }] });
+
+class ɵLuMultiSelectSelectedChipDirective {
+    constructor() {
+        this.elementRef = inject(ElementRef).nativeElement;
+    }
+    setActiveStyles() {
+        this.elementRef.querySelector('button').focus();
+    }
+    setInactiveStyles() {
+        // Nothing to do
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: ɵLuMultiSelectSelectedChipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.3", type: ɵLuMultiSelectSelectedChipDirective, isStandalone: true, selector: "[luMultiSelectSelectedChip]", inputs: { option: ["luMultiSelectSelectedChip", "option"] }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: ɵLuMultiSelectSelectedChipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[luMultiSelectSelectedChip]',
+                }]
+        }], propDecorators: { option: [{
+                type: Input,
+                args: ['luMultiSelectSelectedChip']
+            }] } });
+
+class LuMultiSelectPanelComponent {
+    constructor() {
+        this.panelData = inject(MULTI_SELECT_PANEL_DATA);
+        this.panelRef = inject(LuMultiSelectPanelRef);
+        this.selectId = inject(SELECT_ID);
+        this.intl = getIntl(LU_MULTI_SELECT_TRANSLATIONS);
+        this.isExpanded = this.panelData.expanded;
+        this.options$ = this.panelData.options$;
+        this.loading$ = this.panelData.loading$;
+        this.areAllOptionsSelected$ = this.panelData.areAllOptionsSelected$;
+        this.canSelectAll = false; // TODO connect to panel options when we'll be ok on designing select all
+        this.optionComparer = this.panelData.optionComparer;
+        this.selectedOptions = this.panelData.initialValue || [];
+        this.optionTpl = this.panelData.optionTpl;
+        this.searchable = this.panelData.searchable;
+        this.search = null;
+    }
+    onScroll(evt) {
+        if (!(evt.target instanceof HTMLElement)) {
+            return;
+        }
+        if (evt.target.scrollTop === 0) {
+            this.panelRef.previousPage.emit();
+        }
+        if (evt.target.scrollHeight - evt.target.scrollTop - evt.target.clientHeight < 1) {
+            this.panelRef.nextPage.emit();
+        }
+    }
+    ngAfterViewInit() {
+        if (!this.optionsQL) {
+            return;
+        }
+        this.initLeftColumnKeyManager();
+        this.initRightColumnKeyManager();
+        if (this.searchInput) {
+            setTimeout(() => this.searchInput.nativeElement.focus());
+        }
+        if (this.isExpanded) {
+            this.panelRef.useExpandedPosition();
+        }
+        else {
+            this.panelRef.useDefaultPosition();
+        }
+    }
+    onKeyDown($event) {
+        if ($event.key === 'Escape') {
+            return this.panelRef.close();
+        }
+    }
+    onLeftColumnKeydown($event) {
+        if ($event.code === 'Space' || $event.code === 'Enter') {
+            this.toggleOption(this.leftColumnKeyManager?.activeItem?.option);
+            $event.preventDefault();
+            return;
+        }
+        this.leftColumnKeyManager?.onKeydown($event);
+    }
+    onRightColumnKeydown($event) {
+        const option = this.rightColumnKeyManager?.activeItem?.option;
+        if (option && ($event.code === 'Space' || $event.code === 'Enter')) {
+            this.onChipKillClick(option);
+            $event.preventDefault();
+            return;
+        }
+        this.rightColumnKeyManager?.onKeydown($event);
+    }
+    // toggleAll(shouldSelectAll: boolean): void {
+    // 	if (shouldSelectAll) {
+    // 		this.panelRef.selectAll.emit();
+    // 	} else {
+    // 		this.clear();
+    // 	}
+    // }
+    updateClue(clue) {
+        this.search = clue;
+        this.panelRef.clueChanged.emit(clue);
+        setTimeout(() => this.leftColumnKeyManager.setFirstItemActive());
+    }
+    toggleOption(option) {
+        const selectedOption = this.selectedOptions.find((o) => this.optionComparer(o, option));
+        this.selectedOptions = selectedOption ? this.selectedOptions.filter((o) => o !== selectedOption) : [...this.selectedOptions, option];
+        this.panelRef.emitValue(this.selectedOptions);
+        this.leftColumnKeyManager?.setActiveItem(this.optionsQL.toArray().findIndex((o) => o.option === option));
+    }
+    onChipKillClick(option) {
+        const optionToUnselectIndex = this.selectedOptions.findIndex((o) => this.optionComparer(o, option));
+        this.selectedOptions = this.selectedOptions.filter((_, index) => index !== optionToUnselectIndex);
+        this.panelRef.emitValue(this.selectedOptions);
+        if (this.selectedOptions.length && this.rightColumnKeyManager) {
+            optionToUnselectIndex >= this.selectedOptions.length ? this.rightColumnKeyManager.setPreviousItemActive() : this.rightColumnKeyManager.setNextItemActive();
+        }
+    }
+    clear() {
+        this.selectedOptions = [];
+        this.panelRef.emitValue(this.selectedOptions);
+    }
+    initLeftColumnKeyManager() {
+        this.leftColumnKeyManager = new ActiveDescendantKeyManager(this.optionsQL).withHomeAndEnd();
+        if (this.selectedOptions) {
+            this.options$
+                ?.pipe(observeOn(asyncScheduler), map((options) => (this.selectedOptions.length ? options.findIndex((o) => this.optionComparer(o, this.selectedOptions[0])) : -1)), filter((index) => index !== -1), take(1), takeUntil(this.panelRef.closed))
+                .subscribe((selectedIndex) => this.leftColumnKeyManager.setActiveItem(selectedIndex));
+        }
+        this.leftColumnKeyManager.change
+            .pipe(map(() => this.leftColumnKeyManager.activeItem?.id), takeUntil(this.panelRef.closed))
+            .subscribe((activeDescendant) => this.panelRef.activeOptionIdChanged.emit(activeDescendant));
+    }
+    initRightColumnKeyManager() {
+        this.rightColumnKeyManager = new ActiveDescendantKeyManager(this.selectedChipsQL).withHomeAndEnd();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: LuMultiSelectPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.3", type: LuMultiSelectPanelComponent, isStandalone: true, selector: "lu-select-panel", host: { listeners: { "keydown": "onKeyDown($event)" } }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "optionsQL", predicate: ɵLuOptionComponent, descendants: true }, { propertyName: "selectedChipsQL", predicate: ɵLuMultiSelectSelectedChipDirective, descendants: true }], ngImport: i0, template: "<!-- TODO : il faudrait remplacer la classe is-expanded par un attribut aria-expanded=\"true\"-->\r\n<ng-template #searchInputTpl>\r\n\t<label class=\"panel-search textfield mod-search mod-outlined lu-multiselect-search\">\r\n\t\t<input\r\n\t\t\t#searchInput\r\n\t\t\tclass=\"textfield-input\"\r\n\t\t\t[(ngModel)]=\"search\"\r\n\t\t\t(ngModelChange)=\"updateClue($event)\"\r\n\t\t\t[ngModelOptions]=\"{ standalone: true }\"\r\n\t\t/>\r\n\t\t<span class=\"u-mask textfield-label\">{{ intl.search }}</span>\r\n\t</label>\r\n</ng-template>\r\n\r\n<div\r\n\tclass=\"lu-picker-panel lu-option-picker-panel lu-multiselect-panel mod-multiple\"\r\n\trole=\"dialog\"\r\n\tcdkTrapFocus\r\n\t*ngIf=\"{ options: options$ | async } as ctx\"\r\n\t[cdkTrapFocusAutoCapture]=\"true\"\r\n\t[class.is-expanded]=\"isExpanded\"\r\n\t[attr.aria-expanded]=\"isExpanded ? 'true' : undefined\"\r\n>\r\n\t<div class=\"lu-multiselect-panel-form\" *ngIf=\"searchable && !isExpanded\">\r\n\t\t<ng-container *ngTemplateOutlet=\"searchInputTpl\"></ng-container>\r\n\t\t<!--\t\t<button class=\"button mod-text mod-icon lu-multiselect-expandbutton\" type=\"button\" (click)=\"toggleExpansion()\">-->\r\n\t\t<!--\t\t\t<span aria-hidden=\"true\" class=\"lucca-icon\" [class.icon-fullscreen]=\"!isExpanded\" [class.icon-fullscreenExit]=\"isExpanded\"></span>-->\r\n\t\t<!--\t\t\t{{ isExpanded ? intl.reduce : intl.expand }}-->\r\n\t\t<!--\t\t</button>-->\r\n\t</div>\r\n\t<div class=\"lu-multiselect-panel-columns\">\r\n\t\t<div class=\"lu-multiselect-panel-columns-col1\" (keydown)=\"onLeftColumnKeydown($event)\">\r\n\t\t\t<div class=\"lu-multiselect-panel-form\" *ngIf=\"searchable && isExpanded\">\r\n\t\t\t\t<ng-container *ngTemplateOutlet=\"searchInputTpl\"></ng-container>\r\n\t\t\t</div>\r\n\t\t\t<div\r\n\t\t\t\tclass=\"lu-picker-content lu-multiselect-panel-columns-col1-content\"\r\n\t\t\t\t[class.is-loading]=\"loading$ | async\"\r\n\t\t\t\ttabindex=\"0\"\r\n\t\t\t\tcdkFocusInitial\r\n\t\t\t\trole=\"list\"\r\n\t\t\t\taria-multiselectable=\"true\"\r\n\t\t\t\t(scroll)=\"onScroll($event)\"\r\n\t\t\t>\r\n\t\t\t\t<ng-container *ngIf=\"searchable\">\r\n\t\t\t\t\t<div class=\"optionPlaceholder\" *ngIf=\"search && !ctx.options?.length\">\r\n\t\t\t\t\t\t<p class=\"optionPlaceholder-content u-marginBottom0\">{{ intl.emptyResults }}</p>\r\n\t\t\t\t\t\t<button type=\"button\" class=\"link\" (click)=\"updateClue(null); searchInput.nativeElement.focus()\">{{ intl.clearSearch }}</button>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</ng-container>\r\n\r\n\t\t\t\t<!--\t\t\t\t<ng-container *ngIf=\"canSelectAll\">-->\r\n\t\t\t\t<!--\t\t\t\t\t<label class=\"checkbox lu-multiselect-selectall\" role=\"option\" [for]=\"selectId + '-select-all'\">-->\r\n\t\t\t\t<!--\t\t\t\t\t\t<input-->\r\n\t\t\t\t<!--\t\t\t\t\t\t\tclass=\"checkbox-input\"-->\r\n\t\t\t\t<!--\t\t\t\t\t\t\ttype=\"checkbox\"-->\r\n\t\t\t\t<!--\t\t\t\t\t\t\t[class.is-incomplete]=\"(areAllOptionsSelected$ | async) !== true && selectedOptions.length\"-->\r\n\t\t\t\t<!--\t\t\t\t\t\t\t[id]=\"selectId + '-select-all'\"-->\r\n\t\t\t\t<!--\t\t\t\t\t\t\t[ngModel]=\"(areAllOptionsSelected$ | async) === true || !!selectedOptions.length\"-->\r\n\t\t\t\t<!--\t\t\t\t\t\t\t(ngModelChange)=\"toggleAll($event)\"-->\r\n\t\t\t\t<!--\t\t\t\t\t\t/>-->\r\n\t\t\t\t<!--\t\t\t\t\t\t<span class=\"checkbox-label\">{{ intl.selectAll }}</span>-->\r\n\t\t\t\t<!--\t\t\t\t\t</label>-->\r\n\t\t\t\t<!--\t\t\t\t</ng-container>-->\r\n\r\n\t\t\t\t<div class=\"lu-picker-content-option\">\r\n\t\t\t\t\t<lu-select-option\r\n\t\t\t\t\t\t*ngFor=\"let option of ctx.options; let index = index\"\r\n\t\t\t\t\t\t[option]=\"option\"\r\n\t\t\t\t\t\t[optionTpl]=\"optionTpl\"\r\n\t\t\t\t\t\t[optionIndex]=\"index\"\r\n\t\t\t\t\t\t[scrollIntoViewOptions]=\"{ block: 'nearest' }\"\r\n\t\t\t\t\t\t[isSelected]=\"option | luIsOptionSelected:optionComparer:selectedOptions\"\r\n\t\t\t\t\t\t(click)=\"toggleOption(option)\"\r\n\t\t\t\t\t></lu-select-option>\r\n\t\t\t\t</div>\r\n\r\n\t\t\t\t<div *ngIf=\"loading$ | async\" class=\"panel-loading loading lu-picker-loading\"></div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<div class=\"lu-multiselect-panel-columns-col2\" *ngIf=\"isExpanded\">\r\n\t\t\t<div class=\"lu-multiselect-emptystate\" *ngIf=\"!selectedOptions.length\">{{ intl.emptySelection }}</div>\r\n\t\t\t<div class=\"lu-multiselect-chips\" role=\"listbox\" tabindex=\"0\" *ngIf=\"selectedOptions.length\" (keydown)=\"onRightColumnKeydown($event)\">\r\n\t\t\t\t<div role=\"option\" class=\"chip lu-multiselect-chip\" *ngFor=\"let option of selectedOptions\" [luMultiSelectSelectedChip]=\"option\">\r\n\t\t\t\t\t<ng-container *luOptionOutlet=\"optionTpl; value: option\"></ng-container>\r\n\t\t\t\t\t<button type=\"button\" class=\"chip-kill\" tabindex=\"-1\" (click)=\"onChipKillClick(option)\"></button>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t\t<div *ngIf=\"selectedOptions.length\" class=\"lu-multiselect-panel-columns-col2-footer\">\r\n\t\t\t\t<button class=\"button mod-text\" type=\"button\" (click)=\"clear()\">{{ intl.clear }}</button>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n</div>\r\n", styles: [":root{--components-options-item-padding-vertical: var(--spacings-XS);--components-options-item-padding-horizontal: var(--spacings-XS);--components-options-item-multiple-padding: 2.25rem;--components-options-item-icon-color: var(--palettes-grey-800);--components-options-checkbox-left: .5rem;--components-options-checkbox-size: 1.25rem;--components-options-checkbox-color: var(--palettes-primary-700);--components-options-checkbox-border-radius: 6px;--components-options-checkbox-border-color: var(--palettes-grey-700);--components-options-establishment-multiple-padding: 2rem}.optionPlaceholder{display:block;padding:var(--components-options-item-padding-vertical) var(--components-options-item-padding-horizontal);font-style:italic;color:var(--palettes-grey-600)}.lu-multiselect-panel{display:flex;flex-direction:column;width:100%;border-radius:var(--commons-borderRadius-M);background-color:var(--colors-white-color);box-shadow:var(--commons-boxShadow-M);transition-property:width,min-width,margin-top,margin-left;transition-duration:var(--commons-animations-durations-fast);transition-timing-function:ease-in}.lu-multiselect-panel-form{padding:var(--spacings-XS);z-index:1}.lu-multiselect-panel-columns{display:flex;gap:var(--spacings-XS);padding:0;width:100%;transition:padding var(--commons-animations-durations-standard) ease}.is-expanded .lu-multiselect-panel-columns{padding:var(--spacings-XS)}[class*=lu-multiselect-panel-columns-col]{display:flex;flex-basis:100%;flex-direction:column}.is-expanded [class*=lu-multiselect-panel-columns-col]{border-radius:var(--commons-borderRadius-M)}.lu-multiselect-panel-columns-col2{align-items:flex-start;height:var(--components-picker-max-height);background-color:var(--palettes-grey-25);min-width:18rem}.is-expanded .lu-multiselect-panel-columns-col1{border:var(--commons-divider-width) solid var(--palettes-grey-200)}.lu-multiselect-panel-columns-col1-content{box-shadow:none;animation:none;padding:0;margin:0 var(--spacings-XS) var(--spacings-XS)}.lu-multiselect-panel-columns-col1-content,.lu-multiselect-chips{scroll-snap-type:y proximity;outline:none}.lu-multiselect-panel-columns-col1-content>*,.lu-multiselect-chips>*{scroll-snap-align:center}.lu-multiselect-panel-columns-col1-content:focus-visible,.lu-multiselect-chips:focus-visible{outline:2px solid var(--palettes-primary-700);outline-offset:2px}.lu-multiselect-search{flex-grow:1}.lu-multiselect-selectall{padding:var(--spacings-XS);font-weight:600;border-radius:var(--commons-borderRadius-M);margin-bottom:var(--spacings-XXS)}.lu-multiselect-selectall:hover,.lu-multiselect-selectall:focus-within{background-color:var(--palettes-grey-25)}.lu-multiselect-chips{overflow-y:auto;display:flex;max-height:18.5rem;flex-grow:1;flex-direction:column;align-items:flex-start;align-self:stretch;gap:var(--spacings-XXS);padding:var(--spacings-XS);border-top-left-radius:var(--commons-borderRadius-M);border-top-right-radius:var(--commons-borderRadius-M)}.lu-multiselect-panel-columns-col2-footer{display:flex;flex:0;align-items:flex-end;align-self:stretch;justify-content:flex-end;border-radius:0!important;border-top:var(--commons-divider-border);margin-top:auto;padding:var(--spacings-XXS) var(--spacings-XS)}.lu-multiselect-panel-form{display:flex;gap:var(--spacings-XS)}@media not all and (min-width: 50em){.lu-multiselect-expandbutton{display:none}}.lu-multiselect-emptystate{margin:auto;text-align:center;padding:var(--spacings-S);color:var(--palettes-grey-600)}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: "pipe", type: LuIsOptionSelectedPipe, name: "luIsOptionSelected" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ɵLuOptionComponent, selector: "lu-select-option", inputs: ["optionTpl", "isSelected", "option", "optionIndex", "scrollIntoViewOptions"] }, { kind: "directive", type: ɵLuOptionOutletDirective, selector: "[luOptionOutlet]", inputs: ["luOptionOutlet", "luOptionOutletValue"] }, { kind: "directive", type: ɵLuMultiSelectSelectedChipDirective, selector: "[luMultiSelectSelectedChip]", inputs: ["luMultiSelectSelectedChip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: LuMultiSelectPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lu-select-panel', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [A11yModule, AsyncPipe, FormsModule, LuIsOptionSelectedPipe, NgIf, NgFor, ɵLuOptionComponent, ɵLuOptionOutletDirective, ɵLuMultiSelectSelectedChipDirective, NgTemplateOutlet], template: "<!-- TODO : il faudrait remplacer la classe is-expanded par un attribut aria-expanded=\"true\"-->\r\n<ng-template #searchInputTpl>\r\n\t<label class=\"panel-search textfield mod-search mod-outlined lu-multiselect-search\">\r\n\t\t<input\r\n\t\t\t#searchInput\r\n\t\t\tclass=\"textfield-input\"\r\n\t\t\t[(ngModel)]=\"search\"\r\n\t\t\t(ngModelChange)=\"updateClue($event)\"\r\n\t\t\t[ngModelOptions]=\"{ standalone: true }\"\r\n\t\t/>\r\n\t\t<span class=\"u-mask textfield-label\">{{ intl.search }}</span>\r\n\t</label>\r\n</ng-template>\r\n\r\n<div\r\n\tclass=\"lu-picker-panel lu-option-picker-panel lu-multiselect-panel mod-multiple\"\r\n\trole=\"dialog\"\r\n\tcdkTrapFocus\r\n\t*ngIf=\"{ options: options$ | async } as ctx\"\r\n\t[cdkTrapFocusAutoCapture]=\"true\"\r\n\t[class.is-expanded]=\"isExpanded\"\r\n\t[attr.aria-expanded]=\"isExpanded ? 'true' : undefined\"\r\n>\r\n\t<div class=\"lu-multiselect-panel-form\" *ngIf=\"searchable && !isExpanded\">\r\n\t\t<ng-container *ngTemplateOutlet=\"searchInputTpl\"></ng-container>\r\n\t\t<!--\t\t<button class=\"button mod-text mod-icon lu-multiselect-expandbutton\" type=\"button\" (click)=\"toggleExpansion()\">-->\r\n\t\t<!--\t\t\t<span aria-hidden=\"true\" class=\"lucca-icon\" [class.icon-fullscreen]=\"!isExpanded\" [class.icon-fullscreenExit]=\"isExpanded\"></span>-->\r\n\t\t<!--\t\t\t{{ isExpanded ? intl.reduce : intl.expand }}-->\r\n\t\t<!--\t\t</button>-->\r\n\t</div>\r\n\t<div class=\"lu-multiselect-panel-columns\">\r\n\t\t<div class=\"lu-multiselect-panel-columns-col1\" (keydown)=\"onLeftColumnKeydown($event)\">\r\n\t\t\t<div class=\"lu-multiselect-panel-form\" *ngIf=\"searchable && isExpanded\">\r\n\t\t\t\t<ng-container *ngTemplateOutlet=\"searchInputTpl\"></ng-container>\r\n\t\t\t</div>\r\n\t\t\t<div\r\n\t\t\t\tclass=\"lu-picker-content lu-multiselect-panel-columns-col1-content\"\r\n\t\t\t\t[class.is-loading]=\"loading$ | async\"\r\n\t\t\t\ttabindex=\"0\"\r\n\t\t\t\tcdkFocusInitial\r\n\t\t\t\trole=\"list\"\r\n\t\t\t\taria-multiselectable=\"true\"\r\n\t\t\t\t(scroll)=\"onScroll($event)\"\r\n\t\t\t>\r\n\t\t\t\t<ng-container *ngIf=\"searchable\">\r\n\t\t\t\t\t<div class=\"optionPlaceholder\" *ngIf=\"search && !ctx.options?.length\">\r\n\t\t\t\t\t\t<p class=\"optionPlaceholder-content u-marginBottom0\">{{ intl.emptyResults }}</p>\r\n\t\t\t\t\t\t<button type=\"button\" class=\"link\" (click)=\"updateClue(null); searchInput.nativeElement.focus()\">{{ intl.clearSearch }}</button>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</ng-container>\r\n\r\n\t\t\t\t<!--\t\t\t\t<ng-container *ngIf=\"canSelectAll\">-->\r\n\t\t\t\t<!--\t\t\t\t\t<label class=\"checkbox lu-multiselect-selectall\" role=\"option\" [for]=\"selectId + '-select-all'\">-->\r\n\t\t\t\t<!--\t\t\t\t\t\t<input-->\r\n\t\t\t\t<!--\t\t\t\t\t\t\tclass=\"checkbox-input\"-->\r\n\t\t\t\t<!--\t\t\t\t\t\t\ttype=\"checkbox\"-->\r\n\t\t\t\t<!--\t\t\t\t\t\t\t[class.is-incomplete]=\"(areAllOptionsSelected$ | async) !== true && selectedOptions.length\"-->\r\n\t\t\t\t<!--\t\t\t\t\t\t\t[id]=\"selectId + '-select-all'\"-->\r\n\t\t\t\t<!--\t\t\t\t\t\t\t[ngModel]=\"(areAllOptionsSelected$ | async) === true || !!selectedOptions.length\"-->\r\n\t\t\t\t<!--\t\t\t\t\t\t\t(ngModelChange)=\"toggleAll($event)\"-->\r\n\t\t\t\t<!--\t\t\t\t\t\t/>-->\r\n\t\t\t\t<!--\t\t\t\t\t\t<span class=\"checkbox-label\">{{ intl.selectAll }}</span>-->\r\n\t\t\t\t<!--\t\t\t\t\t</label>-->\r\n\t\t\t\t<!--\t\t\t\t</ng-container>-->\r\n\r\n\t\t\t\t<div class=\"lu-picker-content-option\">\r\n\t\t\t\t\t<lu-select-option\r\n\t\t\t\t\t\t*ngFor=\"let option of ctx.options; let index = index\"\r\n\t\t\t\t\t\t[option]=\"option\"\r\n\t\t\t\t\t\t[optionTpl]=\"optionTpl\"\r\n\t\t\t\t\t\t[optionIndex]=\"index\"\r\n\t\t\t\t\t\t[scrollIntoViewOptions]=\"{ block: 'nearest' }\"\r\n\t\t\t\t\t\t[isSelected]=\"option | luIsOptionSelected:optionComparer:selectedOptions\"\r\n\t\t\t\t\t\t(click)=\"toggleOption(option)\"\r\n\t\t\t\t\t></lu-select-option>\r\n\t\t\t\t</div>\r\n\r\n\t\t\t\t<div *ngIf=\"loading$ | async\" class=\"panel-loading loading lu-picker-loading\"></div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<div class=\"lu-multiselect-panel-columns-col2\" *ngIf=\"isExpanded\">\r\n\t\t\t<div class=\"lu-multiselect-emptystate\" *ngIf=\"!selectedOptions.length\">{{ intl.emptySelection }}</div>\r\n\t\t\t<div class=\"lu-multiselect-chips\" role=\"listbox\" tabindex=\"0\" *ngIf=\"selectedOptions.length\" (keydown)=\"onRightColumnKeydown($event)\">\r\n\t\t\t\t<div role=\"option\" class=\"chip lu-multiselect-chip\" *ngFor=\"let option of selectedOptions\" [luMultiSelectSelectedChip]=\"option\">\r\n\t\t\t\t\t<ng-container *luOptionOutlet=\"optionTpl; value: option\"></ng-container>\r\n\t\t\t\t\t<button type=\"button\" class=\"chip-kill\" tabindex=\"-1\" (click)=\"onChipKillClick(option)\"></button>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t\t<div *ngIf=\"selectedOptions.length\" class=\"lu-multiselect-panel-columns-col2-footer\">\r\n\t\t\t\t<button class=\"button mod-text\" type=\"button\" (click)=\"clear()\">{{ intl.clear }}</button>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n</div>\r\n", styles: [":root{--components-options-item-padding-vertical: var(--spacings-XS);--components-options-item-padding-horizontal: var(--spacings-XS);--components-options-item-multiple-padding: 2.25rem;--components-options-item-icon-color: var(--palettes-grey-800);--components-options-checkbox-left: .5rem;--components-options-checkbox-size: 1.25rem;--components-options-checkbox-color: var(--palettes-primary-700);--components-options-checkbox-border-radius: 6px;--components-options-checkbox-border-color: var(--palettes-grey-700);--components-options-establishment-multiple-padding: 2rem}.optionPlaceholder{display:block;padding:var(--components-options-item-padding-vertical) var(--components-options-item-padding-horizontal);font-style:italic;color:var(--palettes-grey-600)}.lu-multiselect-panel{display:flex;flex-direction:column;width:100%;border-radius:var(--commons-borderRadius-M);background-color:var(--colors-white-color);box-shadow:var(--commons-boxShadow-M);transition-property:width,min-width,margin-top,margin-left;transition-duration:var(--commons-animations-durations-fast);transition-timing-function:ease-in}.lu-multiselect-panel-form{padding:var(--spacings-XS);z-index:1}.lu-multiselect-panel-columns{display:flex;gap:var(--spacings-XS);padding:0;width:100%;transition:padding var(--commons-animations-durations-standard) ease}.is-expanded .lu-multiselect-panel-columns{padding:var(--spacings-XS)}[class*=lu-multiselect-panel-columns-col]{display:flex;flex-basis:100%;flex-direction:column}.is-expanded [class*=lu-multiselect-panel-columns-col]{border-radius:var(--commons-borderRadius-M)}.lu-multiselect-panel-columns-col2{align-items:flex-start;height:var(--components-picker-max-height);background-color:var(--palettes-grey-25);min-width:18rem}.is-expanded .lu-multiselect-panel-columns-col1{border:var(--commons-divider-width) solid var(--palettes-grey-200)}.lu-multiselect-panel-columns-col1-content{box-shadow:none;animation:none;padding:0;margin:0 var(--spacings-XS) var(--spacings-XS)}.lu-multiselect-panel-columns-col1-content,.lu-multiselect-chips{scroll-snap-type:y proximity;outline:none}.lu-multiselect-panel-columns-col1-content>*,.lu-multiselect-chips>*{scroll-snap-align:center}.lu-multiselect-panel-columns-col1-content:focus-visible,.lu-multiselect-chips:focus-visible{outline:2px solid var(--palettes-primary-700);outline-offset:2px}.lu-multiselect-search{flex-grow:1}.lu-multiselect-selectall{padding:var(--spacings-XS);font-weight:600;border-radius:var(--commons-borderRadius-M);margin-bottom:var(--spacings-XXS)}.lu-multiselect-selectall:hover,.lu-multiselect-selectall:focus-within{background-color:var(--palettes-grey-25)}.lu-multiselect-chips{overflow-y:auto;display:flex;max-height:18.5rem;flex-grow:1;flex-direction:column;align-items:flex-start;align-self:stretch;gap:var(--spacings-XXS);padding:var(--spacings-XS);border-top-left-radius:var(--commons-borderRadius-M);border-top-right-radius:var(--commons-borderRadius-M)}.lu-multiselect-panel-columns-col2-footer{display:flex;flex:0;align-items:flex-end;align-self:stretch;justify-content:flex-end;border-radius:0!important;border-top:var(--commons-divider-border);margin-top:auto;padding:var(--spacings-XXS) var(--spacings-XS)}.lu-multiselect-panel-form{display:flex;gap:var(--spacings-XS)}@media not all and (min-width: 50em){.lu-multiselect-expandbutton{display:none}}.lu-multiselect-emptystate{margin:auto;text-align:center;padding:var(--spacings-S);color:var(--palettes-grey-600)}\n"] }]
+        }], propDecorators: { searchInput: [{
+                type: ViewChild,
+                args: ['searchInput']
+            }], optionsQL: [{
+                type: ViewChildren,
+                args: [ɵLuOptionComponent]
+            }], selectedChipsQL: [{
+                type: ViewChildren,
+                args: [ɵLuMultiSelectSelectedChipDirective]
+            }], onKeyDown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+class MultiSelectPanelRef extends LuMultiSelectPanelRef {
+    constructor(overlayRef, parentInjector, panelData, defaultPositionStrategy, expandedPositionStrategy) {
+        super();
+        this.overlayRef = overlayRef;
+        this.defaultPositionStrategy = defaultPositionStrategy;
+        this.expandedPositionStrategy = expandedPositionStrategy;
+        const injector = Injector.create({
+            providers: [
+                { provide: LuMultiSelectPanelRef, useValue: this },
+                { provide: MULTI_SELECT_PANEL_DATA, useValue: panelData },
+            ],
+            parent: parentInjector,
+        });
+        this.portalRef = new ComponentPortal(LuMultiSelectPanelComponent, undefined, injector);
+        this.panelRef = overlayRef.attach(this.portalRef);
+        this.instance = this.panelRef.instance;
+        overlayRef
+            .backdropClick()
+            .pipe(takeUntil(this.closed))
+            .subscribe(() => this.close());
+    }
+    emitValue(value) {
+        this.valueChanged.emit(value);
+    }
+    updateSelectedOptions(selectedOptions) {
+        this.instance.selectedOptions = selectedOptions;
+        // Run change detection on the panel component
+        this.panelRef.injector.get(ChangeDetectorRef).markForCheck();
+    }
+    useExpandedPosition() {
+        this.overlayRef.updatePositionStrategy(this.expandedPositionStrategy);
+    }
+    useDefaultPosition() {
+        this.overlayRef.updatePositionStrategy(this.defaultPositionStrategy);
+    }
+    close() {
+        super.close();
+        this.panelRef.destroy();
+        this.overlayRef.detach();
+    }
+}
+class LuMultiSelectPanelRefFactory {
+    constructor() {
+        this.overlay = inject(Overlay);
+        this.elementRef = inject(ElementRef);
+        this.positionBuilder = inject(OverlayPositionBuilder);
+        this.scrollStrategies = inject(ScrollStrategyOptions);
+        this.parentInjector = inject(Injector);
+    }
+    buildPanelRef(panelData, defaultOverlayConfigOverride = {}, expandedPositionStrategy) {
+        const defaultOverlayConfig = this.buildDefaultOverlayConfig(defaultOverlayConfigOverride);
+        expandedPositionStrategy ??= this.buildExpandedPositionStrategy();
+        const overlayRef = this.overlay.create(defaultOverlayConfig);
+        overlayRef.hostElement.style.transitionProperty = 'height';
+        overlayRef.hostElement.style.transitionDuration = 'var(--commons-animations-durations-standard)';
+        return new MultiSelectPanelRef(overlayRef, this.parentInjector, panelData, defaultOverlayConfig.positionStrategy, expandedPositionStrategy);
+    }
+    buildDefaultOverlayConfig(overlayConfigOverride = {}) {
+        const overlayConfig = { ...overlayConfigOverride };
+        const config = { overlapInput: false, offsetY: 2 };
+        overlayConfig.positionStrategy = this.positionBuilder
+            .flexibleConnectedTo(this.elementRef)
+            .withViewportMargin(10)
+            .withPositions([
+            this.buildPosition('bottom', 'right', config),
+            this.buildPosition('bottom', 'left', config),
+            this.buildPosition('top', 'right', config),
+            this.buildPosition('top', 'left', config),
+        ]);
+        overlayConfig.scrollStrategy = this.scrollStrategies.reposition();
+        overlayConfig.minWidth = this.elementRef.nativeElement.clientWidth;
+        overlayConfig.maxWidth = '100vw';
+        return overlayConfig;
+    }
+    buildExpandedPositionStrategy() {
+        const config = { overlapInput: true, offsetX: -4, offsetY: -4 };
+        return this.positionBuilder
+            .flexibleConnectedTo(this.elementRef)
+            .withViewportMargin(10)
+            .withPositions([
+            this.buildPosition('top', 'right', config),
+            this.buildPosition('top', 'left', config),
+            this.buildPosition('bottom', 'right', config),
+            this.buildPosition('bottom', 'left', config),
+        ]);
+    }
+    buildPosition(yDirection, xDirection, config) {
+        const originX = xDirection === 'right' ? 'start' : 'end';
+        const overlayX = originX;
+        const oppositeYDirection = yDirection === 'top' ? 'bottom' : 'top';
+        const { originY, overlayY } = config.overlapInput
+            ? {
+                originY: oppositeYDirection,
+                overlayY: oppositeYDirection,
+            }
+            : { originY: yDirection, overlayY: oppositeYDirection };
+        return {
+            originX,
+            originY,
+            overlayX,
+            overlayY,
+            ...(config.offsetX ? { offsetX: xDirection === 'right' ? config.offsetX : -config.offsetX } : {}),
+            ...(config.offsetY ? { offsetY: yDirection === 'bottom' ? config.offsetY : -config.offsetY } : {}),
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: LuMultiSelectPanelRefFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: LuMultiSelectPanelRefFactory }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: LuMultiSelectPanelRefFactory, decorators: [{
+            type: Injectable
+        }] });
+
+class LuMultiSelectInputComponent extends ALuSelectInputComponent {
+    constructor() {
+        super(...arguments);
+        this.intl = getIntl(LU_MULTI_SELECT_TRANSLATIONS);
+        this.modMultipleClass = true;
+        this.valuesTpl = LuMultiSelectDefaultDisplayerComponent;
+        // TODO this is for select all
+        // @Output() selectAll = new EventEmitter<void>();
+        this.expanded = false;
+        this.areAllOptionsSelected$ = new ReplaySubject(1);
+        this.panelRefFactory = inject(LuMultiSelectPanelRefFactory);
+    }
+    get panelRef() {
+        return this._panelRef;
+    }
+    writeValue(value) {
+        super.writeValue(value);
+        this.panelRef?.updateSelectedOptions(value);
+    }
+    buildPanelRef() {
+        return this.panelRefFactory.buildPanelRef({
+            initialValue: this.value,
+            optionComparer: this.optionComparer,
+            options$: this.options$,
+            loading$: this.loading$,
+            searchable: this.searchable,
+            optionTpl: this.optionTpl,
+            canSelectAll: false,
+            areAllOptionsSelected$: this.areAllOptionsSelected$,
+            expanded: this.expanded,
+        }, this.overlayConfig, this.expandedPositionStrategy);
+    }
+    bindInputToPanelRefEvents() {
+        if (!this.panelRef) {
+            return;
+        }
+        super.bindInputToPanelRefEvents();
+        // TODO This is for select all
+        // this.panelRef.selectAll.subscribe(() => this.selectAll.emit());
+    }
+    get hasValue() {
+        return this.value && this.value.length > 0;
+    }
+    clearValue(event) {
+        event.stopPropagation();
+        this.onChange?.([]);
+        this.value = [];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: LuMultiSelectInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.3", type: LuMultiSelectInputComponent, isStandalone: true, selector: "lu-multi-select", inputs: { valuesTpl: "valuesTpl", expandedPositionStrategy: "expandedPositionStrategy", expanded: "expanded", panelRef: "panelRef" }, host: { properties: { "class.mod-multiple": "this.modMultipleClass" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => LuMultiSelectInputComponent),
+                multi: true,
+            },
+            {
+                provide: ALuSelectInputComponent,
+                useExisting: forwardRef(() => LuMultiSelectInputComponent),
+            },
+            provideLuSelectOverlayContainer(),
+            provideLuSelectLabelsAndIds(),
+            LuMultiSelectPanelRefFactory,
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"lu-select-placeholder\">{{ placeholder }}</div>\r\n<div class=\"lu-select-value\">\r\n\t<div class=\"lu-select-display-wrapper\">\r\n\t\t<ng-container *luOptionOutlet=\"valuesTpl; value: value\"></ng-container>\r\n\t</div>\r\n</div>\r\n<div class=\"lu-select-suffix\">\r\n\t<a *ngIf=\"hasValue && clearable\" role=\"button\" class=\"clear\" (click)=\"clearValue($event)\">\r\n\t\t<span aria-hidden=\"true\" class=\"lucca-icon icon-thinCross\"></span>\r\n\t\t<span class=\"u-mask\">{{ intl.clear }}</span>\r\n\t</a>\r\n</div>\r\n", styles: [":root{--components-options-item-padding-vertical: var(--spacings-XS);--components-options-item-padding-horizontal: var(--spacings-XS);--components-options-item-multiple-padding: 2.25rem;--components-options-item-icon-color: var(--palettes-grey-800);--components-options-checkbox-left: .5rem;--components-options-checkbox-size: 1.25rem;--components-options-checkbox-color: var(--palettes-primary-700);--components-options-checkbox-border-radius: 6px;--components-options-checkbox-border-color: var(--palettes-grey-700);--components-options-establishment-multiple-padding: 2rem}:host{--components-select-input-padding-horizontal: var(--spacings-XS);--components-select-input-padding-vertical: var(--spacings-XS);--components-select-framed-color: var(--palettes-grey-500);--components-select-framed-color50: var(--palettes-grey-50);--components-select-framed-see-through: var(--palettes-grey-50);--components-select-framed-text: var(--palettes-grey-800);--components-select-framed-placeholder: #cccccc;--components-select-framed-side-padding: var(--spacings-S);--components-select-framed-top-padding: var(--spacings-L);--components-select-framed-bottom-padding: var(--spacings-S);--components-select-framed-label-top-offset: var(--spacings-XS);cursor:pointer;outline:none;padding:0;gap:0}:host:after{display:inline-block;vertical-align:text-bottom;font-style:normal;font-family:Lucca icons;color:var(--palettes-grey-600);bottom:var(--components-select-input-padding-vertical);font-size:var(--sizes-M-lineHeight);line-height:var(--sizes-M-lineHeight);pointer-events:none;position:absolute;right:var(--components-select-input-padding-horizontal)}@supports (content: \"*\"/\"\"){:host:after{content:\"\\e97c\"/\"\"}}@supports not (content: \"*\"/\"\"){:host:after{content:\"\\e97c\"}}:host[disabled],:host.is-disabled{cursor:not-allowed;pointer-events:all}.lu-select-display-wrapper{display:flex;text-overflow:ellipsis;white-space:nowrap;gap:var(--spacings-XXS)}.lu-select-value{line-height:var(--sizes-M-lineHeight);min-height:calc(var(--components-select-framed-bottom-padding) + var(--sizes-M-lineHeight));padding:var(--components-select-input-padding-vertical) 3.5rem var(--components-select-input-padding-vertical) var(--components-select-input-padding-horizontal);transition:all var(--commons-animations-durations-standard);display:none}.lu-select-placeholder{color:var(--palettes-grey-400);line-height:var(--sizes-M-lineHeight);min-height:calc(var(--components-select-framed-bottom-padding) + var(--sizes-M-lineHeight));padding:var(--components-select-input-padding-vertical) 3.5rem var(--components-select-input-padding-vertical) var(--components-select-input-padding-horizontal);transition:all var(--commons-animations-durations-standard);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lu-select-suffix,.lu-select-clearer{position:absolute;bottom:.75rem;right:2.25rem}::ng-deep .lu-select-value lu-simple-select-default-option{max-width:5rem;text-overflow:ellipsis;overflow:hidden}::ng-deep .lu-select-value .label{padding:var(--spacings-XXS) var(--spacings-XS);margin-left:0}::ng-deep .lu-select-value .chip{vertical-align:baseline;max-width:100%;margin:0 var(--spacings-XXS) var(--spacings-XXS) 0;text-overflow:ellipsis;overflow:hidden;vertical-align:top;white-space:nowrap}:host-context(.textfield.mod-S){padding:0}:host-context(.textfield.mod-S) .lu-select-value,:host-context(.textfield.mod-S) .lu-select-placeholder{font-size:var(--sizes-S-fontSize);line-height:var(--sizes-XS-lineHeight);min-height:calc(var(--components-select-framed-bottom-padding) + var(--sizes-XS-lineHeight))}:host-context(.textfield.mod-S) .lu-select-clearer{bottom:var(--spacings-XS)}:host-context(.textfield.mod-S):after{line-height:var(--sizes-XS-lineHeight);font-size:var(--sizes-S-lineHeight)}:host-context(.textfield.mod-S) .lu-select-suffix{bottom:.5rem;right:2rem}:host-context(.textfield.mod-S) ::ng-deep .lu-select-value .label{font-size:var(--sizes-S-fontSize);line-height:var(--sizes-S-lineHeight);font-weight:600;margin:0;padding:0;background-color:transparent}:host-context(.textfield.mod-S) ::ng-deep .lu-select-value .chip{height:var(--sizes-XS-lineHeight);line-height:var(--sizes-XS-lineHeight);font-size:var(--sizes-XS-fontSize);padding-left:var(--spacings-XXS);padding-right:var(--spacings-XXS);gap:var(--spacings-XXS)}:host-context(.textfield.mod-S) ::ng-deep .lu-select-value .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: 6px;--components-numericBadge-fontSize: var(--sizes-XS-fontSize);--components-numericBadge-lineHeight: var(--sizes-XS-lineHeight)}:host-context(.textfield.mod-framed).textfield-input,:host-context(.form.mod-framed).textfield-input{padding:var(--components-select-framed-top-padding) 0 0}:host-context(.textfield.mod-framed).textfield-input:after,:host-context(.form.mod-framed).textfield-input:after{color:var(--palettes-grey-500);bottom:var(--components-select-framed-bottom-padding);right:var(--spacings-XS)}:host-context(.textfield.mod-framed).textfield-input .lu-select-value,:host-context(.form.mod-framed).textfield-input .lu-select-value{padding:0 calc(var(--components-select-framed-side-padding) * 3) var(--components-select-framed-bottom-padding) var(--components-select-framed-side-padding)}:host-context(.textfield.mod-framed).textfield-input .lu-select-placeholder,:host-context(.form.mod-framed).textfield-input .lu-select-placeholder{color:var(--palettes-grey-400);padding:0 calc(var(--components-select-framed-side-padding) * 3) var(--components-select-framed-bottom-padding) var(--components-select-framed-side-padding)}:host-context(.textfield.mod-framed).textfield-input .lu-select-suffix,:host-context(.form.mod-framed).textfield-input .lu-select-suffix{bottom:var(--components-select-framed-bottom-padding);right:1.7rem}:host-context(.textfield.mod-filter) .lu-select-value,:host-context(.textfield.mod-filter) .lu-select-placeholder{padding:0;height:auto;padding-top:var(--spacings-S);color:var(--palettes-grey-800)}:host-context(.textfield.mod-material):after{color:var(--palettes-grey-500);bottom:.6rem;right:0}:host-context(.textfield.mod-material) .lu-select-value,:host-context(.textfield.mod-material) .lu-select-placeholder{padding-left:0;padding-right:.8rem}:host-context(.textfield.mod-material) .lu-select-suffix{right:calc(2 * var(--components-select-input-padding-horizontal))}:host-context(.textfield.mod-material).is-select .lu-select-placeholder{display:none}:host-context(.textfield.mod-material).mod-search:after{bottom:0}:host-context(.textfield.mod-material).mod-search .lu-select-suffix{right:calc(2.75 * var(--components-select-input-padding-horizontal))}:host-context(.textfield.mod-material .textfield-input.is-focused) .lu-select-placeholder{display:none}:host(.mod-multiple) .lu-select-value{height:auto;align-items:center}:host(.mod-multiple) .lu-select-display-wrapper{overflow:visible;white-space:normal;margin-bottom:calc(var(--spacings-XXS) * -1)}:host-context(.textfield.mod-outlined).textfield-input:after{color:var(--palettes-grey-600)}:host-context(.textfield.mod-outlined).textfield-input .lu-select-placeholder{color:var(--palettes-grey-400)}:host-context(.textfield.mod-outlined) :host-context(.textfield-input.is-error):after{color:var(--palettes-error-600)}:host-context(.textfield.mod-outlined) :host-context(.textfield-input.is-error) .lu-select-placeholder{color:var(--palettes-error-400)}:host-context(.textfield-input.is-filled) .lu-select-placeholder{display:none}:host-context(.textfield-input.is-filled) .lu-select-value{display:flex;align-items:flex-start}:host-context(.textfield-input.is-clearable) .lu-select-value{padding-right:3.5rem}:host-context(.textfield-input.is-error):after{color:var(--palettes-error-700)}:host-context(.textfield-input.is-error) .lu-select-placeholder{color:var(--palettes-error-400)}:host-context(.textfield-input.is-disabled,.textfield-input[disabled]):after{color:var(--commons-disabled-color)}:host-context(.textfield-input.is-disabled,.textfield-input[disabled]) .lu-select-placeholder{color:var(--commons-disabled-placeholder)}:host[aria-expanded=true]{outline:none}.lu-select-value{padding-right:2rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: LuTooltipModule }, { kind: "directive", type: ɵLuOptionOutletDirective, selector: "[luOptionOutlet]", inputs: ["luOptionOutlet", "luOptionOutletValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: LuMultiSelectInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lu-multi-select', standalone: true, imports: [CommonModule, LuTooltipModule, ɵLuOptionOutletDirective], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => LuMultiSelectInputComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: ALuSelectInputComponent,
+                            useExisting: forwardRef(() => LuMultiSelectInputComponent),
+                        },
+                        provideLuSelectOverlayContainer(),
+                        provideLuSelectLabelsAndIds(),
+                        LuMultiSelectPanelRefFactory,
+                    ], template: "<div class=\"lu-select-placeholder\">{{ placeholder }}</div>\r\n<div class=\"lu-select-value\">\r\n\t<div class=\"lu-select-display-wrapper\">\r\n\t\t<ng-container *luOptionOutlet=\"valuesTpl; value: value\"></ng-container>\r\n\t</div>\r\n</div>\r\n<div class=\"lu-select-suffix\">\r\n\t<a *ngIf=\"hasValue && clearable\" role=\"button\" class=\"clear\" (click)=\"clearValue($event)\">\r\n\t\t<span aria-hidden=\"true\" class=\"lucca-icon icon-thinCross\"></span>\r\n\t\t<span class=\"u-mask\">{{ intl.clear }}</span>\r\n\t</a>\r\n</div>\r\n", styles: [":root{--components-options-item-padding-vertical: var(--spacings-XS);--components-options-item-padding-horizontal: var(--spacings-XS);--components-options-item-multiple-padding: 2.25rem;--components-options-item-icon-color: var(--palettes-grey-800);--components-options-checkbox-left: .5rem;--components-options-checkbox-size: 1.25rem;--components-options-checkbox-color: var(--palettes-primary-700);--components-options-checkbox-border-radius: 6px;--components-options-checkbox-border-color: var(--palettes-grey-700);--components-options-establishment-multiple-padding: 2rem}:host{--components-select-input-padding-horizontal: var(--spacings-XS);--components-select-input-padding-vertical: var(--spacings-XS);--components-select-framed-color: var(--palettes-grey-500);--components-select-framed-color50: var(--palettes-grey-50);--components-select-framed-see-through: var(--palettes-grey-50);--components-select-framed-text: var(--palettes-grey-800);--components-select-framed-placeholder: #cccccc;--components-select-framed-side-padding: var(--spacings-S);--components-select-framed-top-padding: var(--spacings-L);--components-select-framed-bottom-padding: var(--spacings-S);--components-select-framed-label-top-offset: var(--spacings-XS);cursor:pointer;outline:none;padding:0;gap:0}:host:after{display:inline-block;vertical-align:text-bottom;font-style:normal;font-family:Lucca icons;color:var(--palettes-grey-600);bottom:var(--components-select-input-padding-vertical);font-size:var(--sizes-M-lineHeight);line-height:var(--sizes-M-lineHeight);pointer-events:none;position:absolute;right:var(--components-select-input-padding-horizontal)}@supports (content: \"*\"/\"\"){:host:after{content:\"\\e97c\"/\"\"}}@supports not (content: \"*\"/\"\"){:host:after{content:\"\\e97c\"}}:host[disabled],:host.is-disabled{cursor:not-allowed;pointer-events:all}.lu-select-display-wrapper{display:flex;text-overflow:ellipsis;white-space:nowrap;gap:var(--spacings-XXS)}.lu-select-value{line-height:var(--sizes-M-lineHeight);min-height:calc(var(--components-select-framed-bottom-padding) + var(--sizes-M-lineHeight));padding:var(--components-select-input-padding-vertical) 3.5rem var(--components-select-input-padding-vertical) var(--components-select-input-padding-horizontal);transition:all var(--commons-animations-durations-standard);display:none}.lu-select-placeholder{color:var(--palettes-grey-400);line-height:var(--sizes-M-lineHeight);min-height:calc(var(--components-select-framed-bottom-padding) + var(--sizes-M-lineHeight));padding:var(--components-select-input-padding-vertical) 3.5rem var(--components-select-input-padding-vertical) var(--components-select-input-padding-horizontal);transition:all var(--commons-animations-durations-standard);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lu-select-suffix,.lu-select-clearer{position:absolute;bottom:.75rem;right:2.25rem}::ng-deep .lu-select-value lu-simple-select-default-option{max-width:5rem;text-overflow:ellipsis;overflow:hidden}::ng-deep .lu-select-value .label{padding:var(--spacings-XXS) var(--spacings-XS);margin-left:0}::ng-deep .lu-select-value .chip{vertical-align:baseline;max-width:100%;margin:0 var(--spacings-XXS) var(--spacings-XXS) 0;text-overflow:ellipsis;overflow:hidden;vertical-align:top;white-space:nowrap}:host-context(.textfield.mod-S){padding:0}:host-context(.textfield.mod-S) .lu-select-value,:host-context(.textfield.mod-S) .lu-select-placeholder{font-size:var(--sizes-S-fontSize);line-height:var(--sizes-XS-lineHeight);min-height:calc(var(--components-select-framed-bottom-padding) + var(--sizes-XS-lineHeight))}:host-context(.textfield.mod-S) .lu-select-clearer{bottom:var(--spacings-XS)}:host-context(.textfield.mod-S):after{line-height:var(--sizes-XS-lineHeight);font-size:var(--sizes-S-lineHeight)}:host-context(.textfield.mod-S) .lu-select-suffix{bottom:.5rem;right:2rem}:host-context(.textfield.mod-S) ::ng-deep .lu-select-value .label{font-size:var(--sizes-S-fontSize);line-height:var(--sizes-S-lineHeight);font-weight:600;margin:0;padding:0;background-color:transparent}:host-context(.textfield.mod-S) ::ng-deep .lu-select-value .chip{height:var(--sizes-XS-lineHeight);line-height:var(--sizes-XS-lineHeight);font-size:var(--sizes-XS-fontSize);padding-left:var(--spacings-XXS);padding-right:var(--spacings-XXS);gap:var(--spacings-XXS)}:host-context(.textfield.mod-S) ::ng-deep .lu-select-value .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: 6px;--components-numericBadge-fontSize: var(--sizes-XS-fontSize);--components-numericBadge-lineHeight: var(--sizes-XS-lineHeight)}:host-context(.textfield.mod-framed).textfield-input,:host-context(.form.mod-framed).textfield-input{padding:var(--components-select-framed-top-padding) 0 0}:host-context(.textfield.mod-framed).textfield-input:after,:host-context(.form.mod-framed).textfield-input:after{color:var(--palettes-grey-500);bottom:var(--components-select-framed-bottom-padding);right:var(--spacings-XS)}:host-context(.textfield.mod-framed).textfield-input .lu-select-value,:host-context(.form.mod-framed).textfield-input .lu-select-value{padding:0 calc(var(--components-select-framed-side-padding) * 3) var(--components-select-framed-bottom-padding) var(--components-select-framed-side-padding)}:host-context(.textfield.mod-framed).textfield-input .lu-select-placeholder,:host-context(.form.mod-framed).textfield-input .lu-select-placeholder{color:var(--palettes-grey-400);padding:0 calc(var(--components-select-framed-side-padding) * 3) var(--components-select-framed-bottom-padding) var(--components-select-framed-side-padding)}:host-context(.textfield.mod-framed).textfield-input .lu-select-suffix,:host-context(.form.mod-framed).textfield-input .lu-select-suffix{bottom:var(--components-select-framed-bottom-padding);right:1.7rem}:host-context(.textfield.mod-filter) .lu-select-value,:host-context(.textfield.mod-filter) .lu-select-placeholder{padding:0;height:auto;padding-top:var(--spacings-S);color:var(--palettes-grey-800)}:host-context(.textfield.mod-material):after{color:var(--palettes-grey-500);bottom:.6rem;right:0}:host-context(.textfield.mod-material) .lu-select-value,:host-context(.textfield.mod-material) .lu-select-placeholder{padding-left:0;padding-right:.8rem}:host-context(.textfield.mod-material) .lu-select-suffix{right:calc(2 * var(--components-select-input-padding-horizontal))}:host-context(.textfield.mod-material).is-select .lu-select-placeholder{display:none}:host-context(.textfield.mod-material).mod-search:after{bottom:0}:host-context(.textfield.mod-material).mod-search .lu-select-suffix{right:calc(2.75 * var(--components-select-input-padding-horizontal))}:host-context(.textfield.mod-material .textfield-input.is-focused) .lu-select-placeholder{display:none}:host(.mod-multiple) .lu-select-value{height:auto;align-items:center}:host(.mod-multiple) .lu-select-display-wrapper{overflow:visible;white-space:normal;margin-bottom:calc(var(--spacings-XXS) * -1)}:host-context(.textfield.mod-outlined).textfield-input:after{color:var(--palettes-grey-600)}:host-context(.textfield.mod-outlined).textfield-input .lu-select-placeholder{color:var(--palettes-grey-400)}:host-context(.textfield.mod-outlined) :host-context(.textfield-input.is-error):after{color:var(--palettes-error-600)}:host-context(.textfield.mod-outlined) :host-context(.textfield-input.is-error) .lu-select-placeholder{color:var(--palettes-error-400)}:host-context(.textfield-input.is-filled) .lu-select-placeholder{display:none}:host-context(.textfield-input.is-filled) .lu-select-value{display:flex;align-items:flex-start}:host-context(.textfield-input.is-clearable) .lu-select-value{padding-right:3.5rem}:host-context(.textfield-input.is-error):after{color:var(--palettes-error-700)}:host-context(.textfield-input.is-error) .lu-select-placeholder{color:var(--palettes-error-400)}:host-context(.textfield-input.is-disabled,.textfield-input[disabled]):after{color:var(--commons-disabled-color)}:host-context(.textfield-input.is-disabled,.textfield-input[disabled]) .lu-select-placeholder{color:var(--commons-disabled-placeholder)}:host[aria-expanded=true]{outline:none}.lu-select-value{padding-right:2rem}\n"] }]
+        }], propDecorators: { modMultipleClass: [{
+                type: HostBinding,
+                args: ['class.mod-multiple']
+            }], valuesTpl: [{
+                type: Input
+            }], expandedPositionStrategy: [{
+                type: Input
+            }], expanded: [{
+                type: Input
+            }], panelRef: [{
+                type: Input
+            }] } });
+
+const LU_MULTI_SELECT_DISPLAYER_TRANSLATIONS = new InjectionToken('LuMultiSelectDisplayerTranslations', {
+    factory: () => luMultiSelectDisplayerTranslations,
+});
+const luMultiSelectDisplayerTranslations = {
+    fr: {
+        otherResult: 'autre résultat',
+        otherResults: 'autres résultats',
+        showResultsDetails: 'Voir le détail',
+    },
+    en: {
+        otherResult: 'other result',
+        otherResults: 'other results',
+        showResultsDetails: 'Show details',
+    },
+    de: {
+        otherResult: 'anderes Ergebnis',
+        otherResults: 'andere Ergebnisse',
+        showResultsDetails: 'Details anzeigen',
+    },
+    es: {
+        otherResult: 'otro resultado',
+        otherResults: 'otros resultados',
+        showResultsDetails: 'Mostrar detalles',
+    },
+    pt: {
+        otherResult: 'outro resultado',
+        otherResults: 'outros resultados',
+        showResultsDetails: 'Mostrar detalhes',
+    },
+};
+
+function fromElementWidth(el) {
+    return new Observable((observer) => {
+        // Emit the initial width
+        observer.next(el.getBoundingClientRect().width);
+        // Emit the new width whenever the element is resized
+        const resizeObserver = new ResizeObserver((entries) => observer.next(entries[0].contentRect.width));
+        resizeObserver.observe(el);
+        // Cleanup observer on cancellation
+        return () => resizeObserver.disconnect();
+    }).pipe(distinctUntilChanged());
+}
+class LuMultiSelectDefaultDisplayerComponent {
+    constructor() {
+        this.select = inject(LuMultiSelectInputComponent);
+        this.elementRef = inject(ElementRef);
+        this.cdr = inject(ChangeDetectorRef);
+        this.intl = getIntl(LU_MULTI_SELECT_DISPLAYER_TRANSLATIONS);
+        this.destroyRef = inject(DestroyRef);
+        this.zone = inject(NgZone);
+        this.ngAfterViewInit$ = new ReplaySubject(1);
+        this.chips$ = this.ngAfterViewInit$.pipe(concatMap(() => this.chipsQL.changes.pipe(startWith(undefined))), map(() => this.chipsQL.toArray().map((chip) => chip.nativeElement)));
+        this.context = inject(LU_OPTION_CONTEXT);
+        this.visibleChips$ = new ReplaySubject(1);
+        this.hiddenChips$ = new ReplaySubject(1);
+        this.visibleChipsCount$ = this.visibleChips$.pipe(map((chips) => chips.length), distinctUntilChanged());
+        this.hiddenChipsCount$ = this.hiddenChips$.pipe(map((chips) => chips.length), distinctUntilChanged());
+        this.hiddenOptionCountWidthCssVar = 0;
+        this.hiddenOptionCountOffsetLeftCssVar = 0;
+    }
+    get disabled() {
+        return this.select.disabled;
+    }
+    ngOnInit() {
+        this.visibleChips$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((visible) => {
+            this.hiddenOptionCountOffsetLeftCssVar = visible.length ? visible[visible.length - 1].offsetLeft + visible[visible.length - 1].offsetWidth : 0;
+            this.cdr.markForCheck();
+        });
+        this.hiddenChipsCount$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((hidden) => {
+            this.hiddenOptionCountWidthCssVar = hidden;
+            this.cdr.markForCheck();
+        });
+        combineLatest([fromElementWidth(this.chipsContainer.nativeElement), fromElementWidth(this.overflowCountContainer.nativeElement), this.chips$])
+            .pipe(debounceTime(0), map(([containerWidth, counterWidth, chips]) => {
+            const baseOffsetTop = this.elementRef.nativeElement.offsetTop;
+            const isOutOfContainer = (chip, allowedWidth) => chip.offsetTop > baseOffsetTop || chip.offsetLeft + chip.offsetWidth > allowedWidth;
+            const needsCounterSpace = !!chips.length && isOutOfContainer(chips[chips.length - 1], containerWidth);
+            const availableWidth = needsCounterSpace ? containerWidth - counterWidth : containerWidth;
+            // First on next line or first out of container
+            const firstHiddenIndex = chips.findIndex((chip) => isOutOfContainer(chip, availableWidth));
+            return firstHiddenIndex !== -1
+                ? {
+                    visible: chips.slice(0, firstHiddenIndex),
+                    hidden: chips.slice(firstHiddenIndex),
+                }
+                : {
+                    visible: chips,
+                    hidden: [],
+                };
+        }), takeUntilDestroyed(this.destroyRef))
+            .subscribe(({ visible, hidden }) => {
+            this.zone.run(() => {
+                this.visibleChips$.next(visible);
+                this.hiddenChips$.next(hidden);
+            });
+        });
+    }
+    unselectOption(option, $event) {
+        $event.stopPropagation();
+        $event.preventDefault();
+        this.select.updateValue(this.select.value.filter((o) => o !== option));
+    }
+    ngOnDestroy() {
+        this.ngAfterViewInit$.complete();
+    }
+    ngAfterViewInit() {
+        this.ngAfterViewInit$.next();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: LuMultiSelectDefaultDisplayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.3", type: LuMultiSelectDefaultDisplayerComponent, isStandalone: true, selector: "lu-multi-select-default-displayer", host: { properties: { "style.--hidden-option-count-width.px": "this.hiddenOptionCountWidthCssVar", "style.--hidden-option-count-offset-left.px": "this.hiddenOptionCountOffsetLeftCssVar" } }, viewQueries: [{ propertyName: "overflowCountContainer", first: true, predicate: ["overflow"], descendants: true, static: true }, { propertyName: "chipsContainer", first: true, predicate: ["chipsContainer"], descendants: true, static: true }, { propertyName: "chipsQL", predicate: ["chip"], descendants: true }], ngImport: i0, template: `
+		<div class="chips-container" #chipsContainer>
+			<div
+				#chip
+				*ngFor="let option of context.option$ | async; let index = index"
+				class="chip lu-multiselect-chip"
+				[class.mod-unkillable]="disabled"
+				[attr.aria-hidden]="index >= ((visibleChipsCount$ | async) || 0) ? 'true' : undefined"
+			>
+				<span class="lu-multiselect-chip-value"><ng-container *luOptionOutlet="select.valueTpl || select.optionTpl; value: option"></ng-container></span>
+				<a href *ngIf="!disabled" type="button" class="chip-kill" (click)="unselectOption(option, $event)" [attr.tabindex]="index >= ((visibleChipsCount$ | async) || 0) ? -1 : undefined"></a>
+			</div>
+		</div>
+		<div class="lu-multiselect-counter" #overflow>
+			<ng-container *ngIf="hiddenChipsCount$ | async as count">
+				<div class="chip mod-unkillable lu-multiselect-counter-chip" aria-hidden="true">+ {{ count }}</div>
+				<span class="u-mask" [ngPlural]="count">
+					<ng-template ngPluralCase="=1">{{ intl.otherResult }}</ng-template>
+					<ng-template ngPluralCase="other">{{ intl.otherResults }}</ng-template>
+				</span>
+			</ng-container>
+		</div>
+	`, isInline: true, styles: [":host{display:flex;height:var(--sizes-M-lineHeight);position:relative;padding-right:var(--hidden-option-count-width)}:host-context(.textfield.mod-S){height:var(--sizes-S-lineHeight)}:host-context(lu-multi-select.is-disabled) .chip{background:var(--palettes-grey-100);color:var(--palettes-grey-500)}:host-context(lu-multi-select.is-disabled) .chip .chip-kill{display:none}.lu-multiselect-counter{position:absolute;top:0;left:calc(var(--hidden-option-count-offset-left) + var(--spacings-XXS))}.lu-multiselect-counter-chip:focus-visible{outline:2px solid var(--palettes-primary-700);outline-offset:2px}.lu-multiselect-chip[aria-hidden]{visibility:hidden}.lu-multiselect-chip-value{max-width:4rem;text-overflow:ellipsis;overflow:hidden}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: LuTooltipModule }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgPlural, selector: "[ngPlural]", inputs: ["ngPlural"] }, { kind: "directive", type: NgPluralCase, selector: "[ngPluralCase]" }, { kind: "directive", type: ɵLuOptionOutletDirective, selector: "[luOptionOutlet]", inputs: ["luOptionOutlet", "luOptionOutletValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: LuMultiSelectDefaultDisplayerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lu-multi-select-default-displayer', standalone: true, imports: [AsyncPipe, LuTooltipModule, NgIf, NgFor, NgPlural, NgPluralCase, ɵLuOptionOutletDirective], template: `
+		<div class="chips-container" #chipsContainer>
+			<div
+				#chip
+				*ngFor="let option of context.option$ | async; let index = index"
+				class="chip lu-multiselect-chip"
+				[class.mod-unkillable]="disabled"
+				[attr.aria-hidden]="index >= ((visibleChipsCount$ | async) || 0) ? 'true' : undefined"
+			>
+				<span class="lu-multiselect-chip-value"><ng-container *luOptionOutlet="select.valueTpl || select.optionTpl; value: option"></ng-container></span>
+				<a href *ngIf="!disabled" type="button" class="chip-kill" (click)="unselectOption(option, $event)" [attr.tabindex]="index >= ((visibleChipsCount$ | async) || 0) ? -1 : undefined"></a>
+			</div>
+		</div>
+		<div class="lu-multiselect-counter" #overflow>
+			<ng-container *ngIf="hiddenChipsCount$ | async as count">
+				<div class="chip mod-unkillable lu-multiselect-counter-chip" aria-hidden="true">+ {{ count }}</div>
+				<span class="u-mask" [ngPlural]="count">
+					<ng-template ngPluralCase="=1">{{ intl.otherResult }}</ng-template>
+					<ng-template ngPluralCase="other">{{ intl.otherResults }}</ng-template>
+				</span>
+			</ng-container>
+		</div>
+	`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:flex;height:var(--sizes-M-lineHeight);position:relative;padding-right:var(--hidden-option-count-width)}:host-context(.textfield.mod-S){height:var(--sizes-S-lineHeight)}:host-context(lu-multi-select.is-disabled) .chip{background:var(--palettes-grey-100);color:var(--palettes-grey-500)}:host-context(lu-multi-select.is-disabled) .chip .chip-kill{display:none}.lu-multiselect-counter{position:absolute;top:0;left:calc(var(--hidden-option-count-offset-left) + var(--spacings-XXS))}.lu-multiselect-counter-chip:focus-visible{outline:2px solid var(--palettes-primary-700);outline-offset:2px}.lu-multiselect-chip[aria-hidden]{visibility:hidden}.lu-multiselect-chip-value{max-width:4rem;text-overflow:ellipsis;overflow:hidden}\n"] }]
+        }], propDecorators: { overflowCountContainer: [{
+                type: ViewChild,
+                args: ['overflow', { static: true }]
+            }], chipsContainer: [{
+                type: ViewChild,
+                args: ['chipsContainer', { static: true }]
+            }], chipsQL: [{
+                type: ViewChildren,
+                args: ['chip']
+            }], hiddenOptionCountWidthCssVar: [{
+                type: HostBinding,
+                args: ['style.--hidden-option-count-width.px']
+            }], hiddenOptionCountOffsetLeftCssVar: [{
+                type: HostBinding,
+                args: ['style.--hidden-option-count-offset-left.px']
+            }] } });
+
+class LuMultiDisplayerDirective {
+    set select(select) {
+        select.valuesTpl = this.templateRef;
+    }
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ngTemplateContextGuard(_dir, ctx) {
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: LuMultiDisplayerDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.3", type: LuMultiDisplayerDirective, isStandalone: true, selector: "[luMultiDisplayer]", inputs: { select: ["luMultiDisplayerSelect", "select"] }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: LuMultiDisplayerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[luMultiDisplayer]',
+                    standalone: true,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; }, propDecorators: { select: [{
+                type: Input,
+                args: ['luMultiDisplayerSelect']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LU_MULTI_SELECT_TRANSLATIONS, LuMultiDisplayerDirective, LuMultiSelectDefaultDisplayerComponent, LuMultiSelectInputComponent, luMultiSelectTranslations };
+//# sourceMappingURL=lucca-front-ng-multi-select.mjs.map