@lucca-front/ng 9.0.1 → 9.0.4-select.1

package/fesm2015/lucca-front-ng-select2.mjs

@@ -0,0 +1,628 @@
+import * as i2$1 from '@angular/cdk/overlay';
+import { OverlayContainer, Overlay, OverlayModule } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import * as i1 from '@angular/common';
+import { CommonModule, DOCUMENT } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Directive, Input, InjectionToken, Component, ChangeDetectionStrategy, Inject, HostBinding, NgModule, EventEmitter, ViewChild, ViewChildren, HostListener, Injectable, Injector, forwardRef, ElementRef, Output } from '@angular/core';
+import * as i2 from '@angular/forms';
+import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { BehaviorSubject, take, observeOn, asyncScheduler, map, takeUntil, ReplaySubject, Subject } from 'rxjs';
+import * as i3 from '@angular/cdk/a11y';
+import { ActiveDescendantKeyManager, A11yModule } from '@angular/cdk/a11y';
+import * as i1$1 from '@angular/cdk/platform';
+
+class LuDisplayerDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    set select(select) {
+        select.valueTpl = this.templateRef;
+    }
+}
+LuDisplayerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LuDisplayerDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+LuDisplayerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: LuDisplayerDirective, selector: "[luDisplayer]", inputs: { select: ["luDisplayerSelect", "select"], value: ["luDisplayer", "value"] }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LuDisplayerDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[luDisplayer]' }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; }, propDecorators: { select: [{
+                type: Input,
+                args: ['luDisplayerSelect']
+            }], value: [{
+                type: Input,
+                args: ['luDisplayer']
+            }] } });
+
+const SELECT_ID = new InjectionToken('LuSelectPanelData');
+const SELECT_PANEL_DATA = new InjectionToken('LuSelectId');
+const SELECT_LABEL = new InjectionToken('LuSelectLabel');
+const SELECT_LABEL_ID = new InjectionToken('LuSelectLabelId');
+
+class LuOptionComponent {
+    constructor(elementRef, selectId) {
+        this.elementRef = elementRef;
+        this.selectId = selectId;
+        this.hasOptionItemClass = true;
+        this.isSelected = false;
+        this.optionIndex = 0;
+        this.isHighlighted$ = new BehaviorSubject(false);
+        this.disabled = false;
+        this.role = 'option';
+    }
+    get id() {
+        return `lu-select-${this.selectId}-option-${this.optionIndex}`;
+    }
+    setActiveStyles() {
+        this.isHighlighted$.next(true);
+        this.elementRef.nativeElement.scrollIntoView({ block: 'center' });
+    }
+    setInactiveStyles() {
+        this.isHighlighted$.next(false);
+    }
+}
+LuOptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LuOptionComponent, deps: [{ token: i0.ElementRef }, { token: SELECT_ID }], target: i0.ɵɵFactoryTarget.Component });
+LuOptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: LuOptionComponent, selector: "lu-select-option", inputs: { isSelected: "isSelected", option: "option", optionIndex: "optionIndex", disabled: "disabled" }, host: { properties: { "class.optionItem": "this.hasOptionItemClass", "attr.aria-selected": "this.isSelected", "attr.role": "this.role", "attr.id": "this.id" } }, ngImport: i0, template: "<div\r\n\tclass=\"optionItem-value\"\r\n\t[class.is-selected]=\"isSelected\"\r\n\t[class.is-highlighted]=\"isHighlighted$ | async\"\r\n\t[class.is-disabled]=\"disabled\"\r\n>\r\n\t<ng-content></ng-content>\r\n</div>\r\n", styles: [":host{display:block}.optionItem{position:relative}.optionItem-value{display:block;cursor:pointer;padding:.5rem;padding:var(--components-options-item-padding-vertical) var(--components-options-item-padding-horizontal);transition:background 50ms ease}.optionItem-value.is-selected{background:var(--palettes-primary-100);background:var(--commons-selected)}.optionItem-value:hover,.optionItem-value.is-highlighted,.optionItem-value.is-focus{background:var(--palettes-primary-50);background:var(--commons-highlight)}:host-context(.lu-select-value) .optionItem-value{padding:0;overflow:hidden;text-overflow:ellipsis}:host-context(.lu-select-value) .optionItem-value:hover,:host-context(.lu-select-value) .optionItem-value.is-focus,:host-context(.lu-select-value) .optionItem-value.is-highlighted{background:inherit}:host-context(.mod-multiple) .optionItem-value{position:relative;padding-left:2rem;padding-left:var(--components-options-item-multiple-padding)}:host-context(.mod-multiple) .optionItem-value:after,:host-context(.mod-multiple) .optionItem-value:before{display:block;position:absolute;left:.5rem;left:var(--components-options-checkbox-left);top:50%;transform:translateY(-50%)}:host-context(.mod-multiple) .optionItem-value:before{border-radius:var(--commons-border-radius);border-radius:var(--components-options-checkbox-border-radius);box-shadow:inset 0 0 0 2px var(--palettes-grey-color);box-shadow:inset 0 0 0 2px var(--components-options-checkbox-border-color);content:\"\";display:block;height:1rem;height:var(--components-options-checkbox-size);transition:all .1s ease;width:1rem;width:var(--components-options-checkbox-size)}:host-context(.mod-multiple) .optionItem-value:after{color:#fff;font-size:.8rem;content:\"\\e91a\";font-family:Lucca icons;display:inline-block;vertical-align:text-bottom;font-style:normal;line-height:1rem;line-height:var(--components-options-checkbox-size);padding-top:.05rem;position:absolute;text-align:center;transform:translateY(-50%) scale(0);transition:all .1s ease;width:1rem;width:var(--components-options-checkbox-size)}:host-context(.mod-multiple) .optionItem-value.is-selected:before{background-color:#f60;background-color:var(--components-options-checkbox-color);box-shadow:inset 0 0 0 2px #f60;box-shadow:inset 0 0 0 2px var(--components-options-checkbox-color)}:host-context(.mod-multiple) .optionItem-value.is-selected:after{transform:translateY(-50%) scale(1)}:host-context(.mod-multiple) .optionItem-value:hover:before{box-shadow:inset 0 0 0 2px #f60;box-shadow:inset 0 0 0 2px var(--components-options-checkbox-color)}:host-context(.mod-multiple).establishmentOption .optionItem-value{position:relative;padding-left:2.5rem;padding-left:calc(2 * var(--components-options-item-padding-horizontal) + var(--components-options-checkbox-size) + var(--spacings-smaller))}:host-context(.mod-multiple).establishmentOption .optionItem-value:before,:host-context(.mod-multiple).establishmentOption .optionItem-value:after{left:1rem;left:calc(2 * var(--components-options-item-padding-horizontal))}\n"], dependencies: [{ kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LuOptionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lu-select-option', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n\tclass=\"optionItem-value\"\r\n\t[class.is-selected]=\"isSelected\"\r\n\t[class.is-highlighted]=\"isHighlighted$ | async\"\r\n\t[class.is-disabled]=\"disabled\"\r\n>\r\n\t<ng-content></ng-content>\r\n</div>\r\n", styles: [":host{display:block}.optionItem{position:relative}.optionItem-value{display:block;cursor:pointer;padding:.5rem;padding:var(--components-options-item-padding-vertical) var(--components-options-item-padding-horizontal);transition:background 50ms ease}.optionItem-value.is-selected{background:var(--palettes-primary-100);background:var(--commons-selected)}.optionItem-value:hover,.optionItem-value.is-highlighted,.optionItem-value.is-focus{background:var(--palettes-primary-50);background:var(--commons-highlight)}:host-context(.lu-select-value) .optionItem-value{padding:0;overflow:hidden;text-overflow:ellipsis}:host-context(.lu-select-value) .optionItem-value:hover,:host-context(.lu-select-value) .optionItem-value.is-focus,:host-context(.lu-select-value) .optionItem-value.is-highlighted{background:inherit}:host-context(.mod-multiple) .optionItem-value{position:relative;padding-left:2rem;padding-left:var(--components-options-item-multiple-padding)}:host-context(.mod-multiple) .optionItem-value:after,:host-context(.mod-multiple) .optionItem-value:before{display:block;position:absolute;left:.5rem;left:var(--components-options-checkbox-left);top:50%;transform:translateY(-50%)}:host-context(.mod-multiple) .optionItem-value:before{border-radius:var(--commons-border-radius);border-radius:var(--components-options-checkbox-border-radius);box-shadow:inset 0 0 0 2px var(--palettes-grey-color);box-shadow:inset 0 0 0 2px var(--components-options-checkbox-border-color);content:\"\";display:block;height:1rem;height:var(--components-options-checkbox-size);transition:all .1s ease;width:1rem;width:var(--components-options-checkbox-size)}:host-context(.mod-multiple) .optionItem-value:after{color:#fff;font-size:.8rem;content:\"\\e91a\";font-family:Lucca icons;display:inline-block;vertical-align:text-bottom;font-style:normal;line-height:1rem;line-height:var(--components-options-checkbox-size);padding-top:.05rem;position:absolute;text-align:center;transform:translateY(-50%) scale(0);transition:all .1s ease;width:1rem;width:var(--components-options-checkbox-size)}:host-context(.mod-multiple) .optionItem-value.is-selected:before{background-color:#f60;background-color:var(--components-options-checkbox-color);box-shadow:inset 0 0 0 2px #f60;box-shadow:inset 0 0 0 2px var(--components-options-checkbox-color)}:host-context(.mod-multiple) .optionItem-value.is-selected:after{transform:translateY(-50%) scale(1)}:host-context(.mod-multiple) .optionItem-value:hover:before{box-shadow:inset 0 0 0 2px #f60;box-shadow:inset 0 0 0 2px var(--components-options-checkbox-color)}:host-context(.mod-multiple).establishmentOption .optionItem-value{position:relative;padding-left:2.5rem;padding-left:calc(2 * var(--components-options-item-padding-horizontal) + var(--components-options-checkbox-size) + var(--spacings-smaller))}:host-context(.mod-multiple).establishmentOption .optionItem-value:before,:host-context(.mod-multiple).establishmentOption .optionItem-value:after{left:1rem;left:calc(2 * var(--components-options-item-padding-horizontal))}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [SELECT_ID]
+                    }] }];
+    }, propDecorators: { hasOptionItemClass: [{
+                type: HostBinding,
+                args: ['class.optionItem']
+            }], isSelected: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['attr.aria-selected']
+            }], option: [{
+                type: Input
+            }], optionIndex: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], id: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }] } });
+
+class LuOptionDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    set select(select) {
+        select.optionTpl = this.templateRef;
+    }
+}
+LuOptionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LuOptionDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+LuOptionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: LuOptionDirective, selector: "[luOption]", inputs: { select: ["luOptionSelect", "select"], value: ["luOption", "value"] }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LuOptionDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[luOption]' }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; }, propDecorators: { select: [{
+                type: Input,
+                args: ['luOptionSelect']
+            }], value: [{
+                type: Input,
+                args: ['luOption']
+            }] } });
+
+class LuOption2Module {
+}
+LuOption2Module.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LuOption2Module, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+LuOption2Module.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.0", ngImport: i0, type: LuOption2Module, declarations: [LuOptionDirective, LuDisplayerDirective, LuOptionComponent], imports: [CommonModule], exports: [LuOptionDirective, LuDisplayerDirective, LuOptionComponent] });
+LuOption2Module.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LuOption2Module, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LuOption2Module, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: [LuOptionDirective, LuDisplayerDirective, LuOptionComponent],
+                    exports: [LuOptionDirective, LuDisplayerDirective, LuOptionComponent],
+                }]
+        }] });
+
+class LuSelectPanelRef {
+    constructor() {
+        this.closed = new EventEmitter();
+        this.previousPage = new EventEmitter();
+        this.nextPage = new EventEmitter();
+        this.valueChanged = new EventEmitter();
+        this.clueChanged = new EventEmitter();
+        this.activeOptionIdChanged = new EventEmitter();
+    }
+    close() {
+        this.closed.next();
+        this.closed.complete();
+        this.nextPage.next();
+        this.nextPage.complete();
+        this.previousPage.next();
+        this.previousPage.complete();
+        this.valueChanged.complete();
+        this.clueChanged.emit(null);
+        this.clueChanged.complete();
+        this.activeOptionIdChanged.emit(undefined);
+        this.activeOptionIdChanged.complete();
+    }
+}
+class LuSelectPanelComponent {
+    constructor(panelRef, selectId, data) {
+        this.panelRef = panelRef;
+        this.selectId = selectId;
+        this.data = data;
+        this.search = null;
+        this.options$ = data.options$;
+        this.optionComparer = data.optionComparer;
+        this.initialValue = data.initialValue;
+        this.optionTpl = data.optionTpl;
+        this.searchable = data.searchable;
+    }
+    set searchInput(input) {
+        if (!input) {
+            return;
+        }
+        setTimeout(() => input.nativeElement.focus());
+    }
+    get selected() {
+        var _a, _b;
+        return (_b = (_a = this.keyManager) === null || _a === void 0 ? void 0 : _a.activeItem) === null || _b === void 0 ? void 0 : _b.option;
+    }
+    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) {
+            this.panelRef.nextPage.emit();
+        }
+    }
+    ngAfterViewInit() {
+        var _a;
+        if (!this.optionsQL) {
+            return;
+        }
+        this.keyManager = new ActiveDescendantKeyManager(this.optionsQL).withHomeAndEnd();
+        if (this.initialValue) {
+            (_a = this.options$) === null || _a === void 0 ? void 0 : _a.pipe(take(1), observeOn(asyncScheduler), map((options) => options.findIndex((o) => this.optionComparer(o, this.initialValue))), takeUntil(this.panelRef.closed)).subscribe((selectedIndex) => this.keyManager.setActiveItem(selectedIndex));
+        }
+        this.keyManager.change
+            .pipe(map(() => { var _a; return (_a = this.keyManager.activeItem) === null || _a === void 0 ? void 0 : _a.id; }), takeUntil(this.panelRef.closed))
+            .subscribe((activeDescendant) => this.panelRef.activeOptionIdChanged.emit(activeDescendant));
+    }
+    onKeyDown($event) {
+        var _a;
+        switch ($event.key) {
+            case 'Escape':
+            case 'Tab':
+                return this.panelRef.close();
+            case 'Enter':
+                return this.panelRef.emitValue(this.selected);
+            default:
+                (_a = this.keyManager) === null || _a === void 0 ? void 0 : _a.onKeydown($event);
+        }
+    }
+    updateClue(clue) {
+        this.search = clue;
+        this.panelRef.clueChanged.emit(clue);
+        setTimeout(() => this.keyManager.setFirstItemActive());
+    }
+}
+LuSelectPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LuSelectPanelComponent, deps: [{ token: LuSelectPanelRef }, { token: SELECT_ID }, { token: SELECT_PANEL_DATA }], target: i0.ɵɵFactoryTarget.Component });
+LuSelectPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: LuSelectPanelComponent, selector: "lu-select-panel", host: { listeners: { "keydown": "onKeyDown($event)" } }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "optionsQL", predicate: LuOptionComponent, descendants: true }], ngImport: i0, template: "<div\r\n\tclass=\"lu-picker-panel lu-option-picker-panel\"\r\n\trole=\"dialog\"\r\n\tcdkTrapFocus\r\n\t*ngIf=\"{ options: options$ | async } as ctx\"\r\n\t[cdkTrapFocusAutoCapture]=\"true\"\r\n>\r\n\t<div class=\"lu-picker-content\" tabindex=\"0\" (scroll)=\"onScroll($event)\">\r\n\t\t<ng-container *ngIf=\"searchable\">\r\n\t\t\t<div class=\"textfield mod-search\">\r\n\t\t\t\t<input #searchInput class=\"textfield-input\" [(ngModel)]=\"search\" (ngModelChange)=\"updateClue($event)\" />\r\n\t\t\t</div>\r\n\r\n\t\t\t<div class=\"optionPlaceholder\" *ngIf=\"search && !ctx.options?.length\">\r\n\t\t\t\t<p class=\"optionPlaceholder-content u-marginBottomReset\">Aucun r\u00E9sultat pour votre recherche</p>\r\n\t\t\t\t<button type=\"button\" class=\"link\" (click)=\"updateClue(null); searchInput.focus()\">Vider la recherche</button>\r\n\t\t\t</div>\r\n\t\t</ng-container>\r\n\r\n\t\t<lu-select-option\r\n\t\t\t*ngFor=\"let option of ctx.options; let index = index\"\r\n\t\t\t[option]=\"option\"\r\n\t\t\t[optionIndex]=\"index\"\r\n\t\t\t[isSelected]=\"option === selected\"\r\n\t\t\t[disabled]=\"false\"\r\n\t\t\t(click)=\"panelRef.emitValue(option)\"\r\n\t\t>\r\n\t\t\t<ng-container *ngTemplateOutlet=\"optionTpl; context: { $implicit: option }\"></ng-container>\r\n\t\t</lu-select-option>\r\n\t</div>\r\n</div>\r\n", styles: [".textfield.mod-search{width:100%}.textfield-input{border-radius:0;box-shadow:none;background:#FFFFFF;border-bottom:1px solid var(--palettes-grey-200);border-bottom:var(--commons-divider-width) solid var(--commons-divider-color)}.textfield-input:hover{background-color:#ebf0fa;background-color:var(--palettes-grey-50)}.textfield-input:focus{background-color:#fff;border-bottom-color:#ff7e29;border-bottom-color:var(--palettes-primary-600)}.checkbox.mod-formerEmployee{padding:.25rem .5rem;padding:var(--spacings-smallest) var(--components-options-item-padding-horizontal);border-bottom:1px solid var(--palettes-grey-200);border-bottom:var(--commons-divider-width) solid var(--commons-divider-color);background-color:#ebf0fa;background-color:var(--palettes-grey-50);font-style:italic}.optionPlaceholder{display:block;padding:.5rem;padding:var(--components-options-item-padding-vertical) var(--components-options-item-padding-horizontal);font-style:italic;color:#96a6c5;color:var(--colors-text-light-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "directive", type: i3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: LuOptionComponent, selector: "lu-select-option", inputs: ["isSelected", "option", "optionIndex", "disabled"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LuSelectPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lu-select-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n\tclass=\"lu-picker-panel lu-option-picker-panel\"\r\n\trole=\"dialog\"\r\n\tcdkTrapFocus\r\n\t*ngIf=\"{ options: options$ | async } as ctx\"\r\n\t[cdkTrapFocusAutoCapture]=\"true\"\r\n>\r\n\t<div class=\"lu-picker-content\" tabindex=\"0\" (scroll)=\"onScroll($event)\">\r\n\t\t<ng-container *ngIf=\"searchable\">\r\n\t\t\t<div class=\"textfield mod-search\">\r\n\t\t\t\t<input #searchInput class=\"textfield-input\" [(ngModel)]=\"search\" (ngModelChange)=\"updateClue($event)\" />\r\n\t\t\t</div>\r\n\r\n\t\t\t<div class=\"optionPlaceholder\" *ngIf=\"search && !ctx.options?.length\">\r\n\t\t\t\t<p class=\"optionPlaceholder-content u-marginBottomReset\">Aucun r\u00E9sultat pour votre recherche</p>\r\n\t\t\t\t<button type=\"button\" class=\"link\" (click)=\"updateClue(null); searchInput.focus()\">Vider la recherche</button>\r\n\t\t\t</div>\r\n\t\t</ng-container>\r\n\r\n\t\t<lu-select-option\r\n\t\t\t*ngFor=\"let option of ctx.options; let index = index\"\r\n\t\t\t[option]=\"option\"\r\n\t\t\t[optionIndex]=\"index\"\r\n\t\t\t[isSelected]=\"option === selected\"\r\n\t\t\t[disabled]=\"false\"\r\n\t\t\t(click)=\"panelRef.emitValue(option)\"\r\n\t\t>\r\n\t\t\t<ng-container *ngTemplateOutlet=\"optionTpl; context: { $implicit: option }\"></ng-container>\r\n\t\t</lu-select-option>\r\n\t</div>\r\n</div>\r\n", styles: [".textfield.mod-search{width:100%}.textfield-input{border-radius:0;box-shadow:none;background:#FFFFFF;border-bottom:1px solid var(--palettes-grey-200);border-bottom:var(--commons-divider-width) solid var(--commons-divider-color)}.textfield-input:hover{background-color:#ebf0fa;background-color:var(--palettes-grey-50)}.textfield-input:focus{background-color:#fff;border-bottom-color:#ff7e29;border-bottom-color:var(--palettes-primary-600)}.checkbox.mod-formerEmployee{padding:.25rem .5rem;padding:var(--spacings-smallest) var(--components-options-item-padding-horizontal);border-bottom:1px solid var(--palettes-grey-200);border-bottom:var(--commons-divider-width) solid var(--commons-divider-color);background-color:#ebf0fa;background-color:var(--palettes-grey-50);font-style:italic}.optionPlaceholder{display:block;padding:.5rem;padding:var(--components-options-item-padding-vertical) var(--components-options-item-padding-horizontal);font-style:italic;color:#96a6c5;color:var(--colors-text-light-color)}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: LuSelectPanelRef }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [SELECT_ID]
+                    }] }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [SELECT_PANEL_DATA]
+                    }] }];
+    }, propDecorators: { searchInput: [{
+                type: ViewChild,
+                args: ['searchInput']
+            }], optionsQL: [{
+                type: ViewChildren,
+                args: [LuOptionComponent]
+            }], onKeyDown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+class LuSelectPanelModule {
+}
+LuSelectPanelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LuSelectPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+LuSelectPanelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.0", ngImport: i0, type: LuSelectPanelModule, declarations: [LuSelectPanelComponent], imports: [CommonModule, FormsModule, A11yModule, LuOption2Module], exports: [LuSelectPanelComponent] });
+LuSelectPanelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LuSelectPanelModule, imports: [CommonModule, FormsModule, A11yModule, LuOption2Module] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LuSelectPanelModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, FormsModule, A11yModule, LuOption2Module],
+                    declarations: [LuSelectPanelComponent],
+                    exports: [LuSelectPanelComponent],
+                }]
+        }] });
+
+/* eslint-disable @angular-eslint/no-output-on-prefix */
+let selectId = 0;
+function selectIdFactory() {
+    return selectId++;
+}
+function selectLabelFactory(elementRef) {
+    function getLabel(node) {
+        if (node instanceof HTMLLabelElement) {
+            return node;
+        }
+        if (!node.parentElement) {
+            return undefined;
+        }
+        return getLabel(node.parentElement);
+    }
+    return getLabel(elementRef.nativeElement);
+}
+function selectLabelIdFactory(label, selectId) {
+    return (label === null || label === void 0 ? void 0 : label.id) || `lu-select-label-${selectId}`;
+}
+class LuSelectOverlayContainer extends OverlayContainer {
+    constructor(document, platform, selectLabelId, selectId) {
+        super(document, platform);
+        this.selectLabelId = selectLabelId;
+        this.selectId = selectId;
+    }
+    _createContainer() {
+        super._createContainer();
+        this._containerElement.setAttribute('aria-labelledby', this.selectLabelId);
+        this._containerElement.setAttribute('role', 'listbox');
+        this._containerElement.id = `lu-select-overlay-container-${this.selectId}`;
+    }
+}
+LuSelectOverlayContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LuSelectOverlayContainer, deps: [{ token: DOCUMENT }, { token: i1$1.Platform }, { token: SELECT_LABEL_ID }, { token: SELECT_ID }], target: i0.ɵɵFactoryTarget.Injectable });
+LuSelectOverlayContainer.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LuSelectOverlayContainer });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LuSelectOverlayContainer, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Inject,
+                        args: [DOCUMENT]
+                    }] }, { type: i1$1.Platform }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [SELECT_LABEL_ID]
+                    }] }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [SELECT_ID]
+                    }] }];
+    } });
+class LuSelectOverlay extends Overlay {
+}
+LuSelectOverlay.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LuSelectOverlay, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+LuSelectOverlay.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LuSelectOverlay });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LuSelectOverlay, decorators: [{
+            type: Injectable
+        }] });
+class SelectPanelRef extends LuSelectPanelRef {
+    constructor(overlayRef, parentInjector, panelData) {
+        super();
+        this.overlayRef = overlayRef;
+        const injector = Injector.create({
+            providers: [
+                { provide: LuSelectPanelRef, useValue: this },
+                { provide: SELECT_PANEL_DATA, useValue: panelData },
+            ],
+            parent: parentInjector,
+        });
+        this.portalRef = new ComponentPortal(LuSelectPanelComponent, 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);
+        this.close();
+    }
+    close() {
+        super.close();
+        this.panelRef.destroy();
+        this.overlayRef.detach();
+    }
+}
+class LuSelectInput2Component {
+    constructor(positionBuilder, scrollStrategies, elementRef, injector, overlay, changeDetectorRef, overlayContainer, label, labelId) {
+        this.positionBuilder = positionBuilder;
+        this.scrollStrategies = scrollStrategies;
+        this.elementRef = elementRef;
+        this.injector = injector;
+        this.overlay = overlay;
+        this.changeDetectorRef = changeDetectorRef;
+        this.label = label;
+        this.labelId = labelId;
+        this.tabindex = 0;
+        this.placeholder = '';
+        this.multiple = false;
+        this.clearable = false;
+        this.disabled = false;
+        this.isPanelOpen = false;
+        this.role = 'combobox';
+        this.overlayConfig = {
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-transparent-backdrop',
+        };
+        this.optionComparer = (option1, option2) => JSON.stringify(option1) === JSON.stringify(option2);
+        this.clueChange = new EventEmitter();
+        this.nextPage = new EventEmitter();
+        this.previousPage = new EventEmitter();
+        this.options$ = new ReplaySubject(1);
+        this.clue = null;
+        this.destroyed$ = new Subject();
+        this.overlayContainerRef = overlayContainer.getContainerElement();
+    }
+    get searchable() {
+        return this.clueChange.observed;
+    }
+    get isFilled() {
+        return this.value !== null && this.value !== undefined;
+    }
+    get ariaControls() {
+        return this.overlayContainerRef.id;
+    }
+    set options(options) {
+        this.options$.next(options);
+    }
+    onKeydown($event) {
+        if (!this.isPanelOpen) {
+            this.openPanel();
+            $event.stopPropagation();
+            $event.preventDefault();
+        }
+    }
+    registerOnChange(onChange) {
+        this.onChange = onChange;
+    }
+    registerOnTouched(onTouched) {
+        this.onTouched = onTouched;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    ngOnDestroy() {
+        this.destroyed$.next();
+        this.destroyed$.complete();
+    }
+    ngOnInit() {
+        if (this.label) {
+            this.label.id = this.labelId;
+        }
+    }
+    clearValue(event) {
+        var _a;
+        event.stopPropagation();
+        (_a = this.onChange) === null || _a === void 0 ? void 0 : _a.call(this, null);
+        this.value = null;
+    }
+    openPanel() {
+        if (this.isPanelOpen || this.disabled) {
+            return;
+        }
+        const overlayConfig = this.overlayConfig || {};
+        overlayConfig.positionStrategy = this.positionBuilder.flexibleConnectedTo(this.elementRef).withPositions([
+            {
+                originX: 'start',
+                originY: 'bottom',
+                overlayX: 'start',
+                overlayY: 'top',
+            },
+            {
+                originX: 'end',
+                originY: 'bottom',
+                overlayX: 'end',
+                overlayY: 'top',
+            },
+            {
+                originX: 'start',
+                originY: 'top',
+                overlayX: 'start',
+                overlayY: 'bottom',
+            },
+            {
+                originX: 'end',
+                originY: 'top',
+                overlayX: 'end',
+                overlayY: 'bottom',
+            },
+        ]);
+        overlayConfig.scrollStrategy = this.scrollStrategies.reposition();
+        overlayConfig.minWidth = this.elementRef.nativeElement.clientWidth;
+        overlayConfig.maxHeight = '100vh';
+        overlayConfig.maxWidth = '100vw';
+        const overlayRef = this.overlay.create(overlayConfig);
+        this.isPanelOpen = true;
+        this.panelRef = new SelectPanelRef(overlayRef, this.injector, {
+            initialValue: this.value,
+            optionComparer: this.optionComparer,
+            options$: this.options$,
+            searchable: this.searchable,
+            optionTpl: this.optionTpl,
+        });
+        this.panelRef.valueChanged.subscribe((value) => {
+            var _a;
+            (_a = this.onChange) === null || _a === void 0 ? void 0 : _a.call(this, value);
+            this.value = value;
+        });
+        this.panelRef.nextPage.subscribe(() => this.nextPage.emit());
+        this.panelRef.previousPage.subscribe(() => this.previousPage.emit());
+        this.panelRef.clueChanged.subscribe((clue) => {
+            this.clueChange.emit(clue);
+            this.clue = clue;
+        });
+        this.panelRef.activeOptionIdChanged.subscribe((optionId) => {
+            this.activeDescendant = optionId;
+            this.changeDetectorRef.markForCheck();
+        });
+        this.panelRef.closed.subscribe(() => this.closePanel());
+    }
+    closePanel() {
+        if (!this.isPanelOpen) {
+            return;
+        }
+        this.isPanelOpen = false;
+        this.panelRef.close();
+        this.panelRef = undefined;
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+}
+LuSelectInput2Component.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LuSelectInput2Component, deps: [{ token: i2$1.OverlayPositionBuilder }, { token: i2$1.ScrollStrategyOptions }, { token: i0.ElementRef }, { token: i0.Injector }, { token: LuSelectOverlay }, { token: i0.ChangeDetectorRef }, { token: i2$1.OverlayContainer }, { token: SELECT_LABEL }, { token: SELECT_LABEL_ID }], target: i0.ɵɵFactoryTarget.Component });
+LuSelectInput2Component.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: LuSelectInput2Component, selector: "lu-select2", inputs: { placeholder: "placeholder", multiple: "multiple", clearable: "clearable", disabled: "disabled", overlayConfig: "overlayConfig", options: "options", optionComparer: "optionComparer", optionTpl: "optionTpl", valueTpl: "valueTpl" }, outputs: { clueChange: "clueChange", nextPage: "nextPage", previousPage: "previousPage" }, host: { listeners: { "keydown.space": "onKeydown($event)", "keydown.enter": "onKeydown($event)", "click": "onKeydown($event)" }, properties: { "tabindex": "this.tabindex", "class.mod-multiple": "this.multiple", "class.is-clearable": "this.clearable", "class.is-disabled": "this.disabled", "class.is-filled": "this.isFilled", "class.is-focused": "this.isPanelOpen", "attr.aria-expanded": "this.isPanelOpen", "attr.role": "this.role", "attr.aria-activedescendant": "this.activeDescendant", "attr.aria-controls": "this.ariaControls" } }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => LuSelectInput2Component),
+            multi: true,
+        },
+        {
+            provide: OverlayContainer,
+            useClass: LuSelectOverlayContainer,
+        },
+        LuSelectOverlay,
+        { provide: SELECT_ID, useFactory: selectIdFactory },
+        { provide: SELECT_LABEL, useFactory: selectLabelFactory, deps: [ElementRef] },
+        { provide: SELECT_LABEL_ID, useFactory: selectLabelIdFactory, deps: [SELECT_LABEL, SELECT_ID] },
+    ], 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 *ngIf=\"isFilled\">\r\n\t\t\t<ng-container *ngTemplateOutlet=\"valueTpl || optionTpl; context: { $implicit: value }\"></ng-container>\r\n\t\t</ng-container>\r\n\t</div>\r\n</div>\r\n<div class=\"lu-select-suffix\">\r\n\t<a *ngIf=\"clearable && isFilled\" role=\"button\" class=\"actionIcon\" (click)=\"clearValue($event)\">\r\n\t\t<span aria-hidden=\"true\" class=\"lucca-icon\">thin_cross</span>\r\n\t\t<span class=\"u-mask\">Clear</span>\r\n\t</a>\r\n</div>\r\n", styles: [":host{cursor:pointer;outline:none;padding:0}:host:after{content:\"\\e97c\";font-family:Lucca icons;display:inline-block;vertical-align:text-bottom;font-style:normal;color:var(--components-select-default-palette-700);bottom:.5rem;bottom:var(--components-select-input-padding-vertical);font-size:1.2rem;line-height:1.4rem;pointer-events:none;position:absolute;right:.5rem;right:var(--components-select-input-padding-horizontal)}:host[disabled]{cursor:not-allowed;pointer-events:all}:host.is-disabled{cursor:not-allowed;pointer-events:all}.lu-select-display-wrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lu-select-value{line-height:1.5rem;line-height:var(--sizes-standard-line-height);min-height:calc(var(--spacings-small) + 1.5rem);min-height:calc(var(--components-select-framed-bottom-padding) + var(--sizes-standard-line-height));padding:.5rem 2.5rem .5rem .5rem;padding:var(--components-select-input-padding-vertical) 2.5rem var(--components-select-input-padding-vertical) var(--components-select-input-padding-horizontal);transition:all .25s ease;transition:all var(--commons-animations-durations-standard) ease;display:none}.lu-select-placeholder{color:var(--components-select-default-palette-400);line-height:1.5rem;line-height:var(--sizes-standard-line-height);min-height:calc(var(--spacings-small) + 1.5rem);min-height:calc(var(--components-select-framed-bottom-padding) + var(--sizes-standard-line-height));padding:.5rem 2.5rem .5rem .5rem;padding:var(--components-select-input-padding-vertical) 2.5rem var(--components-select-input-padding-vertical) var(--components-select-input-padding-horizontal);transition:all .25s ease;transition:all var(--commons-animations-durations-standard) ease;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lu-select-suffix{position:absolute;bottom:.5rem;right:1.6rem}::ng-deep .lu-select-value .label{padding:.25rem .25rem .5rem .5rem;padding:var(--spacings-smallest) var(--spacings-smaller);margin-left:0}::ng-deep .lu-select-value .chip{background:#FF6600;background:var(--components-select-chip-background);color:#fff;color:var(--components-select-chip-text);vertical-align:baseline;max-width:100%;height:1.5rem;height:var(--sizes-standard-line-height);line-height:1.5rem;line-height:var(--sizes-standard-line-height);padding:0 .5rem;padding:0 var(--spacings-smaller);margin:0 .25rem .25rem 0;text-overflow:ellipsis;overflow:hidden;vertical-align:top;white-space:nowrap}:host-context(.textfield.mod-small) .lu-select-value,:host-context(.textfield.mod-small) .lu-select-placeholder{font-size:.875rem;font-size:var(--sizes-small-font-size);line-height:1.25rem;line-height:var(--sizes-small-line-height);min-height:calc(var(--spacings-small) + 1.25rem);min-height:calc(var(--components-select-framed-bottom-padding) + var(--sizes-small-line-height))}:host-context(.textfield.mod-small):after{line-height:1.25rem;line-height:var(--sizes-small-line-height)}:host-context(.textfield.mod-small) ::ng-deep .lu-select-value .label{font-size:.875rem;font-size:var(--sizes-small-font-size);line-height:1.25rem;line-height:var(--sizes-small-line-height);font-weight:600;margin:0;padding:0;background:transparent}:host-context(.textfield.mod-small) ::ng-deep .lu-select-value .chip{height:1.25rem;height:var(--sizes-small-line-height);line-height:1.25rem;line-height:var(--sizes-small-line-height)}:host-context(.textfield.mod-framed).textfield-input,:host-context(.form.mod-framed).textfield-input{padding:var(--spacings-big) 0 0;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:#96a6c5;color:var(--colors-text-light-color);bottom:var(--spacings-small);bottom:var(--components-select-framed-bottom-padding);right:.5rem;right:var(--spacings-smaller)}:host-context(.textfield.mod-framed).textfield-input .lu-select-value,:host-context(.textfield.mod-framed).textfield-input .lu-select-placeholder,:host-context(.form.mod-framed).textfield-input .lu-select-value,:host-context(.form.mod-framed).textfield-input .lu-select-placeholder{padding:0 calc(var(--spacings-small) * 3) var(--spacings-small) var(--spacings-small);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(--spacings-small);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:1rem;color:#2a3551;color:var(--colors-text-default-color)}:host-context(.textfield.mod-filter) .lu-select-suffix{bottom:.4rem}:host-context(.textfield.mod-material):after{color:#96a6c5;color:var(--colors-text-light-color);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:1rem;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:1.375rem;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).mod-multipleView:not(.mod-singleLine) .lu-select-value{height:auto;align-items:center}:host(.mod-multiple).mod-multipleView:not(.mod-singleLine) .lu-select-display-wrapper{overflow:hidden;white-space:normal;margin-bottom:-.25rem}:host-context(.textfield-input.is-filled) .lu-select-placeholder{display:none}:host-context(.textfield-input.is-filled) .lu-select-value{display:flex}:host-context(.textfield-input.is-clearable) .lu-select-value{padding-right:2.5rem}:host-context(.textfield-input.is-error):after{color:#e51a3b;color:var(--palettes-error-color)}:host-context(.textfield-input.is-error) .lu-select-placeholder{color:#ffe0e6;color:var(--palettes-error-200)}:host-context(.textfield-input.is-disabled,.textfield-input[disabled]):after{color:#999;color:var(--commons-disabled-color)}:host-context(.textfield-input.is-disabled,.textfield-input[disabled]) .lu-select-placeholder{color:#bbb;color:var(--commons-disabled-placeholder)}:host-context(.palette-primary) .lu-select-placeholder{color:var(--palettes-primary-400)}:host-context(.palette-primary):after{color:var(--palettes-primary-700)}:host-context(.palette-secondary) .lu-select-placeholder{color:var(--palettes-secondary-400)}:host-context(.palette-secondary):after{color:var(--palettes-secondary-700)}:host-context(.palette-grey) .lu-select-placeholder{color:var(--palettes-grey-400)}:host-context(.palette-grey):after{color:var(--palettes-grey-700)}:host-context(.palette-success) .lu-select-placeholder{color:var(--palettes-success-400)}:host-context(.palette-success):after{color:var(--palettes-success-700)}:host-context(.palette-warning) .lu-select-placeholder{color:var(--palettes-warning-400)}:host-context(.palette-warning):after{color:var(--palettes-warning-700)}:host-context(.palette-error) .lu-select-placeholder{color:var(--palettes-error-400)}:host-context(.palette-error):after{color:var(--palettes-error-700)}:host{display:none;vertical-align:text-bottom}:host-context(.textfield-input.is-filled){display:inline-block}.actionIcon{color:var(--components-select-default-palette-700);height:1rem;padding:0;width:1rem}.actionIcon:hover{background-color:var(--components-select-default-palette-50);color:var(--components-select-default-palette-800)}.actionIcon:focus{background-color:var(--components-select-default-palette-50);box-shadow:0 2px 8px #0000000a,0 1px 2px #0000000f,0 0 0 4px var(--components-select-default-palette-200)}.lucca-icon{display:block;font-size:1rem}:host-context(.textfield.mod-material) .actionIcon{color:#96a6c5;color:var(--colors-text-light-color)}:host-context(.textfield.mod-framed) .actionIcon{color:#96a6c5;color:var(--colors-text-light-color)}:host-context(.textfield-input.is-error) .actionIcon{color:#e51a3b;color:var(--palettes-error-color)}:host-context(.textfield-input.is-error) .actionIcon:hover{background-color:#fff5f7;background-color:var(--palettes-error-50);color:#af0e29;color:var(--palettes-error-800)}:host-context(.textfield-input.is-disabled,.textfield-input[disabled]){display:none}:host-context(.palette-primary) .actionIcon{color:var(--palettes-primary-700)}:host-context(.palette-primary) .actionIcon:hover{background-color:var(--palettes-primary-50);color:var(--palettes-primary-800)}:host-context(.palette-primary) .actionIcon:focus{background-color:var(--palettes-primary-50);box-shadow:0 2px 8px #0000000a,0 1px 2px #0000000f,0 0 0 4px var(--palettes-primary-200)}:host-context(.palette-secondary) .actionIcon{color:var(--palettes-secondary-700)}:host-context(.palette-secondary) .actionIcon:hover{background-color:var(--palettes-secondary-50);color:var(--palettes-secondary-800)}:host-context(.palette-secondary) .actionIcon:focus{background-color:var(--palettes-secondary-50);box-shadow:0 2px 8px #0000000a,0 1px 2px #0000000f,0 0 0 4px var(--palettes-secondary-200)}:host-context(.palette-grey) .actionIcon{color:var(--palettes-grey-700)}:host-context(.palette-grey) .actionIcon:hover{background-color:var(--palettes-grey-50);color:var(--palettes-grey-800)}:host-context(.palette-grey) .actionIcon:focus{background-color:var(--palettes-grey-50);box-shadow:0 2px 8px #0000000a,0 1px 2px #0000000f,0 0 0 4px var(--palettes-grey-200)}:host-context(.palette-success) .actionIcon{color:var(--palettes-success-700)}:host-context(.palette-success) .actionIcon:hover{background-color:var(--palettes-success-50);color:var(--palettes-success-800)}:host-context(.palette-success) .actionIcon:focus{background-color:var(--palettes-success-50);box-shadow:0 2px 8px #0000000a,0 1px 2px #0000000f,0 0 0 4px var(--palettes-success-200)}:host-context(.palette-warning) .actionIcon{color:var(--palettes-warning-700)}:host-context(.palette-warning) .actionIcon:hover{background-color:var(--palettes-warning-50);color:var(--palettes-warning-800)}:host-context(.palette-warning) .actionIcon:focus{background-color:var(--palettes-warning-50);box-shadow:0 2px 8px #0000000a,0 1px 2px #0000000f,0 0 0 4px var(--palettes-warning-200)}:host-context(.palette-error) .actionIcon{color:var(--palettes-error-700)}:host-context(.palette-error) .actionIcon:hover{background-color:var(--palettes-error-50);color:var(--palettes-error-800)}:host-context(.palette-error) .actionIcon:focus{background-color:var(--palettes-error-50);box-shadow:0 2px 8px #0000000a,0 1px 2px #0000000f,0 0 0 4px var(--palettes-error-200)}:host.is-disabled{display:inline-block!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LuSelectInput2Component, decorators: [{
+            type: Component,
+            args: [{ selector: 'lu-select2', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => LuSelectInput2Component),
+                            multi: true,
+                        },
+                        {
+                            provide: OverlayContainer,
+                            useClass: LuSelectOverlayContainer,
+                        },
+                        LuSelectOverlay,
+                        { provide: SELECT_ID, useFactory: selectIdFactory },
+                        { provide: SELECT_LABEL, useFactory: selectLabelFactory, deps: [ElementRef] },
+                        { provide: SELECT_LABEL_ID, useFactory: selectLabelIdFactory, deps: [SELECT_LABEL, SELECT_ID] },
+                    ], 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 *ngIf=\"isFilled\">\r\n\t\t\t<ng-container *ngTemplateOutlet=\"valueTpl || optionTpl; context: { $implicit: value }\"></ng-container>\r\n\t\t</ng-container>\r\n\t</div>\r\n</div>\r\n<div class=\"lu-select-suffix\">\r\n\t<a *ngIf=\"clearable && isFilled\" role=\"button\" class=\"actionIcon\" (click)=\"clearValue($event)\">\r\n\t\t<span aria-hidden=\"true\" class=\"lucca-icon\">thin_cross</span>\r\n\t\t<span class=\"u-mask\">Clear</span>\r\n\t</a>\r\n</div>\r\n", styles: [":host{cursor:pointer;outline:none;padding:0}:host:after{content:\"\\e97c\";font-family:Lucca icons;display:inline-block;vertical-align:text-bottom;font-style:normal;color:var(--components-select-default-palette-700);bottom:.5rem;bottom:var(--components-select-input-padding-vertical);font-size:1.2rem;line-height:1.4rem;pointer-events:none;position:absolute;right:.5rem;right:var(--components-select-input-padding-horizontal)}:host[disabled]{cursor:not-allowed;pointer-events:all}:host.is-disabled{cursor:not-allowed;pointer-events:all}.lu-select-display-wrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lu-select-value{line-height:1.5rem;line-height:var(--sizes-standard-line-height);min-height:calc(var(--spacings-small) + 1.5rem);min-height:calc(var(--components-select-framed-bottom-padding) + var(--sizes-standard-line-height));padding:.5rem 2.5rem .5rem .5rem;padding:var(--components-select-input-padding-vertical) 2.5rem var(--components-select-input-padding-vertical) var(--components-select-input-padding-horizontal);transition:all .25s ease;transition:all var(--commons-animations-durations-standard) ease;display:none}.lu-select-placeholder{color:var(--components-select-default-palette-400);line-height:1.5rem;line-height:var(--sizes-standard-line-height);min-height:calc(var(--spacings-small) + 1.5rem);min-height:calc(var(--components-select-framed-bottom-padding) + var(--sizes-standard-line-height));padding:.5rem 2.5rem .5rem .5rem;padding:var(--components-select-input-padding-vertical) 2.5rem var(--components-select-input-padding-vertical) var(--components-select-input-padding-horizontal);transition:all .25s ease;transition:all var(--commons-animations-durations-standard) ease;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lu-select-suffix{position:absolute;bottom:.5rem;right:1.6rem}::ng-deep .lu-select-value .label{padding:.25rem .25rem .5rem .5rem;padding:var(--spacings-smallest) var(--spacings-smaller);margin-left:0}::ng-deep .lu-select-value .chip{background:#FF6600;background:var(--components-select-chip-background);color:#fff;color:var(--components-select-chip-text);vertical-align:baseline;max-width:100%;height:1.5rem;height:var(--sizes-standard-line-height);line-height:1.5rem;line-height:var(--sizes-standard-line-height);padding:0 .5rem;padding:0 var(--spacings-smaller);margin:0 .25rem .25rem 0;text-overflow:ellipsis;overflow:hidden;vertical-align:top;white-space:nowrap}:host-context(.textfield.mod-small) .lu-select-value,:host-context(.textfield.mod-small) .lu-select-placeholder{font-size:.875rem;font-size:var(--sizes-small-font-size);line-height:1.25rem;line-height:var(--sizes-small-line-height);min-height:calc(var(--spacings-small) + 1.25rem);min-height:calc(var(--components-select-framed-bottom-padding) + var(--sizes-small-line-height))}:host-context(.textfield.mod-small):after{line-height:1.25rem;line-height:var(--sizes-small-line-height)}:host-context(.textfield.mod-small) ::ng-deep .lu-select-value .label{font-size:.875rem;font-size:var(--sizes-small-font-size);line-height:1.25rem;line-height:var(--sizes-small-line-height);font-weight:600;margin:0;padding:0;background:transparent}:host-context(.textfield.mod-small) ::ng-deep .lu-select-value .chip{height:1.25rem;height:var(--sizes-small-line-height);line-height:1.25rem;line-height:var(--sizes-small-line-height)}:host-context(.textfield.mod-framed).textfield-input,:host-context(.form.mod-framed).textfield-input{padding:var(--spacings-big) 0 0;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:#96a6c5;color:var(--colors-text-light-color);bottom:var(--spacings-small);bottom:var(--components-select-framed-bottom-padding);right:.5rem;right:var(--spacings-smaller)}:host-context(.textfield.mod-framed).textfield-input .lu-select-value,:host-context(.textfield.mod-framed).textfield-input .lu-select-placeholder,:host-context(.form.mod-framed).textfield-input .lu-select-value,:host-context(.form.mod-framed).textfield-input .lu-select-placeholder{padding:0 calc(var(--spacings-small) * 3) var(--spacings-small) var(--spacings-small);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(--spacings-small);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:1rem;color:#2a3551;color:var(--colors-text-default-color)}:host-context(.textfield.mod-filter) .lu-select-suffix{bottom:.4rem}:host-context(.textfield.mod-material):after{color:#96a6c5;color:var(--colors-text-light-color);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:1rem;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:1.375rem;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).mod-multipleView:not(.mod-singleLine) .lu-select-value{height:auto;align-items:center}:host(.mod-multiple).mod-multipleView:not(.mod-singleLine) .lu-select-display-wrapper{overflow:hidden;white-space:normal;margin-bottom:-.25rem}:host-context(.textfield-input.is-filled) .lu-select-placeholder{display:none}:host-context(.textfield-input.is-filled) .lu-select-value{display:flex}:host-context(.textfield-input.is-clearable) .lu-select-value{padding-right:2.5rem}:host-context(.textfield-input.is-error):after{color:#e51a3b;color:var(--palettes-error-color)}:host-context(.textfield-input.is-error) .lu-select-placeholder{color:#ffe0e6;color:var(--palettes-error-200)}:host-context(.textfield-input.is-disabled,.textfield-input[disabled]):after{color:#999;color:var(--commons-disabled-color)}:host-context(.textfield-input.is-disabled,.textfield-input[disabled]) .lu-select-placeholder{color:#bbb;color:var(--commons-disabled-placeholder)}:host-context(.palette-primary) .lu-select-placeholder{color:var(--palettes-primary-400)}:host-context(.palette-primary):after{color:var(--palettes-primary-700)}:host-context(.palette-secondary) .lu-select-placeholder{color:var(--palettes-secondary-400)}:host-context(.palette-secondary):after{color:var(--palettes-secondary-700)}:host-context(.palette-grey) .lu-select-placeholder{color:var(--palettes-grey-400)}:host-context(.palette-grey):after{color:var(--palettes-grey-700)}:host-context(.palette-success) .lu-select-placeholder{color:var(--palettes-success-400)}:host-context(.palette-success):after{color:var(--palettes-success-700)}:host-context(.palette-warning) .lu-select-placeholder{color:var(--palettes-warning-400)}:host-context(.palette-warning):after{color:var(--palettes-warning-700)}:host-context(.palette-error) .lu-select-placeholder{color:var(--palettes-error-400)}:host-context(.palette-error):after{color:var(--palettes-error-700)}:host{display:none;vertical-align:text-bottom}:host-context(.textfield-input.is-filled){display:inline-block}.actionIcon{color:var(--components-select-default-palette-700);height:1rem;padding:0;width:1rem}.actionIcon:hover{background-color:var(--components-select-default-palette-50);color:var(--components-select-default-palette-800)}.actionIcon:focus{background-color:var(--components-select-default-palette-50);box-shadow:0 2px 8px #0000000a,0 1px 2px #0000000f,0 0 0 4px var(--components-select-default-palette-200)}.lucca-icon{display:block;font-size:1rem}:host-context(.textfield.mod-material) .actionIcon{color:#96a6c5;color:var(--colors-text-light-color)}:host-context(.textfield.mod-framed) .actionIcon{color:#96a6c5;color:var(--colors-text-light-color)}:host-context(.textfield-input.is-error) .actionIcon{color:#e51a3b;color:var(--palettes-error-color)}:host-context(.textfield-input.is-error) .actionIcon:hover{background-color:#fff5f7;background-color:var(--palettes-error-50);color:#af0e29;color:var(--palettes-error-800)}:host-context(.textfield-input.is-disabled,.textfield-input[disabled]){display:none}:host-context(.palette-primary) .actionIcon{color:var(--palettes-primary-700)}:host-context(.palette-primary) .actionIcon:hover{background-color:var(--palettes-primary-50);color:var(--palettes-primary-800)}:host-context(.palette-primary) .actionIcon:focus{background-color:var(--palettes-primary-50);box-shadow:0 2px 8px #0000000a,0 1px 2px #0000000f,0 0 0 4px var(--palettes-primary-200)}:host-context(.palette-secondary) .actionIcon{color:var(--palettes-secondary-700)}:host-context(.palette-secondary) .actionIcon:hover{background-color:var(--palettes-secondary-50);color:var(--palettes-secondary-800)}:host-context(.palette-secondary) .actionIcon:focus{background-color:var(--palettes-secondary-50);box-shadow:0 2px 8px #0000000a,0 1px 2px #0000000f,0 0 0 4px var(--palettes-secondary-200)}:host-context(.palette-grey) .actionIcon{color:var(--palettes-grey-700)}:host-context(.palette-grey) .actionIcon:hover{background-color:var(--palettes-grey-50);color:var(--palettes-grey-800)}:host-context(.palette-grey) .actionIcon:focus{background-color:var(--palettes-grey-50);box-shadow:0 2px 8px #0000000a,0 1px 2px #0000000f,0 0 0 4px var(--palettes-grey-200)}:host-context(.palette-success) .actionIcon{color:var(--palettes-success-700)}:host-context(.palette-success) .actionIcon:hover{background-color:var(--palettes-success-50);color:var(--palettes-success-800)}:host-context(.palette-success) .actionIcon:focus{background-color:var(--palettes-success-50);box-shadow:0 2px 8px #0000000a,0 1px 2px #0000000f,0 0 0 4px var(--palettes-success-200)}:host-context(.palette-warning) .actionIcon{color:var(--palettes-warning-700)}:host-context(.palette-warning) .actionIcon:hover{background-color:var(--palettes-warning-50);color:var(--palettes-warning-800)}:host-context(.palette-warning) .actionIcon:focus{background-color:var(--palettes-warning-50);box-shadow:0 2px 8px #0000000a,0 1px 2px #0000000f,0 0 0 4px var(--palettes-warning-200)}:host-context(.palette-error) .actionIcon{color:var(--palettes-error-700)}:host-context(.palette-error) .actionIcon:hover{background-color:var(--palettes-error-50);color:var(--palettes-error-800)}:host-context(.palette-error) .actionIcon:focus{background-color:var(--palettes-error-50);box-shadow:0 2px 8px #0000000a,0 1px 2px #0000000f,0 0 0 4px var(--palettes-error-200)}:host.is-disabled{display:inline-block!important}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: i2$1.OverlayPositionBuilder }, { type: i2$1.ScrollStrategyOptions }, { type: i0.ElementRef }, { type: i0.Injector }, { type: LuSelectOverlay }, { type: i0.ChangeDetectorRef }, { type: i2$1.OverlayContainer }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [SELECT_LABEL]
+                    }] }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [SELECT_LABEL_ID]
+                    }] }];
+    }, propDecorators: { tabindex: [{
+                type: HostBinding,
+                args: ['tabindex']
+            }], placeholder: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.mod-multiple']
+            }], clearable: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.is-clearable']
+            }], disabled: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.is-disabled']
+            }], isFilled: [{
+                type: HostBinding,
+                args: ['class.is-filled']
+            }], isPanelOpen: [{
+                type: HostBinding,
+                args: ['class.is-focused']
+            }, {
+                type: HostBinding,
+                args: ['attr.aria-expanded']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], activeDescendant: [{
+                type: HostBinding,
+                args: ['attr.aria-activedescendant']
+            }], ariaControls: [{
+                type: HostBinding,
+                args: ['attr.aria-controls']
+            }], overlayConfig: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], optionComparer: [{
+                type: Input
+            }], optionTpl: [{
+                type: Input
+            }], valueTpl: [{
+                type: Input
+            }], clueChange: [{
+                type: Output
+            }], nextPage: [{
+                type: Output
+            }], previousPage: [{
+                type: Output
+            }], onKeydown: [{
+                type: HostListener,
+                args: ['keydown.space', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['keydown.enter', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
+class LuSelectInput2Module {
+}
+LuSelectInput2Module.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LuSelectInput2Module, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+LuSelectInput2Module.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.0", ngImport: i0, type: LuSelectInput2Module, declarations: [LuSelectInput2Component], imports: [CommonModule, LuSelectPanelModule, OverlayModule], exports: [LuSelectInput2Component] });
+LuSelectInput2Module.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LuSelectInput2Module, imports: [CommonModule, LuSelectPanelModule, OverlayModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LuSelectInput2Module, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, LuSelectPanelModule, OverlayModule],
+                    declarations: [LuSelectInput2Component],
+                    exports: [LuSelectInput2Component],
+                }]
+        }] });
+
+class LuSelect2Module {
+}
+LuSelect2Module.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LuSelect2Module, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+LuSelect2Module.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.0", ngImport: i0, type: LuSelect2Module, imports: [LuSelectInput2Module, LuOption2Module, LuSelectPanelModule], exports: [LuSelectInput2Module, LuOption2Module, LuSelectPanelModule] });
+LuSelect2Module.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LuSelect2Module, imports: [LuSelectInput2Module, LuOption2Module, LuSelectPanelModule, LuSelectInput2Module, LuOption2Module, LuSelectPanelModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LuSelect2Module, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [LuSelectInput2Module, LuOption2Module, LuSelectPanelModule],
+                    exports: [LuSelectInput2Module, LuOption2Module, LuSelectPanelModule],
+                }]
+        }] });
+
+/*
+ * Public API Surface of safe-content
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LuDisplayerDirective, LuOption2Module, LuOptionComponent, LuOptionDirective, LuSelect2Module, LuSelectInput2Component, LuSelectInput2Module, LuSelectPanelComponent, LuSelectPanelModule, LuSelectPanelRef };
+//# sourceMappingURL=lucca-front-ng-select2.mjs.map