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

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

@@ -1,20 +1,19 @@
 import { Overlay, OverlayPositionBuilder, ScrollStrategyOptions, OverlayModule } from '@angular/cdk/overlay';
 import { NgTemplateOutlet, AsyncPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, Pipe, inject, signal, computed, forwardRef, ChangeDetectionStrategy, Component, Injector, ElementRef, Injectable, input, booleanAttribute, viewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
-import * as i1$1 from '@angular/forms';
+import { InjectionToken, Pipe, inject, signal, ElementRef, computed, forwardRef, ChangeDetectionStrategy, Component, Injector, Injectable, input, viewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
+import * as i1 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { ClearComponent } from '@lucca-front/ng/clear';
-import { PortalDirective, getPushPanelViewportMargin, intlInputOptions, isNotNil } from '@lucca-front/ng/core';
-import { LuSelectPanelRef, SELECT_ID, CoreSelectKeyManager, ɵgetGroupTemplateLocation as _getGroupTemplateLocation, ɵLuOptionComponent as _LuOptionComponent, ɵCoreSelectPanelElement as _CoreSelectPanelElement, ɵLuOptionGroupPipe as _LuOptionGroupPipe, TreeDisplayPipe, SELECT_PANEL_INSTANCE, SELECT_LABEL_ID, addAttributesOnCdkContainer, ALuSelectInputComponent, LU_CORE_SELECT_TRANSLATIONS, ɵLuOptionOutletDirective as _LuOptionOutletDirective, provideLuSelectLabelsAndIds } from '@lucca-front/ng/core-select';
+import { PortalDirective, getPushPanelViewportMargin, intlInputOptions, luBooleanAttribute, isNotNil } from '@lucca-front/ng/core';
+import { LuSelectPanelRef, SELECT_ID, ɵinjectPointerNavigation as _injectPointerNavigation, CoreSelectKeyManager, ɵgetGroupTemplateLocation as _getGroupTemplateLocation, LuSelectPanelLayoutComponent, ɵLuOptionComponent as _LuOptionComponent, ɵCoreSelectPanelElement as _CoreSelectPanelElement, ɵLuOptionGroupPipe as _LuOptionGroupPipe, TreeDisplayPipe, SELECT_PANEL_INSTANCE, SELECT_LABEL_ID, addAttributesOnCdkContainer, ALuSelectInputComponent, LU_CORE_SELECT_TRANSLATIONS, ɵLuOptionOutletDirective as _LuOptionOutletDirective, provideLuSelectLabelsAndIds } from '@lucca-front/ng/core-select';
 import { FilterPillDisplayerDirective, FILTER_PILL_INPUT_COMPONENT } from '@lucca-front/ng/filter-pills';
 import { InputDirective, ɵPresentationDisplayDefaultDirective as _PresentationDisplayDefaultDirective, PresentationDisplayDirective } from '@lucca-front/ng/form-field';
 import { IconComponent } from '@lucca-front/ng/icon';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { EMPTY, takeUntil } from 'rxjs';
-import * as i1 from '@angular/cdk/a11y';
-import { A11yModule } from '@angular/cdk/a11y';
 import { toSignal } from '@angular/core/rxjs-interop';
+import { ListboxComponent, OptionComponent } from '@lucca-front/ng/listbox';
 import { TreeBranchComponent } from '@lucca-front/ng/tree-select';
 import { map } from 'rxjs/operators';
 
@@ -84,11 +83,11 @@ const Translations = {
         emptyOptions: 'There are no values available. Contact your administrator for more information.',
     },
     pl: {
-        placeholder: 'Wybierz..',
+        placeholder: 'Wybierz…',
         clear: 'Usuń',
-        clearSearch: 'Puste wyszukiwanie',
+        clearSearch: 'Wyczyść wyszukiwanie',
         emptyResults: 'Wyszukiwanie nie przyniosło żadnych rezultatów.',
-        loading: 'Trwa ładowanie...',
+        loading: 'Trwa ładowanie…',
         emptyOptions: 'Brak dostępnych wartości. Aby uzyskać więcej informacji, skontaktuj się z administratorem.',
     },
 };
@@ -104,10 +103,10 @@ class LuIsOptionSelectedPipe {
     transform(option, comparer, selectedOption) {
         return !!selectedOption && comparer(option, selectedOption);
     }
-    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" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuIsOptionSelectedPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: LuIsOptionSelectedPipe, isStandalone: true, name: "luIsOptionSelected" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: LuIsOptionSelectedPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuIsOptionSelectedPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'luIsOptionSelected',
@@ -132,22 +131,32 @@ class LuSelectPanelComponent {
         this.optionTpl = this.selectInput.optionTpl;
         this.options = signal([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
-        this.pointerNavigation = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "pointerNavigation" }] : /* istanbul ignore next */ []));
+        this.pointerNavigation = _injectPointerNavigation(inject(ElementRef).nativeElement);
         this.keyManager = inject(CoreSelectKeyManager);
         this.selected = computed(() => this.selectInput.valueSignal(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+        // Kept free of `null` so it doesn't widen `TreeBranchComponent`'s generic, which would in turn
+        // make its `toggleOne` output nullable and force a guard on `emitValue`.
+        this.selectedOptions = computed(() => {
+            const selected = this.selected();
+            return selected === null ? [] : [selected];
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedOptions" }] : /* istanbul ignore next */ []));
         this.hasGrouping = computed(() => !!this.grouping(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "hasGrouping" }] : /* istanbul ignore next */ []));
         this.clue = toSignal(this.selectInput.clue$.pipe(map((clue) => clue ?? '')), { initialValue: '' });
         this.shouldDisplayAddOption = this.selectInput.shouldDisplayAddOption;
-        this.groupTemplateLocation = _getGroupTemplateLocation(this.hasGrouping, this.clue, this.searchable);
-    }
-    onKeydown() {
-        this.pointerNavigation.set(false);
-    }
-    onMousemove() {
-        this.pointerNavigation.set(true);
+        this.groupTemplateLocation = _getGroupTemplateLocation(this.hasGrouping, this.clue, this.dataSourceOptions, this.searchable);
+        // Loading takes precedence over empty so the "no result" message never flashes during a fetch
+        this.listboxState = computed(() => (this.loading() ? 'loading' : this.dataSourceOptions().length === 0 ? 'empty' : null), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "listboxState" }] : /* istanbul ignore next */ []));
+        this.listboxStatusMsg = computed(() => {
+            if (this.loading()) {
+                return this.intl().loading;
+            }
+            return this.clue().length ? this.intl().emptyResults : this.intl().emptyOptions;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "listboxStatusMsg" }] : /* istanbul ignore next */ []));
     }
     onScroll(evt) {
         if (!(evt.target instanceof HTMLElement)) {
@@ -169,23 +178,23 @@ class LuSelectPanelComponent {
             this.keyManager.highlightOption(this.initialValue);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: LuSelectPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: LuSelectPanelComponent, isStandalone: true, selector: "lu-select-panel", host: { listeners: { "document:keydown": "onKeydown()", "document:mousemove": "onMousemove()" }, properties: { "class.colorPanel": "colorPanel()" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuSelectPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: LuSelectPanelComponent, isStandalone: true, selector: "lu-select-panel", host: { properties: { "class.colorPanel": "colorPanel()", "class.is-pointerNavigation": "pointerNavigation()" }, classAttribute: "selectPanel" }, providers: [
             CoreSelectKeyManager,
             {
                 provide: SELECT_PANEL_INSTANCE,
                 useExisting: forwardRef(() => LuSelectPanelComponent),
             },
-        ], ngImport: i0, template: "<div class=\"lu-picker-panel lu-option-picker-panel\" cdkTrapFocus>\n\t<div class=\"lu-picker-content\" [class.is-loading]=\"loading()\" (scroll)=\"onScroll($event)\">\n\t\t@if (selectInput.panelHeaderTpl(); as tpl) {\n\t\t\t<div>\n\t\t\t\t<ng-container *luPortal=\"tpl\" />\n\t\t\t</div>\n\t\t}\n\t\t<div role=\"listbox\">\n\t\t\t@if (grouping() && groupTemplateLocation() === \"group-header\") {\n\t\t\t\t@for (group of dataSourceOptions() | luOptionGroup: grouping().selector; track group.key; let groupIndex = $index) {\n\t\t\t\t\t<div class=\"lu-picker-content-option-group\" role=\"group\" [attr.aria-labelledby]=\"selectId + '-group-' + group.key\">\n\t\t\t\t\t\t<span class=\"lu-picker-content-option-group-title\" role=\"presentation\" [id]=\"selectId + '-group-' + group.key\">\n\t\t\t\t\t\t\t<ng-container *luPortal=\"grouping().content; context: { $implicit: group }\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<ng-template\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"optionsList\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: group.options, groupIndex: groupIndex }\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t}\n\t\t\t@if (!grouping() || groupTemplateLocation() !== \"group-header\") {\n\t\t\t\t<ng-template [ngTemplateOutlet]=\"optionsList\" [ngTemplateOutletContext]=\"{ $implicit: dataSourceOptions() }\" />\n\t\t\t}\n\t\t\t<ng-template #optionsList let-options let-groupIndex=\"groupIndex\">\n\t\t\t\t@if (treeGenerator) {\n\t\t\t\t\t@for (branch of options | luTreeDisplay: treeGenerator; let index = $index; track optionKey()(branch.node)) {\n\t\t\t\t\t\t<lu-tree-branch\n\t\t\t\t\t\t\t[branch]=\"branch\"\n\t\t\t\t\t\t\t[optionTpl]=\"optionTpl()\"\n\t\t\t\t\t\t\t[optionComparer]=\"optionComparer()\"\n\t\t\t\t\t\t\t[selectedOptions]=\"[selected()]\"\n\t\t\t\t\t\t\t[optionIndex]=\"index\"\n\t\t\t\t\t\t\t(toggleOne)=\"panelRef.emitValue($event)\"\n\t\t\t\t\t\t\tsimpleMode\n\t\t\t\t\t\t/>\n\t\t\t\t\t}\n\t\t\t\t} @else {\n\t\t\t\t\t@for (option of options; track optionKey()(option); let index = $index) {\n\t\t\t\t\t\t<lu-select-option\n\t\t\t\t\t\t\tluCoreSelectPanelElement\n\t\t\t\t\t\t\t[option]=\"option\"\n\t\t\t\t\t\t\t[optionTpl]=\"optionTpl()\"\n\t\t\t\t\t\t\t[optionIndex]=\"index\"\n\t\t\t\t\t\t\t[groupTemplateLocation]=\"groupTemplateLocation()\"\n\t\t\t\t\t\t\t[groupIndex]=\"groupIndex\"\n\t\t\t\t\t\t\t[grouping]=\"grouping()\"\n\t\t\t\t\t\t\t[scrollIntoViewOptions]=\"{ block: 'center' }\"\n\t\t\t\t\t\t\t[isSelected]=\"option | luIsOptionSelected: optionComparer() : selected()\"\n\t\t\t\t\t\t\t[class.withAddOption]=\"shouldDisplayAddOption()\"\n\t\t\t\t\t\t\t(selected)=\"panelRef.emitValue(option)\"\n\t\t\t\t\t\t\t(click)=\"panelRef.emitValue(option)\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t</ng-template>\n\t\t\t@if (dataSourceOptions().length === 0 && !loading()) {\n\t\t\t\t<div class=\"lu-picker-content-option-emptyState\">\n\t\t\t\t\t{{ clue().length ? intl().emptyResults : intl().emptyOptions }}\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t\t@if (loading()) {\n\t\t\t<div class=\"lu-picker-content-loading\">\n\t\t\t\t<div class=\"loading\">{{ intl().loading }}</div>\n\t\t\t</div>\n\t\t}\n\t\t@if (shouldDisplayAddOption()) {\n\t\t\t<div\n\t\t\t\tclass=\"addOption palette-product is-stuck\"\n\t\t\t\t(click)=\"selectInput.emitAddOption()\"\n\t\t\t\t(selected)=\"selectInput.emitAddOption()\"\n\t\t\t\telementId=\"picker-content-add\"\n\t\t\t\tluCoreSelectPanelElement\n\t\t\t>\n\t\t\t\t<div class=\"addOption-content\">\n\t\t\t\t\t<lu-icon icon=\"mathsPlus\" />\n\t\t\t\t\t<ng-container *luPortal=\"selectInput.addOptionLabel\" />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t}\n\t\t@if (selectInput.panelFooterTpl(); as tpl) {\n\t\t\t<div>\n\t\t\t\t<ng-container *luPortal=\"tpl\" />\n\t\t\t</div>\n\t\t}\n\t</div>\n</div>\n", styles: ["@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 mods{.textfield.mod-search{inline-size:100%}.textfield-input{outline:none}.checkbox.mod-formerEmployee{padding-block:var(--pr-t-spacings-50);padding-inline:var(--components-options-item-padding-horizontal);border-block-end:var(--commons-divider-width) solid var(--commons-divider-color);background-color:var(--palettes-neutral-50);font-style:italic}}@layer components{.optionPlaceholder{display:block;padding-block:var(--components-options-item-padding-vertical);padding-inline:var(--components-options-item-padding-horizontal);font-style:italic;color:var(--palettes-neutral-600)}}@layer components{.addOption{position:sticky;inset-block-end:0;background-color:var(--pr-t-elevation-surface-raised)}}@layer mods{.addOption.is-highlighted .addOption-content{--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.addOption.is-stuck{margin-block-start:var(--pr-t-spacings-100);box-shadow:0 0 0 4px var(--pr-t-elevation-surface-raised),0 0 0 1px color-mix(in srgb,var(--palettes-neutral-400) 8%,transparent),0 0 4px 4px color-mix(in srgb,var(--palettes-neutral-400) 32%,transparent),0 0 8px 4px color-mix(in srgb,var(--palettes-neutral-400) 24%,transparent)}}@layer components{.addOption-content{--components-button-font: var(--pr-t-font-body-M);--components-button-borderRadius: var(--pr-t-border-radius-default);--components-button-paddingBlock: var(--pr-t-spacings-100);--components-button-paddingInline: var(--pr-t-spacings-150);--components-button-paddingBlockStart: var(--components-button-paddingBlock);--components-button-paddingBlockEnd: var(--components-button-paddingBlock);--components-button-paddingInlineStart: var(--components-button-paddingInline);--components-button-paddingInlineEnd: var(--components-button-paddingInline);--components-button-padding: var(--components-button-paddingBlockStart) var(--components-button-paddingInlineEnd) var(--components-button-paddingBlockEnd) var(--components-button-paddingInlineStart);--components-button-gap: var(--pr-t-spacings-100);--components-button-opacity: 1;--components-button-cursor: pointer;--components-button-pointerEvents: auto;--components-button-width: auto;--components-button-minWidth: none;--components-button-userSelect: auto;--components-button-boxShadow: var(--pr-t-elevation-shadow-button);--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));--components-button-backgroundColor: var(--palettes-700, var(--palettes-product-700));--components-button-arrow-transform: none;--components-button-AI-background-opacity: 25%;--components-button-font-size: var(--pr-t-font-body-M-fontSize);--components-button-line-height: var(--pr-t-font-body-M-lineHeight);--icon-size: 1.5rem;background-color:var(--components-button-backgroundColor);box-shadow:var(--components-button-boxShadow);border-radius:var(--components-button-borderRadius);padding:var(--components-button-padding);transition-property:background-color,color,border-color,box-shadow;transition-duration:var(--commons-animations-durations-fast);inline-size:var(--components-button-width);min-inline-size:var(--components-button-minWidth);font:var(--components-button-font);font-size:var(--components-button-font-size);line-height:var(--components-button-line-height);font-weight:var(--pr-t-font-fontWeight-semibold);gap:var(--components-button-gap);pointer-events:var(--components-button-pointerEvents);-webkit-user-select:var(--components-button-userSelect);user-select:var(--components-button-userSelect);opacity:var(--components-button-opacity);cursor:var(--components-button-cursor);transition-timing-function:ease;display:inline-flex;align-items:center;justify-content:center;position:relative;text-decoration:none;vertical-align:middle;text-wrap:balance;text-align:center;border:0}.addOption-content,.addOption-content:is(a){color:var(--components-button-color)}.addOption-content .lucca-icon{display:block}.addOption-content .button-icon{--icon-size: 1.5rem}.addOption-content:not(.mod-outlined,.mod-outline) .numericBadge{--components-numericBadge-background: var(--palettes-200, var(--palettes-product-200));--components-numericBadge-color: var(--palettes-800, var(--palettes-product-800))}.addOption-content:hover{--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));--components-button-backgroundColor: var(--palettes-800, var(--palettes-product-800))}.addOption-content:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px;border-radius:var(--components-button-borderRadius)}.addOption-content:active{--components-button-backgroundColor: var(--palettes-900, var(--palettes-product-900))}.addOption-content:disabled{--components-button-cursor: default;--components-button-color: var(--palettes-neutral-500);--components-button-backgroundColor: var(--commons-disabled-background);--components-button-pointerEvents: none}.addOption-content:disabled .numericBadge{--components-numericBadge-background: var(--palettes-neutral-200);--components-numericBadge-color: var(--palettes-neutral-500)}.addOption-content{--components-button-width: 100%;--components-button-backgroundColor: transparent;--components-button-color: var(--palettes-700, var(--pr-t-color-text-subtle));--components-button-boxShadow: none}.addOption-content:hover,.addOption-content:focus-visible{--components-button-color: var(--palettes-700, var(--pr-t-color-text-subtle));--components-button-backgroundColor: var(--palettes-50, var(--palettes-neutral-50))}.addOption-content:active{--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.addOption-content:disabled{--components-button-backgroundColor: transparent;--components-button-color: var(--pr-t-color-text-disabled)}.addOption-content{justify-content:left;--components-button-padding: var(--pr-t-spacings-50)}}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: _LuOptionComponent, selector: "lu-select-option", inputs: ["intl", "optionTpl", "option", "grouping", "hasChildren", "groupIndex", "optionIndex", "scrollIntoViewOptions", "groupTemplateLocation"], outputs: ["onlyParent", "onlyChildren"] }, { kind: "directive", type: PortalDirective, selector: "[luPortal]", inputs: ["luPortal", "luPortalContext"] }, { kind: "directive", type: _CoreSelectPanelElement, selector: "[luCoreSelectPanelElement]", inputs: ["elementId", "isSelected", "option", "disabled"], outputs: ["isSelectedChange", "selected"], exportAs: ["luCoreSelectPanelElement"] }, { kind: "component", type: IconComponent, selector: "lu-icon, pr-icon", inputs: ["icon", "alt", "size", "color", "AI"] }, { kind: "component", type: TreeBranchComponent, selector: "lu-tree-branch", inputs: ["branch", "optionTpl", "optionIndex", "optionComparer", "selectedOptions", "simpleMode", "depth"], outputs: ["toggleOne", "selectMany", "unselectMany"] }, { kind: "pipe", type: _LuOptionGroupPipe, name: "luOptionGroup" }, { kind: "pipe", type: LuIsOptionSelectedPipe, name: "luIsOptionSelected" }, { kind: "pipe", type: TreeDisplayPipe, name: "luTreeDisplay" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<lu-select-panel-layout [loading]=\"loading()\" [trapFocus]=\"true\" (scrolled)=\"onScroll($event)\">\n\t<lu-listbox [tree]=\"!!treeGenerator\" [state]=\"listboxState()\" [statusMsg]=\"listboxStatusMsg()\">\n\t\t<!-- The header is projected inside the listbox because it can contain selectable elements\n\t\tthat are referenced by aria-activedescendant -->\n\t\t<ng-container ngProjectAs=\"[listbox-header]\">\n\t\t\t@if (selectInput.panelHeaderTpl(); as tpl) {\n\t\t\t\t<div>\n\t\t\t\t\t<ng-container *luPortal=\"tpl\" />\n\t\t\t\t</div>\n\t\t\t}\n\t\t</ng-container>\n\t\t@if (grouping() && groupTemplateLocation() === \"group-header\") {\n\t\t\t@for (group of dataSourceOptions() | luOptionGroup: grouping().selector; track group.key; let groupIndex = $index) {\n\t\t\t\t<lu-listbox-option group [groupId]=\"selectId + '-group-' + group.key\" [elementId]=\"selectId + '-group-' + group.key\">\n\t\t\t\t\t<ng-container *luPortal=\"grouping().content; context: { $implicit: group }\" />\n\t\t\t\t\t<div optgroup class=\"listboxOptionWrapper\">\n\t\t\t\t\t\t<ng-template\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"optionsList\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: group.options, groupIndex: groupIndex }\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</lu-listbox-option>\n\t\t\t}\n\t\t}\n\t\t@if (!grouping() || groupTemplateLocation() !== \"group-header\") {\n\t\t\t<ng-template [ngTemplateOutlet]=\"optionsList\" [ngTemplateOutletContext]=\"{ $implicit: dataSourceOptions() }\" />\n\t\t}\n\t\t<ng-template #optionsList let-options let-groupIndex=\"groupIndex\">\n\t\t\t@if (treeGenerator) {\n\t\t\t\t@for (branch of options | luTreeDisplay: treeGenerator; let index = $index; track optionKey()(branch.node)) {\n\t\t\t\t\t<lu-tree-branch\n\t\t\t\t\t\t[branch]=\"branch\"\n\t\t\t\t\t\t[optionTpl]=\"optionTpl()\"\n\t\t\t\t\t\t[optionComparer]=\"optionComparer()\"\n\t\t\t\t\t\t[selectedOptions]=\"[selected()]\"\n\t\t\t\t\t\t[optionIndex]=\"index\"\n\t\t\t\t\t\t(toggleOne)=\"panelRef.emitValue($event)\"\n\t\t\t\t\t\tsimpleMode\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t} @else {\n\t\t\t\t@for (option of options; track optionKey()(option); let index = $index) {\n\t\t\t\t\t<lu-select-option\n\t\t\t\t\t\tluCoreSelectPanelElement\n\t\t\t\t\t\t[option]=\"option\"\n\t\t\t\t\t\t[optionTpl]=\"optionTpl()\"\n\t\t\t\t\t\t[optionIndex]=\"index\"\n\t\t\t\t\t\t[groupTemplateLocation]=\"groupTemplateLocation()\"\n\t\t\t\t\t\t[groupIndex]=\"groupIndex\"\n\t\t\t\t\t\t[grouping]=\"grouping()\"\n\t\t\t\t\t\t[scrollIntoViewOptions]=\"{ block: 'nearest' }\"\n\t\t\t\t\t\t[isSelected]=\"option | luIsOptionSelected: optionComparer() : selected()\"\n\t\t\t\t\t\t[class.withAddOption]=\"shouldDisplayAddOption()\"\n\t\t\t\t\t\t(selected)=\"panelRef.emitValue(option)\"\n\t\t\t\t\t\t(click)=\"panelRef.emitValue(option)\"\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t}\n\t\t</ng-template>\n\t</lu-listbox>\n\t@if (shouldDisplayAddOption()) {\n\t\t<lu-listbox-option\n\t\t\tadd\n\t\t\tclass=\"palette-product\"\n\t\t\tluCoreSelectPanelElement\n\t\t\t#addOptionElement=\"luCoreSelectPanelElement\"\n\t\t\telementId=\"picker-content-add\"\n\t\t\t[hovered]=\"addOptionElement.isHighlighted()\"\n\t\t\t(click)=\"selectInput.emitAddOption()\"\n\t\t\t(selected)=\"selectInput.emitAddOption()\"\n\t\t>\n\t\t\t<ng-container *luPortal=\"selectInput.addOptionLabel\" />\n\t\t</lu-listbox-option>\n\t}\n\t@if (selectInput.panelFooterTpl(); as tpl) {\n\t\t<div>\n\t\t\t<ng-container *luPortal=\"tpl\" />\n\t\t</div>\n\t}\n</lu-select-panel-layout>\n", styles: ["@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 mods{.textfield.mod-search{inline-size:100%}.textfield-input{outline:none}.checkbox.mod-formerEmployee{padding-block:var(--pr-t-spacings-50);padding-inline:var(--components-options-item-padding-horizontal);border-block-end:var(--commons-divider-width) solid var(--commons-divider-color);background-color:var(--palettes-neutral-50);font-style:italic}}@layer components{.optionPlaceholder{display:block;padding-block:var(--components-options-item-padding-vertical);padding-inline:var(--components-options-item-padding-horizontal);font-style:italic;color:var(--palettes-neutral-600)}}\n"], dependencies: [{ kind: "component", type: LuSelectPanelLayoutComponent, selector: "lu-select-panel-layout", inputs: ["loading", "trapFocus", "contentTabIndex"], outputs: ["scrolled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: _LuOptionComponent, selector: "lu-select-option", inputs: ["intl", "optionTpl", "option", "grouping", "hasChildren", "groupIndex", "optionIndex", "scrollIntoViewOptions", "groupTemplateLocation"], outputs: ["onlyParent", "onlyChildren"] }, { kind: "directive", type: PortalDirective, selector: "[luPortal]", inputs: ["luPortal", "luPortalContext"] }, { kind: "directive", type: _CoreSelectPanelElement, selector: "[luCoreSelectPanelElement]", inputs: ["elementId", "isSelected", "option", "disabled"], outputs: ["isSelectedChange", "selected"], exportAs: ["luCoreSelectPanelElement"] }, { kind: "component", type: ListboxComponent, selector: "lu-listbox", inputs: ["multiple", "tree", "state", "statusMsg"] }, { kind: "component", type: OptionComponent, selector: "lu-listbox-option", inputs: ["elementId", "checked", "mixed", "disabled", "hovered", "add", "group", "groupId", "select", "selectAll", "treeitemLevel"] }, { kind: "component", type: TreeBranchComponent, selector: "lu-tree-branch", inputs: ["branch", "optionTpl", "optionIndex", "optionComparer", "selectedOptions", "simpleMode"], outputs: ["toggleOne", "selectMany", "unselectMany"] }, { kind: "pipe", type: _LuOptionGroupPipe, name: "luOptionGroup" }, { kind: "pipe", type: LuIsOptionSelectedPipe, name: "luIsOptionSelected" }, { kind: "pipe", type: TreeDisplayPipe, name: "luTreeDisplay" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: LuSelectPanelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuSelectPanelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lu-select-panel', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'selectPanel',
                         '[class.colorPanel]': 'colorPanel()',
-                        '(document:keydown)': 'onKeydown()',
-                        '(document:mousemove)': 'onMousemove()',
+                        '[class.is-pointerNavigation]': 'pointerNavigation()',
                     }, imports: [
-                        A11yModule,
+                        LuSelectPanelLayoutComponent,
                         FormsModule,
                         NgTemplateOutlet,
                         _LuOptionGroupPipe,
@@ -193,7 +202,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         LuIsOptionSelectedPipe,
                         PortalDirective,
                         _CoreSelectPanelElement,
-                        IconComponent,
+                        ListboxComponent,
+                        OptionComponent,
                         TreeBranchComponent,
                         TreeDisplayPipe,
                     ], providers: [
@@ -202,7 +212,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                             provide: SELECT_PANEL_INSTANCE,
                             useExisting: forwardRef(() => LuSelectPanelComponent),
                         },
-                    ], template: "<div class=\"lu-picker-panel lu-option-picker-panel\" cdkTrapFocus>\n\t<div class=\"lu-picker-content\" [class.is-loading]=\"loading()\" (scroll)=\"onScroll($event)\">\n\t\t@if (selectInput.panelHeaderTpl(); as tpl) {\n\t\t\t<div>\n\t\t\t\t<ng-container *luPortal=\"tpl\" />\n\t\t\t</div>\n\t\t}\n\t\t<div role=\"listbox\">\n\t\t\t@if (grouping() && groupTemplateLocation() === \"group-header\") {\n\t\t\t\t@for (group of dataSourceOptions() | luOptionGroup: grouping().selector; track group.key; let groupIndex = $index) {\n\t\t\t\t\t<div class=\"lu-picker-content-option-group\" role=\"group\" [attr.aria-labelledby]=\"selectId + '-group-' + group.key\">\n\t\t\t\t\t\t<span class=\"lu-picker-content-option-group-title\" role=\"presentation\" [id]=\"selectId + '-group-' + group.key\">\n\t\t\t\t\t\t\t<ng-container *luPortal=\"grouping().content; context: { $implicit: group }\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<ng-template\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"optionsList\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: group.options, groupIndex: groupIndex }\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t}\n\t\t\t@if (!grouping() || groupTemplateLocation() !== \"group-header\") {\n\t\t\t\t<ng-template [ngTemplateOutlet]=\"optionsList\" [ngTemplateOutletContext]=\"{ $implicit: dataSourceOptions() }\" />\n\t\t\t}\n\t\t\t<ng-template #optionsList let-options let-groupIndex=\"groupIndex\">\n\t\t\t\t@if (treeGenerator) {\n\t\t\t\t\t@for (branch of options | luTreeDisplay: treeGenerator; let index = $index; track optionKey()(branch.node)) {\n\t\t\t\t\t\t<lu-tree-branch\n\t\t\t\t\t\t\t[branch]=\"branch\"\n\t\t\t\t\t\t\t[optionTpl]=\"optionTpl()\"\n\t\t\t\t\t\t\t[optionComparer]=\"optionComparer()\"\n\t\t\t\t\t\t\t[selectedOptions]=\"[selected()]\"\n\t\t\t\t\t\t\t[optionIndex]=\"index\"\n\t\t\t\t\t\t\t(toggleOne)=\"panelRef.emitValue($event)\"\n\t\t\t\t\t\t\tsimpleMode\n\t\t\t\t\t\t/>\n\t\t\t\t\t}\n\t\t\t\t} @else {\n\t\t\t\t\t@for (option of options; track optionKey()(option); let index = $index) {\n\t\t\t\t\t\t<lu-select-option\n\t\t\t\t\t\t\tluCoreSelectPanelElement\n\t\t\t\t\t\t\t[option]=\"option\"\n\t\t\t\t\t\t\t[optionTpl]=\"optionTpl()\"\n\t\t\t\t\t\t\t[optionIndex]=\"index\"\n\t\t\t\t\t\t\t[groupTemplateLocation]=\"groupTemplateLocation()\"\n\t\t\t\t\t\t\t[groupIndex]=\"groupIndex\"\n\t\t\t\t\t\t\t[grouping]=\"grouping()\"\n\t\t\t\t\t\t\t[scrollIntoViewOptions]=\"{ block: 'center' }\"\n\t\t\t\t\t\t\t[isSelected]=\"option | luIsOptionSelected: optionComparer() : selected()\"\n\t\t\t\t\t\t\t[class.withAddOption]=\"shouldDisplayAddOption()\"\n\t\t\t\t\t\t\t(selected)=\"panelRef.emitValue(option)\"\n\t\t\t\t\t\t\t(click)=\"panelRef.emitValue(option)\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t</ng-template>\n\t\t\t@if (dataSourceOptions().length === 0 && !loading()) {\n\t\t\t\t<div class=\"lu-picker-content-option-emptyState\">\n\t\t\t\t\t{{ clue().length ? intl().emptyResults : intl().emptyOptions }}\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t\t@if (loading()) {\n\t\t\t<div class=\"lu-picker-content-loading\">\n\t\t\t\t<div class=\"loading\">{{ intl().loading }}</div>\n\t\t\t</div>\n\t\t}\n\t\t@if (shouldDisplayAddOption()) {\n\t\t\t<div\n\t\t\t\tclass=\"addOption palette-product is-stuck\"\n\t\t\t\t(click)=\"selectInput.emitAddOption()\"\n\t\t\t\t(selected)=\"selectInput.emitAddOption()\"\n\t\t\t\telementId=\"picker-content-add\"\n\t\t\t\tluCoreSelectPanelElement\n\t\t\t>\n\t\t\t\t<div class=\"addOption-content\">\n\t\t\t\t\t<lu-icon icon=\"mathsPlus\" />\n\t\t\t\t\t<ng-container *luPortal=\"selectInput.addOptionLabel\" />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t}\n\t\t@if (selectInput.panelFooterTpl(); as tpl) {\n\t\t\t<div>\n\t\t\t\t<ng-container *luPortal=\"tpl\" />\n\t\t\t</div>\n\t\t}\n\t</div>\n</div>\n", styles: ["@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 mods{.textfield.mod-search{inline-size:100%}.textfield-input{outline:none}.checkbox.mod-formerEmployee{padding-block:var(--pr-t-spacings-50);padding-inline:var(--components-options-item-padding-horizontal);border-block-end:var(--commons-divider-width) solid var(--commons-divider-color);background-color:var(--palettes-neutral-50);font-style:italic}}@layer components{.optionPlaceholder{display:block;padding-block:var(--components-options-item-padding-vertical);padding-inline:var(--components-options-item-padding-horizontal);font-style:italic;color:var(--palettes-neutral-600)}}@layer components{.addOption{position:sticky;inset-block-end:0;background-color:var(--pr-t-elevation-surface-raised)}}@layer mods{.addOption.is-highlighted .addOption-content{--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.addOption.is-stuck{margin-block-start:var(--pr-t-spacings-100);box-shadow:0 0 0 4px var(--pr-t-elevation-surface-raised),0 0 0 1px color-mix(in srgb,var(--palettes-neutral-400) 8%,transparent),0 0 4px 4px color-mix(in srgb,var(--palettes-neutral-400) 32%,transparent),0 0 8px 4px color-mix(in srgb,var(--palettes-neutral-400) 24%,transparent)}}@layer components{.addOption-content{--components-button-font: var(--pr-t-font-body-M);--components-button-borderRadius: var(--pr-t-border-radius-default);--components-button-paddingBlock: var(--pr-t-spacings-100);--components-button-paddingInline: var(--pr-t-spacings-150);--components-button-paddingBlockStart: var(--components-button-paddingBlock);--components-button-paddingBlockEnd: var(--components-button-paddingBlock);--components-button-paddingInlineStart: var(--components-button-paddingInline);--components-button-paddingInlineEnd: var(--components-button-paddingInline);--components-button-padding: var(--components-button-paddingBlockStart) var(--components-button-paddingInlineEnd) var(--components-button-paddingBlockEnd) var(--components-button-paddingInlineStart);--components-button-gap: var(--pr-t-spacings-100);--components-button-opacity: 1;--components-button-cursor: pointer;--components-button-pointerEvents: auto;--components-button-width: auto;--components-button-minWidth: none;--components-button-userSelect: auto;--components-button-boxShadow: var(--pr-t-elevation-shadow-button);--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));--components-button-backgroundColor: var(--palettes-700, var(--palettes-product-700));--components-button-arrow-transform: none;--components-button-AI-background-opacity: 25%;--components-button-font-size: var(--pr-t-font-body-M-fontSize);--components-button-line-height: var(--pr-t-font-body-M-lineHeight);--icon-size: 1.5rem;background-color:var(--components-button-backgroundColor);box-shadow:var(--components-button-boxShadow);border-radius:var(--components-button-borderRadius);padding:var(--components-button-padding);transition-property:background-color,color,border-color,box-shadow;transition-duration:var(--commons-animations-durations-fast);inline-size:var(--components-button-width);min-inline-size:var(--components-button-minWidth);font:var(--components-button-font);font-size:var(--components-button-font-size);line-height:var(--components-button-line-height);font-weight:var(--pr-t-font-fontWeight-semibold);gap:var(--components-button-gap);pointer-events:var(--components-button-pointerEvents);-webkit-user-select:var(--components-button-userSelect);user-select:var(--components-button-userSelect);opacity:var(--components-button-opacity);cursor:var(--components-button-cursor);transition-timing-function:ease;display:inline-flex;align-items:center;justify-content:center;position:relative;text-decoration:none;vertical-align:middle;text-wrap:balance;text-align:center;border:0}.addOption-content,.addOption-content:is(a){color:var(--components-button-color)}.addOption-content .lucca-icon{display:block}.addOption-content .button-icon{--icon-size: 1.5rem}.addOption-content:not(.mod-outlined,.mod-outline) .numericBadge{--components-numericBadge-background: var(--palettes-200, var(--palettes-product-200));--components-numericBadge-color: var(--palettes-800, var(--palettes-product-800))}.addOption-content:hover{--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));--components-button-backgroundColor: var(--palettes-800, var(--palettes-product-800))}.addOption-content:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px;border-radius:var(--components-button-borderRadius)}.addOption-content:active{--components-button-backgroundColor: var(--palettes-900, var(--palettes-product-900))}.addOption-content:disabled{--components-button-cursor: default;--components-button-color: var(--palettes-neutral-500);--components-button-backgroundColor: var(--commons-disabled-background);--components-button-pointerEvents: none}.addOption-content:disabled .numericBadge{--components-numericBadge-background: var(--palettes-neutral-200);--components-numericBadge-color: var(--palettes-neutral-500)}.addOption-content{--components-button-width: 100%;--components-button-backgroundColor: transparent;--components-button-color: var(--palettes-700, var(--pr-t-color-text-subtle));--components-button-boxShadow: none}.addOption-content:hover,.addOption-content:focus-visible{--components-button-color: var(--palettes-700, var(--pr-t-color-text-subtle));--components-button-backgroundColor: var(--palettes-50, var(--palettes-neutral-50))}.addOption-content:active{--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.addOption-content:disabled{--components-button-backgroundColor: transparent;--components-button-color: var(--pr-t-color-text-disabled)}.addOption-content{justify-content:left;--components-button-padding: var(--pr-t-spacings-50)}}\n"] }]
+                    ], template: "<lu-select-panel-layout [loading]=\"loading()\" [trapFocus]=\"true\" (scrolled)=\"onScroll($event)\">\n\t<lu-listbox [tree]=\"!!treeGenerator\" [state]=\"listboxState()\" [statusMsg]=\"listboxStatusMsg()\">\n\t\t<!-- The header is projected inside the listbox because it can contain selectable elements\n\t\tthat are referenced by aria-activedescendant -->\n\t\t<ng-container ngProjectAs=\"[listbox-header]\">\n\t\t\t@if (selectInput.panelHeaderTpl(); as tpl) {\n\t\t\t\t<div>\n\t\t\t\t\t<ng-container *luPortal=\"tpl\" />\n\t\t\t\t</div>\n\t\t\t}\n\t\t</ng-container>\n\t\t@if (grouping() && groupTemplateLocation() === \"group-header\") {\n\t\t\t@for (group of dataSourceOptions() | luOptionGroup: grouping().selector; track group.key; let groupIndex = $index) {\n\t\t\t\t<lu-listbox-option group [groupId]=\"selectId + '-group-' + group.key\" [elementId]=\"selectId + '-group-' + group.key\">\n\t\t\t\t\t<ng-container *luPortal=\"grouping().content; context: { $implicit: group }\" />\n\t\t\t\t\t<div optgroup class=\"listboxOptionWrapper\">\n\t\t\t\t\t\t<ng-template\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"optionsList\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: group.options, groupIndex: groupIndex }\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</lu-listbox-option>\n\t\t\t}\n\t\t}\n\t\t@if (!grouping() || groupTemplateLocation() !== \"group-header\") {\n\t\t\t<ng-template [ngTemplateOutlet]=\"optionsList\" [ngTemplateOutletContext]=\"{ $implicit: dataSourceOptions() }\" />\n\t\t}\n\t\t<ng-template #optionsList let-options let-groupIndex=\"groupIndex\">\n\t\t\t@if (treeGenerator) {\n\t\t\t\t@for (branch of options | luTreeDisplay: treeGenerator; let index = $index; track optionKey()(branch.node)) {\n\t\t\t\t\t<lu-tree-branch\n\t\t\t\t\t\t[branch]=\"branch\"\n\t\t\t\t\t\t[optionTpl]=\"optionTpl()\"\n\t\t\t\t\t\t[optionComparer]=\"optionComparer()\"\n\t\t\t\t\t\t[selectedOptions]=\"[selected()]\"\n\t\t\t\t\t\t[optionIndex]=\"index\"\n\t\t\t\t\t\t(toggleOne)=\"panelRef.emitValue($event)\"\n\t\t\t\t\t\tsimpleMode\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t} @else {\n\t\t\t\t@for (option of options; track optionKey()(option); let index = $index) {\n\t\t\t\t\t<lu-select-option\n\t\t\t\t\t\tluCoreSelectPanelElement\n\t\t\t\t\t\t[option]=\"option\"\n\t\t\t\t\t\t[optionTpl]=\"optionTpl()\"\n\t\t\t\t\t\t[optionIndex]=\"index\"\n\t\t\t\t\t\t[groupTemplateLocation]=\"groupTemplateLocation()\"\n\t\t\t\t\t\t[groupIndex]=\"groupIndex\"\n\t\t\t\t\t\t[grouping]=\"grouping()\"\n\t\t\t\t\t\t[scrollIntoViewOptions]=\"{ block: 'nearest' }\"\n\t\t\t\t\t\t[isSelected]=\"option | luIsOptionSelected: optionComparer() : selected()\"\n\t\t\t\t\t\t[class.withAddOption]=\"shouldDisplayAddOption()\"\n\t\t\t\t\t\t(selected)=\"panelRef.emitValue(option)\"\n\t\t\t\t\t\t(click)=\"panelRef.emitValue(option)\"\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t}\n\t\t</ng-template>\n\t</lu-listbox>\n\t@if (shouldDisplayAddOption()) {\n\t\t<lu-listbox-option\n\t\t\tadd\n\t\t\tclass=\"palette-product\"\n\t\t\tluCoreSelectPanelElement\n\t\t\t#addOptionElement=\"luCoreSelectPanelElement\"\n\t\t\telementId=\"picker-content-add\"\n\t\t\t[hovered]=\"addOptionElement.isHighlighted()\"\n\t\t\t(click)=\"selectInput.emitAddOption()\"\n\t\t\t(selected)=\"selectInput.emitAddOption()\"\n\t\t>\n\t\t\t<ng-container *luPortal=\"selectInput.addOptionLabel\" />\n\t\t</lu-listbox-option>\n\t}\n\t@if (selectInput.panelFooterTpl(); as tpl) {\n\t\t<div>\n\t\t\t<ng-container *luPortal=\"tpl\" />\n\t\t</div>\n\t}\n</lu-select-panel-layout>\n", styles: ["@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 mods{.textfield.mod-search{inline-size:100%}.textfield-input{outline:none}.checkbox.mod-formerEmployee{padding-block:var(--pr-t-spacings-50);padding-inline:var(--components-options-item-padding-horizontal);border-block-end:var(--commons-divider-width) solid var(--commons-divider-color);background-color:var(--palettes-neutral-50);font-style:italic}}@layer components{.optionPlaceholder{display:block;padding-block:var(--components-options-item-padding-vertical);padding-inline:var(--components-options-item-padding-horizontal);font-style:italic;color:var(--palettes-neutral-600)}}\n"] }]
         }] });
 
 class BaseSelectPanelRef extends LuSelectPanelRef {
@@ -291,6 +301,10 @@ class LuSimpleSelectPanelRefFactory {
         const overlayConfig = overlayConfigOverride || {};
         overlayConfig.positionStrategy = this.positionBuilder
             .flexibleConnectedTo(this.elementRef)
+            // Options usually arrive after the panel has been opened: without this, every reposition is
+            // capped to the bounding box computed while the panel was still empty, so a panel opened in a
+            // tight space below the field can never grow nor flip above once its options are there.
+            .withGrowAfterOpen(true)
             .withViewportMargin(getPushPanelViewportMargin(this.elementRef.nativeElement, 8))
             .withPositions([
             {
@@ -324,10 +338,10 @@ class LuSimpleSelectPanelRefFactory {
         overlayConfig.maxWidth = '100vw';
         return overlayConfig;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: LuSimpleSelectPanelRefFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: LuSimpleSelectPanelRefFactory }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuSimpleSelectPanelRefFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuSimpleSelectPanelRefFactory }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: LuSimpleSelectPanelRefFactory, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuSimpleSelectPanelRefFactory, decorators: [{
             type: Injectable
         }] });
 
@@ -340,7 +354,7 @@ class LuSimpleSelectInputComponent extends ALuSelectInputComponent {
         this.valueID = `value-${++nextID}`;
         this.autocomplete = input('off', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
-        this.impersonation = input(false, { ...(ngDevMode ? { debugName: "impersonation" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.impersonation = input(false, { ...(ngDevMode ? { debugName: "impersonation" } : /* istanbul ignore next */ {}), transform: luBooleanAttribute });
         this.filterPillPanelAnchorRef = viewChild('filterPillPanelAnchor', { ...(ngDevMode ? { debugName: "filterPillPanelAnchorRef" } : /* istanbul ignore next */ {}), read: ViewContainerRef });
         this.panelRefFactory = inject(LuSimpleSelectPanelRefFactory);
     }
@@ -365,8 +379,8 @@ class LuSimpleSelectInputComponent extends ALuSelectInputComponent {
         }
         super.enableFilterPillMode();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: LuSimpleSelectInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: LuSimpleSelectInputComponent, isStandalone: true, selector: "lu-simple-select", inputs: { intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, impersonation: { classPropertyName: "impersonation", publicName: "impersonation", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.mod-filterPill": "this.filterPillMode && !this.impersonation()", "class.mod-impersonation": "this.impersonation()" }, classAttribute: "simpleSelect" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuSimpleSelectInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: LuSimpleSelectInputComponent, isStandalone: true, selector: "lu-simple-select", inputs: { intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, impersonation: { classPropertyName: "impersonation", publicName: "impersonation", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.mod-filterPill": "this.filterPillMode && !this.impersonation()", "class.mod-impersonation": "this.impersonation()" }, classAttribute: "simpleSelect" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => LuSimpleSelectInputComponent),
@@ -382,9 +396,9 @@ class LuSimpleSelectInputComponent extends ALuSelectInputComponent {
                 provide: FILTER_PILL_INPUT_COMPONENT,
                 useExisting: forwardRef(() => LuSimpleSelectInputComponent),
             },
-        ], viewQueries: [{ propertyName: "filterPillPanelAnchorRef", first: true, predicate: ["filterPillPanelAnchor"], descendants: true, read: ViewContainerRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"simpleSelect-field\">\n\t<span class=\"simpleSelect-field-prefix\">\n\t\t@if (prefix()) {\n\t\t\t<ng-container *luPortal=\"prefix()\" />\n\t\t}\n\t</span>\n\t<input\n\t\tclass=\"simpleSelect-field-input\"\n\t\ttype=\"text\"\n\t\trole=\"combobox\"\n\t\taria-haspopup=\"listbox\"\n\t\t[attr.aria-activedescendant]=\"activeDescendant$ | async\"\n\t\t[attr.aria-expanded]=\"panelOpenSignal()\"\n\t\t[attr.aria-controls]=\"ariaControls\"\n\t\t[attr.placeholder]=\"inputPlaceholder ? inputPlaceholder : intl().placeholder\"\n\t\t[ngModel]=\"clue\"\n\t\t(ngModelChange)=\"clueChanged($event)\"\n\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t[readonly]=\"!searchable\"\n\t\t[disabled]=\"disabled$ | async\"\n\t\t(keyup.space)=\"inputSpace($event)\"\n\t\tluInput\n\t\t#inputElement\n\t\t[attr.autocomplete]=\"autocomplete()\"\n\t\t[attr.tabindex]=\"inputTabindex()\"\n\t\t[attr.aria-labelledby]=\"valueID\"\n\t/>\n\t<div class=\"simpleSelect-field-value\" [attr.id]=\"valueID\">\n\t\t<ng-container *ngTemplateOutlet=\"currentValueDisplayerTpl\" />\n\t</div>\n\t@if (!filterPillMode && !impersonation()) {\n\t\t@if (clearable() && hasValue() && (disabled$ | async) === false) {\n\t\t\t<lu-clear class=\"simpleSelect-field-clear\" (onClear)=\"clearValue($event); inputElement.focus()\">{{ intl().clear }}</lu-clear>\n\t\t}\n\t\t<lu-icon icon=\"arrowChevronBottom\" class=\"simpleSelect-field-icon\" />\n\t}\n\t<lu-icon icon=\"searchMagnifyingGlass\" class=\"simpleSelect-field-icon mod-search\" />\n</div>\n<ng-container #filterPillPanelAnchor />\n<ng-container *luFilterPillDisplayer>\n\t<ng-container *ngTemplateOutlet=\"currentValueDisplayerTpl\" />\n</ng-container>\n\n<ng-template #currentValueDisplayerTpl>\n\t<ng-container *luOptionOutlet=\"displayerTpl(); value: value\" />\n</ng-template>\n\n@if (!ignorePresentation()) {\n\t<ng-container *luPresentationDisplayDefault>\n\t\t@if (value) {\n\t\t\t<ng-container *ngTemplateOutlet=\"currentValueDisplayerTpl\" />\n\t\t} @else {\n\t\t\t<span aria-hidden=\"true\" data-content-before=\"\u2013\"></span>\n\t\t}\n\t</ng-container>\n}\n", styles: ["@layer components{.simpleSelect{--components-simpleSelect-font: var(--pr-t-font-body-M);--components-simpleSelect-padding: var(--pr-t-spacings-100);--components-simpleSelect-gap: var(--pr-t-spacings-100);--components-simpleSelect-background: var(--pr-t-color-input-background);--components-simpleSelect-value-color: var(--pr-t-color-input-text);--components-simpleSelect-border-color: var(--pr-t-color-input-border);--components-simpleSelect-placeholder: var(--pr-t-color-input-text-placeholder);--components-simpleSelect-arrow-color: var(--pr-t-color-input-icon);display:block}.simpleSelect-field{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;box-shadow:0 0 0 1px var(--components-simpleSelect-border-color);background-color:var(--components-simpleSelect-background);border-radius:var(--pr-t-border-radius-input);padding:var(--components-simpleSelect-padding);overflow:hidden;outline:none;cursor:pointer}.simpleSelect-field:hover{--components-simpleSelect-border-color: var(--pr-t-color-input-border-hover)}.simpleSelect-field-prefix{display:none}.simpleSelect-field-prefix:not(:empty){display:flex;margin-inline-end:var(--pr-t-spacings-50)}.simpleSelect-field-input{grid-column-start:2;grid-row-start:1;font:var(--components-simpleSelect-font);padding:0;background-color:transparent;color:var(--components-simpleSelect-value-color);border:0;outline:none;position:relative;z-index:1;min-inline-size:0;cursor:pointer}.simpleSelect-field-input::placeholder{color:var(--components-simpleSelect-placeholder)}.simpleSelect-field-value{grid-column-start:2;grid-row-start:1;inline-size:100%;font:var(--components-simpleSelect-font);color:var(--components-simpleSelect-value-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color var(--commons-animations-durations-fast) ease}.simpleSelect-field-clear{grid-column-start:-2;margin-inline-start:var(--components-simpleSelect-gap)}.simpleSelect-field-icon{grid-column-start:-1;margin-inline-start:var(--components-simpleSelect-gap);color:var(--components-simpleSelect-arrow-color);transition:transform var(--commons-animations-durations-standard) ease}.simpleSelect-field-icon .lucca-icon{--icon-size: 1.5rem}.simpleSelect-field-icon.mod-search{display:none}}@layer mods{.simpleSelect:has(.simpleSelect-field-input:focus-visible) .simpleSelect-field{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.simpleSelect:has(.simpleSelect-field-input:focus-visible) .simpleSelect-field-value{color:var(--components-simpleSelect-value-color)}.simpleSelect:has(.simpleSelect-field-input:focus-visible):has(.simpleSelect-field-input[aria-expanded=true]) .simpleSelect-field-value{color:var(--components-simpleSelect-placeholder)}.simpleSelect:has(.simpleSelect-field-input:focus-visible):has(.simpleSelect-field-input[aria-expanded=true]) .simpleSelect-field-icon{transform:rotate(180deg)}.simpleSelect:not(.mod-noClueIcon):has(.simpleSelect-field-input:focus-visible):not(:has(.simpleSelect-field-input:read-only)) .simpleSelect-field-icon,.simpleSelect:not(.mod-noClueIcon):has(.simpleSelect-field-input[aria-expanded=true]):not(:has(.simpleSelect-field-input:read-only)) .simpleSelect-field-icon{display:none}.simpleSelect:not(.mod-noClueIcon):has(.simpleSelect-field-input:focus-visible):not(:has(.simpleSelect-field-input:read-only)) .simpleSelect-field-icon.mod-search,.simpleSelect:not(.mod-noClueIcon):has(.simpleSelect-field-input[aria-expanded=true]):not(:has(.simpleSelect-field-input:read-only)) .simpleSelect-field-icon.mod-search{display:inline-flex;transform:none}.simpleSelect:has(.simpleSelect-field-input[aria-invalid=true]){--components-simpleSelect-border-color: var(--pr-t-color-input-border-critical);--components-simpleSelect-background: var(--pr-t-color-input-background-critical);--components-simpleSelect-placeholder: var(--pr-t-color-input-text-placeholder-critical)}.simpleSelect:has(.simpleSelect-field-input:disabled){--components-simpleSelect-background: var(--pr-t-color-input-background-disabled);--components-simpleSelect-placeholder: var(--commons-disabled-placeholder);--components-simpleSelect-value-color: var(--pr-t-color-input-text-disabled);--components-simpleSelect-arrow-color: var(--pr-t-color-input-icon-disabled)}.simpleSelect:has(.simpleSelect-field-input:disabled) .simpleSelect-field{pointer-events:none}.simpleSelect.mod-S{--components-simpleSelect-font: var(--pr-t-font-body-S);--components-simpleSelect-padding: var(--pr-t-spacings-75);--components-simpleSelect-gap: var(--pr-t-spacings-75)}.simpleSelect.mod-S .simpleSelect-field-icon .lucca-icon{--icon-size: 1.25rem}.simpleSelect.mod-S .simpleSelect-field-clear.clear,.simpleSelect.mod-S .simpleSelect-field-clear:not(.clear){--components-clear-size: .75rem;--icon-size: .75rem}.simpleSelect.mod-XS{--components-simpleSelect-font: var(--pr-t-font-body-XS);--components-simpleSelect-padding: var(--pr-t-spacings-50);--components-simpleSelect-gap: var(--pr-t-spacings-50)}.simpleSelect.mod-XS .simpleSelect-field-icon .lucca-icon{--icon-size: 1rem}.simpleSelect.mod-XS .simpleSelect-field-clear.clear,.simpleSelect.mod-XS .simpleSelect-field-clear:not(.clear){--components-clear-size: .75rem;--icon-size: .75rem}.simpleSelect.mod-impersonation,.simpleSelect.mod-filterPill{inline-size:26.5rem;max-inline-size:calc(100vw - 2.5rem)}.simpleSelect.mod-impersonation .simpleSelect-field,.simpleSelect.mod-filterPill .simpleSelect-field{position:relative;z-index:1}.simpleSelect.mod-impersonation lu-simple-select-default-option.pr-u-ellipsis,.simpleSelect.mod-filterPill lu-simple-select-default-option.pr-u-ellipsis{white-space:normal!important}.simpleSelect.mod-impersonation .lu-picker-content,.simpleSelect.mod-filterPill .lu-picker-content{animation:none;box-shadow:none;border-radius:0;background-color:transparent;padding:var(--pr-t-spacings-50);margin:var(--pr-t-spacings-75) calc(var(--pr-t-spacings-100) * -1) calc(var(--pr-t-spacings-100) * -1)}.simpleSelect.is-searchFilled .simpleSelect-field-value{display:none}.simpleSelect.is-selected .simpleSelect-field-input::placeholder{opacity:0}.simpleSelect.is-selected.is-searchFilled .simpleSelect-field-input::placeholder{opacity:0}.simpleSelect.is-selected.is-searchFilled .simpleSelect-field-value{display:none}}@layer components{.clear{--components-clear-display: grid;--components-clear-size: 1rem;--components-clear-background: var(--palettes-800, var(--palettes-neutral-800));--components-clear-cross-color: var(--palettes-0, var(--palettes-neutral-0));--components-clear-background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' fill='none'%3E%3Cpath d='M5.80473 4.86192C5.54438 4.60157 5.12227 4.60157 4.86192 4.86192C4.60157 5.12227 4.60157 5.54438 4.86192 5.80473L7.05718 7.99999L4.86192 10.1953C4.60157 10.4556 4.60157 10.8777 4.86192 11.1381C5.12227 11.3984 5.54438 11.3984 5.80473 11.1381L7.99999 8.9428L10.1953 11.1381C10.4556 11.3984 10.8777 11.3984 11.1381 11.1381C11.3984 10.8777 11.3984 10.4556 11.1381 10.1953L8.9428 7.99999L11.1381 5.80473C11.3984 5.54438 11.3984 5.12227 11.1381 4.86192C10.8777 4.60157 10.4556 4.60157 10.1953 4.86192L7.99999 7.05718L5.80473 4.86192Z' fill='currentColor'/%3E%3C/svg%3E\");padding:0;border:0;inline-size:100%;background-color:transparent;color:inherit;text-align:start;display:block;font:inherit;cursor:pointer;display:var(--components-clear-display);grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:\"main\";align-items:normal;flex-shrink:0;inline-size:var(--components-clear-size);block-size:var(--components-clear-size);border-radius:var(--pr-t-border-radius-full)}.clear:before,.clear:after{content:\"\";grid-area:main}.clear:before{border-radius:var(--pr-t-border-radius-full);background-color:var(--components-clear-background)}.clear:after{-webkit-mask-image:var(--components-clear-background-image);mask-image:var(--components-clear-background-image);-webkit-mask-size:var(--components-clear-size);mask-size:var(--components-clear-size);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:var(--components-clear-cross-color)}.clear:hover{--components-clear-cross-color: var(--palettes-0, var(--palettes-neutral-0));--components-clear-background: var(--palettes-700, var(--palettes-neutral-700))}.clear:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px;border-radius:50%}.clear:active{--components-clear-background: var(--palettes-900, var(--palettes-neutral-900))}.clear .lucca-icon{display:none}}@layer mods{.clear.mod-S{--components-clear-size: .75rem;--icon-size: .75rem}.clear.mod-inverted{--components-clear-cross-color: var(--palettes-800, var(--palettes-neutral-800));--components-clear-background: var(--palettes-0, var(--palettes-neutral-0))}.clear.mod-inverted:hover{--components-clear-background: var(--palettes-50, var(--palettes-neutral-50))}.clear.mod-inverted:active{--components-clear-background: var(--palettes-100, var(--palettes-neutral-100))}.clear[disabled]{cursor:default;--components-clear-cross-color: var(--palettes-neutral-500)}.clear[disabled],.clear[disabled]:hover,.clear[disabled]:active{--components-clear-background: var(--palettes-neutral-300)}.clear[hidden],.filterPill[disabled] .clear,.filterPill:not(.is-filled) .clear,.textfield-input[disabled] .clear,.textfield-input:not(.is-filled) .clear{--components-clear-display: none}.multiSelect.is-selected:has(.multipleSelect-clear) .clear{--components-clear-display: grid}}\n"], dependencies: [{ kind: "directive", type: _LuOptionOutletDirective, selector: "[luOptionOutlet]", inputs: ["luOptionOutlet", "luOptionOutletValue", "luOptionShowNull"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: InputDirective, selector: "[luInput]", inputs: ["luInputStandalone"] }, { kind: "directive", type: FilterPillDisplayerDirective, selector: "[luFilterPillDisplayer]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "lu-icon, pr-icon", inputs: ["icon", "alt", "size", "color", "AI"] }, { kind: "component", type: ClearComponent, selector: "lu-clear", inputs: ["intl", "size", "disabled", "palette", "inverted"], outputs: ["onClear"], exportAs: ["luClearer"] }, { kind: "directive", type: PortalDirective, selector: "[luPortal]", inputs: ["luPortal", "luPortalContext"] }, { kind: "directive", type: _PresentationDisplayDefaultDirective, selector: "[luPresentationDisplayDefault]" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "filterPillPanelAnchorRef", first: true, predicate: ["filterPillPanelAnchor"], descendants: true, read: ViewContainerRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"simpleSelect-field\">\n\t<span class=\"simpleSelect-field-prefix\">\n\t\t@if (prefix(); as prefix) {\n\t\t\t<ng-container *luPortal=\"prefix\" />\n\t\t}\n\t</span>\n\t<input\n\t\tclass=\"simpleSelect-field-input\"\n\t\ttype=\"text\"\n\t\trole=\"combobox\"\n\t\taria-haspopup=\"listbox\"\n\t\t[attr.aria-activedescendant]=\"activeDescendant$ | async\"\n\t\t[attr.aria-expanded]=\"panelOpenSignal()\"\n\t\t[attr.aria-controls]=\"ariaControls\"\n\t\t[attr.placeholder]=\"inputPlaceholder ? inputPlaceholder : intl().placeholder\"\n\t\t[ngModel]=\"clue\"\n\t\t(ngModelChange)=\"clueChanged($event)\"\n\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t[readonly]=\"!searchable\"\n\t\t[disabled]=\"(disabled$ | async) ?? false\"\n\t\t(keyup.space)=\"inputSpace($event)\"\n\t\tluInput\n\t\t#inputElement\n\t\t[attr.autocomplete]=\"autocomplete()\"\n\t\t[attr.tabindex]=\"inputTabindex()\"\n\t\t[attr.aria-labelledby]=\"valueID\"\n\t/>\n\t<div class=\"simpleSelect-field-value\" [attr.id]=\"valueID\">\n\t\t<ng-container *ngTemplateOutlet=\"currentValueDisplayerTpl\" />\n\t</div>\n\t@if (!filterPillMode && !impersonation()) {\n\t\t@if (clearable() && hasValue() && (disabled$ | async) === false) {\n\t\t\t<lu-clear class=\"simpleSelect-field-clear\" (onClear)=\"clearValue($event); inputElement.focus()\">{{ intl().clear }}</lu-clear>\n\t\t}\n\t\t<lu-icon icon=\"arrowChevronBottom\" class=\"simpleSelect-field-icon\" />\n\t}\n\t<lu-icon icon=\"searchMagnifyingGlass\" class=\"simpleSelect-field-icon mod-search\" />\n</div>\n<ng-container #filterPillPanelAnchor />\n<ng-container *luFilterPillDisplayer>\n\t<ng-container *ngTemplateOutlet=\"currentValueDisplayerTpl\" />\n</ng-container>\n\n<ng-template #currentValueDisplayerTpl>\n\t<ng-container *luOptionOutlet=\"displayerTpl(); value: value\" />\n</ng-template>\n\n@if (!ignorePresentation()) {\n\t<ng-container *luPresentationDisplayDefault>\n\t\t@if (value) {\n\t\t\t<ng-container *ngTemplateOutlet=\"currentValueDisplayerTpl\" />\n\t\t} @else {\n\t\t\t<span aria-hidden=\"true\" data-content-before=\"\u2013\"></span>\n\t\t}\n\t</ng-container>\n}\n", styles: ["@layer components{.simpleSelect{--components-simpleSelect-font: var(--pr-t-font-body-M);--components-simpleSelect-padding: var(--pr-t-spacings-100);--components-simpleSelect-gap: var(--pr-t-spacings-100);--components-simpleSelect-background: var(--pr-t-color-input-background);--components-simpleSelect-value-color: var(--pr-t-color-input-text);--components-simpleSelect-border-color: var(--pr-t-color-input-border);--components-simpleSelect-placeholder: var(--pr-t-color-input-text-placeholder);--components-simpleSelect-arrow-color: var(--pr-t-color-input-icon);display:block}.simpleSelect-field{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;box-shadow:0 0 0 1px var(--components-simpleSelect-border-color);background-color:var(--components-simpleSelect-background);border-radius:var(--pr-t-border-radius-input);padding:var(--components-simpleSelect-padding);overflow:hidden;outline:none;cursor:pointer}.simpleSelect-field:hover{--components-simpleSelect-border-color: var(--pr-t-color-input-border-hover)}.simpleSelect-field-prefix{display:none}.simpleSelect-field-prefix:not(:empty){display:flex;margin-inline-end:var(--pr-t-spacings-50)}.simpleSelect-field-input{grid-column-start:2;grid-row-start:1;font:var(--components-simpleSelect-font);padding:0;background-color:transparent;color:var(--components-simpleSelect-value-color);border:0;outline:none;position:relative;z-index:1;min-inline-size:0;cursor:pointer}.simpleSelect-field-input::placeholder{color:var(--components-simpleSelect-placeholder)}.simpleSelect-field-value{grid-column-start:2;grid-row-start:1;inline-size:100%;font:var(--components-simpleSelect-font);color:var(--components-simpleSelect-value-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color var(--commons-animations-durations-fast) ease}.simpleSelect-field-clear{grid-column-start:-2;margin-inline-start:var(--components-simpleSelect-gap)}.simpleSelect-field-icon{grid-column-start:-1;margin-inline-start:var(--components-simpleSelect-gap);color:var(--components-simpleSelect-arrow-color);transition:transform var(--commons-animations-durations-standard) ease}.simpleSelect-field-icon .lucca-icon{--icon-size: 1.5rem}.simpleSelect-field-icon.mod-search{display:none}}@layer mods{.simpleSelect:has(.simpleSelect-field-input:focus-visible) .simpleSelect-field{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.simpleSelect:has(.simpleSelect-field-input:focus-visible) .simpleSelect-field-value{color:var(--components-simpleSelect-value-color)}.simpleSelect:has(.simpleSelect-field-input:focus-visible):has(.simpleSelect-field-input[aria-expanded=true]) .simpleSelect-field-value{color:var(--components-simpleSelect-placeholder)}.simpleSelect:has(.simpleSelect-field-input:focus-visible):has(.simpleSelect-field-input[aria-expanded=true]) .simpleSelect-field-icon{transform:rotate(180deg)}.simpleSelect:not(.mod-noClueIcon):has(.simpleSelect-field-input:focus-visible):not(:has(.simpleSelect-field-input:read-only)) .simpleSelect-field-icon,.simpleSelect:not(.mod-noClueIcon):has(.simpleSelect-field-input[aria-expanded=true]):not(:has(.simpleSelect-field-input:read-only)) .simpleSelect-field-icon{display:none}.simpleSelect:not(.mod-noClueIcon):has(.simpleSelect-field-input:focus-visible):not(:has(.simpleSelect-field-input:read-only)) .simpleSelect-field-icon.mod-search,.simpleSelect:not(.mod-noClueIcon):has(.simpleSelect-field-input[aria-expanded=true]):not(:has(.simpleSelect-field-input:read-only)) .simpleSelect-field-icon.mod-search{display:inline-flex;transform:none}.simpleSelect:has(.simpleSelect-field-input[aria-invalid=true]){--components-simpleSelect-border-color: var(--pr-t-color-input-border-critical);--components-simpleSelect-background: var(--pr-t-color-input-background-critical);--components-simpleSelect-placeholder: var(--pr-t-color-input-text-placeholder-critical)}.simpleSelect:has(.simpleSelect-field-input:disabled){--components-simpleSelect-background: var(--pr-t-color-input-background-disabled);--components-simpleSelect-placeholder: var(--commons-disabled-placeholder);--components-simpleSelect-value-color: var(--pr-t-color-input-text-disabled);--components-simpleSelect-arrow-color: var(--pr-t-color-input-icon-disabled)}.simpleSelect:has(.simpleSelect-field-input:disabled) .simpleSelect-field{pointer-events:none}.simpleSelect.mod-S{--components-simpleSelect-font: var(--pr-t-font-body-S);--components-simpleSelect-padding: var(--pr-t-spacings-75);--components-simpleSelect-gap: var(--pr-t-spacings-75)}.simpleSelect.mod-S .simpleSelect-field-icon .lucca-icon{--icon-size: 1.25rem}.simpleSelect.mod-S .simpleSelect-field-clear.clear,.simpleSelect.mod-S .simpleSelect-field-clear:not(.clear){--components-clear-size: .75rem;--icon-size: .75rem}.simpleSelect.mod-XS{--components-simpleSelect-font: var(--pr-t-font-body-XS);--components-simpleSelect-padding: var(--pr-t-spacings-50);--components-simpleSelect-gap: var(--pr-t-spacings-50)}.simpleSelect.mod-XS .simpleSelect-field-icon .lucca-icon{--icon-size: 1rem}.simpleSelect.mod-XS .simpleSelect-field-clear.clear,.simpleSelect.mod-XS .simpleSelect-field-clear:not(.clear){--components-clear-size: .75rem;--icon-size: .75rem}.simpleSelect.mod-impersonation,.simpleSelect.mod-filterPill{inline-size:26.5rem;max-inline-size:calc(100vi - 2.5rem)}.simpleSelect.mod-impersonation .simpleSelect-field,.simpleSelect.mod-filterPill .simpleSelect-field{position:relative;z-index:1}.simpleSelect.mod-impersonation lu-simple-select-default-option.pr-u-ellipsis,.simpleSelect.mod-filterPill lu-simple-select-default-option.pr-u-ellipsis{white-space:normal!important}.simpleSelect.mod-impersonation .lu-picker-content,.simpleSelect.mod-filterPill .lu-picker-content{animation:none;box-shadow:none;border-radius:0;background-color:transparent;padding:var(--pr-t-spacings-50);margin:var(--pr-t-spacings-75) calc(var(--pr-t-spacings-100) * -1) calc(var(--pr-t-spacings-100) * -1)}.simpleSelect.is-searchFilled .simpleSelect-field-value{display:none}.simpleSelect.is-selected .simpleSelect-field-input::placeholder{opacity:0}.simpleSelect.is-selected.is-searchFilled .simpleSelect-field-input::placeholder{opacity:0}.simpleSelect.is-selected.is-searchFilled .simpleSelect-field-value{display:none}}@layer components{.clear{--components-clear-display: grid;--components-clear-size: 1rem;--components-clear-background: var(--palettes-800, var(--palettes-neutral-800));--components-clear-cross-color: var(--palettes-0, var(--palettes-neutral-0));--components-clear-background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' fill='none'%3E%3Cpath d='M5.80473 4.86192C5.54438 4.60157 5.12227 4.60157 4.86192 4.86192C4.60157 5.12227 4.60157 5.54438 4.86192 5.80473L7.05718 7.99999L4.86192 10.1953C4.60157 10.4556 4.60157 10.8777 4.86192 11.1381C5.12227 11.3984 5.54438 11.3984 5.80473 11.1381L7.99999 8.9428L10.1953 11.1381C10.4556 11.3984 10.8777 11.3984 11.1381 11.1381C11.3984 10.8777 11.3984 10.4556 11.1381 10.1953L8.9428 7.99999L11.1381 5.80473C11.3984 5.54438 11.3984 5.12227 11.1381 4.86192C10.8777 4.60157 10.4556 4.60157 10.1953 4.86192L7.99999 7.05718L5.80473 4.86192Z' fill='currentColor'/%3E%3C/svg%3E\");padding:0;border:0;inline-size:100%;background-color:transparent;color:inherit;text-align:start;display:block;font:inherit;cursor:pointer;display:var(--components-clear-display);grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:\"main\";align-items:normal;flex-shrink:0;inline-size:var(--components-clear-size);block-size:var(--components-clear-size);border-radius:var(--pr-t-border-radius-full)}.clear:before,.clear:after{content:\"\";grid-area:main}.clear:before{border-radius:var(--pr-t-border-radius-full);background-color:var(--components-clear-background)}.clear:after{-webkit-mask-image:var(--components-clear-background-image);mask-image:var(--components-clear-background-image);-webkit-mask-size:var(--components-clear-size);mask-size:var(--components-clear-size);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:var(--components-clear-cross-color)}.clear:hover{--components-clear-cross-color: var(--palettes-0, var(--palettes-neutral-0));--components-clear-background: var(--palettes-700, var(--palettes-neutral-700))}.clear:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px;border-radius:50%}.clear:active{--components-clear-background: var(--palettes-900, var(--palettes-neutral-900))}.clear .lucca-icon{display:none}}@layer mods{.clear.mod-S{--components-clear-size: .75rem;--icon-size: .75rem}.clear.mod-inverted{--components-clear-cross-color: var(--palettes-800, var(--palettes-neutral-800));--components-clear-background: var(--palettes-0, var(--palettes-neutral-0))}.clear.mod-inverted:hover{--components-clear-background: var(--palettes-50, var(--palettes-neutral-50))}.clear.mod-inverted:active{--components-clear-background: var(--palettes-100, var(--palettes-neutral-100))}.clear[disabled]{cursor:default;--components-clear-cross-color: var(--palettes-neutral-500)}.clear[disabled],.clear[disabled]:hover,.clear[disabled]:active{--components-clear-background: var(--palettes-neutral-300)}.clear[hidden],.filterPill[disabled] .clear,.filterPill:not(.is-filled) .clear,.textfield-input[disabled] .clear,.textfield-input:not(.is-filled) .clear{--components-clear-display: none}.multiSelect.is-selected:has(.multipleSelect-clear) .clear{--components-clear-display: grid}}\n"], dependencies: [{ kind: "directive", type: _LuOptionOutletDirective, selector: "[luOptionOutlet]", inputs: ["luOptionOutlet", "luOptionOutletValue", "luOptionShowNull"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: InputDirective, selector: "[luInput]", inputs: ["luInputStandalone"] }, { kind: "directive", type: FilterPillDisplayerDirective, selector: "[luFilterPillDisplayer]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "lu-icon, pr-icon", inputs: ["icon", "alt", "size", "color", "AI"] }, { kind: "component", type: ClearComponent, selector: "lu-clear", inputs: ["intl", "size", "disabled", "palette", "inverted"], outputs: ["onClear"], exportAs: ["luClearer"] }, { kind: "directive", type: PortalDirective, selector: "[luPortal]", inputs: ["luPortal", "luPortalContext"] }, { kind: "directive", type: _PresentationDisplayDefaultDirective, selector: "[luPresentationDisplayDefault]" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: LuSimpleSelectInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuSimpleSelectInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lu-simple-select', host: {
                         class: 'simpleSelect',
@@ -419,7 +433,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                             provide: FILTER_PILL_INPUT_COMPONENT,
                             useExisting: forwardRef(() => LuSimpleSelectInputComponent),
                         },
-                    ], encapsulation: ViewEncapsulation.None, template: "<div class=\"simpleSelect-field\">\n\t<span class=\"simpleSelect-field-prefix\">\n\t\t@if (prefix()) {\n\t\t\t<ng-container *luPortal=\"prefix()\" />\n\t\t}\n\t</span>\n\t<input\n\t\tclass=\"simpleSelect-field-input\"\n\t\ttype=\"text\"\n\t\trole=\"combobox\"\n\t\taria-haspopup=\"listbox\"\n\t\t[attr.aria-activedescendant]=\"activeDescendant$ | async\"\n\t\t[attr.aria-expanded]=\"panelOpenSignal()\"\n\t\t[attr.aria-controls]=\"ariaControls\"\n\t\t[attr.placeholder]=\"inputPlaceholder ? inputPlaceholder : intl().placeholder\"\n\t\t[ngModel]=\"clue\"\n\t\t(ngModelChange)=\"clueChanged($event)\"\n\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t[readonly]=\"!searchable\"\n\t\t[disabled]=\"disabled$ | async\"\n\t\t(keyup.space)=\"inputSpace($event)\"\n\t\tluInput\n\t\t#inputElement\n\t\t[attr.autocomplete]=\"autocomplete()\"\n\t\t[attr.tabindex]=\"inputTabindex()\"\n\t\t[attr.aria-labelledby]=\"valueID\"\n\t/>\n\t<div class=\"simpleSelect-field-value\" [attr.id]=\"valueID\">\n\t\t<ng-container *ngTemplateOutlet=\"currentValueDisplayerTpl\" />\n\t</div>\n\t@if (!filterPillMode && !impersonation()) {\n\t\t@if (clearable() && hasValue() && (disabled$ | async) === false) {\n\t\t\t<lu-clear class=\"simpleSelect-field-clear\" (onClear)=\"clearValue($event); inputElement.focus()\">{{ intl().clear }}</lu-clear>\n\t\t}\n\t\t<lu-icon icon=\"arrowChevronBottom\" class=\"simpleSelect-field-icon\" />\n\t}\n\t<lu-icon icon=\"searchMagnifyingGlass\" class=\"simpleSelect-field-icon mod-search\" />\n</div>\n<ng-container #filterPillPanelAnchor />\n<ng-container *luFilterPillDisplayer>\n\t<ng-container *ngTemplateOutlet=\"currentValueDisplayerTpl\" />\n</ng-container>\n\n<ng-template #currentValueDisplayerTpl>\n\t<ng-container *luOptionOutlet=\"displayerTpl(); value: value\" />\n</ng-template>\n\n@if (!ignorePresentation()) {\n\t<ng-container *luPresentationDisplayDefault>\n\t\t@if (value) {\n\t\t\t<ng-container *ngTemplateOutlet=\"currentValueDisplayerTpl\" />\n\t\t} @else {\n\t\t\t<span aria-hidden=\"true\" data-content-before=\"\u2013\"></span>\n\t\t}\n\t</ng-container>\n}\n", styles: ["@layer components{.simpleSelect{--components-simpleSelect-font: var(--pr-t-font-body-M);--components-simpleSelect-padding: var(--pr-t-spacings-100);--components-simpleSelect-gap: var(--pr-t-spacings-100);--components-simpleSelect-background: var(--pr-t-color-input-background);--components-simpleSelect-value-color: var(--pr-t-color-input-text);--components-simpleSelect-border-color: var(--pr-t-color-input-border);--components-simpleSelect-placeholder: var(--pr-t-color-input-text-placeholder);--components-simpleSelect-arrow-color: var(--pr-t-color-input-icon);display:block}.simpleSelect-field{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;box-shadow:0 0 0 1px var(--components-simpleSelect-border-color);background-color:var(--components-simpleSelect-background);border-radius:var(--pr-t-border-radius-input);padding:var(--components-simpleSelect-padding);overflow:hidden;outline:none;cursor:pointer}.simpleSelect-field:hover{--components-simpleSelect-border-color: var(--pr-t-color-input-border-hover)}.simpleSelect-field-prefix{display:none}.simpleSelect-field-prefix:not(:empty){display:flex;margin-inline-end:var(--pr-t-spacings-50)}.simpleSelect-field-input{grid-column-start:2;grid-row-start:1;font:var(--components-simpleSelect-font);padding:0;background-color:transparent;color:var(--components-simpleSelect-value-color);border:0;outline:none;position:relative;z-index:1;min-inline-size:0;cursor:pointer}.simpleSelect-field-input::placeholder{color:var(--components-simpleSelect-placeholder)}.simpleSelect-field-value{grid-column-start:2;grid-row-start:1;inline-size:100%;font:var(--components-simpleSelect-font);color:var(--components-simpleSelect-value-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color var(--commons-animations-durations-fast) ease}.simpleSelect-field-clear{grid-column-start:-2;margin-inline-start:var(--components-simpleSelect-gap)}.simpleSelect-field-icon{grid-column-start:-1;margin-inline-start:var(--components-simpleSelect-gap);color:var(--components-simpleSelect-arrow-color);transition:transform var(--commons-animations-durations-standard) ease}.simpleSelect-field-icon .lucca-icon{--icon-size: 1.5rem}.simpleSelect-field-icon.mod-search{display:none}}@layer mods{.simpleSelect:has(.simpleSelect-field-input:focus-visible) .simpleSelect-field{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.simpleSelect:has(.simpleSelect-field-input:focus-visible) .simpleSelect-field-value{color:var(--components-simpleSelect-value-color)}.simpleSelect:has(.simpleSelect-field-input:focus-visible):has(.simpleSelect-field-input[aria-expanded=true]) .simpleSelect-field-value{color:var(--components-simpleSelect-placeholder)}.simpleSelect:has(.simpleSelect-field-input:focus-visible):has(.simpleSelect-field-input[aria-expanded=true]) .simpleSelect-field-icon{transform:rotate(180deg)}.simpleSelect:not(.mod-noClueIcon):has(.simpleSelect-field-input:focus-visible):not(:has(.simpleSelect-field-input:read-only)) .simpleSelect-field-icon,.simpleSelect:not(.mod-noClueIcon):has(.simpleSelect-field-input[aria-expanded=true]):not(:has(.simpleSelect-field-input:read-only)) .simpleSelect-field-icon{display:none}.simpleSelect:not(.mod-noClueIcon):has(.simpleSelect-field-input:focus-visible):not(:has(.simpleSelect-field-input:read-only)) .simpleSelect-field-icon.mod-search,.simpleSelect:not(.mod-noClueIcon):has(.simpleSelect-field-input[aria-expanded=true]):not(:has(.simpleSelect-field-input:read-only)) .simpleSelect-field-icon.mod-search{display:inline-flex;transform:none}.simpleSelect:has(.simpleSelect-field-input[aria-invalid=true]){--components-simpleSelect-border-color: var(--pr-t-color-input-border-critical);--components-simpleSelect-background: var(--pr-t-color-input-background-critical);--components-simpleSelect-placeholder: var(--pr-t-color-input-text-placeholder-critical)}.simpleSelect:has(.simpleSelect-field-input:disabled){--components-simpleSelect-background: var(--pr-t-color-input-background-disabled);--components-simpleSelect-placeholder: var(--commons-disabled-placeholder);--components-simpleSelect-value-color: var(--pr-t-color-input-text-disabled);--components-simpleSelect-arrow-color: var(--pr-t-color-input-icon-disabled)}.simpleSelect:has(.simpleSelect-field-input:disabled) .simpleSelect-field{pointer-events:none}.simpleSelect.mod-S{--components-simpleSelect-font: var(--pr-t-font-body-S);--components-simpleSelect-padding: var(--pr-t-spacings-75);--components-simpleSelect-gap: var(--pr-t-spacings-75)}.simpleSelect.mod-S .simpleSelect-field-icon .lucca-icon{--icon-size: 1.25rem}.simpleSelect.mod-S .simpleSelect-field-clear.clear,.simpleSelect.mod-S .simpleSelect-field-clear:not(.clear){--components-clear-size: .75rem;--icon-size: .75rem}.simpleSelect.mod-XS{--components-simpleSelect-font: var(--pr-t-font-body-XS);--components-simpleSelect-padding: var(--pr-t-spacings-50);--components-simpleSelect-gap: var(--pr-t-spacings-50)}.simpleSelect.mod-XS .simpleSelect-field-icon .lucca-icon{--icon-size: 1rem}.simpleSelect.mod-XS .simpleSelect-field-clear.clear,.simpleSelect.mod-XS .simpleSelect-field-clear:not(.clear){--components-clear-size: .75rem;--icon-size: .75rem}.simpleSelect.mod-impersonation,.simpleSelect.mod-filterPill{inline-size:26.5rem;max-inline-size:calc(100vw - 2.5rem)}.simpleSelect.mod-impersonation .simpleSelect-field,.simpleSelect.mod-filterPill .simpleSelect-field{position:relative;z-index:1}.simpleSelect.mod-impersonation lu-simple-select-default-option.pr-u-ellipsis,.simpleSelect.mod-filterPill lu-simple-select-default-option.pr-u-ellipsis{white-space:normal!important}.simpleSelect.mod-impersonation .lu-picker-content,.simpleSelect.mod-filterPill .lu-picker-content{animation:none;box-shadow:none;border-radius:0;background-color:transparent;padding:var(--pr-t-spacings-50);margin:var(--pr-t-spacings-75) calc(var(--pr-t-spacings-100) * -1) calc(var(--pr-t-spacings-100) * -1)}.simpleSelect.is-searchFilled .simpleSelect-field-value{display:none}.simpleSelect.is-selected .simpleSelect-field-input::placeholder{opacity:0}.simpleSelect.is-selected.is-searchFilled .simpleSelect-field-input::placeholder{opacity:0}.simpleSelect.is-selected.is-searchFilled .simpleSelect-field-value{display:none}}@layer components{.clear{--components-clear-display: grid;--components-clear-size: 1rem;--components-clear-background: var(--palettes-800, var(--palettes-neutral-800));--components-clear-cross-color: var(--palettes-0, var(--palettes-neutral-0));--components-clear-background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' fill='none'%3E%3Cpath d='M5.80473 4.86192C5.54438 4.60157 5.12227 4.60157 4.86192 4.86192C4.60157 5.12227 4.60157 5.54438 4.86192 5.80473L7.05718 7.99999L4.86192 10.1953C4.60157 10.4556 4.60157 10.8777 4.86192 11.1381C5.12227 11.3984 5.54438 11.3984 5.80473 11.1381L7.99999 8.9428L10.1953 11.1381C10.4556 11.3984 10.8777 11.3984 11.1381 11.1381C11.3984 10.8777 11.3984 10.4556 11.1381 10.1953L8.9428 7.99999L11.1381 5.80473C11.3984 5.54438 11.3984 5.12227 11.1381 4.86192C10.8777 4.60157 10.4556 4.60157 10.1953 4.86192L7.99999 7.05718L5.80473 4.86192Z' fill='currentColor'/%3E%3C/svg%3E\");padding:0;border:0;inline-size:100%;background-color:transparent;color:inherit;text-align:start;display:block;font:inherit;cursor:pointer;display:var(--components-clear-display);grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:\"main\";align-items:normal;flex-shrink:0;inline-size:var(--components-clear-size);block-size:var(--components-clear-size);border-radius:var(--pr-t-border-radius-full)}.clear:before,.clear:after{content:\"\";grid-area:main}.clear:before{border-radius:var(--pr-t-border-radius-full);background-color:var(--components-clear-background)}.clear:after{-webkit-mask-image:var(--components-clear-background-image);mask-image:var(--components-clear-background-image);-webkit-mask-size:var(--components-clear-size);mask-size:var(--components-clear-size);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:var(--components-clear-cross-color)}.clear:hover{--components-clear-cross-color: var(--palettes-0, var(--palettes-neutral-0));--components-clear-background: var(--palettes-700, var(--palettes-neutral-700))}.clear:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px;border-radius:50%}.clear:active{--components-clear-background: var(--palettes-900, var(--palettes-neutral-900))}.clear .lucca-icon{display:none}}@layer mods{.clear.mod-S{--components-clear-size: .75rem;--icon-size: .75rem}.clear.mod-inverted{--components-clear-cross-color: var(--palettes-800, var(--palettes-neutral-800));--components-clear-background: var(--palettes-0, var(--palettes-neutral-0))}.clear.mod-inverted:hover{--components-clear-background: var(--palettes-50, var(--palettes-neutral-50))}.clear.mod-inverted:active{--components-clear-background: var(--palettes-100, var(--palettes-neutral-100))}.clear[disabled]{cursor:default;--components-clear-cross-color: var(--palettes-neutral-500)}.clear[disabled],.clear[disabled]:hover,.clear[disabled]:active{--components-clear-background: var(--palettes-neutral-300)}.clear[hidden],.filterPill[disabled] .clear,.filterPill:not(.is-filled) .clear,.textfield-input[disabled] .clear,.textfield-input:not(.is-filled) .clear{--components-clear-display: none}.multiSelect.is-selected:has(.multipleSelect-clear) .clear{--components-clear-display: grid}}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, template: "<div class=\"simpleSelect-field\">\n\t<span class=\"simpleSelect-field-prefix\">\n\t\t@if (prefix(); as prefix) {\n\t\t\t<ng-container *luPortal=\"prefix\" />\n\t\t}\n\t</span>\n\t<input\n\t\tclass=\"simpleSelect-field-input\"\n\t\ttype=\"text\"\n\t\trole=\"combobox\"\n\t\taria-haspopup=\"listbox\"\n\t\t[attr.aria-activedescendant]=\"activeDescendant$ | async\"\n\t\t[attr.aria-expanded]=\"panelOpenSignal()\"\n\t\t[attr.aria-controls]=\"ariaControls\"\n\t\t[attr.placeholder]=\"inputPlaceholder ? inputPlaceholder : intl().placeholder\"\n\t\t[ngModel]=\"clue\"\n\t\t(ngModelChange)=\"clueChanged($event)\"\n\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t[readonly]=\"!searchable\"\n\t\t[disabled]=\"(disabled$ | async) ?? false\"\n\t\t(keyup.space)=\"inputSpace($event)\"\n\t\tluInput\n\t\t#inputElement\n\t\t[attr.autocomplete]=\"autocomplete()\"\n\t\t[attr.tabindex]=\"inputTabindex()\"\n\t\t[attr.aria-labelledby]=\"valueID\"\n\t/>\n\t<div class=\"simpleSelect-field-value\" [attr.id]=\"valueID\">\n\t\t<ng-container *ngTemplateOutlet=\"currentValueDisplayerTpl\" />\n\t</div>\n\t@if (!filterPillMode && !impersonation()) {\n\t\t@if (clearable() && hasValue() && (disabled$ | async) === false) {\n\t\t\t<lu-clear class=\"simpleSelect-field-clear\" (onClear)=\"clearValue($event); inputElement.focus()\">{{ intl().clear }}</lu-clear>\n\t\t}\n\t\t<lu-icon icon=\"arrowChevronBottom\" class=\"simpleSelect-field-icon\" />\n\t}\n\t<lu-icon icon=\"searchMagnifyingGlass\" class=\"simpleSelect-field-icon mod-search\" />\n</div>\n<ng-container #filterPillPanelAnchor />\n<ng-container *luFilterPillDisplayer>\n\t<ng-container *ngTemplateOutlet=\"currentValueDisplayerTpl\" />\n</ng-container>\n\n<ng-template #currentValueDisplayerTpl>\n\t<ng-container *luOptionOutlet=\"displayerTpl(); value: value\" />\n</ng-template>\n\n@if (!ignorePresentation()) {\n\t<ng-container *luPresentationDisplayDefault>\n\t\t@if (value) {\n\t\t\t<ng-container *ngTemplateOutlet=\"currentValueDisplayerTpl\" />\n\t\t} @else {\n\t\t\t<span aria-hidden=\"true\" data-content-before=\"\u2013\"></span>\n\t\t}\n\t</ng-container>\n}\n", styles: ["@layer components{.simpleSelect{--components-simpleSelect-font: var(--pr-t-font-body-M);--components-simpleSelect-padding: var(--pr-t-spacings-100);--components-simpleSelect-gap: var(--pr-t-spacings-100);--components-simpleSelect-background: var(--pr-t-color-input-background);--components-simpleSelect-value-color: var(--pr-t-color-input-text);--components-simpleSelect-border-color: var(--pr-t-color-input-border);--components-simpleSelect-placeholder: var(--pr-t-color-input-text-placeholder);--components-simpleSelect-arrow-color: var(--pr-t-color-input-icon);display:block}.simpleSelect-field{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;box-shadow:0 0 0 1px var(--components-simpleSelect-border-color);background-color:var(--components-simpleSelect-background);border-radius:var(--pr-t-border-radius-input);padding:var(--components-simpleSelect-padding);overflow:hidden;outline:none;cursor:pointer}.simpleSelect-field:hover{--components-simpleSelect-border-color: var(--pr-t-color-input-border-hover)}.simpleSelect-field-prefix{display:none}.simpleSelect-field-prefix:not(:empty){display:flex;margin-inline-end:var(--pr-t-spacings-50)}.simpleSelect-field-input{grid-column-start:2;grid-row-start:1;font:var(--components-simpleSelect-font);padding:0;background-color:transparent;color:var(--components-simpleSelect-value-color);border:0;outline:none;position:relative;z-index:1;min-inline-size:0;cursor:pointer}.simpleSelect-field-input::placeholder{color:var(--components-simpleSelect-placeholder)}.simpleSelect-field-value{grid-column-start:2;grid-row-start:1;inline-size:100%;font:var(--components-simpleSelect-font);color:var(--components-simpleSelect-value-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color var(--commons-animations-durations-fast) ease}.simpleSelect-field-clear{grid-column-start:-2;margin-inline-start:var(--components-simpleSelect-gap)}.simpleSelect-field-icon{grid-column-start:-1;margin-inline-start:var(--components-simpleSelect-gap);color:var(--components-simpleSelect-arrow-color);transition:transform var(--commons-animations-durations-standard) ease}.simpleSelect-field-icon .lucca-icon{--icon-size: 1.5rem}.simpleSelect-field-icon.mod-search{display:none}}@layer mods{.simpleSelect:has(.simpleSelect-field-input:focus-visible) .simpleSelect-field{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.simpleSelect:has(.simpleSelect-field-input:focus-visible) .simpleSelect-field-value{color:var(--components-simpleSelect-value-color)}.simpleSelect:has(.simpleSelect-field-input:focus-visible):has(.simpleSelect-field-input[aria-expanded=true]) .simpleSelect-field-value{color:var(--components-simpleSelect-placeholder)}.simpleSelect:has(.simpleSelect-field-input:focus-visible):has(.simpleSelect-field-input[aria-expanded=true]) .simpleSelect-field-icon{transform:rotate(180deg)}.simpleSelect:not(.mod-noClueIcon):has(.simpleSelect-field-input:focus-visible):not(:has(.simpleSelect-field-input:read-only)) .simpleSelect-field-icon,.simpleSelect:not(.mod-noClueIcon):has(.simpleSelect-field-input[aria-expanded=true]):not(:has(.simpleSelect-field-input:read-only)) .simpleSelect-field-icon{display:none}.simpleSelect:not(.mod-noClueIcon):has(.simpleSelect-field-input:focus-visible):not(:has(.simpleSelect-field-input:read-only)) .simpleSelect-field-icon.mod-search,.simpleSelect:not(.mod-noClueIcon):has(.simpleSelect-field-input[aria-expanded=true]):not(:has(.simpleSelect-field-input:read-only)) .simpleSelect-field-icon.mod-search{display:inline-flex;transform:none}.simpleSelect:has(.simpleSelect-field-input[aria-invalid=true]){--components-simpleSelect-border-color: var(--pr-t-color-input-border-critical);--components-simpleSelect-background: var(--pr-t-color-input-background-critical);--components-simpleSelect-placeholder: var(--pr-t-color-input-text-placeholder-critical)}.simpleSelect:has(.simpleSelect-field-input:disabled){--components-simpleSelect-background: var(--pr-t-color-input-background-disabled);--components-simpleSelect-placeholder: var(--commons-disabled-placeholder);--components-simpleSelect-value-color: var(--pr-t-color-input-text-disabled);--components-simpleSelect-arrow-color: var(--pr-t-color-input-icon-disabled)}.simpleSelect:has(.simpleSelect-field-input:disabled) .simpleSelect-field{pointer-events:none}.simpleSelect.mod-S{--components-simpleSelect-font: var(--pr-t-font-body-S);--components-simpleSelect-padding: var(--pr-t-spacings-75);--components-simpleSelect-gap: var(--pr-t-spacings-75)}.simpleSelect.mod-S .simpleSelect-field-icon .lucca-icon{--icon-size: 1.25rem}.simpleSelect.mod-S .simpleSelect-field-clear.clear,.simpleSelect.mod-S .simpleSelect-field-clear:not(.clear){--components-clear-size: .75rem;--icon-size: .75rem}.simpleSelect.mod-XS{--components-simpleSelect-font: var(--pr-t-font-body-XS);--components-simpleSelect-padding: var(--pr-t-spacings-50);--components-simpleSelect-gap: var(--pr-t-spacings-50)}.simpleSelect.mod-XS .simpleSelect-field-icon .lucca-icon{--icon-size: 1rem}.simpleSelect.mod-XS .simpleSelect-field-clear.clear,.simpleSelect.mod-XS .simpleSelect-field-clear:not(.clear){--components-clear-size: .75rem;--icon-size: .75rem}.simpleSelect.mod-impersonation,.simpleSelect.mod-filterPill{inline-size:26.5rem;max-inline-size:calc(100vi - 2.5rem)}.simpleSelect.mod-impersonation .simpleSelect-field,.simpleSelect.mod-filterPill .simpleSelect-field{position:relative;z-index:1}.simpleSelect.mod-impersonation lu-simple-select-default-option.pr-u-ellipsis,.simpleSelect.mod-filterPill lu-simple-select-default-option.pr-u-ellipsis{white-space:normal!important}.simpleSelect.mod-impersonation .lu-picker-content,.simpleSelect.mod-filterPill .lu-picker-content{animation:none;box-shadow:none;border-radius:0;background-color:transparent;padding:var(--pr-t-spacings-50);margin:var(--pr-t-spacings-75) calc(var(--pr-t-spacings-100) * -1) calc(var(--pr-t-spacings-100) * -1)}.simpleSelect.is-searchFilled .simpleSelect-field-value{display:none}.simpleSelect.is-selected .simpleSelect-field-input::placeholder{opacity:0}.simpleSelect.is-selected.is-searchFilled .simpleSelect-field-input::placeholder{opacity:0}.simpleSelect.is-selected.is-searchFilled .simpleSelect-field-value{display:none}}@layer components{.clear{--components-clear-display: grid;--components-clear-size: 1rem;--components-clear-background: var(--palettes-800, var(--palettes-neutral-800));--components-clear-cross-color: var(--palettes-0, var(--palettes-neutral-0));--components-clear-background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' fill='none'%3E%3Cpath d='M5.80473 4.86192C5.54438 4.60157 5.12227 4.60157 4.86192 4.86192C4.60157 5.12227 4.60157 5.54438 4.86192 5.80473L7.05718 7.99999L4.86192 10.1953C4.60157 10.4556 4.60157 10.8777 4.86192 11.1381C5.12227 11.3984 5.54438 11.3984 5.80473 11.1381L7.99999 8.9428L10.1953 11.1381C10.4556 11.3984 10.8777 11.3984 11.1381 11.1381C11.3984 10.8777 11.3984 10.4556 11.1381 10.1953L8.9428 7.99999L11.1381 5.80473C11.3984 5.54438 11.3984 5.12227 11.1381 4.86192C10.8777 4.60157 10.4556 4.60157 10.1953 4.86192L7.99999 7.05718L5.80473 4.86192Z' fill='currentColor'/%3E%3C/svg%3E\");padding:0;border:0;inline-size:100%;background-color:transparent;color:inherit;text-align:start;display:block;font:inherit;cursor:pointer;display:var(--components-clear-display);grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:\"main\";align-items:normal;flex-shrink:0;inline-size:var(--components-clear-size);block-size:var(--components-clear-size);border-radius:var(--pr-t-border-radius-full)}.clear:before,.clear:after{content:\"\";grid-area:main}.clear:before{border-radius:var(--pr-t-border-radius-full);background-color:var(--components-clear-background)}.clear:after{-webkit-mask-image:var(--components-clear-background-image);mask-image:var(--components-clear-background-image);-webkit-mask-size:var(--components-clear-size);mask-size:var(--components-clear-size);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:var(--components-clear-cross-color)}.clear:hover{--components-clear-cross-color: var(--palettes-0, var(--palettes-neutral-0));--components-clear-background: var(--palettes-700, var(--palettes-neutral-700))}.clear:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px;border-radius:50%}.clear:active{--components-clear-background: var(--palettes-900, var(--palettes-neutral-900))}.clear .lucca-icon{display:none}}@layer mods{.clear.mod-S{--components-clear-size: .75rem;--icon-size: .75rem}.clear.mod-inverted{--components-clear-cross-color: var(--palettes-800, var(--palettes-neutral-800));--components-clear-background: var(--palettes-0, var(--palettes-neutral-0))}.clear.mod-inverted:hover{--components-clear-background: var(--palettes-50, var(--palettes-neutral-50))}.clear.mod-inverted:active{--components-clear-background: var(--palettes-100, var(--palettes-neutral-100))}.clear[disabled]{cursor:default;--components-clear-cross-color: var(--palettes-neutral-500)}.clear[disabled],.clear[disabled]:hover,.clear[disabled]:active{--components-clear-background: var(--palettes-neutral-300)}.clear[hidden],.filterPill[disabled] .clear,.filterPill:not(.is-filled) .clear,.textfield-input[disabled] .clear,.textfield-input:not(.is-filled) .clear{--components-clear-display: none}.multiSelect.is-selected:has(.multipleSelect-clear) .clear{--components-clear-display: grid}}\n"] }]
         }], propDecorators: { intl: [{ type: i0.Input, args: [{ isSignal: true, alias: "intl", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], impersonation: [{ type: i0.Input, args: [{ isSignal: true, alias: "impersonation", required: false }] }], filterPillPanelAnchorRef: [{ type: i0.ViewChild, args: ['filterPillPanelAnchor', { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
 
 /**