@lucca-front/ng 22.0.0-rc.2 → 22.0.0-rc.4

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

@@ -1,10 +1,10 @@
 import * as i0 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 { input, Directive, InjectionToken, inject, ChangeDetectionStrategy, Component, TemplateRef, Pipe, ViewContainerRef, Injector, DestroyRef, computed, afterRenderEffect, untracked, Injectable, ElementRef, signal, model, linkedSignal, output, booleanAttribute, viewChild, ChangeDetectorRef, afterNextRender, forwardRef, effect, 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 { toObservable, takeUntilDestroyed, toSignal, outputFromObservable } 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 { BehaviorSubject, observeOn, asyncScheduler, map, filter, take, scan, startWith, distinctUntilChanged, switchMap, timer, of, concatMap, catchError, tap, takeWhile, finalize, takeUntil, ReplaySubject, Subject, defer } from 'rxjs';
 import { AsyncPipe } from '@angular/common';
 import { LuTooltipTriggerDirective } from '@lucca-front/ng/tooltip';
 import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
@@ -18,10 +18,10 @@ class LuDisplayerDirective {
     static ngTemplateContextGuard(_dir, _ctx) {
         return true;
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: LuDisplayerDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", 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.14", ngImport: i0, type: LuDisplayerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: LuDisplayerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[luDisplayer]',
@@ -52,10 +52,10 @@ class LuSimpleSelectDefaultOptionComponent {
     constructor() {
         this.context = inject(LU_OPTION_CONTEXT);
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: LuSimpleSelectDefaultOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", 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.14", ngImport: i0, type: LuSimpleSelectDefaultOptionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", 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" }]
         }] });
@@ -66,10 +66,10 @@ class LuDisabledOptionDirective {
         this.context = inject(LU_OPTION_CONTEXT);
         syncInputSignal(this.isDisabled, (disabled) => this.context.isDisabled$.next(disabled));
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: LuDisabledOptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", 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.14", ngImport: i0, type: LuDisabledOptionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: LuDisabledOptionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[luDisabledOption]',
@@ -88,10 +88,10 @@ class LuOptionGroupDirective {
             select.groupingSignal.set({ selector, content: this.content });
         });
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: LuOptionGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", 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.14", ngImport: i0, type: LuOptionGroupDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: LuOptionGroupDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[luOptionGroup]',
@@ -128,10 +128,10 @@ 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.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" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: LuOptionGroupPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: LuOptionGroupPipe, isStandalone: true, name: "luOptionGroup" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuOptionGroupPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: LuOptionGroupPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'luOptionGroup',
@@ -143,9 +143,12 @@ function hasRenderableValue(value, showNull) {
 }
 class LuOptionOutletDirective {
     constructor() {
-        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.luOptionOutlet = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "luOptionOutlet" }] : /* istanbul ignore next */ []));
+        this.luOptionOutletValue = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "luOptionOutletValue" }] : /* istanbul ignore next */ []));
+        this.luOptionShowNull = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "luOptionShowNull" }] : /* istanbul ignore next */ []));
         this.viewContainerRef = inject(ViewContainerRef);
         this.injector = inject(Injector);
         this.optionContext = inject(LU_OPTION_CONTEXT);
@@ -190,10 +193,10 @@ class LuOptionOutletDirective {
     static ngTemplateContextGuard(_dir, _ctx) {
         return true;
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: LuOptionOutletDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", 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.14", ngImport: i0, type: LuOptionOutletDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: LuOptionOutletDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[luOptionOutlet]',
@@ -203,8 +206,118 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
 
 const SELECT_PANEL_INSTANCE = new InjectionToken('CoreSelect:PanelInstance');
 
+class CoreSelectKeyManager {
+    #destroyRef = inject(DestroyRef);
+    #cdkKeyManager;
+    #hasSearchChanged = false;
+    #options;
+    #injector = inject(Injector);
+    // eslint-disable-next-line @angular-eslint/prefer-signals
+    #queryList;
+    #queryList$;
+    init(options) {
+        this.#options = options;
+        this.#queryList = computed(() => {
+            return [...options.queryList()].sort((a, b) => {
+                const comparison = a.elementRef.nativeElement.compareDocumentPosition(b.elementRef.nativeElement);
+                if (comparison & Node.DOCUMENT_POSITION_FOLLOWING) {
+                    return -1;
+                }
+                if (comparison & Node.DOCUMENT_POSITION_PRECEDING) {
+                    return 1;
+                }
+                return 0;
+            });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#queryList" }] : /* istanbul ignore next */ []));
+        this.#queryList$ = toObservable(this.#queryList, { injector: this.#injector });
+        this.#cdkKeyManager = new ActiveDescendantKeyManager(this.#queryList, this.#injector).withHomeAndEnd();
+        this.#bindClueChange(options.clueChange$);
+        this.#bindOptionsChange(options);
+        this.#bindActiveOptionIdChanged(options.activeOptionIdChanged$);
+        this.#cdkKeyManager.setFirstItemActive();
+    }
+    onKeydown(event) {
+        this.#cdkKeyManager?.onKeydown(event);
+    }
+    get activeItem() {
+        return this.#cdkKeyManager?.activeItem ?? undefined;
+    }
+    get activeItemIndex() {
+        return this.#cdkKeyManager?.activeItemIndex ?? -1;
+    }
+    setActiveItem(index) {
+        this.#cdkKeyManager?.setActiveItem(index);
+    }
+    setActiveItemByElement(item) {
+        const index = this.#queryList().indexOf(item);
+        if (index !== -1) {
+            this.#cdkKeyManager?.setActiveItem(index);
+        }
+    }
+    highlightOption(option) {
+        if (!this.#options) {
+            return;
+        }
+        const { optionComparer } = this.#options;
+        this.#queryList$
+            .pipe(observeOn(asyncScheduler), map((options) => options.findIndex((el) => {
+            const elOption = el.option();
+            return isNotNil(elOption) && optionComparer(elOption, option);
+        })), filter((index) => index !== -1), take(1), takeUntilDestroyed(this.#destroyRef))
+            .subscribe((selectedIndex) => this.setActiveItem(selectedIndex));
+    }
+    #bindClueChange(clueChange$) {
+        clueChange$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(() => {
+            this.#hasSearchChanged = true;
+        });
+    }
+    #bindActiveOptionIdChanged(activeOptionIdChanged$) {
+        const keyManager = this.#cdkKeyManager;
+        if (!keyManager) {
+            return;
+        }
+        keyManager.change
+            .pipe(map(() => keyManager.activeItem?.idAttribute() ?? ''), takeUntilDestroyed(this.#destroyRef))
+            .subscribe((activeDescendant) => activeOptionIdChanged$.emit(activeDescendant));
+    }
+    /**
+     * Ensure always have the correct highlighted item:
+     * 	- reset to null if no options
+     * 	- set to first item if search has changed
+     * 	- set to first item if no active item
+     */
+    #bindOptionsChange({ options }) {
+        const keyManager = this.#cdkKeyManager;
+        if (!keyManager) {
+            return;
+        }
+        afterRenderEffect(() => {
+            options(); // Track option change
+            untracked(() => {
+                if (this.#queryList().length === 0) {
+                    keyManager.setActiveItem(-1);
+                }
+                else if (this.#hasSearchChanged) {
+                    this.#hasSearchChanged = false;
+                    keyManager.setFirstItemActive();
+                }
+                else if (!keyManager.activeItem) {
+                    keyManager.setFirstItemActive();
+                }
+            });
+        }, { injector: this.#injector });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CoreSelectKeyManager, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CoreSelectKeyManager }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CoreSelectKeyManager, decorators: [{
+            type: Injectable
+        }] });
+
 class CoreSelectPanelElement {
     #panelRef;
+    #keyManager;
     #selectRef;
     get disabled() {
         return this.disabledRef();
@@ -215,15 +328,23 @@ class CoreSelectPanelElement {
     constructor() {
         this.elementRef = inject(ElementRef);
         this.#panelRef = inject(SELECT_PANEL_INSTANCE);
+        this.#keyManager = inject(CoreSelectKeyManager, { optional: true });
         this.#selectRef = inject(ALuSelectInputComponent);
-        this.id = signal('', ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
-        this.elementId = input('', ...(ngDevMode ? [{ debugName: "elementId" }] : /* istanbul ignore next */ []));
-        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.id = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+        this.elementId = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "elementId" }] : /* istanbul ignore next */ []));
+        this.idAttribute = computed(() => this.id() || this.elementId(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "idAttribute" }] : /* istanbul ignore next */ []));
+        this.isSelected = model(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isSelected" }] : /* istanbul ignore next */ []));
+        this.option = input(/* @ts-ignore */
+        ...(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.disabledRef = linkedSignal(() => this.disabledInput(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabledRef" }] : /* istanbul ignore next */ []));
+        this.isHighlighted = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isHighlighted" }] : /* istanbul ignore next */ []));
         this.selected = output();
         this.#panelRef.options.set([...this.#panelRef.options(), this]);
     }
@@ -240,10 +361,16 @@ class CoreSelectPanelElement {
     setInactiveStyles() {
         this.isHighlighted.set(false);
     }
-    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 }); }
+    onMouseEnter() {
+        if (!this.#keyManager || this.disabled || !untracked(this.#panelRef.pointerNavigation)) {
+            return;
+        }
+        this.#keyManager.setActiveItemByElement(this);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CoreSelectPanelElement, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", 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" }, listeners: { "mouseenter": "onMouseEnter()" }, 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.14", ngImport: i0, type: CoreSelectPanelElement, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CoreSelectPanelElement, decorators: [{
             type: Directive,
             args: [{
                     selector: '[luCoreSelectPanelElement]',
@@ -252,6 +379,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         '[attr.id]': 'idAttribute()',
                         '[attr.aria-selected]': 'isSelected()',
                         '[class.is-highlighted]': 'isHighlighted()',
+                        '(mouseenter)': 'onMouseEnter()',
                         role: 'option',
                     },
                 }]
@@ -262,10 +390,10 @@ 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.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() }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ɵIsSelectedStrategy, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ɵIsSelectedStrategy, providedIn: 'root', useFactory: () => new DefaultIsSelectedStrategy() }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ɵIsSelectedStrategy, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ɵIsSelectedStrategy, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -299,32 +427,43 @@ const luOptionTranslations = Translations$1;
 
 const MAGIC_OPTION_SCROLL_DELAY = 15;
 class LuOptionComponent {
+    #panelRef;
     get id() {
         const groupPart = this.groupIndex() === undefined ? `` : `-group-${this.groupIndex()}`;
         return `lu-select-${this.selectId}${groupPart}-option-${this.optionIndex()}`;
     }
     constructor() {
+        this.#panelRef = inject(SELECT_PANEL_INSTANCE);
         this.selectableItem = inject(CoreSelectPanelElement);
-        this.intl = input(...intlInputOptions(LU_OPTION_TRANSLATIONS), ...(ngDevMode ? [{ debugName: "intl" }] : /* istanbul ignore next */ []));
-        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.intl = input(...intlInputOptions(LU_OPTION_TRANSLATIONS), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "intl" }] : /* istanbul ignore next */ []));
+        this.optionTpl = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "optionTpl" }] : /* istanbul ignore next */ []));
+        this.option = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "option" }] : /* istanbul ignore next */ []));
+        this.grouping = input(/* @ts-ignore */
+        ...(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.groupIndex = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "groupIndex" }] : /* istanbul ignore next */ []));
         this.optionIndex = input.required({ ...(ngDevMode ? { debugName: "optionIndex" } : /* istanbul ignore next */ {}), transform: (value) => `${value}` });
-        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.scrollIntoViewOptions = input({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "scrollIntoViewOptions" }] : /* istanbul ignore next */ []));
+        this.groupTemplateLocation = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "groupTemplateLocation" }] : /* istanbul ignore next */ []));
+        this.optionContext = viewChild(LU_OPTION_CONTEXT, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "optionContext" }] : /* istanbul ignore next */ []));
         this.cdr = inject(ChangeDetectorRef);
         this.elementRef = inject(ElementRef);
         this.selectId = inject(SELECT_ID);
-        _effectWithDeps([this.selectableItem.isHighlighted], (isHighlighted) => {
-            if (isHighlighted) {
-                setTimeout(() => {
+        _effectWithDeps([this.selectableItem.isHighlighted], (isHighlighted, onCleanup) => {
+            if (isHighlighted && !untracked(this.#panelRef.pointerNavigation)) {
+                const timeoutId = setTimeout(() => {
                     this.elementRef.nativeElement.scrollIntoView(this.scrollIntoViewOptions());
                 }, MAGIC_OPTION_SCROLL_DELAY);
+                onCleanup(() => clearTimeout(timeoutId));
             }
         });
         _effectWithDeps([this.optionContext], (optionContext, onCleanup) => {
@@ -346,14 +485,14 @@ class LuOptionComponent {
             $event.stopPropagation();
         }
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: LuOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", 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)}:host-context(.optionItem.is-highlighted) .optionItem-value.is-selected,:host-context(.optionItem.is-highlighted) :host-context([aria-selected=true]) .optionItem-value{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(.optionItem.is-highlighted) .optionItem-value{background-color:var(--palettes-neutral-50)}.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(.optionItem.is-highlighted) :host-context(.lu-select-value) .optionItem-value{background-color:inherit}}@layer mods{:host-context(.mod-multiple) .optionItem-value,.formerEmployeeDisplayer .optionItem-value,.archivedLegalUnitsDisplayer .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,.archivedLegalUnitsDisplayer .optionItem-value:after,.archivedLegalUnitsDisplayer .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,.archivedLegalUnitsDisplayer .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,.archivedLegalUnitsDisplayer .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,.archivedLegalUnitsDisplayer .optionItem-value.is-selected:before,:host-context([aria-selected=true]) .archivedLegalUnitsDisplayer .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,.archivedLegalUnitsDisplayer .optionItem-value.is-selected:after,:host-context([aria-selected=true]) .archivedLegalUnitsDisplayer .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,.archivedLegalUnitsDisplayer .optionItem-value.is-selected.is-disabled,:host-context([aria-selected=true]) .archivedLegalUnitsDisplayer .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,.archivedLegalUnitsDisplayer .optionItem-value.is-selected.is-disabled:after,:host-context([aria-selected=true]) .archivedLegalUnitsDisplayer .optionItem-value.is-disabled:after{color:var(--palettes-neutral-500)}:host-context(.mod-multiple) .optionItem-value.is-disabled,.formerEmployeeDisplayer .optionItem-value.is-disabled,.archivedLegalUnitsDisplayer .optionItem-value.is-disabled{--components-options-checkbox-border-color: var(--palettes-neutral-500)}:host-context(.optionItem.is-highlighted) :host-context(.mod-multiple) .optionItem-value:not(.is-disabled):before,:host-context(.optionItem.is-highlighted) .formerEmployeeDisplayer .optionItem-value:not(.is-disabled):before,:host-context(.optionItem.is-highlighted) .archivedLegalUnitsDisplayer .optionItem-value:not(.is-disabled):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,.archivedLegalUnitsDisplayer.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,.archivedLegalUnitsDisplayer.establishmentOption .optionItem-value:before,.archivedLegalUnitsDisplayer.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.14", ngImport: i0, type: LuOptionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: LuOptionComponent, decorators: [{
             type: Component,
             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"] }]
+                    }, 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)}:host-context(.optionItem.is-highlighted) .optionItem-value.is-selected,:host-context(.optionItem.is-highlighted) :host-context([aria-selected=true]) .optionItem-value{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(.optionItem.is-highlighted) .optionItem-value{background-color:var(--palettes-neutral-50)}.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(.optionItem.is-highlighted) :host-context(.lu-select-value) .optionItem-value{background-color:inherit}}@layer mods{:host-context(.mod-multiple) .optionItem-value,.formerEmployeeDisplayer .optionItem-value,.archivedLegalUnitsDisplayer .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,.archivedLegalUnitsDisplayer .optionItem-value:after,.archivedLegalUnitsDisplayer .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,.archivedLegalUnitsDisplayer .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,.archivedLegalUnitsDisplayer .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,.archivedLegalUnitsDisplayer .optionItem-value.is-selected:before,:host-context([aria-selected=true]) .archivedLegalUnitsDisplayer .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,.archivedLegalUnitsDisplayer .optionItem-value.is-selected:after,:host-context([aria-selected=true]) .archivedLegalUnitsDisplayer .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,.archivedLegalUnitsDisplayer .optionItem-value.is-selected.is-disabled,:host-context([aria-selected=true]) .archivedLegalUnitsDisplayer .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,.archivedLegalUnitsDisplayer .optionItem-value.is-selected.is-disabled:after,:host-context([aria-selected=true]) .archivedLegalUnitsDisplayer .optionItem-value.is-disabled:after{color:var(--palettes-neutral-500)}:host-context(.mod-multiple) .optionItem-value.is-disabled,.formerEmployeeDisplayer .optionItem-value.is-disabled,.archivedLegalUnitsDisplayer .optionItem-value.is-disabled{--components-options-checkbox-border-color: var(--palettes-neutral-500)}:host-context(.optionItem.is-highlighted) :host-context(.mod-multiple) .optionItem-value:not(.is-disabled):before,:host-context(.optionItem.is-highlighted) .formerEmployeeDisplayer .optionItem-value:not(.is-disabled):before,:host-context(.optionItem.is-highlighted) .archivedLegalUnitsDisplayer .optionItem-value:not(.is-disabled):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,.archivedLegalUnitsDisplayer.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,.archivedLegalUnitsDisplayer.establishmentOption .optionItem-value:before,.archivedLegalUnitsDisplayer.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 {
@@ -365,16 +504,49 @@ class LuOptionDirective {
     static ngTemplateContextGuard(_dir, _ctx) {
         return true;
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: LuOptionDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", 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.14", ngImport: i0, type: LuOptionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: LuOptionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[luOption]',
                 }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { select: [{ type: i0.Input, args: [{ isSignal: true, alias: "luOptionSelect", required: false }] }] } });
 
+function buildOptionsFromDataSource(ds, deps) {
+    const { nextPage$, clue$, isPanelOpen$, setLoading } = deps;
+    const page$ = nextPage$.pipe(scan((page) => page + 1, 0), startWith(0));
+    const normalizedClue$ = clue$.pipe(map((clue) => clue ?? ''), distinctUntilChanged());
+    // If a debounce is specified:
+    // - empty clue ('') passes through immediately (initial state / clear)
+    // - non-empty clue is debounced (user is typing)
+    const debouncedClue$ = ds.clueDebounceMs ? normalizedClue$.pipe(switchMap((clue) => (clue ? timer(ds.clueDebounceMs).pipe(map(() => clue)) : of(clue)))) : normalizedClue$;
+    return isPanelOpen$.pipe(distinctUntilChanged(), switchMap((isOpen) => {
+        if (!isOpen) {
+            return of([]);
+        }
+        return debouncedClue$.pipe(switchMap((clue) => {
+            ds.reset?.();
+            return page$.pipe(concatMap((page) => {
+                setLoading(true);
+                return ds.getOptions({ clue, page }).pipe(catchError(() => of([])), tap(() => setLoading(false)), startWith([]), map((items) => ({ items, page })));
+            }), scan((acc, { items, page }) => {
+                acc[page] = items;
+                return acc;
+            }, {}), 
+            // Stop calling pages when last two pages are empty
+            takeWhile((pages) => {
+                const indexes = Object.keys(pages)
+                    .map((p) => parseInt(p))
+                    .sort((a, b) => a - b);
+                const lastIndexes = indexes.slice(-2);
+                return lastIndexes.length < 2 || !lastIndexes.every((i) => pages[i]?.length === 0);
+            }), map((pages) => Object.values(pages).flat()), finalize(() => setLoading(false)));
+        }));
+    }));
+}
+
 const coreSelectDefaultOptionComparer = (option1, option2) => JSON.stringify(option1) === JSON.stringify(option2);
 const coreSelectDefaultOptionKey = (option) => option;
 class ALuSelectInputComponent {
@@ -435,6 +607,18 @@ class ALuSelectInputComponent {
             this.lastEmittedClue = clue;
         }
     }
+    getDefaultDataSource() {
+        let emittedKeys = new Set();
+        return {
+            getOptions: (_params) => {
+                let lastEmittedThisPage = [];
+                return this.manualOptions$.pipe(tap((options) => (lastEmittedThisPage = options)), takeUntil(this.nextPage$), finalize(() => (emittedKeys = new Set(lastEmittedThisPage.map((p) => this.optionKey()(p))))), map((options) => options.filter((c) => !emittedKeys.has(this.optionKey()(c)))));
+            },
+            reset() {
+                emittedKeys.clear();
+            },
+        };
+    }
     get panelRef() {
         return this._panelRef;
     }
@@ -450,57 +634,88 @@ class ALuSelectInputComponent {
         this.panelClosed = output();
         this.panelOpened = output();
         this.highlightedOption = output();
-        this.inputElementRef = viewChild('inputElement', ...(ngDevMode ? [{ debugName: "inputElementRef" }] : /* istanbul ignore next */ []));
+        this.inputElementRef = viewChild('inputElement', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inputElementRef" }] : /* istanbul ignore next */ []));
         this.disabled$ = new BehaviorSubject(false);
         this.filterPillDisabled = toSignal(this.disabled$, { initialValue: false });
-        this.prefix = input(null, ...(ngDevMode ? [{ debugName: "prefix" }] : /* 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.prefix = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "prefix" }] : /* istanbul ignore next */ []));
+        this.placeholder = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        this.clearableInput = input(null, { ...(ngDevMode ? { debugName: "clearableInput" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'clearable' });
+        this.isClearable = computed(() => this.clearableInput() ?? this.#defaultFilterPillClearable() ?? this.#defaultClearable, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isClearable" }] : /* istanbul ignore next */ []));
+        this.#defaultFilterPillClearable = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#defaultFilterPillClearable" }] : /* istanbul ignore next */ []));
         this.#defaultClearable = false;
-        this.computedAddOptionLabel = computed(() => this.addOptionLabelInput() ?? this.intl().addOption, ...(ngDevMode ? [{ debugName: "computedAddOptionLabel" }] : /* istanbul ignore next */ []));
+        this.computedAddOptionLabel = computed(() => this.addOptionLabelInput() ?? this.intl().addOption, /* @ts-ignore */
+        ...(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.addOptionStrategy = input('never', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "addOptionStrategy" }] : /* istanbul ignore next */ []));
         this.isPanelOpen$ = new BehaviorSubject(false);
+        // TODO Might be temporary, check after merging signalize PR
+        this.panelOpenSignal = toSignal(this.isPanelOpen$);
         this.activeDescendant$ = new BehaviorSubject('');
-        this.overlayConfig = input({ hasBackdrop: true, backdropClass: 'cdk-overlay-transparent-backdrop' }, ...(ngDevMode ? [{ debugName: "overlayConfig" }] : /* istanbul ignore next */ []));
+        this.manualOptions$ = new ReplaySubject(1);
+        this.overlayConfig = input({ hasBackdrop: true, backdropClass: 'cdk-overlay-transparent-backdrop' }, /* @ts-ignore */
+        ...(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.inputTabindex = input(0, /* @ts-ignore */
+        ...(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 */ []));
-        this.panelFooterTpl = model(...(ngDevMode ? [undefined, { debugName: "panelFooterTpl" }] : /* istanbul ignore next */ []));
-        this.displayerTpl = computed(() => this.valueTpl() || this.optionTpl(), ...(ngDevMode ? [{ debugName: "displayerTpl" }] : /* istanbul ignore next */ []));
-        this.groupingSignal = signal(undefined, ...(ngDevMode ? [{ debugName: "groupingSignal" }] : /* istanbul ignore next */ []));
+        this.options = linkedSignal(() => this.optionsInput(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+        this.loading = linkedSignal(() => this.loadingInput(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+        this.clearable = linkedSignal(() => this.clearableInput(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "clearable" }] : /* istanbul ignore next */ []));
+        this.optionComparer = linkedSignal(() => this.optionComparerInput(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "optionComparer" }] : /* istanbul ignore next */ []));
+        this.optionKey = linkedSignal(() => this.optionKeyInput(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "optionKey" }] : /* istanbul ignore next */ []));
+        this.optionTpl = model(LuSimpleSelectDefaultOptionComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "optionTpl" }] : /* istanbul ignore next */ []));
+        this.valueTpl = model(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "valueTpl" }] : /* istanbul ignore next */ []));
+        this.panelHeaderTpl = model(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "panelHeaderTpl" }] : /* istanbul ignore next */ []));
+        this.panelFooterTpl = model(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "panelFooterTpl" }] : /* istanbul ignore next */ []));
+        this.displayerTpl = computed(() => this.valueTpl() || this.optionTpl(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "displayerTpl" }] : /* istanbul ignore next */ []));
+        this.groupingSignal = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "groupingSignal" }] : /* istanbul ignore next */ []));
         this.clueChange$ = new Subject();
         this.clueChange = outputFromObservable(this.clueChange$);
         this.nextPage$ = new Subject();
         this.nextPage = outputFromObservable(this.nextPage$);
-        this.previousPage = output();
         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.isClearable(), ...(ngDevMode ? [{ debugName: "isFilterPillClearable" }] : /* istanbul ignore next */ []));
+        this.valueSignal = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "valueSignal" }] : /* istanbul ignore next */ []));
+        this.isFilterPillEmpty = computed(() => this.valueSignal() === null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isFilterPillEmpty" }] : /* istanbul ignore next */ []));
+        this.isFilterPillClearable = computed(() => this.isClearable(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isFilterPillClearable" }] : /* istanbul ignore next */ []));
         this._value = null;
-        this.options$ = new ReplaySubject(1);
-        this.loading$ = toObservable(this.loading);
+        this.dataSource = model(this.getDefaultDataSource(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ []));
+        this.dataSourceOptions = toSignal(toObservable(this.dataSource).pipe(switchMap((ds) => buildOptionsFromDataSource(ds, {
+            nextPage$: this.nextPage$,
+            clue$: this.clue$,
+            isPanelOpen$: this.isPanelOpen$,
+            setLoading: (v) => this.loading.set(v),
+        }))), { initialValue: [] });
         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.shouldDisplayAddOption$ = toObservable(this.addOptionStrategy).pipe(switchMap((strategy) => {
+        this.shouldDisplayAddOption = toSignal(toObservable(this.addOptionStrategy).pipe(switchMap((strategy) => {
             switch (strategy) {
                 case 'always':
                     return of(true);
@@ -511,24 +726,26 @@ class ALuSelectInputComponent {
                 case 'if-not-empty-clue':
                     return this.clue$.pipe(map((clue) => !!clue));
             }
-        }));
+        })));
         this.destroyed$ = new Subject();
+        this.injector = inject(Injector);
         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'));
-                    });
-                }
+                this.manualOptions$.next(options);
+            }
+        });
+        // When options arrive asynchronously via a dataSource, dataSourceOptions changes but options doesn't.
+        // We need to reposition the panel after the DOM updates in both cases.
+        _effectWithDeps([this.dataSourceOptions], (_options, onCleanup) => {
+            if (isNotNil(this.panelRef)) {
+                const ref = afterNextRender(() => {
+                    this.panelRef?.updatePosition();
+                    this.updatePositionFn?.();
+                }, { injector: this.injector });
+                onCleanup(() => ref.destroy());
             }
         });
     }
@@ -581,6 +798,12 @@ class ALuSelectInputComponent {
                 }
                 break;
             default:
+                // Let the browser handle modifier chords like Ctrl/Cmd+V (paste) or Ctrl/Cmd+C (copy)
+                // instead of treating the chord's letter (e.g. the "v" of Ctrl+V) as typeahead input.
+                // AltGr (Ctrl+Alt on Windows) is excluded so accented/special characters still work.
+                if (($event.ctrlKey || $event.metaKey) && !$event.altKey) {
+                    return;
+                }
                 // For any other key, forward it to the panel if it's open
                 if (this.isPanelOpen) {
                     this.panelRef?.handleKeyManagerEvent($event);
@@ -603,8 +826,6 @@ class ALuSelectInputComponent {
     }
     ngOnDestroy() {
         this.closePanel();
-        this.destroyed$.next();
-        this.destroyed$.complete();
     }
     ngOnInit() {
         if (this.labelElement) {
@@ -636,9 +857,10 @@ class ALuSelectInputComponent {
             if (this.isPanelOpen) {
                 return;
             }
+            const isSearchable = this.searchable;
             this.isPanelOpen$.next(true);
             this.panelOpened.emit();
-            if (this.searchable) {
+            if (isSearchable) {
                 this.clueChanged(clue);
             }
             this._panelRef = this.buildPanelRef();
@@ -654,8 +876,7 @@ class ALuSelectInputComponent {
             return;
         }
         this.panelRef.valueChanged.subscribe((value) => this.updateValue(value));
-        this.#pageChanged(this.panelRef.nextPage).subscribe(() => this.nextPage$.next());
-        this.#pageChanged(this.panelRef.previousPage).subscribe(() => this.previousPage.emit());
+        this.panelRef.nextPage.subscribe(() => this.nextPage$.next());
         this.panelRef.activeOptionIdChanged.subscribe((optionId) => {
             this.activeDescendant$.next(optionId);
             this.changeDetectorRef.markForCheck();
@@ -674,6 +895,7 @@ class ALuSelectInputComponent {
         }
     }
     closePanel() {
+        this.dataSource().reset?.();
         if (!this.isPanelOpen) {
             return;
         }
@@ -702,10 +924,6 @@ class ALuSelectInputComponent {
         this.onChange?.(value);
         this.onTouched?.();
     }
-    // Ensure nextPage/previousPage does not emit too often
-    #pageChanged(pageEmitter) {
-        return this.options$.pipe(switchMap(() => pageEmitter.pipe(take(1))));
-    }
     // Filter pill interface
     clearFilterPillValue() {
         this.clearValue();
@@ -728,10 +946,10 @@ class ALuSelectInputComponent {
     onFilterPillClosed() {
         this.isPanelOpen$.next(false);
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ALuSelectInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.0.7", 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 }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", 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", addOption: "addOption", dataSource: "dataSourceChange" }, 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.14", ngImport: i0, type: ALuSelectInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ALuSelectInputComponent, decorators: [{
             type: Directive,
             args: [{
                     host: {
@@ -745,7 +963,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         '(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: 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"] }] } });
+        }], 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"] }], addOption: [{ type: i0.Output, args: ["addOption"] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }, { type: i0.Output, args: ["dataSourceChange"] }] } });
 
 let selectId = 0;
 function selectIdFactory() {
@@ -787,15 +1005,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.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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: LuCoreSelectTotalCountDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", 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.14", ngImport: i0, type: LuCoreSelectTotalCountDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: LuCoreSelectTotalCountDirective, decorators: [{
             type: Directive,
             args: [{
                     // The attribute is already prefixed with "lu-simple-select"
@@ -814,10 +1032,10 @@ class TreeDisplayPipe {
     transform(items, treeGenerator) {
         return treeGenerator.generateTrees(items);
     }
-    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" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TreeDisplayPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: TreeDisplayPipe, isStandalone: true, name: "luTreeDisplay" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TreeDisplayPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TreeDisplayPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'luTreeDisplay',
@@ -829,10 +1047,10 @@ class LuCoreSelectNoClueDirective {
     constructor() {
         inject(ALuSelectInputComponent).clueChange$.complete();
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: LuCoreSelectNoClueDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: LuCoreSelectNoClueDirective, isStandalone: true, selector: "lu-simple-select[noClue],lu-multi-select[noClue]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuCoreSelectNoClueDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: LuCoreSelectNoClueDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -840,108 +1058,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
-class CoreSelectKeyManager {
-    #destroyRef = inject(DestroyRef);
-    #cdkKeyManager;
-    #hasSearchChanged = false;
-    #options;
-    #injector = inject(Injector);
-    // eslint-disable-next-line @angular-eslint/prefer-signals
-    #queryList;
-    #queryList$;
-    init(options) {
-        this.#options = options;
-        this.#queryList = computed(() => {
-            return [...options.queryList()].sort((a, b) => {
-                const comparison = a.elementRef.nativeElement.compareDocumentPosition(b.elementRef.nativeElement);
-                if (comparison & Node.DOCUMENT_POSITION_FOLLOWING) {
-                    return -1;
-                }
-                if (comparison & Node.DOCUMENT_POSITION_PRECEDING) {
-                    return 1;
-                }
-                return 0;
-            });
-        }, ...(ngDevMode ? [{ debugName: "#queryList" }] : /* istanbul ignore next */ []));
-        this.#queryList$ = toObservable(this.#queryList, { injector: this.#injector });
-        this.#cdkKeyManager = new ActiveDescendantKeyManager(this.#queryList, this.#injector).withHomeAndEnd();
-        this.#bindClueChange(options.clueChange$);
-        this.#bindOptionsChange(options);
-        this.#bindActiveOptionIdChanged(options.activeOptionIdChanged$);
-        this.#cdkKeyManager.setFirstItemActive();
-    }
-    onKeydown(event) {
-        this.#cdkKeyManager?.onKeydown(event);
-    }
-    get activeItem() {
-        return this.#cdkKeyManager?.activeItem ?? undefined;
-    }
-    get activeItemIndex() {
-        return this.#cdkKeyManager?.activeItemIndex ?? -1;
-    }
-    setActiveItem(index) {
-        this.#cdkKeyManager?.setActiveItem(index);
-    }
-    highlightOption(option) {
-        if (!this.#options) {
-            return;
-        }
-        const { optionComparer } = this.#options;
-        this.#queryList$
-            .pipe(observeOn(asyncScheduler), map((options) => options.findIndex((el) => {
-            const elOption = el.option();
-            return isNotNil(elOption) && optionComparer(elOption, option);
-        })), filter((index) => index !== -1), take(1), takeUntilDestroyed(this.#destroyRef))
-            .subscribe((selectedIndex) => this.setActiveItem(selectedIndex));
-    }
-    #bindClueChange(clueChange$) {
-        clueChange$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(() => {
-            this.#hasSearchChanged = true;
-        });
-    }
-    #bindActiveOptionIdChanged(activeOptionIdChanged$) {
-        const keyManager = this.#cdkKeyManager;
-        if (!keyManager) {
-            return;
-        }
-        keyManager.change
-            .pipe(map(() => keyManager.activeItem?.idAttribute() ?? ''), takeUntilDestroyed(this.#destroyRef))
-            .subscribe((activeDescendant) => activeOptionIdChanged$.emit(activeDescendant));
-    }
-    /**
-     * Ensure always have the correct highlighted item:
-     * 	- reset to null if no options
-     * 	- set to first item if search has changed
-     * 	- 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) {
-                keyManager.setActiveItem(-1);
-            }
-            else if (this.#hasSearchChanged) {
-                this.#hasSearchChanged = false;
-                keyManager.setFirstItemActive();
-            }
-            else if (!keyManager.activeItem) {
-                keyManager.setFirstItemActive();
-            }
-        });
-    }
-    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.14", ngImport: i0, type: CoreSelectKeyManager, decorators: [{
-            type: Injectable
-        }] });
-
 class LuCoreSelectPanelHeaderDirective {
     constructor() {
         this.templateRef = inject(TemplateRef);
@@ -954,10 +1070,10 @@ class LuCoreSelectPanelHeaderDirective {
     static ngTemplateContextGuard(_dir, _ctx) {
         return true;
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: LuCoreSelectPanelHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", 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.14", ngImport: i0, type: LuCoreSelectPanelHeaderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: LuCoreSelectPanelHeaderDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[luSelectPanelHeader]',
@@ -967,7 +1083,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
 class LuSelectPanelRef {
     constructor() {
         this.closed = new EventEmitter();
-        this.previousPage = new EventEmitter();
         this.nextPage = new EventEmitter();
         this.valueChanged = new EventEmitter();
         this.clueChanged = new EventEmitter();
@@ -977,7 +1092,6 @@ class LuSelectPanelRef {
         this.closed.next();
         this.closed.complete();
         this.nextPage.complete();
-        this.previousPage.complete();
         this.valueChanged.complete();
         this.clueChanged.emit('');
         this.clueChanged.complete();
@@ -989,16 +1103,18 @@ class LuSelectPanelRef {
  * In order to avoid a blinking when we go from empty clue to a clue
  * We need to delay the change of group displayer location by waiting for the options to be updated.
  */
-function getGroupTemplateLocation(hasGrouping$, clueChange$, options$, searchable = true) {
-    return hasGrouping$.pipe(switchMap((hasGrouping) => {
-        if (!hasGrouping) {
-            return of('none');
+function getGroupTemplateLocation(hasGrouping, clue, searchable = true) {
+    const hasClue = computed(() => !!clue(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasClue" }] : /* istanbul ignore next */ []));
+    return computed(() => {
+        if (!hasGrouping()) {
+            return 'none';
         }
-        const getGroupTemplateLocation$ = (hasClue) => options$.pipe(skip(1), take(1), map(() => (hasClue ? 'option' : 'group-header')), startWith('group-header'));
-        return searchable
-            ? clueChange$.pipe(map((clue) => !!clue), distinctUntilChanged(), switchMap(getGroupTemplateLocation$))
-            : getGroupTemplateLocation$(false);
-    }));
+        if (!searchable) {
+            return 'group-header';
+        }
+        return hasClue() ? 'option' : 'group-header';
+    });
 }
 
 const Translations = {
@@ -1026,6 +1142,9 @@ const Translations = {
     en: {
         addOption: 'Add option',
     },
+    pl: {
+        addOption: 'Dodaj opcję',
+    },
 };
 
 const LU_CORE_SELECT_TRANSLATIONS = new InjectionToken('LuCoreSelectTranslations', {
@@ -1040,10 +1159,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.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" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: LuIsOptionSelectedPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: LuIsOptionSelectedPipe, isStandalone: true, name: "luIsOptionSelected" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuIsOptionSelectedPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: LuIsOptionSelectedPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'luIsOptionSelected',