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

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

@@ -1,265 +1,15 @@
-import { Overlay, OverlayPositionBuilder, ScrollStrategyOptions, OverlayContainer, OverlayModule } from '@angular/cdk/overlay';
-import { AsyncPipe, NgIf, NgFor, DOCUMENT } from '@angular/common';
+import { Overlay, OverlayPositionBuilder, ScrollStrategyOptions, OverlayModule } from '@angular/cdk/overlay';
+import { AsyncPipe, NgIf, NgFor } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Component, Directive, Input, ViewContainerRef, Injector, TemplateRef, ChangeDetectorRef, ElementRef, ChangeDetectionStrategy, HostBinding, ViewChild, EventEmitter, ViewChildren, HostListener, Injectable, forwardRef, Output } from '@angular/core';
+import { InjectionToken, inject, Component, ChangeDetectionStrategy, ViewChild, ViewChildren, HostListener, Injector, ElementRef, Injectable, forwardRef } from '@angular/core';
 import * as i2 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { getIntl } from '@lucca-front/ng/core';
-import { BehaviorSubject, observeOn, asyncScheduler, map, filter, take, takeUntil, ReplaySubject } from 'rxjs';
+import { LuSelectPanelRef, SELECT_ID, ɵLuOptionComponent, ALuSelectInputComponent, provideLuSelectOverlayContainer, provideLuSelectLabelsAndIds, ɵLuOptionOutletDirective } from '@lucca-front/ng/core-select';
 import { ComponentPortal } from '@angular/cdk/portal';
+import { observeOn, asyncScheduler, map, filter, take, takeUntil } from 'rxjs';
 import * as i1 from '@angular/cdk/a11y';
 import { ActiveDescendantKeyManager, A11yModule } from '@angular/cdk/a11y';
-import { Platform } from '@angular/cdk/platform';
-
-const LU_OPTION_CONTEXT = new InjectionToken('LuOptionContext');
-function optionContextFactory() {
-    const isDisabled$ = new BehaviorSubject(false);
-    const option$ = new BehaviorSubject(undefined);
-    return {
-        isDisabled$,
-        option$,
-        destroy() {
-            isDisabled$.complete();
-            option$.complete();
-        },
-    };
-}
-function provideOptionContext() {
-    return {
-        provide: LU_OPTION_CONTEXT,
-        useFactory: optionContextFactory,
-    };
-}
-
-class LuSimpleSelectDefaultOptionComponent {
-    constructor() {
-        this.context = inject(LU_OPTION_CONTEXT);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: LuSimpleSelectDefaultOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.3", type: LuSimpleSelectDefaultOptionComponent, isStandalone: true, selector: "lu-simple-select-default-option", ngImport: i0, template: `<ng-container *ngIf="context.option$ | async as option">{{ option?.name ?? option }}</ng-container>`, isInline: true, dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: LuSimpleSelectDefaultOptionComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'lu-simple-select-default-option',
-                    standalone: true,
-                    imports: [AsyncPipe, NgIf],
-                    template: `<ng-container *ngIf="context.option$ | async as option">{{ option?.name ?? option }}</ng-container>`,
-                }]
-        }] });
-
-class LuDisabledOptionDirective {
-    constructor() {
-        this.context = inject(LU_OPTION_CONTEXT);
-    }
-    set isDisabled(disabled) {
-        if (disabled !== null) {
-            this.context.isDisabled$.next(disabled);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: LuDisabledOptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.3", type: LuDisabledOptionDirective, isStandalone: true, selector: "[luDisabledOption]", inputs: { isDisabled: ["luDisabledOption", "isDisabled"] }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: LuDisabledOptionDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[luDisabledOption]',
-                    standalone: true,
-                }]
-        }], propDecorators: { isDisabled: [{
-                type: Input,
-                args: ['luDisabledOption']
-            }] } });
-
-class LuDisplayerDirective {
-    set select(select) {
-        select.valueTpl = 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: LuDisplayerDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.3", type: LuDisplayerDirective, isStandalone: true, selector: "[luDisplayer]", inputs: { select: ["luDisplayerSelect", "select"] }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: LuDisplayerDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[luDisplayer]',
-                    standalone: true,
-                }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; }, propDecorators: { select: [{
-                type: Input,
-                args: ['luDisplayerSelect']
-            }] } });
-
-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 LuOptionOutletDirective {
-    constructor() {
-        this.viewContainerRef = inject(ViewContainerRef);
-        this.injector = inject(Injector);
-        this.optionContext = inject(LU_OPTION_CONTEXT);
-    }
-    ngOnChanges(changes) {
-        if (changes['luOptionOutlet'] || !this.luOptionOutletValue) {
-            this.clearContainer();
-        }
-        const hasRef = this.embeddedViewRef || this.componentRef;
-        if (changes['luOptionOutlet'] || (changes['luOptionOutletValue'] && !hasRef)) {
-            this.createComponent();
-        }
-        else if (changes['luOptionOutletValue']) {
-            this.updateRefValue();
-        }
-    }
-    ngOnDestroy() {
-        this.optionContext.destroy();
-    }
-    clearContainer() {
-        this.viewContainerRef.clear();
-        this.embeddedViewRef?.destroy();
-        this.componentRef?.destroy();
-        this.embeddedViewRef = undefined;
-        this.componentRef = undefined;
-    }
-    createComponent() {
-        if (!this.luOptionOutlet || !this.luOptionOutletValue) {
-            return;
-        }
-        if (this.luOptionOutlet instanceof TemplateRef) {
-            this.embeddedViewRef = this.viewContainerRef.createEmbeddedView(this.luOptionOutlet, { $implicit: this.luOptionOutletValue }, { injector: this.injector });
-        }
-        else {
-            this.optionContext.option$.next(this.luOptionOutletValue);
-            this.componentRef = this.viewContainerRef.createComponent(this.luOptionOutlet, { injector: this.injector });
-        }
-    }
-    updateRefValue() {
-        if (!this.luOptionOutletValue) {
-            return;
-        }
-        if (this.embeddedViewRef) {
-            this.embeddedViewRef.context = { $implicit: this.luOptionOutletValue };
-        }
-        else if (this.componentRef) {
-            this.optionContext.option$.next(this.luOptionOutletValue);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: LuOptionOutletDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.3", type: LuOptionOutletDirective, isStandalone: true, selector: "[luOptionOutlet]", inputs: { luOptionOutlet: "luOptionOutlet", luOptionOutletValue: "luOptionOutletValue" }, providers: [provideOptionContext()], usesOnChanges: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: LuOptionOutletDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[luOptionOutlet]',
-                    standalone: true,
-                    providers: [provideOptionContext()],
-                }]
-        }], propDecorators: { luOptionOutlet: [{
-                type: Input
-            }], luOptionOutletValue: [{
-                type: Input
-            }] } });
-
-class LuOptionComponent {
-    constructor() {
-        this.hasOptionItemClass = true;
-        this.isSelected = false;
-        this.optionIndex = 0;
-        this.isHighlighted$ = new BehaviorSubject(false);
-        /**
-         * Whether option is disabled. Used by ListKeyManager.
-         */
-        this.disabled = false;
-        this.cdr = inject(ChangeDetectorRef);
-        this.role = 'option';
-        this.elementRef = inject(ElementRef);
-        this.selectId = inject(SELECT_ID);
-    }
-    get id() {
-        return `lu-select-${this.selectId}-option-${this.optionIndex}`;
-    }
-    ngOnDestroy() {
-        this.subscription?.unsubscribe();
-    }
-    ngAfterViewInit() {
-        this.subscription = this.optionContext.isDisabled$.pipe(observeOn(asyncScheduler)).subscribe((isDisabled) => {
-            this.disabled = isDisabled;
-            this.cdr.markForCheck();
-        });
-    }
-    setActiveStyles() {
-        this.isHighlighted$.next(true);
-        this.elementRef.nativeElement.scrollIntoView({ block: 'center' });
-    }
-    setInactiveStyles() {
-        this.isHighlighted$.next(false);
-    }
-    selectOption($event) {
-        if (this.disabled) {
-            $event.stopPropagation();
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: LuOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.3", type: LuOptionComponent, isStandalone: true, selector: "lu-select-option", inputs: { optionTpl: "optionTpl", isSelected: "isSelected", option: "option", optionIndex: "optionIndex" }, host: { properties: { "class.optionItem": "this.hasOptionItemClass", "attr.aria-selected": "this.isSelected", "attr.role": "this.role", "attr.id": "this.id" } }, viewQueries: [{ propertyName: "optionContext", first: true, predicate: LuOptionOutletDirective, descendants: true, read: LU_OPTION_CONTEXT, static: true }], 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\t(click)=\"selectOption($event)\"\r\n>\r\n\t<ng-container *luOptionOutlet=\"optionTpl; value: option\"></ng-container>\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{display:block}.optionItem{position:relative}.optionItem-value{border-radius:var(--commons-borderRadius-M);display:block;padding:var(--components-options-item-padding-vertical) var(--components-options-item-padding-horizontal);transition:background-color 50ms;cursor:pointer}.optionItem-value.is-selected{background-color:var(--palettes-primary-50)}.optionItem-value.is-selected:hover{background-color:var(--palettes-primary-100)}.optionItem-value.is-selected:active{background-color:var(--palettes-primary-200)}.optionItem-value.is-selected.is-highlighted{background-color:var(--palettes-primary-100)}.optionItem-value.is-selected.is-highlighted:hover{background-color:var(--palettes-primary-200)}.optionItem-value:hover,.optionItem-value.is-highlighted,.optionItem-value.is-focus,.optionItem-value.is-highlighted:hover,.optionItem-value.is-focus:hover{background-color:var(--palettes-grey-50)}.optionItem-value.is-highlighted:active,.optionItem-value.is-focus:active,.optionItem-value:active{background-color:var(--palettes-grey-100)}: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-color:inherit}:host-context(.mod-multiple) .optionItem-value{position:relative;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:var(--components-options-checkbox-left);top:50%;transform:translateY(-50%)}:host-context(.mod-multiple) .optionItem-value:before{content:\"\";border-radius:var(--components-options-checkbox-border-radius);box-shadow:inset 0 0 0 2px var(--components-options-checkbox-border-color);display:block;height:var(--components-options-checkbox-size);transition-property:background-color,box-shadow;transition-duration:var(--commons-animations-durations-fast);width:var(--components-options-checkbox-size)}:host-context(.mod-multiple) .optionItem-value:after{display:inline-block;vertical-align:text-bottom;font-style:normal;font-family:Lucca icons;color:transparent;font-size:var(--sizes-S-lineHeight);line-height:var(--components-options-checkbox-size);position:absolute;text-align:center;transform:translateY(-50%) scale(0);transition:all .1s;width:var(--components-options-checkbox-size)}@supports (content: \"*\"/\"\"){:host-context(.mod-multiple) .optionItem-value:after{content:\"\\e97d\"/\"\"}}@supports not (content: \"*\"/\"\"){:host-context(.mod-multiple) .optionItem-value:after{content:\"\\e97d\"}}:host-context(.mod-multiple) .optionItem-value.is-selected:before{background-color:var(--components-options-checkbox-color);box-shadow:inset 0 0 0 2px var(--components-options-checkbox-color)}:host-context(.mod-multiple) .optionItem-value.is-selected:after{color:var(--colors-white-color);transform:translateY(-50%) scale(1)}:host-context(.mod-multiple) .optionItem-value:hover:before{box-shadow:inset 0 0 0 2px var(--components-options-checkbox-color)}:host-context(.mod-multiple).establishmentOption .optionItem-value{position:relative;padding-left:calc(var(--components-options-checkbox-size) + var(--spacings-XS) * 2)}:host-context(.mod-multiple).establishmentOption .optionItem-value:before,:host-context(.mod-multiple).establishmentOption .optionItem-value:after{left:var(--spacings-XS)}.is-disabled{color:var(--palettes-grey-500);-webkit-user-select:none;user-select:none;cursor:default}.is-disabled.is-selected{background-color:var(--palettes-grey-100)}.is-disabled:hover{background-color:inherit}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { 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: LuOptionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lu-select-option', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [AsyncPipe, LuOptionOutletDirective], 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\t(click)=\"selectOption($event)\"\r\n>\r\n\t<ng-container *luOptionOutlet=\"optionTpl; value: option\"></ng-container>\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{display:block}.optionItem{position:relative}.optionItem-value{border-radius:var(--commons-borderRadius-M);display:block;padding:var(--components-options-item-padding-vertical) var(--components-options-item-padding-horizontal);transition:background-color 50ms;cursor:pointer}.optionItem-value.is-selected{background-color:var(--palettes-primary-50)}.optionItem-value.is-selected:hover{background-color:var(--palettes-primary-100)}.optionItem-value.is-selected:active{background-color:var(--palettes-primary-200)}.optionItem-value.is-selected.is-highlighted{background-color:var(--palettes-primary-100)}.optionItem-value.is-selected.is-highlighted:hover{background-color:var(--palettes-primary-200)}.optionItem-value:hover,.optionItem-value.is-highlighted,.optionItem-value.is-focus,.optionItem-value.is-highlighted:hover,.optionItem-value.is-focus:hover{background-color:var(--palettes-grey-50)}.optionItem-value.is-highlighted:active,.optionItem-value.is-focus:active,.optionItem-value:active{background-color:var(--palettes-grey-100)}: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-color:inherit}:host-context(.mod-multiple) .optionItem-value{position:relative;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:var(--components-options-checkbox-left);top:50%;transform:translateY(-50%)}:host-context(.mod-multiple) .optionItem-value:before{content:\"\";border-radius:var(--components-options-checkbox-border-radius);box-shadow:inset 0 0 0 2px var(--components-options-checkbox-border-color);display:block;height:var(--components-options-checkbox-size);transition-property:background-color,box-shadow;transition-duration:var(--commons-animations-durations-fast);width:var(--components-options-checkbox-size)}:host-context(.mod-multiple) .optionItem-value:after{display:inline-block;vertical-align:text-bottom;font-style:normal;font-family:Lucca icons;color:transparent;font-size:var(--sizes-S-lineHeight);line-height:var(--components-options-checkbox-size);position:absolute;text-align:center;transform:translateY(-50%) scale(0);transition:all .1s;width:var(--components-options-checkbox-size)}@supports (content: \"*\"/\"\"){:host-context(.mod-multiple) .optionItem-value:after{content:\"\\e97d\"/\"\"}}@supports not (content: \"*\"/\"\"){:host-context(.mod-multiple) .optionItem-value:after{content:\"\\e97d\"}}:host-context(.mod-multiple) .optionItem-value.is-selected:before{background-color:var(--components-options-checkbox-color);box-shadow:inset 0 0 0 2px var(--components-options-checkbox-color)}:host-context(.mod-multiple) .optionItem-value.is-selected:after{color:var(--colors-white-color);transform:translateY(-50%) scale(1)}:host-context(.mod-multiple) .optionItem-value:hover:before{box-shadow:inset 0 0 0 2px var(--components-options-checkbox-color)}:host-context(.mod-multiple).establishmentOption .optionItem-value{position:relative;padding-left:calc(var(--components-options-checkbox-size) + var(--spacings-XS) * 2)}:host-context(.mod-multiple).establishmentOption .optionItem-value:before,:host-context(.mod-multiple).establishmentOption .optionItem-value:after{left:var(--spacings-XS)}.is-disabled{color:var(--palettes-grey-500);-webkit-user-select:none;user-select:none;cursor:default}.is-disabled.is-selected{background-color:var(--palettes-grey-100)}.is-disabled:hover{background-color:inherit}\n"] }]
-        }], propDecorators: { hasOptionItemClass: [{
-                type: HostBinding,
-                args: ['class.optionItem']
-            }], optionTpl: [{
-                type: Input
-            }], isSelected: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.aria-selected']
-            }], option: [{
-                type: Input
-            }], optionIndex: [{
-                type: Input
-            }], optionContext: [{
-                type: ViewChild,
-                args: [LuOptionOutletDirective, { read: LU_OPTION_CONTEXT, static: true }]
-            }], role: [{
-                type: HostBinding,
-                args: ['attr.role']
-            }], id: [{
-                type: HostBinding,
-                args: ['attr.id']
-            }] } });
-
-class LuOptionDirective {
-    set select(select) {
-        select.optionTpl = 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: LuOptionDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.3", type: LuOptionDirective, isStandalone: true, selector: "[luOption]", inputs: { select: ["luOptionSelect", "select"] }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: LuOptionDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[luOption]',
-                    standalone: true,
-                }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; }, propDecorators: { select: [{
-                type: Input,
-                args: ['luOptionSelect']
-            }] } });
 
 const LU_SIMPLE_SELECT_TRANSLATIONS = new InjectionToken('LuSimpleSelectTranslations', {
     factory: () => luSimpleSelectTranslations,
@@ -297,31 +47,11 @@ const luSimpleSelectTranslations = {
     },
 };
 
-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.complete();
-        this.previousPage.complete();
-        this.valueChanged.complete();
-        this.clueChanged.emit(null);
-        this.clueChanged.complete();
-        this.activeOptionIdChanged.emit(undefined);
-        this.activeOptionIdChanged.complete();
-    }
-}
+const SIMPLE_SELECT_PANEL_DATA = new InjectionToken('SimpleSelectPanelData');
 
 class LuSelectPanelComponent {
     constructor() {
-        this.panelData = inject(SELECT_PANEL_DATA);
+        this.panelData = inject(SIMPLE_SELECT_PANEL_DATA);
         this.panelRef = inject(LuSelectPanelRef);
         this.selectId = inject(SELECT_ID);
         this.intl = getIntl(LU_SIMPLE_SELECT_TRANSLATIONS);
@@ -384,17 +114,17 @@ class LuSelectPanelComponent {
         setTimeout(() => this.keyManager.setFirstItemActive());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: LuSelectPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.3", type: LuSelectPanelComponent, 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 }], 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\" [class.is-loading]=\"loading$ | async\" tabindex=\"0\" (scroll)=\"onScroll($event)\">\r\n\t\t<ng-container *ngIf=\"searchable\">\r\n\t\t\t<div class=\"panel-search 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-marginBottom0\">{{ intl.emptyResults }}</p>\r\n\t\t\t\t<button type=\"button\" class=\"link\" (click)=\"updateClue(null); searchInput.focus()\">{{ intl.clearSearch }}</button>\r\n\t\t\t</div>\r\n\t\t</ng-container>\r\n\t\t<div class=\"lu-picker-content-option\">\r\n\t\t\t<lu-select-option\r\n\t\t\t\t*ngFor=\"let option of ctx.options; let index = index\"\r\n\t\t\t\t[option]=\"option\"\r\n\t\t\t\t[optionTpl]=\"optionTpl\"\r\n\t\t\t\t[optionIndex]=\"index\"\r\n\t\t\t\t[isSelected]=\"option === selected\"\r\n\t\t\t\t(click)=\"panelRef.emitValue(option)\"\r\n\t\t\t></lu-select-option>\r\n\t\t</div>\r\n\r\n\t\t<div *ngIf=\"loading$ | async\" class=\"panel-loading loading lu-picker-loading\"></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}.textfield.mod-search{width:100%}.textfield-input{outline:none}.checkbox.mod-formerEmployee{padding:var(--spacings-XXS) var(--components-options-item-padding-horizontal);border-bottom:var(--commons-divider-width) solid var(--commons-divider-color);background-color:var(--palettes-grey-50);font-style:italic}.optionPlaceholder{display:block;padding:var(--components-options-item-padding-vertical) var(--components-options-item-padding-horizontal);font-style:italic;color:var(--palettes-grey-600)}.panel-search{position:sticky;top:0;margin-bottom:var(--spacings-XXS);box-shadow:0 -4px 0 var(--spacings-XS) var(--colors-white-color)}.panel-loading:after{box-shadow:0 0 0 .25rem var(--colors-white-color),inset 0 0 0 .5rem var(--colors-white-color)}\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: "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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.3", type: LuSelectPanelComponent, 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 }], 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\" [class.is-loading]=\"loading$ | async\" tabindex=\"0\" (scroll)=\"onScroll($event)\">\r\n\t\t<ng-container *ngIf=\"searchable\">\r\n\t\t\t<div class=\"panel-search 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-marginBottom0\">{{ intl.emptyResults }}</p>\r\n\t\t\t\t<button type=\"button\" class=\"link\" (click)=\"updateClue(null); searchInput.focus()\">{{ intl.clearSearch }}</button>\r\n\t\t\t</div>\r\n\t\t</ng-container>\r\n\t\t<div class=\"lu-picker-content-option\">\r\n\t\t\t<lu-select-option\r\n\t\t\t\t*ngFor=\"let option of ctx.options; let index = index\"\r\n\t\t\t\t[option]=\"option\"\r\n\t\t\t\t[optionTpl]=\"optionTpl\"\r\n\t\t\t\t[optionIndex]=\"index\"\r\n\t\t\t\t[scrollIntoViewOptions]=\"{ block: 'center' }\"\r\n\t\t\t\t[isSelected]=\"option === selected\"\r\n\t\t\t\t(click)=\"panelRef.emitValue(option)\"\r\n\t\t\t></lu-select-option>\r\n\t\t</div>\r\n\r\n\t\t<div *ngIf=\"loading$ | async\" class=\"panel-loading loading lu-picker-loading\"></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}.textfield.mod-search{width:100%}.textfield-input{outline:none}.checkbox.mod-formerEmployee{padding:var(--spacings-XXS) var(--components-options-item-padding-horizontal);border-bottom:var(--commons-divider-width) solid var(--commons-divider-color);background-color:var(--palettes-grey-50);font-style:italic}.optionPlaceholder{display:block;padding:var(--components-options-item-padding-vertical) var(--components-options-item-padding-horizontal);font-style:italic;color:var(--palettes-grey-600)}.panel-search{position:sticky;top:0;box-shadow:0 -4px 0 var(--spacings-XS) var(--colors-white-color)}.panel-loading:after{box-shadow:0 0 0 .25rem var(--colors-white-color),inset 0 0 0 .5rem var(--colors-white-color)}\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: "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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: LuSelectPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lu-select-panel', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [A11yModule, AsyncPipe, FormsModule, NgIf, NgFor, LuOptionComponent], 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\" [class.is-loading]=\"loading$ | async\" tabindex=\"0\" (scroll)=\"onScroll($event)\">\r\n\t\t<ng-container *ngIf=\"searchable\">\r\n\t\t\t<div class=\"panel-search 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-marginBottom0\">{{ intl.emptyResults }}</p>\r\n\t\t\t\t<button type=\"button\" class=\"link\" (click)=\"updateClue(null); searchInput.focus()\">{{ intl.clearSearch }}</button>\r\n\t\t\t</div>\r\n\t\t</ng-container>\r\n\t\t<div class=\"lu-picker-content-option\">\r\n\t\t\t<lu-select-option\r\n\t\t\t\t*ngFor=\"let option of ctx.options; let index = index\"\r\n\t\t\t\t[option]=\"option\"\r\n\t\t\t\t[optionTpl]=\"optionTpl\"\r\n\t\t\t\t[optionIndex]=\"index\"\r\n\t\t\t\t[isSelected]=\"option === selected\"\r\n\t\t\t\t(click)=\"panelRef.emitValue(option)\"\r\n\t\t\t></lu-select-option>\r\n\t\t</div>\r\n\r\n\t\t<div *ngIf=\"loading$ | async\" class=\"panel-loading loading lu-picker-loading\"></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}.textfield.mod-search{width:100%}.textfield-input{outline:none}.checkbox.mod-formerEmployee{padding:var(--spacings-XXS) var(--components-options-item-padding-horizontal);border-bottom:var(--commons-divider-width) solid var(--commons-divider-color);background-color:var(--palettes-grey-50);font-style:italic}.optionPlaceholder{display:block;padding:var(--components-options-item-padding-vertical) var(--components-options-item-padding-horizontal);font-style:italic;color:var(--palettes-grey-600)}.panel-search{position:sticky;top:0;margin-bottom:var(--spacings-XXS);box-shadow:0 -4px 0 var(--spacings-XS) var(--colors-white-color)}.panel-loading:after{box-shadow:0 0 0 .25rem var(--colors-white-color),inset 0 0 0 .5rem var(--colors-white-color)}\n"] }]
+            args: [{ selector: 'lu-select-panel', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [A11yModule, AsyncPipe, FormsModule, NgIf, NgFor, ɵLuOptionComponent], 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\" [class.is-loading]=\"loading$ | async\" tabindex=\"0\" (scroll)=\"onScroll($event)\">\r\n\t\t<ng-container *ngIf=\"searchable\">\r\n\t\t\t<div class=\"panel-search 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-marginBottom0\">{{ intl.emptyResults }}</p>\r\n\t\t\t\t<button type=\"button\" class=\"link\" (click)=\"updateClue(null); searchInput.focus()\">{{ intl.clearSearch }}</button>\r\n\t\t\t</div>\r\n\t\t</ng-container>\r\n\t\t<div class=\"lu-picker-content-option\">\r\n\t\t\t<lu-select-option\r\n\t\t\t\t*ngFor=\"let option of ctx.options; let index = index\"\r\n\t\t\t\t[option]=\"option\"\r\n\t\t\t\t[optionTpl]=\"optionTpl\"\r\n\t\t\t\t[optionIndex]=\"index\"\r\n\t\t\t\t[scrollIntoViewOptions]=\"{ block: 'center' }\"\r\n\t\t\t\t[isSelected]=\"option === selected\"\r\n\t\t\t\t(click)=\"panelRef.emitValue(option)\"\r\n\t\t\t></lu-select-option>\r\n\t\t</div>\r\n\r\n\t\t<div *ngIf=\"loading$ | async\" class=\"panel-loading loading lu-picker-loading\"></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}.textfield.mod-search{width:100%}.textfield-input{outline:none}.checkbox.mod-formerEmployee{padding:var(--spacings-XXS) var(--components-options-item-padding-horizontal);border-bottom:var(--commons-divider-width) solid var(--commons-divider-color);background-color:var(--palettes-grey-50);font-style:italic}.optionPlaceholder{display:block;padding:var(--components-options-item-padding-vertical) var(--components-options-item-padding-horizontal);font-style:italic;color:var(--palettes-grey-600)}.panel-search{position:sticky;top:0;box-shadow:0 -4px 0 var(--spacings-XS) var(--colors-white-color)}.panel-loading:after{box-shadow:0 0 0 .25rem var(--colors-white-color),inset 0 0 0 .5rem var(--colors-white-color)}\n"] }]
         }], propDecorators: { searchInput: [{
                 type: ViewChild,
                 args: ['searchInput']
             }], optionsQL: [{
                 type: ViewChildren,
-                args: [LuOptionComponent]
+                args: [ɵLuOptionComponent]
             }], onKeyDown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
@@ -407,7 +137,7 @@ class SelectPanelRef extends LuSelectPanelRef {
         const injector = Injector.create({
             providers: [
                 { provide: LuSelectPanelRef, useValue: this },
-                { provide: SELECT_PANEL_DATA, useValue: panelData },
+                { provide: SIMPLE_SELECT_PANEL_DATA, useValue: panelData },
             ],
             parent: parentInjector,
         });
@@ -483,147 +213,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.3", ngImpor
             type: Injectable
         }] });
 
-let selectId = 0;
-function selectIdFactory() {
-    return selectId++;
-}
-function selectLabelFactory() {
-    const elementRef = inject(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() {
-    return inject(SELECT_LABEL)?.id || `lu-select-label-${inject(SELECT_ID)}`;
-}
-function provideLuSelectLabelsAndIds() {
-    return [
-        { provide: SELECT_ID, useFactory: selectIdFactory },
-        { provide: SELECT_LABEL, useFactory: selectLabelFactory },
-        { provide: SELECT_LABEL_ID, useFactory: selectLabelIdFactory },
-    ];
-}
-class LuSelectOverlayContainer extends OverlayContainer {
+class LuSimpleSelectInputComponent extends ALuSelectInputComponent {
     constructor() {
-        super(inject(DOCUMENT), inject(Platform));
-        this.selectLabelId = inject(SELECT_LABEL_ID);
-        this.selectId = inject(SELECT_ID);
-    }
-    _createContainer() {
-        super._createContainer();
-        this._containerElement.setAttribute('aria-labelledby', this.selectLabelId);
-        this._containerElement.setAttribute('role', 'listbox');
-        this._containerElement.id = `lu-select-overlay-container-${this.selectId}`;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: LuSelectOverlayContainer, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: LuSelectOverlayContainer }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: LuSelectOverlayContainer, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return []; } });
-function provideLuSelectOverlayContainer() {
-    return [
-        {
-            provide: OverlayContainer,
-            useClass: LuSelectOverlayContainer,
-        },
-    ];
-}
-
-/* eslint-disable @angular-eslint/no-output-on-prefix */
-class LuSimpleSelectInputComponent {
-    constructor() {
-        this.tabindex = 0;
-        this.placeholder = '';
-        this.clearable = false;
-        this.disabled = false;
-        this.isPanelOpen$ = new BehaviorSubject(false);
-        this.role = 'combobox';
-        this.overlayConfig = {
-            hasBackdrop: true,
-            backdropClass: 'cdk-overlay-transparent-backdrop',
-        };
-        this.optionComparer = (option1, option2) => JSON.stringify(option1) === JSON.stringify(option2);
-        this.optionTpl = LuSimpleSelectDefaultOptionComponent;
-        this.clueChange = new EventEmitter();
-        this.nextPage = new EventEmitter();
-        this.previousPage = new EventEmitter();
-        this.options$ = new ReplaySubject(1);
-        this.loading$ = new ReplaySubject(1);
-        this.clue = null;
+        super(...arguments);
         this.intl = getIntl(LU_SIMPLE_SELECT_TRANSLATIONS);
-        this.changeDetectorRef = inject(ChangeDetectorRef);
-        this.overlayContainerRef = inject(OverlayContainer).getContainerElement();
         this.panelRefFactory = inject(LuSimpleSelectPanelRefFactory);
-        this.label = inject(SELECT_LABEL);
-        this.labelId = inject(SELECT_LABEL_ID);
-    }
-    get searchable() {
-        return this.clueChange.observed;
-    }
-    get isFilled() {
-        return this.value !== null && this.value !== undefined;
-    }
-    get isPanelOpen() {
-        return this.isPanelOpen$.value;
-    }
-    get ariaControls() {
-        return this.overlayContainerRef.id;
-    }
-    set loading(value) {
-        this.loading$.next(value);
-    }
-    set options(options) {
-        this.options$.next(options);
-    }
-    get value() {
-        return this._value;
-    }
-    set value(value) {
-        this._value = value;
-        this.changeDetectorRef.markForCheck();
-    }
-    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.panelRef?.close();
-    }
-    ngOnInit() {
-        if (this.label) {
-            this.label.id = this.labelId;
-        }
-    }
-    clearValue(event) {
-        event.stopPropagation();
-        this.updateValue(null);
-    }
-    openPanel() {
-        if (this.isPanelOpen || this.disabled) {
-            return;
-        }
-        this.isPanelOpen$.next(true);
-        this.panelRef = this.panelRefFactory.buildPanelRef({
+    buildPanelRef() {
+        return this.panelRefFactory.buildPanelRef({
             initialValue: this.value,
             optionComparer: this.optionComparer,
             options$: this.options$,
@@ -631,127 +228,47 @@ class LuSimpleSelectInputComponent {
             searchable: this.searchable,
             optionTpl: this.optionTpl,
         }, this.overlayConfig);
-        this.panelRef.valueChanged.subscribe((value) => this.updateValue(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$.next(false);
-        this.panelRef.close();
-        this.panelRef = undefined;
     }
-    writeValue(value) {
-        this.value = value;
-    }
-    updateValue(value) {
-        this.value = value;
-        this.onChange?.(value);
-        this.onTouched?.();
+    get hasValue() {
+        return this.value !== null && this.value !== undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: LuSimpleSelectInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.3", type: LuSimpleSelectInputComponent, isStandalone: true, selector: "lu-simple-select", inputs: { placeholder: "placeholder", clearable: "clearable", disabled: "disabled", overlayConfig: "overlayConfig", loading: "loading", 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)", "keydown.arrowDown": "onKeydown($event)", "click": "onKeydown($event)" }, properties: { "tabindex": "this.tabindex", "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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: LuSimpleSelectInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.3", type: LuSimpleSelectInputComponent, isStandalone: true, selector: "lu-simple-select", providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => LuSimpleSelectInputComponent),
                 multi: true,
             },
+            {
+                provide: ALuSelectInputComponent,
+                useExisting: forwardRef(() => LuSimpleSelectInputComponent),
+            },
+            LuSimpleSelectPanelRefFactory,
             provideLuSelectOverlayContainer(),
             provideLuSelectLabelsAndIds(),
-            LuSimpleSelectPanelRefFactory,
-        ], 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=\"valueTpl || optionTpl; value: value\"></ng-container>\r\n\t</div>\r\n</div>\r\n<a *ngIf=\"clearable && isFilled\" class=\"clear lu-select-clearer\" role=\"button\" (click)=\"clearValue($event)\">\r\n\t<span aria-hidden=\"true\" class=\"lucca-icon icon-signClose\"></span>\r\n\t<span class=\"u-mask\">{{ intl.clear }}</span>\r\n</a>\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-chip-background: var(--palettes-primary-700);--components-select-chip-text: var(--colors-white-color);--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!important;gap:0!important}: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]{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: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 .label{padding:var(--spacings-XXS) var(--spacings-XS);margin-left:0}::ng-deep .lu-select-value .chip{background-color:var(--components-select-chip-background);color:var(--components-select-chip-text);vertical-align:baseline;max-width:100%;height:var(--sizes-M-lineHeight);line-height:var(--sizes-M-lineHeight);padding:0 var(--spacings-XS);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) .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)}: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:hidden;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{display:none}:host-context(.textfield-input.is-filled){display:block}:host-context(.textfield-input.is-disabled,.textfield-input[disabled]){display:none}.lu-select-value{padding-right:2rem}:host.is-disabled{display:inline-block!important}\n"], dependencies: [{ kind: "directive", type: LuOptionOutletDirective, selector: "[luOptionOutlet]", inputs: ["luOptionOutlet", "luOptionOutletValue"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: OverlayModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], 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=\"valueTpl || optionTpl; value: value\"></ng-container>\r\n\t</div>\r\n</div>\r\n<a *ngIf=\"clearable && hasValue\" class=\"clear lu-select-clearer\" role=\"button\" (click)=\"clearValue($event)\">\r\n\t<span aria-hidden=\"true\" class=\"lucca-icon icon-signClose\"></span>\r\n\t<span class=\"u-mask\">{{ intl.clear }}</span>\r\n</a>\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{display:none}:host-context(.textfield-input.is-filled){display:block}:host-context(.textfield-input.is-disabled,.textfield-input[disabled]){display:none}.lu-select-value{padding-right:2rem}:host.is-disabled{display:inline-block!important}\n"], dependencies: [{ kind: "directive", type: ɵLuOptionOutletDirective, selector: "[luOptionOutlet]", inputs: ["luOptionOutlet", "luOptionOutletValue"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: OverlayModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: LuSimpleSelectInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lu-simple-select', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [AsyncPipe, LuOptionOutletDirective, NgIf, OverlayModule], providers: [
+            args: [{ selector: 'lu-simple-select', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [AsyncPipe, ɵLuOptionOutletDirective, NgIf, OverlayModule], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => LuSimpleSelectInputComponent),
                             multi: true,
                         },
+                        {
+                            provide: ALuSelectInputComponent,
+                            useExisting: forwardRef(() => LuSimpleSelectInputComponent),
+                        },
+                        LuSimpleSelectPanelRefFactory,
                         provideLuSelectOverlayContainer(),
                         provideLuSelectLabelsAndIds(),
-                        LuSimpleSelectPanelRefFactory,
-                    ], 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=\"valueTpl || optionTpl; value: value\"></ng-container>\r\n\t</div>\r\n</div>\r\n<a *ngIf=\"clearable && isFilled\" class=\"clear lu-select-clearer\" role=\"button\" (click)=\"clearValue($event)\">\r\n\t<span aria-hidden=\"true\" class=\"lucca-icon icon-signClose\"></span>\r\n\t<span class=\"u-mask\">{{ intl.clear }}</span>\r\n</a>\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-chip-background: var(--palettes-primary-700);--components-select-chip-text: var(--colors-white-color);--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!important;gap:0!important}: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]{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: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 .label{padding:var(--spacings-XXS) var(--spacings-XS);margin-left:0}::ng-deep .lu-select-value .chip{background-color:var(--components-select-chip-background);color:var(--components-select-chip-text);vertical-align:baseline;max-width:100%;height:var(--sizes-M-lineHeight);line-height:var(--sizes-M-lineHeight);padding:0 var(--spacings-XS);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) .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)}: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:hidden;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{display:none}:host-context(.textfield-input.is-filled){display:block}:host-context(.textfield-input.is-disabled,.textfield-input[disabled]){display:none}.lu-select-value{padding-right:2rem}:host.is-disabled{display:inline-block!important}\n"] }]
-        }], propDecorators: { tabindex: [{
-                type: HostBinding,
-                args: ['tabindex']
-            }], placeholder: [{
-                type: Input
-            }], 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
-            }], loading: [{
-                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: ['keydown.arrowDown', ['$event']]
-            }, {
-                type: HostListener,
-                args: ['click', ['$event']]
-            }] } });
+                    ], 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=\"valueTpl || optionTpl; value: value\"></ng-container>\r\n\t</div>\r\n</div>\r\n<a *ngIf=\"clearable && hasValue\" class=\"clear lu-select-clearer\" role=\"button\" (click)=\"clearValue($event)\">\r\n\t<span aria-hidden=\"true\" class=\"lucca-icon icon-signClose\"></span>\r\n\t<span class=\"u-mask\">{{ intl.clear }}</span>\r\n</a>\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{display:none}:host-context(.textfield-input.is-filled){display:block}:host-context(.textfield-input.is-disabled,.textfield-input[disabled]){display:none}.lu-select-value{padding-right:2rem}:host.is-disabled{display:inline-block!important}\n"] }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { LU_SIMPLE_SELECT_TRANSLATIONS, LuDisabledOptionDirective, LuDisplayerDirective, LuOptionDirective, LuSelectPanelComponent, LuSelectPanelRef, LuSimpleSelectDefaultOptionComponent, LuSimpleSelectInputComponent, luSimpleSelectTranslations, LuOptionComponent as ɵLuOptionComponent };
+export { LU_SIMPLE_SELECT_TRANSLATIONS, LuSelectPanelComponent, LuSimpleSelectInputComponent, luSimpleSelectTranslations };
 //# sourceMappingURL=lucca-front-ng-simple-select.mjs.map