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

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

@@ -1,36 +1,32 @@
 import * as i0 from '@angular/core';
-import { Input, Directive, InjectionToken, inject, ChangeDetectionStrategy, Component, TemplateRef, Pipe, ViewContainerRef, Injector, ElementRef, signal, input, computed, model, output, Injectable, booleanAttribute, ChangeDetectorRef, effect, ViewChild, HostBinding, HostListener, forwardRef, DestroyRef, untracked, EventEmitter } from '@angular/core';
+import { input, Directive, InjectionToken, inject, ChangeDetectionStrategy, Component, TemplateRef, Pipe, ViewContainerRef, Injector, 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 { isNotNil, intlInputOptions, PortalDirective } from '@lucca-front/ng/core';
 import { LuTooltipTriggerDirective } from '@lucca-front/ng/tooltip';
 import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
 
 class LuDisplayerDirective {
-    set select(select) {
-        select.valueTpl.set(this.templateRef);
-    }
     constructor(templateRef) {
         this.templateRef = templateRef;
+        this.select = input(undefined, { ...(ngDevMode ? { debugName: "select" } : /* istanbul ignore next */ {}), alias: 'luDisplayerSelect' });
+        syncInputSignal(this.select, (select) => select.valueTpl.set(this.templateRef));
     }
     static ngTemplateContextGuard(_dir, _ctx) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuDisplayerDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: LuDisplayerDirective, isStandalone: true, selector: "[luDisplayer]", inputs: { select: ["luDisplayerSelect", "select"] }, 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]',
                 }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { select: [{
-                type: Input,
-                args: ['luDisplayerSelect']
-            }] } });
+        }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { select: [{ type: i0.Input, args: [{ isSignal: true, alias: "luDisplayerSelect", required: false }] }] } });
 
 const LU_OPTION_CONTEXT = new InjectionToken('LuOptionContext');
 function optionContextFactory() {
@@ -56,61 +52,51 @@ class LuSimpleSelectDefaultOptionComponent {
     constructor() {
         this.context = inject(LU_OPTION_CONTEXT);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.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" }]
         }] });
 
 class LuDisabledOptionDirective {
     constructor() {
+        this.isDisabled = input(undefined, { ...(ngDevMode ? { debugName: "isDisabled" } : /* istanbul ignore next */ {}), alias: 'luDisabledOption' });
         this.context = inject(LU_OPTION_CONTEXT);
+        syncInputSignal(this.isDisabled, (disabled) => this.context.isDisabled$.next(disabled));
     }
-    set isDisabled(disabled) {
-        if (disabled !== null) {
-            this.context.isDisabled$.next(disabled);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuDisabledOptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: LuDisabledOptionDirective, isStandalone: true, selector: "[luDisabledOption]", inputs: { isDisabled: ["luDisabledOption", "isDisabled"] }, 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]',
                 }]
-        }], propDecorators: { isDisabled: [{
-                type: Input,
-                args: ['luDisabledOption']
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "luDisabledOption", required: false }] }] } });
 
 class LuOptionGroupDirective {
-    constructor() {
-        this.content = inject(TemplateRef);
-    }
     static ngTemplateContextGuard(_dir, _ctx) {
         return true;
     }
-    ngOnInit() {
-        this.select.groupingSignal.set(this);
+    constructor() {
+        this.select = input.required({ ...(ngDevMode ? { debugName: "select" } : /* istanbul ignore next */ {}), alias: 'luOptionGroupSelect' });
+        this.selector = input.required({ ...(ngDevMode ? { debugName: "selector" } : /* istanbul ignore next */ {}), alias: 'luOptionGroupBy' });
+        this.content = inject(TemplateRef);
+        _effectWithDeps([this.select, this.selector], (select, selector) => {
+            select.groupingSignal.set({ selector, content: this.content });
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuOptionGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: LuOptionGroupDirective, isStandalone: true, selector: "[luOptionGroup]", inputs: { select: ["luOptionGroupSelect", "select"], selector: ["luOptionGroupBy", "selector"] }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "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]',
                 }]
-        }], propDecorators: { select: [{
-                type: Input,
-                args: ['luOptionGroupSelect']
-            }], selector: [{
-                type: Input,
-                args: ['luOptionGroupBy']
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { select: [{ type: i0.Input, args: [{ isSignal: true, alias: "luOptionGroupSelect", required: true }] }], selector: [{ type: i0.Input, args: [{ isSignal: true, alias: "luOptionGroupBy", required: true }] }] } });
 
 /**
  * Generate groups with a O(n) complexity. Note that the options must be sorted by group.
@@ -142,45 +128,57 @@ 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',
                 }]
         }] });
 
-function hasRenderableValue(value) {
-    return isNotNil(value);
+function hasRenderableValue(value, showNull) {
+    return showNull ? value !== undefined : isNotNil(value);
 }
 class LuOptionOutletDirective {
     constructor() {
-        this.luOptionShowNull = false;
+        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);
-    }
-    ngOnChanges(changes) {
-        if (changes['luOptionOutlet'] || !hasRenderableValue(this.luOptionOutletValue)) {
-            this.clearContainer();
-        }
-        const hasRef = this.embeddedViewRef || this.componentRef;
-        if (changes['luOptionOutlet']) {
-            // Outlet template changed: recreate if current value is renderable
-            if (hasRenderableValue(this.luOptionOutletValue)) {
-                this.createComponent();
+        let previousOutlet;
+        _effectWithDeps([this.luOptionOutlet, this.luOptionOutletValue, this.luOptionShowNull], (outlet, value, showNull) => {
+            const outletChanged = outlet !== previousOutlet;
+            previousOutlet = outlet;
+            if (outletChanged || !hasRenderableValue(value, showNull)) {
+                this.clearContainer();
             }
-        }
-        else if (changes['luOptionOutletValue']) {
-            if (!hasRef && hasRenderableValue(this.luOptionOutletValue)) {
-                this.createComponent();
-            }
-            else if (hasRef) {
-                this.updateRefValue();
+            if (outlet && hasRenderableValue(value, showNull)) {
+                if (!(this.embeddedViewRef || this.componentRef)) {
+                    if (outlet instanceof TemplateRef) {
+                        this.embeddedViewRef = this.viewContainerRef.createEmbeddedView(outlet, { $implicit: value }, { injector: this.injector });
+                    }
+                    else {
+                        this.optionContext.option$.next(value);
+                        this.componentRef = this.viewContainerRef.createComponent(outlet, { injector: this.injector });
+                    }
+                }
+                else {
+                    if (this.embeddedViewRef) {
+                        this.embeddedViewRef.context.$implicit = value;
+                    }
+                    else if (this.componentRef) {
+                        this.optionContext.option$.next(value);
+                    }
+                }
             }
-        }
+        });
     }
     ngOnDestroy() {
         this.optionContext.destroy();
@@ -192,65 +190,161 @@ class LuOptionOutletDirective {
         this.embeddedViewRef = undefined;
         this.componentRef = undefined;
     }
-    createComponent() {
-        if (!this.luOptionOutlet || !hasRenderableValue(this.luOptionOutletValue)) {
-            return;
-        }
-        if (this.luOptionOutlet instanceof TemplateRef) {
-            this.embeddedViewRef = this.viewContainerRef.createEmbeddedView(this.luOptionOutlet, { $implicit: this.luOptionOutletValue }, { injector: this.injector });
-        }
-        else {
-            this.optionContext.option$.next(this.luOptionOutletValue);
-            this.componentRef = this.viewContainerRef.createComponent(this.luOptionOutlet, { injector: this.injector });
-        }
-    }
-    updateRefValue() {
-        if (!hasRenderableValue(this.luOptionOutletValue)) {
-            this.clearContainer();
-            return;
-        }
-        if (this.embeddedViewRef) {
-            this.embeddedViewRef.context.$implicit = this.luOptionOutletValue;
-        }
-        else if (this.componentRef) {
-            this.optionContext.option$.next(this.luOptionOutletValue);
-        }
-    }
     static ngTemplateContextGuard(_dir, _ctx) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuOptionOutletDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: LuOptionOutletDirective, isStandalone: true, selector: "[luOptionOutlet]", inputs: { luOptionOutlet: "luOptionOutlet", luOptionOutletValue: "luOptionOutletValue", luOptionShowNull: "luOptionShowNull" }, providers: [provideOptionContext()], usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "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]',
                     providers: [provideOptionContext()],
                 }]
-        }], propDecorators: { luOptionOutlet: [{
-                type: Input
-            }], luOptionOutletValue: [{
-                type: Input
-            }], luOptionShowNull: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { luOptionOutlet: [{ type: i0.Input, args: [{ isSignal: true, alias: "luOptionOutlet", required: false }] }], luOptionOutletValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "luOptionOutletValue", required: false }] }], luOptionShowNull: [{ type: i0.Input, args: [{ isSignal: true, alias: "luOptionShowNull", required: false }] }] } });
 
 const SELECT_PANEL_INSTANCE = new InjectionToken('CoreSelect:PanelInstance');
 
+class 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();
+    }
+    set disabled(disabled) {
+        this.disabledRef.set(disabled);
+    }
     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.isHighlighted = signal(false, ...(ngDevMode ? [{ debugName: "isHighlighted" }] : /* 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(), /* @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]);
     }
@@ -267,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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { isSelected: "isSelectedChange", selected: "selected" }, host: { attributes: { "role": "option" }, properties: { "attr.id": "idAttribute()", "attr.aria-selected": "isSelected()", "class.is-highlighted": "isHighlighted()" } }, exportAs: ["luCoreSelectPanelElement"], ngImport: i0 }); }
+    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]',
@@ -279,22 +379,21 @@ 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',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { elementId: [{ type: i0.Input, args: [{ isSignal: true, alias: "elementId", required: false }] }], isSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSelected", required: false }] }, { type: i0.Output, args: ["isSelectedChange"] }], option: [{ type: i0.Input, args: [{ isSignal: true, alias: "option", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }], disabled: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { elementId: [{ type: i0.Input, args: [{ isSignal: true, alias: "elementId", required: false }] }], isSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSelected", required: false }] }, { type: i0.Output, args: ["isSelectedChange"] }], option: [{ type: i0.Input, args: [{ isSignal: true, alias: "option", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
 
 const SELECT_ID = new InjectionToken('LuSelectPanelData');
 const SELECT_LABEL = new InjectionToken('LuSelectLabel');
 const SELECT_LABEL_ID = new InjectionToken('LuSelectLabelId');
 const CORE_SELECT_API_TOTAL_COUNT_PROVIDER = new InjectionToken('CoreSelectApiTotalCountProvider');
 class ɵIsSelectedStrategy {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.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',
@@ -328,126 +427,137 @@ 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.hasOptionItemClass = true;
+        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 = {};
-        this.groupTemplateLocation = input(...(ngDevMode ? [undefined, { debugName: "groupTemplateLocation" }] : /* 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);
-        effect(() => {
-            if (this.selectableItem.isHighlighted()) {
-                setTimeout(() => {
-                    this.elementRef.nativeElement.scrollIntoView(this.scrollIntoViewOptions);
+        _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) => {
+            if (isNil(optionContext)) {
+                return;
+            }
+            const subscription = optionContext.isDisabled$.pipe(observeOn(asyncScheduler)).subscribe((isDisabled) => {
+                this.selectableItem.disabled = isDisabled;
+                this.cdr.markForCheck();
+            });
+            onCleanup(() => subscription.unsubscribe());
+        });
     }
     ngOnInit() {
         this.selectableItem.id.set(this.id);
     }
-    ngOnDestroy() {
-        this.subscription?.unsubscribe();
-    }
-    ngAfterViewInit() {
-        if (!this.optionContext) {
-            return;
-        }
-        this.subscription = this.optionContext.isDisabled$.pipe(observeOn(asyncScheduler)).subscribe((isDisabled) => {
-            this.selectableItem.disabled = isDisabled;
-            this.cdr.markForCheck();
-        });
-    }
     selectOption($event) {
         if (this.selectableItem.disabled) {
             $event.stopPropagation();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.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: false, isRequired: false, transformFunction: null }, option: { classPropertyName: "option", publicName: "option", isSignal: false, isRequired: false, transformFunction: null }, grouping: { classPropertyName: "grouping", publicName: "grouping", isSignal: false, isRequired: false, transformFunction: null }, hasChildren: { classPropertyName: "hasChildren", publicName: "hasChildren", isSignal: true, isRequired: false, transformFunction: null }, groupIndex: { classPropertyName: "groupIndex", publicName: "groupIndex", isSignal: true, isRequired: false, transformFunction: null }, optionIndex: { classPropertyName: "optionIndex", publicName: "optionIndex", isSignal: true, isRequired: true, transformFunction: null }, scrollIntoViewOptions: { classPropertyName: "scrollIntoViewOptions", publicName: "scrollIntoViewOptions", isSignal: false, isRequired: false, transformFunction: null }, groupTemplateLocation: { classPropertyName: "groupTemplateLocation", publicName: "groupTemplateLocation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onlyParent: "onlyParent", onlyChildren: "onlyChildren" }, host: { properties: { "class.optionItem": "this.hasOptionItemClass" } }, viewQueries: [{ propertyName: "optionContext", first: true, predicate: LuOptionOutletDirective, descendants: true, read: LU_OPTION_CONTEXT, static: true }], ngImport: i0, template: "<div class=\"optionItem-value\" [class.is-disabled]=\"selectableItem.disabled\" (click)=\"selectOption($event)\">\n\t<ng-container *luOptionOutlet=\"optionTpl; value: selectableItem.option()\" />\n\n\t@if (groupTemplateLocation() === \"option\" && grouping) {\n\t\t<div class=\"optionItem-value-group\">\n\t\t\t<ng-container *luPortal=\"grouping.content; context: { $implicit: selectableItem.option() | luOptionGroup: grouping.selector }\" />\n\t\t</div>\n\t}\n\n\t@if (hasChildren() && !selectableItem.disabled) {\n\t\t<div class=\"optionItem-icons\">\n\t\t\t<span\n\t\t\t\tclass=\"optionItem-icon parentOnly\"\n\t\t\t\t(click)=\"$event.stopPropagation(); onlyParent.emit()\"\n\t\t\t\t[luTooltip]=\"intl().onlyParent\"\n\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t>\n\t\t\t\t<svg class=\"optionItem-icon-shape\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\">\n\t\t\t\t\t<path\n\t\t\t\t\t\topacity=\"0.2\"\n\t\t\t\t\t\td=\"M8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18ZM8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18Z\"\n\t\t\t\t\t/>\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7ZM4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7Z\"\n\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t\t<span class=\"pr-u-mask\">{{ intl().onlyParent }}</span>\n\t\t\t</span>\n\t\t\t<span\n\t\t\t\tclass=\"optionItem-icon childrenOnly\"\n\t\t\t\t(click)=\"$event.stopPropagation(); onlyChildren.emit()\"\n\t\t\t\t[luTooltip]=\"intl().onlyChildren\"\n\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t>\n\t\t\t\t<svg class=\"optionItem-icon-shape\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\">\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18ZM8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18Z\"\n\t\t\t\t\t/>\n\t\t\t\t\t<path\n\t\t\t\t\t\topacity=\"0.2\"\n\t\t\t\t\t\td=\"M4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7ZM4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7Z\"\n\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t\t<span class=\"pr-u-mask\">{{ intl().onlyChildren }}</span>\n\t\t\t</span>\n\t\t</div>\n\t}\n</div>\n", styles: ["@charset \"UTF-8\";@layer base{:root{--components-options-item-padding-vertical: var(--pr-t-spacings-50);--components-options-item-padding-horizontal: var(--pr-t-spacings-100);--components-options-item-multiple-padding: 2.25rem;--components-options-item-icon-color: var(--palettes-neutral-800);--components-options-checkbox-size: 1.25rem;--components-options-checkbox-color: var(--palettes-700, var(--palettes-product-700));--components-options-checkbox-border-radius: var(--pr-t-border-radius-small);--components-options-checkbox-border-color: var(--palettes-neutral-700);--components-options-establishment-multiple-padding: 2rem}}@layer reset,base,components,mods,product,utils;@layer components{:host{--components-options-checkbox-color: var(--palettes-700, var(--palettes-product-700));display:block;scroll-margin:var(--pr-t-spacings-50)}.lu-picker-content-group :host{scroll-margin-block-start:var(--pr-t-spacings-400)}}@layer mods{:host.withAddOption{scroll-margin-block-end:var(--pr-t-spacings-600)}}@layer components{.optionItem{position:relative}}@layer components{.optionItem-value{position:relative;border-radius:var(--pr-t-border-radius-default);display:block;padding-block:var(--components-options-item-padding-vertical);padding-inline:var(--components-options-item-padding-horizontal);transition:background-color 50ms;cursor:pointer;overflow-wrap:anywhere}.optionItem-value ::ng-deep .avatar{margin-inline-end:var(--pr-t-spacings-75)}}@layer mods{.optionItem-value.is-selected,:host-context([aria-selected=true]) .optionItem-value{background-color:var(--palettes-50, var(--palettes-product-50))}.optionItem-value.is-selected:before,:host-context([aria-selected=true]) .optionItem-value:before{content:\"\";position:absolute;inset-block:0;inset-inline-start:calc(var(--pr-t-spacings-50) * -1);inline-size:2px;background-color:var(--palettes-700, var(--palettes-product-700));border-start-end-radius:var(--pr-t-border-radius-default);border-end-end-radius:var(--pr-t-border-radius-default)}.optionItem-value.is-selected:hover,:host-context([aria-selected=true]) .optionItem-value:hover{background-color:var(--palettes-100, var(--palettes-product-100))}.optionItem-value.is-selected:active,:host-context([aria-selected=true]) .optionItem-value:active{background-color:var(--palettes-200, var(--palettes-product-200))}:host-context(.is-highlighted) .optionItem-value.is-selected,:host-context(.is-highlighted) :host-context([aria-selected=true]) .optionItem-value{background-color:var(--palettes-100, var(--palettes-product-100))}:host-context(.is-highlighted) .optionItem-value.is-selected:hover,:host-context(.is-highlighted) :host-context([aria-selected=true]) .optionItem-value:hover{background-color:var(--palettes-200, var(--palettes-product-200))}.optionItem-value:hover{background-color:var(--palettes-neutral-50)}:host-context(.is-highlighted) .optionItem-value{background-color:var(--palettes-neutral-50)}:host-context(.is-highlighted) .optionItem-value:hover{background-color:var(--palettes-neutral-50)}:host-context(.is-highlighted) .optionItem-value:active{background-color:var(--palettes-neutral-100)}.optionItem-value:active{background-color:var(--palettes-neutral-100)}}@layer components{.optionItem-value-group{color:var(--palettes-neutral-600);font:var(--pr-t-font-body-S)}}@layer components{:host-context(.lu-select-value) .optionItem-value{padding:0;overflow:hidden;text-overflow:ellipsis}}@layer mods{:host-context(.lu-select-value) .optionItem-value:hover,:host-context(.is-highlighted) :host-context(.lu-select-value) .optionItem-value{background-color:inherit}}@layer mods{:host-context(.mod-multiple) .optionItem-value,.formerEmployeeDisplayer .optionItem-value{position:relative;padding-inline-start:var(--components-options-item-multiple-padding)}:host-context(.mod-multiple) .optionItem-value:after,:host-context(.mod-multiple) .optionItem-value:before,.formerEmployeeDisplayer .optionItem-value:after,.formerEmployeeDisplayer .optionItem-value:before{display:block;position:absolute;inset-inline-start:var(--pr-t-spacings-100);inset-block-start:var(--pr-t-spacings-75)}:host-context(.mod-multiple) .optionItem-value:before,.formerEmployeeDisplayer .optionItem-value:before{content:\"\";background-color:var(--palettes-neutral-0);border-radius:var(--components-options-checkbox-border-radius);box-shadow:inset 0 0 0 2px var(--components-options-checkbox-border-color);display:block;block-size:var(--components-options-checkbox-size);transition-property:background-color,box-shadow;transition-duration:var(--commons-animations-durations-fast);inline-size:var(--components-options-checkbox-size)}:host-context(.mod-multiple) .optionItem-value:after,.formerEmployeeDisplayer .optionItem-value:after{--icon-content: \"\\e97d\";font-weight:var(--pr-t-font-fontWeight-regular);display:inline-block;vertical-align:text-bottom;font-style:normal;font-family:var(--icon-fontFamily);content:var(--icon-content)/\"\";-webkit-font-smoothing:antialiased;text-transform:none;color:transparent;font-size:var(--pr-t-font-body-S-lineHeight);line-height:var(--components-options-checkbox-size);position:absolute;text-align:center;transform:scale(0);transition:all .1s;inline-size:var(--components-options-checkbox-size)}:host-context(.mod-multiple) .optionItem-value.is-selected:before,:host-context([aria-selected=true]) :host-context(.mod-multiple) .optionItem-value:before,.formerEmployeeDisplayer .optionItem-value.is-selected:before,:host-context([aria-selected=true]) .formerEmployeeDisplayer .optionItem-value:before{background-color:var(--components-options-checkbox-color);box-shadow:inset 0 0 0 2px var(--components-options-checkbox-color)}:host-context(.mod-multiple) .optionItem-value.is-selected:after,:host-context([aria-selected=true]) :host-context(.mod-multiple) .optionItem-value:after,.formerEmployeeDisplayer .optionItem-value.is-selected:after,:host-context([aria-selected=true]) .formerEmployeeDisplayer .optionItem-value:after{color:var(--palettes-neutral-0);transform:scale(1)}:host-context(.mod-multiple) .optionItem-value.is-selected.is-disabled,:host-context([aria-selected=true]) :host-context(.mod-multiple) .optionItem-value.is-disabled,.formerEmployeeDisplayer .optionItem-value.is-selected.is-disabled,:host-context([aria-selected=true]) .formerEmployeeDisplayer .optionItem-value.is-disabled{--components-options-checkbox-color: var(--commons-disabled-background);background-color:transparent}:host-context(.mod-multiple) .optionItem-value.is-selected.is-disabled:after,:host-context([aria-selected=true]) :host-context(.mod-multiple) .optionItem-value.is-disabled:after,.formerEmployeeDisplayer .optionItem-value.is-selected.is-disabled:after,:host-context([aria-selected=true]) .formerEmployeeDisplayer .optionItem-value.is-disabled:after{color:var(--palettes-neutral-500)}:host-context(.mod-multiple) .optionItem-value.is-disabled,.formerEmployeeDisplayer .optionItem-value.is-disabled{--components-options-checkbox-border-color: var(--palettes-neutral-500)}:host-context(.mod-multiple) .optionItem-value:not(.is-disabled):hover:before,.formerEmployeeDisplayer .optionItem-value:not(.is-disabled):hover:before{box-shadow:inset 0 0 0 2px var(--components-options-checkbox-color)}}@layer components{:host-context(.mod-multiple).establishmentOption .optionItem-value,.formerEmployeeDisplayer.establishmentOption .optionItem-value{position:relative;padding-inline-start:calc(var(--components-options-checkbox-size) + var(--pr-t-spacings-100) * 2)}:host-context(.mod-multiple).establishmentOption .optionItem-value:before,:host-context(.mod-multiple).establishmentOption .optionItem-value:after,.formerEmployeeDisplayer.establishmentOption .optionItem-value:before,.formerEmployeeDisplayer.establishmentOption .optionItem-value:after{inset-inline-start:var(--pr-t-spacings-100)}}@layer mods{.is-disabled{color:var(--palettes-neutral-500);-webkit-user-select:none;user-select:none;cursor:default}.is-disabled.is-selected{background-color:var(--commons-disabled-background)}.is-disabled:hover{background-color:inherit}.optionItem-value:has(.optionItem-icon){display:flex;justify-content:space-between}}@layer components{.optionItem-icons{display:flex;gap:var(--pr-t-spacings-50)}.optionItem-icon-shape{display:block;fill:var(--palettes-neutral-500)}.optionItem-icon-shape:hover{fill:var(--palettes-neutral-800)}}\n"], dependencies: [{ kind: "directive", type: LuOptionOutletDirective, selector: "[luOptionOutlet]", inputs: ["luOptionOutlet", "luOptionOutletValue", "luOptionShowNull"] }, { kind: "directive", type: PortalDirective, selector: "[luPortal]", inputs: ["luPortal", "luPortalContext"] }, { kind: "directive", type: LuTooltipTriggerDirective, selector: "[luTooltip]", inputs: ["luTooltip", "luTooltipEnterDelay", "luTooltipLeaveDelay", "luTooltipDisabled", "luTooltipOnlyForDisplay", "luTooltipPosition", "luTooltipWhenEllipsis", "luTooltipAnchor", "id"], exportAs: ["luTooltip"] }, { kind: "pipe", type: LuOptionGroupPipe, name: "luOptionGroup" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "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', changeDetection: ChangeDetectionStrategy.OnPush, imports: [LuOptionOutletDirective, PortalDirective, LuOptionGroupPipe, LuTooltipTriggerDirective], template: "<div class=\"optionItem-value\" [class.is-disabled]=\"selectableItem.disabled\" (click)=\"selectOption($event)\">\n\t<ng-container *luOptionOutlet=\"optionTpl; value: selectableItem.option()\" />\n\n\t@if (groupTemplateLocation() === \"option\" && grouping) {\n\t\t<div class=\"optionItem-value-group\">\n\t\t\t<ng-container *luPortal=\"grouping.content; context: { $implicit: selectableItem.option() | luOptionGroup: grouping.selector }\" />\n\t\t</div>\n\t}\n\n\t@if (hasChildren() && !selectableItem.disabled) {\n\t\t<div class=\"optionItem-icons\">\n\t\t\t<span\n\t\t\t\tclass=\"optionItem-icon parentOnly\"\n\t\t\t\t(click)=\"$event.stopPropagation(); onlyParent.emit()\"\n\t\t\t\t[luTooltip]=\"intl().onlyParent\"\n\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t>\n\t\t\t\t<svg class=\"optionItem-icon-shape\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\">\n\t\t\t\t\t<path\n\t\t\t\t\t\topacity=\"0.2\"\n\t\t\t\t\t\td=\"M8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18ZM8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18Z\"\n\t\t\t\t\t/>\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7ZM4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7Z\"\n\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t\t<span class=\"pr-u-mask\">{{ intl().onlyParent }}</span>\n\t\t\t</span>\n\t\t\t<span\n\t\t\t\tclass=\"optionItem-icon childrenOnly\"\n\t\t\t\t(click)=\"$event.stopPropagation(); onlyChildren.emit()\"\n\t\t\t\t[luTooltip]=\"intl().onlyChildren\"\n\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t>\n\t\t\t\t<svg class=\"optionItem-icon-shape\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\">\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18ZM8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18Z\"\n\t\t\t\t\t/>\n\t\t\t\t\t<path\n\t\t\t\t\t\topacity=\"0.2\"\n\t\t\t\t\t\td=\"M4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7ZM4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7Z\"\n\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t\t<span class=\"pr-u-mask\">{{ intl().onlyChildren }}</span>\n\t\t\t</span>\n\t\t</div>\n\t}\n</div>\n", styles: ["@charset \"UTF-8\";@layer base{:root{--components-options-item-padding-vertical: var(--pr-t-spacings-50);--components-options-item-padding-horizontal: var(--pr-t-spacings-100);--components-options-item-multiple-padding: 2.25rem;--components-options-item-icon-color: var(--palettes-neutral-800);--components-options-checkbox-size: 1.25rem;--components-options-checkbox-color: var(--palettes-700, var(--palettes-product-700));--components-options-checkbox-border-radius: var(--pr-t-border-radius-small);--components-options-checkbox-border-color: var(--palettes-neutral-700);--components-options-establishment-multiple-padding: 2rem}}@layer reset,base,components,mods,product,utils;@layer components{:host{--components-options-checkbox-color: var(--palettes-700, var(--palettes-product-700));display:block;scroll-margin:var(--pr-t-spacings-50)}.lu-picker-content-group :host{scroll-margin-block-start:var(--pr-t-spacings-400)}}@layer mods{:host.withAddOption{scroll-margin-block-end:var(--pr-t-spacings-600)}}@layer components{.optionItem{position:relative}}@layer components{.optionItem-value{position:relative;border-radius:var(--pr-t-border-radius-default);display:block;padding-block:var(--components-options-item-padding-vertical);padding-inline:var(--components-options-item-padding-horizontal);transition:background-color 50ms;cursor:pointer;overflow-wrap:anywhere}.optionItem-value ::ng-deep .avatar{margin-inline-end:var(--pr-t-spacings-75)}}@layer mods{.optionItem-value.is-selected,:host-context([aria-selected=true]) .optionItem-value{background-color:var(--palettes-50, var(--palettes-product-50))}.optionItem-value.is-selected:before,:host-context([aria-selected=true]) .optionItem-value:before{content:\"\";position:absolute;inset-block:0;inset-inline-start:calc(var(--pr-t-spacings-50) * -1);inline-size:2px;background-color:var(--palettes-700, var(--palettes-product-700));border-start-end-radius:var(--pr-t-border-radius-default);border-end-end-radius:var(--pr-t-border-radius-default)}.optionItem-value.is-selected:hover,:host-context([aria-selected=true]) .optionItem-value:hover{background-color:var(--palettes-100, var(--palettes-product-100))}.optionItem-value.is-selected:active,:host-context([aria-selected=true]) .optionItem-value:active{background-color:var(--palettes-200, var(--palettes-product-200))}:host-context(.is-highlighted) .optionItem-value.is-selected,:host-context(.is-highlighted) :host-context([aria-selected=true]) .optionItem-value{background-color:var(--palettes-100, var(--palettes-product-100))}:host-context(.is-highlighted) .optionItem-value.is-selected:hover,:host-context(.is-highlighted) :host-context([aria-selected=true]) .optionItem-value:hover{background-color:var(--palettes-200, var(--palettes-product-200))}.optionItem-value:hover{background-color:var(--palettes-neutral-50)}:host-context(.is-highlighted) .optionItem-value{background-color:var(--palettes-neutral-50)}:host-context(.is-highlighted) .optionItem-value:hover{background-color:var(--palettes-neutral-50)}:host-context(.is-highlighted) .optionItem-value:active{background-color:var(--palettes-neutral-100)}.optionItem-value:active{background-color:var(--palettes-neutral-100)}}@layer components{.optionItem-value-group{color:var(--palettes-neutral-600);font:var(--pr-t-font-body-S)}}@layer components{:host-context(.lu-select-value) .optionItem-value{padding:0;overflow:hidden;text-overflow:ellipsis}}@layer mods{:host-context(.lu-select-value) .optionItem-value:hover,:host-context(.is-highlighted) :host-context(.lu-select-value) .optionItem-value{background-color:inherit}}@layer mods{:host-context(.mod-multiple) .optionItem-value,.formerEmployeeDisplayer .optionItem-value{position:relative;padding-inline-start:var(--components-options-item-multiple-padding)}:host-context(.mod-multiple) .optionItem-value:after,:host-context(.mod-multiple) .optionItem-value:before,.formerEmployeeDisplayer .optionItem-value:after,.formerEmployeeDisplayer .optionItem-value:before{display:block;position:absolute;inset-inline-start:var(--pr-t-spacings-100);inset-block-start:var(--pr-t-spacings-75)}:host-context(.mod-multiple) .optionItem-value:before,.formerEmployeeDisplayer .optionItem-value:before{content:\"\";background-color:var(--palettes-neutral-0);border-radius:var(--components-options-checkbox-border-radius);box-shadow:inset 0 0 0 2px var(--components-options-checkbox-border-color);display:block;block-size:var(--components-options-checkbox-size);transition-property:background-color,box-shadow;transition-duration:var(--commons-animations-durations-fast);inline-size:var(--components-options-checkbox-size)}:host-context(.mod-multiple) .optionItem-value:after,.formerEmployeeDisplayer .optionItem-value:after{--icon-content: \"\\e97d\";font-weight:var(--pr-t-font-fontWeight-regular);display:inline-block;vertical-align:text-bottom;font-style:normal;font-family:var(--icon-fontFamily);content:var(--icon-content)/\"\";-webkit-font-smoothing:antialiased;text-transform:none;color:transparent;font-size:var(--pr-t-font-body-S-lineHeight);line-height:var(--components-options-checkbox-size);position:absolute;text-align:center;transform:scale(0);transition:all .1s;inline-size:var(--components-options-checkbox-size)}:host-context(.mod-multiple) .optionItem-value.is-selected:before,:host-context([aria-selected=true]) :host-context(.mod-multiple) .optionItem-value:before,.formerEmployeeDisplayer .optionItem-value.is-selected:before,:host-context([aria-selected=true]) .formerEmployeeDisplayer .optionItem-value:before{background-color:var(--components-options-checkbox-color);box-shadow:inset 0 0 0 2px var(--components-options-checkbox-color)}:host-context(.mod-multiple) .optionItem-value.is-selected:after,:host-context([aria-selected=true]) :host-context(.mod-multiple) .optionItem-value:after,.formerEmployeeDisplayer .optionItem-value.is-selected:after,:host-context([aria-selected=true]) .formerEmployeeDisplayer .optionItem-value:after{color:var(--palettes-neutral-0);transform:scale(1)}:host-context(.mod-multiple) .optionItem-value.is-selected.is-disabled,:host-context([aria-selected=true]) :host-context(.mod-multiple) .optionItem-value.is-disabled,.formerEmployeeDisplayer .optionItem-value.is-selected.is-disabled,:host-context([aria-selected=true]) .formerEmployeeDisplayer .optionItem-value.is-disabled{--components-options-checkbox-color: var(--commons-disabled-background);background-color:transparent}:host-context(.mod-multiple) .optionItem-value.is-selected.is-disabled:after,:host-context([aria-selected=true]) :host-context(.mod-multiple) .optionItem-value.is-disabled:after,.formerEmployeeDisplayer .optionItem-value.is-selected.is-disabled:after,:host-context([aria-selected=true]) .formerEmployeeDisplayer .optionItem-value.is-disabled:after{color:var(--palettes-neutral-500)}:host-context(.mod-multiple) .optionItem-value.is-disabled,.formerEmployeeDisplayer .optionItem-value.is-disabled{--components-options-checkbox-border-color: var(--palettes-neutral-500)}:host-context(.mod-multiple) .optionItem-value:not(.is-disabled):hover:before,.formerEmployeeDisplayer .optionItem-value:not(.is-disabled):hover:before{box-shadow:inset 0 0 0 2px var(--components-options-checkbox-color)}}@layer components{:host-context(.mod-multiple).establishmentOption .optionItem-value,.formerEmployeeDisplayer.establishmentOption .optionItem-value{position:relative;padding-inline-start:calc(var(--components-options-checkbox-size) + var(--pr-t-spacings-100) * 2)}:host-context(.mod-multiple).establishmentOption .optionItem-value:before,:host-context(.mod-multiple).establishmentOption .optionItem-value:after,.formerEmployeeDisplayer.establishmentOption .optionItem-value:before,.formerEmployeeDisplayer.establishmentOption .optionItem-value:after{inset-inline-start:var(--pr-t-spacings-100)}}@layer mods{.is-disabled{color:var(--palettes-neutral-500);-webkit-user-select:none;user-select:none;cursor:default}.is-disabled.is-selected{background-color:var(--commons-disabled-background)}.is-disabled:hover{background-color:inherit}.optionItem-value:has(.optionItem-icon){display:flex;justify-content:space-between}}@layer components{.optionItem-icons{display:flex;gap:var(--pr-t-spacings-50)}.optionItem-icon-shape{display:block;fill:var(--palettes-neutral-500)}.optionItem-icon-shape:hover{fill:var(--palettes-neutral-800)}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { intl: [{ type: i0.Input, args: [{ isSignal: true, alias: "intl", required: false }] }], hasOptionItemClass: [{
-                type: HostBinding,
-                args: ['class.optionItem']
-            }], optionTpl: [{
-                type: Input
-            }], option: [{
-                type: Input
-            }], grouping: [{
-                type: Input
-            }], hasChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasChildren", required: false }] }], onlyParent: [{ type: i0.Output, args: ["onlyParent"] }], onlyChildren: [{ type: i0.Output, args: ["onlyChildren"] }], groupIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupIndex", required: false }] }], optionIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionIndex", required: true }] }], scrollIntoViewOptions: [{
-                type: Input
-            }], groupTemplateLocation: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupTemplateLocation", required: false }] }], optionContext: [{
-                type: ViewChild,
-                args: [LuOptionOutletDirective, { read: LU_OPTION_CONTEXT, static: true }]
-            }] } });
+            args: [{ selector: 'lu-select-option', host: {
+                        class: 'optionItem',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [LuOptionOutletDirective, PortalDirective, LuOptionGroupPipe, LuTooltipTriggerDirective], template: "<div class=\"optionItem-value\" [class.is-disabled]=\"selectableItem.disabled\" (click)=\"selectOption($event)\">\n\t<ng-container *luOptionOutlet=\"optionTpl(); value: selectableItem.option()\" />\n\n\t@if (groupTemplateLocation() === \"option\") {\n\t\t@if (grouping(); as grouping) {\n\t\t\t<div class=\"optionItem-value-group\">\n\t\t\t\t<ng-container *luPortal=\"grouping.content; context: { $implicit: selectableItem.option() | luOptionGroup: grouping.selector }\" />\n\t\t\t</div>\n\t\t}\n\t}\n\n\t@if (hasChildren() && !selectableItem.disabled) {\n\t\t<div class=\"optionItem-icons\">\n\t\t\t<span\n\t\t\t\tclass=\"optionItem-icon parentOnly\"\n\t\t\t\t(click)=\"$event.stopPropagation(); onlyParent.emit()\"\n\t\t\t\t[luTooltip]=\"intl().onlyParent\"\n\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t>\n\t\t\t\t<svg class=\"optionItem-icon-shape\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\">\n\t\t\t\t\t<path\n\t\t\t\t\t\topacity=\"0.2\"\n\t\t\t\t\t\td=\"M8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18ZM8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18Z\"\n\t\t\t\t\t/>\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7ZM4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7Z\"\n\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t\t<span class=\"pr-u-mask\">{{ intl().onlyParent }}</span>\n\t\t\t</span>\n\t\t\t<span\n\t\t\t\tclass=\"optionItem-icon childrenOnly\"\n\t\t\t\t(click)=\"$event.stopPropagation(); onlyChildren.emit()\"\n\t\t\t\t[luTooltip]=\"intl().onlyChildren\"\n\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t>\n\t\t\t\t<svg class=\"optionItem-icon-shape\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\">\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18ZM8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18Z\"\n\t\t\t\t\t/>\n\t\t\t\t\t<path\n\t\t\t\t\t\topacity=\"0.2\"\n\t\t\t\t\t\td=\"M4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7ZM4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7Z\"\n\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t\t<span class=\"pr-u-mask\">{{ intl().onlyChildren }}</span>\n\t\t\t</span>\n\t\t</div>\n\t}\n</div>\n", styles: ["@charset \"UTF-8\";@layer base{:root{--components-options-item-padding-vertical: var(--pr-t-spacings-50);--components-options-item-padding-horizontal: var(--pr-t-spacings-100);--components-options-item-multiple-padding: 2.25rem;--components-options-item-icon-color: var(--palettes-neutral-800);--components-options-checkbox-size: 1.25rem;--components-options-checkbox-color: var(--palettes-700, var(--palettes-product-700));--components-options-checkbox-border-radius: var(--pr-t-border-radius-small);--components-options-checkbox-border-color: var(--palettes-neutral-700);--components-options-establishment-multiple-padding: 2rem}}@layer reset,base,components,mods,product,utils;@layer components{:host{--components-options-checkbox-color: var(--palettes-700, var(--palettes-product-700));display:block;scroll-margin:var(--pr-t-spacings-50)}.lu-picker-content-group :host{scroll-margin-block-start:var(--pr-t-spacings-400)}}@layer mods{:host.withAddOption{scroll-margin-block-end:var(--pr-t-spacings-600)}}@layer components{.optionItem{position:relative}}@layer components{.optionItem-value{position:relative;border-radius:var(--pr-t-border-radius-default);display:block;padding-block:var(--components-options-item-padding-vertical);padding-inline:var(--components-options-item-padding-horizontal);transition:background-color 50ms;cursor:pointer;overflow-wrap:anywhere}.optionItem-value ::ng-deep .avatar{margin-inline-end:var(--pr-t-spacings-75)}}@layer mods{.optionItem-value.is-selected,:host-context([aria-selected=true]) .optionItem-value{background-color:var(--palettes-50, var(--palettes-product-50))}.optionItem-value.is-selected:before,:host-context([aria-selected=true]) .optionItem-value:before{content:\"\";position:absolute;inset-block:0;inset-inline-start:calc(var(--pr-t-spacings-50) * -1);inline-size:2px;background-color:var(--palettes-700, var(--palettes-product-700));border-start-end-radius:var(--pr-t-border-radius-default);border-end-end-radius:var(--pr-t-border-radius-default)}: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 {
-    set select(select) {
-        select.optionTpl.set(this.templateRef);
-    }
     constructor(templateRef) {
         this.templateRef = templateRef;
+        this.select = input(undefined, { ...(ngDevMode ? { debugName: "select" } : /* istanbul ignore next */ {}), alias: 'luOptionSelect' });
+        _effectWithDeps([this.select], (select) => select?.optionTpl.set(this.templateRef));
     }
     static ngTemplateContextGuard(_dir, _ctx) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuOptionDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: LuOptionDirective, isStandalone: true, selector: "[luOption]", inputs: { select: ["luOptionSelect", "select"] }, 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: Input,
-                args: ['luOptionSelect']
-            }] } });
+        }], 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 {
-    set placeholder(value) {
-        this.placeholder$.next(value);
-    }
-    set clearable(value) {
-        this.#inputClearable.set(value);
-    }
-    get clearable() {
-        return this.#clearable();
-    }
-    #clearable;
     #defaultFilterPillClearable;
-    #inputClearable;
     #defaultClearable;
     get searchable() {
         return this.clueChange$.observed;
     }
-    #addOptionLabelInput;
-    set addOptionLabel(label) {
-        this.#addOptionLabelInput.set(label);
-    }
     get addOptionLabel() {
         return this.computedAddOptionLabel();
     }
-    set addOptionStrategy(strategy) {
-        this.addOptionStrategy$.next(strategy);
-    }
     get isSelectedClass() {
         return this.hasValue();
     }
@@ -460,24 +570,6 @@ class ALuSelectInputComponent {
     get ariaControls() {
         return this.overlayContainerRef.id;
     }
-    set loading(value) {
-        if (value !== this.loading) {
-            this.loading$.next(value);
-        }
-    }
-    set options(options) {
-        this.options$.next(options);
-        if (this.panelRef) {
-            // We have to put it in a setTimeout so it'll be triggered AFTER the DOM is updated and not right now,
-            // which is before the panel size has been modified by the arrival of the new options
-            setTimeout(() => {
-                this.panelRef?.updatePosition();
-                this.updatePositionFn?.();
-                // If no fixes are found, last resort fix is here
-                // window.dispatchEvent(new Event('resize'));
-            });
-        }
-    }
     get isNoClueIconClass() {
         return this.noClueIcon();
     }
@@ -503,7 +595,7 @@ class ALuSelectInputComponent {
         this.changeDetectorRef.markForCheck();
     }
     get inputPlaceholder() {
-        return this.value ? null : this.placeholder$.value;
+        return this.value ? null : this.placeholder();
     }
     clueChanged(clue, skipPanelOpen = false) {
         this.clue = clue;
@@ -515,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;
     }
@@ -530,52 +634,88 @@ class ALuSelectInputComponent {
         this.panelClosed = output();
         this.panelOpened = output();
         this.highlightedOption = output();
-        this.placeholder$ = new BehaviorSubject('');
+        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.#clearable = computed(() => this.#inputClearable() ?? this.#defaultFilterPillClearable() ?? this.#defaultClearable, ...(ngDevMode ? [{ debugName: "#clearable" }] : /* istanbul ignore next */ []));
-        this.#defaultFilterPillClearable = signal(null, ...(ngDevMode ? [{ debugName: "#defaultFilterPillClearable" }] : /* istanbul ignore next */ []));
-        this.#inputClearable = signal(null, ...(ngDevMode ? [{ debugName: "#inputClearable" }] : /* 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.#addOptionLabelInput = signal(null, ...(ngDevMode ? [{ debugName: "#addOptionLabelInput" }] : /* istanbul ignore next */ []));
-        this.computedAddOptionLabel = computed(() => this.#addOptionLabelInput() ?? this.intl().addOption, ...(ngDevMode ? [{ debugName: "computedAddOptionLabel" }] : /* istanbul ignore next */ []));
+        this.computedAddOptionLabel = computed(() => this.addOptionLabelInput() ?? this.intl().addOption, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "computedAddOptionLabel" }] : /* istanbul ignore next */ []));
+        this.addOptionLabelInput = input(null, { ...(ngDevMode ? { debugName: "addOptionLabelInput" } : /* istanbul ignore next */ {}), alias: 'addOptionLabel' });
+        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 = {
-            hasBackdrop: true,
-            backdropClass: 'cdk-overlay-transparent-backdrop',
-        };
-        this.optionComparer = coreSelectDefaultOptionComparer;
-        this.optionKey = coreSelectDefaultOptionKey;
+        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.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.#clearable(), ...(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$ = new BehaviorSubject(false);
+        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.addOptionStrategy$ = new BehaviorSubject('never');
-        this.shouldDisplayAddOption$ = this.addOptionStrategy$.pipe(switchMap((strategy) => {
+        this.shouldDisplayAddOption = toSignal(toObservable(this.addOptionStrategy).pipe(switchMap((strategy) => {
             switch (strategy) {
                 case 'always':
                     return of(true);
@@ -586,11 +726,28 @@ 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.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());
+            }
+        });
     }
     onClickOpenPanel($event) {
         if (!this.isPanelOpen) {
@@ -641,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);
@@ -663,8 +826,6 @@ class ALuSelectInputComponent {
     }
     ngOnDestroy() {
         this.closePanel();
-        this.destroyed$.next();
-        this.destroyed$.complete();
     }
     ngOnInit() {
         if (this.labelElement) {
@@ -676,7 +837,7 @@ class ALuSelectInputComponent {
             event.stopPropagation();
         }
         this.updateValue(null, true);
-        this.inputElementRef.nativeElement.focus();
+        this.inputElementRef()?.nativeElement.focus();
     }
     openPanel(clue = '') {
         if (this.filterPillMode || this.isPanelOpen || this.disabled$.value) {
@@ -696,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();
@@ -714,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();
@@ -723,8 +884,8 @@ class ALuSelectInputComponent {
         this.panelRef.closed.subscribe(() => this.closePanel());
     }
     focusInput() {
-        if (this.inputElementRef) {
-            this.inputElementRef.nativeElement.focus();
+        if (this.inputElementRef()) {
+            this.inputElementRef()?.nativeElement.focus();
         }
     }
     emptyClue() {
@@ -734,6 +895,7 @@ class ALuSelectInputComponent {
         }
     }
     closePanel() {
+        this.dataSource().reset?.();
         if (!this.isPanelOpen) {
             return;
         }
@@ -762,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();
@@ -788,58 +946,24 @@ 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.1.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: false, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, addOptionLabel: { classPropertyName: "addOptionLabel", publicName: "addOptionLabel", isSignal: false, isRequired: false, transformFunction: null }, addOptionStrategy: { classPropertyName: "addOptionStrategy", publicName: "addOptionStrategy", isSignal: false, isRequired: false, transformFunction: null }, overlayConfig: { classPropertyName: "overlayConfig", publicName: "overlayConfig", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, optionComparer: { classPropertyName: "optionComparer", publicName: "optionComparer", isSignal: false, isRequired: false, transformFunction: null }, optionKey: { classPropertyName: "optionKey", publicName: "optionKey", isSignal: false, isRequired: false, transformFunction: null }, noClueIcon: { classPropertyName: "noClueIcon", publicName: "noClueIcon", isSignal: true, isRequired: false, transformFunction: null }, inputTabindex: { classPropertyName: "inputTabindex", publicName: "inputTabindex", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, colorPicker: { classPropertyName: "colorPicker", publicName: "colorPicker", isSignal: true, isRequired: false, transformFunction: null }, optionTpl: { classPropertyName: "optionTpl", publicName: "optionTpl", isSignal: true, isRequired: false, transformFunction: null }, valueTpl: { classPropertyName: "valueTpl", publicName: "valueTpl", isSignal: true, isRequired: false, transformFunction: null }, panelHeaderTpl: { classPropertyName: "panelHeaderTpl", publicName: "panelHeaderTpl", isSignal: true, isRequired: false, transformFunction: null }, panelFooterTpl: { classPropertyName: "panelFooterTpl", publicName: "panelFooterTpl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { panelClosed: "panelClosed", panelOpened: "panelOpened", highlightedOption: "highlightedOption", optionTpl: "optionTplChange", valueTpl: "valueTplChange", panelHeaderTpl: "panelHeaderTplChange", panelFooterTpl: "panelFooterTplChange", clueChange: "clueChange", nextPage: "nextPage", previousPage: "previousPage", addOption: "addOption" }, host: { listeners: { "click": "onClickOpenPanel($event)", "keydown": "onKeyDownNavigation($event)" }, properties: { "class.colorPicker": "colorPicker()", "class.mod-compact": "compact()", "class.is-clearable": "this.clearable", "class.is-selected": "this.isSelectedClass", "class.is-searchFilled": "this.isSearchFilledClass", "class.mod-noClueIcon": "this.isNoClueIconClass" } }, viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "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: {
                         '[class.colorPicker]': 'colorPicker()',
                         '[class.mod-compact]': 'compact()',
+                        '[class.is-clearable]': 'isClearable()',
+                        '[class.is-selected]': 'isSelectedClass',
+                        '[class.is-searchFilled]': 'isSearchFilledClass',
+                        '[class.mod-noClueIcon]': 'isNoClueIconClass',
+                        '(click)': 'onClickOpenPanel($event)',
+                        '(keydown)': 'onKeyDownNavigation($event)',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { ignorePresentation: [{ type: i0.Input, args: [{ isSignal: true, alias: "ignorePresentation", required: false }] }], panelClosed: [{ type: i0.Output, args: ["panelClosed"] }], panelOpened: [{ type: i0.Output, args: ["panelOpened"] }], highlightedOption: [{ type: i0.Output, args: ["highlightedOption"] }], inputElementRef: [{
-                type: ViewChild,
-                args: ['inputElement']
-            }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], placeholder: [{
-                type: Input
-            }], clearable: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }, {
-                type: HostBinding,
-                args: ['class.is-clearable']
-            }], addOptionLabel: [{
-                type: Input
-            }], addOptionStrategy: [{
-                type: Input
-            }], isSelectedClass: [{
-                type: HostBinding,
-                args: ['class.is-selected']
-            }], isSearchFilledClass: [{
-                type: HostBinding,
-                args: ['class.is-searchFilled']
-            }], overlayConfig: [{
-                type: Input
-            }], loading: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }], optionComparer: [{
-                type: Input
-            }], optionKey: [{
-                type: Input
-            }], noClueIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "noClueIcon", required: false }] }], inputTabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputTabindex", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], colorPicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorPicker", required: false }] }], isNoClueIconClass: [{
-                type: HostBinding,
-                args: ['class.mod-noClueIcon']
-            }], optionTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionTpl", required: false }] }, { type: i0.Output, args: ["optionTplChange"] }], valueTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueTpl", required: false }] }, { type: i0.Output, args: ["valueTplChange"] }], panelHeaderTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelHeaderTpl", required: false }] }, { type: i0.Output, args: ["panelHeaderTplChange"] }], panelFooterTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelFooterTpl", required: false }] }, { type: i0.Output, args: ["panelFooterTplChange"] }], clueChange: [{ type: i0.Output, args: ["clueChange"] }], nextPage: [{ type: i0.Output, args: ["nextPage"] }], previousPage: [{ type: i0.Output, args: ["previousPage"] }], addOption: [{ type: i0.Output, args: ["addOption"] }], onClickOpenPanel: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }], onKeyDownNavigation: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { ignorePresentation: [{ type: i0.Input, args: [{ isSignal: true, alias: "ignorePresentation", required: false }] }], panelClosed: [{ type: i0.Output, args: ["panelClosed"] }], panelOpened: [{ type: i0.Output, args: ["panelOpened"] }], highlightedOption: [{ type: i0.Output, args: ["highlightedOption"] }], inputElementRef: [{ type: i0.ViewChild, args: ['inputElement', { isSignal: true }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], clearableInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], addOptionLabelInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "addOptionLabel", required: false }] }], addOptionStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "addOptionStrategy", required: false }] }], overlayConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayConfig", required: false }] }], loadingInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], optionsInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionComparerInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionComparer", required: false }] }], optionKeyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionKey", required: false }] }], noClueIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "noClueIcon", required: false }] }], inputTabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputTabindex", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], colorPicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorPicker", required: false }] }], optionTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionTpl", required: false }] }, { type: i0.Output, args: ["optionTplChange"] }], valueTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueTpl", required: false }] }, { type: i0.Output, args: ["valueTplChange"] }], panelHeaderTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelHeaderTpl", required: false }] }, { type: i0.Output, args: ["panelHeaderTplChange"] }], panelFooterTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelFooterTpl", required: false }] }, { type: i0.Output, args: ["panelFooterTplChange"] }], clueChange: [{ type: i0.Output, args: ["clueChange"] }], nextPage: [{ type: i0.Output, args: ["nextPage"] }], 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() {
@@ -881,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"
@@ -908,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',
@@ -923,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
@@ -934,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);
@@ -1048,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]',
@@ -1061,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();
@@ -1071,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();
@@ -1083,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 = {
@@ -1120,6 +1142,9 @@ const Translations = {
     en: {
         addOption: 'Add option',
     },
+    pl: {
+        addOption: 'Dodaj opcję',
+    },
 };
 
 const LU_CORE_SELECT_TRANSLATIONS = new InjectionToken('LuCoreSelectTranslations', {
@@ -1134,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',