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

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

@@ -1,36 +1,32 @@
 import * as i0 from '@angular/core';
-import { Input, Directive, InjectionToken, inject, ChangeDetectionStrategy, Component, TemplateRef, Pipe, ViewContainerRef, Injector, ElementRef, signal, input, computed, model, output, Injectable, booleanAttribute, ChangeDetectorRef, effect, ViewChild, HostBinding, HostListener, forwardRef, DestroyRef, untracked, EventEmitter } from '@angular/core';
+import { input, Directive, InjectionToken, inject, ChangeDetectionStrategy, Component, TemplateRef, Pipe, ViewContainerRef, Injector, ElementRef, signal, computed, model, linkedSignal, output, Injectable, booleanAttribute, viewChild, ChangeDetectorRef, forwardRef, DestroyRef, effect, untracked, EventEmitter } from '@angular/core';
+import { syncInputSignal, ɵeffectWithDeps as _effectWithDeps, isNotNil, intlInputOptions, isNil, PortalDirective } from '@lucca-front/ng/core';
 import { OverlayContainer } from '@angular/cdk/overlay';
 import { toSignal, outputFromObservable, toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FILTER_PILL_INPUT_COMPONENT, FILTER_PILL_HOST_COMPONENT } from '@lucca-front/ng/filter-pills';
 import { BehaviorSubject, observeOn, asyncScheduler, Subject, ReplaySubject, defer, startWith, switchMap, map, of, take, filter, debounceTime, skip, distinctUntilChanged } from 'rxjs';
 import { AsyncPipe } from '@angular/common';
-import { intlInputOptions, PortalDirective, isNotNil } from '@lucca-front/ng/core';
 import { LuTooltipTriggerDirective } from '@lucca-front/ng/tooltip';
 import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
 
 class LuDisplayerDirective {
-    set select(select) {
-        select.valueTpl.set(this.templateRef);
-    }
     constructor(templateRef) {
         this.templateRef = templateRef;
+        this.select = input(undefined, { ...(ngDevMode ? { debugName: "select" } : /* istanbul ignore next */ {}), alias: 'luDisplayerSelect' });
+        syncInputSignal(this.select, (select) => select.valueTpl.set(this.templateRef));
     }
     static ngTemplateContextGuard(_dir, _ctx) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuDisplayerDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.15", type: LuDisplayerDirective, isStandalone: true, selector: "[luDisplayer]", inputs: { select: ["luDisplayerSelect", "select"] }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuDisplayerDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: LuDisplayerDirective, isStandalone: true, selector: "[luDisplayer]", inputs: { select: { classPropertyName: "select", publicName: "luDisplayerSelect", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuDisplayerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuDisplayerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[luDisplayer]',
                 }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { select: [{
-                type: Input,
-                args: ['luDisplayerSelect']
-            }] } });
+        }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { select: [{ type: i0.Input, args: [{ isSignal: true, alias: "luDisplayerSelect", required: false }] }] } });
 
 const LU_OPTION_CONTEXT = new InjectionToken('LuOptionContext');
 function optionContextFactory() {
@@ -56,61 +52,51 @@ class LuSimpleSelectDefaultOptionComponent {
     constructor() {
         this.context = inject(LU_OPTION_CONTEXT);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuSimpleSelectDefaultOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: LuSimpleSelectDefaultOptionComponent, isStandalone: true, selector: "lu-simple-select-default-option", ngImport: i0, template: "<!-- we don\u2019t want space before comma in presentation display -->\n<!-- prettier-ignore -->\n@if (context.option$ | async; as option) {{{ option?.name ?? option }}}\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuSimpleSelectDefaultOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: LuSimpleSelectDefaultOptionComponent, isStandalone: true, selector: "lu-simple-select-default-option", ngImport: i0, template: "<!-- we don\u2019t want space before comma in presentation display -->\n<!-- prettier-ignore -->\n@if (context.option$ | async; as option) {{{ option?.name ?? option }}}\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuSimpleSelectDefaultOptionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuSimpleSelectDefaultOptionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lu-simple-select-default-option', imports: [AsyncPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- we don\u2019t want space before comma in presentation display -->\n<!-- prettier-ignore -->\n@if (context.option$ | async; as option) {{{ option?.name ?? option }}}\n" }]
         }] });
 
 class LuDisabledOptionDirective {
     constructor() {
+        this.isDisabled = input(undefined, { ...(ngDevMode ? { debugName: "isDisabled" } : /* istanbul ignore next */ {}), alias: 'luDisabledOption' });
         this.context = inject(LU_OPTION_CONTEXT);
+        syncInputSignal(this.isDisabled, (disabled) => this.context.isDisabled$.next(disabled));
     }
-    set isDisabled(disabled) {
-        if (disabled !== null) {
-            this.context.isDisabled$.next(disabled);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuDisabledOptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.15", type: LuDisabledOptionDirective, isStandalone: true, selector: "[luDisabledOption]", inputs: { isDisabled: ["luDisabledOption", "isDisabled"] }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuDisabledOptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: LuDisabledOptionDirective, isStandalone: true, selector: "[luDisabledOption]", inputs: { isDisabled: { classPropertyName: "isDisabled", publicName: "luDisabledOption", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuDisabledOptionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuDisabledOptionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[luDisabledOption]',
                 }]
-        }], propDecorators: { isDisabled: [{
-                type: Input,
-                args: ['luDisabledOption']
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "luDisabledOption", required: false }] }] } });
 
 class LuOptionGroupDirective {
-    constructor() {
-        this.content = inject(TemplateRef);
-    }
     static ngTemplateContextGuard(_dir, _ctx) {
         return true;
     }
-    ngOnInit() {
-        this.select.groupingSignal.set(this);
+    constructor() {
+        this.select = input.required({ ...(ngDevMode ? { debugName: "select" } : /* istanbul ignore next */ {}), alias: 'luOptionGroupSelect' });
+        this.selector = input.required({ ...(ngDevMode ? { debugName: "selector" } : /* istanbul ignore next */ {}), alias: 'luOptionGroupBy' });
+        this.content = inject(TemplateRef);
+        _effectWithDeps([this.select, this.selector], (select, selector) => {
+            select.groupingSignal.set({ selector, content: this.content });
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuOptionGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.15", type: LuOptionGroupDirective, isStandalone: true, selector: "[luOptionGroup]", inputs: { select: ["luOptionGroupSelect", "select"], selector: ["luOptionGroupBy", "selector"] }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuOptionGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: LuOptionGroupDirective, isStandalone: true, selector: "[luOptionGroup]", inputs: { select: { classPropertyName: "select", publicName: "luOptionGroupSelect", isSignal: true, isRequired: true, transformFunction: null }, selector: { classPropertyName: "selector", publicName: "luOptionGroupBy", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuOptionGroupDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuOptionGroupDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[luOptionGroup]',
                 }]
-        }], propDecorators: { select: [{
-                type: Input,
-                args: ['luOptionGroupSelect']
-            }], selector: [{
-                type: Input,
-                args: ['luOptionGroupBy']
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { select: [{ type: i0.Input, args: [{ isSignal: true, alias: "luOptionGroupSelect", required: true }] }], selector: [{ type: i0.Input, args: [{ isSignal: true, alias: "luOptionGroupBy", required: true }] }] } });
 
 /**
  * Generate groups with a O(n) complexity. Note that the options must be sorted by group.
@@ -142,37 +128,54 @@ class LuOptionGroupPipe {
     transform(options, selector) {
         return Array.isArray(options) ? generateGroups(options, selector) : generateGroups([options], selector)[0];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuOptionGroupPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.15", ngImport: i0, type: LuOptionGroupPipe, isStandalone: true, name: "luOptionGroup" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuOptionGroupPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.14", ngImport: i0, type: LuOptionGroupPipe, isStandalone: true, name: "luOptionGroup" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuOptionGroupPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuOptionGroupPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'luOptionGroup',
                 }]
         }] });
 
+function hasRenderableValue(value, showNull) {
+    return showNull ? value !== undefined : isNotNil(value);
+}
 class LuOptionOutletDirective {
     constructor() {
-        this.luOptionShowNull = false;
+        this.luOptionOutlet = input(...(ngDevMode ? [undefined, { debugName: "luOptionOutlet" }] : /* istanbul ignore next */ []));
+        this.luOptionOutletValue = input(...(ngDevMode ? [undefined, { debugName: "luOptionOutletValue" }] : /* istanbul ignore next */ []));
+        this.luOptionShowNull = input(false, ...(ngDevMode ? [{ debugName: "luOptionShowNull" }] : /* istanbul ignore next */ []));
         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'].currentValue !== null && changes['luOptionOutletValue'].currentValue !== undefined && !hasRef)) {
-            const newValue = changes['luOptionOutletValue'].currentValue;
-            if (newValue !== null && newValue !== undefined) {
-                this.createComponent();
+        let previousOutlet;
+        _effectWithDeps([this.luOptionOutlet, this.luOptionOutletValue, this.luOptionShowNull], (outlet, value, showNull) => {
+            const outletChanged = outlet !== previousOutlet;
+            previousOutlet = outlet;
+            if (outletChanged || !hasRenderableValue(value, showNull)) {
+                this.clearContainer();
             }
-        }
-        else if (changes['luOptionOutletValue']) {
-            this.updateRefValue();
-        }
+            if (outlet && hasRenderableValue(value, showNull)) {
+                if (!(this.embeddedViewRef || this.componentRef)) {
+                    if (outlet instanceof TemplateRef) {
+                        this.embeddedViewRef = this.viewContainerRef.createEmbeddedView(outlet, { $implicit: value }, { injector: this.injector });
+                    }
+                    else {
+                        this.optionContext.option$.next(value);
+                        this.componentRef = this.viewContainerRef.createComponent(outlet, { injector: this.injector });
+                    }
+                }
+                else {
+                    if (this.embeddedViewRef) {
+                        this.embeddedViewRef.context.$implicit = value;
+                    }
+                    else if (this.componentRef) {
+                        this.optionContext.option$.next(value);
+                    }
+                }
+            }
+        });
     }
     ngOnDestroy() {
         this.optionContext.destroy();
@@ -184,51 +187,31 @@ class LuOptionOutletDirective {
         this.embeddedViewRef = undefined;
         this.componentRef = undefined;
     }
-    createComponent() {
-        if (!this.luOptionOutlet) {
-            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.embeddedViewRef) {
-            this.embeddedViewRef.context.$implicit = this.luOptionOutletValue;
-        }
-        else if (this.componentRef) {
-            this.optionContext.option$.next(this.luOptionOutletValue);
-        }
-    }
     static ngTemplateContextGuard(_dir, _ctx) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuOptionOutletDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.15", type: LuOptionOutletDirective, isStandalone: true, selector: "[luOptionOutlet]", inputs: { luOptionOutlet: "luOptionOutlet", luOptionOutletValue: "luOptionOutletValue", luOptionShowNull: "luOptionShowNull" }, providers: [provideOptionContext()], usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuOptionOutletDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: LuOptionOutletDirective, isStandalone: true, selector: "[luOptionOutlet]", inputs: { luOptionOutlet: { classPropertyName: "luOptionOutlet", publicName: "luOptionOutlet", isSignal: true, isRequired: false, transformFunction: null }, luOptionOutletValue: { classPropertyName: "luOptionOutletValue", publicName: "luOptionOutletValue", isSignal: true, isRequired: false, transformFunction: null }, luOptionShowNull: { classPropertyName: "luOptionShowNull", publicName: "luOptionShowNull", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideOptionContext()], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuOptionOutletDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuOptionOutletDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[luOptionOutlet]',
                     providers: [provideOptionContext()],
                 }]
-        }], propDecorators: { luOptionOutlet: [{
-                type: Input
-            }], luOptionOutletValue: [{
-                type: Input
-            }], luOptionShowNull: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { luOptionOutlet: [{ type: i0.Input, args: [{ isSignal: true, alias: "luOptionOutlet", required: false }] }], luOptionOutletValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "luOptionOutletValue", required: false }] }], luOptionShowNull: [{ type: i0.Input, args: [{ isSignal: true, alias: "luOptionShowNull", required: false }] }] } });
 
 const SELECT_PANEL_INSTANCE = new InjectionToken('CoreSelect:PanelInstance');
 
 class CoreSelectPanelElement {
     #panelRef;
     #selectRef;
+    get disabled() {
+        return this.disabledRef();
+    }
+    set disabled(disabled) {
+        this.disabledRef.set(disabled);
+    }
     constructor() {
         this.elementRef = inject(ElementRef);
         this.#panelRef = inject(SELECT_PANEL_INSTANCE);
@@ -238,6 +221,8 @@ class CoreSelectPanelElement {
         this.idAttribute = computed(() => this.id() || this.elementId(), ...(ngDevMode ? [{ debugName: "idAttribute" }] : /* istanbul ignore next */ []));
         this.isSelected = model(false, ...(ngDevMode ? [{ debugName: "isSelected" }] : /* istanbul ignore next */ []));
         this.option = input(...(ngDevMode ? [undefined, { debugName: "option" }] : /* istanbul ignore next */ []));
+        this.disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled' });
+        this.disabledRef = linkedSignal(() => this.disabledInput(), ...(ngDevMode ? [{ debugName: "disabledRef" }] : /* istanbul ignore next */ []));
         this.isHighlighted = signal(false, ...(ngDevMode ? [{ debugName: "isHighlighted" }] : /* istanbul ignore next */ []));
         this.selected = output();
         this.#panelRef.options.set([...this.#panelRef.options(), this]);
@@ -247,15 +232,18 @@ class CoreSelectPanelElement {
     }
     setActiveStyles() {
         this.isHighlighted.set(true);
-        this.#selectRef.highlightedOption.emit(this.option());
+        const option = this.option();
+        if (option !== undefined) {
+            this.#selectRef.highlightedOption.emit(option);
+        }
     }
     setInactiveStyles() {
         this.isHighlighted.set(false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: CoreSelectPanelElement, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.15", type: CoreSelectPanelElement, isStandalone: true, selector: "[luCoreSelectPanelElement]", inputs: { elementId: { classPropertyName: "elementId", publicName: "elementId", isSignal: true, isRequired: false, transformFunction: null }, isSelected: { classPropertyName: "isSelected", publicName: "isSelected", isSignal: true, isRequired: false, transformFunction: null }, option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { isSelected: "isSelectedChange", selected: "selected" }, host: { attributes: { "role": "option" }, properties: { "attr.id": "idAttribute()", "attr.aria-selected": "isSelected()", "class.is-highlighted": "isHighlighted()" } }, exportAs: ["luCoreSelectPanelElement"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CoreSelectPanelElement, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: CoreSelectPanelElement, isStandalone: true, selector: "[luCoreSelectPanelElement]", inputs: { elementId: { classPropertyName: "elementId", publicName: "elementId", isSignal: true, isRequired: false, transformFunction: null }, isSelected: { classPropertyName: "isSelected", publicName: "isSelected", isSignal: true, isRequired: false, transformFunction: null }, option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isSelected: "isSelectedChange", selected: "selected" }, host: { attributes: { "role": "option" }, properties: { "attr.id": "idAttribute()", "attr.aria-selected": "isSelected()", "class.is-highlighted": "isHighlighted()" } }, exportAs: ["luCoreSelectPanelElement"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: CoreSelectPanelElement, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CoreSelectPanelElement, decorators: [{
             type: Directive,
             args: [{
                     selector: '[luCoreSelectPanelElement]',
@@ -267,19 +255,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                         role: 'option',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { elementId: [{ type: i0.Input, args: [{ isSignal: true, alias: "elementId", required: false }] }], isSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSelected", required: false }] }, { type: i0.Output, args: ["isSelectedChange"] }], option: [{ type: i0.Input, args: [{ isSignal: true, alias: "option", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }], disabled: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { elementId: [{ type: i0.Input, args: [{ isSignal: true, alias: "elementId", required: false }] }], isSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSelected", required: false }] }, { type: i0.Output, args: ["isSelectedChange"] }], option: [{ type: i0.Input, args: [{ isSignal: true, alias: "option", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
 
 const SELECT_ID = new InjectionToken('LuSelectPanelData');
 const SELECT_LABEL = new InjectionToken('LuSelectLabel');
 const SELECT_LABEL_ID = new InjectionToken('LuSelectLabelId');
 const CORE_SELECT_API_TOTAL_COUNT_PROVIDER = new InjectionToken('CoreSelectApiTotalCountProvider');
 class ɵIsSelectedStrategy {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ɵIsSelectedStrategy, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ɵIsSelectedStrategy, providedIn: 'root', useFactory: () => new DefaultIsSelectedStrategy() }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ɵIsSelectedStrategy, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ɵIsSelectedStrategy, providedIn: 'root', useFactory: () => new DefaultIsSelectedStrategy() }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ɵIsSelectedStrategy, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ɵIsSelectedStrategy, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -320,121 +306,91 @@ class LuOptionComponent {
     constructor() {
         this.selectableItem = inject(CoreSelectPanelElement);
         this.intl = input(...intlInputOptions(LU_OPTION_TRANSLATIONS), ...(ngDevMode ? [{ debugName: "intl" }] : /* istanbul ignore next */ []));
-        this.hasOptionItemClass = true;
+        this.optionTpl = input(...(ngDevMode ? [undefined, { debugName: "optionTpl" }] : /* istanbul ignore next */ []));
+        this.option = input(...(ngDevMode ? [undefined, { debugName: "option" }] : /* istanbul ignore next */ []));
+        this.grouping = input(...(ngDevMode ? [undefined, { debugName: "grouping" }] : /* istanbul ignore next */ []));
         this.hasChildren = input(false, { ...(ngDevMode ? { debugName: "hasChildren" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.onlyParent = output();
         this.onlyChildren = output();
         this.groupIndex = input(...(ngDevMode ? [undefined, { debugName: "groupIndex" }] : /* istanbul ignore next */ []));
         this.optionIndex = input.required({ ...(ngDevMode ? { debugName: "optionIndex" } : /* istanbul ignore next */ {}), transform: (value) => `${value}` });
-        this.scrollIntoViewOptions = {};
+        this.scrollIntoViewOptions = input({}, ...(ngDevMode ? [{ debugName: "scrollIntoViewOptions" }] : /* istanbul ignore next */ []));
         this.groupTemplateLocation = input(...(ngDevMode ? [undefined, { debugName: "groupTemplateLocation" }] : /* istanbul ignore next */ []));
+        this.optionContext = viewChild(LU_OPTION_CONTEXT, ...(ngDevMode ? [{ debugName: "optionContext" }] : /* istanbul ignore next */ []));
         this.cdr = inject(ChangeDetectorRef);
         this.elementRef = inject(ElementRef);
         this.selectId = inject(SELECT_ID);
-        effect(() => {
-            if (this.selectableItem.isHighlighted()) {
+        _effectWithDeps([this.selectableItem.isHighlighted], (isHighlighted) => {
+            if (isHighlighted) {
                 setTimeout(() => {
-                    this.elementRef.nativeElement.scrollIntoView(this.scrollIntoViewOptions);
+                    this.elementRef.nativeElement.scrollIntoView(this.scrollIntoViewOptions());
                 }, MAGIC_OPTION_SCROLL_DELAY);
             }
         });
+        _effectWithDeps([this.optionContext], (optionContext, onCleanup) => {
+            if (isNil(optionContext)) {
+                return;
+            }
+            const subscription = optionContext.isDisabled$.pipe(observeOn(asyncScheduler)).subscribe((isDisabled) => {
+                this.selectableItem.disabled = isDisabled;
+                this.cdr.markForCheck();
+            });
+            onCleanup(() => subscription.unsubscribe());
+        });
     }
     ngOnInit() {
         this.selectableItem.id.set(this.id);
     }
-    ngOnDestroy() {
-        this.subscription?.unsubscribe();
-    }
-    ngAfterViewInit() {
-        this.subscription = this.optionContext.isDisabled$.pipe(observeOn(asyncScheduler)).subscribe((isDisabled) => {
-            this.selectableItem.disabled = isDisabled;
-            this.cdr.markForCheck();
-        });
-    }
     selectOption($event) {
         if (this.selectableItem.disabled) {
             $event.stopPropagation();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: LuOptionComponent, isStandalone: true, selector: "lu-select-option", inputs: { intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null }, optionTpl: { classPropertyName: "optionTpl", publicName: "optionTpl", isSignal: false, isRequired: false, transformFunction: null }, option: { classPropertyName: "option", publicName: "option", isSignal: false, isRequired: false, transformFunction: null }, grouping: { classPropertyName: "grouping", publicName: "grouping", isSignal: false, isRequired: false, transformFunction: null }, hasChildren: { classPropertyName: "hasChildren", publicName: "hasChildren", isSignal: true, isRequired: false, transformFunction: null }, groupIndex: { classPropertyName: "groupIndex", publicName: "groupIndex", isSignal: true, isRequired: false, transformFunction: null }, optionIndex: { classPropertyName: "optionIndex", publicName: "optionIndex", isSignal: true, isRequired: true, transformFunction: null }, scrollIntoViewOptions: { classPropertyName: "scrollIntoViewOptions", publicName: "scrollIntoViewOptions", isSignal: false, isRequired: false, transformFunction: null }, groupTemplateLocation: { classPropertyName: "groupTemplateLocation", publicName: "groupTemplateLocation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onlyParent: "onlyParent", onlyChildren: "onlyChildren" }, host: { properties: { "class.optionItem": "this.hasOptionItemClass" } }, viewQueries: [{ propertyName: "optionContext", first: true, predicate: LuOptionOutletDirective, descendants: true, read: LU_OPTION_CONTEXT, static: true }], ngImport: i0, template: "<div class=\"optionItem-value\" [class.is-disabled]=\"selectableItem.disabled\" (click)=\"selectOption($event)\">\n\t<ng-container *luOptionOutlet=\"optionTpl; value: selectableItem.option()\" />\n\n\t@if (groupTemplateLocation() === \"option\" && grouping) {\n\t\t<div class=\"optionItem-value-group\">\n\t\t\t<ng-container *luPortal=\"grouping.content; context: { $implicit: selectableItem.option() | luOptionGroup: grouping.selector }\" />\n\t\t</div>\n\t}\n\n\t@if (hasChildren() && !selectableItem.disabled) {\n\t\t<div class=\"optionItem-icons\">\n\t\t\t<span\n\t\t\t\tclass=\"optionItem-icon parentOnly\"\n\t\t\t\t(click)=\"$event.stopPropagation(); onlyParent.emit()\"\n\t\t\t\t[luTooltip]=\"intl().onlyParent\"\n\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t>\n\t\t\t\t<svg class=\"optionItem-icon-shape\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\">\n\t\t\t\t\t<path\n\t\t\t\t\t\topacity=\"0.2\"\n\t\t\t\t\t\td=\"M8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18ZM8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18Z\"\n\t\t\t\t\t/>\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7ZM4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7Z\"\n\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t\t<span class=\"pr-u-mask\">{{ intl().onlyParent }}</span>\n\t\t\t</span>\n\t\t\t<span\n\t\t\t\tclass=\"optionItem-icon childrenOnly\"\n\t\t\t\t(click)=\"$event.stopPropagation(); onlyChildren.emit()\"\n\t\t\t\t[luTooltip]=\"intl().onlyChildren\"\n\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t>\n\t\t\t\t<svg class=\"optionItem-icon-shape\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\">\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18ZM8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18Z\"\n\t\t\t\t\t/>\n\t\t\t\t\t<path\n\t\t\t\t\t\topacity=\"0.2\"\n\t\t\t\t\t\td=\"M4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7ZM4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7Z\"\n\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t\t<span class=\"pr-u-mask\">{{ intl().onlyChildren }}</span>\n\t\t\t</span>\n\t\t</div>\n\t}\n</div>\n", styles: ["@charset \"UTF-8\";@layer base{:root{--components-options-item-padding-vertical: var(--pr-t-spacings-50);--components-options-item-padding-horizontal: var(--pr-t-spacings-100);--components-options-item-multiple-padding: 2.25rem;--components-options-item-icon-color: var(--palettes-neutral-800);--components-options-checkbox-size: 1.25rem;--components-options-checkbox-color: var(--palettes-700, var(--palettes-product-700));--components-options-checkbox-border-radius: var(--pr-t-border-radius-small);--components-options-checkbox-border-color: var(--palettes-neutral-700);--components-options-establishment-multiple-padding: 2rem}}@layer reset,base,components,mods,product,utils;@layer components{:host{--components-options-checkbox-color: var(--palettes-700, var(--palettes-product-700));display:block;scroll-margin:var(--pr-t-spacings-50)}.lu-picker-content-group :host{scroll-margin-block-start:var(--pr-t-spacings-400)}}@layer mods{:host.withAddOption{scroll-margin-block-end:var(--pr-t-spacings-600)}}@layer components{.optionItem{position:relative}}@layer components{.optionItem-value{position:relative;border-radius:var(--pr-t-border-radius-default);display:block;padding-block:var(--components-options-item-padding-vertical);padding-inline:var(--components-options-item-padding-horizontal);transition:background-color 50ms;cursor:pointer;overflow-wrap:anywhere}.optionItem-value ::ng-deep .avatar{margin-inline-end:var(--pr-t-spacings-75)}}@layer mods{.optionItem-value.is-selected,:host-context([aria-selected=true]) .optionItem-value{background-color:var(--palettes-50, var(--palettes-product-50))}.optionItem-value.is-selected:before,:host-context([aria-selected=true]) .optionItem-value:before{content:\"\";position:absolute;inset-block:0;inset-inline-start:calc(var(--pr-t-spacings-50) * -1);inline-size:2px;background-color:var(--palettes-700, var(--palettes-product-700));border-start-end-radius:var(--pr-t-border-radius-default);border-end-end-radius:var(--pr-t-border-radius-default)}.optionItem-value.is-selected:hover,:host-context([aria-selected=true]) .optionItem-value:hover{background-color:var(--palettes-100, var(--palettes-product-100))}.optionItem-value.is-selected:active,:host-context([aria-selected=true]) .optionItem-value:active{background-color:var(--palettes-200, var(--palettes-product-200))}:host-context(.is-highlighted) .optionItem-value.is-selected,:host-context(.is-highlighted) :host-context([aria-selected=true]) .optionItem-value{background-color:var(--palettes-100, var(--palettes-product-100))}:host-context(.is-highlighted) .optionItem-value.is-selected:hover,:host-context(.is-highlighted) :host-context([aria-selected=true]) .optionItem-value:hover{background-color:var(--palettes-200, var(--palettes-product-200))}.optionItem-value:hover{background-color:var(--palettes-neutral-50)}:host-context(.is-highlighted) .optionItem-value{background-color:var(--palettes-neutral-50)}:host-context(.is-highlighted) .optionItem-value:hover{background-color:var(--palettes-neutral-50)}:host-context(.is-highlighted) .optionItem-value:active{background-color:var(--palettes-neutral-100)}.optionItem-value:active{background-color:var(--palettes-neutral-100)}}@layer components{.optionItem-value-group{color:var(--palettes-neutral-600);font:var(--pr-t-font-body-S)}}@layer components{:host-context(.lu-select-value) .optionItem-value{padding:0;overflow:hidden;text-overflow:ellipsis}}@layer mods{:host-context(.lu-select-value) .optionItem-value:hover,:host-context(.is-highlighted) :host-context(.lu-select-value) .optionItem-value{background-color:inherit}}@layer mods{:host-context(.mod-multiple) .optionItem-value,.formerEmployeeDisplayer .optionItem-value{position:relative;padding-inline-start:var(--components-options-item-multiple-padding)}:host-context(.mod-multiple) .optionItem-value:after,:host-context(.mod-multiple) .optionItem-value:before,.formerEmployeeDisplayer .optionItem-value:after,.formerEmployeeDisplayer .optionItem-value:before{display:block;position:absolute;inset-inline-start:var(--pr-t-spacings-100);inset-block-start:var(--pr-t-spacings-75)}:host-context(.mod-multiple) .optionItem-value:before,.formerEmployeeDisplayer .optionItem-value:before{content:\"\";background-color:var(--palettes-neutral-0);border-radius:var(--components-options-checkbox-border-radius);box-shadow:inset 0 0 0 2px var(--components-options-checkbox-border-color);display:block;block-size:var(--components-options-checkbox-size);transition-property:background-color,box-shadow;transition-duration:var(--commons-animations-durations-fast);inline-size:var(--components-options-checkbox-size)}:host-context(.mod-multiple) .optionItem-value:after,.formerEmployeeDisplayer .optionItem-value:after{--icon-content: \"\\e97d\";font-weight:var(--pr-t-font-fontWeight-regular);display:inline-block;vertical-align:text-bottom;font-style:normal;font-family:var(--icon-fontFamily);content:var(--icon-content)/\"\";-webkit-font-smoothing:antialiased;text-transform:none;color:transparent;font-size:var(--pr-t-font-body-S-lineHeight);line-height:var(--components-options-checkbox-size);position:absolute;text-align:center;transform:scale(0);transition:all .1s;inline-size:var(--components-options-checkbox-size)}:host-context(.mod-multiple) .optionItem-value.is-selected:before,:host-context([aria-selected=true]) :host-context(.mod-multiple) .optionItem-value:before,.formerEmployeeDisplayer .optionItem-value.is-selected:before,:host-context([aria-selected=true]) .formerEmployeeDisplayer .optionItem-value: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,:host-context([aria-selected=true]) :host-context(.mod-multiple) .optionItem-value:after,.formerEmployeeDisplayer .optionItem-value.is-selected:after,:host-context([aria-selected=true]) .formerEmployeeDisplayer .optionItem-value:after{color:var(--palettes-neutral-0);transform:scale(1)}:host-context(.mod-multiple) .optionItem-value.is-selected.is-disabled,:host-context([aria-selected=true]) :host-context(.mod-multiple) .optionItem-value.is-disabled,.formerEmployeeDisplayer .optionItem-value.is-selected.is-disabled,:host-context([aria-selected=true]) .formerEmployeeDisplayer .optionItem-value.is-disabled{--components-options-checkbox-color: var(--commons-disabled-background);background-color:transparent}:host-context(.mod-multiple) .optionItem-value.is-selected.is-disabled:after,:host-context([aria-selected=true]) :host-context(.mod-multiple) .optionItem-value.is-disabled:after,.formerEmployeeDisplayer .optionItem-value.is-selected.is-disabled:after,:host-context([aria-selected=true]) .formerEmployeeDisplayer .optionItem-value.is-disabled:after{color:var(--palettes-neutral-500)}:host-context(.mod-multiple) .optionItem-value.is-disabled,.formerEmployeeDisplayer .optionItem-value.is-disabled{--components-options-checkbox-border-color: var(--palettes-neutral-500)}:host-context(.mod-multiple) .optionItem-value:not(.is-disabled):hover:before,.formerEmployeeDisplayer .optionItem-value:not(.is-disabled):hover:before{box-shadow:inset 0 0 0 2px var(--components-options-checkbox-color)}}@layer components{:host-context(.mod-multiple).establishmentOption .optionItem-value,.formerEmployeeDisplayer.establishmentOption .optionItem-value{position:relative;padding-inline-start:calc(var(--components-options-checkbox-size) + var(--pr-t-spacings-100) * 2)}:host-context(.mod-multiple).establishmentOption .optionItem-value:before,:host-context(.mod-multiple).establishmentOption .optionItem-value:after,.formerEmployeeDisplayer.establishmentOption .optionItem-value:before,.formerEmployeeDisplayer.establishmentOption .optionItem-value:after{inset-inline-start:var(--pr-t-spacings-100)}}@layer mods{.is-disabled{color:var(--palettes-neutral-500);-webkit-user-select:none;user-select:none;cursor:default}.is-disabled.is-selected{background-color:var(--commons-disabled-background)}.is-disabled:hover{background-color:inherit}.optionItem-value:has(.optionItem-icon){display:flex;justify-content:space-between}}@layer components{.optionItem-icons{display:flex;gap:var(--pr-t-spacings-50)}.optionItem-icon-shape{display:block;fill:var(--palettes-neutral-500)}.optionItem-icon-shape:hover{fill:var(--palettes-neutral-800)}}\n"], dependencies: [{ kind: "directive", type: LuOptionOutletDirective, selector: "[luOptionOutlet]", inputs: ["luOptionOutlet", "luOptionOutletValue", "luOptionShowNull"] }, { kind: "directive", type: PortalDirective, selector: "[luPortal]", inputs: ["luPortal", "luPortalContext"] }, { kind: "directive", type: LuTooltipTriggerDirective, selector: "[luTooltip]", inputs: ["luTooltip", "luTooltipEnterDelay", "luTooltipLeaveDelay", "luTooltipDisabled", "luTooltipOnlyForDisplay", "luTooltipPosition", "luTooltipWhenEllipsis", "luTooltipAnchor", "id"], exportAs: ["luTooltip"] }, { kind: "pipe", type: LuOptionGroupPipe, name: "luOptionGroup" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: LuOptionComponent, isStandalone: true, selector: "lu-select-option", inputs: { intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null }, optionTpl: { classPropertyName: "optionTpl", publicName: "optionTpl", isSignal: true, isRequired: false, transformFunction: null }, option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: false, transformFunction: null }, grouping: { classPropertyName: "grouping", publicName: "grouping", isSignal: true, isRequired: false, transformFunction: null }, hasChildren: { classPropertyName: "hasChildren", publicName: "hasChildren", isSignal: true, isRequired: false, transformFunction: null }, groupIndex: { classPropertyName: "groupIndex", publicName: "groupIndex", isSignal: true, isRequired: false, transformFunction: null }, optionIndex: { classPropertyName: "optionIndex", publicName: "optionIndex", isSignal: true, isRequired: true, transformFunction: null }, scrollIntoViewOptions: { classPropertyName: "scrollIntoViewOptions", publicName: "scrollIntoViewOptions", isSignal: true, isRequired: false, transformFunction: null }, groupTemplateLocation: { classPropertyName: "groupTemplateLocation", publicName: "groupTemplateLocation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onlyParent: "onlyParent", onlyChildren: "onlyChildren" }, host: { classAttribute: "optionItem" }, viewQueries: [{ propertyName: "optionContext", first: true, predicate: LU_OPTION_CONTEXT, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"optionItem-value\" [class.is-disabled]=\"selectableItem.disabled\" (click)=\"selectOption($event)\">\n\t<ng-container *luOptionOutlet=\"optionTpl(); value: selectableItem.option()\" />\n\n\t@if (groupTemplateLocation() === \"option\") {\n\t\t@if (grouping(); as grouping) {\n\t\t\t<div class=\"optionItem-value-group\">\n\t\t\t\t<ng-container *luPortal=\"grouping.content; context: { $implicit: selectableItem.option() | luOptionGroup: grouping.selector }\" />\n\t\t\t</div>\n\t\t}\n\t}\n\n\t@if (hasChildren() && !selectableItem.disabled) {\n\t\t<div class=\"optionItem-icons\">\n\t\t\t<span\n\t\t\t\tclass=\"optionItem-icon parentOnly\"\n\t\t\t\t(click)=\"$event.stopPropagation(); onlyParent.emit()\"\n\t\t\t\t[luTooltip]=\"intl().onlyParent\"\n\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t>\n\t\t\t\t<svg class=\"optionItem-icon-shape\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\">\n\t\t\t\t\t<path\n\t\t\t\t\t\topacity=\"0.2\"\n\t\t\t\t\t\td=\"M8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18ZM8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18Z\"\n\t\t\t\t\t/>\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7ZM4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7Z\"\n\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t\t<span class=\"pr-u-mask\">{{ intl().onlyParent }}</span>\n\t\t\t</span>\n\t\t\t<span\n\t\t\t\tclass=\"optionItem-icon childrenOnly\"\n\t\t\t\t(click)=\"$event.stopPropagation(); onlyChildren.emit()\"\n\t\t\t\t[luTooltip]=\"intl().onlyChildren\"\n\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t>\n\t\t\t\t<svg class=\"optionItem-icon-shape\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\">\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18ZM8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18Z\"\n\t\t\t\t\t/>\n\t\t\t\t\t<path\n\t\t\t\t\t\topacity=\"0.2\"\n\t\t\t\t\t\td=\"M4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7ZM4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7Z\"\n\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t\t<span class=\"pr-u-mask\">{{ intl().onlyChildren }}</span>\n\t\t\t</span>\n\t\t</div>\n\t}\n</div>\n", styles: ["@charset \"UTF-8\";@layer base{:root{--components-options-item-padding-vertical: var(--pr-t-spacings-50);--components-options-item-padding-horizontal: var(--pr-t-spacings-100);--components-options-item-multiple-padding: 2.25rem;--components-options-item-icon-color: var(--palettes-neutral-800);--components-options-checkbox-size: 1.25rem;--components-options-checkbox-color: var(--palettes-700, var(--palettes-product-700));--components-options-checkbox-border-radius: var(--pr-t-border-radius-small);--components-options-checkbox-border-color: var(--palettes-neutral-700);--components-options-establishment-multiple-padding: 2rem}}@layer reset,base,components,mods,product,utils;@layer components{:host{--components-options-checkbox-color: var(--palettes-700, var(--palettes-product-700));display:block;scroll-margin:var(--pr-t-spacings-50)}.lu-picker-content-group :host{scroll-margin-block-start:var(--pr-t-spacings-400)}}@layer mods{:host.withAddOption{scroll-margin-block-end:var(--pr-t-spacings-600)}}@layer components{.optionItem{position:relative}}@layer components{.optionItem-value{position:relative;border-radius:var(--pr-t-border-radius-default);display:block;padding-block:var(--components-options-item-padding-vertical);padding-inline:var(--components-options-item-padding-horizontal);transition:background-color 50ms;cursor:pointer;overflow-wrap:anywhere}.optionItem-value ::ng-deep .avatar{margin-inline-end:var(--pr-t-spacings-75)}}@layer mods{.optionItem-value.is-selected,:host-context([aria-selected=true]) .optionItem-value{background-color:var(--palettes-50, var(--palettes-product-50))}.optionItem-value.is-selected:before,:host-context([aria-selected=true]) .optionItem-value:before{content:\"\";position:absolute;inset-block:0;inset-inline-start:calc(var(--pr-t-spacings-50) * -1);inline-size:2px;background-color:var(--palettes-700, var(--palettes-product-700));border-start-end-radius:var(--pr-t-border-radius-default);border-end-end-radius:var(--pr-t-border-radius-default)}.optionItem-value.is-selected:hover,:host-context([aria-selected=true]) .optionItem-value:hover{background-color:var(--palettes-100, var(--palettes-product-100))}.optionItem-value.is-selected:active,:host-context([aria-selected=true]) .optionItem-value:active{background-color:var(--palettes-200, var(--palettes-product-200))}:host-context(.is-highlighted) .optionItem-value.is-selected,:host-context(.is-highlighted) :host-context([aria-selected=true]) .optionItem-value{background-color:var(--palettes-100, var(--palettes-product-100))}:host-context(.is-highlighted) .optionItem-value.is-selected:hover,:host-context(.is-highlighted) :host-context([aria-selected=true]) .optionItem-value:hover{background-color:var(--palettes-200, var(--palettes-product-200))}.optionItem-value:hover{background-color:var(--palettes-neutral-50)}:host-context(.is-highlighted) .optionItem-value{background-color:var(--palettes-neutral-50)}:host-context(.is-highlighted) .optionItem-value:hover{background-color:var(--palettes-neutral-50)}:host-context(.is-highlighted) .optionItem-value:active{background-color:var(--palettes-neutral-100)}.optionItem-value:active{background-color:var(--palettes-neutral-100)}}@layer components{.optionItem-value-group{color:var(--palettes-neutral-600);font:var(--pr-t-font-body-S)}}@layer components{:host-context(.lu-select-value) .optionItem-value{padding:0;overflow:hidden;text-overflow:ellipsis}}@layer mods{:host-context(.lu-select-value) .optionItem-value:hover,:host-context(.is-highlighted) :host-context(.lu-select-value) .optionItem-value{background-color:inherit}}@layer mods{:host-context(.mod-multiple) .optionItem-value,.formerEmployeeDisplayer .optionItem-value{position:relative;padding-inline-start:var(--components-options-item-multiple-padding)}:host-context(.mod-multiple) .optionItem-value:after,:host-context(.mod-multiple) .optionItem-value:before,.formerEmployeeDisplayer .optionItem-value:after,.formerEmployeeDisplayer .optionItem-value:before{display:block;position:absolute;inset-inline-start:var(--pr-t-spacings-100);inset-block-start:var(--pr-t-spacings-75)}:host-context(.mod-multiple) .optionItem-value:before,.formerEmployeeDisplayer .optionItem-value:before{content:\"\";background-color:var(--palettes-neutral-0);border-radius:var(--components-options-checkbox-border-radius);box-shadow:inset 0 0 0 2px var(--components-options-checkbox-border-color);display:block;block-size:var(--components-options-checkbox-size);transition-property:background-color,box-shadow;transition-duration:var(--commons-animations-durations-fast);inline-size:var(--components-options-checkbox-size)}:host-context(.mod-multiple) .optionItem-value:after,.formerEmployeeDisplayer .optionItem-value:after{--icon-content: \"\\e97d\";font-weight:var(--pr-t-font-fontWeight-regular);display:inline-block;vertical-align:text-bottom;font-style:normal;font-family:var(--icon-fontFamily);content:var(--icon-content)/\"\";-webkit-font-smoothing:antialiased;text-transform:none;color:transparent;font-size:var(--pr-t-font-body-S-lineHeight);line-height:var(--components-options-checkbox-size);position:absolute;text-align:center;transform:scale(0);transition:all .1s;inline-size:var(--components-options-checkbox-size)}:host-context(.mod-multiple) .optionItem-value.is-selected:before,:host-context([aria-selected=true]) :host-context(.mod-multiple) .optionItem-value:before,.formerEmployeeDisplayer .optionItem-value.is-selected:before,:host-context([aria-selected=true]) .formerEmployeeDisplayer .optionItem-value: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,:host-context([aria-selected=true]) :host-context(.mod-multiple) .optionItem-value:after,.formerEmployeeDisplayer .optionItem-value.is-selected:after,:host-context([aria-selected=true]) .formerEmployeeDisplayer .optionItem-value:after{color:var(--palettes-neutral-0);transform:scale(1)}:host-context(.mod-multiple) .optionItem-value.is-selected.is-disabled,:host-context([aria-selected=true]) :host-context(.mod-multiple) .optionItem-value.is-disabled,.formerEmployeeDisplayer .optionItem-value.is-selected.is-disabled,:host-context([aria-selected=true]) .formerEmployeeDisplayer .optionItem-value.is-disabled{--components-options-checkbox-color: var(--commons-disabled-background);background-color:transparent}:host-context(.mod-multiple) .optionItem-value.is-selected.is-disabled:after,:host-context([aria-selected=true]) :host-context(.mod-multiple) .optionItem-value.is-disabled:after,.formerEmployeeDisplayer .optionItem-value.is-selected.is-disabled:after,:host-context([aria-selected=true]) .formerEmployeeDisplayer .optionItem-value.is-disabled:after{color:var(--palettes-neutral-500)}:host-context(.mod-multiple) .optionItem-value.is-disabled,.formerEmployeeDisplayer .optionItem-value.is-disabled{--components-options-checkbox-border-color: var(--palettes-neutral-500)}:host-context(.mod-multiple) .optionItem-value:not(.is-disabled):hover:before,.formerEmployeeDisplayer .optionItem-value:not(.is-disabled):hover:before{box-shadow:inset 0 0 0 2px var(--components-options-checkbox-color)}}@layer components{:host-context(.mod-multiple).establishmentOption .optionItem-value,.formerEmployeeDisplayer.establishmentOption .optionItem-value{position:relative;padding-inline-start:calc(var(--components-options-checkbox-size) + var(--pr-t-spacings-100) * 2)}:host-context(.mod-multiple).establishmentOption .optionItem-value:before,:host-context(.mod-multiple).establishmentOption .optionItem-value:after,.formerEmployeeDisplayer.establishmentOption .optionItem-value:before,.formerEmployeeDisplayer.establishmentOption .optionItem-value:after{inset-inline-start:var(--pr-t-spacings-100)}}@layer mods{.is-disabled{color:var(--palettes-neutral-500);-webkit-user-select:none;user-select:none;cursor:default}.is-disabled.is-selected{background-color:var(--commons-disabled-background)}.is-disabled:hover{background-color:inherit}.optionItem-value:has(.optionItem-icon){display:flex;justify-content:space-between}}@layer components{.optionItem-icons{display:flex;gap:var(--pr-t-spacings-50)}.optionItem-icon-shape{display:block;fill:var(--palettes-neutral-500)}.optionItem-icon-shape:hover{fill:var(--palettes-neutral-800)}}\n"], dependencies: [{ kind: "directive", type: LuOptionOutletDirective, selector: "[luOptionOutlet]", inputs: ["luOptionOutlet", "luOptionOutletValue", "luOptionShowNull"] }, { kind: "directive", type: PortalDirective, selector: "[luPortal]", inputs: ["luPortal", "luPortalContext"] }, { kind: "directive", type: LuTooltipTriggerDirective, selector: "[luTooltip]", inputs: ["luTooltip", "luTooltipEnterDelay", "luTooltipLeaveDelay", "luTooltipDisabled", "luTooltipOnlyForDisplay", "luTooltipPosition", "luTooltipWhenEllipsis", "luTooltipAnchor", "id"], exportAs: ["luTooltip"] }, { kind: "pipe", type: LuOptionGroupPipe, name: "luOptionGroup" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuOptionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuOptionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lu-select-option', changeDetection: ChangeDetectionStrategy.OnPush, imports: [LuOptionOutletDirective, PortalDirective, LuOptionGroupPipe, LuTooltipTriggerDirective], template: "<div class=\"optionItem-value\" [class.is-disabled]=\"selectableItem.disabled\" (click)=\"selectOption($event)\">\n\t<ng-container *luOptionOutlet=\"optionTpl; value: selectableItem.option()\" />\n\n\t@if (groupTemplateLocation() === \"option\" && grouping) {\n\t\t<div class=\"optionItem-value-group\">\n\t\t\t<ng-container *luPortal=\"grouping.content; context: { $implicit: selectableItem.option() | luOptionGroup: grouping.selector }\" />\n\t\t</div>\n\t}\n\n\t@if (hasChildren() && !selectableItem.disabled) {\n\t\t<div class=\"optionItem-icons\">\n\t\t\t<span\n\t\t\t\tclass=\"optionItem-icon parentOnly\"\n\t\t\t\t(click)=\"$event.stopPropagation(); onlyParent.emit()\"\n\t\t\t\t[luTooltip]=\"intl().onlyParent\"\n\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t>\n\t\t\t\t<svg class=\"optionItem-icon-shape\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\">\n\t\t\t\t\t<path\n\t\t\t\t\t\topacity=\"0.2\"\n\t\t\t\t\t\td=\"M8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18ZM8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18Z\"\n\t\t\t\t\t/>\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7ZM4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7Z\"\n\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t\t<span class=\"pr-u-mask\">{{ intl().onlyParent }}</span>\n\t\t\t</span>\n\t\t\t<span\n\t\t\t\tclass=\"optionItem-icon childrenOnly\"\n\t\t\t\t(click)=\"$event.stopPropagation(); onlyChildren.emit()\"\n\t\t\t\t[luTooltip]=\"intl().onlyChildren\"\n\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t>\n\t\t\t\t<svg class=\"optionItem-icon-shape\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\">\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18ZM8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18Z\"\n\t\t\t\t\t/>\n\t\t\t\t\t<path\n\t\t\t\t\t\topacity=\"0.2\"\n\t\t\t\t\t\td=\"M4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7ZM4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7Z\"\n\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t\t<span class=\"pr-u-mask\">{{ intl().onlyChildren }}</span>\n\t\t\t</span>\n\t\t</div>\n\t}\n</div>\n", styles: ["@charset \"UTF-8\";@layer base{:root{--components-options-item-padding-vertical: var(--pr-t-spacings-50);--components-options-item-padding-horizontal: var(--pr-t-spacings-100);--components-options-item-multiple-padding: 2.25rem;--components-options-item-icon-color: var(--palettes-neutral-800);--components-options-checkbox-size: 1.25rem;--components-options-checkbox-color: var(--palettes-700, var(--palettes-product-700));--components-options-checkbox-border-radius: var(--pr-t-border-radius-small);--components-options-checkbox-border-color: var(--palettes-neutral-700);--components-options-establishment-multiple-padding: 2rem}}@layer reset,base,components,mods,product,utils;@layer components{:host{--components-options-checkbox-color: var(--palettes-700, var(--palettes-product-700));display:block;scroll-margin:var(--pr-t-spacings-50)}.lu-picker-content-group :host{scroll-margin-block-start:var(--pr-t-spacings-400)}}@layer mods{:host.withAddOption{scroll-margin-block-end:var(--pr-t-spacings-600)}}@layer components{.optionItem{position:relative}}@layer components{.optionItem-value{position:relative;border-radius:var(--pr-t-border-radius-default);display:block;padding-block:var(--components-options-item-padding-vertical);padding-inline:var(--components-options-item-padding-horizontal);transition:background-color 50ms;cursor:pointer;overflow-wrap:anywhere}.optionItem-value ::ng-deep .avatar{margin-inline-end:var(--pr-t-spacings-75)}}@layer mods{.optionItem-value.is-selected,:host-context([aria-selected=true]) .optionItem-value{background-color:var(--palettes-50, var(--palettes-product-50))}.optionItem-value.is-selected:before,:host-context([aria-selected=true]) .optionItem-value:before{content:\"\";position:absolute;inset-block:0;inset-inline-start:calc(var(--pr-t-spacings-50) * -1);inline-size:2px;background-color:var(--palettes-700, var(--palettes-product-700));border-start-end-radius:var(--pr-t-border-radius-default);border-end-end-radius:var(--pr-t-border-radius-default)}.optionItem-value.is-selected:hover,:host-context([aria-selected=true]) .optionItem-value:hover{background-color:var(--palettes-100, var(--palettes-product-100))}.optionItem-value.is-selected:active,:host-context([aria-selected=true]) .optionItem-value:active{background-color:var(--palettes-200, var(--palettes-product-200))}:host-context(.is-highlighted) .optionItem-value.is-selected,:host-context(.is-highlighted) :host-context([aria-selected=true]) .optionItem-value{background-color:var(--palettes-100, var(--palettes-product-100))}:host-context(.is-highlighted) .optionItem-value.is-selected:hover,:host-context(.is-highlighted) :host-context([aria-selected=true]) .optionItem-value:hover{background-color:var(--palettes-200, var(--palettes-product-200))}.optionItem-value:hover{background-color:var(--palettes-neutral-50)}:host-context(.is-highlighted) .optionItem-value{background-color:var(--palettes-neutral-50)}:host-context(.is-highlighted) .optionItem-value:hover{background-color:var(--palettes-neutral-50)}:host-context(.is-highlighted) .optionItem-value:active{background-color:var(--palettes-neutral-100)}.optionItem-value:active{background-color:var(--palettes-neutral-100)}}@layer components{.optionItem-value-group{color:var(--palettes-neutral-600);font:var(--pr-t-font-body-S)}}@layer components{:host-context(.lu-select-value) .optionItem-value{padding:0;overflow:hidden;text-overflow:ellipsis}}@layer mods{:host-context(.lu-select-value) .optionItem-value:hover,:host-context(.is-highlighted) :host-context(.lu-select-value) .optionItem-value{background-color:inherit}}@layer mods{:host-context(.mod-multiple) .optionItem-value,.formerEmployeeDisplayer .optionItem-value{position:relative;padding-inline-start:var(--components-options-item-multiple-padding)}:host-context(.mod-multiple) .optionItem-value:after,:host-context(.mod-multiple) .optionItem-value:before,.formerEmployeeDisplayer .optionItem-value:after,.formerEmployeeDisplayer .optionItem-value:before{display:block;position:absolute;inset-inline-start:var(--pr-t-spacings-100);inset-block-start:var(--pr-t-spacings-75)}:host-context(.mod-multiple) .optionItem-value:before,.formerEmployeeDisplayer .optionItem-value:before{content:\"\";background-color:var(--palettes-neutral-0);border-radius:var(--components-options-checkbox-border-radius);box-shadow:inset 0 0 0 2px var(--components-options-checkbox-border-color);display:block;block-size:var(--components-options-checkbox-size);transition-property:background-color,box-shadow;transition-duration:var(--commons-animations-durations-fast);inline-size:var(--components-options-checkbox-size)}:host-context(.mod-multiple) .optionItem-value:after,.formerEmployeeDisplayer .optionItem-value:after{--icon-content: \"\\e97d\";font-weight:var(--pr-t-font-fontWeight-regular);display:inline-block;vertical-align:text-bottom;font-style:normal;font-family:var(--icon-fontFamily);content:var(--icon-content)/\"\";-webkit-font-smoothing:antialiased;text-transform:none;color:transparent;font-size:var(--pr-t-font-body-S-lineHeight);line-height:var(--components-options-checkbox-size);position:absolute;text-align:center;transform:scale(0);transition:all .1s;inline-size:var(--components-options-checkbox-size)}:host-context(.mod-multiple) .optionItem-value.is-selected:before,:host-context([aria-selected=true]) :host-context(.mod-multiple) .optionItem-value:before,.formerEmployeeDisplayer .optionItem-value.is-selected:before,:host-context([aria-selected=true]) .formerEmployeeDisplayer .optionItem-value: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,:host-context([aria-selected=true]) :host-context(.mod-multiple) .optionItem-value:after,.formerEmployeeDisplayer .optionItem-value.is-selected:after,:host-context([aria-selected=true]) .formerEmployeeDisplayer .optionItem-value:after{color:var(--palettes-neutral-0);transform:scale(1)}:host-context(.mod-multiple) .optionItem-value.is-selected.is-disabled,:host-context([aria-selected=true]) :host-context(.mod-multiple) .optionItem-value.is-disabled,.formerEmployeeDisplayer .optionItem-value.is-selected.is-disabled,:host-context([aria-selected=true]) .formerEmployeeDisplayer .optionItem-value.is-disabled{--components-options-checkbox-color: var(--commons-disabled-background);background-color:transparent}:host-context(.mod-multiple) .optionItem-value.is-selected.is-disabled:after,:host-context([aria-selected=true]) :host-context(.mod-multiple) .optionItem-value.is-disabled:after,.formerEmployeeDisplayer .optionItem-value.is-selected.is-disabled:after,:host-context([aria-selected=true]) .formerEmployeeDisplayer .optionItem-value.is-disabled:after{color:var(--palettes-neutral-500)}:host-context(.mod-multiple) .optionItem-value.is-disabled,.formerEmployeeDisplayer .optionItem-value.is-disabled{--components-options-checkbox-border-color: var(--palettes-neutral-500)}:host-context(.mod-multiple) .optionItem-value:not(.is-disabled):hover:before,.formerEmployeeDisplayer .optionItem-value:not(.is-disabled):hover:before{box-shadow:inset 0 0 0 2px var(--components-options-checkbox-color)}}@layer components{:host-context(.mod-multiple).establishmentOption .optionItem-value,.formerEmployeeDisplayer.establishmentOption .optionItem-value{position:relative;padding-inline-start:calc(var(--components-options-checkbox-size) + var(--pr-t-spacings-100) * 2)}:host-context(.mod-multiple).establishmentOption .optionItem-value:before,:host-context(.mod-multiple).establishmentOption .optionItem-value:after,.formerEmployeeDisplayer.establishmentOption .optionItem-value:before,.formerEmployeeDisplayer.establishmentOption .optionItem-value:after{inset-inline-start:var(--pr-t-spacings-100)}}@layer mods{.is-disabled{color:var(--palettes-neutral-500);-webkit-user-select:none;user-select:none;cursor:default}.is-disabled.is-selected{background-color:var(--commons-disabled-background)}.is-disabled:hover{background-color:inherit}.optionItem-value:has(.optionItem-icon){display:flex;justify-content:space-between}}@layer components{.optionItem-icons{display:flex;gap:var(--pr-t-spacings-50)}.optionItem-icon-shape{display:block;fill:var(--palettes-neutral-500)}.optionItem-icon-shape:hover{fill:var(--palettes-neutral-800)}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { intl: [{ type: i0.Input, args: [{ isSignal: true, alias: "intl", required: false }] }], hasOptionItemClass: [{
-                type: HostBinding,
-                args: ['class.optionItem']
-            }], optionTpl: [{
-                type: Input
-            }], option: [{
-                type: Input
-            }], grouping: [{
-                type: Input
-            }], hasChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasChildren", required: false }] }], onlyParent: [{ type: i0.Output, args: ["onlyParent"] }], onlyChildren: [{ type: i0.Output, args: ["onlyChildren"] }], groupIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupIndex", required: false }] }], optionIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionIndex", required: true }] }], scrollIntoViewOptions: [{
-                type: Input
-            }], groupTemplateLocation: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupTemplateLocation", required: false }] }], optionContext: [{
-                type: ViewChild,
-                args: [LuOptionOutletDirective, { read: LU_OPTION_CONTEXT, static: true }]
-            }] } });
+            args: [{ selector: 'lu-select-option', host: {
+                        class: 'optionItem',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [LuOptionOutletDirective, PortalDirective, LuOptionGroupPipe, LuTooltipTriggerDirective], template: "<div class=\"optionItem-value\" [class.is-disabled]=\"selectableItem.disabled\" (click)=\"selectOption($event)\">\n\t<ng-container *luOptionOutlet=\"optionTpl(); value: selectableItem.option()\" />\n\n\t@if (groupTemplateLocation() === \"option\") {\n\t\t@if (grouping(); as grouping) {\n\t\t\t<div class=\"optionItem-value-group\">\n\t\t\t\t<ng-container *luPortal=\"grouping.content; context: { $implicit: selectableItem.option() | luOptionGroup: grouping.selector }\" />\n\t\t\t</div>\n\t\t}\n\t}\n\n\t@if (hasChildren() && !selectableItem.disabled) {\n\t\t<div class=\"optionItem-icons\">\n\t\t\t<span\n\t\t\t\tclass=\"optionItem-icon parentOnly\"\n\t\t\t\t(click)=\"$event.stopPropagation(); onlyParent.emit()\"\n\t\t\t\t[luTooltip]=\"intl().onlyParent\"\n\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t>\n\t\t\t\t<svg class=\"optionItem-icon-shape\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\">\n\t\t\t\t\t<path\n\t\t\t\t\t\topacity=\"0.2\"\n\t\t\t\t\t\td=\"M8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18ZM8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18Z\"\n\t\t\t\t\t/>\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7ZM4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7Z\"\n\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t\t<span class=\"pr-u-mask\">{{ intl().onlyParent }}</span>\n\t\t\t</span>\n\t\t\t<span\n\t\t\t\tclass=\"optionItem-icon childrenOnly\"\n\t\t\t\t(click)=\"$event.stopPropagation(); onlyChildren.emit()\"\n\t\t\t\t[luTooltip]=\"intl().onlyChildren\"\n\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t>\n\t\t\t\t<svg class=\"optionItem-icon-shape\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\">\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18ZM8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18Z\"\n\t\t\t\t\t/>\n\t\t\t\t\t<path\n\t\t\t\t\t\topacity=\"0.2\"\n\t\t\t\t\t\td=\"M4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7ZM4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7Z\"\n\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t\t<span class=\"pr-u-mask\">{{ intl().onlyChildren }}</span>\n\t\t\t</span>\n\t\t</div>\n\t}\n</div>\n", styles: ["@charset \"UTF-8\";@layer base{:root{--components-options-item-padding-vertical: var(--pr-t-spacings-50);--components-options-item-padding-horizontal: var(--pr-t-spacings-100);--components-options-item-multiple-padding: 2.25rem;--components-options-item-icon-color: var(--palettes-neutral-800);--components-options-checkbox-size: 1.25rem;--components-options-checkbox-color: var(--palettes-700, var(--palettes-product-700));--components-options-checkbox-border-radius: var(--pr-t-border-radius-small);--components-options-checkbox-border-color: var(--palettes-neutral-700);--components-options-establishment-multiple-padding: 2rem}}@layer reset,base,components,mods,product,utils;@layer components{:host{--components-options-checkbox-color: var(--palettes-700, var(--palettes-product-700));display:block;scroll-margin:var(--pr-t-spacings-50)}.lu-picker-content-group :host{scroll-margin-block-start:var(--pr-t-spacings-400)}}@layer mods{:host.withAddOption{scroll-margin-block-end:var(--pr-t-spacings-600)}}@layer components{.optionItem{position:relative}}@layer components{.optionItem-value{position:relative;border-radius:var(--pr-t-border-radius-default);display:block;padding-block:var(--components-options-item-padding-vertical);padding-inline:var(--components-options-item-padding-horizontal);transition:background-color 50ms;cursor:pointer;overflow-wrap:anywhere}.optionItem-value ::ng-deep .avatar{margin-inline-end:var(--pr-t-spacings-75)}}@layer mods{.optionItem-value.is-selected,:host-context([aria-selected=true]) .optionItem-value{background-color:var(--palettes-50, var(--palettes-product-50))}.optionItem-value.is-selected:before,:host-context([aria-selected=true]) .optionItem-value:before{content:\"\";position:absolute;inset-block:0;inset-inline-start:calc(var(--pr-t-spacings-50) * -1);inline-size:2px;background-color:var(--palettes-700, var(--palettes-product-700));border-start-end-radius:var(--pr-t-border-radius-default);border-end-end-radius:var(--pr-t-border-radius-default)}.optionItem-value.is-selected:hover,:host-context([aria-selected=true]) .optionItem-value:hover{background-color:var(--palettes-100, var(--palettes-product-100))}.optionItem-value.is-selected:active,:host-context([aria-selected=true]) .optionItem-value:active{background-color:var(--palettes-200, var(--palettes-product-200))}:host-context(.is-highlighted) .optionItem-value.is-selected,:host-context(.is-highlighted) :host-context([aria-selected=true]) .optionItem-value{background-color:var(--palettes-100, var(--palettes-product-100))}:host-context(.is-highlighted) .optionItem-value.is-selected:hover,:host-context(.is-highlighted) :host-context([aria-selected=true]) .optionItem-value:hover{background-color:var(--palettes-200, var(--palettes-product-200))}.optionItem-value:hover{background-color:var(--palettes-neutral-50)}:host-context(.is-highlighted) .optionItem-value{background-color:var(--palettes-neutral-50)}:host-context(.is-highlighted) .optionItem-value:hover{background-color:var(--palettes-neutral-50)}:host-context(.is-highlighted) .optionItem-value:active{background-color:var(--palettes-neutral-100)}.optionItem-value:active{background-color:var(--palettes-neutral-100)}}@layer components{.optionItem-value-group{color:var(--palettes-neutral-600);font:var(--pr-t-font-body-S)}}@layer components{:host-context(.lu-select-value) .optionItem-value{padding:0;overflow:hidden;text-overflow:ellipsis}}@layer mods{:host-context(.lu-select-value) .optionItem-value:hover,:host-context(.is-highlighted) :host-context(.lu-select-value) .optionItem-value{background-color:inherit}}@layer mods{:host-context(.mod-multiple) .optionItem-value,.formerEmployeeDisplayer .optionItem-value{position:relative;padding-inline-start:var(--components-options-item-multiple-padding)}:host-context(.mod-multiple) .optionItem-value:after,:host-context(.mod-multiple) .optionItem-value:before,.formerEmployeeDisplayer .optionItem-value:after,.formerEmployeeDisplayer .optionItem-value:before{display:block;position:absolute;inset-inline-start:var(--pr-t-spacings-100);inset-block-start:var(--pr-t-spacings-75)}:host-context(.mod-multiple) .optionItem-value:before,.formerEmployeeDisplayer .optionItem-value:before{content:\"\";background-color:var(--palettes-neutral-0);border-radius:var(--components-options-checkbox-border-radius);box-shadow:inset 0 0 0 2px var(--components-options-checkbox-border-color);display:block;block-size:var(--components-options-checkbox-size);transition-property:background-color,box-shadow;transition-duration:var(--commons-animations-durations-fast);inline-size:var(--components-options-checkbox-size)}:host-context(.mod-multiple) .optionItem-value:after,.formerEmployeeDisplayer .optionItem-value:after{--icon-content: \"\\e97d\";font-weight:var(--pr-t-font-fontWeight-regular);display:inline-block;vertical-align:text-bottom;font-style:normal;font-family:var(--icon-fontFamily);content:var(--icon-content)/\"\";-webkit-font-smoothing:antialiased;text-transform:none;color:transparent;font-size:var(--pr-t-font-body-S-lineHeight);line-height:var(--components-options-checkbox-size);position:absolute;text-align:center;transform:scale(0);transition:all .1s;inline-size:var(--components-options-checkbox-size)}:host-context(.mod-multiple) .optionItem-value.is-selected:before,:host-context([aria-selected=true]) :host-context(.mod-multiple) .optionItem-value:before,.formerEmployeeDisplayer .optionItem-value.is-selected:before,:host-context([aria-selected=true]) .formerEmployeeDisplayer .optionItem-value: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,:host-context([aria-selected=true]) :host-context(.mod-multiple) .optionItem-value:after,.formerEmployeeDisplayer .optionItem-value.is-selected:after,:host-context([aria-selected=true]) .formerEmployeeDisplayer .optionItem-value:after{color:var(--palettes-neutral-0);transform:scale(1)}:host-context(.mod-multiple) .optionItem-value.is-selected.is-disabled,:host-context([aria-selected=true]) :host-context(.mod-multiple) .optionItem-value.is-disabled,.formerEmployeeDisplayer .optionItem-value.is-selected.is-disabled,:host-context([aria-selected=true]) .formerEmployeeDisplayer .optionItem-value.is-disabled{--components-options-checkbox-color: var(--commons-disabled-background);background-color:transparent}:host-context(.mod-multiple) .optionItem-value.is-selected.is-disabled:after,:host-context([aria-selected=true]) :host-context(.mod-multiple) .optionItem-value.is-disabled:after,.formerEmployeeDisplayer .optionItem-value.is-selected.is-disabled:after,:host-context([aria-selected=true]) .formerEmployeeDisplayer .optionItem-value.is-disabled:after{color:var(--palettes-neutral-500)}:host-context(.mod-multiple) .optionItem-value.is-disabled,.formerEmployeeDisplayer .optionItem-value.is-disabled{--components-options-checkbox-border-color: var(--palettes-neutral-500)}:host-context(.mod-multiple) .optionItem-value:not(.is-disabled):hover:before,.formerEmployeeDisplayer .optionItem-value:not(.is-disabled):hover:before{box-shadow:inset 0 0 0 2px var(--components-options-checkbox-color)}}@layer components{:host-context(.mod-multiple).establishmentOption .optionItem-value,.formerEmployeeDisplayer.establishmentOption .optionItem-value{position:relative;padding-inline-start:calc(var(--components-options-checkbox-size) + var(--pr-t-spacings-100) * 2)}:host-context(.mod-multiple).establishmentOption .optionItem-value:before,:host-context(.mod-multiple).establishmentOption .optionItem-value:after,.formerEmployeeDisplayer.establishmentOption .optionItem-value:before,.formerEmployeeDisplayer.establishmentOption .optionItem-value:after{inset-inline-start:var(--pr-t-spacings-100)}}@layer mods{.is-disabled{color:var(--palettes-neutral-500);-webkit-user-select:none;user-select:none;cursor:default}.is-disabled.is-selected{background-color:var(--commons-disabled-background)}.is-disabled:hover{background-color:inherit}.optionItem-value:has(.optionItem-icon){display:flex;justify-content:space-between}}@layer components{.optionItem-icons{display:flex;gap:var(--pr-t-spacings-50)}.optionItem-icon-shape{display:block;fill:var(--palettes-neutral-500)}.optionItem-icon-shape:hover{fill:var(--palettes-neutral-800)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { intl: [{ type: i0.Input, args: [{ isSignal: true, alias: "intl", required: false }] }], optionTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionTpl", required: false }] }], option: [{ type: i0.Input, args: [{ isSignal: true, alias: "option", required: false }] }], grouping: [{ type: i0.Input, args: [{ isSignal: true, alias: "grouping", required: false }] }], hasChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasChildren", required: false }] }], onlyParent: [{ type: i0.Output, args: ["onlyParent"] }], onlyChildren: [{ type: i0.Output, args: ["onlyChildren"] }], groupIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupIndex", required: false }] }], optionIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionIndex", required: true }] }], scrollIntoViewOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollIntoViewOptions", required: false }] }], groupTemplateLocation: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupTemplateLocation", required: false }] }], optionContext: [{ type: i0.ViewChild, args: [i0.forwardRef(() => LU_OPTION_CONTEXT), { isSignal: true }] }] } });
 
 class LuOptionDirective {
-    set select(select) {
-        select.optionTpl.set(this.templateRef);
-    }
     constructor(templateRef) {
         this.templateRef = templateRef;
+        this.select = input(undefined, { ...(ngDevMode ? { debugName: "select" } : /* istanbul ignore next */ {}), alias: 'luOptionSelect' });
+        _effectWithDeps([this.select], (select) => select?.optionTpl.set(this.templateRef));
     }
     static ngTemplateContextGuard(_dir, _ctx) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuOptionDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.15", type: LuOptionDirective, isStandalone: true, selector: "[luOption]", inputs: { select: ["luOptionSelect", "select"] }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuOptionDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: LuOptionDirective, isStandalone: true, selector: "[luOption]", inputs: { select: { classPropertyName: "select", publicName: "luOptionSelect", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuOptionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuOptionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[luOption]',
                 }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { select: [{
-                type: Input,
-                args: ['luOptionSelect']
-            }] } });
+        }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { select: [{ type: i0.Input, args: [{ isSignal: true, alias: "luOptionSelect", required: false }] }] } });
 
 const coreSelectDefaultOptionComparer = (option1, option2) => JSON.stringify(option1) === JSON.stringify(option2);
 const coreSelectDefaultOptionKey = (option) => option;
 class ALuSelectInputComponent {
-    set placeholder(value) {
-        this.placeholder$.next(value);
-    }
-    set clearable(value) {
-        this.#inputClearable.set(value);
-    }
-    get clearable() {
-        return this.#clearable();
-    }
-    #clearable;
     #defaultFilterPillClearable;
-    #inputClearable;
     #defaultClearable;
     get searchable() {
         return this.clueChange$.observed;
     }
-    #addOptionLabelInput;
-    set addOptionLabel(label) {
-        this.#addOptionLabelInput.set(label);
-    }
     get addOptionLabel() {
         return this.computedAddOptionLabel();
     }
-    set addOptionStrategy(strategy) {
-        this.addOptionStrategy$.next(strategy);
-    }
     get isSelectedClass() {
         return this.hasValue();
     }
     get isSearchFilledClass() {
-        return this.clue?.length > 0;
+        return (this.clue?.length ?? 0) > 0;
     }
     get isPanelOpen() {
         return this.isPanelOpen$.value;
@@ -442,24 +398,6 @@ class ALuSelectInputComponent {
     get ariaControls() {
         return this.overlayContainerRef.id;
     }
-    set loading(value) {
-        if (value !== this.loading) {
-            this.loading$.next(value);
-        }
-    }
-    set options(options) {
-        this.options$.next(options);
-        if (this.panelRef) {
-            // We have to put it in a setTimeout so it'll be triggered AFTER the DOM is updated and not right now,
-            // which is before the panel size has been modified by the arrival of the new options
-            setTimeout(() => {
-                this.panelRef?.updatePosition();
-                this.updatePositionFn?.();
-                // If no fixes are found, last resort fix is here
-                // window.dispatchEvent(new Event('resize'));
-            });
-        }
-    }
     get isNoClueIconClass() {
         return this.noClueIcon();
     }
@@ -485,7 +423,7 @@ class ALuSelectInputComponent {
         this.changeDetectorRef.markForCheck();
     }
     get inputPlaceholder() {
-        return this.value ? null : this.placeholder$.value;
+        return this.value ? null : this.placeholder();
     }
     clueChanged(clue, skipPanelOpen = false) {
         this.clue = clue;
@@ -512,28 +450,34 @@ class ALuSelectInputComponent {
         this.panelClosed = output();
         this.panelOpened = output();
         this.highlightedOption = output();
-        this.placeholder$ = new BehaviorSubject('');
+        this.inputElementRef = viewChild('inputElement', ...(ngDevMode ? [{ debugName: "inputElementRef" }] : /* istanbul ignore next */ []));
         this.disabled$ = new BehaviorSubject(false);
-        this.filterPillDisabled = toSignal(this.disabled$);
+        this.filterPillDisabled = toSignal(this.disabled$, { initialValue: false });
         this.prefix = input(null, ...(ngDevMode ? [{ debugName: "prefix" }] : /* istanbul ignore next */ []));
-        this.#clearable = computed(() => this.#inputClearable() ?? this.#defaultFilterPillClearable() ?? this.#defaultClearable, ...(ngDevMode ? [{ debugName: "#clearable" }] : /* istanbul ignore next */ []));
+        this.placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        this.clearableInput = input(false, { ...(ngDevMode ? { debugName: "clearableInput" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'clearable' });
+        this.isClearable = computed(() => this.clearableInput() ?? this.#defaultFilterPillClearable() ?? this.#defaultClearable, ...(ngDevMode ? [{ debugName: "isClearable" }] : /* istanbul ignore next */ []));
         this.#defaultFilterPillClearable = signal(null, ...(ngDevMode ? [{ debugName: "#defaultFilterPillClearable" }] : /* istanbul ignore next */ []));
-        this.#inputClearable = signal(null, ...(ngDevMode ? [{ debugName: "#inputClearable" }] : /* istanbul ignore next */ []));
         this.#defaultClearable = false;
-        this.#addOptionLabelInput = signal(null, ...(ngDevMode ? [{ debugName: "#addOptionLabelInput" }] : /* istanbul ignore next */ []));
-        this.computedAddOptionLabel = computed(() => this.#addOptionLabelInput() ?? this.intl().addOption, ...(ngDevMode ? [{ debugName: "computedAddOptionLabel" }] : /* istanbul ignore next */ []));
+        this.computedAddOptionLabel = computed(() => this.addOptionLabelInput() ?? this.intl().addOption, ...(ngDevMode ? [{ debugName: "computedAddOptionLabel" }] : /* istanbul ignore next */ []));
+        this.addOptionLabelInput = input(null, { ...(ngDevMode ? { debugName: "addOptionLabelInput" } : /* istanbul ignore next */ {}), alias: 'addOptionLabel' });
+        this.addOptionStrategy = input('never', ...(ngDevMode ? [{ debugName: "addOptionStrategy" }] : /* istanbul ignore next */ []));
         this.isPanelOpen$ = new BehaviorSubject(false);
         this.activeDescendant$ = new BehaviorSubject('');
-        this.overlayConfig = {
-            hasBackdrop: true,
-            backdropClass: 'cdk-overlay-transparent-backdrop',
-        };
-        this.optionComparer = coreSelectDefaultOptionComparer;
-        this.optionKey = coreSelectDefaultOptionKey;
+        this.overlayConfig = input({ hasBackdrop: true, backdropClass: 'cdk-overlay-transparent-backdrop' }, ...(ngDevMode ? [{ debugName: "overlayConfig" }] : /* istanbul ignore next */ []));
+        this.loadingInput = input(false, { ...(ngDevMode ? { debugName: "loadingInput" } : /* istanbul ignore next */ {}), alias: 'loading' });
+        this.optionsInput = input(null, { ...(ngDevMode ? { debugName: "optionsInput" } : /* istanbul ignore next */ {}), alias: 'options' });
+        this.optionComparerInput = input(coreSelectDefaultOptionComparer, { ...(ngDevMode ? { debugName: "optionComparerInput" } : /* istanbul ignore next */ {}), alias: 'optionComparer' });
+        this.optionKeyInput = input(coreSelectDefaultOptionKey, { ...(ngDevMode ? { debugName: "optionKeyInput" } : /* istanbul ignore next */ {}), alias: 'optionKey' });
         this.noClueIcon = input(false, { ...(ngDevMode ? { debugName: "noClueIcon" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.inputTabindex = input(0, ...(ngDevMode ? [{ debugName: "inputTabindex" }] : /* istanbul ignore next */ []));
         this.compact = input(false, { ...(ngDevMode ? { debugName: "compact" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.colorPicker = input(false, { ...(ngDevMode ? { debugName: "colorPicker" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.options = linkedSignal(() => this.optionsInput(), ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+        this.loading = linkedSignal(() => this.loadingInput(), ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+        this.clearable = linkedSignal(() => this.clearableInput(), ...(ngDevMode ? [{ debugName: "clearable" }] : /* istanbul ignore next */ []));
+        this.optionComparer = linkedSignal(() => this.optionComparerInput(), ...(ngDevMode ? [{ debugName: "optionComparer" }] : /* istanbul ignore next */ []));
+        this.optionKey = linkedSignal(() => this.optionKeyInput(), ...(ngDevMode ? [{ debugName: "optionKey" }] : /* istanbul ignore next */ []));
         this.optionTpl = model(LuSimpleSelectDefaultOptionComponent, ...(ngDevMode ? [{ debugName: "optionTpl" }] : /* istanbul ignore next */ []));
         this.valueTpl = model(...(ngDevMode ? [undefined, { debugName: "valueTpl" }] : /* istanbul ignore next */ []));
         this.panelHeaderTpl = model(...(ngDevMode ? [undefined, { debugName: "panelHeaderTpl" }] : /* istanbul ignore next */ []));
@@ -548,15 +492,15 @@ class ALuSelectInputComponent {
         this.addOption = output();
         this.valueSignal = signal(null, ...(ngDevMode ? [{ debugName: "valueSignal" }] : /* istanbul ignore next */ []));
         this.isFilterPillEmpty = computed(() => this.valueSignal() === null, ...(ngDevMode ? [{ debugName: "isFilterPillEmpty" }] : /* istanbul ignore next */ []));
-        this.isFilterPillClearable = computed(() => this.#clearable(), ...(ngDevMode ? [{ debugName: "isFilterPillClearable" }] : /* istanbul ignore next */ []));
+        this.isFilterPillClearable = computed(() => this.isClearable(), ...(ngDevMode ? [{ debugName: "isFilterPillClearable" }] : /* istanbul ignore next */ []));
+        this._value = null;
         this.options$ = new ReplaySubject(1);
-        this.loading$ = new BehaviorSubject(false);
+        this.loading$ = toObservable(this.loading);
         this.clue = null;
         // This is the clue stored after we selected an option to know if we should emit an empty clue on open or not
         this.lastEmittedClue = '';
         this.clue$ = defer(() => this.clueChange$.pipe(startWith(this.clue)));
-        this.addOptionStrategy$ = new BehaviorSubject('never');
-        this.shouldDisplayAddOption$ = this.addOptionStrategy$.pipe(switchMap((strategy) => {
+        this.shouldDisplayAddOption$ = toObservable(this.addOptionStrategy).pipe(switchMap((strategy) => {
             switch (strategy) {
                 case 'always':
                     return of(true);
@@ -572,6 +516,21 @@ class ALuSelectInputComponent {
         if (this.filterPillHost) {
             this.filterPillHost.registerInput(this);
         }
+        _effectWithDeps([this.options], (options) => {
+            if (isNotNil(options)) {
+                this.options$.next(options);
+                if (this.panelRef) {
+                    // We have to put it in a setTimeout so it'll be triggered AFTER the DOM is updated and not right now,
+                    // which is before the panel size has been modified by the arrival of the new options
+                    setTimeout(() => {
+                        this.panelRef?.updatePosition();
+                        this.updatePositionFn?.();
+                        // If no fixes are found, last resort fix is here
+                        // window.dispatchEvent(new Event('resize'));
+                    });
+                }
+            }
+        });
     }
     onClickOpenPanel($event) {
         if (!this.isPanelOpen) {
@@ -657,7 +616,7 @@ class ALuSelectInputComponent {
             event.stopPropagation();
         }
         this.updateValue(null, true);
-        this.inputElementRef.nativeElement.focus();
+        this.inputElementRef()?.nativeElement.focus();
     }
     openPanel(clue = '') {
         if (this.filterPillMode || this.isPanelOpen || this.disabled$.value) {
@@ -687,7 +646,7 @@ class ALuSelectInputComponent {
         });
     }
     emitAddOption() {
-        this.addOption.emit(this.clue);
+        this.addOption.emit(this.clue ?? '');
         this.panelRef?.close();
     }
     bindInputToPanelRefEvents() {
@@ -704,8 +663,8 @@ class ALuSelectInputComponent {
         this.panelRef.closed.subscribe(() => this.closePanel());
     }
     focusInput() {
-        if (this.inputElementRef) {
-            this.inputElementRef.nativeElement.focus();
+        if (this.inputElementRef()) {
+            this.inputElementRef()?.nativeElement.focus();
         }
     }
     emptyClue() {
@@ -769,58 +728,24 @@ class ALuSelectInputComponent {
     onFilterPillClosed() {
         this.isPanelOpen$.next(false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ALuSelectInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.15", type: ALuSelectInputComponent, isStandalone: true, inputs: { ignorePresentation: { classPropertyName: "ignorePresentation", publicName: "ignorePresentation", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, addOptionLabel: { classPropertyName: "addOptionLabel", publicName: "addOptionLabel", isSignal: false, isRequired: false, transformFunction: null }, addOptionStrategy: { classPropertyName: "addOptionStrategy", publicName: "addOptionStrategy", isSignal: false, isRequired: false, transformFunction: null }, overlayConfig: { classPropertyName: "overlayConfig", publicName: "overlayConfig", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, optionComparer: { classPropertyName: "optionComparer", publicName: "optionComparer", isSignal: false, isRequired: false, transformFunction: null }, optionKey: { classPropertyName: "optionKey", publicName: "optionKey", isSignal: false, isRequired: false, transformFunction: null }, noClueIcon: { classPropertyName: "noClueIcon", publicName: "noClueIcon", isSignal: true, isRequired: false, transformFunction: null }, inputTabindex: { classPropertyName: "inputTabindex", publicName: "inputTabindex", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, colorPicker: { classPropertyName: "colorPicker", publicName: "colorPicker", isSignal: true, isRequired: false, transformFunction: null }, optionTpl: { classPropertyName: "optionTpl", publicName: "optionTpl", isSignal: true, isRequired: false, transformFunction: null }, valueTpl: { classPropertyName: "valueTpl", publicName: "valueTpl", isSignal: true, isRequired: false, transformFunction: null }, panelHeaderTpl: { classPropertyName: "panelHeaderTpl", publicName: "panelHeaderTpl", isSignal: true, isRequired: false, transformFunction: null }, panelFooterTpl: { classPropertyName: "panelFooterTpl", publicName: "panelFooterTpl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { panelClosed: "panelClosed", panelOpened: "panelOpened", highlightedOption: "highlightedOption", optionTpl: "optionTplChange", valueTpl: "valueTplChange", panelHeaderTpl: "panelHeaderTplChange", panelFooterTpl: "panelFooterTplChange", clueChange: "clueChange", nextPage: "nextPage", previousPage: "previousPage", addOption: "addOption" }, host: { listeners: { "click": "onClickOpenPanel($event)", "keydown": "onKeyDownNavigation($event)" }, properties: { "class.colorPicker": "colorPicker()", "class.mod-compact": "compact()", "class.is-clearable": "this.clearable", "class.is-selected": "this.isSelectedClass", "class.is-searchFilled": "this.isSearchFilledClass", "class.mod-noClueIcon": "this.isNoClueIconClass" } }, viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ALuSelectInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.14", type: ALuSelectInputComponent, isStandalone: true, inputs: { ignorePresentation: { classPropertyName: "ignorePresentation", publicName: "ignorePresentation", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, clearableInput: { classPropertyName: "clearableInput", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, addOptionLabelInput: { classPropertyName: "addOptionLabelInput", publicName: "addOptionLabel", isSignal: true, isRequired: false, transformFunction: null }, addOptionStrategy: { classPropertyName: "addOptionStrategy", publicName: "addOptionStrategy", isSignal: true, isRequired: false, transformFunction: null }, overlayConfig: { classPropertyName: "overlayConfig", publicName: "overlayConfig", isSignal: true, isRequired: false, transformFunction: null }, loadingInput: { classPropertyName: "loadingInput", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, optionsInput: { classPropertyName: "optionsInput", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionComparerInput: { classPropertyName: "optionComparerInput", publicName: "optionComparer", isSignal: true, isRequired: false, transformFunction: null }, optionKeyInput: { classPropertyName: "optionKeyInput", publicName: "optionKey", isSignal: true, isRequired: false, transformFunction: null }, noClueIcon: { classPropertyName: "noClueIcon", publicName: "noClueIcon", isSignal: true, isRequired: false, transformFunction: null }, inputTabindex: { classPropertyName: "inputTabindex", publicName: "inputTabindex", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, colorPicker: { classPropertyName: "colorPicker", publicName: "colorPicker", isSignal: true, isRequired: false, transformFunction: null }, optionTpl: { classPropertyName: "optionTpl", publicName: "optionTpl", isSignal: true, isRequired: false, transformFunction: null }, valueTpl: { classPropertyName: "valueTpl", publicName: "valueTpl", isSignal: true, isRequired: false, transformFunction: null }, panelHeaderTpl: { classPropertyName: "panelHeaderTpl", publicName: "panelHeaderTpl", isSignal: true, isRequired: false, transformFunction: null }, panelFooterTpl: { classPropertyName: "panelFooterTpl", publicName: "panelFooterTpl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { panelClosed: "panelClosed", panelOpened: "panelOpened", highlightedOption: "highlightedOption", optionTpl: "optionTplChange", valueTpl: "valueTplChange", panelHeaderTpl: "panelHeaderTplChange", panelFooterTpl: "panelFooterTplChange", clueChange: "clueChange", nextPage: "nextPage", previousPage: "previousPage", addOption: "addOption" }, host: { listeners: { "click": "onClickOpenPanel($event)", "keydown": "onKeyDownNavigation($event)" }, properties: { "class.colorPicker": "colorPicker()", "class.mod-compact": "compact()", "class.is-clearable": "isClearable()", "class.is-selected": "isSelectedClass", "class.is-searchFilled": "isSearchFilledClass", "class.mod-noClueIcon": "isNoClueIconClass" } }, viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ALuSelectInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ALuSelectInputComponent, decorators: [{
             type: Directive,
             args: [{
                     host: {
                         '[class.colorPicker]': 'colorPicker()',
                         '[class.mod-compact]': 'compact()',
+                        '[class.is-clearable]': 'isClearable()',
+                        '[class.is-selected]': 'isSelectedClass',
+                        '[class.is-searchFilled]': 'isSearchFilledClass',
+                        '[class.mod-noClueIcon]': 'isNoClueIconClass',
+                        '(click)': 'onClickOpenPanel($event)',
+                        '(keydown)': 'onKeyDownNavigation($event)',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { ignorePresentation: [{ type: i0.Input, args: [{ isSignal: true, alias: "ignorePresentation", required: false }] }], panelClosed: [{ type: i0.Output, args: ["panelClosed"] }], panelOpened: [{ type: i0.Output, args: ["panelOpened"] }], highlightedOption: [{ type: i0.Output, args: ["highlightedOption"] }], inputElementRef: [{
-                type: ViewChild,
-                args: ['inputElement']
-            }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], placeholder: [{
-                type: Input
-            }], clearable: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }, {
-                type: HostBinding,
-                args: ['class.is-clearable']
-            }], addOptionLabel: [{
-                type: Input
-            }], addOptionStrategy: [{
-                type: Input
-            }], isSelectedClass: [{
-                type: HostBinding,
-                args: ['class.is-selected']
-            }], isSearchFilledClass: [{
-                type: HostBinding,
-                args: ['class.is-searchFilled']
-            }], overlayConfig: [{
-                type: Input
-            }], loading: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }], optionComparer: [{
-                type: Input
-            }], optionKey: [{
-                type: Input
-            }], noClueIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "noClueIcon", required: false }] }], inputTabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputTabindex", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], colorPicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorPicker", required: false }] }], isNoClueIconClass: [{
-                type: HostBinding,
-                args: ['class.mod-noClueIcon']
-            }], optionTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionTpl", required: false }] }, { type: i0.Output, args: ["optionTplChange"] }], valueTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueTpl", required: false }] }, { type: i0.Output, args: ["valueTplChange"] }], panelHeaderTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelHeaderTpl", required: false }] }, { type: i0.Output, args: ["panelHeaderTplChange"] }], panelFooterTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelFooterTpl", required: false }] }, { type: i0.Output, args: ["panelFooterTplChange"] }], clueChange: [{ type: i0.Output, args: ["clueChange"] }], nextPage: [{ type: i0.Output, args: ["nextPage"] }], previousPage: [{ type: i0.Output, args: ["previousPage"] }], addOption: [{ type: i0.Output, args: ["addOption"] }], onClickOpenPanel: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }], onKeyDownNavigation: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { ignorePresentation: [{ type: i0.Input, args: [{ isSignal: true, alias: "ignorePresentation", required: false }] }], panelClosed: [{ type: i0.Output, args: ["panelClosed"] }], panelOpened: [{ type: i0.Output, args: ["panelOpened"] }], highlightedOption: [{ type: i0.Output, args: ["highlightedOption"] }], inputElementRef: [{ type: i0.ViewChild, args: ['inputElement', { isSignal: true }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], clearableInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], addOptionLabelInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "addOptionLabel", required: false }] }], addOptionStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "addOptionStrategy", required: false }] }], overlayConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayConfig", required: false }] }], loadingInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], optionsInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionComparerInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionComparer", required: false }] }], optionKeyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionKey", required: false }] }], noClueIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "noClueIcon", required: false }] }], inputTabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputTabindex", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], colorPicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorPicker", required: false }] }], optionTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionTpl", required: false }] }, { type: i0.Output, args: ["optionTplChange"] }], valueTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueTpl", required: false }] }, { type: i0.Output, args: ["valueTplChange"] }], panelHeaderTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelHeaderTpl", required: false }] }, { type: i0.Output, args: ["panelHeaderTplChange"] }], panelFooterTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelFooterTpl", required: false }] }, { type: i0.Output, args: ["panelFooterTplChange"] }], clueChange: [{ type: i0.Output, args: ["clueChange"] }], nextPage: [{ type: i0.Output, args: ["nextPage"] }], previousPage: [{ type: i0.Output, args: ["previousPage"] }], addOption: [{ type: i0.Output, args: ["addOption"] }] } });
 
 let selectId = 0;
 function selectIdFactory() {
@@ -862,15 +787,15 @@ class LuCoreSelectTotalCountDirective {
         this.totalCount = input.required({ ...(ngDevMode ? { debugName: "totalCount" } : /* istanbul ignore next */ {}), alias: 'totalCount' });
         this.totalCount$ = toObservable(this.totalCount);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuCoreSelectTotalCountDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.15", type: LuCoreSelectTotalCountDirective, isStandalone: true, selector: "lu-simple-select[totalCount],lu-multi-select[totalCount]", inputs: { totalCount: { classPropertyName: "totalCount", publicName: "totalCount", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuCoreSelectTotalCountDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: LuCoreSelectTotalCountDirective, isStandalone: true, selector: "lu-simple-select[totalCount],lu-multi-select[totalCount]", inputs: { totalCount: { classPropertyName: "totalCount", publicName: "totalCount", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
             {
                 provide: CORE_SELECT_API_TOTAL_COUNT_PROVIDER,
                 useExisting: forwardRef(() => LuCoreSelectTotalCountDirective),
             },
         ], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuCoreSelectTotalCountDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuCoreSelectTotalCountDirective, decorators: [{
             type: Directive,
             args: [{
                     // The attribute is already prefixed with "lu-simple-select"
@@ -889,10 +814,10 @@ class TreeDisplayPipe {
     transform(items, treeGenerator) {
         return treeGenerator.generateTrees(items);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: TreeDisplayPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.15", ngImport: i0, type: TreeDisplayPipe, isStandalone: true, name: "luTreeDisplay" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TreeDisplayPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.14", ngImport: i0, type: TreeDisplayPipe, isStandalone: true, name: "luTreeDisplay" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: TreeDisplayPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TreeDisplayPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'luTreeDisplay',
@@ -904,10 +829,10 @@ class LuCoreSelectNoClueDirective {
     constructor() {
         inject(ALuSelectInputComponent).clueChange$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuCoreSelectNoClueDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.15", type: LuCoreSelectNoClueDirective, isStandalone: true, selector: "lu-simple-select[noClue],lu-multi-select[noClue]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuCoreSelectNoClueDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: LuCoreSelectNoClueDirective, isStandalone: true, selector: "lu-simple-select[noClue],lu-multi-select[noClue]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuCoreSelectNoClueDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuCoreSelectNoClueDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -921,6 +846,7 @@ class CoreSelectKeyManager {
     #hasSearchChanged = false;
     #options;
     #injector = inject(Injector);
+    // eslint-disable-next-line @angular-eslint/prefer-signals
     #queryList;
     #queryList$;
     init(options) {
@@ -948,7 +874,7 @@ class CoreSelectKeyManager {
         this.#cdkKeyManager?.onKeydown(event);
     }
     get activeItem() {
-        return this.#cdkKeyManager?.activeItem;
+        return this.#cdkKeyManager?.activeItem ?? undefined;
     }
     get activeItemIndex() {
         return this.#cdkKeyManager?.activeItemIndex ?? -1;
@@ -974,8 +900,12 @@ class CoreSelectKeyManager {
         });
     }
     #bindActiveOptionIdChanged(activeOptionIdChanged$) {
-        this.#cdkKeyManager.change
-            .pipe(map(() => this.#cdkKeyManager.activeItem?.idAttribute()), takeUntilDestroyed(this.#destroyRef))
+        const keyManager = this.#cdkKeyManager;
+        if (!keyManager) {
+            return;
+        }
+        keyManager.change
+            .pipe(map(() => keyManager.activeItem?.idAttribute() ?? ''), takeUntilDestroyed(this.#destroyRef))
             .subscribe((activeDescendant) => activeOptionIdChanged$.emit(activeDescendant));
     }
     /**
@@ -985,26 +915,30 @@ class CoreSelectKeyManager {
      * 	- set to first item if no active item
      */
     #bindOptionsChange({ options$ }) {
+        const keyManager = this.#cdkKeyManager;
+        if (!keyManager) {
+            return;
+        }
         options$
             .pipe(debounceTime(0), // Wait until QueryList is updated
         takeUntilDestroyed(this.#destroyRef))
             .subscribe(() => {
             if (this.#queryList().length === 0) {
-                this.#cdkKeyManager.setActiveItem(-1);
+                keyManager.setActiveItem(-1);
             }
             else if (this.#hasSearchChanged) {
                 this.#hasSearchChanged = false;
-                this.#cdkKeyManager.setFirstItemActive();
+                keyManager.setFirstItemActive();
             }
-            else if (!this.#cdkKeyManager.activeItem) {
-                this.#cdkKeyManager.setFirstItemActive();
+            else if (!keyManager.activeItem) {
+                keyManager.setFirstItemActive();
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: CoreSelectKeyManager, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: CoreSelectKeyManager }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CoreSelectKeyManager, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CoreSelectKeyManager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: CoreSelectKeyManager, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CoreSelectKeyManager, decorators: [{
             type: Injectable
         }] });
 
@@ -1020,10 +954,10 @@ class LuCoreSelectPanelHeaderDirective {
     static ngTemplateContextGuard(_dir, _ctx) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuCoreSelectPanelHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.15", type: LuCoreSelectPanelHeaderDirective, isStandalone: true, selector: "[luSelectPanelHeader]", inputs: { select: { classPropertyName: "select", publicName: "luSelectPanelHeader", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuCoreSelectPanelHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: LuCoreSelectPanelHeaderDirective, isStandalone: true, selector: "[luSelectPanelHeader]", inputs: { select: { classPropertyName: "select", publicName: "luSelectPanelHeader", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuCoreSelectPanelHeaderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuCoreSelectPanelHeaderDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[luSelectPanelHeader]',
@@ -1106,10 +1040,10 @@ class LuIsOptionSelectedPipe {
     transform(option, comparer, selectedOptions) {
         return this.#selectionStrategy.isSelected(option, selectedOptions, comparer);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuIsOptionSelectedPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.15", ngImport: i0, type: LuIsOptionSelectedPipe, isStandalone: true, name: "luIsOptionSelected" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuIsOptionSelectedPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.14", ngImport: i0, type: LuIsOptionSelectedPipe, isStandalone: true, name: "luIsOptionSelected" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuIsOptionSelectedPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuIsOptionSelectedPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'luIsOptionSelected',